:root { color-scheme: dark; --bg:#151516; --panel:#201f20; --line:#3b393a; --soft:#aaa4a0; --ink:#f5f2ef; --accent:#ceb88a; --action:#638f7b; }
* { box-sizing:border-box; }
body { min-width:320px; margin:0; background:var(--bg); color:var(--ink); font:14px/1.45 Arial, sans-serif; }
button,input,textarea { font:inherit; } button { cursor:pointer; }
.topbar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:64px; padding:0 4vw; border-bottom:1px solid var(--line); }.brand { color:var(--ink); font-weight:900; letter-spacing:.08em; text-decoration:none; }.brand span { color:var(--accent); }.brand-sub { color:var(--soft); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }.selection-trigger { justify-self:end; border:1px solid var(--line); background:transparent; color:var(--ink); padding:9px 13px; }.selection-trigger b { display:inline-grid; place-items:center; min-width:18px; height:18px; margin-left:5px; background:var(--accent); color:#1e1b17; font-size:11px; }
.intro { max-width:1180px; padding:48px 28px 30px; margin:auto; border-bottom:1px solid var(--line); }.intro p { margin:0 0 10px; color:var(--accent); font-size:10px; font-weight:800; letter-spacing:.13em; }.intro h1 { margin:0; font:clamp(29px,4vw,48px)/1.05 Georgia,serif; letter-spacing:0; }.catalog-tools { display:flex; align-items:center; gap:16px; margin-top:34px; }.search { display:flex; align-items:center; flex:1; gap:12px; padding:10px 13px; border:1px solid var(--line); background:#252425; }.search span { color:var(--soft); font-size:11px; white-space:nowrap; }.search input { width:100%; border:0; outline:0; background:transparent; color:var(--ink); }.filters { display:flex; flex-wrap:wrap; gap:6px; }.filters button { border:0; background:transparent; color:var(--soft); padding:10px 8px; font-size:11px; font-weight:700; }.filters button.active { background:var(--accent); color:#1c1a18; }
.store-content { padding:28px; }.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; max-width:1440px; margin:auto; }.product { min-width:0; border:1px solid var(--line); background:var(--panel); }.product:hover { border-color:var(--accent); }.product-image { position:relative; display:grid; place-items:center; width:100%; aspect-ratio:4/4.9; padding:0; border:0; background:#f3f0ed; overflow:hidden; }.product-image img { width:100%; height:100%; object-fit:contain; }.tag { position:absolute; top:10px; left:10px; padding:4px 7px; background:#211f1d; color:var(--accent); font-size:9px; font-weight:800; letter-spacing:.08em; }.product-copy { display:grid; gap:6px; padding:12px; }.product-copy > span { color:var(--accent); font-size:9px; font-weight:800; letter-spacing:.1em; }.product h2 { overflow:hidden; margin:0; font:20px/1.05 Georgia,serif; text-overflow:ellipsis; white-space:nowrap; }.product p { overflow:hidden; margin:0; color:var(--soft); text-overflow:ellipsis; white-space:nowrap; }.product-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:7px; padding-top:9px; border-top:1px solid var(--line); }.product-row strong { color:var(--accent); }.product-row button,.modal-actions button { padding:8px 10px; border:1px solid var(--line); background:transparent; color:var(--ink); font-size:12px; font-weight:700; }.empty { color:var(--soft); text-align:center; padding:70px 20px; }
.modal-backdrop { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:16px; background:rgba(0,0,0,.68); }.modal { width:min(960px,100%); max-height:calc(100vh - 32px); overflow:auto; border:1px solid #565153; background:#242324; box-shadow:0 20px 70px rgba(0,0,0,.5); }.modal-head { display:flex; justify-content:space-between; gap:16px; align-items:start; padding:17px; border-bottom:1px solid var(--line); }.modal-head strong { display:block; font-size:16px; }.modal-head span { color:var(--soft); font-size:12px; }.modal-close { border:0; background:transparent; color:var(--ink); font-size:20px; }.detail { display:grid; grid-template-columns:minmax(300px,1fr) minmax(280px,1fr); }.gallery { padding:14px; background:#eeebe8; }.gallery-main { display:grid; place-items:center; height:490px; }.gallery-main img { width:100%; height:100%; object-fit:contain; }.thumbs { display:flex; gap:7px; overflow:auto; margin-top:8px; }.thumbs button { flex:0 0 54px; height:65px; padding:0; border:1px solid var(--line); background:#fff; }.thumbs button.active { border:2px solid var(--accent); }.thumbs img { width:100%; height:100%; object-fit:contain; }.detail-copy { display:grid; align-content:start; gap:15px; padding:28px; }.detail-copy > span,.selection-item > span { color:var(--accent); font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.detail-copy h2 { margin:0; font:35px/1 Georgia,serif; }.detail-copy p { margin:0; color:#dad5d2; }.price { color:var(--accent); font:24px Georgia,serif; }.detail-copy label,.selection-client { display:grid; gap:6px; color:var(--soft); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.detail-copy textarea,.selection-item textarea,.selection-client input { width:100%; min-height:78px; padding:10px; border:1px solid var(--line); background:#1d1c1d; color:var(--ink); resize:vertical; }.modal-actions { display:flex; flex-wrap:wrap; gap:8px; }.modal-actions .primary { border-color:var(--action); background:var(--action); }.selection { width:min(760px,100%); }.selection-body { padding:17px; }.selection-list { display:grid; gap:8px; }.selection-item { display:grid; grid-template-columns:66px 1fr auto; gap:10px; padding:9px; border:1px solid var(--line); }.selection-item img { width:66px; height:80px; object-fit:contain; background:#f3f0ed; }.selection-item section { display:grid; gap:4px; }.selection-item strong { font:18px Georgia,serif; }.selection-item small { color:var(--soft); }.selection-item textarea { min-height:55px; }.remove { align-self:start; border:0; background:transparent; color:var(--soft); font-size:20px; }.selection-client { max-width:420px; margin:18px 0; }.selection-client input { min-height:40px; }.sent { color:#9fcbb6!important; } footer { padding:38px 20px; color:var(--soft); text-align:center; font-size:11px; }
@media (max-width:720px) { .topbar { grid-template-columns:1fr auto; padding:0 16px; }.brand-sub { display:none; }.intro { padding:34px 16px 20px; }.catalog-tools { align-items:stretch; flex-direction:column; margin-top:24px; }.store-content { padding:16px; }.product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }.product-copy { padding:9px; }.product h2 { font-size:16px; }.product-row { align-items:flex-start; flex-direction:column; }.detail { grid-template-columns:1fr; }.gallery-main { height:min(460px,58vh); }.detail-copy { padding:20px; }.detail-copy h2 { font-size:30px; }.selection-item { grid-template-columns:52px 1fr auto; }.selection-item img { width:52px; height:64px; } }

.topbar-actions { justify-self:end; display:flex; gap:8px; align-items:center; }
.customer-trigger { border:1px solid var(--line); background:transparent; color:var(--soft); padding:9px 13px; font-size:12px; font-weight:700; }
.customer-modal { width:min(640px,100%); }
.customer-fields { display:grid; gap:10px; margin:18px 0; }
.customer-fields > small { color:var(--soft); font-size:11px; }
.customer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.customer-field { display:grid; gap:6px; color:var(--soft); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.customer-field input { width:100%; min-height:40px; padding:10px; border:1px solid var(--line); background:#1d1c1d; color:var(--ink); }
@media (max-width:720px) { .customer-trigger { display:none; }.customer-grid { grid-template-columns:1fr; } }