/* /assets/css/site.css — Público (Home) */

:root{
  --bg:#F7F5F0;
  --sand:#E9E2D6;
  --text:#121212;
  --muted:#4B4B4B;
  --wine:#6B1F2A;
  --gold:#B89B5E;

  --stroke: rgba(18,18,18,.10);
  --stroke2: rgba(18,18,18,.14);

  --r: 18px;
  --r2: 24px;

  --shadow-sm: 0 6px 18px rgba(0,0,0,.06);
  --shadow: 0 14px 44px rgba(0,0,0,.10);
  --shadow-hi: 0 26px 78px rgba(0,0,0,.16);

  --ease: cubic-bezier(.2,.8,.2,1);
  --ring: 0 0 0 5px rgba(107,31,42,.12);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: "Manrope", system-ui, -apple-system, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.container{
  width:min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.ambient{
  position: fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
}
.orb{
  position:absolute;
  filter: blur(26px);
  opacity:.9;
  transform: translate3d(0,0,0);
  animation: float 10s var(--ease) infinite alternate;
}
.orb-a{
  width:520px;height:520px;
  left:-140px; top:-180px;
  background: radial-gradient(circle at 30% 30%, rgba(184,155,94,.34), transparent 60%);
}
.orb-b{
  width:560px;height:560px;
  right:-180px; top:-120px;
  background: radial-gradient(circle at 40% 40%, rgba(107,31,42,.24), transparent 62%);
  animation-duration: 12s;
}
.orb-c{
  width:480px;height:480px;
  left:12%; bottom:-240px;
  background: radial-gradient(circle at 40% 40%, rgba(184,155,94,.22), transparent 62%);
  animation-duration: 14s;
}
.grain{
  position:absolute; inset:-30%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity:.35;
}

@keyframes float{
  from{ transform: translate3d(0,0,0) scale(1); }
  to{ transform: translate3d(0,18px,0) scale(1.03); }
}

/* Header */
.hdr{
  position: sticky;
  top:0;
  z-index:50;
  border-bottom: 1px solid rgba(18,18,18,.08);
  background: linear-gradient(to bottom, rgba(247,245,240,.86), rgba(247,245,240,.62));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.hdr__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
  gap: 14px;
}
.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: .2px;
}
.brand__mark{
  width: 26px;height:26px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(107,31,42,.95), rgba(79,21,32,.95));
  box-shadow: 0 14px 34px rgba(107,31,42,.22);
}
.nav{
  display:flex;
  gap: 18px;
}
.nav__link{
  font-weight: 750;
  color: var(--wine);
  padding: 8px 10px;
  border-radius: 14px;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.nav__link:hover{
  background: rgba(107,31,42,.08);
  transform: translateY(-1px);
}

.menuBtn{
  display:none;
  width: 44px;height:44px;
  border-radius: 16px;
  border: 1px solid rgba(18,18,18,.10);
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow-sm);
}
.menuBtn span{
  display:block;
  width: 18px;height:2px;
  background: rgba(18,18,18,.85);
  margin: 6px auto;
  border-radius: 99px;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}

.mnav{
  padding: 10px 0 16px;
}
.mnav a{
  display:block;
  padding: 12px 0;
  font-weight: 800;
  color: var(--wine);
}

@media (max-width: 860px){
  .nav{ display:none; }
  .menuBtn{ display:inline-block; }
}

/* Hero */
.hero{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 22px;
  padding: 32px 0 14px;
}
.kicker{
  margin:0 0 10px 0;
  color: rgba(18,18,18,.62);
  font-weight: 750;
  letter-spacing: .18px;
}
.hero__title{
  margin:0;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  letter-spacing: -.4px;
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1.03;
}
.accent{ color: var(--wine); }
.hero__sub{
  margin: 12px 0 18px;
  color: rgba(18,18,18,.70);
  font-size: 15px;
  line-height: 1.6;
  max-width: 54ch;
}

