/*

Threme Excerpt: Tienda
Description: M��dulo CSS para ecommerce

*/

/* Carrito */

h5#filtrar {display: flex;flex-direction: row; align-items: center; justify-content: center; gap: .5rem}
i.filtro-custom {
    background-image: url('../../assets/img/icono-filtros.svg');
    background-size: contain;
    height: 1.5rem;
    width: 1.5rem;
    background-repeat: no-repeat;
    min-width: 1.5rem;
    display: inline-block;
}

h5#filtrar:hover i { mix-blend-mode:color-dodge; }

span.carrito {
	cursor: pointer;
	position: fixed;
	right: 3rem;
	top:3rem;
	max-width: 1rem;
	min-height: 1rem;
	padding: .75rem;
	color: var(--icono-carrito);
	z-index: 8;
	-moz-transition: all 0.2s ease-in;
	-webkit-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
}


span.carrito #numItems {
    border-radius: 50%;
    font-size: 9px;
    background-color: var(--circulo-carrito);
    color: var(--texto-circulo-carrito);
    height: .75rem;
    width: .75rem;
    padding: 1px 0 0 1px;
    text-align: center;
    display: none; flex-direction: column; align-items: center; justify-content: center;
    position: absolute;
    right: 3px; bottom: 7px;
}

span.carrito #numItems.act {
    display: flex;
}

span.carrito:hover,
span.carrito.empty:hover {
	color: var(--boton-3) !important;
	-moz-transition: all 0.2s ease-in;
	-webkit-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
}

span.carrito.rempty {
	color: var(--color-secundario)
}

span.carrito i {
	font-size: 16pt;
}

.cart-action {
	display: inline-flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 1rem !important;
}

.cart-action select {
	width: 80px
}

.cart-action button {margin: 0 !important}

#cart {
background-color: var(--bg-carrito);
position: fixed;
right: 0rem;
top: 0;
-webkit-transition: 600ms;
-moz-transition: 600ms;
-o-transition: 600ms;
-ms-transition: 600ms;
transition: 600ms;
min-width: 27rem;
width: max(30vw, 27rem);
min-height: 100vh;
padding: 0;
z-index: 8;
color: var(--texto-carrito);
box-shadow: 0px 115px 32px 0px rgba(0, 0, 0, 0.00), 0px 74px 29px 0px rgba(0, 0, 0, 0.01), 0px 41px 25px 0px rgba(0, 0, 0, 0.05), 0px 18px 18px 0px rgba(0, 0, 0, 0.09), 0px 5px 10px 0px rgba(0, 0, 0, 0.10);
}

#cart.hide {
/* display:none; */
right: -30vw;
-webkit-transition: 600ms;
-moz-transition: 600ms;
-o-transition: 600ms;
-ms-transition: 600ms;
transition: 600ms;
}

#cart :is(h3,h4,span,p) {color: var(--color-contraste)}
#cart .contenedor {padding: 6rem 2rem 8rem; gap: 1rem; min-height: calc(100vh - 14rem); flex-direction: column; justify-content: start; width: calc(100% - 4rem)}
#cart .flex {display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%;}
#cart .flex i {font-size: 12pt}
#cart .flex.totales {flex-wrap: wrap; align-items: start; text-transform: uppercase; gap: 1rem;}
#cart .flex.totales h4 {font-size: 1rem; font-weight: 400; flex: 1 1 45%;}
#cart .flex.totales h4:nth-child(even){text-align: right;}
#cart .item h4 {}
#cart .item h4.precio {flex-direction: row; display: flex; font-size: 12px; gap: .5rem; align-items: center; justify-content: end; position: relative;}

#cart .encabezado.flex {align-items: start;}
#cart.activo { min-width: calc(50vw - 8rem); right: 0; padding: 4rem; background-color: transparent; }
#cart.activo h5 span.carrito {display: none;}
#cart.activo .contenedor { padding: 8rem 0; width: 100% }
#cart .contenedor.hide {display: none;}


#cart figure.thumb {max-width: 90px; height: calc(90px/1.06)}

