/* ============================================================
   Pavan & Co. — Folha de estilo compartilhada
   Usada por TODAS as páginas do site (index.html, categoria-*.html...)
   Mudou uma cor ou fonte aqui? Atualiza o site inteiro de uma vez.
   ============================================================ */

  :root{
    --creme: #FCF9F1;
    --creme-escuro: #EDE6D8;
    --bordo: #6B0F1A;
    --bordo-escuro: #4A0A13;
    --texto: #2B211F;
    --texto-suave: #6E6259;
    --branco: #FFFFFF;
    --borda: rgba(107,15,26,0.14);
    --sombra: 0 8px 30px rgba(43,33,31,0.08);
    /* Cores de status (pedido/pagamento) — usadas em conta.html */
    --verde: #2C6E37;
    --verde-bg: #E8F3E9;
    --amarelo: #8A6116;
    --amarelo-bg: #FBF1DE;
    --vermelho: #A8281D;
    --vermelho-bg: #FBEAE9;
    --radius: 2px;
    --serif: 'Playfair Display', Georgia, serif;
    --sans: 'Lato', -apple-system, sans-serif;
  }

  *{ box-sizing: border-box; margin:0; padding:0; }
  html{ scroll-behavior: smooth; overflow-x: hidden; width: 100%; }

  body{
    background: var(--creme);
    color: var(--texto);
    font-family: var(--sans);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    position: relative;
    overflow-wrap: break-word;
  }

  /* ------------------------------------------------------------
     REDE DE SEGURANÇA MOBILE — evita que um texto longo sem espaço
     (nome de produto, banho personalizado digitado no admin, etc.)
     force uma coluna do grid/flex a "estourar" e empurre a página
     inteira pro lado no celular. Sem isso, cada item de grid/flex
     tem largura mínima automática baseada no próprio conteúdo, o
     que pode ultrapassar a tela mesmo com overflow-x:hidden no body.
     ------------------------------------------------------------ */
  .produto-grid > *,
  .checkout-grid > *,
  .contato-grid > *,
  .footer-grid > *,
  .cat-grid > *,
  .prod-grid > *,
  .vitrine-grid > *{
    min-width: 0;
  }

  img{ max-width:100%; display:block; }
  a{ color: inherit; text-decoration: none; }
  /* color:inherit é essencial aqui — sem isso, o iPhone (Safari iOS) pinta
     qualquer botão sem cor própria de azul (cor padrão do sistema), mesmo
     que o resto do site esteja com a cor certa em outros navegadores. */
  button{ font-family: inherit; color: inherit; cursor:pointer; border:none; background:none; }
  ul{ list-style:none; }

  a:focus-visible, button:focus-visible, input:focus-visible{
    outline: 2px solid var(--bordo);
    outline-offset: 3px;
  }

  .container{
    width:100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .eyebrow{
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bordo);
    font-weight: 600;
  }

  h1,h2,h3{
    font-family: var(--serif);
    font-weight: 500;
    color: var(--texto);
  }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding: 13px 28px;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    border: 1px solid var(--bordo);
    border-radius: var(--radius);
    transition: background .25s ease, color .25s ease;
  }
  .btn:disabled{ opacity:.5; cursor:not-allowed; border-color: var(--texto-suave); color: var(--texto-suave); background:transparent; }
  .btn-primary{ background: var(--bordo); color: var(--creme); }
  .btn-primary:hover{ background: var(--bordo-escuro); }
  .btn-outline{ background: transparent; color: var(--bordo); }
  .btn-outline:hover{ background: var(--bordo); color: var(--creme); }
  .btn-light{ border-color: var(--creme); color: var(--creme); }
  .btn-light:hover{ background: var(--creme); color: var(--bordo); }

  /* ---------------- HEADER ---------------- */
  header{
    position: sticky;
    top:0;
    z-index: 100;
    background: var(--creme);
    border-bottom: 1px solid transparent;
    transition: box-shadow .25s ease, border-color .25s ease;
  }
  header.scrolled{
    box-shadow: var(--sombra);
    border-color: var(--borda);
  }
  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 14px 20px;
    gap: 16px;
  }

  .logo{
    display:flex;
    align-items:center;
    gap:9px;
    font-family: var(--serif);
    color: var(--bordo);
    white-space: nowrap;
  }
  /* TAMANHO DA LOGO (mobile) — aumente/diminua o "height" abaixo */
  .logo-mark{ width: auto; height: 50px; max-width: 44vw; object-fit: contain; }

  nav.main-nav{
    display:none;
  }
  nav.main-nav ul{
    display:flex;
    gap: 30px;
  }
  nav.main-nav a{
    font-size: 0.86rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--texto);
    position: relative;
    padding: 4px 0;
  }
  nav.main-nav a::after{
    content:"";
    position:absolute;
    left:0; bottom:0;
    height:1px; width:0;
    background: var(--bordo);
    transition: width .25s ease;
  }
  nav.main-nav a:hover::after{ width:100%; }

  .header-icons{
    display:flex;
    align-items:center;
    gap: 18px;
  }
  .icon-btn{
    position: relative;
    display:flex;
    align-items:center;
    color: var(--texto);
  }
  .icon-btn svg{ width:25px; height:25px; }
  .cart-count{
    position:absolute;
    top:-7px; right:-9px;
    background: var(--bordo);
    color: var(--creme);
    font-size: 0.62rem;
    font-weight:700;
    width:16px; height:16px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
  }

  .hamburger{
    display:flex;
    flex-direction:column;
    gap:5px;
    width: 24px;
  }
  .hamburger span{
    height:1.5px;
    width:100%;
    background: var(--texto);
    transition: transform .25s ease, opacity .25s ease;
  }

  /* mobile menu drawer */
  .mobile-nav{
    max-height:0;
    overflow:hidden;
    background: var(--creme);
    border-top: 1px solid var(--borda);
    transition: max-height .3s ease;
  }
  .mobile-nav.open{ max-height: 420px; }
  .mobile-nav ul{ padding: 6px 20px 18px; }
  .mobile-nav a{
    display:block;
    padding: 12px 0;
    border-bottom: 1px solid var(--borda);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight:600;
  }

  @media (min-width: 900px){
    .header-inner{ padding: 18px 20px; }
    /* TAMANHO DA LOGO (telas maiores, a partir de 900px) */
    .logo-mark{ height:52px; }
    nav.main-nav{ display:block; }
    .hamburger, .mobile-nav{ display:none; }
  }

  /* ---------------- HERO ---------------- */
  .hero{
    position:relative;
    min-height: 46vh;
    display:flex;
    align-items:center;
    background-size: cover;
    background-position: center;
    color: var(--creme);
    overflow:hidden;
  }
  .hero::before{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(43,33,31,0.25) 0%, rgba(43,33,31,0.35) 45%, rgba(43,33,31,0.68) 100%);
  }
  .hero-content{
    position:relative;
    z-index:2;
    padding: 30px 20px 46px;
    max-width: 560px;
  }
  .hero-content .eyebrow{ color: var(--creme); opacity:.9; text-shadow: 0 2px 10px rgba(0,0,0,0.35); }
  .hero-content h1{
    font-size: clamp(2rem, 6vw, 3.4rem);
    line-height: 1.08;
    margin: 10px 0 22px;
    font-style: italic;
    text-shadow: 0 2px 16px rgba(0,0,0,0.4);
  }

  @media (min-width: 900px){
    .hero{ min-height: 52vh; }
    .hero-content{ padding: 40px 60px 56px; }
  }

  /* ---------------- CATEGORIAS ---------------- */
  .section{ padding: 64px 0; }
  .section-head{
    text-align:center;
    margin-bottom: 36px;
  }
  .section-head h2{ font-size: clamp(1.6rem, 4vw, 2.2rem); margin-top:8px; }

  .cat-grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .cat-card{
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--radius);
    padding: 20px 14px;
    display:flex;
    align-items:center;
    gap: 12px;
    transition: border-color .25s ease, transform .25s ease;
  }
  .cat-card:hover{ border-color: var(--bordo); transform: translateY(-2px); }
  .cat-card svg{ width:34px; height:34px; flex-shrink:0; color: var(--bordo); }
  .cat-card span{
    font-family: var(--serif);
    font-size: 1rem;
  }

  @media (min-width: 700px){
    .cat-grid{ grid-template-columns: repeat(3, 1fr); }
  }
  @media (min-width: 1000px){
    .cat-grid{ grid-template-columns: repeat(6, 1fr); }
    .cat-card{ flex-direction:column; text-align:center; padding: 28px 14px; }
  }

  /* ---------------- VITRINE ---------------- */
  .vitrine{ background: var(--creme-escuro); }
  .vitrine-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .vitrine-card{
    position:relative;
    min-height: 340px;
    border-radius: var(--radius);
    overflow:hidden;
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:flex-end;
    color: var(--creme);
  }
  .vitrine-card::before{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(43,33,31,0) 40%, rgba(43,33,31,0.65) 100%);
  }
  /* Barra bordô ABAIXO da imagem (fora do card) que nasce no meio e
     cresce pros dois lados ao passar o mouse na peça acima dela. */
  .vitrine-bar{
    display:block;
    width:0; height:10px;
    margin: 10px auto 0;
    background: var(--bordo);
    border-radius: 3px;
    transition: width .45s cubic-bezier(.34,1.1,.4,1);
  }
  .vitrine-card:hover ~ .vitrine-bar{ width:100%; }
  .vitrine-inner{
    position:relative; z-index:2;
    padding: 26px;
  }
  .vitrine-inner .eyebrow{ color: var(--creme); opacity:.85; }
  .vitrine-inner h3{ font-size: 1.5rem; margin: 6px 0 14px; color: var(--creme); }

  @media (min-width: 900px){
    .vitrine-grid{ grid-template-columns: repeat(3, 1fr); }
    .vitrine-card{ min-height: 440px; }
  }

  /* ---------------- PRODUTOS ---------------- */
  .prod-grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 12px;
    align-items: stretch;
  }
  .prod-card{
    position:relative;
    display:flex;
    flex-direction:column;
    height:100%;
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--radius);
    padding: 10px 10px 14px;
  }
  .prod-card-link{
    display:block;
    color: inherit;
    text-decoration:none;
  }
  .prod-img{
    display:block;
    aspect-ratio: 5/4;
    background-size:cover;
    background-position:center;
    background-color: var(--creme-escuro);
    border-radius: var(--radius);
    margin: -10px -10px 10px;
    overflow:hidden;
  }
  .prod-name{
    font-size: 0.92rem;
    margin-bottom: 2px;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25;
  }
  .prod-price{ font-family: var(--serif); color: var(--bordo); font-size: 1.05rem; font-variant-numeric: lining-nums tabular-nums; }

  /* Preço/Banho e Material/Pedra: um único box 2x2 — cada linha dividida
     ao meio (vertical), e uma linha horizontal separando os dois pares.
     Altura sempre igual, texto longo é truncado (nunca deforma o card). */
  .prod-info-box{
    display:grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--borda);
    margin-top: 4px;
  }
  .prod-info-cell{
    padding: 8px 6px;
    text-align:center;
    min-width: 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
  .prod-info-cell:nth-child(odd){ border-right: 1px solid var(--borda); }
  .prod-info-cell:nth-child(1), .prod-info-cell:nth-child(2){ border-bottom: 1px solid var(--borda); }
  .prod-info-cell .prod-spec-label{
    display:block;
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin-bottom: 2px;
  }
  .prod-info-cell .prod-spec-valor{
    display:block;
    font-size: 0.76rem;
    font-weight:700;
    color: var(--bordo);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .prod-actions{
    display:flex;
    flex-direction:column;
    gap: 6px;
    margin-top: 8px;
    padding-top: 0;
    flex: 1;
    justify-content:flex-end;
  }
  .btn-buy, .btn-add{ width: 100%; justify-content:center; }

  @media (min-width: 700px){ .prod-grid{ grid-template-columns: repeat(3, 1fr); gap: 22px 16px; } }
  @media (min-width: 1000px){ .prod-grid{ grid-template-columns: repeat(5, 1fr); gap: 20px 16px; } }

  /* ---------------- NEWSLETTER STRIP ---------------- */
  .newsletter-strip{
    background: var(--bordo);
    color: var(--creme);
    text-align:center;
    padding: 46px 20px;
  }
  .newsletter-strip h3{ color: var(--creme); font-size: 1.4rem; margin-bottom: 6px; }
  .newsletter-strip h3 .amp-serif{ font-style: italic; }
  .newsletter-strip p{ opacity:.85; font-size:0.9rem; margin-bottom: 22px; }
  .newsletter-form{
    display:flex;
    max-width: 420px;
    margin: 0 auto;
    gap: 8px;
    flex-wrap: wrap;
    justify-content:center;
  }
  .newsletter-form input{
    flex:1;
    min-width: 200px;
    padding: 12px 14px;
    border: 1px solid rgba(247,243,236,0.4);
    background: transparent;
    color: var(--creme);
    border-radius: var(--radius);
    font-family: var(--sans);
  }
  .newsletter-form input::placeholder{ color: rgba(247,243,236,0.6); }

  /* ---------------- FOOTER ---------------- */
  footer{
    background: var(--bordo-escuro);
    color: var(--creme);
    padding: 56px 0 0;
  }
  .footer-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px 20px;
    padding-bottom: 40px;
  }
  .footer-col{ padding-top: 24px; border-top: 1px solid rgba(247,243,236,0.14); }
  .footer-col:first-child{
    grid-column: 1 / -1;
    padding-top:0;
    border-top:none;
  }
  .footer-col h4{
    font-family: var(--serif);
    font-size: 1rem;
    margin-bottom: 14px;
    color: var(--creme);
  }
  .footer-col p{ font-size: 0.86rem; opacity: .8; line-height: 1.6; }
  .footer-col ul li{ margin-bottom: 9px; }
  .footer-col a{ font-size: 0.86rem; opacity: .85; }
  .footer-col a:hover{ opacity: 1; text-decoration: underline; }
  .footer-logo{ display:flex; align-items:center; margin-bottom:12px; }
  /* TAMANHO DA LOGO no rodapé (geralmente menor que no header) */
  .footer-logo img{ height:32px; width:auto; object-fit:contain; }
  .social-row{ display:flex; gap:14px; margin-top:4px; }
  .social-row a{ width:34px; height:34px; border:1px solid rgba(247,243,236,0.35); border-radius:50%; display:flex; align-items:center; justify-content:center; }
  .social-row svg{ width:16px; height:16px; }

  .footer-bottom{
    border-top: 1px solid rgba(247,243,236,0.15);
    padding: 18px 20px;
    text-align:center;
    font-size: 0.78rem;
    opacity: .7;
  }

  @media (min-width: 700px){
    .footer-grid{ grid-template-columns: repeat(2, 1fr); }
    .footer-col{ padding-top:0; border-top:none; }
  }
  @media (min-width: 1000px){
    .footer-grid{ grid-template-columns: 1.4fr 1fr 1fr; }
    .footer-col:first-child{ grid-column: auto; }
  }

/* ============================================================
   PÁGINA DE CATEGORIA (ex: categoria-aneis.html)
   ============================================================ */
.breadcrumb{
  padding: 14px 0;
  font-size: 0.78rem;
  color: var(--texto-suave);
  border-bottom: 1px solid var(--borda);
}
.breadcrumb a:hover{ color: var(--bordo); text-decoration: underline; }
.breadcrumb .sep{ margin: 0 6px; opacity: .5; }
.breadcrumb .atual{ color: var(--texto); font-weight: 600; }

.page-title{
  text-align:center;
  padding: 40px 0 26px;
}
.page-title h1{
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  font-style: italic;
}
.page-title .linha{
  width: 46px; height:2px;
  background: var(--bordo);
  margin: 14px auto 0;
}

.filter-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
}
.filter-bar button{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 9px;
  padding: 16px 10px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--texto);
  position: relative;
}
.filter-bar button:first-child{ border-right: 1px solid var(--borda); }
.filter-bar svg{ width:18px; height:18px; color: var(--bordo); }
.filter-dot{
  width:6px; height:6px; border-radius:50%;
  background: var(--bordo);
  margin-left: 2px;
}

