/*
Theme Name:   NYsub Child
Theme URI:    https://nysubpeptides.com
Description:  Flatsome Child Theme for NYsub Peptides — Research Peptides & Compounds
Author:       NYsub Peptides Dev Team
Author URI:   https://nysubpeptides.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 — NYSUB DESIGN SYSTEM
   ============================================================ */
:root {
  /* ====================================================================
     NYsub Peptides — Reskin Onda 1 (brand token VALUES applied).
     Token NAMES kept as --nysub-* this wave (rename is Wave E). Light→dark
     INVERSION handled deliberately: see --ny-ink* (dark fills) below and the
     per-site fixes for footer/mega-menu/credit where a "light" token was a
     text color over an already-dark surface.
     Identity: OLED black + electric yellow #F4C025/#FBBE02 + cold grays.
     ==================================================================== */

  /* Brand Colors — NYsub (names legacy --nysub-*, values are NYsub) */
  --nysub-rose-gold:   #F4C025;  /* accent → THE yellow */
  --nysub-rose-dark:   #FBBE02;  /* CTAs → yellow (labels must read black) */
  --nysub-rose-light:  #FFD23D;  /* hover/light accent → yellow-hi */
  --nysub-nude:        #1F1F22;  /* nested fill → dark surface-2 */
  --nysub-offwhite:    #0A0A0B;  /* page bg → OLED black */
  --nysub-ivory:       #141416;  /* card surface → dark surface */
  --nysub-charcoal:    #F7F7F5;  /* primary TEXT → white (inverts) */
  --nysub-gray:        #9A9A9E;  /* muted text */
  --nysub-rule:        #2C2C30;  /* hairline borders → dark line */
  --nysub-rule-strong: #3A3A3F;  /* stronger divider */

  /* Dark FILL tokens — for the inversion spots that must STAY dark
     (header/ticker bar, footer band, dark hovers). Do NOT use --nysub-charcoal
     as a background anymore: it is now white. */
  --ny-ink:            #0A0A0B;  /* deepest dark fill (footer/ticker) */
  --ny-ink-2:          #141416;  /* secondary dark fill */
  --ny-white:          #F7F7F5;  /* explicit light text (over dark surfaces) */

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

  /* Typography — NYsub: Barlow Condensed/Anton (display) · Inter Tight (body)
     · Space Mono (technical). Cormorant serif dropped → Anton (poster). */
  --font-heading:      'Barlow Condensed', sans-serif;
  --font-body:         'Inter Tight', sans-serif;
  --font-mono:         'Space Mono', monospace;
  --font-serif:        'Anton', sans-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(31, 26, 23, 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;
}

/* Flatsome Customizer injects an inline `body{font-family:Inter}` (stored in DB
   options, not theme files) that outranks our token. Override it so the NYsub
   body font (Inter Tight) actually applies. Customizer body-font option should
   also be updated in a later pass; this guarantees the base now. */
body,
body.flatsome-child {
  font-family: var(--font-body) !important;
}

/* Flatsome core paints #main/#wrapper white (flatsome.css). That white shows
   through on PDP/cart/checkout/account content areas, hiding our white text.
   Make the content shell transparent so the OLED body bg reads through. */
#main,
#wrapper {
  background-color: transparent !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.25;
  color: var(--nysub-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: .nysub-ticker-wrap > .nysub-ticker (text node, duplicated for loop)
   ============================================================ */
.nysub-ticker-wrap {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 201;
  background: var(--ny-ink); /* inversion: stay dark (was charcoal=dark, now white) */
  overflow: hidden;
  height: 28px;
  display: flex;
  align-items: center;
}

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

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

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

.nysub-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;
}

.nysub-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(12, 13, 18, 0.92) !important; /* NYsub dark pill (was frosted rose) */
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 55px rgba(0,0,0,0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !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(10, 10, 11, 0.96) !important; /* slightly denser when scrolled */
  box-shadow: 0 2px 24px rgba(0,0,0,0.5), 0 8px 32px rgba(0,0,0,0.4) !important;
}

/* NYsub brushstroke logo reads on the dark header in its own colour.
   Soft dark drop-shadow only for depth/contact, no colour-swap. */
#header .logo img {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55)) !important;
}

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

.nav > li > a:hover,
a.nav-top-link:hover {
  color: var(--nysub-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(244, 192, 37, 0.55) !important;
  border-radius: 0 !important;
  background: var(--nysub-rose-gold) !important;
  font-size: 12px !important;
  font-family: var(--font-heading) !important;
  letter-spacing: 0.06em !important;
  font-weight: 600 !important;
  color: #0A0A0B !important;
  transition: background 0.2s ease, box-shadow 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: var(--nysub-rose-light) !important;
  border-left-color: var(--nysub-rose-light) !important;
  color: #0A0A0B !important;
  box-shadow: 0 6px 24px rgba(244, 192, 37, 0.30) !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(244, 192, 37, 0.55) !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: 600 !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) {
  .nysub-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(--nysub-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(--nysub-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(--nysub-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 (.nysub-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 .nysub-login-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
}
#header .nysub-login-icon svg {
  width: 14px !important;
  height: 14px !important;
  stroke: #0A0A0B !important;
  display: block !important;
}

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

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

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

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

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

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

/* Sem animação para quem prefere movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  .nysub-hero__logo,
  .nysub-hero__eyebrow,
  .nysub-hero__title,
  .nysub-hero__divider,
  .nysub-hero__body,
  .nysub-hero__cta,
  .nysub-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 — NYsub yellow w/ black label */
.button,
.btn,
.button.primary,
.btn-primary {
  background: var(--nysub-rose-gold);
  color: #0A0A0B !important;
  border-color: var(--nysub-rose-gold);
  box-shadow: none;
}

.button:hover,
.btn:hover,
.button.primary:hover,
.btn-primary:hover {
  background: var(--nysub-rose-light);
  border-color: var(--nysub-rose-light);
  color: #0A0A0B !important;
  box-shadow: 0 6px 24px rgba(244, 192, 37, 0.30);
  transform: translateY(-1px);
}

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

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

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

.button.ghost:hover,
.btn-ghost:hover {
  border-color: var(--nysub-rose-gold);
  color: var(--nysub-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(--nysub-nude) !important;
  color: var(--nysub-gray) !important;
  border-color: var(--nysub-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(--nysub-gray);
  letter-spacing: 0.02em;
}

.trust-badge__icon {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--nysub-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(--nysub-ivory);
  border: 1px solid var(--nysub-nude);
  border-left: 4px solid var(--nysub-rose-gold);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl);
  margin: var(--space-xl) 0;
  font-size: 13px;
  color: var(--nysub-gray);
  line-height: 1.65;
}

.ruo-disclaimer strong,
.ruo-disclaimer b {
  color: var(--nysub-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(--nysub-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
   ============================================================ */
.nysub-product-card {
  background: var(--nysub-ivory);
  border: 1px solid var(--nysub-nude);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  position: relative;
}

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

.nysub-product-card__badge {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: var(--nysub-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;
}

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

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

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

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

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

.nysub-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);
}

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

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

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

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

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

.nysub-product-card__footer {
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--nysub-nude);
  background: var(--nysub-offwhite);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--nysub-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(--nysub-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(--nysub-charcoal) !important;
}

ul.products li.product .price {
  color: var(--nysub-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(--nysub-offwhite);
}

/* ============================================================
   FOOTER — Dark
   ============================================================ */
#footer,
.footer-wrapper {
  background: var(--ny-ink) !important;   /* inversion: footer stays dark */
  color: var(--ny-white) !important;       /* inversion: light text on dark */
}

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

#footer a:hover,
.footer-wrapper a:hover {
  color: var(--nysub-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 var(--nysub-rule) !important;
  font-size: 12px;
  color: var(--nysub-gray) !important;
}

.footer-bottom .ruo-disclaimer {
  background: transparent;
  border: none;
  border-top: 1px solid var(--nysub-rule);
  border-radius: 0;
  color: var(--nysub-gray);
  font-size: 11px;
  padding: var(--space-md) 0 0;
  margin: var(--space-md) 0 0;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.text-rose-gold  { color: var(--nysub-rose-gold); }
.text-charcoal   { color: var(--nysub-charcoal); }
.text-muted      { color: var(--nysub-gray); }
.text-mono       { font-family: var(--font-mono); }
.text-heading    { font-family: var(--font-heading); }
.bg-ivory        { background-color: var(--nysub-ivory); }
.bg-offwhite     { background-color: var(--nysub-offwhite); }
.border-nude     { border-color: var(--nysub-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;
  }

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

  .nysub-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;
}

/* ── NYsub: 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-pricecontrast-20jul): 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 accordion opened but showed nothing (the "Categories"
   bug). Now that a Product Categories widget is assigned to Shop Sidebar
   (wp-admin > Appearance > Widgets), restore display specifically inside
   the off-canvas panel — higher specificity than the bare #id selector
   above wins this even with both sides using !important.
   Also: the widget's own title <span> carries a SECOND class
   ("shop-sidebar", appended by Woo's widget renderer using the sidebar's
   id) which independently matched the ".shop-sidebar" part of the same
   blanket-hide rule above — restoring #shop-sidebar's display didn't
   bring the title back on its own, needed its own override. */
.mfp-content #shop-sidebar { display: block !important; }
.mfp-content #shop-sidebar .widget-title.shop-sidebar { display: block !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 NYsub palette */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 600 !important;
  color: #F4F2EF !important;
}
.woocommerce ul.products li.product .price { color: #F4C025 !important; font-family: 'Inter Tight', sans-serif !important; }
.woocommerce ul.products li.product .woocommerce-loop-category__title { color: #9A968F !important; font-family: 'Space Mono', monospace !important; font-size: 9px !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; }

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

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

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

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

/* ============================================================
   MEGA-MENU PANELS
   ============================================================ */
#nysub-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;
}

#nysub-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: nysub-mm-in 0.18s ease both;
}

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

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

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

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

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

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

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

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

.nysub-mm-products li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--nysub-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;
}

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

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

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

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

.nysub-mm-explore {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nysub-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(--nysub-rule);
  width: fit-content;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

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

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

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

.nysub-mm-image-placeholder span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nysub-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. */
.nysub-mm-media {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
  background: #F1B7B0;
}

.nysub-mm-video,
.nysub-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 nysub-mm-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.12); }
}
.nysub-mm-panel.is-active .nysub-mm-img {
  animation: nysub-mm-zoom 7s ease-out forwards;
}
@media (prefers-reduced-motion: reduce) {
  .nysub-mm-panel.is-active .nysub-mm-img { animation: none; }
}

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

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

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

.nysub-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(--nysub-rose-dark) !important;
  text-decoration: none !important;
  transition: color var(--transition-fast);
}

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

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

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

/* Active trigger highlight */
.nav .nysub-mm-trigger-active > a,
.nav-list .nysub-mm-trigger-active > a {
  color: var(--nysub-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)
   ============================================================ */

/* ============================================================
   NYsub HERO (Onda 3) — ported from approved prototype.
   Cinematic city video bg + dark scrim + grain, Anton headline below
   the wall graffiti (~48.5% height), 2-line subcopy, 2 CTAs.
   Class kept .nysub-hero (rename = Wave E). No eyebrow/trust/product/lights.
   ============================================================ */
.nysub-hero {
  width: 100%;
  /* overflow-x stays hidden for the full-bleed video bg; overflow-y is
     visible so that on short/intermediate window heights the CTA row
     spills below the fold instead of being decapitated by a hard clip
     (bug 4 go-live fix). The max-height media query
     further down shrinks the 48.5vh top offset 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: 640px;
  display: flex;
  align-items: flex-start;
  margin-top: -84px; /* slide up behind fixed ticker(28)+header(56) */
}

/* video background — full-bleed */
.nysub-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  background: #000;
  display: block;
}

/* directional dark scrim for left-side text legibility */
.nysub-hero__scrim {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(6,6,7,0.82) 0%,
    rgba(6,6,7,0.45) 38%,
    rgba(6,6,7,0.15) 60%,
    rgba(6,6,7,0.55) 100%);
}

.nysub-hero__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.06;
  pointer-events: none;
  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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.nysub-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  /* push content down so the headline starts ~48.5% (below the wall graffiti) */
  padding: 48.5vh 6vw 0;
  box-sizing: border-box;
}

.nysub-hero__content {
  width: 100%;
  max-width: 620px;
}

.nysub-hero__title {
  font-family: 'Anton', 'Barlow Condensed', sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  line-height: 0.88 !important;
  font-size: clamp(39px, 4.5vw, 75px) !important;
  letter-spacing: -0.005em !important;
  margin: 0 !important;
  color: var(--ny-white) !important;
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
}
.nysub-hero__l1 { display: block; color: var(--ny-white); }
.nysub-hero__l2 { display: block; color: var(--nysub-rose-gold); }

.nysub-hero__body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  color: #d9d9da;
  margin: 22px 0 34px;
  max-width: 460px;
}

.nysub-hero__ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.nysub-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 18px;
  padding: 16px 30px;
  border-radius: 4px;
  text-decoration: none !important;
  transition: background var(--transition-fast), transform 80ms ease, border-color .18s, color .18s;
}
.nysub-hero__cta--primary {
  background: var(--nysub-rose-gold);
  color: #0A0A0B !important;
  border: none;
}
.nysub-hero__cta--primary:hover {
  background: var(--nysub-rose-light);
  color: #0A0A0B !important;
  transform: translateY(-2px);
}
.nysub-hero__cta--ghost {
  background: transparent;
  color: var(--ny-white) !important;
  border: 1.5px solid rgba(255,255,255,0.5);
}
.nysub-hero__cta--ghost:hover {
  border-color: var(--nysub-rose-gold);
  color: var(--nysub-rose-gold) !important;
}

@media (prefers-reduced-motion: reduce) {
  .nysub-hero__bg { /* poster shows; pause handled by browser */ }
}

/* Admin bar offset */
body.admin-bar .nysub-hero {
  height: calc(100vh - 32px);
  height: calc(100svh - 32px);
  margin-top: -116px;
}

@media (max-width: 900px) {
  .nysub-hero { min-height: 100svh; }
  .nysub-hero__inner { padding: 46vh 7vw 0; }
  .nysub-hero__scrim {
    background: linear-gradient(180deg,
      rgba(6,6,7,0.55) 0%, rgba(6,6,7,0.40) 45%, rgba(6,6,7,0.70) 100%);
  }
}
@media (max-width: 480px) {
  .nysub-hero__inner { padding: 44vh 22px 0; }
}

/* Short-viewport fix (bug 4): the 48.5vh top offset (positioning the
   headline below the background video's wall graffiti) plus the fixed-size
   title/body/CTA stack no longer fits inside 100vh on a shrunk browser
   window, which used to clip the CTA row. Pull the offset in so everything
   fits again. Placed after the max-width:900px block so it also wins in
   short-height mobile-landscape combos. */
@media (max-height: 700px) {
  .nysub-hero__inner { padding-top: 30vh; }
  .nysub-hero__body { margin: 14px 0 20px; }
}
@media (max-height: 560px) {
  .nysub-hero__inner { padding-top: 20vh; }
  .nysub-hero__body { display: none; }
}


/* ============================================================
   SCROLL SNAP — ticker como âncora no topo + purity como snap 2
   ============================================================
   Dois snap points:
   1) .nysub-ticker-wrap → scroll=0 → âncora o page load no topo
   2) .nysub-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;
}

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

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

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

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

.nysub-purity-section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* Media wrapper: vídeo do túnel (padrão hero) + packshot BPC-157 sobreposto. */
.nysub-purity__image {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0A0A0B; /* fallback dark enquanto o vídeo carrega */
}

/* Vídeo de fundo full-bleed — mesmo tratamento do .nysub-hero__bg */
.nysub-purity__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  display: block;
  background: #0A0A0B;
}

