@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap');
 
:root {
  --zk-rosa: #F2879B;
  /*--zk-rosa-oscuro: #D4537E;*/
  --zk-rosa-oscuro: #F2879B;
  --zk-rosa-texto: #D4537E;
  --zk-rosa-suave: #FDF0F3;
  --zk-borde: #F4E3E6;
  --zk-lila: #B9A7E8;
  --zk-tinta: #4B1528;
  --zk-radio: 14px;
}

.product-thumbnail img,
.product-miniature img {
  width: 100%;
  height: auto;
  max-width: 250px;
}

body,
.btn,
input,
select,
textarea {
  font-family: 'Quicksand', -apple-system, sans-serif;
}

body {
  color: #4a4a48;
  letter-spacing: 0.1px;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  color: var(--zk-tinta);
  text-transform: none;
}

/* Título "Productos destacados" y similares */
.products-section-title,
#content h2.h2 {
  font-size: 1.6rem;
  font-weight: 600;
  text-transform: none;
  position: relative;
  padding-bottom: 12px;
}
 
.products-section-title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 56px;
  height: 3px;
  border-radius: 3px;
  background: var(--zk-rosa);
}

/* ---------- 2. Barra superior y cabecera ---------- */

@media (max-width: 767px) {
  #_mobile_logo img,
  #header .header-nav .logo {
    filter: brightness(0) invert(1);
  }
}
 
#header .header-nav {
  background: var(--zk-rosa);
  border-bottom: none;
}
 
#header .header-nav,
#header .header-nav a,
#header .header-nav .expand-more,
#header .header-nav .material-icons,
#header .header-nav #_desktop_cart a,
#header .header-nav .cart-preview .shopping-cart,
#header .header-nav .user-info a,
#header .header-nav .contact-link a {
  color: #fff;
}
 
#header .header-nav a:hover,
#header .header-nav .user-info a:hover,
#header .header-nav .contact-link a:hover {
  color: #fff;
  text-decoration: underline;
}
 
#header .header-nav #_desktop_cart,
#header .header-nav .cart-preview,
#header .header-nav .cart-preview.active {
  background: transparent;
}
 
#header .header-nav .cart-preview .header {
  background: rgba(255, 255, 255, .18);
  border-radius: 999px;
  padding: 2px 12px;
}
 
#header .header-top {
  background: #fff;
  border-bottom: 1px solid var(--zk-borde);
  padding: 0.7rem;
}
 
/* Menú principal: minúsculas + pastilla en hover */
#header .header-top #_desktop_top_menu .top-menu a[data-depth="0"],
#header .header-top #top-menu > li > a,
#top-menu .top-menu a.dropdown-item,
#top-menu > li > a {
  text-transform: none;
  font-size: 1rem;
  font-weight: 500;
  color: #5F5E5A;
  border-radius: 999px;
  padding: 7px 14px;
  transition: background .18s ease, color .18s ease;
}
 
#header .header-top a:hover {
  color: var(--zk-rosa-texto);
}
 
#header .header-top #_desktop_top_menu .top-menu a[data-depth="0"]:hover,
#header .header-top #top-menu > li > a:hover,
#header .header-top #top-menu > li.current > a,
#top-menu > li > a:hover,
#top-menu > li.current > a {
  background: var(--zk-rosa-suave);
  color: var(--zk-rosa-texto);
}
 
#header .header-top #_desktop_logo a:hover,
#header .header-top #search_widget button:hover {
  background: transparent;
}
 
/* Centrado vertical de logo, menú y buscador en la misma línea */
#header .header-top > .container > .row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
 
#header .header-top .header-top-right,
#header .header-top .position-static {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
 
/* El buscador ocupa su sitio a la derecha, sin estirarse */
#header .header-top #search_widget,
#header .header-top .search-widget {
  margin-left: auto;
  flex: 0 0 auto;
  width: auto;
  min-width: 240px;
  max-width: 320px;
  padding-right: 0;
}
 
#header .header-top #_desktop_top_menu {
  flex: 0 1 auto;
}
 
#_desktop_logo {
  display: flex;
  align-items: center;
}
 
#_desktop_logo img {
  max-height: 54px;
  width: auto;
}
 
#_desktop_top_menu {
  display: flex;
  align-items: center;
}
 
#_desktop_top_menu .top-menu,
#top-menu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0;
  padding-left: 0;
}
 
#top-menu > li {
  display: flex;
  align-items: center;
  float: none;
}
 
#top-menu > li > a {
  display: flex;
  align-items: center;
  line-height: 1.2;
  margin: 0;
}
 
/* Buscador redondeado — el icono va a la izquierda, así que
   el texto necesita hueco por delante para no solaparse */
#search_widget form,
.search-widget form {
  position: relative;
}
 
#search_widget form input[type=text] {
  border-radius: 999px;
  border: 1px solid var(--zk-borde);
  background: #FDF7F8;
  padding: 10px 18px 10px 44px;
}
 
#search_widget form input[type=text]:focus {
  border-color: var(--zk-rosa);
  box-shadow: 0 0 0 3px rgba(242, 135, 155, .18);
  outline: none;
}
 
#search_widget form button[type=submit] {
  position: absolute;
  left: 14px;
  right: auto;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
}
 
#search_widget form button[type=submit] .search,
#search_widget form button[type=submit] i {
  font-size: 20px;
  color: var(--zk-rosa-oscuro);
}

/* ---------- 3. Carrusel / banner principal ---------- */
 
#carousel,
.carousel {
  border-radius: var(--zk-radio);
  overflow: hidden;
  box-shadow: none;
  margin-bottom: 2.5rem;
}
 
#carousel .carousel-inner {
  height: auto;
}
 
#carousel .carousel-inner,
#carousel .carousel-item,
#carousel .carousel-item figure {
  border-radius: var(--zk-radio);
  overflow: hidden;
}
 
#carousel .carousel-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--zk-radio);
}

#carousel .carousel-item img {
  aspect-ratio: 16 / 5;
  height: auto;
  object-fit: cover;
  object-position: center;
}
 
#carousel .direction .carousel-control {
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 70px;
  opacity: 1;
  background: none;
}
 
#carousel .direction .carousel-control .icon-prev,
#carousel .direction .carousel-control .icon-next {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  line-height: 1;
  font-size: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 2px 8px rgba(75, 21, 40, .12);
  text-shadow: none;
  transition: background .18s ease;
}
 
