@import url("https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap");
/* ═══════════════════════════════════════════════════════════════════════
   PERFUMES MAYORISTA · tokens de la marca "M Punto" (guía de marca v1)
   Versión clara pedida por el dueño: contenido sobre HUESO con tarjetas
   blancas y texto negro; NEGRO solo en cabecera, héroe y pie; LIMA solo en
   detalles (botón principal, pastillas, nivel +24) y siempre con texto negro.
   Nunca blanco sobre lima ni lima como texto sobre blanco/hueso.
   Se enlaza al final del <head> de todas las páginas públicas (después de
   marca-gabby.css, gabby-tipo.css y tema_css()). Usar var(--pm-*).
   Nombres viejos (--pm-bosque, --pm-verde, --pm-amarillo…) = su equivalente.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* Paleta M Punto */
  --pm-negro:#1E2A26;
  --pm-lima:#EEF4F0;
  --pm-lima-2:#DDE9E1;
  --pm-grafito:#2E3B36;
  --pm-hueso:#FFFFFF;
  --pm-foto:#FFFFFF;
  --pm-mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;

  /* Nombres de siempre, ya en M Punto */
  --pm-bosque:#1E2A26;
  --pm-verde:#1E2A26;
  --pm-verde-2:#2E3B36;
  --pm-amarillo:#EEF4F0;
  --pm-amarillo-2:#DDE9E1;
  --pm-tinta:#121212;
  --pm-fondo:#FFFFFF;
  --pm-blanco:#FFFFFF;
  --pm-gris:#5C5C5C;
  --pm-linea:#DEDBD3;
  --pm-menta:#F2F0EB;
  --pm-rojo:#C8361D;
  --pm-gris-suave:#F2F0EB;

  /* Letra: Archivo de ancho variable (wdth 62–125). Titulares 900 condensados. */
  --pm-letra:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pm-ancho-titulo:100%;
  --pm-ancho-sub:100%;
  --pm-ancho-logo:100%;
  --pm-peso-titulo:500;

  /* Forma */
  --pm-radio:0px;
  --pm-radio-card:0px;
  --pm-radio-logo:8px;
  --pm-borde:1px solid var(--pm-linea);
  --pm-borde-suave:1px solid var(--pm-linea);
  --pm-sombra:none;

  /* Medidas */
  --pm-ancho:1320px;
  --pm-gutter:40px;
  --pm-gutter-m:16px;
  --pm-cab-alto:84px;
  --pm-cinta-alto:36px;

  /* Alias del diseño estático */
  --fondo:var(--pm-fondo);--blanco:var(--pm-blanco);--tinta:var(--pm-tinta);--gris:var(--pm-gris);
  --linea:var(--pm-linea);--verde:var(--pm-verde);--verde2:var(--pm-verde-2);--bosque:var(--pm-bosque);
  --amarillo:var(--pm-amarillo);--amarillo2:var(--pm-amarillo-2);--menta:var(--pm-menta);--rojo:var(--pm-rojo);
  color-scheme:light;
}
@media (max-width:760px){:root{--pm-gutter:var(--pm-gutter-m)}}

/* La letra base del motor (gabby-tipo.css usa --gt): Archivo en toda la tienda. */
:root,html body,html body *{--gt:var(--pm-letra)}

html body{background:var(--pm-fondo);color:var(--pm-tinta);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}

/* Fotos de producto sobre blanco, sin marco ni sombra (fondo blanco = foto limpia). */
.pm-foto{background:var(--pm-blanco);border:0;box-shadow:none}
.pm-foto img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}

/* Utilidades compartidas */
.pm-cond{font-family:var(--pm-letra);font-stretch:var(--pm-ancho-titulo);font-weight:var(--pm-peso-titulo);text-transform:uppercase;line-height:.88;letter-spacing:-.005em}
.pm-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--pm-lima);color:var(--pm-negro);padding:3px 8px;border-radius:4px;white-space:nowrap}
.pm-wrap{max-width:var(--pm-ancho);margin:0 auto;padding:0 var(--pm-gutter)}

/* Celular angosto: el logo no se corta junto al botón "Catálogo" (2026-11-09). */
@media (max-width:400px){
  html:not(#q1):not(#q2):not(#q3):not(#q4):not(#q5):not(#q6):not(#q7):not(#q8) body header a.pmh-logo>span{overflow:visible!important;flex:none!important}
  html:not(#q1):not(#q2):not(#q3):not(#q4):not(#q5):not(#q6):not(#q7):not(#q8) body header a.pmh-logo .pm-lt2{font-size:23px!important}
  html:not(#q1):not(#q2):not(#q3):not(#q4):not(#q5):not(#q6):not(#q7):not(#q8) body header a.pmh-logo .pm-lt1{font-size:7.5px!important}
}

/* Etiquetas de las tarjetas (portada, relacionados): adhesivo pegado a la esquina de arriba a la izquierda, como .com.co (2026-11-09). */
html:not(#q1):not(#q2):not(#q3):not(#q4):not(#q5):not(#q6):not(#q7):not(#q8) body .pm-card .pm-ins{top:0!important;left:0!important;right:auto!important;gap:0!important;display:flex!important}
html:not(#q1):not(#q2):not(#q3):not(#q4):not(#q5):not(#q6):not(#q7):not(#q8) body .pm-card .pm-ins>span{font-size:8.5px!important;font-weight:800!important;letter-spacing:.12em!important;text-transform:uppercase!important;padding:6px 11px 6px 12px!important;border-radius:13px 0 10px 0!important;background:#0D0D0D!important;color:#fff!important;box-shadow:none!important;border:0!important;outline:0!important;line-height:1.2!important}
html:not(#q1):not(#q2):not(#q3):not(#q4):not(#q5):not(#q6):not(#q7):not(#q8) body .pm-card .pm-ins>span::before{display:none!important}
html:not(#q1):not(#q2):not(#q3):not(#q4):not(#q5):not(#q6):not(#q7):not(#q8) body .pm-card .pm-ins>span.pm-nv{background:var(--pm-lima)!important;color:#0D0D0D!important}
html:not(#q1):not(#q2):not(#q3):not(#q4):not(#q5):not(#q6):not(#q7):not(#q8) body .pm-card .pm-ins>span+span{display:none!important}