.result-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap: 10px;
  padding: 18px 0;
}
.result-count{ font-size: 0.86rem; color: var(--texto-suave); }
.filter-chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 30px;
  padding: 7px 8px 7px 14px;
  font-size: 0.8rem;
}
.filter-chip button{
  width:18px; height:18px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background: var(--creme-escuro);
}
.filter-chip svg{ width:10px; height:10px; }

@media (min-width: 700px){
  .filter-bar{ justify-content:flex-start; gap: 40px; }
  .filter-bar button{ flex:none; padding: 18px 0; }
  .filter-bar button:first-child{ border-right:none; }
}

/* ============================================================
   TAGS DE PRODUTO (material / pedra)
   ============================================================ */
.prod-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom: 6px;
}
.prod-tags span{
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bordo);
  background: var(--creme-escuro);
  padding: 3px 8px;
  border-radius: 20px;
}
.btn-buy, .btn-add{
  font-size: 0.74rem;
  padding: 10px 14px;
}
.sem-resultados{
  grid-column: 1 / -1;
  text-align:center;
  padding: 40px 20px;
  color: var(--texto-suave);
}

/* ============================================================
   PAINEL DE FILTROS (categoria)
   ============================================================ */
.painel-filtros{
  max-height:0;
  overflow:hidden;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-top:none;
  transition: max-height .3s ease;
}
.painel-filtros.open{ max-height: 600px; overflow-y:auto; }
.filtro-grupo{ padding: 16px 20px 0; }
.filtro-grupo h4{
  font-family: var(--serif);
  font-size: 0.95rem;
  margin-bottom: 10px;
}
.filtro-check{
  display:flex;
  align-items:center;
  gap: 9px;
  padding: 7px 0;
  font-size: 0.86rem;
  cursor:pointer;
}
.filtro-check input{ width:16px; height:16px; accent-color: var(--bordo); }
#painelFiltros .btn{ margin: 18px 20px 6px; }
.btn-limpar-filtros{
  display:block;
  width: calc(100% - 40px);
  margin: 0 20px 18px;
  text-align:center;
  font-size: 0.8rem;
  color: var(--texto-suave);
  text-decoration: underline;
  padding: 6px;
}

