/* Bloqueo las direcciones entrega a los clientes. Baleares, hace el pedido desde la península, después entra en su área de cliente, y la cambia a Baleares, se ahorra un dinero */
/* SOLO dirección de entrega */
.page-addresses .address-actions .edit,
.page-addresses .address-actions .delete{
display:none !important;
}

/* mensaje solo en cuenta cliente */
.page-addresses #opc_addresses_delivery_content::after{
content: "AVISO: Para modificar una dirección ya utilizada en un pedido,  es necesario contactar con nosotros.";
display:block;
margin-top:10px;
padding:12px;
background:#fff3cd;
border:1px solid #ffeeba;
font-size:14px;
color:#856404;
border-radius:4px;
}

/*
 * PRESTASHOP 9  cambio el color de botones y enlaces al azul claro
 */
 /*Tema subcaegorias, para que aparezca el arbol activando la subcategoería en azul. */
#left-column a.active,
#left-column a.current {
  color: var(--primary, #0a7cb0) !important;
  font-weight: 600;
 
}

/* Padres abiertos no deben heredar el azul aunque estén "open" */
#left-column li.open > a,
#left-column li.is-open > a {
  color: inherit !important;
}


 /*
 *El listados, los textos de sotck, enbtrega,...
 */
.product-extra__dot{
  width: 8px;
  height: 8px;
  background: #16a34a;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  position: relative;
  top: -1px;
}

.product-extra__dot::after{
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(22,163,74,.15);
}

.product-extra__stock--ok{
  display: inline-flex;
  align-items: center;
}
/* ===== Product extra (stock + delivery + help) ===== */
.product-extra{
  text-align: center;
  font-size: 13.5px;
  color: #6b7280;
}

/* Línea principal centrada y estable */
.product-extra__line{
  margin-top: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Separador más sutil */
.product-extra__sep{
  opacity: .35;
}

/* Iconos sin “saltos” */
.product-extra__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  line-height: 1;
  transform: translateY(-.5px);
}

/* Delivery icon */
.product-extra .delivery-icon{
  font-size: 20px;
  line-height: 1;
  transform: translateY(1px); /* alinea con el texto */
}

/* Delivery highlight (más nítido y sin “lavado”) */
.product-extra .delivery-highlight{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #166534;
  opacity: 1;            /* evita que parezca desactivado */
  font-weight: 600;      /* un punto más de claridad */
}

/* Stock */
.product-extra__stock--ok{
  color: #166534;
  font-weight: 500;      /* baja el peso para que NO se coma el qty */
}

.product-extra__stock--zero{
  color: #b45309;
  font-weight: 600;
}

/* Referencias */
.product-extra__ref{
  color: #4b5563;
}

/* Delivery (si lo usas como bloque separado) */
.product-extra__delivery{
  color: #1f2937;
  font-weight: 600;
}
.product-extra__delivery-note{
  color: #6b7280;
  font-weight: 400;
  opacity: .9;
}

/* Tax label junto al precio */
.price-tax-excl{
  font-size: 0.50em;     /* un pelín mayor: legible en móvil */
  font-weight: 400;
  color: #9ca3af;
  margin-left: 6px;
  white-space: nowrap;
  letter-spacing: .01em;
}

/* Microcopy help */
.product-extra__line--help{
  color: #6b7280;
  font-size: 12px;
  line-height: 1.3;
  margin-top: 6px;
}

/* Mejor comportamiento en móvil: evita “salto” raro */
@media (max-width: 480px){
  .product-extra__line{
    gap: 8px;
  }
  .product-extra{
    font-size: 13px;
  }
}

/* Si usas product-extra--assist */
.product-extra--assist{
  line-height: 1.25;
}


.product-extra__qty{
  font-weight: 800;
  color: #166534;
  letter-spacing: .2px;  /* más presencia visual */
}
.product-extra__label{
  font-weight: 400;
  color: #166534;;
  opacity: .9;       /* suaviza “Stock real” */
  margin-right: 4px;
}






/*
 * Cambia el color de los enlaces, antes en color azul claro, al pasar ratón, mismo color, no me gustaba
 *Ahora el texto en turquesa oscuro, al pasar ratón, azul claro, más estético
 */

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
    color: #0a7cb0;
    text-decoration: none;
}
a:hover {
    color: #24b9d7;   /* color cuando pasas el mouse */
}

:root, [data-bs-theme="light"] {
  --bs-primary: #0a7cb0 !important;
  --bs-primary-rgb: 36, 185, 215 !important;
}

