@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');
*,*::before,*::after{box-sizing:border-box;}
:root{--bg:#f8f7f5;--surface:#fff;--text:#111;--muted:#666;--accent:#1f1f1f;--accent-soft:#bfa45f;--border:#eae4de;--shadow:0 12px 28px rgba(0,0,0,.12);}
body{margin:0;background:var(--bg);font-family:'Inter',system-ui,sans-serif;color:var(--text);line-height:1.6;}
.top-banner{background:#1f1f1f;color:#fff;padding:9px 12px;text-align:center;font-size:12px;letter-spacing:.04em;}
.page-header{position:sticky;top:0;z-index:99;background:#fff;border-bottom:1px solid var(--border);}
.header-inner{max-width:1320px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 20px;gap:16px;}
.logo{font-family:'Playfair Display',serif;font-size:23px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);}
.logo span{color:var(--accent-soft);}
.top-links{display:flex;gap:10px;flex-wrap:wrap;}
.btn-nav{background:transparent;color:var(--text);border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:12px;cursor:pointer;transition:.2s;}
.btn-nav.active{background:var(--accent);color:#fff;border-color:var(--accent);} .btn-nav:hover{background:#f3f1ec;}
.header-right{display:flex;align-items:center;gap:10px;}
.btn{border:none;border-radius:999px;font-weight:700;font-size:12px;letter-spacing:.08em;cursor:pointer;padding:8px 14px;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-outline{background:#fff;color:var(--accent);border:1px solid var(--border);}
.hero-section{padding:30px 20px;background:#fff;border-bottom:1px solid var(--border);}
.hero-content{max-width:970px;margin:0 auto;text-align:center;}
.hero-tag{font-size:12px;text-transform:uppercase;letter-spacing:.22em;color:var(--muted);margin:0 0 8px;}
.hero-content h1{font-family:'Playfair Display',serif;font-size:clamp(38px,7vw,64px);margin:0 0 14px;font-weight:600;color:var(--accent);}
.hero-content p{margin:0 0 16px;color:var(--muted);font-size:15px;}
.filter-row{max-width:1320px;margin:20px auto 10px;padding:0 20px;display:flex;gap:8px;flex-wrap:wrap;}
.chip{border:1px solid var(--border);border-radius:999px;padding:8px 12px;font-size:11px;cursor:pointer;color:var(--text);background:#fff;}
.chip.active{background:var(--accent);color:#fff;border-color:var(--accent);} .chip:hover{background:#f7f6f2;}
.catalog-stats{max-width:1320px;margin:0 auto;padding:6px 20px;color:var(--muted);font-size:13px;display:flex;justify-content:space-between;}
.product-grid{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(240px,1fr));gap:16px;padding:0 20px;}
.product-card{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);transition:.26s;}
.product-card:hover{transform:translateY(-2px);}
.product-media{height:220px;overflow:hidden;background:#f3f1ec;}
.product-media img{width:100%;height:100%;object-fit:cover;transition:.32s;}
.product-card:hover .product-media img{transform:scale(1.04);}
.product-details{padding:14px;}
.brand{font-size:10px;text-transform:uppercase;color:var(--muted);margin:0 0 6px;}
.product-details h3{font-family:'Playfair Display',serif;font-size:16px;color:var(--accent);margin:0 0 6px;}
.price{font-size:15px;font-weight:700;color:#111;margin:0;}
.fee-note{font-size:11px;color:var(--muted);margin-left:7px;}
.actions{display:flex;gap:8px;margin-top:10px;}
.btn-sm{padding:8px 12px;font-size:11px;border-radius:8px;}
.toast{position:fixed;bottom:16px;right:16px;background:var(--accent);color:#fff;padding:10px 14px;border-radius:10px;opacity:0;transform:translateY(22px);transition:.25s;z-index:150;}
.toast.show{opacity:1;transform:translateY(0);}
.drawer{position:fixed;right:-420px;top:0;height:100vh;width:380px;background:#fff;border-left:1px solid var(--border);box-shadow:-10px 0 24px rgba(0,0,0,.2);transition:.3s;z-index:140;}
.drawer.open{right:0;}
.drawer-header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border);}
.drawer-items{padding:12px;min-height:220px;}
.drawer-footer{padding:12px 16px;border-top:1px solid var(--border);}
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:160;align-items:center;justify-content:center;}
.modal-overlay.active{display:flex;}
.modal{background:#fff;border-radius:14px;max-width:420px;width:min(92vw,420px);padding:18px;}
.form-input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;margin:8px 0;}
@media(max-width:1020px){.product-grid{grid-template-columns:repeat(2,minmax(220px,1fr));}.header-inner{padding:12px 18px;}.clear-nav{display:none;}}
@media(max-width:692px){.product-grid{grid-template-columns:1fr;}.page-header{position:static;}.drawern{right:-100%;}}