/*
Theme Name:   Flatsome Child
Theme URI:    https://zynixbiolab.com
Description:  Flatsome Child Theme for Zynix Biolab — Research Peptides & Compounds
Author:       Zynix Biolab Dev Team
Author URI:   https://zynixbiolab.com
Template:     flatsome
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  flatsome-child
*/

/* ============================================================
   CUSTOM PROPERTIES — ZYNIX DESIGN SYSTEM
   ============================================================ */
:root {
  /* Brand Colors — Zynix Brand Manual v1.0 */
  --zynix-rose-gold:   #ECC6C0;  /* --rg-1: Zynix Rose accent */
  --zynix-rose-dark:   #B97F75;  /* --rg-2: Rose Deep — CTAs */
  --zynix-rose-light:  #F5DCD8;  /* --rg-3: Rose Light */
  --zynix-nude:        #FAEEEB;  /* --nude: Rose Blush */
  --zynix-offwhite:    #FAF6F3;  /* --off: Off-White */
  --zynix-ivory:       #F2EBE5;  /* --ivory: Ivory Technical */
  --zynix-charcoal:    #1F1A17;  /* --ink: Graphite */
  --zynix-gray:        #6B5E55;  /* --ink-2: Text Gray */
  --zynix-rule:        #F0E2DC;  /* --rule: Hairline */
  --zynix-rule-strong: #DBC3BB;  /* --rule-strong */

  /* Semantic Aliases */
  --color-primary:     var(--zynix-rose-dark);
  --color-primary-dark: var(--zynix-rose-dark);
  --color-primary-light: var(--zynix-rose-gold);
  --color-bg:          var(--zynix-offwhite);
  --color-surface:     var(--zynix-ivory);
  --color-text:        var(--zynix-charcoal);
  --color-text-muted:  var(--zynix-gray);
  --color-border:      var(--zynix-rule);

  /* Typography — Zynix Brand Manual */
  --font-heading:      'Sora', sans-serif;
  --font-body:         'Inter', sans-serif;
  --font-mono:         'IBM Plex Mono', monospace;
  --font-serif:        'Cormorant Garamond', serif;

  /* Spacing */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Border Radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(31, 26, 23, 0.08);
  --shadow-md:  0 4px 16px rgba(31, 26, 23, 0.12);
  --shadow-lg:  0 8px 32px rgba(31, 26, 23, 0.16);
  --shadow-rose: 0 4px 20px rgba(185, 127, 117, 0.30);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* Z-index scale */
  --z-ticker:  100;
  --z-navbar:  200;
  --z-modal:   300;
  --z-toast:   400;
}

/* ============================================================
   GLOBAL BASE
   ============================================================ */

/* Remove Flatsome's default 30px top padding from the page content area */
#content.content-area,
#content.page-wrapper {
  padding-top: 0 !important;
}

/* Collapse empty <p> tags WordPress auto-inserts between shortcodes */
.row.row-main .col-inner > p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  height: 0 !important;
  overflow: hidden;
}
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.25;
  color: var(--zynix-charcoal);
  letter-spacing: -0.02em;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
}

img {
  max-width: 100%;
  height: auto;
}

/* ============================================================
   TICKER BAR
   DOM: .zynix-ticker-wrap > .zynix-ticker (text node, duplicated for loop)
   ============================================================ */
.zynix-ticker-wrap {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 201;
  background: var(--zynix-charcoal);
  overflow: hidden;
  height: 28px;
  display: flex;
  align-items: center;
}

.admin-bar .zynix-ticker-wrap {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .zynix-ticker-wrap { top: 46px; }
}

@media screen and (max-width: 782px) {
  .admin-bar .zynix-ticker-wrap {
    top: 46px;
  }
}

.zynix-ticker {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250, 246, 243, 0.8);
  animation: ticker-scroll 40s linear infinite;
  will-change: transform;
  flex-shrink: 0;
}

.zynix-ticker:hover {
  animation-play-state: paused;
}

@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================================
   NAVBAR — Frosted Glass Premium (56px, always-on)
   Funciona com ou sem header-transparent no Flatsome.
   ============================================================ */

/* ── Header: FIXED full-width, centraliza o wrapper via flex ── */
/* NOTA: NÃO usar transform aqui — quebraria o position:fixed do .stuck */
#header {
  position: fixed !important;
  top: 28px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  transform: none !important;
  z-index: 200 !important;
  display: flex !important;
  justify-content: center !important;
  pointer-events: none !important;
  clip-path: none !important;
}

/* Wrapper (não-stuck): largura = conteúdo real, bounded pelo viewport */
#header .header-wrapper:not(.stuck) {
  width: -moz-max-content !important;
  width: max-content !important;
  max-width: calc(100vw - 40px) !important;
  min-width: 320px !important;
  pointer-events: auto !important;
}

/*
 * FLATSOME STICKY FIX:
 * Quando .header-wrapper recebe .stuck, o Flatsome aplica:
 *   1) animation: stuckMoveDown → translateY(-100%) → header aparece "pela metade"
 *   2) .stuck .hide-for-sticky { display: none } → esconde #masthead e todo o conteúdo
 * Zeramos ambos os efeitos para manter o header sempre visível e estático.
 */

/*
 * FLATSOME STICKY FIX — causa raiz:
 * Quando o usuário scrolla, Flatsome faz .header-wrapper.stuck virar
 * position:fixed; top:0 — posicionado em cima do ticker (z-index 201).
 * O header fica "pela metade": os 28px acima do ticker ficam ocultos.
 *
 * Fix: forçar .header-wrapper.stuck ao mesmo top do #header (28px).
 * Fix secundário: bloquear stuckMoveDown e manter #masthead visível.
 */
#header .header-wrapper.stuck,
.header-wrapper.stuck {
  position: fixed !important;
  top: 28px !important;
  left: 50% !important;
  right: auto !important;
  width: -moz-max-content !important;
  width: max-content !important;
  max-width: calc(100vw - 40px) !important;
  min-width: 320px !important;
  transform: translateX(-50%) !important;
  pointer-events: auto !important;
  animation: none !important;
  transition: none !important;
}

body.admin-bar #header { top: 32px !important; }
body.admin-bar #header .header-wrapper.stuck,
body.admin-bar .header-wrapper.stuck {
  top: 60px !important;
}

body.admin-bar #header .header-wrapper.stuck,
body.admin-bar .header-wrapper.stuck {
  top: 60px !important;
}

@media screen and (max-width: 782px) {
  body.admin-bar #header .header-wrapper.stuck,
  body.admin-bar .header-wrapper.stuck {
    top: 74px !important;
  }
}

/* Forçar #masthead sempre visível — .stuck .hide-for-sticky o oculta */
#header #masthead,
#header .header-main,
#header #masthead.hide-for-sticky,
#header .header-main.hide-for-sticky,
.stuck #masthead,
.stuck .header-main {
  display: flex !important;
  visibility: visible !important;
}

body.admin-bar #header { top: 60px !important; }

@media screen and (max-width: 782px) {
  body.admin-bar #header { top: 74px !important; }
}

/* Empurrar conteúdo para baixo do header fixo */
#wrapper {
  padding-top: 84px !important;
}

body.admin-bar #wrapper {
  padding-top: 116px !important;
}

/* ── Altura compacta — row único ── */
/* ATENÇÃO: overflow: visible — necessário para lupa/search expandir */
#header .header-main,
#header .flex-row.row,
#header .nav-bar {
  min-height: 56px !important;
  height: 56px !important;
  overflow: visible !important;
  align-items: center !important;
}

/* Compactar barra — remover paddings laterais, logo e lupa próximos */
#header .flex-row.row,
#header .nav-bar {
  padding-right: 0 !important;
  padding-left: 20px !important;
}

/* Nav items mais compactos */
.nav > li > a,
a.nav-top-link {
  padding: 0 8px !important;
}

/* Garantir que LIs do nav-right não ultrapassem o header */
#header .nav.nav-right > li {
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
}

#header .nav.nav-right > li > a {
  max-height: 56px !important;
}

/* ── Logo 32px ── */
#header .logo a,
#header .logo {
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
}

#header .logo img {
  height: 32px !important;
  width: auto !important;
  max-width: 140px !important;
  object-fit: contain !important;
  transition: opacity var(--transition-fast) !important;
}

/* ============================================================
   HEADER FROSTED GLASS — rose fosco transparente (Session 8)
   ============================================================ */

#header .header-bg-color,
.header-bg-color {
  background: rgba(236, 198, 192, 0.22) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  box-shadow: 0 1px 0 rgba(185, 127, 117, 0.15), 0 4px 24px rgba(31,26,23,0.08) !important;
  border-bottom: none !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  transition: background 0.3s ease, box-shadow 0.3s ease !important;
}

body.header-scrolled #header .header-bg-color {
  background: rgba(236, 198, 192, 0.45) !important;
  box-shadow: 0 2px 24px rgba(185, 127, 117, 0.15), 0 8px 32px rgba(31,26,23,0.10) !important;
}

/* Logo em cores naturais (rose-gold oficial) — sempre.
   Soft charcoal drop-shadow para legibilidade sobre o header frosted
   pale-rose em ambos os estados (.22 normal e .45 scrolled), sem
   trocar a cor da marca. */
#header .logo img {
  filter: drop-shadow(0 1px 1.5px rgba(31, 26, 23, 0.32))
          drop-shadow(0 0 1px rgba(31, 26, 23, 0.20)) !important;
}

/* Nav text — charcoal sempre */
.nav > li > a,
a.nav-top-link {
  color: var(--zynix-charcoal) !important;
}

.nav > li > a:hover,
a.nav-top-link:hover {
  color: var(--zynix-rose-dark) !important;
}

/* View Catalog removido do header (request usuário) */

/* Login — retangular flush com borda direita do header flutuante */
#header .nav.nav-right li.account-item {
  height: 56px !important;
  align-items: stretch !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important; /* não deixa o botão ser comprimido pelo flex do nav */
}

#header .nav.nav-right li.account-item > a.nav-top-not-logged-in,
#header .nav.nav-right li.account-item > a.nav-top-logged-in {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  height: 56px !important;
  padding: 0 16px !important;
  border: none !important;
  border-left: 1px solid rgba(185, 127, 117, 0.22) !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 12px !important;
  font-family: var(--font-heading) !important;
  letter-spacing: 0.06em !important;
  color: var(--zynix-charcoal) !important;
  transition: background 0.2s ease, border-color 0.3s ease !important;
  line-height: 1 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  width: max-content !important;
}

#header .nav.nav-right li.account-item > a.nav-top-not-logged-in:hover,
#header .nav.nav-right li.account-item > a.nav-top-logged-in:hover {
  background: rgba(185, 127, 117, 0.12) !important;
  border-left-color: rgba(185, 127, 117, 0.40) !important;
  color: var(--zynix-charcoal) !important;
}

/* Botão acompanha a opacidade da barra no scroll */
body.header-scrolled #header .nav.nav-right li.account-item > a.nav-top-not-logged-in,
body.header-scrolled #header .nav.nav-right li.account-item > a.nav-top-logged-in {
  border-left-color: rgba(185, 127, 117, 0.35) !important;
}

/* <span> interno: flex item inline para alinhar com o ícone ::before */
#header li.account-item > a.nav-top-not-logged-in > span,
#header li.account-item > a.nav-top-logged-in > span {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

#header li.account-item > a.nav-top-not-logged-in::before,
#header li.account-item > a.nav-top-logged-in::before {
  display: inline-block !important;
  flex-shrink: 0 !important;
  vertical-align: middle;
}

/* Esconder top-bar extra se existir */
#top-bar.header-top {
  display: none !important;
}

/* prefers-reduced-motion: para o ticker */
@media (prefers-reduced-motion: reduce) {
  .zynix-ticker { animation: none !important; }
}

/* ── Tipografia nav links ── */
.nav > li > a,
a.nav-top-link {
  font-family: var(--font-heading) !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.05em !important;
  text-transform: none !important;
  line-height: 56px !important;
  padding: 0 10px !important;
  white-space: nowrap;
  color: var(--zynix-charcoal) !important;
  transition: color var(--transition-fast) !important;
  cursor: pointer;
}

/* ── Focus states — keyboard navigation ── */
.nav > li > a:focus-visible,
a.nav-top-link:focus-visible {
  outline: 2px solid var(--zynix-rose-gold);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── Hover e active ── */
.nav > li > a:hover,
.nav > li.current-menu-item > a,
.nav > li.current-menu-ancestor > a {
  color: var(--zynix-rose-dark) !important;
}

/* ── Login icon — ícone de pessoa ao lado esquerdo do "Login" ── */
/* Classe real do link de login no Flatsome: nav-top-not-logged-in */
#header a.nav-top-not-logged-in,
#header a.nav-top-logged-in {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* ::before removido — ícone injetado via JS como DOM real (.zynix-login-icon) */
#header a.nav-top-not-logged-in::before,
#header a.nav-top-logged-in::before {
  content: none !important;
}

/* Ícone DOM real — inline à esquerda do texto "Login" */
#header .zynix-login-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
}
#header .zynix-login-icon svg {
  width: 14px !important;
  height: 14px !important;
  stroke: var(--zynix-charcoal) !important;
  display: block !important;
}

/* ============================================================
   HERO ANIMATIONS — entrada elegante no carregamento da página
   ============================================================ */

/* Keyframes compartilhados hero + purity */
@keyframes zynix-fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes zynix-expand-x {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}

@keyframes zynix-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Hero: elementos invisíveis por padrão — animam via observer (re-play ao voltar) */
.zynix-hero__logo,
.zynix-hero__eyebrow,
.zynix-hero__title,
.zynix-hero__body,
.zynix-hero__cta {
  opacity: 0;
}
.zynix-hero__divider {
  opacity: 0;
  transform-origin: left center;
}
.zynix-hero__image {
  opacity: 0;
}

/* Animações disparam quando .zynix-hero recebe .is-visible */
.zynix-hero.is-visible .zynix-hero__logo {
  animation: zynix-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0s both;
}
.zynix-hero.is-visible .zynix-hero__eyebrow {
  animation: zynix-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
}
.zynix-hero.is-visible .zynix-hero__title {
  animation: zynix-fade-up 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}
.zynix-hero.is-visible .zynix-hero__divider {
  animation: zynix-expand-x 0.55s ease 0.62s both;
}
.zynix-hero.is-visible .zynix-hero__body {
  animation: zynix-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.77s both;
}
.zynix-hero.is-visible .zynix-hero__cta {
  animation: zynix-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.92s both;
}
.zynix-hero.is-visible .zynix-hero__image {
  animation: zynix-fade-in 1.2s ease 0.15s both;
}

/* Sem animação para quem prefere movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  .zynix-hero__logo,
  .zynix-hero__eyebrow,
  .zynix-hero__title,
  .zynix-hero__divider,
  .zynix-hero__body,
  .zynix-hero__cta,
  .zynix-hero__image {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ── Nav: sem quebra de linha, itens em row único ── */
#header .nav,
#header .main-nav ul,
#header .flex-row.row {
  flex-wrap: nowrap !important;
  overflow: visible !important;
}

/* Esconder segundo row de nav se Flatsome criar */
#header .header-bottom-bar,
#header .nav-bottom {
  display: none !important;
}

/* ============================================================
   BUTTONS — Rose Gold
   ============================================================ */
.button,
.btn,
button[type="submit"],
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 12px 28px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
}

/* Primary button */
.button,
.btn,
.button.primary,
.btn-primary {
  background: var(--zynix-rose-gold);
  color: #fff !important;
  border-color: var(--zynix-rose-gold);
  box-shadow: var(--shadow-rose);
}

.button:hover,
.btn:hover,
.button.primary:hover,
.btn-primary:hover {
  background: var(--zynix-rose-dark);
  border-color: var(--zynix-rose-dark);
  color: #fff !important;
  box-shadow: 0 6px 28px rgba(185, 127, 117, 0.45);
  transform: translateY(-1px);
}

/* Outline button */
.button.outline,
.btn-outline {
  background: transparent;
  color: var(--zynix-rose-gold) !important;
  border-color: var(--zynix-rose-gold);
  box-shadow: none;
}

.button.outline:hover,
.btn-outline:hover {
  background: var(--zynix-rose-gold);
  color: #fff !important;
}

/* Ghost / text button */
.button.ghost,
.btn-ghost {
  background: transparent;
  color: var(--zynix-charcoal) !important;
  border-color: var(--zynix-nude);
  box-shadow: none;
}

.button.ghost:hover,
.btn-ghost:hover {
  border-color: var(--zynix-rose-gold);
  color: var(--zynix-rose-gold) !important;
}

/* Disabled state */
.button:disabled,
.btn:disabled,
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

/* WooCommerce checkout disabled */
.checkout-disabled .wc-proceed-to-checkout a,
.checkout-disabled .checkout-button {
  background: var(--zynix-nude) !important;
  color: var(--zynix-gray) !important;
  border-color: var(--zynix-nude) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

/* ============================================================
   TRUST BADGES
   ============================================================ */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  align-items: center;
  justify-content: center;
  padding: var(--space-xl) 0;
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--zynix-gray);
  letter-spacing: 0.02em;
}

.trust-badge__icon {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--zynix-rose-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trust-badge__icon::after {
  content: '';
  display: block;
  width: 8px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}

/* ============================================================
   RUO DISCLAIMER BOX
   ============================================================ */
.ruo-disclaimer {
  background: var(--zynix-ivory);
  border: 1px solid var(--zynix-nude);
  border-left: 4px solid var(--zynix-rose-gold);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl);
  margin: var(--space-xl) 0;
  font-size: 13px;
  color: var(--zynix-gray);
  line-height: 1.65;
}

.ruo-disclaimer strong,
.ruo-disclaimer b {
  color: var(--zynix-charcoal);
  font-weight: 600;
}

.ruo-disclaimer__title {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--zynix-rose-dark);
  margin-bottom: var(--space-sm);
  display: block;
}

.ruo-disclaimer--compact {
  padding: var(--space-md) var(--space-lg);
  font-size: 12px;
  border-left-width: 3px;
}

.ruo-disclaimer--alert {
  background: #FFF8F0;
  border-color: #E8B44E;
  border-left-color: #E8B44E;
}

/* ============================================================
   PRODUCT CARDS
   ============================================================ */
.zynix-product-card {
  background: #fff;
  border: 1px solid var(--zynix-nude);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  position: relative;
}

.zynix-product-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.zynix-product-card__badge {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: var(--zynix-rose-gold);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  z-index: 1;
}

.zynix-product-card__image {
  aspect-ratio: 4/3;
  object-fit: cover;
  width: 100%;
  background: var(--zynix-ivory);
}

.zynix-product-card__body {
  padding: var(--space-lg);
}

.zynix-product-card__category {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--zynix-rose-gold);
  display: block;
  margin-bottom: var(--space-xs);
}

.zynix-product-card__title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--zynix-charcoal);
  margin: 0 0 var(--space-sm);
  line-height: 1.3;
}

.zynix-product-card__subtitle {
  font-size: 13px;
  color: var(--zynix-gray);
  margin-bottom: var(--space-md);
  line-height: 1.5;
}

.zynix-product-card__specs {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-lg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs) var(--space-md);
}

.zynix-product-card__specs li {
  font-size: 12px;
  color: var(--zynix-gray);
  display: flex;
  flex-direction: column;
}

.zynix-product-card__specs li strong {
  font-size: 11px;
  font-weight: 600;
  color: var(--zynix-charcoal);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--font-mono);
}

.zynix-product-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.zynix-product-card__price-amount {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  color: var(--zynix-charcoal);
}

.zynix-product-card__price-note {
  font-size: 12px;
  color: var(--zynix-gray);
}

.zynix-product-card__footer {
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--zynix-nude);
  background: var(--zynix-offwhite);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--zynix-gray);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* WooCommerce product grid overrides */
ul.products li.product {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--zynix-nude) !important;
  overflow: hidden !important;
  transition: box-shadow var(--transition-base), transform var(--transition-base) !important;
}

ul.products li.product:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-3px) !important;
}

ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-heading) !important;
  color: var(--zynix-charcoal) !important;
}

ul.products li.product .price {
  color: var(--zynix-rose-dark) !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
}

/* ============================================================
   VENDOR PORTAL BASE STYLES
   ============================================================ */
.vendor-portal-wrap {
  min-height: 100vh;
  background: var(--zynix-offwhite);
}

/* ============================================================
   FOOTER — Dark
   ============================================================ */
#footer,
.footer-wrapper {
  background: var(--zynix-charcoal) !important;
  color: var(--zynix-nude) !important;
}

#footer a,
.footer-wrapper a {
  color: var(--zynix-rose-light) !important;
  transition: color var(--transition-fast);
}

#footer a:hover,
.footer-wrapper a:hover {
  color: var(--zynix-rose-gold) !important;
}

#footer h1,
#footer h2,
#footer h3,
#footer h4,
#footer h5,
#footer h6,
.footer-wrapper h1,
.footer-wrapper h2,
.footer-wrapper h3,
.footer-wrapper h4,
.footer-wrapper h5,
.footer-wrapper h6 {
  color: #fff !important;
}

.footer-bottom {
  background: #141110 !important;
  border-top: 1px solid rgba(185, 127, 117, 0.15) !important;
  font-size: 12px;
  color: var(--zynix-gray) !important;
}