.search{
  position: relative;
  display:flex;
  gap: 10px;
  padding: 10px;
  border-radius: 22px;
  border: 1px solid rgba(18,18,18,.10);
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.search__icon{
  width: 44px;height:44px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 30% 30%, rgba(184,155,94,.26), transparent 62%),
    rgba(18,18,18,.92);
  position: relative;
}
.search__icon::after{
  content:"";
  position:absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  opacity:.92;
}
.search input{
  flex:1;
  border:0;
  outline:none;
  background: transparent;
  font: inherit;
  padding: 10px 4px;
  color: var(--text);
}
.search input::placeholder{ color: rgba(18,18,18,.45); }

.sug{
  position:absolute;
  left: 10px;
  right: 10px;
  top: calc(100% + 10px);
  border-radius: 22px;
  border: 1px solid rgba(18,18,18,.10);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-hi);
  overflow:hidden;
}
.sug button{
  width:100%;
  text-align:left;
  border:0;
  background: transparent;
  padding: 12px 14px;
  font: inherit;
  cursor:pointer;
}
.sug button:hover{
  background: rgba(184,155,94,.10);
}

.hero__meta{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.meta{
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(18,18,18,.08);
  background: rgba(255,255,255,.64);
}
.meta__n{ display:block; font-weight: 900; color: var(--wine); }
.meta__t{ display:block; color: rgba(18,18,18,.62); font-size: 12px; margin-top: 4px; }

.showcase{
  height: 100%;
  min-height: 320px;
  border-radius: 28px;
  border: 1px solid rgba(18,18,18,.08);
  background: linear-gradient(to bottom, rgba(255,255,255,.84), rgba(255,255,255,.62));
  box-shadow: var(--shadow-hi);
  position: relative;
  overflow:hidden;
}
.showcase__glow{
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(520px 280px at 30% 30%, rgba(184,155,94,.22), transparent 60%),
    radial-gradient(520px 280px at 70% 20%, rgba(107,31,42,.18), transparent 65%);
  transform: rotate(8deg);
  animation: shimmer 8s var(--ease) infinite alternate;
}
@keyframes shimmer{
  from{ transform: rotate(8deg) translateY(0); opacity:.9; }
  to{ transform: rotate(8deg) translateY(16px); opacity:1; }
}
.showcase__card{
  position:absolute;
  left: 18px; right: 18px;
  bottom: 18px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(18,18,18,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.showcase__cap{ font-weight: 900; letter-spacing:.2px; }
.showcase__stat{ margin-top: 10px; color: rgba(18,18,18,.66); display:flex; gap:10px; align-items:center; }
.dot{ width:10px;height:10px;border-radius:99px; display:inline-block; }
.dot--wine{ background: var(--wine); }
.dot--gold{ background: var(--gold); }
.dot--char{ background: rgba(18,18,18,.75); }

@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; }
  .hero__meta{ grid-template-columns: 1fr; }
  .showcase{ min-height: 280px; }
}

/* Sections */
.section{ padding: 22px 0 10px; }
.section__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 12px;
  margin-bottom: 14px;
}
.h2{
  margin:0;
  font-family:"Playfair Display", serif;
  font-size: 28px;
  letter-spacing: -.2px;
}
.p{ margin:0; color: rgba(18,18,18,.62); }

.link{
  font-weight: 850;
  color: var(--wine);
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(107,31,42,.06);
}

/* Categories */
.cats{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}
.cat{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 22px;
  border: 1px solid rgba(18,18,18,.08);
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
  position: relative;
  overflow:hidden;
}
.cat::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(360px 160px at 25% 30%, rgba(184,155,94,.14), transparent 60%),
    radial-gradient(360px 160px at 80% 10%, rgba(107,31,42,.10), transparent 65%);
  transform: rotate(8deg);
  opacity:.9;
  pointer-events:none;
}
.cat > *{ position:relative; }
.cat:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(18,18,18,.12);
}
.cat__icon{
  width: 44px;height:44px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 30% 30%, rgba(184,155,94,.22), transparent 60%),
    rgba(18,18,18,.92);
  display:grid;
  place-items:center;
  box-shadow: 0 16px 42px rgba(0,0,0,.18);
}
.cat__icon svg{
  width: 22px;height:22px;
  fill: none;
  stroke: rgba(255,255,255,.92);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cat__name{ font-weight: 900; }
.cat__chev{
  width: 22px;height:22px;
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(18,18,18,.10);
  position: relative;
}
.cat__chev::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  opacity:.65;
}