/* Scrim direcional: escurece a metade direita p/ legibilidade do texto */
.nysub-purity__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(10,10,11,0.20) 0%,
    rgba(10,10,11,0.42) 48%,
    rgba(10,10,11,0.82) 100%);
}

/* ============================================================
   VITRINE 3D — órbita "orbital-swap" vial⟷box na metade esquerda.
   Os transforms/filtros de cada item são calculados por JS (rAF) a
   partir do ângulo da órbita (rotateY(θ) translateZ(R) rotateY(-θ) =
   billboard; escala/brilho/blur/sombra de cos(θ) p/ vender o 3D).
   Aqui ficam só: a cena (perspective + preserve-3d), tamanho/centragem
   dos itens, a POSE IDLE de fallback (sem JS) e a ancoragem na cena
   (sombra de contato + reflexo + realce âmbar do túnel).
   ============================================================ */
.nysub-purity__orbit {
  position: absolute;
  z-index: 2;
  left: 7%;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(280px, 34vw, 500px);
  height: clamp(340px, 48vh, 540px);
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  perspective: 1300px;
  perspective-origin: 50% 42%;
}
.nysub-purity__orbit:focus-visible {
  outline: 2px solid var(--nysub-rose-gold);
  outline-offset: 8px;
  border-radius: 14px;
}
.nysub-purity__stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  /* Reflexo no piso molhado — flip GPU da camada já composta
     (progressive enhancement; Blink/WebKit, ausente no Firefox) */
  -webkit-box-reflect: below 6px linear-gradient(transparent 56%, rgba(0,0,0,0.20) 100%);
}
.orbit__item {
  position: absolute;
  top: 50%;
  left: 50%;
  height: clamp(220px, 32vh, 360px);
  width: auto;
  margin: 0;
  backface-visibility: hidden;
}
/* will-change só enquanto anima (guideline /ui-ux-pro-max) */
.nysub-purity__orbit.is-animating .orbit__item { will-change: transform, filter; }
.orbit__item img {
  display: block;
  height: 100%;
  width: auto;
  pointer-events: none;
  /* sombra de contato estática — acompanha a escala do item (mais forte na frente) */
  filter: drop-shadow(0 18px 24px rgba(0,0,0,0.5));
}
/* Pose IDLE de fallback p/ quando o JS ainda não rodou
   (vial à frente-esquerda; box atrás-direita, menor) */
.orbit__item--vial { transform: translate(-50%,-50%) rotateY(-18deg) translateZ(100px) rotateY(18deg); z-index: 1000; }
.orbit__item--box  { transform: translate(-50%,-50%) rotateY(162deg) translateZ(100px) rotateY(-162deg) scale(0.85); z-index: 0; }
/* Sombra de contato + leve realce âmbar coerente com as luzes do túnel */
.nysub-purity__orbit-floor {
  position: absolute;
  left: 50%;
  bottom: 7%;
  width: 60%;
  height: 44px;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 58% 60% at 50% 36%, rgba(244,192,37,0.12) 0%, rgba(244,192,37,0) 70%),
    radial-gradient(ellipse 50% 50% at 50% 52%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 72%);
  filter: blur(3px);
  z-index: 0;
  pointer-events: none;
}

/* Texto posicionado sobre a metade direita */
.nysub-purity__content {
  position: absolute;
  right: 0;
  top: 84px; /* abaixo do cabeçalho sticky */
  bottom: 0;
  width: 50%;
  z-index: 3; /* acima do vídeo, scrim e packshot */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 72px 0 40px;
}

/* ── Tipografia ── */
.nysub-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(--nysub-charcoal) !important;
  margin: 0 0 20px !important;
  letter-spacing: -0.01em !important;
}

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

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

.nysub-purity__body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: #c7c7cb;
  margin: 0 0 40px;
  max-width: 420px;
}

.nysub-purity__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--nysub-rose-gold);
  color: #0A0A0B !important;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 28px;
  height: 52px;
  border-radius: 6px;
  text-decoration: none !important;
  transition: background var(--transition-fast), transform 80ms ease;
  align-self: flex-start;
}

.nysub-purity__cta:hover {
  background: var(--nysub-rose-light);
  color: #0A0A0B !important;
}

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

.nysub-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;
}

.nysub-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 */
.nysub-purity__title,
.nysub-purity__divider,
.nysub-purity__body,
.nysub-purity__cta {
  opacity: 0;
}

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

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

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

.nysub-purity-section.is-visible .nysub-purity__cta {
  animation: nysub-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) {
  .nysub-purity__title,
  .nysub-purity__divider,
  .nysub-purity__body,
  .nysub-purity__cta {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
  /* Esconde o vídeo e mostra o poster estático do túnel */
  .nysub-purity__bg { display: none !important; }
  .nysub-purity__image {
    background: #0A0A0B url('/wp-content/uploads/nysub-brand/purity-tunnel-bg.jpg') center / cover no-repeat;
  }
  /* Vitrine 3D: sob reduced-motion o JS não anima; a pose IDLE de
     fallback (.orbit__item--vial/--box no CSS base) já é estática. */
}

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

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

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

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

  /* Mobile: mídia é uma faixa acima do texto → packshot centralizado,
     scrim na base p/ transição suave com o conteúdo abaixo. */
  .nysub-purity__scrim {
    background: linear-gradient(180deg,
      rgba(10,10,11,0.10) 0%,
      rgba(10,10,11,0.20) 55%,
      rgba(10,10,11,0.72) 100%);
  }
  /* Vitrine 3D centralizada DENTRO da faixa de mídia (topo, 50vh).
     top:25vh = centro da faixa; evita sobrepor o texto abaixo. */
  .nysub-purity__orbit {
    left: 50%;
    top: 25vh;
    transform: translate(-50%, -50%);
    width: clamp(240px, 74vw, 360px);
    height: 44vh;
  }
  .orbit__item { height: clamp(170px, 30vh, 260px); }

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

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

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

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

.nysub-trust-bar {
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(244, 192, 37, 0.10) 0%, rgba(244, 192, 37, 0) 55%),
    linear-gradient(180deg, var(--nysub-offwhite) 0%, #0F0F11 100%);
  border-top: 1px solid rgba(244, 192, 37, 0.35);
  border-bottom: 1px solid var(--nysub-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);
}
.nysub-trust-bar.is-visible {
  opacity: 1;
  transform: none;
}

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

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

.nysub-trust-bar__item--has-divider {
  border-left: 1px solid rgba(244, 192, 37, 0.55);
}

/* Tile escuro + borda amarela NYsub (substitui o medalhão cromado/prata).
   Não clicável: look base idêntico ao social, com hover bem leve (sem fill). */
.nysub-trust-bar__icon {
  position: relative;
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border: 1.5px solid #F4C025;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #141416;
  color: #F4C025;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nysub-trust-bar__item:hover .nysub-trust-bar__icon {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(244, 192, 37, 0.18);
}

.nysub-trust-bar__icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
}

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

.nysub-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(--nysub-charcoal);
  line-height: 1;
}

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

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

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

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

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

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

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

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

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

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

/* Tile escuro + borda amarela NYsub (mesmo modelo do trust bar).
   Clicável: hover/focus preenche de amarelo, ícone vira preto, lift + glow. */
.nysub-social__icon {
  position: relative;
  width: 64px;
  height: 64px;
  border: 1.5px solid #F4C025;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #F4C025;
  background: #141416;
  transition: transform 0.2s ease,
              box-shadow 0.2s ease,
              color 0.2s ease,
              background 0.2s ease,
              border-color 0.2s ease;
}

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

.nysub-social__link:hover {
  transform: translateY(-3px);
}
.nysub-social__link:hover .nysub-social__icon,
.nysub-social__link:focus-visible .nysub-social__icon {
  color: #0A0A0B;
  background: linear-gradient(135deg, #FFD23D, #F4C025);
  border-color: #F4C025;
  box-shadow: 0 8px 20px rgba(244, 192, 37, 0.30);
}
.nysub-social__link:hover .nysub-social__name {
  color: var(--nysub-charcoal);
}
.nysub-social__link:focus-visible {
  outline: 2px solid #F4C025;
  outline-offset: 4px;
  border-radius: 8px;
}

@media (max-width: 600px) {
  .nysub-social {
    padding: 52px 0 54px;
  }
  .nysub-social__inner {
    padding: 0 24px;
  }
  .nysub-social__links {
    gap: 18px;
  }
  .nysub-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)
   ============================================================ */

.nysub-featured {
  background: var(--nysub-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);
}
.nysub-featured.is-visible {
  opacity: 1;
  transform: none;
}

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

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

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

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

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

/* trilho horizontal de cards */
.nysub-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;
}
.nysub-featured__track::-webkit-scrollbar { display: none; }

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

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

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

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

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

.nysub-featured__card-actions {
  display: flex;
  gap: 10px;
  padding: 16px 22px 0;
}
.nysub-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;
}
.nysub-featured__btn--primary {
  background: var(--nysub-rose-dark);
  color: #fff;
}
.nysub-featured__btn--primary:hover {
  background: var(--ny-ink); /* inversion: dark hover, not white */
  color: #fff;
}
.nysub-featured__btn--ghost {
  background: transparent;
  color: var(--nysub-charcoal);
  border: 1px solid var(--nysub-rule-strong);
}
.nysub-featured__btn--ghost:hover {
  border-color: var(--nysub-rose-dark);
  color: var(--nysub-rose-dark);
}
.nysub-featured__btn:focus-visible {
  outline: 2px solid var(--nysub-rose-gold);
  outline-offset: 2px;
}

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

/* setas de navegação */
.nysub-featured__nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 36px;
}
.nysub-featured__arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--nysub-rule-strong);
  background: var(--nysub-ivory);
  color: var(--nysub-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;
}
.nysub-featured__arrow:hover {
  background: var(--nysub-rose-dark);
  color: #fff;
  border-color: var(--nysub-rose-dark);
}
.nysub-featured__arrow:focus-visible {
  outline: 2px solid var(--nysub-rose-gold);
  outline-offset: 2px;
}

.nysub-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(--nysub-rose-dark);
  text-decoration: none;
  cursor: pointer;
  transition: gap 0.2s ease, color 0.2s ease;
}
.nysub-featured__cta:hover {
  color: var(--nysub-charcoal);
  gap: 14px;
}
.nysub-featured__cta:focus-visible {
  outline: 2px solid var(--nysub-rose-gold);
  outline-offset: 4px;
}

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

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

.nysub-process {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0A0A0B;
  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);
}
.nysub-process.is-visible {
  opacity: 1;
  transform: none;
}

/* SECTIONBG (@qa 2026-07-04) — Opção A aprovada por Alan: base OLED + concreto +
   grão + glow âmbar, substituindo o gradiente taupe herdado do tema base
   (#28211D→#1F1A17 + tint rosé). 3 camadas: concreto (::before) e grão (::after)
   full-width na seção; glow âmbar + vinheta no .nysub-process__glow (dentro do
   .inner, posicionado atrás dos 3 marcadores). */

/* Textura de concreto — peça única cobrindo a seção inteira, sem tiling/emenda */
.nysub-process::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900'%3E%3Cfilter id='nysubConcrete'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008' numOctaves='3' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nysubConcrete)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.12;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Grão fino (tile seamless) */
.nysub-process::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='nysubGrain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nysubGrain)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.06;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Glow âmbar (atrás dos 3 marcadores 01/02/03) + vinheta — hook reservado
   reaproveitado (era `display:none`); vive dentro do .inner (posicionado),
   então os 17/50/83% acompanham a largura real do container/colunas. */
.nysub-process__glow {
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 70% at 17% 32%, rgba(244, 192, 37, 0.085), transparent 55%),
    radial-gradient(60% 70% at 50% 32%, rgba(244, 192, 37, 0.072), transparent 55%),
    radial-gradient(60% 70% at 83% 32%, rgba(244, 192, 37, 0.072), transparent 55%),
    radial-gradient(140% 120% at 30% 0%, rgba(130, 130, 140, 0.05), transparent 55%),
    radial-gradient(150% 130% at 50% 125%, rgba(0, 0, 0, 0.5), transparent 62%);
  pointer-events: none;
}

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

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

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

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

/* stagger animação nos steps */
.nysub-process.is-visible .nysub-process__step {
  animation: nysub-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 âmbar */
.nysub-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, #FFF3D6 0%, var(--nysub-rose-gold) 42%, var(--nysub-rose-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--nysub-rose-gold);
  opacity: 0.92;
}

/* Tile/anel âmbar (foil) com glow sutil para o ícone — ICONFIX (2026-07-04):
   era rgba() rosé legado hardcoded (não usava as vars), migrado pra âmbar. */
.nysub-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(244, 192, 37, 0.16), rgba(244, 192, 37, 0.06)),
    rgba(31, 26, 23, 0.6);
  border: 1px solid transparent;
  background-origin: border-box;
  box-shadow:
    inset 0 1px 0 rgba(244, 192, 37, 0.22),
    0 8px 24px -10px rgba(31, 26, 23, 0.9),
    0 0 0 1px rgba(244, 192, 37, 0.30);
  position: relative;
}
/* anel foil em gradiente (borda) */
.nysub-process__step-icon::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(140deg, rgba(255, 243, 214, 0.85), rgba(244, 192, 37, 0.55) 55%, rgba(244, 192, 37, 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 âmbar atrás do tile */
.nysub-process__step-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  box-shadow: 0 0 28px -6px rgba(244, 192, 37, 0.45);
  opacity: 0.6;
  z-index: -1;
}
.nysub-process__step-icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--nysub-rose-gold);
}

.nysub-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;
}

.nysub-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) {
  .nysub-process {
    padding: 64px 0;
  }
  .nysub-process__inner {
    padding: 0 24px;
  }
  .nysub-process__steps {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .nysub-process__step {
    padding: 0;
    border-right: none;
    border-top: 1px solid rgba(250, 246, 243, 0.08);
    padding-top: 40px;
  }
  .nysub-process__step:first-child {
    border-top: none;
    padding-top: 0;
  }
}

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

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

/* ---- Lab Tests page (shortcode [nysub_lab_tests]) ---- */
.nysub-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) */
.nysub-coa-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.nysub-coa-scroll .nysub-coa-table { min-width: 640px; }
.nysub-coa-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.nysub-coa-search,
.nysub-coa-filter {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--nysub-charcoal);
  background: var(--nysub-ivory);
  border: 1px solid var(--nysub-rule-strong);
  border-radius: 6px;
  padding: 11px 14px;
  height: 46px;          /* tema forçava 35px no select → cortava o texto */
  box-sizing: border-box;
}
.nysub-coa-filter { padding-right: 34px; } /* espaço p/ a seta do select */
.nysub-coa-search { flex: 1 1 280px; }
.nysub-coa-filter { flex: 0 1 220px; }
.nysub-coa-search:focus,
.nysub-coa-filter:focus {
  outline: none;
  border-color: var(--nysub-rose-dark);
}

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

/* COA status pill */
.nysub-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;
}
.nysub-coa-status--passed  { color: #4ED07A; background: #13241A; border-color: rgba(78,208,122,.30); }
.nysub-coa-status--pending { color: #E3B05A; background: #2A2110; border-color: rgba(227,176,90,.30); }
.nysub-coa-status--failed  { color: #E2564A; background: #2A1110; border-color: rgba(226,86,74,.30); }

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

/* ============================================================
   ONDA B — Footer "Secure Checkout" payment row (top of footer)
   ============================================================ */
.nysub-payment-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 30px 16px 8px;
  text-align: center;
}
.nysub-payment-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nysub-rose-gold);
  opacity: 0.7;
}
.nysub-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. */
.nysub-payment-flags .payment-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
}
.nysub-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;
}
.nysub-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;
}
.nysub-payment-flags .payment-icons .payment-icon:hover svg {
  --fill: var(--nysub-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). */
.nysub-pay-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(154, 154, 158, 0.45);
  border-radius: 999px;
  padding: 7px 16px 7px 12px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #E8E8EA;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.nysub-pay-badge:hover {
  border-color: var(--nysub-rose-gold);
  color: var(--nysub-rose-gold);
}
.nysub-pay-badge svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
  flex: none;
}
.nysub-pay-off {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  background: rgba(244, 192, 37, 0.14);
  color: var(--nysub-rose-gold);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 2px;
}

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

/* Identificação legal da entidade (Vital Pathways LLC) — underwriting cartão */
.nysub-footer-legal-id {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--nysub-gray);
  opacity: 0.65;
  margin: 0 0 6px;
  padding: 0 20px;
}
.nysub-footer-legal-id a {
  color: var(--nysub-gray);
  text-decoration: none;
}
.nysub-footer-legal-id a:hover {
  color: var(--nysub-rose-gold);
}

/* H8 remediação — disclaimer RUO+NFHC persistente no rodapé */
.nysub-footer-ruo {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--nysub-gray);
  opacity: 0.78;
  margin: 0 0 6px;
  padding: 18px 20px 0;
}

/* ── Created by BoomTube — crédito na barra inferior, à DIREITA (Onda B) ── */
.nysub-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 */
.nysub-boomtube-credit .nysub-bt-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  border: 0;
  background: none;
  transition: filter .2s ease, opacity .2s ease;
}
.nysub-boomtube-credit .nysub-bt-link:hover .nysub-bt-name,
.nysub-boomtube-credit .nysub-bt-link:focus-visible .nysub-bt-name {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(244, 192, 37, .55);
}
.nysub-boomtube-credit .nysub-bt-link:hover .nysub-bt-burst,
.nysub-boomtube-credit .nysub-bt-link:focus-visible .nysub-bt-burst {
  filter: brightness(1.18) saturate(1.1);
}
.nysub-boomtube-credit .nysub-bt-link:focus-visible {
  outline: 2px solid var(--nysub-rose-gold);
  outline-offset: 3px;
  border-radius: 6px;
}
.nysub-boomtube-credit .nysub-bt-burst {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: block;
  transition: filter .2s ease;
}
.nysub-boomtube-credit .nysub-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;
}
.nysub-boomtube-credit .nysub-bt-pre {
  color: var(--nysub-rose-gold);
  opacity: 0.55;
}
.nysub-boomtube-credit .nysub-bt-name {
  color: var(--ny-white); /* inversion: light text on dark footer */
  opacity: 0.92;
  font-weight: 500;
}

