@charset utf-8;
/*
Theme Name: Breta Homemade
Author: Ricardo Juárez
Author URI: http://rjvv.com/
Version: 1.0
License: GNU/GPL Version 2 or later. http://www.gnu.org/licenses/gpl.html
Copyright: (c) 2020 Ricardo Juárez
*/

:root {
		--body: 16px;
		--body2: 18px;
	--linebody: 20px;
	--lsbody: 0.45px;
			
	--medium: 30px;
	--linemedium: 30px;
	--lsmedium: 0;
	
	--medium2: 20px;
	--linemedium2: 20px;
	--lsmedium2: 0;
	
	--big: 40px;
	--linebig: 40px;
	--lsbig: -0.01em;

	--huge: 60px;
	--linehuge: 60px;
	--lshuge: -0.03em;

	--xhuge: 80px;
	--linexhuge: 80px;
	--lsxhuge: -0.03em;



    --small: 14px;
	--linesmall: 16px;
	--lssmall: 0.01em;
    
    
    .post-content --linesmall: 20px;


    --line: 1;
    --bold: 'eesti', sans-serif;
    --sans: 'Satoshi', sans-serif;
    --serif: 'clearface';
    --light: 400;
    --regular: 300;
    --border: 1px solid var(--contrast);
    
    
    --rad:6px;
    --rads:6px;
   --pad: 20px;
   --padb: 100px;

   --primary:#FCF9F2;
   --contrast:#262626;
   --accent: orangered;
   --brown:  #AC6754;
	--shade: #CDC4B4;
	--shade2: #F0EADE;
	
	--success: #5cb85c;
	--warning: #f0ad4e;
}

.ui-accordion-header,
.ui-accordion-content,
.small{
    font-size: var(--small);
    line-height: var(--linesmall);
    letter-spacing: var(--lssmall);
        font-family: var(--sans);    
	
}
.smallitalics, .wp-block-image :where(figcaption){
    font-size: var(--small);
    line-height: var(--small);
	font-style: italic;
    font-weight: 200;
    font-family: var(--serif);  
    }


.body {
    font-size: var(--body);
    line-height: var(--linebody);
    letter-spacing: var(--lsbody);
}
.padded{
	padding: var(--pad);
}
.paddedv{
	padding: var(--pad) 0;
}
.medium, .block-text h3 {
    font-size: var(--medium);
    line-height: var(--linemedium);
    letter-spacing: var(--lsmedium);
    }


.big{
    font-size: var(--big);
    line-height: var(--linebig);
    letter-spacing: var(--lsbig);
    font-weight: 200;
    font-family: var(--serif);
}


.huge {
    font-size: var(--huge);
    line-height: var(--linehuge);
    letter-spacing: var(--lshuge);
    font-weight: 200;
    font-family: var(--serif);
}

.xhuge, .block-text h2 {
    font-size: var(--xhuge);
    line-height: var(--linexhuge);
    letter-spacing: var(--lsxhuge);
    font-weight: 200;
    font-family: var(--serif);
    text-align: center;
}

.sans{
	font-family: var(--sans);
}
.serif{
	font-family: var(--serif) !important;
}
.bold{
	font-weight: 500;
}

.boldfont{
	font-family: var(--bold);
}

.uppercase{
	text-transform: uppercase;
}



.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}


*{
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

}
html, body
{
	font-weight: 300;
margin:0;
font-size:100%;
width:100%;
background-color: var(--primary);

     }
     
     	html { margin-top: 0px !important; }
	* html body { margin-top: 0px !important; }
	@media screen and ( max-width: 782px ) {
		html { margin-top: 0px !important; }
		* html body { margin-top: 0px !important; }
	}

body {
         display: flex;
  min-height: 100vh;
  flex-direction: column;     
margin:0;
    font-weight: normal;

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; 
	text-rendering: geometricPrecision;
	-webkit-font-smoothing: subpixel-antialiased;
font-size: var(--body);
font-family: var(--sans);
color: var(--contrast);
}

h1, h2{
	font-family: var(--serif);
	font-size: var(--big);
	letter-spacing: var(--lsbig);
}
h3, h4{
		
}
h1, h2, h3, h4{
	font-weight: 300;
}

h1, h2, h3, h4{
	margin-bottom: 0;
color: var(--negro);
line-height: var(--line);
}

.product-gal-wrap{
	display: flex;
}
.preheader{
	height: 32px;
	font-size: var(--small);
	color: var(--primary);
	background-color: var(--contrast);
}

.header-cont{
	position: sticky;
	background-color: var(--primary);
	top: 0;
	width: 100%;
		z-index: 999999;	
}

header.header{
	width: 100%;
    padding: 10px var(--pad);
	display: grid;
	grid-template-columns: 1fr 80px 1fr;
	align-items: center;
	}
	.menu-footer-container{
		width: 100%;
	}


footer{
	background-color: var(--shade);
	display: grid;
	grid-template-columns: 3fr 1fr 1fr 1fr;
	width: 100%;
		font-size: var(--small);
	z-index: 9999;
	padding: var(--pad)}
footer .txt{
	padding: 10px var(--pad);
	width: 100%;
	border-bottom: 1px solid;
}
.copy{
	padding: 5px var(--pad);
	width: 100%;
}

/* El copyright va en su propia fila, debajo de todo: dentro de la columna
   del logo descuadraba la linea de abajo de los menus. */
footer > .copy{
	grid-column: 1 / -1;
}
/* Logo y menus apoyados en la misma linea de abajo. */
.footer-logo{
	align-self: end;
}
.footer-logo img{
	display: block;
}
.footer-titulo{
	font-family: var(--bold);
	margin-bottom: 10px;
	font-size: var(--body) !important;
}
.logo{
	display: inline-block;
	margin: 0 auto;
}


.page-template-default .post-content{
padding-bottom:var(--padb);
}
.logo img{
height: 32px;}

/* Menu de movil: tres rayas de 1px que se cruzan en X al abrir.
   Se ensena en css/responsive.css, a partir de 780px hacia abajo. */
.menu-burger{
	display: none;
	position: relative;
	width: 22px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.menu-burger span{
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: var(--contrast);
	transition: transform 0.3s ease, opacity 0.2s ease;
}
.menu-burger span:nth-child(1){
	top: calc(50% - 6px);
}
.menu-burger span:nth-child(2){
	top: 50%;
}
.menu-burger span:nth-child(3){
	top: calc(50% + 6px);
}

/* Las de los extremos se juntan en el centro y giran; la del medio se va. */
.menu-burger.abierta span:nth-child(1){
	transform: translateY(6px) rotate(45deg);
}
.menu-burger.abierta span:nth-child(2){
	opacity: 0;
}
.menu-burger.abierta span:nth-child(3){
	transform: translateY(-6px) rotate(-45deg);
}

.logolink{
	width: 165px;
    margin-top: -7px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--body);
}
.carro{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	border:1px solid;
	border-radius: 4px;
}
/* Bolsa del carrito. El grosor de 1px lo fija non-scaling-stroke, asi que el
   icono se puede escalar sin que engorde la linea; overflow visible porque
   ese pixel se sale medio punto del viewBox. */
.icono-bolsa{
	display: block;
	height: 19px;
	width: auto;
	aspect-ratio: 44.16 / 60.85;
	overflow: visible;
}
.icono-bolsa path{
	fill: none;
	stroke: currentColor;
	stroke-width: 1;
	stroke-miterlimit: 10;
	vector-effect: non-scaling-stroke;
}
/* El cuerpo va relleno del fondo para tapar el final del asa. */
.icono-bolsa .icono-bolsa-cuerpo{
	fill: var(--primary);
}

.carro a{
	    font-size: var(--small);
    line-height: var(--small);
    letter-spacing: var(--lssmall);
        font-family: var(--sans);    

	padding: 8px 10px;
display: flex;
align-items: center;
gap: 6px;
}

/* .title solo coloca: el tamano lo pone la clase de escala
   (.big / .huge / .xhuge) que acompane en el marcado. */
.title{
	max-width: 800px;
	margin: 20px 0;
}

.full{
	position: relative;
	/* Antes iba por proporcion (16/9), que en pantallas anchas estiraba la
	   portada hasta donde hiciera falta. Ahora manda el alto de la ventana y
	   la foto se recorta sola, que ya va con object-fit. */
	height: 80vh;
}
.subtitle{
font-weight: 400;	
}

/* Boton de contorno: al pasar por encima se rellena. */
.boton{
	transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
	font-weight: 400;
font-size: var(--body);
  line-height: var(--linebody);
  letter-spacing: var(--lsbody);
  font-family: var(--bold);
  padding: 10px 18px;
  border: 1px solid;
  border-radius: 4px;
}
/* El boton de la marca en la ficha viene marcado como .small en el html:
   con los tamanos de arriba se le iba, asi que ahi mandan los suyos. */
.boton.small{
	font-size: var(--small);
	line-height: var(--linesmall);
	letter-spacing: var(--lssmall);
}

.banners{
display: flex;
justify-content: space-between;
gap: 5px;
padding: var(--pad);
align-items: flex-start;
}

.banner{
	flex-basis: calc(50% - 10px);
	position: relative;
}



.full img, .banner img{
	object-fit:cover;
	height: 100%;
	width: 100%;
}
.full-title{
	top: 0;
	left: 0;
	padding: 40px;
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	text-align: center;
	justify-content: flex-end;
	align-items: center;
	flex-direction: column;
}

