/* ============================================================
   A FIDALGA CALÇADOS — style.css
   Design System 2025 — Cormorant Garamond + Montserrat
   ============================================================ */

/* == 01. GOOGLE FONTS == */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Montserrat:wght@300;400;700&display=swap');

/* == 02. VARIÁVEIS CSS == */
:root {
  --f-purple:       #2c1668;
  --f-purple-light: #e9e7f1;
  --f-pink:         #e8b0b4;
  --f-black:        #000000;
  --f-navy:         #1a2d5a;
  --f-charcoal:     #333333;
  --f-gray-dark:    #505050;
  --f-gray-mid:     #686868;
  --f-gray-light:   #cccccc;
  --f-off-white:    #f9f9f9;
  --f-white:        #ffffff;
  --f-error:        #ed4e4e;
  --f-success:      #58c22e;
  --font-display:   'Cormorant Garamond', Georgia, serif;
  --font-body:      'Montserrat', sans-serif;
  --sp-xs:  5px;
  --sp-sm:  10px;
  --sp-md:  20px;
  --sp-lg:  30px;
  --sp-xl:  40px;
  --sp-2xl: 60px;
  --transition: 0.2s ease;
}

/* == 03. RESET E TIPOGRAFIA BASE == */
html, input, textarea, button, select, option {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--f-gray-dark);
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

*:focus { outline: 0; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  color: var(--f-gray-dark);
  background: var(--f-white);
  line-height: 1.6;
  overflow-y: auto;
  width: 100%;
  min-height: 100vh;
}

body.modalAtivo { overflow: hidden; }

#site {
  width: 100%;
  margin: 0 auto;
  min-height: 700px;
  display: block;
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6, option {
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
}

a {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  transition: color var(--transition);
}

a:hover { text-decoration: none; color: var(--f-pink); }
p a { display: inline-block; }
a img { border: 0; }
img { border: 0; display: block; max-width: 100%; height: auto; }
span { color: inherit; }
strong { color: inherit; font-weight: 700; }
ul, ol, li { list-style: none; margin: 0; padding: 0; }
textarea { max-width: 100%; min-width: 100%; }
hr { display: none; }

button {
  padding: 0; margin: 0;
  background-color: transparent;
  border: 0; outline: none;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
}

/* == 04. GRID ZENT == */
.clearfix::after,
.clearfix:after,
.conteudo::after,
.conteudo:after,
.setor::after,
.setor:after,
.formLinha::after,
.formLinha:after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.conteudo {
  width: 990px;
  margin: 0 auto;
  display: block;
  position: relative;
}

@media screen and (max-width: 1024px) {
  .conteudo { width: 90%; }
}

.setor {
  width: 100%;
  float: left;
  position: relative;
}

.formLinha {
  margin: 0 -15px;
  display: block;
}

.formColFantasma { min-height: 88px; }

.formCol12 { padding: 0 15px; float: left; width: 100%; position: relative; }
.formCol11 { padding: 0 15px; float: left; width: 91.666666%; position: relative; }
.formCol10 { padding: 0 15px; float: left; width: 83.333333%; position: relative; }
.formCol9  { padding: 0 15px; float: left; width: 75%; position: relative; }
.formCol8  { padding: 0 15px; float: left; width: 66.666666%; position: relative; }
.formCol7  { padding: 0 15px; float: left; width: 58.333333%; position: relative; }
.formCol6  { padding: 0 15px; float: left; width: 50%; position: relative; }
.formCol5  { padding: 0 15px; float: left; width: 41.666666%; position: relative; }
.formCol4  { padding: 0 15px; float: left; width: 33.333333%; position: relative; }
.formCol3  { padding: 0 15px; float: left; width: 25%; position: relative; }
.formCol2  { padding: 0 15px; float: left; width: 16.666666%; position: relative; }
.formCol1  { padding: 0 15px; float: left; width: 8.333333%; position: relative; }

@media screen and (max-width: 800px) {
  .formCol6 { width: 100%; }
}

/* == 05. ANNOUNCEMENT BAR == */
#fidalga-announcement {
  background: var(--f-purple);
  color: var(--f-white);
  padding: 9px var(--sp-xl);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-lg);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.08em;
  position: relative;
  width: 100%;
}

#fidalga-announcement span { opacity: 0.9; }
#fidalga-announcement .ann-sep { opacity: 0.35; }

#fidalga-announcement .ann-close {
  position: absolute;
  right: var(--sp-md);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: color var(--transition);
}

#fidalga-announcement .ann-close:hover { color: var(--f-white); }

@media screen and (max-width: 768px) {
  #fidalga-announcement { gap: var(--sp-sm); font-size: 10px; padding: 7px var(--sp-md); }
  #fidalga-announcement .ann-sep { display: none; }
}

/* == 06. HEADER / TOPO == */
#topo {
  background-color: var(--f-white);
  height: 90px;
  z-index: 8888;
  width: 950px;
  box-shadow: 0 15px 20px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.topoEsq {
  float: left;
  margin: 31px 30px 31px;
  position: relative;
  display: none;
}

.topoCentro {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  width: 160px;
  margin: 0 auto;
}

.topoCentro img { width: 100%; height: auto; }

.topoDir {
  float: right;
  margin: 31px 30px 31px 0;
  position: relative;
  display: flex;
  align-items: center;
}

.topoDir > * { margin-left: 20px; }

.topoBotao {
  width: 24px;
  height: 24px;
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
}

.topoBotao svg {
  width: auto;
  height: 24px;
  transition: transform var(--transition);
  fill: var(--f-black);
}

.topoBotao:hover svg { transform: scale(1.15); fill: var(--f-pink); }
.topoBotao:hover svg * { fill: var(--f-pink); }

.topoBotao .logout {
  display: block;
  background-color: var(--f-error);
  color: var(--f-white);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  width: 18px;
  padding: 4px;
  line-height: 10px;
  position: absolute;
  z-index: 10;
  top: 42%;
  left: -8px;
  border-radius: 50%;
}

.topoBotao .logout svg { width: 100%; height: auto; display: block; }
.topoBotao:hover .logout svg { transform: scale(1); }
.topoBotao:hover .logout svg * { fill: var(--f-white); }

.topoBotao .infoQuantidade {
  display: block;
  background-color: var(--f-purple);
  color: var(--f-white);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  width: 18px;
  line-height: 18px;
  position: absolute;
  z-index: 10;
  top: -4px;
  right: -6px;
  border-radius: 50%;
}

/* == 07. MENU PRINCIPAL == */
.menuPrincipal {
  float: left;
  margin: 0 0 0 30px;
}

.menuPrincipal.direita {
  float: right;
  margin: 0;
}

.menuPrincipal.direita > .menuLista > .menuListaItem:last-child { margin-right: 10px; }
.menuPrincipal > .menuLista { float: left; }
.menuPrincipal > .menuLista > .menuTitulo { display: none; }
.menuPrincipal > .menuLista > .menuListaItem { float: left; margin-right: 30px; }
.menuPrincipal:not(.direita) > .menuLista > .menuListaItem:nth-last-child(-n+2) { display: none; }

.menuPrincipal > .menuLista > .menuListaItem > .menuSubmenu {
  background-color: transparent;
  line-height: 90px;
  color: var(--f-black);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.menuPrincipal > .menuLista > .menuListaItem:hover > .menuLink { color: var(--f-pink); }
.menuPrincipal > .menuLista > .menuListaItem:hover > .menuLista { display: block; }

.menuPrincipal > .menuLista > .menuListaItem > .menuLista {
  display: none;
  position: absolute;
  top: 90px;
  left: 0;
  background-color: var(--f-white);
  border-top: 2px solid var(--f-purple);
  width: 950px;
  padding: 30px;
  min-width: 380px;
  -webkit-column-count: 3;
  column-count: 3;
  -webkit-column-fill: auto;
  column-fill: auto;
  box-shadow: 0 20px 30px rgba(0,0,0,0.1);
}

.menuPrincipal > .menuLista > .menuListaItem > .menuLista .menuTitulo { display: none; }

.menuPrincipal > .menuLista > .menuListaItem > .menuLista > .menuListaItem {
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  margin-bottom: 20px;
}

.menuPrincipal > .menuLista > .menuListaItem > .menuLista > .menuListaItem > .menuLink {
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 400;
  color: var(--f-black);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.menuPrincipal > .menuLista > .menuListaItem > .menuLista > .menuListaItem .menuListaItem .menuLink {
  font-size: 12px;
  font-weight: 300;
  line-height: 25px;
  color: var(--f-gray-mid);
}

.menuPrincipal > .menuLista > .menuListaItem > .menuLista > .menuListaItem a:hover { color: var(--f-pink); }

/* == 08. PAINÉIS TOGGLE (display/position/z-index preservados do CSS original) == */
.tampao {
  position: fixed;
  z-index: 9000;
  background-color: rgba(0,0,0,0.55);
  top: 0; bottom: 0; right: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 250ms ease-in-out;
}

.tampao.ativo { opacity: 1; pointer-events: all; }

.tampaoFechar {
  position: absolute;
  top: 0;
  font-size: 36px;
  color: var(--f-white);
  line-height: 90px;
  display: none;
  pointer-events: none;
  cursor: pointer;
}

.modalAtivo .tampaoFechar { display: block; }
.menuPrincipal .tampaoFechar { left: 100%; margin-left: 20px; }
.carrinho .tampaoFechar { right: 100%; margin-right: 20px; }

/* Busca */
.busca {
  position: fixed;
  z-index: 9999;
  width: 50%;
  top: 50%; left: 50%;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  transform: translateX(-50%) translateY(-35%);
  transition: all 300ms ease-in-out;
}

.busca.ativo {
  transform: translateX(-50%) translateY(-50%);
  opacity: 1;
  pointer-events: all;
}

.busca .formCombo { width: 100%; margin: 0; }

.busca .formInput {
  width: 100%; height: 80px; line-height: 80px;
  margin: 0; padding-right: 80px;
  border: 0; font-size: 24px; padding-left: 24px;
  background: var(--f-white);
  border-bottom: 3px solid var(--f-purple);
}

.busca .formBotao {
  background-color: transparent;
  width: 80px; height: 80px;
  font-size: 16px; color: var(--f-white); font-weight: 700;
  position: absolute; top: 0; right: 0;
}

.busca svg { width: 36px; height: 80px; }
.busca .formBotao svg * { fill: var(--f-purple); }
.busca .formBotao:hover svg * { fill: var(--f-pink); }

/* Login */
.login {
  position: fixed;
  z-index: 9999;
  width: 380px;
  top: 50%; left: 50%;
  opacity: 0;
  background-color: var(--f-white);
  padding: 40px;
  pointer-events: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  transform: translateX(-50%) translateY(-35%);
  transition: all 300ms ease-in-out;
}

.login.ativo {
  transform: translateX(-50%) translateY(-50%);
  opacity: 1;
  pointer-events: all;
}

.login .formBotao {
  background-color: var(--f-purple);
  color: var(--f-white);
  margin: 0 0 20px;
  width: 100%;
  font-size: 14px;
  letter-spacing: 4px;
  height: 50px;
  line-height: 50px;
}

.loginLista { width: 100%; float: left; margin-bottom: var(--sp-md); }

.loginItem {
  width: 100%;
  border-bottom: 1px solid var(--f-off-white);
}

.loginItem a {
  text-align: center;
  width: 100%;
  font-size: 14px;
  color: var(--f-gray-mid);
  line-height: 40px;
  padding: 8px 0;
  font-weight: 300;
}

.loginItem a:hover { color: var(--f-pink); font-weight: 400; }

/* == 09. CARRINHO PREVIEW == */
.carrinho {
  position: fixed;
  z-index: 9999;
  width: 280px;
  right: -280px;
  top: 0; bottom: 0;
  opacity: 0;
  background-color: var(--f-white);
  box-shadow: -4px 0 25px rgba(0,0,0,0.15);
  transition: all 300ms ease-in-out;
}

.carrinho::-webkit-scrollbar { -webkit-appearance: none; }
.carrinho::-webkit-scrollbar:vertical { width: 0; }

.carrinho.ativo {
  transform: translateX(-280px);
  opacity: 1;
}

.carrinhoPreviewVazio {
  font-size: 14px;
  text-align: center;
  padding: 40px 20px;
  color: var(--f-gray-mid);
}

.carrinhoPreviewTitulo {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  padding: 24px 20px;
  width: 100%;
  float: left;
  z-index: 10;
  color: var(--f-black);
  background-color: var(--f-white);
  border-bottom: 1px solid var(--f-off-white);
}

.carrinhoPreviewLista {
  width: 107%;
  float: left;
  padding: 15px;
  background-color: var(--f-off-white);
  position: absolute;
  top: 80px; bottom: 162px;
  z-index: 9;
  max-height: 100%;
  overflow-y: scroll;
}

.carrinhoPreviewListaAux { width: 100%; float: left; }

.carrinhoPreviewItem {
  width: 100%;
  display: block;
  float: left;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--f-gray-light);
  padding-bottom: 12px;
  position: relative;
}

.carrinhoPreviewItem:last-child { margin-bottom: 0; border-bottom: 0; padding-bottom: 0; }

.carrinhoPreviewItem .infoImagem {
  width: 56px;
  float: left;
  margin: 0 10px 0 0;
  border: 1px solid var(--f-gray-light);
}

.carrinhoPreviewItem .infoProduto { float: none; }
.carrinhoPreviewItem .infoMarca { display: none; }
.carrinhoPreviewItem .infoDe { display: none; }
.carrinhoPreviewItem .infoCondicao { display: none; }

.carrinhoPreviewItem .infoQuantidade {
  display: block;
  background-color: var(--f-purple);
  color: var(--f-white);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  width: 18px;
  line-height: 18px;
  position: absolute;
  z-index: 10;
  top: 0;
  left: 48px;
  border-radius: 50%;
}

.carrinhoPreviewTotal {
  width: 100%;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--f-gray-light);
  padding-bottom: 12px;
  font-weight: 700;
}