@media (max-width: 980px){
  .cats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .cats{ grid-template-columns: 1fr; }
}

/* Product cards */
.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.grid--tight{ grid-template-columns: repeat(4, minmax(0,1fr)); }

@media (max-width: 980px){
  .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid--tight{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .grid{ grid-template-columns: 1fr; }
  .grid--tight{ grid-template-columns: 1fr; }
}

.cardP{
  border-radius: 26px;
  border: 1px solid rgba(18,18,18,.08);
  background: rgba(255,255,255,.76);
  box-shadow: var(--shadow);
  overflow:hidden;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.cardP:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-hi);
  border-color: rgba(18,18,18,.12);
}
.cardP__media{
  position:relative;
  aspect-ratio: 4 / 3;
  overflow:hidden;
  display:block;
}
.cardP__media img{
  width:100%; height:100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform .55s var(--ease);
}
.cardP:hover .cardP__media img{ transform: scale(1.06); }
.cardP__shade{
  position:absolute; inset:0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.35));
}
.badges{
  position:absolute;
  left: 12px; top: 12px;
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
}
.badge{
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(18,18,18,.60);
  color:#fff;
}
.badge--off{ background: rgba(18,18,18,.72); }
.badge--promo{ background: rgba(107,31,42,.82); }
.badge--gold{ background: rgba(184,155,94,.82); }

.cardP__body{ padding: 14px 14px 16px; }
.cardP__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}
.cardP__t{ margin:0; font-size: 16px; font-weight: 900; }
.cardP__c{ margin: 4px 0 0; color: rgba(18,18,18,.58); font-size: 12px; }

.pill{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(18,18,18,.10);
  background: rgba(255,255,255,.70);
  font-weight: 900;
  font-size: 12px;
}

.price{
  margin: 12px 0 12px;
  display:flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap:wrap;
}
.price__old{
  color: rgba(107,31,42,.85);
  text-decoration: line-through;
  font-weight: 800;
  font-size: 12px;
}
.price__new{
  font-weight: 950;
  font-size: 16px;
  letter-spacing: .1px;
}

.cardP__actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Buttons premium */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(18,18,18,.10);
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow-sm);
  cursor:pointer;
  user-select:none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
  position: relative;
  overflow:hidden;
}
.btn:active{ transform: translateY(1px); }
.btn:focus{ outline:none; box-shadow: var(--ring); }

.btn--primary{
  border:0;
  color:#fff;
  background: linear-gradient(135deg, #6B1F2A, #4F1520);
  box-shadow: 0 20px 60px rgba(107,31,42,.25);
}
.btn--ghost{
  background: rgba(255,255,255,.78);
}

.btn::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(400px 120px at var(--mx, 20%) var(--my, 50%), rgba(184,155,94,.20), transparent 60%);
  opacity: .0;
  transition: opacity .25s var(--ease);
}
.btn:hover::after{ opacity: 1; }

