:root{
  --bg:#1E1C1A;--bg2:#262321;--card:#2B2825;--line:#3A3631;--line2:#4A453E;
  --text:#E8E0D2;--muted:#9C9484;--gold:#B9A47A;
  --serif:'Playfair Display',Georgia,serif;--sans:'Jost',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.6}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;margin:0}

.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px 32px;border-bottom:.5px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:5;font-size:12px;letter-spacing:.18em;color:var(--gold);text-transform:uppercase}
.nav{display:flex;gap:24px}
.nav a:hover{color:var(--text)}
.logo{font-family:var(--serif);font-size:20px;letter-spacing:.3em;color:var(--text)}
.tools{display:flex;gap:16px;justify-content:flex-end;align-items:center}
.lang,.cart-btn{background:none;border:0;padding:0;letter-spacing:.18em;text-transform:uppercase;font-size:12px;color:var(--gold)}
.lang:hover,.cart-btn:hover{color:var(--text)}

.hero{text-align:center;padding:84px 24px 56px}
.hero h1{font-size:clamp(28px,4.5vw,46px)}
.hero p{color:var(--muted);margin:14px 0 0}

.catalog{max-width:1180px;margin:0 auto;padding:0 32px 80px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.card{border:.5px solid var(--line2);padding:14px;text-align:center;cursor:pointer;transition:border-color .2s;background:none;width:100%}
.card:hover{border-color:var(--gold)}
.ph{aspect-ratio:1/1;background:var(--card);margin-bottom:14px;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--line2);font-family:var(--serif);font-size:42px}
.ph img{width:100%;height:100%;object-fit:cover}
.card h3{font-size:18px}
.card .from{color:var(--gold);font-size:14px;margin:4px 0 0}
.card.out{opacity:.5}
.status{text-align:center;color:var(--muted)}

.info{max-width:680px;margin:0 auto;padding:0 24px 64px;text-align:center}
.info h2{font-size:26px;margin-bottom:12px}
.info p{color:var(--muted);margin:0}
.foot{border-top:.5px solid var(--line);text-align:center;padding:28px;color:var(--muted);font-size:12px;letter-spacing:.18em}

.btn{background:none;border:.5px solid var(--gold);color:var(--gold);padding:12px 26px;letter-spacing:.14em;text-transform:uppercase;font-size:12px;transition:.2s}
.btn:hover{background:var(--gold);color:var(--bg)}
.btn:disabled{opacity:.5;cursor:default}
.close{position:absolute;top:10px;right:14px;background:none;border:0;font-size:28px;line-height:1;color:var(--muted)}
.close:hover{color:var(--text)}

.modal{border:.5px solid var(--line2);background:var(--bg2);color:var(--text);padding:0;max-width:820px;width:calc(100% - 32px)}
.modal::backdrop{background:rgba(0,0,0,.65)}
.pm{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:28px}
.pm-img{aspect-ratio:1/1;background:var(--card);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--line2);font-family:var(--serif);font-size:64px}
.pm-img img{width:100%;height:100%;object-fit:cover}
.pm-body h3{font-size:26px;margin-bottom:10px}
.pm-desc{color:var(--muted);margin:0 0 20px;white-space:pre-line}
.pm-label{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.vols{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.vol{background:none;border:.5px solid var(--line2);padding:8px 16px;color:var(--text)}
.vol.on{border-color:var(--gold);color:var(--gold)}
.pm-price{font-family:var(--serif);font-size:26px;margin:0 0 18px}

.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:10}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,100%);background:var(--bg2);border-left:.5px solid var(--line2);z-index:11;transform:translateX(100%);transition:transform .3s;display:flex;flex-direction:column}
.drawer.open{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:.5px solid var(--line);position:relative}
.drawer-head .close{position:static}
.drawer-body{flex:1;overflow-y:auto;padding:8px 24px}
.empty{color:var(--muted);text-align:center;padding:40px 0}
.line{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:14px 0;border-bottom:.5px solid var(--line)}
.line .n{font-family:var(--serif)}
.line .v{color:var(--muted);font-size:14px}
.line .p{text-align:right}
.qty{display:flex;align-items:center;gap:10px;font-size:14px}
.qty button{background:none;border:.5px solid var(--line2);width:26px;height:26px;line-height:1}
.qty button:hover{border-color:var(--gold)}
.rm{background:none;border:0;color:var(--muted);font-size:12px;text-decoration:underline;justify-self:end}
.total{display:flex;justify-content:space-between;padding:18px 0;font-family:var(--serif);font-size:20px}
.checkout{padding:16px 24px 24px;border-top:.5px solid var(--line)}
.checkout h4{font-size:18px;margin-bottom:12px}
.checkout label{display:block;font-size:12px;letter-spacing:.1em;color:var(--gold);margin-bottom:12px}
.checkout input,.checkout textarea{display:block;width:100%;margin-top:4px;background:var(--bg);border:.5px solid var(--line2);color:var(--text);padding:10px;font:inherit;font-size:15px}
.checkout input:focus,.checkout textarea:focus{outline:none;border-color:var(--gold)}
.checkout .btn{width:100%}
.hp{position:absolute;left:-9999px}
.err{color:#d08a7a;font-size:14px;margin:0 0 10px}
.thanks{text-align:center;padding:60px 0}
.thanks h4{font-size:22px;margin-bottom:10px}
.thanks p{color:var(--muted)}

@media(max-width:720px){
  .top{grid-template-columns:auto 1fr;padding:14px 16px;gap:8px}
  .nav{display:none}
  .logo{font-size:16px;letter-spacing:.2em}
  .catalog{padding:0 16px 60px}
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .pm{grid-template-columns:1fr;padding:20px}
}