/* Container */
.mahina-eg.swiper { position: relative; width: 100%; }

/* Navegação/paginação */
.mahina-eg-button-prev,
.mahina-eg-button-next {
  position: absolute; top: 50%; width: 32px; height: 32px;
  margin-top: -16px; z-index: 5; cursor: pointer;
  background: rgba(0,0,0,0.35); border-radius: 999px;
}
.mahina-eg-button-prev { left: 6px; }
.mahina-eg-button-next { right: 6px; }
.mahina-eg-pagination { margin-top: 8px; }

/* Card 2:3 */
.mahina-eg-card {
  position: relative; width: 100%;
  aspect-ratio: 2 / 3; overflow: hidden; /*border-radius: 10px*/;
}
.mahina-eg-card > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Área dos pontos */
.mahina-eg-hotspots { position: absolute; inset: 0; }

/* Dot */
.mahina-eg-dot {
  position: absolute; transform: translate(-50%, -50%);
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #fff; background: rgba(0,0,0,0.65);
  cursor: pointer; outline: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.35);
}

/* Tooltip (Work Sans 10px/400) */
.mahina-eg-tip {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  padding: 4px 6px; border-radius: 6px;
  background: rgba(0,0,0,0.75); color: #fff;
  font-family: "Work Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 10px; font-weight: 400; line-height: 1.2;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .15s ease, transform .15s ease;
}
.mahina-eg-dot:hover .mahina-eg-tip,
.mahina-eg-dot:focus .mahina-eg-tip,
.mahina-eg-dot.is-active .mahina-eg-tip {
  opacity: 1; transform: translateX(-50%) translateY(-2px);
}

@media (max-width: 767px) {
  .mahina-eg-button-prev, .mahina-eg-button-next { display: none; }
}

/*Novo CSS ajustando o visual do hotspot */
/* =======================
   Dots — visual + pulso
   ======================= */

.mahina-eg { 
  /* fácil de customizar depois */
  --eg-dot-bg: rgba(0,0,0,.72);
  --eg-dot-border: #fff;
  --eg-dot-ring: rgba(255,255,255,.35);
  --eg-tip-bg: rgba(0,0,0,.8);
  --eg-tip-color: #fff;
}

.mahina-eg-dot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 16px;                   /* levemente maior p/ acessibilidade */
  height: 16px;
  border-radius: 999px;
  border: 2px solid var(--eg-dot-border);
  background: var(--eg-dot-bg);
  cursor: pointer;
  outline: none;
  /* halo fixo + sombra leve */
  box-shadow: 0 0 0 2px var(--eg-dot-ring), 0 2px 8px rgba(0,0,0,.25);
}

/* área de toque maior (não muda o visual) */
.mahina-eg-dot::before {
  content: "";
  position: absolute;
  inset: -10px;                  /* +20px de diâmetro “invisível” */
  border-radius: inherit;
  pointer-events: none;
}

/* pulso suave */
.mahina-eg-dot::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 16px; height: 16px;
  border-radius: 999px;
  transform: translate(-50%, -50%) scale(1);
  box-shadow: 0 0 0 0 var(--eg-dot-ring);
  pointer-events: none;
  animation: mahina-eg-pulse 1.8s ease-out infinite;
}

/* pausa o pulso no hover/foco (fica mais “calmo” quando o usuário está ali) */
.mahina-eg-dot:hover::after,
.mahina-eg-dot:focus::after,
.mahina-eg-dot.is-active::after { animation-play-state: paused; }

@keyframes mahina-eg-pulse {
  0%   { transform: translate(-50%, -50%) scale(1);   box-shadow: 0 0 0 0 var(--eg-dot-ring); }
  70%  { transform: translate(-50%, -50%) scale(1.8); box-shadow: 0 0 0 10px rgba(255,255,255,0); }
  100% { transform: translate(-50%, -50%) scale(1.8); box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  .mahina-eg-dot::after { animation: none; }
}

/* =======================
   Tooltip (Work Sans 10/400)
   ======================= */

.mahina-eg-tip {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  padding: 4px 6px;
  border-radius: 6px;
  background: var(--eg-tip-bg);
  color: var(--eg-tip-color);
  font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.25;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .14s ease, transform .14s ease;
  /* micro sombra pra legibilidade em áreas claras */
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
}

/* setinha do tooltip */
.mahina-eg-tip::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -5px;
  transform: translateX(-50%);
  width: 8px; height: 8px;
  background: var(--eg-tip-bg);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 2px;
}

