/*!
* wazo-vars.css — Capa de variables del tema wazo-theme
* ------------------------------------------------------------------
* Estas variables NO están en app.min.css: Jumpseller las inyecta
* en un <style> inline por página (wazo.cl). Sin ellas, app.min.css
* no pinta nada (--color-main, --font-main, --color-background, etc.
* quedan indefinidas y el header navy se ve blanco/roto).
*
* Fuente: /home/me/wazo-ops/ref-jumpseller/home.html (bloques :root y
* [data-bundle-color="..."]). Valores copiados VERBATIM del sitio real.
*
* Orden de carga: Bootstrap -> app.min.css -> wazo-vars.css -> wazo.css
* (las variables se resuelven en cascada; este archivo sólo declara
* custom properties, no pisa reglas de layout).
* Si functions.php enqueuea este archivo con el handle "wazo-vars",
* header.php detecta wp_style_is() y no lo vuelve a imprimir.
*/

/* ================================================================
1. Tokens globales de la tienda (:root)
================================================================ */
:root {
  --theme-icon-style: var(--icon-style-regular);
  --font-main: Karla, sans-serif;
  --font-secondary: Karla, sans-serif;
  --font-store-name: Archivo Black, sans-serif;
  --font-buttons: Karla, sans-serif;
  --font-base-size: 14px;
  --subtitle-size-desktop-number: 0.4;
  --subtitle-size-mobile-number: 0.3;

  --title-size-desktop: var(--title-size-medium-desktop);
  --title-size-mobile: var(--title-size-medium-mobile);
  --subtitle-size-desktop: calc(var(--title-size-desktop) * var(--subtitle-size-desktop-number));
  --subtitle-size-mobile: calc(var(--title-size-mobile) * var(--subtitle-size-mobile-number));

  --title-weight: 500;
  --title-spacing: 0px;
  --title-text-transform: uppercase;

  --description-size-desktop: var(--description-size-medium-desktop);
  --description-size-mobile: var(--description-size-medium-mobile);

  --subtitle-size-small-desktop: calc(var(--font-base-size) * 0.75); /* 12px */
  --subtitle-size-small-mobile: calc(var(--font-base-size) * 0.5); /* 8px */
  --subtitle-size-medium-desktop: calc(var(--font-base-size) * 1); /* 16px */
  --subtitle-size-medium-mobile: calc(var(--font-base-size) * 0.75); /* 12px */
  --subtitle-size-large-desktop: calc(var(--font-base-size) * 1.25); /* 20px */
  --subtitle-size-large-mobile: calc(var(--font-base-size) * 1); /* 16px */
  --subtitle-size-extra-large-desktop: calc(var(--font-base-size) * 1.5); /* 24px */
  --subtitle-size-extra-large-mobile: calc(var(--font-base-size) * 1.25); /* 20px */
  --subtitle-weight: 400;
  --subtitle-spacing: 0px;
  --subtitle-text-transform: uppercase;
  --store-name-size-desktop: var(--store-name-desktop-large);
  --store-name-size-mobile: var(--store-name-mobile-large);
  --store-name-weight: 400;


  --radius-style: 5px;
  --radius-style-adapt: var(--radius-style);
  --radius-style-inner: calc(var(--radius-style) * 0.5);

  --pb-radius-style: var(--radius-style);
  --pb-radius-style-inner: var(--radius-style-inner);


  --article-block-radius-style: var(--radius-style);
  --article-block-radius-style-adapt: var(--radius-style-adapt);




  --button-style: calc(var(--font-base-size) * 0.5);

  --button-transform: uppercase;


  --theme-section-padding: var(--theme-section-padding-large);
  --theme-block-padding: var(--theme-block-padding-large);
  --section-content-margin: calc(-1 * var(--theme-block-padding));
  --section-content-padding: var(--theme-block-padding);
  --theme-block-wrapper-gap: calc(var(--theme-block-padding) * 2);

  --theme-block-padding-inner: calc(var(--font-base-size) * 0.75);

  --theme-border-style: solid;
  --theme-border-thickness: 1px;
  --theme-button-hover-size: 2px;

  --button-font-size-desktop: 12px;
  --button-font-size-mobile: 10px;

  --theme-heading-underline-thickness-desktop: 2px;
  --theme-heading-underline-thickness-mobile: 2px;
  --theme-heading-underline-width-desktop: 130px;
  --theme-heading-underline-width-mobile: 130px;

  --cart-header-logo-height-desktop: 50px;
  --cart-header-logo-height-mobile: 40px;
  --pb-object-fit: cover;



  --pb-padding: calc(var(--font-base-size) * 0.75);

  --pb-alignment: start;

  --pb-font-size-desktop: calc(var(--font-base-size) * 1);
  --pb-font-size-mobile: calc(var(--font-base-size) * 1);

  --pb-name-weight: 500;
  --pb-name-spacing: 0px;
  --pb-name-text-transform: initial;

  --pb-labels-font-size-desktop: calc(var(--font-base-size) * 0.7);
  --pb-labels-font-size-mobile: calc(var(--font-base-size) * 0.7);

  --pb-color-label-status-bg: #FFFFFF;
  --pb-color-label-status-text: #000000;
  --pb-color-label-status-border: rgba(0, 0, 0, 0.1);
  --pb-color-label-new-bg: #007EA7;
  --pb-color-label-new-text: #FFFFFF;
  --pb-image-dimension: var(--aspect-ratio-square);

  --pb-colors-style-outer: 20px;
  --pb-colors-style-inner: 20px;


  --pb-colors-size-desktop: 20px;
  --pb-colors-size-mobile: 16px;


  --pb-actions-font-size-desktop: calc(var(--pb-font-size-desktop) * 2.5);
  --pb-actions-font-size-mobile: calc(var(--pb-font-size-mobile) * 2);

  --pb-card-border-opacity: 0.1;
  --pb-color-wishlist-icon: #000000;
  --pb-color-wishlist-icon-active: #ED0914;
  --pb-color-wishlist-background: #FFFFFF;
  --pb-color-wishlist-border: rgba(0, 0, 0, 0.1);
  --product-page-wishlist-color-icon: #000000;
  --product-page-wishlist-color-icon-active: #ED0914;
  --product-page-wishlist-color-background: #FFFFFF;
  --product-page-wishlist-color-background-active: #FFFFFF;
  --product-page-wishlist-color-border: rgba(0, 0, 0, 0.1);
  --product-page-wishlist-icon-size-small-desktop: calc(var(--font-base-size) * 2);
  --product-page-wishlist-icon-size-small-mobile: calc(var(--font-base-size) * 1.75);
  --product-page-wishlist-icon-size-medium-desktop: calc(var(--font-base-size) * 2.5);
  --product-page-wishlist-icon-size-medium-mobile: calc(var(--font-base-size) * 2.25);
  --product-page-wishlist-icon-size-large-desktop: calc(var(--font-base-size) * 3);
  --product-page-wishlist-icon-size-large-mobile: calc(var(--font-base-size) * 2.75);
  --product-page-wishlist-icon-size-desktop: var(--product-page-wishlist-icon-size-large-desktop);
  --product-page-wishlist-icon-size-mobile: var(--product-page-wishlist-icon-size-large-mobile);
  --pb-color-quickview-icon: #333333;
  --pb-color-quickview-icon-hover: #000000;
  --pb-color-quickview-background: #FFFFFF;
  --pb-color-quickview-border: rgba(51, 51, 51, 0.1);


  --article-block-content-padding: calc(var(--font-base-size) * 0.75);


  --article-block-font-size-desktop: calc(var(--font-base-size) * 1.3125);
  --article-block-font-size-mobile: calc(var(--font-base-size) * 1.125);
  --article-block-line-height: var(--font-base-line-height);
  --article-block-line-height-excerpt: calc(var(--article-block-line-height) * 0.8);

  --article-block-title-weight: 400;
  --article-block-title-spacing: 0px;
  --article-block-title-transform: initial;
  --article-block-border-opacity: 0.1;

  --product-quickview-wishlist-color-icon: #000000;
  --product-quickview-wishlist-color-icon-active: #ED0914;
  --product-quickview-wishlist-color-background: #FFFFFF;
  --product-quickview-wishlist-color-border: rgba(0, 0, 0, 0.1);

  --store-whatsapp-spacing: 1rem;
  --store-whatsapp-color-icon: #FFFFFF;
  --store-whatsapp-color-bg: #25D366;
  --store-whatsapp-color-bg-hover: #128C7E;
  --store-whatsapp-color-message-text: #000000;
  --store-whatsapp-color-message-bg: #FFFFFF;
  --store-whatsapp-color-message-shadow: rgba(0, 0, 0, 0.2);

  --av-popup-color-bg: #FFFFFF;
  --av-popup-color-text: #222222;
  --av-popup-color-button-accept-bg: #329B4F;
  --av-popup-color-button-accept-text: #FFFFFF;
  --av-popup-color-button-reject-bg: #DC2D13;
  --av-popup-color-button-reject-text: #FFFFFF;






  --breadcrumbs-margin-top-desktop: 8px;
  --breadcrumbs-margin-bottom-desktop: 8px;
  --breadcrumbs-margin-top-mobile: 8px;
  --breadcrumbs-margin-bottom-mobile: 8px;
  --breadcrumbs-alignment-desktop: start;
  --breadcrumbs-alignment-mobile: center;

  --color-discount: #D2040F;
  --color-discount-text: #FFFFFF;
  --color-ratings: #FF9F1C;

  --carousel-nav-size: 20px;

  --theme-pb-image-transition: var(--theme-image-zoom);
  --theme-pb-image-transition-hover: var(--theme-image-zoom-hover);

  --mapping-marker-position-top: 10%;
  --mapping-marker-position-left: 10%;
  --mapping-marker-position-top-mobile: 10%;
  --mapping-marker-position-left-mobile: 10%;
  --mapping-marker-size-small-desktop: calc(var(--font-base-size) * 2); /* 32px */
  --mapping-marker-size-small-mobile: calc(var(--font-base-size) * 1.75); /* 28px */
  --mapping-marker-size-medium-desktop: calc(var(--font-base-size) * 2.5); /* 40px */
  --mapping-marker-size-medium-mobile: calc(var(--font-base-size) * 2.25); /* 36px */
  --mapping-marker-size-large-desktop: calc(var(--font-base-size) * 3); /* 48px */
  --mapping-marker-size-large-mobile: calc(var(--font-base-size) * 2.75); /* 44px */
  --mapping-marker-size-desktop: var(--mapping-marker-size-small-desktop);
  --mapping-marker-size-mobile: var(--mapping-marker-size-small-mobile);
  --mapping-marker-color-background: #FFFFFF;
  --mapping-marker-color-icon: #000000;
  --mapping-product-image-width: 70px;
  --mapping-product-image-height: 70px;
  --mapping-product-spacing: calc(var(--section-content-static-padding) * 1.25);
  --mapping-product-align-vertical: center;

  /* Marque component defaults */
  --marquee-gap: calc(var(--section-content-static-padding) * 2);
  --marquee-duration: 10s;
  --marquee-direction: reverse;
  --marquee-scroll-start: 0;
  --marquee-scroll-end: calc(-100% - var(--marquee-gap));
  --marquee-image-size-small-desktop: 50px;
  --marquee-image-size-small-mobile: 40px;
  --marquee-image-size-medium-desktop: 75px;
  --marquee-image-size-medium-mobile: 65px;
  --marquee-image-size-large-desktop: 100px;
  --marquee-image-size-large-mobile: 90px;
  --marquee-image-size-extra-large-desktop: 125px;
  --marquee-image-size-extra-large-mobile: 115px;
  --marquee-image-size-desktop: var(--marquee-image-size-small-desktop);
  --marquee-image-size-mobile: var(--marquee-image-size-small-mobile);
  --marquee-title-size-small-desktop: calc(var(--font-base-size) * 1); /* 16px */
  --marquee-title-size-small-mobile: calc(var(--font-base-size) * 0.75); /* 12px */
  --marquee-title-size-medium-desktop: calc(var(--font-base-size) * 1.25); /* 20px */
  --marquee-title-size-medium-mobile: calc(var(--font-base-size) * 1); /* 16px */
  --marquee-title-size-large-desktop: calc(var(--font-base-size) * 1.5); /* 24px */
  --marquee-title-size-large-mobile: calc(var(--font-base-size) * 1.25); /* 20px */
}

