:root {
    --bg: #f4f1ea;          /* тёплый галерейный off-white */
    --bg-card: #fbfaf6;
    --ink: #22201c;         /* почти чёрный, тёплый */
    --ink-soft: #6b665e;
    --line: #e3ddd1;
    --accent: #8a6d4b;      /* приглушённая охра/бронза */
    --max: 1200px;
    /*
    --font-body: 'Manrope', system-ui, sans-serif;
    --font-head: 'Cormorant Garamond', serif;

    Варианты — раскомментируй нужную пару и закомментируй строки выше:
    --font-body: 'Inter', system-ui, sans-serif;
    --font-head: 'Inter', system-ui, sans-serif;

    --font-body: 'Golos Text', system-ui, sans-serif;
    --font-head: 'Golos Text', system-ui, sans-serif;*/
/*
    --font-body: 'Manrope', system-ui, sans-serif;
    --font-head: 'Unbounded', system-ui, sans-serif;
  */
    --font-body: 'Onest', system-ui, sans-serif;
    --font-head: 'Onest', system-ui, sans-serif;


}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-weight: 300;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* Header */
.site-header {
    position: sticky; top: 0; z-index: 20;
    background: rgba(244,241,234,.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { font-family: var(--font-head); font-size: 24px; font-weight: 600; letter-spacing: .5px; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a {
    font-size: 15px;
    color: var(--ink-soft);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 8px 18px;
    transition: color .2s, background .2s, border-color .2s;
}
.nav a:hover {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--bg);
}


/* Hero */
.hero { padding: 80px 0 56px; text-align: center; }
.hero-title {
    font-family: var(--font-head);
    font-weight: 500; font-size: clamp(34px, 6vw, 60px);
    line-height: 1.1; margin: 0 0 16px;
}
.hero-sub { color: var(--ink-soft); font-size: clamp(15px, 2.5vw, 19px); margin: 0 auto; max-width: 640px; }

/* Filters */
.filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 0 48px; }
.filter {
    font-size: 14px; color: var(--ink-soft);
    padding: 8px 18px; border: 1px solid var(--line); border-radius: 999px;
    transition: all .2s; background: transparent;
}
.filter:hover { border-color: var(--ink); color: var(--ink); }
.filter.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* Grid */
.grid {
    display: grid; gap: 40px 32px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    padding-bottom: 96px;
}
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.card { display: block; transition: transform .3s ease; }
.card:hover { transform: translateY(-4px); }
.card-img { position: relative; overflow: hidden; background: var(--bg-card); border: 1px solid var(--line); }
.card-img img { width: 100%; height: 340px; object-fit: cover; transition: transform .6s ease; }
.card:hover .card-img img { transform: scale(1.04); }
.badge {
    position: absolute; top: 12px; left: 12px;
    background: var(--ink); color: var(--bg);
    font-size: 12px; letter-spacing: .5px; padding: 5px 12px; border-radius: 999px;
}
.card-body { padding: 16px 4px 0; }
.card-title { font-family: var(--font-head); font-size: 22px; font-weight: 500; margin: 0 0 4px; }
.card-meta { color: var(--ink-soft); font-size: 14px; margin: 0 0 6px; }
.card-price { font-size: 15px; color: var(--accent); margin: 0; }

.empty { text-align: center; color: var(--ink-soft); padding: 60px 0 120px; }

/* Detail */
.detail { padding: 32px 0 96px; }
.back { color: var(--ink-soft); font-size: 14px; display: inline-block; margin-bottom: 28px; }
.back:hover { color: var(--ink); }
.detail-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: start; }
.detail-media {
    position: relative; overflow: hidden; cursor: zoom-in;
    background: var(--bg-card); border: 1px solid var(--line);
}
.detail-media img { width: 100%; transition: transform .1s ease-out; }

