/* =========================================================
   Imaginaria Woo — shop.css (DEPURADO + FIX GRID FANTASMA)
   - Base tokens + componentes
   - Shell Woo + layout
   - Shop grid estable (sin ::before/::after)
   - Cart CTA
   - Checkout SINGLE COLUMN (digital-first)
   ========================================================= */

/* === Tokens === */
:root{
  --im-bg: #0b0c0f;
  --im-surface: rgba(20, 20, 24, 0.85);
  --im-border: rgba(255,255,255,0.10);
  --im-text: rgba(255,255,255,0.92);
  --im-muted: rgba(255,255,255,0.70);
  --im-accent: #b58b2a;
  --im-accent-2: #d6b15a;
  --im-radius: 14px;
}

/* =========================================================
   Base Woo (tipografía, links, cards)
   ========================================================= */
.woocommerce,
.woocommerce-page{
  color: var(--im-text);
}

.woocommerce a{
  color: var(--im-accent-2);
  text-decoration: none;
}
.woocommerce a:hover{ color: var(--im-accent); }

/* Cards / contenedores principales */
/*.woocommerce .woocommerce-notices-wrapper,*/
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info,
.woocommerce .product,
.woocommerce .cart-collaterals,
.woocommerce form.checkout,
.woocommerce form.woocommerce-cart-form,
.woocommerce .woocommerce-MyAccount-content{
  background: var(--im-surface);
  border: 1px solid var(--im-border);
  border-radius: var(--im-radius);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* Notices */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info{
  padding: 14px 16px;
  margin: 0 0 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
}

/* Botones */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit{
  background: transparent;
  color: var(--im-accent-2);
  border: 1px solid rgba(181,139,42,0.55);
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 600;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{
  background: rgba(181,139,42,0.10);
  border-color: rgba(214,177,90,0.85);
  transform: translateY(-1px);
}

/* Inputs / selects */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="password"],
.woocommerce input[type="tel"],
.woocommerce textarea,
.woocommerce select{
  background: rgba(0,0,0,0.35);
  color: var(--im-text);
  border: 1px solid var(--im-border);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
}

.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus{
  border-color: rgba(214,177,90,0.75);
  box-shadow: 0 0 0 3px rgba(181,139,42,0.18);
}

/* Tablas */
.woocommerce table.shop_table{
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--im-border);
  border-radius: var(--im-radius);
  overflow: hidden;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Precio */
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  color: var(--im-accent-2);
  font-weight: 700;
}

/* Evitar que reglas globales de imágenes del tema rompan miniaturas Woo */
body.woocommerce-page .entry-content img{
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
}

/* =========================================================
   Woo Shell + Layout (wrapper unificado)
   ========================================================= */
.im-woo-shell{
  padding: 34px 0 60px;
}

.im-woo-container{
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

body.woocommerce-page .im-woo-container .woocommerce{
  background: var(--im-surface);
  border: 1px solid var(--im-border);
  border-radius: var(--im-radius);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  padding: 18px;
}

/* Woo completo: sin sidebar */
body.woocommerce #secondary,
body.woocommerce-page #secondary{
  display: none !important;
}
body.woocommerce #primary,
body.woocommerce-page #primary{
  width: 100% !important;
  max-width: 1200px;
  margin: 0 auto;
  float: none;
}
body.woocommerce .site-content,
body.woocommerce-page .site-content{
  padding-left: 20px;
  padding-right: 20px;
}

/* =========================================================
   TIENDA (SHOP + CATEGORÍAS) — “Galería premium editorial”
   Alcance: SOLO dentro de .imaginaria-shop (wrapper PHP)
   ========================================================= */

.imaginaria-shop{
  width: 100%;
}

.imaginaria-shop__inner{
  width: min(980px, 100%);
  margin: 0 auto;
  padding: 6px 0 0;
}

/* Si el theme mete pseudo-elementos/clearfix, los anulamos aquí sin guerra global */
.imaginaria-shop ul.products::before,
.imaginaria-shop ul.products::after{
  content: none;
  display: none;
}

/* Grid */
.imaginaria-shop ul.products{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Responsive */
@media (max-width: 1024px){
  .imaginaria-shop ul.products{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px){
  .imaginaria-shop ul.products{
    grid-template-columns: 1fr;
  }
}

/* Tarjeta producto */
.imaginaria-shop ul.products li.product{
  float: none;
  width: auto;
  margin: 0;
  padding: 14px 14px 16px;
  position: relative;
  overflow: hidden;

  background: var(--im-surface);
  border: 1px solid var(--im-border);
  border-radius: var(--im-radius);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);

  transition: transform .12s ease, border-color .12s ease;
}

.imaginaria-shop ul.products li.product:hover{
  transform: translateY(-1px);
  border-color: rgba(214,177,90,0.35);
}

/* Imagen */
.imaginaria-shop ul.products li.product img{
  width: 100%;
  height: auto;
  display: block;

  border-radius: 12px;
  margin: 0 0 12px;

  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.25);
}