.footer-bottom .ruo-disclaimer {
  background: transparent;
  border: none;
  border-top: 1px solid rgba(185, 127, 117, 0.15);
  border-radius: 0;
  color: var(--zynix-gray);
  font-size: 11px;
  padding: var(--space-md) 0 0;
  margin: var(--space-md) 0 0;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.text-rose-gold  { color: var(--zynix-rose-gold); }
.text-charcoal   { color: var(--zynix-charcoal); }
.text-muted      { color: var(--zynix-gray); }
.text-mono       { font-family: var(--font-mono); }
.text-heading    { font-family: var(--font-heading); }
.bg-ivory        { background-color: var(--zynix-ivory); }
.bg-offwhite     { background-color: var(--zynix-offwhite); }
.border-nude     { border-color: var(--zynix-nude); }

/* ============================================================
   RESPONSIVE UTILITIES
   ============================================================ */
@media (max-width: 768px) {
  .trust-badges {
    gap: var(--space-md);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-lg) 0;
  }

  .zynix-ticker-wrap { height: 24px; }
  .zynix-ticker { animation-duration: 25s; font-size: 9px !important; }

  .zynix-product-card__specs {
    grid-template-columns: 1fr;
  }
}


/* Fix: %0A URL-encoded linebreak in Flatsome hero title shortcodes */
.title-inner,
.ux-title .title-inner {
  white-space: pre-line;
}

/* ── Zynix: Hide empty shop sidebar ── */
.woocommerce-page .sidebar-inner,
.shop-sidebar,
#shop-sidebar,
.col-sidebar,
[class*="shop"][class*="sidebar"] { display: none !important; }

/* v1 fix (20/07/2026, .bak-categories-shopsidebar-20jul): same bug/fix as
   NYsub — the rule above was added back when #shop-sidebar had zero
   widgets assigned, hiding it in its normal inline column (correct — the
   grid was widened to 100% to compensate). But #shop-sidebar is the SAME
   DOM node Flatsome reuses inside the mobile "Filter" off-canvas panel
   (.mfp-content, triggered by .filter-button) — this blanket
   `display:none` was also killing it there, so the panel opened but
   showed nothing. Now that a Product Categories widget is assigned to
   Shop Sidebar (wp-admin > Appearance > Widgets), restore display
   specifically inside the off-canvas panel. Unlike NYsub, Zynix is a
   light theme — Flatsome's default (unstyled) off-canvas background is
   already near-white, so no dark-mode override is needed here, just the
   display restore. Also restores the widget's own title span, which
   carries a second ".shop-sidebar" class that independently matched the
   same blanket rule. */
.mfp-content #shop-sidebar { display: block !important; }
.mfp-content #shop-sidebar .widget-title.shop-sidebar { display: block !important; }

/* v1 fix (20/07/2026, .bak-categories-shopsidebar-20jul): the sitewide
   `a{color:var(--color-primary)}` default (dusty rose #B97F75, meant as a
   decorative accent, not body-text contrast) left the new category list
   at ~3.3:1 on the panel's near-white background — below the 4.5:1
   minimum. Same fix already used elsewhere in this file for the exact
   same reason ("Nav text — charcoal sempre"): legible charcoal by
   default, rose accent reserved for hover/focus. */
.mfp-content #shop-sidebar .product-categories a {
  color: var(--zynix-charcoal) !important;
}
.mfp-content #shop-sidebar .product-categories a:hover,
.mfp-content #shop-sidebar .product-categories a:focus {
  color: var(--zynix-rose-dark) !important;
}

.woocommerce-page .col-main,
.woocommerce ul.products,
.woocommerce-page .main-content { width: 100% !important; max-width: 100% !important; }

/* Hide WooCommerce breadcrumb on shop */
.woocommerce .woocommerce-breadcrumb { display: none; }

/* Style WooCommerce product titles with Zynix palette */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Sora', sans-serif !important;
  font-weight: 400 !important;
  color: #1F1A17 !important;
}
.woocommerce ul.products li.product .price { color: #B97F75 !important; font-family: 'Inter', sans-serif !important; }
.woocommerce ul.products li.product .woocommerce-loop-category__title { color: #6B5E55 !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 9px !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; }

/* ============================================================
   FOOTER SOCIAL ICONS
   ============================================================ */
.zynix-footer-social {
  display: flex;
  align-items: center;
  gap: 20px;
}

.zynix-footer-social a {
  color: var(--zynix-gray) !important;
  font-size: 16px;
  line-height: 1;
  transition: color var(--transition-fast);
  text-decoration: none;
}

.zynix-footer-social a:hover {
  color: var(--zynix-rose-gold) !important;
}

.zynix-footer-social .zynix-social-svg {
  vertical-align: middle;
  display: inline-block;
}

/* ============================================================
   MEGA-MENU PANELS
   ============================================================ */
#zynix-mm-backdrop {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0; /* recalculated by JS */
  background: transparent; /* sem escurecer a tela / sem linha de costura */
  z-index: 198;
}

#zynix-mm-container {
  display: none;
  position: fixed;
  left: 0;       /* left/width recalculados por JS p/ casar com a barra do header */
  top: 0;        /* recalculated by JS */
  z-index: 199;
  /* Vidro escuro fumê — deixa a hero/fundo aparecer atrás */
  background: rgba(24, 20, 18, 0.62);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-top: none;
  border-radius: 0 0 14px 14px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(20, 16, 14, 0.34);
  animation: zynix-mm-in 0.18s ease both;
}

/* ---- Texto sobre o vidro escuro do mega-menu (contraste) ---- */
#zynix-mm-container .zynix-mm-products li a {
  color: var(--zynix-offwhite) !important;
}
#zynix-mm-container .zynix-mm-products li a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--zynix-rose-gold) !important;
}
#zynix-mm-container .zynix-mm-prod-arrow { color: var(--zynix-rose-gold); }
#zynix-mm-container .zynix-mm-featured-title { color: var(--zynix-offwhite); }
#zynix-mm-container .zynix-mm-explore {
  color: var(--zynix-rose-gold) !important;
  border-bottom-color: rgba(255, 255, 255, 0.20);
}
#zynix-mm-container .zynix-mm-explore:hover {
  color: #fff !important;
  border-bottom-color: rgba(255, 255, 255, 0.5);
}
#zynix-mm-container .zynix-mm-featured-link { color: var(--zynix-rose-gold) !important; }
#zynix-mm-container .zynix-mm-featured-link:hover { color: #fff !important; }

@keyframes zynix-mm-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.zynix-mm-panel {
  display: none;
}

.zynix-mm-panel.is-active {
  display: block;
}

.zynix-mm-inner {
  display: grid;
  grid-template-columns: 1fr 320px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 36px 40px 32px;
  gap: 56px;
}

/* Left panel */
.zynix-mm-left {
  display: flex;
  flex-direction: column;
}

.zynix-mm-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--zynix-rose-gold);
  margin-bottom: 16px;
  display: block;
}

.zynix-mm-products {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.zynix-mm-products li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--zynix-charcoal) !important;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none !important;
  transition: background var(--transition-fast), color var(--transition-fast);
  cursor: pointer;
}

.zynix-mm-products li a:focus-visible,
.zynix-mm-explore:focus-visible,
.zynix-mm-featured-link:focus-visible {
  outline: 2px solid var(--zynix-rose-gold);
  outline-offset: 2px;
  border-radius: 3px;
}

.zynix-mm-products li a:hover {
  background: var(--zynix-offwhite);
  color: var(--zynix-rose-dark) !important;
}

.zynix-mm-prod-arrow {
  font-size: 12px;
  opacity: 0;
  color: var(--zynix-rose-gold);
  transform: translateX(-4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.zynix-mm-products li a:hover .zynix-mm-prod-arrow {
  opacity: 1;
  transform: translateX(0);
}

.zynix-mm-explore {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--zynix-rose-dark) !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--zynix-rule);
  width: fit-content;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.zynix-mm-explore:hover {
  color: var(--zynix-charcoal) !important;
  border-bottom-color: var(--zynix-charcoal);
}

/* Right panel */
.zynix-mm-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.zynix-mm-image-placeholder {
  background: var(--zynix-ivory);
  border: 1px dashed var(--zynix-rule-strong);
  border-radius: var(--radius-md);
  height: 156px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.zynix-mm-image-placeholder span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zynix-rule-strong);
}

/* Slot de mídia (vídeo) do mega-menu — vial inteiro visível (contain).
   Fundo no tom rose do próprio vídeo p/ a letterbox ficar imperceptível. */
.zynix-mm-media {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
  background: #F1B7B0;
}

.zynix-mm-video,
.zynix-mm-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: center;
}

/* Zoom-in suave da imagem enquanto a aba do mega-menu está aberta */
@keyframes zynix-mm-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.12); }
}
.zynix-mm-panel.is-active .zynix-mm-img {
  animation: zynix-mm-zoom 7s ease-out forwards;
}
@media (prefers-reduced-motion: reduce) {
  .zynix-mm-panel.is-active .zynix-mm-img { animation: none; }
}

.zynix-mm-featured {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.zynix-mm-featured-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--zynix-rose-gold);
}

.zynix-mm-featured-title {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  color: var(--zynix-charcoal);
  margin: 0;
  line-height: 1.3;
}

.zynix-mm-featured-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--zynix-rose-dark) !important;
  text-decoration: none !important;
  transition: color var(--transition-fast);
}

.zynix-mm-featured-link::after {
  content: '\2192';
  transition: transform var(--transition-fast);
}

.zynix-mm-featured-link:hover {
  color: var(--zynix-charcoal) !important;
}

.zynix-mm-featured-link:hover::after {
  transform: translateX(3px);
}

/* Active trigger highlight */
.nav .zynix-mm-trigger-active > a,
.nav-list .zynix-mm-trigger-active > a {
  color: var(--zynix-rose-gold) !important;
}

/* ============================================================
   FULL-WIDTH LAYOUT — override Flatsome site_width (default 1080px)
   ============================================================
   Flatsome page hierarchy:
     #content > .row.row-main > .col > .col-inner > .section
   .row.row-main is the page content wrapper and must NOT be constrained.
   Inner rows inside sections are constrained for readability.
   ============================================================ */

/* Inner rows inside sections — constrain content for readability */
.row {
  max-width: 1400px !important;
  width: 100% !important;
}

/* Page content wrapper — double-class selector beats .row above */
.row.row-main {
  max-width: none !important;
  width: 100% !important;
}

/* Remove side padding from col/col-inner so sections fill edge-to-edge */
.row.row-main > .col,
.row.row-main > .col > .col-inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Header/footer containers */
.container,
.container-width,
.full-width .ubermenu-nav {
  max-width: 1400px !important;
  width: 100% !important;
}

/* ============================================================
   HERO SECTION — two-column homepage hero (Session 6 redesign)
   ============================================================ */

.zynix-hero {
  width: 100%;
  /* overflow-x stays hidden for the .zynix-hero__image 100vw full-bleed
     trick below; overflow-y is visible so that on short/intermediate
     window heights the CTA spills below the fold instead of being
     decapitated by a hard clip (bug 4 go-live fix). The max-height media
     queries further down shrink the fixed-size content so it fits inside
     100vh on realistic laptop window heights without needing to spill. */
  overflow-x: hidden;
  overflow-y: visible;
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 100svh;
  /* Slide the hero up behind the fixed ticker(28px)+header(56px) so the
     video fills the ENTIRE first viewport. The #wrapper has padding-top:84px
     which pushes content down; this negative margin cancels it for the hero
     ONLY — sections below stay correctly positioned. */
  margin-top: -84px;
}

/* SCRIM — VERY LIGHT directional vignette only. The frosted glass panel on
   .zynix-hero__content does the heavy lifting for legibility, so this stays
   subtle: a gentle ivory lift on the left that fades to fully clear over the
   scientist on the right, keeping her crisp and the look luxe/minimal. */
.zynix-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      105deg,
      rgba(250, 246, 244, 0.34) 0%,
      rgba(250, 246, 244, 0.24) 30%,
      rgba(250, 246, 244, 0.10) 55%,
      rgba(250, 246, 244, 0.00) 78%
    );
}

.zynix-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  /* top padding (~header+ticker height) keeps the vertically-centered
     content optically balanced and never tucked under the fixed header */
  padding: 84px 56px 0;
  box-sizing: border-box;
}

.zynix-hero__content {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
  /* Premium frosted-glass panel: very transparent fill, real blur does the
     contrast work so the text reads cleanly over the bright video without a
     muddy wash. Hairline rose border + soft shadow for a luxe lift. */
  padding: 44px 48px 48px;
  border-radius: 16px;
  background: rgba(250, 246, 244, 0.34);
  -webkit-backdrop-filter: blur(12px) saturate(118%);
  backdrop-filter: blur(12px) saturate(118%);
  border: 1px solid rgba(185, 127, 117, 0.18);
  box-shadow:
    0 18px 50px -20px rgba(31, 26, 23, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Logo acima do eyebrow na hero */
.zynix-hero__logo {
  height: 180px;
  width: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  margin-bottom: 28px;
  /* Keep the OFFICIAL rose-gold logo colour; a soft charcoal drop-shadow
     lifts it off the pale frosted panel so it reads clearly. */
  filter: drop-shadow(0 1px 2px rgba(31, 26, 23, 0.30))
          drop-shadow(0 0 1px rgba(31, 26, 23, 0.18));
}

.zynix-hero__eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700; /* heavier weight for clear legibility on the frosted panel */
  letter-spacing: 0.16em;
  color: var(--zynix-rose-dark);
  text-transform: uppercase;
  margin: 0 0 20px;
  line-height: 1;
  text-align: center; /* centred under the (centred) logo above it */
}

.zynix-hero__title {
  font-family: var(--font-serif) !important;
  font-size: clamp(42px, 4.2vw, 60px) !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  color: var(--zynix-charcoal) !important;
  margin: 0 0 20px !important;
  letter-spacing: -0.01em !important;
}

.zynix-hero__accent {
  font-style: italic;
  color: var(--zynix-rose-dark);
}

.zynix-hero__divider {
  width: 40px;
  height: 2px;
  background: var(--zynix-rose-dark);
  border: none;
  margin: 0 0 24px;
  flex-shrink: 0;
}

.zynix-hero__body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
  color: var(--zynix-gray);
  margin: 0 0 36px;
  max-width: 420px;
}

.zynix-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--zynix-rose-dark);
  color: #fff !important;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0 32px;
  height: 48px;
  border-radius: 6px;
  text-decoration: none !important;
  transition: background var(--transition-fast), transform 80ms ease;
  align-self: flex-start;
}

.zynix-hero__cta:hover {
  background: #a36e66;
  color: #fff !important;
}

.zynix-hero__cta:active {
  transform: scale(0.98);
}

/* Imagem/vídeo de hero — camada de fundo full-bleed atrás do conteúdo.
   NOTE: este elemento está aninhado dentro de .zynix-hero__inner (max-width
   1240px, position:relative), então seu bloco contêiner é o inner — não a
   section. Para preencher TODA a largura da viewport usamos left:50% +
   width:100vw + translateX(-50%), ignorando o clamp horizontal do inner. */
.zynix-hero__image {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  z-index: 0;
  border-radius: 0;
  overflow: hidden;
  background-color: var(--zynix-ivory);
}

/* Vídeo de hero — preenche toda a seção como fundo */
.zynix-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  display: block;
  border-radius: 0;
}

/* Admin bar offset — wrapper padding-top is 116px (84px header + 32px bar) */
body.admin-bar .zynix-hero {
  height: calc(100vh - 32px);
  height: calc(100svh - 32px);
  min-height: calc(100svh - 32px);
  margin-top: -116px;
}
body.admin-bar .zynix-hero__inner {
  padding-top: 116px;
}

/* Short-viewport fix (bug 4): the hero content's fixed-size elements (logo,
   padding, gaps) add up to ~756px tall at desktop widths. On a shrunk
   browser window (short but still ≥901px wide, so the max-width:900px
   mobile layout below doesn't kick in) that no longer fits inside 100vh,
   which used to clip the CTA button. Shrink the fixed-size pieces so
   everything fits within realistic laptop window heights again. No
   max-width here — this reproduces at any desktop width, e.g. 1440×700. */
@media (max-height: 760px) {
  .zynix-hero__content { padding: 26px 48px 30px; }
  .zynix-hero__logo { height: 110px; margin-bottom: 14px; }
  .zynix-hero__eyebrow { margin-bottom: 12px; }
  .zynix-hero__title { margin-bottom: 12px !important; }
  .zynix-hero__divider { margin-bottom: 14px; }
  .zynix-hero__body { margin-bottom: 18px; }
}

@media (max-height: 620px) {
  .zynix-hero__content { padding: 18px 40px 22px; }
  .zynix-hero__logo { height: 72px; margin-bottom: 8px; }
  .zynix-hero__body { display: none; }
}

@media (max-width: 900px) {
  .zynix-hero {
    height: auto;
    min-height: 100svh;
  }
  .zynix-hero__inner {
    justify-content: center;
    padding: 84px 40px 40px;
  }
  .zynix-hero__content {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    align-items: center;
  }
  .zynix-hero__body {
    margin-left: auto;
    margin-right: auto;
  }
  .zynix-hero__cta {
    align-self: center;
  }
  /* scrim mais uniforme no mobile (texto centralizado) */
  .zynix-hero::after {
    background: linear-gradient(
      180deg,
      rgba(250, 246, 244, 0.78) 0%,
      rgba(250, 246, 244, 0.70) 45%,
      rgba(250, 246, 244, 0.62) 100%
    );
  }
}

@media (max-width: 480px) {
  .zynix-hero__inner {
    padding: 84px 22px 32px;
  }
  .zynix-hero__title {
    font-size: clamp(30px, 8vw, 40px) !important;
  }
  .zynix-hero__body {
    font-size: 13px;
  }
}


/* ============================================================
   SCROLL SNAP — ticker como âncora no topo + purity como snap 2
   ============================================================
   Dois snap points:
   1) .zynix-ticker-wrap → scroll=0 → âncora o page load no topo
   2) .zynix-purity-section → scroll=665 → trava na seção Purity
   Isso resolve o bug de página carregar já na seção 2.
   ============================================================ */

html {
  scroll-snap-type: y proximity;
  scroll-padding-top: 84px;
}

.zynix-hero {
  scroll-snap-align: start;
}

/* Purity: snap suave, sem travar obrigatoriamente */
.zynix-purity-section {
  scroll-snap-align: start;
}

@media (max-width: 768px) {
  html { scroll-snap-type: none; }
}

/* ============================================================
   PURITY SECTION — full-bleed 100vh, texto sobre a imagem
   ============================================================ */

.zynix-purity-section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  /* Fase C, item 3 (20/jul): sem cor de base a seção fica transparente até o
     background-image terminar de carregar, deixando aparecer o branco puro
     do #wrapper do Flatsome por baixo — visível como uma faixa branca entre
     a hero e esta seção em conexões lentas / primeira pintura. Ivory da
     marca como piso resolve a emenda sem depender do timing da imagem. */
  background-color: var(--zynix-ivory);
}

.zynix-purity__image {
  position: absolute;
  inset: 0;
  background-image: url('/wp-content/uploads/zynix-brand/zynix-purity-section.png');
  background-size: cover;
  background-position: center left;
  background-repeat: no-repeat;
  background-color: var(--zynix-ivory);
}

/* Texto posicionado sobre a metade direita da imagem */
.zynix-purity__content {
  position: absolute;
  right: 0;
  top: 84px; /* abaixo do cabeçalho sticky */
  bottom: 0;
  width: 44%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 72px 0 40px;
  /* A imagem tem fundo claro à direita — sem overlay necessário */
}

/* ── Tipografia ── */
.zynix-purity__title {
  font-family: var(--font-serif) !important;
  font-size: clamp(38px, 3.6vw, 58px) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  color: var(--zynix-charcoal) !important;
  margin: 0 0 20px !important;
  letter-spacing: -0.01em !important;
}

.zynix-purity__accent {
  font-style: italic;
  color: var(--zynix-rose-dark);
}

.zynix-purity__divider {
  width: 40px;
  height: 2px;
  background: var(--zynix-rose-dark);
  border: none;
  margin: 0 0 28px;
  flex-shrink: 0;
  transform-origin: left center;
}

/* Fonte mais elegante para o texto longo: Cormorant Garamond */
.zynix-purity__body {
  font-family: var(--font-serif);
  font-size: 17px;
  font-style: italic;
  line-height: 1.75;
  color: var(--zynix-gray);
  margin: 0 0 40px;
  max-width: 400px;
}

.zynix-purity__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--zynix-rose-dark);
  color: #fff !important;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0 28px;
  height: 52px;
  border-radius: 8px;
  text-decoration: none !important;
  transition: background var(--transition-fast), transform 80ms ease;
  align-self: flex-start;
}

.zynix-purity__cta:hover {
  background: #a36e66;
  color: #fff !important;
}

.zynix-purity__cta:active {
  transform: scale(0.98);
}

.zynix-purity__cta-icon {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.zynix-purity__cta-icon svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
}

/* ============================================================
   ANIMAÇÕES DE ENTRADA — fade-up suave ao entrar na seção
   ============================================================ */

/* Keyframes declarados globalmente (linha ~357) — sem duplicata aqui */

/* Estado inicial: invisíveis */
.zynix-purity__title,
.zynix-purity__divider,
.zynix-purity__body,
.zynix-purity__cta {
  opacity: 0;
}

