/* ==========================================================================
   ACCEVIX — woocommerce-overrides.css
   Da estilo a las plantillas que WooCommerce renderiza con su propia
   maquetación por defecto (no cubiertas por archive-product.php ni
   content-product.php): producto individual, carrito, checkout y "Mi cuenta".
   Usa las mismas variables definidas en css/accevix.css.
   ========================================================================== */

/* ---- Mensajes del sistema (éxito, error, info) ---- */
.woocommerce-message, .woocommerce-error, .woocommerce-info, .woocommerce-noreviews{
  list-style:none; padding: 14px 18px; border-radius: var(--radio-md);
  background: var(--bg-superficie); border:1px solid var(--borde); border-left: 4px solid var(--azul-electrico);
  margin: 0 0 var(--espacio-4); font-size:0.9rem;
}
.woocommerce-error{ border-left-color: var(--error); }
.woocommerce-message{ border-left-color: var(--exito); }
.woocommerce-message a.button, .woocommerce-error a.button{
  margin-left:10px; display:inline-flex; padding:6px 14px; border-radius: var(--radio-full);
  background: var(--negro); color:#fff; font-size:0.8rem; font-weight:600;
}

/* ---- Botones genéricos de WooCommerce ---- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 13px 26px; border-radius: var(--radio-full); font-weight:700; font-size:0.92rem;
  background: linear-gradient(135deg, var(--azul-electrico), var(--azul-electrico-2)); color:#fff;
  border:none; box-shadow: var(--sombra-md); transition: transform .18s, box-shadow .18s;
}
.woocommerce a.button:hover, .woocommerce button.button:hover{ transform: translateY(-2px); box-shadow: var(--sombra-glow); color:#fff; }
.woocommerce a.button.alt, .woocommerce #payment #place_order{
  background: linear-gradient(135deg, var(--azul-electrico), var(--azul-electrico-2));
}

/* ---- Producto individual ---- */
.woocommerce div.product{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--espacio-6); margin-bottom: var(--espacio-7); }
.woocommerce div.product .woocommerce-product-gallery{ background: var(--bg-superficie-alt); border-radius: var(--radio-lg); overflow:hidden; }
.woocommerce div.product .summary{ padding-top:4px; }
.woocommerce div.product .product_title{ font-family: var(--font-display); font-size:1.8rem; margin-bottom:10px; }
.woocommerce div.product p.price, .woocommerce div.product span.price{
  font-family: var(--font-spec); font-size:1.4rem; font-weight:700; color: var(--azul-electrico);
}
[data-tema="oscuro"] .woocommerce div.product p.price{ color: var(--celeste); }
.woocommerce div.product p.price del{ color: var(--texto-suave); font-size:0.9rem; opacity:0.8; margin-right:8px; }
.woocommerce div.product p.price ins{ text-decoration:none; }
.woocommerce div.product .woocommerce-product-details__short-description{ color: var(--texto-suave); margin: 16px 0; }
.woocommerce div.product form.cart{ display:flex; gap:12px; align-items:center; margin-top: var(--espacio-4); }
.woocommerce div.product .quantity{ display:flex; }
.woocommerce div.product .quantity .qty{
  width:70px; padding:12px; border-radius: var(--radio-sm) 0 0 var(--radio-sm); border:1.5px solid var(--borde); border-right:none;
  background: var(--bg-superficie-alt); text-align:center;
}
.woocommerce div.product .single_add_to_cart_button{ border-radius: var(--radio-full); }
.woocommerce-product-rating{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.woocommerce div.product .stock{ font-size:0.85rem; font-weight:600; color: var(--exito); }
.woocommerce div.product .out-of-stock{ color: var(--error); }

/* Pestañas (Descripción / Info adicional / Valoraciones) */
.woocommerce-tabs ul.tabs{ display:flex; gap:8px; list-style:none; padding:0; border-bottom:1px solid var(--borde); margin: var(--espacio-6) 0 var(--espacio-4); }
.woocommerce-tabs ul.tabs li{ padding:10px 18px; font-weight:600; font-size:0.9rem; cursor:pointer; border-radius: 10px 10px 0 0; }
.woocommerce-tabs ul.tabs li.active{ background: var(--bg-superficie-alt); color: var(--azul-electrico); }
.woocommerce-tabs .panel{ color: var(--texto-suave); line-height:1.7; }

/* Estrellas de valoración */
.star-rating{ color: var(--alerta); font-size:0.95rem; }
.star-rating::before{ content:"★★★★★"; letter-spacing:2px; opacity:0.25; }
.star-rating span::before{ content:"★★★★★"; letter-spacing:2px; color: var(--alerta); }

/* Productos relacionados */
.related.products{ margin-top: var(--espacio-7); }
.related.products > h2{ font-family: var(--font-display); font-size:1.6rem; margin-bottom: var(--espacio-4); }
.related.products ul.products{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--espacio-4); list-style:none; padding:0; }

/* ---- Carrito (tabla por defecto de WooCommerce) ---- */
table.shop_table{ width:100%; border-collapse:collapse; background: var(--bg-superficie); border-radius: var(--radio-md); overflow:hidden; border:1px solid var(--borde); }
table.shop_table th{ text-align:left; padding:14px; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.05em; color: var(--texto-suave); border-bottom:1px solid var(--borde); }
table.shop_table td{ padding:14px; border-bottom:1px solid var(--borde); vertical-align:middle; }
table.shop_table td.product-thumbnail img{ width:64px; border-radius:10px; }
table.shop_table .product-remove a{ color: var(--error); font-size:1.2rem; }
.woocommerce-cart-form .quantity .qty{ width:60px; padding:8px; border-radius: var(--radio-sm); border:1.5px solid var(--borde); text-align:center; }
.cart-collaterals .cart_totals{ background: var(--bg-superficie); border:1px solid var(--borde); border-radius: var(--radio-md); padding: var(--espacio-4); margin-top: var(--espacio-5); max-width:420px; margin-left:auto; }
.cart_totals table{ width:100%; }
.cart_totals table th, .cart_totals table td{ padding:10px 0; border-bottom:1px solid var(--borde); font-size:0.9rem; }
.cart_totals .order-total .woocommerce-Price-amount{ font-family: var(--font-spec); font-size:1.2rem; font-weight:700; }
.wc-proceed-to-checkout a.button{ width:100%; }