/* Título */
.imaginaria-shop ul.products li.product .woocommerce-loop-product__title{
  margin: 0 0 8px;
  color: var(--im-text);
  font-size: 16px;
  line-height: 1.25;
}

/* Precio */
.imaginaria-shop ul.products li.product .price{
  margin: 0 0 12px;
  color: var(--im-accent-2);
  font-weight: 700;
}

/* Botón (CTA) */
.imaginaria-shop ul.products li.product a.button{
  position: static;
  display: inline-flex;
  justify-content: center;
  align-items: center;

  width: 100%;
  margin: 0;

  box-sizing: border-box;
  text-align: center;
  padding: 12px 16px;

  border-radius: 999px;
  background: rgba(181,139,42,0.10);
  border: 1px solid rgba(181,139,42,0.55);
  color: var(--im-accent-2);
}

.imaginaria-shop ul.products li.product a.button:hover{
  background: rgba(181,139,42,0.16);
  border-color: rgba(214,177,90,0.85);
}

.imaginaria-shop ul.products li.product a.button::after{
  display: none;
}
/* ============================
   TIENDA: Grid premium (solo shop/tax)
   ============================ */
body.post-type-archive-product .imaginaria-shop__inner,
body.tax-product_cat .imaginaria-shop__inner{
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

/* Grid auto-ajustable: tarjetas con ancho mínimo real */
body.post-type-archive-product .imaginaria-shop ul.products,
body.tax-product_cat .imaginaria-shop ul.products{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Tarjeta: tipografía y aire */
body.post-type-archive-product .imaginaria-shop ul.products li.product,
body.tax-product_cat .imaginaria-shop ul.products li.product{
  padding: 16px;
}

/* Imagen: consistente y “editorial” */
body.post-type-archive-product .imaginaria-shop ul.products li.product img,
body.tax-product_cat .imaginaria-shop ul.products li.product img{
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Título: evita el “totem” */
body.post-type-archive-product .imaginaria-shop .woocommerce-loop-product__title,
body.tax-product_cat .imaginaria-shop .woocommerce-loop-product__title{
  font-size: 15px;
  line-height: 1.25;
  margin-bottom: 10px !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.25em * 2);
}
/* ==========================
   TIENDA: tarjetas más grandes (2–3 columnas)
   ========================== */

/* Contenedor tienda: un poco más ancho */
body.post-type-archive-product .woocommerce,
body.tax-product_cat .woocommerce{
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Grid: tarjetas con ancho mínimo grande */
body.post-type-archive-product ul.products,
body.tax-product_cat ul.products{
  display: grid !important;

  /* ↑ subimos el mínimo: tarjetas más anchas */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;

  gap: 26px !important;
  justify-content: center !important;
  justify-items: stretch;
}

/* Desktop: preferimos 3 columnas si caben; si no, 2 */
@media (min-width: 1100px){
  body.post-type-archive-product ul.products,
  body.tax-product_cat ul.products{
    grid-template-columns: repeat(3, minmax(320px, 1fr)) !important;
  }
}
@media (max-width: 1099px){
  body.post-type-archive-product ul.products,
  body.tax-product_cat ul.products{
    grid-template-columns: repeat(2, minmax(300px, 1fr)) !important;
  }
}
@media (max-width: 680px){
  body.post-type-archive-product ul.products,
  body.tax-product_cat ul.products{
    grid-template-columns: 1fr !important;
  }
}
/* Imagen más protagonista y tarjeta menos alta */
body.post-type-archive-product ul.products li.product a img,
body.tax-product_cat ul.products li.product a img{
  margin-bottom: 14px !important;
}

/* Botón menos dominante */
body.post-type-archive-product ul.products li.product a.button,
body.tax-product_cat ul.products li.product a.button{
  padding: 10px 14px !important;
  font-size: 14px !important;
}
/* ==========================
   TIENDA: título arriba, grid debajo (no en paralelo)
   ========================== */
body.post-type-archive-product .woocommerce,
body.tax-product_cat .woocommerce{
  display: block !important;
}

/* El título/header de la tienda debe ocupar toda la fila */
body.post-type-archive-product .woocommerce-products-header,
body.tax-product_cat .woocommerce-products-header,
body.post-type-archive-product .page-header,
body.tax-product_cat .page-header,
body.post-type-archive-product h1.page-title,
body.tax-product_cat h1.page-title{
  width: 100% !important;
  display: block !important;
  float: none !important;
  clear: both !important;
  margin-bottom: 18px !important;
}

/* El loop SIEMPRE debajo del título */
body.post-type-archive-product .imaginaria-shop,
body.tax-product_cat .imaginaria-shop{
  width: 100% !important;
  display: block !important;
  float: none !important;
  clear: both !important;
}

/* Asegura que el UL arranca debajo, aunque haya floats del theme */
body.post-type-archive-product ul.products,
body.tax-product_cat ul.products{
  clear: both !important;
}/* ==========================
   TIENDA: grid ancho tipo catálogo
   ========================== */
body.post-type-archive-product ul.products,
body.tax-product_cat ul.products{
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
  gap: 26px !important;
  justify-content: start !important; /* ya no hace falta centrar si el título va arriba */
}

/* En desktop grande: 3 columnas “premium” reales */
@media (min-width: 1200px){
  body.post-type-archive-product ul.products,
  body.tax-product_cat ul.products{
    grid-template-columns: repeat(3, minmax(340px, 1fr)) !important;
  }
}
/* =========================================================
   TIENDA: forzar layout vertical (título arriba, grid debajo)
   Funciona aunque el theme use FLEX para el contenido.
   ========================================================= */

body.post-type-archive-product #primary,
body.tax-product_cat #primary,
body.post-type-archive-product #main,
body.tax-product_cat #main,
body.post-type-archive-product .site-main,
body.tax-product_cat .site-main{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

/* Título de la página Tienda (del theme) arriba y a 100% */
body.post-type-archive-product .entry-header,
body.tax-product_cat .entry-header,
body.post-type-archive-product .entry-title,
body.tax-product_cat .entry-title{
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  order: 0 !important;
  margin-bottom: 18px !important;
}

/* Woo debajo y a 100% */
body.post-type-archive-product .woocommerce,
body.tax-product_cat .woocommerce{
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;
  order: 1 !important;
}

/* Grid ancho y consistente */
body.post-type-archive-product ul.products,
body.tax-product_cat ul.products{
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
  gap: 26px !important;
  justify-content: start !important;
}
@media (min-width: 1200px){
  body.post-type-archive-product ul.products,
  body.tax-product_cat ul.products{
    grid-template-columns: repeat(3, minmax(340px, 1fr)) !important;
  }
}
/* ==========================
   TIENDA – Tarjetas más grandes
   ========================== */

/* Grid con tarjetas más anchas */
body.post-type-archive-product ul.products,
body.tax-product_cat ul.products{
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)) !important;
  gap: 40px !important;
}

/* En desktop grande forzamos 2 o 3 columnas grandes */
@media (min-width: 1200px){
  body.post-type-archive-product ul.products,
  body.tax-product_cat ul.products{
    grid-template-columns: repeat(3, minmax(380px, 1fr)) !important;
  }
}

@media (max-width: 1199px){
  body.post-type-archive-product ul.products,
  body.tax-product_cat ul.products{
    grid-template-columns: repeat(2, minmax(380px, 1fr)) !important;
  }
}
/* ==========================
   TIENDA – Tarjetas MÁS GRANDES (override ganador)
   ========================== */

/* Fuerza el grid de Woo aunque tenga clases tipo columns-3 */
body.post-type-archive-product .woocommerce ul.products,
body.post-type-archive-product .woocommerce ul.products.columns-1,
body.post-type-archive-product .woocommerce ul.products.columns-2,
body.post-type-archive-product .woocommerce ul.products.columns-3,
body.post-type-archive-product .woocommerce ul.products.columns-4,
body.tax-product_cat .woocommerce ul.products,
body.tax-product_cat .woocommerce ul.products.columns-1,
body.tax-product_cat .woocommerce ul.products.columns-2,
body.tax-product_cat .woocommerce ul.products.columns-3,
body.tax-product_cat .woocommerce ul.products.columns-4{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(420px, 1fr)) !important; /* <- aquí crecen de verdad */
  gap: 40px !important;
}

/* Si tu theme fuerza width/floats en cada li.product, lo neutralizamos */
body.post-type-archive-product .woocommerce ul.products li.product,
body.tax-product_cat .woocommerce ul.products li.product{
  float: none !important;
  width: auto !important;
}
/* =========================================================
   TIENDA — TARJETAS GRANDES (forzar sobre .columns-3)
   Solo afecta al loop de productos del archive/categorías
   ========================================================= */

body.post-type-archive-product .woocommerce ul.products.products.columns-3,
body.tax-product_cat .woocommerce ul.products.products.columns-3{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(420px, 1fr)) !important;
  gap: 40px !important;
  justify-content: start !important;
}