/* Disparado pelo JS (IntersectionObserver) quando seção entra na tela */
.zynix-purity-section.is-visible .zynix-purity__title {
  animation: zynix-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

.zynix-purity-section.is-visible .zynix-purity__divider {
  animation: zynix-expand-x 0.55s ease 0.45s forwards;
  transform-origin: left center;
}

.zynix-purity-section.is-visible .zynix-purity__body {
  animation: zynix-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
}

.zynix-purity-section.is-visible .zynix-purity__cta {
  animation: zynix-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.72s forwards;
}

/* Sem animação para quem prefere movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  .zynix-purity__title,
  .zynix-purity__divider,
  .zynix-purity__body,
  .zynix-purity__cta {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .zynix-purity__content {
    width: 50%;
    padding: 0 48px 0 32px;
  }
}

@media (max-width: 768px) {
  html { scroll-snap-type: none; } /* desativa snap em mobile — UX melhor */

  .zynix-purity-section {
    height: auto;
    min-height: 100svh;
  }

  .zynix-purity__image {
    position: relative;
    height: 50vh;
    min-height: 240px;
  }

  .zynix-purity__content {
    position: relative;
    top: auto; bottom: auto;
    width: 100%;
    padding: 48px 32px;
  }

  /* Mostrar texto normalmente em mobile (sem animação de posição) */
  .zynix-purity-section.is-visible .zynix-purity__title,
  .zynix-purity-section.is-visible .zynix-purity__body,
  .zynix-purity-section.is-visible .zynix-purity__cta {
    animation-duration: 0.5s;
  }
}

@media (max-width: 480px) {
  .zynix-purity__content {
    padding: 40px 20px;
  }
  .zynix-purity__title {
    font-size: clamp(30px, 8vw, 42px) !important;
  }
  .zynix-purity__body {
    font-size: 15px;
  }
}

/* ============================================================
   TRUST BADGES BAR — 5-column strip below hero
   ============================================================ */

.zynix-trust-bar {
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(236, 198, 192, 0.10) 0%, rgba(236, 198, 192, 0) 55%),
    linear-gradient(180deg, var(--zynix-offwhite) 0%, #F6ECE8 100%);
  border-top: 1px solid rgba(236, 198, 192, 0.35);
  border-bottom: 1px solid var(--zynix-rule);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(31, 26, 23, 0.03);
  padding: 48px 0;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.zynix-trust-bar.is-visible {
  opacity: 1;
  transform: none;
}

.zynix-trust-bar__inner {
  display: flex;
  align-items: flex-start;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 48px;
}

.zynix-trust-bar__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1;
  padding: 0 28px;
}

.zynix-trust-bar__item--has-divider {
  border-left: 1px solid rgba(219, 195, 187, 0.55);
}

.zynix-trust-bar__icon {
  position: relative;
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border: 1px solid transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 120% at 30% 25%, rgba(255, 255, 255, 0.9), rgba(236, 198, 192, 0.12) 70%),
    rgba(236, 198, 192, 0.10);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    0 4px 12px -6px rgba(185, 127, 117, 0.45);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
/* anel foil rose-gold */
.zynix-trust-bar__icon::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  padding: 1px;
  background: linear-gradient(140deg, #F3D9D3, var(--zynix-rose-dark) 60%, rgba(236, 198, 192, 0.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.zynix-trust-bar__item:hover .zynix-trust-bar__icon {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    0 8px 18px -8px rgba(185, 127, 117, 0.55);
}

.zynix-trust-bar__icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--zynix-rose-dark);
}

.zynix-trust-bar__text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 5px;
}

.zynix-trust-bar__label {
  display: block;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--zynix-charcoal);
  line-height: 1;
}

.zynix-trust-bar__body {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--zynix-gray);
  display: block;
}

@media (max-width: 1024px) {
  .zynix-trust-bar__inner {
    flex-wrap: wrap;
    padding: 0 24px;
  }
  .zynix-trust-bar__item {
    flex: 0 0 50%;
    padding: 16px 20px;
    border-left: none !important;
  }
  .zynix-trust-bar__item:nth-child(n+3) {
    border-top: 1px solid var(--zynix-rule);
  }
}

@media (max-width: 480px) {
  .zynix-trust-bar__item {
    flex: 0 0 100%;
  }
  .zynix-trust-bar__item:nth-child(n+2) {
    border-top: 1px solid var(--zynix-rule);
    border-left: none !important;
  }
}

/* ============================================================
   SOCIAL SECTION — premium, abaixo da strip PURITY (Onda A)
   ============================================================ */

.zynix-social {
  background: linear-gradient(180deg, #F6ECE8 0%, var(--zynix-offwhite) 100%);
  border-bottom: 1px solid var(--zynix-rule);
  padding: 64px 0 68px;
}

.zynix-social__inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 48px;
  text-align: center;
}

.zynix-social__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--zynix-rose-dark);
  margin: 0 0 10px;
}

.zynix-social__title {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--zynix-charcoal);
  margin: 0 0 32px;
  line-height: 1.2;
}

.zynix-social__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.zynix-social__link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--zynix-charcoal);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.zynix-social__icon {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--zynix-rose-dark);
  background:
    radial-gradient(120% 120% at 30% 25%, rgba(255, 255, 255, 0.95), rgba(236, 198, 192, 0.14) 72%),
    rgba(236, 198, 192, 0.10);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.85),
    0 6px 16px -8px rgba(185, 127, 117, 0.5);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s ease,
              color 0.3s ease,
              background 0.35s ease;
}
/* anel foil rose-gold */
.zynix-social__icon::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  padding: 1px;
  background: linear-gradient(140deg, #F3D9D3, var(--zynix-rose-dark) 60%, rgba(236, 198, 192, 0.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.zynix-social__name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--zynix-gray);
  transition: color 0.3s ease;
}

.zynix-social__link:hover {
  transform: translateY(-3px);
}
.zynix-social__link:hover .zynix-social__icon {
  color: #fff;
  background: linear-gradient(140deg, var(--zynix-rose-gold), var(--zynix-rose-dark));
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    0 12px 22px -10px rgba(185, 127, 117, 0.7);
}
.zynix-social__link:hover .zynix-social__name {
  color: var(--zynix-charcoal);
}
.zynix-social__link:focus-visible {
  outline: 2px solid var(--zynix-rose-dark);
  outline-offset: 4px;
  border-radius: 8px;
}

@media (max-width: 600px) {
  .zynix-social {
    padding: 52px 0 54px;
  }
  .zynix-social__inner {
    padding: 0 24px;
  }
  .zynix-social__links {
    gap: 18px;
  }
  .zynix-social__icon {
    width: 56px;
    height: 56px;
  }
}

/* ============================================================
   HOMEPAGE — sem preços exibidos
   ============================================================ */

body.home .price,
body.home .woocommerce-Price-amount,
body.home ins .amount,
body.home del .amount,
body.home .product-price {
  display: none !important;
}

/* ============================================================
   ESCONDER BANNERS FLATSOME NA HOMEPAGE
   ux-banner + banner (classe real no Flatsome v3/v4) + banner-inner
   ============================================================ */

body.home .row.row-main .ux-banner,
body.home .row.row-main .col-inner > .banner,
body.home .row.row-main .banner-inner,
body.home .row.row-main .ux-banner-overlay {
  display: none !important;
}

/* ============================================================
   FEATURED COMPOUNDS — grade de produtos (Session 7)
   ============================================================ */

.zynix-featured {
  background: var(--zynix-offwhite);
  padding: 96px 0 80px;
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.zynix-featured.is-visible {
  opacity: 1;
  transform: none;
}

.zynix-featured__inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 48px;
}

.zynix-featured__header {
  text-align: center;
  margin-bottom: 56px;
}

.zynix-featured__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--zynix-rose-dark);
  text-transform: uppercase;
  margin: 0 0 16px;
}

.zynix-featured__title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 400;
  color: var(--zynix-charcoal);
  line-height: 1.15;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

.zynix-featured__subtitle {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--zynix-gray);
  line-height: 1.6;
  max-width: 440px;
  margin: 0 auto;
}

/* trilho horizontal de cards */
.zynix-featured__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 8px;
  margin-bottom: 28px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.zynix-featured__track::-webkit-scrollbar { display: none; }

.zynix-featured__card {
  flex: 0 0 clamp(280px, 25vw, 330px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--zynix-rule);
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.zynix-featured__card:hover {
  box-shadow: 0 18px 40px -24px rgba(31, 26, 23, 0.35);
  transform: translateY(-3px);
}

/* stagger animação nos cards */
.zynix-featured.is-visible .zynix-featured__card {
  animation: zynix-fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--card-index, 0) * 60ms + 120ms);
}

.zynix-featured__card-head {
  padding: 22px 22px 0;
}
.zynix-featured__card-name {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 600;
  color: var(--zynix-charcoal);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}
.zynix-featured__rx {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--zynix-rose-dark);
  vertical-align: super;
  margin-left: 4px;
}
.zynix-featured__card-cat {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--zynix-gray);
  text-transform: uppercase;
  margin: 8px 0 0;
}

.zynix-featured__card-media {
  display: block;
  margin-top: 16px;
  background: var(--zynix-ivory);
  aspect-ratio: 1 / 1;
}
.zynix-featured__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.zynix-featured__card-price {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  color: var(--zynix-charcoal);
  padding: 18px 22px 0;
}
.zynix-featured__card-price .woocommerce-Price-amount { color: inherit; }

.zynix-featured__card-actions {
  display: flex;
  gap: 10px;
  padding: 16px 22px 0;
}
.zynix-featured__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.zynix-featured__btn--primary {
  background: var(--zynix-rose-dark);
  color: #fff;
}
.zynix-featured__btn--primary:hover {
  background: var(--zynix-charcoal);
  color: #fff;
}
.zynix-featured__btn--ghost {
  background: transparent;
  color: var(--zynix-charcoal);
  border: 1px solid var(--zynix-rule-strong);
}
.zynix-featured__btn--ghost:hover {
  border-color: var(--zynix-rose-dark);
  color: var(--zynix-rose-dark);
}
.zynix-featured__btn:focus-visible {
  outline: 2px solid var(--zynix-rose-gold);
  outline-offset: 2px;
}

.zynix-featured__card-foot {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--zynix-gray);
  text-transform: uppercase;
  text-align: center;
  padding: 16px 22px 18px;
}

/* setas de navegação */
.zynix-featured__nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 36px;
}
.zynix-featured__arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--zynix-rule-strong);
  background: #fff;
  color: var(--zynix-charcoal);
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.zynix-featured__arrow:hover {
  background: var(--zynix-rose-dark);
  color: #fff;
  border-color: var(--zynix-rose-dark);
}
.zynix-featured__arrow:focus-visible {
  outline: 2px solid var(--zynix-rose-gold);
  outline-offset: 2px;
}

.zynix-featured__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--zynix-rose-dark);
  text-decoration: none;
  cursor: pointer;
  transition: gap 0.2s ease, color 0.2s ease;
}
.zynix-featured__cta:hover {
  color: var(--zynix-charcoal);
  gap: 14px;
}
.zynix-featured__cta:focus-visible {
  outline: 2px solid var(--zynix-rose-gold);
  outline-offset: 4px;
}

@media (max-width: 1024px) {
  .zynix-featured__inner {
    padding: 0 24px;
  }
}
@media (max-width: 600px) {
  .zynix-featured {
    padding: 64px 0 56px;
  }
  .zynix-featured__card {
    flex-basis: 78vw;
  }
}

/* ============================================================
   PROCESS STEPS — como funciona (Session 7)
   ============================================================ */

.zynix-process {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(160deg, #28211D 0%, #1F1A17 100%);
  padding: 104px 0;
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.zynix-process.is-visible {
  opacity: 1;
  transform: none;
}

/* Brilho rose-gold sutil no topo + halo de profundidade */
.zynix-process::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 48% at 50% 0%, rgba(236, 198, 192, 0.14) 0%, rgba(236, 198, 192, 0) 62%),
    radial-gradient(38% 60% at 82% 110%, rgba(185, 127, 117, 0.10) 0%, rgba(185, 127, 117, 0) 70%);
  pointer-events: none;
}

/* Película de grão sutil (premium packaging) */
.zynix-process::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.zynix-process__glow { display: none; } /* hook reservado, glow via ::before */

.zynix-process__inner {
  position: relative;
  z-index: 1;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 48px;
}

.zynix-process__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--zynix-rose-gold);
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 56px;
}

.zynix-process__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.zynix-process__step {
  position: relative;
  padding: 0 48px;
  border-right: 1px solid rgba(250, 246, 243, 0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.zynix-process__step:first-child {
  padding-left: 0;
}
.zynix-process__step:last-child {
  border-right: none;
}

/* stagger animação nos steps */
.zynix-process.is-visible .zynix-process__step {
  animation: zynix-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--step-index, 0) * 80ms + 100ms);
}

/* Numeral 01/02/03 — elemento de design presente, em rose-gold */
.zynix-process__step-num {
  font-family: var(--font-heading);
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #F3D9D3 0%, var(--zynix-rose-gold) 42%, var(--zynix-rose-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--zynix-rose-gold);
  opacity: 0.92;
}

/* Tile/anel rose-gold (foil) com glow sutil para o ícone */
.zynix-process__step-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  background:
    linear-gradient(150deg, rgba(236, 198, 192, 0.16), rgba(185, 127, 117, 0.06)),
    rgba(31, 26, 23, 0.6);
  border: 1px solid transparent;
  background-origin: border-box;
  box-shadow:
    inset 0 1px 0 rgba(243, 217, 211, 0.22),
    0 8px 24px -10px rgba(31, 26, 23, 0.9),
    0 0 0 1px rgba(236, 198, 192, 0.30);
  position: relative;
}
/* anel foil em gradiente (borda) */
.zynix-process__step-icon::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(140deg, rgba(243, 217, 211, 0.85), rgba(185, 127, 117, 0.55) 55%, rgba(236, 198, 192, 0.15));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
/* glow rose-gold atrás do tile */
.zynix-process__step-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  box-shadow: 0 0 28px -6px rgba(236, 198, 192, 0.45);
  opacity: 0.6;
  z-index: -1;
}
.zynix-process__step-icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--zynix-rose-gold);
}

.zynix-process__step-title {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 600;
  color: rgba(250, 246, 243, 0.96);
  line-height: 1.3;
  margin: 8px 0 0;
}

.zynix-process__step-body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
  color: rgba(250, 246, 243, 0.58);
  margin: 0;
}

@media (max-width: 900px) {
  .zynix-process {
    padding: 64px 0;
  }
  .zynix-process__inner {
    padding: 0 24px;
  }
  .zynix-process__steps {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .zynix-process__step {
    padding: 0;
    border-right: none;
    border-top: 1px solid rgba(250, 246, 243, 0.08);
    padding-top: 40px;
  }
  .zynix-process__step:first-child {
    border-top: none;
    padding-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zynix-trust-bar,
  .zynix-featured,
  .zynix-process {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .zynix-featured.is-visible .zynix-featured__card,
  .zynix-process.is-visible .zynix-process__step {
    animation: none;
  }
}

/* ============================================================
   COA / LAB TESTS + PRODUCT SPECS + FOOTER LEGAL
   ============================================================ */

/* ---- Lab Tests page (shortcode [zynix_lab_tests]) ---- */
.zynix-coa-wrap {
  max-width: 1080px;
  margin: 0 auto;
  font-family: var(--font-body);
}
/* Scroll horizontal da tabela COA em telas estreitas (evita corte no mobile) */
.zynix-coa-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.zynix-coa-scroll .zynix-coa-table { min-width: 640px; }
.zynix-coa-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.zynix-coa-search,
.zynix-coa-filter {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--zynix-charcoal);
  background: #fff;
  border: 1px solid var(--zynix-rule-strong);
  border-radius: 6px;
  padding: 11px 14px;
  height: 46px;          /* tema forçava 35px no select → cortava o texto */
  box-sizing: border-box;
}
.zynix-coa-filter { padding-right: 34px; } /* espaço p/ a seta do select */
.zynix-coa-search { flex: 1 1 280px; }
.zynix-coa-filter { flex: 0 1 220px; }
.zynix-coa-search:focus,
.zynix-coa-filter:focus {
  outline: none;
  border-color: var(--zynix-rose-dark);
}

.zynix-coa-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: #fff;
  border: 1px solid var(--zynix-rule);
}
.zynix-coa-table thead th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--zynix-gray);
  text-align: left;
  padding: 14px 16px;
  background: var(--zynix-ivory);
  border-bottom: 1px solid var(--zynix-rule-strong);
}
.zynix-coa-table tbody td {
  padding: 14px 16px;
  color: var(--zynix-charcoal);
  border-bottom: 1px solid var(--zynix-rule);
  vertical-align: middle;
}
.zynix-coa-table tbody tr:last-child td { border-bottom: none; }
.zynix-coa-table tbody tr:hover { background: var(--zynix-offwhite); }
.zynix-coa-table a {
  color: var(--zynix-rose-dark);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.zynix-coa-table a:hover { border-bottom-color: var(--zynix-rose-dark); }
.zynix-coa-muted { color: var(--zynix-gray); font-size: 13px; }
.zynix-coa-empty {
  text-align: center;
  color: var(--zynix-gray);
  padding: 40px 16px;
  font-style: italic;
}
.zynix-coa-note {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--zynix-gray);
  text-transform: uppercase;
}

/* COA status pill */
.zynix-coa-status {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.zynix-coa-status--passed  { color: #2E5D3B; background: #E7F1E9; border-color: #C5DECB; }
.zynix-coa-status--pending { color: #7A5A1E; background: #F6EDD9; border-color: #E4D2A8; }
.zynix-coa-status--failed  { color: #7A2222; background: #F4E0E0; border-color: #E0B7B7; }

/* ---- Product specs table (single product) ---- */
.zynix-specs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0 6px;
  font-family: var(--font-body);
  font-size: 13.5px;
}
.zynix-specs-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zynix-gray);
  font-weight: 400;
  padding: 9px 16px 9px 0;
  width: 42%;
  white-space: nowrap;
  border-bottom: 1px solid var(--zynix-rule);
  vertical-align: top;
}
.zynix-specs-table td {
  padding: 9px 0;
  color: var(--zynix-charcoal);
  border-bottom: 1px solid var(--zynix-rule);
}
.zynix-specs-table tr:last-child th,
.zynix-specs-table tr:last-child td { border-bottom: none; }

/* ============================================================
   ONDA B — Footer "Secure Checkout" payment row (top of footer)
   ============================================================ */
.zynix-payment-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 30px 16px 8px;
  text-align: center;
}
.zynix-payment-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--zynix-rose-gold);
  opacity: 0.7;
}
.zynix-payment-flags {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
/* As bandeiras nativas do Flatsome (.payment-icons) trazem o próprio CSS:
   svg { height:20px; width:auto!important; --fill:#fff } e uma pílula cinza.
   Sobrescrevemos para um visual premium sobre o charcoal: sem pílula, flags
   maiores em tom ivory discreto, hover rose-gold. */
.zynix-payment-flags .payment-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
}
.zynix-payment-flags .payment-icons .payment-icon {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  margin: 0;
  padding: 0;
  opacity: 1;
  background-color: transparent;
  background: transparent;
  border-radius: 0;
}
.zynix-payment-flags .payment-icons .payment-icon svg {
  height: 24px !important;
  width: auto !important;
  max-width: none;
  --fill: rgba(244, 238, 234, 0.6);
  fill: var(--fill);
  transition: fill 0.2s ease, opacity 0.2s ease;
  opacity: 0.85;
}
.zynix-payment-flags .payment-icons .payment-icon:hover svg {
  --fill: var(--zynix-rose-gold);
  fill: var(--fill);
  opacity: 1;
}
/* Selos dos métodos de pagamento reais (Bank Transfer/Bitcoin/Zelle),
   variante A monocromática aprovada pelo Alan 16/07. Substituem as bandeiras
   Visa/MC, que ficam em standby até a aprovação do merchant de cartão.
   Cash removido 17/07 (gateway descontinuado). */
.zynix-pay-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(242, 235, 229, 0.28);
  border-radius: 999px;
  padding: 7px 16px 7px 12px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(244, 238, 234, 0.92);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.zynix-pay-badge:hover {
  border-color: var(--zynix-rose-gold);
  color: var(--zynix-rose-gold);
}
.zynix-pay-badge svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
  flex: none;
}
.zynix-pay-off {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  background: rgba(236, 198, 192, 0.16);
  color: var(--zynix-rose-gold);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 2px;
}

/* ---- Footer legal column ---- */
.zynix-footer-legal {
  border-top: 1px solid rgba(236, 198, 192, 0.18);
  padding: 26px 0 8px;
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 22px;
}
.zynix-footer-legal a {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zynix-rose-gold);
  text-decoration: none;
  opacity: 0.78;
  transition: opacity 0.2s ease;
}
.zynix-footer-legal a:hover { opacity: 1; }

.zynix-footer-legal-id {
  text-align: center;
  padding: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.03em;
  color: var(--zynix-rose-gold);
  opacity: 0.55;
}
.zynix-footer-legal-id a {
  color: inherit;
  text-decoration: none;
  opacity: 1;
}
.zynix-footer-legal-id a:hover { text-decoration: underline; }

