/* Custom Variables */
:root{
  /* Font Families */
  --font-caraque: "caraque-solid", sans-serif;
  --font-menco: "menco", sans-serif;
  --font-tondo: "tondo", sans-serif;
  --font-inter: 'Inter', sans-serif;
  --font-newzen: "new-zen", sans-serif;

  --font-body: var(--font-inter);
  --font-pro: var(--font-menco);
  --font-playful: var(--font-caraque);
  --font-secondary: var(--font-newzen);


  /* Font Sizes */
  --font-size-base: 0.875rem;    /* 14px */
  --font-size-small: 0.8125rem;  /* 13px */
  --font-size-medium: 1rem;      /* 16px */
  --font-size-large: 1.25rem;    /* 20px */
  --font-size-xlarge: 1.4rem;    /* 22.4px */
  --font-size-xxlarge: 1.5rem;   /* 24px */
  --font-size-xxxlarge: 1.8rem;  /* 28.8px */
  
  /* Font Weights */
  --font-weight-light: 100;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 900;
  
  /* Font Styles */
  --font-style-normal: normal;

  /* Radius values*/
  --bq-border-radius: 5px;
  --bq-image-radius: 5px;
  /* Color palette */
  --bq-color-pink-10: #fdf6f2;
  --bq-color-pink-9: #fff4ef;
  --bq-color-pink-7: #fbd8c9;
  --bq-color-pink-5: #eb5160;
  /*--bq-color-purple-3: #3f2973;*/
  --bq-color-purple-8: #f1ecff;
  --bq-color-purple-7: #e5ddfb;
  --bq-color-purple-6: #b5a1c9;
  --bq-color-purple-5: #9e88b4;
  --bq-color-purple-4: #6e558a;
  --bq-color-purple-3: #52376e;
  --bq-color-purple-2: #2f1d40;
  --bq-color-purple-1: #130106;
  
  --bq-color-border-a: var(--bq-color-pink-7);
  --bq-color-shadow-a: #3d1c0e46;
}

/* En productos con carousel, hacer que asome el producto de la derecha para que el usuario entienda que puede deslizar */
@media (max-width: 768px) {
  .tptncarousel.tptnprods {
    overflow: hidden;
  }
  .prodcrsl .slick-list {
    overflow: visible;
    padding-right: 50px;
  }
}

/* #region ============================================== GENERAL RULES ====================================================== */
img{
  border-radius: var(--bq-image-radius);
}

a, body {
  color: var(--bq-color-purple-2);
  font-family: var(--font-body);
  font-size: var(--font-size-medium);
}

h1.h1 {
  font-family: var(--font-primary);
  font-size: var(--font-size-xxxlarge);
  margin: 0 0 20px;
}

.mobile-menu img { /* Fixes category icons being too big in mobile */
  max-width: 20px;
}

/* #endregion GENERAL RULES */
/* #region ============================================== HEADER ============================================================= */

#tptnhomeslider {/* Templatin Home Slider */
  border-radius: var(--bq-border-radius);
  /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
  overflow: hidden; /* This ensures child elements respect the border radius */
}

/* Banners */ 
.tptnbanner a::before {
  background: rgba(255, 234, 241, 0.15);
  width: 100%;
  left:0%;
  transition: all 0.1s ease;
  border-radius: var(--bq-border-radius);
}
.tptnbanner img{
  border-radius: var(--bq-border-radius);
}

/*Left and right arrows in the carousels*/
.slick-next{
  margin-right: 0px;
}
.slick-prev{
  margin-left: 0px;
}

/* Templatin Products Carousels*/
.tptnprods{
  font-family: var(--font-tondo);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-large);
}

.tptnprods .crsl-title h2{
  font-family: var(--font-primary);
  color: var(--bq-color-purple-2);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-xxlarge);
}
.tptnprods .crsl-title h4{
  font-family: var(--font-primary);
  color: var(--bq-color-purple-2);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-xxxlarge);
}

.tptnprods .crsl-title{
  border-bottom: 2px solid #ddbbbb;
  padding-bottom: 0px;
}

.tptnprods .crsl-link a {
  font-size: var(--font-size-xlarge);
}

.tptnprods .crsl-link :hover{
  color: var(--bq-color-pink-5);
}

