/* =============================================================
   WOOCOMMERCE.CSS — Overrides de estilos de WooCommerce
   Adapta los componentes de WC a la identidad de Gran Almazara.

   ÍNDICE:
   01. Grid de productos
   02. Tarjeta de producto (loop)
   03. Badges y etiquetas
   04. Botón Añadir al carrito
   05. Página de producto individual
   06. Carrito
   07. Checkout
   08. Página Mi cuenta
   09. Mensajes y notificaciones
   ============================================================= */


/* =============================================================
   01. GRID DE PRODUCTOS
   ============================================================= */

/* Sobreescribir el grid por defecto de WooCommerce */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--ga-space-md) !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Grid de 4 columnas para productos destacados */
.ga-productos-destacados .woocommerce ul.products {
    grid-template-columns: repeat(4, 1fr) !important;
}

/* En archive/tienda, mantener 3 columnas */
.ga-main--tienda .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
}


/* =============================================================
   02. TARJETA DE PRODUCTO (loop)
   ============================================================= */

.woocommerce ul.products li.product {
    background-color: var(--ga-blanco);
    border-radius: 0 !important;
    overflow: hidden;
    box-shadow: var(--ga-shadow-sm);
    transition: box-shadow var(--ga-transition-normal), transform var(--ga-transition-normal);
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce ul.products li.product:hover {
    box-shadow: var(--ga-shadow-lg);
    transform: translateY(-4px);
}

/* Imagen del producto */
.woocommerce ul.products li.product a img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    transition: transform var(--ga-transition-slow);
    margin: 0 !important;
}

.woocommerce ul.products li.product:hover a img {
    transform: scale(1.05);
}

.woocommerce ul.products li.product .woocommerce-loop-product__link {
    display: block;
    overflow: hidden;
}

/* Contenido de la tarjeta */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
    font-family: var(--ga-font-display) !important;
    font-size: var(--ga-text-lg) !important;
    font-weight: var(--ga-weight-bold) !important;
    color: var(--ga-verde-oliva-oscuro) !important;
    padding: var(--ga-space-md) var(--ga-space-md) var(--ga-space-xs) !important;
    margin: 0 !important;
    line-height: 1.3;
}

/* Precio */
.woocommerce ul.products li.product .price {
    font-family: var(--ga-font-display) !important;
    font-size: var(--ga-text-xl) !important;
    font-weight: var(--ga-weight-bold) !important;
    color: var(--ga-verde-oliva-oscuro) !important;
    padding: 0 var(--ga-space-md) var(--ga-space-md) !important;
    display: block;
}

.woocommerce ul.products li.product .price del {
    color: rgba(74, 74, 47, 0.4) !important;
    font-size: var(--ga-text-base) !important;
}

.woocommerce ul.products li.product .price ins {
    text-decoration: none !important;
    color: var(--ga-naranja-apagado) !important;
}

/* Estrellas de valoración */
.woocommerce .star-rating {
    color: var(--ga-naranja-apagado) !important;
    font-size: 0.85em !important;
    padding: 0 var(--ga-space-md) !important;
}


/* =============================================================
   03. BADGES Y ETIQUETAS
   ============================================================= */

/* Badge "OFERTA" */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
    background-color: var(--ga-naranja-apagado) !important;
    color: var(--ga-blanco) !important;
    font-family: var(--ga-font-body) !important;
    font-size: var(--ga-text-xs) !important;
    font-weight: var(--ga-weight-medium) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    padding: 5px 12px !important;
    min-height: auto !important;
    min-width: auto !important;
    line-height: 1.4 !important;
    top: var(--ga-space-sm) !important;
    left: var(--ga-space-sm) !important;
    right: auto !important;
}

/* Badge "NUEVO" */
.woocommerce ul.products li.product.new .onsale {
    background-color: var(--ga-verde-oliva-oscuro) !important;
}