.carrinhoPreviewTotal strong:last-child { float: right; }
.carrinhoPreviewTotal span { font-weight: 400; font-size: 13px; }

.carrinhoPreviewBotao {
  width: 100%;
  padding: 15px;
  float: left;
  position: absolute;
  bottom: 0; left: 0;
  z-index: 10;
  background-color: var(--f-white);
  border-top: 1px solid var(--f-off-white);
}

.carrinhoPreviewBotao .formBotao { margin: 0; float: left; background: var(--f-purple); }
.carrinhoPreviewBotao .formBotao:hover { background: var(--f-black); }

.carrinhoPreviewLink {
  text-align: center;
  display: block;
  margin-top: 10px;
  font-size: 12px;
  float: left;
  color: var(--f-gray-mid);
}

.carrinhoPreviewLink:hover { color: var(--f-purple); text-decoration: underline; }

/* == 10. BANNER HERO == */
.banner {
  margin-top: -100px;
  background-color: var(--f-purple-light);
  padding-top: 70px;
  position: relative;
}

.banner:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 30px;
  left: 0;
  bottom: 0;
  background-color: var(--f-white);
  visibility: initial;
  z-index: 100;
}

.bannerImagem { width: 100%; height: auto; }

#banner {
  z-index: 200;
  box-shadow: 0 15px 20px rgba(0,0,0,0.1);
}

.banner .carrosselItem { position: relative; overflow: hidden; }
.banner .owl-theme .owl-controls { position: absolute; bottom: 10px; right: 0; left: 0; }
.banner .owl-carousel .owl-stage-outer { overflow: visible; }

.owl-theme .owl-dots .owl-dot span,
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
  width: 12px; height: 12px;
  border: 2px solid var(--f-purple);
  background-color: var(--f-purple);
  transition: 600ms ease-in-out;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span { border-width: 4px; }

.owl-theme .owl-dots .owl-dot span { background-color: transparent; }
.owl-carousel .owl-item img { transform-style: flat; }

@media screen and (max-width: 1024px) {
  .banner { margin-top: 100px; width: 130%; margin-left: -15%; margin-bottom: 15px; }
}

@media screen and (max-width: 520px) {
  .banner { margin-top: 75px; }
}

/* == 11. SEÇÕES HOME == */
.linhaDivisoria { padding: 40px 0; }

.titulo {
  width: 100%;
  margin-bottom: 25px;
  float: left;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 32px;
  color: var(--f-black);
}

.subtitulo {
  width: auto;
  display: block;
  margin: 0 auto 30px;
  font-size: 18px;
  color: var(--f-gray-dark);
  text-align: left;
}

.cabecalho {
  float: left;
  width: 100%;
  margin-bottom: var(--sp-lg);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.cabecalhoEyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--f-purple);
  font-weight: 400;
  margin-bottom: 4px;
}

.cabecalhoLink {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--f-gray-mid);
  border-bottom: 1px solid var(--f-gray-light);
  padding-bottom: 2px;
  display: inline-block;
  transition: all var(--transition);
}

.cabecalhoLink:hover { color: var(--f-purple); border-color: var(--f-purple); }

/* Section Banner Editorial */
.setor.secBanner {
  background: var(--f-purple-light);
  padding: var(--sp-2xl) 0;
}

.secBannerEyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--f-purple);
  font-weight: 400;
  margin-bottom: var(--sp-sm);
}

.secBannerTitulo {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 300;
  color: var(--f-black);
  line-height: 1.1;
  margin-bottom: var(--sp-md);
}

.secBannerTitulo em {
  font-style: italic;
  color: var(--f-purple);
}

.secBannerDesc {
  font-size: 14px;
  color: var(--f-gray-dark);
  font-weight: 300;
  line-height: 1.7;
  margin-bottom: var(--sp-xl);
}

.secBannerTxt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--sp-lg);
}

.secBannerImagem { overflow: hidden; }
.secBannerImagem img { width: 100%; height: 100%; object-fit: cover; }

.secBannerBtn {
  display: inline-block;
  padding: 12px 32px;
  background: var(--f-purple);
  color: var(--f-white);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--transition);
}
.secBannerBtn:hover { background: #1a0d3d; }

/* Sale Section */
.setor.saleSection {
  background: var(--f-purple);
}

.setor.saleSection .titulo { color: var(--f-white); }
.setor.saleSection .cabecalhoEyebrow { color: var(--f-pink); }
.setor.saleSection .cabecalhoLink { color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.3); }
.setor.saleSection .cabecalhoLink:hover { color: var(--f-pink); border-color: var(--f-pink); }
.setor.saleSection .linhaDivisoria { border-top-color: rgba(255,255,255,0.15); }

.setor.saleSection .infoNome,
.setor.saleSection .infoMarca { color: rgba(255,255,255,0.75); }
.setor.saleSection .infoPor { color: var(--f-white); }
.setor.saleSection .infoDe { color: rgba(255,255,255,0.5); }
.setor.saleSection .infoCondicao { color: rgba(255,255,255,0.6); }

/* Banners secundários */
.bannerSecundarioItem { width: 33.33333%; float: left; }
.bannerSecundarioItem img { width: 100%; height: auto; }

@media screen and (max-width: 1200px) {
  .bannerSecundarioItem { width: 100%; margin: 15px 0; float: left; }
}

/* == 12. CARROSSEL == */
.carrosselAux { position: relative; }

.setas {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  margin: auto;
  height: 0;
  overflow: visible;
  z-index: 10;
  font-size: 80px;
}

.seta {
  position: absolute;
  width: 34px;
  height: 34px;
  top: -17px;
  background: var(--f-white);
  border: 1px solid var(--f-gray-light);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
}

.setaEsq { left: -44px; }
.setaDir { right: -44px; }

.seta svg {
  width: 14px;
  height: 14px;
  display: block;
  margin: 0 auto;
  fill: var(--f-charcoal);
  transition: fill var(--transition);
}

.seta:hover { background: var(--f-purple); border-color: var(--f-purple); }
.seta:hover svg { fill: var(--f-white); }
.seta:hover svg * { fill: var(--f-white); }
.seta.inativo { cursor: not-allowed; opacity: 0.35; }

.carrosselProduto .carrosselItem { width: 210px; margin-right: 30px; float: left; }
.carrosselProduto .carrosselItem:last-of-type { margin-right: 0; }
.carrosselProduto.owl-loaded .carrosselItem { width: 100%; }

@media screen and (max-width: 700px) {
  .seta { width: 40px; height: 40px; }
  .setaEsq { left: -30px; }
  .setaDir { right: -30px; }
  .seta svg { width: 18px; height: 18px; }
}

/* == 13. CARD DE PRODUTO == */
.produtoItem {
  position: relative;
  display: block;
  cursor: pointer;
  text-decoration: none;
}


.produtoItem.esgotado { opacity: 0.65; }

/* Imagem produto */
.infoImagem {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
  float: left;
  border: 1px solid transparent;
  transition: border-color var(--transition);
  aspect-ratio: 3/4;
  object-fit: cover;
}

.produtoItem:hover .infoImagem { border: 1px solid var(--f-pink); }

.infoImagem.outraCor {
  position: absolute;
  top: 0; left: 0;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.produtoItem:hover .infoImagem.outraCor { opacity: 1; }

/* Container moderno de imagem — quadrado */
.produtoImagem {
  width: 100%;
  aspect-ratio: 1/1;
  background: var(--f-off-white);
  position: relative;
  overflow: hidden;
}

.produtoImagem .infoImagem {
  aspect-ratio: unset;
  width: 100%;
  height: 100%;
  margin-bottom: 0;
  object-fit: contain;
  transition: border-color var(--transition);
}

.produtoHover {
  position: absolute;
  left: 0; right: 0; top: 0;
  min-height: 50%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px 12px 8px;
  background: linear-gradient(to bottom, rgba(26,45,90,0.65), rgba(26,45,90,0) 75%);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--transition), transform var(--transition);
  z-index: 8;
  pointer-events: none;
}

.produtoItem:hover .produtoHover { opacity: 1; transform: translateY(0); }

.produtoHover span {
  color: var(--f-white);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  max-width: 90%;
}

/* Opções de cor no card, reveladas ao passar o mouse */
.prod-cores {
  position: absolute;
  left: 0; right: 0;
  bottom: 12px;
  z-index: 9;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--transition), transform var(--transition);
  pointer-events: none;
}