.colors-select{
	display: flex;
}
.color-item{
width: 32px;
height: 32px;
margin: 0 2px;
border: 1px solid var(--primary);
position: relative;
border-radius: 4px;
}
.color-item img{
    overflow: hidden;
border-radius: 100%;
/* La miniatura viene a 150px: sin esto se sale de la caja. */
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.single .colors-select{
	padding: 10px 0;
}

.footer-menu{
	display: flex;
	/* En columna para que el titulo quede encima de la lista; el bloque
	   entero se sigue apoyando abajo, a la altura del copyright. */
	flex-direction: column;
	justify-content: flex-end;
}

.color-item:hover:before, .color-active:before {
    content: " ";
    position: absolute;
    z-index: 0;
    width: 34px;
    height: 34px;
    top: -3px;
    left: -3px;
    right: 0px;
    bottom: 1px;
    border: 1px solid var(--contrast);
	border-radius: 5px;
}
/* Los mismos swatches en el listado, redondos y encima de la foto. La caja
   va al ancho de la tarjeta con la proporcion del recorte (la pone el PHP en
   un style), asi cubre justo la imagen y las bolitas caen en su esquina de
   abajo a la izquierda. Sin pointer-events la caja se comeria el clic de la
   tarjeta entera: solo lo recuperan las bolitas. */
.colors-loop{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	align-items: flex-end;
	padding: 8px;
	pointer-events: none;
}
.colors-loop .color-item{
	width: 12px;
	height: 12px;
	border-radius: 100%;
	pointer-events: auto;
}
.colors-loop a{
	pointer-events: auto;
	line-height: 0;
}
/* El aro del de 32px lleva medidas fijas y no cuadra aqui: 12 + 3 por lado.
   box-sizing porque el reset del tema no alcanza a los pseudoelementos. */
.colors-loop .color-item:hover:before,
.colors-loop .color-active:before{
box-sizing: border-box;
  width: 14px;
  height: 14px;
  top: -2px;
  left: -2px;
  right: auto;
  bottom: auto;
  border-radius: 100%;
}

.franja.post-content{
	background-color: var(--light);
	padding: 40px var(--pad);
	margin-top: 20px;
}
.franja *{
	max-width: 600px;
	margin: 0px auto;
}

.franja a{
	text-align: center;
	display: table;
	margin: 0px auto;
}

div.main{
	flex: 1;
}
.mt{
	margin-top: var(--pad);
}

.boton-simple::after{
	content: ' →';

}

.page-template-portada div.main{
	padding: 0;
}

[id^="menu-categorias"]{
display: flex;
justify-content: center;
align-items: center;
padding: 0 var(--pad) var(--pad);
}

[id^="menu-categorias"] li{
margin: 0 10px;
}

header .menu-item a{
	padding: 0;
}

/* Enlaces de cabecera y pie: marron al pasar por encima. El icono de la
   bolsa va con currentColor, asi que cambia con el texto. */
header .menu-item a,
[id^="menu-footer"] li a,
.carro a{
	transition: color 0.2s ease;
}
header .menu-item a:hover,
[id^="menu-footer"] li a:hover,
.carro a:hover{
	color: var(--brown);
}
/* El boton se rellena al pasar por encima. El borde no lleva color propio,
   asi que sigue a currentColor y se va al contraste con el texto. */
.boton:hover{
	background-color: var(--primary);
	color: var(--contrast);
	border-color: var(--primary);
}
.current-menu-item a{
}


[id^="menu-main"], [id^="menu-secondary"]{
	gap:var(--pad);
	display: flex;
}
[id^="menu-footer"]{
	pointer-events: all;
}
[id^="menu-main"] li a, [id^="menu-secondary"] li a{
	display: inline-block;
    font-size: var(--small);
    line-height: var(--small);
    letter-spacing: var(--lssmall);
		font-family: var(--sans);

}
.nav{
	display: flex;
	gap:var(--pad);
	align-items: center;
}

.nav-right{
	justify-content: flex-end;
}
.nav-left{
	
}



[id^="menu-footer"] li{
	font-size: var(--small);
padding: 3px;
}
[id^="menu-footer"] {
}

.column-block{
	    line-height: 1.3;
}
.column-block h1{
		font-size: var(--big);
		margin-bottom: 20px;
		
}


.sub-menu{
	display: none;
	position: absolute;
	background-color: var(--primary);
	height: 100vh;
	width:	calc(((100% - 20px) / 4) + 20px);
	top:0;
	left: 0;
	padding: 40px 20px;
	z-index: -1;
}
.sub-menu li{
	margin: 8px 0 0;
	display: block;
}



.reverse{
	flex-direction: row-reverse;
}


input[type="submit"]{
	padding: 10px 10px 5px;
	margin-bottom: 20px;
	 -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     display: inline-block;
     background-color: var(--primary);
     font-family: var(--sans);
     color: var(--contrast);
     border: var(--border);
     cursor: pointer;
     width: 100%;
     border-radius: 0px;
     cursor: pointer;
     outline: none;
     font-size: var(--body);
     text-align: left;
background-image: url('images/arrow_b.svg');
background-repeat: none;
background-size: 40px;
background-position: right 10px center;
background-repeat: no-repeat;
}

.flex{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.column{
	line-height: 1.3;
}

.page-template-portada .main{
	padding: 0 0 20px;
}

.post-content, #main{
/* 	padding: var(--pad) var(--pad) 0px; */
}
.swiper-home.post-content, .mobile.post-content{
	padding: 0;
}

.woocommerce.archive #main{
	padding: 0;
}

.woocommerce-checkout .main, .woocommerce-cart .main{
	padding: var(--pad);
}


.post-content li:before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  margin-top: 9px;
  border-radius: 100%;
  background-color: var(--shade);
position: absolute;
margin-left: -16px;
}

.post-content li{
	position: relative;
}

/* Las listas numeradas llevan su numero nativo en vez de la bolita.
   El list-style va en el li porque lessframework pone li{list-style:none}. */
.post-content ol{
	padding-left: 20px;
}
.post-content ol li{
	list-style: decimal;
}
.post-content ol li:before{
	content: none;
}

.products-wrap .products{
padding: calc(var(--pad) / 2);
}
.related{
	padding-bottom: calc(var(--pad) * 2);
}

/* Relacionados en pestañas. El panel es el mismo scroller horizontal del
   carrusel de la portada, asi que aqui solo van las pestañas. */
.related-tabs{
	display: flex;
	/* En una sola linea: si los titulos no caben, la tira se desplaza. */
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-behavior: smooth;
	gap: var(--pad);
	padding: calc(var(--pad) * 2) var(--pad) calc(var(--pad) / 2) ;
}
.related-tabs::-webkit-scrollbar{
	display: none;
}
.related-tab{
	border: 0;
	padding: 0;
	background: none;
	cursor: pointer;
	font-family: var(--bold);
	font-size: var(--big);
	line-height: var(--linebig);
	color: var(--shade);
	transition: color 0.2s ease;
	white-space: nowrap;
}
.related-tab:hover,
.related-tab.activa{
	color: var(--contrast);
}
.related-panel[hidden]{
	display: none;
}


.columns{
	display: flex;
	justify-content: space-between;
}
.column{
	flex-basis: calc((100% - 20px) / 2);
}
.quarter.column{
	flex-basis: calc((100% - 20px) / 4);
}
.threequarter.column{
	flex-basis: calc(((100% - 20px) / 4) * 3);
}

.infinite-scroll-request, .infinite-scroll-last, .infinite-scroll-error{
	display: none;
}
.page-load-status{
	  animation: fade-in 0.5s;
	padding: 0 var(--pad) 60px;
}

.infinite-scroll-request{
	color: var(--success);
  animation: blink-animation 0.8s steps(5, start) infinite;
  -webkit-animation: blink-animation 0.8s steps(5, start) infinite;	
}



.woocommerce-cart .woocommerce-shipping-totals th{
	vertical-align: baseline;
	padding: 10px 0;
}
.woocommerce-cart .the_content p.woocommerce-shipping-destination{
	text-align: left !important;
}
.woocommerce-cart ul#shipping_method {
    padding: 10px 0;
    text-align: right;
    margin-bottom: 0;
}
.woocommerce-cart div.woocommerce{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
/* Los avisos de WooCommerce salen flotando arriba a la derecha. El fondo va
   en cada aviso, no en el contenedor: si no, cuando no hay ninguno se queda
   una caja de color colgando encima del titulo. */
.woocommerce-notices-wrapper{
	position: fixed;
	width: 300px;
	right: var(--pad);
	margin-top: var(--pad);
	z-index: 9999999999;
}

.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info{
	background-color: var(--shade2);
	border-radius: var(--rad);
	padding: var(--pad);
	margin: 0 0 10px;
	font-family: var(--bold);
	font-size: var(--small);
	line-height: var(--linesmall);
	color: var(--contrast);
}

/* El "Ver carrito" viene con clase .button: aqui es un enlace, no un boton. */
.woocommerce-notices-wrapper .button{
	display: inline-block;
	margin: 6px 0 0;
	padding: 0;
	width: auto;
	background: none;
	border: 0;
	color: var(--contrast);
	font-family: var(--bold);
	font-size: var(--small);
	text-decoration: underline;
	transition: color 0.2s ease;
}

.woocommerce-notices-wrapper .button:hover{
	color: var(--brown);
	background: none;
}
.woocommerce .woocommerce-cart-form, .woocommerce .cart-collaterals{
	flex-basis: calc(50% - 10px);
}

table, td, th{
	font-size: var(--small);
font-weight: normal;

}
th{
	text-align: left;
}

td.product-thumbnail{
	width: 120px;
}
td.product-name{
	width: 40%;
}
td.product-quantity, td.product-price, td.product-subtotal, th.product-quantity, th.product-price, th.product-subtotal, tr.cart-subtotal td, tr.order-total td, th.product-total, td.product-total{
	text-align: right;
}
th, td{
	padding: 2px;
}
.wc-proceed-to-checkout a{
	text-decoration: none !important;
}

.wc-proceed-to-checkout{
	text-align: right;
}
#order_review{
	font-size: var(--small);
	}