/* =============================================================
   04. BOTÓN AÑADIR AL CARRITO
   ============================================================= */

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button {
    display: block !important;
    width: calc(100% - 2 * var(--ga-space-md)) !important;
    margin: 0 var(--ga-space-md) var(--ga-space-md) !important;
    background-color: var(--ga-verde-oliva-oscuro) !important;
    color: var(--ga-blanco) !important;
    font-family: var(--ga-font-body) !important;
    font-size: var(--ga-text-xs) !important;
    font-weight: var(--ga-weight-medium) !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding: 0.75rem var(--ga-space-md) !important;
    border-radius: 0 !important;
    border: 2px solid var(--ga-verde-oliva-oscuro) !important;
    text-align: center !important;
    transition: all var(--ga-transition-normal) !important;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button:hover {
    background-color: var(--ga-naranja-apagado) !important;
    border-color: var(--ga-naranja-apagado) !important;
    color: var(--ga-blanco) !important;
}

/* Botón principal en página de producto individual */
.woocommerce .single_add_to_cart_button,
.woocommerce button.button.alt {
    background-color: var(--ga-naranja-apagado) !important;
    color: var(--ga-blanco) !important;
    font-family: var(--ga-font-body) !important;
    font-size: var(--ga-text-sm) !important;
    font-weight: var(--ga-weight-medium) !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding: 1rem 2.5rem !important;
    border-radius: 0 !important;
    border: 2px solid var(--ga-naranja-apagado) !important;
    transition: all var(--ga-transition-normal) !important;
}

.woocommerce .single_add_to_cart_button:hover,
.woocommerce button.button.alt:hover {
    background-color: var(--ga-verde-oliva-oscuro) !important;
    border-color: var(--ga-verde-oliva-oscuro) !important;
}


/* =============================================================
   05. PÁGINA DE PRODUCTO INDIVIDUAL
   ============================================================= */

/* Título del producto */
.woocommerce div.product .product_title {
    font-family: var(--ga-font-display) !important;
    font-size: var(--ga-text-5xl) !important;
    font-weight: var(--ga-weight-bold) !important;
    color: var(--ga-verde-oliva-oscuro) !important;
    line-height: 1.1 !important;
    margin-bottom: var(--ga-space-sm) !important;
}

/* Precio en producto individual */
.woocommerce div.product .price {
    font-family: var(--ga-font-display) !important;
    font-size: var(--ga-text-4xl) !important;
    font-weight: var(--ga-weight-bold) !important;
    color: var(--ga-verde-oliva-oscuro) !important;
    margin-bottom: var(--ga-space-md) !important;
}

/* Descripción del producto */
.woocommerce div.product .woocommerce-product-details__short-description {
    font-size: var(--ga-text-lg) !important;
    line-height: 1.8 !important;
    color: rgba(74, 74, 47, 0.8) !important;
    margin-bottom: var(--ga-space-lg) !important;
    border-left: 3px solid var(--ga-naranja-apagado);
    padding-left: var(--ga-space-md);
}


/* =============================================================
   06. CARRITO
   ============================================================= */

/* Tabla del carrito */
.woocommerce-cart table.cart td,
.woocommerce-cart table.cart th {
    border-color: rgba(74, 74, 47, 0.1) !important;
    padding: var(--ga-space-md) !important;
}

.woocommerce-cart table.cart th {
    font-family: var(--ga-font-body) !important;
    font-size: var(--ga-text-xs) !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: rgba(74, 74, 47, 0.6) !important;
    font-weight: var(--ga-weight-medium) !important;
}

/* Nombre del producto en carrito */
.woocommerce-cart table.cart .cart_item .product-name a {
    font-family: var(--ga-font-display) !important;
    font-size: var(--ga-text-lg) !important;
    font-weight: var(--ga-weight-bold) !important;
    color: var(--ga-verde-oliva-oscuro) !important;
}

/* Totales del carrito */
.woocommerce-cart .cart_totals h2 {
    font-family: var(--ga-font-display) !important;
    font-size: var(--ga-text-3xl) !important;
    color: var(--ga-verde-oliva-oscuro) !important;
    margin-bottom: var(--ga-space-md) !important;
}

/* Botón ir al checkout */
.woocommerce .wc-proceed-to-checkout a.checkout-button {
    background-color: var(--ga-naranja-apagado) !important;
    color: var(--ga-blanco) !important;
    font-family: var(--ga-font-body) !important;
    font-size: var(--ga-text-sm) !important;
    font-weight: var(--ga-weight-medium) !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding: 1rem 2rem !important;
    border-radius: 0 !important;
    width: 100% !important;
    text-align: center !important;
    transition: background-color var(--ga-transition-normal) !important;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
    background-color: var(--ga-verde-oliva-oscuro) !important;
}


/* =============================================================
   07. CHECKOUT
   ============================================================= */

.woocommerce-checkout h3 {
    font-family: var(--ga-font-display) !important;
    font-size: var(--ga-text-2xl) !important;
    color: var(--ga-verde-oliva-oscuro) !important;
    margin-bottom: var(--ga-space-md) !important;
    padding-bottom: var(--ga-space-sm) !important;
    border-bottom: 1px solid rgba(74, 74, 47, 0.1) !important;
}

/* Campos del formulario de checkout
   ═══════════════════════════════════════════════════════════════════════════
   🔴 EL :not([type="checkbox"]) NO ES UN ADORNO: SIN ÉL, LAS CASILLAS SALEN ROTAS.
   Este bloque viste los campos de TEXTO —nombre, correo, dirección…— y por eso da
   relleno, borde recto y tipografía. Pero `input` a secas alcanzaba también a los
   checkbox que WooCommerce mete dentro de un <p class="form-row">, que son casi todos:
   crear cuenta, aceptar términos, guardar el método de pago y "recordarme".

   El daño lo hacía sobre todo el `padding: 0.75rem 1rem`. Con box-sizing: border-box y
   una casilla de 16px, unos rellenos de 12 y 16px no caben dentro: la caja crece hasta
   ~34x26px, deja de ser cuadrada y el tick, que se centra sobre esa caja, se descoloca.
   El `border-radius: 0` le quitaba además las esquinas de marca y el `border` impedía
   que el borde se encendiera en dorado al marcarla.

   👉 La única que se salvaba era "enviar a una dirección distinta", y no por suerte:
      es la única que NO vive en un .form-row —WooCommerce la escribe dentro de un <h3>—.
      Esa diferencia de marcado era toda la explicación.

   ⚠ SE ARREGLA AQUÍ, EN EL ORIGEN, Y NO A BASE DE !important EN main.css. Este archivo
     se carga DESPUÉS de main.css —declara 'gran-almazara-main' como dependencia— y sus
     declaraciones llevan !important, así que desde main.css solo se le puede ganar con
     otro !important. Excluyendo aquí a los checkbox, el aspecto de las casillas tiene un
     único dueño —su bloque de main.css— y no hay ninguna guerra de prioridades.

   ⚠ LOS CAMPOS DE TEXTO NO CAMBIAN NADA: la exclusión solo aparta a los checkbox, que
     nunca debieron entrar en una regla pensada para campos de escribir.

   ⚠ HOY NO HAY NINGÚN RADIO dentro de un .form-row del checkout —comprobado en el HTML
     de la página—, así que no se le añade la exclusión. Si algún día un plugin mete uno,
     le pasará exactamente lo mismo que a los checkbox y este es el sitio.
   ═══════════════════════════════════════════════════════════════════════════ */
.woocommerce-checkout .form-row input:not([type="checkbox"]),
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
    border: 1px solid rgba(74, 74, 47, 0.2) !important;
    border-radius: 0 !important;
    padding: 0.75rem 1rem !important;
    font-family: var(--ga-font-body) !important;
    font-size: var(--ga-text-sm) !important;
    color: var(--ga-verde-oliva-oscuro) !important;
    transition: border-color var(--ga-transition-fast) !important;
}

