/* =========================================================
   GR JOIAS — design tokens
   ========================================================= */
:root{
  --bg-deep:      #120B07;   /* marrom bem mais escuro, mas ainda forte/quente — não preto chapado */
  --bg-panel:     #1E1610;
  --bg-panel-2:   #281D14;
  --gold:         #D9A62B;   /* dourado forte e saturado (era mais pálido/champagne antes) */
  --gold-light:   #F4C752;   /* dourado vivo, brilhante — usado em títulos e destaques */
  --gold-soft:    #A87C24;   /* dourado mais escuro, pra sombra/contraste */
  --gold-line:    rgba(217,166,43,0.85);
  --champagne:    #DCC79A;   /* tom intermediário entre creme e dourado — pra títulos e hover, sem ser nem "branco" nem "muito dourado" */
  --cream:        #F4EADA;
  --cream-dim:    rgba(244,234,218,0.68);
  --cream-faint:  rgba(244,234,218,0.42);
  --shadow-deep:  0 30px 60px -25px rgba(0,0,0,0.55);

  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'Jost', sans-serif;

  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
body{
  margin:0;
  background: var(--bg-deep);
  color: var(--cream);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
img{ max-width:100%; display:block; }

::selection{ background: var(--gold); color:#231A12; }

/* =========================================================
   TOPBAR
   ========================================================= */
.topbar{
  background: var(--bg-panel);
  border-bottom: 1px solid var(--gold-line);
  font-size: .85rem;
  letter-spacing: .04em;
}
.topbar__inner{
  max-width: 1440px;
  margin: 0 auto;
  padding: 1rem 2rem;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 1rem;
}
.topbar__left, .topbar__right{
  display:flex;
  align-items:center;
  gap: 1.6rem;
}
.topbar__left li, .topbar__right li{
  display:flex;
  align-items:center;
  gap:.4rem;
  color: var(--cream-dim);
  white-space: nowrap;
}
.topbar__right li{ cursor:pointer; transition: color .25s var(--ease); }
.topbar__right li:hover{ color: var(--gold-light); }

.icon{ width:18px; height:18px; display:inline-block; flex:0 0 auto; }
.icon--diamond{ background: conic-gradient(from 45deg, var(--gold), var(--gold-light), var(--gold)); clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); }
.icon--truck{ border:1px solid var(--gold); border-radius:2px; position:relative; }
.icon--card{ border:1px solid var(--gold); border-radius:2px; }
.icon--card::after{ content:""; display:block; width:100%; height:4px; background: var(--gold); margin-top:3px; }
.topbar__whats{ font-weight:500; color: var(--gold-light) !important; }

/* "Fale Conosco" — texto + seta + ícones de WhatsApp/Instagram dourados */
.topbar__contact{ display:flex; align-items:center; gap:.5rem; }
.topbar__contact-label{ white-space:nowrap; }
.topbar__contact-arrow{
  width:16px; height:16px; flex:0 0 auto;
  color: var(--gold);
  opacity:.85;
}
.topbar__social-link{
  display:flex; align-items:center; justify-content:center;
  color: var(--gold-light);
  transition: color .25s var(--ease), transform .25s var(--ease);
}
.topbar__social-link:hover{ color: var(--gold); transform: scale(1.12); }
.icon--whats-logo, .icon--insta-logo{ width:18px; height:18px; flex:0 0 auto; }

.topbar__bag{
  display:flex; align-items:center; justify-content:center;
  color: var(--gold-light);
}
.bag-icon { width: 34px; height: 34px; color: var(--gold-light); transition: transform 0.3s var(--ease); /* Diz para a animação ser suave */ }
.topbar__bag:hover .bag-icon { transform: scale(1.15); /* Aumenta o tamanho em 15% */ }
.mono-big{ font-family: var(--font-display); font-size: 15px; font-weight:600; }
.mono-small{ font-family: var(--font-display); font-size: 9px; font-weight:500; }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: var(--bg-panel-2);
  border-bottom: 1px solid var(--gold-line);
  transition: padding .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header.is-scrolled{
  background-color: rgba(40,29,20,0.94);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-deep);
}
.site-header__inner{
  max-width:1440px; margin:0 auto;
  padding: 1.1rem 2rem;
  display:flex; align-items:center; justify-content:space-between;
  gap: 2rem;
  transition: padding .35s var(--ease);
}
.site-header.is-scrolled .site-header__inner{ padding: .6rem 2rem; }

.brand{ display:flex; align-items:center; gap:.65rem; flex:0 0 auto; }
.brand__crest{ width:38px; height:38px; color: var(--gold); }
.brand__crest-text{ font-size:15px; }
.brand__name{
  font-family: var(--font-display);
  font-size: 1.7rem;
  letter-spacing:.02em;
  color: var(--cream);
}
.brand__name em{ font-style:normal; color: var(--gold-light); }

.mainnav {
  display: flex; flex-wrap: wrap;
  gap: 1.2rem;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  justify-content: center;
}
.mainnav .nav-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  position: relative; color: #C39A47;
  transition: color .25s var(--ease);
}
.mainnav .nav-item::after { display: none; } /* Remove aquela linha antiga de baixo */
.nav-icon {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.3;
  transition: transform .3s var(--ease), stroke-width .3s var(--ease);
}
.mainnav .nav-item:hover { color: var(--champagne); }
.mainnav .nav-item:hover .nav-icon { 
  transform: translateY(-3px); 
  stroke-width: 1.8;
}
/* Especificidade igual ou maior que ".mainnav .nav-item" — senão o
   "display:flex" genérico dos itens vence e eles reaparecem no desktop */
.mainnav .nav-item.mobile-only-nav,
.mainnav .nav-item--toggle{ display:none; }
/* No desktop isso é "invisível": as categorias ficam direto na fileira,
   exatamente como sempre foram */
.nav-submenu{ display:contents; }
.header__actions{ display:flex; align-items:center; gap:1rem; }
.icon-btn{
  background:none; border:1px solid var(--gold-line); color: var(--gold-light);
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.icon-btn:hover{ border-color: var(--gold); transform: scale(1.06); }

.gr-inicio-btn{
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--gold-light); text-decoration: none;
  font-size: .8rem; letter-spacing: .03em;
  border: 1px solid var(--gold-line); border-radius: 999px;
  padding: 7px 14px; flex: 0 0 auto;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.gr-inicio-btn svg{ width: 15px; height: 15px; flex: 0 0 auto; }
.gr-inicio-btn:hover{ border-color: var(--gold); color: var(--gold); }

.hamburger{
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:6px;
}
.hamburger span{ width:22px; height:1.5px; background: var(--gold-light); border-radius:2px; }

/* =========================================================
   HERO
   ========================================================= */
.hero{ padding: 3.5rem 2rem 1rem; max-width:1440px; margin:0 auto; }
.hero__frame{ position:relative; border-radius: 4px; overflow:hidden; }

.hero__media{
  height: 62vh; min-height: 380px; max-height:640px;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(217,166,43,0.10), transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(217,166,43,0.08), transparent 55%),
    linear-gradient(135deg, var(--bg-panel-2), var(--bg-deep) 70%);
  border: 1px solid var(--gold-line);
  position: relative;
}
.hero__media--empty::before{
  content:""; position:absolute; inset:0;
  background-image: repeating-linear-gradient(135deg, rgba(217,166,43,0.05) 0 2px, transparent 2px 26px);
}
.placeholder-tag{
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  color: var(--cream-faint);
  text-align:center; padding: 0 2rem;
  font-size: .8rem; letter-spacing:.03em;
}
.placeholder-tag svg{ color: var(--gold-soft); }