/* #endregion MAIN PAGE*/
/* #region ============================================== FOOTER ============================================================= */

/* Templatin Header Links */
/* Los que aparecen en la barra superior (Novedades, Nuestra tienda, FAQ...)*/

/* .dtmenu div{
  border-radius: var(--bq-border-radius);
} */


/* Whatsapp module */
.ets_wa_whatsapp_block .ets_wa_title {
border-radius: var(--bq-border-radius);
}

#tptndesktopmenu .dtmenu .dtmenu-title {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-xlarge);
}
#header {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-regular);
  font-style: var(--font-style-normal);
  font-size: var(--font-size-medium);
}
#header .dtmenu-title{
  letter-spacing:1px;
}
/*Make header links taller so they're easy to click*/
#header .tptnheaderlinks ul li a{
  padding-top: 15px;
  padding-bottom: 15px;
}

#header .tptnheaderlinks ul a{
  /*On hover, header links highlight with the main store color*/
  color: var(--bq-color-purple-2);
  font-size: var(--font-size-large);
}
#header .tptnheaderlinks ul a:hover{
  /*On hover, header links highlight with the main store color*/
  color: var(--bq-color-pink-5);
}


#tptndesktopmenu .dtmenu .dtmenu-list li[data-depth="0"]:hover .level-1, .tptnmobilemenu ul ul{
background: var(--bq-color-purple-8);
}

.sub-container li{
  line-height: 1em;
}

#header .mobile-header .m-toggle{
  color: var(--bq-color-purple-2);
}

#header .header-nav {
background-color: var(--bq-color-purple-7);
}


/* Templatin Header Categories Dropdown */

#tptndesktopmenu .dtmenu .dtmenu-list .desktop-menu li a {
  color:var(--bq-color-purple-2);
  display:block;
  text-decoration:none
}
/* #endregion HEADER */
/* #region ============================================== MAIN PAGE ========================================================== */


ul.row{
  display:flex;
  justify-content: center;
}



.footer-container {
  background-color: var(--bq-color-purple-2);
  color: var(--bq-color-purple-7);
  }

#footer .footer-container p.h3 {
  color: var(--bq-color-purple-7);
}

#footer .footer-container .footer-toggle li, #footer .footer-container .footer-toggle p {
  color: #b3b3b3;
}

#footer .footer-container li a,
#footer .footer-container .footer-toggle li,
#footer .footer-container .footer-toggle p,
.dropdown {
  color: var(--bq-color-purple-6);
  font-size: 1.15em;
}
#footer .footer-container li a:hover,
.dropdown :hover{
  color: var(--bq-color-pink-7);
}

#footer .footer-bottom .tptncopyright,
.product-customization small,
.tptnsearch form button:hover {
  color: #b3b3b3;
}

.footer-bottom {
  background-color: var(--bq-color-purple-2);
}

/* #endregion FOOTER*/
/* #region ============================================== PRODUCT LIST PAGE ================================================== */



#js-product-list-header{ /* Título de la categoría */
  font-family: var(--font-caraque);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-xxxlarge);
}

#js-product-list-top{  /* Barra con número de resultados, ordenación y filtros */
  background-color: var(--bq-color-purple-7);
  border-radius:var(--bq-border-radius);

  font-family: var(--font-caraque);
  font-size: var(--font-size-large);
}
.col-md-3 { /* Label "Hay X productos"*/
  margin-top: 12px;
}

.col-sm-3 { /* Quickfix for "Hay X productos" to be centered vertically */
  font-size: var(--font-size-xlarge);
}

button.btn-unstyle { /* Dropdown de "Ordenar por..." */
  border-radius: var(--bq-border-radius);
}

/*SubCategories*/
a.subcategory-name {
  font-size: 1.5em;
}
#subcategories .subcategory-heading {
  font-size: 1.5em;
}


.product-miniature:hover { /* Outline when hovering over a product */
  box-shadow:0 0 0 1px var(--bq-color-purple-5);
}



/*These are the labels that show at the top left in the product thumbnail (Oferta, Nuevo..) */
.product-flags{
  font-family: var(--font-newzen);
  border-radius:var(--bq-border-radius);
}
.product-flags li{
  margin-bottom:5px;
}
.product-flags .discount{
  font-size: var(--font-size-medium);
  font-weight: var(--font-weight-bold);
  /* box-shadow: 1px 3px 3px var(--bq-color-shadow-a); */
}
.product-flags .new{
  font-size: var(--font-size-medium);
  font-weight: var(--font-weight-medium);
  background-color: var(--bq-color-purple-3);
}
.product-flags .pack{
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
}