.post-content ul.wc_payment_methods{
	margin: 10px 0 20px;
	padding-left: 0;
	line-height: 1.4;
	}
	.form-row.place-order{
	line-height: 1.4;		
	}
ul.wc_payment_methods li:before{
content: '';
}


.wc_payment_methods li label{
	font-weight: 500;
}
.payment_box label{
	text-transform: none !important;
	font-weight: 300 !important;
}

.post-content .woocommerce h2, 
.post-content .woocommerce h3{
	text-align: left;
}
.woocommerce-terms-and-conditions-wrapper{
	margin: 10px 0 0;
}

.about_paypal{
	color: var(--contrast);
}

.woocommerce-checkout .payment_method_paypal label img{
display: none;
}

.pad{
	padding: var(--pad) var(--pad) 0;
}

a.checkout-button, #order_review button{
		margin-top: 20px;
}
.cart-empty{
	padding: 20px 0;
	align-self: center;
}
.return-to-shop{
	align-self: center;
	display: flex;
	align-items: center;
}

button{
	cursor: pointer;
	font-family: var(--sans);
}

a.checkout-button, #order_review button, a.wc-backward{	
	padding: 10px 20px;
	border: none;
float: right;
font-family: var(--sans);	outline: none;
	background-color: var(--contrast);
	color: var(--primary);
	display: inline-block;
	
	font-family: var(--sans);
	font-size: var(--body);
}
.woocommerce .cart-collaterals .shop_table{
	margin-top: 12px;
	width: 100%;
}
tr.cart-subtotal, #order_review tr.cart_item, #order_review .shop_table thead{
	border-bottom: 1px solid var(--contrast);
}
tr.cart-subtotal *, #order_review tr.cart_item *, #order_review .shop_table thead *, tr.order-total *{
padding: 10px 0 5px;}

.woocommerce-page table.cart td.actions .coupon label {
    display: none;
}
.actions{
	padding-top: 20px;

}
table.cart td.actions .coupon button{
color: var(--contrast);
}

ul#shipping_method{
	text-align: left !important;
}
.the_content .woocommerce li{
	list-style: none;
}

table.cart td.actions .coupon input{
	width: 50%;
	font-size: var(--small);
	margin-bottom: 0;
}
table.cart td.actions .coupon {
align-items: center;
width: 60%;
    display: flex;
    float: left;
    }
.actions>.button {
    float: right;
}
.actions button, .woocommerce-form-coupon button{
	background-color: transparent;
	padding: 0 0 10px;
	border:none;
	
	margin-left: 20px;
	border-bottom: 1px solid;
}

.add_to_cart_button:focus, .add_to_cart_button:active{
	border-bottom: 1px solid;
}
.added_to_cart{
	margin-left: 20px;
}

.woocommerce a.button.loading::after{
content: 'Loading...';
position: absolute;
	color: var(--success);
	background: var(--primary);
/*
  animation: blink-animation 0.8s steps(5, start) infinite;
  -webkit-animation: blink-animation 0.8s steps(5, start) infinite;	
*/
margin-left: 20px;}

.grecaptcha-badge{
	display: none !important;
}




.price-from{
	font-size: var(--small);
}

/* Los botones grandes de carrito y checkout van como el add to cart del
   single. El del carrito es un bloque de WooCommerce y el de checkout vive
   dentro de #order_review, asi que hacen falta selectores mas concretos para
   ganarles sin recurrir a !important. */
.single_add_to_cart_button, .add_to_cart_button,
a.checkout-button,
.woocommerce-cart .wc-block-components-button.wc-block-cart__submit-button,
.woocommerce-checkout .wc-block-components-checkout-place-order-button,
.woocommerce-checkout #place_order{
	pointer-events: all;
	background-color: var(--contrast);
	font-family: var(--bold);
	width: 100%;
	text-align: left;
	padding: var(--pad) 24px;
	border:none;
	border-radius: var(--rad);
	display: inline-block;
	font-size: var(--body);
	outline: none;
	color: var(--primary);
	margin: var(--pad) 0;
	/* El del carrito es un <a> subrayado y el de checkout va flotado. */
	text-decoration: none;
	float: none;
	transition: background-color 0.2s ease;
}
.single_add_to_cart_button:hover,
.add_to_cart_button:hover,
a.checkout-button:hover,
body.woocommerce-page .wc-block-components-button.wc-block-cart__submit-button:hover,
body.woocommerce-page .wc-block-components-checkout-place-order-button:hover,
body.woocommerce-page .woocommerce-checkout #place_order:hover{
	background-color: var(--brown);
}
 


/* El color lo pone ahora la caja de .woocommerce-notices-wrapper. */

.quantity label{
display: none;}
.quantity input{
	width: 45px;
	text-align: right;
}

.woocommerce-form-coupon{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
		font-size: var(--small);
			padding: 0px 0 20px;
}
.woocommerce-checkout h3{
	font-size: var(--big);
	margin-bottom: 20px;
}
.woocommerce-checkout label, form label{
	font-size: var(--small);
	
	margin-bottom: 8px;
}

.tax-pages, .archive .woocommerce-pagination, .paginas h1{
	display: none;
}
form p{
	margin-bottom: 0 !important;
}
.cart_totals h2{
	margin-bottom: 10px !important;
}


/* El AGOTADO ya no cuelga del precio: va en el hueco del boton de compra
   (ver .agotado-single al final de la hoja). */
.product.outofstock .variations_form{
	display: none;
}

.woocommerce-form-coupon-toggle{
	padding: 0 0 20px;
		font-size: var(--small);
}
.woocommerce-form-coupon p:first-of-type{
	width: 100%;
	margin-bottom: 10px !important;
}
.woocommerce-form-coupon .form-row-first, .woocommerce-form-coupon .form-row-last{
width: 48% !important;
}

.woocommerce-form-coupon input{
	margin: 0 20px 0 0 !important;
	font-size: var(--small);
	}

#customer_details{
width: calc(50% - 10px);
float: left;
margin-right: 20px;
}

#order_review{
	width: calc(50% - 10px);
	float: right;
}
.shop_table{
    line-height: 1.3;	width: 100%;
}
.payment_box{
	margin: 10px 0;
	line-height: 1.4;
	color: var(--contrast);
}
.payment_box.payment_method_stripe{
	color: var(--contrast);
}

h1.paged{
		display: none !important;
	}
	h1.paged+.term-description{
		display: none !important;
	}
	
@keyframes fade-in {
    from {opacity: 0;

	  }
    to {opacity: 1; 
}
}
.product-title h2, .woocommerce-loop-product__title{
	font-size: var(--body2);
	font-family: var(--bold);
	margin-top: 9px;
	font-weight: 300;
}

.woocommerce-Price-amount{
}

ul.products{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

ul.products:after {
    content: '';
    flex: auto;
}


li.product {
	    position: relative;
	flex-basis:calc((100% - (var(--pad) * 6)) / 6);
	  animation: fade-in 0.5s;
  margin: calc(var(--pad) / 2);
}


        #main.large-view .product {
	flex-basis:calc((100% - (var(--pad) * 4)) / 4);
        }
        #main.small-view .product {
	flex-basis:calc((100% - (var(--pad) * 6)) / 6);
        }
        

 .product-wrap{
	width: 100%;
	margin: 0px auto;
	flex-wrap: wrap;
}

 .single div.product .summary .ppc-button-wrapper{
	 display: none;
 }
/*
 .single div.product .summary{
	 position: sticky;
	 padding: 10px var(--pad);
	 	border-top: 1px solid;
    width: 100%;
    background-color: white;
	 bottom: 0;
	 display: flex;
	 align-items: center;
	 justify-content: space-between;
}
*/

.product-desc{
}

.sticky-column{
	position: sticky;
	top:64px;
	flex-basis: calc(100% / 3);
		height: fit-content;
		padding: 0 var(--pad) var(--pad) 0;
}

/* Cuando la columna no cabe en la ventana, sticky juega en contra: se clava
   por arriba y lo que le sobra por abajo (un apartado del acordeon abierto,
   los avisos) no se llega a ver nunca, porque la galeria sigue subiendo y
   ella no. Entonces scrollea como cualquier otra cosa. La clase la pone
   js/product.js, que es quien puede medir. */
.sticky-column.sin-pegar{
	position: static;
}

.product-gallery{
padding:6px var(--pad) var(--pad);
	flex-basis: calc((100% / 3) * 2);
	transition: all 0.3s ease;
	}

/* Masonry a 2 columnas. Se excluye la galeria de movil, que es un Swiper y
   comparte la clase .product-gallery: las columnas le partirian el wrapper. */