.produtoItem:hover .prod-cores {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.prod-cor-swatch {
  width: 38px;
  height: 38px;
  border-radius: 2px;
  background-color: var(--f-white);
  background-size: cover;
  background-position: center;
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.prod-cor-swatch:hover,
.prod-cor-swatch.ativo {
  border-color: var(--f-navy);
  transform: scale(1.12);
}

.prod-cor-swatch--indisponivel { opacity: 0.4; }

/* Card de ~174px no celular: 38px empilharia em 2 linhas a partir de 5 cores
   e cobriria metade da foto. 32px ainda é maior que os 28px antigos. */
@media (max-width: 768px) {
  .prod-cor-swatch { width: 32px; height: 32px; }
}

.produtoBadge {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 15;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 8px;
}

.produtoBadge--lancamento { background: var(--f-purple); color: var(--f-white); }
.produtoBadge--promocao, .produtoBadge--sale { background: var(--f-error); color: var(--f-white); }

/* Info produto */
.infoProduto {
  width: 100%;
  display: block;
  color: var(--f-charcoal);
  z-index: 2;
  float: left;
  padding-top: 8px;
}

.infoProduto > * { color: var(--f-gray-mid); font-weight: 300; }

.infoMarca {
  font-weight: 300;
  font-size: 9px;
  color: var(--f-gray-mid);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.infoNome {
  font-size: 13px;
  font-weight: 300;
  color: var(--f-black);
  line-height: 1.4;
  text-transform: capitalize;
  min-height: 40px;
  overflow: hidden;
}

.infoDe {
  font-size: 10px;
  margin-top: 6px;
  text-decoration: line-through;
  color: var(--f-gray-mid);
}

.infoPor {
  width: 100%;
  display: block;
  font-size: 13px;
  margin-top: 4px;
  font-weight: 700;
  color: var(--f-black);
}

.infoPor span { font-weight: 300; }

.infoCondicao { font-size: 11px; margin-top: 4px; color: var(--f-gray-mid); }

.infoParcelas { text-decoration: underline; font-weight: 700; }
.infoParcelas:hover { color: var(--f-pink); }

.infoQuantidade { display: none; }

.botaoIndisponivel {
  display: inline-block;
  background-color: var(--f-gray-light);
  color: var(--f-gray-mid);
  font-size: 10px;
  padding: 6px 12px;
  height: auto;
  margin-top: 8px;
  cursor: default;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.esgotado .infoCondicao {
  font-size: 13px;
  color: var(--f-white);
  background-color: var(--f-black);
  padding: 0 10px;
  line-height: 30px;
  z-index: 10;
}

@media screen and (max-width: 400px) {
  .infoImagem { margin: 0 5% 0 0; width: 40%; }
  .infoProduto { width: 55%; }
}

/* == 14. VITRINE == */
.vitrineLista {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.vitrineLista .formCol3 { margin: 15px 0; }

.pagVitrine { padding-bottom: var(--sp-2xl); }

/* Filtros à ESQUERDA, produtos à DIREITA */
.pagVitrine .internaConteudo .formLinha {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.pagVitrine .lateralDir { order: 2; float: none; }
.pagVitrine .lateralEsq { order: 1; float: none; }

.internaTopo {
  background-color: var(--f-purple-light);
  padding-top: 50px;
  padding-bottom: 30px;
}

.internaConteudo { padding: 40px 0; }

.internaTopo .titulo {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 400;
  color: var(--f-black);
  text-transform: none;
}

.vitrineQuantidade { line-height: 40px; margin: 10px 0 20px; }
.vitrineMostrar { margin-bottom: 20px; }
.vitrineMostrar form[name="form-ordenacao"] {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

@media screen and (max-width: 1024px) {
  .vitrineLista .formCol3 { width: 33.33333%; }
  .lateralEsq { width: 100%; margin-top: 40px; }
  .lateralDir { width: 100%; }
}

@media screen and (max-width: 700px) {
  .vitrineQuantidade { width: 100%; }
  .vitrineMostrar { width: 100%; }
  .vitrineMostrar form[name="form-ordenacao"] select { max-width: 60%; }
  .vitrineLista .formCol3 { width: 50%; }
}

@media screen and (max-width: 400px) {
  .vitrineLista .formCol3 { width: 100%; }
}

/* == 15. FILTROS SIDEBAR == */
.filtroSidebar { padding: 0; }

.filtroSidebarTitulo {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--f-black);
  font-weight: 400;
  margin-bottom: var(--sp-md);
  padding-bottom: var(--sp-sm);
  border-bottom: 2px solid var(--f-purple);
  display: block;
}

.filtroGrupo { margin-bottom: var(--sp-lg); }

.filtroGrupoTitulo {
  font-size: 11px;
  font-weight: 700;
  color: var(--f-gray-dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-sm);
  padding-bottom: var(--sp-xs);
  border-bottom: 1px solid var(--f-off-white);
}

.filtroLista { padding: 0; }

.filtroLink {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 6px 0;
  font-size: 13px;
  color: var(--f-gray-mid);
  font-weight: 300;
  text-decoration: none;
  transition: color var(--transition);
}

.filtroLink:hover { color: var(--f-pink); }
.filtroItem--ativo .filtroLink { color: var(--f-purple); font-weight: 400; }

.filtroCheck {
  width: 14px;
  height: 14px;
  border: 1px solid var(--f-gray-light);
  display: inline-flex;
  flex-shrink: 0;
  transition: all var(--transition);
}

.filtroItem--ativo .filtroCheck { background: var(--f-purple); border-color: var(--f-purple); }

/* Lateral como navegação (subcategorias), não como filtro: sem caixa de marcar. */
.filtroSidebar--nav .filtroGrupoTitulo {
  font-size: 12px;
  letter-spacing: 0.1em;
  border-bottom: 1px solid var(--f-gray-light);
  padding-bottom: var(--sp-sm);
  margin-bottom: var(--sp-sm);
}

.filtroSidebar--nav .filtroLink {
  display: block;
  padding: 8px 0;
  font-size: 14px;
  line-height: 1.3;
}

/* A seta só existe no acordeão mobile. */
.filtroSidebar--nav .filtroSeta { display: none; }

@media screen and (max-width: 1024px) {
  .filtroSidebar--nav .filtroGrupoTitulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding-top: var(--sp-sm);
    user-select: none;
  }

  .filtroSidebar--nav .filtroSeta {
    display: block;
    width: 12px;
    height: 7px;
    flex-shrink: 0;
    transition: transform var(--transition);
  }

  .filtroSidebar--nav .filtroGrupoTitulo[aria-expanded="false"] + .filtroLista { display: none; }
  .filtroSidebar--nav .filtroGrupoTitulo[aria-expanded="false"] .filtroSeta { transform: rotate(-90deg); }
}

/* Filtros lateral legado */
.menuLateralTitulo {
  font-family: var(--font-body);
  font-size: 22px;
  color: var(--f-charcoal);
  margin-bottom: 30px;
}

.menuLateralItem {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--f-off-white);
}

.menuLateralCategoria { font-size: 14px; color: var(--f-gray-dark); margin-bottom: 10px; font-weight: 700; }
.menuLateralListaItem { font-size: 14px; color: var(--f-gray-mid); line-height: 30px; }
.menuLateralListaItem:hover a { color: var(--f-pink); position: relative; left: 8px; }
.menuLateralListaItem a.ativo { color: var(--f-purple); position: relative; left: 8px; font-weight: 700; }

/* == 16. PAGINAÇÃO == */
.paginacao {
  width: 100%;
  float: left;
  display: table;
  border-top: 1px solid var(--f-off-white);
  margin-top: 20px;
}

.paginacaoLista { margin: auto; display: table; padding: 30px 0; }
.paginacaoItem { width: auto; display: inline-block; margin: 0 3px; }

.paginacaoItem a,
.paginacaoItemNumero {
  line-height: 36px;
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid transparent;
  font-size: 13px;
  color: var(--f-charcoal);
  transition: all var(--transition);
}

.paginacaoItem:hover a { border-color: var(--f-purple); color: var(--f-purple); }
.paginacaoItem:first-child a, .paginacaoItem:last-child a { border-radius: 0; }

.paginacaoItem--ativo a,
.paginacaoItem.ativo a {
  color: var(--f-white);
  font-weight: 700;
  background-color: var(--f-purple);
  border-color: var(--f-purple);
}

.paginacaoItem--inativo a,
.paginacaoItem.inativo a {
  color: var(--f-gray-light);
  cursor: not-allowed;
  text-decoration: none;
}

/* == 17. BREADCRUMB == */
.breadcrumb ol { border-bottom: 1px solid var(--f-off-white); }
.breadcrumb li { display: block; float: left; margin-right: 5px; line-height: 18px; }
.breadcrumb a { line-height: 18px; font-size: 10px; text-transform: uppercase; color: var(--f-gray-mid); }
.breadcrumb a.ativo { font-weight: 700; }
.breadcrumb li:nth-child(even) { font-size: 10px; }
.breadcrumb a:hover { color: var(--f-pink); }
.breadcrumb li:last-child a { font-weight: 700; color: var(--f-purple); }

/* == 18. DETALHE DO PRODUTO == */
.pagDetalhe.internaConteudo { padding: 0; }
.pagDetalhe .breadcrumb { margin-bottom: 15px; float: left; width: 100%; }
.pagDetalhe .breadcrumb ol { border: 0; }

#galeria { width: 100%; position: relative; }
#galeria #galeriaPrincipalAuxiliar { width: 100%; float: left; position: relative; overflow: hidden; }
#galeria #galeriaPrincipal { width: 100%; float: left; position: relative; }
#galeria #galeriaPrincipal a { width: 100%; height: 100%; position: absolute; }
#galeria #galeriaPrincipal > img { max-width: 100%; max-height: 100%; margin: auto; vertical-align: middle; }
#galeria #galeriaPrincipal.imgHor { display: flex; }
#galeria #galeriaPrincipal.imgVer > img { width: auto; height: 100%; }
#galeria #galeriaPrincipal.imgHor > img { height: auto; }
#galeria #galeriaPrincipal.imgProp > img { width: 100%; height: 100%; }

#galeria .galeriaPrincipalSeta {
  position: absolute;
  display: block;
  width: 50px; height: 80px;
  top: 50%; margin-top: -60px;
  z-index: 100;
  background-color: transparent;
  transition: all 300ms ease;
}

#galeria .galeriaPrincipalSeta.setaDesativada { display: none; }

#galeria .galeriaPrincipalSeta svg {
  width: 30px; height: 30px;
  position: absolute; top: 50%; left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

#galeria #galeriaPrincipalSetaAnt { left: 0; }
#galeria #galeriaPrincipalSetaProx { right: 0; }
#galeria #galeriaThumbs { width: 100%; float: left; position: relative; }
#galeria.semNav #galeriaThumbs { padding: 0; }
#galeria.comNav #galeriaThumbs { padding: 0 40px; }
#galeria #galeriaThumbsAuxiliar { width: 100%; display: block; height: 80px; overflow: hidden; float: left; position: relative; }
#galeria #galeriaLista { position: absolute; top: 0; left: 0; display: flex; }

#galeria .galeriaItem {
  float: left;
  margin: 0 2px;
  height: 80px;
  width: auto;
  cursor: pointer;
  opacity: 0.5;
  border: 2px solid transparent;
  transition: all var(--transition);
}

#galeria .galeriaItem.thumbAtiva { opacity: 1; border-color: var(--f-purple); }

#galeria .galeriaSeta {
  position: absolute;
  width: 38px; height: 80px;
  background-color: var(--f-charcoal);
}

#galeria .galeriaSeta:hover { background-color: var(--f-purple); }
#galeria .galeriaSeta.setaDesativada { opacity: 0.4; cursor: not-allowed; }
#galeria .galeriaSeta.setaDesativada:hover { background-color: var(--f-error); }
#galeria #galeriaSetaAnt { left: 0; }
#galeria #galeriaSetaProx { left: 0; }

#galeria.vertical #galeriaPrincipalAuxiliar { top: 0; left: 0; right: 0; bottom: 0; margin-left: 100px; width: auto; }
#galeria.vertical #galeriaThumbs { width: 100px; height: 100%; position: absolute; top: 0; left: 0; float: none; }
#galeria.vertical.comNav #galeriaThumbs { padding: 40px 0; }
#galeria.vertical #galeriaThumbsAuxiliar { width: 80px; height: 100%; }
#galeria.vertical #galeriaLista { position: absolute; width: 100%; top: 0; left: 0; display: block; }
#galeria.vertical .galeriaItem { margin: 0 0 20px; width: 80px; height: auto; }
#galeria.vertical .galeriaSeta { width: 80px; height: 38px; }
#galeria.vertical #galeriaSetaAnt { top: 0; }
#galeria.vertical #galeriaSetaProx { bottom: 0; }

/* Detalhe produto */
.pagDetalhe .produto .infoProduto:first-child { margin-top: 40px; border: 0; }
.pagDetalhe .produto .infoProduto { margin-bottom: 12px; }

.pagDetalhe .produto .infoMarca {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  color: var(--f-purple);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0;
}

.pagDetalhe .produto .infoNome {
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--f-black);
  max-height: none;
  font-weight: 400;
  min-height: 0;
}

.pagDetalhe .produto .infoDe { font-size: 15px; width: 100%; font-weight: 400; }
.pagDetalhe .produto .infoDe:before { content: 'De'; display: inline-block; margin-right: 8px; }
.pagDetalhe .produto .infoPor { font-size: 24px; font-weight: 700; }
.pagDetalhe .produto .infoCondicao { font-size: 12px; }
.pagDetalhe .produto .produtoSelect { border: 0; border-bottom: 1px solid var(--f-black); }

.pagDetalhe .tamanho { width: 100%; float: left; margin-top: 10px; }
.pagDetalhe .tamanho li {
  float: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--f-black);
  border: 1px solid var(--f-black);
  border-radius: 0;
  line-height: 16px;
  margin-right: 8px;
  padding: 10px 14px;
  position: relative;
  cursor: pointer;
  transition: all var(--transition);
}

.pagDetalhe .tamanho li:last-child { margin-right: 0; }
.pagDetalhe .tamanho li:hover:not(.indisponivel),
.pagDetalhe .tamanho li.ativo { border: 1px solid var(--f-purple); background: var(--f-purple); color: var(--f-white); }
.pagDetalhe .tamanho li.indisponivel { color: var(--f-gray-light); cursor: not-allowed; }
.pagDetalhe .tamanho li.indisponivel:before {
  content: '';
  width: 100%;
  height: 1px;
  background-color: var(--f-gray-light);
  position: absolute;
  top: 49%; left: 0;
  transform: rotate(30deg);
}

.pagDetalhe .cor { width: 100%; float: left; margin-top: 10px; }
.pagDetalhe .cor li {
  float: left;
  font-size: 14px;
  border: 2px solid var(--f-gray-light);
  border-radius: 0;
  line-height: 16px;
  margin-right: 10px;
  width: 50px;
  position: relative;
  cursor: pointer;
  transition: border-color var(--transition);
}