/* Fonts */
.thumbnail-container .product-title{
  font-family: var(--font-proffesional);
  font-weight: 400;
  font-style: normal;
  font-size:1.05em;
}
.thumbnail-container .product-price-and-shipping .price{
  font-family: "new-zen", sans-serif;
  font-family: "caraque-solid", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size:1.3em;
  color: var(--bq-color-purple-4);
}



/* Product images */
.thumbnail img{
  border-radius: var(--bq-border-radius);
}


/* Add to cart button */
.product-qty-cart button.btn-primary.add-to-cart {
  width: 50px;
  height: 50px;
  border-radius: var(--bq-border-radius);
  background: var(--bq-color-purple-2);
  float: right;
}
/* Filters */
.tptn-overlay {
  background:rgba(0,0,0,.3);
}


/* This customizes the color boxes for the color preview */
/* Moves the color boxes a little away from the image so they aren't tangent */
.highlighted-informations {
  margin-top: 5px;
  }

.variant-links .color{
  border-radius: var(--bq-border-radius);
  min-width: 25px;
  min-height: 25px; 
  border: 1px solid var(--bq-color-purple-2);
  box-shadow: 1px 3px 3px var(--bq-color-shadow-a);

  transition: all 0.1s ease-out;
}

.variant-links .color:hover{
  transform: scale(1.2) translateY(-1px);
  filter: brightness(1.1);
  box-shadow: 3px 6px 6px var(--bq-color-shadow-a);
  border: 2px solid var(--bq-color-pink-5);
}

/* Here we're hacking the layout a bit to aligh the +N with the squares (if more than 5 colors) */
.variant-links {
  display:flex;
  align-items: center;
  justify-content: center;
}
.js-count {
  position: relative;
  font-size:medium;
}

/* .thumbnail-container {
  border-radius: var(--bq-image-radius);
  background-color: var(--bq-color-pink-9);
  border: 1px solid #c2bad7;
  box-shadow: 1px 3px 3px #2f1d402b;
} */


/* Product Title in the thumbnail */
.product-miniature .product-title a {
  color: var(--bq-color-purple-3);
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-medium);
}

.product-miniature .product-title a:hover {
  /* color: #777; */
  color: var(--bq-color-pink-5);
}


/* Product Price in the thumbnail */
.product-miniature .product-price-and-shipping {
  font-family: var(--font-newzen);
  font-weight: var(--font-weight-bold);
}
.product-miniature .product-price-and-shipping .regular-price{
  font-family: var(--font-newzen);
  font-size: var(--font-size-large);
  font-weight:var(--font-weight-bold);
  color:var(--bq-color-purple-5);
}
.product-miniature .product-price-and-shipping .price{
  font-family: var(--font-newzen);
  font-size: var(--font-size-xlarge);
  font-weight:var(--font-weight-bold);
  color:var(--bq-color-pink-5);
}

/* This is a bit much for now...  */
/*
.price {
  border-radius: var(--bq-image-radius);
  background-color: var(--bq-color-pink-7);
  border: 1px solid #c2bad7;
  padding: 5px 10px;
  box-shadow: 1px 3px 3px #2f1d402b;
  color: var(--bq-color-purple-2);
}
  */
/* #endregion*/
/* #region ============================================== PRODUCT PAGE ======================================================= */
/* #region Breadcrumbs */

.breadcrumb{
  color:var(--bq-color-purple-2);
  font-family: "caraque-solid", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size:var(--font-size-large);
}

.breadcrumb a:hover{
  color:var(--bq-color-pink-5);
}

.breadcrumb li::after{
  color:var(--bq-color-pink-5);
  color:var(--bq-color-purple-6);
}

.breadcrumb li:last-child{
  color:var(--bq-color-pink-5);
}
/*#endregion*/
/* #region Images and Thumbnails */


/* This is where the main image of the product exists */
.product-cover {
  border: 1px solid var(--bq-color-border-a);
  border-radius: var(--bq-image-radius);
  box-shadow: 1px 3px 3px var(--bq-color-shadow-a);
}