#carousel .direction .carousel-control .icon-prev i,
#carousel .direction .carousel-control .icon-next i {
  font-size: 26px;
  line-height: 1;
  margin: 0;
  color: var(--zk-rosa-texto);
}
 
#carousel .direction .carousel-control:hover .icon-prev,
#carousel .direction .carousel-control:hover .icon-next,
#carousel .direction .carousel-control:focus .icon-prev,
#carousel .direction .carousel-control:focus .icon-next {
  background: #fff;
}
 
#carousel .direction .carousel-control:hover .icon-prev i,
#carousel .direction .carousel-control:hover .icon-next i,
#carousel .direction .carousel-control:focus .icon-prev i,
#carousel .direction .carousel-control:focus .icon-next i {
  color: var(--zk-rosa-oscuro);
}
 
#carousel .carousel-inner .carousel-item .caption {
  background: rgba(255, 255, 255, .93);
  border-radius: var(--zk-radio);
  padding: 22px 26px;
  max-width: 420px;
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
  left: 7%;
}
 
#carousel .carousel-inner .carousel-item .caption,
#carousel .carousel-inner .carousel-item .caption h2,
#carousel .carousel-inner .carousel-item .caption .caption-description,
#carousel .carousel-inner .carousel-item .caption .caption-description p,
#carousel .carousel-inner .carousel-item .caption .caption-description * {
  color: var(--zk-tinta);
  text-shadow: none;
}
 
#carousel .carousel-inner .carousel-item .caption h2 {
  font-size: 2rem;
  margin-bottom: 4px;
}
 
#carousel .carousel-inner .carousel-item .caption .caption-description p {
  font-size: .95rem;
  line-height: 1.5;
  margin-bottom: 0;
}

@media (max-width: 767px) {
  #carousel .carousel-inner .carousel-item .caption {
    display: none;
  }
}

@media (max-width: 767px) {
  #carousel .direction { display: none; }
}

/* ---------- 4. Tarjetas de producto ---------- */
 
.product-miniature .thumbnail-container {
  border: 1px solid var(--zk-borde);
  border-radius: var(--zk-radio);
  box-shadow: none;
  overflow: hidden;
  height: auto;
  transition: transform .2s ease, border-color .2s ease;
}
 
.product-miniature .thumbnail-container:hover {
  transform: translateY(-3px);
  border-color: var(--zk-rosa);
  box-shadow: 0 6px 18px rgba(75, 21, 40, .08);
}
 
/* Todas las fotos cuadradas y recortadas igual */
.product-miniature .thumbnail-container .product-thumbnail img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
 
.product-miniature .product-description {
  padding: 10px 12px 14px;
  background: #fff;
  border-top: none;
  position: static;
  width: auto;
}
 
/* Nombre a dos líneas, altura fija: la cuadrícula no se descuadra */
.product-miniature .product-title {
  margin-bottom: 6px;
}
 
.product-miniature .product-title a {
  font-size: .95rem;
  font-weight: 500;
  color: #444441;
  text-transform: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  min-height: 2.7em;
}
 
.product-miniature .product-title a:hover {
  color: var(--zk-rosa-oscuro);
}
 
/* Precio con protagonismo */
.product-miniature .product-price-and-shipping {
  margin-top: 0;
}
 
.product-miniature .product-price-and-shipping .price {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--zk-rosa-texto);
}
 
.product-miniature .product-price-and-shipping .regular-price {
  font-size: .85rem;
  color: #B4B2A9;
}
 
/* Etiquetas (nuevo, rebaja, agotado) */
.product-flags .product-flag {
  background: var(--zk-rosa-oscuro);
  
  font-size: .72rem;
  font-weight: 600;
  text-transform: none;
  padding: 3px 12px;
  min-height: auto;
  min-width: auto;
  box-shadow: none;
}
 
.product-flags .product-flag.on-sale,
.product-flags .product-flag.discount {
  background: var(--zk-lila);
}
 
/* Corazón de favoritos más discreto */
.product-miniature .wishlist-button-add,
.product-miniature .wishlist-button {
  width: 32px;
  height: 32px;
  box-shadow: 0 1px 4px rgba(75, 21, 40, .12);
  opacity: .75;
  transition: opacity .18s ease;
}
 
.product-miniature:hover .wishlist-button-add,
.product-miniature:hover .wishlist-button {
  opacity: 1;
}
 
.product-miniature .wishlist-button-add i,
.product-miniature .wishlist-button i {
  font-size: 17px;
  color: var(--zk-rosa-oscuro);
}


/* Productos */

.product-flags li.product-flag {
    background: var(--zk-rosa-oscuro);
}

/* ---------- 6. Pie de página ---------- */
 
#footer {
  background: var(--zk-rosa-suave);
  padding-top: 2rem;
  padding-bottom: 2rem;
}
 
#footer .h3,
#footer .myaccount-title,
.block-social ul li a {
  color: var(--zk-tinta);
  text-transform: uppercase;
}
 
#footer .links .collapse li a,
#footer .block_newsletter p {
  color: #72243E;
}

/* Hover de los enlaces del footer */
#footer .links .collapse li a:hover,
#footer a:hover {
    color: var(--zk-rosa) !important;   /* o #F2879B si no tienes esa variable */
}

/* El copyright del footer ("Ecommerce desarrollado por...") */
#footer .text-sm-center a,
#footer p.text-sm-center a {
    color: #999 !important;
    transition: color .2s ease;
}

#footer .text-sm-center a:hover {
    color: var(--zk-rosa) !important;   /* o #F2879B */
}

#footer .block-contact a:hover {
    color: var(--zk-rosa) !important;
}

/* El copyright azul de abajo */
#footer .copyright,
.footer-container ~ * a,
#footer .container:last-child {
    color: #999 !important;
}

#footer .block-contact a {
    color: #72243E !important;
}
#footer .block-contact a:hover {
    color: var(--zk-rosa) !important;
}

#footer .text-sm-center {
    border-top: 1px solid #f3d9df;   /* rosa muy claro */
    padding-top: 1.2rem;
    margin-top: 1.5rem;
}

#footer .h3,
#footer .myaccount-title {
    margin-bottom: 1.2rem;
}

.footer-container {
    padding-top: 0rem;
}


/* =========================================================
   Pagina de productos
   ========================================================= */
 