#cart form {display: inline-flex; flex-wrap: wrap; gap: 1rem; flex-direction: column; align-items: flex-start; justify-content: space-between; align-self: stretch; height: 100%; flex: auto; overflow: hidden;}
#cart form .body {overflow: hidden; max-height: calc(100vh - 24rem)}
#cart form .wrap {overflow-y: scroll; flex-wrap: nowrap !important}

.pedido .item {padding: 0 0 1rem; border-bottom: 1px solid #ccc; display: inline-flex; flex-direction: row; gap: 1rem; width: 100%; margin-bottom: .5rem;  justify-content: space-between; align-items: flex-start;}
.pedido .item h4 {flex: 1 1 70%; text-transform: uppercase; font-weight: 400; font-size: 12pt}
.pedido .item button.remove {
	border: 0; cursor: pointer; position: relative; 
	border-radius: 50%;
	-webkit-appearance: none;
	background-color: var(--boton-4) !important;
	color: var(--texto-boton-4);
	/* elimina estilo nativo en iOS */
	appearance: none;
	padding: 4px 6px;
}

.pedido .item button.remove:hover {
	background-color: var(--hover-boton-3) !important;
color: var(--texto-hover-boton-3) !important;
}
.pedido .item button.remove:hover i {
	color: var(--texto-hover-boton-3) !important
}


.pedido .item button.remove {
  -webkit-appearance: none;     /* elimina estilo nativo iOS */
  background: transparent;      /* asegura fondo limpio */
}

/* quita el aro/fondo azul en foco o tap */
.pedido .item button.remove:focus,
.pedido .item button.remove:active {
  outline: none;
  box-shadow: none;
  background: transparent;
}

/* opcional: desactiva destello azul al tocar en iOS */
.pedido .item button.remove {
  -webkit-tap-highlight-color: transparent;
}

.pedido .item button.remove i {color: var(--color-contraste);}
.pedido .item button.remove:hover i {color: var(--color-principal);}

.columna.pedido { border-radius: 8px; width: 100%; height: auto; min-height: auto; }

section .columna.pedido,
#cart.activo .columna.pedido {background-color: var(--color-claro); padding: 4rem 2rem; width: calc(100% - 4rem)}

#cart button.nuevaorden {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	background: var(--boton-3);
	color: var(--texto-boton-3);
	border: 1px solid var(--boton-3) !important;
	border: 0;
	width: 100%;
	padding: 1rem 2rem;
	border-radius: 4px;
	font-size: 14px;
	text-transform: uppercase;
	font-family: var(--main-font) !important;
	font-weight: 400;
	cursor: pointer;	
}

#cart button.nuevaorden:hover {border: 1px solid var(--color-contraste) !important;}
#cart button.nuevaorden:hover span{color: var(--color-claro) !important}

#cart .botones span.boton {flex: auto; width: 100%; border-radius: 0 !important; }
#cart .botones span.boton a {padding: 1rem 2rem; flex: auto; width: 100%;border-radius: 0 !important }
#cart .botones span#seguir a {font-size: 14px;
background: var(--boton-2);
color: var(--texto-boton-2);
border: 1px solid var(--boton-2) !important;
}
#cart .botones span#seguir:hover a {
	background-color: var(--color-contraste) !important;
	color: var(--color-claro) !important;
	border-color: var(--color-contraste) !important;
}

#cart button.nuevaorden span {color: var(--texto-boton-2);}

#cart button.nuevaorden:hover {
	background: var(--hover-boton-2);
	color: var(--texto-hover-boton-2);
}

#cart .flex.botones {flex-direction: column; flex-wrap: wrap;}