.pagDetalhe .cor li img { width: 100%; height: auto; }
.pagDetalhe .cor li:last-child { margin-right: 0; }
.pagDetalhe .cor li:hover:not(.indisponivel),
.pagDetalhe .cor li.ativo { border: 2px solid var(--f-purple); }
.pagDetalhe .cor li.indisponivel { opacity: 0.35; }

/* Animations */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.pagDetalhe .tamanho li .loading,
.pagDetalhe .cor li .loading {
  padding: 25%;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(255,255,255,0.6);
}

.pagDetalhe .tamanho li .loading svg,
.pagDetalhe .cor li .loading svg {
  padding: 25%;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  animation: spin 2000ms infinite linear;
}

/* Detalhe — aprimoramentos visuais 2025 */
.pagDetalhe .produto .infoNome {
  font-size: 30px !important;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.detalhe-eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--f-gray-mid);
  margin-bottom: 8px;
}

.detalhe-codigo {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--f-gray-mid);
  margin-bottom: 16px;
}

.detalhe-variacao-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--f-gray-mid);
  margin-bottom: 10px;
  margin-top: 8px;
}

.detalhe-sep {
  height: 1px;
  background: var(--f-off-white);
  margin: 16px 0;
  width: 100%;
  float: left;
}

.detalhe-frete-row {
  display: flex;
  gap: 0;
  align-items: center;
}
.detalhe-frete-row .formInput {
  flex: 1;
  width: auto !important;
  margin: 0 !important;
  height: 40px !important;
  line-height: 40px !important;
  font-size: 13px;
  border: 1px solid var(--f-gray-light) !important;
  float: none !important;
}
.detalhe-frete-row .formBotao {
  width: auto !important;
  min-width: 96px;
  height: 40px !important;
  line-height: 40px !important;
  margin: 0 !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
}

.detalhe-galeria-hero {
  position: relative;
  padding: 60px 0 80px;
}

#galeria .galeriaPrincipalSeta svg { fill: var(--f-black); }
#galeria .galeriaPrincipalSeta:hover svg { fill: var(--f-gray-dark); }

.detalhe-indique {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--f-gray-mid);
  border-bottom: 1px solid var(--f-gray-light);
  padding-bottom: 2px;
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid var(--f-gray-light);
  transition: all var(--transition);
  margin-top: 8px;
  height: auto;
  line-height: 1.4;
  float: none;
  width: auto;
}
.detalhe-indique:hover { color: var(--f-black); border-color: var(--f-black); }

@media screen and (max-width: 800px) {
  .pagDetalhe .produto .infoNome { font-size: 24px !important; }
}

/* Frete e demais botões detalhe */
.pagDetalhe .produto .formCombo { width: 100%; }
.pagDetalhe .produto .formCombo .formInput { margin: 10px 0; width: 65%; border: 1px solid var(--f-gray-mid); }
.pagDetalhe .produto .formCombo .formBotao { margin: 10px 0; background-color: var(--f-gray-mid); width: 35%; height: 40px; line-height: 40px; font-size: 12px; letter-spacing: 2px; }
.pagDetalhe .produto .formCombo .formBotao:hover { background-color: var(--f-black); }

.pagDetalhe .produto .formBotao.sucesso,
.pagDetalhe .produto .formBotao.erro {
  width: 100%;
  opacity: 0.9;
  background-color: var(--f-purple);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 4px;
  height: 54px;
  line-height: 54px;
  color: var(--f-white);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  cursor: pointer;
  transition: opacity 0.3s, background-color 0.3s;
}

.pagDetalhe .produto .formBotao.sucesso[disabled] {
  opacity: 0.5 !important;
  cursor: not-allowed;
  background-color: var(--f-gray-mid);
}

.pagDetalhe .produto .formBotao.sucesso svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.pagDetalhe .produto .formBotao.sucesso:hover,
.pagDetalhe .produto .formBotao.erro:hover { opacity: 1; background-color: var(--f-black); }

.pagDetalhe .produto .infoIndique {
  background-color: transparent;
  float: left;
  display: inline-block;
  line-height: 30px; height: 30px;
  width: auto;
  font-weight: 700; font-size: 13px;
  border-left: 1px solid var(--f-gray-dark);
  padding-left: 15px;
  color: var(--f-gray-dark);
}

.pagDetalhe .produto .infoIndique:hover { color: var(--f-black); border-left-color: var(--f-black); }

.detalhesProduto .tabela { border: 0; }
.detalhesProduto .tabela tr td:last-child { text-align: left; }

.avaliacoes .avaliacaoForm { width: 700px; margin: 0 auto; }
.avaliacaoEstrelas { display: table; margin: 0 auto 20px; }
.avaliacaoEstrelasItem { width: 30px; height: 30px; display: inline-block; margin: 0 5px; cursor: pointer; }
.avaliacaoEstrelasItem svg { width: 100%; height: 100%; }
.avaliacaoEstrelasItem svg * { fill: var(--f-black); }
.avaliacaoEstrelas .avaliacaoEstrelasItem svg:last-child { display: none; }
.avaliacaoEstrelasItem.ativo svg { display: none; }
.avaliacaoEstrelasItem.ativo svg:last-child { display: block; }
.avaliacoes label { font-size: 13px; line-height: 16px; }
.avaliacoes .formInput { background-color: var(--f-off-white); border: 1px solid var(--f-off-white); }
.avaliacoes textarea.formInput { min-height: 128px; }
.avaliacaoEstrelasConcluida .avaliacaoEstrelasItem { width: 18px; height: 18px; margin: 0 2px 15px; }
.avaliacaoItem { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--f-gray-light); }
.avaliacaoItem:last-child { border: 0; margin-bottom: 0; padding-bottom: 0; }
.avaliacaoTexto { margin-bottom: 10px; }
.avaliacaoNome { font-size: 15px; font-weight: 700; }
.avaliacaoLocal { font-size: 13px; }

.modal .tabela { border: 0; margin-bottom: 0; }
.modal .tabela thead tr { border-bottom: 1px solid var(--f-gray-light); }
.modal .tabela thead td { font-weight: 700; padding: 10px; }
.modal .tabela tbody td { font-size: 13px; text-align: left; }

.zoomContainer { z-index: 8000; }

@media screen and (max-width: 1200px) {
  .pagDetalhe .formCol1 { display: none; }
  .pagDetalhe .detalheGaleria { width: 58.33333%; }
}

@media screen and (max-width: 900px) {
  .pagDetalhe .formCol1 { display: none; }
  .pagDetalhe .detalheGaleria { width: 100%; }
  .pagDetalhe .produto { width: 100%; }
  .pagDetalhe .produto > * { width: 100%; }
  .avaliacoes .avaliacaoForm { width: 100%; }
}

/* == 19. FORMULÁRIOS == */
label {
  margin: 10px 0 0;
  line-height: 18px;
  float: left;
  font-weight: 300;
  color: var(--f-charcoal);
  font-size: 12px;
}

.formInput {
  width: 100%;
  margin: 10px 0;
  padding: 0 10px;
  display: block;
  line-height: 38px;
  height: 40px;
  background-color: var(--f-white);
  border: none;
  border-bottom: 1px solid var(--f-charcoal);
  float: left;
  font-size: 14px;
  color: var(--f-gray-mid);
  font-family: var(--font-body);
  font-weight: 300;
  transition: border-color var(--transition);
}

