/* ════════════════════════════════════════
   MI TIENDA — style.css
   ════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=DM+Sans:wght@300;400;500;600;700&display=swap');

:root {
  --green:       #2d6a4f;
  --green-mid:   #40916c;
  --green-light: #52b788;
  --green-pale:  #d8f3dc;
  --cream:       #fefae0;
  --orange:      #e76f51;
  --orange-dark: #cf6344;
  --dark:        #1a1a1a;
  --gray:        #6b7280;
  --gray-light:  #e5e7eb;
  --white:       #ffffff;
  --shadow:      0 4px 24px rgba(0,0,0,0.09);
  --shadow-lg:   0 12px 40px rgba(0,0,0,0.14);
  --radius:      16px;
  --radius-sm:   10px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'DM Sans', sans-serif;
  background:var(--cream);
  color:var(--dark);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* ── HEADER ── */
header {
  background:var(--green);
  color:white;
  padding:0 2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:68px;
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:0 2px 20px rgba(0,0,0,0.18);
}
.logo {
  font-family:'Playfair Display', serif;
  font-size:1.55rem;
  color:white;
  text-decoration:none;
}
.logo span { color:var(--green-pale); }
.header-actions { display:flex; gap:0.75rem; align-items:center; }

.btn-cart {
  background:var(--orange);
  color:white;
  border:none;
  padding:0.55rem 1.2rem;
  border-radius:50px;
  font-family:'DM Sans', sans-serif;
  font-weight:600;
  font-size:0.9rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:0.4rem;
  transition:background 0.15s, transform 0.15s;
}
.btn-cart:hover { background:var(--orange-dark); transform:scale(1.04); }
.cart-badge {
  background:white;
  color:var(--orange);
  border-radius:50%;
  width:20px; height:20px;
  font-size:0.7rem;
  font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

/* ── HERO ── */
.hero {
  background:linear-gradient(135deg, var(--green) 0%, var(--green-mid) 60%, var(--green-light) 100%);
  color:white;
  text-align:center;
  padding:3.5rem 2rem 2.5rem;
  position:relative;
  overflow:hidden;
}
.hero::before {
  content:'';
  position:absolute; inset:0;
  background-image:radial-gradient(circle at 20% 50%, rgba(255,255,255,0.05) 0%, transparent 50%),
                   radial-gradient(circle at 80% 20%, rgba(255,255,255,0.06) 0%, transparent 40%);
}
.hero-inner { position:relative; }
.hero h1 {
  font-family:'Playfair Display', serif;
  font-size:clamp(1.8rem, 4vw, 3rem);
  margin-bottom:0.4rem;
  line-height:1.1;
}
.hero p { opacity:0.85; font-size:1rem; }

/* ── CATEGORIES ── */
.categories {
  display:flex;
  gap:0.65rem;
  padding:1.5rem 2rem;
  overflow-x:auto;
  scrollbar-width:none;
}
.categories::-webkit-scrollbar { display:none; }
.cat-btn {
  background:white;
  border:2px solid transparent;
  padding:0.45rem 1.1rem;
  border-radius:50px;
  font-family:'DM Sans', sans-serif;
  font-weight:500;
  font-size:0.88rem;
  cursor:pointer;
  white-space:nowrap;
  transition:all 0.15s;
  box-shadow:var(--shadow);
}
.cat-btn:hover, .cat-btn.active {
  background:var(--green);
  color:white;
  border-color:var(--green);
}

/* ── SECTION TITLE ── */
.section-title {
  font-family:'Playfair Display', serif;
  font-size:1.4rem;
  padding:0 2rem 1rem;
}

/* ── PRODUCTS GRID ── */
.products-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:1.2rem;
  padding:0 2rem 4rem;
}
.product-card {
  background:white;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:transform 0.2s, box-shadow 0.2s;
}
.product-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.product-img {
  width:100%; height:155px;
  background:var(--green-pale);
  display:flex; align-items:center; justify-content:center;
  font-size:3.5rem;
  overflow:hidden;
}
.product-img img { width:100%; height:100%; object-fit:cover; }
.product-info { padding:0.9rem; }
.product-name { font-weight:600; font-size:0.93rem; margin-bottom:0.2rem; }
.product-cat  { font-size:0.74rem; color:var(--gray); margin-bottom:0.5rem; }
.product-price {
  font-family:'Playfair Display', serif;
  font-size:1.15rem;
  color:var(--green);
  font-weight:700;
  margin-bottom:0.7rem;
}
.product-unit { font-size:0.7rem; font-weight:400; color:var(--gray); font-family:'DM Sans',sans-serif; }
.btn-add {
  width:100%;
  background:var(--green);
  color:white;
  border:none;
  padding:0.55rem;
  border-radius:var(--radius-sm);
  font-family:'DM Sans', sans-serif;
  font-weight:600;
  cursor:pointer;
  font-size:0.88rem;
  transition:background 0.15s;
}
.btn-add:hover { background:var(--green-mid); }

