:root {
    --primary: #9d8189;
    --secondary: #ffe5d9;
    --accent: #d8e2dc;
    --text: #4a4e69;
    --white: #ffffff;
    --btn-wa: #25d366;
    --bg: #fdf8f5;
    --offer: #ff4757;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', system-ui, sans-serif; }
body { background: var(--bg); color: var(--text); overflow-x: hidden; width: 100%; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }

.main-header { background: var(--white); position: sticky; top: 0; z-index: 1000; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.top-bar { background: var(--secondary); text-align: center; padding: 8px; font-size: 11px; font-weight: 700; color: var(--primary); text-transform: uppercase; }
.header-main { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; gap: 15px; }

.brand-logo { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.brand-text { display: flex; flex-direction: column; line-height: 0.9; }
.brand-text .sub { font-size: 10px; font-style: italic; color: #777; }
.brand-text .main { font-size: 18px; font-weight: 900; color: var(--primary); text-transform: uppercase; }

.search-box { flex: 1; position: relative; max-width: 450px; }
.search-box input { width: 100%; padding: 10px 15px 10px 38px; border-radius: 20px; border: 1px solid #eee; background: #f8f9fa; outline: none; font-size: 14px; }
.search-box i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #bbb; }

.cart-trigger { display: flex; align-items: center; gap: 8px; background: var(--primary); color: white; padding: 6px 12px; border-radius: 25px; cursor: pointer; transition: 0.3s; }
.cart-icon-wrap { position: relative; display: flex; align-items: center; }
#cart-counter { background: var(--offer); color: white; font-size: 10px; font-weight: 900; min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; position: absolute; top: -12px; right: -12px; border: 2px solid var(--primary); }
.cart-label { font-size: 12px; font-weight: 800; }

.cat-nav { background: #fff; border-top: 1px solid #f9f9f9; }
.nav-scroll { display: flex; overflow-x: auto; gap: 18px; padding: 12px 5px; scrollbar-width: none; }
.nav-scroll::-webkit-scrollbar { display: none; }
.nav-item { white-space: nowrap; font-size: 12px; font-weight: 700; cursor: pointer; color: #888; text-transform: uppercase; }

.hero-banner { background: linear-gradient(135deg, var(--accent), var(--secondary)); padding: 40px 20px; border-radius: 20px; margin: 15px 0; text-align: center; }
.hero-banner h2 { font-size: 28px; font-weight: 900; margin-bottom: 5px; }

.cat-explorer h3 { font-size: 16px; margin: 25px 0 15px; text-transform: uppercase; color: var(--primary); }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 12px; }
.cat-box { background: #fff; padding: 12px; border-radius: 12px; text-align: center; cursor: pointer; transition: 0.3s; border: 1px solid #f0f0f0; }
.cat-box:hover { transform: scale(1.05); background: var(--secondary); }
.cat-box i { font-size: 22px; color: var(--primary); margin-bottom: 6px; display: block; }
.cat-box span { font-size: 10px; font-weight: 800; display: block; }

.products-display { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 10px 0; }
@media (min-width: 768px) { .products-display { grid-template-columns: repeat(4, 1fr); gap: 20px; } }

.p-card { background: #fff; border-radius: 16px; padding: 10px; border: 1px solid #f2f2f2; display: flex; flex-direction: column; transition: 0.3s; }
.p-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.07); }
.p-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; margin-bottom: 10px; cursor: pointer; }
.p-card h4 { font-size: 13px; font-weight: 600; line-height: 1.3; height: 34px; overflow: hidden; margin-bottom: 8px; cursor: pointer; }

.price-box { margin-top: auto; padding-bottom: 8px; }
.price-row { display: flex; align-items: center; gap: 6px; }
.p-price { font-weight: 900; font-size: 17px; }
.old-price { text-decoration: line-through; color: #b1a7a6; font-size: 12px; }
.badge-offer { background: var(--offer); color: white; font-size: 9px; font-weight: 800; padding: 2px 5px; border-radius: 4px; }

.add-btn { background: var(--accent); border: none; padding: 10px; border-radius: 10px; font-weight: 800; color: #5a6a5a; cursor: pointer; transition: 0.2s; }

.cart-sidebar { position: fixed; right: -100%; top: 0; width: 100%; max-width: 400px; height: 100%; background: #fff; z-index: 2000; transition: 0.4s; display: flex; flex-direction: column; }
.cart-sidebar.open { right: 0; }
.cart-top { padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; }
.cart-top h3 { font-size: 18px; font-weight: 900; }
.cart-top button { font-size: 28px; background: none; border: none; cursor: pointer; color: #aaa; }

.cart-content { flex: 1; overflow-y: auto; padding: 15px; }
.cart-item { display: flex; gap: 12px; margin-bottom: 15px; align-items: center; border-bottom: 1px solid #f9f9f9; padding-bottom: 15px; }
.cart-item img { width: 55px; height: 55px; border-radius: 8px; object-fit: cover; }
.item-info { flex: 1; }
.item-info h5 { font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.qty-btn { width: 22px; height: 22px; border-radius: 50%; border: 1px solid #ddd; background: #fff; cursor: pointer; }

.cart-bottom { padding: 20px; background: #fff; border-top: 1px solid #eee; }
.total-box { display: flex; justify-content: space-between; font-weight: 900; font-size: 19px; margin-bottom: 15px; color: var(--primary); }
.input-field { position: relative; margin-bottom: 10px; }
.input-field i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--primary); font-size: 14px; }
.input-field input { width: 100%; padding: 10px 10px 10px 38px; border-radius: 10px; border: 1px solid #eee; background: #fafafa; outline: none; }

.wa-send { width: 100%; background: var(--btn-wa); color: #fff; border: none; padding: 15px; border-radius: 12px; font-weight: 800; cursor: pointer; font-size: 15px; }

#shipping-alert, #discount-alert { font-size: 11px; font-weight: 800; text-align: center; padding: 8px; border-radius: 8px; margin-bottom: 8px; }
.alert-success { background: #e7f9ee; color: #1fb158; border: 1px solid #c9efd9; }
.alert-info { background: #fff8e6; color: #cc9900; border: 1px solid #ffecb3; }

.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 5000; display: none; align-items: center; justify-content: center; padding: 15px; backdrop-filter: blur(5px); }
.modal-content { background: #fff; width: 100%; max-width: 480px; border-radius: 24px; position: relative; padding: 20px; animation: slideUp 0.4s ease; }
.modal-close { position: absolute; top: 15px; right: 15px; border: none; background: #f0f0f0; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 20px; }

.maps-section { margin: 40px auto; text-align: center; max-width: 900px; }
.maps-section h3 { margin-bottom: 15px; color: var(--primary); font-size: 22px; font-weight: 900; }
.map-frame { border-radius: 20px; overflow: hidden; height: 350px; border: 4px solid white; box-shadow: 0 15px 35px rgba(0,0,0,0.1); }
.map-frame iframe { width: 100%; height: 100%; }

.auto-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 6000; display: none; align-items: center; justify-content: center; padding: 20px; }
.auto-modal-content { background: #fff; padding: 40px 30px; border-radius: 30px; text-align: center; max-width: 320px; position: relative; border: 3px solid var(--secondary); box-shadow: 0 20px 40px rgba(0,0,0,0.2); }
.modal-close-btn { position: absolute; top: 12px; right: 12px; border: none; background: #f5f5f5; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 16px; font-weight: bold; color: #999; }
.sparkle { font-size: 45px; margin-bottom: 15px; animation: float 3s infinite; }
.free-shipping-badge { background: var(--accent); padding: 10px; border-radius: 12px; margin-top: 20px; font-weight: 900; font-size: 13px; }

@keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: none; z-index: 1500; backdrop-filter: blur(2px); }
.overlay.active { display: block; }

@media (max-width: 480px) {
    .cart-label { display: none; }
    .hero-banner h2 { font-size: 22px; }
    .map-frame { height: 250px; }
}