.formInput:focus { border-color: var(--f-purple); }
.formInput::-webkit-input-placeholder { color: var(--f-gray-light); }
.formInput:-moz-placeholder { color: var(--f-gray-light); }
.formInput::-moz-placeholder { color: var(--f-gray-light); }
.formInput:-ms-input-placeholder { color: var(--f-gray-light); }
a.formInput { text-align: center; }
textarea.formInput { min-height: 100px; max-height: 100px; line-height: 24px; padding: 10px; }
.formInput.erro { border-color: var(--f-error); background-color: #FFE4E4; }
input[type=checkbox].formInput { float: left; width: 16px; height: 16px; margin: 0 10px 0 0; padding: 0; }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus { -webkit-transition-delay: 9999s; }

.formBotao {
  width: 100%;
  margin: 15px 0 10px;
  text-align: center;
  float: right;
  line-height: 50px;
  letter-spacing: 4px;
  height: 50px;
  background-color: var(--f-charcoal);
  font-weight: 300;
  color: var(--f-white);
  text-transform: uppercase;
  font-family: var(--font-body);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color var(--transition);
}

.formBotao:hover,
.formBotao:focus,
.formBotao.ativo { background-color: var(--f-black); color: var(--f-white); }

.formBotao svg { width: 20px; height: 50px; display: block; margin: 0 auto; }

.formBotao:disabled,
.formBotao[disabled] { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

.formBotao:disabled:hover { background-color: var(--f-error); }

.formBotao.erro { background-color: var(--f-error); }
.formBotao.erro:hover { background-color: #c03030; }
.formBotao.erro svg * { fill: var(--f-white); }

.formBotao.sucesso {
  background-color: var(--f-purple);
  color: var(--f-white);
  letter-spacing: 4px;
  font-size: 13px;
}

.formBotao.sucesso:hover { background-color: #1e0f4a; }
.formBotao.sucesso svg * { fill: var(--f-white); }

.formCombo { float: left; width: 100%; }
.formCombo .formInput { width: 80%; margin-bottom: 0; }
.formCombo .formBotao { width: 20%; margin-top: 0; margin-bottom: 0; }
.formCombo .formBotao:hover svg { transform: scale(1.1); }

.formEsqueciLink {
  width: 100%;
  margin: 0 0 10px;
  display: block;
  line-height: 20px;
  text-align: right;
  float: left;
  font-weight: 400;
  font-size: 13px;
  color: var(--f-gray-mid);
}

.formEsqueciLink:hover { color: var(--f-pink); }

/* Alertas */
.alerta {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  margin-bottom: 20px;
  background-color: #FFFDE4;
  border: 1px solid #edd14e;
}

.alerta.erro { background-color: #FFE4E4; border: 1px solid var(--f-error); color: #BD1818; }
.alerta.sucesso { background-color: #F6FFE4; border: 1px solid #c2ed4e; color: var(--f-black); }

/* Tabelas */
.tabela {
  border: 1px solid var(--f-gray-light);
  border-collapse: collapse;
  padding: 0;
  margin: 0 0 30px;
  width: 100%;
  float: left;
}

.tabelaZebrada tbody tr:nth-child(odd) { background-color: var(--f-off-white); }
.tabela thead th { padding: 10px; text-align: center; background-color: var(--f-off-white); border-bottom: 1px solid var(--f-gray-light); }
.tabela thead th:first-child { text-align: left; }
.tabela tbody { background-color: var(--f-white); }
.tabela tbody td { padding: 10px; vertical-align: middle; text-align: center; border-bottom: 1px solid var(--f-gray-light); min-width: 110px; font-size: 13px; }
.tabela tbody td:first-child { text-align: left; min-width: 80px; }

/* == 20. BENEFITS BAR == */
.setor.benefitsBar {
  background: var(--f-purple-light);
  padding: var(--sp-xl) 0;
  border-top: 1px solid rgba(44,22,104,0.12);
  border-bottom: 1px solid rgba(44,22,104,0.12);
}

.benefitItem {
  float: left;
  text-align: center;
  padding: var(--sp-md) var(--sp-sm);
}

.benefitIcon { font-size: 28px; line-height: 1; display: block; margin-bottom: var(--sp-xs); }

.benefitNome {
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--f-purple);
  margin-bottom: 4px;
}

.benefitDesc {
  display: block;
  font-size: 11px;
  color: var(--f-gray-dark);
  line-height: 1.4;
  font-weight: 300;
}

/* == 21. NEWSLETTER == */
.newsletter {
  background-color: var(--f-purple);
  margin: 20px auto 60px;
  padding: 40px 0 0;
  overflow: visible;
}

.newsTopo { float: left; width: 100%; z-index: 2; position: relative; }

.newsTitulo {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 300;
  color: var(--f-white);
  text-align: center;
}

.newsTexto {
  font-size: 15px;
  font-weight: 300;
  color: rgba(255,255,255,0.75);
  text-align: center;
  width: 100%;
  display: block;
}

.newsCombo {
  float: left;
  width: 50%;
  margin: 20px 25% -40px;
  z-index: 2;
  position: relative;
}

.newsCombo .formCombo { width: 100%; margin: 15px 0; }

.newsCombo .formInput {
  width: 100%; height: 50px; line-height: 50px;
  margin: 0; padding-right: 120px;
  border: 1px solid var(--f-pink);
  border-right-color: transparent;
}

.newsCombo .formBotao {
  background-color: var(--f-pink);
  font-size: 14px;
  color: var(--f-white);
  font-weight: 700;
  width: 150px;
  position: absolute;
  top: 0; right: 0;
  letter-spacing: 3px;
  margin: 0;
  height: 50px;
}

.newsCombo .formBotao:hover { background-color: #d99aa0; }

@media screen and (max-width: 1024px) {
  .newsTopo { width: 80%; margin: 0 auto; float: none; }
  .newsCombo { width: 80%; margin-left: 10%; margin-right: 10%; }
}

@media screen and (max-width: 450px) {
  .newsCombo { margin-bottom: -25px; }
  .newsCombo .formInput { border-right-color: var(--f-charcoal); padding-right: 10px; }
  .newsCombo .formBotao { position: relative; width: 100%; }
}

/* == 22. RODAPÉ == */
.whatsappIcone {
  height: 80px;
  position: fixed;
  bottom: 25px;
  left: 25px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition);
}

.whatsappIcone:hover { transform: scale(1.08); }

@media screen and (max-width: 600px) { .whatsappIcone { display: none; } }

.rodapeCima { background-color: var(--f-purple-light); padding: 40px 0; }

.rodapeCima .linhaDivisoria {
  padding-top: 0;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--f-purple);
}

.rodapeCol { float: left; margin-right: 55px; }
.rodapeCol:last-child { float: right; margin-right: 0; }
.rodapeCol strong { display: inline; float: none; width: auto; }

.rodapeItem { margin-bottom: 40px; }
.rodapeItem:last-child { margin-bottom: 0; }

.rodapeTitulo {
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--f-black);
  text-transform: uppercase;
  margin-bottom: 20px;
  font-family: var(--font-body);
  display: block;
  border-bottom: 1px solid rgba(44,22,104,0.25);
  padding-bottom: 10px;
}

.rodapeSubtitulo { font-weight: 400; font-size: 13px; color: var(--f-gray-dark); margin-bottom: 10px; margin-top: 20px; }
.rodapeSubtitulo:first-child { margin-top: 0; }

.rodapeMenu { margin-bottom: 20px; }
.rodapeMenu:last-child { margin-bottom: 0; }

.rodapeMenuItem { margin-bottom: 10px; color: var(--f-gray-dark); font-size: 13px; }
.rodapeMenuItem:last-child { margin-bottom: 0; }
.rodapeMenuItem a { font-weight: 300; line-height: 20px; color: var(--f-gray-dark); }
.rodapeMenuItem a:hover { color: var(--f-pink); }

.rodapeRedes .rodapeMenuItem { width: auto; margin-right: 20px; }
.rodapeRedes .rodapeMenuItem:last-child { margin-right: 0; }
.rodapeRedes .rodapeMenuItem svg { width: 28px; height: 28px; }
.rodapeRedes .rodapeMenuItem:hover svg * { fill: var(--f-pink); }
.rodapeRedes .rodapeMenuItem { margin-bottom: 0; float: left; }

.rodapePagamento .rodapeMenuItem { width: auto; margin-right: 10px; margin-bottom: 0; float: left; }
.rodapePagamento .rodapeMenuItem:last-child { margin-right: 0; }

.rodapeBaixo { padding: 20px 0; background: var(--f-white); border-top: 1px solid var(--f-off-white); }
.rodapeBaixo p { width: 50%; float: left; line-height: 28px; font-weight: 300; font-size: 13px; color: var(--f-gray-mid); }
.rodapeBaixo p strong { font-weight: 700; color: var(--f-gray-dark); }
.rodapeBaixo p:last-child { text-align: right; }
.rodapeBaixo p:last-child a { display: inline-block; vertical-align: middle; }

@media screen and (max-width: 1024px) {
  .rodapeCol { width: 100%; margin-bottom: 40px; }
  .rodapeCol:last-child { margin-bottom: 0; }
  .rodapeBaixo { padding-left: 15px; padding-right: 15px; }
  footer .setor:first-child .conteudo { background-image: none; }
  .rodapeBaixo p { width: 100%; text-align: center; }
  .rodapeBaixo p:last-child { text-align: center; margin-top: 15px; }
}

/* == 23. WHATSAPP FLUTUANTE (ver acima) == */

/* == 24. MODAIS (display/position/z-index preservados) == */
.modal {
  width: 100%; height: 100%;
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  overflow: auto;
}

.modalAuxiliar1 {
  width: 100%; height: 100%;
  display: table;
  position: absolute;
  background-color: rgba(0,0,0,0.85);
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999;
}

.modalAuxiliar2 {
  vertical-align: middle;
  display: table-cell;
  position: static;
}

.modalConteudo {
  width: 500px;
  margin: 40px auto;
  position: relative;
  padding: 40px;
  background-color: var(--f-white);
  border-radius: 3px;
}

.modalTitulo {
  width: 100%;
  line-height: 32px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  color: var(--f-black);
  padding-right: 50px;
}

.modalSubTitulo { width: 100%; margin-top: 10px; line-height: 21px; }
.modalConteudoInterno { width: 100%; margin-top: 20px; }
.modalTexto { width: 100%; line-height: 18px; margin-top: 10px; float: left; }

.modalFechar {
  position: absolute;
  top: 20px; right: 20px;
  text-align: center;
  width: 32px; height: 32px;
  font-size: 44px;
  line-height: 30px;
  background-color: transparent;
  color: var(--f-gray-mid);
  transition: color var(--transition);
}

.modalFechar:hover { transform: scale(1.2); color: var(--f-pink); }

@media screen and (max-width: 600px) {
  .modalConteudo { width: 90%; margin: 40px 5%; padding: 30px; }
}

/* == 25. ÁREA DO CLIENTE == */
.pagCliente .formCol3 { }
.pagCliente .formCol7 { }

.anexarBotaoOriginal { display: none; }
.tabelaUpload { margin: 20px 0; }
.tabela.tabelaUpload tbody tr:hover span { color: var(--f-error); }
.tabela.tabelaUpload tbody tr td:nth-child(2) { text-align: right; }
.tabelaUpload span { font-size: 28px; }

.solicitacaoInfo { margin-bottom: 20px; font-weight: 300; }
.solicitacaoInfo strong { font-weight: 800; font-size: 13px; color: var(--f-black); }

.mensagemLista {
  float: left;
  border: 1px solid var(--f-off-white);
  padding: 20px;
  width: 100%;
  margin-bottom: 20px;
  background-color: var(--f-off-white);
  border-radius: 3px;
}

.mensagemLista > div > div:last-child > div { margin-bottom: 0; }
.mensagemRecebida { float: left; }
.mensagemEnviada { float: right; }

.mensagemItem {
  float: left;
  padding: 20px;
  width: 100%;
  margin-bottom: 20px;
  background-color: var(--f-white);
  border-radius: 3px;
}

.mensagemResponder textarea.formInput { border-width: 1px; }
textarea.formInput { max-height: 100px; min-height: 100px; }

.mensagemTopo { float: left; width: 100%; margin-bottom: 20px; border-bottom: 1px dotted var(--f-off-white); padding-bottom: 20px; }
.mensagemTopo > div { float: left; width: 50%; line-height: 20px; font-weight: 700; font-size: 13px; color: var(--f-black); }
.mensagemTopo > div:nth-child(even) { text-align: right; }
.mensagemRecebida .mensagemTopo > div { color: var(--f-pink); }

.mensagemCorpo.textoCorrido { float: left; width: 100%; margin-bottom: 0; font-weight: 300; color: var(--f-gray-mid); }
.mensagemCorpo img { max-width: 100px; height: auto; display: inline-block; border: 1px solid var(--f-gray-light); }

.listaArquivos { width: 100%; float: left; margin-bottom: 20px; }
.listaArquivosItem { width: 100%; float: left; margin-bottom: 15px; font-weight: 400; font-size: 12px; color: var(--f-gray-mid); }
.listaArquivosItem:last-child { margin-bottom: 0; }
.listaArquivosItem svg { width: 15px; height: 15px; display: inline-block; vertical-align: text-top; margin-right: 5px; }
.listaArquivosItem:hover { color: var(--f-purple); font-weight: 600; }
.listaArquivosItem:hover path { fill: var(--f-purple); }

@media screen and (max-width: 800px) {
  .pagCliente .formCol3 { width: 100%; }
  .pagCliente .formCol7 { width: 100%; }
  .pagCliente .formCol9 { width: 100%; }
  .pagCliente .formColFantasma { display: none; }
  .solicitacaoInfo { width: 100%; }
  .mensagemRecebida, .mensagemEnviada { width: 100%; }
  .mensagemTopo > div { width: 100%; }
  .mensagemTopo > div:nth-child(even) { text-align: left; }
}

/* == 26. CARRINHO E CHECKOUT == */
.pagCarrinho .cabecalho { text-align: center; }
.pagCarrinho .conteudo { width: 800px; }

.tabelaCarrinho tbody tr td:nth-child(1) { width: 80px; border-right: 0; }
.tabelaCarrinho tbody tr td:nth-child(2) { text-align: left; border-left: 0; }
.tabelaCarrinho tfoot tr td { line-height: 40px; padding: 10px; text-align: center; border-bottom: 1px solid var(--f-gray-light); }

.carrinhoImagem { width: 100%; height: auto; }
.carrinhoImagem img { width: 100%; margin: 0; }
.carrinhoNome { display: inline; font-weight: 700; }
.carrinhoNome:hover { text-decoration: underline; }
.carrinhoGrupo { display: table; margin: 0 auto; }

.carrinhoQuantidade {
  background-color: var(--f-white);
  width: 40px; height: 40px;
  line-height: 38px;
  border: 1px solid var(--f-gray-light);
  float: left;
  text-align: center;
  margin: 0;
}

.carrinhoAcao { width: 30px; float: left; margin: 0 0 0 10px; text-align: center; }
.carrinhoAcao svg { width: 20px; height: 40px; display: block; margin: 0 auto; }
.carrinhoAcao svg * { fill: var(--f-white); }
.carrinhoAcao:hover { opacity: 0.7; }
.carrinhoAtualiza { background-color: var(--f-gray-mid); }
.carrinhoRemove { background-color: var(--f-error); }
.carrinhoContinuar { background-color: var(--f-charcoal); }
.carrinhoFinalizar { background-color: var(--f-purple); }

.carrinhoTitulo {
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  float: left; width: 100%;
  text-align: left;
  line-height: 1.2;
  color: var(--f-black);
}

.carrinhoSubtitulo { margin-top: 5px; padding: 15px 0; float: left; width: 100%; line-height: 18px; border-top: 1px solid var(--f-off-white); }
.carrinhoBloco { padding: 30px; margin-bottom: 30px; border: 1px solid var(--f-gray-light); }
.carrinhoEl { float: left; margin: 5px 0; line-height: 16px; }
.carrinhoEl100 { width: 100%; }
.carrinhoEl50 { width: 50%; }
.carrinhoEl25 { width: 25%; }
.pagCarrinho .formCombo { margin: 0; width: 100%; }
.pagCarrinho .formCombo .formInput { background-color: var(--f-white); width: 65%; border-color: var(--f-gray-light); margin: 0; }
.pagCarrinho .formCombo .formBotao { background-color: var(--f-charcoal); width: 35%; margin: 0; height: 40px; line-height: 40px; }
.pagCarrinho .blocoFrete .carrinhoTitulo,
.pagCarrinho .blocoCupom .carrinhoTitulo { line-height: 50px; margin: 0; }

.tabelaValoresFinais thead tr th:first-child,
.tabelaValoresFinais tfoot tr td { line-height: 30px; padding: 10px; text-align: right; border-bottom: 1px solid var(--f-gray-light); }
.tabelaValoresFinais thead tr th:last-child,
.tabelaValoresFinais tfoot tr td:last-child { text-align: right; }

.carrinhoBandeira {
  background-color: var(--f-white);
  width: 100%;
  border: 2px solid var(--f-gray-light);
  text-align: center;
  padding: 20px 10px;
  cursor: pointer;
  transition: border-color var(--transition);
}

.carrinhoBandeira svg { display: block; margin: 10px auto; width: 50px; height: 50px; }
.carrinhoBandeira svg * { fill: var(--f-gray-mid); }
.carrinhoBandeira:hover, .carrinhoBandeira.ativo { border-color: var(--f-purple); }
.carrinhoBandeira:hover svg *, .carrinhoBandeira.ativo svg * { fill: var(--f-purple); }

.carrinhoProcesso {
  background-color: var(--f-off-white);
  margin-bottom: 30px;
  width: 100%;
  display: table;
}

.carrinhoProcesso li { display: table-cell; text-align: center; line-height: 50px; }
.carrinhoProcesso li.ativo { background-color: var(--f-purple); color: var(--f-white); font-weight: 700; }
.carrinhoProcesso li.erro { background-color: var(--f-error); color: var(--f-white); font-weight: 700; }

.carrinhoTopoRecibo { margin-bottom: 30px; }
.carrinhoTopoRecibo img { max-height: 50px; }
.carrinhoTopoRecibo p { text-align: center; line-height: 25px; }
.carrinhoTopoRecibo .formBotao { background-color: var(--f-purple); margin: 0; }
.carrinhoTopoRecibo .formBotao svg { width: 30px; height: 30px; }

.formaPagamento .formInput { background-color: var(--f-white); border: 1px solid var(--f-gray-light); margin: 5px 0; line-height: 40px; height: 40px; }

.listaCartoesConteudoItem { width: 100%; border-collapse: collapse; display: none; }
.listaCartoesConteudoItem.ativo { display: inline-table; }

.tabelaPedidos tr td { min-width: min-content; }
.tabelaPedidos a:hover { text-decoration: underline; }
.tabelaPedidos tr td:nth-child(1),
.tabelaPedidos tr td:nth-child(2) { width: 100px; min-width: 100px; }
.tabelaPedidos tr th:nth-child(3),
.tabelaPedidos tr td:nth-child(3) { text-align: left; }
.tabelaPedidos tr td:nth-child(4) { width: 110px; }
.tabelaPedidos tr td:nth-child(5) { width: 100px; min-width: 100px; }
.tabelaPedidos tr td:nth-child(5) img { margin: 0 auto; }
.tabelaPedidos tr td:nth-child(6) { width: 100px; min-width: 100px; }

.envioCodigo strong { font-size: 40px; }

@media screen and (max-width: 800px) {
  .pagCarrinho .conteudo { width: 90%; margin: 0 5%; }
  .carrinhoEl { width: 100%; }
  .carrinhoEl strong { font-size: 11px; }
  .tabela thead { display: none; }
  #site .tabela.tabelaCarrinho { display: block; }
  #site .tabela.tabelaCarrinho tbody { width: 100%; display: block; float: left; }
  #site .tabela.tabelaCarrinho tbody tr { width: 100%; display: block; float: left; border-bottom: 1px solid var(--f-gray-light); }
  #site .tabela.tabelaCarrinho tfoot tr { border: 0; }
  #site .tabela.tabelaCarrinho tfoot tr td { border: 0; }
  #site .tabela.tabelaCarrinho tfoot tr td:first-child { display: none; }
  #site .tabela.tabelaCarrinho tbody tr td { width: 50%; display: block; text-align: left; float: left; border: 0; }
  #site .tabela.tabelaCarrinho tbody tr td:first-child { width: 100px; height: 140px; }
  #site .tabela.tabelaCarrinho tbody tr td a { width: 100%; display: block; }
  #site .tabela.tabelaCarrinho tbody tr td img { width: 100%; }
  .carrinhoGrupo { float: left; }
  .pagCarrinho .formCol3,
  .pagCarrinho .formCol4 { width: 100%; }
  .pagCarrinho .formColFantasma { display: none; }
  .carrinhoTopoRecibo img { margin: 0 auto 20px; }
  .carrinhoTopoRecibo .formBotao { margin-top: 20px; }
  .carrinhoProcesso li { display: none; }
  .carrinhoProcesso li.ativo { display: block; }
  .envioCodigo strong { font-size: 22px; }
  #site .tabelaPedidos { width: 100%; display: block; }
  #site .tabelaPedidos tbody { width: 100%; display: block; float: left; }
  #site .tabelaPedidos tbody tr { width: 100%; display: block; float: left; border-bottom: 1px solid var(--f-gray-light); }
  #site .tabelaPedidos tbody tr td { width: 100%; display: block; float: left; border: 0; text-align: left; padding: 5px 10px; }
  #site .tabelaPedidos tbody tr td:nth-child(1),
  #site .tabelaPedidos tbody tr td:nth-child(2) { width: 50%; float: left; }
  #site .tabelaPedidos tbody tr td:nth-child(2) { text-align: right; }
  #site .tabelaPedidos tbody tr td:nth-child(3) { font-weight: 700; }
  #site .tabelaPedidos tbody tr td:nth-child(4),
  #site .tabelaPedidos tbody tr td:nth-child(5) { width: 50%; float: left; line-height: 30px; }
  .formaPagamento .formCol4 { width: 100%; }
  .pagamento .formCol4 { width: 100%; }
}

/* == 27. LOGIN / CADASTRO == */
.pagLogin .formCol6 { margin: 0 5%; width: 40%; }

@media screen and (max-width: 900px) {
  .pagLogin .formCol6 { width: 70%; margin: 0 auto; float: none; margin-bottom: 50px; border-bottom: 1px solid var(--f-gray-light); padding-bottom: 50px; }
  .pagLogin .formCol6:last-child { margin-bottom: 0; }
}

@media screen and (max-width: 500px) {
  .pagLogin .formCol6 { width: 100%; }
}

.pagCadastro .conteudo { width: 800px; }
.pagCadastro .cadastroTipo { display: none; }
.pagCadastro .termo { min-height: 200px; overflow: auto; padding: 20px; line-height: 22px; }

@media screen and (max-width: 900px) {
  .pagCadastro .conteudo { width: 90%; margin: 0 auto; }
  .pagCadastro .conteudo .cadastroTipo > * { width: 100%; }
}

/* == 28. TEXTOS CORRIDOS == */
.textoCorrido { line-height: 24px; margin-bottom: 20px; font-size: 15px; color: var(--f-gray-mid); }
.textoCorrido p { margin-bottom: 18px; font-family: var(--font-body); font-weight: inherit; color: inherit; }
.textoCorrido *:last-child { margin-bottom: 0; }
.textoCentralizado { text-align: center; }

.textoCorrido h3 {
  width: 100%;
  font-family: var(--font-body);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 20px;
  color: var(--f-black);
  margin-top: 50px;
  margin-bottom: 30px;
  text-align: center;
}

/* == FAQ == */
.faq-lista .faq-secao {
  width: 100%;
  font-family: var(--font-body);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--f-black);
  border-bottom: 1px solid var(--f-off-white);
  padding-bottom: 12px;
  margin-top: 48px;
  margin-bottom: 24px;
  text-align: left;
}

.faq-lista .faq-secao:first-child { margin-top: 0; }

.faq-lista .faq-pergunta {
  width: 100%;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--f-black);
  margin-top: 24px;
  margin-bottom: 8px;
  text-align: left;
  text-transform: none;
}

.faq-lista ul {
  margin: 0 0 18px;
  padding-left: 20px;
}

.faq-lista ul li {
  list-style: disc;
  margin-bottom: 6px;
}

/* == ABAS == */
.abasGrupo { float: left; width: 100%; }
.abas { float: left; width: 100%; position: relative; z-index: 1000; }
.abasItem { float: left; padding: 10px 20px; margin-right: -1px; border: 1px solid var(--f-gray-light); cursor: pointer; }
.abasItem.ativo { border-bottom: 1px solid var(--f-white); font-weight: 900; }
.abasConteudo { float: left; width: 100%; padding: 40px; border: 1px solid var(--f-gray-light); display: none; margin-top: -1px; }
.abasConteudo .texto:last-child { margin-bottom: 0; }
.abasConteudo img { margin: 0 auto; max-width: 100%; }
.abasConteudo .alerta { padding: 20px; }

/* == POSICIONAMENTO DE ELEMENTOS == */
.alinhar { height: 100%; width: 100%; position: fixed; bottom: 0; }
.alinharAux1 { height: 100%; padding: 0; margin: 0 auto; position: relative; display: table; }
.alinharAux2 { text-align: center; display: table-cell; vertical-align: middle; margin: 0 auto; }

.background { background-position: center; background-size: cover; background-repeat: no-repeat; background-color: var(--f-off-white); overflow: hidden; }
.backgroundImagem { opacity: 0; position: absolute; top: 100%; left: 0; }

.botaoVoltar { width: auto; margin: 0 auto 20px; display: table; float: none; padding: 0 20px; }

.infoBotao { background-color: #d2e9e1; }
.infoBotao:hover { background-color: #d2e9e1; transform: scale(1.05); }
.infoBotao.botaoIndisponivel { background-color: #ffa50a; }
.infoBotao.botaoIndisponivel:hover { background-color: #e09400; }
.infoBotao svg { display: inline-block; margin-right: 5px; }
.infoBotao span { display: inline-block; line-height: 50px; height: 50px; vertical-align: top; color: var(--f-black); font-size: 13px; }

/* Banners destaque */
.bannerDestaqueLista img { width: 100%; height: auto; }
.bannerDestaque { width: 100%; }

#modalImagem { width: 709px; }
#botaoFecharImagem { color: red; top: 73px; right: 50px; }

@media screen and (max-width: 1024px) {
  #modalImagem { width: 100%; }
  #botaoFecharImagem { top: 50px; right: 32px; }
  .bannerDestaqueLista .formCol6 { width: 100%; }
  .bannerDestaqueLista .bannerDestaque { width: 570px; margin: 15px auto; float: none; }
}

@media screen and (max-width: 700px) {
  #modalImagem { width: 100%; }
  .bannerDestaqueLista .bannerDestaque { width: 100%; }
}

.imagemCarrossel { width: 100%; height: auto; }

/* Instagram */
#eapps-instagram-feed-1 { z-index: 1; }
.instaFeed .conteudo:before { content: ''; position: absolute; z-index: 10; left: 0; right: 0; bottom: 0; height: 50px; background-color: var(--f-white); }
.instaFeed .eapps-instagram-feed-title {
  width: 100%; margin-bottom: 25px; float: left;
  font-family: var(--font-display);
  font-weight: 300; font-size: 30px; color: var(--f-black);
}

/* == 29. RESPONSIVO GERAL == */
@media screen and (max-width: 1024px) {
  .busca { width: 90%; }
  .busca .formInput { font-size: 18px; height: 50px; line-height: 50px; padding-right: 30px; }
  .busca .formBotao { width: 50px; height: 50px; }
  .busca svg { width: 20px; height: 50px; }
  .topoEsq { display: block; margin-left: 30px; }
  .topoCentro { position: relative; float: left; width: 120px; margin-top: 19px; top: auto; }

  .menuPrincipal {
    position: fixed;
    z-index: 9999;
    width: 280px;
    left: -280px;
    top: 0; bottom: 0;
    opacity: 0;
    direction: rtl;
    margin: 0;
    box-shadow: 0 0 25px rgba(0,0,0,0.4);
    transition: all 300ms ease-in-out;
    overflow-y: auto;
    background: var(--f-white);
  }

  .menuPrincipal::-webkit-scrollbar { -webkit-appearance: none; }
  .menuPrincipal::-webkit-scrollbar:vertical { width: 0; }

  .menuPrincipal.ativo {
    transform: translateX(280px);
    opacity: 1;
  }

  .menuPrincipal * { width: 100%; text-align: left; }
  .menuPrincipal.direita { display: none; }

  .menuTitulo {
    padding: 28px 15px;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 400;
    color: var(--f-black);
    background-color: var(--f-white);
    border-bottom: 2px solid var(--f-purple);
  }

  .menuLista {
    width: 100%;
    display: block;
    min-height: 100%;
    background-color: var(--f-off-white);
    position: absolute;
    top: 0; left: 0;
    z-index: 1000;
  }

  .menuListaItem { width: 100%; display: block; border-bottom: 1px solid var(--f-gray-light); }
  .menuVoltar { padding: 10px 15px; background-color: var(--f-gray-mid); color: var(--f-white); font-size: 13px; line-height: 40px; cursor: pointer; }
  .menuVoltar:hover { background-color: var(--f-gray-dark); }

  .menuLink { position: relative; padding: 10px 15px; font-size: 13px; line-height: 30px; color: var(--f-gray-dark); }
  .menuLink:hover { background-color: var(--f-pink); color: var(--f-white); }
  .menuVoltar { display: none; }

  #topo.conteudo { width: 90%; }
  .menuPrincipal:not(.direita) { }
  .menuPrincipal:not(.direita) > .menuLista { overflow-y: auto; height: 100%; }
  .menuPrincipal:not(.direita) > .menuLista > .menuListaItem { margin-right: 0; }
  .menuPrincipal:not(.direita) > .menuLista > .menuListaItem > * { line-height: 50px; }
  .menuPrincipal:not(.direita) > .menuLista > .menuListaItem:nth-last-child(-n+2) { display: block; }

  .menuPrincipal:not(.direita) > .menuLista > .menuListaItem:hover > .menuLista2 {
    display: block;
    width: 100%;
    min-width: 100%;
    float: left;
    position: relative;
    top: 0; left: 0; right: auto;
    padding: 0;
    box-shadow: none;
    -webkit-column-count: 1;
    column-count: 1;
    border-top: 0;
  }

  .menuPrincipal:not(.direita) > .menuLista > .menuListaItem:hover > .menuLista2 > .menuListaItem { width: 100%; padding: 0; margin-bottom: 0; }
  .menuPrincipal:not(.direita) > .menuLista > .menuListaItem:hover > .menuLista2 > .menuListaItem > .menuLink { margin-bottom: 0; }
  .menuPrincipal:not(.direita) > .menuLista > .menuListaItem:hover > .menuLista2 > .menuListaItem > .menuLink:hover { background-color: var(--f-pink); color: var(--f-white); }
}

@media screen and (max-width: 800px) {
  .internaTopo { padding-top: 140px; }
  .internaTopo .titulo { font-size: 30px; }
}

@media screen and (max-width: 520px) {
  .topoEsq { margin: 20px 15px 20px; }
  .topoDir { margin: 20px 15px 20px 0; }
  .topoDir > *:first-child { margin-left: 0; }
  .topoCentro { width: 100px; margin-top: 13px; }
  .login { width: 90%; }
}

/* ============================================================
   ÁREA DO CLIENTE
   ============================================================ */

.pagCliente .internaConteudo { padding: 48px 0 80px; }

.cliente-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  align-items: start;
}

/* Sidebar nav */
.cliente-nav {
  position: sticky;
  top: 130px;
  border: 1px solid var(--f-gray-light);
  padding: 24px 0;
}

.cliente-nav__titulo {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--f-gray-mid);
  padding: 0 24px 16px;
  border-bottom: 1px solid var(--f-off-white);
  margin-bottom: 8px;
  display: block;
}

.cliente-nav__link {
  display: block;
  padding: 10px 24px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--f-gray-dark);
  transition: all var(--transition);
  border-left: 2px solid transparent;
}
.cliente-nav__link:hover { color: var(--f-black); background: var(--f-off-white); }
.cliente-nav__link--ativo { color: var(--f-black); border-left-color: var(--f-black); background: var(--f-off-white); }
.cliente-nav__link--sair { color: var(--f-error); margin-top: 8px; border-top: 1px solid var(--f-off-white); }
.cliente-nav__link--sair:hover { background: #fff0f0; }

/* Content area */
.cliente-conteudo__titulo {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--f-black);
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--f-gray-light);
}

/* Pedidos list */
.pedidos-lista { display: flex; flex-direction: column; gap: 12px; }

.pedido-card {
  border: 1px solid var(--f-gray-light);
  padding: 20px 24px;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 8px 24px;
  align-items: center;
  transition: border-color var(--transition), background var(--transition);
  text-decoration: none;
  color: inherit;
}
.pedido-card:hover { border-color: var(--f-black); background: var(--f-off-white); }

.pedido-card__codigo {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  color: var(--f-black);
}
.pedido-card__info { display: flex; flex-direction: column; gap: 2px; }
.pedido-card__nome { font-size: 13px; color: var(--f-black); }
.pedido-card__data { font-size: 11px; color: var(--f-gray-mid); letter-spacing: 0.04em; }
.pedido-card__valor {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--f-black);
  text-align: right;
}
.pedido-card__pagamento img { height: 24px; width: auto; display: block; }