/* ── Created by BoomTube — crédito na barra inferior, à DIREITA (Onda B) ── */
.zynix-boomtube-credit {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0;
  margin: 0;
  text-align: right;
}
/* o crédito agora é um link discreto p/ boomtubemkt.com */
.zynix-boomtube-credit .zynix-bt-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  border: 0;
  background: none;
  transition: filter .2s ease, opacity .2s ease;
}
.zynix-boomtube-credit .zynix-bt-link:hover .zynix-bt-name,
.zynix-boomtube-credit .zynix-bt-link:focus-visible .zynix-bt-name {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(236, 198, 192, .55);
}
.zynix-boomtube-credit .zynix-bt-link:hover .zynix-bt-burst,
.zynix-boomtube-credit .zynix-bt-link:focus-visible .zynix-bt-burst {
  filter: brightness(1.18) saturate(1.1);
}
.zynix-boomtube-credit .zynix-bt-link:focus-visible {
  outline: 2px solid var(--zynix-rose-gold);
  outline-offset: 3px;
  border-radius: 6px;
}
.zynix-boomtube-credit .zynix-bt-burst {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: block;
  transition: filter .2s ease;
}
.zynix-boomtube-credit .zynix-bt-text {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}
.zynix-boomtube-credit .zynix-bt-pre {
  color: var(--zynix-rose-gold);
  opacity: 0.55;
}
.zynix-boomtube-credit .zynix-bt-name {
  color: var(--zynix-ivory);
  opacity: 0.92;
  font-weight: 500;
}

@media (max-width: 560px) {
  .zynix-coa-table { font-size: 12.5px; }
  .zynix-coa-table thead th,
  .zynix-coa-table tbody td { padding: 10px 10px; }
}

/* ============================================================
   PRODUCT SHARE ICONS — visíveis em repouso (eram brancos sobre fundo claro)
   ============================================================ */
.single-product .share-icons a.icon,
.single-product .product-share .social-icons a.icon {
  color: var(--zynix-rose-dark) !important;          /* glyph (currentColor) */
  border-color: rgba(185, 127, 117, 0.5) !important; /* borda do outline */
  background-color: transparent !important;
}
.single-product .share-icons a.icon .icon-inner,
.single-product .share-icons a.icon i,
.single-product .product-share .social-icons a.icon i {
  color: var(--zynix-rose-dark) !important;
}
.single-product .share-icons a.icon:hover,
.single-product .share-icons a.icon:focus,
.single-product .product-share .social-icons a.icon:hover {
  background-color: var(--zynix-rose-dark) !important;
  border-color: var(--zynix-rose-dark) !important;
  color: #fff !important;
}
.single-product .share-icons a.icon:hover i,
.single-product .product-share .social-icons a.icon:hover i {
  color: #fff !important;
}

/* ============================================================
   OUTLINE / ICON BUTTONS EM FUNDO CLARO — eram brancos (invisíveis)
   Causa-raiz: botões is-outline/icon do Flatsome herdam cor branca.
   Afeta: quantidade −/+, zoom da galeria, navegação next/prev de produto.
   ============================================================ */

/* Quantidade −/+ (ux-quantity e clássico) */
.ux-quantity__button,
.quantity .minus,
.quantity .plus {
  color: var(--zynix-charcoal) !important;
  border-color: var(--zynix-rule-strong) !important;
}
.ux-quantity__button:hover,
.quantity .minus:hover,
.quantity .plus:hover {
  color: var(--zynix-rose-dark) !important;
  border-color: var(--zynix-rose-dark) !important;
}

/* Zoom da galeria + navegação próximo/anterior produto (outline circle icons) */
.product-images .image-tools .zoom-button.button.is-outline,
.next-prev-thumbs .button.icon.is-outline {
  color: var(--zynix-rose-dark) !important;
  border-color: rgba(185, 127, 117, 0.5) !important;
  background-color: rgba(255, 255, 255, 0.6) !important;
}
.product-images .image-tools .zoom-button.button.is-outline i,
.next-prev-thumbs .button.icon.is-outline i {
  color: var(--zynix-rose-dark) !important;
}
.product-images .image-tools .zoom-button.button.is-outline:hover,
.next-prev-thumbs .button.icon.is-outline:hover {
  background-color: var(--zynix-rose-dark) !important;
  border-color: var(--zynix-rose-dark) !important;
  color: #fff !important;
}
.product-images .image-tools .zoom-button.button.is-outline:hover i,
.next-prev-thumbs .button.icon.is-outline:hover i {
  color: #fff !important;
}

/* v1 fix (20/07/2026, .bak-gallerynav-20jul) — espelho do fix validado na
   NYsub: o botão "oval, borda clara" flutuando solto entre o título e o
   preço no mobile NÃO é a seta da galeria — é o quick-nav nativo do
   Flatsome de produto anterior/próximo (.next-prev-thumbs), cuja própria
   classe "show-for-medium" já esconde em >=850px mas mostra abaixo disso,
   sem estilo pra esse contexto. Sem relação visual com a galeria acima; no
   mobile lê como um botão quebrado solto. Escondido só no mobile (já era
   nativamente invisível no desktop) — decisão aprovada: o quick-nav sai do
   site. As setas próprias da galeria (Flickity, abaixo) ganham swipe+dots
   no lugar. */
@media (max-width: 849px) {
  .next-prev-thumbs { display: none !important; }
}

/* Galeria de produto (Flickity): mobile = swipe + dots, sem botões de seta
   sobrepostos; desktop = botões de seta sobre a imagem (comportamento
   nativo do Flatsome, inalterado), sem dots duplicando esse controle.
   pageDots é habilitado via override do child theme de
   woocommerce/single-product/product-image.php (pageDots:true); o
   drag/swipe é comportamento nativo do Flickity, não afetado por esconder
   os botões. */
@media (max-width: 849px) {
  .woocommerce-product-gallery__wrapper .flickity-prev-next-button {
    display: none !important;
  }
  .woocommerce-product-gallery__wrapper .flickity-page-dots {
    display: block;
  }
}
@media (min-width: 850px) {
  .woocommerce-product-gallery__wrapper .flickity-page-dots {
    display: none !important;
  }
}

/* Stepper de quantidade: igualar a altura dos botões −/+ à caixa do número (eram 59px vs 40px) */
.ux-quantity { align-items: center !important; }
.ux-quantity .qty,
.ux-quantity .ux-quantity__button {
  height: 40px !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
  align-self: center !important;
}
.ux-quantity .ux-quantity__button {
  line-height: 38px !important; /* 40px − 2px de borda */
}

/* ============================================================
   CARRINHO — ícone no header + badge + gaveta off-canvas
   ============================================================ */

/* --- Ícone no header (SVG injetado via JS) --- */
.cart-item .header-cart-link {
  display: inline-flex !important;
  align-items: center;
  padding: 0 10px;
}
.cart-item .cart-icon {
  position: relative;
  color: var(--zynix-charcoal);
  display: inline-flex;
  align-items: center;
  width: auto;
  min-width: 0;
  background: none !important;
}
.cart-item .cart-icon::before { display: none !important; } /* remove qualquer pseudo vazio do core */
.zynix-cart-svg { display: inline-flex; }
.zynix-cart-svg svg { width: 20px; height: 20px; display: block; }
.cart-item .header-cart-link:hover .cart-icon { color: var(--zynix-rose-dark); }

/* Badge de quantidade (rose) — esconde quando vazio
   NOTE: flatsome-shop.css tem uma regra ".cart-icon strong" com
   border/width/margin próprios (borda azul 2px, width:2.2em, margin:0.3em)
   que essa regra mais específica NÃO sobrescrevia integralmente — sobrava
   a borda azul do core e a largura fixa em em, deixando o badge oval e
   deslocado do ícone. Resetando border/width/margin explicitamente abaixo. */
.cart-item .cart-icon strong {
  position: absolute;
  top: -6px;
  right: -9px;
  min-width: 16px;
  width: auto;
  height: 16px;
  margin: 0;
  padding: 0 4px;
  border: none;
  border-radius: 999px;
  background: var(--zynix-rose-dark);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9.5px;
  line-height: 16px;
  text-align: center;
  font-weight: 600;
  box-shadow: 0 0 0 2px rgba(250, 246, 244, 0.9);
}
.cart-item .cart-icon strong:empty,
.cart-item .cart-icon strong.is-empty { display: none; }

/* --- Gaveta off-canvas --- */
.off-canvas-cart.mfp-content { width: 380px !important; max-width: 90vw !important; }
.off-canvas-cart .cart-popup-inner {
  background: var(--zynix-offwhite) !important;
  font-family: var(--font-body);
}
.off-canvas-cart .cart-popup-title .heading-font {
  font-family: var(--font-heading) !important;
  color: var(--zynix-charcoal);
  letter-spacing: 0.06em;
}
.off-canvas-cart .woocommerce-mini-cart__total,
.off-canvas-cart .total {
  color: var(--zynix-charcoal) !important;
  font-family: var(--font-body);
  border-top: 1px solid var(--zynix-rule-strong);
}
.off-canvas-cart .woocommerce-mini-cart__total strong,
.off-canvas-cart .woocommerce-Price-amount {
  color: var(--zynix-charcoal) !important;
}
.off-canvas-cart .woocommerce-mini-cart__total .woocommerce-Price-amount {
  font-weight: 600;
}
/* Isenta o carrinho da regra que esconde preços na home (a gaveta SEMPRE mostra preço) */
body.home #cart-popup .woocommerce-Price-amount,
body.home #cart-popup .amount,
body.home #cart-popup .price,
body.home .off-canvas-cart .woocommerce-Price-amount,
body.home .off-canvas-cart .amount {
  display: inline-block !important;
}

/* RUO note na gaveta */
.zynix-minicart-ruo {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--zynix-gray);
  margin: 4px 0 12px;
  line-height: 1.5;
}

/* Botões da gaveta — on-brand, contraste garantido */
.off-canvas-cart .woocommerce-mini-cart__buttons .button,
#cart-popup .woocommerce-mini-cart__buttons .button {
  display: block;
  width: 100%;
  margin: 0 0 10px;
  font-family: var(--font-heading);
  letter-spacing: 0.04em;
  border-radius: 6px;
}
/* View cart = ghost rose */
.off-canvas-cart .woocommerce-mini-cart__buttons .button:not(.checkout) {
  background: transparent !important;
  color: var(--zynix-rose-dark) !important;
  border: 1px solid var(--zynix-rose-dark) !important;
}
.off-canvas-cart .woocommerce-mini-cart__buttons .button:not(.checkout):hover {
  background: rgba(185, 127, 117, 0.08) !important;
}
/* Checkout = filled rose-dark (substitui o laranja do WC) */
.off-canvas-cart .woocommerce-mini-cart__buttons .button.checkout {
  background: var(--zynix-rose-dark) !important;
  color: #fff !important;
  border: 1px solid var(--zynix-rose-dark) !important;
}
.off-canvas-cart .woocommerce-mini-cart__buttons .button.checkout:hover {
  background: #a56b62 !important;
  border-color: #a56b62 !important;
}

/* ============================================================
   VENDOR LOGIN (/vendor-login/) + badges de status
   ============================================================ */
.zynix-vlogin {
  max-width: 460px;
  margin: 56px auto;
  font-family: var(--font-body);
}
/* Mesmo fix do NYsub (20/07): abaixo de 460px o box ocupa 100% da coluna
   sem respiro lateral — padding lateral restaura a margem visível da borda
   da tela no celular, igual aos demais cards do site. */
