/* =========================================================
   PharmaCommerce — Base Styles
   - Variables (paleta + layout)
   - Font-face (Inter)
   - Reset mínimo
   - Container
   ========================================================= */

/* -------------------------
   1) Brand tokens (colors)
   Paleta farmacia: confianza (azul) + limpieza (blanco) + soporte (grises) + éxito (verde)
-------------------------- */
:root {
  /* Brand */
  --pc-color-primary: #0B5ED7;   /* Azul principal */
  --pc-color-accent:  #16A34A;   /* Verde acciones positivas */

  /* Surfaces */
  --pc-color-bg:      #FFFFFF;   /* Fondo */
  --pc-color-surface: #F4F6F8;   /* Cards / barras suaves */
  --pc-color-border:  #E5E7EB;   /* Bordes neutrales */

  /* Text */
  --pc-color-text:       #111827; /* Texto principal (gris casi negro) */
  --pc-color-text-muted: #6B7280; /* Texto secundario */

  /* Layout */
  --pc-container-max: 1400px;
  --pc-container-pad: 24px;

  /* Radius + shadow (base, luego ajustamos) */
  --pc-radius-md: 12px;
  --pc-shadow-sm: 0 6px 18px rgba(17, 24, 39, 0.08);

  /* Header heights (tokens para sticky; ajustaremos luego) */
  --pc-header-top-h: 80px;
  --pc-header-search-row-h: 72px;
  --pc-header-bottom-h: 56px;

  /* Typography (por ahora simple) */
  --pc-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* -------------------------
   2) Fonts — Inter (solo pesos que usaremos)
   IMPORTANTE:
   - Solo definimos 400/500/600/700 para no cargar de más
   - Si la ruta o nombres cambian, ajusta aquí
-------------------------- */
@font-face {
  font-family: "Inter";
  src:
    url("../fonts/inter/Inter-Regular.woff2") format("woff2"),
    url("../fonts/inter/Inter-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src:
    url("../fonts/inter/Inter-Medium.woff2") format("woff2"),
    url("../fonts/inter/Inter-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src:
    url("../fonts/inter/Inter-SemiBold.woff2") format("woff2"),
    url("../fonts/inter/Inter-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src:
    url("../fonts/inter/Inter-Bold.woff2") format("woff2"),
    url("../fonts/inter/Inter-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* -------------------------
   3) Reset mínimo y defaults
   Objetivo: base limpia sin pelear con WP/Woo
-------------------------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--pc-font-sans);
  color: var(--pc-color-text);
  background: var(--pc-color-bg);
  line-height: 1.4;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

/* -------------------------
   4) Container
-------------------------- */
.pc-container {
  width: 100%;
  max-width: var(--pc-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pc-container-pad);
  padding-right: var(--pc-container-pad);
}

/* -------------------------
   5) Responsive helpers (para header)
-------------------------- */
.pc-hide-mobile {
  display: none;
}
.pc-show-mobile {
  display: block;
}

@media (min-width: 992px) {
  .pc-hide-mobile { display: block; }
  .pc-show-mobile { display: none; }
}


/* ===== Utility: hover accent ===== */
.u-hover-accent {
  transition: color 0.2s ease, background-color 0.2s ease;
}

.u-hover-accent:hover {
  color: var(--pc-color-accent);
}

.u-hover-accent:hover i,
.u-hover-accent:hover svg {
  color: var(--pc-color-accent);
  fill: var(--pc-color-accent);
}

/* Lock scroll del body cuando el drawer cart está abierto */
body.pc-no-scroll {
  overflow: hidden;
}