@media (max-width: 560px) {
  .nysub-coa-table { font-size: 12.5px; }
  .nysub-coa-table thead th,
  .nysub-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(--nysub-rose-dark) !important;          /* glyph (currentColor) */
  border-color: rgba(244, 192, 37, 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(--nysub-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(--nysub-rose-dark) !important;
  border-color: var(--nysub-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(--nysub-charcoal) !important;
  border-color: var(--nysub-rule-strong) !important;
}
.ux-quantity__button:hover,
.quantity .minus:hover,
.quantity .plus:hover {
  color: var(--nysub-rose-dark) !important;
  border-color: var(--nysub-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(--nysub-rose-dark) !important;
  border-color: rgba(244, 192, 37, 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(--nysub-rose-dark) !important;
}
.product-images .image-tools .zoom-button.button.is-outline:hover,
.next-prev-thumbs .button.icon.is-outline:hover {
  background-color: var(--nysub-rose-dark) !important;
  border-color: var(--nysub-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): the "oval chevron, yellow
   border" floating between the PDP title and price on mobile is NOT the
   gallery slider arrow — it's Flatsome's own "next/prev PRODUCT" quick-nav
   (.next-prev-thumbs), which its own "show-for-medium" class already hides
   at >=850px but shows below that, unstyled for this context. It has no
   visual relationship to the gallery above it, so on mobile it reads as a
   stray broken button sitting between title and price. Hiding it here on
   mobile only (it was already invisible on desktop natively) removes the
   clutter Alan flagged; the gallery's own prev/next arrows (below) get the
   swipe+dots treatment instead. */
@media (max-width: 849px) {
  .next-prev-thumbs { display: none !important; }
}

/* Product gallery (Flickity): mobile = swipe + dots, no overlapping
   arrow buttons; desktop = arrow buttons overlaid on the image (native
   Flatsome behavior, unchanged), no dots duplicating that control.
   pageDots is enabled via the child-theme override of
   woocommerce/single-product/product-image.php (pageDots:true); drag/swipe
   is Flickity's native behavior and is unaffected by hiding the buttons. */
@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(--nysub-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 */
.nysub-cart-svg { display: inline-flex; }
.nysub-cart-svg svg { width: 20px; height: 20px; display: block; }
.cart-item .header-cart-link:hover .cart-icon { color: var(--nysub-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 2px, width:2.2em, margin:0.3em) que
   essa regra mais específica não sobrescrevia integralmente — sobrava a
   borda do core e a largura fixa em em, deixando o badge oval e deslocado
   do ícone (mesmo bug, mesmo fix). Resetando explicitamente. */
.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(--nysub-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(--nysub-offwhite) !important;
  font-family: var(--font-body);
}
.off-canvas-cart .cart-popup-title .heading-font {
  font-family: var(--font-heading) !important;
  color: var(--nysub-charcoal);
  letter-spacing: 0.06em;
}
.off-canvas-cart .woocommerce-mini-cart__total,
.off-canvas-cart .total {
  color: var(--nysub-charcoal) !important;
  font-family: var(--font-body);
  border-top: 1px solid var(--nysub-rule-strong);
}
.off-canvas-cart .woocommerce-mini-cart__total strong,
.off-canvas-cart .woocommerce-Price-amount {
  color: var(--nysub-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 */
.nysub-minicart-ruo {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nysub-gray);
  margin: 4px 0 12px;
  line-height: 1.5;
}

/* Zelle proof-of-payment upload — thank-you page + My Account order view
   (item 16, 20/07/2026). Generic (not scoped to .woocommerce-account) since
   the thank-you page isn't in account context. */
.nysub-zelle-proof {
  max-width: 480px;
  margin: 28px 0;
  padding: 24px;
  background: var(--nysub-ivory);
  border: 1px solid var(--nysub-rule);
  border-radius: var(--radius-md);
}
.nysub-zelle-proof h2 {
  font-family: var(--font-heading);
  font-size: 18px;
  letter-spacing: 0.03em;
  color: var(--nysub-charcoal);
  margin: 0 0 14px;
}
.nysub-zelle-proof__notice {
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  margin: 0 0 16px;
}
.nysub-zelle-proof__notice--ok {
  background: rgba(70, 192, 138, 0.16);
  border: 1px solid rgba(70, 192, 138, 0.4);
  color: #46C08A;
}
.nysub-zelle-proof__notice--err {
  background: rgba(224, 82, 106, 0.16);
  border: 1px solid rgba(224, 82, 106, 0.4);
  color: #E0526A;
}
.nysub-zelle-proof__onfile {
  font-size: 13px;
  color: var(--nysub-gray);
  margin: 0 0 16px;
}
.nysub-zelle-proof__row {
  margin: 0 0 16px;
}
.nysub-zelle-proof__row label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--nysub-gray);
  margin-bottom: 6px;
}
.nysub-zelle-proof__row input[type="text"],
.nysub-zelle-proof__row input[type="file"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--nysub-rule-strong);
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
  background: var(--nysub-offwhite);
  color: var(--nysub-charcoal);
  font-family: var(--font-body);
}
.nysub-zelle-proof__row input[type="text"]:focus {
  outline: none;
  border-color: var(--nysub-rose-dark);
}
.nysub-zelle-proof__btn {
  width: 100%;
  background: var(--nysub-rose-dark);
  color: #0A0A0B;
  border: none;
  padding: 13px;
  border-radius: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s ease;
}
.nysub-zelle-proof__btn:hover {
  background: var(--nysub-rose-light);
}

/* Influencer Portal card — My Account dashboard, influencer role only (item 9c, 20/07/2026) */
.nysub-myaccount-inf-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 24px;
  padding: 16px 20px;
  background: var(--nysub-ivory);
  border: 1px solid var(--nysub-rule-strong);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.nysub-myaccount-inf-card:hover,
.nysub-myaccount-inf-card:focus {
  border-color: var(--nysub-rose-dark);
  background: var(--nysub-nude);
}
.nysub-myaccount-inf-card__label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--nysub-charcoal);
}
.nysub-myaccount-inf-card__arrow {
  font-size: 18px;
  color: var(--nysub-rose-dark);
}

/* Logout confirmation modal — My Account (item 5, 20/07/2026) */
body.nysub-logout-modal-open { overflow: hidden; }
.nysub-logout-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.nysub-logout-modal[hidden] { display: none; }
.nysub-logout-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 11, 0.72);
}
.nysub-logout-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  background: var(--nysub-ivory);
  border: 1px solid var(--nysub-rule);
  border-radius: var(--radius-md);
  padding: 28px 26px 24px;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.nysub-logout-modal__title {
  font-family: var(--font-heading);
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--nysub-charcoal);
  margin: 0 0 10px;
}
.nysub-logout-modal__desc {
  font-size: 14px;
  color: var(--nysub-gray);
  margin: 0 0 24px;
  line-height: 1.5;
}
.nysub-logout-modal__actions {
  display: flex;
  gap: 12px;
}
.nysub-logout-modal__btn {
  flex: 1;
  display: inline-block;
  box-sizing: border-box;
  margin: 0;
  padding: 12px;
  min-height: 0;
  height: auto;
  line-height: 1.4;
  border-radius: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: none;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid var(--nysub-rule-strong);
  transition: background 0.15s ease, border-color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.nysub-logout-modal__btn--cancel {
  background: transparent;
  color: var(--nysub-charcoal);
}
.nysub-logout-modal__btn--cancel:hover,
.nysub-logout-modal__btn--cancel:focus {
  border-color: var(--nysub-charcoal);
}
.nysub-logout-modal__btn--confirm {
  background: var(--nysub-rose-dark);
  border-color: var(--nysub-rose-dark);
  color: #0A0A0B;
}
.nysub-logout-modal__btn--confirm:hover,
.nysub-logout-modal__btn--confirm:focus {
  background: var(--nysub-rose-light);
  border-color: var(--nysub-rose-light);
}

/* Continue Shopping — abaixo dos botões View Cart/Checkout na gaveta */
.nysub-minicart-continue {
  display: block;
  text-align: center;
  margin: 10px 0 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nysub-rose-dark);
  text-decoration: none;
}
.nysub-minicart-continue:hover,
.nysub-minicart-continue:focus {
  text-decoration: underline;
}

/* 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(--nysub-rose-dark) !important;
  border: 1px solid var(--nysub-rose-dark) !important;
}
.off-canvas-cart .woocommerce-mini-cart__buttons .button:not(.checkout):hover {
  background: rgba(244, 192, 37, 0.08) !important;
}
/* Checkout = filled rose-dark (substitui o laranja do WC) */
.off-canvas-cart .woocommerce-mini-cart__buttons .button.checkout {
  background: var(--nysub-rose-dark) !important;
  color: #fff !important;
  border: 1px solid var(--nysub-rose-dark) !important;
}
.off-canvas-cart .woocommerce-mini-cart__buttons .button.checkout:hover {
  background: #DAAB21 !important;
  border-color: #DAAB21 !important;
}

/* ============================================================
   VENDOR LOGIN (/vendor-login/) + badges de status
   ============================================================ */
.nysub-vlogin {
  max-width: 460px;
  margin: 56px auto;
  font-family: var(--font-body);
}
/* v1 fix (20/07/2026, .bak-inflogin-mobile-20jul): .nysub-vlogin never had
   horizontal padding of its own — at desktop the 460px max-width plus
   auto margins gave it breathing room from the viewport edge, but below
   that width the box just fills 100% of its containing column with zero
   side gutter, so eyebrow/heading/inputs/Turnstile/button/links all sat
   flush against the screen edge. Adding side padding restores a visible
   margin from the edge on phones, matching the rest of the site's cards. */
@media (max-width: 600px) {
  .nysub-vlogin {
    max-width: 100%;
    margin: 40px auto;
    padding: 0 22px;
    box-sizing: border-box;
  }
}
.nysub-vlogin__card {
  background: var(--nysub-ivory);
  border: 1px solid var(--nysub-rule);
  border-radius: 14px;
  padding: 40px 38px;
  box-shadow: 0 18px 50px rgba(31, 26, 23, 0.08);
}
.nysub-vlogin__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nysub-rose-dark);
  margin: 0 0 12px;
}
.nysub-vlogin__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 24px;
  color: var(--nysub-charcoal);
  margin: 0 0 8px;
  line-height: 1.2;
}
.nysub-vlogin__note { font-size: 13px; color: var(--nysub-gray); margin: 0 0 22px; }
.nysub-vlogin__alert {
  background: #2A1110; border: 1px solid rgba(226,86,74,.30); color: #E2564A;
  padding: 12px 14px; border-radius: 6px; font-size: 13px; margin-bottom: 18px;
}
.nysub-vlogin .login-username,
.nysub-vlogin .login-password { margin-bottom: 16px; }
.nysub-vlogin label { display: block; font-size: 12px; font-weight: 600; color: var(--ny-white); margin-bottom: 6px; }
.nysub-vlogin input[type=text],
.nysub-vlogin input[type=password] {
  width: 100%; padding: 12px 14px; border: 1px solid var(--nysub-rule-strong);
  border-radius: 8px; font-size: 14px; box-sizing: border-box; background: var(--nysub-ivory); color: var(--ny-white);
}
.nysub-vlogin input:focus { outline: none; border-color: var(--nysub-rose-dark); }
.nysub-vlogin .login-remember { font-weight: 400; margin: 4px 0 18px; }
.nysub-vlogin .login-remember label { display: inline; font-weight: 400; font-size: 13px; color: var(--nysub-gray); }
.nysub-vlogin .button,
.nysub-vlogin input[type=submit] {
  width: 100%; background: var(--nysub-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;
}
.nysub-vlogin .button:hover,
.nysub-vlogin input[type=submit]:hover { background: #DAAB21; }
.nysub-vlogin__links { margin-top: 18px; font-size: 12.5px; text-align: center; }
.nysub-vlogin__links a { color: var(--nysub-rose-dark); text-decoration: none; }

/* Badges de status de comissão / venda */
.nysub-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;
}
.nysub-comm-badge--awaiting_payment,
.nysub-comm-badge--pending { color: #E3B05A; background: #2A2110; border-color: rgba(227,176,90,.30); }
.nysub-comm-badge--held    { color: #7FB0E8; background: #10161F; border-color: rgba(127,176,232,.30); }
.nysub-comm-badge--payable { color: #4ED07A; background: #13241A; border-color: rgba(78,208,122,.30); }
.nysub-comm-badge--paid    { color: #4ED07A; background: #13241A; border-color: rgba(78,208,122,.30); }
.nysub-comm-badge--reversed,
.nysub-comm-badge--cancelled { color: #E2564A; background: #2A1110; border-color: rgba(226,86,74,.30); }
/* Fase B — aprovação de desconto */
.nysub-comm-badge--awaiting_approval,
.nysub-comm-badge--awaiting_payment { color: #E3B05A; background: #2A2110; border-color: rgba(227,176,90,.30); }
.nysub-comm-badge--rejected { color: #E2564A; background: #2A1110; border-color: rgba(226,86,74,.30); }

/* ============================================================
   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(--nysub-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(--nysub-rule-strong); border-radius: 999px;
  color: var(--nysub-gray); text-decoration: none; transition: all .15s ease;
}
.vp-train__lang:hover { border-color: var(--nysub-rose-dark); color: var(--nysub-rose-dark); }
.vp-train__lang.active { background: var(--nysub-rose-dark); border-color: var(--nysub-rose-dark); color: #fff; }
.vp-train__intro { font-size: 14px; color: var(--nysub-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: var(--nysub-ivory); border: 1px solid var(--nysub-rule); border-radius: 10px; padding: 18px 20px;
}
.vp-train__num {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--nysub-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(--nysub-charcoal); margin: 0 0 5px; }
.vp-train__module-body { font-size: 13.5px; color: var(--nysub-gray); line-height: 1.6; margin: 0; }
.vp-train__ack-box {
  max-width: 820px; margin-top: 24px; padding: 22px; border: 1px solid var(--nysub-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: #0A0A0B; 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(--nysub-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: #DAAB21; }

/* ============================================================
   OUT OF STOCK BADGE — grid catalog (on-brand)
   Alinha o overlay "Out of stock" da GRADE da loja (.out-of-stock-label)
   à paleta NYsub (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 NYsub BI skin. Uma / design-squad.
   Tokens: --nysub-* (rose-gold #ECC6C0, rose-dark #B97F75, ink #1F1A17),
   fonts Barlow Condensed (display) / Inter Tight (body) / Space Mono (números/KPIs).
   ============================================================ */
:root {
  /* NYsub reskin (Onda 2): management portal inverted light→dark */
  --mp-bg:        #0A0A0B;   /* canvas → OLED black */
  --mp-surface:   #141416;   /* card surface → dark */
  --mp-ink:       #F7F7F5;   /* text → white (inverts) */
  --mp-ink-2:     #9A9A9E;   /* secondary text */
  --mp-rule:      #2C2C30;   /* hairline → dark line */
  --mp-rule-2:    #3A3A3F;
  --mp-rg-1:      #F4C025;   /* accent → yellow */
  --mp-rg-2:      #FBBE02;   /* primary/links → yellow */
  --mp-rg-3:      #FFD23D;   /* light accent → yellow-hi */
  --mp-nude:      #1F1F22;   /* fill → dark surface-2 */
  --mp-ok:        #4ED07A;   /* instock green (brighter on dark) */
  --mp-ok-bg:     #13241A;   /* darkened ok bg */
  --mp-warn:      #E3B05A;   /* low amber (brighter on dark) */
  --mp-warn-bg:   #2A2110;   /* darkened warn bg */
  --mp-danger:    #E2564A;   /* loss/rejected red — AA on dark (4.75:1 on danger-bg) */
  --mp-danger-bg: #2A1110;   /* darkened danger wash (parallel to warn-bg) */
  --mp-info:      #7FB0E8;   /* payable/info blue on dark (8:1 on info-bg) */
  --mp-info-bg:   #10161F;   /* darkened info wash */
  --mp-shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.5);
  --mp-shadow-hover: 0 2px 4px rgba(0,0,0,.5), 0 14px 34px rgba(0,0,0,.6);
}

/* ---- 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(251,190,2,.95), rgba(251,190,2,.78));
  color: #0A0A0B; box-shadow: 0 6px 16px rgba(251,190,2,.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: var(--mp-danger-bg); color: var(--mp-danger); }
.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: var(--mp-danger-bg); color: var(--mp-danger); }

.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--approve { background: #2E7D44; color: #fff; }
.mp-btn--approve:hover:not(:disabled) { background: #266b3a; }
.mp-btn--reject { background: var(--mp-surface); color: var(--mp-danger); border-color: var(--mp-rule-2); }
.mp-btn--reject:hover:not(:disabled) { background: var(--mp-danger-bg); }

.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, #FBBE02); 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: var(--mp-surface); box-shadow: 0 0 0 3px rgba(251,190,2,.14); }
.mp-input--ok { border-color: var(--mp-ok); background: var(--mp-ok-bg); }
.mp-input--error { border-color: var(--mp-danger); background: rgba(226,86,74,.10); }

/* ---- 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: var(--mp-danger-bg); color: var(--mp-danger); 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;
}
.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: var(--mp-info-bg); color: var(--mp-info); }
.mp-badge--awaiting_payment { background: var(--mp-nude); color: var(--mp-ink-2); }
.mp-badge--reversed { background: var(--mp-danger-bg); color: var(--mp-danger); }

/* ---- P&L (waterfall) table ---- */
.mp-pl td { padding: 11px 6px; }
.mp-pl .mp-pos { color: var(--mp-ok); }
.mp-pl .mp-neg { color: var(--mp-danger); }
.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: var(--mp-surface); box-shadow: 0 0 0 3px rgba(251,190,2,.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: #0A0A0B;
  background: linear-gradient(135deg, var(--mp-rg-2), #DAAB21); border: none; border-radius: 9px;
  padding: 11px 20px; cursor: pointer; box-shadow: 0 6px 16px rgba(251,190,2,.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: var(--mp-danger); }

/* ---- 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: var(--mp-danger); }
.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: var(--mp-danger); }
.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: var(--mp-danger-bg); color: var(--mp-danger); }
.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: var(--mp-danger); }

/* ---- 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.nysub-mgmt #header,
body.nysub-mgmt .header-wrapper,
body.nysub-mgmt #top-bar,
body.nysub-mgmt .nysub-ticker-wrap,
body.nysub-mgmt .footer-wrapper,
body.nysub-mgmt #footer,
body.nysub-mgmt .absolute-footer { display: none !important; }
body.nysub-mgmt #wrapper,
body.nysub-mgmt #wrapper > #main,
body.nysub-mgmt #main,
body.nysub-mgmt #content,
body.nysub-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; }
}

/* === NYSUB 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; }
}

/* === NYSUB 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) {
  .nysub-process__trust { gap: 20px; }
  .nysub-process__trust-item { font-size: 12px; }
}

/* ===================================================================
   === NYSUB PREMIUM — ONDA 1 (13/06) ===
   Elevação premium em CSS puro. Identidade FIXA (tokens --nysub-*).
   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: 'Space 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 .nysub-eyebrow + alinhamento dos eyebrows/labels mono
   existentes ao MESMO padrão: Space Mono, uppercase, .2em,
   ~11px, rose-gold ~70%. Margens preservadas por contexto.
   ------------------------------------------------------------------ */
.nysub-eyebrow,
.nysub-hero__eyebrow,
.nysub-featured__eyebrow,
.nysub-process__eyebrow,
.nysub-vlogin__eyebrow,
.vp-train__eyebrow,
.nysub-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(244,192,37,.7) !important; /* âmbar ~70% */
}
/* utilitária standalone com respiro próprio */
.nysub-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. */
.nysub-hero__eyebrow {
  color: var(--nysub-rose-dark) !important; /* âmbar sólido (#FBBE02) */
  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 .nysub-specs-table td,
.single-product .nysub-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(--nysub-charcoal) !important;
  line-height: 1.1 !important;
}
.nysub-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 âmbar (#F4C025 → #DAAB21) + 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,
.nysub-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,
.nysub-hero__cta:hover {
  background-color: #DAAB21 !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,
  .nysub-hero__cta:active {
    transform: translateY(1px);
  }
}
/* ===================================================================
   === FIM NYSUB PREMIUM — ONDA 1 ===
   =================================================================== */

/* ===================================================================
   === NYSUB 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 NYsub + 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 {
  --nysub-content-max: 1300px;
  --nysub-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(244,192,37,.85) !important; /* âmbar 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(--nysub-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(--nysub-rose-dark) !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
/* v1 fix (20/07/2026, .bak-pricecontrast-20jul): the rules above already
   colored `.price` correctly (yellow, ~contrast 12:1 on the near-black
   card) via the `.product-small .box-text .price-wrapper .price`
   alternative (this grid actually renders as Flatsome's div.product-small
   cards, NOT the plain WooCommerce ul.products>li.product markup — the
   ul/li selectors in that comma list never match here), but Flatsome's
   own base rule `span.amount{color:#111}` (a light-theme default) has
   higher specificity than inheritance, so the *inner*
   .woocommerce-Price-amount span was rendering near-invisible (~1.05:1)
   on top of the already-correct parent color. Forcing it to inherit
   restores the single source of truth. Sale prices (del/ins, not live in
   the catalog today but proactively covered) get an explicit
   de-emphasized-but-passing muted color for the struck original vs full
   emphasis for the current price, preserving hierarchy. Same selector
   base covers related-products/up-sells, which reuse this exact markup. */
.product-small .box-text .price-wrapper .price .woocommerce-Price-amount,
.product-small .box-text .price-wrapper .price .amount,
.woocommerce ul.products li.product .price .woocommerce-Price-amount,
.woocommerce ul.products li.product .price .amount {
  color: inherit !important;
}
.product-small .box-text .price-wrapper .price del .woocommerce-Price-amount,
.product-small .box-text .price-wrapper .price del .amount,
.woocommerce ul.products li.product .price del .woocommerce-Price-amount,
.woocommerce ul.products li.product .price del .amount {
  color: var(--nysub-gray) !important; /* :root-scoped — --nh-muted is scoped to .nysub-hdr only and resolves to nothing here */
}
.product-small .box-text .price-wrapper .price ins .woocommerce-Price-amount,
.product-small .box-text .price-wrapper .price ins .amount,
.woocommerce ul.products li.product .price ins .woocommerce-Price-amount,
.woocommerce ul.products li.product .price ins .amount {
  color: var(--nysub-rose-dark) !important;
}

/* v1 fix (20/07/2026, .bak-pricecontrast-20jul): WooCommerce Cart Block —
   Flatsome's base `td{color:#666}` (light-theme default) was bleeding
   into the cart items table on this dark theme, since nothing scoped to
   the block's cells overrode it. Per-item unit price (secondary info,
   under the product name) gets a muted-but-passing tone; the row's line
   total gets full emphasis, matching the order-summary total below it
   (which was already correct, being outside the <td> — that's how this
   went unnoticed). */
.wc-block-cart-item__product,
.wc-block-cart-item__total {
  color: var(--nysub-charcoal) !important;
}
.wc-block-cart-item__prices .wc-block-formatted-money-amount {
  color: var(--nysub-gray) !important; /* :root-scoped — --nh-muted is scoped to .nysub-hdr only and resolves to nothing here */
}
.wc-block-cart-item__total .wc-block-formatted-money-amount {
  color: var(--nysub-charcoal) !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 NYsub (~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 NYsub. */
.woocommerce-shop .category-page-row,
.post-type-archive-product .category-page-row,
.tax-product_cat .category-page-row {
  max-width: var(--nysub-content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--nysub-gutter) !important;
  padding-right: var(--nysub-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(--nysub-content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--nysub-gutter) !important;
  padding-right: var(--nysub-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.nysub-bestseller .box,
ul.products li.product.nysub-bestseller .box,
li.product.nysub-bestseller .product-small.box {
  box-shadow:
    0 0 0 1.5px var(--nysub-rose-gold),
    var(--elevation-2) !important;
}
@media (prefers-reduced-motion: no-preference) {
  .product-small.nysub-bestseller .box:hover,
  ul.products li.product.nysub-bestseller .box:hover {
    box-shadow:
      0 0 0 1.5px var(--nysub-rose-dark),
      var(--elevation-4) !important;
  }
}
/* pílula "BEST SELLER" mono discreta no canto (gerada via ::after no col-inner) */
.product-small.nysub-bestseller .col-inner,
ul.products li.product.nysub-bestseller .col-inner {
  position: relative;
}
.product-small.nysub-bestseller .col-inner::after,
ul.products li.product.nysub-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: #0A0A0B;
  background: linear-gradient(135deg, #FFD23D, #F4C025);
  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: matar a faixa cinza chapada
   - .nysub-process ganhava aqui o MESMO gradiente charcoal do footer
     (160deg #28211D→#1F1A17); SECTIONBG (2026-07-04) substituiu essa regra
     pela base OLED #0A0A0B + concreto/grão/glow (ver bloco .nysub-process
     acima).
   - FOOTERBG (2026-07-04): o footer ganhou a MESMA superfície (base OLED +
     concreto + grão + vinheta) pra coesão com a seção acima — ver bloco
     #footer.footer-wrapper logo abaixo. SEM os 3 glows âmbar (só a seção
     "Como funciona" tem marcadores 01/02/03 pra ancorar); rodapé fica quieto.
   - .absolute-footer.dark estava chapado em #4D4D4D (a "faixa cinza"):
     segue transparente, herdando a superfície nova do footer-wrapper.
   ------------------------------------------------------------------- */
#footer.footer-wrapper {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(120% 110% at 50% 135%, rgba(0, 0, 0, 0.45), transparent 60%),
    #0A0A0B !important;
}
/* Textura de concreto — mesma peça/receita da .nysub-process, sem tiling */
#footer.footer-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900'%3E%3Cfilter id='nysubConcreteFooter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008' numOctaves='3' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nysubConcreteFooter)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.12;
  mix-blend-mode: screen;
  pointer-events: none;
}
/* Grão fino — mesma receita (tile 160px seamless) */
#footer.footer-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='nysubGrainFooter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nysubGrainFooter)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.06;
  mix-blend-mode: screen;
  pointer-events: none;
}
/* faixa de copyright: era cinza chapado #4D4D4D → agora transparente,
   herda a superfície texturada do footer-wrapper (sem costura abrupta) */
.absolute-footer.dark,
#footer .absolute-footer {
  background-color: transparent !important;
  background-image: none !important;
  border-top: 1px solid rgba(250,246,243,.08);
}
/* ===================================================================
   === FIM NYSUB 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;
  }
  .nysub-boomtube-credit {
    justify-content: center;
    text-align: center;
  }
  .nysub-payment-row {
    padding-top: 22px;
  }
  .nysub-payment-flags .payment-icon svg {
    width: 38px;
  }
}

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

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

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

/* Clickable header — full width, Sora, generous padding, chevron */
.nysub-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(--nysub-charcoal);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: color var(--transition-base);
}
.nysub-acc__summary:hover,
.nysub-acc[open] > .nysub-acc__summary {
  color: var(--nysub-rose-dark);
}
.nysub-acc__summary:focus-visible {
  outline: 2px solid var(--nysub-rose-dark);
  outline-offset: 3px;
}

/* Rose-gold chevron — rotates 180° when open */
.nysub-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(--nysub-rose-dark);
  border-bottom: 2px solid var(--nysub-rose-dark);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform var(--transition-base);
}
.nysub-acc[open] > .nysub-acc__summary::after {
  transform: rotate(225deg);
  margin-top: -0.18rem;
}

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

/* Inline COA link */
.nysub-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 */
.nysub-acc__body .nysub-specs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
.nysub-acc__body .nysub-specs-table th,
.nysub-acc__body .nysub-specs-table td {
  text-align: left;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--nysub-rule);
  vertical-align: top;
}
.nysub-acc__body .nysub-specs-table th {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--nysub-charcoal);
  width: 42%;
  white-space: nowrap;
}
.nysub-acc__body .nysub-specs-table td {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--nysub-gray);
}
.nysub-acc__body .nysub-specs-table tr:last-child th,
.nysub-acc__body .nysub-specs-table tr:last-child td {
  border-bottom: none;
}

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

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

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

/* === NYSUB 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. */
.nysub-pdp-checks {
  list-style: none;
  margin: 0.9em 0 1.1em;
  padding: 0;
}

.nysub-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(--nysub-charcoal);
}

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

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

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

/* ============================================================
   FREE-SHIPPING BAR — "DARK LUXE" (home only, fixed full-width bottom bar)
   DOM: aside.nysub-fbar.nysub-fbar--a >
        [ .nysub-fbar__inner ( .nysub-fbar__icon + .nysub-fbar__text>.nysub-fbar__num
          + .nysub-fbar__cta ) + .nysub-fbar__close ]
   z-index 8000: above page content, below cart off-canvas + age gate (999999).
   Shadows are CHARCOAL, never pure black. Foil = rose-gold gradient sheen.
   Body gets padding-bottom = bar height (set in JS) so it never covers content.
   ============================================================ */

/* ---------- Structure (position, motion, layout) ---------- */
.nysub-fbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8000;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 9px 56px 9px 20px;   /* extra right padding leaves room for the × */
  overflow: hidden;
  isolation: isolate;
  /* hidden state for entry animation (slides up from below the viewport edge) */
  opacity: 0;
  transform: translateY(100%);
  transition: opacity .45s ease, transform .55s cubic-bezier(.16,.84,.44,1);
}
.nysub-fbar.is-in     { opacity: 1; transform: translateY(0); }
.nysub-fbar.is-static { opacity: 1; transform: none; }
/* pointer-events:none while it slides out on manual dismiss — without it,
   the invisible-but-still-fixed bar could swallow a click meant for
   whatever sits underneath during the ~280ms transition. */
.nysub-fbar.is-out    { opacity: 0; transform: translateY(100%); pointer-events: none; }

/* Hitbox go-live fix: Flatsome's "back to top" button (.back-to-top) is
   ALSO position:fixed at bottom-right (20px), unaffected by the
   body padding-bottom this bar sets on itself — the two fixed elements
   overlap and the button becomes unclickable whenever the bar is showing.
   --nysub-fbar-h is kept in sync with the bar's real height by the JS
   pad()/unpad() helpers above; 0px (bar hidden/dismissed) is a no-op. */
.back-to-top {
  bottom: calc(20px + var(--nysub-fbar-h, 0px)) !important;
  transition: bottom .3s cubic-bezier(.16,.84,.44,1), opacity .3s ease, transform .3s ease !important;
}

/* Centered single-line content */
.nysub-fbar__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  max-width: 1180px;
  width: 100%;
}

/* Faint film-grain / noise overlay — adds material, matches the old card */
.nysub-fbar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  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");
}

.nysub-fbar__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
}
.nysub-fbar__text {
  margin: 0;
  /* condensada display da marca (mesma dos headers de seção), UPPERCASE,
     pra o aviso de frete se sobressair */
  font-family: var(--font-heading, 'Barlow Condensed', sans-serif);
  font-size: 15.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.25;
}
.nysub-fbar__num {
  font-size: 1.08em;        /* "Same-Day Shipping" um tico maior pra ancorar (protagonista, era o "$150") */
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.nysub-fbar__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 9px 20px;
  border-radius: 10px;
  transition: background .22s ease, transform .22s ease, box-shadow .22s ease, color .22s ease;
}
.nysub-fbar__cta:hover,
.nysub-fbar__cta:focus { transform: translateY(-1px); }

