/* =====================================================================
M1LOY — дизайн-система «AURUM»: золото на теплому чорному (17.09.2026)
Один файл на весь сайт: токени, базова типографіка, сітка, компоненти,
внутрішні сторінки, системні сторінки рушія (кабінет, форми, коментарі).
Головна має ДОДАТКОВИЙ файл m1-home.css — тільки її секції.
Правила, за якими це написано:
• колір у системі означає СТАН або ЗОЛОТО бренду, а не «щоб було красиво»;
• жодного inline style= у шаблонах (CSP style-src 'self' вирізає їх мовчки);
• анімації ввімкнені завжди (рішення власника 17.09.2026);
• контейнер один (--wrap), сітки — авто-адаптивні, без магічних відступів.
===================================================================== */
/* --------------------------------------------------------------- шрифти */
@font-face{font-family:'Unbounded';font-style:normal;font-weight:200 900;font-display:swap;
src:url(../fonts3/unbounded-cyrillic-wght-normal.woff2) format('woff2');
unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
/* 2026-09-18: знак гривні U+20B4 потрапляв у ДВА підмножини одразу —
у кириличне-розширене (там він названий окремо) і в латинське-розширене
(діапазон валют U+20AD-20C0). За правилами CSS при збігу перемагає
ОСТАННЄ оголошення, а воно латинське: браузер тягнув 116 КБ Unbounded і
28 КБ Onest заради одного символу «₴». Діапазон валют розрізано так, щоб
U+20B4 лишився тільки в кириличному. У Playfair кириличного-розширеного
немає, тому його діапазон НЕ чіпаємо: інакше «₴» лишився б без гарнітури. */
@font-face{font-family:'Unbounded';font-style:normal;font-weight:200 900;font-display:swap;
src:url(../fonts3/unbounded-cyrillic-ext-wght-normal.woff2) format('woff2');
unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:200 900;font-display:swap;
src:url(../fonts3/unbounded-latin-wght-normal.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:200 900;font-display:swap;
src:url(../fonts3/unbounded-latin-ext-wght-normal.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20B3,U+20B5-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;
src:url(../fonts3/onest-cyrillic-wght-normal.woff2) format('woff2');
unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;
src:url(../fonts3/onest-cyrillic-ext-wght-normal.woff2) format('woff2');
unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;
src:url(../fonts3/onest-latin-wght-normal.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;
src:url(../fonts3/onest-latin-ext-wght-normal.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20B3,U+20B5-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 800;font-display:swap;
src:url(../fonts3/playfair-display-cyrillic-wght-italic.woff2) format('woff2');
unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 800;font-display:swap;
src:url(../fonts3/playfair-display-latin-wght-italic.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 800;font-display:swap;
src:url(../fonts3/playfair-display-latin-ext-wght-italic.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* --------------------------------------------------------------- токени */
:root{
/* база — «глибокий оніксовий бархат»: тепла ніч, а не синя й не сіра */
--bg:#0a0805;
--bg-2:#100c07;
--bg-3:#17120a;
--surface:rgba(255,232,190,.05);
--surface-2:rgba(255,232,190,.085);
--surface-solid:#17120b;
--line:rgba(232,200,121,.14);
--line-2:rgba(232,200,121,.30);
--ink:#f7f1e3;
--ink-2:#d3c5a6;
--mut:#9c8e73;
--ink-on-accent:#1d1602;
/* метали бренду — золото у трьох станах світла */
--gold:#e8c879; /* основне золото */
--gold-lt:#f6e6bd; /* відблиск */
--gold-dp:#c09239; /* глибоке золото */
--champagne:#f4dcae;
--brass:#c9973c;
--copper:#b77b3a;
--bronze:#9a7a2e;
/* сумісність зі старими іменами: усе лишається в межах золотої гами */
--amber:#f0c46b;
--ruby:#c9803f;
--magenta:#e8c879;
--violet:#c9973c;
--azure:#a8802f;
--aqua:#f0dcb0;
--mint:#8dbf63;
/* стани (і тільки стани) */
--ok:#8dbf63;
--warn:#e8b354;
--bad:#e2564a;
/* металевий градієнт: світло ковзає по золоту, а не веселка */
--grad:linear-gradient(100deg,#b7873a 0%,#e8c879 22%,#faeecc 44%,#d9ae54 62%,#a97f2c 82%,#f0d693 100%);
--grad-soft:linear-gradient(120deg,rgba(232,200,121,.20),rgba(250,238,204,.16) 40%,rgba(183,123,58,.16) 72%,rgba(232,200,121,.20));
--grad-line:linear-gradient(90deg,transparent,rgba(232,200,121,.35) 18%,rgba(246,230,189,.7) 50%,rgba(232,200,121,.35) 82%,transparent);
--wrap:1240px;
--wrap-narrow:820px;
--wrap-wide:1560px;
--gut:clamp(16px,4vw,32px);
--r-xs:10px; --r-sm:14px; --r-md:20px; --r-lg:28px; --r-xl:38px; --r-pill:999px;
--sh-1:0 2px 10px rgba(8,5,2,.45);
--sh-2:0 18px 50px -24px rgba(6,4,1,.9);
--sh-3:0 40px 90px -40px rgba(6,4,1,1);
--glow:0 14px 44px -16px rgba(232,200,121,.45);
--t-display:clamp(42px,7.4vw,112px);
--t-h1:clamp(32px,4.8vw,64px);
--t-h2:clamp(26px,3.5vw,46px);
--t-h3:clamp(19px,2vw,26px);
--t-lead:clamp(16px,1.25vw,20px);
--ease:cubic-bezier(.22,.8,.28,1);
--fast:.18s var(--ease);
--slow:.55s var(--ease);
--hdr-h:74px;
--tabbar-h:66px;
color-scheme:dark;
}
/* Світлий «паперовий» тон: секція перевизначає токени, і всі компоненти
всередині перефарбовуються самі — другої копії правил немає. */
[data-tone="paper"]{
--bg:#f7f2e7;
--bg-2:#f1e9da;
--bg-3:#e8dec9;
--surface:rgba(32,22,6,.045);
--surface-2:rgba(32,22,6,.075);
--surface-solid:#fffdf7;
--line:rgba(32,22,6,.13);
--line-2:rgba(32,22,6,.24);
--ink:#1c1509;
--ink-2:#584a30;
--mut:#6f6248; /* 5,35:1 на паперовому тлі; #7d6f57 давав 4,39 */
--gold-lt:#8a6a24;
/* на світлому тлі золото має бути ГЛИБОКИМ: металевий градієнт зі світлими
стопами на слонової кістки просто зникає (перевірено на секції «Ціни») */
--grad:linear-gradient(100deg,#6f5319 0%,#8a6a24 26%,#7a5c1e 52%,#8f6d26 78%,#6f5319 100%);
--grad-soft:linear-gradient(120deg,rgba(184,137,47,.16),rgba(122,92,30,.12) 50%,rgba(184,137,47,.16));
--grad-line:linear-gradient(90deg,transparent,rgba(122,92,30,.35) 20%,rgba(160,120,40,.55) 50%,rgba(122,92,30,.35) 80%,transparent);
--glow:0 14px 40px -18px rgba(122,92,30,.45);
--sh-2:0 18px 50px -28px rgba(60,42,14,.42);
--sh-3:0 40px 80px -40px rgba(60,42,14,.5);
color-scheme:light;
}
/* ----------------------------------------------------------------- база */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
/* місце під смугу прокрутки зарезервоване завжди: коли меню або шухляда
мудборду заморожують сторінку, вміст не стрибає вбік на її ширину */
scrollbar-gutter:stable}
body{
margin:0;background:var(--bg);color:var(--ink);
font:400 16.5px/1.65 'Onest',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
font-feature-settings:"ss01" 1,"cv01" 1;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
overflow-x:clip; /* clip, а не hidden: hidden ламає position:sticky */
}
body::before{ /* тепле золоте свічення тла — рівно стільки, щоб чорний не був пласким */
content:"";position:fixed;inset:-20vh -10vw;z-index:-2;pointer-events:none;
background:
radial-gradient(52vw 44vw at 14% 4%,rgba(232,200,121,.10),transparent 60%),
radial-gradient(46vw 40vw at 92% 18%,rgba(183,123,58,.09),transparent 62%),
radial-gradient(60vw 50vw at 60% 96%,rgba(201,151,60,.07),transparent 66%);
filter:blur(20px);
}
body::after{ /* плівкове зерно: робить градієнти «дорогими», прибирає банди */
content:"";position:fixed;inset:0;z-index:2000;pointer-events:none;opacity:.05;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
mix-blend-mode:overlay;
}
img,svg,video,canvas{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
::selection{background:rgba(232,200,121,.88);color:#1d1602}
:focus-visible{outline:2px solid var(--aqua);outline-offset:3px;border-radius:6px}
fieldset{border:0;margin:0;padding:0;min-width:0}
hr{border:0;height:1px;background:var(--grad-line);margin:38px 0}
/* акуратний скролбар — деталь, яку помічають */
*{scrollbar-width:thin;scrollbar-color:rgba(232,200,121,.28) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(232,200,121,.26);border-radius:999px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(232,200,121,.42);background-clip:content-box}
.skip-link{position:fixed;left:14px;top:-100px;z-index:3000;padding:12px 18px;border-radius:var(--r-sm);
background:var(--grad);color:var(--ink-on-accent);font-weight:700;transition:top var(--fast)}
.skip-link:focus{top:14px}
.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}
/* ------------------------------------------------------------ типографіка */
h1,h2,h3,h4,h5{font-family:'Unbounded',system-ui,sans-serif;font-weight:600;letter-spacing:-.03em;line-height:1.06;margin:0}
h4,h5{letter-spacing:-.015em;line-height:1.25}
p{margin:0 0 1em}
.m-display{font-family:'Unbounded',sans-serif;font-size:var(--t-display);font-weight:600;letter-spacing:-.045em;line-height:.95}
.m-h1{font-size:var(--t-h1)}
.m-h2{font-size:var(--t-h2)}
.m-h3{font-size:var(--t-h3);font-weight:600}
.m-lead{font-size:var(--t-lead);color:var(--ink-2);line-height:1.6;max-width:62ch}
.m-small{font-size:13.5px;color:var(--mut)}
.m-serif{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500;letter-spacing:-.015em}
.m-grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
/* Playfair-курсив звисає праворуч — без padding останній гліф зрізається */
padding-right:.06em}
.m-kicker{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.18em;
text-transform:uppercase;color:var(--ink-2)}
.m-kicker::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--grad)}
.m-kicker--plain::before{display:none}
/* ---------------------------------------------------------------- сітка */
.m-wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.m-wrap--narrow{max-width:var(--wrap-narrow)}
.m-wrap--wide{max-width:var(--wrap-wide)}
.m-sec{position:relative;padding:clamp(56px,8vw,120px) 0}
.m-sec--tight{padding:clamp(36px,5vw,72px) 0}
.m-sec[data-tone="paper"]{background:var(--bg);color:var(--ink)}
.m-sec[data-tone="paper"]::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:radial-gradient(60% 50% at 80% 0%,rgba(201,151,60,.10),transparent 70%)}
.m-sec[data-tone="paper"]>*{position:relative;z-index:1}
.m-sec-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(16px,3vw,48px);
align-items:end;margin-bottom:clamp(26px,3.6vw,52px)}
.m-sec-head p{margin:0;color:var(--ink-2);font-size:16px}
.m-sec-head h2{margin-top:14px}
@media (max-width:860px){.m-sec-head{grid-template-columns:1fr;align-items:start;gap:14px}}
.m-grid>*,.m-feed>*,.m-story>*,.m-land>*,.m-split>*,.m-cab>*,.m-auth>*{min-width:0}
.m-grid{display:grid;gap:clamp(14px,1.6vw,22px)}
.m-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.m-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.m-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.m-grid--3,.m-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.m-grid--2,.m-grid--3,.m-grid--4{grid-template-columns:1fr}}
.m-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.m-divider{height:1px;background:var(--grad-line);margin:clamp(30px,5vw,60px) 0}
/* --------------------------------------------------------------- кнопки */
.m-btn{
--btn-bg:var(--surface);--btn-ink:var(--ink);--btn-line:var(--line-2);
position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
padding:14px 24px;border-radius:var(--r-pill);border:1px solid var(--btn-line);
background:var(--btn-bg);color:var(--btn-ink);font-weight:600;font-size:15px;line-height:1;
letter-spacing:-.01em;cursor:pointer;overflow:hidden;isolation:isolate;
transition:transform var(--fast),border-color var(--fast),background var(--fast),box-shadow var(--fast),color var(--fast);
-webkit-tap-highlight-color:transparent;
}
.m-btn:hover{transform:translateY(-2px);border-color:var(--line-2)}
.m-btn:active{transform:translateY(0) scale(.985)}
.m-btn svg{width:18px;height:18px;flex:none}
.m-btn--prime{--btn-ink:var(--ink-on-accent);--btn-line:transparent;background:var(--grad);
background-size:180% 100%;background-position:0% 50%;font-weight:700;box-shadow:var(--glow)}
.m-btn--prime:hover{background-position:100% 50%;box-shadow:0 18px 50px -12px rgba(232,200,121,.6)}
.m-btn--prime::after{ /* пробіг світла по кнопці */
content:"";position:absolute;inset:0;z-index:-1;transform:translateX(-120%);
background:linear-gradient(100deg,transparent,rgba(255,246,227,.55),transparent);transition:transform .7s var(--ease)}
.m-btn--prime:hover::after{transform:translateX(120%)}
.m-btn--ghost{background:transparent}
.m-btn--ghost:hover{background:var(--surface);border-color:var(--line-2)}
.m-btn--glass{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:var(--surface-2)}
.m-btn--lg{padding:18px 30px;font-size:16.5px}
.m-btn--sm{padding:10px 16px;font-size:13.5px}
.m-btn--block{width:100%}
.m-btn[disabled]{opacity:.5;pointer-events:none}
.m-btn--icon{padding:0;width:44px;height:44px;border-radius:50%}
.m-btn-note{font-size:13px;color:var(--mut);margin:12px 0 0}
.m-link{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--ink);
border-bottom:1px solid var(--line-2);padding-bottom:2px;transition:color var(--fast),border-color var(--fast)}
.m-link:hover{color:var(--aqua);border-color:var(--aqua)}
.m-link svg{width:16px;height:16px;transition:transform var(--fast)}
.m-link:hover svg{transform:translateX(4px)}
/* ----------------------------------------------------- бейджі та таблетки */
.m-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:var(--r-pill);
border:1px solid var(--line);background:var(--surface);font-size:12.5px;font-weight:600;color:var(--ink-2)}
.m-pill--glass{background:rgba(10,8,5,.45);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:rgba(255,246,227,.16);color:#fff}
.m-pill--accent{border-color:transparent;background:var(--grad-soft);color:var(--ink)}
.m-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(141,191,99,.6);
animation:m-pulse 2.4s infinite}
@keyframes m-pulse{70%{box-shadow:0 0 0 9px rgba(141,191,99,0)}100%{box-shadow:0 0 0 0 rgba(141,191,99,0)}}
.m-dot--off{background:var(--mut);animation:none}
.m-tag{display:inline-flex;padding:5px 11px;border-radius:var(--r-pill);background:var(--surface);
border:1px solid var(--line);font-size:12px;color:var(--ink-2)}
/* --------------------------------------------------------------- картки */
.m-card{position:relative;border-radius:var(--r-lg);border:1px solid var(--line);
background:linear-gradient(165deg,rgba(255,246,227,.06),rgba(255,246,227,.015));
box-shadow:var(--sh-2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
padding:clamp(20px,2.4vw,32px);transition:transform var(--slow),border-color var(--slow),box-shadow var(--slow)}
[data-tone="paper"] .m-card{background:linear-gradient(165deg,#fffdf9,rgba(255,246,227,.6))}
.m-card--hover:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:var(--sh-3)}
.m-card--flush{padding:0;overflow:hidden}
.m-card__glow{position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;
background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
padding:1px;transition:opacity var(--slow)}
.m-card--hover:hover .m-card__glow{opacity:.75}
/* фото-плитка портфоліо */
.m-tile{position:relative;display:block;overflow:hidden;border-radius:var(--r-md);background:var(--bg-3);
border:1px solid var(--line);aspect-ratio:1;isolation:isolate}
.m-tile img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),filter .5s var(--ease)}
.m-tile:hover img{transform:scale(1.07)}
.m-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(9,6,3,.88));
opacity:.55;transition:opacity var(--slow)}
.m-tile:hover::after{opacity:.92}
.m-tile__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 18px;display:flex;
flex-direction:column;gap:6px;transform:translateY(8px);opacity:0;transition:transform var(--slow),opacity var(--slow)}
.m-tile:hover .m-tile__cap,.m-tile:focus-visible .m-tile__cap{transform:none;opacity:1}
/* 2026-09-18: підпис плитки показувався ТІЛЬКИ на :hover, а на сенсорному екрані
наведення не буває — назва зйомки й дата не читалися на жодній мобільній ширині.
Там, де наведення немає, підпис стоїть завжди; заголовок обрізаємо двома рядками,
інакше довга назва (Porsche Taycan, багаторівневий паркінг) на 320 px вилазила
за нижній край плитки на 14 px. */
@media (hover:none){.m-tile__cap{transform:none;opacity:1}}
.m-tile__cap b{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.m-tile__cap b{font-family:'Unbounded',sans-serif;font-size:14.5px;font-weight:600;line-height:1.3;color:#fff}
.m-tile__cap span{font-size:12px;color:rgba(255,255,255,.72)}
.m-tile__badge{position:absolute;z-index:3;top:12px;left:12px;padding:5px 11px;border-radius:var(--r-pill);
background:rgba(10,8,5,.6);backdrop-filter:blur(8px);font-size:11.5px;font-weight:600;color:#fff;border:1px solid rgba(255,246,227,.16)}
.m-tile--wide{aspect-ratio:16/10}
.m-tile--tall{aspect-ratio:3/4}
/* картка матеріалу (фотосет / стаття / студія) */
.m-post{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-lg);
border:1px solid var(--line);background:linear-gradient(170deg,rgba(255,246,227,.055),rgba(255,246,227,.012));
box-shadow:var(--sh-2);transition:transform var(--slow),border-color var(--slow),box-shadow var(--slow)}
.m-post:hover{transform:translateY(-5px);border-color:var(--line-2);box-shadow:var(--sh-3)}
.m-post__ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-3)}
.m-post__ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.m-post:hover .m-post__ph img{transform:scale(1.06)}
.m-post__body{display:flex;flex-direction:column;gap:9px;padding:18px 20px 22px;flex:1}
.m-post__body h3{font-size:18px;line-height:1.28;letter-spacing:-.02em}
.m-post__body p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.55;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.m-post__more{margin-top:auto;padding-top:10px;font-size:13.5px;font-weight:600;color:var(--aqua);
display:inline-flex;align-items:center;gap:6px}
.m-post__more::after{content:"→";transition:transform var(--fast)}
.m-post:hover .m-post__more::after{transform:translateX(4px)}
.m-post__meta{position:absolute;left:12px;top:12px;z-index:2;display:flex;gap:6px;flex-wrap:wrap}
.m-post__count{position:absolute;right:12px;bottom:12px;z-index:2;padding:5px 11px;border-radius:var(--r-pill);
background:rgba(10,8,5,.66);backdrop-filter:blur(8px);font-size:11.5px;font-weight:600;color:#fff}
/* ---------------------------------------------------------------- форми */
.m-field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;position:relative}
.m-field>label,.m-label{font-size:13px;font-weight:600;color:var(--ink-2);letter-spacing:.01em}
.m-input,.m-field input:not([type=checkbox]):not([type=radio]),.m-field textarea,.m-field select{
width:100%;padding:14px 16px;border-radius:var(--r-sm);border:1px solid var(--line-2);
background:rgba(10,8,5,.42);color:var(--ink);font-size:15.5px;transition:border-color var(--fast),box-shadow var(--fast),background var(--fast)}
[data-tone="paper"] .m-input,[data-tone="paper"] .m-field input,[data-tone="paper"] .m-field textarea,[data-tone="paper"] .m-field select{background:#fff}
.m-field textarea{min-height:96px;resize:vertical;line-height:1.55}
.m-field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d86a8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:44px}
.m-input:focus,.m-field input:focus,.m-field textarea:focus,.m-field select:focus{
outline:none;border-color:var(--violet);box-shadow:0 0 0 4px rgba(201,151,60,.18);background:rgba(10,8,5,.6)}
.m-field input::placeholder,.m-field textarea::placeholder{color:var(--mut)}
.m-field--error input,.m-field--error textarea,.m-field--error select{border-color:var(--bad);box-shadow:0 0 0 4px rgba(226,86,74,.16)}
.m-field__err{font-size:12.5px;color:var(--bad);min-height:0}
.m-field--ok input{border-color:rgba(141,191,99,.55)}
.m-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.m-row2{grid-template-columns:1fr}}
.m-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.m-fineprint{font-size:12.5px;color:var(--mut);line-height:1.5;margin:12px 0 0}
.m-fineprint a{color:var(--ink-2);border-bottom:1px solid var(--line-2)}
.m-check{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--ink-2);cursor:pointer}
.m-check input{width:19px;height:19px;accent-color:var(--violet);margin:2px 0 0;flex:none}
/* зірковий рейтинг */
.m-stars{display:inline-flex;gap:5px}
.m-stars button{font-size:27px;line-height:1;color:var(--line-2);padding:2px;transition:color var(--fast),transform var(--fast)}
.m-stars button.is-on{color:var(--amber)}
.m-stars button:hover{transform:scale(1.14)}
.m-stars--static{color:var(--amber);font-size:15px;letter-spacing:2px}
/* ------------------------------------------------------- стани й нотатки */
.m-note{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-sm);
border:1px solid var(--line);background:var(--surface);font-size:14.5px;color:var(--ink-2)}
.m-note svg{width:19px;height:19px;flex:none;color:var(--aqua);margin-top:2px}
.m-note--bad{border-color:rgba(226,86,74,.4);background:rgba(226,86,74,.08);color:#f3cfb0}
.m-note--bad svg{color:var(--bad)}
.m-note--ok{border-color:rgba(141,191,99,.4);background:rgba(141,191,99,.08)}
.m-empty{text-align:center;padding:clamp(40px,7vw,80px) 24px;border:1px dashed var(--line-2);
border-radius:var(--r-lg);color:var(--ink-2);background:var(--surface)}
.m-empty h3{margin-bottom:10px}
/* ------------------------------------------------------------- шапка */
.m-hdr{position:fixed;top:0;left:0;right:0;z-index:900;height:var(--hdr-h);display:flex;align-items:center;
transition:background var(--slow),border-color var(--slow),backdrop-filter var(--slow),height var(--slow);
border-bottom:1px solid transparent}
.m-hdr.is-stuck{background:rgba(10,8,5,.72);backdrop-filter:blur(18px) saturate(140%);
-webkit-backdrop-filter:blur(18px) saturate(140%);border-bottom-color:var(--line);height:64px}
.m-hdr__in{display:flex;align-items:center;gap:clamp(12px,2vw,28px);width:100%}
.m-logo{display:inline-flex;align-items:center;gap:11px;font-family:'Unbounded',sans-serif;font-weight:600;
font-size:16px;letter-spacing:-.02em;white-space:nowrap}
.m-logo__mark{width:34px;height:34px;flex:none}
.m-logo b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.m-nav{display:flex;align-items:center;gap:4px;margin-inline:auto}
.m-nav a{position:relative;padding:9px 13px;border-radius:var(--r-pill);font-size:14.5px;font-weight:500;
color:var(--ink-2);transition:color var(--fast),background var(--fast)}
.m-nav a:hover{color:var(--ink);background:var(--surface)}
.m-nav a.is-active{color:var(--ink)}
.m-nav a.is-active::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;border-radius:2px;background:var(--grad)}
.m-hdr__act{display:flex;align-items:center;gap:8px}
.m-iconbtn{position:relative;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
transition:color var(--fast),border-color var(--fast),background var(--fast),transform var(--fast)}
.m-iconbtn:hover{color:var(--ink);border-color:var(--line-2);transform:translateY(-2px)}
.m-iconbtn svg{width:19px;height:19px}
.m-iconbtn__n{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;border-radius:var(--r-pill);
background:var(--grad);color:var(--ink-on-accent);font-size:11px;font-weight:800;display:none;place-items:center;line-height:19px}
.m-iconbtn.has-n .m-iconbtn__n{display:grid}
.m-burger{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--surface);
place-items:center}
.m-burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform var(--fast),opacity var(--fast)}
.m-burger span+span{margin-top:4px}
body.m-menu-open .m-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.m-menu-open .m-burger span:nth-child(2){opacity:0}
body.m-menu-open .m-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1100px){
.m-nav{display:none}
.m-burger{display:grid}
.m-hdr__act .m-btn--hdr{display:none}
}
.m-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:950;background:var(--grad);
box-shadow:0 0 12px rgba(232,200,121,.7)}
/* мобільне меню на весь екран */
.m-menu{position:fixed;inset:0;z-index:899;display:flex;flex-direction:column;justify-content:center;
gap:6px;padding:calc(var(--hdr-h) + 20px) var(--gut) calc(var(--tabbar-h) + 28px);
background:rgba(10,8,5,.96);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
opacity:0;visibility:hidden;transition:opacity var(--slow),visibility var(--slow);overflow-y:auto}
body.m-menu-open .m-menu{opacity:1;visibility:visible}
.m-menu>a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 6px;
border-bottom:1px solid var(--line);font-family:'Unbounded',sans-serif;font-size:clamp(22px,6vw,34px);
font-weight:600;letter-spacing:-.03em;opacity:0;transform:translateY(18px)}
body.m-menu-open .m-menu>a{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.m-menu>a span{font-size:12px;font-family:'Onest',sans-serif;font-weight:500;color:var(--mut);letter-spacing:0}
.m-menu__foot{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px}
/* ----------------------------------------------------- нижня панель (моб) */
.m-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:905;display:none;
grid-template-columns:repeat(5,1fr);align-items:center;height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
padding-bottom:env(safe-area-inset-bottom);
background:rgba(10,8,5,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--line)}
.m-tabbar a{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10.5px;color:var(--mut);position:relative}
.m-tabbar a svg{width:21px;height:21px}
.m-tabbar a.is-active{color:var(--ink)}
.m-tabbar a.is-cta{color:var(--ink)}
.m-tabbar a.is-cta svg{color:var(--ink-on-accent);background:var(--grad);border-radius:50%;padding:6px;width:34px;height:34px;
box-shadow:var(--glow);margin-top:-14px}
.m-tabbar__n{position:absolute;top:-2px;right:calc(50% - 20px);min-width:16px;height:16px;padding:0 4px;
border-radius:var(--r-pill);background:var(--grad);color:var(--ink-on-accent);font-size:10px;font-weight:800;
line-height:16px;text-align:center;display:none}
.m-tabbar a.has-n .m-tabbar__n{display:block}
@media (max-width:760px){
.m-tabbar{display:grid}
body{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}
}
/* ------------------------------------------------------------- підвал */
.foot{position:relative;margin-top:clamp(60px,8vw,110px);padding:clamp(48px,6vw,84px) 0 30px;
border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,rgba(201,151,60,.07))}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,44px)}
@media (max-width:980px){.foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.foot__grid{grid-template-columns:1fr}}
.foot h4{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:14px;font-weight:700}
.foot nav{display:flex;flex-direction:column;gap:9px}
.foot nav a{font-size:14.5px;color:var(--ink-2);transition:color var(--fast)}
.foot nav a:hover{color:var(--aqua)}
.foot__about p{font-size:14.5px;color:var(--ink-2);max-width:38ch}
.foot__soc{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.foot__soc a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);
background:var(--surface);color:var(--ink-2);transition:transform var(--fast),color var(--fast),border-color var(--fast)}
.foot__soc a:hover{transform:translateY(-3px);color:var(--ink);border-color:var(--line-2)}
.foot__soc svg{width:18px;height:18px}
.foot__bottom{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between;
margin-top:clamp(32px,4vw,54px);padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:var(--mut)}
.foot__bottom a{color:var(--ink-2);border-bottom:1px solid var(--line-2)}
.foot__bottom a:hover{color:var(--aqua)}
/* -------------------------------------------------- плаваючі елементи */
.m-fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:880;display:flex;
flex-direction:column;gap:10px}
@media (max-width:760px){.m-fab{bottom:calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom))}}
.m-fab a,.m-fab button{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;
box-shadow:var(--sh-2);transition:transform var(--fast),box-shadow var(--fast)}
.m-fab a:hover,.m-fab button:hover{transform:translateY(-3px) scale(1.04)}
.m-fab svg{width:22px;height:22px}
.m-fab__tg{background:linear-gradient(140deg,#37bdf3,#1d8fd1)}
.m-fab__ig{background:linear-gradient(140deg,#f9ce34,#ee2a7b 55%,#6228d7)}
.m-fab__call{background:linear-gradient(140deg,#8dbf63,#12a26b)}
.m-fab__viber{background:linear-gradient(140deg,#a77afc,#7360f2)}
.m-totop{position:fixed;right:16px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:879;width:44px;height:44px;
border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);background:rgba(10,8,5,.8);
backdrop-filter:blur(10px);color:var(--ink);opacity:0;visibility:hidden;transition:opacity var(--fast),visibility var(--fast),transform var(--fast)}
.m-totop.is-on{opacity:1;visibility:visible}
.m-totop:hover{transform:translateY(-3px)}
@media (max-width:760px){.m-totop{bottom:calc(var(--tabbar-h) + 74px + env(safe-area-inset-bottom))}}
.m-toast{position:fixed;left:50%;bottom:26px;z-index:1200;transform:translate(-50%,140%);
max-width:min(92vw,520px);padding:14px 20px;border-radius:var(--r-pill);border:1px solid var(--line-2);
background:rgba(20,14,6,.95);backdrop-filter:blur(16px);color:var(--ink);font-size:14.5px;font-weight:500;
box-shadow:var(--sh-3);transition:transform .45s var(--ease);text-align:center}
.m-toast.is-on{transform:translate(-50%,0)}
@media (max-width:760px){.m-toast{bottom:calc(var(--tabbar-h) + 18px)}}
/* курсор (тільки для миші) */
.m-cursor{position:fixed;top:0;left:0;width:26px;height:26px;border-radius:50%;z-index:1500;pointer-events:none;
border:1px solid rgba(255,246,227,.55);mix-blend-mode:difference;transform:translate(-50%,-50%);
transition:width .25s var(--ease),height .25s var(--ease),background .25s var(--ease),opacity .2s;opacity:0}
.m-cursor.is-on{opacity:1}
.m-cursor.is-big{width:74px;height:74px;background:rgba(255,246,227,.14);border-color:transparent}
.m-cursor__t{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .2s}
.m-cursor.is-big .m-cursor__t{opacity:1}
@media (hover:none),(max-width:1100px){.m-cursor{display:none}}
/* ----------------------------------------------------- шторка переходу */
.m-curtain{position:fixed;inset:0;z-index:1400;pointer-events:none;transform:scaleY(0);transform-origin:bottom;
background:var(--grad);opacity:.96}
.m-curtain.is-in{transform:scaleY(1);transform-origin:bottom;transition:transform .45s var(--ease)}
.m-curtain.is-out{transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
/* ------------------------------------------------------------- пошук */
.m-search{position:fixed;inset:0;z-index:1100;display:flex;justify-content:center;padding:clamp(60px,12vh,140px) var(--gut) 40px;
background:rgba(8,5,2,.76);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
opacity:0;visibility:hidden;transition:opacity var(--fast),visibility var(--fast)}
.m-search.is-open{opacity:1;visibility:visible}
.m-search__box{width:min(720px,100%);height:max-content;max-height:100%;display:flex;flex-direction:column;
border-radius:var(--r-lg);border:1px solid var(--line-2);background:rgba(20,15,8,.98);box-shadow:var(--sh-3);
overflow:hidden;transform:translateY(18px) scale(.98);transition:transform var(--slow)}
.m-search.is-open .m-search__box{transform:none}
.m-search__in{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.m-search__in svg{width:20px;height:20px;color:var(--mut);flex:none}
.m-search__in input{flex:1;background:none;border:0;font-size:17px;color:var(--ink);outline:none}
.m-search__esc{font-size:11px;color:var(--mut);border:1px solid var(--line);border-radius:6px;padding:3px 7px}
.m-search__res{overflow-y:auto;max-height:min(58vh,520px);padding:8px}
.m-search__res a{display:flex;gap:14px;align-items:center;padding:10px 12px;border-radius:var(--r-sm);transition:background var(--fast)}
.m-search__res a:hover,.m-search__res a.is-sel{background:var(--surface-2)}
.m-search__res img{width:52px;height:52px;border-radius:10px;object-fit:cover;flex:none;background:var(--bg-3)}
.m-search__res b{display:block;font-size:14.5px;font-weight:600;line-height:1.35}
.m-search__res span{font-size:12px;color:var(--mut)}
.m-search__hint{padding:16px 20px;font-size:13px;color:var(--mut);border-top:1px solid var(--line);display:flex;
flex-wrap:wrap;gap:8px 16px;align-items:center}
.m-search__hint kbd{border:1px solid var(--line);border-radius:5px;padding:2px 6px;font-size:11px;font-family:inherit}
/* -------------------------------------------------------- мудборд (шухляда) */
.m-mood{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);z-index:1050;display:flex;flex-direction:column;
background:rgba(12,9,4,.98);backdrop-filter:blur(20px);border-left:1px solid var(--line-2);box-shadow:var(--sh-3);
transform:translateX(105%);transition:transform var(--slow)}
.m-mood.is-open{transform:none}
.m-mood__head{display:flex;align-items:center;gap:12px;padding:20px;border-bottom:1px solid var(--line)}
.m-mood__head h3{font-size:17px;flex:1}
.m-mood__body{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:12px}
.m-mood__it{display:flex;gap:12px;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line)}
.m-mood__it img{width:64px;height:64px;border-radius:12px;object-fit:cover;flex:none;background:var(--bg-3)}
.m-mood__it b{display:block;font-size:14px;font-weight:600;line-height:1.35;margin-bottom:3px}
.m-mood__it span{font-size:12px;color:var(--mut)}
.m-mood__it button{color:var(--mut);font-size:20px;line-height:1;padding:4px 6px;transition:color var(--fast)}
.m-mood__it button:hover{color:var(--bad)}
.m-mood__foot{padding:18px 20px calc(18px + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:flex;
flex-direction:column;gap:10px}
.m-mood__bd{position:fixed;inset:0;z-index:1040;background:rgba(8,5,2,.6);backdrop-filter:blur(4px);opacity:0;
visibility:hidden;transition:opacity var(--fast),visibility var(--fast)}
.m-mood__bd.is-open{opacity:1;visibility:visible}
.m-heart{position:absolute;z-index:4;top:10px;right:10px;width:36px;height:36px;border-radius:50%;display:grid;
place-items:center;border:1px solid rgba(255,246,227,.2);background:rgba(10,8,5,.55);backdrop-filter:blur(8px);
color:#fff;opacity:0;transform:scale(.9);transition:opacity var(--fast),transform var(--fast),background var(--fast)}
.m-tile:hover .m-heart,.m-post:hover .m-heart,.m-heart.is-on,.m-heart:focus-visible{opacity:1;transform:none}
.m-heart svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
.m-heart.is-on{background:var(--grad);border-color:transparent;color:var(--ink-on-accent)}
.m-heart.is-on svg{fill:currentColor}
@media (hover:none){.m-heart{opacity:1}}
/* ----------------------------------------------------------- лайтбокс */
.m-lb{position:fixed;inset:0;z-index:1300;display:flex;align-items:center;justify-content:center;
background:rgba(8,5,2,.94);backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity var(--fast),visibility var(--fast)}
.m-lb.is-open{opacity:1;visibility:visible}
.m-lb__img{max-width:92vw;max-height:80vh;border-radius:var(--r-sm);box-shadow:var(--sh-3);object-fit:contain;
transition:transform var(--slow),opacity var(--fast)}
.m-lb__btn{position:absolute;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
border:1px solid var(--line-2);background:rgba(20,14,6,.8);color:var(--ink);font-size:22px;transition:transform var(--fast),background var(--fast)}
.m-lb__btn:hover{transform:scale(1.07);background:var(--surface-2)}
.m-lb__close{top:22px;right:22px}
.m-lb__prev{left:2vw}
.m-lb__next{right:2vw}
.m-lb__cap{position:absolute;left:0;right:0;bottom:22px;text-align:center;font-size:13.5px;color:var(--ink-2);
padding:0 80px}
.m-lb__n{position:absolute;top:26px;left:26px;font-size:13px;color:var(--mut);letter-spacing:.08em}
.m-lb__act{position:absolute;bottom:22px;right:22px;display:flex;gap:8px}
@media (max-width:760px){
.m-lb__prev{left:8px}.m-lb__next{right:8px}.m-lb__btn{width:44px;height:44px}
.m-lb__cap{bottom:76px;padding:0 16px}.m-lb__act{left:16px;right:16px;bottom:16px;justify-content:center}
}
/* --------------------------------------------------------- модальні вікна */
.m-modal{position:fixed;inset:0;z-index:1150;display:flex;align-items:center;justify-content:center;padding:var(--gut);
background:rgba(8,5,2,.8);backdrop-filter:blur(12px);opacity:0;visibility:hidden;transition:opacity var(--fast),visibility var(--fast)}
.m-modal.is-open{opacity:1;visibility:visible}
.m-modal__box{width:min(560px,100%);max-height:88vh;overflow-y:auto;border-radius:var(--r-lg);border:1px solid var(--line-2);
background:linear-gradient(170deg,#1a1408,#0f0b05);box-shadow:var(--sh-3);padding:clamp(22px,3vw,34px);
transform:translateY(20px) scale(.97);transition:transform var(--slow)}
.m-modal.is-open .m-modal__box{transform:none}
.m-modal__head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.m-modal__head h3{flex:1;font-size:20px}
.m-modal__x{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
color:var(--ink-2);font-size:17px}
.m-modal__x:hover{color:var(--ink);border-color:var(--line-2)}
/* ---------------------------------------------------- анімації появи
Нічого не ховаємо стилями: мініфікатор сервера виносить інлайн-скрипти у
відкладені файли, і прихований CSS-ом вміст лишився б невидимим до їх
завантаження (або назавжди, якщо скрипт впав). Ховає і показує лише GSAP —
і тільки те, що на момент старту нижче першого екрана. */
/* =====================================================================
ВНУТРІШНІ СТОРІНКИ
===================================================================== */
.m-main{padding-top:var(--hdr-h);min-height:60vh}
/* герой сторінки: заголовок + опис + «полотно» частинок за ним */
.m-phero{position:relative;padding:clamp(46px,7vw,110px) 0 clamp(30px,4vw,56px);overflow:hidden;isolation:isolate}
.m-phero__fx{position:absolute;inset:0;z-index:-1;width:100%;height:100%;opacity:0;transition:opacity 1.2s var(--ease)}
.m-phero__fx.is-live{opacity:1}
.m-phero__orb{position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none}
.m-phero__orb--a{width:38vw;height:38vw;right:-8vw;top:-14vw;background:radial-gradient(circle,rgba(232,200,121,.55),transparent 65%)}
.m-phero__orb--b{width:30vw;height:30vw;left:-10vw;bottom:-16vw;background:radial-gradient(circle,rgba(240,220,176,.35),transparent 65%)}
.m-phero h1{font-size:var(--t-h1);max-width:22ch;margin:16px 0 18px}
.m-phero .m-lead{margin:0}
.m-phero__row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(20px,4vw,60px);align-items:end}
@media (max-width:900px){.m-phero__row{grid-template-columns:1fr}}
.m-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.m-fact{padding:16px 18px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface)}
.m-fact b{display:block;font-family:'Unbounded',sans-serif;font-size:clamp(20px,2.3vw,28px);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.m-fact span{font-size:12.5px;color:var(--mut)}
@media (max-width:520px){.m-facts{grid-template-columns:1fr 1fr}.m-facts .m-fact:last-child{grid-column:1/-1}}
/* хлібні крихти */
.m-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--mut)}
.m-crumbs a{color:var(--ink-2);transition:color var(--fast)}
.m-crumbs a:hover{color:var(--aqua)}
.m-crumbs .over,.m-crumbs span{color:var(--mut)}
/* speedbar DLE кладе свої роздільники «»» — робимо їх тихими */
.m-crumbs a+span,.m-crumbs__sep{opacity:.6}
/* мовний перемикач лендингів */
.lang-switch{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--r-pill);
border:1px solid var(--line-2);background:var(--surface);font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:16px}
.lang-switch:hover{color:var(--ink);border-color:var(--aqua)}
/* ----------------------------------------------------- стрічка матеріалів */
.m-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:26px}
.m-chips{display:flex;flex-wrap:wrap;gap:8px}
.m-chip{padding:9px 16px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);
font-size:13.5px;font-weight:600;color:var(--ink-2);transition:all var(--fast)}
.m-chip:hover{color:var(--ink);border-color:var(--line-2)}
.m-chip.is-on{color:var(--ink-on-accent);background:var(--grad);border-color:transparent}
.m-chip small{opacity:.7;font-weight:500;margin-left:4px}
.m-feed{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
@media (max-width:980px){.m-feed{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.m-feed{grid-template-columns:1fr}}
.m-feed>.m-post:first-child.is-feature{grid-column:span 2}
.m-feed>.m-post:first-child.is-feature .m-post__ph{aspect-ratio:16/9}
@media (max-width:600px){.m-feed>.m-post:first-child.is-feature{grid-column:auto}}
.m-feed .navigation,.m-feed .m-pager{grid-column:1/-1}
.m-view-toggle{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-pill);padding:3px;background:var(--surface)}
.m-view-toggle button{width:36px;height:32px;border-radius:var(--r-pill);display:grid;place-items:center;color:var(--mut)}
.m-view-toggle button.is-on{background:var(--surface-2);color:var(--ink)}
.m-view-toggle svg{width:17px;height:17px}
.m-feed.is-list{grid-template-columns:1fr}
.m-feed.is-list .m-post{flex-direction:row}
.m-feed.is-list .m-post__ph{width:min(38%,340px);aspect-ratio:4/3;flex:none}
@media (max-width:600px){.m-feed.is-list .m-post{flex-direction:column}.m-feed.is-list .m-post__ph{width:100%}}
/* опис категорії з БД (fulldescr). УВАГА: всередині .cat-hero не має бути
вкладених — m1loy_pagefix.php вирізає блок регуляркою до першого
. */
.cat-hero{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut) 10px}
.cat-hero h1{font-size:var(--t-h1);margin:14px 0 20px;max-width:24ch}
.cat-hero>p{color:var(--ink-2);font-size:16.5px;line-height:1.75;max-width:78ch}
.cat-hero>p:first-of-type{font-size:var(--t-lead);color:var(--ink)}
.cat-hero a{color:var(--aqua);border-bottom:1px solid rgba(240,220,176,.35)}
.cat-hero .cat-feed-h2{font-size:var(--t-h3);margin:34px 0 0;padding-top:26px;border-top:1px solid var(--line)}
.cat-hero.is-collapsed>p:nth-of-type(n+2){display:none}
.m-more-toggle{margin-top:6px}
/* пагінація DLE: {pages} віддає і */
.navigation,.m-pager{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:40px 0 0}
.pagination-shell__pages{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.pagination-shell__pages a,.pagination-shell__pages span,.m-pager a,.m-pager span{min-width:44px;height:44px;padding:0 12px;border-radius:var(--r-pill);
display:inline-grid;place-items:center;border:1px solid var(--line);background:var(--surface);font-weight:600;font-size:14px;color:var(--ink-2)}
.pagination-shell__pages span{color:var(--ink-on-accent);background:var(--grad);border-color:transparent}
.pagination-shell__pages span.nav_ext{background:none;border:0;color:var(--mut)}
.pagination-shell__pages a:hover{color:var(--ink);border-color:var(--line-2)}
.pagination-shell__side a,.pagination-shell__side>span{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:var(--r-pill);
border:1px solid var(--line);background:var(--surface);font-weight:600;font-size:14px}
.pagination-shell__side>span{opacity:.4}
/* ------------------------------------------------------- повна історія */
.m-story-hero{position:relative;min-height:min(86vh,860px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;
margin-top:calc(var(--hdr-h) * -1);padding:calc(var(--hdr-h) + 40px) 0 clamp(34px,5vw,64px)}
.m-story-hero__img{position:absolute;inset:0;z-index:-2}
.m-story-hero__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);filter:saturate(1.08)}
.m-story-hero::after{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(180deg,rgba(10,8,5,.55) 0%,rgba(10,8,5,.1) 35%,rgba(10,8,5,.72) 72%,var(--bg) 100%)}
.m-story-hero h1{font-size:clamp(30px,5vw,72px);max-width:20ch;margin:18px 0 20px;text-shadow:0 8px 40px rgba(0,0,0,.5)}
.m-story-meta{display:flex;flex-wrap:wrap;gap:8px}
.m-story-meta .m-pill{background:rgba(10,8,5,.5);backdrop-filter:blur(10px);color:#fff;border-color:rgba(255,246,227,.18)}
.m-story{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(24px,4vw,64px);align-items:start;padding-top:clamp(24px,3vw,44px)}
@media (max-width:1040px){.m-story{grid-template-columns:1fr}}
.m-aside{position:static;display:flex;flex-direction:column;gap:14px}
.m-aside .m-card{padding:22px}
.m-aside h4{font-size:15px;margin:10px 0 8px}
.m-aside__price{font-family:'Unbounded',sans-serif;font-size:32px;font-weight:600;letter-spacing:-.04em;margin:6px 0 4px}
.m-aside__price small{font-size:15px;color:var(--mut);font-weight:500}
.m-aside__facts{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:8px}
.m-aside__facts li{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--mut);padding-bottom:8px;border-bottom:1px solid var(--line)}
.m-aside__facts b{color:var(--ink);font-weight:600}
.m-share{display:flex;flex-wrap:wrap;gap:8px}
.m-share button,.m-share a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);
background:var(--surface);color:var(--ink-2);transition:all var(--fast)}
.m-share button:hover,.m-share a:hover{color:var(--ink-on-accent);background:var(--grad);border-color:transparent;transform:translateY(-2px)}
.m-share svg{width:18px;height:18px;fill:currentColor}
.m-toc{padding:18px 20px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);margin:0 0 30px}
.m-toc b{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:10px}
.m-toc ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.m-toc a{font-size:14.5px;color:var(--ink-2)}
.m-toc a:hover,.m-toc a.is-active{color:var(--aqua)}
.m-readbar{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mut)}
/* тіло статті (контент із БД: заголовки, абзаци, таблиці, highslide-фото) */
.full-text,.m-prose{font-size:17px;line-height:1.8;color:var(--ink-2);max-width:78ch;overflow-wrap:anywhere}
.full-text>*:first-child,.m-prose>*:first-child{margin-top:0}
.full-text h2,.m-prose h2{font-size:clamp(22px,2.6vw,32px);color:var(--ink);margin:1.8em 0 .6em;scroll-margin-top:calc(var(--hdr-h) + 20px)}
.full-text h3,.m-prose h3{font-size:clamp(18px,2vw,23px);color:var(--ink);margin:1.6em 0 .5em}
.full-text p,.m-prose p{margin:0 0 1.15em}
.full-text strong,.full-text b,.m-prose strong,.m-prose b{color:var(--ink);font-weight:600}
.full-text a:not(.m-btn):not(.highslide),.m-prose a:not(.m-btn){color:var(--aqua);border-bottom:1px solid rgba(240,220,176,.35);transition:border-color var(--fast)}
.full-text a:not(.m-btn):not(.highslide):hover,.m-prose a:not(.m-btn):hover{border-color:var(--aqua)}
.full-text ul,.full-text ol,.m-prose ul,.m-prose ol{padding-left:1.3em;margin:0 0 1.2em}
.full-text li,.m-prose li{margin:.35em 0}
.full-text ul li::marker,.m-prose ul li::marker{color:var(--magenta)}
.full-text blockquote,.m-prose blockquote{margin:1.6em 0;padding:18px 24px;border-left:3px solid transparent;
border-image:var(--grad) 1;background:var(--surface);font-family:'Playfair Display',serif;font-style:italic;font-size:1.15em;color:var(--ink)}
.full-text img,.m-prose img{border-radius:var(--r-sm)}
.full-text table,.m-prose table{width:100%;border-collapse:separate;border-spacing:0;margin:1.4em 0;font-size:15px;
border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;display:block;overflow-x:auto}
.full-text th,.full-text td,.m-prose th,.m-prose td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.full-text th,.full-text tr:first-child td,.m-prose th{background:var(--surface-2);color:var(--ink);font-weight:600}
.full-text tr:last-child td{border-bottom:0}
.full-text iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:var(--r-md)}
/* галерея фотосету (складається скриптом з highslide-посилань) */
.m-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:26px 0;max-width:none}
.m-gallery a{position:relative;display:block;overflow:hidden;border-radius:var(--r-sm);aspect-ratio:1;background:var(--bg-3);cursor:zoom-in}
.m-gallery a:nth-child(7n+1){grid-column:span 2;grid-row:span 2}
@media (max-width:600px){.m-gallery{grid-template-columns:repeat(2,1fr)}.m-gallery a:nth-child(7n+1){grid-column:span 2;grid-row:auto;aspect-ratio:4/3}}
.m-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.m-gallery a:hover img{transform:scale(1.06)}
.m-story--gallery .full-text{max-width:none}
.m-cta-inline{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin:30px 0;padding:22px 24px;
border-radius:var(--r-lg);background:var(--grad-soft);border:1px solid var(--line-2)}
.m-cta-inline b{font-family:'Unbounded',sans-serif;font-size:18px;color:var(--ink);letter-spacing:-.02em}
.m-cta-inline p{margin:4px 0 0;font-size:14.5px;color:var(--ink-2)}
.story-page-split:empty{display:none}
/* сусідні публікації + схожі */
.m-neigh{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:40px 0 0}
.m-neigh a{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);transition:all var(--fast)}
.m-neigh a:hover{border-color:var(--line-2);transform:translateY(-2px)}
.m-neigh a span{font-size:12px;color:var(--mut);letter-spacing:.1em;text-transform:uppercase}
.m-neigh a b{font-weight:600;font-size:15px}
.m-neigh a:last-child{text-align:right}
.m-neigh:empty{display:none}
.m-rel{margin-top:clamp(50px,6vw,90px)}
.m-rel__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
/* «Схожі проєкти» рушій віддає п'ятьма — при auto-fit це 4+1, і п'ята картка
стояла в ряду сама. Кількість колонок задаємо явно і ховаємо зайві картки
так, щоб ряд завжди був повним: показане число ділиться на число колонок.
Ховаємо CSS-ом, а не налаштуванням DLE: на вузькому екрані колонок інше
число, і одне «related_number» не може бути правильним одразу для всіх. */
.m-rel__grid>*:nth-child(n+5){display:none}
@media (max-width:1100px){
.m-rel__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.m-rel__grid>*:nth-child(n+4){display:none}
}
@media (max-width:760px){
.m-rel__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Четверту картку ПОВЕРТАЄМО: правило «сховати з четвертої» з ширшого
брейкпоінта продовжує діяти й тут, і без цього рядка на двох колонках
лишалось три картки — тобто 2+1, рівно та сироти, яку ховання й лікувало. */
.m-rel__grid>*:nth-child(4){display:flex}
.m-rel__grid>*:nth-child(n+5){display:none}
}
/* коментарі DLE */
.m-comments{margin-top:clamp(40px,5vw,70px)}
.m-comments__head{display:flex;align-items:baseline;gap:12px;margin-bottom:18px}
.m-comments__head h2{font-size:var(--t-h3)}
.m-comments__head span{color:var(--mut)}
.comment-card{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.comment-card__avatar-image{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background-size:cover;background-position:center;
background-color:var(--surface-2);font-size:0;border:1px solid var(--line)}
.comment-card__head{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.comment-card__author strong{font-weight:600}
.comment-card__author time{font-size:12.5px;color:var(--mut);margin-left:10px}
.comment-card__actions{display:flex;flex-wrap:wrap;gap:12px;font-size:12.5px}
.comment-card__actions a,.comment-card__action{color:var(--mut);cursor:pointer}
.comment-card__actions a:hover{color:var(--aqua)}
.comment-card__text{color:var(--ink-2);font-size:15px;line-height:1.65}
.comment-card__online{font-size:10px;color:var(--ok)}
.m-addcomm{margin-top:26px}
.m-addcomm .comment-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.m-addcomm .comment-form__grid{grid-template-columns:1fr}}
.comment-form__field{display:flex;flex-direction:column;gap:7px;font-size:13px;color:var(--ink-2);margin-bottom:12px}
.comment-form__field input,.m-addcomm textarea,.comment-form__captcha input{padding:13px 15px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:rgba(10,8,5,.42);color:var(--ink)}
.comment-form__editor textarea,.m-addcomm .bb-editor textarea{width:100%;min-height:130px}
.comment-form__submit{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:14px}
.comment-form__captcha{display:flex;gap:10px;align-items:center}
/* ----------------------------------------------------------- CTA-смуга */
.m-cta{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-xl);padding:clamp(34px,5vw,72px);
border:1px solid var(--line-2);background:linear-gradient(140deg,#201707,#110c05 55%,#150f06)}
.m-cta::before{content:"";position:absolute;z-index:-1;inset:-40%;background:conic-gradient(from 180deg,rgba(240,196,107,.25),rgba(201,128,63,.3),rgba(232,200,121,.3),rgba(201,151,60,.3),rgba(240,220,176,.25),rgba(240,196,107,.25));
filter:blur(60px);animation:m-spin 18s linear infinite}
@keyframes m-spin{to{transform:rotate(360deg)}}
.m-cta h2{font-size:var(--t-h2);max-width:20ch;margin:14px 0 14px;color:#fff}
.m-cta p{color:rgba(255,255,255,.78);max-width:56ch}
.m-cta .m-row{margin-top:24px}
[data-tone="paper"] .m-cta{--ink:#f7f1e3;--ink-2:#d3c5a6;--line-2:rgba(255,246,227,.18);--surface:rgba(255,246,227,.06);color:#fff}
/* ------------------------------------------------ компоненти лендингів */
.m-land{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:clamp(24px,4vw,64px);align-items:start}
@media (max-width:1040px){.m-land{grid-template-columns:1fr}}
.m-land .m-aside{top:calc(var(--hdr-h) + 16px)}
.offers{margin:28px 0;padding:24px 26px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface)}
.offers h3{font-size:18px;margin-bottom:14px;color:var(--ink)}
.offers .ol{font-size:14.5px;color:var(--mut);margin:-6px 0 14px}
.offers ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px 18px}
.offers li{position:relative;padding-left:30px;font-size:15px;line-height:1.55;color:var(--ink-2);margin:0}
.offers li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--grad);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22Zm-1.4 15.6-4.3-4.3 1.4-1.4 2.9 2.9 6.2-6.2 1.4 1.4-7.6 7.6Z'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22Zm-1.4 15.6-4.3-4.3 1.4-1.4 2.9 2.9 6.2-6.2 1.4 1.4-7.6 7.6Z'/%3E%3C/svg%3E") center/contain no-repeat}
.offers.m1-related li::before{border-radius:0;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 11h11.2l-4.6-4.6L13 5l7 7-7 7-1.4-1.4 4.6-4.6H5z'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 11h11.2l-4.6-4.6L13 5l7 7-7 7-1.4-1.4 4.6-4.6H5z'/%3E%3C/svg%3E") center/contain no-repeat}
.offers a{color:var(--ink);border-bottom:1px solid var(--line-2)}
.offers a:hover{color:var(--aqua);border-color:var(--aqua)}
/* FAQ: з плавним відкриттям; старі .faq-item з теж підтримані */
.faq-list{display:flex;flex-direction:column;gap:10px;margin:18px 0 26px}
.faq-item{border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);transition:border-color var(--fast),background var(--fast)}
.faq-item[open]{border-color:var(--line-2);background:var(--surface-2)}
.faq-item summary,.faq-item>b{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;cursor:pointer;
list-style:none;font-family:'Unbounded',sans-serif;font-weight:500;font-size:15.5px;letter-spacing:-.015em;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c7c1dd' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/14px no-repeat;
transition:transform var(--fast)}
[data-tone="paper"] .faq-item summary::after{filter:invert(1)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-a{padding:0 20px 18px;color:var(--ink-2);font-size:15.5px;line-height:1.7}
.faq-a p:last-child{margin:0}
/* кроки процесу */
.cflow{list-style:none;padding:0;margin:20px 0;display:grid;gap:12px;counter-reset:st}
.cflow li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:18px;align-items:start;padding:20px 22px;border-radius:var(--r-md);
border:1px solid var(--line);background:var(--surface)}
.cflow li>b{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;font-family:'Unbounded',sans-serif;font-size:20px;
color:var(--ink-on-accent);background:var(--grad);box-shadow:var(--glow)}
.cflow strong{display:block;font-family:'Unbounded',sans-serif;font-weight:600;font-size:17px;letter-spacing:-.02em;color:var(--ink);margin:4px 0 6px}
.cflow p{margin:0;color:var(--ink-2);font-size:15px}
/* галерея прикладів на лендингах */
.pgallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin:18px 0 30px}
.pgallery .t{position:relative;padding:0;border-radius:var(--r-sm);overflow:hidden;aspect-ratio:1;background:var(--bg-3);cursor:zoom-in;border:1px solid var(--line)}
.pgallery .t img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.pgallery .t:hover img{transform:scale(1.07)}
.pgallery .zoom{position:absolute;right:8px;bottom:8px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
background:rgba(10,8,5,.6);color:#fff;font-size:14px}
/* «про мене» / контакти (статичні сторінки) */
.m-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,80px);align-items:start}
@media (max-width:900px){.m-split{grid-template-columns:1fr}}
.m-portrait{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line-2);aspect-ratio:4/5;background:var(--bg-3);isolation:isolate}
.m-portrait img{width:100%;height:100%;object-fit:cover}
.m-portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,8,5,.85))}
.m-portrait__cap{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;display:flex;justify-content:space-between;align-items:end;gap:10px}
.m-portrait__cap b{font-family:'Unbounded',sans-serif;font-size:20px;letter-spacing:-.03em}
.m-portrait__ring{position:absolute;z-index:-1;inset:-30%;background:conic-gradient(from 0deg,#f0c46b,#c9803f,#e8c879,#c9973c,#f0dcb0,#f0c46b);filter:blur(70px);opacity:.35}
.m-quote{margin:26px 0;padding:0 0 0 22px;border-left:3px solid;border-image:var(--grad) 1;font-family:'Playfair Display',serif;font-style:italic;
font-size:clamp(20px,2.2vw,27px);line-height:1.45;color:var(--ink)}
.m-points{display:grid;gap:10px;margin-top:16px}
.m-point{padding:16px 18px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface)}
.m-point span{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.m-point strong{display:block;margin-top:5px;font-weight:600;color:var(--ink)}
.m-contact-list{display:grid;gap:10px}
.m-contact-list>a,.m-contact-list>div{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--r-md);border:1px solid var(--line);
background:var(--surface);transition:all var(--fast)}
.m-contact-list>a:hover{border-color:var(--line-2);transform:translateX(4px)}
.m-contact-list i{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none;color:#fff}
.m-contact-list i svg{width:21px;height:21px}
.m-contact-list b{display:block;font-weight:600}
.m-contact-list span{font-size:13px;color:var(--mut)}
/* блок пошукових фраз (друкує private/lib/seometa.php) */
.seoq .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.seoq{padding:clamp(34px,4vw,60px) 0 0}
.seoq-h{font-family:'Onest',sans-serif;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);font-weight:700;margin-bottom:14px}
.seoq-l{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.seoq-l li{padding:6px 13px;border-radius:var(--r-pill);border:1px solid var(--line);font-size:12.5px;color:var(--mut)}
.seoq-n{font-size:12px;color:var(--mut);margin:12px 0 0}
/* =====================================================================
СИСТЕМНІ СТОРІНКИ РУШІЯ: вхід, реєстрація, кабінет, повідомлення,
пошук, зворотний зв'язок, статистика, теги, службові повідомлення
===================================================================== */
.m-sys{max-width:var(--wrap);margin:0 auto;padding:clamp(28px,4vw,56px) var(--gut) 0}
.m-sys--narrow{max-width:640px}
.m-sys__head{margin-bottom:24px}
.m-sys__head h1{font-size:var(--t-h1);margin-top:12px}
.m-sys__head p{color:var(--ink-2);margin:12px 0 0;max-width:60ch}
/* стандартні форми DLE (.ui-form > .form-group) приводимо до .m-field */
.ui-form{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px}
.ui-form .form-group{display:flex;flex-direction:column;gap:8px}
.ui-form label{font-size:13px;font-weight:600;color:var(--ink-2)}
.ui-form input[type=text],.ui-form input[type=email],.ui-form input[type=password],.ui-form input[type=file],.ui-form textarea,.ui-form select,
.m-sys input[type=text],.m-sys input[type=email],.m-sys input[type=password],.m-sys textarea,.m-sys select{
width:100%;padding:13px 15px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:rgba(10,8,5,.42);color:var(--ink);font-size:15px}
.ui-form input:focus,.ui-form textarea:focus,.ui-form select:focus,.m-sys input:focus,.m-sys textarea:focus,.m-sys select:focus{
outline:none;border-color:var(--violet);box-shadow:0 0 0 4px rgba(201,151,60,.18)}
.ui-form .form-sep{height:1px;background:var(--line);margin:6px 0}
.ui-form .combo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.ui-form .combo{grid-template-columns:1fr}}
.ui-form .checkbox label,.m-sys .checkbox label{display:flex;gap:10px;align-items:center;font-weight:500;color:var(--ink-2)}
.ui-form input[type=checkbox],.m-sys input[type=checkbox]{width:18px;height:18px;accent-color:var(--violet)}
.login_check{display:flex;gap:10px}
.login_check input{flex:1}
.form_submit{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:22px}
.c-captcha{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.c-captcha img{border-radius:10px}
.m-sys .btn,.form_submit .btn,.m-sys button[type=submit]:not(.m-btn),.m-sys .bbcodes{
display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:var(--r-pill);border:0;
background:var(--grad);color:var(--ink-on-accent);font-weight:700;cursor:pointer;box-shadow:var(--glow)}
.m-sys .btn-border,.m-sys input[type=reset].bbcodes,.m-sys #doclear{background:var(--surface);color:var(--ink);border:1px solid var(--line-2);box-shadow:none}
/* авторизація: дві колонки — форма + «навіщо акаунт» */
.m-auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(20px,4vw,56px);align-items:stretch}
@media (max-width:900px){.m-auth{grid-template-columns:1fr}}
.m-auth__side{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:clamp(24px,3vw,40px);
border:1px solid var(--line-2);background:linear-gradient(150deg,#231909,#100c05);isolation:isolate;min-height:320px}
.m-auth__side::before{content:"";position:absolute;inset:-30%;z-index:-1;background:conic-gradient(from 90deg,rgba(201,128,63,.3),rgba(201,151,60,.35),rgba(240,220,176,.25),rgba(240,196,107,.25),rgba(201,128,63,.3));filter:blur(70px)}
.m-auth__side h2{font-size:clamp(22px,2.6vw,32px);margin:12px 0 18px}
.m-auth__perks{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.m-auth__perks li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink-2)}
.m-auth__perks svg{width:22px;height:22px;color:var(--aqua);flex:none}
/* вікно входу (login.tpl) у шапці */
.m-login{position:relative}
.m-login__panel{position:absolute;right:0;top:calc(100% + 12px);width:min(340px,92vw);padding:20px;border-radius:var(--r-lg);
border:1px solid var(--line-2);background:rgba(20,15,8,.98);backdrop-filter:blur(18px);box-shadow:var(--sh-3);
opacity:0;visibility:hidden;transform:translateY(-8px);transition:all var(--fast);z-index:950}
.m-login.is-open .m-login__panel{opacity:1;visibility:visible;transform:none}
.m-login__user{display:flex;gap:12px;align-items:center;padding-bottom:14px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.m-avatar{width:46px;height:46px;border-radius:50%;background-size:cover;background-position:center;background-color:var(--surface-2);
border:2px solid transparent;background-clip:padding-box;box-shadow:0 0 0 2px rgba(201,151,60,.5);flex:none}
.m-avatar--xl{width:96px;height:96px}
.m-login__menu{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
.m-login__menu a{display:flex;justify-content:space-between;gap:10px;padding:10px 8px;border-radius:10px;font-size:14.5px;color:var(--ink-2)}
.m-login__menu a:hover{background:var(--surface);color:var(--ink)}
.m-login__menu em{font-style:normal;font-size:12px;color:var(--mut)}
.m-login form .m-field{margin-bottom:12px}
.m-login__foot{display:flex;justify-content:space-between;gap:10px;margin-top:12px;font-size:13px}
.m-login__foot a{color:var(--ink-2)}
.m-login__foot a:hover{color:var(--aqua)}
.m-login__panel .pm_num:empty,.m-login__panel .pm_num[data-n="0"]{display:none}
/* кабінет */
.m-cab{display:grid;grid-template-columns:280px minmax(0,1fr);gap:clamp(18px,3vw,40px);align-items:start}
@media (max-width:900px){.m-cab{grid-template-columns:1fr}}
.m-cab__side{position:static;display:flex;flex-direction:column;gap:14px}
.m-cab__me{text-align:center;padding:26px 20px}
.m-cab__me .m-avatar{margin:0 auto 14px}
.m-cab__me b{display:block;font-family:'Unbounded',sans-serif;font-size:18px;letter-spacing:-.02em}
.m-cab__me span{font-size:13px;color:var(--mut)}
.m-cab__nav{display:flex;flex-direction:column;gap:2px;padding:10px}
.m-cab__nav a,.m-cab__nav button{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;font-size:14.5px;color:var(--ink-2);
text-align:left;width:100%;transition:all var(--fast)}
.m-cab__nav a:hover,.m-cab__nav button:hover{background:var(--surface);color:var(--ink)}
.m-cab__nav .is-on{background:var(--grad-soft);color:var(--ink)}
.m-cab__nav svg{width:18px;height:18px;flex:none;opacity:.85}
.m-cab__nav em{margin-left:auto;font-style:normal;font-size:12px;color:var(--mut)}
@media (max-width:900px){.m-cab__nav{flex-direction:row;overflow-x:auto}.m-cab__nav a,.m-cab__nav button{white-space:nowrap;width:auto}}
.m-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
@media (max-width:760px){.m-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.m-kpi{padding:18px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface)}
.m-kpi b{display:block;font-family:'Unbounded',sans-serif;font-size:26px;letter-spacing:-.04em;line-height:1.1}
.m-kpi span{font-size:12.5px;color:var(--mut)}
.m-kpi--accent{background:var(--grad-soft);border-color:var(--line-2)}
.m-dl{display:grid;grid-template-columns:180px minmax(0,1fr);gap:0;border-radius:var(--r-md);border:1px solid var(--line);overflow:hidden}
.m-dl dt,.m-dl dd{margin:0;padding:13px 16px;border-bottom:1px solid var(--line);font-size:14.5px}
.m-dl dt{color:var(--mut);background:var(--surface)}
.m-dl dd{color:var(--ink)}
.m-dl dt:last-of-type,.m-dl dd:last-of-type{border-bottom:0}
@media (max-width:560px){.m-dl{grid-template-columns:1fr}.m-dl dt{border-bottom:0;padding-bottom:2px}}
.m-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px;border-bottom:1px solid var(--line);padding-bottom:10px}
.m-tabs button,.m-tabs a{padding:9px 16px;border-radius:var(--r-pill);font-size:14px;font-weight:600;color:var(--ink-2)}
.m-tabs .is-on{background:var(--surface-2);color:var(--ink)}
.m-pane[hidden]{display:none}
.m-orders{display:flex;flex-direction:column;gap:10px}
.m-order{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface)}
.m-order img{width:72px;height:72px;border-radius:12px;object-fit:cover}
.m-order b{display:block;font-weight:600}
.m-order span{font-size:12.5px;color:var(--mut)}
@media (max-width:560px){.m-order{grid-template-columns:56px minmax(0,1fr)}.m-order img{width:56px;height:56px}.m-order .m-btn{grid-column:1/-1}}
.m-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:var(--r-pill);border:1px solid var(--line)}
.m-status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.m-status--ok{color:var(--ok)}.m-status--wait{color:var(--warn)}.m-status--bad{color:var(--bad)}.m-status--off{color:var(--mut)}
/* особисті повідомлення */
.pm-box{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:18px}
#pm-menu{display:flex;gap:8px;flex-wrap:wrap}
#pm-menu a,#pm-menu span{padding:9px 16px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);font-size:14px;font-weight:600}
.pm_status{font-size:12.5px;color:var(--mut);min-width:220px}
.pm_progress_bar{height:6px;border-radius:6px;background:var(--surface-2);overflow:hidden;margin-bottom:6px}
.pm_progress_bar span{display:block;height:100%;background:var(--grad)}
.pmlist table{width:100%;border-collapse:collapse;font-size:14.5px}
.pmlist td,.pmlist th{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left}
.pmlist th{color:var(--mut);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.08em}
.m-pm-msg{padding:18px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);margin-bottom:12px}
.m-pm-msg__head{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.m-pm-msg__head .m-avatar{width:38px;height:38px}
.m-pm-msg__act{display:flex;gap:12px;margin-left:auto;font-size:12.5px;color:var(--mut)}
/* пошук */
.searchtable table,.searchtable td{display:block;width:100%!important;padding:0}
.searchtable fieldset{border:1px solid var(--line);border-radius:var(--r-md);padding:16px;margin:0 0 12px;background:var(--surface)}
.searchtable legend{padding:0 8px;font-size:12.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.1em}
.m-search-form{display:flex;gap:10px;flex-wrap:wrap}
.m-search-form input{flex:1;min-width:220px}
.search_result_num{margin:14px 0;color:var(--mut)}
.m-sresults{display:grid;gap:12px;margin-top:18px}
.sresult{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:center;padding:12px;border-radius:var(--r-md);
border:1px solid var(--line);background:var(--surface);transition:all var(--fast)}
.sresult:hover{border-color:var(--line-2);transform:translateY(-2px)}
.sresult .ph{border-radius:12px;overflow:hidden;aspect-ratio:4/3}
.sresult .ph img{width:100%;height:100%;object-fit:cover}
.sresult h3{font-size:16px;margin:6px 0}
.sresult p{margin:0;font-size:13.5px;color:var(--ink-2)}
.sresult mark,.full-text mark{background:rgba(232,200,121,.35);color:var(--ink);border-radius:3px;padding:0 2px}
/* хмара тегів, статистика, службові повідомлення */
.tag_list{display:flex;flex-wrap:wrap;gap:8px}
.tag_list a{padding:8px 15px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:14px!important;transition:all var(--fast)}
.tag_list a:hover{color:var(--ink-on-accent);background:var(--grad);border-color:transparent}
.m-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.m-stat-grid ul{list-style:none;padding:0;margin:0}
.m-stat-grid li{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink-2)}
.m-stat-grid li b{color:var(--ink)}
.info-card{max-width:var(--wrap);margin:18px auto;padding:18px 22px;border-radius:var(--r-md);border:1px solid var(--line-2);
background:var(--grad-soft);display:flex;flex-direction:column;gap:6px}
.info-card__title{font-family:'Unbounded',sans-serif;font-weight:600;font-size:16px}
.info-card__text{color:var(--ink-2);font-size:15px}
.m-sys .userstop table,.m-sys table.userstop{width:100%;border-collapse:collapse}
.m-sys table td,.m-sys table th{padding:10px;border-bottom:1px solid var(--line);text-align:left}
/* діалоги рушія (jQuery UI у dle_js) — у кольорах системи */
.ui-dialog{background:#1a1408!important;border:1px solid var(--line-2)!important;border-radius:var(--r-lg)!important;color:var(--ink)!important;box-shadow:var(--sh-3)!important;padding:0!important}
.ui-dialog-titlebar{background:transparent!important;border:0!important;border-bottom:1px solid var(--line)!important;color:var(--ink)!important;padding:14px 18px!important;font-family:'Unbounded',sans-serif}
.ui-dialog-content{color:var(--ink-2)!important}
.ui-dialog-buttonpane{background:transparent!important;border-top:1px solid var(--line)!important}
.ui-dialog-buttonpane button{padding:10px 18px!important;border-radius:var(--r-pill)!important;background:var(--grad)!important;color:var(--ink-on-accent)!important;border:0!important;font-weight:700!important}
.ui-widget-overlay{background:rgba(8,5,2,.7)!important;opacity:1!important}
#loading-layer{background:rgba(20,15,8,.95)!important;color:var(--ink)!important;border-radius:var(--r-sm)!important;border:1px solid var(--line-2)!important}
.bb-editor textarea,.dle-editor textarea{width:100%;background:rgba(10,8,5,.42)!important;color:var(--ink)!important;border:1px solid var(--line-2)!important;border-radius:var(--r-sm)!important;padding:12px!important}
.bb-pane{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:var(--r-sm) var(--r-sm) 0 0!important}
/* ------------------------------------------------------------------ друк */
@media print{
body{background:#fff;color:#000}
body::before,body::after,.m-hdr,.m-tabbar,.m-fab,.m-totop,.foot,.m-aside,.m-cursor,.m-progress,.seoq,.m-rel,.m-comments,.m-phero__fx{display:none!important}
.m-main{padding:0}
.full-text,.m-prose{color:#000;max-width:none}
}
.m-done{text-align:center;padding:30px 10px}
.m-done svg{margin:0 auto 16px;color:var(--ink)}
.m-done h3{margin-bottom:8px}
/* =====================================================================
ФОТОСТОК (engine/modules/store.php): вітрина, картка, кошик, покупки
===================================================================== */
.st{max-width:var(--wrap);margin:0 auto;padding:clamp(20px,3vw,40px) var(--gut) 0}
.st-hero{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-xl);border:1px solid var(--line);margin-bottom:26px;
padding:clamp(26px,4vw,56px);background:linear-gradient(130deg,rgba(201,151,60,.14),rgba(201,128,63,.08) 50%,rgba(240,220,176,.08))}
.st-hero .m-phero__fx{z-index:-1}
.st-hero h1{font-size:var(--t-h1);margin:14px 0 16px;max-width:18ch}
.st-hero .m-facts{max-width:640px;margin-top:22px}
.st-gal{columns:4 250px;column-gap:14px}
@media (max-width:900px){.st-gal{columns:3 200px}}
@media (max-width:600px){.st-gal{columns:2 150px;column-gap:10px}}
.st-it{position:relative;break-inside:avoid;margin:0 0 14px;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:var(--bg-3);
transition:transform var(--slow),box-shadow var(--slow),border-color var(--slow)}
.st-it:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--line-2)}
.st-it__ph{display:block}
.st-it__ph img{width:100%;height:auto;transition:transform .9s var(--ease)}
.st-it:hover .st-it__ph img{transform:scale(1.05)}
.st-it__price{position:absolute;top:10px;left:10px;padding:5px 11px;border-radius:var(--r-pill);background:var(--grad);color:var(--ink-on-accent);font-weight:800;font-size:12.5px;box-shadow:var(--sh-1)}
.st-it__pick{position:absolute;top:10px;right:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:var(--r-pill);
background:rgba(10,8,5,.6);backdrop-filter:blur(8px);border:1px solid rgba(255,246,227,.2);font-size:12px;color:#fff;cursor:pointer;opacity:0;transition:opacity var(--fast)}
.st-it__pick input{width:15px;height:15px;accent-color:var(--violet);margin:0}
.st-it:hover .st-it__pick,.st-it.is-sel .st-it__pick{opacity:1}
@media (hover:none){.st-it__pick{opacity:1}}
/* Купити — ПОД самим кадром (GA-017, 20.09.2026): предложение показывается там, где
посетитель уже получил пользу от картинки. На устройствах без наведения кнопка видна
всегда: правило «где нет hover, там :hover ничего не показывает» уже стоило нам подписей
у плиток на телефоне (DESIGN.md, доводка 18.09). */
.st-it__buy{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;justify-content:center;
opacity:0;transform:translateY(6px);transition:opacity var(--fast),transform var(--fast)}
.st-it:hover .st-it__buy,.st-it:focus-within .st-it__buy,.st-it.is-sel .st-it__buy{opacity:1;transform:none}
.st-it:hover .st-it__ov,.st-it:focus-within .st-it__ov{padding-bottom:54px}
@media (hover:none){.st-it__buy{opacity:1;transform:none}.st-it__ov{padding-bottom:54px}}
.st-it__ov{position:absolute;left:0;right:0;bottom:0;padding:30px 13px 12px;background:linear-gradient(180deg,transparent,rgba(9,6,3,.88));
display:flex;flex-direction:column;gap:2px;opacity:0;transition:opacity var(--fast);pointer-events:none}
.st-it__ov b{font-size:13.5px;color:#fff;line-height:1.3}
.st-it__ov span{font-size:11.5px;color:rgba(255,255,255,.7)}
.st-it:hover .st-it__ov,.st-it.is-sel .st-it__ov{opacity:1}
.st-it.is-sel{border-color:transparent;box-shadow:0 0 0 2px var(--violet),var(--sh-3)}
.st-two{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(18px,3vw,40px);align-items:start;margin-top:16px}
@media (min-width:861px){.st-two--portrait{grid-template-columns:minmax(0,520px) 1fr}}
@media (max-width:860px){.st-two{grid-template-columns:1fr}}
.st-two>*{min-width:0}
.st-pv{margin:0}
.st-pv__frame{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2);cursor:zoom-in;box-shadow:var(--sh-3)}
.st-pv__frame img{width:100%;height:auto}
.st-pv__zoom{position:absolute;right:12px;bottom:12px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(10,8,5,.6);backdrop-filter:blur(8px);color:#fff}
.st-pv__cap{display:flex;gap:8px;align-items:flex-start;margin-top:12px;font-size:12.5px;color:var(--mut);line-height:1.5}
.st-pv__cap svg{flex:none;color:var(--aqua);margin-top:2px}
.st-buy h1{font-size:clamp(22px,2.6vw,32px);margin:10px 0 12px}
.st-desc{color:var(--ink-2);font-size:15px;margin:12px 0}
.st-price{font-family:'Unbounded',sans-serif;font-size:clamp(36px,4vw,52px);font-weight:600;letter-spacing:-.05em;margin:12px 0 4px;
background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;width:max-content}
.st-price small{font-size:.36em;margin-left:6px;letter-spacing:0}
.st-specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:14px 0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.st-specs>div{padding:11px 13px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
.st-specs>div:last-child{border-right:0}
.st-specs span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.st-specs b{font-size:14px;white-space:nowrap}
@media (max-width:420px){.st-specs{grid-template-columns:1fr}.st-specs>div{border-right:0;border-bottom:1px solid var(--line);flex-direction:row;justify-content:space-between}}
.st-perks{list-style:none;padding:0;margin:14px 0 18px;display:grid;gap:9px}
.st-perks li{display:flex;gap:10px;font-size:14px;color:var(--ink-2)}
.st-perks svg{flex:none;color:var(--violet);margin-top:2px}
.st-share{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.st-more{margin-top:clamp(40px,5vw,70px)}
.st-strip{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x proximity}
.st-strip .m-tile{flex:0 0 180px;scroll-snap-align:start}
.st-ty{max-width:600px;margin:20px auto;text-align:center}
.st-ty h1{font-size:clamp(26px,3vw,36px);margin:10px 0}
.st-ty p{color:var(--ink-2)}
.st-ty .m-note{text-align:left;margin-top:16px}
.st-ty__ico{width:80px;height:80px;margin:0 auto 6px;color:var(--ink)}
.st-spin{width:56px;height:56px;margin:0 auto 12px;border-radius:50%;border:3px solid var(--surface-2);border-top-color:var(--violet);animation:m-spin 1s linear infinite}
.st-cart{position:fixed;left:16px;right:16px;bottom:0;z-index:890;max-width:640px;margin:0 auto;border-radius:var(--r-lg) var(--r-lg) 0 0;
border:1px solid var(--line-2);border-bottom:0;background:rgba(20,15,8,.97);backdrop-filter:blur(18px);box-shadow:0 -20px 60px rgba(0,0,0,.6);
transform:translateY(120%);transition:transform .45s var(--ease)}
.st-cart.is-show{transform:none}
@media (max-width:760px){.st-cart{left:0;right:0;bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}}
/* Пока висит баннер cookie, шторка корзины встаёт НАД ним: обе прижаты к низу окна, у баннера
z-index выше — и «Сплатити» не нажималось вовсе (POST op=buy не уходил, страница молчала).
--ck-h — полоса от низа окна до верха баннера, поэтому одно правило годится и телефону
(там в ней уже учтена панель вкладок), и десктопу. (19.09.2026) */
html.has-ck .st-cart{bottom:var(--ck-h, 0px)}
.st-cart__sum{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer}
.st-cart__ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--grad);color:var(--ink-on-accent);flex:none}
.st-cart__lbl{font-size:14.5px;color:var(--ink-2)}
.st-cart__tot{font-family:'Unbounded',sans-serif;font-weight:600;white-space:nowrap}
.st-cart__grow{flex:1}
.st-cart__chev{color:var(--mut);transform:rotate(-90deg);transition:transform var(--fast)}
.st-cart.is-open .st-cart__chev{transform:rotate(90deg)}
.st-cart__body{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.st-cart.is-open .st-cart__body{max-height:min(66vh,620px);overflow-y:auto}
.st-cart__in{padding:4px 16px 18px}
.st-ci{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.st-ci img{width:56px;height:56px;border-radius:10px;object-fit:cover}
.st-ci__b{flex:1;min-width:0}
.st-ci__b b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-ci__b span{font-size:12.5px;color:var(--mut)}
.st-ci__x{font-size:20px;color:var(--mut);padding:4px 8px}
.st-ci__x:hover{color:var(--bad)}
.st-cart__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.st-cart__foot b{font-family:'Unbounded',sans-serif}
.m-phero__cta{margin-top:26px}
.m-phero--land .m-facts{align-self:end}
.m-phero--list .cat-hero{padding:0;margin:0}
.m-phero .m-crumbs{margin-bottom:18px}
.m-feed>.m-card{grid-column:1/-1}
/* рідкісні віджети рушія: опитування, вкладення, спливаючий профіль, перегляд новини */
.system-vote-card,.system-preview-card{padding:20px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);margin:20px 0}
.system-vote-card .title{font-size:16px;margin-bottom:10px}
.system-vote-card .vote_list label{display:flex;gap:10px;align-items:center;padding:6px 0;color:var(--ink-2)}
.system-vote-card .vote_votes,.system-vote-card .vote_more a{font-size:13px;color:var(--mut)}
.system-vote-card button,.system-vote-card .btn{margin-top:10px;padding:10px 18px;border-radius:var(--r-pill);background:var(--grad);color:var(--ink-on-accent);font-weight:700;border:0}
.attachment{display:inline-flex;flex-wrap:wrap;gap:6px;padding:10px 14px;border-radius:var(--r-sm);border:1px dashed var(--line-2);font-size:14px;color:var(--ink-2)}
.attachment a{color:var(--aqua)}
.system-popup-user{display:flex;gap:14px;color:var(--ink-2);font-size:14px}
.system-popup-user .cover{display:block;width:64px;height:64px;border-radius:50%;background-size:cover;background-position:center}
.system-popup-user ul{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.system-popup-user b{color:var(--ink)}
#dle-comments-form,#dle-ajax-comments{max-width:var(--wrap-narrow);margin-inline:auto;padding-inline:var(--gut)}
.bb-editor,.bb-pane{color:var(--ink)}
.bb-editor textarea{min-height:140px}
.bb-pane .bb-btn,.bb-pane>b,.bb-pane>span{filter:invert(.85)}
.m-phero__fx,.m-phero__orb{-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
.m-phero{overflow:visible;overflow-x:clip}
.m-phero__fx{inset:0 0 -60px}
/* крихти: у фотостоку свої, повніші — загальні з main.tpl ховаємо */
.m-sys:has(.st)>.m-crumbs{display:none}
/* таблиці, які рушій друкує всередині карток (статистика, списки користувачів) */
.m-card table{width:100%;border-collapse:collapse;font-size:14px;display:block;overflow-x:auto}
.m-card table td,.m-card table th{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.m-card table tr:first-child td,.m-card table th{color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
/* =====================================================================
ВУЗЬКІ ЕКРАНИ (до 320 px) — 17.09.2026
Правило: нічого не вилазить за екран, довгі слова переносяться,
органи керування лишаються не меншими за ~40 px по висоті.
===================================================================== */
h1,h2,h3,h4,h5,.m-tile__cap b,.m-post__body h3,.m-fact b,.h-stat b,.m-kpi b,.st-it__ov b,
.m-order b,.m-cab__me b,.m-crumbs,.m-chip,.m-pill,.seoq-l li{overflow-wrap:anywhere}
.m-lead,.full-text,.m-prose,.m-sec-head p,.faq-a,.m-note,.m-empty{overflow-wrap:break-word}
@media (max-width:520px){
/* шапка: лишається знак і «M1LOY», кнопки трохи менші — інакше рядок ширший за екран */
.m-logo span{font-size:0}
.m-logo b{font-size:15px}
.m-logo__mark{width:30px;height:30px}
.m-hdr__in{gap:8px}
.m-hdr__act{gap:5px}
.m-iconbtn,.m-burger{width:40px;height:40px}
.m-iconbtn svg{width:18px;height:18px}
.m-tabbar a span{font-size:9.5px}
}
@media (max-width:420px){
:root{--gut:14px}
.m-tile__cap{padding:12px 13px}
.m-tile__cap b{font-size:13px}
.m-tile__cap span{font-size:11px}
.m-tile__badge,.st-it__price{font-size:11px;padding:4px 9px}
.m-btn{padding:13px 18px;font-size:14.5px}
.m-btn--lg{padding:16px 22px;font-size:15.5px}
.m-facts{grid-template-columns:1fr 1fr}
.m-fact{padding:13px 14px}
.m-specs,.st-specs{grid-template-columns:1fr}
.m-dl{grid-template-columns:1fr}
.m-order{grid-template-columns:52px minmax(0,1fr)}
.m-order img{width:52px;height:52px}
.comment-form__submit,.form_submit,.c-captcha,.comment-form__captcha{flex-wrap:wrap}
.comment-form__captcha input,.c-captcha input{flex:1 1 140px;min-width:0}
.m-search__hint{font-size:12px}
.rv-more{padding:6px 0}
.m-view-toggle button{width:40px;height:36px}
.st-strip .m-tile{flex-basis:140px}
}
@media (max-width:360px){
.h-bento{grid-auto-rows:clamp(130px,44vw,240px)}
.m-feed,.m-grid--2,.m-grid--3,.m-grid--4,.m-rel__grid{grid-template-columns:1fr}
.m-neigh{grid-template-columns:1fr}
.m-neigh a:last-child{text-align:left}
.m-kpis{grid-template-columns:1fr 1fr}
.m-gallery{grid-template-columns:1fr 1fr}
.m-row2,.ui-form .combo{grid-template-columns:1fr}
}
/* редактор коментарів рушія: тіло всередині iframe фарбує m1-inner.js,
а рамку й панель — тут, щоб білий прямокутник не світився на темній сторінці */
.tox,.tox-tinymce{border-radius:var(--r-sm)!important;border-color:var(--line-2)!important}
.tox .tox-toolbar,.tox .tox-toolbar__primary,.tox .tox-editor-header{background:var(--surface-2)!important;border-color:var(--line)!important}
.tox .tox-tbtn svg{fill:var(--ink)!important}
.tox .tox-edit-area__iframe{background:var(--bg-2)!important}
.tox .tox-statusbar{background:var(--surface)!important;border-color:var(--line)!important;color:var(--mut)!important}
@media (max-width:420px){
.comment-form__submit>*,.form_submit>*{flex:1 1 100%}
.comment-form__submit .m-btn,.form_submit .m-btn,.form_submit button{width:100%;justify-content:center}
}
@media (max-width:420px){
/* капча рушія: картинка + поле не влазять у рядок на 320 — ставимо стовпчиком */
.c-captcha,.comment-form__captcha{flex-direction:column;align-items:stretch;min-width:0}
.c-captcha img,.comment-form__captcha img{align-self:flex-start}
.c-captcha input,.comment-form__captcha input{flex:0 0 auto;width:100%}
}
/* широкі таблиці рушія — прокручуються всередині свого блоку, а не сторінка */
.m-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:10px}
.m-table-scroll table{display:table;min-width:560px}
/* закрита шторка мудборду не повинна збільшувати ширину документа:
прибираємо її з макета (visibility) і обрізаємо корінь по X */
html{overflow-x:clip}
.m-mood{visibility:hidden;transition:transform var(--slow),visibility 0s linear .55s}
.m-mood.is-open{visibility:visible;transition:transform var(--slow),visibility 0s}
.m-dl a,.m-table-scroll a,.m-crumbs a{display:inline-block;padding:5px 0}
@media (max-width:900px){.m-split .m-portrait,.h-about .m-portrait{max-width:440px;width:100%;margin-inline:auto}}
/* числа з одиницями (2500 ₴, 24 год, від 250 ₴) не розриваються — зменшуються */
.m-fact b,.m-kpi b{font-size:clamp(17px,1.8vw,26px)}
@media (max-width:520px){.m-fact b,.m-kpi b{white-space:nowrap;font-size:clamp(16px,5.4vw,24px)}}
/* на телефоні плаваючі кнопки перекривали текст і фото; зв'язок і навігація
там уже є в нижній панелі та меню, тож ці кнопки прибираємо */
@media (max-width:760px){.m-fab,.m-totop{display:none!important}}
/* =====================================================================
ПОВІДОМЛЕННЯ ПРО COOKIE й ГІД ПО САЙТУ (17.09.2026)
Лічильник Astrina ставить cookie `_astr` на два роки — значить у гостя має
бути де про це прочитати й де відмовитися. Відмова НЕ «вимикає галочку»:
m1-core.js після неї не підвантажує лічильник узагалі й стирає його сліди.
===================================================================== */
.m-cookie{position:fixed;left:50%;transform:translate(-50%,160%);bottom:22px;z-index:1210;
width:min(720px,calc(100vw - 2*var(--gut)));padding:18px 22px;border-radius:var(--r-md);
border:1px solid var(--line-2);background:rgba(20,14,6,.96);backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);box-shadow:var(--sh-3);
display:flex;align-items:center;gap:18px;flex-wrap:wrap;
transition:transform .5s var(--ease);visibility:hidden}
.m-cookie.is-on{transform:translate(-50%,0);visibility:visible}
.m-cookie p{flex:1 1 300px;min-width:0;margin:0;font-size:14px;line-height:1.55;color:var(--ink-2)}
.m-cookie p a{display:inline-block;padding:4px 0;color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.m-cookie__act{display:flex;gap:10px;flex-wrap:wrap}
.m-cookie__act .m-btn{white-space:nowrap}
@media (max-width:760px){.m-cookie{bottom:calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom))}}
/* Пока выбор не сделан, баннер ЗАНИМАЕТ низ окна — и всё, что там оказалось, нажать нельзя:
на 768–1440 под ним стояли «Купити зараз», «Надіслати заявку», «Опублікувати коментар»
(22 случая из 35 в пробе work/m1-audit-20260919/ckcover.js). Лечится двумя вещами. (19.09.2026)
1) Место под баннер РЕЗЕРВИРУЕТСЯ: `scroll-padding-bottom` уводит цель прокрутки и якоря
выше баннера, отступ страницы даёт докрутить её низ. Величину меряет m1-core.js (--ck-h) —
это полоса ОТ НИЗА ОКНА до верха баннера: на телефоне он висит над панелью вкладок, и
одной его высоты не хватает. Назначать числом нельзя: зависит от длины текста и ширины. */
html.has-ck{scroll-padding-bottom:calc(var(--ck-h, 0px) + 24px)}
html.has-ck body{padding-bottom:calc(var(--ck-h, 0px) + 24px)}
/* 2) На широком экране баннер — КАРТОЧКА В УГЛУ, а не полоса 720 px поперёк колонки: она
перекрывала правую колонку карточки товара целиком. В углу ширина 420 px, и колонка
действий (от ~630 px) свободна на всех проверенных ширинах. */
@media (min-width:1024px){
.m-cookie{left:var(--gut);transform:translate(0,160%);width:min(420px,calc(50vw - 2*var(--gut)));
padding:18px 20px;gap:14px}
.m-cookie.is-on{transform:translate(0,0)}
.m-cookie p{flex:1 1 100%;font-size:13.5px}
.m-cookie__act{width:100%}
.m-cookie__act .m-btn{flex:1 1 auto;justify-content:center}
}
@media (max-width:560px){
.m-cookie{padding:16px;gap:12px}
.m-cookie p{flex:1 1 100%;font-size:13.5px}
.m-cookie__act{width:100%}
.m-cookie__act .m-btn{flex:1 1 auto;justify-content:center}
}
/* гід: підсвічення справжнього елемента + картка з поясненням */
.m-guide{position:fixed;inset:0;z-index:1220;visibility:hidden;opacity:0;transition:opacity var(--slow),visibility 0s linear .55s}
.m-guide.is-on{visibility:visible;opacity:1;transition:opacity var(--slow),visibility 0s}
.m-guide__veil{position:absolute;inset:0;background:rgba(6,4,1,.76);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.m-guide__spot{position:absolute;border-radius:var(--r-md);pointer-events:none;
box-shadow:0 0 0 3px var(--gold),0 0 0 9999px rgba(6,4,1,.76),0 0 40px rgba(232,200,121,.45);
transition:top .4s var(--ease),left .4s var(--ease),width .4s var(--ease),height .4s var(--ease)}
.m-guide__card{position:absolute;width:min(360px,calc(100vw - 2*var(--gut)));padding:20px 22px;
border-radius:var(--r-md);border:1px solid var(--line-2);background:var(--surface-solid);
box-shadow:var(--sh-3);transition:top .4s var(--ease),left .4s var(--ease)}
.m-guide__card .m-kicker{display:block;margin-bottom:8px}
.m-guide__card h4{font-family:'Unbounded',sans-serif;font-size:17px;letter-spacing:-.02em;margin:0 0 8px}
.m-guide__card p{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2)}
.m-guide__nav{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.m-guide__nav .m-btn{flex:0 0 auto}
.m-guide__dots{display:flex;gap:6px;margin-inline:auto}
.m-guide__dots i{width:7px;height:7px;border-radius:50%;background:var(--line-2);transition:background var(--fast),width var(--fast)}
.m-guide__dots i.is-on{width:20px;border-radius:999px;background:var(--grad)}
.m-guide__skip{border:0;background:none;color:var(--mut);font:inherit;font-size:13px;cursor:pointer;padding:6px 2px}
.m-guide__skip:hover{color:var(--ink)}
@media (max-width:560px){
.m-guide__card{left:var(--gut)!important;width:calc(100vw - 2*var(--gut))}
.m-guide__nav{gap:8px}
.m-guide__nav .m-btn{flex:1 1 auto;justify-content:center}
.m-guide__dots{order:3;width:100%;justify-content:center;margin:4px 0 0}
}
.m-guide__open{border:0;background:none;color:var(--mut);font:inherit;cursor:pointer;padding:4px 2px}
.m-guide__open:hover{color:var(--gold)}
/* ---------------------------------------------------- службові відступи
Замінюють інлайнові style= у шаблонах: правило «стилі живуть у CSS» діє
незалежно від того, що CSP тут історично дозволяє 'unsafe-inline'.
Динамічні стилі (background-image з {foto}) лишаються інлайновими — їх
значення відоме лише рушію. Йдуть у кінці файлу навмисно: за однакової
ваги перемагає останнє правило, і утиліта переб'є відступ компонента. */
.m-mt-xs{margin-top:10px}.m-mt-s{margin-top:14px}.m-mt-m{margin-top:18px}.m-mt-l{margin-top:26px}
.m-mb-xs{margin-bottom:10px}.m-mb-s{margin-bottom:14px}.m-mb-m{margin-bottom:18px}.m-mb-l{margin-bottom:22px}
.m-center{text-align:center}
.m-center-block{margin:0 auto 22px}
.m-span-all{grid-column:1/-1}
.m-pad-xs{padding:8px 12px}
.m-sys--center{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
/* ------------------------------------------------- 3D-об'єктив (сторінка «Про мене»)
Полотно живе у своїй рамці з фіксованим співвідношенням: без висоти
WebGL-полотно схлопується в нуль, і модель «не вантажиться» без жодної
помилки. Показуємо лише на широкому екрані — див. m1-core.js. */
.m-lens3d{position:relative;aspect-ratio:1/1;width:min(420px,100%);margin-inline:auto;
opacity:0;transition:opacity .9s var(--ease)}
.m-lens3d.is-live{opacity:1}
.m-lens3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Сяйво НЕ виходить за коробку: від'ємний inset у псевдоелемента додається до
scrollWidth батька, і колонка героя «Про мене» ставала на 71 px ширшою за
сітку — саме так декорація й робить горизонтальну прокрутку. */
.m-lens3d::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
background:radial-gradient(circle at 50% 46%,rgba(232,200,121,.2),transparent 72%)}
.m-lens3d__cap{position:absolute;left:0;right:0;bottom:-6px;text-align:center;
font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);line-height:1.4}
@media (max-width:899px){.m-lens3d{display:none}}
/* --------------------------------------------- ряди без «блоків-сиріт»
Правило одне на всі сітки карток: якщо останній елемент лишається в ряду
САМ, він розтягується на весь ряд. Не ховаємо матеріал і не підганяємо
кількість у рушії — число карток на сторінці задають дані, а число колонок
змінюється на кожному брейкпоінті, і одне «скільки виводити» не може бути
правильним одразу для всіх ширин. */
/* Стрічка матеріалів: перша картка вдвічі ширша, і саме через неї ряд рветься.
Лікуємо НЕ розтягуванням останньої (її знімок 800 px, і на широку картку він
іде з двократним збільшенням — замір це ловить), а знімаємо подвійну ширину
з ПЕРШОЇ, коли кількість карток не дає повних рядів. Показуємо все, нічого
не збільшуємо, дірки в ряду немає. */
@media (min-width:981px){
.m-feed:has(> .m-post:last-of-type:nth-child(3n)) > .m-post.is-feature:first-child{grid-column:auto}
.m-feed:has(> .m-post:last-of-type:nth-child(3n)) > .m-post.is-feature:first-child .m-post__ph{aspect-ratio:4/3}
}
@media (max-width:980px) and (min-width:601px){
.m-feed:has(> .m-post:last-of-type:nth-child(2n)) > .m-post.is-feature:first-child{grid-column:auto}
.m-feed:has(> .m-post:last-of-type:nth-child(2n)) > .m-post.is-feature:first-child .m-post__ph{aspect-ratio:4/3}
}
/* «Схожі проєкти»: на двох колонках третя картка лишалась сама */
@media (max-width:760px) and (min-width:361px){
.m-rel__grid > *:nth-child(3):last-child{grid-column:span 2}
}
/* галерея фотосету: колонки задані явно, самотня остання плитка добирає ряд */
.pgallery{grid-template-columns:repeat(4,minmax(0,1fr))}
.pgallery > *:last-child:nth-child(4n+1){grid-column:span 4;aspect-ratio:auto}
@media (max-width:980px){
.pgallery{grid-template-columns:repeat(3,minmax(0,1fr))}
.pgallery > *:last-child:nth-child(4n+1){grid-column:auto}
.pgallery > *:last-child:nth-child(3n+1){grid-column:span 3}
}
@media (max-width:600px){
.pgallery{grid-template-columns:repeat(2,minmax(0,1fr))}
.pgallery > *:last-child:nth-child(3n+1){grid-column:auto}
.pgallery > *:last-child:nth-child(2n+1){grid-column:span 2}
}
/* `.m-link` — inline-flex, і коли він стоїть окремим останнім елементом картки,
його коробка (30 px) вища за рядковий бокс і вилазить нижче за батька:
на сторінці контактів посилання «Питання й відповіді» заходило на 17 px у
наступну секцію. Окремо стоячий робимо блоковим — тоді картка його вміщує. */
.m-card > .m-link, .m-prose > .m-link, .m-sec > .m-link, aside > .m-link{display:flex;width:fit-content}
/* Блок пошукових фраз починався впритул до останнього блока сторінки, і будь-який
зайвий піксель у формі коментаря (кнопка, капча) заходив на нього. Відступ тут
і потрібен за задумом: це інша за призначенням секція, а не продовження тексту. */
.seoq{margin-top:clamp(28px,4vw,56px)}
/* ------------------------------------------------------- рекламний слот Adgora
Стоїть ТІЛЬКИ на сторінках матеріалу (fullstory) і тільки у двох місцях —
розбір і причини в work/adgora-ready/PLAN.md. Висота НЕ резервується: показ
може не прийти взагалі, і гарантована дірка гірша за короткий зсув.
Порожній слот прибирає сам tag.js (hideSlot → display:none), а правило
:not(:has(.adgora *)) страхує випадок, коли скрипт заблоковано розширенням:
тоді на сторінці не лишається ні смуги, ні підпису «ad network» без реклами. */
.adgora-slot{margin:clamp(26px,3vw,40px) auto;max-width:min(100%,970px);text-align:center;
min-height:0;border-radius:var(--r-md);overflow:hidden}
.adgora-slot .adgora{display:block;width:100%;margin:0 auto;text-decoration:none}
.adgora-slot .adgora-label{display:none;font-size:10.5px;letter-spacing:.06em;color:var(--mut);
text-align:right;margin-top:6px;opacity:.75}
.adgora-slot .adgora-label[style*="display"]{display:block!important}
.adgora-slot:not(:has(.adgora *)){display:none}
.adgora-slot img{max-width:100%;height:auto}
@media print{.adgora-slot{display:none!important}}
/* Два пути с первого экрана (GA-017, 20.09.2026): зйомка возможна только в Харькове и только
моим временем, а фотосток доступен кому угодно и выдаётся сам. Посетитель не из Харькова
раньше не понимал за секунду, что здесь есть что купить. Сетка auto-fit, а не auto-fill:
одна карточка иначе рисуется узкой полосой (DESIGN.md §27). */
.h-paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px;margin-top:20px;max-width:720px}
.h-path{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--line-2);
background:var(--bg-3);color:inherit;text-decoration:none;transition:transform var(--fast),border-color var(--fast),box-shadow var(--fast)}
.h-path:hover,.h-path:focus-visible{transform:translateY(-3px);border-color:var(--gold);box-shadow:var(--sh-2)}
.h-path__k{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.h-path b{font-size:16px;line-height:1.25}
.h-path__d{font-size:13px;line-height:1.5;color:var(--ink-2)}
.h-path__p{margin-top:2px;font-size:12.5px;font-weight:700;color:var(--gold)}