.product-gallery:not(#product-gallery-mobile){
	column-count: 2;
	column-gap: 5px;
	}
.product-gallery img{
	width: 100%;
	transition: all 0.3s ease;
	}
.product-gallery:not(#product-gallery-mobile) img{
	display: block;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	margin-bottom: 5px;
	}

.titulo{
}









.product-gallery img.big-img{
	flex-basis: calc((((100% - (var(--pad) * 2)) / 3) * 2) + var(--pad));
	width: calc((((100% - (var(--pad) * 2)) / 3) * 2) + var(--pad));
}

.pl-checkout-carrier-image{
	margin-right: 0px !important;
	width: auto !important;
}
.pl-image-wrapper{
	width: auto !important;
}



.woocommerce-variation-description{
	font-size: var(--small);
	margin: 5px 0 0;
}

.variations_form.cart .variations th.label{
	display: none;
}
.woo-variation-swatches .variable-items-wrapper{
	display: flex;
}
.woo-variation-swatches .wvs-style-rounded.variable-items-wrapper .variable-item:not(.radio-variable-item){
	border-radius: var(--rads);
	width: auto;
	border: 1px solid;
	font-size: var(--body);
	display: flex;
	justify-content: center;
	cursor: pointer;
	align-items: center;
	margin-right: 10px;
	user-select:none;
	height:32px;
	padding: 0 var(--pad);
}
.menu-mobile-cont{
	width: 100%;
	position: absolute;
	text-align: center;
	pointer-events: none;
	left: 0;
}
.menu-mobile{
	padding: 10px var(--pad);
	font-family: var(--bold);
	border:1px solid;
	border-radius: 100%;
	display: inline-block;
	pointer-events: all;
	user-select:none;
}

.woo-variation-swatches .wvs-style-rounded.variable-items-wrapper .variable-item.selected, .woo-variation-swatches .wvs-style-rounded.variable-items-wrapper .variable-item:hover{
	background-color: var(--brown);
	border-color: var(--brown);
}
.woo-variation-swatches .wvs-style-rounded.variable-items-wrapper .variable-item:active{
	transform: rotate(-15deg);
}


.white{
	background-color: white;
}

.rounded{
	text-align: center;
	border-radius: 100%;
}

.mensaje {
height: 32px;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.marquee {
  display: inline-block;
  padding: 0 20px;
  margin-right: 25vw;
}
.marquee a{
	text-decoration: underline;
	font-weight: 500;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to { 
    transform: translateX(-100%);
  }
}

.designedby{
	position: absolute;
	top:var(--pad);
	left: var(--pad);
	}


.designer{
	position: relative;
	text-align: center;
	display: grid;
	grid-template-columns: 2fr 1fr;
	padding: var(--pad);
	gap:var(--pad);
	align-items: center;
	background-color: var(--shade2);
}


#accordion{
	border-bottom: 1px solid var(--shade);
	border-top: 1px solid var(--shade);

}
.ui-accordion-header:first-child{
	border-top: none;
}
.disponibilidad{
	margin-top: 10px;
}

.ui-accordion-header{
	font-family: var(--bold);
	position: relative;
padding: 10px;
	border-top: 1px solid var(--shade);
}
.ui-accordion-header-active{
	border-bottom: none;

}
.ui-accordion-content{
	padding: 0px 10px 10px;
	font-size: var(--small);	
}

.woocommerce-ordering{
	position: relative;
display: inline-block;
}
.woocommerce-ordering:after{
	top:7px;
	}
.ui-accordion-header:after, .woocommerce-ordering:after{
	content: '+';
	color:var(--shade);
	font-weight: 400;
	position: absolute;
	right: 10px;
}
.ui-accordion-header-active:after{
	content: '-';
}
.mpad{
	margin-bottom: var(--pad);
}

/* Subtitulo del producto. Antes llevaba .mpad, que son los 20px de --pad. */
.product-description{
	margin-bottom: 7px;
}


.maxp{
	max-width: 560px;
	margin: 0px auto;	
}

.designer-image{
	aspect-ratio:1;
	overflow: hidden;
}
.designer-image img{
	object-fit:cover;
	height: 100%;
}



.term-description{
	max-width: 560px;
	margin: 0px auto;
	padding: 0 var(--pad) calc(var(--pad) * 2);
	text-align: center;
}
.summary h1{
	margin: 0px;
	font-family: var(--serif);
	color: var(--brown);
	font-size: var(--big);
}
.reset_variations{
display: none !important;
}
.variations select{
	margin-bottom: 0;
	margin-left: 16px;
}

.upsells{
	padding: 15px 0 0;
}
.upsells h2{
}

.single .woocommerce-product-details__short-description{
margin-top: 20px;
}


.page-wc{
	font-family: var(--serif);
	padding: calc(var(--pad) * 3) var(--pad) calc(var(--pad) * 2);
	text-align: center;

}
.price ins{
	text-decoration: none;
}

.single .price{
	display: block;
	font-family: var(--bold);
}
.single table.variations{
	margin:10px 0 10px
}
.single table.variations label{
	margin-bottom: 0;
}

.single table.variations select{
text-align: center;
text-align-last:center; 
}

.sub-menu.focus{
	display: block !important;
}

.priceless .price{
display:none !important;}

.small.post-content p:last-of-type,
.post-content p:last-of-type{
	margin-bottom: 0;
}

.post-content{
line-height:1.5;
}
.post-content h2, .post-content h3{
font-family: var(--bold);
  font-size: var(--body2);}
.post-content p, .woocommerce-product-details__short-description h2, .post-content h2, .woocommerce-product-details__short-description h3, .post-content h3, .woocommerce-product-details__short-description h4, .post-content h4, .woocommerce-product-details__short-description p, .post-content h5, .woocommerce-product-details__short-description h5, .post-content ul,  .post-content ol, .woocommerce-product-details__short-description ul{
	margin-bottom: var(--linebody);
}

.post-content.small p, .woocommerce-product-details__short-description h2, .post-content.small h2, .woocommerce-product-details__short-description h3, .post-content.small h3, .woocommerce-product-details__short-description h4, .post-content.small h4, .woocommerce-product-details__short-description p, .post-content.small h5, .woocommerce-product-details__short-description h5, .post-content.small ul,  .post-content.small ol, .woocommerce-product-details__short-description ul{
	margin-bottom: var(--linesmall);
}


.post-content a{
	text-decoration: underline;
}

 .woocommerce-product-details__short-description h4,  .woocommerce-product-details__short-description h5,  .woocommerce-product-details__short-description h6{
	 font-size: var(--body);
	 
	 	margin-bottom: 20px;
 }
 .woocommerce-product-details__short-description p{
	 font-size: var(--big);
line-height: normal;
 }

.terms-wrapper{
	display: flex;
	flex-direction: column;
	gap:5px;
}
.disponible{
	display: flex;
	align-items: center;
	gap:6px;
}
.disponible,
.on-demand,
.envio-gratis{
	display: flex;
	align-items: center;
	gap:6px;
}
.disponible:before,
.on-demand:before,
.envio-gratis:before{
	content: '';
	display: block;
	width: 6px;
	height: 6px;
	margin-top: 3px;
	border-radius: 100%;
	background-color: var(--success);
	flex: 0 0 auto;
}
.on-demand:before{
	background-color: var(--warning);
}
.aviso-artesanal{
	margin-top: 10px;
}
.medidas-producto .medida{
	margin: 0;
}
.medidas-producto .medida-label{
	font-weight: 600;
}

.woocommerce-product-details__short-description ul, .post-content ul{
	padding-left: 16px;
}
/*
	.woocommerce-product-details__short-description li:before, .post-content li:before{
content:   '\2192';
position: absolute;
margin-left: -20px;
}
*/

.single .onsale{
	display: none;
}
.onsale{
	position: absolute;
	color: var(--alert);
	z-index: 999;
	right: 10px;
	top: 10px;
}
.imagewrapper{
	position: relative;
}


li.product .price{
		font-size: var(--small);

}
li.product .price{
	display: inline-block;
}
.product-subtitle{
	margin-top: 3px;
}
.customlabel, .out-of-stock{
	font-size: var(--small);
	
	display: inline-block;
		margin-right: 5px;
}
.imagewrapper .hover-img{
	display: none;
	z-index: 1;
	position: absolute;
}
.in-stock{
	display: none !important;
}
ul#shipping_method{
	padding: 20px 0;
	text-align: right;
	margin-bottom: 0;
}

.woocommerce-form-login-toggle{
	font-size: var(--small);
	margin-bottom: 20px;
}

@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

input[type="number"]{
	 -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     display: inline-block;
     position: relative;
     background-color: var(--primary);
     font-family: var(--sans);
     color: var(--contrast);
     border: 1px solid var(--contrast);
     border-radius: 0px;
     outline: none;
}

select{
	position: relative;
padding: 5px 0px 5px;
	margin-bottom: 20px;
	 -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     display: inline-block;
     position: relative;
     font-weight: 300;
     background-color: var(--primary);
     font-family: var(--sans);
     color: var(--contrast);
     border: none;
     border-bottom: 1px solid;
     border-radius: 0px;
     outline: none;
     font-size: var(--body);	
}

.wc-block-components-totals-wrapper.slot-wrapper .wc-block-components-bnpl-wrapper{
	padding: 16px 0 !important;
}

.woocommerce-input-wrapper input[type="text"],
.woocommerce-input-wrapper  input[type="tel"], 
.woocommerce-input-wrapper input[type="email"], 
.woocommerce-input-wrapper input[type="password"],
.woocommerce-input-wrapper textarea,
.woocommerce-input-wrapper select
{
	margin-bottom: 10px;
	
}
input[type="text"],
input[type="tel"], 
input[type="email"], 
input[type="password"],
textarea,
.checkout select
{
	padding: 10px 10px 5px;
	margin-bottom: 20px;
	 -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     display: inline-block;
     position: relative;
     background-color: var(--primary);
     font-family: var(--sans);
     color: var(--contrast);
     border: 1px solid var(--contrast);
     width: 100%;
     border-radius: 0px;
     outline: none;
     font-size: var(--body);
}
input[type="text"]:focus,
input[type="tel"]:focus, 
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus{
	border: var(--border);
} 

input[type="checkbox"]
{
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     display: inline-block;
     position: relative;
     background-color: var(--primary);
     color: var(--contrast);
     height: 16px;
     border-radius: 0;
     top: 3px;
     width: 16px !important;
     cursor: pointer;     
     outline: none;
     border: 1px solid var(--contrast);
     margin: 0 5px 0px 0;
}





input[type="checkbox"]:checked
{
     border: var(--border);
      background-color: var(--contrast);
}



input[type="radio"]
{
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     display: inline-block;
     position: relative;
     background-color: var(--primary);
     color: var(--contrast);
     height: 16px;
     border-radius: 100%;
     top: 3px;
     width: 16px;
     cursor: pointer;     
     outline: none;
     border: 1px solid var(--contrast);
    margin: 0 5px 0px 0;
    }



input[type="radio"]:checked
{
     border: var(--border);
     background-color: var(--contrast);
}


.header-cont.flexy{
	display: flex;
	flex-direction: column;
	height: 100vh;
}
.menu-hover{
flex: 1;
	width: 100%;
	height: auto;
	background-color: var(--primary);
	z-index: 999;
	display: none;
			overflow: auto;

}
.woocommerce-cart .single-column, .woocommerce-checkout .single-column{
	max-width: 100%;
	/* .main ya pone los 20px del borde; los de aqui los duplicaban. */
	padding-left: 0;
	padding-right: 0;
}

/* ---- Espaciado de la columna de compra ----
   Los grupos van siempre separados por --pad, lleve el producto colores,
   tallas o nada: titulo / precio+plazos / colores o variaciones / avisos /
   boton. Dentro de cada grupo, el aire es menor. */
.sticky-column .price{
	margin: var(--pad) 0 0;
}
.plazos-badge{
	margin: 6px 0 0;
}
.colors-select,
.single table.variations,
.custom-stock-message{
	margin: var(--pad) 0 0;
}

/* ---- Selector de variaciones propio ----
   El <select> de WooCommerce se queda en el DOM pero fuera de la vista: es
   donde esta la logica de combinaciones, los botones solo escriben en el. */
.variations_form .variations select{
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.variacion-opciones{
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}
.variacion-opcion{
	border: 1px solid;
	border-radius: var(--rads);
	background: none;
	color: inherit;
	font-family: var(--sans);
	font-size: var(--body);
	height: 32px;
	padding: 0 var(--pad);
	margin-right: 10px;
	cursor: pointer;
	user-select: none;
}
.variacion-opcion.seleccionada,
.variacion-opcion:hover:not(.agotada){
	background-color: var(--contrast);
	border-color: var(--contrast);
	color: var(--primary);
}
.variacion-opcion.agotada{
	opacity: 0.35;
	cursor: not-allowed;
}

/* El precio de la variacion elegida se escribe en el precio de arriba, asi
   que el que WooCommerce pinta debajo del selector sobra. */
.woocommerce-variation-price{
	display: none;
}

/* "Desde" delante del precio de los variables. */
.precio-desde{
	font-family: var(--sans);
	font-size: var(--small);
}

/* ============ BLOQUES DE WOOCOMMERCE — CARRITO Y CHECKOUT ============
   Los bloques traen su propia hoja: fondos blancos, bordes grises
   translucidos y esquinas de 4px que no son los del tema. Aqui se igualan
   color, borde y tipografia; las cajas y los espacios se dejan como vienen,
   que son los que sostienen las etiquetas flotantes de los campos.

   Todo va colgado de body.woocommerce-page a proposito: packages-style.css
   se encola despues que el tema y sus reglas llevan dos clases, asi que sin
   ese prefijo pierden por orden de cascada. Con el ganan sin !important.
   ===================================================================== */

/* Campos de texto, areas y desplegables */
body.woocommerce-page .wc-block-components-text-input input[type],
body.woocommerce-page .wc-block-components-combobox-control input[type],
body.woocommerce-page .wc-block-components-textarea,
body.woocommerce-page .wc-blocks-components-select .wc-blocks-components-select__select{
	background-color: var(--primary);
	border: 1px solid var(--contrast);
	border-radius: 0;
	color: var(--contrast);
	font-family: var(--sans);
}

/* La caja que envuelve el desplegable trae su propio fondo blanco y sus
   esquinas; el que se ve es el select de dentro. */
body.woocommerce-page .wc-blocks-components-select .wc-blocks-components-select__container{
	background-color: transparent;
	border-radius: 0;
}

/* El margen inferior sale de la regla generica de select del tema. Dentro de
   los bloques estorba: estira el contenedor 20px mas que el campo y la
   flecha, que va centrada sobre el contenedor, cae por debajo del borde. El
   espacio entre campos ya lo pone el propio bloque. */
body.woocommerce-page .wc-blocks-components-select .wc-blocks-components-select__select{
	margin-bottom: 0;
}

/* El foco de los bloques es un halo azul; aqui basta con marcar el borde. */
body.woocommerce-page .wc-block-components-text-input input[type]:focus,
body.woocommerce-page .wc-block-components-textarea:focus,
body.woocommerce-page .wc-blocks-components-select .wc-blocks-components-select__select:focus{
	box-shadow: 0 0 0 1px var(--contrast);
	outline: none;
}

/* Casillas, como las del resto de formularios del tema */
body.woocommerce-page .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]{
	background-color: var(--primary);
	border: 1px solid var(--contrast);
	border-radius: 0;
}
body.woocommerce-page .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked{
	background-color: var(--contrast);
	border-color: var(--contrast);
}
/* La marca va del color del fondo: la casilla marcada se rellena en oscuro. */
body.woocommerce-page .wc-block-components-checkbox__mark{
	fill: var(--primary);
}

/* El campo oculto de "Apartamento, piso..." se aparca en left:-20000px pero
   sigue en el flujo, asi que dejaba un hueco de 60px entre Direccion y Codigo
   postal (41 de alto mas los 20 de margen que le pone el tema). */
body.woocommerce-page .wc-block-components-address-form__address_2-hidden-input{
	position: absolute;
}

/* Opciones de envio y de pago, y el selector de cantidad del carrito */
body.woocommerce-page .wc-block-components-radio-control-accordion-option,
body.woocommerce-page .wc-block-components-radio-control__option,
body.woocommerce-page .wc-block-components-quantity-selector{
	border-radius: 0;
}

/* El resumen se queda pegado al hacer scroll, pero con 24px se metia debajo
   de la cabecera, que es sticky y mide 58px. */
body.woocommerce-page .wc-block-checkout__sidebar,
body.woocommerce-page .wc-block-components-sidebar{
	top: calc(58px + var(--pad));
}

/* ---- Pago express ----
   La caja la dibujan dos piezas: __content pone los lados y el fondo, y los
   pseudoelementos del titulo los dos trozos de arriba, dejando el hueco del
   rotulo. El "O continua mas abajo" es hermano de la caja, asi que quedaba
   fuera y con sus propias rayas a los lados.

   Se pasan los lados y el fondo al envoltorio, que es quien contiene la caja
   y ese texto: asi el marco los envuelve a los dos y las rayas sobran. */
body.woocommerce-page .wc-block-components-express-payment--checkout .wc-block-components-express-payment__content{
	border: 0;
	border-radius: 0;
	padding-bottom: 0;
}

.woocommerce-order-overview__payment-method img{
	width: auto;
}

.cmplz-cookiebanner {
  box-shadow: none !important;
  border: 1px solid;
}

body.woocommerce-page div:has(> .wc-block-components-express-payment-continue-rule){
	border: 1px solid color-mix(in srgb, var(--contrast) 20%, transparent);
	border-top: 0;
	border-radius: 0;
	margin-bottom: 24px;
}
body.woocommerce-page .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container:before,
body.woocommerce-page .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container:after{
	border-radius: 0;
}
body.woocommerce-page .wc-block-components-express-payment-continue-rule{
	margin: 0;
	padding: 16px;
	/* Lo centraban las dos rayas, que eran los flex de los lados. */
	justify-content: center;
}
body.woocommerce-page .wc-block-components-express-payment-continue-rule:before,
body.woocommerce-page .wc-block-components-express-payment-continue-rule:after{
	display: none;
}
body.woocommerce-page .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title{
	font-family: var(--bold);
	font-size: 16px;
}

/* La vineta de .post-content no pinta nada dentro de los bloques: en el pago
   express salia una bolita suelta a la izquierda de cada boton. */
body.woocommerce-page .post-content [class*="wc-block"] li:before{
	content: none;
}