.product-cover .slick-arrow{
  background-color: var(--bq-color-pink-7);
  color: var(--bq-color-purple-2);
  border-radius: var(--bq-border-radius);
  height: 50px;
  width: 30px;
  align-content: center;
  margin-right: -5px;
  margin-left: -5px;
}

/*
.product-images{
  border: 1px solid var(--bq-color-border-a);
  border-radius: var(--bq-image-radius);
  box-shadow: 1px 3px 3px var(--bq-color-shadow-a);
}
*/

.product-images:hover{
  border: 1px solid var(--bq-color-pink-5);
}

/* Thumbnails for the other pictures of the product */
div.thumb-container {
  /* width: 158px; */
  width: 100px;
}

/* .images-container .product-images .thumb:hover{
  border: 1px solid var(--bq-color-pink-7);
  border-radius: var(--bq-image-radius);
} */


/* #endregion */
/* #region Product Info (Right-side panel) */

.cust-product-info { /*Short description and features table*/
  display:flex;
  flex-direction:column;

  font-family: var(--font-caraque);
  font-size:var(--font-size-large);
  font-weight: var(--font-weight-light);

  color: var(--bq-color-purple-2);
  background-color: var(--bq-color-pink-9);

  border: 1px solid var(--bq-color-border-a);
  border-radius: var(--bq-border-radius);
  box-shadow: 1px 3px 3px var(--bq-color-shadow-a);

  padding-top: 15px;
  padding-bottom: 15px;
  margin-bottom: 15px;
}
.cust-product-info h1{ /* Product Title */
  font-size: var(--font-size-xxxlarge);
  font-weight: var(--font-weight-medium);
  font-style: normal;
  letter-spacing:1px;
}
.product-features .h6{ /* Título "Ficha Técnica" */
  font-size: var(--font-size-xxlarge);
  font-weight: var(--font-weight-medium);
}
.features-table{ /* Tabla de Ficha téncica */
  width:100%;
  max-width:450px;
}
.features-table th,td{ /* Líneas separadoras */ 
  border-bottom: 1px dashed var(--bq-color-pink-5);
}
.features-table .name{ /* Nombre de la característica */
  width:50%;
  color: var(--bq-color-purple-2);
}
.features-table .value{ /* Valor de la característica */
  text-align: center;
  width:50%;
  color: var(--bq-color-pink-5)
}

.product-reference label{ /* Label "Referencia:" */
  font-style: var(--font-caraque);
  font-size: var(--font-size-large);
  align-self:center;
}
.product-reference span{ /* Código de la referencia */
  font-style: var(--font-caraque); /* Why is it not working? */
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xxlarge);
  /* color:var(--bq-color-pink-5); */
}



.product-variants .product-variants-item .color {
  width: 36px;
  height: 36px; 
}

.custom-checkbox input[type="checkbox"] + span.color, .variant-links .color, label .color {
  border-radius: var(--bq-border-radius);
  border: 1px solid var(--bq-color-purple-2);
  box-shadow: 1px 3px 3px var(--bq-color-shadow-a);
  transition: all 0.1s ease-out;
}
.custom-checkbox input[type="checkbox"] + span.color:hover, .variant-links .color:hover, label .color:hover {
  transform: scale(1.2) translateY(-1px);
  filter: brightness(1.1);
  box-shadow: 3px 6px 6px var(--bq-color-shadow-a);
  border: 2px solid var(--bq-color-pink-5);
}

/* This overrides some theme options that don't make sense anymore */
.product-variants{
  border-bottom:0px;
  padding:0px;
}

/* #endregion */
/* #region Detalles y Descripción */
/* Caja de pestañas inferior (Descripción, Detalles, Descargas, ...) */
.tabs {
  font-size: var(--font-size-medium);
  color: var(--bq-color-purple-2);
  border-radius: var(--bq-image-radius);
  background-color: var(--bq-color-pink-9);
  border: 1px solid var(--bq-color-border-a);
  box-shadow: 1px 3px 3px var(--bq-color-shadow-a);
}
.tabs .nav-tabs .nav-link.active {
  color: var(--bq-color-purple-2);
}


/* Descripcion */
div.product-description li {
  margin-left:20px;
  list-style-type:disc;
}
/* #endregion */
/* #region Comentarios y Reseñas */


