/* ==========================================================================
   Ivana repair overrides
   --------------------------------------------------------------------------
   Archivo de reparaciones puntuales cargado después del CSS principal.
   No modifica ivana-design.css.
   ========================================================================== */

/* ==========================================================================
   Reparación 2026-07-01: centrar título de colección solo en móvil
   --------------------------------------------------------------------------
   Objetivo visual:
   - Centrar el H1 de la página de colección/categoría en viewport móvil.

   Archivo base afectado:
   - static/css/ivana-design.css

   Referencias relevantes dentro del base:
   - Bloque "Category/page header casing": reglas para
     .ivana-category-header, .ivana-category-copy, .ivana-category-title
     y .ivana-category-meta.
   - Bloque "Collection mobile grid: compact two-column product cards":
     contiene reglas móviles para body.template-category y grilla de productos.
   - Bloque final móvil del base:
     .ivana-category-heading, .ivana-category-copy,
     .ivana-category-title-block, .ivana-category-title.

   Motivo del override:
   - El base tiene reglas parciales de centrado, pero no fuerza el contenedor
     completo ni el row interno del título.
   - Este override se carga después del base y gana por cascada.
   ========================================================================== */
@media (max-width: 767px) {
  body.template-category .ivana-category-header,
  body.template-category .ivana-category-heading,
  body.template-category .ivana-category-copy,
  body.template-category .ivana-category-title-row,
  body.template-category .ivana-category-title-block {
    align-items: center !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    justify-items: center !important;
    justify-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
    text-align: center !important;
    width: 100% !important;
  }

  body.template-category .ivana-category-title-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.template-category h1.ivana-category-title,
  body.template-category .ivana-category-title {
    box-sizing: border-box !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
    text-align: center !important;
    width: 100% !important;
  }

  body.template-category .ivana-category-meta {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
    text-align: center !important;
  }
}

/* ==========================================================================
   Reparación 2026-07-01: descripción de producto alineada a la izquierda
   --------------------------------------------------------------------------
   Objetivo visual:
   - Alinear a la izquierda el contenido descriptivo en la página de producto.
   - No modificar título, precio, variantes, botones ni cards relacionadas.

   Archivos base relacionados:
   - templates/product.tpl
   - snipplets/product/product-description.tpl
   - static/css/ivana-design.css

   Referencias relevantes dentro del base:
   - Reglas body.template-product .ivana-product-description-copy,
     body.template-product .ivana-product-description-copy p,
     body.template-product .ivana-product-description-copy li.
   - Reglas body.template-product .ivana-product-description-copy h1-h6.

   Motivo del override:
   - El base centra el copy descriptivo de producto.
   - Esta reparación fuerza alineación izquierda solo dentro de template-product.
   ========================================================================== */
body.template-product .ivana-product-description-copy,
body.template-product .ivana-product-description-copy p,
body.template-product .ivana-product-description-copy li,
body.template-product .ivana-product-description-copy h1,
body.template-product .ivana-product-description-copy h2,
body.template-product .ivana-product-description-copy h3,
body.template-product .ivana-product-description-copy h4,
body.template-product .ivana-product-description-copy h5,
body.template-product .ivana-product-description-copy h6,
body.template-product .product-description,
body.template-product .js-product-description,
body.template-product .ivana-product-description,
body.template-product .user-content {
  text-align: left !important;
}