/* ================================================================
2. Bundles de color (fondo + textos por sección)
================================================================ */

/* 2.1 Cuerpo de página / bloques por defecto: fondo blanco, texto navy */
[data-bundle-color="default"] {
  --color-background: #FFFFFF;
  --color-background-contrast: #222222;
  --color-background-contrast-op05: rgba(34, 34, 34, 0.05);
  --color-background-contrast-op3: rgba(34, 34, 34, 0.3);
  --color-background-contrast-op7: rgba(34, 34, 34, 0.7);
  --color-background-op0: rgba(255, 255, 255, 0.0);
  --color-main: #1B2A4A;
  --color-main-op05: rgba(27, 42, 74, 0.05);
  --color-main-op1: rgba(27, 42, 74, 0.1);
  --color-main-op2: rgba(27, 42, 74, 0.2);
  --color-main-op3: rgba(27, 42, 74, 0.3);
  --color-main-op5: rgba(27, 42, 74, 0.5);
  --color-main-op7: rgba(27, 42, 74, 0.7);
  --color-secondary: #B8C4D4;
  --color-secondary-op05: rgba(184, 196, 212, 0.05);
  --color-secondary-op1: rgba(184, 196, 212, 0.1);
  --color-secondary-op3: rgba(184, 196, 212, 0.3);
  --color-secondary-op7: rgba(184, 196, 212, 0.7);
  --color-links: #27AE60;
  --color-links-hover: #1B2A4A;
  --color-links-badge-hover: #2cc36b;
  --color-links-contrast: #FFFFFF;
  --color-button-main-bg: #2ECC71;
  --color-button-main-bg-hover: #5fdb93;
  --color-button-main-text: #FFFFFF;
  --color-button-secondary-bg: #1B2A4A;
  --color-button-secondary-bg-hover: #2c4579;
  --color-button-secondary-text: #FFFFFF;
  --color-border: var(--color-main-op1);
  --color-selection-text: #FFFFFF;
  --color-overlay: #FFFFFF;

  color: var(--color-main);
  background: var(--color-background);
}