/* Misma exclusión, y por un motivo aún más concreto: el `outline: none !important` de
   aquí abajo borraba el aro de foco que las casillas necesitan para verse al navegar con
   el teclado. Su foco lo dibuja ahora su propio bloque en main.css. */
.woocommerce-checkout .form-row input:not([type="checkbox"]):focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
    border-color: var(--ga-naranja-apagado) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(199, 168, 98, 0.15) !important;
}

/* Botón realizar pedido */
#place_order {
    background-color: var(--ga-naranja-apagado) !important;
    color: var(--ga-blanco) !important;
    font-family: var(--ga-font-body) !important;
    font-size: var(--ga-text-base) !important;
    font-weight: var(--ga-weight-medium) !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding: 1.125rem 2rem !important;
    border-radius: 0 !important;
    border: none !important;
    width: 100% !important;
    transition: background-color var(--ga-transition-normal) !important;
}

#place_order:hover {
    background-color: var(--ga-verde-oliva-oscuro) !important;
}


/* =============================================================
   08. MENSAJES Y NOTIFICACIONES DE WOOCOMMERCE
   ============================================================= */

.woocommerce-message,
.woocommerce-info {
    background-color: var(--ga-naranja-claro) !important;
    border-top-color: var(--ga-naranja-apagado) !important;
    color: var(--ga-verde-oliva-oscuro) !important;
}

.woocommerce-error {
    background-color: #fff3f3 !important;
    border-top-color: #c0392b !important;
}

.woocommerce-message .button,
.woocommerce-info .button {
    background-color: var(--ga-verde-oliva-oscuro) !important;
    color: var(--ga-blanco) !important;
    border-radius: 0 !important;
    font-family: var(--ga-font-body) !important;
    font-size: var(--ga-text-xs) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
    background-color: var(--ga-naranja-apagado) !important;
}


/* =============================================================
   RESPONSIVE WOOCOMMERCE
   ============================================================= */

@media (max-width: 1024px) {
    .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
    .ga-productos-destacados .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 768px) {
    .woocommerce ul.products { grid-template-columns: 1fr !important; }
    .woocommerce div.product .product_title { font-size: var(--ga-text-3xl) !important; }
}