:root{
  --cream:#f4efe6;
  --brown:#4b3a2f;
  --brown-soft:#6b5a4c;
  --card-border:#e3dccf;
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Inter', -apple-system, 'Segoe UI', sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--cream);color:var(--brown);font-family:var(--sans)}

/* ===== Header ===== */
header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 48px;background:var(--cream);border-bottom:1px solid var(--card-border);
}
.header-inner{position:relative;display:flex;align-items:center;justify-content:space-between;
  max-width:1440px;margin:0 auto;width:100%;min-height:56px;}
.logo{line-height:1;text-decoration:none;color:var(--brown);display:inline-block}
.logo .name{display:block;text-align:center;font-family:var(--serif);font-size:34px;
  letter-spacing:.18em;margin-right:-.18em;font-weight:500}
.logo .sub{font-family:var(--sans);font-size:11px;margin-top:5px;
  display:flex;align-items:center;gap:10px}
.logo .sub span{letter-spacing:.38em;margin-right:-.38em}
.logo .sub::before,.logo .sub::after{content:"";height:1px;flex:1;background:var(--brown);opacity:.7}
nav{display:flex;align-items:center;gap:26px}
nav a{font-size:13px;letter-spacing:.14em;font-weight:500;color:var(--brown);text-decoration:none;text-transform:uppercase}
nav a:hover{opacity:.65}
nav svg{width:21px;height:21px;display:block}
.lang{display:flex;align-items:center;gap:4px;margin-left:6px;
  border-left:1px solid var(--card-border);padding-left:16px}
.lang button{
  background:none;border:2px solid transparent;cursor:pointer;
  padding:2px;border-radius:50%;line-height:0;
  opacity:.4;transition:opacity .2s, border-color .2s;
}
.lang button:hover{opacity:.85}
.lang button.active{opacity:1;border-color:var(--brown)}
.lang button svg{width:22px;height:22px;display:block}
.menu-btn{display:none;background:none;border:none;cursor:pointer;padding:8px;z-index:20}
.menu-btn span{display:block;width:24px;height:2px;background:var(--brown);margin:5px 0;transition:.3s}

/* ===== Faixa de título ===== */
.page-head{text-align:center;padding:52px 24px 8px}
.page-head .flag{width:52px;height:52px;margin-bottom:14px}
.page-head h1{font-family:var(--serif);font-weight:500;font-size:clamp(30px,4vw,44px)}
.page-head .note{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  background:#fff;border:1px solid var(--card-border);border-radius:999px;
  padding:9px 18px;font-size:13px;color:var(--brown-soft);
}
.page-head .note .dot{width:7px;height:7px;border-radius:50%;background:#2e9e5b;flex-shrink:0}

/* ===== Categorias ===== */
.cats{
  display:flex;flex-direction:column;gap:10px;
  max-width:1000px;margin:34px auto 0;padding:0 24px;
}
.cats .row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.cats button{
  font-family:var(--sans);font-size:13px;letter-spacing:.08em;font-weight:500;
  color:var(--brown);background:#fff;border:1px solid var(--card-border);
  border-radius:999px;padding:10px 20px;cursor:pointer;
  transition:all .18s;text-transform:uppercase;
}
.cats button:hover{border-color:var(--brown-soft)}
.cats button.active{background:var(--brown);color:#fdfaf4;border-color:var(--brown)}

/* ===== Filtro de lojas ===== */
.stores{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  max-width:1000px;margin:16px auto 0;padding:0 24px;
}
.stores button{
  font-family:var(--sans);font-size:12px;letter-spacing:.04em;font-weight:500;
  color:var(--brown-soft);background:transparent;border:1px dashed var(--card-border);
  border-radius:999px;padding:7px 15px;cursor:pointer;transition:all .18s;
}
.stores button:hover{color:var(--brown);border-color:var(--brown-soft)}
.stores button.active{
  color:var(--brown);background:#fff;border:1px solid var(--brown-soft);font-weight:600;
}

/* ===== Grade de produtos ===== */
.grid{
  max-width:1200px;margin:42px auto 20px;padding:0 24px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px;
}
.product{
  background:#fff;border:1px solid var(--card-border);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .2s, box-shadow .2s;
}
.product:hover{transform:translateY(-4px);box-shadow:0 10px 26px rgba(75,58,47,.13)}
.product .photo{
  height:210px;background:linear-gradient(135deg,#efe7da,#e2d5c3);
  display:flex;align-items:center;justify-content:center;
}
.product .photo img{width:100%;height:100%;object-fit:cover}
.product .photo .ph{font-family:var(--serif);font-size:40px;color:#c4b39d;letter-spacing:.1em}
.product .body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1;gap:10px}
.product .name{font-size:14.5px;font-weight:500;line-height:1.45;flex:1}
.product .badges{display:flex;flex-wrap:wrap;gap:6px}
.product .tag{
  font-size:11px;letter-spacing:.08em;font-weight:600;text-transform:uppercase;
  color:#1d6b3d;background:#e8f4ec;border-radius:999px;padding:4px 10px;
}
.product .store-badge{
  font-size:11px;letter-spacing:.06em;font-weight:600;
  border-radius:999px;padding:4px 10px;
}
.product .price{font-size:15px;font-weight:600}
.product .price .old{font-weight:400;font-size:12.5px;color:var(--brown-soft);text-decoration:line-through;margin-right:8px}
.product a.buy{
  display:block;text-align:center;background:var(--brown);color:#fdfaf4;
  text-decoration:none;font-size:13px;letter-spacing:.1em;font-weight:600;text-transform:uppercase;
  border-radius:9px;padding:12px;
}
.product a.buy:hover{opacity:.9}

.empty{
  grid-column:1/-1;text-align:center;color:var(--brown-soft);
  font-size:15px;padding:60px 20px;
}

/* Aviso da categoria Deals */
.deals-note{
  max-width:1200px;margin:0 auto 40px;padding:0 24px;text-align:center;
  font-size:12.5px;color:var(--brown-soft);display:none;
}
.deals-note.show{display:block}

footer{
  padding:26px;text-align:center;font-size:12.5px;color:var(--brown-soft);
  border-top:1px solid var(--card-border);margin-top:40px;line-height:1.8;
}

/* ===== Responsivo ===== */
@media (max-width:1024px){
  .menu-btn{display:block}
  nav{
    position:fixed;inset:0;background:var(--cream);
    flex-direction:column;justify-content:center;gap:40px;
    transform:translateX(100%);transition:transform .3s ease;z-index:10;
  }
  nav.open{transform:translateX(0)}
  nav a{font-size:16px}
  .lang{border-left:none;padding-left:0;margin-left:0;border-top:1px solid var(--card-border);padding-top:26px;gap:14px}
  .lang button svg{width:30px;height:30px}
}
@media (max-width:768px){
  header{padding:14px 24px}
  .logo .name{font-size:28px}
  .page-head{padding:36px 20px 4px}
  .cats{gap:8px}
  .cats button{padding:9px 14px;font-size:12px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-top:30px}
  .product .photo{height:150px}
  .product .body{padding:14px}
}