/* Logos de las formas de pago de PayPal (tarjetas, Trustly y PayPal). Ese
   plugin no registra iconos en el checkout de bloques, al contrario que
   WooPayments o Klarna, asi que la fila salia desnuda. Los SVG estan
   copiados en el tema (images/pago) para no depender de rutas del plugin.
   El :has() mira el value del radio, que es el id de la pasarela. */
body.woocommerce-page .wc-block-components-radio-control__option:has(input[value="ppcp-gateway"]) .wc-block-components-radio-control__label:after,
body.woocommerce-page .wc-block-components-radio-control__option:has(input[value="ppcp-trustly"]) .wc-block-components-radio-control__label:after,
body.woocommerce-page .wc-block-components-radio-control__option:has(input[value="ppcp-card-button-gateway"]) .wc-block-components-radio-control__label:after{
	content: "";
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	height: 24px;
	width: 40px;
	background-repeat: no-repeat;
	background-position: right center;
	background-size: contain;
}
body.woocommerce-page .wc-block-components-radio-control__option:has(input[value="ppcp-gateway"]) .wc-block-components-radio-control__label:after{
	background-image: url("images/pago/paypal.svg");
}
body.woocommerce-page .wc-block-components-radio-control__option:has(input[value="ppcp-trustly"]) .wc-block-components-radio-control__label:after{
	background-image: url("images/pago/trustly.svg");
	width: 60px;
}
body.woocommerce-page .wc-block-components-radio-control__option:has(input[value="ppcp-card-button-gateway"]) .wc-block-components-radio-control__label:after{
	background-image: url("images/pago/tarjetas.svg");
	width: 26px;
}

/* Los bloques bajan a 13px; el pequeno del tema es 14. */
body.woocommerce-page .wc-block-components-totals-item,
body.woocommerce-page .wc-block-components-order-summary__content,
body.woocommerce-page .wc-block-components-order-summary-item,
body.woocommerce-page .wc-block-components-panel__button,
body.woocommerce-page .wc-block-components-checkout-step__description{
	font-size: var(--small);
}

/* Titulos de seccion */
body.woocommerce-page .wc-block-components-title{
	font-family: var(--bold);
	font-weight: 400;
	font-size: var(--medium2);
}
body.woocommerce-page .wc-block-components-checkout-step__heading-container{
	margin-bottom: 5px;
}
.products-all{
	display: none !important;
}

/* El total, con el mismo peso que los titulos; la linea del IVA que va
   debajo se queda en la tipografia normal. */
body.woocommerce-page .wc-block-components-totals-item.wc-block-components-totals-footer-item,
body.woocommerce-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
body.woocommerce-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
	font-family: var(--bold);
}
body.woocommerce-page .wc-block-components-totals-footer-item-tax,
body.woocommerce-page .wc-block-components-totals-footer-item-tax .wc-block-components-formatted-money-amount{
	font-family: var(--sans);
}

/* El carrito escribe en versalitas la cabecera de la tabla, el titulo de los
   totales y el "gratis" del envio. El checkout no, asi que se igualan. */
body.woocommerce-page .wc-block-cart-items__header,
body.woocommerce-page .wc-block-cart__totals-title,
body.woocommerce-page .wc-block-components-totals-shipping .wc-block-components-totals-item strong,
body.woocommerce-page .wc-block-checkout__shipping-option .wc-block-checkout__shipping-option--free{
	text-transform: none;
}

/* Y el titulo de la columna de totales se lee como el "Resumen del pedido"
   del checkout. */
body.woocommerce-page .wc-block-cart__totals-title{
	font-family: var(--serif);
	font-size: var(--medium);
	font-weight: 400;
}

/* Cabecera del resumen del pedido */
body.woocommerce-page .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text{
	font-family: var(--serif);
	font-size: var(--medium);
}

/* En las listas con marcado propio tampoco pinta nada la bolita */
body.woocommerce-page .post-content .wc-block-components-order-summary-item:before,
body.woocommerce-page .post-content .wc-block-components-radio-control__option:before{
	content: none;
}

/* En las listas de WooCommerce (formas de pago, metodos de envio) la bolita
   de .post-content li no pinta nada: son opciones con su radio, no un
   listado. content:none quita la caja entera; con content:'' seguia saliendo
   el punto, porque lo dibuja el fondo y no el texto. */
.post-content ul.wc_payment_methods li:before,
.post-content ul#shipping_method li:before{
	content: none;
}

.woocommerce li{
	list-style: none;
}
.menu-hover.appear {
    display: block;
}


.menu-int{
		display: flex;
    flex-direction: column;
    min-height: calc(100vh - 80px);
  min-height: -webkit-fill-available;
    justify-content: space-between;
}
.menu-int .menu-mobile-container{
	flex: 1;
	margin-bottom: 20px;
}

#cookies{
	display: none;
	padding: 20px;
	background-color: var(--primary);
	color: var(--contrast);
	align-items: center;
	position: fixed;
	bottom: 0;
	left: 0;
	cursor: pointer;
	z-index: 99999;
	right: 0;
	border-top: 1px solid var(--contrast);
}
.flexi{
	display: flex;
align-items: center;
justify-content: space-between;
}
#cookiesaccept{
height: fit-content;
border: 1px solid var(--contrast);
padding: 10px 20px;

display: inline-block;
margin-left: 20px;
}





.slide-img-f.fulled img, .slide-img-f.fulled video{
padding: 0 !important;
}

.fulled picture{
	width: 100%;
}




video{
	  object-position: 50% 50%;
	    object-fit: cover;
    width: 100%;
    height: 100%;
}




.image-duo .first.fulled img, .image-duo .first.fulled video{
		padding-left: 0;
		padding-right: 100px;
}
.image-duo .last.fulled img, .image-duo .last.fulled video{
		padding-left: 100px;
		padding-right: 0px;
}
.image-duo .first.framed img{
    object-position: 100%;
    }
.image-duo .last.framed img{
    object-position: 0;}






.fulled img, .fulled video{
	object-fit: cover;
	height: 100%;
	padding-left: 100px;
	}
	.reverse .fulled img, 	.reverse .fulled video{
		padding-left: 0;
		padding-right: 100px;
	}



.reverse .slide-txt{
	padding: 60px 20px 60px 0px;
	
}
.swiper-home{
overflow: hidden;}


.swiper-nav{
width: 100%;
z-index: 999;
	bottom: 40px;
	position: absolute;
	display: flex;
	justify-content: center;
}
.swiper-nav div{
cursor: pointer;
outline: none !important;
padding: 10px 10px;
}
		 
#news-pop{
	margin-right: 20px;
	display: none;
	    position: fixed;
    z-index: 99999;
    background-color: var(--primary);
    padding: 20px;
    border: var(--border);
    left: 20px;
    bottom: 20px;
    max-width: 500px;
}
#news-pop p{
	margin-bottom: 20px;
}

#news-close{
	cursor: pointer;
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: var(--small);
	
}

		  
@media all and (-ms-high-contrast:none){}

/* ============================ PORTADA — BLOQUES ============================
   Solo reglas de colocacion. Tipografias, colores y tamanos salen de las
   clases que ya existen (.title, .boton, .franja, li.product).
   ========================================================================== */

/* El video se recorta igual que la imagen (la regla de arriba solo cubre img) */
.full video,
.banner-media video{
	object-fit: cover;
	height: 100%;
	width: 100%;
}

/* Full: alineacion y color del texto sobre la imagen */
.full-title.text-white{ color: #fff; }
.full-title.text-black{ color: var(--contrast); }

.full-title.align-center{
	justify-content: center;
	align-items: center;
	text-align: center;
}
.full-title.align-bottom-left{
	justify-content: flex-end;
	align-items: flex-start;
	text-align: left;
}

/* Banners: ancho por columnas y texto debajo de la imagen.
   La altura vive en el media, no en el banner: asi todas las imagenes de la
   fila miden igual y el texto largo empuja hacia abajo sin descuadrar nada. */
.banner{
	flex-basis: auto;
}
.banner.size-1{ flex: 1; }
.banner.size-2{ flex: 2; }
.banner.size-3{ flex: 3; }

.banner > a{
	display: block;
}
.banner-media{
	height: 33vw;
}
.banner-text{
	padding-top: 10px;
}
.banner-text .big{
	margin: 0 0 10px;
}

/* Texto corrido de los bloques de portada (full y banner). El tamano y el
   interlineado los pone .body en el html; aqui solo la tipografia. */
.bodycopy{
	font-family: var(--sans);
	max-width: 600px;
	margin-bottom: var(--pad);
	margin-top: -10px;
}
.banner-text .bodycopy{
	margin-top: 10px;
}

/* Carrusel de productos: scroll horizontal nativo */
.products-block{
	background-color: var(--shade);
	padding: var(--pad) 0;
}
.products-head{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--pad);
	padding: 0 var(--pad);
}
.products-head .title{
	margin: 0;
}
/* El "Ver todo" y las dos flechas, juntos a la derecha. El margin-left:auto
   es el que los empuja cuando el bloque viene sin titulo. */
.products-acciones{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.products-carousel{
	position: relative;
}
.products.products-scroller{
	flex-wrap: nowrap;
	justify-content: flex-start;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--pad);
	padding: 0 var(--pad);
	scrollbar-width: none;
}
.products.products-scroller::-webkit-scrollbar{
	display: none;
}
.products.products-scroller:after{
	display: none;
}
.products-scroller li.product{
	/* 4,5 por vista: la quinta asoma por el lado y se ve que hay mas. */
	flex: 0 0 calc((100% - (var(--pad) * 4.5)) / 4.5);
	scroll-snap-align: start;
}

