/* =========================================================================
   Sir Neko GP — Design Tokens (Fase 1)
   Paleta basada en /mayoristas/: crema calido + 4 pasteles + negro de contraste.
   Tipografia: Josefin Sans (mapeo oficial de Google, self-hosted en wp-content/fonts).
   ========================================================================= */

/* ---- Josefin Sans normal 300/400/600/700 (latin + latin-ext) ---- */
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:300;font-display:swap;src:url(/wp-content/fonts/josefin-sans/Qw3aZQNVED7rKGKxtqIqX5EUDXx4.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:300;font-display:swap;src:url(/wp-content/fonts/josefin-sans/Qw3aZQNVED7rKGKxtqIqX5EUA3x4RHw.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/wp-content/fonts/josefin-sans/Qw3aZQNVED7rKGKxtqIqX5EUDXx4.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/wp-content/fonts/josefin-sans/Qw3aZQNVED7rKGKxtqIqX5EUA3x4RHw.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/wp-content/fonts/josefin-sans/Qw3aZQNVED7rKGKxtqIqX5EUDXx4.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/wp-content/fonts/josefin-sans/Qw3aZQNVED7rKGKxtqIqX5EUA3x4RHw.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/wp-content/fonts/josefin-sans/Qw3aZQNVED7rKGKxtqIqX5EUDXx4.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/wp-content/fonts/josefin-sans/Qw3aZQNVED7rKGKxtqIqX5EUA3x4RHw.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root {
  /* Tipografia */
  --sn-font: 'Josefin Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --sn-fw-light: 300; --sn-fw-regular: 400; --sn-fw-semibold: 600; --sn-fw-bold: 700;
  --sn-fs-h1: clamp(2.4rem, 6vw, 4rem);       /* titulares enormes */
  --sn-fs-h2: clamp(1.9rem, 4.5vw, 3rem);
  --sn-fs-h3: clamp(1.25rem, 2.5vw, 1.6rem);
  --sn-fs-body: 1.0625rem;
  --sn-fs-small: 0.75rem;
  --sn-lh-body: 1.7; --sn-lh-tight: 1.05;
  --sn-ls-tight: -0.02em; --sn-ls-wide: 0.12em;

  /* ---- Paleta /mayoristas/ ---- */
  --sn-cream:      #faf6ee;   /* fondo general calido */
  --sn-cream-2:    #f3ecdd;
  --sn-ink:        #1c1c1c;   /* negro: titulos, botones, contraste */
  --sn-ink-soft:   #2a2a2a;
  --sn-white:      #ffffff;
  --sn-muted:      #6f6f7c;   /* texto secundario (gris calido) */

  /* 4 pasteles + su version suave (para iconos/fondos) */
  --sn-mint:       #c4e7d4;   --sn-mint-soft:   #ddf0e5;
  --sn-butter:     #f8e6a6;   --sn-butter-soft: #fbefc4;
  --sn-blush:      #f7d3d3;   --sn-blush-soft:  #fbe4e4;
  --sn-sky:        #c1e0f4;   --sn-sky-soft:    #dceef9;

  /* Verde de marca (dot de badges, acentos, links activos) */
  --sn-green:      #16a34a;   --sn-green-dark: #15803d;

  /* Alias para el CSS portado del child viejo (single-product.css) */
  --sn-black: var(--sn-ink);
  --sn-font-body: var(--sn-font);
  --sn-success: var(--sn-green);
  --sn-transition: .2s ease;

  /* Radios (cards muy redondeadas, botones medios, pills) */
  --sn-radius-sm: 10px; --sn-radius: 16px; --sn-radius-lg: 24px; --sn-radius-pill: 9999px;

  /* Sombras suaves */
  --sn-shadow-sm: 0 1px 3px rgba(28,28,28,.06);
  --sn-shadow-md: 0 8px 24px rgba(28,28,28,.07);
  --sn-shadow-lg: 0 18px 44px rgba(28,28,28,.10);

  /* Espaciado (escala 4pt; pasos intermedios para grid gaps y padding de card) */
  --sn-space-1:.25rem; --sn-space-2:.5rem; --sn-space-3:.75rem; --sn-space-4:1rem; --sn-space-5:1.25rem; --sn-space-6:1.5rem; --sn-space-7:1.75rem; --sn-space-8:2rem; --sn-space-12:3rem; --sn-space-16:4rem;

  /* Hairline cálido para bordes sutiles sobre blanco/crema */
  --sn-border: rgba(28,28,28,.10);

  /* Spring suave para micro-interacciones (Soft Brutalism con carácter) */
  --sn-spring: linear(0,.0069 1.15%,.0975 5.18%,.2229 7.78%,.5977 15.84%,.7904,.8641,.9228,.9676 28.8%,1.0032 31.68%,1.046 42.05%,1.0118 61.63%,.9981 80.35%,1 99.94%);

  /* Mapear tokens de GeneratePress a la paleta */
  --contrast: var(--sn-ink); --base: var(--sn-cream); --base-2: var(--sn-cream); --accent: var(--sn-green);
}

/* ---- Base sobre GeneratePress ---- */
body {
  font-family: var(--sn-font);
  font-weight: var(--sn-fw-light);
  font-size: var(--sn-fs-body);
  line-height: var(--sn-lh-body);
  color: var(--sn-ink);
  background: var(--sn-cream);
  -webkit-font-smoothing: antialiased;
}
.site-content, .wc-block-grid { background: var(--sn-cream); }

h1,h2,h3,h4,h5,h6,.entry-title,.site-title {
  font-family: var(--sn-font);
  font-weight: var(--sn-fw-bold);
  line-height: var(--sn-lh-tight);
  letter-spacing: var(--sn-ls-tight);
  color: var(--sn-ink);
}
h1,.entry-title { font-size: var(--sn-fs-h1); }
h2 { font-size: var(--sn-fs-h2); }
h3 { font-size: var(--sn-fs-h3); }
p { color: var(--sn-muted); }

a { color: var(--sn-ink); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--sn-green); }

/* Botones — negro solido, radius medio, uppercase (estetica /mayoristas/) */
.button, button, input[type=submit], .wp-block-button__link,
.added_to_cart, .single_add_to_cart_button, .checkout-button {
  font-family: var(--sn-font);
  font-weight: var(--sn-fw-bold);
  font-size: var(--sn-fs-small);
  letter-spacing: var(--sn-ls-wide);
  text-transform: uppercase;
  background: var(--sn-ink);
  color: var(--sn-white);
  border: none;
  border-radius: var(--sn-radius-sm);
  padding: 1em 1.9em;
  transition: background .2s ease, transform .15s ease;
}
.button:hover, button:hover, input[type=submit]:hover,
.single_add_to_cart_button:hover, .checkout-button:hover {
  background: var(--sn-green); color: var(--sn-white); transform: translateY(-1px);
}

/* Badge "pill" con dot verde (eyebrow de secciones) */
.sn-badge {
  display: inline-flex; align-items: center; gap: .5em;
  background: var(--sn-white); color: var(--sn-ink);
  font-size: var(--sn-fs-small); font-weight: var(--sn-fw-bold);
  letter-spacing: var(--sn-ls-wide); text-transform: uppercase;
  padding: .5em 1.1em; border-radius: var(--sn-radius-pill); box-shadow: var(--sn-shadow-sm);
}
.sn-badge::before { content:""; width:.5em; height:.5em; border-radius:50%; background: var(--sn-green); }

/* Cards redondeadas con sombra suave */
.sn-card { background: var(--sn-white); border-radius: var(--sn-radius-lg); box-shadow: var(--sn-shadow-md); }

/* Precios WooCommerce */
.woocommerce-Price-amount { color: var(--sn-green-dark); font-weight: var(--sn-fw-semibold); }

/* Botones de WooCommerce: ganar a los defaults grises de WC (.woocommerce a.button) */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce .button.alt, .woocommerce #respond input#submit, .woocommerce-page .button {
  background: var(--sn-ink);
  color: var(--sn-white);
  border-radius: var(--sn-radius-sm);
  font-weight: var(--sn-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--sn-ls-wide);
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce .button.alt:hover { background: var(--sn-green); color: var(--sn-white); }
/* boton agregar al carrito de la ficha (alta especificidad para ganar al default de WC) */
.woocommerce div.product form.cart .single_add_to_cart_button {
  background: var(--sn-ink); color: var(--sn-white);
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover { background: var(--sn-green); color: var(--sn-white); }
/* radios/checkboxes con el verde de marca (en vez del violeta #7f54b3 de WooCommerce) */
input[type="radio"], input[type="checkbox"] { accent-color: var(--sn-green); }
/* boton Realizar pedido del checkout */
.woocommerce #place_order, .woocommerce-checkout #place_order { background: var(--sn-green); color: var(--sn-white); }
.woocommerce #place_order:hover, .woocommerce-checkout #place_order:hover { background: var(--sn-ink); color: var(--sn-white); }
/* links de WooCommerce en verde (en vez del violeta) — scopeado al CONTENIDO de Mi Cuenta
   (NO `.woocommerce-account a` a secas: esa clase vive en el <body> y pintaba header/footer/topbar) */
.woocommerce a.woocommerce-button,
.woocommerce-account .woocommerce-MyAccount-navigation a:not(.button),
.woocommerce-account .woocommerce-MyAccount-content a:not(.button) { color: var(--sn-green-dark); }

/* ===== WooCommerce notices (avisos) — estética Sir Neko ===== */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  position: relative;
  display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .9rem;
  margin: 0 0 var(--sn-space-4); padding: 1rem 1.25rem;
  border: none !important; border-radius: var(--sn-radius-lg);
  font-family: var(--sn-font); font-size: .95rem; font-weight: var(--sn-fw-semibold);
  color: var(--sn-ink); line-height: 1.4; list-style: none;
}
/* ícono ::before: de absolute (WC) a inline, al principio */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  position: static; order: -1; top: auto; left: auto; margin: 0;
  font-size: 1.1rem; line-height: 1;
}
/* success (verde menta) */
.woocommerce-message { background: var(--sn-mint-soft); box-shadow: inset 0 0 0 1.5px var(--sn-mint); }
.woocommerce-message::before { color: var(--sn-green-dark); }
/* info (celeste) */
.woocommerce-info { background: var(--sn-sky-soft); box-shadow: inset 0 0 0 1.5px var(--sn-sky); }
.woocommerce-info::before { color: #2c6e9b; }
/* error (blush) */
.woocommerce-error { background: var(--sn-blush-soft); box-shadow: inset 0 0 0 1.5px var(--sn-blush); color: #8a2020; }
.woocommerce-error::before { color: #c0392b; }
/* botón "Ver carrito" alineado a la derecha */
.woocommerce-message .button,
.woocommerce-info .button {
  order: 2; margin: 0 0 0 auto; float: none;
}

/* Ancho del contenido: mas amplio (sensacion full-width, menos margen lateral) */
.grid-container { max-width: 1500px; }
@media (min-width: 768px) { .site-content .content-area, .site-main { padding-left: 0; padding-right: 0; } }

/* FULL-BLEED global: secciones de diseno edge-to-edge en CUALQUIER pagina
   (landing del plugin B2B, bloques alignfull, o la clase utilitaria .sn-fullbleed).
   El texto normal se mantiene en ancho legible dentro de su container. */
.entry-content .snb2b-landing,
.entry-content .snb2b-order-form,
.entry-content .alignfull,
.entry-content > .sn-fullbleed,
.entry-content > .wp-block-cover.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* la herramienta de pedido rapido necesita un padding lateral comodo en full-bleed */
.entry-content .snb2b-order-form { padding-left: clamp(1rem, 4vw, 3rem); padding-right: clamp(1rem, 4vw, 3rem); box-sizing: border-box; }

/* Container del contenido TRANSPARENTE en todo el sitio (sin el wrapper blanco boxed
   de GeneratePress separate-containers): todo sobre el crema, consistente con las
   bandas full-bleed. Las cards/tablas internas mantienen su propio fondo blanco. */
.inside-article, .entry-content { background: transparent !important; box-shadow: none !important; border: none !important; }
.separate-containers .site-main { background: transparent; }
/* el .inside-article no debe recortar el full-bleed */
.inside-article { overflow: visible; }
/* bloques 'wide' un poco mas anchos que el texto, pero centrados */
.entry-content .alignwide { max-width: min(1600px, 94vw); margin-left: auto; margin-right: auto; }

/* En paginas-landing (con la landing del plugin B2B) ocultar el page-header de GP:
   la landing ya trae su propio hero/titulo. */
.inside-article:has(.snb2b-landing) .entry-header,
.inside-article:has(.snb2b-landing) .page-header { display: none; }

/* El hero de la landing B2B trae padding-top alto (pensado para el header alto de
   Barberry). En GP el header es mas bajo → reducimos el espacio vacio superior. */
.snb2b-l-hero { padding-top: 3rem; }

/* ---------- Pedido Rapido (order form B2B) en mobile ----------
   El CSS del plugin trae @media mobile pero LiteSpeed reordena y el !important del
   desktop gana. Aca usamos MAYOR especificidad (gana por especificidad, no por orden)
   + convertimos la tabla en cards para que no haya scroll horizontal. */
@media (max-width: 768px) {
  .snb2b-order-form .snb2b-of-filters .snb2b-of-stock-toggle,
  .snb2b-order-form .snb2b-of-filters button.snb2b-of-export-btn {
    align-self: stretch !important; width: 100% !important; justify-content: center !important;
  }
  .snb2b-order-form { overflow-x: visible !important; }
  .snb2b-order-form .snb2b-of-table thead { display: none; }
  .snb2b-order-form .snb2b-of-table tbody,
  .snb2b-order-form .snb2b-of-table tr,
  .snb2b-order-form .snb2b-of-table td { display: block; }
  .snb2b-order-form .snb2b-of-table tr {
    display: grid; grid-template-columns: 46px 1fr;
    grid-template-areas: "thumb name" "thumb price" "thumb stock" "thumb qty";
    gap: 2px 10px; align-items: center;
    border: 1px solid var(--sn-border); border-radius: var(--sn-radius); padding: 8px 10px; margin-bottom: 8px;
  }
  .snb2b-order-form .snb2b-of-table td { min-width: 0; border: none !important; padding: 0 !important; background: transparent !important; }
  .snb2b-order-form .snb2b-of-table .snb2b-thumb-cell { grid-area: thumb; padding: 0 !important; align-self: center; }
  .snb2b-order-form .snb2b-of-table td:nth-child(2) { grid-area: name; overflow-wrap: anywhere; }
  .snb2b-order-form .snb2b-of-table td:nth-child(3) { grid-area: price; font-weight: 600; }
  .snb2b-order-form .snb2b-of-table td:nth-child(4) { grid-area: stock; display: block; justify-self: start; } /* stock en su propia linea, sin forzar ancho */
  .snb2b-order-form .snb2b-of-table td:nth-child(5) { grid-area: qty; justify-self: start; margin-top: 2px; }
  .snb2b-order-form .snb2b-of-table .snb2b-qty-wrap { display: inline-flex; align-items: center; gap: 0; }
}

/* WhatsApp flotante (Joinchat) por debajo del sticky de producto (z 999) y del
   drawer del carrito (z 1000), para que no los tape. Sigue visible sobre el contenido. */
.joinchat { z-index: 990 !important; }