@media (max-width: 600px) {
  .zynix-vlogin {
    max-width: 100%;
    margin: 40px auto;
    padding: 0 22px;
    box-sizing: border-box;
  }
}
.zynix-vlogin__card {
  background: #fff;
  border: 1px solid var(--zynix-rule);
  border-radius: 14px;
  padding: 40px 38px;
  box-shadow: 0 18px 50px rgba(31, 26, 23, 0.08);
}
.zynix-vlogin__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--zynix-rose-dark);
  margin: 0 0 12px;
}
.zynix-vlogin__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 24px;
  color: var(--zynix-charcoal);
  margin: 0 0 8px;
  line-height: 1.2;
}
.zynix-vlogin__note { font-size: 13px; color: var(--zynix-gray); margin: 0 0 22px; }
.zynix-vlogin__alert {
  background: #F4E0E0; border: 1px solid #E0B7B7; color: #7A2222;
  padding: 12px 14px; border-radius: 6px; font-size: 13px; margin-bottom: 18px;
}
.zynix-vlogin .login-username,
.zynix-vlogin .login-password { margin-bottom: 16px; }
.zynix-vlogin label { display: block; font-size: 12px; font-weight: 600; color: #4B3F38; margin-bottom: 6px; }
.zynix-vlogin input[type=text],
.zynix-vlogin input[type=password] {
  width: 100%; padding: 12px 14px; border: 1px solid var(--zynix-rule-strong);
  border-radius: 8px; font-size: 14px; box-sizing: border-box; background: #fff;
}
.zynix-vlogin input:focus { outline: none; border-color: var(--zynix-rose-dark); }
.zynix-vlogin .login-remember { font-weight: 400; margin: 4px 0 18px; }
.zynix-vlogin .login-remember label { display: inline; font-weight: 400; font-size: 13px; color: var(--zynix-gray); }
.zynix-vlogin .button,
.zynix-vlogin input[type=submit] {
  width: 100%; background: var(--zynix-rose-dark); color: #fff; border: none;
  padding: 13px; border-radius: 8px; font-family: var(--font-heading);
  font-size: 14px; letter-spacing: 0.04em; cursor: pointer;
}
.zynix-vlogin .button:hover,
.zynix-vlogin input[type=submit]:hover { background: #a56b62; }
.zynix-vlogin__links { margin-top: 18px; font-size: 12.5px; text-align: center; }
.zynix-vlogin__links a { color: var(--zynix-rose-dark); text-decoration: none; }

/* Badges de status de comissão / venda */
.zynix-comm-badge {
  display: inline-block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px;
  border: 1px solid transparent;
}
.zynix-comm-badge--awaiting_payment,
.zynix-comm-badge--pending { color: #7A5A1E; background: #F6EDD9; border-color: #E4D2A8; }
.zynix-comm-badge--held    { color: #1E4D6B; background: #DEEAF1; border-color: #B7CFE0; }
.zynix-comm-badge--payable { color: #2E5D3B; background: #E7F1E9; border-color: #C5DECB; }
.zynix-comm-badge--paid    { color: #2E5D3B; background: #D8EAD9; border-color: #A9CDAD; }
.zynix-comm-badge--reversed,
.zynix-comm-badge--cancelled { color: #7A2222; background: #F4E0E0; border-color: #E0B7B7; }
/* Fase B — aprovação de desconto */
.zynix-comm-badge--awaiting_approval,
.zynix-comm-badge--awaiting_payment { color: #7A5A1E; background: #F6EDD9; border-color: #E4D2A8; }
.zynix-comm-badge--rejected { color: #7A2222; background: #F4E0E0; border-color: #E0B7B7; }

/* ============================================================
   VENDOR — Training (compliance) + gate banner
   ============================================================ */
.vp-train__eyebrow {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--zynix-rose-dark); margin: 0 0 6px;
}
.vp-train__langs { display: flex; gap: 6px; }
.vp-train__lang {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  padding: 7px 13px; border: 1px solid var(--zynix-rule-strong); border-radius: 999px;
  color: var(--zynix-gray); text-decoration: none; transition: all .15s ease;
}
.vp-train__lang:hover { border-color: var(--zynix-rose-dark); color: var(--zynix-rose-dark); }
.vp-train__lang.active { background: var(--zynix-rose-dark); border-color: var(--zynix-rose-dark); color: #fff; }
.vp-train__intro { font-size: 14px; color: var(--zynix-gray); line-height: 1.6; max-width: 760px; margin: 8px 0 24px; }
.vp-train__modules { display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
.vp-train__module {
  display: flex; gap: 16px; align-items: flex-start;
  background: #fff; border: 1px solid var(--zynix-rule); border-radius: 10px; padding: 18px 20px;
}
.vp-train__num {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--zynix-rose-dark);
  background: #FBF4F2; border-radius: 6px; padding: 6px 9px; flex-shrink: 0;
}
.vp-train__module-title { font-family: var(--font-heading); font-size: 15px; font-weight: 600; color: var(--zynix-charcoal); margin: 0 0 5px; }
.vp-train__module-body { font-size: 13.5px; color: var(--zynix-gray); line-height: 1.6; margin: 0; }
.vp-train__ack-box {
  max-width: 820px; margin-top: 24px; padding: 22px; border: 1px solid var(--zynix-rose-dark);
  border-radius: 10px; background: #FBF4F2;
}
.vp-train__ack { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; margin-bottom: 16px; }
.vp-train__ack input { margin-top: 3px; flex-shrink: 0; }
.vp-train__ack span { font-size: 13.5px; color: #4B3F38; line-height: 1.55; }
.vp-train__err { display: block; margin-top: 10px; color: #7A2222; font-size: 13px; }

/* Banner de gate (treinamento pendente) na Place Order */
.vp-gate {
  max-width: 760px; margin: 8px 0 4px; padding: 26px 28px; border-radius: 12px;
  background: #1F1A17; color: #FAF6F3; font-family: var(--font-body);
}
.vp-gate h2 { font-family: var(--font-heading); font-weight: 500; font-size: 20px; color: #fff; margin: 0 0 10px; }
.vp-gate p { font-size: 14px; color: #C9BCB4; line-height: 1.6; margin: 0 0 18px; }
.vp-gate .button { background: var(--zynix-rose-dark); color: #fff; border: none; padding: 12px 22px; border-radius: 8px; text-decoration: none; font-family: var(--font-heading); }
.vp-gate .button:hover { background: #a56b62; }

/* ============================================================
   OUT OF STOCK BADGE — grid catalog (on-brand)
   Alinha o overlay "Out of stock" da GRADE da loja (.out-of-stock-label)
   à paleta Zynix (Graphite #1F1A17 sobre #F4EEEA translúcido).
   NÃO afeta o texto .stock.out-of-stock do single product.
   ============================================================ */
.out-of-stock-label,
.product-small .out-of-stock-label {
  color: #1F1A17 !important;
  background: rgba(244,238,234,0.92) !important;
  letter-spacing: 0.04em;
  border-radius: 4px;
}

/* ============================================================
   MANAGEMENT PORTAL (SÓCIOS) — "Power BI" executive dashboard
   On-brand Zynix BI skin. Uma / design-squad.
   Tokens: --zynix-* (rose-gold #ECC6C0, rose-dark #B97F75, ink #1F1A17),
   fonts Sora (display) / Inter (body) / IBM Plex Mono (números/KPIs).
   ============================================================ */
:root {
  --mp-bg:        #FAF6F3;   /* --off canvas */
  --mp-surface:   #FFFFFF;   /* card surface */
  --mp-ink:       #1F1A17;   /* --ink */
  --mp-ink-2:     #6B5E55;   /* --ink-2 */
  --mp-rule:      #F0E2DC;   /* --rule hairline */
  --mp-rule-2:    #EADCD5;
  --mp-rg-1:      #ECC6C0;   /* rose accent */
  --mp-rg-2:      #B97F75;   /* rose deep / primary */
  --mp-rg-3:      #F5DCD8;
  --mp-nude:      #FAEEEB;
  --mp-ok:        #3F7A52;   /* instock sober green */
  --mp-ok-bg:     #E7F1E9;
  --mp-warn:      #B7791F;   /* low amber */
  --mp-warn-bg:   #FBF1DD;
  --mp-shadow:    0 1px 2px rgba(31,26,23,.04), 0 8px 24px rgba(31,26,23,.06);
  --mp-shadow-hover: 0 2px 4px rgba(31,26,23,.06), 0 14px 34px rgba(31,26,23,.10);
}

/* ---- Shell / layout ---- */
.mp-shell {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  min-height: 78vh;
  gap: 0;
  background: var(--mp-bg);
  font-family: var(--font-body);
  color: var(--mp-ink);
}

/* ---- Sidebar ---- */
.mp-sidebar {
  background: linear-gradient(180deg, #241E1A 0%, #1A1512 100%);
  color: #F4EEEA;
  padding: 26px 18px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  border-right: 1px solid rgba(255,255,255,.04);
}
.mp-sidebar__logo {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 13px;
  padding: 26px 16px 22px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.mp-sidebar__logo-icon {
  display: block; height: 56px; width: auto;
  object-fit: contain; opacity: 1;
  overflow: visible;
  /* leve sombra p/ sensação de relevo metálico premium */
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.28));
}
/* sheen animado via SMIL (no SVG); mistura aditiva p/ parecer reflexo de luz */
.mp-sidebar__logo-sheen { mix-blend-mode: screen; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  /* desliga o movimento do reflexo; fica só o gradiente metálico estático */
  .mp-sidebar__logo-sheen { display: none; }
  .mp-sidebar__logo-icon animateTransform { display: none; }
}
.mp-sidebar__logo-wordmark {
  display: block; width: 128px; height: auto;
  object-fit: contain; opacity: 1;
}
.mp-sidebar__nav { display: flex; flex-direction: column; gap: 3px; }
.mp-sidebar__nav-label {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(244,238,234,.40); padding: 6px 12px 8px;
}
.mp-sidebar__nav-item {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; color: rgba(244,238,234,.78);
  border-radius: 9px; text-decoration: none;
  font-size: 14px; font-weight: 500; letter-spacing: .01em;
  transition: background .18s ease, color .18s ease;
}
.mp-sidebar__nav-item svg { opacity: .8; flex: 0 0 auto; transition: opacity .18s ease; }
.mp-sidebar__nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.mp-sidebar__nav-item:hover svg { opacity: 1; }
.mp-sidebar__nav-item.active {
  background: linear-gradient(90deg, rgba(185,127,117,.95), rgba(185,127,117,.78));
  color: #fff; box-shadow: 0 6px 16px rgba(185,127,117,.28);
}
.mp-sidebar__nav-item.active svg { opacity: 1; }
.mp-sidebar__nav-item.active::before {
  content: ""; position: absolute; left: -18px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--mp-rg-1);
}
.mp-sidebar__footer { margin-top: auto; display: flex; flex-direction: column; gap: 14px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.07); }
.mp-sidebar__user { display: flex; align-items: center; gap: 11px; }
.mp-sidebar__avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--mp-rg-1), var(--mp-rg-2));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-family: var(--font-heading); font-size: 15px;
}
.mp-sidebar__user-info { display: flex; flex-direction: column; line-height: 1.3; }
.mp-sidebar__user-name { font-size: 13px; font-weight: 600; color: #F4EEEA; }
.mp-sidebar__user-role { font-size: 11px; color: rgba(244,238,234,.55); }
.mp-sidebar__logout {
  display: flex; align-items: center; gap: 8px;
  color: rgba(236,198,192,.85); text-decoration: none; font-size: 13px;
  padding: 8px 6px; border-radius: 7px; transition: background .18s, color .18s;
}
.mp-sidebar__logout:hover { background: rgba(255,255,255,.05); color: var(--mp-rg-1); }

/* ---- Main / header ---- */
.mp-main { padding: 30px 36px 48px; max-width: 1320px; }
.mp-header {
  margin-bottom: 26px; padding-bottom: 18px;
  border-bottom: 1px solid var(--mp-rule);
  display: flex; flex-direction: column; gap: 3px;
}
.mp-title { margin: 0; font-family: var(--font-heading); font-size: 27px; font-weight: 700; letter-spacing: -.01em; color: var(--mp-ink); }
.mp-subtitle {
  margin: 0; color: var(--mp-ink-2); font-size: 13px;
  font-family: var(--font-mono); letter-spacing: .02em;
}
.mp-section { margin-bottom: 26px; }
.mp-section__title {
  font-family: var(--font-heading); font-size: 15px; font-weight: 600;
  margin: 0 0 14px; color: var(--mp-ink); letter-spacing: -.005em;
  display: flex; align-items: center; gap: 9px;
}
.mp-section__title::before {
  content: ""; width: 4px; height: 15px; border-radius: 2px;
  background: linear-gradient(180deg, var(--mp-rg-1), var(--mp-rg-2));
}

/* ---- KPI cards ---- */
.mp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.mp-card {
  background: var(--mp-surface);
  border: 1px solid var(--mp-rule);
  border-radius: 14px; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: var(--mp-shadow);
  position: relative; overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.mp-card::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--mp-rg-1), var(--mp-rg-2));
  opacity: .9;
}
.mp-card:hover { box-shadow: var(--mp-shadow-hover); transform: translateY(-2px); }
.mp-card__label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em; color: var(--mp-ink-2);
}
.mp-card__value {
  font-family: var(--font-mono); font-size: 30px; font-weight: 600;
  color: var(--mp-ink); line-height: 1.05; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.mp-card__meta { font-size: 12px; color: var(--mp-ink-2); margin-top: 2px; }
.mp-card__meta strong { color: var(--mp-rg-2); font-family: var(--font-mono); font-weight: 600; }
.mp-card--accent { background: linear-gradient(135deg, #fff 0%, var(--mp-nude) 100%); }
.mp-card--alert::after { background: linear-gradient(90deg, var(--mp-warn), #d99a2b); }
.mp-card--alert .mp-card__value { color: var(--mp-warn); }

/* ---- Chart panels ---- */
.mp-grid-2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; }
.mp-grid-2--wide { grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); }
.mp-panel {
  background: var(--mp-surface); border: 1px solid var(--mp-rule);
  border-radius: 14px; padding: 20px 22px; box-shadow: var(--mp-shadow);
}
.mp-panel__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.mp-panel__title { font-family: var(--font-heading); font-size: 15px; font-weight: 600; margin: 0; color: var(--mp-ink); }
.mp-panel__hint { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mp-ink-2); }
.mp-chart-wrap { position: relative; height: 280px; }
.mp-chart-wrap--sm { height: 240px; }
.mp-chart-empty {
  display: flex; align-items: center; justify-content: center; height: 100%;
  color: var(--mp-ink-2); font-size: 13px; font-style: italic;
}

/* ---- Tables (BI clean) ---- */
.mp-table-wrap {
  background: var(--mp-surface); border: 1px solid var(--mp-rule);
  border-radius: 14px; box-shadow: var(--mp-shadow); overflow-x: auto;
}
.mp-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.mp-table th, .mp-table td { text-align: left; padding: 12px 18px; }
.mp-table thead th {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--mp-ink-2);
  background: var(--mp-bg); border-bottom: 1px solid var(--mp-rule-2);
}
.mp-table tbody td { border-bottom: 1px solid var(--mp-rule); color: var(--mp-ink); }
.mp-table tbody tr:last-child td { border-bottom: none; }
.mp-table tbody tr { transition: background .14s ease; }
.mp-table tbody tr:hover { background: var(--mp-nude); }
.mp-table .mp-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.mp-table .mp-rank {
  font-family: var(--font-mono); font-weight: 600; color: var(--mp-rg-2);
  background: var(--mp-rg-3); border-radius: 6px; padding: 2px 8px; font-size: 12px;
}
.mp-row--low { background: rgba(183,121,31,.05); }
.mp-row--low:hover { background: rgba(183,121,31,.09); }

.mp-list { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.mp-list--alert li {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--mp-warn-bg); color: #7a5a1f; padding: 9px 13px;
  border-radius: 9px; font-size: 13px; border: 1px solid rgba(183,121,31,.14);
}
.mp-list--alert li strong { font-family: var(--font-mono); }
.mp-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  color: var(--mp-rg-2); font-weight: 600; font-size: 13px; text-decoration: none;
}
.mp-link:hover { color: var(--mp-ink); }

/* ---- Badges ---- */
.mp-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 99px; font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.mp-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.mp-badge--instock { background: var(--mp-ok-bg); color: var(--mp-ok); }
.mp-badge--outofstock { background: #F1E4E2; color: #8A4A40; }
.mp-badge--onbackorder { background: var(--mp-warn-bg); color: var(--mp-warn); }
.mp-badge--low { background: var(--mp-rg-2); color: #fff; margin-left: 6px; }
.mp-badge--low::before { background: #fff; opacity: .9; }

/* ---- Fase B — Discount approvals (badges + buttons + nav count) ---- */
.mp-badge--pending_approval { background: var(--mp-warn-bg, #FBF1DC); color: var(--mp-warn, #9A7414); }
.mp-badge--approved { background: var(--mp-ok-bg, #E6F2E9); color: var(--mp-ok, #2E7D44); }
.mp-badge--rejected { background: #F4E0E0; color: #8A4A40; }

.mp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 14px; margin: 0 4px 0 0; border: 1px solid transparent; border-radius: 8px;
  font-family: var(--font-sans, Inter, sans-serif); font-size: 12.5px; font-weight: 600;
  letter-spacing: .01em; cursor: pointer; transition: background .15s ease, opacity .15s ease;
}
.mp-btn:disabled { opacity: .55; cursor: default; }
.mp-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(185,127,117,.35); }
.mp-btn--approve { background: #2E7D44; color: #fff; }
.mp-btn--approve:hover:not(:disabled) { background: #266b3a; }
.mp-btn--reject { background: #fff; color: #8A4A40; border-color: #E0B7B7; }
.mp-btn--reject:hover:not(:disabled) { background: #F9EEEC; }
/* ---- Ghost variant (Edit / Deactivate / Reject / Cancel) -- 22/jul contrast fix.
   Bare .button carries a !important text color from the sitewide Rose Gold
   button system, which clobbers any color set on .button.ip-btn-ghost. These
   actions now use the mp system instead (no .button class), sidestepping it. */
.mp-btn--ghost { background: transparent; color: var(--mp-ink-2); border-color: var(--mp-rule-2); min-width: 92px; }
.mp-btn--ghost:hover:not(:disabled) { color: var(--mp-ink); border-color: var(--mp-rg-2); background: var(--mp-nude); }

.mp-sidebar__nav-count {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mp-rg-2, #B97F75); color: #fff; border-radius: 99px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; line-height: 1;
}

/* ---- Inline stock input ---- */
.mp-stock-input {
  width: 84px; padding: 6px 9px; border: 1px solid var(--mp-rule-2);
  border-radius: 7px; font-family: var(--font-mono); font-size: 13px;
  color: var(--mp-ink); background: var(--mp-bg);
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.mp-stock-input:focus { outline: none; border-color: var(--mp-rg-2); background: #fff; box-shadow: 0 0 0 3px rgba(185,127,117,.14); }
.mp-input--ok { border-color: var(--mp-ok); background: var(--mp-ok-bg); }
.mp-input--error { border-color: #b33; background: #fbf0f0; }

/* ---- Login (kept on-brand) ---- */
.mp-login { max-width: 460px; margin: 48px auto; }
.mp-login__card { background: var(--mp-surface); border: 1px solid var(--mp-rule); border-radius: 14px; padding: 32px; box-shadow: var(--mp-shadow); }
.mp-login__eyebrow { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: var(--mp-rg-2); margin: 0 0 6px; }
.mp-login__title { font-family: var(--font-heading); font-size: 22px; margin: 0 0 8px; }
.mp-login__note { color: var(--mp-ink-2); margin: 0 0 18px; }
.mp-login__alert { background: #F2DADA; color: #7a2b2b; padding: 10px 12px; border-radius: 8px; margin-bottom: 14px; }
.mp-login__links { margin-top: 16px; font-size: 13px; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .mp-grid-2, .mp-grid-2--wide { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .mp-shell { grid-template-columns: minmax(0, 1fr); }
  .mp-sidebar { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 16px 18px; gap: 14px; min-width: 0; }
  .mp-sidebar__logo { border-bottom: none; padding: 0 8px 0 0; flex-direction: row; gap: 8px; }
  .mp-sidebar__logo-icon { height: 40px; }
  .mp-sidebar__logo-wordmark { width: 100px; }
  .mp-sidebar__nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .mp-sidebar__nav-label { display: none; }
  .mp-sidebar__nav-item.active::before { display: none; }
  .mp-sidebar__footer { margin-top: 0; border-top: none; padding-top: 0; flex-direction: row; align-items: center; gap: 16px; margin-left: auto; }
  .mp-main { padding: 22px 18px 36px; }
  .mp-cards { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .mp-chart-wrap { height: 240px; }
  .mp-table-wrap { overflow-x: auto; }
}

/* ============================================================
   MANAGEMENT PORTAL — Vendors + Financials + collapsible sidebar
   ============================================================ */

/* ---- Toolbar (period selector + export) ---- */
.mp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.mp-period {
  display: inline-flex; background: var(--mp-surface); border: 1px solid var(--mp-rule);
  border-radius: 10px; padding: 3px; gap: 2px; box-shadow: var(--mp-shadow);
}
.mp-period a {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: var(--mp-ink-2); text-decoration: none; padding: 6px 13px; border-radius: 7px;
  transition: background .16s, color .16s;
}
.mp-period a:hover { color: var(--mp-ink); background: var(--mp-nude); }
.mp-period a.is-active { background: linear-gradient(135deg, var(--mp-rg-1), var(--mp-rg-2)); color: #fff; }
.mp-export {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono);
  font-size: 12px; font-weight: 600; color: var(--mp-rg-2); background: var(--mp-surface);
  border: 1px solid var(--mp-rule-2); border-radius: 9px; padding: 8px 14px; cursor: pointer;
  text-decoration: none; transition: background .16s, color .16s, border-color .16s;
}
/* ---- Hub consolidado (F3) — aviso de loja satélite indisponível ---- */
.mp-scope-offline-notice {
  margin: 10px 0 0; padding: 9px 13px; border-radius: 9px; font-size: 13px;
  background: var(--mp-warn-bg); color: #7a5a1f; border: 1px solid rgba(183,121,31,.14);
}
.mp-badge--store {
  background: var(--mp-nude); color: var(--mp-ink-2); margin-left: 4px;
}
.mp-badge--mismatch { background: var(--mp-warn-bg); color: var(--mp-warn); margin-left: 4px; }
.mp-export:hover { background: var(--mp-nude); color: var(--mp-ink); border-color: var(--mp-rg-1); }

/* ---- Drill-down back link + sub-mono ---- */
.mp-back { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--mp-rg-2); text-decoration: none; margin-bottom: 6px; }
.mp-back:hover { color: var(--mp-ink); }
.mp-sub-mono { display: inline-block; font-family: var(--font-mono); font-size: 11px; color: var(--mp-ink-2); margin-left: 4px; }

/* ---- Clickable rows + trophy card ---- */
.mp-table tbody tr.is-clickable { cursor: pointer; }
.mp-card__value--sm { font-size: 18px; font-family: var(--font-heading); font-weight: 700; line-height: 1.2; }
.mp-card--trophy::after { background: linear-gradient(90deg, #E3B05A, var(--mp-rg-2)); }

/* ---- Commission status badges ---- */
.mp-badge--paid { background: var(--mp-ok-bg); color: var(--mp-ok); }
.mp-badge--held { background: var(--mp-warn-bg); color: var(--mp-warn); }
.mp-badge--payable { background: #E7EEF5; color: #3D6699; }
.mp-badge--awaiting_payment { background: #EFEAE6; color: #7A6A5E; }
.mp-badge--reversed { background: #F1E4E2; color: #8A4A40; }

/* ---- P&L (waterfall) table ---- */
.mp-pl td { padding: 11px 6px; }
.mp-pl .mp-pos { color: var(--mp-ok); }
.mp-pl .mp-neg { color: #8A4A40; }
.mp-pl-sub td { border-top: 1px solid var(--mp-rule-2); font-weight: 600; color: var(--mp-ink); }
.mp-pl-total td { border-top: 2px solid var(--mp-ink); font-family: var(--font-heading); font-weight: 700; font-size: 16px; padding-top: 13px; }
.mp-pl-total .mp-num { font-size: 17px; }

/* ---- Financials config form ---- */
.mp-fin-form__h { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--mp-ink-2); margin: 6px 0 12px; }
.mp-fin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 20px; }
.mp-fin-field { display: flex; flex-direction: column; gap: 6px; }
.mp-fin-field__label { font-size: 12.5px; color: var(--mp-ink); font-weight: 500; }
.mp-fin-input {
  display: flex; align-items: center; gap: 4px; background: var(--mp-bg);
  border: 1px solid var(--mp-rule-2); border-radius: 8px; padding: 0 10px;
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.mp-fin-input:focus-within { border-color: var(--mp-rg-2); background: #fff; box-shadow: 0 0 0 3px rgba(185,127,117,.14); }
.mp-fin-input i { font-style: normal; font-family: var(--font-mono); font-size: 13px; color: var(--mp-ink-2); }
.mp-fin-input input { flex: 1; min-width: 0; border: none; background: transparent; padding: 9px 0; font-family: var(--font-mono); font-size: 14px; color: var(--mp-ink); }
.mp-fin-input input:focus { outline: none; }
.mp-fin-input input:disabled { color: var(--mp-ink-2); cursor: not-allowed; }
.mp-fin-actions { display: flex; align-items: center; gap: 14px; }
.mp-btn-primary {
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--mp-rg-2), #a06b61); border: none; border-radius: 9px;
  padding: 11px 20px; cursor: pointer; box-shadow: 0 6px 16px rgba(185,127,117,.28);
  transition: transform .15s, box-shadow .15s;
}
.mp-btn-primary:hover { transform: translateY(-1px); }
.mp-btn-primary:disabled { opacity: .6; cursor: default; transform: none; }
.mp-fin-status { font-family: var(--font-mono); font-size: 12px; color: var(--mp-ink-2); }
.mp-fin-status--ok { color: var(--mp-ok); }
.mp-fin-status--err { color: #b33; }

/* ---- Modal (price composition) ---- */
.mp-modal { position: fixed; inset: 0; z-index: 100; display: none; }
.mp-modal[aria-hidden="false"] { display: block; }
.mp-modal__backdrop { position: absolute; inset: 0; background: rgba(31,26,23,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.mp-modal__card {
  position: relative; max-width: 980px; width: calc(100% - 40px); max-height: 86vh; overflow: auto;
  margin: 6vh auto 0; background: var(--mp-surface); border-radius: 16px;
  box-shadow: 0 30px 80px rgba(31,26,23,.4); padding: 26px 28px;
}
.mp-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mp-modal__title { font-family: var(--font-heading); font-size: 20px; font-weight: 700; margin: 0; }
.mp-modal__close { background: none; border: none; font-size: 26px; line-height: 1; color: var(--mp-ink-2); cursor: pointer; padding: 0 4px; }
.mp-modal__close:hover { color: var(--mp-ink); }
.mp-modal__intro { color: var(--mp-ink-2); font-size: 13px; line-height: 1.6; margin: 0 0 16px; }
.mp-modal__intro strong { color: var(--mp-rg-2); font-family: var(--font-mono); }
body.mp-modal-open { overflow: hidden; }

/* ===================================================================
   === FINANCIALS REDESIGN (15/06) — verdict, drawer, ok card, read-only ===
   =================================================================== */

/* ---- A — Verdict banner ---- */
.mp-verdict {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px;
  background: var(--mp-surface); border: 1px solid var(--mp-rule);
  border-left: 4px solid var(--mp-ok); border-radius: 16px;
  padding: 22px 26px; box-shadow: var(--mp-shadow);
}
.mp-verdict--loss { border-left-color: #8A4A40; }
.mp-verdict--none { border-left-color: var(--mp-rule-2); }
.mp-verdict__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mp-verdict__label {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--mp-ink-2);
}
.mp-verdict__value {
  font-family: var(--font-heading); font-weight: 700; font-size: 44px; line-height: 1.02;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--mp-ok);
}
.mp-verdict--loss .mp-verdict__value { color: #8A4A40; }
.mp-verdict--none .mp-verdict__value { color: var(--mp-ink-2); }
.mp-verdict__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.mp-verdict__badge {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; background: var(--mp-ok-bg); color: var(--mp-ok);
}
.mp-verdict__badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.mp-verdict--loss .mp-verdict__badge { background: #F1E4E2; color: #8A4A40; }
.mp-verdict--none .mp-verdict__badge { background: var(--mp-nude); color: var(--mp-ink-2); }
.mp-verdict__sub { font-size: 13px; color: var(--mp-ink-2); }
.mp-verdict__sub strong { font-family: var(--font-mono); color: var(--mp-rg-2); font-weight: 600; }

/* ---- B — Net profit OK card (positive) ---- */
.mp-card--ok::after { background: linear-gradient(90deg, var(--mp-ok), #5a9a6e); }
.mp-card--ok .mp-card__value { color: var(--mp-ok); }

/* ---- Sortable table headers ---- */
.mp-sortable thead th[data-sort] { -webkit-user-select: none; user-select: none; white-space: nowrap; }
.mp-sortable thead th[data-sort]:hover { color: var(--mp-rg-2); }
.mp-pos { color: var(--mp-ok); }
.mp-neg { color: #8A4A40; }

/* ---- F — Cost assumptions (read-only, collapsible) ---- */
.mp-cost-readonly {
  background: var(--mp-surface); border: 1px solid var(--mp-rule);
  border-radius: 16px; box-shadow: var(--mp-shadow); overflow: hidden;
}
.mp-cost-readonly > summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 18px 22px; cursor: pointer; list-style: none;
}
.mp-cost-readonly > summary::-webkit-details-marker { display: none; }
.mp-cost-readonly > summary::after {
  content: "▾"; font-size: 12px; color: var(--mp-ink-2); transition: transform .18s ease; order: 3;
}
.mp-cost-readonly[open] > summary::after { transform: rotate(180deg); }
.mp-cost-readonly__title { font-family: var(--font-heading); font-size: 15px; font-weight: 600; color: var(--mp-ink); }
.mp-cost-readonly__hint { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--mp-ink-2); }
.mp-cost-readonly__body { padding: 4px 22px 22px; border-top: 1px solid var(--mp-rule); }
.mp-cost-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 18px; }
.mp-cost-list--inline { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.mp-cost-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-bottom: 1px dashed var(--mp-rule); font-size: 13px; color: var(--mp-ink);
}
.mp-cost-list li strong { font-family: var(--font-mono); font-weight: 600; color: var(--mp-rg-2); white-space: nowrap; }

/* ---- Cost settings drawer (admin, off-canvas right) ---- */
.mp-drawer { position: fixed; inset: 0; z-index: 110; display: none; }
.mp-drawer[aria-hidden="false"] { display: block; }
.mp-drawer__backdrop { position: absolute; inset: 0; background: rgba(31,26,23,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.mp-drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: 420px; max-width: calc(100% - 32px);
  background: var(--mp-surface); box-shadow: -24px 0 70px rgba(31,26,23,.4);
  padding: 24px 26px; overflow-y: auto; transform: translateX(100%); transition: transform .26s cubic-bezier(.4,0,.2,1);
}
.mp-drawer[aria-hidden="false"] .mp-drawer__panel { transform: translateX(0); }
.mp-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.mp-drawer__title { font-family: var(--font-heading); font-size: 20px; font-weight: 700; margin: 0; }

@media (max-width: 900px) {
  .mp-verdict { padding: 18px 18px; }
  .mp-verdict__value { font-size: 34px; }
  .mp-verdict__side { align-items: flex-start; text-align: left; }
}

/* ---- Portal dos sócios: esconder header/footer/ticker do site (app limpo) ---- */
body.zynix-mgmt #header,
body.zynix-mgmt .header-wrapper,
body.zynix-mgmt #top-bar,
body.zynix-mgmt .zynix-ticker-wrap,
body.zynix-mgmt .footer-wrapper,
body.zynix-mgmt #footer,
body.zynix-mgmt .absolute-footer { display: none !important; }
body.zynix-mgmt #wrapper,
body.zynix-mgmt #wrapper > #main,
body.zynix-mgmt #main,
body.zynix-mgmt #content,
body.zynix-mgmt .page-wrapper { padding-top: 0 !important; margin-top: 0 !important; }

/* ---- Collapsible sidebar ---- */
.mp-sidebar { position: relative; }
.mp-collapse {
  position: absolute; top: 14px; right: 14px; z-index: 3; width: 34px; height: 34px;
  display: none; align-items: center; justify-content: center;
  background: rgba(236,198,192,.18); border: 1px solid rgba(236,198,192,.45);
  border-radius: 9px; color: #F4EEEA; cursor: pointer; line-height: 0;
  transition: background .16s, color .16s, border-color .16s;
}
.mp-sidebar .mp-collapse svg { display: block !important; width: 18px !important; height: 18px !important; min-width: 18px; flex: 0 0 18px; stroke: currentColor; }
.mp-collapse:hover { background: var(--mp-rg-2); border-color: var(--mp-rg-2); color: #fff; }
.mp-reopen { display: none; }
@media (min-width: 861px) {
  .mp-collapse { display: flex; }
  .mp-shell.is-collapsed { grid-template-columns: 1fr; }
  .mp-shell.is-collapsed .mp-sidebar { display: none; }
  .mp-reopen {
    position: fixed; top: 50%; left: 0; transform: translateY(-50%); z-index: 60;
    width: 30px; height: 58px; align-items: center; justify-content: center;
    background: var(--mp-ink); color: #F4EEEA; border: none; border-radius: 0 12px 12px 0;
    cursor: pointer; box-shadow: 4px 6px 18px rgba(31,26,23,.28);
    transition: width .15s, background .15s;
  }
  .mp-shell.is-collapsed .mp-reopen { display: flex; }
  .mp-reopen:hover { background: var(--mp-rg-2); width: 36px; }
}

/* ---- Responsive (new screens) ---- */
@media (max-width: 860px) {
  .mp-toolbar { flex-direction: column; align-items: stretch; }
  .mp-period { overflow-x: auto; }
  .mp-modal__card { margin-top: 3vh; padding: 20px 16px; }
}

/* === ZYNIX RESPONSIVE FIX (13/06) === */

/* FIX 1 (P1-1) — Header não cabe em 851–1024px: colapsar nav desktop p/ burger.
   O logo vive em .flex-col.logo (não tem .hide-for-medium), então :not(.logo) protege. */
@media (max-width: 1024px) {
  #header .flex-col.hide-for-medium:not(.logo) { display: none !important; }
  #header .flex-col.show-for-medium { display: flex !important; }
}

/* FIX 2 (P1-2) + FIX 4 (P2-1) — Conteúdo hand-coded vaza em mobile
   (/contact, /research, /about, /vendors): padding lateral 56px e grids inline sem media query. */
@media (max-width: 768px) {
  .col-inner section[style*="56px"] { padding-left: 20px !important; padding-right: 20px !important; }
  .col-inner div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 24px !important; }
  .col-inner [style*="max-width:1200px"], .col-inner img { max-width: 100% !important; }
}

/* FIX 3 (P1-3) — Painel de Sócios /management/* : clamp responsivo (min-width:0 + canvas) */
.mp-main { min-width: 0; }
.mp-panel, .mp-section, .mp-cards, .mp-grid-2, .mp-grid-2--wide { min-width: 0; }
.mp-chart-wrap, .mp-chart-wrap--sm { width: 100%; min-width: 0; }
.mp-chart-wrap > canvas { max-width: 100% !important; height: auto !important; }
@media (max-width: 860px) {
  .mp-shell { grid-template-columns: minmax(0, 1fr); }
  .mp-sidebar { min-width: 0; max-width: 100%; row-gap: 8px; }
  .mp-sidebar__nav { min-width: 0; width: 100%; }
  .mp-sidebar__footer { margin-left: 0; flex-wrap: wrap; }
}

/* === ZYNIX UI FIX (13/06) — search submit + alinhamentos === */

/* Botão de busca alinhado ao input (era 59px vs 39px) */
.ux-search-box .searchform .flex-row { align-items: center; }
.ux-search-box .searchform .ux-search-submit,
.searchform button[type="submit"].ux-search-submit {
  height: 39px;
  min-height: 39px;
  line-height: 1;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Página de produto: alinhar stepper de quantidade e add-to-cart na mesma altura */
.single-product .quantity.buttons_added .ux-quantity__button,
.single-product input.qty { height: 48px; }
.single-product .single_add_to_cart_button { height: 48px; min-height: 48px; display: inline-flex; align-items: center; }

/* Trust bar — ajuste mobile */
@media (max-width: 600px) {
  .zynix-process__trust { gap: 20px; }
  .zynix-process__trust-item { font-size: 12px; }
}

/* ===================================================================
   === ZYNIX PREMIUM — ONDA 1 (13/06) ===
   Elevação premium em CSS puro. Identidade FIXA (tokens --zynix-*).
   Sombras em charcoal (#1F1A17), nunca preto puro.
   Itens: 1 profundidade fotos · 2 elevação cards · 3 hover vivo ·
   4 badge out-of-stock pílula glass · 5 eyebrow unificado ·
   6 ritmo vertical PDP · 7 hierarquia tipográfica · 8 estados.
   =================================================================== */

/* --- Escala de elevação (sombra charcoal) --- */
:root {
  --elevation-1: 0 1px 3px rgba(31,26,23,.08);
  --elevation-2: 0 4px 10px rgba(31,26,23,.08);
  --elevation-3: 0 10px 24px rgba(31,26,23,.10);
  --elevation-4: 0 20px 44px rgba(31,26,23,.14);
}

/* ------------------------------------------------------------------
   ITEM 1 — Profundidade nas fotos de produto
   Fotos JPG têm fundo rosa opaco embutido → não dá p/ trocar via
   background. Aplicamos uma vinheta inset sutil sobre o container
   da imagem (::after) p/ dar volume sem chapar. Discreto.
   ------------------------------------------------------------------ */
.product-small .box-image,
.product-small-box .box-image,
ul.products li.product .box-image {
  position: relative;
}
.product-small .box-image::after,
.product-small-box .box-image::after,
ul.products li.product .box-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 60px rgba(31,26,23,.04); /* premium imgs já têm profundidade — vinheta reduzida .10→.04 */
  z-index: 1;
}

/* ------------------------------------------------------------------
   ITEM 2 — Elevação dos cards (grade + related products)
   Base elevation-2, cantos suaves, transição. Hover trata no Item 3.
   ------------------------------------------------------------------ */
.product-small.box,
.product-small .box,
ul.products li.product .box,
.related .product-small .box {
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-2);
}
/* container da imagem com cantos + recorte do micro-zoom */
.product-small .box-image,
ul.products li.product .box-image {
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* ------------------------------------------------------------------
   ITEM 3 — Hover vivo (sem layout shift: translateY, não scale no card)
   + micro-zoom da foto + cursor pointer.
   Movimento só com prefers-reduced-motion: no-preference.
   ------------------------------------------------------------------ */
.product-small.box,
.product-small .box,
ul.products li.product .box {
  cursor: pointer;
}
@media (prefers-reduced-motion: no-preference) {
  .product-small.box,
  .product-small .box,
  ul.products li.product .box {
    transition: box-shadow .2s ease, transform .2s ease;
  }
  .product-small.box:hover,
  .product-small .box:hover,
  ul.products li.product .box:hover {
    box-shadow: var(--elevation-4);
    transform: translateY(-4px);
  }
  .product-small .box-image img,
  ul.products li.product .box-image img {
    transition: transform .4s ease;
  }
  .product-small .box:hover .box-image img,
  ul.products li.product .box:hover .box-image img {
    transform: scale(1.04);
  }
}
/* fallback estático p/ quem reduz movimento: só a sombra muda */
@media (prefers-reduced-motion: reduce) {
  .product-small.box:hover,
  .product-small .box:hover,
  ul.products li.product .box:hover {
    box-shadow: var(--elevation-4);
  }
}

/* ------------------------------------------------------------------
   ITEM 4 — Badge "OUT OF STOCK" como pílula glass no canto do card
   Reposiciona o overlay padrão do Flatsome (.out-of-stock-label) p/
   o canto superior esquerdo, sem cobrir o frasco.
   ------------------------------------------------------------------ */
.out-of-stock-label,
.product-small .out-of-stock-label,
ul.products li.product .out-of-stock-label {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  margin: 0 !important;
  transform: none !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: rgba(250,246,243,.6) !important;
  border: 1px solid rgba(255,255,255,.4) !important;
  color: #1F1A17 !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10px !important;
  line-height: 1.4 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  box-shadow: var(--elevation-1);
  z-index: 3;
}

/* ------------------------------------------------------------------
   ITEM 5 — Token de eyebrow unificado
   Utilitária .zynix-eyebrow + alinhamento dos eyebrows/labels mono
   existentes ao MESMO padrão: IBM Plex Mono, uppercase, .2em,
   ~11px, rose-gold ~70%. Margens preservadas por contexto.
   ------------------------------------------------------------------ */
.zynix-eyebrow,
.zynix-hero__eyebrow,
.zynix-featured__eyebrow,
.zynix-process__eyebrow,
.zynix-vlogin__eyebrow,
.vp-train__eyebrow,
.zynix-featured__card-foot,
.woocommerce ul.products li.product .woocommerce-loop-category__title {
  font-family: var(--font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: .2em !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: rgba(236,198,192,.7) !important; /* rose-gold ~70% */
}
/* utilitária standalone com respiro próprio */
.zynix-eyebrow {
  display: inline-block;
  margin: 0 0 16px;
  line-height: 1;
}

/* ONDA C — Hero eyebrow é exceção: fica sobre o painel frosted CLARO, onde o
   rose-gold a 70% some. Mantém o token mono/uppercase, mas troca para rose-dark
   sólido + peso maior para leitura nítida. */
.zynix-hero__eyebrow {
  color: var(--zynix-rose-dark) !important; /* #B97F75 sólido */
  font-weight: 600 !important;
  text-align: center !important; /* centralizado sob o logo (pedido cliente) */
}

/* ------------------------------------------------------------------
   ITEM 6 — Ritmo vertical da PDP (escala 8pt)
   Mais respiro entre título, preço, badge RUO, specs e CTA.
   Tabela de specs: linhas com padding, line-height 1.5, hairline.
   ------------------------------------------------------------------ */
.single-product div.product .summary > *,
.single-product div.product .entry-summary > * {
  margin-bottom: 24px;
}
.single-product div.product .summary .product_title,
.single-product div.product .entry-summary .product_title {
  margin-bottom: 16px;
}
.single-product div.product .summary .price,
.single-product div.product .entry-summary .price {
  margin-top: 8px;
  margin-bottom: 32px;
}
.single-product div.product .summary form.cart,
.single-product div.product .entry-summary form.cart {
  margin-top: 32px;
  margin-bottom: 40px;
}
.single-product div.product .summary .ruo-disclaimer,
.single-product div.product .entry-summary .ruo-disclaimer {
  margin-top: 24px;
  margin-bottom: 32px;
}
/* Tabela de specs — respiro + separadores hairline */
.single-product .woocommerce-product-attributes td,
.single-product .woocommerce-product-attributes th,
.single-product table.shop_attributes td,
.single-product table.shop_attributes th,
.single-product .zynix-specs-table td,
.single-product .zynix-specs-table th {
  padding-top: 16px;
  padding-bottom: 16px;
  line-height: 1.5;
  border-bottom: 1px solid rgba(31,26,23,.08);
}

/* ------------------------------------------------------------------
   ITEM 7 — Hierarquia tipográfica
   Preço PDP: Sora ~30px, peso 600, charcoal.
   H1 hero: clamp maior, tracking apertado, line-height 1.05.
   (Mantém serif italic rose no acento "Confidence." — Item 5 da marca.)
   ------------------------------------------------------------------ */
.single-product div.product .price,
.single-product div.product .summary .price,
.single-product div.product .entry-summary .price,
.single-product div.product .price .woocommerce-Price-amount,
.single-product div.product .price ins .woocommerce-Price-amount {
  font-family: var(--font-heading) !important;
  font-size: 30px !important;
  font-weight: 600 !important;
  color: var(--zynix-charcoal) !important;
  line-height: 1.1 !important;
}
.zynix-hero__title {
  font-size: clamp(2.75rem, 5vw, 4rem) !important;
  letter-spacing: -.02em !important;
  line-height: 1.05 !important;
}

/* ------------------------------------------------------------------
   ITEM 8 — Estados (add-to-cart + botões primários)
   Hover escurece rose-gold (#B97F75 → #A56D63) + elevation-2.
   :active afunda 1px. Transição .15s. Movimento respeita reduce.
   ------------------------------------------------------------------ */
.single-product .single_add_to_cart_button,
.single-product button.single_add_to_cart_button,
.zynix-hero__cta {
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.single-product .single_add_to_cart_button:hover,
.single-product button.single_add_to_cart_button:hover,
.zynix-hero__cta:hover {
  background-color: #A56D63 !important;
  box-shadow: var(--elevation-2);
}
@media (prefers-reduced-motion: no-preference) {
  .single-product .single_add_to_cart_button:active,
  .single-product button.single_add_to_cart_button:active,
  .zynix-hero__cta:active {
    transform: translateY(1px);
  }
}
/* ===================================================================
   === FIM ZYNIX PREMIUM — ONDA 1 ===
   =================================================================== */

/* ===================================================================
   === ZYNIX PREMIUM — ONDA 2 (15/06) ===
   Salto estrutural. Itens do plano premium:
   9  Redesign do card de produto (padding/nome/categoria/preço/gaps)
   10 Container unificado (escopo cirúrgico: seções Zynix + shop + PDP,
      NUNCA o .container global do Flatsome — header/mega-menu/hero/checkout)
   11 Sombra de contato sob os frascos + estados de disponibilidade
      (in-stock pleno · featured aro rose-gold · out-of-stock dessaturado)
   12 Seção dark — gradiente charcoal + eliminar a faixa cinza chapada
   Identidade FIXA. Sombras charcoal. Constrói SOBRE a Onda 1 (não desfaz).
   =================================================================== */

/* token de largura de conteúdo unificada */
:root {
  --zynix-content-max: 1300px;
  --zynix-gutter: clamp(20px, 5vw, 64px);
}

/* -------------------------------------------------------------------
   ITEM 9 — Redesign do card de produto (grade da loja + related)
   Estrutura real Flatsome:
     .product-small.box > .box-image + .box-text.box-text-products >
       .title-wrapper ( p.category.product-cat + p.name.product-title ) +
       .price-wrapper > .price
   ------------------------------------------------------------------- */
.product-small .box-text,
ul.products li.product .box-text {
  padding: 16px 16px 18px !important;
  text-align: left;
}
/* categoria como eyebrow mono (a classe real é .category.product-cat) */
.product-small .box-text .category,
.product-small .box-text .product-cat,
ul.products li.product .box-text .category,
ul.products li.product .box-text .product-cat {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: rgba(185,127,117,.85) !important; /* rose-gold profundo ~85% */
  opacity: 1 !important;
  margin: 0 0 6px !important;
  line-height: 1.3 !important;
}
/* nome do produto — Sora 17px peso 500 */
.product-small .box-text .name.product-title,
.product-small .box-text .woocommerce-loop-product__title,
ul.products li.product .box-text .woocommerce-loop-product__title {
  font-family: var(--font-heading) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: -.01em !important;
  margin: 0 0 10px !important;
  color: var(--zynix-charcoal) !important;
}
.product-small .box-text .name.product-title a,
ul.products li.product .box-text .name.product-title a {
  color: inherit !important;
  font-weight: inherit !important;
}
/* gap consistente entre título e preço */
.product-small .box-text .title-wrapper,
ul.products li.product .box-text .title-wrapper {
  margin-bottom: 10px;
}
/* preço com peso correto — Sora 17px peso 600 rose-dark */
.product-small .box-text .price-wrapper .price,
ul.products li.product .box-text .price,
.woocommerce ul.products li.product .price {
  font-family: var(--font-heading) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--zynix-rose-dark) !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

/* -------------------------------------------------------------------
   ITEM 10 — Container unificado (ESCOPO CIRÚRGICO)
   NÃO tocamos o .container/#content global do Flatsome (mega-menu/hero).
   Só alinhamos: (a) a row da archive da loja, (b) o conteúdo da PDP,
   ao mesmo eixo das seções Zynix (~1300px + gutters fluidos).
   ------------------------------------------------------------------- */
/* (a) Shop / category archive — a .category-page-row é 1400px c/ gutter 20px.
   Convertemos para 1300px central + gutters clamp, igualando as seções Zynix. */
.woocommerce-shop .category-page-row,
.post-type-archive-product .category-page-row,
.tax-product_cat .category-page-row {
  max-width: var(--zynix-content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--zynix-gutter) !important;
  padding-right: var(--zynix-gutter) !important;
  box-sizing: border-box;
}
/* (b) PDP — alinha o wrapper de conteúdo do produto ao mesmo eixo */
.single-product .category-page-row,
.single-product #content > .row,
.single-product .product-page-row {
  max-width: var(--zynix-content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--zynix-gutter) !important;
  padding-right: var(--zynix-gutter) !important;
  box-sizing: border-box;
}

/* -------------------------------------------------------------------
   ITEM 11 — Sombra de contato + estados de disponibilidade
   (a) Sombra de contato: elipse charcoal borrada sob o frasco, ancorando
       a foto como nas fotos premium. Pseudo no .box-image (card) e na
       figure da PDP. Fica ATRÁS da imagem-overlay mas dentro do card.
   ------------------------------------------------------------------- */
.product-small .box-image,
ul.products li.product .box-image,
.single-product .woocommerce-product-gallery__image {
  position: relative;
}
.product-small .box-image::before,
ul.products li.product .box-image::before,
.single-product .woocommerce-product-gallery__image::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 9%;
  width: 56%;
  height: 7%;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(31,26,23,.26), rgba(31,26,23,0) 72%);
  filter: blur(5px);
  pointer-events: none;
  z-index: 2; /* acima da foto, abaixo de badges (z-3) e do micro-zoom recortado */
  opacity: .9;
}

/* (b1) BEST SELLER — aro/acento rose-gold sutil no card (mais vendido) */
.product-small.zynix-bestseller .box,
ul.products li.product.zynix-bestseller .box,
li.product.zynix-bestseller .product-small.box {
  box-shadow:
    0 0 0 1.5px var(--zynix-rose-gold),
    var(--elevation-2) !important;
}
@media (prefers-reduced-motion: no-preference) {
  .product-small.zynix-bestseller .box:hover,
  ul.products li.product.zynix-bestseller .box:hover {
    box-shadow:
      0 0 0 1.5px var(--zynix-rose-dark),
      var(--elevation-4) !important;
  }
}
/* pílula "BEST SELLER" mono discreta no canto (gerada via ::after no col-inner) */
.product-small.zynix-bestseller .col-inner,
ul.products li.product.zynix-bestseller .col-inner {
  position: relative;
}
.product-small.zynix-bestseller .col-inner::after,
ul.products li.product.zynix-bestseller .col-inner::after {
  content: "BEST SELLER";
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--zynix-charcoal);
  background: linear-gradient(135deg, #F4D9D3, #ECC6C0);
  padding: 4px 9px;
  border-radius: 999px;
  box-shadow: var(--elevation-1);
}

/* (b2) OUT OF STOCK — foto gentilmente dessaturada (pílula glass = Onda 1) */
.product-small.outofstock .box-image img,
.product-small.out-of-stock .box-image img,
ul.products li.product.outofstock .box-image img {
  filter: grayscale(.35) saturate(.7) brightness(.99);
  opacity: .92;
  transition: filter .3s ease, opacity .3s ease;
}
/* no hover de um esgotado, não "revive" a foto (sem over-promising) */
.product-small.outofstock .box:hover .box-image img,
ul.products li.product.outofstock .box:hover .box-image img {
  filter: grayscale(.35) saturate(.7) brightness(.99);
  opacity: .92;
}
/* a sombra de contato fica mais discreta no esgotado */
.product-small.outofstock .box-image::before,
ul.products li.product.outofstock .box-image::before {
  opacity: .55;
}

/* -------------------------------------------------------------------
   ITEM 12 — Seção dark: gradiente charcoal + matar a faixa cinza chapada
   - .zynix-process e o footer ganham gradiente sutil (160deg #28211D→#1F1A17)
   - .absolute-footer.dark estava chapado em #4D4D4D (a "faixa cinza"):
     trazemos para o mesmo charcoal, sem costura abrupta.
   ------------------------------------------------------------------- */
.zynix-process {
  background: linear-gradient(160deg, #28211D 0%, #1F1A17 100%) !important;
}
.footer-wrapper,
#footer.footer-wrapper {
  background: linear-gradient(160deg, #28211D 0%, #1F1A17 100%) !important;
}
/* faixa de copyright: era cinza chapado #4D4D4D → charcoal contínuo */
.absolute-footer.dark,
#footer .absolute-footer {
  background-color: transparent !important;
  background-image: none !important;
  border-top: 1px solid rgba(236,198,192,.08);
}
/* ===================================================================
   === FIM ZYNIX PREMIUM — ONDA 2 ===
   =================================================================== */

/* ===================================================================
   ONDA B — Barra inferior do rodapé: copyright (esq) + BoomTube (dir)
   - Os ícones sociais saíram daqui (agora na seção social da home).
   - .footer-secondary.pull-right agora hospeda o crédito BoomTube.
   - Em ≤549px tudo empilha e centraliza, sem overflow horizontal.
   =================================================================== */
.absolute-footer .footer-secondary.pull-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
/* O botão fixo "back-to-top" (.hide-for-medium) só aparece em telas grandes;
   nesse caso afastamos o crédito BoomTube p/ ele não ficar atrás do botão. */
@media (min-width: 850px) {
  .absolute-footer .footer-secondary.pull-right {
    padding-right: 48px;
  }
}
.absolute-footer .footer-secondary .footer-text {
  margin: 0;
}
.absolute-footer .copyright-footer {
  margin: 0;
}

@media (max-width: 549px) {
  .absolute-footer .footer-primary.pull-left,
  .absolute-footer .footer-secondary.pull-right {
    float: none !important;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .absolute-footer .footer-secondary.pull-right {
    margin-bottom: 12px;
  }
  .zynix-boomtube-credit {
    justify-content: center;
    text-align: center;
  }
  .zynix-payment-row {
    padding-top: 22px;
  }
  .zynix-payment-flags .payment-icon svg {
    width: 38px;
  }
}

/* === ZYNIX PDP ACCORDIONS === */
.zynix-pdp-accordions {
  margin: var(--space-2xl) 0 var(--space-xl);
  border-top: 1px solid var(--zynix-rule-strong);
}

/* Each accordion item */
.zynix-acc {
  border-bottom: 1px solid var(--zynix-rule);
}

/* Strip the native disclosure marker */
.zynix-acc__summary {
  list-style: none;
}
.zynix-acc__summary::-webkit-details-marker {
  display: none;
}

/* Clickable header — full width, Sora, generous padding, chevron */
.zynix-acc__summary {
  position: relative;
  display: block;
  width: 100%;
  padding: var(--space-lg) 2.75rem var(--space-lg) 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--zynix-charcoal);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: color var(--transition-base);
}
.zynix-acc__summary:hover,
.zynix-acc[open] > .zynix-acc__summary {
  color: var(--zynix-rose-dark);
}
.zynix-acc__summary:focus-visible {
  outline: 2px solid var(--zynix-rose-dark);
  outline-offset: 3px;
}

/* Rose-gold chevron — rotates 180° when open */
.zynix-acc__summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.4rem;
  width: 0.6rem;
  height: 0.6rem;
  margin-top: -0.42rem;
  border-right: 2px solid var(--zynix-rose-dark);
  border-bottom: 2px solid var(--zynix-rose-dark);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform var(--transition-base);
}
.zynix-acc[open] > .zynix-acc__summary::after {
  transform: rotate(225deg);
  margin-top: -0.18rem;
}

/* Body — Inter */
.zynix-acc__body {
  padding: 0 0 var(--space-xl);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--zynix-gray);
}
.zynix-acc__body p { margin: 0 0 var(--space-md); }
.zynix-acc__body p:last-child { margin-bottom: 0; }
.zynix-acc__body ul,
.zynix-acc__body ol { margin: 0 0 var(--space-md) 1.25rem; }
.zynix-acc__body a {
  color: var(--zynix-rose-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Inline COA link */
.zynix-acc-link {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
}

/* Technical specs inside the accordion → Mono values, mobile-first list */
.zynix-acc__body .zynix-specs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
.zynix-acc__body .zynix-specs-table th,
.zynix-acc__body .zynix-specs-table td {
  text-align: left;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--zynix-rule);
  vertical-align: top;
}
.zynix-acc__body .zynix-specs-table th {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--zynix-charcoal);
  width: 42%;
  white-space: nowrap;
}
.zynix-acc__body .zynix-specs-table td {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--zynix-gray);
}
.zynix-acc__body .zynix-specs-table tr:last-child th,
.zynix-acc__body .zynix-specs-table tr:last-child td {
  border-bottom: none;
}

/* Disclaimers — mono, small, reduced opacity */
.zynix-acc-ruo,
.zynix-acc-attr,
.zynix-acc-fda {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--zynix-gray);
  opacity: 0.72;
}
.zynix-acc-ruo {
  margin: 0 0 var(--space-md);
  text-transform: uppercase;
}
.zynix-acc-attr {
  margin: 0 0 var(--space-md);
  padding-left: var(--space-md);
  border-left: 2px solid var(--zynix-rule-strong);
}
.zynix-acc-fda {
  margin: var(--space-lg) 0 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--zynix-rule);
}

/* Mobile-first: specs become stacked label / value pairs */
@media (max-width: 549px) {
  .zynix-acc__body .zynix-specs-table th,
  .zynix-acc__body .zynix-specs-table td {
    display: block;
    width: 100%;
    white-space: normal;
    padding: 0.35rem 0;
    border-bottom: none;
  }
  .zynix-acc__body .zynix-specs-table th {
    padding-top: 0.7rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
  }
  .zynix-acc__body .zynix-specs-table tr {
    display: block;
    border-bottom: 1px solid var(--zynix-rule);
  }
  .zynix-acc__body .zynix-specs-table tr:last-child {
    border-bottom: none;
  }
}

/* Respect reduced-motion: no chevron rotation animation */
@media (prefers-reduced-motion: reduce) {
  .zynix-acc__summary,
  .zynix-acc__summary::after {
    transition: none;
  }
}
/* === END ZYNIX PDP ACCORDIONS === */

/* === ZYNIX PDP BULLETS === */
/* Research-attribute checklist in the buy box, above the fold (rendered under
   the short description, before price/CTA). On-brand rose-gold checks with
   Inter charcoal text. */
.zynix-pdp-checks {
  list-style: none;
  margin: 0.9em 0 1.1em;
  padding: 0;
}

.zynix-pdp-checks__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 4px 0;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--zynix-charcoal);
}

.zynix-pdp-checks__icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--zynix-rose-dark); /* deeper rose for contrast on white */
}

.zynix-pdp-checks__text {
  flex: 1 1 auto;
}

@media (max-width: 549px) {
  .zynix-pdp-checks__item {
    font-size: 14px;
  }
}
/* === END ZYNIX PDP BULLETS === */

/* ============================================================
   FLOATING FREE-SHIPPING CARD — "DARK LUXE" (final, home only, fixed bottom-left)
   DOM: aside.zynix-fsc.zynix-fsc--a >
        [ .zynix-fsc__close + .zynix-fsc__icon + .zynix-fsc__body
          (eyebrow / title>.zynix-fsc__num / text / cta) ]
   z-index 8000: above page content, below cart off-canvas + age gate (999999).
   Shadows are CHARCOAL, never pure black. Foil = rose-gold gradient sheen.

   Hitbox go-live fix: this card is pinned bottom-left, which sits directly
   over the hero's "Explore Products" CTA (always, no mitigation existed —
   the button was only clickable on its arrow) and, on scroll, over the
   footer legal links. The .is-at-footer state below already had the right
   idea (fade + pointer-events:none) but only an IntersectionObserver on
   the footer; the JS now also observes the hero and applies the same
   state whenever either is on screen.
   ============================================================ */

/* ---------- Shared structure (position, motion, layout) ---------- */
.zynix-fsc {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 8000;
  width: 366px;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px 20px 20px;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  /* hidden state for entry animation */
  opacity: 0;
  transform: translateY(18px) scale(.985);
  transition: opacity .5s ease, transform .55s cubic-bezier(.16,.84,.44,1);
}
.zynix-fsc.is-in   { opacity: 1; transform: translateY(0) scale(1); }
.zynix-fsc.is-static { opacity: 1; transform: none; }
/* pointer-events:none while it fades out on manual dismiss too — without
   it, the invisible-but-still-fixed card could swallow a click meant for
   whatever sits underneath during the ~280ms transition. */
.zynix-fsc.is-out  { opacity: 0; transform: translateY(18px) scale(.985); pointer-events: none; }
/* auto-hide quando o hero ou o footer entram na viewport (IntersectionObserver)
   — some suavemente sem se sobrepor ao CTA do hero nem ao rodapé; volta ao
   sair de ambos. Transição ~300ms. */
.zynix-fsc.is-at-footer {
  opacity: 0;
  transform: translateY(24px) scale(.985);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s cubic-bezier(.16,.84,.44,1);
}
@media (prefers-reduced-motion: reduce) {
  .zynix-fsc.is-at-footer { transition: none; }
}

/* Faint film-grain / noise overlay shared by all concepts — adds material */
.zynix-fsc::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .55;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
.zynix-fsc > * { position: relative; z-index: 1; }

/* ---------- Shared body typography ---------- */
.zynix-fsc__body { flex: 1 1 auto; min-width: 0; }

/* Same-day hierarchy fix (Alan, go-live): the eyebrow now carries the
   protagonist claim ("Same-Day Shipping") so it's sized up from a typical
   10px kicker to read as the headline; the title slot below it now holds
   the smaller 2PM qualifier, sized/weighted down to read as a subtitle
   under the eyebrow instead of the old $-amount headline it used to be. */
.zynix-fsc__eyebrow {
  display: block;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.zynix-fsc__title {
  font-family: var(--font-heading, 'Sora', sans-serif) !important;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 0 0 10px;
}
.zynix-fsc__num {
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.zynix-fsc__text {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0 0 14px;
}
.zynix-fsc__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 11px;
  transition: background .22s ease, transform .22s ease, box-shadow .22s ease, color .22s ease;
}
.zynix-fsc__cta:hover,
.zynix-fsc__cta:focus { transform: translateY(-1px); }

.zynix-fsc__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  margin-top: 2px;
}
.zynix-fsc__close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  z-index: 2;
  transition: background .2s ease, color .2s ease;
}

/* ============================================================
   CONCEPT A — "DARK LUXE" (charcoal gradient + rose-gold foil sheen)
   ============================================================ */
.zynix-fsc--a {
  background: linear-gradient(157deg, #2A231F 0%, #1F1A17 62%, #181310 100%);
  border: 1px solid rgba(236,198,192,.14);
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,          /* top inner highlight */
    0 22px 48px rgba(31,26,23,.42),               /* deep contact shadow */
    0 4px 14px rgba(31,26,23,.30);
}
/* Foil sheen sweeping across the top — luxe holographic accent */
.zynix-fsc--a::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(236,198,192,.16), transparent 55%),
    radial-gradient(90% 80% at 100% 0%, rgba(185,127,117,.18), transparent 60%),
    linear-gradient(115deg, transparent 38%, rgba(244,217,211,.10) 50%, transparent 62%);
}
.zynix-fsc--a .zynix-fsc__icon {
  background: linear-gradient(140deg, rgba(244,217,211,.16), rgba(185,127,117,.10));
  border: 1px solid rgba(236,198,192,.30);
  color: #F4D9D3;
}
.zynix-fsc--a .zynix-fsc__glyph { filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.zynix-fsc--a .zynix-fsc__eyebrow {
  background: linear-gradient(95deg, #F4D9D3, #ECC6C0, #D6A39A);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #ECC6C0;
}
.zynix-fsc--a .zynix-fsc__title { color: #C8BCB4; }
.zynix-fsc--a .zynix-fsc__num {
  background: linear-gradient(100deg, #F6DDD7, #ECC6C0 45%, #D29C92);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.zynix-fsc--a .zynix-fsc__text { color: #C8BCB4; }
.zynix-fsc--a .zynix-fsc__cta {
  background: linear-gradient(135deg, #ECC6C0, #B97F75);
  color: #1F1A17;
  box-shadow: 0 6px 16px rgba(185,127,117,.30), 0 1px 0 rgba(255,255,255,.30) inset;
}
.zynix-fsc--a .zynix-fsc__cta:hover,
.zynix-fsc--a .zynix-fsc__cta:focus {
  background: linear-gradient(135deg, #F4D9D3, #C98C82);
  box-shadow: 0 10px 22px rgba(185,127,117,.40), 0 1px 0 rgba(255,255,255,.35) inset;
}
.zynix-fsc--a .zynix-fsc__close { color: #9c8f88; }
.zynix-fsc--a .zynix-fsc__close:hover,
.zynix-fsc--a .zynix-fsc__close:focus { background: rgba(236,198,192,.16); color: #F4D9D3; }

/* ---------- Mobile (≤549px): near-full-width, no horizontal overflow ---------- */
@media screen and (max-width: 549px) {
  .zynix-fsc {
    left: 16px;
    right: 16px;
    bottom: 16px;
    width: auto;
    max-width: calc(100vw - 32px);
    padding: 16px 18px;
    gap: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zynix-fsc { transition: none; }
}
/* === END ZYNIX FLOATING SHIP CARD (PREMIUM v2) === */

/* ==================================================================
   ZYNIX — ONDA 3 / ITEM 14: POLISH DE MOVIMENTO
   1) Staggered reveal on scroll  2) :focus-visible ring
   3) Skeleton shimmer no grid    4) prefers-reduced-motion respeitado
   Progressive enhancement: estado escondido SÓ quando <html> tem
   .is-reveal-ready (setada por JS). Sem JS => tudo visível.
   ================================================================== */

/* ---- 1) STAGGERED REVEAL ---------------------------------------- */
/* Estado inicial escondido só com JS ativo (.is-reveal-ready). */
.is-reveal-ready .zx-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .58s cubic-bezier(.22,.61,.36,1),
              transform .58s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.is-reveal-ready .zx-reveal.zx-revealed {
  opacity: 1;
  transform: none;
}
/* limpa will-change após revelar para não custar memória */
.is-reveal-ready .zx-reveal.zx-revealed {
  will-change: auto;
}

/* ---- 2) :focus-visible RING (rose-gold, teclado) ---------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.button:focus-visible,
.zynix-featured__card-cta:focus-visible,
.zynix-hero__cta:focus-visible,
.zynix-purity__cta:focus-visible,
.products .product-small a:focus-visible {
  outline: 2px solid var(--zynix-rose-dark);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- 3) SKELETON SHIMMER no grid de produtos ------------------- */
/* Wrapper da imagem recebe shimmer enquanto carrega; some no .is-loaded */
.is-reveal-ready .products .product-small .box-image,
.is-reveal-ready .zynix-featured__card-media {
  position: relative;
  overflow: hidden;
}
/* Sweep no ::after (sobrepõe a vinheta Onda-1 só enquanto carrega;
   a vinheta volta sozinha quando some o :not(.is-loaded)).
   Fundo on-brand + gradiente animado numa única declaração `background`. */
.is-reveal-ready .products .product-small .box-image:not(.is-loaded)::after,
.is-reveal-ready .zynix-featured__card-media:not(.is-loaded)::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      rgba(245,220,216,0) 20%,
      rgba(236,198,192,.55) 45%,
      rgba(250,246,243,.9) 50%,
      rgba(236,198,192,.55) 55%,
      rgba(245,220,216,0) 80%
    ) #F5DCD8;
  background-size: 220% 100%, auto;
  animation: zxShimmer 1.25s ease-in-out infinite;
  border-radius: inherit;
  box-shadow: none;
  z-index: 4; /* acima da foto e do contact shadow enquanto carrega */
  pointer-events: none;
}
.is-reveal-ready .products .product-small .box-image.is-loaded::after,
.is-reveal-ready .zynix-featured__card-media.is-loaded::after {
  /* nada extra: a regra :not(.is-loaded) deixa de aplicar e a vinheta volta */
  background-image: none;
}
@keyframes zxShimmer {
  0%   { background-position: 180% 0, 0 0; }
  100% { background-position: -80% 0, 0 0; }
}

/* ---- 4) prefers-reduced-motion: sem reveal, sem shimmer ---------- */
@media (prefers-reduced-motion: reduce) {
  .is-reveal-ready .zx-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .is-reveal-ready .products .product-small .box-image:not(.is-loaded)::after,
  .is-reveal-ready .zynix-featured__card-media:not(.is-loaded)::after {
    animation: none !important;
    /* mantém um fundo estático on-brand, sem movimento */
    background: linear-gradient(135deg, #FAF6F3 0%, #F5DCD8 100%);
  }
}
/* === END ZYNIX ONDA 3 / ITEM 14 === */

/* ==================================================================
   ZYNIX — SHOP / ARCHIVE REDESIGN  [.bak-shopredesign]
   Premium full-bleed hero + textured trust strip + wide grid.
   Scoped to product archives only (shop, product-category,
   product-tag) so Flatsome globals (.container, header, mega-menu,
   home hero video, checkout) are untouched.
   Scope classes: body.woocommerce-shop / .post-type-archive-product
                  / .tax-product_cat / .tax-product_tag
   ================================================================== */

/* ---- 0) Shared tokens for this surface --------------------------- */
.woocommerce-shop,
.post-type-archive-product,
.tax-product_cat,
.tax-product_tag {
  --zx-shop-gutter: clamp(20px, 5vw, 72px);   /* page side gutter */
  --zx-shop-max: 1680px;                        /* content max width */
}

/* Kill the broken legacy inline-HTML hero that lived in the Shop
   page content (page-description). We render our own premium one. */
.woocommerce-shop .page-description,
.post-type-archive-product .page-description {
  display: none !important;
}

/* ---- 1) FULL-WIDTH LAYOUT (scoped, no global override) ----------- */
/* The constrained Flatsome row becomes a wide, gutter-padded band. */
.woocommerce-shop .category-page-row,
.post-type-archive-product .category-page-row,
.tax-product_cat .category-page-row,
.tax-product_tag .category-page-row {
  max-width: var(--zx-shop-max) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--zx-shop-gutter) !important;
  padding-right: var(--zx-shop-gutter) !important;
}

/* Hide the empty "assign widgets" sidebar — reclaim the full width. */
.woocommerce-shop .category-page-row > .col.large-3,
.post-type-archive-product .category-page-row > .col.large-3,
.tax-product_cat .category-page-row > .col.large-3,
.tax-product_tag .category-page-row > .col.large-3 {
  display: none !important;
}
.woocommerce-shop .category-page-row > .col.large-9,
.post-type-archive-product .category-page-row > .col.large-9,
.tax-product_cat .category-page-row > .col.large-9,
.tax-product_tag .category-page-row > .col.large-9 {
  flex-basis: 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}
/* shop-container inside the col: let it breathe edge-to-edge of band */
.woocommerce-shop .shop-container,
.post-type-archive-product .shop-container,
.tax-product_cat .shop-container,
.tax-product_tag .shop-container {
  max-width: none !important;
}

/* ---- 2) MORE COLUMNS on large screens --------------------------- */
/* Row class is now large-columns-4. We only TOUCH columns >=1200px so
   Flatsome's native medium-columns-3 / small-columns-2 keep governing
   tablet & mobile untouched.
   1200-1399px -> 3 cols (avoid cramping)
   1400-1799px -> 4 cols
   >=1800px    -> 5 cols (fills ultrawide elegantly) */
@media (min-width: 1200px) and (max-width: 1399px) {
  .woocommerce-shop .products.large-columns-4 > .product-small.col,
  .post-type-archive-product .products.large-columns-4 > .product-small.col,
  .tax-product_cat .products.large-columns-4 > .product-small.col,
  .tax-product_tag .products.large-columns-4 > .product-small.col {
    flex-basis: 33.3333% !important;
    max-width: 33.3333% !important;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  .woocommerce-shop .products.large-columns-4 > .product-small.col,
  .post-type-archive-product .products.large-columns-4 > .product-small.col,
  .tax-product_cat .products.large-columns-4 > .product-small.col,
  .tax-product_tag .products.large-columns-4 > .product-small.col {
    flex-basis: 25% !important;
    max-width: 25% !important;
  }
}
@media (min-width: 1800px) {
  .woocommerce-shop .products.large-columns-4 > .product-small.col,
  .post-type-archive-product .products.large-columns-4 > .product-small.col,
  .tax-product_cat .products.large-columns-4 > .product-small.col,
  .tax-product_tag .products.large-columns-4 > .product-small.col {
    flex-basis: 20% !important;
    max-width: 20% !important;
  }
}
/* comfortable consistent gutter + release the global .row 1400px cap
   so the grid fills the full wide band. */
.woocommerce-shop .products.row,
.post-type-archive-product .products.row,
.tax-product_cat .products.row,
.tax-product_tag .products.row {
  max-width: none !important;
  width: 100% !important;
  margin-top: clamp(20px, 2.4vw, 40px) !important;
}
/* also release the leftover Flatsome .container inside shop-container */
.woocommerce-shop .shop-container > .container,
.post-type-archive-product .shop-container > .container,
.tax-product_cat .shop-container > .container,
.tax-product_tag .shop-container > .container {
  max-width: none !important;
}

/* ---- 3) FULL-BLEED PREMIUM HERO --------------------------------- */
.zynix-shop-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* full-bleed: break out of any constrained ancestor */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: linear-gradient(160deg, #2A221E 0%, #1F1A17 62%, #1A1512 100%);
  padding: clamp(56px, 7vw, 104px) var(--zx-shop-gutter) clamp(48px, 5vw, 76px);
  box-shadow:
    inset 0 -1px 0 rgba(236, 198, 192, 0.06),
    inset 0 0 200px rgba(0, 0, 0, 0.28);  /* soft vignette for depth */
}
/* rose-gold radial glow (reuse How It Works treatment) */
.zynix-shop-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(54% 64% at 16% -8%, rgba(236, 198, 192, 0.18) 0%, rgba(236, 198, 192, 0) 58%),
    radial-gradient(60% 90% at 92% 38%, rgba(185, 127, 117, 0.20) 0%, rgba(185, 127, 117, 0) 60%),
    radial-gradient(40% 70% at 100% 118%, rgba(185, 127, 117, 0.12) 0%, rgba(185, 127, 117, 0) 70%);
  pointer-events: none;
}
/* subtle film grain */
.zynix-shop-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.zynix-shop-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--zx-shop-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}
.zynix-shop-hero__lead {
  max-width: 640px;
}
.zynix-shop-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--zynix-rose-gold);
  margin: 0 0 22px;
  position: relative;
  padding-left: 30px;
}
.zynix-shop-hero__eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 20px;
  height: 1px;
  background: linear-gradient(90deg, var(--zynix-rose-dark), rgba(185,127,117,0));
}
.zynix-shop-hero__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(2.6rem, 5.6vw, 5rem);
  letter-spacing: -0.025em;
  line-height: 0.95;
  color: #FAF6F3;
  margin: 0 0 22px;
  text-wrap: balance;
}
.zynix-shop-hero__intro {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.65;
  color: rgba(250, 246, 243, 0.74);
  max-width: 560px;
  margin: 0 0 38px;
}
/* RUO notice — tasteful glass card */
.zynix-shop-hero__notice {
  max-width: 760px;
  padding: 18px 22px;
  border-radius: 10px;
  border: 1px solid rgba(236, 198, 192, 0.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
  backdrop-filter: blur(2px);
}
.zynix-shop-hero__notice-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--zynix-rose-gold);
  margin-bottom: 9px;
}
.zynix-shop-hero__notice-label svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.zynix-shop-hero__notice-body {
  display: block;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(250, 246, 243, 0.58);
}

/* ---- 3b) HERO RIGHT PANEL — liquid-glass "catalog at a glance" --- */
.zynix-shop-hero__panel {
  position: relative;
  border-radius: 18px;
  padding: clamp(22px, 2.4vw, 32px) clamp(22px, 2.4vw, 34px);
  border: 1px solid rgba(236, 198, 192, 0.22);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.015) 48%, rgba(185, 127, 117, 0.06) 100%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 26px 60px -28px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}
/* thin rose-gold top hairline for a "screen edge" glint */
.zynix-shop-hero__panel::before {
  content: "";
  position: absolute;
  top: 0; left: 18px; right: 18px;
  height: 1px;
  background: linear-gradient(90deg, rgba(236,198,192,0), rgba(236,198,192,0.55), rgba(236,198,192,0));
  pointer-events: none;
}
.zynix-shop-hero__panel-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--zynix-rose-gold);
  margin: 0 0 18px;
}
.zynix-shop-hero__stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.zynix-shop-hero__stat {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid rgba(236, 198, 192, 0.12);
}
.zynix-shop-hero__stat:first-child { border-top: 0; padding-top: 2px; }
.zynix-shop-hero__stat:last-child { padding-bottom: 2px; }
.zynix-shop-hero__stat-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--zynix-rose-gold);
  background: linear-gradient(155deg, rgba(255,255,255,0.08), rgba(185,127,117,0.10));
  border: 1px solid rgba(236, 198, 192, 0.18);
}
.zynix-shop-hero__stat-icon svg { width: 20px; height: 20px; }
.zynix-shop-hero__stat-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.zynix-shop-hero__stat-value {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(20px, 1.7vw, 25px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: #FAF6F3;
}
.zynix-shop-hero__stat-unit {
  font-size: 0.62em;
  color: var(--zynix-rose-gold);
  margin-left: 2px;
}
.zynix-shop-hero__stat-label {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(250, 246, 243, 0.62);
}

/* ---- 4) TRUST STRIP — light, textured, wide --------------------- */
.zynix-shop-trust {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background:
    radial-gradient(120% 140% at 50% -40%, rgba(236, 198, 192, 0.14) 0%, rgba(236, 198, 192, 0) 55%),
    linear-gradient(180deg, #FAF6F3 0%, #F4EBE6 100%);
  border-bottom: 1px solid var(--zynix-rule);
  padding: clamp(34px, 4vw, 56px) var(--zx-shop-gutter);
}
.zynix-shop-trust::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.03;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.zynix-shop-trust__inner {
  max-width: var(--zx-shop-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 56px);
}
.zynix-shop-trust__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
}
.zynix-shop-trust__item--divider::before {
  content: "";
  position: absolute;
  left: clamp(-12px, -1.5vw, -28px);
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: linear-gradient(180deg, rgba(219,195,187,0), var(--zynix-rule-strong) 30%, var(--zynix-rule-strong) 70%, rgba(219,195,187,0));
}
.zynix-shop-trust__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--zynix-rose-dark);
  background: linear-gradient(155deg, #FFFFFF 0%, #FAEEEB 100%);
  border: 1px solid var(--zynix-rule);
  box-shadow: 0 2px 8px rgba(31, 26, 23, 0.06);
}
.zynix-shop-trust__icon svg {
  width: 20px;
  height: 20px;
}
.zynix-shop-trust__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--zynix-rose-dark);
  margin: 0 0 6px;
}
.zynix-shop-trust__stat {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--zynix-charcoal);
  letter-spacing: -0.01em;
  margin: 0 0 7px;
  line-height: 1.1;
}
.zynix-shop-trust__body {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--zynix-gray);
  margin: 0;
  max-width: 30ch;
}

/* ---- 5) RESULTS / SORTING BAR (the Flatsome page-title block) ---- */
/* Widen + restyle the breadcrumb + result-count + ordering bar. */
.woocommerce-shop .shop-page-title .page-title-inner,
.post-type-archive-product .shop-page-title .page-title-inner,
.tax-product_cat .shop-page-title .page-title-inner,
.tax-product_tag .shop-page-title .page-title-inner {
  max-width: var(--zx-shop-max) !important;
  width: 100% !important;
  padding-left: var(--zx-shop-gutter) !important;
  padding-right: var(--zx-shop-gutter) !important;
  align-items: center;
}
.woocommerce-shop .shop-page-title,
.post-type-archive-product .shop-page-title,
.tax-product_cat .shop-page-title,
.tax-product_tag .shop-page-title {
  padding-top: clamp(22px, 2.6vw, 34px);
  padding-bottom: clamp(14px, 1.6vw, 20px);
  border-bottom: 1px solid var(--zynix-rule);
  background: linear-gradient(180deg, #FFFFFF 0%, var(--zynix-offwhite) 100%);
}
/* result count: elegant mono label */
.woocommerce-shop .shop-page-title .woocommerce-result-count,
.post-type-archive-product .shop-page-title .woocommerce-result-count,
.tax-product_cat .shop-page-title .woocommerce-result-count,
.tax-product_tag .shop-page-title .woocommerce-result-count {
  font-family: var(--font-mono);
  font-size: 11px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zynix-gray) !important;
  margin: 0 18px 0 0 !important;
}
/* breadcrumb refinement */
.woocommerce-shop .shop-page-title .woocommerce-breadcrumb,
.post-type-archive-product .shop-page-title .woocommerce-breadcrumb,
.tax-product_cat .shop-page-title .woocommerce-breadcrumb,
.tax-product_tag .shop-page-title .woocommerce-breadcrumb {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--zynix-gray);
}
/* on-brand custom select for ordering */
.woocommerce-shop .shop-page-title .woocommerce-ordering select.orderby,
.post-type-archive-product .shop-page-title .woocommerce-ordering select.orderby,
.tax-product_cat .shop-page-title .woocommerce-ordering select.orderby,
.tax-product_tag .shop-page-title .woocommerce-ordering select.orderby {
  -webkit-appearance: none;
  appearance: none;
  /* BUGFIX (shop2): theme forced a small fixed height on <select>, so the
     20.8px text line was clipped inside a ~12px content box. Force a
     comfortable touch-target height with matching line-height + centered
     padding so the full label always shows. */
  height: 46px !important;
  min-height: 46px;
  line-height: 1.2;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--zynix-charcoal);
  background-color: #fff;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23B97F75' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #FFFFFF 0%, #FCF7F5 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: right 16px center, 0 0;
  background-size: 12px 8px, 100% 100%;
  border: 1px solid var(--zynix-rule-strong);
  border-radius: 999px;
  padding: 0 42px 0 20px;
  display: inline-flex;
  align-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(31,26,23,0.04);
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.woocommerce-shop .shop-page-title .woocommerce-ordering select.orderby:hover,
.post-type-archive-product .shop-page-title .woocommerce-ordering select.orderby:hover,
.tax-product_cat .shop-page-title .woocommerce-ordering select.orderby:hover,
.tax-product_tag .shop-page-title .woocommerce-ordering select.orderby:hover {
  border-color: var(--zynix-rose-dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 2px 12px rgba(185, 127, 117, 0.16);
}
.woocommerce-shop .shop-page-title .woocommerce-ordering select.orderby:focus-visible,
.post-type-archive-product .shop-page-title .woocommerce-ordering select.orderby:focus-visible,
.tax-product_cat .shop-page-title .woocommerce-ordering select.orderby:focus-visible,
.tax-product_tag .shop-page-title .woocommerce-ordering select.orderby:focus-visible {
  outline: 2px solid var(--zynix-rose-gold);
  outline-offset: 2px;
  border-color: var(--zynix-rose-dark);
}

/* ---- 6) PAGINATION on-brand ------------------------------------- */
.woocommerce-shop .woocommerce-pagination .page-numbers,
.post-type-archive-product .woocommerce-pagination .page-numbers,
.tax-product_cat .woocommerce-pagination .page-numbers,
.tax-product_tag .woocommerce-pagination .page-numbers {
  border-radius: 999px;
}
.woocommerce-shop .woocommerce-pagination .page-numbers.current,
.post-type-archive-product .woocommerce-pagination .page-numbers.current,
.tax-product_cat .woocommerce-pagination .page-numbers.current,
.tax-product_tag .woocommerce-pagination .page-numbers.current {
  background: var(--zynix-rose-dark) !important;
  color: #fff !important;
  border-color: var(--zynix-rose-dark) !important;
}

/* ---- 7) TABLET — collapse hero to one column -------------------- */
@media (max-width: 1024px) {
  .zynix-shop-hero__inner {
    grid-template-columns: 1fr;
    gap: clamp(30px, 5vw, 44px);
    align-items: start;
  }
  .zynix-shop-hero__lead { max-width: 700px; }
  .zynix-shop-hero__panel { max-width: 640px; }
}

/* ---- 8) MOBILE ------------------------------------------------- */
@media (max-width: 849px) {
  .zynix-shop-trust__inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .zynix-shop-hero__panel { padding: 20px; border-radius: 14px; }
  .zynix-shop-hero__stat { padding: 13px 0; gap: 13px; }
  .woocommerce-shop .shop-page-title .woocommerce-ordering select.orderby,
  .post-type-archive-product .shop-page-title .woocommerce-ordering select.orderby,
  .tax-product_cat .shop-page-title .woocommerce-ordering select.orderby,
  .tax-product_tag .shop-page-title .woocommerce-ordering select.orderby {
    width: 100%;
  }
  .zynix-shop-trust__item--divider::before { display: none; }
  .zynix-shop-trust__item {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--zynix-rule);
  }
  .zynix-shop-trust__item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .zynix-shop-hero__notice { padding: 16px 18px; }
  /* keep the results bar tidy when it wraps on mobile */
  .woocommerce-shop .shop-page-title .woocommerce-result-count,
  .post-type-archive-product .shop-page-title .woocommerce-result-count,
  .tax-product_cat .shop-page-title .woocommerce-result-count,
  .tax-product_tag .shop-page-title .woocommerce-result-count {
    margin: 0 0 4px 0 !important;
  }
}
/* === END ZYNIX SHOP / ARCHIVE REDESIGN === */

/* ============================================================
   FASE C — 20/jul/2026
   ============================================================ */

/* ---- (11) Mini-cart "Continue Shopping" ---- */
.zynix-minicart-continue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 20px;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--zynix-rose-dark);
  background: transparent;
  border: 1px solid var(--zynix-rule-strong);
  border-radius: 6px;
  text-decoration: none !important;
  transition: background var(--transition-fast, 150ms ease), border-color var(--transition-fast, 150ms ease);
}
.zynix-minicart-continue:hover {
  background: var(--zynix-nude);
  border-color: var(--zynix-rose-dark);
  color: var(--zynix-rose-dark);
}

/* ---- (13) Anti-stacking discount notice ---- */
tr.zynix-discount-anti-stack td {
  padding: 0 !important;
  border: none !important;
}
.zynix-discount-notice {
  margin: 6px 0 10px;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--zynix-gray);
  background: var(--zynix-nude);
  border: 1px solid var(--zynix-rule-strong);
  border-radius: 6px;
}

/* ---- (5) Logout confirmation modal ---- */
.zynix-logout-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zynix-logout-modal[hidden] { display: none; }
.zynix-logout-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(31, 26, 23, 0.55);
}
.zynix-logout-modal__card {
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 360px;
  padding: 28px 26px 24px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 24px 60px -18px rgba(31, 26, 23, 0.45);
  text-align: center;
}
.zynix-logout-modal__title {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 600;
  color: var(--zynix-charcoal);
  margin: 0 0 8px;
}
.zynix-logout-modal__body {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--zynix-gray);
  margin: 0 0 22px;
}
.zynix-logout-modal__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.zynix-logout-modal__btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none !important;
  cursor: pointer;
  border: 1px solid var(--zynix-rule-strong);
  transition: background var(--transition-fast, 150ms ease);
}
.zynix-logout-modal__btn--cancel {
  background: #fff;
  color: var(--zynix-charcoal);
}
.zynix-logout-modal__btn--cancel:hover { background: var(--zynix-ivory); }
.zynix-logout-modal__btn--confirm {
  background: var(--zynix-rose-dark);
  border-color: var(--zynix-rose-dark);
  color: #fff !important;
}
.zynix-logout-modal__btn--confirm:hover { background: #a36e66; }

/* ---- (9c) Influencer Portal card, My Account dashboard ---- */
.zynix-myaccount-portal-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 22px;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--zynix-rose-gold), var(--zynix-rose-dark));
  border-radius: 10px;
  text-decoration: none !important;
  transition: transform var(--transition-fast, 150ms ease);
}
.zynix-myaccount-portal-card:hover { transform: translateY(-1px); }
.zynix-myaccount-portal-card__label {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: #fff !important;
  letter-spacing: 0.01em;
}
.zynix-myaccount-portal-card__arrow {
  font-size: 18px;
  color: #fff;
}

/* ---- (16) Zelle proof upload ---- */
.zynix-zelle-proof {
  margin: 24px 0;
  padding: 22px 24px;
  background: var(--zynix-offwhite);
  border: 1px solid var(--zynix-rule);
  border-radius: 10px;
}
.zynix-zelle-proof h2 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--zynix-charcoal);
  margin: 0 0 10px;
}
.zynix-zelle-proof__hint {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--zynix-gray);
  margin: 0 0 16px;
}
.zynix-zelle-proof__ok {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--zynix-charcoal);
  background: var(--zynix-rose-light);
  padding: 12px 14px;
  border-radius: 6px;
  margin: 0;
}
.zynix-zelle-proof__error {
  font-family: var(--font-body);
  font-size: 13px;
  color: #8A4A40;
  background: #FBEAE7;
  border: 1px solid #E0B7B7;
  padding: 10px 14px;
  border-radius: 6px;
  margin: 0 0 16px;
}
.zynix-zelle-proof__form p { margin: 0 0 14px; }
.zynix-zelle-proof__form label {
  display: block;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--zynix-gray);
  margin: 0 0 6px;
}
.zynix-zelle-proof__form input[type="text"],
.zynix-zelle-proof__form input[type="file"] {
  width: 100%;
  padding: 11px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--zynix-charcoal);
  background: #fff;
  border: 1px solid var(--zynix-rule-strong);
  border-radius: 6px;
  box-sizing: border-box;
}
.zynix-zelle-proof__submit {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 28px;
  background: var(--zynix-rose-dark);
  color: #fff !important;
  border: none;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast, 150ms ease);
}
.zynix-zelle-proof__submit:hover { background: #a36e66; }
/* === END FASE C === */

/* === Vistoria 21/07 — avatar iniciais + tabela downloads mobile === */
.zynix-avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--zynix-rose-dark);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.02em;
}
.account-user .zynix-avatar-initials { vertical-align: middle; }
@media (max-width: 700px) {
  .woocommerce-MyAccount-content table.shop_table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Vistoria 21/07 — downloads mobile: botões simétricos, sem scroll lateral */
@media (max-width: 700px) {
  .woocommerce-MyAccount-content table.shop_table td,
  .woocommerce-MyAccount-content table.shop_table th {
    padding: 12px 8px;
  }
  .woocommerce-MyAccount-content table.shop_table .woocommerce-MyAccount-downloads-file {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 8px;
    font-size: 11px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-align: center;
  }
}

/* Vistoria 21/07 — downloads: colunas 50/50 e texto centralizado (todas as larguras) */
.woocommerce-MyAccount-content table.shop_table th.download-product,
.woocommerce-MyAccount-content table.shop_table th.download-file {
  width: 50%;
}
.woocommerce-MyAccount-content table.shop_table th.download-product,
.woocommerce-MyAccount-content table.shop_table td.download-product,
.woocommerce-MyAccount-content table.shop_table th.download-file,
.woocommerce-MyAccount-content table.shop_table td.download-file {
  text-align: center;
}
.woocommerce-MyAccount-content table.shop_table { width: 100%; }
.woocommerce-MyAccount-content .woocommerce-MyAccount-downloads-file { margin-left: auto; margin-right: auto; }

/* ============================================================
   Funil de compra (22/jul), item 2 — painel de login/registro do gate de
   checkout (inc/zynix-checkout-gate.php). O card do Flatsome já é claro por
   padrão e combina com o tema (sem precisar de reskin dark, diferente da
   NYsub) — só um acento rose-gold pra fixar a identidade Zynix.
   ============================================================ */
.zynix-checkout-gate {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-lg) 0;
}
.zynix-checkout-gate__headline {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: var(--zynix-charcoal);
  text-align: center;
  margin-bottom: var(--space-lg);
}
.zynix-checkout-gate .account-container.lightbox-inner {
  border: 1px solid var(--zynix-rule-strong);
  border-radius: var(--radius-md);
}
.zynix-checkout-gate .account-login-inner h2,
.zynix-checkout-gate .account-register-inner h2 {
  color: var(--zynix-charcoal);
  font-family: var(--font-heading);
}

