/* =============================================================================
   J.S PRODUCTOS - Hoja de estilos compartida
   -----------------------------------------------------------------------------
   La usan: portada (Inicio), Carrito y Tienda, para que TODO se vea igual.
   Subela a tu tema hijo:  wp-content/themes/TU-TEMA-HIJO/js-productos.css
   ============================================================================= */

:root{
  --navy:#0e2a47;
  --navy-2:#12365c;
  --orange:#f5921f;
  --orange-2:#f4a935;
  --red:#e63328;
  --green:#25D366;
  --text:#333;
  --muted:#8a8a8a;
  --line:#e7e7e7;
}

*{margin:0;padding:0;box-sizing:border-box;}

/* Evita el scroll horizontal / "cortado" en movil */
html,body{max-width:100%;overflow-x:hidden;}

body{
  font-family:"Poppins","Segoe UI",Arial,sans-serif;
  color:var(--text);
  background:#fff;
  font-size:14px;
  line-height:1.4;
}
img{max-width:100%;height:auto;display:block;}
a{text-decoration:none;color:inherit;}
.container{max-width:1180px;margin:0 auto;padding:0 20px;}

/* ---------- HEADER ---------- */
.topbar{padding:14px 0;border-bottom:1px solid var(--line);}
.topbar .container{display:flex;align-items:center;gap:24px;justify-content:space-between;}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.search{flex:0 0 320px;width:320px;max-width:320px;position:relative;}
.search input{
  width:100%;padding:11px 44px 11px 16px;border:1px solid var(--line);
  border-radius:30px;font-size:13px;outline:none;background:#fafafa;
}
.search button{
  position:absolute;right:5px;top:5px;width:32px;height:32px;border:none;border-radius:50%;
  background:var(--navy);color:#fff;cursor:pointer;font-size:14px;
}
.header-actions{display:flex;align-items:center;gap:22px;flex-shrink:0;}
.header-actions .item{display:flex;align-items:center;gap:6px;font-size:12px;color:#444;cursor:pointer;}
.cart{position:relative;}
.cart .count{
  position:absolute;top:-8px;right:-10px;background:var(--orange);color:#fff;
  font-size:10px;width:16px;height:16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-weight:700;
}

/* ---------- TITULOS DE SECCION ---------- */
.sec-head{display:flex;align-items:center;justify-content:space-between;margin:26px 0 18px;flex-wrap:wrap;gap:10px;}
.sec-head h2{font-size:20px;font-weight:800;color:#2b2b2b;position:relative;padding-left:12px;}
.sec-head h2::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:4px;background:var(--orange);border-radius:3px;}
.see-all{background:var(--orange);color:#fff;padding:8px 16px;border-radius:20px;font-size:11px;font-weight:600;display:inline-flex;align-items:center;gap:6px;}

/* ---------- TARJETAS DE PRODUCTO (mismo look que el inicio) ---------- */
.featured{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch;}
.prod{border:1px solid var(--line);border-radius:10px;padding:14px;text-align:center;background:#fff;position:relative;display:flex;flex-direction:column;}
.prod .tag{position:absolute;top:10px;left:10px;background:var(--red);color:#fff;font-size:9px;font-weight:700;padding:3px 8px;border-radius:4px;z-index:2;}
.prod .pimg{height:210px;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:12px;overflow:hidden;padding:10px;}
.prod .pimg img{max-height:100% !important;max-width:100% !important;width:auto !important;height:auto !important;object-fit:contain !important;}
.prod .brand{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;}
.prod .name{font-size:12px;font-weight:600;color:#333;margin:5px 0 10px;min-height:32px;}
.prod .price{font-size:16px;font-weight:800;color:var(--navy);margin-bottom:10px;}
.prod .price .old{font-size:11px;color:var(--muted);text-decoration:line-through;font-weight:500;margin-right:6px;}
.prod .price del{font-size:11px;color:var(--muted);font-weight:500;margin-right:6px;}
.prod .price ins{text-decoration:none;}
.prod .add{margin-top:auto;background:var(--navy);color:#fff;border:none;padding:9px;border-radius:6px;font-size:10px;font-weight:700;cursor:pointer;text-transform:uppercase;display:block;text-align:center;}
.prod .add:hover{background:var(--orange);}

/* ---------- PAGINACION ---------- */
.ve-pager{display:flex;justify-content:center;gap:8px;margin:30px 0;flex-wrap:wrap;}
.ve-pager .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 10px;
  border:1px solid var(--line);border-radius:8px;font-size:13px;font-weight:600;color:#444;background:#fff;
}
.ve-pager .page-numbers.current,.ve-pager .page-numbers:hover{background:var(--navy);color:#fff;border-color:var(--navy);}

/* ---------- FOOTER ---------- */
footer{background:#151515;color:#c9c9c9;padding:40px 0 0;margin-top:40px;}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:30px;}
.foot-brand p{font-size:12px;color:#9a9a9a;margin:14px 0;max-width:230px;line-height:1.6;}
.foot-brand .ig{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);}
footer h4{color:#fff;font-size:14px;margin-bottom:16px;font-weight:700;}
footer ul{list-style:none;}
footer li{font-size:12px;margin-bottom:10px;color:#9a9a9a;display:flex;align-items:center;gap:8px;}
footer li:hover{color:#fff;}
.foot-bottom{border-top:1px solid #2a2a2a;margin-top:34px;padding:16px 0;text-align:center;font-size:11px;color:#7c7c7c;}
.foot-bottom .heart{color:var(--red);font-style:normal;}

/* ---------- WHATSAPP ---------- */
.wa{position:fixed;right:22px;bottom:22px;width:52px;height:52px;border-radius:50%;background:var(--green);
   display:flex;align-items:center;justify-content:center;font-size:26px;color:#fff;
   box-shadow:0 6px 18px rgba(0,0,0,.25);z-index:50;}

/* =============================================================================
   WOOCOMMERCE  (carrito, checkout, tienda) con el mismo estilo
   ============================================================================= */

.woocommerce, .woocommerce-page{max-width:100%;}

/* --- Imagenes de producto SIEMPRE completas, nunca recortadas --- */
.woocommerce ul.products li.product a img,
.woocommerce div.product div.images img,
.woocommerce table.cart img,
.woocommerce-cart table.cart img{
  width:100% !important;
  height:auto !important;
  max-height:220px !important;
  object-fit:contain !important;
  background:#fff;
}
.woocommerce table.cart img,
.woocommerce-cart table.cart img{max-width:80px !important;max-height:80px !important;}

/* --- Botones --- */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt{
  background:var(--navy) !important;color:#fff !important;border-radius:6px !important;
  font-weight:700 !important;text-transform:uppercase;font-size:12px !important;
  padding:12px 18px !important;border:none !important;line-height:1.2 !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce button.button.alt:hover{background:var(--orange) !important;color:#fff !important;}

/* Boton principal de finalizar compra en naranja */
.woocommerce .wc-proceed-to-checkout a.checkout-button{
  background:var(--orange) !important;font-size:14px !important;padding:15px 20px !important;
}
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover{background:var(--navy) !important;}

/* --- Tablas del carrito --- */
.woocommerce table.shop_table{
  border-radius:10px;border:1px solid var(--line);border-collapse:separate;width:100%;
}
.woocommerce table.shop_table th{background:#fafafa;color:var(--navy);font-weight:700;font-size:12px;text-transform:uppercase;}
.woocommerce table.shop_table td,.woocommerce table.shop_table th{padding:14px 12px;}
.woocommerce-cart table.cart td.actions .coupon .input-text{
  width:auto;max-width:180px;padding:10px 12px;border-radius:6px;border:1px solid var(--line);
}

/* --- Totales / cajas --- */
.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-billing-fields h3{
  font-size:18px;font-weight:800;color:#2b2b2b;position:relative;padding-left:12px;margin-bottom:14px;
}
.woocommerce .cart_totals h2::before,
.woocommerce-checkout h3::before,
.woocommerce-billing-fields h3::before{
  content:"";position:absolute;left:0;top:3px;bottom:3px;width:4px;background:var(--orange);border-radius:3px;
}
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review{
  border:1px solid var(--line);border-radius:10px;padding:18px;background:#fff;
}

/* --- Campos de formulario --- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single{
  border:1px solid var(--line) !important;border-radius:6px !important;padding:11px 12px !important;
  font-size:13px !important;height:auto !important;max-width:100%;
}

/* --- Mensajes --- */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  border-top-color:var(--orange) !important;border-radius:8px;
}
.woocommerce-message::before,.woocommerce-info::before{color:var(--orange) !important;}

/* =============================================================================
   CARRITO EN BLOQUES DE WOOCOMMERCE  (wc-block-cart)
   -----------------------------------------------------------------------------
   El bloque usa "ancho completo" con margenes negativos (calc(50% - 50vw)),
   lo que empujaba el contenido fuera de la pantalla por la IZQUIERDA.
   Aqui lo anulamos para que quede dentro del contenedor.
   ============================================================================= */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wc-block-cart,
.wc-block-checkout,
.woocommerce .alignfull,
.woocommerce .alignwide,
main .alignfull,
main .alignwide{
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
}

/* Contenedor interno del bloque */
.wc-block-components-sidebar-layout{
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
.wc-block-components-main,
.wc-block-components-sidebar{
  max-width:100% !important;
  margin-left:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  box-sizing:border-box;
}

/* Imagenes dentro del carrito en bloques */
.wc-block-cart-item__image img,
.wc-block-components-product-image img{
  max-width:80px !important;max-height:80px !important;
  width:auto !important;height:auto !important;object-fit:contain !important;
}

/* Boton "Pasar por la caja" con el estilo de la marca */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button{
  background:var(--orange) !important;color:#fff !important;
  border-radius:8px !important;font-weight:700 !important;
  text-transform:uppercase;font-size:13px !important;width:100% !important;
}
.wc-block-cart__submit-button:hover{background:var(--navy) !important;}

/* =============================================================================
   ARREGLOS MOVIL  (carrito cortado / pasarela de pago)
   ============================================================================= */

/* El bloque del carrito se apila y nunca se sale de la pantalla */
@media(max-width:768px){
  .wc-block-components-sidebar-layout{display:block !important;}
  .wc-block-components-main,
  .wc-block-components-sidebar{
    width:100% !important;flex:none !important;float:none !important;
  }
  .wc-block-cart__main,
  .wc-block-cart__sidebar{width:100% !important;padding:0 !important;margin:0 !important;}
  .wc-block-cart-items,
  .wc-block-cart-items__row{max-width:100% !important;}
}
@media(max-width:768px){

  /* Nada puede desbordar horizontalmente */
  .woocommerce, .woocommerce-page, .woocommerce form, .woocommerce table{max-width:100% !important;}

  /* --- Carrito: la tabla se convierte en tarjetas apiladas --- */
  .woocommerce table.shop_table_responsive.cart,
  .woocommerce-page table.shop_table_responsive.cart{border:none;}

  .woocommerce table.cart thead,
  .woocommerce-cart table.cart thead{display:none;}

  .woocommerce table.cart tbody tr,
  .woocommerce-cart table.cart tbody tr{
    display:block;border:1px solid var(--line);border-radius:10px;
    padding:12px;margin-bottom:14px;background:#fff;
  }
  .woocommerce table.cart tbody td,
  .woocommerce-cart table.cart tbody td{
    display:flex;justify-content:space-between;align-items:center;gap:10px;
    width:100% !important;text-align:right;padding:8px 0 !important;border:none !important;
  }
  /* Etiqueta de cada dato (Producto, Precio, Cantidad...) */
  .woocommerce table.cart tbody td::before,
  .woocommerce-cart table.cart tbody td::before{
    content:attr(data-title);font-weight:700;color:#555;text-align:left;flex-shrink:0;
  }
  .woocommerce table.cart td.product-thumbnail{justify-content:center;}
  .woocommerce table.cart td.product-thumbnail::before{display:none;}
  .woocommerce table.cart td.product-remove::before{display:none;}
  .woocommerce table.cart td.actions{display:block;text-align:center;}
  .woocommerce table.cart td.actions .coupon{display:flex;gap:8px;margin-bottom:12px;}
  .woocommerce table.cart td.actions .coupon .input-text{flex:1;max-width:none;}
  .woocommerce table.cart td.actions .button{width:100%;}

  /* --- Totales y checkout a ancho completo --- */
  .woocommerce .cart-collaterals,
  .woocommerce .cart-collaterals .cart_totals,
  .woocommerce-page .cart-collaterals .cart_totals{width:100% !important;float:none !important;}
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review,
  .woocommerce-checkout #order_review_heading{width:100% !important;float:none !important;}
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last{width:100% !important;float:none !important;margin-right:0 !important;}

  /* --- PASARELA DE PAGO: evita que se salga de la pantalla --- */
  #payment, .woocommerce-checkout-payment, .wc_payment_methods{max-width:100% !important;overflow:hidden;}
  #payment .payment_box{max-width:100% !important;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  #payment iframe,
  .woocommerce-checkout iframe,
  .wc_payment_methods iframe,
  .payment_box iframe{
    max-width:100% !important;width:100% !important;border:0;display:block;
  }
  /* Textos largos de la pasarela que rompen el ancho */
  #payment .payment_box p,
  .woocommerce-checkout .payment_box{word-wrap:break-word;overflow-wrap:break-word;}

  /* Tablas de totales legibles en movil */
  .woocommerce table.shop_table th,
  .woocommerce table.shop_table td{padding:10px 8px;font-size:13px;}
}

@media(max-width:640px){
  .topbar .container{flex-wrap:wrap;gap:12px;}
  .search{order:3;max-width:100%;flex-basis:100%;}
  .featured{grid-template-columns:1fr 1fr;}
  .prod .pimg{height:auto !important;min-height:180px;max-height:300px;}
  .prod .pimg img{max-height:280px !important;object-fit:contain !important;}
  .foot-grid{grid-template-columns:1fr;}
  .wa{right:14px;bottom:14px;}
}

/* Fuerza tamaño del ícono del carrito */
.header-actions .item.cart::before,
.header-actions .item.cart svg {
    width: 60px !important;   /* ancho mayor */
    height: 60px !important;  /* alto mayor */
    font-size: 60px !important; /* si es fuente */
}

/* Ajusta el círculo del contador */
.header-actions .item.cart .count {
    font-size: 26px !important;   /* número más grande */
    width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
    border-radius: 50%;
    text-align: center;
    margin-left: 8px;
}