.hero__title{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: .6rem; pointer-events:none;
}
.hero__eyebrow{
  font-size: .78rem; letter-spacing:.35em; text-transform:uppercase;
  color: var(--gold-light);
}
.hero__title h1{
  font-family: var(--font-display);
  font-weight:400; font-style: italic;
  font-size: clamp(4rem, 12vw, 9rem);
  margin:0; color: var(--cream);
  text-shadow: 0 4px 40px rgba(0,0,0,0.5);
}
.hero__link{
  pointer-events:all;
  font-size:.85rem; letter-spacing:.08em;
  color: var(--gold-light);
  border-bottom: 1px solid var(--gold-line);
  padding-bottom:2px;
  transition: border-color .25s var(--ease), letter-spacing .25s var(--ease);
}
.hero__link span{ display:inline-block; transition: transform .25s var(--ease); }
.hero__link:hover{ border-color: var(--gold-light); letter-spacing:.14em; }
.hero__link:hover span{ transform: translateX(4px); }

/* =========================================================
   SHOWCASE / PRODUCT GRID
   ========================================================= */
.showcase{ max-width:1440px; margin:0 auto; padding: 5.5rem 2rem 6rem; text-align:center; }
.showcase__title{
  font-family: var(--font-display);
  font-weight:500;
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  letter-spacing:.04em;
  margin: 0 0 .6rem;
  color: var(--gold-light);
}
.showcase__sub{
  color: var(--gold-soft);
  font-size:.92rem; letter-spacing:.02em;
  margin: 0 0 3rem;
}

.product-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
  text-align:left;
}

.product-card{
  background: var(--bg-panel);
  border: 1px solid var(--gold-line);
  border-radius: 3px;
  overflow:hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.product-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-deep);
  border-color: var(--gold);
}

.product-card__media{
  position:relative;
  aspect-ratio: 1 / 1;
  overflow:hidden;
  background: linear-gradient(150deg, var(--bg-panel-2), var(--bg-deep));
}
.face{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem;
  color: var(--cream-faint);
  font-size:.72rem; letter-spacing:.03em; text-align:center; padding: 1rem;
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.face--front{ opacity:1; transform: scale(1); color: var(--gold-soft); }
.face--front svg{ color: var(--gold); }
.face--back{
  opacity:0; transform: scale(1.06);
  background:
    radial-gradient(circle at 50% 30%, rgba(217,166,43,0.14), transparent 60%),
    linear-gradient(150deg, #281D14, #120B07);
  color: var(--gold-light);
}
.product-card:hover .face--front{ opacity:0; transform: scale(1.04); }
.product-card:hover .face--back{ opacity:1; transform: scale(1); }

.product-card__info{ padding: 1.1rem 1.15rem 1.4rem; }
.tag{
  display:inline-block;
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--bg-panel-2); background: var(--gold-light);
  padding: .18rem .55rem; border-radius: 2px; margin-bottom: .6rem;
}
.product-card__name{
  margin: 0 0 .5rem;
  font-size: .88rem; line-height:1.4;
  color: var(--cream-dim);
  min-height: 2.5em;
}
.stars{ color: var(--gold); font-size: .78rem; letter-spacing:2px; margin-bottom:.55rem; opacity:.85; }
.product-card__price{
  margin:0; font-weight:600; font-size:1rem; color: var(--gold-light);
}
.product-card__price--old{
  margin:.15rem 0 0; font-size:.78rem; color: var(--cream-faint); text-decoration: line-through;
}

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal{
  opacity:0; transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible{ opacity:1; transform: translateY(0); }
.product-grid .product-card.reveal:nth-child(1){ transition-delay: .05s; }
.product-grid .product-card.reveal:nth-child(2){ transition-delay: .15s; }
.product-grid .product-card.reveal:nth-child(3){ transition-delay: .25s; }
.product-grid .product-card.reveal:nth-child(4){ transition-delay: .35s; }


/* =========================================================
   RESPONSIVE
   ========================================================= */

/* ---- Desktop pequeno / tablet grande (deitado) ---- */

/* ---- Tablet (deitado): vitrine passa para 3 colunas ---- */

/* ---- Tablet (retrato) e abaixo: menu vira hambúrguer, topbar some ---- */

/* ---- Tablet (retrato) ~768px: ajustes finos de header/hero ---- */

/* ---- Celular (padrão) ---- */

/* ---- Celular pequeno (iPhone SE, Android compactos) ---- */

/* =========================================================
   MENUS SUSPENSOS — versão mobile (evita vazar da tela)
   ========================================================= */


/* =========================================================
   MENUS SUSPENSOS (MINHA CONTA E SACOLA)
   ========================================================= */
.topbar__dropdown-wrap { position: relative; }

.dropdown-panel {
  position: absolute;
  top: calc(100% + 15px); /* Dá uma distância do botão */
  right: -10px; /* Alinha pelo lado direito */
  background: var(--bg-panel);
  border: 1px solid var(--gold-line);
  padding: 1.2rem;
  min-width: 200px;
  border-radius: 3px;
  box-shadow: var(--shadow-deep);
  
  /* Animação Inicial (Invisível e um pouco para baixo) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: all 0.35s var(--ease);
  z-index: 100;
  cursor: default;
}

/* Quando o painel for ativado pelo JS */
.dropdown-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-panel ul { display: flex; flex-direction: column; gap: 10px; }
.dropdown-panel a { font-size: 0.8rem; color: var(--cream-dim); transition: color 0.2s; }
.dropdown-panel a:hover { color: var(--gold-light); }
/* O link "Finalizar Compra" é um botão sólido (.btn-card--solid), não um
   link comum do menu — sem isso, a regra genérica acima ("dropdown-panel a")
   ganhava por especificidade e deixava o texto quase invisível. */
.dropdown-panel a.btn-card--solid,
.dropdown-panel a.btn-card--solid:hover{ color: var(--bg-panel-2); }


/* =========================================================
   BOTÕES DO PRODUTO (HOVER)
   ========================================================= */
.product-card__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 0.5rem;
}

.action-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
  
  /* Animação Inicial dos Botões */
  opacity: 0;
  transform: translateX(15px); /* Começam um pouco para a direita */
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

/* Quando passa o mouse no card, a magia acontece */
.product-card:hover .action-block {
  opacity: 1;
  transform: translateX(0); /* Voltam para o lugar original */
}

/* Em telas de toque (celular/tablet) não existe hover — os botões
   precisam ficar sempre visíveis, senão ninguém consegue comprar */

.btn-card {
  background: transparent;
  border: 1px solid var(--gold-line);
  color: var(--gold-light);
  padding: 6px 12px;
  font-size: 0.65rem;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  border-radius: 2px;
}

.btn-card:hover { border-color: var(--gold); color: var(--gold); }

/* O botão "Comprar" tem um fundo sólido */
.btn-card--solid {
  background: var(--gold);
  color: var(--bg-panel-2);
  border-color: var(--gold);
  font-weight: 500;
}
.btn-card--solid:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: var(--bg-panel-2);
}

/* =========================================================
   ATALHOS DO HEADER AO ROLAR A PÁGINA
   ========================================================= */
.header-quick-access {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: all 0.35s var(--ease);
  pointer-events: none;
}

/* Quando a página rola e o header ganha a classe .is-scrolled */
.site-header.is-scrolled .header-quick-access {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.quick-account:hover {
  color: var(--gold-light);
}

.quick-bag svg {
  transition: transform 0.3s var(--ease);
}

.quick-bag:hover svg {
  transform: scale(1.12);
}

/* =========================================================
   EFEITO DE HOVER DOURADO (TEXTOS DO MENU)
   ========================================================= */
.hover-gold {
  transition: color 0.3s var(--ease);
}
.topbar__dropdown-wrap:hover .hover-gold {
  color: var(--gold-light) !important;
}

/* =========================================================
   CONTADOR DA SACOLA
   ========================================================= */
.cart-counter {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--gold);
  color: var(--bg-panel-2); /* Cor escura para o número dar contraste */
  font-size: 0.65rem;
  font-weight: 600;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--bg-panel); /* Cria um contorno escuro em volta da bolinha */
  pointer-events: none; /* Para não atrapalhar o clique na sacola */
  transition: transform 0.2s var(--ease);
}