[data-bs-theme="dark"] {
  --bs-primary: #24b9d7 !important;
  --bs-primary-rgb: 36, 185, 215 !important;
}


.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0a7cb0;
    --bs-btn-border-color: #8e9193;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #24b9d7;
    --bs-btn-hover-border-color: #8e9193;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #b4b8bf;
    --bs-btn-active-border-color: #b4b8bf;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #b4b8bf;
    --bs-btn-disabled-border-color: #b4b8bf;
}
.btn-outline-primary {
    --bs-btn-color: #0a7cb0 !important;
    --bs-btn-border-color: #0a7cb0 !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: #0a7cb0 !important;
    --bs-btn-hover-border-color: #0a7cb0 !important;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: #0a7cb0 !important;
    --bs-btn-active-border-color: #0a7cb0 !important;
    --bs-btn-disabled-color: #0a7cb0 !important;
    --bs-btn-disabled-border-color: #0a7cb0 !important;
}
.btn-link {
    --bs-btn-font-weight: 400;
    --bs-btn-color: #0a7cb0 !important;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #01818f !important;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #24b9d7 !important;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-box-shadow: 0 0 0 #000;
    --bs-btn-focus-shadow-rgb: 36, 185, 215;
    text-decoration: underline;
}


/*
 * Para aumentar el tamaño del precio en listados y ficha producto
 */
.product-miniature .product-miniature__price {
    font-weight: 600;
     font-size: 1.5rem
}


/*
 * Para eliminar el tema del header, que quedaba fijo de sticker a relative
 */
 .header {
    position: relative;
}

/* === MÓVIL (<=991.98px): 1 por fila SOLO en LISTADO === */
@media (max-width: 991.98px) {
  #js-product-list .products .col,
  #js-product-list .product-miniature {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* === ESCRITORIO (>=992px): 2 por fila en LISTADO === */
@media (min-width: 992px) {
  #js-product-list .products .col,
  #js-product-list .product-miniature {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* === FICHA DE PRODUCTO: RELACIONADOS a 4 por fila (>=992px) === */
body#product .featured-products .products.row {
  display: flex !important;
  flex-wrap: wrap !important;
}

@media (min-width: 992px) {
  body#product .featured-products .products.row > [class^="col"],
  body#product .featured-products .products.row > [class*=" col"],
  body#product .featured-products .products .col,
  body#product .featured-products .product-miniature {
    flex: 0 0 25% !important;
    max-width: 25% !important;
  }
}


/* (Opcional) separación entre tarjetas en relacionados */
body#product .featured-products .products.row { row-gap: 1rem; }

/* (Opcional) Ajusta separación entre tarjetas si hace falta */
#js-product-list .products.row { row-gap: 1rem; }

/* desactiva la vista rapida */
.product-miniature__quickview,
.product-miniature__quickview_touch,
button.js-quickview,
.js-quickview {
  display: none !important;
}

/* tema combo en listado de prductos, no se centraba y se movia */
/* quita cualquier transform/filter/perspective en la jerarquía del listado */
#js-product-list .products,
#js-product-list .products .row,
#js-product-list .products .col,
#js-product-list .product-miniature,
#js-product-list .product-miniature .card,
#js-product-list .product-miniature .thumbnail-container,
#js-product-list .product-miniature .card-body {
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  will-change: auto !important;
}

/* también en :hover por si el tema anima ahí */
#js-product-list .product-miniature:hover,
#js-product-list .product-miniature .card:hover,
#js-product-list .product-miniature .thumbnail-container:hover {
  transform: none !important;
}

/* que el dropdown no se corte */
#js-product-list .product-miniature,
#js-product-list .product-miniature .card {
  overflow: visible !important;
}
/* FIN tema combo en listado de prductos, no se centraba y se movia */


/* Centrar el título en los listados de producto (listado) */
#js-product-list .product-miniature .product-miniature__infos__top,
.featured-products .product-miniature .product-miniature__infos__top {
  text-align: center;
}

/* en listado de productos. Asegura que el texto del título se centre y ocupe su propio bloque */
#js-product-list .product-miniature__title,
.featured-products .product-miniature__title,
#js-product-list .product-miniature__infos__top a {
  display: inline-block;
  text-align: center;
  max-width: 100%;
}

/* ==== cuadraditos de variaciones (listado + ficha) ==== */

/* tamaño base de los cuadrados */
.variant-links a.color,
.variant-links span.color,
.product-variants a.color,
.product-variants span.color {
  width: 36px;              /* ← cambia a 28/36/40 según te guste */
  height: 36px;
  border-radius: 6px;        /* esquinas más redondeadas */
  border: 1px solid #d9d9d9;
  display: inline-block;     /* asegúrate de que respeta el tamaño */
  box-sizing: border-box;
}