/* 2.2 Footer (data-bundle-color="system-1"): fondo navy, texto blanco */
[data-bundle-color="system-1"] {
  --color-background: #2E376A;
  --color-background-contrast: #FFFFFF;
  --color-background-contrast-op05: rgba(255, 255, 255, 0.05);
  --color-background-contrast-op3: rgba(255, 255, 255, 0.3);
  --color-background-contrast-op7: rgba(255, 255, 255, 0.7);
  --color-background-op0: rgba(46, 55, 106, 0.0);
  --color-main: #FFFFFF;
  --color-main-op05: rgba(255, 255, 255, 0.05);
  --color-main-op1: rgba(255, 255, 255, 0.1);
  --color-main-op2: rgba(255, 255, 255, 0.2);
  --color-main-op3: rgba(255, 255, 255, 0.3);
  --color-main-op5: rgba(255, 255, 255, 0.5);
  --color-main-op7: rgba(255, 255, 255, 0.7);
  --color-secondary: #B8C4D4;
  --color-secondary-op05: rgba(184, 196, 212, 0.05);
  --color-secondary-op1: rgba(184, 196, 212, 0.1);
  --color-secondary-op3: rgba(184, 196, 212, 0.3);
  --color-secondary-op7: rgba(184, 196, 212, 0.7);
  --color-links: #2ECC71;
  --color-links-hover: #FFFFFF;
  --color-links-badge-hover: #40d47e;
  --color-links-contrast: #FFFFFF;
  --color-button-main-bg: #2ECC71;
  --color-button-main-bg-hover: #5fdb93;
  --color-button-main-text: #1B2A4A;
  --color-button-secondary-bg: #FFFFFF;
  --color-button-secondary-bg-hover: #ffffff;
  --color-button-secondary-text: #1B2A4A;
  --color-border: var(--color-main-op1);
  --color-selection-text: #222222;
  --color-overlay: #2E376A;

  color: var(--color-main);
  background: var(--color-background);
}

