:root { --green-950:#171a1c; --green-900:#252a2d; --green-700:#805500; --green-100:#fff1bd; --accent:#f4bd18; --cream:#f3f4f2; --ink:#252a2d; --muted:#687074; --line:#d9ddde; --white:#fff; --shadow:0 12px 34px rgba(17,19,20,.14); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font:16px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,select { font:inherit; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.topbar { position:sticky; z-index:10; top:0; height:64px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 max(24px,calc((100vw - 1180px)/2)); background:rgba(23,26,28,.97); border-bottom:2px solid var(--accent); backdrop-filter:blur(12px); }
.brand { display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; letter-spacing:-.02em; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; color:var(--green-950); background:var(--accent); border-radius:9px 9px 9px 3px; box-shadow:inset 0 -3px 0 rgba(0,0,0,.2); }
.brand-mark svg { width:27px; height:27px; fill:currentColor; }
.brand-copy { display:flex; flex-direction:column; line-height:1.05; }
.brand-copy strong { font-size:1.02rem; }
.brand-copy small { margin-top:4px; color:#c5c9cb; font-size:.66rem; font-weight:650; letter-spacing:.015em; }
.total { margin:0; color:#c5c9cb; font-size:.9rem; }
.total strong { color:var(--accent); }
.hero { color:#fff; background:linear-gradient(118deg,#191c1e 0%,#292e31 70%,#1d2022 100%); border-bottom:5px solid var(--accent); overflow:hidden; }
.hero-inner { position:relative; width:min(1180px,calc(100% - 48px)); margin:auto; padding:42px 0 46px; }
.hero-inner::after { content:""; position:absolute; width:360px; height:520px; right:10px; top:-205px; background:repeating-linear-gradient(90deg,transparent 0 38px,rgba(244,189,24,.10) 38px 72px); transform:rotate(24deg); }
.eyebrow { margin:0; color:var(--accent); font-size:.7rem; font-weight:850; letter-spacing:.13em; text-transform:uppercase; }
h1 { max-width:700px; margin:20px 0 0; font:700 clamp(1.7rem,3.2vw,2.65rem)/1.14 Verdana,Geneva,sans-serif; letter-spacing:-.035em; }
.intro { max-width:670px; margin:13px 0 21px; color:#d8dcde; font-size:.94rem; }
.search-wrap { position:relative; display:block; max-width:760px; }
.search-wrap input { width:100%; height:52px; padding:0 22px 0 52px; color:var(--ink); background:#fff; border:2px solid transparent; border-radius:12px; box-shadow:0 10px 28px rgba(0,0,0,.16); outline:none; }
.search-wrap input:focus { border-color:var(--accent); box-shadow:0 0 0 4px rgba(242,183,5,.24),0 10px 28px rgba(0,0,0,.16); }
.search-icon { position:absolute; left:20px; top:10px; z-index:1; color:#7a5300; font-size:1.45rem; }
.catalog { width:min(1180px,calc(100% - 48px)); min-height:500px; margin:0 auto; padding:48px 0 70px; }
.catalog-head { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:28px; }
.catalog h2 { margin:0 0 3px; font:700 2rem/1.15 Georgia,serif; letter-spacing:-.025em; }
#result-count { margin:0; color:var(--muted); font-size:.9rem; }
.filter-trigger { display:flex; align-items:center; gap:9px; min-height:44px; padding:10px 14px; color:#fff; background:var(--green-900); border:1px solid #3e4549; border-radius:10px; box-shadow:inset 0 -3px 0 rgba(244,189,24,.75); font-size:.86rem; font-weight:750; cursor:pointer; }
.filter-trigger:hover { background:#171a1c; }
.filter-trigger svg { width:19px; height:19px; fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; }
.filter-count { display:grid; place-items:center; min-width:21px; height:21px; padding:0 6px; color:var(--green-950); background:var(--accent); border-radius:999px; font-size:.7rem; }
.filter-count[hidden] { display:none; }
.filters-dialog { width:min(720px,calc(100% - 32px)); max-height:calc(100dvh - 40px); margin:auto; padding:0; color:var(--ink); background:transparent; border:0; border-radius:16px; box-shadow:0 24px 70px rgba(0,0,0,.38); overflow:hidden; }
.filters-dialog::backdrop { background:rgba(10,12,13,.68); backdrop-filter:blur(3px); }
.dialog-panel { max-height:calc(100dvh - 40px); overflow:auto; background:var(--cream); }
.dialog-head { position:sticky; z-index:2; top:0; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 20px; color:#fff; background:var(--green-950); border-bottom:4px solid var(--accent); }
.dialog-head h2 { margin:2px 0 0; color:#fff; font:700 1.28rem/1.2 Verdana,Geneva,sans-serif; }
.dialog-eyebrow { margin:0; color:var(--accent); font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.dialog-close { display:grid; place-items:center; flex:none; width:40px; height:40px; padding:0; color:#fff; background:#303639; border:1px solid #4a5155; border-radius:9px; cursor:pointer; }
.dialog-close:hover { color:var(--green-950); background:var(--accent); border-color:var(--accent); }
.dialog-close svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.controls { display:flex; align-items:stretch; justify-content:flex-end; gap:12px; flex:1; }
.filters-dialog .controls { display:grid; grid-template-columns:1fr; gap:14px; padding:20px; }
.control-group { min-width:0; margin:0; padding:10px 12px 12px; background:var(--white); border:1px solid var(--line); border-radius:12px; box-shadow:0 3px 12px rgba(16,47,56,.05); }
.control-group legend { display:flex; align-items:center; gap:6px; padding:0 5px; color:var(--green-900); font-size:.74rem; font-weight:800; letter-spacing:.055em; text-transform:uppercase; }
.control-group legend svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.filter-group { width:100%; max-width:none; }
.sort-group { width:100%; }
.filter-fields { display:grid; grid-template-columns:1.6fr 1fr .8fr; gap:9px; }
.filter-fields label,.sort-label { display:block; min-width:0; color:var(--muted); font-size:.68rem; font-weight:750; letter-spacing:.03em; text-transform:uppercase; }
.filter-fields select,.sort-label select { display:block; width:100%; min-width:0; height:39px; margin-top:4px; padding:0 30px 0 10px; color:var(--ink); background:#f8f9f8; border:1px solid #cdd3d5; border-radius:8px; font-size:.82rem; font-weight:650; text-transform:none; letter-spacing:normal; outline:none; }
.filter-fields select:focus,.sort-label select:focus,button:focus-visible,a:focus-visible { border-color:#b68100; outline:3px solid rgba(244,189,24,.3); outline-offset:1px; }
.dialog-actions { position:sticky; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0; padding:15px 20px; color:var(--ink); background:#fff; border-top:1px solid var(--line); text-align:left; }
.dialog-actions button { min-height:42px; padding:9px 14px; border-radius:9px; font-size:.82rem; font-weight:750; cursor:pointer; }
.clear-filters { color:var(--ink); background:#fff; border:1px solid #cbd1d3; }
.apply-filters { color:var(--green-950); background:var(--accent); border:1px solid #dba500; box-shadow:inset 0 -2px 0 rgba(0,0,0,.16); }
.product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.product-card { min-width:0; overflow:hidden; background:var(--white); border:1px solid var(--line); border-radius:15px; box-shadow:0 2px 4px rgba(23,53,43,.02); transition:transform .18s ease,box-shadow .18s ease; }
.product-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.product-image { aspect-ratio:16/10; background:#e7ece9; overflow:hidden; }
.product-image > a { display:block; width:100%; height:100%; }
.product-image img { width:100%; height:100%; display:block; object-fit:cover; }
.product-body h3 a { color:inherit; text-decoration:none; }
.product-body h3 a:hover { text-decoration:underline; text-underline-offset:3px; }
.image-placeholder { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:#77837e; background:linear-gradient(135deg,#e8eeeb,#dfe7e3); }
.image-placeholder span { font-size:2rem; opacity:.65; }
.product-body { padding:21px; }
.company { margin:0 0 6px; color:var(--green-700); font-size:.72rem; font-weight:800; letter-spacing:.075em; text-transform:uppercase; }
.category { display:inline-block; margin:0 0 10px; padding:4px 8px; color:#292400; background:var(--green-100); border:1px solid #ead584; border-radius:999px; font-size:.68rem; font-weight:750; line-height:1.2; }
.product-card h3 { min-height:2.6em; margin:0 0 11px; font-size:1.12rem; line-height:1.3; letter-spacing:-.015em; }
.address { min-height:2.8em; margin:0 0 17px; color:var(--muted); font-size:.86rem; }
.address span { color:var(--green-700); }
.price-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:16px; border-top:1px solid #edf0ee; }
.price-row p { margin:0; }
.price-row strong { display:block; font-size:1.3rem; line-height:1.15; }
.price-row small { color:var(--muted); }
.vat { flex:none; padding:5px 8px; color:var(--green-700); background:var(--green-100); border-radius:999px; font-size:.7rem; font-weight:700; }
.product-link { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:17px; padding:11px 14px; color:#fff; background:#206b0d; border-radius:8px; box-shadow:inset 0 -2px 0 rgba(231,169,40,.65); font-weight:700; font-size:.88rem; text-decoration:none; }
.product-link:hover { background: #43a72a; }
.product-link-disabled { color:#6f7975; background:#e5e9e7; cursor:not-allowed; }
.notice { margin:0 0 24px; padding:14px 16px; border-radius:9px; }
.notice-error { color:#722d26; background:#fbeae7; border:1px solid #efc8c2; }
.empty-state { padding:70px 24px; text-align:center; color:var(--muted); }
.empty-state span { font-size:2.5rem; }
.empty-state h3 { margin:10px 0 5px; color:var(--ink); }
.empty-state p { margin:0 0 18px; }
.empty-state button { padding:10px 17px; color:#fff; background:var(--green-900); border:0; border-radius:8px; cursor:pointer; }
footer { padding:25px 24px; color:#a9b8b2; background:var(--green-950); text-align:center; font-size:.82rem; }
footer p { margin:0; }
@media (max-width:760px) { .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px) { .topbar { height:62px; padding:0 16px; } .brand-copy small { display:none; } .total { font-size:.72rem; } .total strong { display:block; text-align:right; } .hero-inner,.catalog { width:calc(100% - 32px); } .hero-inner { padding:34px 0 38px; } .intro { font-size:.91rem; } .search-wrap input { height:50px; padding-left:48px; font-size:.92rem; } .search-icon { left:18px; top:9px; } .catalog { padding-top:32px; } .catalog-head { align-items:flex-end; } .catalog h2 { font-size:1.65rem; } .filter-trigger span:not(.filter-count) { display:none; } .filter-trigger { min-width:46px; justify-content:center; padding:9px 11px; } .filters-dialog { width:100%; max-height:92dvh; margin:auto 0 0; border-radius:16px 16px 0 0; } .dialog-panel { max-height:92dvh; } .filter-fields { grid-template-columns:1fr; } .sort-label { max-width:none; } .dialog-actions { padding-bottom:max(15px,env(safe-area-inset-bottom)); } .product-grid { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }