:root {
  color-scheme: dark;
  --bg: #090909;
  --surface: #111111;
  --surface-2: #181818;
  --line: rgba(255,255,255,.10);
  --text: #f4f1ed;
  --muted: #9a9691;
  --accent: #b89a82;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, a { font: inherit; }
button { color: inherit; }
.app-shell { min-height: 100svh; max-width: 980px; margin: 0 auto; padding: env(safe-area-inset-top) 18px env(safe-area-inset-bottom); }
.topbar { height: 76px; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; border-bottom: 1px solid var(--line); }
.icon-button { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: #141414; display: grid; place-items: center; cursor: pointer; }
.icon-button svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.brand { display: flex; justify-content: center; align-items: center; gap: 9px; text-decoration: none; color: var(--text); }
.brand-mark { width: 27px; height: 27px; border: 1px solid #806d5e; color: #d1b8a3; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 17px; }
.brand-name { font-size: 13px; letter-spacing: .19em; font-weight: 600; }
.brand-name i { color: #c0a48d; font-style: normal; }
.topbar-spacer { width: 42px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; padding: 34px 2px 22px; gap: 12px; }
.eyebrow { color: var(--accent); font-size: 9px; letter-spacing: .23em; margin: 0 0 9px; }
h1 { font: 500 clamp(25px, 5vw, 36px)/1.1 var(--serif); margin: 0; letter-spacing: -.025em; }
.product-count { color: var(--muted); font-size: 9px; letter-spacing: .16em; white-space: nowrap; padding-bottom: 4px; }
.catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px 12px; }
.product-card { min-width: 0; cursor: pointer; }
.product-media { position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; background: linear-gradient(145deg,#29231f,#111 58%,#211a17); border-radius: 3px; }
.product-media video, .product-media img { width: 100%; height: 100%; display: block; object-fit: cover; }
.media-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.28); font: 54px var(--serif); background: radial-gradient(ellipse at 50% 38%,#3b302a 0,#171514 48%,#0e0e0e 100%); }
.play-indicator { position: absolute; right: 10px; bottom: 10px; width: 29px; height: 29px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.28); font-size: 10px; }
.card-info { padding: 11px 1px 0; }
.card-title { font-size: 12px; font-weight: 500; letter-spacing: .015em; margin: 0 0 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-meta { font-size: 11px; color: var(--muted); margin: 0; }
.card-meta .dot { padding: 0 5px; color: #665b52; }
.catalog-grid.carousel-mode { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 13px; padding-bottom: 12px; scrollbar-width: none; }
.catalog-grid.carousel-mode::-webkit-scrollbar { display: none; }
.catalog-grid.carousel-mode .product-card { flex: 0 0 min(78vw, 330px); scroll-snap-align: start; }
.empty-state { text-align: center; padding: 76px 20px 90px; color: var(--muted); }
.empty-state[hidden] { display: none; }
.empty-symbol { color: var(--accent); font-size: 30px; }
.empty-state h2 { color: var(--text); font: 500 23px var(--serif); margin: 16px 0 8px; }
.empty-state p { font-size: 12px; line-height: 1.7; max-width: 280px; margin: auto; }
.empty-state code { color: #d1b8a3; }
.site-footer { border-top: 1px solid var(--line); margin-top: 48px; padding: 20px 0 26px; text-align: center; color: #77716b; font-size: 9px; letter-spacing: .15em; }
.site-footer span { color: var(--accent); padding: 0 5px; }

/* Full-screen vertical product viewer */
.viewer { position: fixed; inset: 0; z-index: 20; background: #050505; display: none; overflow: hidden; }
.viewer.open { display: block; }
.viewer-track { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior-y: contain; scrollbar-width: none; }
.viewer-track::-webkit-scrollbar { display: none; }
.viewer-item { position: relative; height: 100svh; min-height: 560px; scroll-snap-align: start; overflow: hidden; background: #080808; }
.viewer-video, .viewer-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.viewer-video { background: #080808; }
.viewer-shade { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.32),transparent 26%,transparent 48%,rgba(0,0,0,.82) 100%); pointer-events: none; }
.viewer-close { position: absolute; z-index: 5; top: max(18px,env(safe-area-inset-top)); left: 16px; background: rgba(12,12,12,.52); border-color: rgba(255,255,255,.2); font-size: 27px; font-weight: 300; }
.sound-toggle { position: absolute; z-index: 5; top: max(23px,env(safe-area-inset-top)); right: 17px; border: 1px solid rgba(255,255,255,.35); background: rgba(12,12,12,.52); border-radius: 30px; padding: 10px 13px; font-size: 9px; letter-spacing: .13em; cursor: pointer; }
.viewer-copy { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: max(27px,env(safe-area-inset-bottom)); }
.viewer-kicker { color: #d2b49a; font-size: 9px; letter-spacing: .22em; margin: 0 0 8px; }
.viewer-title { font: 500 clamp(30px,8vw,43px)/1.05 var(--serif); margin: 0 0 9px; }
.viewer-description { max-width: 470px; color: rgba(255,255,255,.82); font-size: 12px; line-height: 1.55; margin: 0 0 12px; }
.viewer-price { font-size: 13px; letter-spacing: .04em; margin-bottom: 17px; }
.viewer-price span { color: #c6aa92; padding: 0 7px; }
.contact-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; max-width: 520px; }
.contact-link { min-height: 46px; display: flex; align-items: center; justify-content: center; text-decoration: none; border: 1px solid rgba(255,255,255,.65); color: #111; background: #f1eee9; border-radius: 2px; font-size: 9px; font-weight: 700; letter-spacing: .09em; }
.contact-link.signal { color: #f3eee8; background: rgba(10,10,10,.28); border-color: rgba(255,255,255,.42); }
.photo-strip { display: flex; gap: 8px; overflow-x: auto; margin-top: 13px; scrollbar-width: none; }
.photo-strip img { width: 55px; height: 55px; object-fit: cover; border: 1px solid rgba(255,255,255,.35); }
.swipe-hint { position: absolute; z-index: 4; top: 50%; right: 12px; writing-mode: vertical-rl; color: rgba(255,255,255,.55); font-size: 8px; letter-spacing: .17em; pointer-events: none; }
@media (min-width: 700px) {
  .app-shell { padding-left: 28px; padding-right: 28px; }
  .catalog-grid { gap: 30px 18px; }
  .catalog-grid:not(.carousel-mode) { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .product-media { aspect-ratio: 4 / 5; }
  .viewer-item { max-width: 520px; margin: 0 auto; }
  .viewer { background: #000; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }