/* monument-opt.ru — дизайн-система «Monumental Heritage» (Stitch). Премиум B2B для памятников. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,500;8..60,600;8..60,700&display=swap');

:root{
  --graphite:#1c1c1c; --ink:#1a1c1c; --muted:#444748; --bronze:#cd7f32; --bronze-d:#b8860b;
  --bg:#f5f5f5; --surface:#ffffff; --surface-2:#f3f3f3; --line:#e2e2e2; --line-2:#d1d1d1;
  --red:#ba1a1a; --shadow:0 8px 24px rgba(0,0,0,.06);
  --serif:"Source Serif 4",Georgia,serif; --sans:"Manrope",-apple-system,"Segoe UI",Arial,sans-serif;
}
*{ box-sizing:border-box; }
body{ margin:0; font-family:var(--sans); color:var(--ink); background:var(--bg); line-height:1.5; font-size:16px; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; letter-spacing:-.01em; }
.container{ max-width:1320px; margin:0 auto; padding:0 32px; }

/* Шапка */
header.top{ background:var(--graphite); color:#fff; position:sticky; top:0; z-index:30; }
header.top .bar{ display:flex; align-items:center; gap:30px; padding:16px 32px; max-width:1320px; margin:0 auto; }
header.top .logo{ font-family:var(--serif); font-size:22px; font-weight:700; white-space:nowrap; letter-spacing:.01em; }
header.top .logo b{ color:var(--bronze); font-weight:700; }
header.top nav{ display:flex; gap:26px; flex:1; flex-wrap:wrap; }
header.top nav a{ font-size:14px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:#d9d9d9; padding:5px 0; border-bottom:2px solid transparent; transition:.15s; }
header.top nav a:hover{ color:#fff; border-color:var(--bronze); }
header.top .cart{ background:var(--bronze); color:#fff; padding:10px 20px; border-radius:4px; font-weight:700; font-size:13px; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; transition:.15s; }
header.top .cart:hover{ background:var(--bronze-d); }
.hsearch{ margin-left:auto; }
.hsearch input{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#fff; padding:9px 14px; border-radius:4px; font-size:13px; width:210px; font-family:var(--sans); }
.hsearch input::placeholder{ color:#9a9a9a; }
.hsearch input:focus{ outline:none; border-color:var(--bronze); background:rgba(255,255,255,.14); width:240px; transition:.15s; }

/* Хлебные крошки */
.crumbs{ background:var(--surface); border-bottom:1px solid var(--line); font-size:13px; color:var(--muted); }
.crumbs .container{ padding-top:12px; padding-bottom:12px; }
.crumbs a{ color:var(--muted); } .crumbs a:hover{ color:var(--bronze); }
.crumbs span{ color:var(--ink); font-weight:600; }
.crumbs i{ color:#bbb; margin:0 8px; font-style:normal; }

main{ padding:36px 0 64px; }
h1{ font-size:36px; margin:4px 0 28px; }

/* Сетка карточек */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:22px; }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:8px; overflow:hidden; transition:.18s; display:flex; flex-direction:column; }
.card:hover{ box-shadow:var(--shadow); border-color:var(--line-2); transform:translateY(-3px); }
.card .imgwrap{ aspect-ratio:1/1; background:var(--bg); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.card .imgwrap img{ width:100%; height:100%; object-fit:cover; }
.card.cat .imgwrap{ background:linear-gradient(140deg,#2f3131,#1c1c1c); color:var(--bronze); font-size:30px; }
.card .t{ padding:14px 16px 6px; font-size:14px; font-weight:600; flex:1; line-height:1.35; }
.card .price{ padding:0 16px 16px; color:var(--graphite); font-weight:800; font-size:18px; }
.card .more{ padding:0 16px 16px; font-size:12px; color:var(--bronze); font-weight:700; letter-spacing:.05em; text-transform:uppercase; }

/* Карточка товара */
.product{ display:grid; grid-template-columns:minmax(300px,500px) 1fr; gap:48px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:40px; }
.product .ph img{ border-radius:8px; border:1px solid var(--line); width:100%; background:var(--bg); }
.product h1{ font-size:30px; margin:0 0 14px; }
.product .art{ color:var(--muted); font-size:13px; letter-spacing:.04em; text-transform:uppercase; margin-bottom:8px; }
.product .price{ color:var(--graphite); font-weight:800; font-size:36px; margin:14px 0 22px; font-family:var(--serif); }
.product table.specs{ border-collapse:collapse; width:100%; margin:18px 0; font-size:14px; }
.product table.specs td{ border-bottom:1px solid var(--line); padding:10px 4px; }
.product table.specs td:first-child{ color:var(--muted); width:42%; text-transform:uppercase; font-size:12px; letter-spacing:.03em; }
.add{ background:var(--graphite); color:#fff; border:none; padding:16px 34px; border-radius:4px; font-size:14px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; cursor:pointer; margin-top:20px; transition:.15s; font-family:var(--sans); }
.add:hover{ background:var(--bronze); }
.add.in{ background:#2e7d32; }

/* Главная — hero */
.hero{ background:linear-gradient(100deg, rgba(20,20,22,.93) 0%, rgba(20,20,22,.72) 48%, rgba(20,20,22,.30) 100%), url('/assets/catalog/hero.jpg') center right/cover; color:#fff; border-radius:12px; padding:78px 56px; margin-bottom:56px; position:relative; overflow:hidden; min-height:440px; display:flex; flex-direction:column; justify-content:center; }
.hero h1{ font-size:46px; line-height:1.1; margin:0 0 16px; max-width:780px; color:#fff; }
.hero p{ font-family:var(--sans); font-size:19px; color:#cfcfcf; max-width:640px; margin:0 0 28px; }
.hero .btns a{ display:inline-block; padding:15px 30px; border-radius:4px; font-weight:700; font-size:14px; letter-spacing:.04em; text-transform:uppercase; margin-right:14px; transition:.15s; }
.hero .btns a:first-child{ background:var(--bronze); color:#fff; } .hero .btns a:first-child:hover{ background:var(--bronze-d); }
.hero .btns a.ghost{ background:transparent; border:1px solid rgba(255,255,255,.45); color:#fff; }
.hero .btns a.ghost:hover{ border-color:var(--bronze); color:var(--bronze); }

.usp{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px; margin:48px 0; }
.usp .u{ background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:26px; }
.usp .u h3{ margin:0 0 9px; font-size:19px; color:var(--graphite); }
.usp .u p{ margin:0; font-size:15px; color:var(--muted); font-family:var(--sans); }
.sec-title{ font-family:var(--serif); font-size:28px; font-weight:600; margin:48px 0 22px; }

/* Инфо-страницы */
.article{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:40px 46px; max-width:880px; }
.article h2{ font-size:23px; margin:26px 0 12px; }
.article p,.article li{ font-family:var(--sans); }
.article ul{ padding-left:20px; } .article li{ margin:7px 0; }
.article a{ color:var(--bronze); font-weight:600; }

/* Заявка */
.zayavka-items,.zform{ background:var(--surface); border:1px solid var(--line); border-radius:10px; }
.zayavka-items{ padding:8px 22px; margin-bottom:22px; }
.zrow{ display:flex; align-items:center; gap:16px; padding:15px 0; border-bottom:1px solid var(--line); }
.zrow:last-child{ border-bottom:none; } .zrow .zn{ flex:1; } .zrow .zn small{ color:var(--muted); }
.zrow input[type=number]{ width:70px; padding:8px; border:1px solid var(--line-2); border-radius:4px; }
.zrow .zdel{ color:var(--red); cursor:pointer; font-size:22px; line-height:1; }
.zform{ padding:30px; max-width:500px; } .zform h3{ margin:0 0 14px; font-size:18px; }
.zform input,.zform textarea{ width:100%; padding:13px; margin:8px 0; border:1px solid var(--line-2); border-radius:4px; font-size:15px; font-family:var(--sans); transition:.15s; }
.zform input:focus,.zform textarea:focus{ outline:none; border-color:var(--bronze); }
.zform button{ background:var(--graphite); color:#fff; border:none; padding:16px; width:100%; border-radius:4px; font-size:14px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; cursor:pointer; transition:.15s; }
.zform button:hover{ background:var(--bronze); }
.empty{ color:var(--muted); padding:40px 0; }

/* Подвал */
footer.bot{ background:var(--graphite); color:#c8c8c8; margin-top:64px; padding:48px 0 28px; font-size:14px; }
footer.bot .cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:30px; }
footer.bot h4{ font-family:var(--serif); color:#fff; margin:0 0 12px; font-size:17px; }
footer.bot a{ color:#c8c8c8; display:block; margin:6px 0; } footer.bot a:hover{ color:var(--bronze); }
footer.bot .copy{ border-top:1px solid #3a3a3a; margin-top:28px; padding-top:18px; color:#888; font-size:13px; }

/* Категория: фильтры + товары */
.cat-layout{ display:grid; grid-template-columns:268px 1fr; gap:32px; align-items:start; }
.cat-side{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:22px; position:sticky; top:88px; }
.cat-side .side-box{ margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.cat-side h4{ margin:0 0 11px; font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.cat-side .side-box a{ display:block; padding:6px 0; font-size:14px; color:var(--ink); font-family:var(--sans); }
.cat-side .side-box a:hover{ color:var(--bronze); }
.filters .f-group{ margin-bottom:16px; }
.filters .f-title{ font-weight:700; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.filters label{ display:block; font-size:14px; padding:4px 0; cursor:pointer; font-family:var(--sans); }
.filters input[type=number]{ width:76px; padding:7px; border:1px solid var(--line-2); border-radius:4px; }
.filters button{ background:var(--graphite); color:#fff; border:none; padding:10px 18px; border-radius:4px; font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; margin-top:10px; }
.filters button:hover{ background:var(--bronze); }
.filters .f-reset{ font-size:13px; color:var(--muted); margin-left:12px; }
.sortbar{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:20px; font-size:14px; color:var(--muted); font-family:var(--sans); }
.sortbar a{ color:var(--ink); } .sortbar a.on{ color:var(--bronze); font-weight:700; }
.sortbar .cnt{ margin-left:auto; color:#999; font-size:13px; }
.pager{ display:flex; gap:7px; flex-wrap:wrap; margin-top:30px; }
.pager a,.pager span{ padding:8px 14px; border:1px solid var(--line); border-radius:4px; background:var(--surface); font-size:14px; font-family:var(--sans); }
.pager a:hover{ border-color:var(--bronze); color:var(--bronze); }
.pager span.on{ background:var(--graphite); color:#fff; border-color:var(--graphite); }

@media(max-width:880px){ .cat-layout{ grid-template-columns:1fr; } .cat-side{ position:static; } .product{ grid-template-columns:1fr; gap:28px; } }
@media(max-width:680px){ .container{ padding:0 18px; } header.top .bar{ flex-wrap:wrap; gap:14px; padding:14px 18px; } .hero{ padding:38px 26px; } .hero h1{ font-size:30px; } h1{ font-size:27px; } }