/* 2.3 Header (data-bundle-color="bundle-9485bf9a5e79f"): fondo navy */
[data-bundle-color="bundle-9485bf9a5e79f"] {
  --color-background: #2E376A;
  --color-background-contrast: #FFFFFF;
  --color-background-contrast-op05: rgba(255, 255, 255, 0.05);
  --color-background-contrast-op3: rgba(255, 255, 255, 0.3);
  --color-background-contrast-op7: rgba(255, 255, 255, 0.7);
  --color-background-op0: rgba(46, 55, 106, 0.0);
  --color-main: #FFFFFF;
  --color-main-op05: rgba(255, 255, 255, 0.05);
  --color-main-op1: rgba(255, 255, 255, 0.1);
  --color-main-op2: rgba(255, 255, 255, 0.2);
  --color-main-op3: rgba(255, 255, 255, 0.3);
  --color-main-op5: rgba(255, 255, 255, 0.5);
  --color-main-op7: rgba(255, 255, 255, 0.7);
  --color-secondary: #64748B;
  --color-secondary-op05: rgba(100, 116, 139, 0.05);
  --color-secondary-op1: rgba(100, 116, 139, 0.1);
  --color-secondary-op3: rgba(100, 116, 139, 0.3);
  --color-secondary-op7: rgba(100, 116, 139, 0.7);
  --color-links: #27AE60;
  --color-links-hover: #FFFFFF;
  --color-links-badge-hover: #2cc36b;
  --color-links-contrast: #FFFFFF;
  --color-button-main-bg: #2ECC71;
  --color-button-main-bg-hover: #5fdb93;
  --color-button-main-text: #FFFFFF;
  --color-button-secondary-bg: #2E376A;
  --color-button-secondary-bg-hover: #414e96;
  --color-button-secondary-text: #FFFFFF;
  --color-border: var(--color-main-op1);
  --color-selection-text: #222222;
  --color-overlay: #2E376A;

  color: var(--color-main);
  background: var(--color-background);
}

