/* Corrección accesibilidad: filtros Tabs Creative Elements */
.pk-ce-widget .nav-tabs .nav-link {
    color: #6a6a6a !important;   /* gris más oscuro */
}

.pk-ce-widget .nav-tabs .nav-link:hover,
.pk-ce-widget .nav-tabs .nav-link:focus {
    color: #333 !important;
}

.pk-ce-widget .nav-tabs .nav-link.active {
    color: #000 !important;
}

/* Mejorar contraste del texto general */
body {
    color: #333333 !important;  /* Gris más oscuro que cumple contraste */
}

/* Mejorar contraste de spans en la home */
body#index.lang-es.country-es.currency-eur.layout-full-width.page-index.tax-display-enabled.pm_details_layout_category-page-width-full.no-touch span {
    color: #333333 !important;
}

/* Aumentar contraste de los textos del subheader/top bar */
#header span,
#header a {
  color: #555555 !important;   /* o #333333 si quieres aún más contraste */
}

/* Mejora maquetación de la barra superior de categoría en Alysum */
#js-product-list-top.products-selection {
  display: flex;
  flex-wrap: wrap;              /* que pueda saltar de línea si hace falta */
  align-items: center;
  justify-content: space-between; /* reparte mejor los bloques */
  gap: 15px;                    /* separación entre elementos */
  padding: 15px 0 25px;         /* algo de aire arriba y abajo */
}

/* Opcional: que los controles no se peguen al borde izquierdo */
.block-category + #products .products-selection {
  padding-left: 10px;
}

/* En pantallas pequeñas, todo a columna para que no se aplaste */
@media (max-width: 768px) {
  #js-product-list-top.products-selection {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Ocultar completamente el modal de imágenes cuando está cerrado */
#product-modal[aria-hidden="true"] {
  display: none !important;
}

/* Mostrarlo correctamente cuando se abre */
#product-modal[aria-hidden="false"] {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
}

/* ===== Fix responsive carrito y checkout en móvil ===== */
@media (max-width: 767px) {
  html, body {
    overflow-x: hidden !important;
  }

  #main-content,
  #content,
  .page-width,
  .container,
  .row,
  .cart-grid,
  .checkout,
  .checkout-page,
  #checkout,
  #cart,
  .blockcart,
  .cart-summary,
  .cart-detailed-totals,
  .card-block,
  .js-cart,
  .js-checkout-step {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .row {
    display: block !important;
  }

  .cart-summary,
  .cart-detailed-totals,
  .checkout-step,
  .blockcart,
  .card,
  .card-block {
    float: none !important;
    clear: both !important;
  }

  table,
  .table-responsive,
  .cart-items,
  .cart-item,
  .cart-overview,
  .cart-grid-body,
  .cart-grid-right {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: auto !important;
    box-sizing: border-box !important;
  }

  img {
    max-width: 100% !important;
    height: auto !important;
  }

  #footer,
  .page-footer,
  footer.page-footer {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
}

@media (max-width: 767px) {

  #checkout .cart-grid,
  #cart .cart-grid {
    display: flex !important;
    flex-direction: column !important;
  }

  #checkout .cart-grid-body,
  #checkout .cart-grid-right,
  #cart .cart-grid-body,
  #cart .cart-grid-right {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  #checkout .cart-grid-right,
  #cart .cart-grid-right {
    order: 2 !important;
  }

  #checkout .cart-grid-body,
  #cart .cart-grid-body {
    order: 1 !important;
  }
}