/**
Theme Name: Ziraketan
Author: Innwit
Author URI: https://www.innwit.com
Description: Tema creado para Ziraketan basado en Astra
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ziraketan
Template: astra
*/

.ast-container, .ast-container-fluid {
    margin-left: auto;
    margin-right: auto;
    padding-left: 0px;
    padding-right: 0px;
}
.filtros-col label {
	font-family: "Outfit", Sans-serif;
	display: block;
}
.filtros-col label.title {
	font-family: "Outfit", Sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 18px;
	margin-bottom: 20px;
}
.filtros-col label.subtitle {
	font-family: "Outfit", Sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 14px;
	margin-top: 20px;
}
.filtros-col select {
	font-family: "Outfit", Sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 12px;
}
.productos-listado {
	font-family: "Outfit", Sans-serif;
    display: flex;
}
.productos-listado .no-productos {
	font-family: "Outfit", Sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 16px;
	line-height: 1.3em;
	text-align:center;
	font-weight: 700;
    color: #000000;
}
.producto-item {
	display: block;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
	padding: 0 10px 20px 10px;
}
.producto-item .card {
	border-radius:0px;
	border: solid 0px #FFFFFF;
}
.producto-item .info-product {
	font-family: "Outfit", Sans-serif;
	display: block;
    background-color: #FFFFFF;
    text-align: left;
	padding: 20px;
}
.producto-item .info-product .producto-nombre {
	font-family: "Outfit", Sans-serif;
	display: block;
    color: #000000;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2em;
}
.producto-item .info-product .producto-infos {
	font-family: "Outfit", Sans-serif;
	display: block;
    color: #C5C5C5;
	font-weight: 500;
	font-size: 12px;
	line-height: 1.2em;
}
.producto-item .info-product p {
	margin-bottom: 0px;
}
.producto-item .info-product .btn {
	margin-top: 20px;
	width: 100%;
	padding: 10px 20px;
	border: solid 1px #000000;
	background-color: #FFFFFF;
	color: #000000;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 12px;
	line-height: 1.2em;
}
.producto-item .info-product .btn:hover {
	background-color: #000000;
	color: #FFFFFF;
}
.producto-item .info-product .ico-marcas {
	display: flex;
}
.producto-item h3 {
    font-size: 18px;
    margin-bottom: 10px;
}
.producto-item span {
    color: #0073aa;
    font-weight: bold;
}
.paginacion {
	font-family: "Outfit", Sans-serif;
    color: #000000;
	font-weight: 500;
	font-size: 12px;
	line-height: 30px;
	text-transform: uppercase;
}
.paginacion a.pagina {
	font-family: "Outfit", Sans-serif;
    color: #C5C5C5;
	font-weight: 500;
	font-size: 12px;
	line-height: 1.2em;
    cursor: pointer;
    padding: 8px 12px;
    background: #FFFFFF;
	text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    margin: 0 10px;
}
.paginacion a.pagina.activo {
    background: #000000;
    color: #fff;
    font-weight: bold;
}
.paginacion a.pagina:hover {
    background: #000000;
    color: #fff;
}

/* Contenedor principal de la ficha de producto */
.producto-ficha {
    width: 100%; /* Limita el ancho máximo */
    margin: 0 auto; /* Centra la ficha */
	margin-top: 100px;
	background-color: #FFFFFF;
}

/* Contenedor de las dos columnas (imagen + información) */
.producto-contenedor {
    display: flex; /* Utiliza Flexbox para las columnas */
    gap: 30px; /* Espacio entre las columnas */
}

/* Estilo para la columna de la imagen */
.producto-imagen {
    flex: 1; /* La columna de la imagen ocupa 50% del ancho */
    text-align: right; /* Centra la imagen */
	background-color: #FFFFFF;
}

.producto-imagen img {
    max-width: 100%; /* La imagen no excederá el tamaño de la columna */
    height: auto; /* Mantiene la relación de aspecto */
}

/* Estilo para la columna de la información */
.fichaproducto .column.producto-info {
    flex: 1; /* La columna de la información ocupa 50% del ancho */
    padding: 80px 80px;
	background-color: #FFFFFF;
}
.fichaproducto .column {
	padding: 0px;
}
.fichaproducto {
	display:flex;
	margin:90px 0;
}
.fichaproducto .breadcrumbs {
	display:flex;
	margin:0px 0 40px 0;
}
.fichaproducto .breadcrumbs .migas a {
	text-align:right;
	font-weight: 400;
    color: #9D9D9D !important;
	text-decoration: none;
}
.fichaproducto .breadcrumbs .migas a:hover {
    color: #000000 !important;
}
.fichaproducto .breadcrumbs .migas {
	font-family: "Outfit", Sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 14px;
	line-height: 1.3em;
	text-align:right;
	font-weight: 400;
    color: #9D9D9D;
}
.fichaproducto .breadcrumbs .migas .active {
	font-weight: 700;
    color: #000000;
}


/* Estilo adicional para los textos */
.fichaproducto .producto-info h1 {
	font-family: "Outfit", Sans-serif;
	display: block;
    color: #000000;
	font-weight: 700;
	font-size: 26px;
	line-height: 1.2em;
    margin-bottom: 30px;
}
.producto-info p.product-desc {
	font-family: "Outfit", Sans-serif;
	display: block;
    color: #9D9D9D;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.3em;
    margin: 0px 0 20px 0;
}
.producto-info p.product-colores label, .producto-info p.product-tallas label {
	font-family: "Outfit", Sans-serif;
	display: block;
	margin-bottom:10px;
    color: #000000;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.3em;
	text-transform: uppercase;
}
.producto-info p.product-colores {
	border-top: solid 1px #9D9D9D;
	border-bottom: solid 1px #9D9D9D;
	padding:20px 0;
	font-family: "Outfit", Sans-serif;
	display: block;
    color: #9D9D9D;
	font-weight: 400;
	font-size: 12px;
	line-height: 1.3em;
    margin: 20px 0 20px 0;
}
.producto-info p {
	font-family: "Outfit", Sans-serif;
	display: block;
    color: #CDCDCD;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.2em;
    font-size: 1rem;
    margin: 5px 0;
}
.producto-info img.icomarca {
	width:100px;
    margin: 20px 0 20px 0;
}
a.btn-volver-atras {
	padding: 10px 20px;
	border: solid 0px #000000;
	background-color: #FFFFFF;
	color: #CDCDCD;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 12px;
	line-height: 1.2em;
}
.producto-info .btn.fichatecnica {
	margin-top: 20px;
	padding: 10px 20px;
	border: solid 1px #000000;
	background-color: #FFFFFF;
	color: #000000;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 12px;
	line-height: 1.2em;
}
.producto-info .btn.fichatecnica:hover {
	background-color: #000000;
	color: #FFFFFF;
}

/* Asegúrate de que las columnas sean apiladas en pantallas pequeñas */
@media (max-width: 768px) {
	.productos-listado {
		margin-top:40px;
	}
	.producto-item .info-product .ico-marcas img {
		margin-top: 20px;
		max-width: 70px;
	}
    .producto-contenedor {
        flex-direction: column; /* Apila las columnas en dispositivos pequeños */
    }

    .producto-imagen, .producto-info {
        flex: none; /* Ambas columnas ocuparán el 100% del ancho */
        margin-bottom: 20px; /* Espacio entre las secciones */
    }
}

.filtro-productos {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* Espaciado entre columnas */
    margin-bottom: 20px;
}

.filtro-productos .columna-filtro {
    flex: 1; /* Cada columna ocupa el mismo ancho */
    max-width: 30%; /* Asegura que sean 3 columnas */
}

.filtro-productos label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 14px;
}

.filtro-productos select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}
/* Estilo de los filtros en desktop */
.filtro-productos-accordion {
    margin-bottom: 20px;
}

.accordion-content {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.accordion-content .columna-filtro {
    flex: 1;
    max-width: 30%; /* Tres columnas en desktop */
}

.accordion-content label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 14px;
}