/* Funil de compra (22/jul), item 2.1 — padding interno simétrico do painel: a
   borda rose-gold acima foi colocada direto no .account-container.lightbox-inner,
   que só carrega o padding:30px 20px herdado do Flatsome (pensado pro contexto
   de lightbox/popup, não pro painel inline) — vertical ≠ horizontal e sem
   folga própria, os headings "LOGIN"/"REGISTER" encostavam na borda superior
   (reportado pelo dono, 22/07). Padding igual nos 4 lados + heading zerado. */
.zynix-checkout-gate .account-container.lightbox-inner {
  padding: var(--space-xl);
}
.zynix-checkout-gate .account-login-inner h2,
.zynix-checkout-gate .account-register-inner h2 {
  margin-top: 0;
}
@media screen and (max-width: 849px) {
  .zynix-checkout-gate .account-container.lightbox-inner {
    padding: var(--space-lg);
  }
}

/* ============================================================
   Funil de compra (22/jul), item 3 — card de upsell BAC Water
   ============================================================ */
.zynix-bacwater-upsell {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--zynix-ivory);
  border: 1px solid var(--zynix-rule-strong);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
}
.zynix-bacwater-upsell__media img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.zynix-bacwater-upsell__body { flex: 1 1 auto; }
.zynix-bacwater-upsell__title {
  font-family: var(--font-heading);
  color: var(--zynix-charcoal);
  font-weight: 600;
  margin: 0 0 4px;
}
.zynix-bacwater-upsell__copy {
  color: var(--zynix-gray);
  font-size: 0.85rem;
  margin: 0;
}
.zynix-bacwater-upsell__btn {
  flex: 0 0 auto;
  background-color: var(--zynix-rose-dark) !important;
  color: #FFFFFF !important;
  border: none !important;
  font-weight: 600 !important;
  white-space: nowrap;
}
.zynix-bacwater-upsell__btn:hover,
.zynix-bacwater-upsell__btn:focus-visible {
  background-color: var(--zynix-rose-gold) !important;
  color: var(--zynix-charcoal) !important;
}
@media (max-width: 600px) {
  .zynix-bacwater-upsell { flex-wrap: wrap; }
  .zynix-bacwater-upsell__btn { width: 100%; text-align: center; }
}