/* Mini list */
.mini{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 12px;
  border-radius: 22px;
  border: 1px solid rgba(18,18,18,.08);
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.mini:hover{ transform: translateY(-3px); box-shadow: var(--shadow); }
.mini__img{
  width: 70px;height:70px;
  border-radius: 18px;
  overflow:hidden;
  flex: 0 0 auto;
}
.mini__img img{ width:100%; height:100%; object-fit:cover; }
.mini__t{ font-weight: 950; display:block; }
.mini__m{ color: rgba(18,18,18,.58); font-size: 12px; display:block; margin-top:2px; }
.mini__p{ display:flex; gap: 10px; align-items: baseline; margin-top: 6px; }
.mini__old{ color: rgba(107,31,42,.85); text-decoration: line-through; font-weight: 850; font-size: 12px; }
.mini__new{ font-weight: 950; }
.mini__go{
  margin-left:auto;
  width: 34px;height:34px;
  border-radius: 14px;
  border: 1px solid rgba(18,18,18,.10);
  background: rgba(255,255,255,.7);
  position: relative;
}
.mini__go::after{
  content:"";
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  opacity:.65;
}

/* CTA */
.cta{ padding: 22px 0 34px; }
.cta__card{
  border-radius: 28px;
  border: 1px solid rgba(18,18,18,.08);
  background: linear-gradient(to bottom, rgba(255,255,255,.82), rgba(255,255,255,.62));
  box-shadow: var(--shadow-hi);
  padding: 22px;
  position: relative;
  overflow:hidden;
}
.cta__card::before{
  content:"";
  position:absolute; inset:-30%;
  background:
    radial-gradient(520px 240px at 20% 30%, rgba(184,155,94,.18), transparent 60%),
    radial-gradient(520px 240px at 80% 10%, rgba(107,31,42,.14), transparent 65%);
  transform: rotate(8deg);
  opacity: .95;
  pointer-events:none;
}
.cta__card > *{ position:relative; }
.cta__t{
  margin:0;
  font-family:"Playfair Display", serif;
  font-size: 28px;
}
.cta__p{ margin: 8px 0 14px; color: rgba(18,18,18,.65); }
.cta__actions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}

/* Footer (premium) */
.ftr{
  padding: 18px 0 34px;
}

.ftr__card{
  border-radius: 28px;
  border: 1px solid rgba(18,18,18,.08);
  background: linear-gradient(to bottom, rgba(255,255,255,.82), rgba(255,255,255,.62));
  box-shadow: var(--shadow-hi);
  position: relative;
  overflow:hidden;
  padding: 18px;
}

.ftr__card::before{
  content:"";
  position:absolute;
  left: 0; right:0; top:0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(184,155,94,.75), transparent);
  opacity: .9;
}

.ftr__card::after{
  content:"";
  position:absolute; inset:-30%;
  background:
    radial-gradient(520px 220px at 18% 40%, rgba(184,155,94,.14), transparent 60%),
    radial-gradient(520px 220px at 85% 0%, rgba(107,31,42,.10), transparent 65%);
  transform: rotate(8deg);
  opacity: .9;
  pointer-events:none;
}

.ftr__card > *{ position: relative; }

.ftr__left{
  display:flex;
  align-items:center;
  gap: 14px;
  min-width: 0;
}

.ftr__brand{
  display:flex;
  align-items:center;
  justify-content:center;
  width: 60px;
  height: 60px;
  border-radius: 22px;
  border: 1px solid rgba(18,18,18,.08);
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow-sm);
  overflow:hidden;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}