.nysub-fbar__close {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  font-size: 20px;
  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)
   ============================================================ */
.nysub-fbar--a {
  background: #0A0A0B;
  border-top: 1px solid rgba(244,192,37,.22);   /* hairline AMARELO NYsub */
  box-shadow:
    0 -1px 0 rgba(255,255,255,.05) inset,         /* top inner highlight */
    0 -14px 40px rgba(31,26,23,.34);              /* upward contact shadow */
}
/* Foil sheen accent across the bar — amarelo bem sutil + branco neutro (sem rosa) */
.nysub-fbar--a::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60% 140% at 0% 0%, rgba(244,192,37,.10), transparent 55%),
    radial-gradient(60% 140% at 100% 0%, rgba(244,192,37,.08), transparent 60%),
    linear-gradient(100deg, transparent 42%, rgba(255,255,255,.05) 50%, transparent 58%);
}
.nysub-fbar--a .nysub-fbar__icon {
  background: rgba(244,192,37,.14);              /* tile amarelo translúcido */
  border: 1px solid rgba(244,192,37,.35);
  color: #F4C025;                                /* glyph amarelo NYsub vivo */
}
.nysub-fbar--a .nysub-fbar__glyph { filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.nysub-fbar--a .nysub-fbar__text { color: #F7F7F5; }   /* claro alto-contraste */
.nysub-fbar--a .nysub-fbar__num {
  background: linear-gradient(100deg, #FFD23D, #F4C025);   /* "Same-Day Shipping" AMARELO destacado */
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nysub-fbar--a .nysub-fbar__cta {
  background: linear-gradient(135deg, #FFD23D, #F4C025);
  color: #0A0A0B;
  box-shadow: 0 6px 16px rgba(244,192,37,.30), 0 1px 0 rgba(255,255,255,.30) inset;
}
.nysub-fbar--a .nysub-fbar__cta:hover,
.nysub-fbar--a .nysub-fbar__cta:focus {
  background: linear-gradient(135deg, #FFD23D, #F4C025);   /* hover AMARELO (sem piscar rosa) */
  box-shadow: 0 10px 22px rgba(244,192,37,.40), 0 1px 0 rgba(255,255,255,.35) inset;
}
.nysub-fbar--a .nysub-fbar__close { color: #9c8f88; }
.nysub-fbar--a .nysub-fbar__close:hover,
.nysub-fbar--a .nysub-fbar__close:focus { background: rgba(244,192,37,.16); color: #FFD23D; }

/* ---------- Mobile (≤549px): keep one line readable, no horizontal overflow ----------
   Drop the tail (2PM cutoff + "shipped from the USA"); keep "Same-Day
   Shipping · Free shipping $200+" (the two purchase-decision facts) + Shop Now. */
@media screen and (max-width: 549px) {
  .nysub-fbar {
    padding: 8px 46px 8px 14px;
    min-height: 48px;
  }
  .nysub-fbar__inner { gap: 10px; }
  .nysub-fbar__tail { display: none; }
  .nysub-fbar__text { font-size: 12px; }
  .nysub-fbar__icon { width: 30px; height: 30px; }
  .nysub-fbar__cta { padding: 8px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .nysub-fbar { transition: none; }
}
/* === END NYSUB FREE-SHIPPING BAR (full-width bottom) === */

/* ==================================================================
   NYSUB — 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 .nysub-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 .nysub-reveal.nysub-revealed {
  opacity: 1;
  transform: none;
}
/* limpa will-change após revelar para não custar memória */
.is-reveal-ready .nysub-reveal.nysub-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,
.nysub-featured__card-cta:focus-visible,
.nysub-hero__cta:focus-visible,
.nysub-purity__cta:focus-visible,
.products .product-small a:focus-visible {
  outline: 2px solid var(--nysub-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 .nysub-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 .nysub-featured__card-media:not(.is-loaded)::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      rgba(247,232,201,0) 20%,
      rgba(244,192,37,.55) 45%,
      rgba(250,246,243,.9) 50%,
      rgba(244,192,37,.55) 55%,
      rgba(247,232,201,0) 80%
    ) #F7E8C9;
  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 .nysub-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 .nysub-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 .nysub-featured__card-media:not(.is-loaded)::after {
    animation: none !important;
    /* mantém um fundo estático on-brand, sem movimento */
    background: linear-gradient(135deg, #141416 0%, #1F1F22 100%);
  }
}
/* === END NYSUB ONDA 3 / ITEM 14 === */

/* ==================================================================
   NYSUB — 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 --------------------------------- */
/* CLEANUP (2026-07-04): fundo era o mesmo gradiente charcoal taupe do tema base
   (160deg #2A221E→#1F1A17→#1A1512). Migrado pra base OLED + concreto (na
   própria `background` do box, via `background-blend-mode: screen` — os
   dois pseudo-elementos já estavam ocupados pelo glow âmbar e o grão) +
   grão (::after) + glow âmbar (::before, já migrado no sweep anterior) +
   vinheta (o inset box-shadow abaixo já cumpre esse papel). */
.nysub-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:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900'%3E%3Cfilter id='nysubConcreteShopHero'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008' numOctaves='3' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nysubConcreteShopHero)' opacity='0.12'/%3E%3C/svg%3E") no-repeat center/cover,
    #0A0A0B;
  background-blend-mode: screen;
  padding: clamp(56px, 7vw, 104px) var(--zx-shop-gutter) clamp(48px, 5vw, 76px);
  box-shadow:
    inset 0 -1px 0 rgba(244, 192, 37, 0.06),
    inset 0 0 200px rgba(0, 0, 0, 0.28);  /* soft vignette for depth */
}
/* glow âmbar (reuse How It Works treatment) */
.nysub-shop-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(54% 64% at 16% -8%, rgba(244, 192, 37, 0.18) 0%, rgba(244, 192, 37, 0) 58%),
    radial-gradient(60% 90% at 92% 38%, rgba(244, 192, 37, 0.20) 0%, rgba(244, 192, 37, 0) 60%),
    radial-gradient(40% 70% at 100% 118%, rgba(244, 192, 37, 0.12) 0%, rgba(244, 192, 37, 0) 70%);
  pointer-events: none;
}
/* grão fino (mesma receita da .nysub-process) */
.nysub-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='nysubGrainShopHero'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nysubGrainShopHero)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.06;
  mix-blend-mode: screen;
  pointer-events: none;
}
.nysub-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);
}
.nysub-shop-hero__lead {
  max-width: 640px;
}
.nysub-shop-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nysub-rose-gold);
  margin: 0 0 22px;
  position: relative;
  padding-left: 30px;
}
.nysub-shop-hero__eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 20px;
  height: 1px;
  background: linear-gradient(90deg, var(--nysub-rose-dark), rgba(244,192,37,0));
}
.nysub-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;
}
.nysub-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 */
.nysub-shop-hero__notice {
  max-width: 760px;
  padding: 18px 22px;
  border-radius: 10px;
  border: 1px solid rgba(244, 192, 37, 0.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
  backdrop-filter: blur(2px);
}
.nysub-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(--nysub-rose-gold);
  margin-bottom: 9px;
}
.nysub-shop-hero__notice-label svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.nysub-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" --- */
/* CLEANUP (2026-07-04): o glass sheen sozinho, sobre o novo fundo OLED do
   hero (mais escuro que o charcoal antigo), lia como um vazio/"buraco
   preto". Adicionada base sólida #141416 (mesmo neutro dark usado em
   .nysub-shop-trust__icon) por baixo do gradiente de vidro, pra o painel
   ler como card elevado de verdade — borda âmbar mantida. */