.mahina-eg-dot:hover .mahina-eg-tip,
.mahina-eg-dot:focus .mahina-eg-tip,
.mahina-eg-dot.is-active .mahina-eg-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

/* Frame 2:3 com cover, e overlay colado exatamente na imagem */
.mahina-eg .eg-frame{ position:relative; width:100%; }
.mahina-eg .eg-frame::before{ content:""; display:block; padding-top:150%; } /* 2/3 */
.mahina-eg .eg-frame > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.mahina-eg .eg-overlay{ position:absolute; inset:0; }
.mahina-eg .eg-dot{ position:absolute; transform:translate(-50%,-50%); /* ...resto do estilo */ }


/* CSS Adicional para ocnfigurar o Card */
/* ===== Mahina EG – FRONT ===== */

/* grid do slider você já tem; aqui é só o “card” padronizado */
.mahina-eg__frame{
  position:relative;
  width:100%;
  /*border-radius: 8px;*/
  overflow:hidden;
  background:#eee;
}

/* 2:3 sem depender de height fixa */
.mahina-eg__frame::before{
  content:"";
  display:block;
  padding-top:150%; /* 2/3 */
}

/* imagem ocupando o frame inteiro, sem distorcer */
.mahina-eg__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;           /* CRÍTICO: igual ao admin pra coordenadas baterem */
  object-position:center;     /* mantenha igual nos dois lados */
  display:block;
}

/* overlay colado 1:1 na imagem */
.mahina-eg__overlay{
  position:absolute; inset:0;
  pointer-events:none; /* overlay não bloqueia; o dot sim */
}

/* pontinho (o seu estilo + pulso) */
.mahina-eg__dot{
  position:absolute;
  transform:translate(-50%, -50%);
  width:18px; height:18px;
  border-radius:999px;
  border:2px solid #fff;
  background:#111;
  box-shadow:0 0 0 2px rgba(0,0,0,.06);
  pointer-events:auto;           /* o dot recebe o clique */
  cursor:pointer;
}

/* animação suave (opcional, você já tinha) */
/*@keyframes mahinaPulse{0%{transform:translate(-50%,-50%) scale(.95);opacity:.8}50%{transform:translate(-50%,-50%) scale(1.05);opacity:1}100%{transform:translate(-50%,-50%) scale(.95);opacity:.8}}
.mahina-eg__dot{ animation: mahinaPulse 2s infinite; }*/

/*Novo código corrigindo o card */
/* ====== FRAME 2:3 + overlay alinhado ====== */
.mahina-eg__frame{
  position:relative;
  width:100%;
  aspect-ratio: 2 / 3;            /* moderno */
  /*border-radius: 10px;*/
  overflow:hidden;
  background:#eee;
}
/* fallback caso algum navegador ignore aspect-ratio */
@supports not (aspect-ratio: 2 / 3){
  .mahina-eg__frame::before{
    content:"";
    display:block;
    padding-top:150%; /* 2/3 */
  }
}

.mahina-eg__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;               /* IGUAL ao admin */
  object-position:center;
  display:block;
}

.mahina-eg__overlay{
  position:absolute; inset:0;
  pointer-events:none;            /* o overlay não bloqueia; só o dot recebe clique */
}

/* pontinho */
.mahina-eg__dot{
  position:absolute;
  transform:translate(-50%,-50%);
  width:18px; height:18px;
  border-radius:999px;
  border:2px solid #fff;
  background:#111;
  box-shadow:0 0 0 2px rgba(0,0,0,.06);
  pointer-events:auto;
  cursor:pointer;
}

/* animação leve */
/*@keyframes mahinaPulse{0%{transform:translate(-50%,-50%) scale(.95);opacity:.8}50%{transform:translate(-50%,-50%) scale(1.05);opacity:1}100%{transform:translate(-50%,-50%) scale(.95);opacity:.8}}
.mahina-eg__dot{ animation: mahinaPulse 2s infinite; }*/