/* ============================================================
   DROPDOWN "ORDENAR POR"
   ============================================================ */
.ordenar-wrap{ position:relative; }
.ordenar-menu{
  position:absolute;
  top: 100%; right:0;
  min-width: 190px;
  background: var(--branco);
  border: 1px solid var(--borda);
  box-shadow: var(--sombra);
  z-index: 50;
  display:none;
  flex-direction:column;
}
.ordenar-menu.open{ display:flex; }
.ordenar-menu button{
  padding: 12px 16px;
  text-align:left;
  font-size: 0.85rem;
  justify-content:flex-start !important;
}
.ordenar-menu button:hover{ background: var(--creme); color: var(--bordo); }

/* ============================================================
   BUSCA (overlay no header + página busca.html)
   ============================================================ */
.search-overlay{
  max-height:0;
  overflow:hidden;
  background: var(--creme);
  border-bottom: 1px solid transparent;
  transition: max-height .25s ease;
}
.search-overlay.open{ max-height: 90px; border-color: var(--borda); }
.search-overlay form{
  display:flex;
  gap: 10px;
  padding: 16px 20px;
  max-width: 1240px;
  margin: 0 auto;
}
.search-overlay input{
  flex:1;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  background: var(--branco);
  font-family: var(--sans);
  font-size: 0.95rem;
  border-radius: var(--radius);
}
.busca-hero{
  text-align:center;
  padding: 40px 20px 10px;
}
.busca-hero form{
  display:flex;
  gap: 10px;
  max-width: 480px;
  margin: 20px auto 0;
}
.busca-hero input{
  flex:1;
  padding: 13px 16px;
  border: 1px solid var(--borda);
  border-radius: var(--radius);
  font-family: var(--sans);
}

