/* Icon SVGs for cart and remove */
.icon-cart {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  vertical-align: middle;
  background: none;
  mask: url('data:image/svg+xml;utf8,<svg fill="%238B6914" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 18c-1.104 0-2 .896-2 2s.896 2 2 2 2-.896 2-2-.896-2-2-2zm10 0c-1.104 0-2 .896-2 2s.896 2 2 2 2-.896 2-2-.896-2-2-2zm-12.832-2l1.528-8h15.304l1.528 8h-18.36zm17.832-10h-2.184l-1.724-3.447c-.184-.368-.563-.553-.947-.553h-9.25c-.384 0-.763.185-.947.553l-1.724 3.447h-2.184c-.553 0-1 .447-1 1s.447 1 1 1h1.25l1.528 8.001c.092.484.516.999 1 .999h12c.484 0 .908-.515 1-.999l1.528-8.001h1.25c.553 0 1-.447 1-1s-.447-1-1-1z"/></svg>') center/contain no-repeat;
  background-color: var(--gold);
}
.icon-remove {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  vertical-align: middle;
  background: none;
  mask: url('data:image/svg+xml;utf8,<svg fill="%238B6914" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7A1 1 0 0 0 5.7 7.11L10.59 12l-4.89 4.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.89a1 1 0 0 0 1.41-1.41L13.41 12l4.89-4.89a1 1 0 0 0 0-1.4z"/></svg>') center/contain no-repeat;
  background-color: var(--gold);
}
:root {
  --gold: #8B6914;
  --gold-mid: #C9A84C;
  --gold-light: #F2E8C8;
  --bg: #F8F6F1;
  --bg2: #FFFFFF;
  --bg3: #EDE9DF;
  --text: #1A1A1A;
  --text2: #555550;
  --text3: #888880;
  --border: #D8D3C5;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font-family:'Montserrat',sans-serif; font-weight:300; overflow-x:hidden; }
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--gold-mid); }

nav { position:fixed; top:0; left:0; right:0; z-index:1000; display:flex; align-items:center; justify-content:space-between; padding:1.25rem 4rem; background:rgba(248,246,241,0.97); border-bottom:1px solid var(--border); }
.logo { display:flex; align-items:center; gap:0.5rem; text-decoration:none; }
.logo img { height:40px; width:auto; }
.logo-text { font-family:'Cormorant Garamond',serif; font-size:1.5rem; font-weight:600; letter-spacing:0.25em; color:var(--gold); }
.logo-text span { color:var(--text); font-weight:300; }
.nav-links { display:flex; gap:2.5rem; list-style:none; }
.nav-links a { color:var(--text2); text-decoration:none; font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase; transition:color 0.3s; }
.nav-links a:hover { color:var(--gold); }
.nav-cta { background:var(--gold); color:#fff; padding:0.75rem 1.5rem; font-family:'Montserrat',sans-serif; font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase; font-weight:600; cursor:pointer; transition:all 0.3s; text-decoration:none; border:none; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; }
.nav-cta:hover { background:var(--gold-mid); transform:translateY(-1px); box-shadow:0 4px 12px rgba(139,105,20,0.3); }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:8px; border-radius:4px; transition:all 0.3s; }
.hamburger:hover { background:var(--gold-light); }
.hamburger span { width:24px; height:1.5px; background:var(--gold); display:block; }