.accordion-content select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}
    .accordion-toggle {
        display: none;
        width: 100%;
        text-align: left;
        background-color: #0073aa;
        color: #fff;
        padding: 10px;
        font-size: 16px;
        border: none;
        cursor: pointer;
        margin-bottom: 10px;
        border-radius: 4px;
    }

/* Acordeón en móviles */
@media screen and (max-width: 768px) {
    .accordion-toggle {
        display: block;
        width: 100%;
        text-align: left;
        background-color: #0073aa;
        color: #fff;
        padding: 10px;
        font-size: 16px;
        border: none;
        cursor: pointer;
        margin-bottom: 10px;
        border-radius: 4px;
    }
	.productos-ajax-container {
		margin: 0 20px;
	}

    .accordion-content {
        display: none; /* Ocultar contenido del acordeón inicialmente */
        flex-direction: column; /* Apilar filtros verticalmente */
        gap: 15px;
    }

    .accordion-content.active {
        display: flex; /* Mostrar contenido del acordeón cuando esté activo */
    }

    .accordion-content .columna-filtro {
        max-width: 100%; /* Una columna en móvil */
    }
}
/* Este elemento debe tener "position: relative" */
div#is-relative{
  max-width: 420px;
  position: relative;
}

/* El icono debe ser "position: absolute"
 * Ademas le damos un "display: block" y lo posicionamos */
#icon{
  position: absolute;
  display: block;
  bottom: .5rem;
  right: 1rem;
  
  user-select: none;
  cursor: pointer;
}
input.input{
  padding-right: 2.5rem;
}

.producto-contenedor {
    display: flex;
}
.producto-miniaturas {
    display: flex;
    flex-direction: row;
    gap: 20px;
	margin:20px 20px;
	text-align:center;
}
.producto-miniaturas img {
    width: 60px;
    cursor: pointer;
    border: 0px solid #ddd;
    transition: transform 0.2s;
}
.producto-miniaturas img:hover {
    /*transform: scale(1.1);*/
	cursor:pointer;
}
.producto-imagen img {
    max-width: 100%;
    border: 0px solid #ddd;
}

span.bolo img {
    margin-right: 5px;
    margin-bottom: 5px;
    width: 25px;
    height: auto;
}
.col-marca, .col-familia  {
	padding: 0 40px 0 0;
}
a.menumarca, a.menufamilia {
	color:#FFFFFF;
	display: block;
	font-family:Outfit, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	text-align: left;
	line-height: 1.2em;
	padding: 3px 0;
	border-bottom: solid 1px #FFFFFF52;
	text-decoration:none;
}
a.menumarca:hover, a.menufamilia:hover {
	color:rgb(255, 63, 0);
}
body.ficha-producto header {
	background-color: #E8501D;
    background-image: url(https://www.ziraketan.com/wp-content/uploads/2025/02/ziraketan-catalogo.webp);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.search-container {
	display: flex;
	align-items: center;
}
.search-input {
	padding: 8px;
	font-size: 12px !important;
	border: 1px solid #ccc;
	border-radius: 4px 0 0 4px !important;
	outline: none;
}
.search-button {
	padding: 8px 12px;
	font-size: 12px;
	border: 0px solid #000000;
	background-color: #000000;
	color: white;
	cursor: pointer;
	height:40px;
	border-radius: 0 4px 4px 0 !important;
}
.search-button:hover {
	background-color: #FF3F00;
}
#filtrosAccordion {
	font-family: "Outfit", Sans-serif;
    display: block;
    color: #000000;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2em;
}
.accordion-button {
	padding: 10px 20px;
}
.accordion-button:after {
	color: #FFFFFF;
}
.accordion-button:not(.collapsed) {
	background-color: #FFFFFF;
}
#resetFiltrosLink {
	background-color: #FF3F00;
	color: #FFFFFF !important;
	padding: 5px 20px;
	font-size: 12px;
	text-transform: uppercase;
	text-decoration: none;
	margin-top: 5px;
}
#resetFiltrosLink:hover {
	background-color: #000000;	
}