/* Quando só existe 1 opção de frete disponível (sem cupom de frete
   grátis disputando espaço com a Taxa Fixa), esconde o botão de
   seleção (radio) e mostra só o texto com o valor, sem parecer clicável */
ul#shipping_method li:only-child input[type="radio"] {
  display: none;
}
ul#shipping_method li:only-child label {
  cursor: default;
}


/* =========================================================
   TODAS AS REGRAS RESPONSIVAS (@media) FICAM AQUI NO FINAL
   DE PROPÓSITO — assim elas SEMPRE vencem qualquer regra base
   de mesma especificidade, não importa onde a regra base esteja
   definida lá em cima. Isso evita bugs de "conserto que some".
   ========================================================= */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .product-card, .face, .hero__link, .icon-btn{ transition:none; }
}

@media (max-width: 1180px){
  .site-header__inner{ gap: 1.2rem; }
  .mainnav{ gap: .9rem; }
}

@media (max-width: 1100px){
  .product-grid{ grid-template-columns: repeat(3, 1fr); }
  .topbar__left li:nth-child(2), .topbar__left li:nth-child(3){ display:none; }
}

@media (max-width: 1024px){
  /* A topbar de cima (Frete/10x/Fale Conosco/Minha Conta) some;
     tudo isso passa a viver dentro do cabeçalho único + hambúrguer */
  .topbar{ display: none; }

  .mainnav{
    position:absolute; top:100%; left:0; right:0;
    background: var(--bg-panel);
    flex-direction:column; gap:0;
    max-height:0; overflow:hidden; overflow-y:auto;
    border-bottom: 1px solid var(--gold-line);
    transition: max-height .4s var(--ease);
    z-index: 60;
  }
  .mainnav.is-open{ max-height:80vh; }
  .mainnav .nav-item{
    flex-direction: row; justify-content: flex-start; gap: .8rem;
    width: 100%; padding: .9rem 1.5rem; border-top: 1px solid var(--gold-line);
  }
  .mainnav .nav-item.mobile-only-nav,
  .mainnav .nav-item--toggle{ display:flex; }
  .nav-icon{ width:20px; height:20px; flex:0 0 auto; }
  .hamburger{ display:flex; }

  /* "Produtos" é um item clicável que abre/fecha a lista de categorias */
  .nav-item--toggle{
    justify-content: space-between;
    cursor: pointer;
    background: none; border: none; color: var(--cream-dim);
    font: inherit; text-transform: inherit; letter-spacing: inherit;
    width: 100%;
  }
  .nav-icon--chevron{ transition: transform .3s var(--ease); }
  .nav-item--toggle[aria-expanded="true"] .nav-icon--chevron{ transform: rotate(180deg); }

  /* As categorias viram um submenu dentro de "Produtos". Importante:
     NÃO anima altura aqui (sem transition de max-height). Fazer isso
     dentro de outro menu que TAMBÉM anima altura (o hambúrguer
     principal) causa um bug conhecido em alguns celulares: o conteúdo
     fica "invisível" até a tela ser rolada, mesmo already estando no
     lugar certo. Abrir/fechar na hora (sem animação suave) é bem mais
     confiável do que arriscar esse bug. */
  .nav-submenu{
    display: none;
    background: rgba(0,0,0,0.18);
  }
  .nav-submenu.is-open{ display: block; }
  .nav-submenu .nav-item{ padding-left: 2.4rem; }

  /* "Fale Conosco" no menu do celular: texto + os dois ícones (zap/insta) */
  .nav-item--contact{ justify-content: space-between; }
  .nav-item--contact-links{ display:flex; align-items:center; gap: 1.1rem; flex:0 0 auto; }
  .nav-item--contact-links a{
    display:flex; align-items:center; justify-content:center;
    color: var(--gold-light);
  }
  .nav-item--contact-links .icon--whats-logo,
  .nav-item--contact-links .icon--insta-logo{ width:22px; height:22px; }

  /* Cabeçalho único: logo + busca + sacola + hambúrguer, tudo numa linha só,
     bem enxuto, sem espaços fantasmas */
  .site-header__inner{ flex-wrap:nowrap; gap:.5rem; padding: .7rem 1rem; }
  .header__actions{ gap:.4rem; }
  .brand__name{ font-size: 1.25rem; }
  .brand__crest{ width: 30px; height: 30px; }
  .icon-btn{ width: 34px; height: 34px; }

  /* A sacola some do "aparece só ao rolar" e passa a ficar sempre visível;
     "Minha Conta" desse bloco some (já está dentro do hambúrguer agora) */
  .header-quick-access{
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    gap: 0;
  }
  .header-quick-access > div:not(.topbar__bag){ display:none !important; }
  .header-quick-access .bag-icon{ width: 24px; height: 24px; }

  .product-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   CHECKOUT WOOCOMMERCE & ASAAS (ESTILIZAÇÃO)
   ========================================================= */

/* Tira o fundo cinza padrão da caixa inteira de pagamentos */
.woocommerce-checkout #payment {
    background: transparent !important;
}

/* Estiliza as caixas de dentro (Onde digita o Cartão / Info do Pix) */
.woocommerce-checkout #payment div.payment_box {
    background-color: var(--bg-panel) !important;
    border: 1px solid var(--gold-line) !important;
    color: var(--cream-dim) !important;
    border-radius: 3px !important;
    box-shadow: var(--shadow-deep) !important;
}