/* Migas de pan */
.breadcrumb li a {
  color: var(--zk-rosa-oscuro);
}
 
.breadcrumb li:last-child span {
  color: #888780;
}
 
/* Título y precio */
#product h1,
.product-container h1 {
  font-weight: 600;
  color: var(--zk-tinta);
}
 
#product .product-prices .current-price span,
#product .product-prices .current-price .price,
.product-prices .current-price span,
.current-price-value {
  color: var(--zk-rosa-texto);
  font-size: 1.7rem;
  font-weight: 700;
}
 
#product .product-prices .regular-price,
.product-prices .regular-price {
  color: #B4B2A9;
  font-size: 1rem;
}
 
.product-discount .discount-percentage,
.product-prices .discount {
  background: var(--zk-lila);
  color: #26215C;
  border-radius: 0;
}
 
/* Botón añadir al carrito */
#product .btn-primary,
#main .btn-primary,
.product-actions .add-to-cart,
#add-to-cart-or-refresh .add-to-cart,
.btn-primary {
  background: var(--zk-rosa);
  border-color: var(--zk-rosa);
  color: #fff;
  border-radius: 999px;
  text-transform: none;
  font-weight: 600;
  letter-spacing: .2px;
  box-shadow: none;
}
 
#product .btn-primary:hover,
#main .btn-primary:hover,
.product-actions .add-to-cart:hover,
#add-to-cart-or-refresh .add-to-cart:hover,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: var(--zk-rosa-texto);
  border-color: var(--zk-rosa-texto);
  box-shadow: none;
}
 
.product-actions .add-to-cart[disabled],
.btn-primary[disabled] {
  background: #D3D1C7;
  border-color: #D3D1C7;
}
 
/* Selector de cantidad */
#quantity_wanted {
  border: 1px solid var(--zk-borde);
  border-radius: var(--radius, 8px);
  color: var(--zk-tinta);
  font-weight: 600;
}
 
.bootstrap-touchspin .input-group-btn-vertical > .btn,
.bootstrap-touchspin .btn-touchspin {
  background: #FDF7F8;
  border: 1px solid var(--zk-borde);
  color: var(--zk-rosa-oscuro);
}
 
.bootstrap-touchspin .input-group-btn-vertical > .btn:hover {
  background: var(--zk-rosa-suave);
}
 
/* Corazón de favoritos */
.product-actions .wishlist-button-add,
#product .wishlist-button-add {
  border: 1px solid var(--zk-borde);
  box-shadow: none;
}
 
.product-actions .wishlist-button-add i,
#product .wishlist-button-add i {
  color: var(--zk-rosa-oscuro);
}
 
/* Miniaturas de la galería */
#product .product-images > li.thumb-container > .thumb.selected,
#product .product-images > li.thumb-container > .thumb:hover,
.product-images > li.thumb-container > .thumb.selected,
.product-images > li.thumb-container > .thumb:hover {
  border: 2px solid var(--zk-rosa-oscuro);
}
 
#product .images-container .js-qv-product-cover,
.product-cover img {
  border-radius: var(--zk-radio);
}

#product .images-container .product-images>li.thumb-container .thumb {
    border-radius: var(--zk-radio);;
}
 
#product .scroll-box-arrows i {
  color: var(--zk-rosa-oscuro);
}
 
/* Pestañas Descripción / Detalles */
#product .tabs,
.product-information + .tabs,
.tabs {
  border-radius: var(--zk-radio);
  box-shadow: none;
  border: 1px solid var(--zk-borde);
}
 
.tabs .nav-tabs {
  border-bottom: 1px solid var(--zk-borde);
}
 
.tabs .nav-tabs .nav-link {
  color: #888780;
  border: none;
  text-transform: none;
  font-weight: 500;
}
 
.tabs .nav-tabs .nav-link:hover {
  color: var(--zk-rosa-oscuro);
}
 
.tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-item.show .nav-link {
  color: var(--zk-rosa-texto);
  border: none;
  border-bottom: 3px solid var(--zk-rosa-oscuro);
  background: transparent;
}
 
/* Texto de la descripción: contraste legible */
#product .product-description,
#product .product-description p,
#product .product-description li,
#product .product-description span,
.product-description p,
.product-description li,
.tabs .tab-content,
.tabs .tab-content p,
.tabs .tab-content li {
  color: #4a4a48;
  line-height: 1.65;
}
 
#product .product-description strong,
.tabs .tab-content strong {
  color: var(--zk-tinta);
}
 
/* Avisos de stock */
#product-availability .product-last-items,
.product-last-items {
  color: #854F0B;
}
 
#product-availability .product-available,
.product-available {
  color: #3B6D11;
}
 
#product-availability .product-unavailable,
.product-unavailable {
  color: var(--zk-rosa-texto);
}
 
/* Etiqueta fuera de stock sobre la foto */
#product .product-flags .product-flag.out_of_stock,
.product-flags .product-flag.out_of_stock {
  background: var(--zk-rosa-texto);
  border-radius: 0;
  color: #fff;
}
 
/* Bloque de comentarios y enlaces sueltos */
#product a,
.product-container a {
  color: var(--zk-rosa-oscuro);
}
 
#product a:hover,
.product-container a:hover {
  color: var(--zk-rosa-texto);
}
 
#footer .links .collapse li a:hover {
  color: var(--zk-rosa-oscuro);
}
 
.block_newsletter input[type=email] {
  border-radius: 999px 0 0 999px;
  border: 1px solid var(--zk-borde);
}
 
.block_newsletter .btn-primary {
  border-radius: 0 999px 999px 0;
}

/* =========================================================
   8. Página de producto
   Classic usa #2fb5d2 en precio, botón, pestañas y miniaturas
   ========================================================= */
 
/* Migas de pan */
.breadcrumb li a {
  color: var(--zk-rosa-oscuro);
}
 
.breadcrumb li:last-child span {
  color: #888780;
}
 
/* Título y precio */
#product h1,
.product-container h1 {
  font-weight: 600;
  color: var(--zk-tinta);
}
 
#product .product-prices .current-price span,
#product .product-prices .current-price .price,
.product-prices .current-price span,
.current-price-value {
  color: var(--zk-rosa-texto);
  font-size: 1.7rem;
  font-weight: 700;
}
 