section#carrito .encabezado {text-align: center;}
section#carrito .pedido .item h4.quantity {flex: auto; width: auto; justify-content: center;}
section#carrito .pedido .item.header h4 {color: var(--color-encabezados); font-weight: 500;}
section#carrito .pedido .item.header h4.quantity {text-align: center;}
section#carrito .pedido .item {display: grid; grid-template-columns: repeat(10,1fr);}
section#carrito .pedido .item figure {grid-column: span 1;}
section#carrito .pedido .item h4 {grid-column: span 2; font-size: 16px; line-height: 1.2; font-weight: 400;}
section#carrito .pedido .item h4.producto {grid-column: span 3}
section#carrito .pedido .item h4 input {max-width: 40px; text-align: center;}
section#carrito .pedido .item h4 button {max-width: 40px; padding: 1rem 0; margin: 0; align-self: stretch; min-height: 40px; background-color: var(--color-principal)}
section#carrito .pedido .item h4.subtotal {text-align: right;}

section#carrito .fila .totales {align-items: end;}
section#carrito .fila .totales h3 {font-weight: 700; color: var(--color-principal);}
section#carrito .fila .totales h6 {margin: 0; color: var(--color-contraste)}



section.post.producto .navegacion-producto {flex: 0 1 100%;}
section.post.producto .navegacion-producto a {font-size: 10pt; font-weight: 300; width: auto !important;}


/* Checkout */
section#pedido { justify-content: flex-start; }

section#pedido .columna.formatos {background-color: var(--blanco); align-self: stretch;}
section#pedido form input,
section#pedido form select {text-transform: none; letter-spacing: 0;}

section#pedido form input::placeholder {letter-spacing: 0;}

section#pedido h2 {color: var(--color-contraste);  font-size: 24px}
/* section#pedido .contenedor {width: calc(50% - 4rem);} */
section#pedido form {display: inline-flex; flex-direction: column; flex-wrap: wrap; gap: 2rem; font-size: 12pt;}
section#pedido .bloque {display: flex; flex-direction: row; gap: 1rem; width: 100%; flex-wrap: wrap;}
section#pedido .bloque.orden {border: 1px solid var(--color-contraste);padding: 2rem; width: calc(100% - 4rem)}
section#pedido .bloque.orden.titulo {flex-direction: column !important; align-items: center; text-align: center; gap: 0 !important}
section#pedido .bloque.orden.titulo h2 {flex: auto !important}
section#pedido .bloque.orden p,
section#pedido .bloque.orden ol {font-size: 14px; font-weight: 300; color: var(--color-contraste)}
section#pedido .bloque.orden.contacto {gap: 2rem;}
section#pedido .bloque.orden.contacto .columna.dos {padding: 0; gap: .5rem;}
section#pedido .bloque.orden.contacto .columna.dos h2 {flex: auto; margin-top: 2rem}

section#pedido .bloque h2 {flex: 1 0 100%; margin-bottom: 0rem}
section#pedido form .half {width: calc(50% - 42px); flex: inherit}
section#pedido form .quarter {width: calc(25% - 42px); flex: inherit}
section#pedido form .pago-tarjeta .quarter {flex: auto}
section#pedido form .trescuartos {width: calc(75% - 42px); flex: inherit}

section#pedido form label {position: relative; }
section#pedido form label.full {width: calc(100% - 8px);}
section#pedido form label.half {width: calc(50% - 8px);}
section#pedido form label.trescuartos {width: calc(75% - 12px);}
section#pedido form label.quarter {width: calc(25% - 4px);}
section#pedido form label input{width: calc(100% - 34px);}
section#pedido form label select {width: 100%;}

section#pedido form .full {width: calc(100% - 34px); flex: inherit}
section#pedido form select.half {width: calc(50% - 8px)}

section#pedido form label.has-error input,
section#pedido form label.has-error select {border-color: #e53935;}
span.field-error {
	color: #e53935;
	font-size: 12px;
}

section#pedido form .campos-contacto label span.field-error,
section#pedido form .campos-tarjeta label span.field-error,
section#pedido form .campos-envio label span.field-error {
	 background-color: #fbfbfb;
	position: absolute;
    top: -6px;
    left: 1rem;
    padding: 0 4px;
}

section#pedido form .firma label span.field-error {
	position: absolute;
		top: 4rem;
		width: 100%;
		left: 0;
	}

section#pedido form .terminos span.field-error {
	margin: .5rem 0 0 0; text-align: center; flex: 0 1 100%;
}

section#pedido form#formato_envio {display: none;}
section#pedido form#formato_envio.ready {display: inline-flex}

section#pedido .contenedor {padding: 0; width: min(100%, 1440px); gap: 0}
section#pedido .columna.dos {padding: 4rem;}

section#pedido .columna.pedido {gap: .75rem; position: sticky; top: 0; background-color: transparent; border-radius: 0; }
.pedido .item h4 { line-height: 1.2; flex: 0 1 70%}
#cart .pedido .item .flex.producto {align-items: start;gap: .5rem}
#cart .pedido .item .flex.colores {justify-content: start; gap: .5rem}

.pedido .item .producto h4 {flex: auto;}
.pedido .item .producto h6 {text-transform: none;}

section#pedido .columna.pedido .item {padding-bottom: 1.5rem}
section#pedido .columna.pedido h4.precio {text-align: right; flex: 1 1 15%}
section#pedido .columna.pedido hr {border-top: 0px solid var(--color-contraste); margin: 1rem 0}

section#pedido .metodopago h2 {margin-bottom: 1rem}

section.pagina .columna.dos.pedido h2 {margin: 0 0 10px}


section#pedido .columna.pedido .fila {display: inline-flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; flex-wrap:wrap }

section#pedido .columna.pedido .fila.total {color: #333; font-weight: 700; border-top: 1px solid #ccc; padding-top: 2rem}
section#pedido .columna.pedido .fila h4 {font-weight: 400; font-size: 10pt; text-transform: uppercase}
section#pedido .columna.pedido .fila.total h4 {font-weight: 700;}
section#pedido .columna.pedido .fila h4 em {font-style: normal; margin-left: 10px; font-size: 12px; font-weight: 700;}

section#pedido figure.thumb {height: min(12vh, 180px); max-width: 90px}

section#pedido .columna.pedido .fila.tarjeta {display: none; gap: 1rem}
section#pedido #tarjetaPreview {background-color: var(--bg-tarjeta); 
	min-height: 120px; flex-direction: column; gap: 1rem; align-items: end; justify-content: center;
	width: calc(50% - 4rem); padding: 2rem;}
		section#pedido #tarjetaPreview span {text-transform: none;}
		:is(section#pedido #tarjetaPreview h6, section#pedido #tarjetaPreview span) {color: var(--texto-tarjeta)}
section#pedido .columna.pedido .fila.tarjeta.act {display: flex; }


section#confirmacion .columna.pedido.uno {flex-direction: row;}
section#confirmacion .columna.dos {gap: 1rem;}
section#confirmacion .columna.dos.pedido { flex-direction: column; gap:0}


section .pedido label {font-weight: 600; margin-top: 20px; display: inline-block}
/* section .pedido select {max-width: 40%} */



section .columna.formatos a.edit {font-weight: 600; text-decoration: underline;}
section span.total {display: inline-block !important}

section .columna.formatos .formularios {position: relative; vertical-align: top}

.metodopago,
form#formato_envio,
form#formato_pago {display: none; }
span.metodo {display: inline-block !important}


/* Estilos mínimos para los tres módulos (ajusta a tu diseño) */
.qty-control { display:inline-flex; align-items:center; gap: 0; border:1px solid #ddd; border-radius:0; padding:0; }
.qty-btn { align-self: stretch; border:0;background: transparent !important; color: var(--color-contraste) !important; border-radius: 0; padding:0 .65rem !important; font-size:1rem; line-height:1; margin: 0 !important; border-radius:4px; cursor:pointer; min-height: 1.5rem; font-size: 12px}
button.qty-btn:hover {background-color: var(--color-secundario) !important; color: var(--color-principal) !important}
.qty-btn:disabled { opacity:.5; cursor:not-allowed; }
.qty-input { 
	width: 2rem;
		text-align: center;
		border: 0;
		outline: none;
		font-weight: 400;
		font-family: var(--main-font);
		background: transparent;
		border-radius: 0;
		color: var(--color-contraste);
		font-size: 12px;
}
/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox */
input[type=number] {
	-moz-appearance: textfield;
}


button.qty-btn:disabled {background-color: var(--color-claro) !important}