/*
Theme Name:   Marea Urbana Child
Theme URI:    https://mareaurbana.es
Description:  Tema hijo de Divi para Marea Urbana. Todo el CSS y las funciones propias
              viven aquí, de modo que actualizar Divi nunca se lleve el trabajo por delante.
Author:       Marea Urbana
Template:     Divi
Version:      1.0.1
Text Domain:  marea-child
*/

/* ==========================================================================
   1. Variables de marca
   ========================================================================== */
:root{
  --mu-verde:      #0B6E5F;
  --mu-verde-osc:  #0E2B28;
  --mu-verde-claro:#DCEDE8;
  --mu-acento:     #C4186B;
  --mu-texto:      #14211F;
  --mu-texto-2:    #5A716D;
  --mu-linea:      #DDE5E2;
  --mu-fondo:      #F4F7F5;
  --mu-radio:      12px;
}

/* ==========================================================================
   2. Tienda: rejilla de 2 columnas en móvil
   Divi fuerza 1 columna por debajo de 767px y obliga a hacer el doble de scroll.
   ========================================================================== */
@media (max-width: 767px){
  .woocommerce ul.products[class*="columns-"],
  .et_pb_shop ul.products[class*="columns-"]{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .woocommerce ul.products li.product,
  .et_pb_shop ul.products li.product{
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
  }
  .woocommerce ul.products li.product h2,
  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-size: 14px !important;
    line-height: 1.3;
  }
  .woocommerce ul.products li.product .price{ font-size: 14px !important; }
}

/* ==========================================================================
   3. Ficha de producto
   ========================================================================== */

/* Tallas y colores como botones, no como desplegables.
   Las rellena inc/woocommerce.php; aquí solo se visten. */
.mu-swatches{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 2px; }
.mu-swatch{
  min-width:48px; min-height:44px; padding:0 12px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--mu-linea); border-radius:10px; background:#fff;
  font-size:14px; font-weight:600; color:var(--mu-texto); cursor:pointer;
  transition:border-color .12s, background .12s;
}
.mu-swatch:hover{ border-color:var(--mu-verde); }
.mu-swatch[aria-pressed="true"]{ border-color:var(--mu-verde); background:var(--mu-verde-claro); }
.mu-swatch[disabled]{ opacity:.35; cursor:not-allowed; text-decoration:line-through; }
.mu-swatch--color{ width:44px; padding:0; border-radius:50%; overflow:hidden; }
.mu-swatch--color i{ display:block; width:100%; height:100%; border-radius:50%; }

/* El selector nativo sigue existiendo para que WooCommerce valide, pero se oculta. */
.mu-variations-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* Enlace a la guía de tallas, junto al selector */
.mu-guia-tallas{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; color:var(--mu-verde);
  text-decoration:underline; text-underline-offset:3px; margin-top:4px;
}

/* ==========================================================================
   4. Barra de compra fija en móvil
   El botón "Añadir al carrito" queda muy abajo; esta barra lo trae siempre a mano.
   ========================================================================== */
.mu-barra-compra{
  position:fixed; left:0; right:0; bottom:0; z-index:9998;
  display:none; align-items:center; gap:12px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background:#fff; border-top:1px solid var(--mu-linea);
  box-shadow:0 -8px 28px -16px rgba(14,43,40,.45);
}
.mu-barra-compra.is-visible{ display:flex; }
.mu-barra-compra .mu-bc-precio{
  flex:1; min-width:0; font-size:17px; font-weight:700; color:var(--mu-texto);
  font-variant-numeric:tabular-nums; line-height:1.2;
}
.mu-barra-compra .mu-bc-precio small{ display:block; font-size:11px; font-weight:500; color:var(--mu-texto-2); }
.mu-barra-compra .mu-bc-boton{
  flex:none; min-height:48px; padding:0 22px; border:0; border-radius:var(--mu-radio);
  background:var(--mu-verde); color:#fff; font-size:15px; font-weight:700; cursor:pointer;
}
.mu-barra-compra .mu-bc-boton[disabled]{ background:var(--mu-linea); color:var(--mu-texto-2); cursor:not-allowed; }
@media (min-width: 981px){ .mu-barra-compra{ display:none !important; } }

/* Que la barra no tape el pie */
body.single-product.mu-con-barra{ padding-bottom:76px; }

/* ==========================================================================
   5. Botones de WooCommerce con tamaño de dedo (mínimo 44px)
   ========================================================================== */
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce .single_add_to_cart_button{
  min-height:48px !important;
  border-radius:var(--mu-radio) !important;
  font-weight:700 !important;
}
.woocommerce .quantity input.qty{ min-height:48px; font-size:16px; }

/* ==========================================================================
   6. Señales de confianza bajo el botón de compra
   ========================================================================== */
.mu-confianza{
  list-style:none; margin:18px 0 0; padding:14px 16px;
  background:var(--mu-fondo); border-radius:var(--mu-radio);
  font-size:13.5px; color:var(--mu-texto-2); line-height:1.7;
}
.mu-confianza li{ display:flex; gap:9px; align-items:flex-start; }
.mu-confianza strong{ color:var(--mu-texto); font-weight:600; }