/*

Threme Name: Rosé Atelier
Description: Venta de productos
Threme URI: https://roseatelier.mx/
Author: Buen-Día
Version: 4.8


/* Catalogo */

#catalogo ul.grid {gap: 1.5rem;}
ul.grid figure h4 {color: var(--blanco); z-index: 4;
	-moz-transition: all 0.4s ease-in;
		-webkit-transition: all 0.4s ease-in;
		-o-transition: all 0.4s ease-in;
		transition: all 0.4s ease-in;
		-ms-transition: all 0.4s ease-in;
}

ul.grid li.producto,
.producto {flex: auto; flex-direction: column; gap: 0; overflow: hidden; }

.producto .caja {padding: 1.5rem; font-size: .75rem; width: calc(100% - 3rem); background-color: #fbfbfb; flex-wrap: wrap; min-height: 4rem;}


.producto .caja .flex.col.info {}
.producto .caja .flex.col.titulo {width: min(calc(100% - 6rem), calc(100% - 6rem)); }
.producto .caja .flex.col.precio {width: 5rem !important;}

ul.grid li.producto .caja .ficha {gap: .75rem}
ul.grid li.producto .caja .ficha a:nth-child(1){padding-right: .75rem; border-right: 1px solid #ccc}
ul.grid li.producto .caja .ficha a {line-height: 1; flex: inherit !important;}

.producto .caja .flex.col.colores {justify-content: space-between; gap: 0 !important;}

.producto .caja .flex.colores {max-width: calc((1.5rem * 5) + 4rem); min-height: 3.5rem; gap: .5rem 1rem !important}
.producto .caja .flex.colores figure {min-width: 1.5rem;}

.producto .caja .flex.col.colores figure {background-color: #ddd}
.producto .caja .flex.col.colores h6 {text-transform: none}

.producto:hover .caja {background-color: var(--color-claro)}

.producto a.thumbnail {overflow: hidden}
ul.grid li.producto a.thumbnail figure.imagen,
.producto a.thumbnail figure.imagen {
	transform: scale(1.35);
	background-color: #ddd;
-moz-transition: all 0.4s ease-in;
	-webkit-transition: all 0.4s ease-in;
	-o-transition: all 0.4s ease-in;
	transition: all 0.4s ease-in;
	-ms-transition: all 0.4s ease-in;
}

.producto a.thumbnail figure.imagen {height: min(60vh, 320px);}

ul.grid li.producto:hover a.thumbnail figure.imagen,
.producto:hover figure.imagen {transform: scale(1.25) !important;
-moz-transition: all 0.4s ease-in;
	-webkit-transition: all 0.4s ease-in;
	-o-transition: all 0.4s ease-in;
	transition: all 0.4s ease-in;
	-ms-transition: all 0.4s ease-in;
}


.producto h6.display {font-weight: 700; min-height: 2rem;}


section#colecciones ul.grid li:hover figure h4.display {letter-spacing: 13px;
	-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;}

ul.grid figure .deg.rad {opacity: .5}
section#colecciones ul.grid li:hover figure .deg.rad {background: var(--hover-ocasiones); opacity: 1}

section#colecciones .columna a.thumb figure.fotograma {min-height: auto; height: min(60vh, 420px)}
ul.grid figure.imagen {background-color: #ddd;}

/* Secciones  */

section .encabezado h2.display {color: var(--color-contraste); font-size: 40px; font-weight: 500;}


/* Inicia Home */

section.slider.portada {
	width: calc(100% - 0px);
	padding: 0;
	/* border: 20px solid var(--color-claro); */
	margin: 0;
	min-height: 75vh;
}

section.slider .fotograma {min-height: calc(100vh - 12rem);justify-content: center; align-items: end;}

section.slider figure .caja {width: min(calc(100% - 4rem), 80vw); z-index: 10; padding-bottom: 4rem}
section.slider figure h1 {font-size: 64px; color: var(--blanco); text-align: center; letter-spacing: 1px;}
section.slider figure h2 {color: var(--blanco); text-align: center; font-size: 20px; line-height: 1.5; letter-spacing: 2px; text-transform: none;}



section.galeria,
section.post {min-height: calc(100vh - 0)}

section.aside {min-height: 80vh;}

section#best-sellers .contenedor {padding-bottom: 0;}
section#best-sellers.pagina .contenedor {padding-bottom: 2rem}
section#best-sellers .slick-prev {left:1rem;}
section#best-sellers .slick-next {right:1rem;}

section#best-sellers .slick-prev,
section#best-sellers .slick-next {top: calc(50% - 8rem)}

section#ocasiones ul.grid li h4 {background-color: rgba(165, 136, 164, 0); padding: 1rem 2.5rem; text-transform: uppercase; position: relative; width: calc(100% - 5rem); height: calc(100% - 2rem); z-index: 9; text-align: center}
section#ocasiones ul.grid li h4:hover {background-color: var(--hover-ocasiones);}
section#ocasiones ul.grid.cuatro figure.imagen {height: min(40vh, calc(360px/1.06))}
section#ocasiones ul.grid li figure.imagen.alt {position: absolute; top: 0; left: 0; z-index: 8; opacity: 0;
	-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;}
section#ocasiones ul.grid li:hover figure.imagen.alt {opacity: 1;
	-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;}


section.image {min-height: 60vh;}
section.image .encabezado {text-align: center;}
section#latelier figure.imagenfondo {background-size: 200%; background-position: 100% 41%;}
section.image .contenedor {z-index: 10; width: min(calc(100% - 4rem), 60vw); padding: 8rem 4rem}
section.image h3.display {color: var(--blanco); text-align: center; line-height: 1.5; font-weight: 700;}
section.image h5 {color: var(--blanco); text-transform: uppercase;}



section#colecciones .encabezado .flex.col {width: auto; flex: 0 1 calc(100% - 12rem)}
section#colecciones .encabezado .flex.col.botones {flex: 0 1 13rem}
section#colecciones .encabezado .flex.col h2.display {margin-bottom: .5rem; min-height: 80px; align-items: end; display: flex; justify-content: start}
section#colecciones .columna {flex: 0 1 calc(50% - 2rem)}

section .slide {width: calc(100% / 3)}



section#ocasiones.pagina .contenedor {width: min(100%, 1280px); padding: 4rem 0 0}

section#catalogo .contenedor {gap: 2rem; position: relative;}
section#catalogo .margen { align-items: start; justify-content: center;
	border-top: 1px solid var(--color-claro);
border-bottom: 1px solid var(--color-claro);
color: var(--color-contraste);
margin: 0;
position: sticky;
top: 128px;
z-index: 888;
background-color: var(--blanco);
}