/* Pinta a "setinha" do balão do Asaas que aponta para cima */
.woocommerce-checkout #payment div.payment_box::before {
    border-bottom-color: var(--gold-line) !important;
}

/* Garante que os rótulos (labels) do cartão fiquem clarinhos */
.woocommerce-checkout #payment div.payment_box label {
    color: var(--cream-dim) !important;
}

/* Estiliza os inputs (campos de digitar) de dentro do Asaas */
.woocommerce-checkout #payment div.payment_box input[type="text"],
.woocommerce-checkout #payment div.payment_box input[type="tel"],
.woocommerce-checkout #payment div.payment_box select {
    background-color: var(--bg-deep) !important;
    border: 1px solid var(--gold-line) !important;
    color: var(--cream) !important;
    border-radius: 2px !important;
    padding: 10px !important;
}

/* Quando foca no input do cartão */
.woocommerce-checkout #payment div.payment_box input[type="text"]:focus {
    border-color: var(--gold) !important;
    outline: none !important;
}

/* Personaliza o botão final para seguir sua classe .btn-card--solid */
.woocommerce-checkout #payment #place_order {
    background-color: var(--gold) !important;
    color: var(--bg-panel-2) !important;
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    border: none !important;
    border-radius: 2px !important;
    padding: 15px 20px !important;
    transition: all 0.3s var(--ease) !important;
}

.woocommerce-checkout #payment #place_order:hover {
    background-color: var(--gold-light) !important;
}

@media (max-width: 800px){
  .site-header__inner{ padding: .9rem 1.4rem; }
  .hero{ padding: 2.6rem 1.4rem 0; }
  .hero__media{ height: 50vh; min-height: 340px; }
  .showcase{ padding: 4rem 1.4rem 5rem; }
}

@media (max-width: 640px){
  .topbar__inner{ padding: .55rem 1.1rem; }
  .topbar__left{ display:none; }
  .topbar__right{ gap:1rem; font-size:.68rem; width:100%; justify-content:space-between; }
  .site-header__inner{ padding: .7rem .9rem; }
  .brand__name{ font-size:1.35rem; }
  .brand__crest{ width:32px; height:32px; }
  .header__actions{ gap:.4rem; }
  .icon-btn{ width:34px; height:34px; }
  .gr-inicio-btn span{ display:none; }
  .gr-inicio-btn{ padding: 8px; border-radius: 50%; }
  .gr-inicio-btn svg{ width: 16px; height: 16px; }

  .hero{ padding: 2rem 1.1rem 0; }
  .hero__media{ height:56vh; min-height:320px; }
  .hero__title h1{ font-size: clamp(3rem, 18vw, 5rem); }
  .hero__eyebrow{ font-size:.68rem; letter-spacing:.25em; }

  .showcase{ padding: 3.5rem 1.1rem 4rem; }
  .showcase__title{ font-size: clamp(1.5rem, 6vw, 2rem); }
  .showcase__sub{ font-size: .82rem; margin-bottom: 2rem; }
  .product-grid{ grid-template-columns: 1fr 1fr; gap:.85rem; }
  .product-card__name{ font-size:.8rem; min-height: 2.3em; }
  .product-card__info{ padding: .9rem .9rem 1.1rem; }
  .product-card__bottom{ flex-direction: column; align-items: stretch; gap:.7rem; }
  .action-block{ flex-direction: column; gap: 8px; }
  .btn-card{ width: 100%; text-align:center; font-size:.72rem; padding:10px 12px; }
}

@media (max-width: 380px){
  .topbar__right{ font-size:.62rem; gap:.7rem; }
  .bag-icon{ width:28px; height:28px; }
  .brand__name{ font-size:1.15rem; }
  .hero__title h1{ font-size: clamp(2.4rem, 18vw, 3.8rem); }
  .product-grid{ grid-template-columns: 1fr; gap: 1rem; }
  .product-card__media{ aspect-ratio: 4 / 3; }
}

@media (max-width: 1024px){
  .dropdown-panel{
    position: fixed;
    top: 64px;
    left: 12px;
    right: 12px;
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: 75vh;
    overflow-y: auto;
    z-index: 300;
  }
}

@media (hover: none), (max-width: 900px) {
  .action-block {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   CHECKOUT GRID: FORÇANDO ALINHAMENTO DOS CAMPOS BRASILEIROS
   ========================================================= */

/* Transforma a caixa de campos numa grade (Grid) perfeita */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Duas colunas iguais */
    gap: 15px 20px !important; /* Espaçamento entre os campos */
}

/* Remove as flutuações e larguras antigas que quebravam o layout */
.woocommerce-billing-fields__field-wrapper .form-row,
.woocommerce-shipping-fields__field-wrapper .form-row {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ---------------------------------------------------------
   CONTROLE DE LARGURA E ORDEM (Forçando o layout lado a lado)
   --------------------------------------------------------- */
/* Estes campos ocupam a linha inteira (100% da tela) */
#billing_cpf_field,
#billing_email_field,
#billing_cnpj_field,
#billing_company_field {
    grid-column: 1 / -1 !important;
}

/* Forçando a ordem exata de exibição (ignora o plugin) */
#billing_first_name_field   { order: 1; }
#billing_last_name_field    { order: 2; }
#billing_cpf_field          { order: 3; }
/* Esconde o País definitivamente e tira ele da grade */
#billing_country_field {
    display: none !important;
}

#billing_postcode_field     { order: 4; } /* CEP (Esquerda) */
#billing_address_1_field    { order: 5; } /* Endereço (Direita) */

#billing_number_field       { order: 6; } /* Número (Esquerda) */
#billing_address_2_field    { order: 7; } /* Complemento/Ref (Direita) */

#billing_city_field         { order: 8; } /* Cidade (Esquerda) */
#billing_neighborhood_field { order: 9; } /* Bairro (Direita) */

#billing_state_field        { order: 10; } /* Estado (Esquerda) */
#billing_cellphone_field    { order: 11; } /* Celular (Direita) */
#billing_phone_field        { order: 11; } /* Fallback do Celular */

#billing_email_field        { order: 12; } /* E-mail (Linha inteira) */


/* =========================================================
   DOMINANDO O SELECT NATIVO DO ESTADO (Adeus fundo branco)
   ========================================================= */
.woocommerce-checkout select {
    background-color: var(--bg-deep) !important;
    border: 1px solid var(--gold-line) !important;
    color: var(--cream) !important;
    border-radius: 2px !important;
    height: 42px !important; /* Mesma altura dos seus outros inputs */
    padding: 0 12px !important;
    
    /* Remove a estética feia do Windows/Navegador */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    
    /* Injeta uma setinha dourada customizada em SVG */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23D9A62B%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 16px !important;
}

/* Pinta a caixinha de opções (SP, RJ, MG...) quando clica */
.woocommerce-checkout select option {
    background-color: var(--bg-panel) !important;
    color: var(--cream) !important;
}

/* =========================================================
   O GOLPE FINAL NO ESTADO BRANCO (MIRA A LASER)
   ========================================================= */