.nysub-shop-hero__panel {
  position: relative;
  border-radius: 18px;
  padding: clamp(22px, 2.4vw, 32px) clamp(22px, 2.4vw, 34px);
  border: 1px solid rgba(244, 192, 37, 0.22);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.015) 48%, rgba(244, 192, 37, 0.06) 100%),
    #141416;
  -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 */
.nysub-shop-hero__panel::before {
  content: "";
  position: absolute;
  top: 0; left: 18px; right: 18px;
  height: 1px;
  background: linear-gradient(90deg, rgba(244,192,37,0), rgba(244,192,37,0.55), rgba(244,192,37,0));
  pointer-events: none;
}
.nysub-shop-hero__panel-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--nysub-rose-gold);
  margin: 0 0 18px;
}
.nysub-shop-hero__stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.nysub-shop-hero__stat {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid rgba(244, 192, 37, 0.12);
}
.nysub-shop-hero__stat:first-child { border-top: 0; padding-top: 2px; }
.nysub-shop-hero__stat:last-child { padding-bottom: 2px; }
.nysub-shop-hero__stat-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--nysub-rose-gold);
  background: linear-gradient(155deg, rgba(255,255,255,0.08), rgba(244,192,37,0.10));
  border: 1px solid rgba(244, 192, 37, 0.18);
}
.nysub-shop-hero__stat-icon svg { width: 20px; height: 20px; }
.nysub-shop-hero__stat-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.nysub-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;
}
.nysub-shop-hero__stat-unit {
  font-size: 0.62em;
  color: var(--nysub-rose-gold);
  margin-left: 2px;
}
.nysub-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 --------------------- */
.nysub-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(244, 192, 37, 0.10) 0%, rgba(244, 192, 37, 0) 55%),
    linear-gradient(180deg, #0F0F11 0%, #0A0A0B 100%);
  border-bottom: 1px solid var(--nysub-rule);
  padding: clamp(34px, 4vw, 56px) var(--zx-shop-gutter);
}
.nysub-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;
}
.nysub-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);
}
.nysub-shop-trust__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
}
.nysub-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(244,192,37,0), var(--nysub-rule-strong) 30%, var(--nysub-rule-strong) 70%, rgba(244,192,37,0));
}
.nysub-shop-trust__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--nysub-rose-dark);
  background: linear-gradient(155deg, #1F1F22 0%, #141416 100%);
  border: 1px solid var(--nysub-rule);
  box-shadow: 0 2px 8px rgba(31, 26, 23, 0.06);
}
.nysub-shop-trust__icon svg {
  width: 20px;
  height: 20px;
}
.nysub-shop-trust__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nysub-rose-dark);
  margin: 0 0 6px;
}
.nysub-shop-trust__stat {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--nysub-charcoal);
  letter-spacing: -0.01em;
  margin: 0 0 7px;
  line-height: 1.1;
}
.nysub-shop-trust__body {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--nysub-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(--nysub-rule);
  background: linear-gradient(180deg, #141416 0%, var(--nysub-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(--nysub-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(--nysub-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: #F4F2EF;
  background-color: #141416;
  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='%23F4C025' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #17171A 0%, #121214 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: right 16px center, 0 0;
  background-size: 12px 8px, 100% 100%;
  border: 1px solid #2A2723;
  border-radius: 999px;
  padding: 0 42px 0 20px;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
  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: #F4C025;
  box-shadow: 0 2px 12px rgba(244, 192, 37, 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 #F4C025;
  outline-offset: 2px;
  border-color: #F4C025;
}

/* ---- 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(--nysub-rose-dark) !important;
  color: #fff !important;
  border-color: var(--nysub-rose-dark) !important;
}

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

/* ---- 8) MOBILE ------------------------------------------------- */
@media (max-width: 849px) {
  .nysub-shop-trust__inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .nysub-shop-hero__panel { padding: 20px; border-radius: 14px; }
  .nysub-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%;
  }
  .nysub-shop-trust__item--divider::before { display: none; }
  .nysub-shop-trust__item {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--nysub-rule);
  }
  .nysub-shop-trust__item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .nysub-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 NYSUB SHOP / ARCHIVE REDESIGN === */

/* ============================================================
   NYsub reskin (Onda 2) — WooCommerce action buttons → yellow
   Flatsome paints checkout/place-order/add-to-cart with its own
   theme colour; force the NYsub yellow primary (black label) so
   they match the hero .btn. High specificity to win over Flatsome.
   ============================================================ */
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order,
.woocommerce .checkout-button,
.woocommerce .single_add_to_cart_button,
.woocommerce-page .button.alt,
.wc-proceed-to-checkout a.checkout-button {
  background-color: var(--nysub-rose-gold) !important;
  background-image: none !important;
  color: #0A0A0B !important;
  border-color: var(--nysub-rose-gold) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover,
.woocommerce .checkout-button:hover,
.woocommerce .single_add_to_cart_button:hover,
.wc-proceed-to-checkout a.checkout-button:hover {
  background-color: var(--nysub-rose-light) !important;
  border-color: var(--nysub-rose-light) !important;
  color: #0A0A0B !important;
}
/* secondary woo buttons (Update cart, Apply coupon) → dark surface */
.woocommerce button.button:not(.alt),
.woocommerce input.button:not(.alt) {
  background-color: var(--nysub-ivory) !important;
  color: var(--ny-white) !important;
  border: 1px solid var(--nysub-rule) !important;
  text-shadow: none !important;
}
.woocommerce button.button:not(.alt):hover,
.woocommerce input.button:not(.alt):hover {
  border-color: var(--nysub-rose-gold) !important;
  color: var(--nysub-rose-gold) !important;
}

/* Form controls (checkout/account/contact) → dark surface, light text.
   Flatsome/Woo core paints inputs white #fff with #333 text. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text,
.woocommerce .select2-container .select2-selection,
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], input[type="search"],
input[type="url"], select, textarea {
  background-color: var(--nysub-ivory) !important;
  color: var(--ny-white) !important;
  border: 1px solid var(--nysub-rule) !important;
}
input::placeholder, textarea::placeholder { color: var(--nysub-gray) !important; }
input:focus, select:focus, textarea:focus,
.woocommerce form .form-row input.input-text:focus {
  border-color: var(--nysub-rose-gold) !important;
  outline: none !important;
}

/* ============================================================
   HEADER PILL — Gotham floating pill nav (.nysub-hdr*)
   Ported from approved v2 prototype. Replaces the Flatsome native
   #header (hidden below). Scoped to .nysub-hdr — does not leak.
   Fixed at top:28px (under the 28px ticker), centered, z-index 200,
   matching the previous header footprint so #wrapper padding holds.
   ============================================================ */

/* Hide the Flatsome native header entirely — pill takes over */
#header,
#header .header-wrapper { display: none !important; }

.nysub-hdr {
  --nh-yellow:       #F4C025;
  --nh-pill-bg:      #14151A;
  --nh-pill-bg-2:    #0C0D12;
  --nh-pill-border:  rgba(255,255,255,.10);
  --nh-offwhite:     #E9E9EC;
  --nh-muted:        #9A9BA3;
  --nh-menu-bg:      #15161C;
  --nh-menu-border:  rgba(255,255,255,.08);
  --nh-ease:         cubic-bezier(.22,.61,.36,1);

  position: fixed;
  top: 28px;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 200;
  display: flex;
  justify-content: center;
  pointer-events: none;
  padding: 0 clamp(16px, 4vw, 56px);
}
.admin-bar .nysub-hdr { top: 60px; }
@media screen and (max-width: 782px) {
  .admin-bar .nysub-hdr { top: 74px; }
}

.nysub-hdr__pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 22px);
  width: -moz-fit-content;
  width: fit-content;
  max-width: min(940px, 100%);
  height: 70px;
  padding: 0 14px 0 24px;
  background: linear-gradient(180deg, var(--nh-pill-bg) 0%, var(--nh-pill-bg-2) 100%);
  border: 1px solid var(--nh-pill-border);
  border-radius: 48px;
  box-shadow: 0 18px 50px -12px rgba(0,0,0,.65), 0 2px 0 rgba(255,255,255,.04) inset;
  pointer-events: auto;
  box-sizing: border-box;
}

/* ---- Logo ---- */
.nysub-hdr__logo { flex: 0 0 auto; display: flex; align-items: center; line-height: 0; }
.nysub-hdr__logo img { height: 42px; width: auto; display: block; }

/* ---- Nav ---- */
.nysub-hdr__nav {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1vw, 16px);
  height: 100%;
}
.nysub-hdr__item { position: relative; height: 100%; display: flex; align-items: center; }
.nysub-hdr__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nh-offwhite);
  text-decoration: none;
  padding: 8px 4px;
  cursor: pointer;
  transition: color .22s var(--nh-ease);
  white-space: nowrap;
  background: none;
  border: 0;
}
.nysub-hdr__link:hover,
.nysub-hdr__item:hover > .nysub-hdr__link,
.nysub-hdr__item:focus-within > .nysub-hdr__link { color: var(--nh-yellow); }
.nysub-hdr__caret {
  width: 9px; height: 9px;
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s var(--nh-ease);
}
.nysub-hdr__item:hover .nysub-hdr__caret,
.nysub-hdr__item:focus-within .nysub-hdr__caret { transform: translateY(2px) rotate(180deg); }

