:root {
  --ink: #101828;
  --muted: #667085;
  --line: #e4e7ec;
  --panel: #f8fafc;
  --accent: #b08d57;
  --accent-dark: #8a6d42;
  --white: #ffffff;
  --danger: #b42318;
  --radius: 18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #fff; }
button, input, select { font: inherit; }
button { cursor: pointer; }

.demo-bar {
  background: var(--ink);
  color: white;
  text-align: center;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}
.topbar {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px clamp(18px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px);
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 54px; height: 54px; border: 1px solid var(--ink);
  display:grid; place-items:center; font-family: Georgia, serif;
  font-size: 18px; font-weight: 800;
}
.brand-name { font-weight: 800; letter-spacing: .12em; font-size: 14px; }
.brand-tag { color: var(--muted); letter-spacing: .08em; font-size: 9px; margin-top: 4px; }
.cart-button {
  border: 1px solid var(--ink); background: white; padding: 10px 14px; border-radius: 999px;
  font-weight: 750;
}
.cart-button span {
  background: var(--ink); color:white; border-radius:999px; min-width: 24px; padding: 2px 7px; margin-left:6px;
}

main { padding: 0 clamp(18px, 4vw, 56px) 80px; }
.hero {
  display:grid; grid-template-columns: minmax(0,1fr) auto; gap: 36px; align-items:end;
  padding: clamp(46px,8vw,90px) 0 44px;
  border-bottom: 1px solid var(--line);
}
.eyebrow { font-size: 11px; font-weight:800; letter-spacing:.15em; color: var(--accent-dark); }
h1 { font-family: Georgia, serif; font-size: clamp(38px,6vw,74px); line-height:.98; max-width:900px; margin:12px 0 18px; }
.hero p { color:var(--muted); font-size:18px; max-width:720px; line-height:1.6; margin:0; }
.session-card { min-width: 240px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px; }
.session-card span,.session-card small { display:block; color:var(--muted); }
.session-card strong { display:block; margin:8px 0; }

.controls { display:grid; grid-template-columns: 1fr 240px; gap:14px; padding:28px 0; }
input, select { width:100%; border:1px solid var(--line); background:white; border-radius:12px; padding:14px 16px; outline:none; }
input:focus, select:focus { border-color: var(--accent); box-shadow:0 0 0 3px rgba(176,141,87,.12); }

.catalog-shell { display:grid; grid-template-columns: 260px minmax(0,1fr); gap:36px; }
.info-panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px; height:max-content; position:sticky; top:110px; }
.panel-label { font-size:11px; font-weight:800; letter-spacing:.12em; }
.info-panel ol { padding-left:20px; color:var(--muted); line-height:1.55; }
.info-panel li { margin-bottom:10px; }
.link-button { border:0; padding:0; background:transparent; color:var(--accent-dark); font-weight:800; }

.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:18px; }
.section-heading h2 { margin:6px 0 0; font-family:Georgia,serif; font-size:32px; }
.result-count { color:var(--muted); font-size:13px; }

.product-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:18px; }
.product-card { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:white; display:flex; flex-direction:column; min-height:360px; transition:transform .15s ease, box-shadow .15s ease; }
.product-card:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(16,24,40,.08); }
.product-visual { min-height:150px; display:grid; place-items:center; background:linear-gradient(145deg,#f8fafc,#eef2f6); font-size:58px; }
.product-body { padding:18px; display:flex; flex-direction:column; gap:9px; flex:1; }
.product-meta { display:flex; justify-content:space-between; gap:8px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.product-card h3 { margin:0; font-size:18px; }
.product-desc { color:var(--muted); line-height:1.45; font-size:14px; flex:1; }
.product-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.price { font-weight:850; font-size:20px; }
.add-button,.primary-button { border:0; border-radius:12px; background:var(--ink); color:white; font-weight:800; padding:12px 14px; }
.add-button:hover,.primary-button:hover { background:#1d2939; }
.primary-button:disabled { opacity:.35; cursor:not-allowed; }

.cart-drawer { position:fixed; z-index:50; right:0; top:0; height:100dvh; width:min(440px,94vw); background:white; transform:translateX(102%); transition:.22s ease; display:flex; flex-direction:column; box-shadow:-20px 0 60px rgba(16,24,40,.18); }
.cart-drawer.open { transform:translateX(0); }
.backdrop { position:fixed; inset:0; background:rgba(16,24,40,.45); opacity:0; pointer-events:none; z-index:40; transition:.2s; }
.backdrop.show { opacity:1; pointer-events:auto; }
.cart-header { display:flex; justify-content:space-between; padding:24px; border-bottom:1px solid var(--line); }
.cart-header h2,.dialog-head h2 { font-family:Georgia,serif; margin:5px 0 0; }
.icon-button { border:0; background:transparent; font-size:30px; color:var(--muted); }
.cart-items { overflow:auto; padding:10px 24px; flex:1; }
.empty-cart { color:var(--muted); padding:30px 0; text-align:center; }
.cart-row { padding:16px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:1fr auto; gap:12px; }
.cart-row strong { display:block; }
.cart-row small { color:var(--muted); }
.qty-controls { display:flex; align-items:center; gap:10px; margin-top:10px; }
.qty-controls button { width:28px; height:28px; border:1px solid var(--line); border-radius:8px; background:white; }
.remove { border:0; background:transparent; color:var(--danger); font-size:12px; font-weight:700; padding:0; margin-top:10px; }
.cart-summary { border-top:1px solid var(--line); padding:20px 24px 26px; }
.cart-summary > div { display:flex; justify-content:space-between; margin:8px 0; }
.grand-total { padding-top:12px; border-top:1px solid var(--line); font-size:18px; }
.cart-summary .primary-button { width:100%; margin-top:12px; }
.cart-summary small { display:block; color:var(--muted); text-align:center; margin-top:10px; }

dialog { border:0; border-radius:18px; width:min(820px,92vw); padding:0; box-shadow:0 24px 80px rgba(16,24,40,.24); }
dialog::backdrop { background:rgba(16,24,40,.55); }
.dialog-head { display:flex; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--line); }
pre { margin:0; max-height:60vh; overflow:auto; padding:22px; background:#0b1220; color:#d1e9ff; font-size:12px; line-height:1.55; white-space:pre-wrap; }

@media (max-width: 1000px) {
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .catalog-shell { grid-template-columns:1fr; }
  .info-panel { position:static; }
}
@media (max-width: 720px) {
  .hero { grid-template-columns:1fr; }
  .session-card { min-width:0; }
  .controls { grid-template-columns:1fr; }
  .product-grid { grid-template-columns:1fr; }
  .brand-tag { display:none; }
  .topbar { min-height:70px; }
  .brand-mark { width:44px;height:44px; }
  h1 { font-size:44px; }
}