/* Las flechas ya no flotan sobre el carrusel tapando producto: viven en la
   cabecera, a la derecha. */
.products-nav{
	background: none;
	border: 0;
	padding: 0 4px;
	cursor: pointer;
	font-family: inherit;
	font-size: var(--medium);
	line-height: 1;
	color: inherit;
}
.products-nav:hover:not(:disabled){
	color: var(--brown);
}
/* Al final del recorrido se apagan en vez de irse: si una desaparece, la
   otra se corre y el par baila en la cabecera. */
.products-nav:disabled{
	opacity: 0.25;
	cursor: default;
}

/* Tabla de gastos de envio, la pinta el shortcode [breta_envios]. */
.tabla-envios{
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0;
}
.tabla-envios th,
.tabla-envios td{
	text-align: left;
	padding: 10px 0;
	border-bottom: var(--border);
}

/* Stripe/WooPayments pinta el mensaje de metodos de pago en un iframe de
   width:calc(100% + 8px) con margin:0 -4px, lo que sacaba 4px de scroll
   horizontal en toda la pagina de producto. */
/* Stripe pinta este mensaje en un iframe de width:calc(100% + 8px) con
   margin:0 -4px, que sacaba scroll horizontal. En la ficha de producto ya no
   se usa (lo sustituye .plazos-badge), pero sigue saliendo en el carrito. */
#payment-method-message{
	overflow: hidden;
}

/* Aviso de pago aplazado propio. Los de Stripe y PayPal viven en un iframe y
   no hay forma de darles la tipografia del tema, asi que se pinta a mano con
   el logo de las dos pasarelas. */
.plazos-badge{
	/* El margen va con el resto del espaciado de la columna, mas arriba. */
	/* Mismo peso que el subtitulo del producto. Sin esto el badge sale en 400
	   y el importe de wc_price() lo hereda, por eso parecia mas grande. */
	font-weight: 300;
}
.plazos-badge .amount{
	font-weight: 300;
}
/* Nombre del color, siguiendo al cursor sobre los swatches. */
.color-tip{
	position: fixed;
	z-index: 100;
	pointer-events: none;
	opacity: 0;
	background-color: var(--primary);
	border-radius: 4px;
	border:1px solid var(--contrast);
	padding: 3px 10px;
	font-size: var(--small);
	line-height: var(--linesmall);
	white-space: nowrap;
	/* Separada del cursor y centrada a su altura. */
	transform: translate(14px, -50%);
}
.color-tip.visible{
	opacity: 1;
}

/* Logos de las dos pasarelas, a la misma altura para que lean como un par.
   Cada SVG trae ya su propia capsula (la rosa de Klarna, la blanca con borde
   de PayPal), asi que aqui no se dibuja ninguna. */
.plazos-logo{
	display: inline-block;
	vertical-align: middle;
}
.plazos-logo img{
	height: 1.5em;
	width: auto;
	display: block;
}
/* Capsula de reserva, para cuando no esta el SVG oficial de Klarna. */
.plazos-logo--texto{
	background-color: #ffb3c7;
	color: #0b051d;
	border-radius: 4px;
	padding: 1px 6px;
	font-weight: 600;
}


/* ---- Pagina de pedido recibido ----
   El agradecimiento se queda a media pagina en escritorio y cada parte va en
   su caja sobre --shade2: el resumen de cabecera, el detalle del pedido y las
   direcciones. En movil las cajas pasan a ancho completo (responsive.css).
   Woo no pone clase en las filas del pie, asi que el total se marca con
   .total-order_total desde woocommerce/order/order-details.php. */
body.woocommerce-order-received .single-column{
	max-width: 50%;
}

body.woocommerce-order-received .woocommerce-thankyou-order-received{
padding: calc(var(--pad) * 3) var(--pad) calc(var(--pad) * 2);
  text-align: center;
	font-family: var(--serif);
	font-size: var(--big);
	line-height: var(--linebig);
	letter-spacing: var(--lsbig);
	margin-bottom: var(--pad);
}

body.woocommerce-order-received .woocommerce-order-overview,
body.woocommerce-order-received .woocommerce-order-details,
body.woocommerce-order-received .woocommerce-customer-details{
	background-color: var(--shade2);
	border-radius: var(--rad);
	padding: var(--pad);
	margin-bottom: 10px;
}

body.woocommerce-order-received .woocommerce-order-details__title,
body.woocommerce-order-received .woocommerce-column__title{
	font-family: var(--bold);
	font-size: var(--body);
	line-height: var(--linebody);
	margin-bottom: 10px;
}

/* Resumen de cabecera: etiqueta arriba y dato debajo, sin los floats de Woo. */
body.woocommerce-order-received ul.woocommerce-order-overview{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--pad);
	list-style: none;
	margin: 0 0 10px;
}

body.woocommerce-order-received ul.woocommerce-order-overview li{
	float: none;
	border: 0;
	margin: 0;
	padding: 0;
	font-size: var(--small);
	line-height: var(--linesmall);
	text-transform: none;
}

/* La bolita de .post-content li no pinta nada en este resumen. */
body.woocommerce-order-received ul.woocommerce-order-overview li:before{
	display: none;
}

body.woocommerce-order-received ul.woocommerce-order-overview li strong{
	display: block;
	font-family: var(--bold);
	font-weight: normal;
	font-size: var(--body);
	line-height: var(--linebody);
}

/* Detalle del pedido. */
body.woocommerce-order-received table.order_details{
	width: 100%;
	margin: 0;
	border: 0;
}

body.woocommerce-order-received table.order_details th,
body.woocommerce-order-received table.order_details td{
	border: 0;
	padding: 4px 0;
	font-size: var(--small);
	line-height: var(--linesmall);
	vertical-align: top;
	text-align: left;
}

body.woocommerce-order-received table.order_details thead th{
	font-family: var(--bold);
	font-weight: normal;
}

body.woocommerce-order-received table.order_details th.product-total,
body.woocommerce-order-received table.order_details td.product-total,
body.woocommerce-order-received table.order_details tfoot td{
	text-align: right;
	white-space: nowrap;
}

/* Una linea separa las piezas de los totales. */
body.woocommerce-order-received table.order_details tbody tr:last-child td,
body.woocommerce-order-received table.order_details tbody tr:last-child th{
	padding-bottom: 10px;
	border-bottom: 1px solid var(--shade);
}

body.woocommerce-order-received table.order_details tfoot tr:first-child th,
body.woocommerce-order-received table.order_details tfoot tr:first-child td{
	padding-top: 10px;
}

body.woocommerce-order-received table.order_details tr.total-order_total th,
body.woocommerce-order-received table.order_details tr.total-order_total td{
	font-family: var(--bold);
	font-size: var(--body);
	line-height: var(--linebody);
}

body.woocommerce-order-received table.order_details .includes_tax{
	display: block;
	font-family: var(--sans);
	font-size: var(--small);
	line-height: var(--linesmall);
}

/* Direcciones: dos columnas dentro de la caja, sin los floats de Woo. */
body.woocommerce-order-received .woocommerce-customer-details .col2-set{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--pad);
}

body.woocommerce-order-received .woocommerce-customer-details .col-1,
body.woocommerce-order-received .woocommerce-customer-details .col-2{
	float: none;
	width: auto;
}

body.woocommerce-order-received .woocommerce-customer-details address{
	border: 0;
	padding: 0;
	border-radius: 0;
	font-size: var(--small);
	line-height: var(--linesmall);
	font-style: normal;
}

body.woocommerce-order-received .woocommerce-customer-details address p{
	margin: 0;
	font-size: var(--small);
	line-height: var(--linesmall);
}


/* ---- Politica de cookies ----
   Complianz trae document.min.css con "#cmplz-document p, li, td {font-size:14px}",
   que deja esta pagina con la letra mas pequena que el resto de legales. Se
   devuelve el tamano del tema a los parrafos y las listas; la tabla de cookies
   y su desplegable se quedan como vienen, que ahi los 14px si hacen falta. */
.post-content #cmplz-document,
.post-content #cmplz-document p,
.post-content #cmplz-document li{
	font-size: inherit;
}

.post-content #cmplz-document .cmplz-dropdown,
.post-content #cmplz-document .cmplz-dropdown p,
.post-content #cmplz-document .cmplz-dropdown li,
.post-content #cmplz-document .cmplz-dropdown a,
.post-content #cmplz-document .cookies-per-purpose{
	font-size: 14px;
}


/* Sin existencias no hay boton de compra: el AGOTADO ocupa su hueco y lleva
   sus mismos margenes, para que la ficha mantenga el ritmo con stock o sin
   el. La regla de .out-of-stock de mas arriba es la del listado. */
.agotado-single{
	display: block;
	margin: var(--pad) 0;
	font-family: var(--bold);
	font-size: var(--body);
	line-height: var(--linebody);
	color: var(--contrast);
}


/* ---- Avisame cuando vuelva ----
   Va debajo del AGOTADO, en el hueco de la ficha agotada. El campo y el
   boton comparten linea; el boton es el mismo negro del add to cart pero
   del ancho de su texto, que aqui no manda el, manda el AGOTADO. */
.aviso-stock{
	margin: 0 0 var(--pad);
}

.aviso-stock-titulo{
	font-family: var(--bold);
	margin: 0 0 10px;
}