section#catalogo .margen h5 {font-weight: 300; cursor: pointer;padding: 1rem 0;
-moz-transition: all 0.4s ease-in;
	-webkit-transition: all 0.4s ease-in;
	-o-transition: all 0.4s ease-in;
	transition: all 0.4s ease-in;
	-ms-transition: all 0.4s ease-in;
}
section#catalogo .margen h5:hover {background-color: var(--color-contraste); color: var(--color-claro); padding: 1rem;
-moz-transition: all 0.4s ease-in;
	-webkit-transition: all 0.4s ease-in;
	-o-transition: all 0.4s ease-in;
	transition: all 0.4s ease-in;
	-ms-transition: all 0.4s ease-in;
}

section#catalogo .layout {width: 100%; overflow: visible; position: relative;
display: grid; 
grid-template-columns: repeat(12,1fr);
gap: 1rem;
}

.layout, section#filtros, ul.grid {
 overflow: visible;
 transform: none;
 filter: none;
 perspective: none;
 }


section#catalogo ul.grid {grid-column: span 12}
section#catalogo aside {display: none; grid-column: span 3 }

.act aside#filtros {display: flex; 
	/* width: calc(30% - 1rem);  */
	flex: 0 1 33%;
	width: auto;
	/* flex: auto;  */
	order: 2; justify-content: start;}
aside#filtros form {width: 100%; 
position: sticky;
	top: 185px;
	z-index: 887;
}
aside#filtros input[type="checkbox" i] {width: 1.5rem; height: 1.5rem; min-height: 1.5rem; flex: 0 1; margin: 0;}
aside#filtros label {align-items: center; justify-content: start; gap: 1rem}


section#catalogo.act .contenedor {flex-direction: row;}
section#catalogo.act .contenedor ul.grid {
	/* width: calc(70% - 1rem);  */
	grid-column: span 9;
	flex: auto; order: 1; position: sticky; overflow-y: scroll}

.act ul.grid figure.imagen {height: min(40vh, 270px)}

/* Página producto */
.filtros-panel {
  border: 1px solid var(--color-claro);
  margin: 0;
  padding: 1.5rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: start;
  gap: 1.5rem;
}

.filtros-panel h4 {flex: auto}
.filtros-panel .filtros-actions button {display: none; padding: .5rem; font-size: 10px; align-items: center;}
.filtros-panel .filtros-actions button.act {display: flex;}

.filtro-bloque { display: flex; flex-direction: column; gap: 0; justify-content: center; align-items: start; }
aside#filtros h5 {margin: 0 0 .5rem; color: var(--color-contraste)}



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