/* si son texturas, que se escalen bien */
.variant-links .color[style*="background-image"],
.product-variants .color[style*="background-image"] {
  background-size: cover;
  background-position: center;
}

/* separación entre cuadrados */
.variant-links,
.product-variants [class*="variants"] ul {  /* cubre distintos temas */
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}


/* accesibilidad al enfocar con teclado */
.variant-links a.color:focus-visible,
.product-variants a.color:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}




/* para los mensajes de stock en el producto */
/* Disponible (check verde) */
.product__availability .product-available {
  color: #28a745; /* verde */
}

/* Últimas unidades (warning naranja) */
.product__availability .product-last-items {
  color: #ffc107; /* amarillo/naranja */
}

/* No disponible (prohibido rojo) */
.product__availability .product-unavailable {
  color: #dc3545; /* rojo */
}

/* texto de cuando hay stock, en verde) */
.product__availability .product-stock {
  margin-top: 4px;
  font-size: 0.9rem;
  color: #28a745; /* verde bootstrap */
  font-weight: 500;
}

/* la referencia en la ficha del prodcuto debajo del precio */
.product-reference {
  font-size: 0.85rem;   /* más pequeño que el precio */
  color: #6c757d;       /* gris neutro */
  font-weight: 400;     /* no tan fuerte */
  line-height: 1.2;
  margin-top: 0.25rem; /* más pegado al precio */
}
.product-reference span {
  color: #212529;       /* texto oscuro para la referencia */
  font-weight: 500;     /* un poco de énfasis */
}

/* Texto "Impuestos incluidos" más discreto */
.product__current-price .tax-included {
  font-size: 0.85rem;
  color: #6c757d;
}

/* Precio actual color turquesa */
.product__current-price {
  color: #0a7cb0;
}

/* Texto "Impuestos incluidos" color turquesa */
.product__current-price .tax-included {
  color: #0a7cb0;
  font-size: 0.85rem; /* más discreto */
  font-weight: 500;
}


/* ===== 1) HALO de las miniaturas en ficha producto ===== */
.thumbnails__container .thumbnail.active img {
    border: 2px solid #0a7cb0;
}

/* ===== 1) Color del Halo en los cuadraditos de los colores, antes azul fuerte, muy feo ===== */
.custom-checkbox input[type=checkbox]+span.color.active, .custom-checkbox input[type=checkbox]+span.color:hover, .variant-links .color.active, .variant-links .color:hover, label .color.active, label .color:hover {
    border: 2px solid #0a7cb0 !important;
}

/* ===== 1) tamaño de los cuadraditos de los los colores ===== */
.custom-checkbox input[type=checkbox]+span.color, .variant-links .color, label .color {
    background-size: contain;
    border: 1px solid #ced4da;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    height: 2.5rem;
    margin: .3125rem .5rem .3125rem 0;
    transition: .25s ease-out;
    width: 2.5rem;
}

/* ===== 1) ENLACES DE LA COLUMNA IZQUIERDA SALÍA MUY NEGRO, REDUZCO EN FONT-WHEIGHT A 200 ===== */
.left-block__link {
    color: var(--left-block-subtitle-color);
    display: block;
    font-size: var(--left-block-subtitle-size);
    font-weight: 200;
    padding: var(--left-block-subtitle-spacing) 0;
}

/* EN móviles, desactivo la columna izquierda, queda muy engorroso */
/* Ocultar la columna izquierda solo en móviles (<768px) */
@media (max-width: 767.98px) {
  #left-column {
    display: none !important;
  }

  /* Que el contenido ocupe todo el ancho cuando se oculta la izquierda */
  #content-wrapper {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* --- Subcategorías: fuerza 98x98 y anula reglas heredadas --- */
/* Si el contenedor crea un cuadrado con pseudo-elemento, lo anulamos */
#subcategories .subcategory__image::before,
#subcategories .subcategory__image::after {
  content: none !important;
  display: none !important;
}

/* El contenedor deja de imponer tamaños y ratio "raro" */
#subcategories .subcategory__image {
  position: relative;
  width: 125px !important;
  height: 125px !important;
  max-width: none !important;
  overflow: hidden;
  margin: 0 auto; /* céntralo dentro de la tarjeta */
}

