/*
Theme Name: Fancy Yellow
Theme URI: https://fancyyellow.com.br
Author: Fancy Yellow Studio
Description: Tema oficial da loja Fancy Yellow — moda fitness premium feminina. Alta tecnologia têxtil com elegância atemporal.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
WC tested up to: 9.0
Requires PHP: 7.4
License: Proprietary
Text Domain: fancy-yellow
*/

/* ── VARIABLES ─────────────────────────────────────── */
:root {
  --yellow:      #E8E080;
  --yellow-mid:  #D4CC60;
  --yellow-dark: #C8BE40;
  --yellow-pale: #F4F0C4;
  --dark:        #1A1008;
  --dark-warm:   #2C1E10;
  --ink:         #2A2010;
  --gray:        #7A7060;
  --gray-light:  #C8C0B0;
  --cream:       #F5F0E8;
  --cream-2:     #EDE8DC;
  --cream-3:     #E4DDD0;
  --white:       #FDFBF7;
  --font-serif:  'EB Garamond', Georgia, serif;
  --font-sans:   'Inter', sans-serif;
}

/* ── RESET ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Override WordPress error-page inline styles */
html {
  background: var(--cream) !important;
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-serif) !important;
  background: var(--cream) !important;
  color: var(--dark) !important;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* ── ANNOUNCEMENT ──────────────────────────────────── */
.announcement {
  background: var(--dark);
  color: var(--yellow);
  text-align: center;
  padding: 9px 20px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ── NAV ───────────────────────────────────────────── */
nav.site-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--cream);
  border-bottom: 1px solid rgba(28,16,8,0.1);
}
.nav-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 56px;
  height: 64px;
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
}
.nav-links-left, .nav-links-right {
  display: flex; gap: 36px; align-items: center;
  flex: 1;
}
.nav-links-right { justify-content: flex-end; }
.nav-links-left ul,
.nav-links-right ul {
  list-style: none;
  display: flex; gap: 36px; align-items: center;
  margin: 0; padding: 0;
}
.nav-links-left ul li a,
.nav-links-right ul li a,
.nav-link {
  font-family: var(--font-sans);
  font-size: 10px; font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.65;
  transition: opacity 0.2s;
}
.nav-links-left ul li a:hover,
.nav-links-right ul li a:hover,
.nav-link:hover,
.nav-links-left ul li.current-menu-item > a,
.nav-links-right ul li.current-menu-item > a { opacity: 1; }
.nav-logo {
  font-family: var(--font-serif);
  font-size: 21px; font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--dark);
}
.nav-action {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.65;
  transition: opacity 0.2s;
  cursor: pointer;
}
.nav-action:hover { opacity: 1; }
.nav-cart-btn {
  background: var(--dark);
  color: var(--cream) !important;
  padding: 9px 18px;
  opacity: 1 !important;
  transition: background 0.2s !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-cart-btn:hover { background: var(--yellow-dark) !important; color: var(--dark) !important; }
.cart-count {
  background: var(--yellow);
  color: var(--dark);
  font-size: 9px; font-weight: 600;
  padding: 1px 6px;
  border-radius: 20px;
  min-width: 18px;
  text-align: center;
}

/* ── FOOTER ────────────────────────────────────────── */
.site-footer {
  background: var(--dark-warm);
  padding: 72px 7% 40px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  max-width: 1600px; margin: 0 auto;
}
.footer-logo {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--white);
  margin-bottom: 14px;
  letter-spacing: 0.06em;
}
.footer-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  line-height: 1.7;
  max-width: 200px;
  margin-bottom: 28px;
}
.footer-socials { display: flex; gap: 10px; }
.footer-s {
  width: 32px; height: 32px;
  border: 1px solid rgba(255,255,255,0.28);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans);
  font-size: 9.5px; font-weight: 500;
  color: rgba(255,255,255,0.65);
  cursor: pointer; transition: all 0.25s;
}
.footer-s:hover { border-color: var(--yellow); color: var(--yellow); }
.footer-col-title {
  font-family: var(--font-sans);
  font-size: 9px; letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  margin-bottom: 20px;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-links li { list-style: none; }
.footer-links a {
  font-family: var(--font-serif);
  font-size: 14px; font-style: italic;
  color: rgba(255,255,255,0.78);
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--yellow); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 32px;
  max-width: 1600px; margin: 0 auto;
}
.footer-copy {
  font-family: var(--font-sans);
  font-size: 10px;
  color: rgba(255,255,255,0.68);
  letter-spacing: 0.06em;
}
.footer-pay { display: flex; gap: 6px; }
.pay-badge {
  background: rgba(255,255,255,0.1);
  padding: 4px 9px;
  font-family: var(--font-sans);
  font-size: 8.5px; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}

