/*--------------------------------------------------------------
# Mioparquet · Restyling de tienda, categorías, ficha y breadcrumb
# Colores del logo: rojo #C20C19, blanco y negro de cabecera #131313.
# Se carga solo en páginas de WooCommerce (tuenweb-woo/tienda.php),
# detrás de plugins/tuenweb_woocommerce/css/woocomerce.css.
# Todas las reglas van bajo #main para ganar al CSS del plugin sin !important.
--------------------------------------------------------------*/
#main {
  --mp-red: #c20c19;
  --mp-red-dark: #9a0a14;
  --mp-black: #131313;
  --mp-ink: #1f1f1f;
  --mp-grey: #6b6b6b;
  --mp-grey-light: #9a9a9a;
  --mp-line: #e6e6e6;
  --mp-soft: #f6f6f5;
  --mp-white: #ffffff;
  --mp-radius: 2px;
  --mp-shadow: 0 14px 34px rgba(19, 19, 19, 0.12);
  --mp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/*--------------------------------------------------------------
# Breadcrumb
--------------------------------------------------------------*/
#main .woocommerce-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 8px 0 18px;
  padding: 2px 0 2px 14px;
  background: none;
  border-left: 3px solid var(--mp-red);
  color: var(--mp-ink);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
}
#main .woocommerce-breadcrumb::before {
  display: none;            /* quita la banda inclinada gris del plugin */
}
#main .woocommerce-breadcrumb a {
  color: var(--mp-grey);
  transition: color 0.15s ease;
}
#main .woocommerce-breadcrumb a:hover {
  color: var(--mp-red);
}
#main .woocommerce-breadcrumb .mp-bc-sep {
  color: var(--mp-red);
  font-weight: 400;
}
#main .woocommerce-breadcrumb .mp-bc-item:last-child {
  color: var(--mp-black);
}

/*--------------------------------------------------------------
# Cabecera de tienda / categoría
--------------------------------------------------------------*/
#main .woocommerce-products-header {
  display: block;           /* el plugin la oculta */
  margin: 0 0 34px;
}
#main .woocommerce-products-header__title {
  position: relative;
  margin: 0;
  padding-bottom: 16px;
  color: var(--mp-black);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
#main .woocommerce-products-header__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  background: var(--mp-red);
}
#main .term-description,
#main .page-description {
  max-width: 760px;
  margin-top: 16px;
  color: var(--mp-grey);
  font-size: 16px;
  line-height: 1.65;
}
#main .term-description p:last-child,
#main .page-description p:last-child {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Rejilla de productos / categorías
--------------------------------------------------------------*/
#main ul.products {
  row-gap: 30px;
  margin-bottom: 0;
  padding-left: 0;
}
#main ul.products::before,
#main ul.products::after {
  display: none;            /* clearfix de WooCommerce: estorba en la fila flex */
}
#main ul.products li.product {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  margin: 0;
  float: none;
  text-align: left;
}
/* La "tarjeta" se pinta con un pseudo-elemento para respetar el gutter de Bootstrap */
#main ul.products li.product::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  z-index: -1;
  background: var(--mp-white);
  border: 1px solid var(--mp-line);
  border-bottom: 2px solid var(--mp-line);
  border-radius: var(--mp-radius);
  transition: box-shadow 0.25s var(--mp-ease), border-color 0.25s var(--mp-ease), transform 0.25s var(--mp-ease);
}
#main ul.products li.product:hover::before {
  border-color: var(--mp-line);
  border-bottom-color: var(--mp-red);
  box-shadow: var(--mp-shadow);
}

/* Imagen */
#main ul.products li.product .post-media {
  margin: 0;
  overflow: hidden;
  background: var(--mp-soft);
  aspect-ratio: 1 / 1;
}
/* .link-product-img es un <span> dentro del enlace del producto
   (tuenweb-woo/woo-functions.php, tuenweb_woocommerce_get_product_thumbnail). */
#main ul.products li.product .link-product-img {
  display: block;
  height: 100%;
}
#main ul.products li.product .post-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: transform 0.6s var(--mp-ease);
}
#main ul.products li.product:hover .post-media img {
  transform: scale(1.05);
}