/* ============================================================
   TOAST
   ============================================================ */
.toast{
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 20px);
  background: var(--bordo-escuro);
  color: var(--creme);
  padding: 13px 22px;
  border-radius: 30px;
  font-size: 0.85rem;
  box-shadow: var(--sombra);
  opacity:0;
  pointer-events:none;
  transition: opacity .3s cubic-bezier(.34,1.56,.64,1), transform .3s cubic-bezier(.34,1.56,.64,1);
  z-index: 999;
  max-width: 90vw;
  text-align:center;
}
.toast.show{ opacity:1; transform: translate(-50%, 0); }

/* ============================================================
   PÁGINA GENÉRICA DE CONTEÚDO (sobre, faq, privacidade, trocas)
   ============================================================ */
.page-content{
  max-width: 760px;
  margin: 0 auto;
  padding: 50px 20px 70px;
}
.page-content h1{
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  font-style: italic;
  text-align:center;
  margin-bottom: 10px;
}
.page-content .linha{
  width: 46px; height:2px;
  background: var(--bordo);
  margin: 0 auto 34px;
}
.page-content h2{ font-size: 1.2rem; margin: 30px 0 10px; }
.page-content p{ margin-bottom: 14px; color: var(--texto); }
.page-content p.suave{ color: var(--texto-suave); font-size: 0.92rem; }

/* FAQ accordion */
.faq-item{
  border-bottom: 1px solid var(--borda);
}
.faq-pergunta{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 18px 4px;
  text-align:left;
  font-family: var(--serif);
  font-size: 1.02rem;
}
.faq-pergunta svg{ width:16px; height:16px; flex-shrink:0; transition: transform .25s ease; color: var(--bordo); }
.faq-item.open .faq-pergunta svg{ transform: rotate(45deg); }
.faq-resposta{
  max-height:0;
  overflow:hidden;
  transition: max-height .3s ease;
  font-size: 0.92rem;
  color: var(--texto-suave);
  line-height:1.6;
}
.faq-item.open .faq-resposta{ max-height: 260px; padding-bottom: 18px; }
.produto-info .faq-item.open .faq-resposta{ max-height: 500px; }
#contaPedidos .faq-item.open .faq-resposta{ max-height: 700px; padding-top: 4px; }
#contaPedidos .faq-pergunta{ flex-wrap: wrap; gap: 10px; }

/* ============================================================
   CONTA (login / cadastro)
   ============================================================ */
.conta-wrap{
  max-width: 420px;
  margin: 50px auto 140px;
  padding: 0 20px;
}
.conta-tabs{
  display:flex;
  border: 1px solid var(--borda);
  margin-bottom: 30px;
}
.conta-tabs button{
  flex:1;
  padding: 13px;
  font-size: 0.85rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color: var(--texto-suave);
}
.conta-tabs button.active{ background: var(--bordo); color: var(--creme); }
.conta-form{ display:none; flex-direction:column; gap: 14px; }
.conta-form.active{ display:flex; }
.conta-form label{ font-size: 0.82rem; font-weight:600; margin-bottom: 5px; display:block; }
.conta-form input{
  width:100%;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 0.92rem;
}
.conta-form .btn{ margin-top: 8px; justify-content:center; }
.conta-msg{
  font-size: 0.82rem;
  padding: 10px 12px;
  border-radius: var(--radius);
  display:none;
}
.conta-msg.show{ display:block; }
.conta-msg.sucesso{ background: #E8F3E9; color: #2C6E37; }
.conta-msg.erro{ background: var(--creme-escuro); color: var(--bordo); }

.conta-perfil{
  border: 1px solid var(--borda);
  border-radius: var(--radius);
  padding: 24px;
  text-align:center;
  margin-bottom: 34px;
}
.conta-perfil p{ font-size:0.78rem; color: var(--texto-suave); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:4px; }
.conta-perfil h3{ font-family: var(--serif); font-size:1.25rem; }
.conta-perfil span{ font-size:0.85rem; color: var(--texto-suave); }
.conta-perfil-acoes{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:16px; }

.conta-secao-titulo{ font-family: var(--serif); font-size:1.05rem; margin-bottom:14px; }
.conta-linha-2, .conta-linha-3{ display:grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; }
@media (min-width: 500px){
  .conta-linha-2{ grid-template-columns: 1fr 1fr; }
  .conta-linha-3{ grid-template-columns: 1fr 1fr 1fr; }
}
.conta-linha-2 > div, .conta-linha-3 > div{ margin-bottom:0; }
#formPerfil select{
  width:100%;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 0.92rem;
}
.conta-pedido-item{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--borda);
  font-size: 0.85rem;
  flex-wrap: wrap;
}
.conta-pedido-item > *{ min-width: 0; }
.conta-pedido-data{ display:block; color: var(--texto-suave); font-size:0.76rem; margin-top:2px; }
.conta-pedido-total{ font-family: var(--serif); color: var(--bordo); font-variant-numeric: lining-nums tabular-nums; }
.status-pedido, .badge-status{
  display:inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size:0.72rem;
  font-weight:700;
  text-transform:capitalize;
  background: var(--creme-escuro);
  color: var(--bordo);
  white-space: nowrap;
}
.badge-status--verde{ background: var(--verde-bg); color: var(--verde); }
.badge-status--amarelo{ background: var(--amarelo-bg); color: var(--amarelo); }
.badge-status--vermelho{ background: var(--vermelho-bg); color: var(--vermelho); }