#product .product-prices .regular-price,
.product-prices .regular-price {
  color: #B4B2A9;
  font-size: 1rem;
}
 
.product-discount .discount-percentage,
.product-prices .discount {
  background: var(--zk-lila);
  color: #26215C;
  border-radius: 0;
}
 
/* Botón añadir al carrito */
#product .btn-primary,
#main .btn-primary,
.product-actions .add-to-cart,
#add-to-cart-or-refresh .add-to-cart,
.btn-primary {
  background: var(--zk-rosa-oscuro);
  border-color: var(--zk-rosa-oscuro);
  color: #fff;
  border-radius: 999px;
  text-transform: none;
  font-weight: 600;
  letter-spacing: .2px;
  box-shadow: none;
}
 
#product .btn-primary:hover,
#main .btn-primary:hover,
.product-actions .add-to-cart:hover,
#add-to-cart-or-refresh .add-to-cart:hover,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: var(--zk-rosa-texto);
  border-color: var(--zk-rosa-texto);
  box-shadow: none;
}
 
.product-actions .add-to-cart[disabled],
.btn-primary[disabled] {
  background: #D3D1C7;
  border-color: #D3D1C7;
}
 
/* Selector de cantidad */
#quantity_wanted {
  border: 1px solid var(--zk-borde);
  border-radius: var(--radius, 8px);
  color: var(--zk-tinta);
  font-weight: 600;
}
 
.bootstrap-touchspin .input-group-btn-vertical > .btn,
.bootstrap-touchspin .btn-touchspin {
  background: #FDF7F8;
  border: 1px solid var(--zk-borde);
  color: var(--zk-rosa-oscuro);
}
 
.bootstrap-touchspin .input-group-btn-vertical > .btn:hover {
  background: var(--zk-rosa-suave);
}
 
/* Corazón de favoritos */
.product-actions .wishlist-button-add,
#product .wishlist-button-add {
  border: 1px solid var(--zk-borde);
  box-shadow: none;
}
 
.product-actions .wishlist-button-add i,
#product .wishlist-button-add i {
  color: var(--zk-rosa-oscuro);
}
 
/* Miniaturas de la galería */
#product .product-images > li.thumb-container > .thumb.selected,
#product .product-images > li.thumb-container > .thumb:hover,
.product-images > li.thumb-container > .thumb.selected,
.product-images > li.thumb-container > .thumb:hover {
  border: 2px solid var(--zk-rosa-oscuro);
}
 
/*#product .images-container .js-qv-product-cover,
.product-cover img {
  border-radius: var(--zk-radio);
}*/
 
#product .scroll-box-arrows i {
  color: var(--zk-rosa-oscuro);
}
 
/* Pestañas Descripción / Detalles */
#product .tabs,
.product-information + .tabs,
.tabs {
  border-radius: var(--zk-radio);
  box-shadow: none;
  border: 1px solid var(--zk-borde);
}
 
.tabs .nav-tabs {
  border-bottom: 1px solid var(--zk-borde);
}
 
.tabs .nav-tabs .nav-link {
  color: #888780;
  border: none;
  text-transform: none;
  font-weight: 500;
}
 
.tabs .nav-tabs .nav-link:hover {
  color: var(--zk-rosa-oscuro);
}
 
.tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-item.show .nav-link {
  color: var(--zk-rosa-texto);
  border: none;
  border-bottom: 3px solid var(--zk-rosa-oscuro);
  background: transparent;
}
 
/* Texto de la descripción: contraste legible */
#product .product-description,
#product .product-description p,
#product .product-description li,
#product .product-description span,
.product-description p,
.product-description li,
.tabs .tab-content,
.tabs .tab-content p,
.tabs .tab-content li {
  color: #4a4a48;
  line-height: 1.65;
}
 
#product .product-description strong,
.tabs .tab-content strong {
  color: var(--zk-tinta);
}
 
/* Avisos de stock */
#product-availability .product-last-items,
.product-last-items {
  color: #854F0B;
}
 
#product-availability .product-available,
.product-available {
  color: #3B6D11;
}
 
#product-availability .product-unavailable,
.product-unavailable {
  color: var(--zk-rosa-texto);
}
 
/* Etiqueta fuera de stock sobre la foto */
#product .product-flags .product-flag.out_of_stock,
.product-flags .product-flag.out_of_stock {
  background: var(--zk-rosa-texto);
  border-radius: 0;
  color: #fff;
}
 
/* Bloque de comentarios y enlaces sueltos */
#product a,
.product-container a {
  color: var(--zk-rosa-oscuro);
}
 
#product a:hover,
.product-container a:hover {
  color: var(--zk-rosa-texto);
}

.product-images>li.thumb-container .thumb.selected, .product-images>li.thumb-container .thumb:hover {
  border-color: var(--zk-rosa-oscuro);
}

/* Menu Mobile */