/* Título */
#main ul.products li.product .woocommerce-loop-product__title,
#main ul.products li.product .woocommerce-loop-category__title {
  min-height: 0;
  margin: 0;
  padding: 16px 18px 6px;
  color: var(--mp-black);
  font-size: 15px !important;   /* el plugin lo fija con !important */
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  transition: color 0.15s ease;
}
#main ul.products li.product:hover .woocommerce-loop-product__title {
  color: var(--mp-red);
}
#main ul.products li.product .woocommerce-LoopProduct-link {
  display: block;
  color: inherit;
}

/* Valoración (estrellas de WooCommerce) alineada con el texto de la tarjeta */
#main ul.products li.product .star-rating {
  margin: 0 18px 6px;
  font-size: 0.8em;
  color: var(--mp-red);
}

/* Precio (si lo hay) */
#main ul.products li.product .price {
  padding: 0 18px 4px !important;
  text-align: left !important;
  color: var(--mp-ink) !important;
  font-weight: 600;
}

/* Botón del listado ("Leer más", "Añadir al carrito", "Seleccionar opciones"...) como enlace con flecha al pie de la tarjeta.
   !important en lo que el plugin tuenweb_woocommerce fija con !important para .add_to_cart_button (css/woocomerce.css) */
#main ul.products li.product a.button {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: auto 18px 0;
  padding: 12px 0 16px !important;
  background: none !important;
  border: 0 !important;
  border-top: 1px solid var(--mp-line) !important;
  border-radius: 0;
  color: var(--mp-red) !important;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
  white-space: normal !important;
  text-align: left !important;
  text-transform: uppercase;
  box-shadow: none;
}
#main ul.products li.product a.button::after {
  content: "\2192";
  font-size: 15px;
  letter-spacing: 0;
  transition: transform 0.2s var(--mp-ease);
}
#main ul.products li.product a.button:hover {
  color: var(--mp-red-dark) !important;
  background: none !important;
}
#main ul.products li.product:hover a.button::after {
  transform: translateX(5px);
}

/*--------------------------------------------------------------
# Tarjetas de categoría
# Con imagen propia: tarjeta normal. Con la imagen por defecto de WooCommerce:
# bloque oscuro con el motivo de listones del logo.
--------------------------------------------------------------*/
#main ul.products li.product-category > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}
#main ul.products li.product-category mark.count {
  display: inline;
  margin-left: 4px;
  padding: 0;
  background: none;
  color: var(--mp-grey-light);
  font-size: 13px;
  font-weight: 500;
}
#main ul.products li.product-category .woocommerce-loop-category__title {
  padding-bottom: 18px;
}
#main ul.products li.product-category .woocommerce-loop-category__title::after {
  content: "\2192";
  float: right;
  color: var(--mp-red);
  transition: transform 0.2s var(--mp-ease);
}
#main ul.products li.product-category:hover .woocommerce-loop-category__title::after {
  transform: translateX(5px);
}