/* ============================================================
   CARRINHO
   ============================================================ */
.carrinho-wrap{
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}
.carrinho-item{
  display:flex;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--borda);
  align-items:center;
}
.carrinho-item img{
  width: 84px; height:84px;
  object-fit:cover;
  border-radius: var(--radius);
  flex-shrink:0;
}
.carrinho-info{ flex:1; min-width:0; }
.carrinho-info .nome{ font-family: var(--serif); font-size: 1rem; margin-bottom:4px; }
.carrinho-info .tags{ font-size: 0.76rem; color: var(--texto-suave); margin-bottom: 6px; }
.carrinho-qtd{
  display:flex;
  align-items:center;
  gap: 10px;
  border: 1px solid var(--borda);
  border-radius: 30px;
  padding: 4px 6px;
  width: fit-content;
}
.carrinho-qtd button{
  width:24px; height:24px;
  display:flex; align-items:center; justify-content:center;
  font-size: 1rem;
  color: var(--bordo);
}
.carrinho-preco{
  font-family: var(--serif);
  color: var(--bordo);
  font-size: 1.05rem;
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}
.carrinho-remover{
  font-size: 0.74rem;
  color: var(--texto-suave);
  text-decoration:underline;
  margin-top: 6px;
}
.carrinho-resumo{
  margin-top: 26px;
  padding-top: 20px;
  border-top: 2px solid var(--bordo);
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-variant-numeric: lining-nums tabular-nums;
}
.carrinho-vazio{
  text-align:center;
  padding: 60px 20px;
  color: var(--texto-suave);
}

/* ============================================================
   GAVETA DO CARRINHO (abre deslizando pela direita ao adicionar
   um item ou clicar no ícone do carrinho — estilo Versale)
   ============================================================ */
.cart-drawer-overlay{
  position:fixed; inset:0;
  background: rgba(43,33,31,0.45);
  z-index: 950;
  opacity:0; visibility:hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.cart-drawer-overlay.show{ opacity:1; visibility:visible; }

.cart-drawer{
  position:fixed; top:0; right:0;
  height:100vh; height:100dvh;
  width: min(420px, 100vw);
  background: var(--creme);
  z-index: 951;
  display:flex; flex-direction:column;
  box-shadow: -10px 0 40px rgba(43,33,31,0.18);
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.22,.68,0,1.01);
}
.cart-drawer.show{ transform: translateX(0); }

.cart-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px 22px;
  border-bottom: 1px solid var(--borda);
  flex-shrink:0;
}
.cart-drawer-titulo{ display:flex; align-items:center; gap:10px; font-family: var(--serif); font-size:1.05rem; }
.cart-drawer-titulo svg{ width:22px; height:22px; color: var(--bordo); }
.cart-drawer-fechar{ display:flex; align-items:center; justify-content:center; width:32px; height:32px; }
.cart-drawer-fechar svg{ width:18px; height:18px; color: var(--texto); }

.cart-drawer-frete{ padding: 14px 22px; border-bottom: 1px solid var(--borda); flex-shrink:0; }
.cart-drawer-frete-msg{ font-size:0.8rem; color: var(--texto-suave); margin-bottom:8px; }
.cart-drawer-frete-msg strong{ color: var(--bordo); }
.cart-drawer-frete-msg.ganhou{ color: var(--bordo); font-weight:600; margin-bottom:0; }
.cart-drawer-frete-barra{ height:5px; background: var(--creme-escuro); border-radius:20px; overflow:hidden; }
.cart-drawer-frete-progresso{ height:100%; background: var(--bordo); border-radius:20px; transition: width .3s ease; }

.cart-drawer-lista{ flex:1; overflow-y:auto; padding: 4px 22px; }
.cart-drawer-lista .carrinho-item{ padding: 16px 0; }
.cart-drawer-lista .carrinho-item img{ width:64px; height:64px; }
.cart-drawer-lista .carrinho-vazio{ padding: 50px 10px; }

.cart-drawer-rodape{ padding: 18px 22px 22px; border-top: 1px solid var(--borda); flex-shrink:0; }

@media (max-width: 480px){
  .cart-drawer{ width: 100vw; }
}

/* ============================================================
   CHECKOUT
   ============================================================ */
.checkout-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-bottom: 100px;
  align-items:start;
}
@media (min-width: 900px){
  .checkout-grid{ grid-template-columns: 1.4fr 1fr; }
}

.checkout-secao{ margin-bottom: 34px; }
.checkout-secao h2{
  font-family: var(--serif);
  font-size: 1.1rem;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--borda);
}
.checkout-linha{ display:grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; }
@media (min-width: 560px){
  .checkout-linha.cols-2{ grid-template-columns: 1fr 1fr; }
  .checkout-linha.cols-3{ grid-template-columns: 1fr 1fr 1fr; }
}
.checkout-campo{ margin-bottom: 14px; }
.checkout-linha .checkout-campo{ margin-bottom: 0; }
.checkout-campo label{ font-size:0.82rem; font-weight:600; display:block; margin-bottom:6px; }
.checkout-campo input, .checkout-campo select, .checkout-campo textarea{
  width:100%;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 0.92rem;
  background: var(--branco);
}
.checkout-campo textarea{ resize:vertical; }
.checkout-campo-aviso{ display:block; font-size:0.76rem; color: var(--texto-suave); margin-top:5px; }

.checkout-frete-msg{ font-size:0.85rem; color: var(--texto-suave); }
.checkout-frete-msg.erro{ color: var(--bordo); }

.checkout-resumo{
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--radius);
  padding: 24px;
}
@media (min-width: 900px){
  .checkout-resumo{ position: sticky; top: 100px; }
}
.checkout-resumo h2{ font-family: var(--serif); font-size:1.1rem; margin-bottom:14px; }
.checkout-totais{ margin-top: 14px; border-top: 1px solid var(--borda); padding-top: 14px; }
.checkout-total-linha{ display:flex; justify-content:space-between; font-size:0.9rem; margin-bottom:8px; color: var(--texto-suave); }
.checkout-total-final{
  font-family: var(--serif); font-size:1.2rem; color: var(--texto);
  font-variant-numeric: lining-nums tabular-nums;
  border-top: 1px solid var(--borda); padding-top:10px; margin-top:4px;
}
.checkout-aviso-pagamento{ font-size:0.76rem; color: var(--texto-suave); text-align:center; margin-top:12px; }

