/* =========================================================
   WooCommerce (PharmaCommerce) — LAYOUT + GRID ONLY
   Scope: solo páginas Woo (body tiene .pc-is-woo)
   Objetivo: controlar ancho, spacing y grid por breakpoints.
   NO estiliza cards (eso va en woocommerce-product-card.css)
   ========================================================= */


/* =========================================================
   VARIABLES DE LAYOUT
   ========================================================= */
:root {
  --pc-woo-max: 1400px; /* ancho del contenido Woo (DESKTOP) */
  --pc-woo-pad: 24px;   /* padding lateral (DESKTOP) */
}


/* =========================================================
   RESET / COMPAT BÁSICA
   (no define layout, solo limpia defaults)
   ========================================================= */
.pc-is-woo .woocommerce-notices-wrapper,
.pc-is-woo .woocommerce-result-count,
.pc-is-woo .woocommerce-ordering {
  margin: 0 0 12px;
}

.pc-is-woo a {
  text-decoration: none;
}

/* Inputs básicos */
.pc-is-woo input[type="text"],
.pc-is-woo input[type="email"],
.pc-is-woo input[type="tel"],
.pc-is-woo input[type="search"],
.pc-is-woo input[type="password"],
.pc-is-woo textarea,
.pc-is-woo select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}


/* =========================================================
   LAYOUT GENERAL DE WOO
   Encierra TODO el contenido (title, toolbar, grid, paginación)
   ========================================================= */
body.pc-is-woo .woocommerce,
body.pc-is-woo.woocommerce-page .woocommerce {
  max-width: var(--pc-woo-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pc-woo-pad);
  padding-right: var(--pc-woo-pad);
  box-sizing: border-box;
}

/* Título del archive */
body.pc-is-woo .page-title {
  margin-top: 18px;
  margin-bottom: 10px;
}

/* Evita que Woo rompa el layout con floats */
body.pc-is-woo .woocommerce-result-count,
body.pc-is-woo .woocommerce-ordering {
  float: none !important;
}

/* Clearfix de seguridad */
body.pc-is-woo .woocommerce::after {
  content: "";
  display: block;
  clear: both;
}


/* =========================================================
   GRID DE PRODUCTOS (SOLO ESTRUCTURA)
   ========================================================= */
body.pc-is-woo .woocommerce ul.products {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)); /* DESKTOP */
  gap: 16px;

  width: 100%;
}

/* Neutraliza legacy de Woo (floats, widths) */
body.pc-is-woo .woocommerce ul.products li.product {
  margin: 0 !important;
  width: auto !important;
  float: none !important;
}


/* =========================================================
   BREAKPOINTS DEL GRID
   SOLO columnas + spacing
   ========================================================= */

/* TABLET */
@media (max-width: 1200px) {
  body.pc-is-woo .woocommerce ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* MOBILE */
@media (max-width: 900px) {
  :root { --pc-woo-pad: 18px; }

  body.pc-is-woo .woocommerce ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}


body.pc-is-woo .woocommerce-result-count {
  display: none;
}

/* =========================================================
   Woo Pagination (numbers + arrows) — SOLO Woo (.pc-is-woo)
   ========================================================= */
body.pc-is-woo nav.woocommerce-pagination{
  margin: 18px 0 32px;
  text-align: center;
}

body.pc-is-woo nav.woocommerce-pagination ul.page-numbers{
  display: inline-flex;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;

  border: 0;              /* mata el borde legacy de Woo */
  background: transparent;
}

body.pc-is-woo nav.woocommerce-pagination ul.page-numbers li{
  margin: 0;
  border: 0;
  float: none;
  overflow: visible;
}

body.pc-is-woo nav.woocommerce-pagination ul.page-numbers a.page-numbers,
body.pc-is-woo nav.woocommerce-pagination ul.page-numbers span.page-numbers{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 40px;
  height: 40px;
  padding: 0 12px;

  border-radius: 10px;
  border: 2px solid rgba(0,0,0,.10);
  background: #fff;
  color: #111;
  font-weight: 800;
  line-height: 1;

  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}

/* Hover (blanco + texto azul, como ya venías manejando) */
body.pc-is-woo nav.woocommerce-pagination ul.page-numbers a.page-numbers:hover{
  background: #fff !important;
  color: var(--pc-color-primary, #0b4db8) !important;
  border-color: var(--pc-color-primary, #0b4db8) !important;
  transform: translateY(-1px);
}

/* Activo (la página actual) */
body.pc-is-woo nav.woocommerce-pagination ul.page-numbers span.page-numbers.current{
  background: var(--pc-color-primary, #0b4db8) !important;
  color: #fff !important;
  border-color: var(--pc-color-primary, #0b4db8) !important;
}

/* Arrows (next/prev) — mismo estilo que números */
body.pc-is-woo nav.woocommerce-pagination ul.page-numbers a.next,
body.pc-is-woo nav.woocommerce-pagination ul.page-numbers a.prev{
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

/* Focus accesible */
body.pc-is-woo nav.woocommerce-pagination ul.page-numbers a:focus-visible{
  outline: 3px solid rgba(11, 77, 184, .35);
  outline-offset: 2px;
}