/* =====================================================================
   CATALOGO-THEME.CSS
   Hoja de estilos de ADAPTACIÓN al catálogo mensual de Ultra Cash.
   Usaré estos colores:
     - Azul principal (marcos, iconos, títulos):      #0086C4
     - Azul oscuro (bloques sólidos / hover):          #006A8F
     - Amarillo etiqueta de precio:                    #F2D133
     - Amarillo de acento (banners secundarios):       #FFE100
     - Texto sobre la etiqueta de precio:              #000000
   ===================================================================== */

:root{
  --uc-blue:        #0086C4;
  --uc-blue-dark:   #006A8F;
  --uc-yellow:       #F2D133;
  --uc-yellow-accent:#FFE100;
  --uc-ink:          #000000;

  --uc-radius:       10px;  /* radio real medido sobre el PDF, no estimado */
  --uc-radius-sm:    8px;
  --uc-border-w:     1.5px;
}


/* ---------------------------------------------------------------------
   1. MARCO AZUL — tarjeta de producto (.list-product)
--------------------------------------------------------------------- */
.list-product{
  border: var(--uc-border-w) solid var(--uc-blue);
  border-radius: var(--uc-radius);
  box-shadow: none;
}
.list-product:hover,
.home-electronic .list-product:hover{
  border-color: var(--uc-blue-dark);
}
/* El thumbnail interior respeta el radio del marco en la esquina superior */
.list-product .img-block{
  border-top-left-radius: calc(var(--uc-radius) - var(--uc-border-w));
  border-top-right-radius: calc(var(--uc-radius) - var(--uc-border-w));
}

/* Botón de "vista rápida" (lupa) y demás iconos flotantes, a la marca */
.home-electronic a.quick_view:hover{
  background-color: var(--uc-blue);
  color:#fff;
}
.home-electronic .product-link:hover,
.home-electronic .inner-link:hover,
.home-electronic .add-to-link ul li a:hover{
  color: var(--uc-blue);
}

/* Banderín "Nuevo/Oferta" de esquina, a la marca (antes verde/cian genérico) */
.home-electronic .new,
.new{
  background-color: var(--uc-blue-dark);
}


/* ---------------------------------------------------------------------
   2. ETIQUETA DE PRECIO — sustituye el truco de texto amarillo con
   contorno azul (text-shadow) por una etiqueta
--------------------------------------------------------------------- */
.pricing-meta .precio,
.pricing-meta .precio2{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--uc-yellow);
  color: var(--uc-ink);
  font-family: "Open Sans", sans-serif;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  text-shadow: none;            /* anula el truco antiguo si algo queda inline */
  -webkit-text-stroke: 0;
}

/* Tamaño "tarjeta de listado" (grid, carrusel de destacados, relacionados) */
.pricing-meta .precio{
  font-size: 19px;
  padding: 9px 14px 9px 20px;
  clip-path: polygon(0% 50%, 14px 0%, 100% 0%, 100% 100%, 14px 100%);
  border-radius: 0 var(--uc-radius-sm) var(--uc-radius-sm) 0;
}

/* Tamaño "ficha de producto" (grande, precio principal) */
.pricing-meta .precio2{
  font-size: 34px;
  padding: 14px 22px 14px 30px;
  clip-path: polygon(0% 50%, 20px 0%, 100% 0%, 100% 100%, 20px 100%);
  border-radius: 0 12px 12px 0;
}

/* Subetiqueta opcional de precio por unidad (€/Kg, €/L, €/ud...) */
.pricing-meta .precio .precio-unidad,
.pricing-meta .precio2 .precio-unidad{
  display: block;
  font-size: .5em;
  font-weight: 600;
  color: #3a3a3a;
  margin-top: 2px;
}


/* ---------------------------------------------------------------------
   3. TÍTULOS DE SECCIÓN
--------------------------------------------------------------------- */
.section-title h2{
  color: var(--uc-blue);
  text-transform: uppercase;
  letter-spacing: .3px;
  font-weight: 800;
}
.section-title.underline-shape:after{
  background-color: var(--uc-yellow);
}


/* ---------------------------------------------------------------------
   4. MENÚ DE CATEGORÍAS (barra lateral "Categorías") — a la marca
--------------------------------------------------------------------- */
.home-9 h3.vertical-menu-heading,
h3.vertical-menu-heading{
  background: var(--uc-blue);
  color: #fff;
}
.home-electronic ul.vertical-menu-wrap li>a:hover,
.home-electronic ul.vertical-menu-wrap li:hover>a{
  color: var(--uc-blue);
}


/* ---------------------------------------------------------------------
   5b. BANNERS INFORMATIVOS (zonas de reparto / pedido mínimo)
--------------------------------------------------------------------- */
.banner-wrapper{
  border-radius: var(--uc-radius);
  border: var(--uc-border-w) solid var(--uc-blue);
}


/* ---------------------------------------------------------------------
   5. DETALLES SUELTOS
--------------------------------------------------------------------- */
/* Enlaces "Ver comentarios", cesta, etc. que usaban otro azul distinto */
.home-electronic .shop-now-btn,
.home-electronic .btn-hover-primary{
  background-color: var(--uc-blue);
  border-color: var(--uc-blue);
}
.home-electronic .btn-hover-primary:hover{
  background-color: var(--uc-blue-dark);
  border-color: var(--uc-blue-dark);
}
.list-product .img-block{
  position: relative;
  aspect-ratio: 1 / 1;   /* fuerza el cuadro, pase lo que pase con la imagen que entre */
  overflow: hidden;
  background: #fff;
}
.list-product .img-block .thumbnail{
  position: absolute;
  inset: 0;
  display: block;
}
.list-product .img-block img.first-img,
.list-product .img-block img.second-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* nunca recorta el producto; si la imagen no es cuadrada, deja margen blanco en vez de deformar */
  background: #fff;
}