.hero { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); position:relative; overflow:hidden; padding-top:80px; }
.hero::before { content:''; position:absolute; top:0; right:0; width:45%; height:100%; background:var(--bg3); clip-path:polygon(15% 0, 100% 0, 100% 100%, 0% 100%); }
.hero-content { position:relative; z-index:2; max-width:1100px; width:100%; padding:2rem 4rem; display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.hero-label { font-size:0.6rem; letter-spacing:0.4em; text-transform:uppercase; color:var(--gold); margin-bottom:1.25rem; display:block; }
.hero-title { font-family:'Cormorant Garamond',serif; font-size:clamp(3rem,6vw,5.5rem); font-weight:300; line-height:1; letter-spacing:0.05em; margin-bottom:0.5rem; color:var(--text); animation:fadeUp 0.8s 0.3s both; }
.hero-title .gold { color:var(--gold); font-weight:600; }
.hero-subtitle { font-size:0.72rem; letter-spacing:0.25em; text-transform:uppercase; color:var(--text3); margin-bottom:2.5rem; animation:fadeUp 0.8s 0.5s both; }
.hero-btns { display:flex; gap:1rem; flex-wrap:wrap; animation:fadeUp 0.8s 0.7s both; }
.btn-primary { background:var(--gold); color:#fff; padding:0.9rem 2rem; border:none; cursor:pointer; font-family:'Montserrat',sans-serif; font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase; font-weight:600; transition:all 0.3s; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; }
.btn-primary:hover { background:var(--gold-mid); transform:translateY(-1px); box-shadow:0 4px 12px rgba(139,105,20,0.3); }
.btn-outline { background:transparent; color:var(--gold); padding:0.9rem 2rem; border:1.5px solid var(--gold); cursor:pointer; font-family:'Montserrat',sans-serif; font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase; font-weight:500; transition:all 0.3s; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; }
.btn-outline:hover { background:var(--gold); color:#fff; transform:translateY(-1px); box-shadow:0 4px 12px rgba(139,105,20,0.2); }
.hero-right { display:flex; flex-direction:column; gap:1rem; animation:fadeUp 0.8s 0.5s both; }
.hero-stat { background:var(--bg2); border:1px solid var(--border); padding:1.25rem 1.5rem; border-left:3px solid var(--gold-mid); }
.hero-stat-num { font-family:'Cormorant Garamond',serif; font-size:2.5rem; font-weight:400; color:var(--gold); line-height:1; }
.hero-stat-label { font-size:0.62rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--text3); margin-top:4px; }

.section { padding:5rem 4rem; }
.section-label { font-size:0.6rem; letter-spacing:0.4em; text-transform:uppercase; color:var(--gold); margin-bottom:0.6rem; }
.section-title { font-family:'Cormorant Garamond',serif; font-size:clamp(2rem,4vw,3rem); font-weight:300; margin-bottom:0.75rem; color:var(--text); letter-spacing:0.05em; }
.section-line { width:50px; height:2px; background:var(--gold-mid); margin-bottom:3rem; }

/* ── CATEGORY SECTION IMPROVEMENT ────────────────────────── */
#categories { background: var(--bg2); padding-bottom: 6rem; }
.categories { 
  display: grid; 
  grid-template-columns: repeat(6, 1fr); 
  gap: 1.25rem; 
}
.cat-card { 
  background: var(--bg2); 
  padding: 2.5rem 2rem; 
  cursor: pointer; 
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold-mid);
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  border-radius: 4px;
}
.cat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(139, 105, 20, 0.18);
  border-color: var(--gold-mid);
}

/* Category card internal elements */
.cat-icon { font-size: 2.2rem; line-height: 1; margin-bottom: 0.25rem; }
.cat-tag { font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin: 0; }
.cat-name { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 500; color: var(--text); margin: 0; }
.cat-desc { font-size: 0.7rem; color: var(--text3); line-height: 1.6; margin: 0.15rem 0 0 0; }
.cat-link { font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold-mid); font-weight: 600; margin-top: auto; padding-top: 0.5rem; transition: color 0.3s; }
.cat-card:hover .cat-link { color: var(--gold); }