/* Ataca a ID do campo diretamente, pegando o Select nativo e o Select2 */
#billing_state_field select,
#billing_state_field .select2-container .select2-selection--single,
#billing_state_field span.select2-selection {
    background-color: var(--bg-deep) !important;
    border: 1px solid var(--gold-line) !important;
    color: var(--cream) !important;
    height: 42px !important;
    border-radius: 2px !important;
    background-image: none !important;
    display: flex !important;
    align-items: center !important;
}

/* Garante que o texto de dentro (ex: São Paulo) fique claro e sem fundo branco */
#billing_state_field .select2-container .select2-selection--single .select2-selection__rendered,
#billing_state_field .select2-selection__rendered {
    color: var(--cream) !important;
    background-color: transparent !important;
    line-height: normal !important;
    padding-left: 10px !important;
}

/* Arruma a setinha dourada para ela ficar alinhada e visível */
#billing_state_field .select2-selection__arrow {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#billing_state_field .select2-selection__arrow b {
    border-color: var(--gold-soft) transparent transparent transparent !important;
    border-width: 5px 4px 0 4px !important;
    margin: 0 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
}

/* =========================================================
   AVISOS DO WOOCOMMERCE (CUPOM, MENSAGENS E ERROS)
   ========================================================= */

/* Estiliza a caixa principal (Fundo escuro e borda dourada) */
.woocommerce-info, 
.woocommerce-message, 
.woocommerce-error {
    background-color: var(--bg-panel) !important;
    border: 1px solid var(--gold-line) !important;
    border-top: 2px solid var(--gold) !important; /* Deixa uma barrinha superior dourada mais forte para destaque */
    color: var(--cream-dim) !important;
    border-radius: 3px !important;
    box-shadow: var(--shadow-deep) !important;
}

/* Cor do link (Ex: "Clique aqui para digitar seu cupom") */
.woocommerce-info a, 
.woocommerce-message a, 
.woocommerce-error a {
    color: var(--gold-light) !important;
    font-weight: 500 !important;
    transition: color 0.3s var(--ease) !important;
}

.woocommerce-info a:hover, 
.woocommerce-message a:hover, 
.woocommerce-error a:hover {
    color: var(--gold) !important;
}

/* Cor do ícone que fica do lado esquerdo da mensagem */
.woocommerce-info::before, 
.woocommerce-message::before, 
.woocommerce-error::before {
    color: var(--gold-soft) !important;
}

/* =========================================================
   RESUMO COM FOTOS (REFINADO E ALINHADO)
   ========================================================= */

/* Grid perfeito para as duas colunas */


/* 2. ARRUMANDO O ALINHAMENTO DO RESUMO LATERAL */
.gr-resumo-lateral {
    background: transparent !important;
    border: none !important; /* Tiramos a borda externa */
    padding: 0 !important;
    box-shadow: none !important;
}

/* O título agora imita o rótulo (label) das observações na esquerda */
.gr-resumo-titulo {
    font-family: var(--font-body) !important;
    color: var(--cream-dim) !important;
    font-size: 1rem !important; 
    font-weight: 400 !important;
    margin: 0 0 10px 0 !important; /* Mesmo espaço que o textarea tem pro rótulo dele */
    border: none !important;
    padding: 0 !important;
}

/* A borda vai apenas para a lista de itens, alinhando com a caixa de texto */
.gr-resumo-lista {
    background-color: var(--bg-panel) !important;
    border: 1px solid var(--gold-line) !important;
    border-radius: 3px !important;
    padding: 15px 20px !important;
    box-shadow: var(--shadow-deep) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    min-height: 135px !important; /* Força a ter a mesma altura da caixa de texto vizinha */
    justify-content: center !important;
}

/* 3. REFINANDO OS ITENS (Estética) */
.gr-resumo-item {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

.gr-resumo-img {
    position: relative !important;
    width: 58px !important;
    height: 58px !important;
    border: 1px solid var(--gold-line) !important;
    border-radius: 4px !important;
    background: var(--bg-deep) !important;
    flex: 0 0 auto !important;
}

.gr-resumo-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 3px !important;
}

.gr-resumo-qty {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    background: var(--gold) !important;
    color: var(--bg-panel-2) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    border: 2px solid var(--bg-panel) !important;
}

.gr-resumo-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.gr-resumo-nome {
    color: var(--cream) !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
}

.gr-resumo-preco {
    color: var(--gold-soft) !important;
    font-size: 0.85rem !important;
}

/* Responsividade: No celular volta a ficar um embaixo do outro */
@media (max-width: 768px) {
    .woocommerce-additional-fields {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* =========================================================
   RESUMO COM FOTOS (BLOCO LARGO INFERIOR)
   ========================================================= */

/* Caixa principal pegando toda a largura (A sua área vermelha) */
.gr-resumo-large {
    width: 100% !important;
    margin-top: 40px !important;
    margin-bottom: 20px !important;
    background-color: var(--bg-panel) !important;
    border: 1px solid var(--gold-line) !important;
    border-radius: 3px !important;
    padding: 25px !important;
    box-shadow: var(--shadow-deep) !important;
    clear: both !important; /* Garante que nada fique flutuando do lado */
}

/* Título da seção */
.gr-resumo-large-titulo {
    font-family: var(--font-display) !important;
    color: var(--gold-light) !important;
    font-size: 1.4rem !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid var(--gold-line) !important;
    padding-bottom: 15px !important;
}

/* Se tiver muitos produtos, cria uma grade responsiva */
.gr-resumo-large-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 20px !important;
}

/* Card de cada produto */
.gr-resumo-large-item {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    background: var(--bg-deep) !important;
    padding: 15px !important;
    border: 1px solid var(--gold-line) !important;
    border-radius: 4px !important;
}

/* Foto do produto maior */
.gr-resumo-img-large {
    position: relative !important;
    width: 75px !important;
    height: 75px !important;
    border: 1px solid var(--gold-soft) !important;
    border-radius: 4px !important;
    flex: 0 0 auto !important;
}

.gr-resumo-img-large img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 3px !important;
}

/* Bolinha de quantidade */
.gr-resumo-qty-large {
    position: absolute !important;
    top: -10px !important;
    right: -10px !important;
    background: var(--gold) !important;
    color: var(--bg-panel-2) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    width: 26px !important;
    height: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    border: 2px solid var(--bg-panel) !important;
}

/* Informações do texto */
.gr-resumo-info-large {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}

.gr-resumo-nome-large {
    color: var(--cream) !important;
    font-size: 1.05rem !important;
    font-weight: 500 !important;
}

.gr-resumo-preco-large {
    color: var(--gold-light) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
}

/* =========================================================
   BOTÃO DE EDITAR CARRINHO NO RESUMO
   ========================================================= */
.gr-resumo-actions {
    margin-top: 30px !important;
    text-align: right !important; /* Alinha o botão na direita */
    border-top: 1px dashed var(--gold-line) !important;
    padding-top: 20px !important;
}