/* ====== TOOLTIP nativa via CSS (usa aria-label) ====== */
.mahina-eg__dot::after{
  content: attr(aria-label);
  position:absolute;
  top:-10px; left:50%;
  transform:translate(-50%,-100%);
  background:#111;
  color:#fff;
  font-family:"Work Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:10px; font-weight:400;
  line-height:1; white-space:nowrap;
  padding:6px 8px;
  border-radius:6px;
  opacity:0; pointer-events:none;
  /*transition:opacity .18s ease, transform .18s ease;*/
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}
.mahina-eg__dot:hover::after,
.mahina-eg__dot:focus-visible::after{
  opacity:1;
  transform:translate(-50%,-120%);
}

/* setinha da tooltip */
.mahina-eg__dot::before{
  content:"";
  position:absolute;
  top:-6px; left:50%;
  transform:translate(-50%,-100%);
  border:6px solid transparent;
  border-top-color:#111;
  opacity:0; /*transition:opacity .18s ease;*/
}
.mahina-eg__dot:hover::before,
.mahina-eg__dot:focus-visible::before{
  opacity:1;
}
/* ===== Fix: força a imagem a ocupar 100% do frame (vence Elementor/Woo) ===== */
.mahina-eg .mahina-eg__frame > .mahina-eg__img{
  position: absolute !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* overlay colado no frame */
.mahina-eg .mahina-eg__overlay{
  position: absolute !important;
  top: 0; right: 0; bottom: 0; left: 0;
}

/* z-index para garantir hover/click e tooltip */
.mahina-eg .mahina-eg__overlay{ z-index: 1; }
.mahina-eg .mahina-eg__dot{ z-index: 2; }


/*Tooltip */
/* tooltip CSS (lê aria-label) */
.mahina-eg .mahina-eg__dot::after{
  content: attr(aria-label);
  position: absolute;
  top: -10px; left: 50%;
  transform: translate(-50%,-100%);
  background: #111; color: #fff;
  font-family: "Work Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 10px; font-weight: 400; line-height: 1;
  white-space: nowrap; padding: 6px 8px;
  border-radius: 6px; opacity: 0; pointer-events: none;
  /*transition: opacity .18s ease, transform .18s ease;*/
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}
.mahina-eg .mahina-eg__dot:hover::after,
.mahina-eg .mahina-eg__dot:focus-visible::after{
  opacity: 1; transform: translate(-50%,-120%);
}
.mahina-eg .mahina-eg__dot::before{
  content: ""; position: absolute;
  top: -6px; left: 50%; transform: translate(-50%,-100%);
  border: 6px solid transparent; border-top-color: #111;
  opacity: 0; transition: opacity .18s ease;
}
.mahina-eg .mahina-eg__dot:hover::before,
.mahina-eg .mahina-eg__dot:focus-visible::before{
  opacity: 1;
}

/* Setinhas do FrontEnd */
/* ===== Navegação do slider (setinhas externas) ===== */
.mahina-eg{
  position: relative;
  overflow: hidden; /* permite as setas ficarem fora sem cortar */
}

/* botões base */
.mahina-eg-button-prev,
.mahina-eg-button-next{
  position: absolute;
  top: 50%;
  /*transform: translateY(-50%);*/
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #907f6f;            /* cor pedida */
  z-index: 5;
}

/* “fora” do slide mas sem vazar */
.mahina-eg-button-prev{ left: 0;  transform: translate(-120%, -50%); }
.mahina-eg-button-next{ right: 0; transform: translate( 120%, -50%); }

/* responsivo: aproxima nas telas menores 
@media (max-width: 1024px){
  .mahina-eg-button-prev{ transform: translate(-90%, -50%); }
  .mahina-eg-button-next{ transform: translate( 90%, -50%); }
}
@media (max-width: 640px){
  .mahina-eg-button-prev{ left: 6px;  transform: translate(0, -50%); }
  .mahina-eg-button-next{ right: 6px; transform: translate(0, -50%); }
}*/
/* coloca FORA do slide 
.mahina-eg-button-prev{ left: -32px; }
.mahina-eg-button-next{ right: -32px; }*/

/* desenha o chevron com bordas */
.mahina-eg-button-prev::before,
.mahina-eg-button-next::before{
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

/* ângulos dos chevrons */
.mahina-eg-button-prev::before{ transform: rotate(135deg); }
.mahina-eg-button-next::before{ transform: rotate(-45deg); }

/* hover/focus sutil */
.mahina-eg-button-prev:hover,
.mahina-eg-button-next:hover,
.mahina-eg-button-prev:focus-visible,
.mahina-eg-button-next:focus-visible{
  color: #7b6d60;
}

/* quando o Swiper desabilita o botão */
.mahina-eg .swiper-button-disabled{
  opacity: .35;
  pointer-events: none;
}

/* responsivo: aproxima nas telas menores */
@media (max-width: 1024px){
  .mahina-eg-button-prev{ transform: translate(-90%, -50%); }
  .mahina-eg-button-next{ transform: translate( 90%, -50%); }
}
@media (max-width: 640px){
  .mahina-eg-button-prev{ left: 6px;  transform: translate(0, -50%); }
  .mahina-eg-button-next{ right: 6px; transform: translate(0, -50%); }
}

/* responsivo: em telas estreitas, aproximar um pouco das bordas 
@media (max-width: 1024px){
  .mahina-eg-button-prev{ left: -20px; }
  .mahina-eg-button-next{ right: -20px; }
}
@media (max-width: 640px){
  .mahina-eg-button-prev{ left: 6px; }
  .mahina-eg-button-next{ right: 6px; }
}*/

/* ===== Paginação ===== */
/* esconder completamente */
.mahina-eg .mahina-eg-pagination{ display: none; }

/* (opcional) se quiser manter bem discreta:
.mahina-eg .mahina-eg-pagination{
  position: static;
  margin-top: 10px;
  text-align: center;
}
.mahina-eg .mahina-eg-pagination .swiper-pagination-bullet{
  width: 6px; height: 6px; margin: 0 3px; opacity: .3; background: #907f6f;
}
.mahina-eg .mahina-eg-pagination .swiper-pagination-bullet-active{
  opacity: 1; background: #907f6f;
}
*/
/* Alterações depois de alterar a div do shortcode */
/* o contêiner externo permite botões fora sem cortar */
.mahina-eg-wrap{ position: relative; }

/* o .swiper continua cortando os slides vizinhos (padrão do Swiper) */
.mahina-eg{ overflow: hidden; }

/* ===== Navegação ===== */
.mahina-eg-button-prev,
.mahina-eg-button-next{
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  color: #907f6f;
  cursor: pointer;
  z-index: 5;
  transform: translateY(-50%);
}

/* agora podemos realmente ficar “fora” do slider */
.mahina-eg-button-prev{ left: -28px; }
.mahina-eg-button-next{ right: -28px; }

/* desenha chevrons */
.mahina-eg-button-prev::before,
.mahina-eg-button-next::before{
  content: "";
  width: 6px; height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  display: block;
}
.mahina-eg-button-prev::before{ transform: rotate(135deg); }
.mahina-eg-button-next::before{ transform: rotate(-45deg); }

.mahina-eg .swiper-button-disabled{ opacity:.35; pointer-events:none; }

/* responsivo: aproxima um pouco nas telas menores */
@media (max-width:1024px){
  .mahina-eg-button-prev{ left: -20px; }
  .mahina-eg-button-next{ right: -20px; }
}
@media (max-width:640px){
  .mahina-eg-button-prev{ left: -20px; }
  .mahina-eg-button-next{ right: -20px; }
}

/* se não quiser paginação, deixe escondida */
.mahina-eg .mahina-eg-pagination{ display:none; }


/* Estilos para a página My Account */
/* Menu Minha Conta (coluna esquerda) */
.mahina-account-nav {
  position: sticky; top: 24px;
  font-family: "Work Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px; line-height: 1.5;
}
.mahina-account-nav ul { list-style: none; margin: 0; padding: 0; }
.mahina-account-nav__item { margin: 6px 0; }
.mahina-account-nav__link {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: #2b2b2b;
  background: #f5f2ef;
  transition: background .2s, color .2s, transform .1s;
}
.mahina-account-nav__link:hover { background: #efe9e4; }
.mahina-account-nav__item.is-active .mahina-account-nav__link {
  background: #e7ded6;
  color: #907f6f;
  font-weight: 600;
}