.detail-title { font-family: var(--font-head); font-weight: 500; font-size: clamp(28px,4vw,42px); margin: 0 0 8px; }
.detail-meta { color: var(--ink-soft); margin: 0 0 28px; }
.specs { display: grid; grid-template-columns: auto 1fr; gap: 8px 24px; margin: 0 0 28px; }
.specs dt { color: var(--ink-soft); font-size: 14px; }
.specs dd { margin: 0; font-size: 15px; }
.specs-head { font-weight: 600; }
.detail-desc { color: var(--ink); margin-bottom: 32px; }
.detail-buy { border-top: 1px solid var(--line); padding-top: 24px; }
.detail-price { display: block; font-size: 22px; color: var(--accent); margin-bottom: 16px; }
.btn-buy {
    display: inline-block; background: var(--ink); color: var(--bg);
    padding: 14px 28px; border-radius: 999px; font-size: 15px; transition: opacity .2s;
}
.btn-buy:hover { opacity: .85; }

.related { margin-top: 96px; }
.related-title { font-family: var(--font-head); font-weight: 500; font-size: 28px; margin: 0 0 28px; }

/* Static page */
.page { padding: 48px 0 96px; max-width: 760px; }
.page-title { font-family: var(--font-head); font-weight: 500; font-size: clamp(30px,5vw,46px); margin: 0 0 24px; }
.page-content { font-size: 17px; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 32px 0; margin-top: auto; }
.footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--ink-soft); font-size: 14px; }
.footer-contacts { display: flex; gap: 20px; }
.footer-contacts a:hover { color: var(--ink); }

/* Mobile */
@media (max-width: 860px) {
    .detail-grid { grid-template-columns: 1fr; gap: 28px; }
    .detail-media { cursor: default; }  /* зум на тач-экранах не нужен */
}
@media (max-width: 560px) {
    .header-inner { height: 60px; }
    .nav { gap: 16px; }
    .nav a { padding: 6px 12px; font-size: 14px; }  /* на узких экранах компактнее */
    .logo { font-size: 20px; }
    .hero { padding: 48px 0 36px; }
    .card-img img { height: 260px; }
}
/* Второй ряд фильтров (техника) */
.filters-sub { margin-top: -32px; margin-bottom: 40px; }
.filter-sm { font-size: 13px; padding: 6px 14px; opacity: .9; }

/* Теги в карточке */
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.tag { font-size: 13px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); }
.tag:hover { border-color: var(--ink); color: var(--ink); }
.tag-style { border-style: dashed; }

.comment-note { font-size: 14px; color: var(--ink-soft); font-style: italic; margin: 16px 0 0; }
/* Разделы (верхние вкладки) */
.sections { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 8px 0 28px; border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.section-tab { font-family: var(--font-head); font-size: 20px; padding: 8px 22px; border-radius: 999px; color: var(--ink-soft); transition: all .2s; }
.section-tab:hover { color: var(--ink); }
.section-tab.is-active { background: var(--ink); color: var(--bg); }

.filters-sub { margin-top: -32px; margin-bottom: 40px; }
.filter-sm { font-size: 13px; padding: 6px 14px; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.tag { font-size: 13px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); }
.tag:hover { border-color: var(--ink); color: var(--ink); }
.tag-style { border-style: dashed; }

.extra-item video { width: 100%; height: 220px; object-fit: cover; background: #000; border: 1px solid var(--line); }

#lightbox{
    position:fixed;inset:0;z-index:9999;
    display:none;align-items:center;justify-content:center;
    background:rgba(0,0,0,.85);cursor:zoom-out;padding:20px;
}
#lightbox.open{display:flex;}
#lightbox img{
    max-width:95vw;max-height:95vh;
    box-shadow:0 4px 40px rgba(0,0,0,.5);border-radius:4px;
}
#lightbox video{
    max-width:95vw;max-height:95vh;
    box-shadow:0 4px 40px rgba(0,0,0,.5);border-radius:4px;
}