.filtro-boton { text-align: right; }


.btn-pill {
	padding: 1rem 2rem;
	border-radius: .5rem;
	border: 1px solid #eee;
	background: white;
	color: var(--color-contraste);
	cursor: pointer;
	letter-spacing: 1px;
	text-transform: none;
	font-family: var(--display-font);
	transition: background-color 0.3s ease, color 0.3s ease;
	
}

aside#filtros .btn-pill { border: 0; border-bottom: 2px solid transparent; background: transparent; padding: 0 0 0; margin: 0 0 .25rem; gap: .5rem; justify-content: start; align-items: center; min-height: auto; flex: auto;
	transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease; border-radius: 0; line-height: 1.5;

}
.btn-pill.active {
	background: var(--color-principal);
	color: white;
}

aside#filtros .btn-pill:hover,
aside#filtros .btn-pill.active {border-color: #ccc; background-color:transparent; color: var(--color-contraste); transform: translateY(-1px);}


section#catalogo ul.grid.catalogo >li { opacity: 1; transform: scale(1); transition: opacity .22s ease, transform .22s ease; will-change: opacity, transform; } section#catalogo ul.grid.catalogo > li.hide-start{  opacity:0; transform: scale(.98); }
section#catalogo ul.grid.catalogo >li.completo {grid-column: span 12}
section#catalogo ul.grid.catalogo>li.sin-resultados {
	width: 100%;
	text-align: center;
	padding: 1rem;
	color: #777;
}

/* Accesibilidad: si el usuario prefiere menos movimiento */
@media (prefers-reduced-motion: reduce){
  .btn-pill, section#catalogo ul.grid.catalogo > li{ transition: none !important; }
}



aside#filtros .colores h5 {flex: 0 1 100%}

aside#filtros .colores button {
	font-family: var(--condensed);
	letter-spacing: 0;
	gap: .25rem;
	padding: .5rem;
	width: auto !important;
	font-size: 10px;
	flex: 0 1 calc((100% / 5) - 2px)
}

aside#filtros button.btn-pill:focus {box-shadow: none;}


/* ---------- Filtro Precio (doble rango sobre una sola línea) ---------- */
.filtro-precio {
	--track: #9b9494;
	/* color de la línea base */
	--active: #9b9494;
	/* color del tramo activo (puede ser igual al track) */
	--track-h: 2px;
	/* grosor de la línea */
	--thumb: #7f7878;
	/* color del cuadrito */
	--thumb-size: 10px;
	/* tamaño del cuadrito */
	--thumb-radius: 2px;
	/* esquinas del cuadrito */
	--focus-ring: rgba(0, 0, 0, .12);
	--labels: #7d7777;
	width: 100%;
}

.filtro-precio h5 {
	letter-spacing: .25em;
	font-weight: 700;
	color: #7d7777;
	margin: 0 0 .5rem;
}

/* Contenedor que superpone los dos inputs */
.filtro-precio .range-wrap {
	position: relative;
	height: 28px;
	/* alto suficiente para los thumbs */
	margin: 0;
	width: 100%;
}

.filtro-precio .range-values span {font-size: 14px}

/* ÚNICO riel visible (línea) */
.filtro-precio .range-wrap::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: var(--track-h);
	background: var(--track);
	transform: translateY(-50%);
	border-radius: 2px;
}

/* (Opcional) tramo activo entre min y max.
   Se dibuja encima del riel base usando variables CSS que setea el JS. */
.filtro-precio .range-wrap::after {
	content: "";
	position: absolute;
	top: 50%;
	height: var(--track-h);
	transform: translateY(-50%);
	border-radius: 2px;
	background: var(--active);
	/* Se calculan con --a-pct y --b-pct (0..100) que actualiza el JS */
	left: calc(var(--a-pct, 0) * 1%);
	right: calc(100% - (var(--b-pct, 100) * 1%));
	pointer-events: none;
}

/* Ambos ranges ocupan el mismo lugar */
.filtro-precio .range-wrap input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	border: 0;
	margin: 0;
	background: transparent;
	outline: none;
	z-index: 2;
	padding: 0;
	/* Truco para que no “se coman” los clics: solo el thumb recibe eventos */
	pointer-events: none;
}

.filtro-precio .range-wrap input[type="range"]:focus {box-shadow: none}

/* Ocultamos tracks nativos (para que no se vea doble línea) */
.filtro-precio .range-wrap input[type="range"]::-webkit-slider-runnable-track {
	background: transparent;
}