#product-comments-list-header {
  margin: 60px 0 15px;
  }

.product-comment-list-item {
  border-radius: var(--bq-border-radius);
  background-color: var(--bq-color-pink-9);
  border: 1px solid var(--bq-color-border-a);
  box-shadow: 1px 3px 3px var(--bq-color-shadow-a);
  
  margin-bottom: 5px;
}

.btn-comment {
  background-color: var(--bq-color-purple-2);
}

.btn-comment:hover {
  background-color: var(--bq-color-purple-3);
}
/* #endregion */
/* #endregion PRODUCT PAGE*/
/* #region ============================================== STORE INFO ========================================================= */
div.store-info{
  font-size:20px;
}
/* #endregion */
/* #region ============================================== TESTING AI ========================================================= */

/* Claude generated css to make the "sticky" header-bottom menu*/
/* Add to your custom.css */
.header-bottom {
  width: 100%;
  z-index: 1000;
}

.header-bottom.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* BRANDS PAGE ----------------------------- */
.page-manufacturer .brand-img, .page-supplier .brand-img {
  border: 0px;
}
/* #endregion */

.btn-primary, .btn-secondary, .btn-tertiary {
  font-size: var(--font-size-base);
}

.form-control {
  font-size: var(--font-size-small);
}


/* Arregla el scroll horizontal no deseado en el móvil */
/* Fix scroll horizontal en móvil */
html, body {
  overflow-x: hidden;
}
/* Contener los carousels correctamente */
.slick-slider {
  overflow: hidden;
}
/* Fix flechas del carousel en móvil */
@media (max-width: 768px) {
  .slick-next {
    margin-right: 0px;
  }
  .slick-prev {
    margin-left: 0px;
  }
}

.tptncarousel.tptnprods {
  overflow: hidden;
}
@media (min-width: 769px) {
  .prodcrsl .slick-list {
    overflow: visible;
    padding-right: 140px;
  }
}

/* CLAUDE HIZO ESTO cuando creé el FAQ y no quedaba muy bien. Principalmente arregla las listas y los headers*/
/* Fix para listas en páginas de contenido (como FAQ) */
.cms-content ul,
.page-content ul {
  list-style-type: disc;
  padding-left: 30px;
  margin-bottom: 15px;
}

.cms-content ul li,
.page-content ul li {
  margin-bottom: 5px;
}

/* Mejora el espaciado entre headers y contenido anterior */
.cms-content h2,
.page-content h2 {
  margin-top: 40px;
  margin-bottom: 15px;
}

.cms-content h3,
.page-content h3 {
  margin-top: 25px;
  margin-bottom: 12px;
}

/* Primer h2 sin margen superior para que no haya espacio al inicio */
.cms-content h2:first-child,
.page-content h2:first-child {
  margin-top: 0;
}

/* FAQ Accordion - Made with Claude Help */
.faq-item {
  background-color: var(--bq-color-pink-9);
  border: 1px solid var(--bq-color-border-a);
  border-radius: var(--bq-border-radius);
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: 1px 2px 3px var(--bq-color-shadow-a);
  transition: all 0.2s ease;
}

.faq-item:hover {
  border-color: var(--bq-color-purple-5);
}

.faq-question {
  /* font-family: var(--font-menco); */
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-medium);
  color: var(--bq-color-purple-3);
  cursor: pointer;
  user-select: none;
  padding: 15px;
  padding-left: 40px;
  position: relative;
  transition: all 0.2s ease;
}

.faq-question::before {
  content: "👉";
  position: absolute;
  left: 15px;
  color: var(--bq-color-pink-5);
  transition: transform 0.2s ease;
}

.faq-question:hover {
  color: var(--bq-color-pink-5);
  background-color: var(--bq-color-purple-8);
}

.faq-item.active .faq-question {
  background-color: var(--bq-color-purple-8);
}

.faq-item.active .faq-question::before {
  transform: rotate(90deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 15px;
}

.faq-item.active .faq-answer {
  max-height: 1000px;
  padding: 0 15px 15px 15px;
}

.faq-answer p:first-child,
.faq-answer ul:first-child {
  margin-top: 0;
}

.faq-answer p:last-child,
.faq-answer ul:last-child {
  margin-bottom: 0;
}