/* Cupón */
.woocommerce-cart-form .coupon{ display:flex; gap:8px; margin-top: var(--espacio-3); }
.woocommerce-cart-form .coupon input#coupon_code{
  padding:10px 16px; border-radius: var(--radio-full); border:1px solid var(--borde); background: var(--bg-superficie-alt);
}
.woocommerce-cart-form .coupon button{ position:static; }

/* ---- Checkout ---- */
.woocommerce-checkout .col2-set{ display:grid; grid-template-columns: 1fr; gap: var(--espacio-4); }
.woocommerce-checkout .form-row{ margin-bottom: var(--espacio-3); }
.woocommerce-checkout .form-row label{ display:block; font-size:0.85rem; font-weight:600; margin-bottom:6px; }
.woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row select, .woocommerce-checkout textarea{
  width:100%; padding: 12px 16px; border-radius: var(--radio-sm); border: 1.5px solid var(--borde); background: var(--bg-superficie-alt);
}
.woocommerce-checkout #order_review{ background: var(--bg-superficie); border:1px solid var(--borde); border-radius: var(--radio-md); padding: var(--espacio-4); }
.woocommerce-checkout-review-order-table{ width:100%; }
.woocommerce-checkout-payment ul.payment_methods{ list-style:none; padding:0; }
.woocommerce-checkout-payment ul.payment_methods li{
  border: 1.5px solid var(--borde); border-radius: var(--radio-md); padding:12px 14px; margin-bottom:10px;
}
.woocommerce-checkout-payment ul.payment_methods li input:checked ~ label{ color: var(--azul-electrico); font-weight:700; }

/* ---- Mi cuenta ---- */
.woocommerce-MyAccount-navigation ul{ list-style:none; padding:0; display:flex; flex-direction:column; gap:4px; }
.woocommerce-MyAccount-navigation a{
  display:block; padding: 12px 14px; border-radius: 10px; font-weight:600; font-size:0.9rem; color: var(--texto-suave);
}
.woocommerce-MyAccount-navigation .is-active a{ background: var(--bg-superficie-alt); color: var(--azul-electrico); }
.woocommerce-MyAccount-content{ background: var(--bg-superficie); border:1px solid var(--borde); border-radius: var(--radio-md); padding: var(--espacio-4); }
.woocommerce-account .woocommerce{ display:grid; grid-template-columns: 240px 1fr; gap: var(--espacio-4); align-items:flex-start; }

/* ---- Layout en dos columnas: checkout (formulario | resumen del pedido) ---- */
@media (min-width: 981px) {
  .woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--espacio-5);
    align-items: start;
  }
  .woocommerce-checkout form.checkout > #customer_details { grid-column: 1; grid-row: 1 / 4; }
  .woocommerce-checkout form.checkout > #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; }
  .woocommerce-checkout form.checkout > #order_review { grid-column: 2; grid-row: 2; position: sticky; top: calc(var(--header-h) + 20px); }
  /* Cualquier otro elemento suelto dentro del form (avisos, campos ocultos, etc.) no rompe la cuadrícula */
  .woocommerce-checkout form.checkout > *:not(#customer_details):not(#order_review_heading):not(#order_review) { grid-column: 2; grid-row: 3; }
}
#customer_details .col2-set{ display:grid; grid-template-columns: 1fr; gap: var(--espacio-3); }
#order_review_heading{ font-family: var(--font-display); font-size:1.2rem; margin-bottom: var(--espacio-3); }

/* ---- Layout en dos columnas: carrito (tabla | totales) ---- */
@media (min-width: 981px) {
  .woocommerce-cart .woocommerce {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--espacio-5);
    align-items: start;
  }
  .woocommerce-cart .woocommerce-cart-form { grid-column: 1; grid-row: 1; }
  .woocommerce-cart .cart-collaterals { grid-column: 2; grid-row: 1; }
  .woocommerce-cart .cart-collaterals .cart_totals { margin: 0; max-width: 100%; position: sticky; top: calc(var(--header-h) + 20px); }
  /* Cualquier otro elemento suelto (avisos, cross-sells, etc.) ocupa todo el ancho en su propia fila */
  .woocommerce-cart .woocommerce > *:not(.woocommerce-cart-form):not(.cart-collaterals) { grid-column: 1 / -1; }
}

/* ---- Página "Mi cuenta": ancho contenido y separación del título repetido ---- */
.woocommerce-account .contenedor > h1.titulo-seccion { display:none; } /* WooCommerce ya muestra su propio encabezado por sección */

/* ---- Botones de radio de envío/pago con mejor alineación ---- */
.woocommerce-checkout ul#shipping_method,
.woocommerce-checkout-payment ul.payment_methods{ list-style:none; padding:0; margin:0; }

/* ---- Responsive: apila todo en una columna en pantallas chicas ---- */
@media (max-width: 980px){
  .woocommerce div.product{ grid-template-columns: 1fr; }
  .related.products ul.products{ grid-template-columns: repeat(2,1fr); }
  .woocommerce-account .woocommerce{ grid-template-columns: 1fr; }
  .woocommerce-checkout form.checkout > #order_review { position: static; }
  .cart-collaterals .cart_totals{ position: static; }
}