@media (max-width: 767px) {

    /* -----------------------------------------------------
       VARIABLES
       ----------------------------------------------------- */

    :root {
        --mobile-bg: #fff8f8;
        --mobile-header-bg: #fff8f8;
        --mobile-menu-bg: #fff8f8;
        --mobile-border: #f3eaea;
        --mobile-text: #555;
        --mobile-text-active: #333;
        --mobile-accent: #f29b9b;
    }


    /* -----------------------------------------------------
       HEADER GENERAL
       ----------------------------------------------------- */

    #header {
        background: var(--mobile-header-bg);
    }

    #header .header-nav {
        position: relative;
        min-height: 80px;
        padding: 0;
    }
    
    #header .header-nav,
    #header .header-nav > .container {
        min-height: 90px !important;  
    }

    #header .header-nav > .container {
        position: relative;
        width: 100%;
        min-height: 90px;
        padding: 0 15px;

        display: flex !important;        
        align-items: center !important;   
    }

    /* -----------------------------------------------------
       BARRA SUPERIOR / PROMOCIONAL
       ----------------------------------------------------- */




    /* -----------------------------------------------------
       ZONA DEL LOGO
       ----------------------------------------------------- */

    #header .top-logo,
    #_mobile_logo {
        position: static !important;      
        transform: none !important;       
        flex: 1;
        max-width: 150px;
        width: auto !important;
        margin: 0 40px !important;        
        padding: 0 !important;
        text-align: center;
        z-index: 5;
    }

    #_mobile_logo img {
        display: block;

        width: auto;
        max-width: 150px;
        max-height: 75px;

        height: auto !important;      
        max-height: none !important;
        margin: 0 auto;
    }


    /* -----------------------------------------------------
       HAMBURGER
       ----------------------------------------------------- */

    #menu-icon {
        position: absolute !important;

        left: 15px;
        top: 50%;

        transform: translateY(-50%);

        margin: 0 !important;

        z-index: 10;
    }

    #menu-icon i {
        font-size: 27px;
        line-height: 1;
    }


    /* -----------------------------------------------------
       ICONOS DERECHA
       ----------------------------------------------------- */

    #_mobile_cart,
    #_mobile_user_info {
        position: relative;
        z-index: 10;

        margin-top: 10px;
    }

    #_mobile_cart {
        position: absolute !important;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        margin: 0 !important;
        z-index: 10;
    }

    #_mobile_user_info {
        position: absolute !important;
        right: 105px;           /* ← subido para que no lo tape el carrito */
        top: 50%;
        transform: translateY(-50%);

        display: flex;
        align-items: center;

        margin: 0 !important;
        padding: 0 !important;

        z-index: 11;            /* por encima del carrito, por si acaso */
    }

    /* -----------------------------------------------------
       MENU MOBILE
       ----------------------------------------------------- */

    #mobile_top_menu_wrapper {
        position: fixed;          /* en vez de absolute */
        top: 90px;                /* la altura de tu header; ajústala */
        left: 0;
        width: 100%;
    
        z-index: 999;
        margin: 0 !important;
        padding: 0;
    
        background: var(--mobile-menu-bg);
    
        display: flex;
        flex-direction: column;
        min-height: calc(100vh - 90px);   /* resta esa misma altura */
    
        /* quita el box-shadow y border-top si no los quieres */
        box-shadow: none;
        border-top: 1px solid var(--mobile-border);
    }


    /* Contenedor de los links */

    #mobile_top_menu_wrapper #_mobile_top_menu {
        width: 100%;
        padding: 0;
        
        display: flex;              /* ← añadido */
        flex-direction: column;     /* ← apila links arriba, contacto abajo */
    }


    /* -----------------------------------------------------
       LINKS PRINCIPALES
       ----------------------------------------------------- */

    #mobile_top_menu_wrapper .top-menu {
        margin: 0;
        padding: 0;
    }

    #mobile_top_menu_wrapper .top-menu > li {
        width: 100%;
        margin: 0;
        padding: 0;

        border-bottom: 1px solid rgba(0, 0, 0, 0.035);
    }

    #mobile_top_menu_wrapper .top-menu > li > a {
        display: flex;
        align-items: center;

        min-height: 58px;

        padding: 0 28px;

        color: var(--mobile-text);

        font-size: 18px;
        font-weight: 400;

        text-decoration: none;

        transition:
            background-color .2s ease,
            color .2s ease;
    }

    #mobile_top_menu_wrapper .top-menu > li > a:hover,
    #mobile_top_menu_wrapper .top-menu > li > a:focus {
        background: #f8eeee;
        color: var(--mobile-text-active);
    }


    /* -----------------------------------------------------
       ITEM ACTIVO
       ----------------------------------------------------- */

    #mobile_top_menu_wrapper .top-menu > li.current > a,
    #mobile_top_menu_wrapper .top-menu > li.active > a {
        background: #f8eeee;
        color: var(--mobile-text-active);
    }


    /* -----------------------------------------------------
       FLECHA DE SUBMENÚ
       ----------------------------------------------------- */

    #mobile_top_menu_wrapper .top-menu .sub-menu {
        background: #fffafa;
        padding: 0;
    }

    #mobile_top_menu_wrapper .top-menu .sub-menu > li > a {
        display: block;

        padding: 14px 42px;

        font-size: 16px;
        color: #666;

        border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    }


    /* -----------------------------------------------------
       PARTE INFERIOR DEL MENU
       ----------------------------------------------------- */

    #mobile_top_menu_wrapper .js-top-menu-bottom {
        width: 100%;                /* ← añadido */
        padding: 25px 28px 30px !important;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }


    /* -----------------------------------------------------
       LOGIN / CUENTA
       ----------------------------------------------------- */

    #mobile_top_menu_wrapper #_mobile_contact_link,
    #mobile_top_menu_wrapper #_mobile_currency_selector,
    #mobile_top_menu_wrapper #_mobile_language_selector {
        margin-bottom: 10px;
    }


    /* -----------------------------------------------------
       EVITAR SCROLL HORIZONTAL
       ----------------------------------------------------- */

    body {
        overflow-x: hidden;
    }
    
     /* Login */
    #mobile_top_menu_wrapper #_mobile_user_info {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        width: auto !important;
        height: 42px;

        margin: 0 0 15px 0 !important;
        padding: 0 !important;
    }

    /* Enlace del login */
    #mobile_top_menu_wrapper #_mobile_user_info a {
        display: flex !important;
        align-items: center !important;

        height: 42px;

        margin: 0 !important;
        padding: 0 !important;

        color: #555;
        font-size: 16px;
        text-decoration: none;
    }

    /* Icono */
    #mobile_top_menu_wrapper #_mobile_user_info i,
    #mobile_top_menu_wrapper #_mobile_user_info .material-icons {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 24px;
        height: 24px;

        margin-right: 10px;

        font-size: 21px;
        line-height: 24px;
    }

    /* Texto */
    #mobile_top_menu_wrapper #_mobile_user_info span {
        display: flex;
        align-items: center;

        height: 24px;
        line-height: 24px;
    }

    #header {
        position: sticky;
        top: 0;
        z-index: 1000;
        transition: transform .3s ease;
    }

    #header.header-hidden {
        transform: translateY(-100%);
    }
}

/* Custom-Text */

#custom-text {
    width: 100vw;                      
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;                
    margin-right: -50vw;

    /* mantienes tu padding interno para que el texto no pegue a los bordes */
    padding: 3.125rem;
}

/* end */

/* all-products-link */

#products .all-product-link,
.featured-products .all-product-link,
.product-accessories .all-product-link {
    display: inline-block;
    margin: 2rem auto 0;
    padding: 14px 34px;

    background: #F2879B;                              
    color: #fff !important;

    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .5px;

    border-radius: 999px;                    
    box-shadow: 0 6px 16px rgba(242, 155, 155, .35);

    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

#products .all-product-link:hover,
.featured-products .all-product-link:hover,
.product-accessories .all-product-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(242, 155, 155, .45);
    background: #ef7188;                     
}