/* El <img> deja de estirarse a 100% por culpa de .img-fluid */
#subcategories .subcategory__image img {
  width: 98% !important;     /* ocupa el contenedor de 200px */
  height: 98% !important;    /* idem */
  max-width: none !important; /* anula .img-fluid (Bootstrap) */
  object-fit: cover;          /* recorta si no es cuadrado */
  display: block;
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* FIN de Subcategorías: fuerza 98x98 y anula reglas heredadas */


/* FIN categorias columnas */
/* PRODUCTO: relacionados a 4 columnas */
@media (min-width: 992px) {
  body#product .featured-products .products.row > [class^="col"],
  body#product .featured-products .products.row > [class*=" col"],
  body#product .featured-products .products .col,
  body#product .featured-products .product-miniature {
    flex: 0 0 25% !important;
    max-width: 25% !important;
  }
}

/* CATEGORÍA/SUBCATEGORÍAS: 3 columnas */
@media (min-width: 1200px) {
  /* Opción robusta: forzamos la rejilla SOLO dentro de subcategorías */
  body#category .subcategories .row > * {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }

  /* Si tu tema usa cards/miniatures para subcategorías, añade también: */
  body#category .subcategories .product-miniature,
  body#category .subcategories [class^="col"],
  body#category .subcategories [class*=" col"] {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}

/* IMPORTANTE: elimina o comenta cualquier override GLOBAL como este:
@media (min-width: 1200px) {
  .col-xl-3 { flex: 0 0 auto; width: 33%; }
}
Porque afectará a todo el sitio.
*/

 /* MENU IZQUIERDO: */
  /* Para que APAREZCA el menu en la página home hay que hacerlo desde codigo, ver apuntes prestasho 9 */
  /* Amplio el margen superior, quedaba muy pegado al logo */
.left-block {
    border-bottom: var(--left-block-border-bottom);
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    margin-top: 25px;
}
 /* Esto cambia la negrez de la fuente */
.category-tree__child .category-tree__list[data-depth="0"]>.category-tree__item>.category-tree__item__header .category-tree__item__link {
    font-weight: 500;
}
 /* Esto cambia el color, estaba muy negro, lo paso a un gris oscuro */
.category-tree__item__link {
    color: #6a6668;
}


 /* Esto reduce la distancia entre líneas en el menú y submenú, quedan más juntas, mejor. antes: : padding: .25rem 0; */
.category-tree__item__header.nosplit {
    padding: .25rem 0;
}
 /* Esto reduce la distancia entre líneas en el  submenú, quedaban muy separadas*/
.category-tree__list[data-depth="1"] 
.category-tree__item__header {
    padding-top: 0.1rem !important;
    padding-bottom: 0.1rem !important;
}
 /* Esto para los márgenes de subcategorias*/
.ps_categorytree .accordion-body {
    padding-top: 0.15rem !important;
    padding-bottom: 0.25rem !important;
}



 /* amplio el margen izquierdo cuando abro una categoría, quedaba muy similar a la propia categori y no de diferencia bien. Antes .5rem */
.category-tree__child .category-tree__list[data-depth="1"], .category-tree__child .category-tree__list[data-depth="2"], .category-tree__child .category-tree__list[data-depth="3"], .category-tree__child .category-tree__list[data-depth="4"] {
    padding-left: 2rem;
}
 /* FIN de MENU */
 
 
  /* Ampliar el ancho total de 1320 a 1520 */
 .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xs, .container-xxl {
    max-width: 1520px;
}

  /* CARRUSEL DE IMAGENES */
  /* Color de los títulos del carrusel a blanco */
.carousel-caption {
    bottom: 1.25rem;
    color: #fff;
    left: 15%;
    padding-bottom: 1.25rem;
    padding-top: 1.25rem;
    position: absolute;
    right: 15%;
    text-align: center;
}
  /* Tamaño del título del carrusel, algo más pequeño de 3 a 2.5 */
.carousel .carousel-caption .h2, .carousel .carousel-caption h2 {
    font-size: 2.0rem;
}
  /* Margin top, estaba a 0 con 25px va bien */
.ratio>* {
    height: 100%;
    left: 0;
    position: absolute;
    top: 25px;
    width: 100%;
}
 /*FIN -  CARRUSEL DE IMAGENES */
 
 
 /* Para comentarios de productos, al abrir, lo del módulo oficial GDPR el checkbox se veía muy grande */
/* --- Ajuste del textarea en el modal de comentarios --- */
/* Anula el 44px forzado arriba */
.product-comment-modal textarea {
  height: auto !important;
  min-height: 100px !important;  /* altura visible mayor */
  resize: vertical;              /* permitir ajustar */
  line-height: 1.4;
  padding: 10px;
}

/* Si el id/clase cambia, cubrimos variantes frecuentes */
#product-comment-form textarea,
.product-comment-form textarea,
textarea#comment {
  min-height: 100px !important;
}

