/* =====================================================
   Province Pages - CLEAN & FIXED (especificidad alta)
   ===================================================== */

/* Contenedor general */
body .province-wrapper{
  max-width:1200px;
  margin:30px auto;
  padding:0 15px;
  box-sizing:border-box;
}

/* Buscador / autocomplete */
body #province-search-input{
  width:100%;
  padding:12px 18px;
  border-radius:28px;
  border:2px solid #007aa3;
  font-size:16px;
  box-sizing:border-box;
}
body #province-autocomplete{
  position:absolute;
  left:0;
  right:0;
  top:54px;
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:10px;
  display:none;
  z-index:9999;
  max-height:320px;
  overflow:auto;
  box-shadow:0 6px 20px rgba(0,0,0,0.06);
}

/* Grid general - fuerza */
body .province-products-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:18px !important;
  box-sizing:border-box;
  align-items: start;
  grid-auto-rows: 1fr; /* tarjetas con altura similar */
}

/* Tarjeta producto: estructura flex con altura uniforme */
body .province-products-grid > li.province-product{
  border:1px solid #eee;
  padding:12px;
  border-radius:10px;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  background:#fff;
  transition:transform .18s ease, box-shadow .18s ease;
  box-sizing:border-box !important;
}

/* Hover tarjeta */
body .province-products-grid > li.province-product:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(0,0,0,0.06);
}

/* Imagen */
body .province-product img{
  width:100% !important;
  height:160px !important;
  object-fit:cover !important;
  border-radius:6px;
  display:block;
}

/* Título */
body .province-product h3{
  font-size:15px;
  line-height:1.2;
  margin:10px 0 6px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  color:#222;
}

/* Precio */
body .province-product .price{
  font-weight:700;
  color:#007aa3;
  margin-top:8px;
}

/* Contenedor del pie (precio + botón) para asegurar alineación */
body .province-product .pp-footer{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:12px;
  width:100%;
  box-sizing:border-box;
}

/* Asegurar orden lógico (precio arriba, controls al final) */
body .province-product .price{ order: 2; margin-right:8px; }
body .province-product .pp-addtocart{ order: 3; margin-left:auto; }

/* =====================================================
   BOTÓN SOLO ICONO (AÑADIR AL CARRITO) - alta prioridad
   ===================================================== */

/* Forzar nuestro estilo circular y ocultar texto no deseado */
body .province-products-grid a.add_to_cart_button,
body .province-products-grid .pp-add-button,
body .pp-addtocart a.add_to_cart_button,
body .pp-addtocart .pp-add-button {
  width:42px !important;
  height:42px !important;
  padding:0 !important;
  border-radius:50% !important;
  background:linear-gradient(180deg,#00b3df,#0084b1) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:none !important;
  box-shadow:0 4px 10px rgba(0,0,0,0.12) !important;
  font-size:0 !important;
  line-height:0 !important;
  overflow:hidden !important;
}

/* Ocultar cualquier texto residual dentro del botón */
body .province-products-grid .pp-btn-text,
body .pp-addtocart .pp-btn-text{ display:none !important; }

/* Icono */
body .province-products-grid .pp-btn-icon svg,
body .pp-btn-icon svg{
  width:18px !important;
  height:18px !important;
  display:block !important;
  margin:0 !important;
  fill: #ffffff; /* icono blanco sobre el degradado */
}

/* Si prefieres icono del color principal en vez de blanco, cambia fill arriba a #007aa3 */

/* Ver producto (fallback) */
body .pp-viewproduct .button{
  width:100% !important;
  padding:10px 12px !important;
  border-radius:10px !important;
  background:#f5f5f5 !important;
  color:#333 !important;
  border:1px solid #ddd !important;
  font-weight:700 !important;
  text-align:center;
}

/* =====================================================
   Controles de cantidad (visuales) - estilo pequeño
   ===================================================== */

body .pp-qty-controls,
body .pp-qty-small{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
}

/* Botones + / - */
body .pp-qty-btn,
body .pp-qty-btn-small{
  width:28px !important;
  height:28px !important;
  border-radius:6px !important;
  background:rgba(255,255,255,0.96) !important;
  border:1px solid #e6e6e6 !important;
  color:#111 !important;
  font-size:16px !important;
  font-weight:700 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  padding:0 !important;
}
body .pp-qty-btn:hover,
body .pp-qty-btn-small:hover{ background:#f6f6f6 !important; }

/* Display de cantidad */
body .pp-qty-display{
  min-width:20px !important;
  text-align:center !important;
  font-weight:700 !important;
  color:#111 !important;
  background:transparent !important;
  padding:2px 6px !important;
  box-sizing:border-box !important;
}

/* Alineación concreta del footer (botón + qty juntos) */
body .pp-footer .pp-addtocart{ margin-right:6px; }
body .pp-footer .pp-qty-controls{ margin-left:auto; }

/* =====================================================
   Botones Productos / Combos
   ===================================================== */
body .province-filter-buttons .pf-btn{
  display:inline-block;
  padding:8px 16px;
  border-radius:8px;
  border:1px solid #dcdcdc;
  background:#fff;
  color:#000;
  margin:0 6px;
  cursor:pointer;
  font-weight:700;
}
body .province-filter-buttons .pf-btn--active{
  background:#007aa3;
  color:#fff;
  border-color:#007aa3;
  box-shadow:0 6px 12px rgba(0,122,163,0.12);
}

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

/* Tablet: 3 columnas */
@media (max-width: 992px){
  body .province-products-grid{ grid-template-columns:repeat(3,1fr) !important; }
  body .province-product img{ height:140px !important; }
}

/* Móvil: 2 columnas (forzado, prioridad alta) */
@media (max-width: 600px){
  body .province-products-grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:10px !important;
  }
  body .province-products-grid > li.province-product{
    padding:8px !important;
  }
  body .province-product img{
    height:110px !important;
  }
  body .province-product h3{
    font-size:13px !important;
    margin:6px 0 4px !important;
  }
  body .pp-add-button{ width:36px !important; height:36px !important; }
  body .pp-qty-btn{ width:24px !important; height:24px !important; font-size:14px !important; }
  body .pp-qty-display{ min-width:18px !important; font-size:13px !important; }
}

/* FORCE: make ajax-inserted grids match the main grid */
.province-products-grid { box-sizing: border-box; }
.province-products-grid > li.province-product { min-height: 220px; display:flex; flex-direction:column; justify-content:space-between; }
.province-products-grid img { width:100%; height: auto; object-fit: cover; border-radius:6px; }

/* Ensure the small "Ver producto" fallback button doesn't overflow on mobile */
.pp-viewproduct .button { padding:8px 10px; font-weight:700; border-radius:8px; }

/* When search builds grid with 'Ver producto' instead of small cart, keep consistent spacing */
@media (max-width:600px){
  .province-products-grid > li.province-product{ padding:10px; }
  .province-product img{ height:110px !important; }
}