.aviso-stock-fila{
	display: flex;
	gap: 10px;
}

.aviso-stock-fila input[type="email"]{
	flex: 1;
	min-width: 0;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--shade);
	border-radius: var(--rad);
	background-color: var(--primary);
	font-family: var(--sans);
	font-size: var(--small);
	color: var(--contrast);
}

.aviso-stock-fila input[type="email"]:focus{
	outline: none;
	border-color: var(--contrast);
}

.aviso-stock-fila button{
	height: 44px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--rad);
	background-color: var(--contrast);
	color: var(--primary);
	font-family: var(--bold);
	font-size: var(--small);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.aviso-stock-fila button:hover{
	background-color: var(--brown);
}

.aviso-stock-lopd{
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 10px 0 0;
	cursor: pointer;
}

.aviso-stock-lopd input{
	margin: 2px 0 0;
	flex: 0 0 auto;
}

.aviso-stock-gracias{
	font-family: var(--bold);
	margin: 0;
}

.aviso-stock-error{
	color: var(--brown);
	margin: 0 0 10px;
}

/* El campo trampa para robots no se ensena, pero sin display:none: hay
   rellenadores que se saltan lo que esta oculto del todo. */
.aviso-stock-trampa{
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}


/* ============ CAJON DEL CARRITO ============
   Entra por la derecha al anadir una pieza. El fondo oscuro no es adorno:
   es lo que avisa de que lo de detras esta en pausa y lo que recoge el
   clic para cerrar. */
.minicart-fondo{
	position: fixed;
	inset: 0;
	background-color: rgba(38, 38, 38, 0.4);
	opacity: 0;
	transition: opacity 0.3s ease;
	/* .header-cont es sticky con z-index 999999 y tapaba el cajon. */
	z-index: 9999997;
}

.minicart-fondo.abierto{
	opacity: 1;
}

.minicart{
	position: fixed;
	top: 0;
	right: 0;
	/* El alto es el de la ventana de verdad. Con bottom:0 el cajon se estira
	   hasta el borde de la pagina y en movil eso deja el subtotal y los
	   botones detras de la barra del navegador cuando esta desplegada. dvh
	   mide lo que se ve; el 100vh de arriba es la red para quien no lo
	   entienda. Con el cajon abierto la pagina no hace scroll, asi que la
	   barra no entra ni sale y el panel no da saltos. */
	height: 100vh;
	height: 100dvh;
	/* Una columna mas de la galeria: la ficha reparte la fila en tres, la
	   galeria se lleva dos y el cajon entra como la tercera. */
	width: calc((100% / 3) + 15px);
	max-width: calc(100% - 40px);
	display: flex;
	flex-direction: column;
	background-color: var(--primary);
	transform: translateX(100%);
	transition: transform 0.3s ease;
	z-index: 9999998;
}

.minicart.abierto{
	transform: translateX(0);
}

/* Con el cajon abierto la pagina de detras no se mueve. */
body.minicart-abierto{
	overflow: hidden;
}

.minicart-cabecera{
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* El mismo alto que la cabecera de la web, para que la linea de abajo
	   caiga justo donde acaba. El numero lo mide minicart.js al abrir, que
	   en movil el header lleva otro padding; el 57px es el de escritorio y
	   solo sirve de red por si el js no llega a correr. El borde entra en el
	   alto, de ahi el border-box. */
	box-sizing: border-box;
	height: var(--minicart-cabecera, 57px);
	padding: 0 var(--pad);
	border-bottom: 1px solid var(--shade);
}

.minicart-titulo{
	margin: 0;
	font-family: var(--bold);
	font-size: var(--body);
	line-height: var(--linebody);
}

/* La X, con las mismas dos rayas que el burger. */
.minicart-cerrar{
	position: relative;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.minicart-cerrar span{
	position: absolute;
	left: 2px;
	top: 11px;
	width: 20px;
	height: 1px;
	background-color: var(--contrast);
}

.minicart-cerrar span:first-child{ transform: rotate(45deg); }
.minicart-cerrar span:last-child{ transform: rotate(-45deg); }

.minicart .widget_shopping_cart_content{
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

/* La lista es lo unico que hace scroll: el total y los botones se quedan
   siempre a la vista, que es para lo que esta el cajon. */
.minicart ul.woocommerce-mini-cart{
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	margin: 0;
	padding: var(--pad);
	list-style: none;
}

/* Dos columnas: la foto a un tercio y, al lado, el nombre con la cantidad
   debajo. La X no ocupa columna, va suelta en la esquina y el texto le deja
   el hueco. En la plantilla de WooCommerce la foto y el nombre van dentro
   del mismo enlace y no hay forma de separarlos en dos columnas, por eso el
   tema trae su propia woocommerce/cart/mini-cart.php. */
.minicart li.woocommerce-mini-cart-item{
	position: relative;
	display: grid;
	grid-template-columns: calc(100% / 3) 1fr;
	column-gap: 12px;
	align-items: start;
	margin: 0 0 var(--pad);
	padding: 0;
	font-size: var(--small);
	line-height: var(--linesmall);
}

.minicart li.woocommerce-mini-cart-item:last-child{
	margin-bottom: 0;
}

.minicart .minicart-foto{
	grid-column: 1;
	display: block;
}

.minicart li.woocommerce-mini-cart-item img{
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border-radius: var(--rads);
}

.minicart .minicart-texto{
	grid-column: 2;
	display: flex;
	flex-direction: column;
	gap: 4px;
	/* Sitio para la X, que va encima de esta columna. */
	padding-right: 28px;
}

.minicart .minicart-nombre{
	font-family: var(--bold);
	text-decoration: none;
	color: var(--contrast);
}

.minicart a.minicart-nombre:hover{
	color: var(--brown);
}

.minicart .minicart-cantidad{
	display: block;
}

.minicart a.remove_from_cart_button{
	position: absolute;
	top: 0;
	right: 0;
	width: 20px;
	height: 20px;
	line-height: 18px;
	text-align: center;
	font-size: 18px;
	text-decoration: none;
	color: var(--shade);
}

.minicart a.remove_from_cart_button:hover{
	color: var(--brown);
}

.minicart .woocommerce-mini-cart__empty-message{
	margin: 0;
	padding: var(--pad);
	font-size: var(--small);
}

.minicart .woocommerce-mini-cart__total{
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding: var(--pad);
	border-top: 1px solid var(--shade);
	font-family: var(--bold);
	font-size: var(--body);
}

.minicart .woocommerce-mini-cart__buttons{
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0 var(--pad) var(--pad);
}

/* El de pagar es el negro grande; el de ver el carrito, un enlace debajo. */
.minicart .woocommerce-mini-cart__buttons a.checkout{
	order: -1;
	padding: var(--pad) 24px;
	border-radius: var(--rad);
	background-color: var(--contrast);
	color: var(--primary);
	font-family: var(--bold);
	font-size: var(--body);
	text-align: left;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.minicart .woocommerce-mini-cart__buttons a.checkout:hover{
	background-color: var(--brown);
}

.minicart .woocommerce-mini-cart__buttons a:not(.checkout){
	font-family: var(--bold);
	font-size: var(--body);
	text-align: left;
	border:1px solid var(--contrast);
	color: var(--contrast);
		padding: var(--pad) 24px;
	border-radius: var(--rad);

}

.minicart .woocommerce-mini-cart__buttons a:not(.checkout):hover{
	color: var(--brown);
}

.single_add_to_cart_button.cargando{
	opacity: 0.6;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce){
	.minicart,
	.minicart-fondo{
		transition: none;
	}
}

/* ---- Redes ----
   El SVG va incrustado, no en un <img>, para que herede el color del texto.
   La caja la da el enlace: asi el dedo tiene donde dar aunque el dibujo sea
   fino. En el pie las redes empiezan fila y caen bajo el logo (footer.php). */
.redes{
	display: flex;
	align-items: center;
	gap: 6px;
}

.redes .red{
	display: inline-flex;
	padding: 6px;
	color: var(--contrast);
	line-height: 0;
}

.redes .red:hover{
	color: var(--brown);
}

.redes .red svg{
	display: block;
	width: 22px;
	height: 22px;
}

/* En el pie, la primera columna, debajo del logo. El margen negativo
   compensa el padding del enlace para que el icono case con el borde
   izquierdo del logo. */
.footer-redes{
	grid-column: 1;
	margin: var(--pad) 0 0 -6px;
}

/* En el menu de movil, separadas de la ultima entrada. */
.redes-menu{
	margin-top: var(--pad);
	padding: 0 var(--pad);
}

/* ===================== REVISTA: LISTADO Y BUSQUEDA =====================
   Van aqui y no en blog.css porque la pagina de resultados lleva la
   cabecera de la tienda, que no carga la hoja de la revista.
   ====================================================================== */

.blog-paginacion{
	display: flex;
	justify-content: center;
	gap: 16px;
	padding: 0 var(--pad) var(--padb);
}
.blog-paginacion .current{
	text-decoration: underline;
}

.blog-vacio{
	text-align: center;
	padding: var(--padb) var(--pad);
}

.resultados{
	display: grid;
	gap: var(--pad);
	grid-template-columns: 1fr 1fr 1fr;
	padding: var(--pad);
}
.resultado-foto{
	margin-bottom: 10px;
	overflow: hidden;
}
.resultado-foto img{
	width: 100%;
	display: block;
}