/* Evita que el theme limite el ancho de cada tarjeta */
body.post-type-archive-product .woocommerce ul.products.products.columns-3 > li.product,
body.tax-product_cat .woocommerce ul.products.products.columns-3 > li.product{
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  float: none !important;
}

/* En móvil 1 columna */
@media (max-width: 900px){
  body.post-type-archive-product .woocommerce ul.products.products.columns-3,
  body.tax-product_cat .woocommerce ul.products.products.columns-3{
    grid-template-columns: 1fr !important;
  }
}
/* Checkout: si el carrito es 100% digital, ocultar campos no necesarios */
body.im-cart-digital-only.woocommerce-checkout #billing_company_field,
body.im-cart-digital-only.woocommerce-checkout #billing_phone_field,
body.im-cart-digital-only.woocommerce-checkout #billing_address_1_field,
body.im-cart-digital-only.woocommerce-checkout #billing_address_2_field,
body.im-cart-digital-only.woocommerce-checkout #billing_city_field,
body.im-cart-digital-only.woocommerce-checkout #billing_postcode_field,
body.im-cart-digital-only.woocommerce-checkout #billing_state_field,
body.im-cart-digital-only.woocommerce-checkout #billing_country_field{
  display: none !important;
}
/* =========================================================
   TIENDA — TARJETAS GRANDES (solo shop / categorías)
   ========================================================= */

