/* ==========================================================================
   MÁXIMA — estilos mx2 para páginas, tienda y ficha de producto (WooCommerce)
   Usa las variables --mx-* definidas en maxima.css
   ========================================================================== */

/* ---- Contenedor / páginas de contenido (legales, sobre nosotros, contacto) ---- */
.mx2-page { padding: 48px 0 72px; background: var(--mx-bg-soft); }
.mx2-page-inner { max-width: 860px; }
.mx2-page-title {
  font-family: var(--mx-font-display); font-weight: 800; font-size: 34px;
  color: var(--mx-text); margin: 0 0 24px; line-height: 1.2; text-transform: none;
}
.mx2-page-content { background:#fff; border:1px solid var(--mx-border); border-radius: var(--mx-radius-lg); padding: 32px 36px; box-shadow: var(--mx-shadow-sm); }
.mx2-page-content h2 { font-family: var(--mx-font-display); font-size: 22px; color: var(--mx-text); margin: 28px 0 12px; }
.mx2-page-content h3 { font-family: var(--mx-font-display); font-size: 18px; color: var(--mx-text); margin: 22px 0 10px; }
.mx2-page-content p, .mx2-page-content li { font-size: 15px; line-height: 1.7; color: var(--mx-text-soft); }
.mx2-page-content a { color: var(--mx-primary); font-weight: 600; }
.mx2-page-content ul, .mx2-page-content ol { padding-left: 22px; margin: 12px 0; }
@media (max-width: 768px){ .mx2-page-content { padding: 22px; } .mx2-page-title { font-size: 26px; } }

/* ---- Tienda / catálogo WooCommerce ---- */
.mx2-shop { padding: 40px 0 72px; background: var(--mx-bg-soft); }
.mx2-shop .woocommerce-products-header__title,
.mx2-shop h1.page-title { font-family: var(--mx-font-display); font-weight: 800; font-size: 32px; color: var(--mx-text); margin-bottom: 20px; text-transform: none; }
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { color: var(--mx-text-mute); font-size: 14px; }

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background:#fff; border:1px solid var(--mx-border); border-radius: var(--mx-radius-lg);
  padding: 16px; box-shadow: var(--mx-shadow-sm); transition: all .22s; text-align: left;
}
.woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(249,112,102,.15); border-color: var(--mx-primary-light); }
.woocommerce ul.products li.product a img { border-radius: 10px; background: var(--mx-bg-mute); margin-bottom: 12px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--mx-font-display); font-size: 15px; font-weight: 600; color: var(--mx-text);
  padding: 0; line-height: 1.35; text-transform: none;
}
.woocommerce ul.products li.product .price { color: var(--mx-primary)!important; font-family: var(--mx-font-display); font-weight: 800; font-size: 18px; }
.woocommerce ul.products li.product .price del { color: var(--mx-text-mute); font-weight: 500; font-size: 14px; }
.woocommerce span.onsale {
  background: var(--mx-mint); color:#fff; border-radius: 100px; font-family: var(--mx-font-display);
  font-weight: 700; min-height: auto; min-width: auto; padding: 4px 12px; top: 10px; left: 10px;
}

/* Botones WooCommerce -> estilo mx2 coral */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt {
  background: var(--mx-primary); color:#fff; border-radius: 100px; font-family: var(--mx-font-display);
  font-weight: 600; padding: 11px 22px; transition: all .2s; border: none;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--mx-primary-dark); transform: translateY(-1px); }

/* ---- Ficha de producto ---- */
.single-product .mx2-shop { background:#fff; }
.woocommerce div.product .product_title {
  font-family: var(--mx-font-display); font-weight: 800; font-size: 30px; color: var(--mx-text);
  line-height: 1.25; margin-bottom: 14px; text-transform: none;
}
.woocommerce div.product p.price, .woocommerce div.product span.price {
  color: var(--mx-primary); font-family: var(--mx-font-display); font-weight: 800; font-size: 30px;
}
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--mx-text-soft); font-size: 15px; line-height: 1.7; }
.woocommerce div.product form.cart { margin-top: 20px; }
.woocommerce div.product form.cart .quantity input.qty {
  border:1.5px solid var(--mx-border-strong); border-radius: 10px; padding: 10px; height: auto; width: 72px;
}
.woocommerce div.product form.cart .single_add_to_cart_button {
  padding: 14px 30px; font-size: 15px; border-radius: 100px; box-shadow: var(--mx-shadow-coral);
}
.woocommerce .woocommerce-product-gallery { border:1px solid var(--mx-border); border-radius: var(--mx-radius-lg); padding: 12px; background:#fff; }
.woocommerce div.product .woocommerce-tabs ul.tabs { border:none; padding: 0; margin-bottom: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: var(--mx-bg-mute); border:1px solid var(--mx-border); border-radius: 10px 10px 0 0; margin: 0 4px 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a { font-family: var(--mx-font-display); font-weight: 600; color: var(--mx-text-soft); text-transform: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background:#fff; border-bottom-color:#fff; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--mx-primary); }
.woocommerce div.product .woocommerce-tabs .panel {
  border:1px solid var(--mx-border); border-radius: 0 var(--mx-radius) var(--mx-radius) var(--mx-radius);
  padding: 24px; color: var(--mx-text-soft); line-height: 1.7;
}

/* Avisos WooCommerce con color de marca */
.woocommerce-message, .woocommerce-info { border-top-color: var(--mx-mint); }
.woocommerce-message::before, .woocommerce-info::before { color: var(--mx-mint); }

/* Quitar espaciadores gigantes de la plantilla del tema en tienda/ficha */
.mx2-shop .wp-block-spacer { display: none !important; }

/* Productos relacionados */
.woocommerce .related > h2, .woocommerce .upsells > h2 { font-family: var(--mx-font-display); font-weight: 800; color: var(--mx-text); font-size: 24px; margin-top: 40px; }

/* ---- Desplegable "Categorías" en el menú ---- */
.mx2-nav-dd { position: relative; }
.mx2-nav-dd > .mx2-nav-link { display: inline-flex; align-items: center; }
.mx2-nav-dd-menu {
  position: absolute; top: 100%; left: 0; z-index: 300; display: none;
  background:#fff; border:1px solid var(--mx-border); border-radius: 14px;
  box-shadow: var(--mx-shadow-lg); padding: 16px; margin-top: 2px;
  width: 660px; columns: 3; column-gap: 10px; max-height: 72vh; overflow-y: auto;
}
.mx2-nav-dd:hover .mx2-nav-dd-menu { display: block; }
.mx2-nav-dd-menu a {
  display: block; break-inside: avoid; padding: 7px 10px; border-radius: 8px;
  font-size: 13px; line-height: 1.3; color: var(--mx-text-soft); font-family: var(--mx-font-body); text-transform: none;
}
.mx2-nav-dd-menu a:hover { background: rgba(249,112,102,.1); color: var(--mx-primary); }
@media (max-width: 991px){
  .mx2-nav-dd-menu { position: static; display: block; width: auto; columns: 1; box-shadow: none; border: none; border-radius: 0; padding: 4px 0 8px 14px; max-height: none; }
  .mx2-nav-dd { width: 100%; }
}