:root{
  --bg:#ffffff;
  --ink:#0a0a0a;
  --muted:#5b6571;
  --line:#e7e2d6;
  --card:#fffaf2;
  --accent:#a67c00;
  --accent2:#2e2a25;
  --glow:#ffd56a;
}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg)}
.wrap{max-width:1280px;margin:0 auto;padding:16px 22px}
.header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav a{padding:10px 12px;border-radius:8px;margin:0 2px;color:#111;text-decoration:none} .nav a.active,.nav a:hover{background:#f0f2f5}
.hero{position:relative;min-height:46vh;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line)}
.hero .logo-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:.06}
.hero .logo-wrap img{max-width:90vw;max-height:85vh;object-fit:contain;filter:grayscale(100%)}
.hero .content{position:relative;z-index:2;max-width:980px;padding:24px;background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:20px}
.section{padding:28px 0;border-top:1px solid var(--line)} h2{margin:0 0 12px}
.products{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1100px){.products{grid-template-columns:repeat(3,1fr)}}@media(max-width:800px){.products{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.products{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;position:relative;transition:transform .25s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(10,11,13,.06)}
.card .media{aspect-ratio:4/3;background:#eef1f4} .card .media img{width:100%;height:100%;object-fit:cover}
.card .body{padding:14px} .h{font-weight:700}
.badge-promo{position:absolute;left:10px;top:10px;background:var(--accent);color:#fff;padding:6px 8px;border-radius:999px;font-size:12px}
.catalog{display:grid;grid-template-columns:280px 1fr;gap:18px}
.sidebar{position:sticky;top:72px;align-self:start;height:calc(100vh - 92px);border:1px solid var(--line);border-radius:14px;background:#fff;padding:12px;overflow:auto;box-shadow:0 8px 22px rgba(10,11,13,.04)}
.sidebar a{display:block;padding:10px 12px;margin:6px;border-radius:10px;border:1px solid var(--line);text-decoration:none;color:#111} .sidebar a.active,.sidebar a:hover{border-color:#c9d1dd;background:#f8fafc}
.list{height:calc(100vh - 92px);overflow:auto;border:1px solid var(--line);border-radius:14px;background:#fff;padding:14px}
.input{border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%}
.btn{background:linear-gradient(180deg,#f1f3f6,#e6e9ee);border:1px solid #d5dbe6;color:#111;padding:10px 12px;border-radius:10px;cursor:pointer;display:inline-flex;gap:8px;align-items:center;text-decoration:none}
.badge{display:inline-block;min-width:18px;height:18px;padding:0 6px;font-size:12px;background:var(--accent);color:#fff;border-radius:999px;margin-left:6px}
.fab-cart{position:fixed;right:18px;bottom:18px;z-index:30}
.footer{border-top:1px solid var(--line);padding:20px 0;color:#5b6571;font-size:13px}
.table{width:100%;border-collapse:collapse} .table th,.table td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left}
.small{color:#5b6571;font-size:13px}
@media(max-width:900px){.catalog{grid-template-columns:1fr}.sidebar{position:relative;height:auto}}

/* Luxury enhancements */
body{background:
  radial-gradient(1200px 600px at 80% -10%, rgba(255,231,180,.35), transparent 60%),
  radial-gradient(900px 500px at 10% -10%, rgba(210,200,255,.25), transparent 60%),
  #ffffff;}
.header{background:rgba(255,255,255,.9); border-bottom:1px solid var(--line)}
.nav a{font-weight:600}
.nav a.active,.nav a:hover{background:linear-gradient(180deg,#fff7e6,#fff); border:1px solid #f0e6c8}
.hero .content{background:rgba(255,255,255,.8); border:1px solid #efe6d1; box-shadow:0 20px 60px rgba(166,124,0,.08)}
h1,h2,h3{letter-spacing:.2px}
.btn{background:linear-gradient(180deg,#fff3c2,#ffe79a);border:1px solid #e6ca69}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 24px rgba(166,124,0,.25)}
.badge-promo{background:linear-gradient(135deg,#ff4d4f,#ff9a8b)}
.card{background:linear-gradient(180deg,#fffdf8,#fffaf2); border:1px solid #efe6d1}
.card .media{background:linear-gradient(135deg,#f5efe4,#f8f1e6)}
.card:hover{box-shadow:0 18px 40px rgba(0,0,0,.12)}
.products .card{animation:fadeUp .5s ease both; will-change:transform, opacity}
@keyframes fadeUp{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)}}
.sidebar{border:1px solid #efe6d1; box-shadow:0 12px 34px rgba(0,0,0,.05)}
.list{border:1px solid #efe6d1}
.h{font-family: 'Didot', 'Bodoni MT', Georgia, serif}
.price-gold{color:#7a5a00; text-shadow:0 1px 0 #fff}
.footer{background:linear-gradient(180deg,#fff,#fff7e6)}
.glow{box-shadow:0 0 0 0 rgba(255,213,106,.8); animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,213,106,.6)}70%{box-shadow:0 0 0 14px rgba(255,213,106,0)}100%{box-shadow:0 0 0 0 rgba(255,213,106,0)}}

/* unified checkout panel */
.panel.checkout{border:1px solid #e5e5e5;border-radius:8px;padding:16px;margin-top:16px;background:#fff}
.panel.checkout .btn.primary{font-weight:600}

/* Brand logo & CTA */
.brand-link img{ display:block; object-fit:contain; }
.header .btn#cta-open-catalog{ font-weight:600; padding:8px 12px; }
@media (max-width:720px){
  .header .btn#cta-open-catalog{ display:none; } /* keep header compact on mobile; hero CTA can be added if needed */
}