.checkout-confirmado-icone{
  width:64px; height:64px;
  border-radius:50%;
  background: var(--bordo);
  color: var(--creme);
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem;
  margin: 0 auto 20px;
}
.checkout-confirmado-icone.icone-verde{ background: var(--verde); }
.checkout-confirmado-icone.icone-vermelho{ background: var(--vermelho); }
.checkout-confirmado-icone.icone-amarelo{ background: var(--amarelo); }

/* ---------------- PAGAMENTO (checkout, Mercado Pago) ---------------- */
.pagamento-mp-box{
  display:flex;
  align-items:center;
  gap:14px;
  background: var(--creme-escuro);
  border: 1px solid var(--borda);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: 0.86rem;
  color: var(--texto-suave);
}
.pagamento-mp-box svg{ width:28px; height:28px; color: var(--bordo); flex-shrink:0; }
.pagamento-mp-box strong{ color: var(--texto); display:block; margin-bottom:2px; }
.pagamento-spinner{
  width:34px; height:34px;
  border-radius:50%;
  border: 3px solid var(--creme-escuro);
  border-top-color: var(--bordo);
  margin: 0 auto 18px;
  animation: girarSpinner .8s linear infinite;
}
@keyframes girarSpinner{ to{ transform: rotate(360deg); } }

/* ============================================================
   CONTATO
   ============================================================ */
.contato-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 30px;
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}
.contato-form{ display:flex; flex-direction:column; gap: 14px; }
.contato-form label{ font-size: 0.82rem; font-weight:600; margin-bottom: 5px; display:block; }
.contato-form input, .contato-form textarea{
  width:100%;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 0.92rem;
  resize: vertical;
}
.contato-info{
  background: var(--creme-escuro);
  padding: 26px;
  border-radius: var(--radius);
}
.contato-info h3{ margin-bottom: 12px; }
.contato-info p{ font-size: 0.9rem; margin-bottom: 10px; color: var(--texto); }

@media (min-width: 800px){
  .contato-grid{ grid-template-columns: 1.3fr 1fr; }
}

/* ============================================================
   PÁGINA DE PRODUTO
   ============================================================ */
.produto-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 30px;
  padding: 30px 0 10px;
}
.galeria-principal{
  aspect-ratio: 1/1;
  background-size:cover;
  background-position:center;
  border-radius: var(--radius);
  background-color: var(--creme-escuro);
  overflow:hidden;
  transition: background-size .12s ease-out;
}
@media (hover: hover){
  .galeria-principal{ cursor: zoom-in; }
}
.galeria-thumbs{
  display:flex;
  gap: 10px;
  margin-top: 10px;
  overflow-x:auto;
}
.galeria-thumb{
  width: 64px; height:64px;
  flex-shrink:0;
  background-size:cover;
  background-position:center;
  border-radius: var(--radius);
  border: 2px solid transparent;
  opacity: .65;
}
.galeria-thumb.active{ border-color: var(--bordo); opacity:1; }

.produto-info .eyebrow{ display:block; margin-bottom: 6px; }
.produto-info h1{
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin-bottom: 10px;
}
.produto-preco{
  font-family: var(--serif);
  color: var(--bordo);
  font-size: 1.8rem;
  margin-top: 10px;
  font-variant-numeric: lining-nums tabular-nums;
}
.badge-esgotado{
  display:inline-block;
  margin-top: 12px;
  padding: 4px 12px;
  background: var(--texto);
  color: var(--creme);
  font-size: 0.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  border-radius: 20px;
}
.prod-card.esgotado .prod-img{ opacity:.55; }
.prod-card .badge-esgotado-card{
  position:absolute; top:10px; left:10px;
  padding: 4px 10px;
  background: var(--texto);
  color: var(--creme);
  font-size: 0.66rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  border-radius: 20px;
  z-index:2;
}
.produto-parcelas{
  font-size: 0.84rem;
  color: var(--texto-suave);
  margin-bottom: 18px;
}

.tamanho-wrap{ margin: 18px 0; }
.tamanho-topo{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom: 10px; flex-wrap: wrap; }
.tamanho-topo > *{ min-width: 0; }
.tamanho-wrap h4{ font-size: 0.86rem; font-weight:600; margin-bottom: 10px; overflow-wrap: anywhere; }
.link-guia-tamanho{ font-size: 0.78rem; color: var(--bordo); text-decoration:underline; white-space:nowrap; }
.tamanho-pills{ display:flex; flex-wrap:wrap; gap: 8px; }
.tamanho-pill{
  min-width: 42px;
  padding: 9px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight:600;
}
.tamanho-pill.active{ background: var(--bordo); color: var(--creme); border-color: var(--bordo); }

/* Seletor de banho com foto (swatch) — só aparece se o produto tiver
   opções de banho cadastradas com foto (senão usa o texto simples). */
.banho-swatches{ display:flex; flex-wrap:wrap; gap:10px; }
.banho-swatch{
  width:52px; height:52px;
  border-radius:50%;
  border: 2px solid var(--borda);
  background-size:cover; background-position:center;
  padding:0;
  transition: border-color .2s ease, transform .2s ease;
}
.banho-swatch:hover{ transform: translateY(-2px); }
.banho-swatch.active{ border-color: var(--bordo); box-shadow: 0 0 0 2px var(--creme), 0 0 0 3px var(--bordo); }

