:root{
--ink:#161A1F;--slate:#242B34;--slateDeep:#1B212A;--steel:#C9CED4;
--steelDim:#9AA3AC;--paper:#F6F5F2;--paperDeep:#ECEAE5;
--copper:#8F5220;--copperSoft:#D9954A;--onDark:#F2F1EE;
--line:#D7D4CE;--lineDark:#39414B;
--display:"Fraunces",Georgia,serif;--text:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:16.5px;line-height:1.55}
img{max-width:100%;height:auto;display:block}
a{color:var(--copper)}
.cc-wrap{width:min(1560px,calc(100% - 40px));margin-inline:auto}
@media(max-width:700px){.cc-wrap{width:calc(100% - 24px)}}

/* шапка: тонкая, тёмная, знак слева и разделы строкой */
.cc-head{background:var(--ink);color:var(--onDark);position:sticky;top:0;z-index:20}
.cc-head-in{display:flex;align-items:center;gap:26px;min-height:58px;flex-wrap:wrap}
.cc-mark{font-family:var(--display);font-size:23px;letter-spacing:.5px;color:var(--onDark);text-decoration:none;display:flex;align-items:baseline;gap:8px}
.cc-mark small{font-family:var(--text);font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:var(--steelDim)}
.cc-nav{display:flex;gap:20px;flex-wrap:wrap;margin-left:auto}
.cc-nav a{color:var(--steel);text-decoration:none;font-size:14px;letter-spacing:.3px}
.cc-nav a:hover,.cc-nav a[aria-current]{color:var(--onDark)}
/* Телефон: шапка в ОДИН ряд. Чек-лист прямо запрещает шапку в три ряда, а
   прятать разделы под кнопку значит прятать сам ассортимент, поэтому строка
   разделов прокручивается вбок внутри себя. */
@media(max-width:900px){
  .cc-head-in{flex-wrap:nowrap;gap:12px;min-height:52px}
  .cc-nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:16px;margin-left:8px;padding-bottom:2px}
  .cc-nav::-webkit-scrollbar{display:none}
  .cc-nav a{white-space:nowrap;font-size:13px}
  .cc-mark{font-size:19px;flex:0 0 auto}
  .cc-mark small{display:none}
}

/* герой: сцена во всю полосу, текст на собственной тёмной подложке */
.cc-hero{position:relative;background:var(--slateDeep);color:var(--onDark)}
.cc-hero-img{position:absolute;inset:0}
.cc-hero-img img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.cc-hero-in{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:34px;align-items:end;padding:44px 0 30px;min-height:min(52svh,460px)}
.cc-hero-copy{background:linear-gradient(180deg,rgba(22,26,31,.10),rgba(22,26,31,.86) 42%);padding:20px 22px 18px;border-left:3px solid var(--copperSoft)}
.cc-hero h1{font-family:var(--display);font-size:clamp(30px,3.6vw,52px);line-height:1.04;margin:0 0 10px;max-width:16ch}
.cc-hero-sub{font-size:clamp(15px,1.25vw,18px);margin:0 0 12px;color:var(--onDark);max-width:52ch}
.cc-hero-spec{font-size:12.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--steel);margin:0 0 14px}
.cc-hero-note{font-size:12.5px;color:var(--steelDim);margin:12px 0 0}
.cc-hero-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
@media(max-width:900px){.cc-hero-in{grid-template-columns:1fr;min-height:auto;padding:26px 0 20px}}

/* полоса-раздел */
.cc-sec{padding:30px 0 22px;border-top:1px solid var(--line)}
.cc-sec.is-dark{background:var(--slate);color:var(--onDark);border-top:0}
.cc-sec.is-dark a{color:var(--copperSoft)}
.cc-kick{font-size:11.5px;letter-spacing:2.2px;text-transform:uppercase;color:var(--copper);margin:0 0 6px}
.cc-sec.is-dark .cc-kick{color:var(--copperSoft)}
.cc-h2{font-family:var(--display);font-size:clamp(21px,2.3vw,32px);line-height:1.12;margin:0 0 10px}
.cc-lede{font-size:16.5px;margin:0 0 14px;max-width:none}
.cc-cols{columns:2;column-gap:38px}
.cc-cols p{margin:0 0 .8em;break-inside:avoid}
@media(max-width:900px){.cc-cols{columns:1}}
.cc-two{display:grid;grid-template-columns:1fr 1fr;gap:0 34px}
.cc-three{display:grid;grid-template-columns:repeat(3,1fr);gap:0 30px}
/* min-width:0 у ячеек сетки: по умолчанию у них auto, и обёртка таблицы
   отказывается сжиматься меньше своего содержимого, растягивая страницу шире
   экрана. На телефоне это вылезало как горизонтальная прокрутка. */
.cc-two>*,.cc-three>*,.cc-hero-in>*{min-width:0}
@media(max-width:900px){.cc-two,.cc-three{grid-template-columns:1fr;gap:18px}}