.pedido-status-badge {
  display: inline-block;
  padding: 3px 10px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--f-gray-light);
  color: var(--f-gray-dark);
  white-space: nowrap;
}
.pedido-status-badge--confirmado { border-color: #27ae60; color: #27ae60; }
.pedido-status-badge--cancelado  { border-color: var(--f-error); color: var(--f-error); }
.pedido-status-badge--transporte { border-color: #2980b9; color: #2980b9; }

/* Pedido status tracker */
.pedido-tracker {
  display: flex;
  gap: 0;
  margin-bottom: 32px;
  border: 1px solid var(--f-gray-light);
  overflow: hidden;
}
.pedido-tracker__step {
  flex: 1;
  text-align: center;
  padding: 14px 8px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--f-gray-mid);
  background: var(--f-off-white);
  border-right: 1px solid var(--f-gray-light);
}
.pedido-tracker__step:last-child { border-right: none; }
.pedido-tracker__step--ativo { background: var(--f-black); color: var(--f-white); }
.pedido-tracker__step--erro   { background: var(--f-error); color: var(--f-white); }

/* Empty state */
.cliente-vazio {
  text-align: center;
  padding: 60px 0;
}
.cliente-vazio__titulo {
  font-family: var(--font-display);
  font-size: 26px;
  font-style: italic;
  color: var(--f-black);
  margin-bottom: 12px;
}
.cliente-vazio__desc { font-size: 14px; color: var(--f-gray-mid); margin-bottom: 28px; }

@media screen and (max-width: 860px) {
  .cliente-layout { grid-template-columns: 1fr; }
  .cliente-nav { position: static; display: flex; gap: 0; flex-wrap: wrap; padding: 0; }
  .cliente-nav__titulo { display: none; }
  .cliente-nav__link { padding: 10px 16px; }
}

/* ============================================================
   AUTH — Login · Identificação · Cadastro · Redefinir Senha
   ============================================================ */

/* Split layout */
.auth-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 200px);
  align-items: stretch;
}

