@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Poppins:wght@400;500;600;700&display=swap');

:root {
  --brown: #3B291C;
  --brown-dark: #241809;
  --gold: #E4C17F;
  --gold-dark: #C9A05F;
  --bg: #FAF7F3;
  --text: #2A1C12;
  --muted: #8d7a64;
  --card-bg: #ffffff;
  --border: #ECE3D6;
  --radius: 14px;
  --shadow: 0 4px 18px rgba(59, 41, 28, 0.07);
  --shadow-hover: 0 10px 28px rgba(59, 41, 28, 0.14);
}
* { box-sizing: border-box; }
body { margin:0; font-family:'Poppins', Arial, sans-serif; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; }
h1, h2, h3 { font-family:'Playfair Display', serif; }
a { color: inherit; }

.site-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 32px; background:var(--brown); flex-wrap:wrap;
  position:sticky; top:0; z-index:20;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.site-header .logo { display:flex; align-items:center; }
.site-header .logo img { height:34px; display:block; }
.site-header nav a {
  color:var(--gold); margin-left:24px; text-decoration:none; font-weight:500;
  font-size:0.95rem; transition: color 0.15s ease;
}
.site-header nav a:hover { color:#fff; }

main { max-width:1180px; margin:0 auto; padding:32px 24px 64px; }
h1 { color:var(--brown); font-size:2rem; margin-bottom:6px; letter-spacing:-0.5px; }

.filter-bar { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px; }
.filter-bar input[type="text"] {
  flex:1; min-width:200px; padding:12px 16px; border:1px solid var(--border);
  border-radius:999px; font-family:inherit; background:var(--card-bg);
}
.filter-bar select {
  padding:12px 16px; border:1px solid var(--border); border-radius:999px;
  font-family:inherit; background:var(--card-bg);
}
.filter-bar button {
  border-radius:999px;
}

.product-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:24px;
}
.product-card {
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; text-align:left; box-shadow:var(--shadow);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  display:flex; flex-direction:column;
}
.product-card:hover { box-shadow:var(--shadow-hover); transform: translateY(-2px); }

.product-gallery { margin: -18px -18px 12px; }
.main-image {
  width:100%; height:230px; object-fit:cover; display:block;
  border-radius: var(--radius) var(--radius) 0 0;
}
.no-image {
  height:230px; display:flex; align-items:center; justify-content:center;
  background:#F2EAD9; color:#a08c6f; margin:-18px -18px 12px;
  border-radius: var(--radius) var(--radius) 0 0;
}
.thumb-row { display:flex; gap:6px; padding:8px 12px 0; overflow-x:auto; }
.thumb {
  width:44px; height:44px; object-fit:cover; border-radius:8px; cursor:pointer;
  border:2px solid transparent; opacity:0.7; transition: all 0.15s ease; flex-shrink:0;
}
.thumb:hover { opacity:1; }
.thumb.active { border-color:var(--gold-dark); opacity:1; }

.product-card h3 { margin:4px 0 4px; color:var(--brown); font-size:1.15rem; }
.desc { color:var(--muted); font-size:0.9rem; margin:0 0 8px; line-height:1.4; }
.price { font-weight:700; color:var(--gold-dark); font-size:1.25rem; margin:0 0 12px; }

.add-form { display:flex; flex-direction:column; gap:10px; margin-top:auto; }
.color-row { display:flex; gap:8px; flex-wrap:wrap; }
.color-swatch {
  width:28px; height:28px; border-radius:50%; border:2px solid var(--border);
  cursor:pointer; padding:0; transition: transform 0.12s ease, border-color 0.12s ease;
}
.color-swatch:hover { transform: scale(1.08); }
.color-swatch.selected { border-color:var(--brown); box-shadow:0 0 0 2px var(--gold); }

.size-select, .qty-input {
  padding:10px 12px; border:1px solid var(--border); border-radius:10px; font-family:inherit;
  background:#fff;
}
.qty-input { width:72px; }
.add-form-row { display:flex; gap:8px; }

button, .btn-checkout, .btn, .btn-add {
  background:var(--brown); color:var(--gold); border:none; padding:12px 20px;
  border-radius:10px; cursor:pointer; text-decoration:none; display:inline-block;
  font-size:0.95rem; font-weight:600; transition: background 0.15s ease, transform 0.1s ease;
}
button:hover, .btn-checkout:hover, .btn:hover, .btn-add:hover:not(:disabled) { background:var(--brown-dark); }
button:active:not(:disabled) { transform: scale(0.98); }
.btn-add:disabled { opacity:0.45; cursor:not-allowed; }

.out-of-stock { color:#a33; font-weight:600; margin-top:auto; }

.cart-table { width:100%; border-collapse:collapse; margin-bottom:24px; background:var(--card-bg); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.cart-table th { background:#F6EFE2; color:var(--brown); text-align:left; padding:12px 14px; font-weight:600; }
.cart-table td { padding:14px; border-bottom:1px solid var(--border); }
.qty-form { display:flex; gap:6px; }
.qty-form input { width:56px; border:1px solid var(--border); border-radius:8px; padding:6px; }
.remove-link { color:#a33; text-decoration:none; font-size:0.9rem; }
.cart-total { font-size:1.25rem; margin:20px 0; }

.checkout-form, .login-form { display:flex; flex-direction:column; gap:16px; max-width:480px; }
.checkout-form label, .login-form label { display:flex; flex-direction:column; gap:6px; font-weight:600; color:var(--brown); font-size:0.92rem; }
.checkout-form input, .checkout-form textarea, .checkout-form select, .login-form input {
  padding:12px 14px; border:1px solid var(--border); border-radius:10px; font-size:1rem; font-family:inherit;
}
.error { color:#a33; font-weight:bold; background:#fdf0f0; padding:10px 14px; border-radius:10px; }
.success-page { text-align:center; padding:60px 0; }
.success-page h1 { color:var(--gold-dark); }
.btn-whatsapp {
  display:inline-block; background:#25D366; color:#fff; padding:14px 28px; border-radius:999px;
  text-decoration:none; font-weight:600; font-size:1.1rem; margin-top:14px;
  box-shadow: 0 6px 18px rgba(37,211,102,0.3);
}
.btn-whatsapp:hover { background:#1DA851; }
.back-link { margin-top:20px; }
.hint-payment { font-size:0.88rem; color:var(--muted); margin:-8px 0 4px; }
.site-footer { text-align:center; padding:28px; color:var(--muted); font-size:0.9rem; }
.empty { text-align:center; color:var(--muted); padding:40px 0; }

@media (max-width: 600px) {
  main { padding:20px 16px 48px; }
  .site-header { padding:14px 18px; }
}