.featured-products .all-product-link {
    margin-bottom: 3rem;      
    margin-right: 1rem;       
}

/* end */

/* Subcategorias en all_products */

/* Oculta el recuadro de imagen vacío */
#subcategories .subcategory-image {
    display: none;
}

#subcategories .subcategories-list > li {
    display: inline-block;
    margin: 0 10px 12px 0;
}

#subcategories .subcategory-name {
    display: inline-block;
    padding: 8px 18px;
    background: #fff;
    border: 1px solid #f3eaea;
    border-radius: 999px;
    color: #F2879B;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

#subcategories .subcategory-name:hover {
    background: #F2879B;
    color: #fff !important;
}

@media (max-width: 767px) {

    #subcategories {
        display: none !important;
    }
}

/* end */

/* category */

#content-wrapper .block-category,
#js-product-list-header .block-category {
    border-radius: 14px;
}

#content-wrapper .block-category {
    min-height: 0;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

#content-wrapper .block-category .category-description:empty {
    display: none;
}

#content-wrapper .block-category h1 {
    margin-bottom: 0rem;
}

/* block-category */

#left-column .block-categories {
    background: #fff;
    border: 1px solid #f3eaea;
    border-radius: 14px;
    padding: 1.25rem 1rem;
    box-shadow: 0 6px 18px rgba(0,0,0,.04);
}

/* El título "INICIO" */
#left-column .block-categories .category-top-menu > li > a {
    color: #F2879B;
    font-weight: 600;
}

/* Los enlaces de categorías */
#left-column .block-categories .category-top-menu a {
    color: #555;
    text-decoration: none;
    transition: color .2s ease;
}

#left-column .block-categories .category-top-menu a:hover {
    color: #F2879B;
}

/* end */

/* orderby products */

/* El botón "Elegir" */
.products-sort-order .select-title {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1.2;      /* añade esto */
    min-height: 42px;      /* una altura estable */

    border: 1px solid #f3eaea;
    border-radius: 10px;
    background: #fff;

    padding: 8px 14px;
    color: #555;

    font-size: 1rem !important;      /* ← añade esto para pisar el .875rem del theme */

    transition: border-color .2s ease, box-shadow .2s ease;
}

.products-sort-order .select-title:hover,
.products-sort-order .select-title:focus {
    border-color: #F2879B;
    box-shadow: 0 0 0 3px rgba(242, 135, 155, .15);
}

/* El menú desplegable que se abre */
.products-sort-order .dropdown-menu {
    border: 1px solid #f3eaea;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,.06);
    padding: 6px;
}

.products-sort-order .dropdown-menu li a,
.products-sort-order .dropdown-menu .select-list {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    color: #555;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

.products-sort-order .dropdown-menu li a:hover,
.products-sort-order .dropdown-menu .select-list:hover {
    background: #fdeff1;
    color: #F2879B;
}
/* end */

.product-title a,
.product-title {
    font-weight: 600;   /* en vez de 400 */
}

/* Para dejar el footer hasta el final */
main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#wrapper {
    flex: 1;          /* el contenido crece y empuja el footer al fondo */
}

/* end */

/* ---- Página de seguimiento de pedido (guest tracking) ---- */

/* La caja del formulario como tarjeta suave */
#guest-tracking #content.card {
    background: #fff;
    border: 1px solid #f3eaea;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,.04);
    padding: 2rem;
}

/* Los campos de texto */
#guestOrderTrackingForm .form-control,
#guestOrderTrackingForm input[type="text"],
#guestOrderTrackingForm input[type="email"] {
    border: 1px solid #f3eaea;
    border-radius: 10px;
    padding: 12px 14px;
    color: #555;
    transition: border-color .2s ease, box-shadow .2s ease;
}

#guestOrderTrackingForm .form-control:focus {
    border-color: #F2879B;
    box-shadow: 0 0 0 3px rgba(242, 135, 155, .15);
    outline: none;
}

/* Las etiquetas */
#guestOrderTrackingForm .form-control-label {
    color: #555;
    font-weight: 600;
}

/* El botón "Enviar" a juego con "Todos los productos" */
#guestOrderTrackingForm button[type="submit"],
#guestOrderTrackingForm .btn-primary {
    background: #F2879B !important;
    border: none !important;
    color: #fff !important;

    padding: 12px 34px;
    border-radius: 999px;
    font-weight: 600;

    box-shadow: 0 6px 16px rgba(242, 135, 155, .35);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

#guestOrderTrackingForm button[type="submit"]:hover,
#guestOrderTrackingForm .btn-primary:hover {
    background: #ef7188 !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(242, 135, 155, .45);
}


/* ---- Página CMS "Sobre nosotros" ---- */

/* La caja de contenido como tarjeta suave */
#cms #content.page-cms {
    background: #fff;
    border: 1px solid #f3eaea;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,.04);
    padding: 2rem 2.5rem;

    overflow: hidden;      /* ← esto hace que la caja contenga las columnas flotadas */
}

/* Título principal de la página ("Sobre nosotros") */
#cms .page-header h1,
#cms .page-header .h1 {
    color: #7a2e3f;          /* tono oscuro de marca para títulos */
    font-weight: 600;
}

/* Subtítulos dentro del contenido ("Sobre Zukiiteria", "Mi equipo") */
#cms .page-cms h2,
#cms .page-cms h3 {
    color: #F2879B;          /* rosa coral de la marca */
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Texto del cuerpo, un poco más cómodo de leer */
#cms .page-cms p {
    color: #555;
    line-height: 1.7;
}

/* ---- Página de inicio de sesión ---- */

/* La caja del formulario como tarjeta suave */
#authentication #content.card {
    background: #fff;
    border: 1px solid #f3eaea;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,.04);
    padding: 2rem;
}

/* Título de la página */
#authentication .page-header h1,
#authentication .page-header .h1 {
    color: #7a2e3f;
    font-weight: 600;
}

/* Campos de texto */
#login-form .form-control,
#login-form input[type="text"],
#login-form input[type="email"] {
    border: 1px solid #f3eaea;
    border-radius: 10px;
    padding: 12px 14px;
    color: #555;
    transition: border-color .2s ease, box-shadow .2s ease;
}

