/*
 * Custom code - Vinilos Baratos
 * ===============================================
 */

/* FUENTES */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Open+Sans:wght@400;500&display=swap');

h1, h2, h3, h4, h5, h6, .block-title, .product-title, .page-title,
#right-column .block .title_block, #right-column .ps-widget h4,
#right-column .ps-categorytree .h6, #right-column .block-categories h4 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #111;
}

body, p, li, a, span, input, button {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  line-height: 1.5;
  color: #222;
  font-size: 16px;
}

/* COLUMNA IZQUIERDA */
#left-column .block-categories, #left-column .ps-categorytree, #left-column .block-categories.block {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  padding: 10px 12px;
  overflow: hidden;
  max-width: 225px;
}

#left-column .block-categories .title_block, #left-column .ps-categorytree .h6, #left-column .block-categories h4 {
  border-bottom: 2px solid #f1f1f3;
  text-align: center;
  margin: 4px 0 10px;
  padding-bottom: 10px;
}

#left-column .block-categories a, #left-column .ps-categorytree a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 6px;
  color: #333;
  text-decoration: none;
  border-radius: 10px;
  transition: all .2s ease;
}

#left-column .block-categories li:hover > a {
  background: #f7f8fb;
  transform: translateX(3px);
  color: #ef0660;
}

/* COLUMNA DERECHA */
#right-column .block, #right-column .ps-widget, #right-column .custom-block {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  padding: 14px 16px;
  margin-bottom: 18px;
  max-width: 225px;
}

@media (min-width: 992px){
  #wrapper .container { padding-right: 0 !important; }
  #right-column { display: flex; flex-direction: column; align-items: flex-end; position: sticky; top: 24px; }
  #left-column .block-categories { position: sticky; top: 24px; }
}

/* OCULTAR DERECHA EN MÓVIL */
@media (max-width: 991px) {
    #right-column { display: none !important; }
    #content-wrapper { width: 100% !important; flex: 0 0 100% !important; }
}

/* ==========================================================
   SUPER PARCHE: BANNER DE CATEGORÍA (EL PERRO GIGANTE)
   ========================================================== */

/* Forzamos el contenedor para que no deje crecer a la imagen */
.block-category, 
.category-cover, 
#category-description-block, 
.content-wrapper .category-description {
    max-height: 250px !important; 
    height: 250px !important;
    min-height: 100px !important;
    overflow: hidden !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-bottom: 30px !important;
    background: #fff !important;
    text-align: center !important;
}

/* Forzamos la imagen para que respete el contenedor */
.block-category img, 
.category-cover img, 
#category-description-block img,
.category-description img {
    width: auto !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 250px !important;
    object-fit: contain !important; /* Mantiene la proporción sin estirar */
    display: inline-block !important;
}

/* Si el perro está dentro de un div de descripción, quitamos rellenos raros */
.category-description p, .category-description {
    margin: 0 !important;
    padding: 0 !important;
}