.auth-col-form {
  padding: 60px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-col-deco {
  position: relative;
  overflow: hidden;
  background: var(--f-off-white);
}
.auth-col-deco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.auth-col-deco__overlay {
  position: absolute;
  inset: 0;
  background: rgba(32,41,61,0.45);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 48px;
}
.auth-col-deco__quote {
  font-family: var(--font-display);
  font-size: 30px;
  font-style: italic;
  font-weight: 300;
  color: var(--f-white);
  line-height: 1.3;
  margin-bottom: 16px;
}
.auth-col-deco__sub {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}

.auth-eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--f-gray-mid);
  margin-bottom: 10px;
}
.auth-titulo {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
  color: var(--f-black);
  margin-bottom: 32px;
  line-height: 1.1;
}

/* Login two-block (Já sou cadastrado / Quero me cadastrar) */
.auth-blocos {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0 40px;
  align-items: stretch;
}

.auth-bloco {
  display: flex;
  flex-direction: column;
}

.auth-bloco form {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.auth-bloco-sep {
  background: var(--f-gray-light);
  align-self: stretch;
}

.auth-bloco__titulo {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--f-black);
  margin-bottom: 24px;
}

/* Linha: label Senha + link Esqueci */
.cad-senha-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
}

.cad-senha-row .cad-label { margin-bottom: 0; }

/* Esqueci a senha link */
.auth-esqueci {
  display: inline-block;
  font-size: 11px;
  color: var(--f-gray-mid);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: color var(--transition);
  line-height: 1;
}
.auth-esqueci:hover { color: var(--f-black); }

/* Auth centered (para redefinir senha, sucesso) */
.auth-center {
  max-width: 480px;
  margin: 80px auto 100px;
  text-align: center;
}
.auth-center .auth-titulo { font-size: 28px; margin-bottom: 8px; }
.auth-center .auth-desc   { font-size: 14px; color: var(--f-gray-dark); margin-bottom: 32px; }
.auth-center .formInput   { text-align: left; }
.auth-center .formBotao   { margin-top: 8px; }

/* Sucesso cadastro */
.auth-sucesso-icone {
  width: 64px; height: 64px;
  background: var(--f-success);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}
.auth-sucesso-icone svg { fill: var(--f-white); width: 28px; height: 28px; }

/* Cadastro full form */
.pagCadastro .internaTopo { padding-bottom: 20px; }
.pagCadastro .internaConteudo { padding: 48px 0 80px; }

.cad-tabs {
  display: flex;
  border-bottom: 1px solid var(--f-gray-light);
  margin-bottom: 40px;
}
.cad-tab {
  padding: 12px 32px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--f-gray-mid);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--transition);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
.cad-tab:hover { color: var(--f-black); }
.cad-tab--ativo { color: var(--f-black); border-bottom-color: var(--f-black); font-weight: 400; }

.cad-secao { margin-bottom: 36px; }
.cad-secao__eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--f-gray-mid);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--f-off-white);
}

.cad-form { display: none; }
.cad-form--ativo { display: block; }

.cad-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--f-gray-dark);
  margin-bottom: 2px;
  margin-top: 16px;
}

.termo-box {
  border: 1px solid var(--f-gray-light);
  padding: 16px;
  max-height: 160px;
  overflow-y: auto;
  font-size: 13px;
  color: var(--f-gray-dark);
  line-height: 1.6;
  margin-bottom: 16px;
  background: var(--f-off-white);
}

/* Mensagem de erro logo abaixo do campo (servidor e validação do navegador) */
.cad-erro {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: var(--f-error);
  margin: 6px 0 2px;
}
/* Dentro das colunas, label e input são float: sem clear a mensagem sobe
   para o topo da coluna e cobre o label. Fora delas (termos) fica bloco
   normal, senão o float espreme a linha do botão. */
[class*="formCol"] > .cad-erro {
  float: left;
  clear: both;
  width: 100%;
}

.cad-aceito {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--f-gray-dark);
  cursor: pointer;
  margin-bottom: 24px;
}
.cad-aceito input[type=checkbox] {
  width: 16px; height: 16px;
  margin: 0; padding: 0;
  flex-shrink: 0;
  cursor: pointer;
  float: none;
}

/* Modal de recuperar senha */
.modal .modalConteudo { padding: 40px; max-width: 440px; width: 90vw; }
.modal .modalTitulo   {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  color: var(--f-black);
  margin-bottom: 20px;
}
.modal .modalFechar {
  position: absolute;
  top: 16px; right: 16px;
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--f-gray-mid);
  line-height: 1;
}
.modal .modalFechar:hover { color: var(--f-black); }

@media screen and (max-width: 860px) {
  .auth-layout { grid-template-columns: 1fr; }
  .auth-col-deco { display: none; }
  .auth-col-form { padding: 48px 24px; }
  .auth-blocos { grid-template-columns: 1fr; }
  .auth-bloco-sep { display: none; }
}

/* ============================================================
   CHECKOUT — Sacola · Pagamento · Recibo
   ============================================================ */

/* -- Step Indicator -- */
.checkout-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.checkout-step { color: var(--f-gray-light); }
.checkout-step--ativo { color: var(--f-black); font-weight: 400; }
.checkout-step-sep { color: var(--f-gray-light); }

/* -- Alertas inline -- */
.checkout-alerta {
  padding: 14px 20px;
  margin: 24px 0 0;
  font-size: 13px;
  font-family: var(--font-body);
  border-left: 3px solid transparent;
}
.checkout-alerta--erro   { background: #fff0f0; border-color: var(--f-error); color: #a00; }
.checkout-alerta--aviso  { background: #fffbe6; border-color: #d4a017; color: #6b4c00; }

/* ── SACOLA (carrinho) ── */
.pagSacola .internaConteudo { padding: 48px 0 80px; }

.sacola-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  align-items: start;
}

/* Product list */
.sacola-lista { border-top: 1px solid var(--f-gray-light); }

.sacola-item {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--f-gray-light);
  align-items: start;
}

.sacola-item__imagem {
  display: block;
  width: 100px;
  flex-shrink: 0;
}
.sacola-item__imagem img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
  background: var(--f-off-white);
}

.sacola-item__info { display: flex; flex-direction: column; gap: 6px; }

.sacola-item__nome {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  color: var(--f-black);
  line-height: 1.2;
  display: block;
}
.sacola-item__nome:hover { color: var(--f-pink); }

.sacola-item__var,
.sacola-item__codigo {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--f-gray-mid);
}

.sacola-item__acoes {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}