/* Para comentarios de productos, al abrir, lo del módulo oficial GDPR el checkbox se veía muy grande */
 /* Para comentarios de productos, al abrir, lo del módulo oficial GDPR el checkbox se veía muy grande */
.product-comment-modal input:not([type="checkbox"]):not([type="radio"]),
.product-comment-modal select,
.product-comment-modal textarea {
  width: 100% !important;
  height: 44px !important;
}

.product-comment-modal input[type="checkbox"],
.product-comment-modal input[type="radio"] {
  width: auto !important;
  height: auto !important;
  min-width: auto !important;
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  -moz-appearance: checkbox !important;
}
/* Texto de protección de datos más pequeño y gris */
.product-comment-modal label {
  font-size: 12px !important;
  color: #6c757d !important;
}
/*FIN - comentarios de productos */

/* formulario de contacto, politica de privacidad, más pequeño y gris */
.contact-form label {
  font-size: 12px !important;
  color: #6c757d !important;
}
/*FIN - formulario de contacto */

/* En ficha producto, color texto en desplegables; Detalles del producto y Ficha técnica */
.accordion-button {
    color: #0a7cb0;
}
/*FIN - desplegables */

/*Oculta texto Sin Impuestos, en móviles, me descuadra el precio principal, lo dejo solo para PC */
@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
}
/*FIN - texto */

/*Agrego margin top en las diapositivas de home, quedaba muy pegado, con 10px vale */
.ets_multilayerslider {
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
    margin-bottom: 25px;
    margin-top: 10px;
}
/*FIN diapositivas home */


/* === BLOQUE BIZUM COMO RECUADRO (ruta y tamaño corregidos) === */
/* === para que aparezcan los logos bizum y transferenca bancaria al lado de los logos del ps_checkout, se puede jugar con los valores numéricos=== */
#ps_checkout-payment-method-logos-container::after {
  content: "";
  transform: translateY(2px);    /* prueba 1px o 2px */
  display: inline-block;
  background: url('/tienda/themes/child_hummingbird/bizum.svg') no-repeat center center / 90% auto;
  width: 250px;              /* ancho igual a otros cuadros */
  height: 34px;             /* alto igual a los otros logos */
  border: 1px solid #dcdcdc;
  border-radius: 3px;
  box-sizing: border-box;
  margin-left: 5px;
  vertical-align: middle;
  background-color: #fff;
}
/* === FIN logos bizum y transfer === */

/* FLECHAS DE LA GALERÍA DEL PRODUCTO */
#product button.slick-prev,
#product button.slick-next,
#product .swiper-button-prev,
#product .swiper-button-next,
#product .carousel-control-prev,
#product .carousel-control-next,
#product [class*="splide__arrow"] {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    background: rgba(55, 55, 55, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 999 !important;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.30) !important;
}

/* Iconos y flechas en blanco */
#product button.slick-prev::before,
#product button.slick-next::before,
#product .swiper-button-prev::after,
#product .swiper-button-next::after,
#product [class*="splide__arrow"] svg {
    color: #fff !important;
    fill: #fff !important;
    opacity: 1 !important;
}

/* Iconos Bootstrap */
#product .carousel-control-prev-icon,
#product .carousel-control-next-icon {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
}

/* Al pasar el ratón */
#product button.slick-prev:hover,
#product button.slick-next:hover,
#product .swiper-button-prev:hover,
#product .swiper-button-next:hover,
#product .carousel-control-prev:hover,
#product .carousel-control-next:hover,
#product [class*="splide__arrow"]:hover {
    background: rgba(20, 20, 20, 0.9) !important;
}


/* Segunda imagen al pasar el ratón en los listados de productos */
.product-miniature__image-container {
  position: relative;
  overflow: hidden;
}

.product-miniature__image-container .product-hover-image {
  display: block;
  width: 100%;
  transition: opacity 0.35s ease;
}

.product-miniature__image-container .product-hover-image--primary {
  position: relative;
  z-index: 1;
  opacity: 1;
}

.product-miniature__image-container .product-hover-image--secondary {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}

.product-miniature__image-container .product-hover-image--secondary img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (hover: hover) and (pointer: fine) {
  .product-miniature:hover
  .product-miniature__image-container
  .product-hover-image--primary {
    opacity: 0;
  }

  .product-miniature:hover
  .product-miniature__image-container
  .product-hover-image--secondary {
    opacity: 1;
  }
}