* { margin:0; padding:0; box-sizing:border-box; }

body {
  background:#F3EDE4;
  color:#604C43;
  font-family:'Manrope', sans-serif;
}
a { text-decoration:none; color:inherit; }

/* ANNOUNCEMENT BAR */
.announce {
  background:#604C43;
  color:#F3EDE4;
  text-align:center;
  font-size:12px;
  letter-spacing:1px;
  padding:8px 20px;
}

/* HEADER */
header {
  background:#F3EDE4;
  border-bottom:1px solid rgba(96,76,67,0.12);
  padding:22px 40px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo-block { text-align:center; flex:1; }
.logo-block .name {
  font-family:'DM Serif Display', serif;
  font-size:30px;
  letter-spacing:3px;
  color:#604C43;
}
.logo-block .sub {
  font-size:10px;
  letter-spacing:5px;
  color:#A99586;
  margin-top:2px;
}
.header-icons { display:flex; gap:18px; font-size:13px; color:#604C43; min-width:160px; justify-content:flex-end; }
.header-icons span { cursor:pointer; opacity:0.8; transition: transform .2s ease, opacity .2s ease; display:inline-block; }
.header-icons span:hover { transform:translateY(-2px); opacity:1; }
.menu-toggle {
  min-width:160px;
  font-size:20px;
  cursor:pointer;
  background:none;
  border:none;
  padding:0;
  text-align:left;
  color:#604C43;
  font-family:inherit;
  transition: opacity .2s ease;
}
.menu-toggle:hover { opacity:0.7; }

/* SECTION TABS */
.section-tabs {
  background:#fff;
  display:flex;
  justify-content:center;
  gap:50px;
  padding:16px 20px 0;
  border-bottom:1px solid rgba(96,76,67,0.1);
}
.tab {
  text-align:center;
  padding-bottom:14px;
  font-size:13px;
  letter-spacing:1.5px;
  color:#A99586;
  border-bottom:2px solid transparent;
  cursor:pointer;
  transition: color .25s ease, border-color .25s ease;
}
.tab:hover { color:#604C43; }
.tab .path {
  display:block;
  font-size:9px;
  letter-spacing:0.5px;
  color:#c9bcae;
  margin-top:3px;
  font-family:'Manrope',sans-serif;
}
.tab.active {
  color:#604C43;
  font-weight:600;
  border-bottom-color:#C0304F;
}
.tab.active .path { color:#C0304F; }

/* LAYOUT */
.layout {
  display:flex;
  align-items:flex-start;
  max-width:1300px;
  margin:0 auto;
}

/* SIDEBAR */
.sidebar {
  width:230px;
  flex-shrink:0;
  padding:40px 24px;
  position:sticky;
  top:0;
  border-right:1px solid rgba(96,76,67,0.1);
  min-height:600px;
}
.sidebar .eyebrow {
  font-size:10px;
  letter-spacing:3px;
  color:#B88F70;
  margin-bottom:16px;
}
.sidebar ul { list-style:none; }
.sidebar li {
  padding:11px 0;
  font-size:14px;
  color:#604C43;
  border-bottom:1px solid rgba(96,76,67,0.06);
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  transition: color .2s ease, padding-left .2s ease;
}
.sidebar li a { color:inherit; flex:1; }
.sidebar li:hover { color:#B88F70; padding-left:4px; }
.sidebar li .count { color:#A99586; font-size:11px; }
.sidebar li.active { color:#C0304F; padding-left:4px; }
.sidebar li.active a { font-weight:600; }
.sidebar li.active .count { color:#C0304F; }
.sidebar .promo-box {
  margin-top:36px;
  background:#F3EDE4;
  border:1px solid #C0304F;
  padding:20px 16px;
  font-size:12px;
  line-height:1.6;
  color:#7d6a5d;
}
.sidebar .promo-box b { color:#C0304F; display:block; font-family:'DM Serif Display',serif; font-size:16px; margin-bottom:6px; }

/* MAIN */
main { flex:1; padding:40px 40px 0; }

/* HERO CARROSSEL — entra com fade no carregamento da página */
.hero-carousel {
  position:relative;
  overflow:hidden;
  height:340px;
  margin-bottom:60px;
  opacity:0;
  animation: heroFadeIn 1.2s ease forwards .2s;
}
@keyframes heroFadeIn {
  from { opacity:0; transform:translateY(16px); }
  to { opacity:1; transform:translateY(0); }
}
.hero-track {
  display:flex;
  width:300%;
  height:100%;
  animation: slide 15s infinite;
}
.hero-slide {
  width:33.333%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 30px;
  position:relative;
}
.hero-slide:nth-child(1) { background:linear-gradient(120deg, #EFE6DA, #F3EDE4 60%, #E9DED0); }
.hero-slide:nth-child(2) { background:linear-gradient(120deg, #E9DED0, #F0E7DA 60%, #E3D5C4); }
.hero-slide:nth-child(3) { background:linear-gradient(120deg, #F3EDE4, #EFE6DA 60%, #E6DACB); }
.hero-slide video {
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
}
.hero-slide .overlay {
  position:absolute;
  top:0; left:0; width:100%; height:100%;
  background:rgba(243,237,228,0.18);
  z-index:1;
}
.hero-slide .brand, .hero-slide .tagline, .hero-slide .cta {
  position:relative;
  z-index:2;
}
.hero-slide .brand {
  font-family:'DM Serif Display', serif;
  font-size:44px;
  letter-spacing:2px;
}
.hero-slide .tagline {
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:18px;
  color:#9B7D7D;
  margin-top:12px;
}
.hero-slide .cta {
  display:inline-block;
  margin-top:22px;
  font-size:12px;
  letter-spacing:2px;
  color:#fff;
  background:#C0304F;
  padding:10px 20px;
  border-radius:2px;
  cursor:pointer;
  transition: transform .25s ease, background .25s ease;
}
.hero-slide .cta:hover {
  transform:translateY(-2px);
  background:#a8263f;
}
@keyframes slide {
  0%, 28% { transform:translateX(0); }
  33%, 61% { transform:translateX(-33.333%); }
  66%, 94% { transform:translateX(-66.666%); }
  100% { transform:translateX(0); }
}
.hero-dots {
  position:absolute;
  bottom:16px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
}
.hero-dots span {
  width:6px; height:6px; border-radius:50%;
  background:#A99586;
  opacity:0.4;
}
.hero-arrow {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:20px;
  color:#604C43;
  cursor:pointer;
  opacity:0.5;
  z-index:2;
  transition: opacity .2s ease;
}
.hero-arrow:hover { opacity:0.9; }
.hero-arrow.left { left:20px; }
.hero-arrow.right { right:20px; }
.hero-slide video.no-src { display:none; }

/* CATEGORY GRID */
.section-title {
  font-family:'DM Serif Display', serif;
  font-size:24px;
  margin-bottom:26px;
}
.cat-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-bottom:70px;
}
.cat-card {
  background:linear-gradient(160deg,#E6DACB,#F0E7DA);
  aspect-ratio:3/4;
  display:flex;
  align-items:flex-end;
  padding:20px;
  position:relative;
  cursor:pointer;
  transition: transform .35s ease, box-shadow .35s ease;
}
.cat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(96,76,67,0.15);
}
.cat-card .placeholder-note {
  position:absolute; top:14px; left:14px;
  font-size:10px; color:#b4a493; letter-spacing:1px;
}
.cat-card .label {
  font-family:'DM Serif Display', serif;
  font-size:19px;
  color:#604C43;
}
.cat-card .discover {
  font-size:10px;
  letter-spacing:1.5px;
  color:#B88F70;
  display:block;
  margin-top:4px;
}

/* PRODUCT GRID */
.prod-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-bottom:70px;
}
.prod-card { cursor:pointer; display:block; }
.prod-img {
  background:linear-gradient(160deg,#EFE6DA,#E3D5C4);
  aspect-ratio:3/4;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  color:#b4a493;
  letter-spacing:1px;
  margin-bottom:12px;
  position:relative;
  overflow:hidden;
  transition: transform .35s ease;
}
.prod-card:hover .prod-img { transform: scale(1.03); }
.prod-img .badge {
  position:absolute;
  top:10px; left:10px;
  background:#C0304F;
  color:#fff;
  font-size:9px;
  letter-spacing:1px;
  padding:4px 9px;
  border-radius:2px;
}
.prod-card .p-name { font-size:13.5px; color:#604C43; margin-bottom:4px; }
.prod-card .p-price { font-size:14px; color:#C0304F; font-weight:700; }

/* PROMO BANNERS */
.promo-row {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-bottom:70px;
}
.promo-card {
  background:linear-gradient(150deg,#E9DFD2,#F3EDE4);
  aspect-ratio:4/5;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:26px;
  transition: transform .35s ease, box-shadow .35s ease;
}
.promo-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(96,76,67,0.15);
}
.promo-card .title {
  font-family:'DM Serif Display', serif;
  font-size:22px;
  margin-bottom:6px;
}
.promo-card .link { font-size:11px; letter-spacing:1.5px; color:#B88F70; }

/* NEWSLETTER */
.newsletter {
  background:#604C43;
  color:#F3EDE4;
  text-align:center;
  padding:60px 30px;
  margin:0 -40px 0;
}
.newsletter h3 { font-family:'DM Serif Display', serif; font-size:26px; margin-bottom:10px; }
.newsletter p { font-size:13px; color:#d9cdbf; margin-bottom:24px; }
.newsletter form { display:flex; justify-content:center; gap:10px; max-width:420px; margin:0 auto; }
.newsletter input {
  flex:1; padding:12px 14px; border:none; font-size:13px; background:#F3EDE4; color:#604C43;
}
.newsletter button {
  background:#C0304F; color:#fff; border:none; padding:12px 22px; font-size:12px; letter-spacing:1px; cursor:pointer;
  transition: transform .25s ease, background .25s ease;
}
.newsletter button:hover {
  transform:translateY(-2px);
  background:#a8263f;
}

/* FOOTER */
footer {
  background:#F3EDE4;
  padding:60px 40px 30px;
  border-top:1px solid rgba(96,76,67,0.12);
}
.footer-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
  max-width:1300px;
  margin:0 auto 40px;
}
.footer-grid h4 {
  font-size:11px;
  letter-spacing:2px;
  color:#B88F70;
  margin-bottom:16px;
}
.footer-grid p, .footer-grid a {
  display:block;
  font-size:13px;
  color:#7d6a5d;
  margin-bottom:10px;
  transition: color .2s ease;
}
.footer-grid a:hover { color:#C0304F; }
.footer-bottom {
  text-align:center;
  font-size:11px;
  color:#A99586;
  border-top:1px solid rgba(96,76,67,0.1);
  padding-top:20px;
  max-width:1300px;
  margin:0 auto;
}

/* ===== ÍCONE DE CONTA (login/cadastro) ===== */
.header-icons a.account-icon {
  cursor:pointer;
  opacity:0.8;
  transition: transform .2s ease, opacity .2s ease;
  display:inline-block;
  text-decoration:none;
  color:inherit;
}
.header-icons a.account-icon:hover { transform:translateY(-2px); opacity:1; }
.header-icons a.account-icon.logged-in {
  width:22px; height:22px;
  border-radius:50%;
  background:#C0304F;
  color:#fff;
  font-family:'DM Serif Display', serif;
  font-size:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transform:none !important;
}
.account-dropdown {
  position:absolute;
  top:calc(100% + 14px);
  right:0;
  background:#fff;
  border:1px solid rgba(96,76,67,0.12);
  box-shadow:0 20px 40px rgba(38,30,26,0.14);
  padding:18px 20px;
  min-width:200px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index:150;
}
.account-dropdown.open { opacity:1; visibility:visible; transform:translateY(0); }
.account-dropdown-name { font-family:'DM Serif Display', serif; font-size:15px; color:#604C43; }
.account-dropdown-email { font-size:11px; color:#A99586; margin:4px 0 14px; word-break:break-all; }
.account-dropdown-logout {
  width:100%;
  background:none;
  border:1px solid rgba(96,76,67,0.2);
  padding:9px;
  font-size:12px;
  letter-spacing:0.5px;
  color:#604C43;
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease;
}
.account-dropdown-logout:hover { border-color:#C0304F; color:#C0304F; }

/* ===== SCROLL REVEAL (fade-in ao rolar a página) ===== */
.reveal {
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s ease, transform .8s ease;
}
.reveal.revealed {
  opacity:1;
  transform:translateY(0);
}

/* ===== MENU MOBILE (drawer de categorias, aberto pelo ☰) ===== */
.mobile-drawer {
  position:fixed;
  inset:0;
  z-index:200;
  visibility:hidden;
}
.mobile-drawer-overlay {
  position:absolute;
  inset:0;
  background:rgba(38,30,26,0.45);
  opacity:0;
  transition:opacity .3s ease;
}
.mobile-drawer-panel {
  position:absolute;
  top:0; left:0;
  height:100%;
  width:min(320px, 84vw);
  background:#F3EDE4;
  box-shadow:20px 0 50px rgba(38,30,26,0.18);
  transform:translateX(-100%);
  transition:transform .4s cubic-bezier(.16,1,.3,1);
  display:flex;
  flex-direction:column;
  padding:26px 24px;
  overflow-y:auto;
}
.mobile-drawer.open { visibility:visible; }
.mobile-drawer.open .mobile-drawer-overlay { opacity:1; }
.mobile-drawer.open .mobile-drawer-panel { transform:translateX(0); }
.mobile-drawer-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:30px;
}
.mobile-drawer-brand {
  font-family:'DM Serif Display', serif;
  font-size:19px;
  letter-spacing:2.5px;
  color:#604C43;
}
.mobile-drawer-close {
  background:none;
  border:none;
  font-size:17px;
  color:#604C43;
  cursor:pointer;
  padding:4px;
  line-height:1;
}
.mobile-drawer-eyebrow {
  font-size:10px;
  letter-spacing:3px;
  color:#B88F70;
  margin-bottom:12px;
}
.mobile-drawer-section {
  display:flex;
  flex-direction:column;
  margin-bottom:24px;
}
.mobile-drawer-section a {
  padding:12px 0;
  font-size:14px;
  color:#604C43;
  border-bottom:1px solid rgba(96,76,67,0.08);
  display:flex;
  justify-content:space-between;
  align-items:center;
  transition:color .2s ease, padding-left .2s ease;
}
.mobile-drawer-section a:hover { color:#B88F70; padding-left:4px; }
.mobile-drawer-section.categories a span { color:#A99586; font-size:11px; }
.mobile-drawer-section a.active { color:#C0304F; font-weight:600; }
.mobile-drawer-section a.active span { color:#C0304F; }
.mobile-drawer-promo {
  margin-top:auto;
  background:#fff;
  border:1px solid #C0304F;
  padding:18px 16px;
  font-size:12px;
  line-height:1.6;
  color:#7d6a5d;
}
.mobile-drawer-promo b {
  color:#C0304F;
  display:block;
  font-family:'DM Serif Display', serif;
  font-size:15px;
  margin-bottom:5px;
}

/* ===== RESPONSIVO ===== */
@media (max-width: 900px) {
  header { padding:18px 20px 16px; }
  .header-icons, .menu-toggle { min-width:auto; }
  .header-icons { gap:14px; }
  .section-tabs {
    gap:26px;
    padding:14px 16px 0;
    overflow-x:auto;
    justify-content:flex-start;
    -ms-overflow-style:none;
    scrollbar-width:none;
  }
  .section-tabs::-webkit-scrollbar { display:none; }
  .tab { flex-shrink:0; }

  .layout { display:block; }
  .sidebar { display:none; }
  main { padding:28px 20px 0; }

  .hero-carousel { height:260px; margin-bottom:40px; }
  .hero-slide .brand { font-size:30px; }
  .hero-slide .tagline { font-size:15px; }

  .cat-grid { grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:50px; }
  .prod-grid { grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:50px; }
  .promo-row { grid-template-columns:1fr; gap:12px; margin-bottom:50px; }

  .newsletter { margin:0 -20px 0; padding:44px 24px; }
  .footer-grid { grid-template-columns:repeat(2,1fr); gap:26px; }
  footer { padding:44px 20px 24px; }
}

@media (max-width: 480px) {
  .logo-block .name { font-size:24px; letter-spacing:2px; }
  .cat-grid { grid-template-columns:1fr 1fr; }
  .prod-grid { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1fr; }
}