/* ── CART PANEL ── */
.overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.45);
  z-index:200;
  display:none;
  backdrop-filter:blur(3px);
}
.overlay.open { display:block; }
.cart-panel {
  position:fixed;
  top:0; right:-440px;
  width:410px; max-width:96vw;
  height:100vh;
  background:white;
  z-index:201;
  display:flex; flex-direction:column;
  transition:right 0.3s cubic-bezier(.4,0,.2,1);
  box-shadow:-8px 0 40px rgba(0,0,0,0.15);
}
.cart-panel.open { right:0; }
.cart-header {
  padding:1.3rem 1.5rem;
  background:var(--green);
  color:white;
  display:flex; justify-content:space-between; align-items:center;
}
.cart-header h2 { font-family:'Playfair Display', serif; font-size:1.2rem; }
.btn-close {
  background:none; border:none; color:white;
  font-size:1.4rem; cursor:pointer; opacity:0.8;
  transition:opacity 0.15s; line-height:1;
}
.btn-close:hover { opacity:1; }
.cart-items { flex:1; overflow-y:auto; padding:1rem; }
.cart-empty { text-align:center; color:var(--gray); padding:3rem 1rem; }
.cart-empty-icon { font-size:3rem; margin-bottom:0.5rem; }
.cart-item {
  display:flex; gap:0.75rem; align-items:center;
  padding:0.75rem 0;
  border-bottom:1px solid #f3f4f6;
}
.cart-item-emoji { font-size:2rem; width:40px; text-align:center; }
.cart-item-info { flex:1; }
.cart-item-name  { font-weight:600; font-size:0.88rem; }
.cart-item-price { color:var(--green); font-weight:600; font-size:0.88rem; }
.qty-control { display:flex; align-items:center; gap:0.4rem; }
.qty-btn {
  width:28px; height:28px;
  border:2px solid var(--green);
  background:none; border-radius:50%;
  cursor:pointer; font-size:1rem; font-weight:700;
  color:var(--green);
  display:flex; align-items:center; justify-content:center;
  transition:all 0.15s;
}
.qty-btn:hover { background:var(--green); color:white; }
.qty-num { font-weight:700; min-width:20px; text-align:center; }

/* ── CHECKOUT FORM ── */
.checkout-form {
  padding:1rem 1rem 0;
  border-top:2px solid var(--gray-light);
}
.checkout-form h3 {
  font-family:'Playfair Display', serif;
  font-size:1rem;
  margin-bottom:0.8rem;
  color:var(--dark);
}
.form-row2 { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; }
.form-field { margin-bottom:0.5rem; }
.form-field label {
  display:block;
  font-size:0.75rem;
  font-weight:600;
  margin-bottom:0.2rem;
  color:var(--gray);
  text-transform:uppercase;
  letter-spacing:0.03em;
}
.form-field input, .form-field textarea {
  width:100%;
  padding:0.55rem 0.8rem;
  border:2px solid var(--gray-light);
  border-radius:var(--radius-sm);
  font-family:'DM Sans', sans-serif;
  font-size:0.85rem;
  transition:border-color 0.15s;
  background:#fafafa;
}
.form-field input:focus, .form-field textarea:focus {
  outline:none;
  border-color:var(--green);
  background:white;
}
.form-field textarea { resize:none; height:56px; }

/* ── CART FOOTER ── */
.cart-footer { padding:0.9rem 1rem 1rem; background:#fafafa; border-top:2px solid var(--gray-light); }
.cart-total {
  display:flex; justify-content:space-between;
  font-weight:700; font-size:1.05rem;
  margin-bottom:0.8rem;
}
.cart-total span:last-child {
  color:var(--green);
  font-family:'Playfair Display', serif;
  font-size:1.25rem;
}
.btn-whatsapp {
  width:100%;
  background:#25D366;
  color:white; border:none;
  padding:0.9rem;
  border-radius:var(--radius-sm);
  font-family:'DM Sans', sans-serif;
  font-weight:700; font-size:0.95rem;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:0.5rem;
  transition:background 0.15s, transform 0.15s;
  margin-bottom:0.5rem;
}
.btn-whatsapp:hover { background:#1fb855; transform:scale(1.02); }
.btn-clear {
  width:100%; background:none;
  border:1px solid var(--gray-light);
  padding:0.6rem; border-radius:var(--radius-sm);
  font-family:'DM Sans', sans-serif;
  color:var(--gray); cursor:pointer; font-size:0.85rem;
  transition:border-color 0.15s, color 0.15s;
}
.btn-clear:hover { border-color:var(--orange); color:var(--orange); }

/* ── NO RESULTS ── */
.no-results {
  text-align:center; padding:3rem;
  color:var(--gray); grid-column:1/-1;
}

/* ── TOAST ── */
.toast {
  position:fixed; bottom:2rem; left:50%;
  transform:translateX(-50%) translateY(100px);
  background:var(--dark); color:white;
  padding:0.75rem 1.4rem;
  border-radius:50px;
  font-weight:600; font-size:0.88rem;
  z-index:999;
  transition:transform 0.3s cubic-bezier(.4,0,.2,1);
  white-space:nowrap;
  pointer-events:none;
}
.toast.show { transform:translateX(-50%) translateY(0); }

/* ── FOOTER ── */
footer {
  background:var(--green);
  color:rgba(255,255,255,0.7);
  text-align:center;
  padding:1.5rem;
  font-size:0.82rem;
}
footer strong { color:white; }

/* ── RESPONSIVE ── */
@media (max-width:520px) {
  header { padding:0 1rem; }
  .products-grid { grid-template-columns:repeat(2,1fr); gap:0.75rem; padding:0 1rem 2rem; }
  .categories { padding:1rem; }
  .form-row2 { grid-template-columns:1fr; }
  .cart-panel { width:100%; max-width:100vw; }
}