#login-form .form-control:focus {
    border-color: #F2879B;
    box-shadow: 0 0 0 3px rgba(242, 135, 155, .15);
    outline: none;
}

/* Etiquetas */
#login-form .form-control-label {
    color: #555;
    font-weight: 600;
}

/* Botón "Iniciar sesión" a juego */
#login-form button[type="submit"],
#login-form .btn-primary {
    background: #F2879B !important;
    border: none !important;
    color: #fff !important;

    padding: 12px 34px;
    border-radius: 999px;
    font-weight: 600;

    box-shadow: 0 6px 16px rgba(242, 135, 155, .35);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

#login-form button[type="submit"]:hover,
#login-form .btn-primary:hover {
    background: #ef7188 !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(242, 135, 155, .45);
}

#authentication .forgot-password a,
#authentication .no-account a {
    color: #F2879B;
    transition: color .2s ease;
}

#authentication .forgot-password a:hover,
#authentication .no-account a:hover {
    color: #ef7188;
    text-decoration: underline;
}

/* Botón MOSTRAR de la contraseña */
#login-form .input-group .btn,
#login-form .input-group-append .btn,
#login-form [data-action="show-password"] {
    background: #fdeff1 !important;      /* rosa muy suave, no gris */
    color: #F2879B !important;
    border: 1px solid #f3eaea !important;
    border-left: none !important;        /* se une visualmente al campo */

    border-radius: 0 10px 10px 0 !important;   /* redondeado solo a la derecha */

    font-weight: 600;
    font-size: .85rem;
    padding: 0 16px;

    box-shadow: none !important;
    transition: background .2s ease, color .2s ease;
}

#login-form .input-group .btn:hover,
#login-form [data-action="show-password"]:hover {
    background: #F2879B !important;
    color: #fff !important;
}

#login-form .input-group .form-control {
    border-radius: 10px 0 0 10px !important;   /* esquinas izq redondas, der rectas */
    border-right: none !important;             /* se funde con el botón */
}

/* Quita el outline azul del navegador en el campo y en el grupo */
#login-form .input-group .form-control:focus,
#login-form .input-group:focus-within {
    outline: none !important;
    box-shadow: none;
}

/* Aplica el resaltado rosa a TODO el grupo cuando el campo tiene foco */
#login-form .input-group:focus-within {
    border-radius: 10px;
    box-shadow: 0 0 0 3px rgba(242, 135, 155, .15);
}

/* CARRITO */
#cart .current-price .price,
#cart .product-price,
#cart .cart-summary-line .value {
    color: #F2879B;
    font-weight: 600;
}
#cart .cart-container,
#cart .cart-summary,
#cart .card {
    border: 1px solid #f3eaea !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.04);
}

#cart .cart-line-product-quantity .input-group,
#cart .qty .input-group {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #f3eaea;
}

#cart .cart-line-product-quantity input {
    border: none;
    text-align: center;
}

#cart .remove-from-cart {
    color: #c9a9a9;
    transition: color .2s ease;
}

#cart .remove-from-cart:hover {
    color: #F2879B;
}

/* El grupo completo como una pieza redondeada */
#cart .cart-line-product-quantity .input-group,
#cart .bootstrap-touchspin,
#cart .qty .input-group {
    border: 1px solid #f3eaea !important;
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: none !important;
}

/* El input del número, sin bordes propios */
#cart .cart-line-product-quantity input,
#cart .bootstrap-touchspin input {
    border: none !important;
    box-shadow: none !important;
    text-align: center;
    background: #fff;
}

/* Los botones de flecha (+ / -) */
#cart .bootstrap-touchspin-up,
#cart .bootstrap-touchspin-down,
#cart .cart-line-product-quantity .btn-touchspin {
    background: #fdeff1 !important;   /* rosa suave en vez de gris */
    border: none !important;
    border-left: 1px solid #f3eaea !important;
    color: #F2879B !important;
    box-shadow: none !important;
    transition: background .2s ease;
}

#cart .bootstrap-touchspin-up:hover,
#cart .bootstrap-touchspin-down:hover,
#cart .cart-line-product-quantity .btn-touchspin:hover {
    background: #F2879B !important;
    color: #fff !important;
}

#cart .product-line-grid-left img,
#cart .cart-item img {
    border-radius: 12px;
    border: 1px solid #f3eaea;          /* borde suave opcional */
    box-shadow: 0 4px 12px rgba(0,0,0,.05);  /* sombra ligera opcional */
}

/* end */

/* Vista rapida */
/* Imagen principal de la vista rápida */
#quickview-modal .product-cover img,
.quickview .product-cover img {
    border-radius: 12px;
}

/* Miniaturas */
#quickview-modal .thumb,
.quickview .js-thumb {
    border-radius: 10px;
}

/* Miniatura seleccionada: borde rosa a juego */
#quickview-modal .thumb.selected,
#quickview-modal .js-thumb-selected,
.quickview .thumb.selected {
    border-radius: 10px;
    border: 2px solid #F2879B !important;   /* rosa de la marca */
}

#quickview-modal .thumb {
    border: 2px solid #f3eaea;   /* borde suave en las no seleccionadas */
    transition: border-color .2s ease;
}

#quickview-modal .thumb:hover {
    border-color: #F2879B;       /* rosa al pasar el cursor */
}

/* El grupo de cantidad como una pieza redondeada */
#quickview-modal .product-quantity .qty,
#quickview-modal .bootstrap-touchspin,
#quickview-modal .input-group {
    border: 1px solid #f3eaea !important;
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: none !important;
}

/* El input del número */
#quickview-modal .product-quantity input,
#quickview-modal .bootstrap-touchspin input {
    border: none !important;
    box-shadow: none !important;
    text-align: center;
    background: #fff;
}

/* Las flechitas + / - */
#quickview-modal .bootstrap-touchspin-up,
#quickview-modal .bootstrap-touchspin-down,
#quickview-modal .btn-touchspin {
    background: #fdeff1 !important;
    border: none !important;
    border-left: 1px solid #f3eaea !important;
    color: #F2879B !important;
    box-shadow: none !important;
    transition: background .2s ease, color .2s ease;
}

#quickview-modal .bootstrap-touchspin-up:hover,
#quickview-modal .bootstrap-touchspin-down:hover,
#quickview-modal .btn-touchspin:hover {
    background: #F2879B !important;
    color: #fff !important;
}