/* Quantity control */
.sacola-qtd {
  display: flex;
  align-items: center;
  border: 1px solid var(--f-gray-light);
  height: 36px;
}
.sacola-qtd__btn {
  width: 34px;
  height: 34px;
  background: none;
  border: none;
  font-size: 18px;
  color: var(--f-gray-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
  line-height: 1;
}
.sacola-qtd__btn:hover { background: var(--f-off-white); color: var(--f-black); }
.sacola-qtd__input {
  width: 40px;
  height: 34px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--f-gray-light);
  border-right: 1px solid var(--f-gray-light);
  font-size: 14px;
  color: var(--f-black);
  background: var(--f-white);
  margin: 0;
  padding: 0;
  float: none;
}

.sacola-item__remover {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--f-gray-mid);
  display: flex;
  align-items: center;
  padding: 4px;
  transition: color var(--transition);
}
.sacola-item__remover:hover { color: var(--f-error); }
.sacola-item__remover svg { fill: currentColor; display: block; }

/* Price column */
.sacola-item__preco {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 90px;
}
.sacola-item__total {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--f-black);
}
.sacola-item__unitario {
  font-size: 11px;
  color: var(--f-gray-mid);
  letter-spacing: 0.04em;
}

.sacola-continuar {
  display: inline-block;
  margin-top: 28px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--f-gray-mid);
  border-bottom: 1px solid var(--f-gray-light);
  padding-bottom: 2px;
  transition: all var(--transition);
}
.sacola-continuar:hover { color: var(--f-black); border-color: var(--f-black); }

/* Summary sidebar */
.sacola-resumo {
  position: sticky;
  top: 130px;
  background: var(--f-off-white);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sacola-resumo__titulo {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--f-black);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--f-gray-light);
}

.sacola-resumo__bloco { display: flex; flex-direction: column; gap: 10px; }

.sacola-resumo__label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--f-gray-mid);
  font-weight: 400;
}

.sacola-frete-form { display: flex; gap: 0; }
.sacola-frete-form .formInput {
  flex: 1;
  margin: 0;
  height: 44px;
  line-height: 44px;
  border-bottom: 1px solid var(--f-gray-light);
  background: var(--f-white);
  font-size: 13px;
  float: none;
}
.sacola-frete-btn {
  background: var(--f-black);
  color: var(--f-white);
  border: none;
  padding: 0 18px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition);
  height: 44px;
}
.sacola-frete-btn:hover { background: var(--f-charcoal); }

#table_frete { font-size: 13px; }
#table_frete table { width: 100%; border-collapse: collapse; }
#table_frete td { padding: 8px 4px; border-bottom: 1px solid var(--f-gray-light); font-size: 12px; }

.sacola-resumo__linha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--f-gray-dark);
}
.sacola-resumo__linha--total {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--f-black);
  padding-top: 14px;
  border-top: 1px solid var(--f-gray-light);
  margin-top: 4px;
}

.sacola-finalizar {
  width: 100%;
  margin: 0;
  letter-spacing: 0.18em;
  height: 54px;
  line-height: 54px;
  font-size: 11px;
}

.sacola-selos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 11px;
  color: var(--f-gray-mid);
  letter-spacing: 0.06em;
}
.sacola-selos svg { fill: currentColor; flex-shrink: 0; }

/* Empty state */
.sacola-vazia {
  text-align: center;
  padding: 80px 0 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.sacola-vazia__titulo {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 300;
  color: var(--f-black);
  font-style: italic;
}
.sacola-vazia__desc { font-size: 14px; color: var(--f-gray-mid); }

@media screen and (max-width: 900px) {
  .sacola-layout { grid-template-columns: 1fr; }
  .sacola-resumo { position: static; }
}
@media screen and (max-width: 600px) {
  .sacola-item { grid-template-columns: 80px 1fr; }
  .sacola-item__preco { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .sacola-item__imagem { width: 80px; }
}

/* ── PAGAMENTO ── */
.pagPagamento .internaConteudo { padding: 48px 0 80px; }

.pag-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 48px;
  align-items: start;
}

.pag-col-main { display: flex; flex-direction: column; gap: 32px; }

.pag-bloco {
  border: 1px solid var(--f-gray-light);
  padding: 28px 32px;
}

.pag-bloco__titulo {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--f-black);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--f-gray-light);
}

.pag-dados-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
}
.pag-dado { font-size: 13px; color: var(--f-gray-dark); }
.pag-dado strong { color: var(--f-black); font-weight: 400; }
.pag-dado--full { grid-column: 1 / -1; }

/* Products in pagamento */
.pag-produtos-lista { display: flex; flex-direction: column; gap: 0; }
.pag-produto-item {
  display: grid;
  grid-template-columns: 60px 1fr auto auto;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--f-off-white);
  align-items: center;
}
.pag-produto-item img { width: 60px; aspect-ratio: 3/4; object-fit: cover; background: var(--f-off-white); }
.pag-produto-nome { font-size: 13px; color: var(--f-black); }
.pag-produto-qtd  { font-size: 12px; color: var(--f-gray-mid); text-align: center; }
.pag-produto-preco { font-size: 13px; color: var(--f-black); text-align: right; white-space: nowrap; }

/* Coupon */
.pag-cupom-form { display: flex; gap: 0; }
.pag-cupom-form .formInput { flex: 1; margin: 0; height: 44px; line-height: 44px; float: none; font-size: 13px; }
.pag-cupom-btn {
  background: var(--f-black);
  color: var(--f-white);
  border: none;
  padding: 0 20px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition);
  white-space: nowrap;
  height: 44px;
}
.pag-cupom-btn:hover { background: var(--f-charcoal); }
.pag-cupom-msg {
  margin-top: 8px;
  font-size: 12px;
  padding: 8px 12px;
}
.pag-cupom-msg--ok  { background: #f0fff4; color: #1a6630; border-left: 3px solid #27ae60; }
.pag-cupom-msg--err { background: #fff0f0; color: #a00; border-left: 3px solid var(--f-error); }

/* Shipping options */
.pag-frete-lista { display: flex; flex-direction: column; gap: 0; }
.pag-frete-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--f-off-white);
  cursor: pointer;
}
.pag-frete-item:last-child { border-bottom: none; }
.pag-frete-radio {
  width: 18px; height: 18px;
  border: 1px solid var(--f-gray-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* zera o margin-top herdado da regra genérica de label, que desalinhava o bullet do nome */
  margin: 0;
  transition: border-color var(--transition);
}
.pag-frete-item input[type=radio] { display: none; }
.pag-frete-item input[type=radio]:checked + .pag-frete-radio {
  border-color: var(--f-black);
  background: var(--f-black);
}
.pag-frete-item input[type=radio]:checked + .pag-frete-radio::after {
  content: '';
  width: 6px; height: 6px;
  background: var(--f-white);
  border-radius: 50%;
  display: block;
}
.pag-frete-nome { flex: 1; font-size: 13px; color: var(--f-black); }
.pag-frete-prazo { font-size: 12px; color: var(--f-gray-mid); }
.pag-frete-valor { font-size: 13px; color: var(--f-black); font-weight: 400; text-align: right; min-width: 70px; }

/* Payment method cards */
.pag-metodos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.pag-metodo-card {
  border: 1px solid var(--f-gray-light);
  padding: 18px 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  position: relative;
}
.pag-metodo-card input[type=radio] { display: none; }
.pag-metodo-card--ativo {
  border-color: var(--f-black);
  background: var(--f-off-white);
}
.pag-metodo-icone {
  font-size: 24px;
  display: block;
  margin-bottom: 8px;
  color: var(--f-gray-dark);
}
/* Bullet de seleção da forma de pagamento */
.pag-metodo-bullet {
  display: block;
  width: 18px;
  height: 18px;
  margin: 0 auto 10px;
  border: 1px solid var(--f-gray-mid);
  border-radius: 50%;
  background: var(--f-white);
  position: relative;
  transition: border-color var(--transition);
}
.pag-metodo-bullet::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--f-black);
  opacity: 0;
  transition: opacity var(--transition);
}
.pag-metodo-card:hover .pag-metodo-bullet { border-color: var(--f-black); }
.pag-metodo-card--ativo .pag-metodo-bullet { border-color: var(--f-black); }
.pag-metodo-card--ativo .pag-metodo-bullet::after,
.pag-metodo-card input[type=radio]:checked ~ .pag-metodo-bullet::after { opacity: 1; }
.pag-metodo-nome {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--f-black);
  display: block;
}
.pag-metodo-valor {
  font-size: 12px;
  font-weight: 500;
  color: var(--f-black);
  display: block;
  margin-top: 4px;
}

/* Card form */
.pag-cartao-form { display: none; }
.pag-cartao-form.ativo { display: block; }
.pag-cartao-form .formInput { background: var(--f-white); }

.pag-bandeiras {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 16px;
}
.pag-bandeiras img {
  height: 24px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.4;
  transition: all var(--transition);
}
.pag-bandeiras img.ativo { filter: none; opacity: 1; }

/* Summary sidebar (pagamento) */
.pag-resumo {
  position: sticky;
  top: 130px;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--f-off-white);
}

.pag-resumo__head {
  padding: 24px 28px;
  border-bottom: 1px solid var(--f-gray-light);
}
.pag-resumo__titulo {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--f-black);
}

.pag-resumo__body { padding: 20px 28px; }

.pag-resumo__linha {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--f-gray-dark);
  padding: 8px 0;
  border-bottom: 1px solid var(--f-off-white);
}
.pag-resumo__linha--total {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--f-black);
  border-bottom: none;
  padding-top: 16px;
  margin-top: 4px;
  border-top: 1px solid var(--f-gray-light);
}

.pag-submeter {
  display: block;
  width: calc(100% - 56px);
  margin: 0 28px 28px;
  height: 54px;
  line-height: 54px;
  font-size: 11px;
  letter-spacing: 0.18em;
  background: var(--f-black);
  color: var(--f-white);
  text-align: center;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  transition: background var(--transition);
}
.pag-submeter:hover { background: var(--f-charcoal); }
.pag-submeter:disabled { opacity: 0.35; cursor: not-allowed; }

.pag-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 28px 20px;
  font-size: 11px;
  color: var(--f-gray-mid);
  letter-spacing: 0.06em;
}
.pag-seg svg { fill: currentColor; flex-shrink: 0; }

@media screen and (max-width: 960px) {
  .pag-layout { grid-template-columns: 1fr; }
  .pag-resumo { position: static; }
}
@media screen and (max-width: 600px) {
  .pag-metodos-grid { grid-template-columns: 1fr 1fr; }
  .pag-dados-grid { grid-template-columns: 1fr; }
  .pag-produto-item { grid-template-columns: 56px 1fr auto; }
  .pag-produto-qtd { display: none; }
}

/* ── RECIBO ── */
.pagRecibo .internaConteudo { padding: 48px 0 80px; }

.recibo-layout { display: flex; flex-direction: column; gap: 28px; }

.recibo-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 28px 32px;
  background: var(--f-off-white);
  border-left: 4px solid var(--f-success);
}
.recibo-hero__icone {
  width: 48px; height: 48px;
  background: var(--f-success);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.recibo-hero__icone svg { fill: var(--f-white); width: 22px; height: 22px; }
.recibo-hero__titulo {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  color: var(--f-black);
}
.recibo-hero__sub { font-size: 13px; color: var(--f-gray-dark); margin-top: 4px; }

.recibo-bloco {
  border: 1px solid var(--f-gray-light);
  padding: 28px 32px;
}
.recibo-bloco__titulo {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  color: var(--f-black);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--f-gray-light);
}

.recibo-dados-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 32px;
}
.recibo-dado { font-size: 13px; color: var(--f-gray-dark); }
.recibo-dado strong { color: var(--f-black); font-weight: 400; }
.recibo-dado--full { grid-column: 1 / -1; }

.recibo-ctas {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.recibo-ctas .formBotao { width: auto; min-width: 200px; margin: 0; }

@media screen and (max-width: 600px) {
  .recibo-dados-grid { grid-template-columns: 1fr; }
  .recibo-ctas { flex-direction: column; }
  .recibo-ctas .formBotao { width: 100%; }
}

/* Quatro produtos por linha nas vitrines, mantendo o layout mobile.
   Sem lateral (shop by size, busca, ver todos) cabe mais uma coluna. */
@media (min-width: 1024px) {
  .pagVitrine .vitrineLista > .item-produto { width: 25%; }
  .pagVitrine .vitrineLista--5col > .item-produto { width: 20%; }
}