/* ── HAMBURGER / MOBILE NAV ────────────────────────── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px; height: 16px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  width: 100%; height: 1.5px;
  background: var(--dark);
  transition: transform 0.28s ease, opacity 0.2s, transform-origin 0.28s;
  transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7.25px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7.25px) rotate(-45deg); }

.nav-mobile {
  position: fixed;
  top: 0; right: 0;
  width: min(340px, 88vw);
  height: 100vh; /* fallback */
  height: 100dvh;
  background: var(--cream);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 32px rgba(26,16,8,0.12);
}
.nav-mobile.open { transform: translateX(0); }
.nav-mobile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(28,16,8,0.08);
  flex-shrink: 0;
}
.nav-mobile-logo {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--dark);
  letter-spacing: 0.06em;
  text-decoration: none;
}
.nav-mobile-close {
  background: none;
  border: none;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  color: var(--dark);
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.2s;
  padding: 0;
}
.nav-mobile-close:hover { opacity: 1; }
.nav-mobile-links {
  list-style: none;
  padding: 20px 24px 0;
  margin: 0;
  flex: 1;
}
.nav-mobile-links li { border-bottom: 1px solid rgba(28,16,8,0.06); }
.nav-mobile-links li:last-child { border-bottom: none; }
.nav-mobile-links li a {
  display: block;
  padding: 14px 0;
  font-family: var(--font-serif);
  font-size: 21px;
  font-style: italic;
  color: var(--dark);
  opacity: 0.8;
  transition: opacity 0.2s, padding-left 0.2s;
}
.nav-mobile-links li a:hover,
.nav-mobile-links li a[aria-current="page"] { opacity: 1; padding-left: 8px; }
/* ── Mobile footer — premium redesign ─────────────── */
.nav-mobile-footer {
  padding: 24px 24px 40px;
  border-top: 1px solid rgba(28,16,8,0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  background: var(--cream);
}
/* Saudação visitante */
.nav-mob-greeting {
  font-family: var(--font-serif);
  font-size: 13px;
  font-style: italic;
  color: var(--ink);
  opacity: 0.5;
  margin: 0 0 4px;
  padding: 0;
}
/* CTA principal — "Criar Conta" ou "Sacola" logada */
.nav-mob-cta {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px !important;
  background: var(--dark) !important;
  color: var(--yellow) !important;
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
  transition: background 0.2s !important;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.nav-mob-cta:hover { background: var(--dark-warm) !important; }
.nav-mob-cta .cart-count {
  background: var(--yellow);
  color: var(--dark);
}
/* Link secundário */
.nav-mob-link {
  display: block !important;
  text-align: center;
  padding: 10px 0 !important;
  font-family: var(--font-sans) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  opacity: 0.5 !important;
  border-bottom: 1px solid rgba(28,16,8,0.07) !important;
  transition: opacity 0.2s !important;
}
.nav-mob-link:hover { opacity: 1 !important; }
/* Linha separadora */
.nav-mob-divider {
  height: 1px;
  background: rgba(28,16,8,0.07);
  margin: 4px 0;
}
/* Linha da sacola (visitante) */
.nav-mob-cart-row {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 10px 0 !important;
  font-family: var(--font-sans) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  opacity: 0.55 !important;
  transition: opacity 0.2s !important;
}
.nav-mob-cart-row:hover { opacity: 1 !important; }
.nav-mob-cart-row .cart-count {
  margin-left: auto;
}
/* Avatar (usuária logada) */
.nav-mob-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(28,16,8,0.07);
  margin-bottom: 4px;
}
.nav-mob-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--dark);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nav-mob-username {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--dark);
  font-style: italic;
}
/* Sair */
.nav-mob-exit {
  display: block !important;
  text-align: center;
  padding: 8px 0 !important;
  font-family: var(--font-sans) !important;
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  opacity: 0.28 !important;
  transition: opacity 0.2s !important;
}
.nav-mob-exit:hover { opacity: 0.7 !important; }
.nav-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26,16,8,0.5);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
}
.nav-mobile-overlay.active { opacity: 1; pointer-events: all; }

/* ═══════════════════════════════════════════════════
   ELEMENTOR — COMPATIBILIDADE COMPLETA
   Mapeia as variáveis CSS do tema para o sistema do
   Elementor, garantindo que cores, fontes e espaçamentos
   sejam consistentes ao editar com o page builder.
   ═══════════════════════════════════════════════════ */

/* Elementor Global Colors → Paleta Fancy Yellow */
:root {
  /* Cores globais que aparecem no painel do Elementor */
  --e-global-color-primary:    #1A1008; /* = var(--dark)       */
  --e-global-color-secondary:  #E8E080; /* = var(--yellow)     */
  --e-global-color-text:       #2A2010; /* = var(--ink)        */
  --e-global-color-accent:     #C8BE40; /* = var(--yellow-dark)*/
  /* Extras acessíveis em Custom CSS do Elementor */
  --e-global-color-cream:      #F5F0E8;
  --e-global-color-dark-warm:  #2C1E10;
  --e-global-color-gray:       #7A7060;

  /* Fontes globais Elementor */
  --e-global-typography-primary-font-family:   'EB Garamond';
  --e-global-typography-secondary-font-family: 'Inter';
  --e-global-typography-text-font-family:      'EB Garamond';
  --e-global-typography-accent-font-family:    'Inter';
}

/* Elementor: garante que o container principal respeita o layout do tema */
.elementor-section-wrap,
.elementor-widget-wrap { position: relative; }

/* Elementor Full Width — remove margens do site wrapper */
body.elementor-page .site-content,
body.elementor-page main {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

/* Quando Elementor Canvas (sem header/footer) */
body.elementor-template-canvas .announcement,
body.elementor-template-canvas .site-nav,
body.elementor-template-canvas .site-footer {
  display: none !important;
}

/* Elementor: tipografia padrão para widgets de texto */
.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.85;
  color: var(--ink);
}
.elementor-heading-title {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--dark);
}

/* Elementor: botões com estilo Fancy Yellow */
.elementor-button {
  font-family: var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 11px;
  border-radius: 0;
}
.elementor-button-wrapper .elementor-button {
  transition: background 0.2s, color 0.2s;
}

/* Elementor: seções com fundo escuro herdam cor de texto correta */
.elementor-section.fy-dark-bg,
.e-con.fy-dark-bg {
  background-color: var(--dark);
  color: var(--cream);
}
.elementor-section.fy-yellow-bg,
.e-con.fy-yellow-bg {
  background-color: var(--yellow);
  color: var(--dark);
}
.elementor-section.fy-cream-bg,
.e-con.fy-cream-bg {
  background-color: var(--cream-2);
  color: var(--dark);
}

/* Elementor: grid de produtos WooCommerce */
.elementor-widget-woocommerce-products .products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* Elementor Pro: garante que o header/footer do tema apareçam
   quando Elementor usa "Theme" como localização */
body.fy-elementor-page .announcement { display: block; }
body.fy-elementor-page nav.site-nav  { display: block; }
body.fy-elementor-page .site-footer  { display: block; }

/* Elementor editor: força preview correto das fontes do tema */
.elementor-editor-active body,
.elementor-editor-preview  body {
  font-family: var(--font-serif);
}

/* ── REVEAL ────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal.visible { opacity: 1; transform: none; }

/* ── WOOCOMMERCE NOTICES ───────────────────────────── */
.woocommerce-notices-wrapper {
  max-width: 1400px; margin: 20px auto; padding: 0 40px;
}
.woocommerce-message {
  background: var(--cream-2);
  border-top: 3px solid var(--yellow-dark);
  padding: 16px 20px;
  font-family: var(--font-serif);
  font-size: 15px;
  display: flex; align-items: center; gap: 16px;
}
.woocommerce-message .button {
  background: var(--dark); color: var(--cream);
  padding: 8px 18px;
  font-family: var(--font-sans);
  font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase;
  border: none; cursor: pointer;
}

/* ── WC CART / CHECKOUT ────────────────────────────── */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-account .entry-content {
  max-width: 1100px; margin: 60px auto; padding: 0 40px;
}
.woocommerce table.shop_table {
  font-family: var(--font-serif);
  font-size: 15px;
  border-collapse: collapse; width: 100%;
}
.woocommerce table.shop_table th {
  font-family: var(--font-sans);
  font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
  padding: 12px 16px;
  border-bottom: 1px solid rgba(26,16,8,0.1);
  font-weight: 400;
}
.woocommerce table.shop_table td {
  padding: 16px;
  border-bottom: 1px solid rgba(26,16,8,0.08);
  vertical-align: middle;
}
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background: var(--dark);
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 28px;
  border: none; cursor: pointer;
  border-radius: 0;
  transition: background 0.2s;
}
.woocommerce .button:hover,
.woocommerce button.button:hover { background: var(--yellow-dark); color: var(--dark); }
.woocommerce .button.alt,
.woocommerce button.button.alt { background: var(--yellow); color: var(--dark); }
.woocommerce .button.alt:hover { background: var(--yellow-dark); }

/* WC form fields */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  border: 1px solid rgba(26,16,8,0.15);
  padding: 12px 16px;
  background: var(--cream);
  color: var(--dark);
  border-radius: 0;
  outline: none;
  width: 100%;
  transition: border-color 0.2s;
}
.woocommerce form .form-row input.input-text:focus { border-color: var(--yellow-dark); }
.woocommerce form .form-row label {
  font-family: var(--font-sans);
  font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray);
}

/* ── RESPONSIVE ────────────────────────────────────── */
@media (max-width: 1024px) {
  .nav-top {
    padding: 0 16px;
    /* quick icons + hamburger on the right; logo absolute-centered */
    justify-content: flex-end;
    gap: 0;
  }
  .nav-links-left, .nav-links-right { display: none !important; }
  .nav-hamburger { display: flex !important; }
  /* Logo centered absolutely so it doesn't affect right-side flex items */
  .nav-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: auto;
  }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 600px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 16px; align-items: flex-start; }
}