/* end */

/* hover de vista rapida */

/* Enlace "Vista rápida" que aparece al pasar el cursor */
.product-miniature .quick-view,
.quick-view.js-quick-view {
    color: #F2879B !important;
    transition: color .2s ease;
}

.product-miniature .quick-view:hover,
.quick-view.js-quick-view:hover {
    color: #ef7188 !important;      /* un tono más intenso al pasar sobre él */
}

.quick-view.js-quick-view i,
.product-miniature .quick-view i {
    color: #F2879B;
}

/* end */

/* product */

/* La imagen principal del producto */
#product .product-cover img,
#product .images-container .product-cover img {
    border-radius: 12px;
}

/* La capa oscura de hover/zoom — mismo redondeo que la imagen */
#product .product-cover .layer {
    border-radius: 12px;
}

/* Imagen: redondear solo las esquinas de arriba */
#product-modal .product-cover-modal,
#product-modal .js-modal-product-cover {
    border-radius: 12px 12px 0 0;
}

/* Caption: redondear solo las esquinas de abajo */
#product-modal .image-caption,
#product-modal figcaption {
    border-radius: 0 0 12px 12px;
}/* Imagen: redondear solo las esquinas de arriba */
#product-modal .product-cover-modal,
#product-modal .js-modal-product-cover {
    border-radius: 12px 12px 0 0;
}

/* Caption: redondear solo las esquinas de abajo */
#product-modal .image-caption,
#product-modal figcaption {
    border-radius: 0 0 12px 12px;
}product-modal #thumbnails img {
    border-radius: 10px;
    border: 2px solid #f3eaea;
    transition: border-color .2s ease;
}

#product-modal .thumbnails .thumb:hover,
#product-modal .thumbnails .thumb.selected {
    border-color: #F2879B;
}

/* Miniaturas del modal: quitar azul en hover y focus */
#product-modal .thumbnails .thumb:hover,
#product-modal .thumbnails .thumb:focus,
#product-modal #thumbnails img:hover,
#product-modal #thumbnails img:focus {
    outline: none !important;
    box-shadow: none !important;
    border: 2px solid #F2879B !important;   /* rosa en lugar del azul */
}

/* La miniatura activa/seleccionada */
#product-modal .thumbnails .thumb.selected {
    border: 2px solid #F2879B !important;
}

/* end */

.product-miniature .wishlist-button-add,
.product-miniature .wishlist-button-add i {
    color: #F2879B;
}

/* CARRITO */

@media (max-width: 767px) {


    /* Selector de cantidad en fila (número + flechas al lado) */
    #cart .bootstrap-touchspin,
    #cart .cart-line-product-quantity .input-group {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        width: auto !important;
        max-width: 120px;
    }

    /* El input del número */
    #cart .bootstrap-touchspin input,
    #cart .cart-line-product-quantity input {
        width: 50px !important;
        flex: none !important;
    }

    /* Contenedor de las flechas, apiladas en vertical a la derecha */
    #cart .input-group-btn-vertical,
    #cart .bootstrap-touchspin .input-group-btn-vertical {
        display: flex !important;
        flex-direction: column !important;
    }
}

.product-flag.discount {
    background-color: #F2879B !important;
}

/* OLVIDE CONTRASEÑA PAGINNA */

/* SOLO para la página de contraseña, no para todo customer-account */
#password .form-fields .form-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#password .forgotten-password label,
#password .form-control-label {
    width: auto !important;
    text-align: left;
    margin-bottom: .5rem;
}

#password .form-fields .form-control,
#password .col-md-5.email {
    width: 100% !important;
    max-width: 100%;
    float: none !important;
}

#password #send-reset-link,
#password .form-control-submit {
    width: 100%;
    margin-top: 1rem;
}

/* El botón, ancho completo y separado */
.page-customer-account #send-reset-link,
.page-customer-account .form-control-submit {
    width: 100%;
    margin-top: 1rem;
}

.page-footer .account-link, #content .register-form a {
    color: #F2879B !important;
}

#registration .form-control,
#registration input[type="text"],
#registration input[type="email"],
#registration input[type="password"] {
    border-radius: 10px !important;
    border: 1px solid #f3eaea !important;
    padding: 12px 14px !important;
}

/* El campo de contraseña con botón MOSTRAR: redondeo solo a la izquierda */
#registration .input-group .form-control {
    border-radius: 10px 0 0 10px !important;
    border-right: none !important;
}

/* Y el botón MOSTRAR redondeado solo a la derecha */
#registration .input-group .btn {
    border-radius: 0 10px 10px 0 !important;
    background: #fdeff1 !important;
    color: #F2879B !important;
    border: 1px solid #f3eaea !important;
    border-left: none !important;
}


#search_widget .form-control,
#search_widget input {
    padding-left: 40px !important;   /* deja hueco para la lupa a la izquierda */
    border-radius: 999px !important; /* la píldora redondeada que tenía */
}

/* ANIMACIONES */

/* CAROUSEL — se oculta solo si el JS le pone .will-animate */
#carousel.will-animate {
    opacity: 0;
    transition: opacity 1s ease;
}
#carousel.will-animate.in-view {
    opacity: 1;
}

/* TARJETAS — se ocultan solo si el JS les pone .will-animate */
.products .js-product.will-animate {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .5s ease, transform .5s ease;
}
.products .js-product.will-animate.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Menos movimiento: nunca ocultar */
@media (prefers-reduced-motion: reduce) {
    .products .js-product.will-animate,
    #carousel.will-animate {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Zoom dentro de la tarjeta */

/* El contenedor recorta el zoom para que no se desborde */
.product-miniature .thumbnail-container,
.product-miniature .product-thumbnail {
    overflow: hidden;
    border-radius: 12px;   /* si ya lo tienen redondeado, mantiene las esquinas */
}

/* La imagen hace zoom suave al pasar el cursor */
.product-miniature .thumbnail-container img,
.product-miniature .product-thumbnail img {
    transition: transform .4s ease;
}

.product-miniature:hover .thumbnail-container img,
.product-miniature:hover .product-thumbnail img {
    transform: scale(1.08);   /* 8% más grande */
}

@keyframes imgFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.product-cover img.img-fade,
.js-qv-product-cover.img-fade {
    animation: imgFade .6s ease;
}