#main ul.products li.product-category:has(img[data-src*="woocommerce-placeholder"])::before,
#main ul.products li.product-category:has(img[src*="woocommerce-placeholder"])::before {
  background:
    linear-gradient(150deg, rgba(194, 12, 25, 0) 55%, rgba(194, 12, 25, 0.28) 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 2px, transparent 2px 26px),
    var(--mp-black);
  border-color: var(--mp-black);
  border-bottom: 3px solid var(--mp-red);
}
#main ul.products li.product-category:has(img[data-src*="woocommerce-placeholder"]) .post-media,
#main ul.products li.product-category:has(img[src*="woocommerce-placeholder"]) .post-media {
  display: none;
}
#main ul.products li.product-category:has(img[data-src*="woocommerce-placeholder"]) > a,
#main ul.products li.product-category:has(img[src*="woocommerce-placeholder"]) > a {
  justify-content: flex-end;
  min-height: 190px;
  padding: 22px 6px;
}
#main ul.products li.product-category:has(img[data-src*="woocommerce-placeholder"]) .woocommerce-loop-category__title,
#main ul.products li.product-category:has(img[src*="woocommerce-placeholder"]) .woocommerce-loop-category__title {
  position: relative;
  padding-top: 18px;
  color: var(--mp-white);
  font-size: 20px !important;
  font-weight: 700;
}
#main ul.products li.product-category:has(img[data-src*="woocommerce-placeholder"]) .woocommerce-loop-category__title::before,
#main ul.products li.product-category:has(img[src*="woocommerce-placeholder"]) .woocommerce-loop-category__title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  width: 34px;
  height: 3px;
  background: var(--mp-red);
  transition: width 0.3s var(--mp-ease);
}
#main ul.products li.product-category:has(img[data-src*="woocommerce-placeholder"]):hover .woocommerce-loop-category__title::before,
#main ul.products li.product-category:has(img[src*="woocommerce-placeholder"]):hover .woocommerce-loop-category__title::before {
  width: 64px;
}
#main ul.products li.product-category:has(img[data-src*="woocommerce-placeholder"]) mark.count,
#main ul.products li.product-category:has(img[src*="woocommerce-placeholder"]) mark.count {
  color: rgba(255, 255, 255, 0.55);
}
#main ul.products li.product-category:has(img[data-src*="woocommerce-placeholder"]) .woocommerce-loop-category__title::after,
#main ul.products li.product-category:has(img[src*="woocommerce-placeholder"]) .woocommerce-loop-category__title::after {
  color: var(--mp-white);
}

/*--------------------------------------------------------------
# Paginación
--------------------------------------------------------------*/
#main .woocommerce-pagination {
  margin: 44px 0 10px;
  text-align: center;
}
#main .woocommerce-pagination ul.page-numbers {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}
#main .woocommerce-pagination ul.page-numbers li {
  float: none;
  margin: 0;
  border: 0;
}
#main .woocommerce-pagination .page-numbers a,
#main .woocommerce-pagination .page-numbers span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  background: var(--mp-white);
  color: var(--mp-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
#main .woocommerce-pagination .page-numbers a:hover {
  border-color: var(--mp-black);
  background: var(--mp-black);
  color: var(--mp-white);
}
#main .woocommerce-pagination .page-numbers span.current {
  border-color: var(--mp-red);
  background: var(--mp-red);
  color: var(--mp-white);
}

/*--------------------------------------------------------------
# Ficha de producto
--------------------------------------------------------------*/
#main .tuenweb-product {
  margin-top: 6px;
}

/* Galería (Fotorama) */
#main .tuenweb-product .fotorama__stage {
  background: var(--mp-soft);
}
#main .tuenweb-product .fotorama__thumb-border {
  border-color: var(--mp-red) !important;   /* Fotorama lo pinta inline */
}
#main .tuenweb-product .fotorama__nav-wrap {
  margin-top: 10px;
}
#main .tuenweb-product .fotorama__arr {
  background-color: rgba(19, 19, 19, 0.55);
  border-radius: var(--mp-radius);
}

/* Resumen */
#main .tuenweb-product .summary {
  padding: 30px 32px 26px;
  background: var(--mp-soft);
  border-top: 3px solid var(--mp-red);
}
#main .tuenweb-product .summary .product_title {
  position: relative;
  min-height: 0;
  margin: 0 0 22px !important;
  padding: 0 0 16px;
  color: var(--mp-black);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
#main .tuenweb-product .summary .product_title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 3px;
  background: var(--mp-red);
}
#main .tuenweb-product .summary .price:empty {
  display: none !important;
}
#main .tuenweb-product .summary .price {
  color: var(--mp-black) !important;
  font-size: 22px !important;
  font-weight: 700;
}