.filtro-precio .range-wrap input[type="range"]::-moz-range-track {
	background: transparent;
}

/* Thumbs (WebKit/Blink) */
.filtro-precio .range-wrap input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: var(--thumb-size);
	height: var(--thumb-size);
	background: var(--thumb);
	border: 0;
	border-radius: var(--thumb-radius);
	cursor: pointer;
	pointer-events: auto;
	/* ← el thumb sí recibe eventos */
}

/* Thumbs (Firefox) */
.filtro-precio .range-wrap input[type="range"]::-moz-range-thumb {
	width: var(--thumb-size);
	height: var(--thumb-size);
	background: var(--thumb);
	border: 0;
	border-radius: var(--thumb-radius);
	cursor: pointer;
	pointer-events: auto;
}

/* Enfoque accesible (halo suave) */
.filtro-precio .range-wrap input[type="range"]:focus::-webkit-slider-thumb {
	box-shadow: 0 0 0 6px var(--focus-ring);
}

.filtro-precio .range-wrap input[type="range"]::-moz-range-thumb:focus {
	outline: 6px solid var(--focus-ring);
	outline-offset: 0;
}

/* Etiquetas de valores a los extremos */
.filtro-precio .range-values {
	display: flex;
	justify-content: space-between;
	margin: 8px 0 0;
	color: var(--labels);
	font-variant-numeric: tabular-nums;
	width: 100%;
}

/* (Opcional) cursor de arrastre si quieres feedback visual en drag */
.filtro-precio .range-wrap.is-dragging {
	cursor: grabbing;
}



section.post.producto .contenedor {padding: 2rem 4rem 4rem; gap: 1rem 2rem}
section.post.producto .destacada {width: clamp(260px, 50vw, calc(720px*1.06)); aspect-ratio: 1.06 / 1; max-height: 520px;justify-content: start; align-items: start;}
section.post ul.galeria {display: flex; flex-direction: column; flex-wrap: wrap; gap: 1rem; width: 10rem; height: 100%; }
section.post.galeria .contenedor {padding: 2rem 0; width: 100%}

section.post ul.galeria li { width: 100%; cursor: pointer; overflow: hidden; flex: 1; border: 0;}

section.post ul.galeria li.is-selected,
section.post ul.galeria li:hover {border-color: var(--color-principal);}

section.post ul.galeria li:hover figure.thumb,
section.post ul.galeria li.is-selected figure.thumb {opacity: .6}

section.post ul.galeria li figure.thumb {height: 100%; width: 100%; border-radius: 0; max-width: inherit; transform: scale(1); max-height: 100%;
-moz-transition: all 0.4s ease-in;
	-webkit-transition: all 0.4s ease-in;
	-o-transition: all 0.4s ease-in;
	transition: all 0.4s ease-in;
	-ms-transition: all 0.4s ease-in;
}

section.post ul.galeria li:hover figure.thumb {transform: scale(1.05);
-moz-transition: all 0.4s ease-in;
	-webkit-transition: all 0.4s ease-in;
	-o-transition: all 0.4s ease-in;
	transition: all 0.4s ease-in;
	-ms-transition: all 0.4s ease-in;
}

section.post.producto figure.fotograma {width: auto; height: auto;  cursor: pointer; background-color: var(--color-contraste); align-content: stretch; flex: auto; cursor: inherit; min-height: min(65vh, 540px)}


section.post article {width: 50%; display: inline-flex; flex-direction: column; gap: 1rem; padding: 0; flex: auto; height: auto; align-self: stretch;}

section.post.producto article {width: calc(50% - 18rem); padding: 0; color: var(--color-contraste); font-size: .75rem; font-weight: 300;}
section.post.producto article p {font-size: .75rem; font-weight: 300}
section.post.producto article h6 {margin-bottom: 0; line-height: 1.2;flex: 0 1;}
section.post.producto article .encabezado {flex: 0 1}
section.post.producto article .encabezado h6 {flex: auto;}
section.post.producto article .flex.row.start {align-items: center; justify-content: start; gap: .25rem !important}

section.post.producto article .desc {margin: 1rem 0;}

section.post.producto {flex-direction: row; min-height: calc(100vh - 12rem); align-items: flex-start;}

section.post.producto .colores {gap: .5rem}
section.post.producto .colores span.flex {width: auto; align-items: center; justify-content: center; gap: .25rem; text-align: center;  }

section.post.producto .colores span.flex p{white-space: break-all; max-width: 100%;line-height: 1;
	text-align: center;}

