/*
	01. BARNAV
	--------------------------------------------------------------------------------------------------------------------
*/

/*In mycss.css*/

/*
	02. CATALOGUE
	--------------------------------------------------------------------------------------------------------------------
*/

/* Container */

.catalogue{
	display					: flex					;
	justify-content			: center				;
	align-items				: center				;
	width					: auto					;
	gap						: 5rem					;
	

	padding					: 3rem 2rem 3.5rem 2rem	;
}

.catalogue .container{
	max-width				: 110em					;
	gap						: 5rem					;
}

/* Sidebar */

.sidebar{ 
	display					: flex					;
	flex-direction			: column				;
	position				: sticky				;
	top						: 7rem					;
	width					: 15rem					;
	height					: fit-content			;

	gap						: 1rem					;

	padding					: 1rem					;
	margin					: 0						;

	background-color		: #E0C1F6			   ;
	border-radius			: 1.875rem				;
}

.sidebar ul {
	display					: flex					;
	flex-direction			: column				;
	list-style-type			: none					;
	gap						: 0.3rem				;

	width					: 100%					;

	margin					: 0						;
	padding					: 0						;
}

.sidebar ul li{
	width					: 90%					;
	height					: fit-content			;

	margin					: 0.2rem 0rem			;
	padding					: 0						;
}


.sidebar ul li button{
	display					: flex					;
	justify-content			: space-between			;
	align-items				: center				;
	border					: none					;
	background-color		: #ffffff00		   ;
	cursor					: pointer				;

	margin					: 0						;
	

	color					: #4B1C71			   ;
	font-family				: DM Sans				;
	font-size				: 1rem					;
	font-style				: normal				;
	font-weight				: 500					;
}

.sidebar ul li button.active{
	background-color		: #F4CA95				;
	padding					: 0.5rem 1rem 0.5rem 1rem;
	border-radius			: 1rem					;
	border					: 2px solid #4B1C71   ;
	width					: 100%					;
}



/* Productos */

.catalogue-products h1{
	margin					: 0						;
	margin-bottom			: 1em					;

	color					: #8237BD			   ;
	font-family				: Quicksand				;
	font-size				: 2.5rem				;
	font-style				: normal				;
	font-weight				: 700					;
	line-height				: 100%					;
}

.catalogue-products{
	display					: flex					;
	flex-direction			: column				;
	height					: fit-content			;
	width					: 100%					;
}

.catalogue-products .btnCheck{
	padding					: 3% 0rem				;
}

.catalogue-products .row{
	display: flex;
	justify-content: flex-start;
	gap: clamp(7rem, 2.2vw, 8rem);
	width: 100%;
}

/* Cada card ocupa 1/4 del row (menos los gaps) */
.catalogue-products .row .product-layout{
  flex: 0 0 calc((100% - 3 * clamp(7rem, 2.2vw, 8rem)) / 4);
  width: auto;
  max-width: none;
  box-sizing: border-box;
}

.catalogue-products .row .product-layout a:nth-child(1){
  width: 100%;
}


.catalogue-columna{
	display					: flex					;
	flex-direction			: column				;
	

	gap						: 2.5em					;	
	width					: 100%					;
}

/* BOTON AÑADIR AL CARRITO */

.catalogue-columna .btn-regular{
	width					: 100%					;
	margin-top              : 0.4rem                ;

	font-size				: 1.2rem				;
	font-family				: DM SANS				;
	font-size				: 1rem					;
	font-weight				: 500					;
	text-decoration			: none					;
}

.catalogue-columna .btn-regular:hover{
    cursor                  : pointer               ;

    color                   : black               ;
	background-color		: #f7ce4d			   ;
}

/* Error Message!!! */

.catalogo-filtro-error{
	width					: 100%					;

	text-align				: center				;

	margin-top				: 3em					;

	color					: #8237BD			   ;
	font-family				: Quicksand				;
	font-size				: 2rem					;
	font-style				: normal				;
	font-weight				: 600					;
	line-height				: 100%					;
}

/* --- VER MÁS BTN ---*/


.ver-mas-product-list button{
	margin-top				: 3em					;

	cursor					: pointer				;

	align-self				: center				;
	justify-self			: center				;

	font-size				: 1.5rem				;
}

/*
	03. FOOTER
	--------------------------------------------------------------------------------------------------------------------
*/

/*In mycss.css*/

/*
	04. MODALS
	--------------------------------------------------------------------------------------------------------------------
*/

.modal-carrito {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.modal-contenido {
  background: #fff;
  padding: 2rem;
  border-radius: 1rem;
  width: 90%;
  max-width: 400px;
  text-align: center;
  position: relative;
}

.cerrar-modal {
  position: absolute;
  top: 1rem; right: 1rem;
  font-size: 1.5rem;
  cursor: pointer;
}

.hidden {
  display: none;
}






/* =========================================================
   TSUKI · Tooltip de Valoración (follow cursor)
   ========================================================= */

.review-tooltip{
  /* el JS controla position: fixed + top/left */
  width: min(220px, calc(100vw - 24px));
  max-width: 220px;

  background: linear-gradient(
    180deg,
    #FFF7FF 0%,
    #FFF0FF 100%
  );

  border: 2px solid #E1C5FA;
  border-radius: 1.6rem;

  padding: 0.9rem 1rem 1rem 1rem;

  font-family: "DM Sans", sans-serif;
  color: #4B1C71;

  backdrop-filter: blur(12px);

  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;

  pointer-events: none;
}

/* Visible (el JS solo cambia opacity/transform) */
.review-tooltip.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* =========================
   Estrellas
   ========================= */
.review-tooltip .rt-stars{
  display: flex;
  align-items: center;
  gap: 0.35rem;

  font-size: 1.1rem;
  font-weight: 800;
  color: #8237BD;

  margin-bottom: 0.35rem;
}

/* =========================
   Comentario
   ========================= */
.review-tooltip .rt-text{
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.35rem;
  font-weight: 500;
  color: #4B1C71;
}

/* =========================
   Autor
   ========================= */
.review-tooltip .rt-mini{
  margin-top: 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #967CAA;
}

/* Línea decorativa antes del autor */
.review-tooltip .rt-mini::before{
  content: "";
  display: block;
  height: 1px;
  margin-bottom: 0.45rem;
  background: linear-gradient(
    to right,
    rgba(130,55,189,0.35),
    rgba(130,55,189,0.05)
  );
  border-radius: 999px;
}

/* Glow interno cute */
.review-tooltip::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1.6rem;
  pointer-events: none;
}

/* =========================================================
   TSUKI · Search Box (Catálogo)
   ========================================================= */

.search-box{
  display: flex;
  flex-direction: column;
  gap: 0.45rem;

  margin-bottom: 1.4rem;
}

/* Label */
.search-box label{
  font-family: "Quicksand", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #8237BD;
}

/* Input */
.search-box input{
  width: 100%;
  padding: 0.5rem 1rem;

  margin-bottom: -1rem;

  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: #4B1C71;

  background: linear-gradient(
    180deg,
    #FFF7FF 0%,
    #FFF0FF 100%
  );

  border: 2px solid #E1C5FA;
  border-radius: 1.2rem;

  outline: none;
  box-sizing: border-box;

  transition: all 0.18s ease;
}

/* Placeholder */
.search-box input::placeholder{
  color: #9C7CC5;
  font-weight: 400;
}

/* Focus */
.search-box input:focus{
  border-color: #8237BD;
  background: #FFFFFF;
}

/* Cuando hay texto (estado activo) */
.search-box input:not(:placeholder-shown){
  border-color: #8237BD;
  background: #FFFFFF;
}