/* ================================================================
3. Variables del componente header (Jumpseller las inyecta
justo antes de <header class="header header__area">)
================================================================ */
.header__area {
  --theme-max-width: 1620px;
  --header-logo-height-mobile: 40px;
  --header-logo-height-desktop: 40px;

  --header-overlap-opacity: 0.6;
  --header-floating-shadow: 0.25;

  --header-items-font-size-desktop: 14px;
  --header-items-font-size-mobile: 16px;
}

/* Peso, tamaño y transformación de los ítems del header.
En Jumpseller se declaran en el <body>. */
body {
  --header-items-font-weight: 400;
  --header-nav-font-weight: 400;
  --header-nav-font-size-desktop: 13px;
  --header-nav-font-size-mobile: 13px;
  --header-nav-text-transform: uppercase;
}

/* ================================================================
4. Variables del componente footer
================================================================ */
.footer {
  --theme-max-width: 1620px;
  --footer-title-transform: uppercase;
}

/* ================================================================
5. Utilidades añadidas para WordPress (no existen en Jumpseller)
================================================================ */

/* Texto sólo para lectores de pantalla (labels de iconos, skip link). */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link.screen-reader-text:focus {
  position: fixed !important;
  z-index: 100000;
  top: 8px; left: 8px;
  width: auto; height: auto;
  padding: 10px 16px;
  clip: auto;
  background: #00B047;
  color: #fff;
  font-family: var(--font-main, Karla, sans-serif);
  font-size: 14px;
  font-weight: 700;
  border-radius: 5px;
  text-decoration: none;
}

/* WordPress imprime <img class="avatar"> y comentarios por defecto:
el tema no los usa, pero evitamos que rompan el ancho del main. */
.main img { max-width: 100%; height: auto; }