.colores figure {width: 1.5rem; height: 1.5em; min-height: 1.5rem; border-radius: 50%; background-color: transparent; background-size: 110% !important;}
.pedido .colores figure,
#cart .colores figure {width: 1rem; height: 1rem; min-height: 1rem;}

section.post.producto .etiquetas span:nth-child(1){border-right: 1px solid var(--color-contraste); margin-right: .5rem; padding-right: .5rem;}
section.post.producto .contenedor.desc {background-color: var(--color-contraste); color: var(--color-claro); text-align: center; padding: 4rem; width: calc(100% - 8rem)}
section.post.producto span.cuidados {border-bottom: 2px solid var(--color-contraste); padding-bottom: 0.25rem; line-height: 1; font-weight: 700; cursor: pointer}
section.post.producto span.cuidados:hover {border-color: var(--color-principal); color: var(--color-principal);}
section.post.producto .botones {align-items: center; justify-content: start; margin: 1rem 0}
section.post.producto .botones a#shareThis {padding: 1rem; }


section.post.producto ul.color-chips {display: flex; gap: 1rem}
section.post.producto .colores .chip {cursor: pointer; padding: 0; border: 0; font-family: var(--condensed); flex: 0 1 1;}

section.post.producto .colores .chip.selected,
section.post.producto .colores .chip:hover {border: 0; background-color: transparent;}

section.post.producto .colores .chip.selected span,
section.post.producto .colores .chip:hover span{text-decoration: underline;}



section.banner.pagina .contenedor {align-items: center;}
section.banner.pagina .contenedor span.boton {width: auto}

/* .color-chips .chip.disabled { pointer-events: none; opacity: .7; }
.color-chips .chip.no-click { cursor: not-allowed; } */

.color-unico { display:flex; align-items:center; gap:.5rem; }
.colores .chip[aria-disabled="true"], .colores .chip.disabled {
  pointer-events: none;
  opacity:1;
  cursor: default;
}

h6.disclaimer {font-size: 12px; text-transform: none;}

section#related {background-color: var(--color-claro); min-height: 80vh;}

section#newsletter {background-color: var(--color-claro)}
section#newsletter.alt {width: 30%;}
section#newsletter .formulario{max-width: 50vw;}
section#newsletter form {display: flex; flex-direction: row; flex-wrap: wrap; gap: 1rem;}
section#newsletter form input[type="submit" i]{margin: 0}

section#newsletter input#correocontacto {flex: 1 1 70%}
form#newsletter_form input.half {max-width: calc(50% - 8px) !important; }
form#newsletter_form input.full {flex: 0 1 100%}



section#about{flex-direction: row;}
section#about figure.fotograma {width: 50%; flex-wrap: wrap; flex-direction: row; min-height: calc(100vh - 200px)}
section#about aside .columna {flex: 0 0; width: min(100%, calc(50vw - 4rem)); padding: 4rem; width: calc(100% - 8rem)}


section#about.pagina {align-items: flex-start}
section#about.pagina .contenedor {padding: 0 4rem}
section#about.pagina aside .columna {padding: 8rem 0rem; width: 100%;}
section#about.pagina figure.fotograma {flex: 1 1 0; min-height: auto; align-self: stretch; display: flex; align-items: flex-end; justify-content: flex-start}

section span.piedefoto{padding: 1rem; color: var(--blanco); }







/* Página Proyectos */




section.image.banner {position: relative; min-height: 60vh;}
section.image.banner .contenedor .encabezado h1 {color: var(--blanco)}
section.image.banner figure.imagenfondo {height: 100%; background-size: cover; background-attachment: fixed;}
section.image.banner h6 {color: var(--blanco)}

section.pagina .cajatexto {display: inline-block; width: calc(100% - 80px); min-height: 100%; font-weight: 700; font-size: 14pt; padding: 40px; color: var(--color-contraste)}
section.pagina .cajatexto h2 {font-size: 18pt; margin-top: 0}




footer .logopie {flex: 1 1 100%; flex-direction: row; justify-content: space-between}
footer .logopie figure {min-height: 90px; background-size: cover; background-position: -50px 50%}

footer .columna {gap: 1rem;}
footer .columna h4.display {letter-spacing: 1px;}
footer .columna p {line-height: 1.5; font-size: 10pt;color: var(--color-claro)}

footer .columna h2 {color: var(--color-claro); font-weight: 700; font-size: 32pt}
footer .columna.correo {align-items: flex-end;}

footer nav.redes {display: inline-flex; flex-direction: row; gap: 2rem}
footer nav.redes a {color: #fff;}
footer nav.redes i {font-size: 24px}

footer .correo span.boton i {font-size: 32px}


.bdcookies-btn {color: var(--blanco) !important}