/* ---- Actions (right) ---- */
.nysub-hdr__actions { flex: 0 0 auto; display: flex; align-items: center; gap: clamp(10px, 1.2vw, 16px); }
.nysub-hdr__shop {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nh-yellow);
  background: transparent;
  border: 1.5px solid var(--nh-yellow);
  border-radius: 12px;
  padding: 11px 22px;
  text-decoration: none;
  cursor: pointer;
  transition: background .22s var(--nh-ease), color .22s var(--nh-ease), box-shadow .22s var(--nh-ease);
  white-space: nowrap;
}
.nysub-hdr__shop:hover {
  background: var(--nh-yellow);
  color: #0C0D12;
  box-shadow: 0 6px 22px -6px rgba(244,192,37,.55);
}

.nysub-hdr__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--nh-yellow);
  text-decoration: none;
  padding: 6px;
  transition: transform .2s var(--nh-ease);
}
.nysub-hdr__cart:hover { transform: translateY(-1px); color: var(--nh-yellow); }
.nysub-hdr__cart svg { width: 26px; height: 26px; display: block; }
.nysub-hdr__cart-badge {
  position: absolute;
  top: -3px; right: -4px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  background: var(--nh-yellow);
  color: #0C0D12;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 11px;
  line-height: 17px;
  text-align: center;
  border-radius: 50%;
  border: 2px solid var(--nh-pill-bg);
}
.nysub-hdr__cart-badge.is-empty { display: none; }

/* ============ DROPDOWNS ============ */
.nysub-hdr__dropdown,
.nysub-hdr__mega {
  position: absolute;
  top: calc(100% + 14px);
  background: linear-gradient(180deg, var(--nh-menu-bg) 0%, #0D0E13 100%);
  border: 1px solid var(--nh-menu-border);
  border-radius: 18px;
  box-shadow: 0 24px 60px -14px rgba(0,0,0,.7);
  padding: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .24s var(--nh-ease), transform .24s var(--nh-ease), visibility .24s;
  z-index: 60;
}
/* hover bridge so the gap doesn't close the menu */
.nysub-hdr--has-menu::after {
  content: "";
  position: absolute;
  top: 100%; left: 0; right: 0;
  height: 18px;
}
.nysub-hdr--has-menu:hover .nysub-hdr__dropdown,
.nysub-hdr--has-menu:hover .nysub-hdr__mega,
.nysub-hdr--has-menu:focus-within .nysub-hdr__dropdown,
.nysub-hdr--has-menu:focus-within .nysub-hdr__mega,
.nysub-hdr--has-menu.is-open .nysub-hdr__dropdown,
.nysub-hdr--has-menu.is-open .nysub-hdr__mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* single-column dropdown */
.nysub-hdr__dropdown { left: 0; min-width: 230px; }
.nysub-hdr__menu-link {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .05em;
  color: var(--nh-offwhite);
  text-decoration: none;
  padding: 11px 16px;
  border-radius: 11px;
  transition: background .18s var(--nh-ease), color .18s var(--nh-ease);
  white-space: nowrap;
}
.nysub-hdr__menu-link:hover { background: rgba(244,192,37,.10); color: var(--nh-yellow); }

/* mega menu — Categories */
.nysub-hdr__mega { left: 50%; transform: translate(-50%, 8px); min-width: 560px; }
.nysub-hdr--has-menu:hover .nysub-hdr__mega,
.nysub-hdr--has-menu:focus-within .nysub-hdr__mega,
.nysub-hdr--has-menu.is-open .nysub-hdr__mega { transform: translate(-50%, 0); }
.nysub-hdr__mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }

/* about — 2 column with headings */
.nysub-hdr__dropdown--cols { left: 0; min-width: 480px; }
.nysub-hdr__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.nysub-hdr__col-head {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--nh-muted);
  padding: 6px 16px 8px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: 4px;
}

/* ============ MOBILE ============ */
.nysub-hdr__burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  margin: 0; /* v2 fix (20/07/2026, .bak-burgerbox-20jul): Flatsome's own base
    rule `.button,button,fieldset,input,select,textarea{margin-bottom:1em}`
    was never reset here, adding ~15.5px margin-bottom (0 on top) — inside
    .nysub-hdr__actions' flex row (align-items:center) that asymmetric
    margin box shifted the whole button up relative to the other icons
    (search/account/cart), which don't carry that margin. Zeroing it puts
    the burger's box back on the same center line as its siblings. */
  padding: 0; /* v1 fix (20/07/2026): a global <button> reset (Flatsome/WC)
    was injecting ~18.6px of left/right padding here, shrinking the flex
    content box until the 20px-wide spans no longer fit — margin:auto had
    no free space to center with, so the icon hugged the left padding edge
    and overflowed right (the "descentralizado pra cima/direita" bug).
    Zeroing padding restores the full 40px box for centering. */
  background: transparent;
  border: 1px solid var(--nh-pill-border);
  border-radius: 12px;
  cursor: pointer;
}
.nysub-hdr__burger span {
  display: block;
  width: 20px; height: 2px;
  margin: 0 auto;
  background: var(--nh-offwhite);
  border-radius: 2px;
  transition: .25s var(--nh-ease);
}
body.nysub-hdr-open .nysub-hdr__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nysub-hdr-open .nysub-hdr__burger span:nth-child(2) { opacity: 0; }
body.nysub-hdr-open .nysub-hdr__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nysub-hdr__nav, .nysub-hdr__shop { display: none; }
  .nysub-hdr__burger { display: flex; }
  .nysub-hdr__pill { padding: 0 18px; gap: 16px; }
  .nysub-hdr__nav {
    position: absolute;
    top: calc(100% + 14px);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    height: auto;
    max-height: 0;
    overflow: hidden;
    background: linear-gradient(180deg, var(--nh-menu-bg) 0%, #0D0E13 100%);
    border: 1px solid var(--nh-menu-border);
    border-radius: 18px;
    padding: 0 12px;
    box-shadow: 0 24px 60px -14px rgba(0,0,0,.7);
    opacity: 0;
    transition: max-height .35s var(--nh-ease), opacity .25s var(--nh-ease), padding .25s var(--nh-ease);
  }
  body.nysub-hdr-open .nysub-hdr__nav {
    display: flex;
    max-height: 80vh;
    overflow: auto;
    opacity: 1;
    padding: 12px;
  }
  .nysub-hdr__item { height: auto; flex-direction: column; align-items: stretch; width: 100%; }
  .nysub-hdr__link { padding: 13px 8px; justify-content: space-between; width: 100%; font-size: 16px; }
  .nysub-hdr__dropdown, .nysub-hdr__mega {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0;
    background: rgba(255,255,255,.03);
    border-radius: 12px;
    margin: 2px 0 8px;
    padding: 6px;
    max-height: 0; overflow: hidden;
    transition: max-height .3s var(--nh-ease), padding .3s var(--nh-ease);
    min-width: 0;
    left: auto;
  }
  /* transform:none também no estado ABERTO: a regra desktop
     .nysub-hdr--has-menu.is-open .nysub-hdr__mega (3 classes) reaplicava o
     translate(-50%) por cima do reset de 1 classe acima e empurrava o painel
     ~160px pra fora da tela — categorias "abriam" vazias no mobile (bug
     pego pelo Alan no re-teste de iPhone do go-live, 21/07). */
  .nysub-hdr__item.is-open .nysub-hdr__dropdown,
  .nysub-hdr__item.is-open .nysub-hdr__mega { max-height: 600px; padding: 8px; transform: none; }
  .nysub-hdr__mega-grid, .nysub-hdr__cols { grid-template-columns: 1fr; }
  .nysub-hdr__col-head { grid-column: 1 / -1; }
  .nysub-hdr--has-menu:hover .nysub-hdr__dropdown,
  .nysub-hdr--has-menu:hover .nysub-hdr__mega { max-height: 0; padding: 6px; }
  .nysub-hdr--has-menu.is-open:hover .nysub-hdr__dropdown,
  .nysub-hdr--has-menu.is-open:hover .nysub-hdr__mega { max-height: 600px; padding: 8px; }
}

/* ============================================================
   HEADER PILL — Search (lupa) + Account/Login icons
   Same weight/size/color language as the cart icon. Scoped .nysub-hdr*.
   ============================================================ */

/* Shared icon button (search toggle + account) — matches cart sizing */
.nysub-hdr__icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--nh-yellow);
  background: transparent;
  border: 0;
  padding: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .2s var(--nh-ease), color .2s var(--nh-ease);
}
.nysub-hdr__icon-btn:hover { transform: translateY(-1px); color: var(--nh-yellow); }
.nysub-hdr__icon-btn svg { width: 24px; height: 24px; display: block; }

/* Search wrapper + dropdown panel */
/* The wrapper must hug the toggle and NOT stretch to the actions row, otherwise
   the lupa sits at the wrapper's top and reads higher than account + cart.
   align-self centers the wrapper in the row; margin:auto centers the toggle in it. */
.nysub-hdr__search {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: center;
}
.nysub-hdr__search-toggle { margin: auto 0; }
.nysub-hdr__search-toggle[aria-expanded="true"] { color: #fff; }

.nysub-hdr__search-panel {
  position: absolute;
  top: calc(100% + 16px);
  right: 0;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: linear-gradient(180deg, var(--nh-menu-bg) 0%, #0D0E13 100%);
  border: 1px solid var(--nh-menu-border);
  border-radius: 16px;
  box-shadow: 0 24px 60px -14px rgba(0,0,0,.7);
  padding: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .22s var(--nh-ease), transform .22s var(--nh-ease), visibility .22s;
  z-index: 70;
}
.nysub-hdr__search.is-open .nysub-hdr__search-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nysub-hdr__search-form {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--nh-menu-border);
  border-radius: 11px;
  padding: 6px 6px 6px 12px;
}
.nysub-hdr__search-ico { width: 18px; height: 18px; flex: 0 0 auto; color: var(--nh-muted); }
.nysub-hdr__search-input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--nh-offwhite);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  letter-spacing: .03em;
  padding: 6px 0;
}
.nysub-hdr__search-input::placeholder { color: var(--nh-muted); }
.nysub-hdr__search-submit {
  flex: 0 0 auto;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #0C0D12;
  background: var(--nh-yellow);
  border: 0;
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  transition: filter .2s var(--nh-ease);
}
.nysub-hdr__search-submit:hover { filter: brightness(1.08); }

/* v1 fix (20/07/2026, .bak-searchgo-20jul): the sitewide
   `button[type="submit"]` rule (~L654, "BUTTONS — Rose Gold") has higher
   specificity (element+attribute) than the plain class selectors above
   (`.nysub-hdr__search-submit`), so it was winning the cascade and
   injecting its own padding (12px 28px) and border (2px solid transparent)
   into the GO button — 59px tall vs the input's ~40px. Text inputs also
   carry browser-internal padding that getComputedStyle doesn't expose, so
   matching by padding math alone isn't reliable; pinning both to the same
   explicit height (with appearance:none stripping the input's native
   chrome) is what actually makes them equal and centers all three
   (icon/input/button) on one line, since .nysub-hdr__search-form already
   has align-items:center. */
.nysub-hdr__search-form .nysub-hdr__search-input,
.nysub-hdr__search-form .nysub-hdr__search-submit {
  box-sizing: border-box !important;
  height: 38px !important;
  margin: 0 !important;
}
.nysub-hdr__search-form .nysub-hdr__search-input {
  -webkit-appearance: none;
  appearance: none;
  padding: 0 12px !important;
}
.nysub-hdr__search-form .nysub-hdr__search-submit {
  padding: 0 14px !important;
  border: 0 !important;
}

/* ---- Mobile: search/account icons stay visible in the pill ----
   Order in actions row stays: search · account · cart. The search PANEL,
   anchored to the mid-pill icon, would clip off-screen — so on mobile we
   pin it to the viewport (fixed, full-width minus gutter) so it never
   overflows. Icons are NOT hidden like the nav. */
@media (max-width: 1080px) {
  .nysub-hdr__icon-btn svg { width: 22px; height: 22px; }
  .nysub-hdr__search { position: static; }
  .nysub-hdr__search-panel {
    position: fixed;
    top: calc(28px + 70px + 6px); /* ticker + pill height + gap */
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
  }
  .admin-bar .nysub-hdr__search-panel { top: calc(60px + 70px + 6px); }
}
@media (max-width: 782px) {
  .admin-bar .nysub-hdr__search-panel { top: calc(74px + 70px + 6px); }
}

/* ============================================================
   ETAPA 5 — ACABAMENTO (auditoria @qa 2026-06-25)
   A-1: reskin dark Gotham das ~13 páginas institucionais/legais/vendors
        que ficaram no tema CLARO legado anterior.
   Abordagem: as cores claras estão gravadas em style="" INLINE de
   <section>/<div> sem classe (conteúdo do page-builder no banco). Em vez
   de editar o banco (risco/sigilo), sobrescrevemos via CSS com !important
   usando SELETORES DE ATRIBUTO sobre os literais legados exatos. Esses
   literais (#FAF6F3 creme, #F2EBE5 rosado, #B97F75 rose, #1F1A17 marrom,
   #6B5E55 muted) só existem nessas páginas legadas — o comércio/portais
   (já dark) NÃO os contêm, então não são afetados. Flag `i` p/ robustez.
   ============================================================ */

/* — Fundos creme claro → OLED black — */
[style*="background:#FAF6F3" i],
[style*="background: #FAF6F3" i] {
  background: #0A0A0B !important;
  background-image: none !important;
}

/* — Sections marrom-escuro legadas → OLED black (coerência total) — */
[style*="background:#1F1A17" i],
[style*="background: #1F1A17" i] {
  background: #0A0A0B !important;
  background-image: none !important;
}

/* — Cards/placeholders rosados (gradientes #F2EBE5) → superfície dark — */
[style*="#F2EBE5" i] {
  background: #141416 !important;
  background-image: none !important;
  border: 1px solid rgba(244, 192, 37, 0.14) !important;
}