.ftr__brand:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.ftr__logo{
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.ftr__info{
  display:flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ftr__copy{
  margin:0;
  font-weight: 950;
  letter-spacing: .1px;
}

.ftr__muted{
  margin:0;
  color: rgba(18,18,18,.62);
  font-size: 13px;
  line-height: 1.35;
}

.ftr__right{
  margin-left: auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 14px;
}

.ftr__dev{
  display:flex;
  align-items:center;
  gap: 10px;
}

.ftr__devBrand{
  display:flex;
  align-items:center;
  justify-content:center;
  height: 44px;
  padding: 0 14px;
  border-radius: 18px;
  border: 1px solid rgba(18,18,18,.08);
  background: rgba(255,255,255,.70);
  box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}

.ftr__devBrand:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.ftr__devLogo{
  height: 22px;
  width: auto;
  object-fit: contain;
}

/* layout */
.ftr__card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}

/* responsivo */
@media (max-width: 720px){
  .ftr__card{
    flex-direction: column;
    align-items: stretch;
    text-align:center;
  }
  .ftr__left{
    justify-content: center;
  }
  .ftr__right{
    justify-content: center;
    margin-left: 0;
  }
  .ftr__dev{
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* Reveal (SAFE): data-reveal NÃO esconde sozinho.
   Só esconde quando o JS aplica .reveal */
[data-reveal]{
  opacity: 1;
  transform: none;
}

.reveal[data-reveal]{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
  will-change: opacity, transform;
}

.reveal.is-in{
  opacity: 1;
  transform: translateY(0);
}

/* No catálogo: evita cards invisíveis caso algum browser ignore JS */
.gridCatalog [data-reveal]{ opacity: 1; transform: none; }
.gridCatalog .reveal[data-reveal]{ opacity: 0; transform: translateY(12px); }
.gridCatalog .reveal.is-in{ opacity: 1; transform: translateY(0); }


@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* =========================
   CATÁLOGO (luxo premium)
========================= */

.srOnly{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

.catalog{ padding-bottom: 34px; }

.catalogHero{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 14px;
  padding: 26px 0 12px;
}
.catalogHero__t{
  margin:0;
  font-family:"Playfair Display", serif;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: -.3px;
}
.catalogHero__p{ margin: 8px 0 0; color: rgba(18,18,18,.64); max-width: 60ch; }

.statPill{
  padding: 12px 14px;
  border-radius: 22px;
  border: 1px solid rgba(18,18,18,.08);
  background: rgba(255,255,255,.70);
  box-shadow: var(--shadow-sm);
  text-align:right;
}
.statPill__n{ display:block; font-weight: 950; color: var(--wine); font-size: 20px; }
.statPill__t{ display:block; color: rgba(18,18,18,.60); font-size: 12px; margin-top: 2px; }

.filtersWrap{ padding: 10px 0 14px; }
.filtersBar{
  position: sticky;
  top: 70px;
  z-index: 30;
  border-radius: 28px;
  border: 1px solid rgba(18,18,18,.08);
  background: linear-gradient(to bottom, rgba(255,255,255,.86), rgba(255,255,255,.66));
  box-shadow: var(--shadow);
  padding: 12px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.filtersTop{
  display:grid;
  grid-template-columns: 1fr 240px;
  gap: 12px;
  align-items:center;
}

.searchInline{
  position: relative;
  display:flex;
  gap: 10px;
  align-items:center;
  border-radius: 22px;
  border: 1px solid rgba(18,18,18,.10);
  background: rgba(255,255,255,.70);
  padding: 10px;
}
.searchInline__icon{
  width: 44px;height:44px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 30% 30%, rgba(184,155,94,.26), transparent 62%),
    rgba(18,18,18,.92);
  position:relative;
  flex: 0 0 auto;
}
.searchInline__icon::after{
  content:"";
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  opacity:.92;
}
.searchInline input{
  flex:1;
  border:0;
  outline:none;
  background: transparent;
  font: inherit;
  padding: 10px 4px;
}

.selectPremium{
  width: 100%;
  border-radius: 22px;
  border: 1px solid rgba(18,18,18,.10);
  background: rgba(255,255,255,.70);
  padding: 14px 14px;
  box-shadow: var(--shadow-sm);
  appearance:none;
  -webkit-appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(18,18,18,.55) 50%),
    linear-gradient(135deg, rgba(18,18,18,.55) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.chips{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  overflow:auto;
  padding: 6px 2px;
  scroll-snap-type: x mandatory;
}
.chip{
  scroll-snap-align: start;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(18,18,18,.08);
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow-sm);
  cursor:pointer;
  user-select:none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
  white-space: nowrap;
}
.chip:hover{ transform: translateY(-2px); box-shadow: var(--shadow); border-color: rgba(18,18,18,.12); }
.chip input{ display:none; }

.chip__icon{
  width: 34px;height:34px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 30%, rgba(184,155,94,.22), transparent 60%),
    rgba(18,18,18,.92);
  display:grid;
  place-items:center;
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
}
.chip__icon svg{
  width: 18px;height:18px;
  fill:none;
  stroke: rgba(255,255,255,.92);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chip__t{ font-weight: 900; font-size: 13px; }

.chip:has(input:checked){
  border-color: rgba(107,31,42,.28);
  background: rgba(107,31,42,.08);
}
.chip:has(input:checked) .chip__icon{
  background:
    radial-gradient(circle at 30% 30%, rgba(184,155,94,.22), transparent 60%),
    linear-gradient(135deg, #6B1F2A, #4F1520);
}

.toggles{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}

.toggle{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(18,18,18,.08);
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow-sm);
  cursor:pointer;
  user-select:none;
}
.toggle input{ display:none; }
.toggle__ui{
  width: 42px; height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(18,18,18,.10);
  background: rgba(18,18,18,.12);
  position: relative;
  transition: background .2s var(--ease);
}
.toggle__ui::after{
  content:"";
  position:absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  transition: transform .22s var(--ease);
}
.toggle:has(input:checked) .toggle__ui{
  background: rgba(107,31,42,.92);
}
.toggle:has(input:checked) .toggle__ui::after{
  transform: translateX(16px);
}
.toggle__t{ font-weight: 900; font-size: 13px; }

.countPill{
  margin-left:auto;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(18,18,18,.08);
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow-sm);
  font-weight: 900;
}

.gridCatalog{ margin-top: 14px; }
.cardP--catalog .cardP__actions{
  grid-template-columns: 1fr 1fr;
}

.loadMoreWrap{
  margin-top: 16px;
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 8px;
}
.loadMoreHint{ font-size: 13px; }

.gridLoading{
  position: fixed;
  inset: 0;
  background: rgba(247,245,240,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display:grid;
  place-items:center;
}
.gridLoading__shimmer{
  width: min(620px, calc(100% - 40px));
  height: 120px;
  border-radius: 28px;
  border: 1px solid rgba(18,18,18,.08);
  background:
    linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,.92), rgba(255,255,255,.55));
  background-size: 240% 100%;
  animation: shimmerLoad 1.2s linear infinite;
  box-shadow: var(--shadow-hi);
}
@keyframes shimmerLoad{
  0%{ background-position: 0% 0; }
  100%{ background-position: 240% 0; }
}

.emptyState{
  margin-top: 16px;
  padding: 18px;
  border-radius: 28px;
  border: 1px solid rgba(18,18,18,.08);
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow);
  text-align:center;
}
.emptyState h3{ margin: 0 0 6px; font-family:"Playfair Display", serif; }
.emptyState p{ margin: 0 0 12px; color: rgba(18,18,18,.62); }

@media (max-width: 980px){
  .filtersTop{ grid-template-columns: 1fr; }
  .filtersBar{ top: 64px; }
  .countPill{ margin-left: 0; }
}

@media (max-width: 520px){
  .catalogHero{ flex-direction: column; align-items:flex-start; }
  .cardP--catalog .cardP__actions{ grid-template-columns: 1fr; }
}

/* FIX: respeitar atributo hidden do overlay */
.gridLoading[hidden]{
  display: none !important;
}

/* ===== Mobile Menu: hamburger -> X + botões centralizados ===== */

/* Botão do menu (já existe .menuBtn) */
.menuBtn{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(18,18,18,.10);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s cubic-bezier(.2,.8,.2,1);
}
.menuBtn:active{ transform: scale(.98); box-shadow: 0 10px 24px rgba(0,0,0,.08); }

/* As “linhas” do hamburger (seu HTML tem 2 spans) */
.menuBtn span{
  position: absolute;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: rgba(18,18,18,.82);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .18s cubic-bezier(.2,.8,.2,1);
}

/* Posições padrão */
.menuBtn span:nth-child(1){ transform: translateY(-5px); }
.menuBtn span:nth-child(2){ transform: translateY(5px); }

/* Quando aberto: vira X */
.hdr.is-open .menuBtn span:nth-child(1){
  transform: translateY(0) rotate(45deg);
}
.hdr.is-open .menuBtn span:nth-child(2){
  transform: translateY(0) rotate(-45deg);
}

/* Container do menu mobile */
.mnav{
  padding: 14px 16px 18px;
  border-top: 1px solid rgba(18,18,18,.06);
  background: linear-gradient(to bottom, rgba(247,245,240,.75), rgba(247,245,240,.55));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  /* animação */
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .22s cubic-bezier(.2,.8,.2,1), transform .22s cubic-bezier(.2,.8,.2,1);
}

/* Quando aberto */
.hdr.is-open .mnav{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Links viram botões centralizados */
.mnav a{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  width: min(360px, 92vw);
  margin: 10px auto 0;
  padding: 12px 14px;

  border-radius: 999px;
  border: 1px solid rgba(18,18,18,.10);
  background: rgba(255,255,255,.78);
  box-shadow: 0 16px 45px rgba(0,0,0,.10);

  font-weight: 750;
  text-decoration: none;
  color: #6B1F2A; /* vinho */
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s cubic-bezier(.2,.8,.2,1), background .18s cubic-bezier(.2,.8,.2,1);
}
.mnav a:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.92);
  box-shadow: 0 22px 64px rgba(0,0,0,.14);
}
.mnav a:active{ transform: translateY(0); }