/* Popup "escolha o tamanho" ao adicionar direto do card */
.tamanho-modal-overlay{
  position:fixed; inset:0;
  background: rgba(43,33,31,0.45);
  z-index: 970;
  display:flex; align-items:center; justify-content:center;
  padding: 20px;
  opacity:0; visibility:hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.tamanho-modal-overlay.show{ opacity:1; visibility:visible; }
.tamanho-modal{
  background: var(--branco);
  border-radius: var(--radius);
  padding: 30px 26px;
  max-width: 380px;
  width:100%;
  position:relative;
  box-shadow: var(--sombra);
}
.tamanho-modal-fechar{
  position:absolute; top:14px; right:14px;
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  color: var(--texto-suave);
}
.tamanho-modal-fechar svg{ width:16px; height:16px; }
.tamanho-modal h3{ font-family: var(--serif); font-size:1.1rem; margin-bottom:4px; }
.tamanho-modal p{ font-size:0.85rem; color: var(--texto-suave); margin-bottom:16px; }

.qtd-linha{
  display:flex;
  align-items:center;
  gap: 16px;
  margin: 18px 0;
}
.qtd-stepper{
  display:flex; align-items:center; gap: 12px;
  border: 1px solid var(--borda);
  border-radius: 30px;
  padding: 6px 8px;
}
.qtd-stepper button{ width:26px; height:26px; font-size:1.1rem; color: var(--bordo); }
.qtd-stepper button:disabled{ opacity:.4; cursor:not-allowed; }

.trust-row{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 22px 0;
  padding: 16px 0;
  border-top: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
  text-align:center;
}
.trust-row div{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 6px;
  padding: 0 8px;
  font-size: 0.72rem;
  color: var(--texto-suave);
}
.trust-row div:not(:last-child){ border-right: 1px solid var(--borda); }
.trust-row svg{ width:22px; height:22px; color: var(--bordo); }

.whatsapp-linha{
  display:flex; align-items:center; gap: 8px;
  font-size: 0.85rem;
  color: var(--texto-suave);
  margin-top: 8px;
}
.whatsapp-linha a{ color: var(--bordo); text-decoration:underline; }

/* ---------------- CALCULADORA DE FRETE (produto) ---------------- */
.frete-calc{ margin-top: 18px; }
.frete-calc label{ font-size: 0.8rem; font-weight:600; display:block; margin-bottom:8px; }
.frete-calc-linha{ display:flex; gap:8px; }
.frete-calc-linha input{
  flex:1;
  min-width:0;
  padding: 11px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 0.9rem;
}
.frete-calc-linha .btn{ padding: 11px 18px; white-space:nowrap; }
#freteResultado{ margin-top: 12px; }
#freteResultado .frete-opcao{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--borda);
  font-size: 0.86rem;
  flex-wrap: wrap;
}
#freteResultado .frete-opcao > div{ min-width: 0; }
#freteResultado .frete-opcao:last-child{ border-bottom:none; }
#freteResultado .frete-opcao .transportadora{ font-weight:600; }
#freteResultado .frete-opcao .prazo{ color: var(--texto-suave); font-size:0.78rem; display:block; }
#freteResultado .frete-opcao .preco{ font-family: var(--serif); color: var(--bordo); white-space:nowrap; font-size: 1.15rem; font-weight:600; }
#freteResultado .frete-msg{ font-size: 0.85rem; color: var(--texto-suave); }
#freteResultado .frete-msg.erro{ color: var(--bordo); }
#freteResultado .frete-gratis{
  background: var(--creme-escuro);
  color: var(--bordo);
  font-size: 0.85rem;
  font-weight:600;
  padding: 10px 12px;
  border-radius: var(--radius);
}

.tabela-detalhes{ width:100%; border-collapse: collapse; table-layout: fixed; }
.tabela-detalhes td{ padding: 9px 0; font-size: 0.88rem; border-bottom: 1px solid var(--borda); overflow-wrap: anywhere; }
.tabela-detalhes td:first-child{ color: var(--texto-suave); width: 45%; }
.tabela-detalhes td:last-child{ font-weight:600; }

/* No celular, nome/preço/compra vêm ANTES de "Detalhes técnicos" — no
   desktop o HTML não muda (Detalhes técnicos continua dentro da coluna
   da imagem, junto com a galeria); aqui só reordenamos visualmente pro
   celular sem duplicar nada: a .produto-galeria "desaparece" como caixa
   (display:contents) e seus filhos entram direto no fluxo com a ordem
   que queremos. */
@media (max-width: 899px){
  .produto-grid{ display:flex; flex-direction:column; }
  .produto-galeria{ display:contents; }
  #galeriaPrincipal{ order:1; }
  .galeria-thumbs{ order:2; }
  .produto-info{ order:3; }
  .produto-galeria > .faq-item{ order:4; margin-top:24px; }
}

@media (min-width: 900px){
  .produto-grid{ grid-template-columns: 1fr 1fr; gap: 60px; padding: 50px 0 30px; }
}

.prod-name-link{ display:block; }
.prod-name-link:hover .prod-name{ text-decoration: underline; }

/* ============================================================
   ANIMAÇÕES GERAIS
   ============================================================ */
body{ opacity: 0; }
body.pronto{ opacity: 1; transition: opacity .45s ease; }

.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.22,.68,0,1.01), transform .6s cubic-bezier(.22,.68,0,1.01);
}
.reveal.revelado{ opacity: 1; transform: translateY(0); }

/* Levantada no card inteiro (imagem, textos e preço são um único link) */
.prod-card{ transition: transform .25s ease, box-shadow .25s ease; }
.prod-card:hover{ transform: translateY(-6px); box-shadow: 0 14px 30px rgba(43,33,31,0.14); }

.btn{ transition: background .25s ease, color .25s ease, transform .15s ease, box-shadow .25s ease; }
.btn:active{ transform: scale(0.96); }
.btn-primary:hover{ box-shadow: 0 6px 18px rgba(107,15,26,0.25); }

.btn-add{ position:relative; overflow:hidden; }
.btn-add.clicado::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(107,15,26,0.15);
  animation: ondaClique .5s ease-out;
}
@keyframes ondaClique{
  from{ opacity:1; transform: scale(0.3); }
  to{ opacity:0; transform: scale(2.2); }
}

/* pulso no ícone do carrinho ao adicionar item */
@keyframes pulsoCarrinho{
  0%{ transform: scale(1); }
  30%{ transform: scale(1.28); }
  55%{ transform: scale(0.95); }
  100%{ transform: scale(1); }
}
.icon-btn.pulso, a.pulso{ animation: pulsoCarrinho .45s ease; }