body.post-type-archive-product ul.products,
body.tax-product_cat ul.products{
  /* grid galería */
  display: grid !important;
  grid-template-columns: repeat(3, minmax(320px, 1fr)) !important;
  gap: 28px !important;
  align-items: stretch !important;
  justify-content: start !important;
  margin-top: 18px !important;
}

/* Ajuste responsive */
@media (max-width: 1100px){
  body.post-type-archive-product ul.products,
  body.tax-product_cat ul.products{
    grid-template-columns: repeat(2, minmax(300px, 1fr)) !important;
  }
}
@media (max-width: 720px){
  body.post-type-archive-product ul.products,
  body.tax-product_cat ul.products{
    grid-template-columns: 1fr !important;
  }
}

/* El tema suele “encoger” el li.product. Lo anulamos. */
body.post-type-archive-product ul.products li.product,
body.tax-product_cat ul.products li.product{
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 22px 22px 18px !important;
}

/* Hacer la tarjeta MÁS alta/visual */
body.post-type-archive-product ul.products li.product a img,
body.tax-product_cat ul.products li.product a img{
  width: 100% !important;
  height: auto !important;
  border-radius: 16px !important;
  margin: 0 0 16px !important;
}

/* Tipografía más “seria” */
body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title,
body.tax-product_cat ul.products li.product .woocommerce-loop-product__title{
  font-size: 18px !important;
  line-height: 1.25 !important;
  margin: 0 0 10px !important;
}

body.post-type-archive-product ul.products li.product .price,
body.tax-product_cat ul.products li.product .price{
  font-size: 16px !important;
  margin: 0 0 14px !important;
}

/* CTA más contundente */
body.post-type-archive-product ul.products li.product a.button,
body.tax-product_cat ul.products li.product a.button{
  padding: 14px 18px !important;
  font-size: 14px !important;
  letter-spacing: .2px;
}

/* Centrar el bloque tienda bajo el título y que no quede raro el layout */
body.post-type-archive-product .woocommerce,
body.tax-product_cat .woocommerce{
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* =========================================================
   TIENDA — FIX: que NO se pisen las tarjetas
   ========================================================= */

body.post-type-archive-product ul.products,
body.tax-product_cat ul.products{
  gap: 32px !important;           /* separa más */
  align-content: start !important;
}

/* Woo/tema: elimina márgenes/floats que rompen el grid */
body.post-type-archive-product ul.products li.product,
body.tax-product_cat ul.products li.product{
  float: none !important;
  clear: none !important;

  /* lo importante: que no arrastre márgenes del loop clásico */
  margin: 0 !important;

  /* evita que “se meta encima” por stacking raro */
  position: relative !important;
  z-index: 0 !important;

  /* que el interior no se salga */
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Si el tema mete márgenes en los enlaces o elementos internos */
body.post-type-archive-product ul.products li.product > *,
body.tax-product_cat ul.products li.product > *{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Imagen: evita que se desborde o cree layout raro */
body.post-type-archive-product ul.products li.product a img,
body.tax-product_cat ul.products li.product a img{
  display: block !important;
  max-width: 100% !important;
}
body.post-type-archive-product ul.products li.product,
body.tax-product_cat ul.products li.product{
  display: flex;
  flex-direction: column;
}

body.post-type-archive-product ul.products li.product a.button,
body.tax-product_cat ul.products li.product a.button{
  margin-top: auto !important;
}
body.post-type-archive-product ul.products li.product a img,
body.tax-product_cat ul.products li.product a img{
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.imaginaria-shop__inner{
  margin-top: 20px;
}
.im-menu-cart a{
  border: 1px solid rgba(181,139,42,0.35);
  padding: 8px 12px;
  border-radius: 999px;
}
.im-menu-cart a:hover{
  border-color: rgba(214,177,90,0.85);
  background: rgba(181,139,42,0.10);
}