#products { background:var(--bg); }
.filter-bar { display:flex; gap:8px; margin-bottom:2.5rem; flex-wrap:wrap; }
.filter-btn { background:var(--bg2); border:1px solid var(--border); color:var(--text3); padding:0.5rem 1.25rem; font-family:'Montserrat',sans-serif; font-size:0.62rem; letter-spacing:0.15em; text-transform:uppercase; cursor:pointer; transition:all 0.3s; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; }
.filter-btn.active, .filter-btn:hover { border-color:var(--gold); color:var(--gold); background:var(--gold-light); transform:translateY(-1px); }
.products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.product-card { background:var(--bg2); border:1px solid var(--border); border-radius:6px; overflow:hidden; transition:all 0.3s; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.product-card:hover { box-shadow:0 8px 30px rgba(139,105,20,0.15); transform:translateY(-3px); border-color:var(--gold-mid); }
.product-img { height:240px; background:var(--bg3); display:flex; align-items:center; justify-content:center; font-size:5rem; position:relative; overflow:hidden; border-radius:6px 6px 0 0; }
.product-badge { position:absolute; top:1rem; left:1rem; background:var(--gold); color:#fff; font-size:0.55rem; letter-spacing:0.15em; text-transform:uppercase; padding:0.3rem 0.75rem; font-weight:700; border-radius:3px; }
.product-badge.new-badge { background:var(--text); }
.product-info { padding:1.5rem; }
.product-cat { font-size:0.55rem; letter-spacing:0.25em; color:var(--gold); text-transform:uppercase; margin-bottom:0.4rem; }
.product-name { font-family:'Cormorant Garamond',serif; font-size:1.2rem; font-weight:500; color:var(--text); margin-bottom:0.5rem; }
.product-desc { font-size:0.8rem; color:var(--text3); line-height:1.8; font-weight:500; margin-bottom:0.75rem; }
.product-price { font-size:1.1rem; font-weight:700; color:var(--gold); }
/* Buttons for actions */
.product-actions { display:flex; gap:8px; margin-top:1.25rem; }
.btn-order { flex:1; background:var(--gold); color:#fff; border:none; padding:0.75rem 0.5rem; cursor:pointer; font-family:'Montserrat',sans-serif; font-size:0.55rem; letter-spacing:0.12em; text-transform:uppercase; font-weight:700; transition:all 0.3s; border-radius:6px; white-space:nowrap; }
.btn-order:hover { background:var(--gold-mid); transform:translateY(-1px); box-shadow:0 4px 12px rgba(139,105,20,0.3); }
.btn-cart { flex:1; background:var(--bg3); color:var(--gold); border:1.5px solid var(--gold); padding:0.75rem 0.5rem; cursor:pointer; font-family:'Montserrat',sans-serif; font-size:0.55rem; letter-spacing:0.12em; text-transform:uppercase; font-weight:700; transition:all 0.3s; border-radius:6px; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; }
.btn-cart:hover { background:var(--gold-light); border-color:var(--gold-mid); transform:translateY(-1px); box-shadow:0 4px 12px rgba(139,105,20,0.2); }
.btn-wa { flex:1; background:#25D366; color:#fff; border:none; padding:0.75rem 0.5rem; cursor:pointer; font-family:'Montserrat',sans-serif; font-size:0.55rem; letter-spacing:0.12em; text-transform:uppercase; font-weight:700; transition:all 0.3s; border-radius:6px; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; }
.btn-wa:hover { background:#1da851; transform:translateY(-1px); box-shadow:0 4px 12px rgba(37,211,102,0.3); }

#how { background:var(--bg2); }
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
.step { background:var(--bg3); padding:2rem 1.5rem; text-align:center; border-bottom:3px solid transparent; transition:all 0.3s; }
.step:hover { border-bottom-color:var(--gold-mid); background:var(--bg); }
.step-num { font-family:'Cormorant Garamond',serif; font-size:3rem; color:var(--border); line-height:1; margin-bottom:0.75rem; }
.step-icon { font-size:1.75rem; margin-bottom:0.75rem; }
.step-title { font-size:0.72rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--text); font-weight:600; margin-bottom:0.6rem; }
.step-desc { font-size:0.72rem; color:var(--text3); line-height:1.7; }

#contact { background:var(--bg); }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; }
.contact-info h3 { font-family:'Cormorant Garamond',serif; font-size:2rem; font-weight:300; color:var(--text); margin-bottom:2rem; }
.contact-item { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.5rem; }
.contact-icon { width:40px; height:40px; border:1.5px solid var(--gold-mid); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; color:var(--gold); }
.contact-text p:first-child { font-size:0.58rem; letter-spacing:0.2em; color:var(--gold); text-transform:uppercase; margin-bottom:0.25rem; }
.contact-text p:last-child { font-size:0.9rem; color:var(--text); font-weight:500; }
.wa-big { display:inline-flex; align-items:center; gap:1rem; background:#25D366; padding:1.25rem 1.75rem; margin-top:1.75rem; text-decoration:none; transition:all 0.3s; border-radius:8px; font-family:'Montserrat',sans-serif; }
.wa-big:hover { background:#1da851; transform:translateY(-1px); box-shadow:0 4px 16px rgba(37,211,102,0.3); }
.wa-big-text p:first-child { font-size:0.6rem; letter-spacing:0.15em; color:rgba(255,255,255,0.8); }
.wa-big-text p:last-child { font-size:1rem; font-weight:700; color:#fff; }
.note-box { background:var(--gold-light); border-left:4px solid var(--gold-mid); padding:1.1rem 1.25rem; }
.note-title { font-size:0.58rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:0.5rem; font-weight:600; }
.note-text { font-size:0.78rem; color:#5a3f00; line-height:1.7; }

footer { background:var(--text); padding:3rem 4rem; text-align:center; }
.footer-logo { font-family:'Cormorant Garamond',serif; font-size:1.6rem; color:var(--gold-mid); letter-spacing:0.3em; margin-bottom:0.75rem; }
.footer-tag { font-size:0.6rem; letter-spacing:0.3em; color:#888; text-transform:uppercase; margin-bottom:1.5rem; }
.footer-links { display:flex; gap:2rem; justify-content:center; list-style:none; margin-bottom:1.5rem; flex-wrap:wrap; }
.footer-links a { color:#888; text-decoration:none; font-size:0.62rem; letter-spacing:0.15em; text-transform:uppercase; transition:color 0.3s; }
.footer-links a:hover { color:var(--gold-mid); }
.footer-copy { font-size:0.62rem; color:#555; }

.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:2000; align-items:center; justify-content:center; padding:1rem; }
.modal-overlay.open { display:flex; }
.modal { background:var(--bg2); border-top:4px solid var(--gold-mid); max-width:500px; width:100%; max-height:90vh; overflow-y:auto; padding:2rem; }
.modal-title { font-family:'Cormorant Garamond',serif; font-size:1.6rem; color:var(--text); margin-bottom:0.25rem; }
.modal-product { font-size:0.75rem; color:var(--gold); font-weight:600; margin-bottom:1.75rem; }
.form-group { margin-bottom:1.1rem; }
.form-group label { display:block; font-size:0.58rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--text3); margin-bottom:0.4rem; }
.form-group input, .form-group textarea { width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text); padding:0.7rem 0.9rem; font-family:'Montserrat',sans-serif; font-size:0.82rem; outline:none; transition:border-color 0.3s; }
.form-group input:focus, .form-group textarea:focus { border-color:var(--gold-mid); }
.form-group textarea { resize:vertical; min-height:70px; }
.pay-section { border:1px solid var(--border); padding:1.25rem; margin-bottom:1.5rem; background:var(--bg); }
.pay-label { font-size:0.58rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:0.9rem; font-weight:600; }
.pay-body { display:block; font-size:0.8rem; }
.modal-btns { display:flex; gap:8px; }
.btn-cancel { background:#ff4d4d; border:none; color:white; padding:0.85rem 1.5rem; cursor:pointer; font-family:'Montserrat',sans-serif; font-size:0.62rem; letter-spacing:0.15em; text-transform:uppercase; border-radius:6px; transition:all 0.3s; display:inline-flex; align-items:center; justify-content:center; }
.btn-cancel:hover { background:#cc0000; transform:translateY(-1px); box-shadow:0 4px 12px rgba(255,77,77,0.3); }
.btn-submit { flex:1; background:var(--gold); color:#fff; border:none; padding:0.85rem; cursor:pointer; font-family:'Montserrat',sans-serif; font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase; font-weight:700; transition:all 0.3s; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; }
.btn-submit:hover { background:var(--gold-mid); transform:translateY(-1px); box-shadow:0 4px 12px rgba(139,105,20,0.3); }

.toast { position:fixed; bottom:2rem; right:2rem; z-index:3000; background:var(--gold); color:#fff; padding:1rem 1.5rem; font-size:0.75rem; letter-spacing:0.1em; font-weight:600; transform:translateY(100px); transition:transform 0.4s; }
.toast.show { transform:translateY(0); }
.cart-icon-btn { position:relative; cursor:pointer; background:none; border:none; font-size:1.3rem; margin-right:0.5rem; padding:0.4rem; border-radius:6px; transition:all 0.3s; }
.cart-icon-btn:hover { background:var(--gold-light); }
.cart-count { position:absolute; top:-6px; right:-8px; background:red; color:#fff; font-size:0.55rem; font-weight:700; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.cart-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:2500; align-items:flex-start; justify-content:flex-end; }
.cart-overlay.open { display:flex; }
.cart-panel { background:var(--bg2); width:100%; max-width:400px; height:100vh; overflow-y:auto; padding:2rem; border-left:4px solid var(--gold-mid); }
.cart-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; border-bottom:1px solid var(--border); padding-bottom:1rem; }
.cart-header h2 { font-family:'Cormorant Garamond',serif; font-size:1.8rem; color:var(--text); }
.cart-close { background:#ff4d4d; border:none; color:white; font-size:1.5rem; cursor:pointer; padding:0.5rem 0.75rem; border-radius:6px; transition:all 0.3s; font-family:'Montserrat',sans-serif; display:inline-flex; align-items:center; justify-content:center; }
.cart-close:hover { background:#cc0000; transform:translateY(-1px); box-shadow:0 4px 12px rgba(255,77,77,0.3); }
.cart-item { display:flex; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--border); align-items:center; }
.cart-item-info { flex:1; }
.cart-item-name { font-size:0.82rem; font-weight:600; color:var(--text); margin-bottom:0.2rem; }
.cart-item-price { font-size:0.82rem; color:var(--gold); font-weight:700; }
.cart-item-qty { display:flex; align-items:center; gap:0.5rem; margin-top:0.4rem; }
.qty-btn { background:var(--bg3); border:1px solid var(--border); width:26px; height:26px; cursor:pointer; font-size:0.9rem; font-weight:700; color:var(--text); border-radius:4px; transition:all 0.2s; font-family:'Montserrat',sans-serif; display:inline-flex; align-items:center; justify-content:center; }
.qty-btn:hover { background:var(--gold-light); border-color:var(--gold); }
.qty-num { font-size:0.82rem; font-weight:600; min-width:20px; text-align:center; }
.cart-remove { background:none; border:none; color:var(--text3); cursor:pointer; font-size:1rem; padding:0.3rem; border-radius:4px; transition:all 0.3s; font-family:'Montserrat',sans-serif; display:inline-flex; align-items:center; justify-content:center; }
.cart-remove:hover { color:red; background:rgba(255,0,0,0.08); }
.cart-empty { text-align:center; padding:3rem 1rem; color:var(--text3); font-size:0.85rem; }
.cart-footer { margin-top:1.5rem; border-top:2px solid var(--border); padding-top:1.5rem; }
.cart-delivery-box { background:var(--gold-light); border-left:4px solid var(--gold-mid); padding:0.75rem 1rem; margin-bottom:1rem; font-size:0.75rem; color:#5a3f00; line-height:1.6; }
.cart-total-row { display:flex; justify-content:space-between; font-size:0.8rem; margin-bottom:0.4rem; color:var(--text2); }
.cart-grand { font-size:1rem; font-weight:700; color:var(--text); margin-top:0.5rem; border-top:1px solid var(--border); padding-top:0.5rem; display:flex; justify-content:space-between; }
.cart-checkout-btn { width:100%; background:var(--gold); color:#fff; border:none; padding:1rem; cursor:pointer; font-family:'Montserrat',sans-serif; font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; font-weight:700; transition:all 0.3s; margin-top:1rem; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; }
.cart-checkout-btn:hover { background:var(--gold-mid); transform:translateY(-1px); box-shadow:0 4px 12px rgba(139,105,20,0.3); }

/* ============================================
   IMAGE GALLERY MODAL
   ============================================ */
.gallery-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 3000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gallery-overlay.open {
  display: flex;
  opacity: 1;
}
.gallery-modal {
  background: var(--bg2);
  border-top: 4px solid var(--gold-mid);
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  border-radius: 4px;
}
.gallery-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: #ff4d4d;
  border: none;
  width: 36px;
  height: 36px;
  font-size: 1.2rem;
  cursor: pointer;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  z-index: 10;
  font-family: 'Montserrat', sans-serif;
}
.gallery-close:hover {
  background: #cc0000;
  color: #fff;
  transform: scale(1.1);
  box-shadow:0 4px 12px rgba(255,77,77,0.3);
}
.gallery-main {
  width: 100%;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg3);
  overflow: hidden;
}
.gallery-main img {
  max-width: 100%;
  max-height: 400px;
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.gallery-main img:hover {
  transform: scale(1.02);
}
.gallery-thumbnails {
  display: flex;
  gap: 10px;
  padding: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.gallery-thumb {
  width: 70px;
  height: 70px;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
}
.gallery-thumb:hover {
  border-color: var(--gold-mid);
}
.gallery-thumb.active {
  border-color: var(--gold);
  box-shadow: 0 2px 8px rgba(139, 105, 20, 0.3);
}
.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-product-info {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--border);
  text-align: center;
}
.gallery-product-info h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.5rem;
}
.gallery-product-info p {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gold);
}

/* Product card image clickable */
.product-img {
  cursor: pointer;
  transition: all 0.3s;
}
.product-img:hover {
  opacity: 0.92;
  transform: scale(1.03);
}

@keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

@media (max-width:900px) {
  nav { padding:1rem 1.25rem; }
  .logo-text { font-size:1.2rem; }
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .nav-links.open { display:flex; flex-direction:column; position:fixed; inset:0; background:rgba(248,246,241,0.98); align-items:center; justify-content:center; gap:2rem; z-index:999; }
  .nav-links.open a { font-size:1rem; }
  .section { padding:3rem 1.25rem; }
  .hero-content { grid-template-columns:1fr; gap:1.5rem; padding:1.5rem 1.25rem; }
  .hero::before { display:none; }
  .hero-title { font-size:clamp(2.5rem,8vw,4rem); }
  .hero-subtitle { font-size:0.65rem; }
  .btn-primary, .btn-outline { padding:0.75rem 1.5rem; font-size:0.6rem; }
  .hero-stat { padding:1rem; }
  .hero-stat-num { font-size:2rem; }
  .categories { grid-template-columns:1fr; gap:0.75rem; }
  .steps { grid-template-columns:1fr 1fr; gap:2px; }
  .contact-grid { grid-template-columns:1fr; gap:2rem; }
  .filter-bar { gap:6px; margin-bottom:1.5rem; }
  .filter-btn { padding:0.4rem 1rem; font-size:0.55rem; }
  .modal { padding:1.5rem; margin:0.5rem; }
  .cart-panel { max-width:100%; padding:1.25rem; }
  .gallery-main { height:300px; }
  .gallery-main img { max-height:300px; }
  .gallery-thumb { width:60px; height:60px; }
  .gallery-product-info { padding:1rem; }
  footer { padding:2rem 1.25rem; }
}
@media (max-width:600px) {
  .products-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .product-img { height:180px; }
  .product-info { padding:0.75rem; }
  .product-name { font-size:1rem; margin-bottom:0.3rem; }
  .product-desc { font-size:0.7rem; line-height:1.5; margin-bottom:0.5rem; }
  .product-price { font-size:0.95rem; }
  .product-actions { flex-direction:column; gap:6px; margin-top:0.75rem; }
  .btn-order, .btn-cart, .btn-wa { padding:0.6rem 0.5rem; font-size:0.5rem; }
  .cat-card { padding:1.75rem 1.25rem; }
  .cat-icon { font-size:1.8rem; }
  .cat-name { font-size:1.1rem; }
  .steps { grid-template-columns:1fr; gap:2px; }
  .step { padding:1.5rem 1rem; }
  .gallery-main { height:240px; }
  .gallery-main img { max-height:240px; }
  .gallery-thumb { width:50px; height:50px; }
  .gallery-modal { max-height:85vh; }
}
@media (max-width:400px) {
  nav { padding:0.75rem 1rem; }
  .logo-text { font-size:1rem; }
  .nav-cta { padding:0.5rem 1rem; font-size:0.55rem; }
  .products-grid { grid-template-columns:1fr; gap:10px; }
  .product-img { height:220px; }
  .section { padding:2rem 1rem; }
  .hero-content { padding:1rem 1rem; gap:1rem; }
  .hero-title { font-size:clamp(2rem,10vw,3rem); }
  .hero-stat { padding:0.75rem; }
  .hero-stat-num { font-size:1.6rem; }
  .btn-primary, .btn-outline { padding:0.6rem 1.25rem; font-size:0.55rem; }
  .contact-grid { gap:1.5rem; }
  .contact-item { gap:0.75rem; }
  .footer-links { gap:1rem; }
  footer { padding:1.5rem 1rem; }
  .modal { padding:1.25rem; margin:0.25rem; }
  .cart-panel { padding:1rem; }
  .gallery-main { height:200px; }
  .gallery-main img { max-height:200px; }
  .gallery-thumb { width:45px; height:45px; }
}