.cat-card{ transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.cat-card:hover{ box-shadow: 0 10px 26px rgba(43,33,31,0.08); }
.cat-card svg{ transition: transform .3s ease; }
.cat-card:hover svg{ transform: scale(1.12) rotate(-4deg); }

.vitrine-card img, .vitrine-card{ transition: transform .5s ease; }
.vitrine-card:hover{ transform: translateY(-3px); }

/* ============================================================
   SKELETON (carregando)
   ============================================================ */
.skeleton{
  background: linear-gradient(90deg, var(--creme-escuro) 25%, #f3ede1 37%, var(--creme-escuro) 63%);
  background-size: 400% 100%;
  animation: brilhoSkeleton 1.4s ease infinite;
  border-radius: var(--radius);
}
@keyframes brilhoSkeleton{
  0%{ background-position: 100% 50%; }
  100%{ background-position: 0 50%; }
}
.skeleton-img{ aspect-ratio: 1/1; margin-bottom: 12px; }
.skeleton-linha{ height: 12px; margin-bottom: 8px; }

/* ============================================================
   ESCOLHA POR FORMATO (formato da pedra, estilo Versale)
   ============================================================ */
.formato-wrap{ padding: 26px 20px 6px; }
.formato-wrap h4{ font-size: 0.86rem; font-weight:600; margin-bottom: 14px; }
.formato-pills{
  display:flex;
  gap: 14px;
  overflow-x:auto;
  padding-bottom: 4px;
}
.formato-pill{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 8px;
  flex-shrink:0;
  padding: 12px 16px;
  border: 1px solid var(--borda);
  border-radius: var(--radius);
  font-size: 0.78rem;
  font-weight:600;
  color: var(--texto-suave);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.formato-pill:hover{ transform: translateY(-2px); }
.formato-icone{ width:60px; height:60px; color: var(--bordo); display:block; border-radius: var(--radius); overflow:hidden; background: var(--creme-escuro); }
.formato-icone img{ width:100%; height:100%; object-fit:contain; padding:6px; }
.formato-pill.active{ border-color: var(--bordo); background: var(--creme-escuro); color: var(--texto); }

/* ============================================================
   AVALIAÇÕES
   ============================================================ */
.estrelas{ display:inline-flex; gap:2px; color: var(--bordo); vertical-align:middle; }
.rating-resumo{ display:flex; align-items:center; gap:8px; margin: 10px 0 4px; font-size:0.86rem; }
.rating-numero{ font-weight:700; }
.rating-contagem{ color: var(--texto-suave); }

.avaliacoes-wrap{ max-width: 800px; }
.avaliacoes-topo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom: 20px;
}
.avaliacoes-topo h2{ font-size: 1.3rem; }
.avaliacao-item{
  padding: 18px 0;
  border-bottom: 1px solid var(--borda);
}
.avaliacao-topo{ display:flex; align-items:center; gap:10px; margin-bottom:6px; flex-wrap:wrap; }
.avaliacao-nome{ font-size:0.85rem; font-weight:600; color: var(--texto-suave); min-width:0; overflow-wrap:anywhere; }
.avaliacao-item p{ font-size:0.92rem; }

/* Elementos que animam já na carga da página (ex: hero, acima da dobra) */
.entra-com-pagina{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease .15s, transform .7s ease .15s;
}
body.pronto .entra-com-pagina{ opacity: 1; transform: translateY(0); }

.avaliacao-data{ color: var(--texto-suave); font-size: 0.78rem; margin-left: auto; }
.avaliacao-fotos{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.avaliacao-fotos img{ width:64px; height:64px; object-fit:cover; border-radius: var(--radius); cursor:pointer; }

/* Grid de "relacionados" (4 itens) — evita coluna vazia em telas grandes */
@media (min-width: 1000px){
  .prod-grid-4col{ grid-template-columns: repeat(4, 1fr) !important; }
}

/* ============================================================
   CARD DE CATEGORIA ESTILO POLAROID (home)
   ============================================================ */
.cat-polaroid{
  display:flex;
  flex-direction:column;
  align-items:center;
  background: var(--branco);
  padding: 10px 10px 20px;
  box-shadow: 0 8px 20px rgba(43,33,31,0.10);
  transition: transform .3s ease, box-shadow .3s ease;
}
.cat-polaroid:nth-child(3n+1){ transform: rotate(-1.6deg); }
.cat-polaroid:nth-child(3n+2){ transform: rotate(1.4deg); }
.cat-polaroid:nth-child(3n+3){ transform: rotate(-0.8deg); }
.cat-polaroid:hover{
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 0 16px 34px rgba(43,33,31,0.18);
}
.cat-polaroid-photo{
  width: 100%;
  aspect-ratio: 1/1;
  background-size: cover;
  background-position: center;
  background-color: var(--creme-escuro);
  margin-bottom: 14px;
}
.cat-polaroid-nome{
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--texto);
  text-align: center;
}

/* ============================================================
   FAIXA (banner contido, imagem + texto lado a lado)
   Usado no hero da home e nos blocos educativos da página de produto
   (estilo comum em sites de joalheria: banner "boxed", não tela cheia)
   ============================================================ */
.faixa{
  display:grid;
  grid-template-columns: 1fr;
  border-radius: var(--radius);
  overflow:hidden;
  background: var(--creme-escuro);
}
.faixa-img{
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  background-color: var(--creme-escuro);
}
.faixa-content{
  padding: 30px 24px 34px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.faixa-content .eyebrow{ margin-bottom: 8px; }
.faixa-content h1, .faixa-content h3{
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  line-height: 1.15;
  margin-bottom: 18px;
  color: var(--texto);
}
.faixa-content p{
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--texto);
  margin-bottom: 8px;
}
.faixa .btn{ align-self:flex-start; }

/* variação escura (fundo bordô), pra blocos que precisam de mais contraste/destaque */
.faixa--escura{ background: var(--bordo-escuro); }
.faixa--escura .faixa-content .eyebrow{ color: var(--creme); opacity:.85; }
.faixa--escura .faixa-content h1, .faixa--escura .faixa-content h3{ color: var(--creme); }
.faixa--escura .faixa-content p{ color: var(--creme); opacity:.9; }

/* inverte a ordem (imagem à direita) em telas grandes */
.faixa--reverso .faixa-content{ order: 2; }
.faixa--reverso .faixa-img{ order: 1; }

@media (min-width: 900px){
  .faixa{ grid-template-columns: 1.2fr 1fr; }
  .faixa-img{ aspect-ratio: auto; min-height: 420px; }
  .faixa-content{ padding: 50px 60px; }
  .faixa--reverso{ grid-template-columns: 1fr 1.2fr; }
}