.gr-btn-editar-carrinho {
    display: inline-block !important;
    background-color: transparent !important;
    border: 1px solid var(--gold) !important;
    color: var(--gold) !important;
    padding: 10px 24px !important;
    font-family: var(--font-body) !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-radius: 2px !important;
    transition: all 0.3s var(--ease) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

.gr-btn-editar-carrinho:hover {
    background-color: var(--gold) !important;
    color: var(--bg-panel-2) !important;
}

/* No celular, o botão ocupa a largura toda para facilitar o toque do dedo */
@media (max-width: 640px) {
    .gr-resumo-actions {
        text-align: center !important;
    }
    .gr-btn-editar-carrinho {
        width: 100% !important;
    }
}

/* =========================================================
   CARRINHO VAZIO: TEXTO E ÍCONE DOURADOS
   ========================================================= */
/* Pega a mensagem de carrinho vazio e o rostinho triste (SVG, Ícone ou Texto) */
.cart-empty, 
.cart-empty p,
.cart-empty::before,
.woocommerce-cart-is-empty .elementor-widget-container,
.woocommerce-cart-is-empty h1,
.woocommerce-cart-is-empty h2,
.woocommerce-cart-is-empty p,
.woocommerce-cart-is-empty i,
.woocommerce-cart-is-empty svg {
    color: var(--gold-light) !important;
    fill: var(--gold-light) !important;
}

/* Força preenchimento dourado se o rostinho for um arquivo SVG */
.cart-empty svg path,
.woocommerce-cart-is-empty svg path {
    fill: var(--gold-light) !important;
}


/* =========================================================
   BOTÕES DE PRODUTO: HOVER DOURADO COM ANIMAÇÃO
   ========================================================= */
/* Prepara o botão para uma transição suave */
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button,
a.add_to_cart_button {
    transition: all 0.3s var(--ease) !important;
}

/* O Efeito Mágico ao passar o mouse */
.woocommerce ul.products li.product .button:hover,
.woocommerce-page ul.products li.product .button:hover,
a.add_to_cart_button:hover {
    background-color: var(--gold) !important; /* Fica dourado */
    color: var(--bg-panel-2) !important; /* Texto fica escuro para dar contraste e leitura */
    border-color: var(--gold) !important;
    
    /* Animação: Dá um leve "pulo" para cima e ganha um brilho dourado */
    transform: translateY(-3px) !important; 
    box-shadow: 0 6px 15px rgba(201, 162, 76, 0.3) !important; 
}

/* =========================================================
   O GOLPE FINAL NO EMOJI TRISTE (CARRINHO VAZIO)
   ========================================================= */

/* 1. Ataca diretamente os vetores do SVG (Círculos e Caminhos) */
.woocommerce-cart-is-empty svg,
.woocommerce-cart-is-empty svg path,
.woocommerce-cart-is-empty svg circle,
.cart-empty svg,
.cart-empty svg path,
.cart-empty svg circle,
.cart-empty::before {
    fill: var(--gold-light) !important;
    color: var(--gold-light) !important;
}

/* Garante que os olhos e a lágrima (que são desenhados de outra cor) 
   não sumam caso o SVG seja composto. Forçamos a cor de fundo escuro neles se necessário */
.woocommerce-cart-is-empty svg [fill="#000000"], 
.woocommerce-cart-is-empty svg [fill="#111111"],
.cart-empty svg [fill="#000000"] {
    fill: var(--bg-deep) !important;
}

/* 2. Se o tema tiver puxado uma IMAGEM (.png ou .jpg) em vez de SVG */
.woocommerce-cart-is-empty img,
.cart-empty img {
    /* Filtro CSS mágico que transforma tons claros em dourado */
    filter: invert(75%) sepia(26%) saturate(1142%) hue-rotate(5deg) brightness(101%) contrast(92%) !important;
}

/* Força a cor dourada em qualquer texto ou ícone de fonte solto na área */
.woocommerce-cart-is-empty .elementor-widget-container,
.cart-empty {
    color: var(--gold-light) !important;
}

/* =========================================================
   REMOVENDO A PELÍCULA DE BLOQUEIO (LOADING) DO CHECKOUT
   ========================================================= */

/* Opção 1: Deixa a camada de carregamento totalmente transparente */
.woocommerce-checkout .blockUI.blockOverlay {
    background-color: transparent !important;
    opacity: 0 !important;
}

/* Oculta o ícone padrão de "carregando" (opcional, caso queira limpar 100%) */
.woocommerce-checkout .blockUI.blockOverlay::before {
    display: none !important;
}

/* =========================================================
   BOTÕES DE AÇÃO (CANCELAR / EXCLUIR NA PÁGINA DE PEDIDO)
   ========================================================= */

/* Estilo base dos botões de ação na página de obrigado/pedidos */
.woocommerce-order-details .woocommerce-order-actions a.button,
.woocommerce-account .woocommerce-orders-table__row .button,
.woocommerce-order p.order-again a,
.woocommerce-customer-details a.button,
.woocommerce-order ul.order_details + * a.button {
    background-color: var(--bg-panel) !important;
    border: 1px solid var(--gold-line) !important;
    color: var(--gold-light) !important;
    font-family: var(--font-body) !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 8px 18px !important;
    border-radius: 2px !important;
    transition: all 0.3s var(--ease) !important;
    text-decoration: none !important;
    display: inline-block !important;
    box-shadow: none !important;
}

/* O Efeito Mágico ao passar o mouse (Hover Dourado com Animação) */
.woocommerce-order-details .woocommerce-order-actions a.button:hover,
.woocommerce-account .woocommerce-orders-table__row .button:hover,
.woocommerce-order p.order-again a:hover,
.woocommerce-customer-details a.button:hover,
.woocommerce-order ul.order_details + * a.button:hover {
    background-color: var(--gold) !important;
    color: var(--bg-panel-2) !important;
    border-color: var(--gold) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 15px rgba(201, 162, 76, 0.3) !important;
}

/* Tratamento específico para botões que tenham o estilo de perigo/cancelamento */
.woocommerce-order-actions a.cancel:hover,
a.button.cancel:hover {
    background-color: #8b3a3a !important; /* Vermelho elegante para cancelar se preferir, ou mantemos o dourado */
    border-color: #a84646 !important;
    color: #fff !important;
}

/* =========================================================
   CORREÇÃO DEFINITIVA DO BLOCO DE PIX / ASAAS
   ========================================================= */

/* Limita o container principal do pagamento para não estourar a tela */
.woocommerce-order-pay #payment, 
.woocommerce-received-order .woocommerce-order-details,
.woocommerce-bacs-bank-details,
.wc-as-pix-payment-details,
.as-pix-container {
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Arruma a caixa que segura o QR Code e as instruções */
.wc-as-pix-payment-details, 
div.woocommerce-order-pay__payment-method,
.woocommerce-order ul.order_details + div {
    background-color: var(--bg-panel) !important;
    border: 1px solid var(--gold-line) !important;
    border-radius: 3px !important;
    padding: 20px !important;
    box-shadow: var(--shadow-deep) !important;
    color: var(--cream-dim) !important;
}

/* Oculta ou substitui aquela barra de rolagem branca feia do código copia e cola */
pre, code, .woocommerce-order input[readonly], .wc-as-pix-copy-paste {
    background-color: var(--bg-deep) !important;
    color: var(--gold-light) !important;
    border: 1px solid var(--gold-line) !important;
    border-radius: 2px !important;
    padding: 10px !important;
    white-space: pre-wrap !important; /* Faz o código quebrar linha em vez de criar barra horizontal infinita */
    word-break: break-all !important;
}

/* Remove qualquer barra de rolagem nativa branca indesejada */
::-webkit-scrollbar {
    height: 6px !important;
    background: var(--bg-deep) !important;
}
::-webkit-scrollbar-thumb {
    background: var(--gold-soft) !important;
    border-radius: 3px !important;
}

/* Estiliza o botão de "Copiar Código Pix" para seguir o padrão da loja */
.button.alt, button.alt, .wc-as-pix-copy-button, a.wc-as-pix-btn {
    background-color: var(--gold-light) !important;
    color: var(--bg-panel-2) !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border: none !important;
    border-radius: 2px !important;
    padding: 12px 24px !important;
    transition: all 0.3s var(--ease) !important;
    box-shadow: none !important;
}

.button.alt:hover, button.alt:hover, .wc-as-pix-copy-button:hover, a.wc-as-pix-btn:hover {
    background-color: var(--gold) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 15px rgba(201, 162, 76, 0.3) !important;
}

/* =========================================================
   ESTILO DO BOTÃO DE COPIAR PIX MODERNO
   ========================================================= */
.gr-pix-action-box {
    margin-top: 20px !important;
    text-align: left !important;
}

.gr-btn-pix-copia {
    background-color: var(--gold-light) !important;
    color: var(--bg-panel-2) !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border: none !important;
    border-radius: 2px !important;
    padding: 12px 24px !important;
    cursor: pointer !important;
    transition: all 0.3s var(--ease) !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: none !important;
}

.gr-btn-pix-copia:hover {
    background-color: var(--gold) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 15px rgba(201, 162, 76, 0.3) !important;
}

/* =========================================================
   PIX: ESCONDE APENAS O TEXTO BRUTO E MANTÉM O BOTÃO NATIVO
   ========================================================= */

/* 1. Esconde o calhamaço de código gigante (Payload copia e cola) */
pre, code, .wc-as-pix-copy-paste, input[readonly] {
    display: none !important;
}

/* 2. Deixa o botão nativo do plugin visível e bonito */
.wc-as-pix-copy-button, 
a.wc-as-pix-btn, 
.woocommerce-order-pay .button.alt {
    display: inline-block !important;
    background-color: var(--gold-light) !important;
    color: var(--bg-panel-2) !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border: none !important;
    border-radius: 2px !important;
    padding: 12px 24px !important;
    transition: all 0.3s var(--ease) !important;
    box-shadow: none !important;
}

/* =========================================================
   AFASTAMENTO CIRÚRGICO DO BOTÃO DO PIX
   ========================================================= */

/* Força margem em cima de qualquer variação do botão do Pix */
.wc-as-pix-copy-button, 
a.wc-as-pix-btn, 
.woocommerce-order-pay .button.alt,
.woocommerce-order div button,
.woocommerce-order div a.button {
    margin-top: 25px !important;
    display: inline-block !important;
}

/* Se o QR Code estiver dentro de uma div, garantimos respiro nela também */
.wc-as-pix-qr-code, 
.woocommerce-order .wc-as-pix-payment-details img,
.woocommerce-order div > img:first-child {
    margin-bottom: 15px !important;
    display: block !important;
}

/* =========================================================
   DESTRUIDOR ABSOLUTO DE LINHAS PONTILHADAS DO ASAAS
   ========================================================= */

/* Caça qualquer elemento dentro do resumo do pedido que tenha borda à direita */
.woocommerce-order * {
    border-right: none !important;
    border-image: none !important;
}

/* Remove pseudoelementos que o plugin usa para desenhar linhas decorativas */
.woocommerce-order-pay *:after,
.woocommerce-order-pay *:before,
.woocommerce-received-order *:after,
.woocommerce-received-order *:before {
    display: none !important;
}

/* Garante espaçamento limpo e legível para as instruções */
.woocommerce-order .wc-as-pix-payment-details,
.woocommerce-order .woocommerce-bacs-bank-details {
    padding: 25px !important;
    background-color: var(--bg-panel) !important;
    border: 1px solid var(--gold-line) !important;
    border-radius: 3px !important;
}

/* =========================================================
   ESPACAMENTO E LEGIBILIDADE PERFEITA DOS TEXTOS DO PIX
   ========================================================= */
.woocommerce-order .wc-as-pix-payment-details,
.woocommerce-order .woocommerce-bacs-bank-details {
    line-height: 1.8 !important;
}

.woocommerce-order .wc-as-pix-payment-details *,
.woocommerce-order .woocommerce-bacs-bank-details * {
    font-size: 0.9rem !important;
    line-height: 1.8 !important;
    color: var(--cream-dim) !important;
    text-transform: none !important; /* Tira o excesso de caixa alta colada */
    letter-spacing: 0.02em !important;
    word-spacing: 0.05em !important;
}

/* =========================================================
   OCULTA O TEXTO FEIO DO ASAAS E DEIXA SÓ O QR CODE E BOTÃO
   ========================================================= */
.wc-as-pix-payment-details p,
.woocommerce-bacs-bank-details p,
.woocommerce-order-pay div[style*="font-size"] {
    /* Oculta o texto em bloco espremido do Asaas que estava feio */
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* =========================================================
   PÁGINA DE CATÁLOGO (page-produtos.php)
   ========================================================= */

/* Cabeçalho da página */
.catalogo-hero{
  max-width: 1440px;
  margin: 0 auto;
  padding: 3.5rem 2rem 1rem;
  text-align: center;
}
.catalogo-hero__eyebrow{
  display:block;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color: var(--gold); margin-bottom:.6rem;
}
.catalogo-hero__title{
  font-family: var(--font-display);
  font-weight:500;
  font-size: clamp(2.1rem, 5vw, 3.1rem);
  letter-spacing:.03em;
  margin: 0 0 .6rem;
  color: var(--champagne);
}
.catalogo-hero__sub{
  color: rgba(220,199,154,0.65);
  font-size:.92rem; letter-spacing:.02em;
  margin: 0 0 2rem;
}

/* Atalhos rápidos pra pular direto pra categoria */
.catalogo-atalhos{
  display:flex; flex-wrap:nowrap; overflow-x:auto;
  gap:.6rem; justify-content:center;
  padding: .4rem .2rem 1.2rem;
  -ms-overflow-style:none; scrollbar-width:none;
  -webkit-overflow-scrolling: touch;
}
.catalogo-atalhos::-webkit-scrollbar{ display:none; }
.catalogo-atalho{
  flex:0 0 auto;
  font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color: var(--cream-dim);
  border:1px solid var(--gold-line);
  border-radius: 999px;
  padding:.5rem 1.05rem;
  white-space:nowrap;
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.catalogo-atalho:hover{
  color: var(--bg-panel-2);
  background: var(--gold-light);
  border-color: var(--gold-light);
}

/* Estado vazio (nenhuma categoria com produto ainda) */
.catalogo-vazio{
  max-width:480px; margin:2rem auto 6rem;
  text-align:center; color: var(--cream-faint);
  display:flex; flex-direction:column; align-items:center; gap:1rem;
}
.catalogo-vazio svg{ color: var(--gold); }

/* Uma seção por categoria */
.catalogo-main{ max-width:1440px; margin:0 auto; padding: 0 2rem 5rem; }
.catalogo-categoria{ margin-bottom: 2.4rem; scroll-margin-top: 5.5rem; }
.catalogo-categoria__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; margin-bottom:1.4rem;
  padding-bottom:.9rem;
  border-bottom: 1px solid var(--gold-line);
}
.catalogo-categoria__title{
  font-family: var(--font-display);
  font-weight:500;
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  letter-spacing:.03em;
  color: var(--champagne);
  margin:0;
}
.catalogo-categoria__setas{ display:flex; gap:.5rem; flex:0 0 auto; }
.catalogo-seta{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--gold-line);
  background: var(--bg-panel);
  color: var(--gold-light);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: border-color .25s var(--ease), color .25s var(--ease), transform .2s var(--ease);
}
.catalogo-seta:hover{ border-color: var(--gold); color: var(--gold); transform: translateY(-1px); }
.catalogo-seta:disabled{ opacity:.3; cursor:default; transform:none; }

/* O carrossel em si: 2 linhas, rolando na horizontal */
.catalogo-carrossel{
  display:grid;
  grid-template-rows: repeat(2, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: 195px;
  gap: 1.1rem;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior:smooth;
  padding-bottom: .6rem;
  -ms-overflow-style:none; scrollbar-width: thin;
}
.catalogo-carrossel::-webkit-scrollbar{ height:6px; }
.catalogo-carrossel::-webkit-scrollbar-thumb{ background: var(--gold-line); border-radius:3px; }
.catalogo-carrossel::-webkit-scrollbar-track{ background:transparent; }
.catalogo-carrossel .product-card{ scroll-snap-align:start; }

/* Cards mais compactos dentro do catálogo (não mexe nos da home) */
.catalogo-carrossel .product-card__media{ aspect-ratio: 4 / 3; }
.catalogo-carrossel .product-card__info{ padding: .55rem .65rem .65rem; }
.catalogo-carrossel .product-card__name{
  font-size:.74rem; min-height: 0; margin-bottom:.25rem; line-height:1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.catalogo-carrossel .stars{ font-size:.6rem; margin-bottom:.3rem; }
.catalogo-carrossel .product-card__price{ font-size:.8rem; }
.catalogo-carrossel .product-card__bottom{ flex-direction:column; align-items:stretch; gap:.35rem; margin-top:.2rem; }
.catalogo-carrossel .action-block{ flex-direction:column; gap:.3rem; }
.catalogo-carrossel .btn-card{ font-size:.62rem; padding:6px 6px; letter-spacing:.02em; }

/* Cards de exemplo/teste (categoria ainda sem produto cadastrado) */
.product-card--placeholder{
  border-style: dashed;
  opacity: .78;
}
.product-card--placeholder .face--front,
.product-card--placeholder .face--back{
  color: var(--cream-faint);
}
.catalogo-placeholder-badge{
  display:inline-block;
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--bg-panel-2); background: var(--gold-line);
  padding:.2rem .55rem; border-radius:2px; margin-bottom:.5rem;
}
.product-card--placeholder .btn-card{
  opacity:.5; cursor:not-allowed; pointer-events:none;
}
.catalogo-categoria__aviso{
  font-size:.78rem; color: var(--cream-faint);
  margin: -.6rem 0 1.1rem;
}

/* =========================================================
   CATÁLOGO — AJUSTES MOBILE (sempre por último no arquivo)
   ========================================================= */
@media (max-width: 900px){
  .catalogo-hero{ padding: 2.4rem 1.2rem .5rem; }
  .catalogo-hero__sub{ margin-bottom: 1.4rem; }
  .catalogo-main{ padding: 0 1.1rem 3.5rem; }
  .catalogo-categoria{ margin-bottom: 1.8rem; }

  /* Corrige o motivo de essa fileira não "andar pro lado" no celular:
     com o conteúdo centralizado (justify-content: center) e maior que
     a tela, o navegador trava o início/fim do scroll. Alinhando à
     esquerda, o arrastar pro lado passa a funcionar normalmente. */
  .catalogo-atalhos{ justify-content: flex-start; }

  /* Cards bem menores no celular: cabem ~2 colunas (2 linhas = 4 cards)
     na tela de uma vez, e o carrossel continua igual ao do PC, só
     que compacto — arrasta pro lado pra ver o resto. */
  .catalogo-carrossel{
    grid-auto-columns: min(44vw, 175px);
    gap: .6rem;
  }
  .catalogo-carrossel .product-card__media{ aspect-ratio: 4 / 3; }
  .catalogo-carrossel .product-card__info{ padding: .45rem .5rem .55rem; }
  .catalogo-carrossel .product-card__name{
    font-size:.66rem; min-height: 0; margin-bottom:.2rem; line-height:1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .catalogo-carrossel .stars{ font-size:.52rem; margin-bottom:.25rem; }
  .catalogo-carrossel .product-card__price{ font-size:.7rem; }
  .catalogo-carrossel .product-card__bottom{ gap:.25rem; margin-top:.15rem; }
  .catalogo-carrossel .action-block{ gap:.22rem; }
  .catalogo-carrossel .btn-card{ font-size:.58rem; padding:5px 4px; }
  .catalogo-carrossel .face svg{ width:18px; height:18px; }
  .catalogo-carrossel .face span{ font-size:.56rem; }
}

@media (max-width: 520px){
  .catalogo-carrossel{ grid-auto-columns: min(46vw, 155px); gap:.55rem; }
  .catalogo-categoria__title{ font-size:1.15rem; }
  .catalogo-seta{ width:34px; height:34px; }
}

/* GR Joias: imagem já instalada, compartilhada por todos os cabeçalhos. */
.site-header .brand__mark,
.checkout-header .checkout-header__logo::before{
  display:inline-block;box-sizing:border-box;width:44px;height:44px;
  flex:0 0 44px;vertical-align:middle;border:1px solid var(--gold,#d9ad50);
  border-radius:50%;overflow:hidden;
  background:#120b07 url('../assets/gr-logo-scroll.jpeg') center 40%/170% auto no-repeat;
}
.site-header .brand__mark .brand__crest{visibility:hidden;}
.checkout-header .checkout-header__logo{display:inline-flex;align-items:center;gap:8px;}
.checkout-header .checkout-header__logo::before{content:"";}
@media(max-width:600px){
 .site-header .brand__mark,
 .checkout-header .checkout-header__logo::before{width:32px;height:32px;flex-basis:32px;}
 .checkout-header .checkout-header__logo{gap:5px;}
}