/* Fichas técnicas (Dimensiones, Diseño, Datos del producto) */
#main .tuenweb-product .tuenweb-product-descrip {
  margin: 0 !important;
}
#main .tuenweb-product .tuenweb-product-descrip > p {
  margin: 24px 0 6px;
  color: var(--mp-ink);
  font-size: 15px;
  line-height: 1.6;
}
#main .tuenweb-product .tuenweb-product-descrip > p:first-child {
  margin-top: 0;
}
#main .tuenweb-product .tuenweb-product-descrip > p > strong:only-child {
  display: block;
  color: var(--mp-red);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#main .tuenweb-product .tuenweb-product-descrip ul {
  margin: 0;
  padding: 0;
  font-weight: 400;
  list-style: none;
}
#main .tuenweb-product .tuenweb-product-descrip ul li {
  position: relative;
  padding: 10px 0 10px 18px;
  border-bottom: 1px solid var(--mp-line);
  color: var(--mp-ink);
  font-size: 15px;
  line-height: 1.45;
}
#main .tuenweb-product .tuenweb-product-descrip ul li:last-child {
  border-bottom: 0;
}
#main .tuenweb-product .tuenweb-product-descrip ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 6px;
  height: 6px;
  background: var(--mp-red);
}

/* Botones propios de la ficha (añadir al carrito, etc.) */
#main .tuenweb-product .single_add_to_cart_button,
#main .tuenweb-product .tuenweb-add-to-card-btn {
  padding: 14px 24px;
  border: 0;
  border-radius: var(--mp-radius);
  background: var(--mp-red);
  color: var(--mp-white);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.15s ease;
}
#main .tuenweb-product .single_add_to_cart_button:hover,
#main .tuenweb-product .tuenweb-add-to-card-btn:hover {
  background: var(--mp-red-dark);
}

/* Documentación PDF (tuenweb-woo/documentos.php) */
#main .mp-docs {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--mp-line);
}
#main .mp-docs__title {
  margin: 0 0 12px;
  color: var(--mp-red);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#main .mp-docs__list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#main .mp-docs__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--mp-white);
  border: 1px solid var(--mp-line);
  border-left: 3px solid var(--mp-red);
  border-radius: var(--mp-radius);
  color: var(--mp-ink);
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
#main .mp-docs__item:hover {
  border-color: var(--mp-red);
  box-shadow: 0 6px 18px rgba(19, 19, 19, 0.08);
  color: var(--mp-red);
}
#main .mp-docs__icon {
  flex: 0 0 auto;
  color: var(--mp-red);
  font-size: 22px;
  line-height: 1;
}
#main .mp-docs__name {
  flex: 1 1 auto;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
#main .mp-docs__meta {
  flex: 0 0 auto;
  color: var(--mp-grey);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
#main .mp-docs__dl {
  flex: 0 0 auto;
  color: var(--mp-grey);
  font-size: 16px;
  transition: color 0.15s ease, transform 0.15s ease;
}
#main .mp-docs__item:hover .mp-docs__dl {
  color: var(--mp-red);
  transform: translateY(2px);
}

/* Relacionados */
#main .tuenweb-related {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--mp-line);
}
#main .tuenweb-related .tuenweb-related-title {
  position: relative;
  margin: 0 0 36px;
  padding-bottom: 16px;
  color: var(--mp-black);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}
#main .tuenweb-related .tuenweb-related-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 48px;
  height: 3px;
  margin-left: -24px;
  background: var(--mp-red);
}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
@media (max-width: 991.98px) {
  #main .woocommerce-products-header__title {
    font-size: 30px;
  }
  #main .tuenweb-product .summary {
    margin-top: 24px;
  }
}
@media (max-width: 575.98px) {
  #main .woocommerce-breadcrumb {
    font-size: 11.5px;
    letter-spacing: 0.06em;
  }
  #main .woocommerce-products-header__title {
    font-size: 26px;
  }
  #main ul.products {
    row-gap: 20px;
  }
  #main ul.products li.product-category:has(img[data-src*="woocommerce-placeholder"]) > a,
  #main ul.products li.product-category:has(img[src*="woocommerce-placeholder"]) > a {
    min-height: 120px;
    padding: 16px 6px;
  }
  #main .tuenweb-product .summary {
    padding: 24px 20px 20px;
  }
  #main .tuenweb-product .summary .product_title {
    font-size: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #main ul.products li.product::before,
  #main ul.products li.product .post-media img,
  #main ul.products li.product a.button::after {
    transition: none;
  }
}