/* полка товаров */
.cc-shelf{padding:12px 0 16px}
.cc-shelf-label{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--steelDim);border-bottom:1px solid var(--line);padding-bottom:5px;margin:0 0 12px}
.cc-grid{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.cc-grid>*{flex:0 1 calc((100% - 3*16px)/4);min-width:0}
@media(max-width:1100px){.cc-grid>*{flex-basis:calc((100% - 2*16px)/3)}}
@media(max-width:800px){.cc-grid>*{flex-basis:calc((100% - 16px)/2)}}

/* карточка: кадр на бумаге, факты строкой, цена и кнопка всегда видны */
.cc-card{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;gap:5px;padding:10px;min-width:0}
.cc-card-shot{aspect-ratio:4/3;background:var(--paperDeep);display:flex;align-items:center;justify-content:center;overflow:hidden}
.cc-card-shot img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.cc-card-name{font-family:var(--display);font-size:16px;line-height:1.15;margin:2px 0 0}
.cc-card-facts{font-size:12px;color:var(--steelDim);margin:0;display:flex;gap:8px;flex-wrap:wrap}
.cc-card-price{font-family:var(--display);font-size:21px;margin:6px 0 0}
.cc-card-rating{font-size:12.5px;color:var(--ink);margin:0}
.cc-card{position:relative}
/* Кнопка прижата к НИЗУ карточки: имя товара бывает в одну и в две строки, и
   без этого кнопки в ряду стоят на разной высоте («пляшут», замечание
   владельца 28.08). */
.cc-card .cc-buy{margin-top:auto;align-self:stretch}
.cc-card-price{margin-top:auto}

/* кнопка покупки: надпись картинкой (чек-лист), фон медный на тёмном */
.cc-buy{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);border:1px solid var(--ink);padding:9px 14px;text-decoration:none;transition:background .15s}
.cc-buy:hover{background:var(--slate)}
.cc-buy img{height:15px;width:auto}
.cc-link{color:var(--copper);text-decoration:none;border-bottom:1px solid currentColor;font-size:14px}

/* таблицы */
/* Таблица на телефоне прокручивается ВНУТРИ своей обёртки, а не тянет всю
   страницу шире экрана: overflow-x:hidden на body запрещён чек-листом, он
   прячет содержимое вместо того, чтобы его показать. */
.cc-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.cc-table{width:100%;border-collapse:collapse;font-size:14px;margin:10px 0 6px}
@media(max-width:700px){.cc-table{min-width:560px}}
.cc-table th,.cc-table td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.cc-table th{font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--steelDim);font-weight:600}
.cc-sec.is-dark .cc-table th,.cc-sec.is-dark .cc-table td{border-color:var(--lineDark)}
.cc-sec.is-dark .cc-table th{color:var(--steel)}

/* галерея */
/* Галерея: РОВНАЯ сетка. Прежнее чередование широких и узких плиток давало
   несимметричный ряд на восьми кадрах (замечание владельца 28.08): сумма
   спанов не делилась на число колонок, и справа оставалась дыра. */
.cc-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.cc-gallery figure{margin:0}
.cc-gallery img{width:100%;aspect-ratio:1/1;object-fit:cover}
@media(max-width:900px){.cc-gallery{grid-template-columns:repeat(2,1fr)}}

/* длинный материал. Текст идёт ДВУМЯ КОЛОНКАМИ во всю полосу: узкая колонка
   прозы с пустотой справа запрещена правилом владельца 22.08. Заголовки,
   таблицы, цитаты и врезки перекрывают обе колонки. */
.cc-article{columns:2;column-gap:46px}
@media(max-width:1000px){.cc-article{columns:1}}
.cc-article p{margin:0 0 .85em;break-inside:avoid}
.cc-article h2,.cc-article .cc-tablewrap,.cc-article .cc-quote,.cc-article .cc-inset,.cc-article figure,.cc-article .cc-more{column-span:all;break-inside:avoid}
.cc-lead-figure{margin:0 0 18px}
.cc-lead-figure img{width:100%;max-height:min(56svh,520px);object-fit:cover;object-position:50% 45%}
.cc-lead-figure figcaption{font-size:12.5px;color:#6d7681;margin-top:6px}

/* длинный материал: цитата, врезка товара, ссылки между гидами */
.cc-quote{margin:18px 0;padding:14px 18px;border-left:3px solid var(--copper);background:var(--paperDeep)}
.cc-quote blockquote{margin:0;font-family:var(--display);font-size:19px;line-height:1.35}
.cc-quote figcaption{font-size:12.5px;color:#6d7681;margin-top:8px}
.cc-inset{margin:18px 0;padding:14px;border:1px solid var(--line);background:#fff;display:grid;grid-template-columns:minmax(0,260px) 1fr;gap:16px;align-items:start}
.cc-inset .cc-card{border:0;padding:0}
.cc-inset p{margin:0}
@media(max-width:700px){.cc-inset{grid-template-columns:1fr}}
.cc-facts{margin:8px 0 12px;padding-left:18px}
.cc-facts li{margin:0 0 .35em}
.cc-more{margin:10px 0}
.cc-sec p{max-width:none}

/* подвал */
.cc-foot{background:var(--ink);color:var(--onDark);padding:24px 0 18px;margin-top:26px}
.cc-foot a{color:var(--steel);text-decoration:none}
.cc-foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:18px}
.cc-foot h2{font-size:11.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--steelDim);margin:0 0 8px}
.cc-foot ul{list-style:none;margin:0;padding:0;font-size:14px;line-height:1.9}
.cc-foot-note{font-size:12.5px;color:var(--steelDim);margin:14px 0 0}
@media(max-width:900px){.cc-foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cc-foot-grid{grid-template-columns:1fr}}