/* — Caixa de aviso RUO rosada (#FFF3EC, páginas legais) → callout dark — */
[style*="background:#FFF3EC" i],
[style*="background: #FFF3EC" i] {
  background: #141416 !important;
  background-image: none !important;
  border-left: 3px solid var(--nysub-rose-gold) !important;
}

/* — Texto escuro legado (#1F1A17) sobre fundo agora dark → claro — */
[style*="color:#1F1A17" i],
[style*="color: #1F1A17" i] {
  color: #F4F2EF !important;
}

/* — Texto muted marrom (#6B5E55) → cinza claro legível (AA em #0A0A0B) — */
[style*="color:#6B5E55" i],
[style*="color: #6B5E55" i] {
  color: #A9A39C !important;
}

/* — Accent rose legado (#B97F75) → amarelo NYsub — */
[style*="color:#B97F75" i],
[style*="color: #B97F75" i] {
  color: var(--nysub-rose-gold) !important; /* #F4C025 */
}
/* (texto claro #FAF6F3 inline permanece — já legível no dark) */

/* ============================================================
   COLORFIX (auditoria @qa 2026-07-04)
   O override de `color:` acima não cobre `border`/`background` inline
   com o mesmo literal legado #B97F75 — sweep encontrou 17 ocorrências
   (bordas de caixas RUO/pull-quote/sidebar + fundos de botão/badges/
   ícones) ainda renderizando rosé. Mesma abordagem de seletor de
   atributo sobre o style="" inline (conteúdo do page-builder no banco).
   ============================================================ */

/* — Bordas rose legadas (#B97F75) → amarelo NYsub (sem risco de contraste) — */
[style*="border:2px solid #B97F75" i],
[style*="border-left:3px solid #B97F75" i],
[style*="border-left:2px solid #B97F75" i] {
  border-color: var(--nysub-rose-gold) !important;
}

/* — Fundos rose legados (#B97F75) → amarelo NYsub. Todo fundo amarelo aqui
   tinha texto claro (#fff/#FAF6F3) na MESMA tag — força texto escuro
   junto p/ manter contraste AA (botão contato, badges home, ícones). — */
[style*="background:#B97F75" i],
[style*="background: #B97F75" i] {
  background: var(--nysub-rose-gold) !important;
  background-image: none !important;
  color: #0A0A0B !important;
}
/* CRITICAL TERM (terms, post 21): o texto claro está no <span> FILHO, não
   na mesma tag do background — herança não alcança (inline vence cascade).
   Precisa de regra própria mirando o filho. */
[style*="background:#B97F75" i] > [style*="color:#FAF6F3" i] {
  color: #0A0A0B !important;
}

/* M-3 — /my-account/: barra de título quase-branca (#F7F7F7) → dark Gotham.
   O texto do título já é quase-branco (some no claro); fica legível no dark. */
.woocommerce-account .my-account-header.page-title,
.woocommerce-account .my-account-header.page-title .page-title-inner {
  background: #0A0A0B !important;
  background-image: none !important;
}
.woocommerce-account .my-account-header.page-title {
  border-bottom: 1px solid rgba(244, 192, 37, 0.18) !important;
}
.woocommerce-account .my-account-header.page-title .page-title-inner,
.woocommerce-account .my-account-header .entry-title,
.woocommerce-account .my-account-header .is-title {
  color: #F4F2EF !important;
}
.woocommerce-account .my-account-header.page-title a {
  color: var(--nysub-rose-gold) !important;
}

/* M-1 + M-2 — CTAs de login padronizados em amarelo (decisão Alan).
   Alvos PRECISOS só do submit primário de login:
   - #wp-submit          = "Sign In" dos portais (/partners-login/, /vendor-login/),
                           hoje azul Flatsome #446084 (botão do wp_login_form).
   - .woocommerce-form-login__submit = "Log in" do WooCommerce (/my-account/, checkout),
                           hoje escuro #141416.
   NÃO atinge "Lost your password?" (link <a>), o olho de mostrar senha
   (.show-password-input) nem links secundários. Hover = glow do SHOP NOW. */
/* Especificidade alta de propósito p/ vencer o reskin Onda 2
   (.woocommerce button.button:not(.alt) → dark surface, L5497) que pinta
   o submit de login de #141416. */
#wp-submit,
.woocommerce button.woocommerce-button.button.woocommerce-form-login__submit,
.woocommerce input.button.woocommerce-form-login__submit,
.woocommerce-form-login__submit {
  background-color: var(--nysub-rose-gold) !important; /* #F4C025 */
  background-image: none !important;
  border: none !important;
  border-color: var(--nysub-rose-gold) !important;
  color: #0A0A0B !important;
  text-shadow: none !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}
#wp-submit:hover,
#wp-submit:focus-visible,
.woocommerce button.woocommerce-button.button.woocommerce-form-login__submit:hover,
.woocommerce button.woocommerce-button.button.woocommerce-form-login__submit:focus-visible,
.woocommerce-form-login__submit:hover,
.woocommerce-form-login__submit:focus-visible {
  background-color: var(--nysub-rose-light) !important;
  border-color: var(--nysub-rose-light) !important;
  color: #0A0A0B !important;
  box-shadow: 0 6px 24px rgba(244, 192, 37, 0.30) !important;
}

/* M-5 — Onda 4/08jul: o toggle "mostrar senha" (.show-password-input) ficou de fora
   do fix acima de propósito (era só o CTA). O Flatsome desenha o olho via glyph de
   fonte (fl-icons, ::after) mas o WooCommerce core (woocommerce-layout.css) também
   define um ::before com ícone SVG preto (fill #111111) para o mesmo botão — em
   cache/ordem de carregamento variável isso pode deixar o preto vazar por cima do
   glyph e sumir/ficar deformado no fundo escuro. Neutraliza o SVG do core e garante
   um único ícone, na cor dourada do design system. */
.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input {
  color: var(--nysub-rose-gold) !important;
}
.woocommerce form .show-password-input::before,
.woocommerce-page form .show-password-input::before {
  content: none !important;
  background-image: none !important;
}
.woocommerce form .show-password-input::after,
.woocommerce-page form .show-password-input::after {
  color: var(--nysub-rose-gold) !important;
}
.woocommerce form .show-password-input:hover::after,
.woocommerce form .show-password-input:focus-visible::after,
.woocommerce-page form .show-password-input:hover::after,
.woocommerce-page form .show-password-input:focus-visible::after {
  color: var(--nysub-rose-light) !important;
}
.woocommerce form .show-password-input:focus-visible,
.woocommerce-page form .show-password-input:focus-visible {
  outline: 2px solid var(--nysub-rose-gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* M-5b — Fase C/17jul (achado do Alan): no Safari, o ícone nativo de senha
   (chave do autofill/senha forte) nasce rente à borda direita do campo — o
   MESMO canto onde o Flatsome ancora o olho (top:0/right:0, e 43px de altura
   num campo de 35px). Resultado: um glifo em cima do outro. Afasta o nosso
   olho do canto (o canto fica reservado ao ícone do navegador), centraliza
   na vertical e reserva padding pro texto não correr por baixo dos ícones. */
.woocommerce form .password-input,
.woocommerce-page form .password-input {
  position: relative;
}
.woocommerce form .password-input .show-password-input,
.woocommerce-page form .password-input .show-password-input {
  /* o wrapper .password-input inclui o medidor de força embaixo — ancorar no
     TOPO (onde está o campo de 35px), não no centro do wrapper */
  top: 5px !important;
  right: 36px !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 2; /* sem isto o input (posicionado) pinta POR CIMA do botão — hitbox morta */
  height: 24px !important;
  min-height: 24px !important; /* Flatsome impõe min-height ~39px em buttons */
  width: 24px !important;
  line-height: 24px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.woocommerce form .password-input input.input-text,
.woocommerce-page form .password-input input.input-text {
  padding-right: 72px !important;
}

/* ── Created by BoomTube — crédito na barra inferior do rodapé, à DIREITA ── */
.nysub-boomtube-credit { display:inline-flex; align-items:center; justify-content:flex-end; gap:8px; padding:0; margin:0; text-align:right; }
.nysub-boomtube-credit .nysub-bt-link { display:inline-flex; align-items:center; gap:8px; text-decoration:none; border:0; background:none; transition:filter .2s ease, opacity .2s ease; }
.nysub-boomtube-credit .nysub-bt-link:hover .nysub-bt-name,
.nysub-boomtube-credit .nysub-bt-link:focus-visible .nysub-bt-name { opacity:1; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(244,192,37,.55); }
.nysub-boomtube-credit .nysub-bt-link:hover .nysub-bt-burst,
.nysub-boomtube-credit .nysub-bt-link:focus-visible .nysub-bt-burst { filter:brightness(1.18) saturate(1.1); }
.nysub-boomtube-credit .nysub-bt-link:focus-visible { outline:2px solid #F4C025; outline-offset:3px; border-radius:6px; }
.nysub-boomtube-credit .nysub-bt-burst { width:22px; height:22px; flex:0 0 auto; display:block; transition:filter .2s ease; }
.nysub-boomtube-credit .nysub-bt-text { font-family:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; line-height:1.2; white-space:nowrap; }
.nysub-boomtube-credit .nysub-bt-pre { color:#9A968F; opacity:0.75; }
.nysub-boomtube-credit .nysub-bt-name { color:#F4F2EF; opacity:0.95; font-weight:500; }

/* ── Age gate: widget Turnstile + botão desabilitado + linha de erro ── */
#nysub-age-gate .nysub-age-turnstile { display:flex; justify-content:center; margin:2px 0 16px; }
#nysub-age-gate .nysub-age-error { display:none; color:#E8A99E; font-size:12.5px; text-align:center; margin:0 0 14px; line-height:1.5; }
#nysub-age-gate .nysub-btn-agree:disabled,
#nysub-age-gate .nysub-btn-agree.is-disabled { opacity:.45; cursor:not-allowed; }

/* ── Turnstile no checkout (acima do Place order) ── */
.nysub-checkout-turnstile { margin:0 0 18px; }
.nysub-checkout-turnstile #nysub-ts-checkout { min-height:65px; }

/* ── Preços/totais nas tabelas de CHECKOUT · PEDIDO · CARRINHO → âmbar NYsub ──
   O Flatsome/WooCommerce colore os .amount com um tom escuro (feito p/ fundo
   claro); no checkout dark eles somem. Pinta os VALORES de âmbar legível. */
.woocommerce-checkout-review-order-table .woocommerce-Price-amount,
.woocommerce-checkout-review-order-table .amount,
.woocommerce-checkout .shop_table .woocommerce-Price-amount,
.woocommerce-order-details .woocommerce-Price-amount,
.woocommerce-table--order-details .woocommerce-Price-amount,
.woocommerce-order-overview .woocommerce-Price-amount,
.woocommerce-cart-form .woocommerce-Price-amount,
.cart_totals .woocommerce-Price-amount,
.cart_totals .amount {
  color: #F4C025 !important;
}
/* o <bdi> interno herda a cor */
.woocommerce-checkout-review-order-table .woocommerce-Price-amount bdi,
.woocommerce-order-details .woocommerce-Price-amount bdi,
.woocommerce-table--order-details .woocommerce-Price-amount bdi,
.woocommerce-order-overview .woocommerce-Price-amount bdi,
.cart_totals .woocommerce-Price-amount bdi {
  color: inherit !important;
}

/* ── Nomes de produto no resumo do CHECKOUT → âmbar (bate com a página de pedido) ── */
.woocommerce-checkout-review-order-table td.product-name,
.woocommerce-checkout-review-order-table .cart_item .product-name,
.woocommerce-checkout-review-order-table .product-name a,
.woocommerce-checkout-review-order-table .product-name .product-quantity {
  color: #F4C025 !important;
}

/* ── Passos do checkout (SHOPPING CART › CHECKOUT DETAILS › ORDER COMPLETE) — legíveis no dark ──
   O Flatsome colore o passo .current com tom escuro (p/ fundo claro) → some no preto.
   Passo atual = âmbar (destaque); demais = cinza legível; divisor discreto. */
.checkout-breadcrumbs a,
.checkout-breadcrumbs a.no-click {
  color: #9A968F !important;
  opacity: 1 !important;
}
.checkout-breadcrumbs a.current {
  color: #F4C025 !important;
  opacity: 1 !important;
}
.checkout-breadcrumbs .divider {
  color: #4A4640 !important;
}

/* ── Checkout/account form: LABELS + SELECT2 legíveis no dark ──
   Inputs já ficam dark+branco; faltavam os labels (herdavam cor escura do
   Flatsome) e o texto do select2 (Country / State). */
.woocommerce form .form-row label,
.woocommerce-checkout .form-row label,
.woocommerce-billing-fields label,
.woocommerce-shipping-fields label,
.woocommerce-additional-fields label,
.woocommerce-account .woocommerce-form-row label,
.woocommerce-EditAccountForm label,
.woocommerce form.checkout label {
  color: #C9C5BE !important;
}
/* Select2 (Country / State): valor exibido, placeholder e opções do dropdown */
.woocommerce .select2-container .select2-selection__rendered { color: var(--ny-white) !important; }
.woocommerce .select2-container .select2-selection__placeholder { color: var(--nysub-gray) !important; }
.select2-container--open .select2-dropdown,
.select2-results { background-color: var(--nysub-ivory) !important; border-color: var(--nysub-rule) !important; }
.select2-results__option { color: var(--ny-white) !important; }
.select2-results__option--highlighted,
.select2-results__option--highlighted[aria-selected] { background-color: #F4C025 !important; color: #0A0A0B !important; }
.select2-search--dropdown .select2-search__field {
  background-color: #0F0F10 !important; color: var(--ny-white) !important; border-color: var(--nysub-rule) !important;
}

/* === Vistoria 21/07 — avatar iniciais + tabela downloads mobile === */
.nysub-avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--nysub-rose-dark);
  color: #0A0A0B;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.02em;
}
.account-user .nysub-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; }