/* No mobile, esconde nav desktop e deixa menu btn */
@media (max-width: 820px){
  .hdr .nav{ display:none; }
}

/* ===== NÃO mostrar menu mobile no desktop ===== */
@media (min-width: 821px){
  .mnav{ 
    display: none !important;
  }
  /* e se por acaso o JS abrir, ainda assim não aparece */
  .hdr.is-open .mnav{
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: none !important;
  }
}

/* ===== Desktop: mostra NAV normal e esconde menu mobile ===== */
@media (min-width: 821px){
  .hdr .nav{ display:flex !important; }
  .hdr .menuBtn{ display:none !important; }
  .hdr .mnav{ display:none !important; }
}

/* ===== Mobile: esconde NAV normal e mostra botão ===== */
@media (max-width: 820px){
  .hdr .nav{ display:none !important; }
  .hdr .menuBtn{ display:inline-flex !important; }
}

.mdd-brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  color: inherit;
  min-width: 180px;
}
.mdd-brand__logo{
  height: 25px;
  object-fit: contain;
}
.mdd-brand__text{ line-height: 1.05; }
.mdd-brand__name{ font-weight: 900; letter-spacing: -.2px; }
.mdd-brand__sub{ opacity: .75; font-weight: 800; }

/* Ícone personalizado (PNG/SVG) dentro da bolinha da categoria */
.cat__icon img{
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}

/* Se seu .cat__icon for maior, mantém alinhado */
.cat__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===== WhatsApp Modal ===== */

.waModal{
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
}

.waModal[hidden]{ display:none !important; }

.waModal__overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
}

.waModal__card{
  position:relative;
  width:min(420px, calc(100% - 32px));
  border-radius: 28px;
  padding: 24px;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(18,18,18,.08);
  box-shadow: 0 30px 80px rgba(0,0,0,.25);
  text-align:center;
  animation: waPop .25s cubic-bezier(.2,.8,.2,1);
}

@keyframes waPop{
  from{ transform: translateY(10px) scale(.96); opacity:0; }
  to{ transform: translateY(0) scale(1); opacity:1; }
}

.waModal__actions{
  margin-top: 16px;
  display:flex;
  gap: 12px;
  justify-content:center;
}

.waModal__close{
  position:absolute;
  top:12px;
  right:14px;
  border:0;
  background:none;
  font-size:18px;
  cursor:pointer;
}