/* ============================================================
   MARE NOSTRUM — WooCommerce en clave editorial
   Mapea el marcado de WooCommerce (catálogo y ficha) al diseño
   "lujo mediterráneo" del sitio original, reutilizando las
   variables de mare-nostrum.css (--sand, --olive, --ink, etc.).
   ============================================================ */

/* ---------- Contenedor de tienda ----------
   En las páginas Elementor el catálogo va dentro de un contenedor ya
   espaciado (1380 + gutter), así que aquí NO duplicamos ancho ni padding;
   solo limitamos en archivos de tienda "crudos" mediante :where para baja
   especificidad. */
.woocommerce:not(.elementor *), .woocommerce-page:not(.elementor *) {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--section-y) var(--gutter);
  background: var(--bone);
}
/* Dentro de Elementor, que el catálogo ocupe todo el ancho del contenedor */
.elementor .woocommerce { max-width: none; margin: 0; padding: 0; background: transparent; }

/* Ocultar elementos de e-commerce que no aplican en modo catálogo */
.woocommerce .cart, .woocommerce .price, .woocommerce-result-count,
.woocommerce-breadcrumb, .woocommerce .added_to_cart,
.woocommerce ul.products li.product .button.add_to_cart_button {
  display: none !important;
}

/* ---------- Rejilla del catálogo: GRID uniforme 4 col (= .masonry de la muestra,
   que pese al nombre es grid repeat(4,1fr) con imágenes recortadas a 4/5) ---------- */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2vw, 2rem) clamp(0.9rem, 1.6vw, 1.6rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; }

/* ---------- Tarjeta de obra (= .work) ---------- */
.woocommerce ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  display: flex;
  flex-direction: column;
  text-align: left;
  background: transparent;
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: block;
}
/* Imagen recortada a 4/5 como .work__media (alturas uniformes) */
.woocommerce ul.products li.product img {
  margin: 0 0 1rem;
  width: 100%;
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
  background: var(--stone);
  transition: transform 1.8s var(--ease);
}
.woocommerce ul.products li.product:hover img { transform: scale(1.04); }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1rem, 1.3vw, 1.35rem);
  line-height: 1.25;
  letter-spacing: -0.008em;
  color: var(--ink);
  padding: 0;
  margin: 0 0 0.35rem;
}
/* La técnica (short description / atributo) bajo el título */
.woocommerce ul.products li.product .mns-tecnica {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---------- Cabecera del archivo de tienda ---------- */
.woocommerce-products-header__title,
.woocommerce .page-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

/* ---------- Ficha de obra (single product) ----------
   El detalle de producto lo gestiona una plantilla de Elementor Pro Theme Builder
   ("Producto único", tipo de documento `product`). Hello Elementor encaja el contenido
   del single en `main.site-main` (tope de ancho del kit); aquí lo LIBERAMOS para que la
   plantilla Elementor (hero a sangre, etc.) ocupe todo el ancho —igual que las páginas
   Elementor—. El header es fijo (full-width) y el footer/secciones boxed centran su
   propio inner, así que quedan bien. */
body.single-product { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
body.single-product .content-area,
body.single-product .site-main,
body.single-product main.site-main { max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
.mns-solicitar { margin-top: 1.5rem; }

/* --- Contenido del detalle (artista, ficha técnica, descripción) como obra.html --- */
/* Artista (categoría): enlace pequeño en mayúsculas olivo, sin la etiqueta "Categoría:". */
.mns-obra-detail .product_meta { margin: 0 0 1.5rem; font-size: 0; }
.mns-obra-detail .product_meta .posted_in { font-size: 0; }
.mns-obra-detail .product_meta a {
  font-family: var(--font-body); font-size: 0.7rem; font-weight: 400;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--olive); text-decoration: none;
}
.mns-obra-detail .product_meta a:hover { color: var(--olive-deep); }
/* Título de la obra a la escala de la muestra (.work-detail__title). */
.mns-obra-detail .product_title {
  font-size: clamp(2rem, 3.4vw, 3.2rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.015em;
  margin: 0.3rem 0 1.5rem !important;
}
/* Ficha técnica (tabla de atributos) como la lista de datos de la muestra:
   líneas finas, sin el fondo gris a rayas ni la cursiva de WooCommerce. */
.mns-obra-detail .woocommerce-product-additional-information h2,
.mns-obra-detail .elementor-widget-woocommerce-product-additional-information h2 { display: none; }
.mns-obra-detail .shop_attributes { width: 100%; border: 0; margin: 2.4rem 0; border-collapse: collapse; background: transparent; }
.mns-obra-detail .shop_attributes tr { border-top: 1px solid var(--line); background: transparent !important; }
.mns-obra-detail .shop_attributes th,
.mns-obra-detail .shop_attributes td { background: transparent !important; border: 0 !important; padding-top: 1rem !important; padding-bottom: 1rem !important; vertical-align: baseline; }
.mns-obra-detail .shop_attributes th {
  width: 11rem; padding-left: 0; padding-right: 1rem; text-align: left;
  font-family: var(--font-body); font-size: 0.66rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--olive);
}
/* Pesos: etiqueta Inter LIGERA (no la negrita 700 que mete WooCommerce) y valor
   Playfair regular, igual que la muestra (body Inter 300). */
body.single-product .mns-obra-detail .shop_attributes th { font-weight: 300 !important; }
.mns-obra-detail .shop_attributes td { padding-left: 0; padding-right: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1rem, 1.3vw, 1.2rem); color: var(--ink); }
body.single-product .mns-obra-detail .shop_attributes td,
body.single-product .mns-obra-detail .shop_attributes td p { font-style: normal !important; margin: 0; }
/* Descripción con la tipografía del sitio (no la Roboto gris del kit). */
.mns-obra-detail .elementor-widget-woocommerce-product-content,
.mns-obra-detail .elementor-widget-woocommerce-product-content p {
  font-family: var(--font-body); font-size: 1rem; line-height: 1.75; color: var(--ink-soft);
}
.mns-obra-detail .elementor-widget-woocommerce-product-content p { margin: 0 0 1rem; }
/* Imagen del producto en la plantilla Elementor: sin las hojas por defecto de
   WooCommerce la <img> de la galería colapsa, así que la forzamos a ancho completo. */
.mns-obra-detail .woocommerce-product-gallery { width: 100% !important; margin: 0; float: none; }
.mns-obra-detail .woocommerce-product-gallery__wrapper { margin: 0; }
.mns-obra-detail .woocommerce-product-gallery__image > a,
.mns-obra-detail .woocommerce-product-gallery__image img,
.mns-obra-detail .woocommerce-product-gallery img.wp-post-image { display: block; width: 100%; height: auto; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .woocommerce ul.products { grid-template-columns: 1fr; }
}