/* Каталог и карточка товара для garmoniya8.
   Базовые токены, шапка, подвал и .product-card берём из index-CsHxbV3n.css —
   здесь только то, чего на главной нет: фасетный фильтр, сортировка, галерея. */

/* Базовая тема даёт 2px горизонтальной прокрутки на телефоне (декор в герое).
   clip, а не hidden — hidden ломает sticky-шапку. */
body { overflow-x: clip; }

/* ---------- блоки главной, доклеенные home9.js ---------- */

.format-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.format-card { background: #eef2e4; border-radius: 28px; min-height: 250px; padding: 32px; display: flex; flex-direction: column; position: relative; transition: transform .17s, background .17s; }
.format-card:nth-child(2) { background: #e2ecdf; }
.format-card:nth-child(3) { background: #e6e9ef; }
.format-card:hover { transform: translateY(-3px); }
.format-card h3 { margin: auto 0 10px; font-size: 32px; font-weight: 400; letter-spacing: -.03em; line-height: 1.05; }
.format-card p { color: #4f685d; font-size: 13px; margin: 0; max-width: 250px; }
.format-count { color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-top: 14px; }
.format-card .round-arrow { position: absolute; top: 28px; right: 28px; margin: 0; }
.format-card:hover .round-arrow { background: var(--ink); color: #fff; }

/* Картинка карточки (необязательная, из «Содержимое сайта → Удобный формат»):
   растянута на ВСЮ плашку (cover), а чтобы текст читался — поверх фото слева
   лежит белая вуаль-градиент (::after, только у карточек с картинкой). */
.format-card { overflow: hidden; }
.format-card > img, .format-card .gv-slider { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.format-card > img, .format-card .gv-slides img { object-fit: cover; object-position: center; }
.format-card .gv-slides, .format-card .gv-slides img { width: 100%; height: 100%; }
.format-card:has(> img, > .gv-slider)::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: linear-gradient(97deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.78) 34%, rgba(255,255,255,.36) 58%, rgba(255,255,255,0) 82%); }
.format-card > span, .format-card > h3, .format-card > p { position: relative; z-index: 1; }

/* «Корейский подход»: интро и плитки прибиты к своим ячейкам ЯВНО — случайный
   первый ребёнок секции (карандаш редактора без стилей, слайды фона) больше не
   сдвигает авторазмещение сетки. Реальный случай 2026-08-11: у залогиненного
   редактора инлайн-стили карандашей не применились, «✎» стал грид-ячейкой (1,1)
   и вытолкнул интро вправо, а плитки — вниз. */
.why-section > .why-intro { grid-area: 1 / 1; }
.why-section > .benefit-grid { grid-area: 1 / 2; }
@media (width <= 760px) {
	.why-section > .why-intro { grid-area: 1 / 1; }
	.why-section > .benefit-grid { grid-area: 2 / 1; }
}

/* Длинное слово «Концентрированная» на узких экранах вылезает из плитки и
   режется overflow'ом секции — переносы плюс кегль поменьше. */
.benefit-grid b { hyphens: auto; overflow-wrap: break-word; }
@media (width <= 1100px) { .benefit-grid b { font-size: 18px; } }

/* Страховка карандашей правки: копия вида из editor-ux.php (инлайн в wp_head).
   Инлайн у редактора однажды не применился — без позиционирования карандаш
   разваливает грид-секции. Дубль здесь держит вид в любом случае; посетителю
   не мешает (карандашей в его HTML нет вовсе). При правке вида карандаша —
   править ОБА места. */
.gv-pin {
	position: absolute; top: 14px; right: 14px; z-index: 45;
	display: inline-flex; align-items: center; gap: 7px;
	padding: 7px 13px; border-radius: 999px;
	background: #1d2327; color: #fff; text-decoration: none;
	font: 600 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	box-shadow: 0 6px 20px #0000002e; opacity: .35; transition: opacity .15s, transform .15s;
}
.gv-pin:hover, .gv-pin:focus { opacity: 1; transform: translateY(-1px); color: #fff; }
.gv-pin .gv-pin-t { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .18s; }
.gv-pin:hover .gv-pin-t, .gv-pin:focus .gv-pin-t { max-width: 300px; }
.footer-contacts .gv-pin { position: static; margin: 0 0 12px; opacity: .55; }
.footer-contacts .gv-pin .gv-pin-t { max-width: 300px; }
@media (max-width: 860px) { .gv-pin { display: none; } }

.brand-count { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
.all-link { white-space: nowrap; }
.footer-catalog { display: flex; flex-direction: column; gap: 10px; }
.footer-main.has-catalog { grid-template-columns: 1.5fr .9fr .7fr 1fr; gap: 54px; }
@media (width <= 1100px) { .footer-main.has-catalog { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (width <= 760px) { .footer-main.has-catalog { grid-template-columns: 1fr; } }

@media (width <= 1100px) { .format-grid { grid-template-columns: 1fr 1fr; } }
@media (width <= 760px) {
	.format-grid { grid-template-columns: 1fr; }
	.format-card { min-height: 190px; padding: 26px; }
	.format-card h3 { font-size: 27px; }
}

.shop-wrap { max-width: 1320px; margin: 0 auto; padding: 34px 32px 96px; }

/* Текущий раздел в шапке — подчёркнут постоянно. */
.site-header nav a.on { color: var(--ink); }
.site-header nav a.on:after { transform: translate(-50%) scaleX(1); }

/* Починка мобильной шапки базовой темы: у .site-header стоит backdrop-filter,
   а он делает шапку containing block для position:fixed — задуманное нижнее
   меню-таббар прилипало не к низу экрана, а к низу шапки и закрывало логотип.
   Ставим меню второй строкой шапки. */
@media (width <= 760px) {
	.site-header { grid-template-columns: 1fr auto; grid-template-rows: auto auto; height: auto; padding: 10px 18px 0; }
	.site-header .brand-lockup { grid-area: 1 / 1; }
	.site-header .header-cta { grid-area: 1 / 2; }
	.site-header nav { position: static; grid-area: 2 / 1 / 3 / 3; height: 46px; border-top: 1px solid var(--line); background: none; gap: 4px; }
	.site-header nav a { width: auto; flex: 1 1 0; font-size: 12px; }
}

.crumbs { color: var(--muted); font-size: 12px; display: flex; gap: 8px; align-items: center; }
.crumbs a:hover { color: var(--green); }
.crumbs span { color: #91a098; }

.page-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin: 18px 0 34px; }
.page-head h1 { margin: 0; font-size: clamp(38px, 4.6vw, 60px); font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.page-head .cnt { color: var(--muted); font-size: 12px; white-space: nowrap; padding-bottom: 6px; }

.cat-layout { display: grid; grid-template-columns: 262px minmax(0, 1fr); gap: 34px; align-items: start; }
/* Без этого горизонтальная лента сортировки распирает колонку на телефоне. */
.cat-layout > * { min-width: 0; }

/* ---------- фильтры ---------- */

.fside { position: sticky; top: 104px; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 20px 18px; }
.fhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.fhead b { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.fhead .reset { border: 0; background: none; color: var(--green); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; padding: 4px 0; }
.fhead .reset:disabled { color: #b3bfb8; cursor: default; }

.fgroup { border-top: 1px solid var(--line); padding: 12px 0 4px; }
.fgroup summary { list-style: none; cursor: pointer; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; padding: 4px 0; }
.fgroup summary::-webkit-details-marker { display: none; }
.fgroup summary:after { content: "+"; color: var(--muted); font-size: 15px; font-weight: 600; }
.fgroup[open] summary:after { content: "−"; }
.fbody { padding: 8px 0 10px; display: flex; flex-direction: column; gap: 2px; }

.fopt { display: grid; grid-template-columns: 17px 1fr auto; align-items: center; gap: 9px; padding: 6px 2px; border-radius: 10px; font-size: 13px; cursor: pointer; transition: background .14s; }
.fopt:hover { background: #f2f5ef; }
.fopt.off { color: #b3bfb8; cursor: default; }
.fopt input { width: 16px; height: 16px; margin: 0; accent-color: var(--green); cursor: pointer; }
.fopt.off input { cursor: default; }
.fopt .n { color: #97a69e; font-size: 11px; font-variant-numeric: tabular-nums; }


.fclose { display: none; }

/* ---------- сортировка и снятые фильтры ---------- */

.sortbar { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.sortbar button { border: 1px solid var(--line); background: #fff; color: #44584f; border-radius: 999px; min-height: 38px; padding: 0 16px; font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.sortbar button:hover { border-color: #18322940; }
.sortbar button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.sortbar .fbtn { display: none; margin-left: auto; background: var(--green); border-color: var(--green); color: #fff; font-weight: 750; }

.applied { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.applied:empty { margin: 0; }
.applied button { border: 1px solid #2f7d5840; background: #eaf3ec; color: var(--green-dark); border-radius: 999px; min-height: 32px; padding: 0 12px; font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
.applied button:after { content: " ×"; font-weight: 800; }
.applied button:hover { background: #dceadf; }

.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cat-grid .product-card { display: flex; flex-direction: column; }
.cat-grid .product-card .market-actions { margin-top: auto; }
.cat-grid .product-image { height: 300px; }
.cat-grid .product-card h3 a:hover { color: var(--green); }

.empty { border: 1px dashed var(--line); border-radius: 24px; padding: 60px 24px; text-align: center; color: var(--muted); font-size: 14px; }

/* ---------- карточка товара ---------- */

.prod { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 46px; margin: 22px 0 0; }
.gal .main { background: #f4f5f0; border-radius: 28px; height: 560px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gal .main img { width: 92%; height: 94%; object-fit: contain; }
.gal .thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.gal .thumbs button { border: 1px solid var(--line); background: #fff; border-radius: 16px; width: 78px; height: 78px; padding: 5px; cursor: pointer; overflow: hidden; transition: border-color .15s; }
.gal .thumbs button.on { border-color: var(--green); }
.gal .thumbs img { width: 100%; height: 100%; object-fit: contain; }

.pinfo h1 { margin: 14px 0 8px; font-size: clamp(28px, 3vw, 40px); font-weight: 700; letter-spacing: -.035em; line-height: 1.08; }
.pinfo .sub { color: var(--muted); font-size: 14px; }
.tagrow { display: flex; flex-wrap: wrap; gap: 8px; }
.tagn { background: #eaf3ec; color: var(--green-dark); border-radius: 999px; padding: 6px 12px; font-size: 11px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
/* Цены на витрине нет — вместо блока с числом сразу кнопки маркетплейсов.
   .price-note остался: он объясняет, ГДЕ смотреть цену, а не называет её. */
.price-note { color: var(--muted); font-size: 12px; margin: 22px 0 18px; }
.buyrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; max-width: 620px; }
.buyrow a { border-radius: 999px; min-height: 52px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; transition: transform .15s; }
.buyrow a:hover { transform: translateY(-2px); }
.buyrow .o { background: #1a5cff; color: #fff; }
.buyrow .w { background: linear-gradient(145deg, #8f1795, #cf2478); color: #fff; }
.buyrow .y { background: linear-gradient(145deg, #ffdb4d, #ffc61a); color: #1f1a10; }
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 24px 0 0; }
.tags i { border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; font-style: normal; font-size: 12px; color: #44584f; }
.specs { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 6px; }
.specs > div { display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); padding: 12px 2px; font-size: 13px; }
.specs span { color: var(--muted); }

.pdesc { max-width: 820px; margin: 64px 0 0; }
.pdesc h2 { font-size: 26px; font-weight: 700; letter-spacing: -.03em; margin: 0 0 12px; }
.pdesc p { color: #4f675d; font-size: 15px; line-height: 1.75; margin: 0; white-space: pre-line; }

.same-sec { margin-top: 72px; border-top: 1px solid var(--line); padding-top: 44px; }
.same-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.same-head h2 { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: -.035em; }

@media (width <= 1100px) {
	.shop-wrap { padding-left: 28px; padding-right: 28px; }
	.cat-layout { grid-template-columns: 232px minmax(0, 1fr); gap: 24px; }
	.cat-grid { grid-template-columns: repeat(2, 1fr); }
	.prod { grid-template-columns: 1fr; gap: 30px; }
	.gal .main { height: 440px; }
}

@media (width <= 760px) {
	.shop-wrap { padding: 20px 18px 96px; }
	/* На узком экране заголовок и подпись — в столбик, иначе подпись вылезает за край. */
	.page-head { margin-bottom: 20px; flex-direction: column; align-items: flex-start; gap: 6px; }
	.page-head .cnt { white-space: normal; padding-bottom: 0; }
	.cat-layout { grid-template-columns: 1fr; }
	.cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.cat-grid .product-image { height: 190px; }
	.cat-grid .product-card { padding: 9px 9px 13px; }
	.cat-grid .product-card h3 { font-size: 14px; min-height: 38px; }
	.sortbar .fbtn { display: block; }
	.sortbar { flex-wrap: nowrap; overflow-x: auto; margin: 0 -18px 14px; padding: 0 18px 4px; }
	.sortbar button { flex: 0 0 auto; }

	/* На телефоне фильтры — выезжающая панель. */
	.fside { position: fixed; inset: 0; z-index: 60; border-radius: 0; border: 0; overflow-y: auto; padding: 20px 18px 96px; display: none; }
	.fside.open { display: block; }
	.fclose { display: flex; position: fixed; bottom: 68px; left: 18px; right: 18px; z-index: 61; width: auto; }
	.gal .main { height: 340px; }
	.gal .thumbs button { width: 62px; height: 62px; }
	.buyrow { max-width: none; }
}

/* ---------- текстовые страницы: «О компании» и «Контакты» ---------- */

.prose { max-width: 820px; }
.prose .lead { font-size: 19px; line-height: 1.65; color: #3d5449; margin: 0 0 8px; }
.prose h2 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; letter-spacing: -.035em; margin: 52px 0 14px; }
.prose p { color: #4f675d; font-size: 15px; line-height: 1.75; margin: 0 0 14px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 22px 0 6px; }

.line-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 26px 0 8px; }
.line-card { background: #eef2e4; border-radius: 24px; padding: 26px; min-height: 210px; display: flex; flex-direction: column; position: relative; transition: transform .16s; }
.line-card:nth-child(2) { background: #e8e1ef; }
.line-card:nth-child(3) { background: #dcecee; }
.line-card:hover { transform: translateY(-3px); }
.line-card h3 { margin: auto 0 8px; font-size: 26px; font-weight: 400; letter-spacing: -.03em; }
.line-card p { color: #4f685d; font-size: 13px; margin: 0; line-height: 1.5; }
.line-card .round-arrow { position: absolute; top: 22px; right: 22px; margin: 0; }
.line-card:hover .round-arrow { background: var(--ink); color: #fff; }

.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 26px; }
.info-card { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; position: relative; min-height: 230px; transition: box-shadow .18s, transform .18s; }
a.info-card:hover { transform: translateY(-3px); box-shadow: 0 18px 50px #2748391a; }
.info-icon { font-size: 26px; }
.info-card h3 { margin: 18px 0 8px; font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.info-card b { font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.45; word-break: break-word; }
.info-card b a:hover { color: var(--green); }
.info-card p { color: var(--muted); font-size: 13px; margin: 12px 0 0; line-height: 1.5; }
.info-card .round-arrow { position: absolute; top: 24px; right: 24px; margin: 0; }
a.info-card:hover .round-arrow { background: var(--ink); color: #fff; }

.wholesale-block { background: #e8ecd9; border-radius: 34px; padding: 54px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; margin: 30px 0 0; }
.wholesale-block h2 { margin: 14px 0 12px; font-size: clamp(30px, 3.2vw, 44px); font-weight: 700; letter-spacing: -.04em; line-height: 1.02; }
.wholesale-block p { color: #4f675d; font-size: 15px; line-height: 1.7; margin: 0; max-width: 470px; }
.terms { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: #2f7d5824; border-radius: 22px; overflow: hidden; }
.terms li { background: #f3f6ea; padding: 20px 24px; display: flex; align-items: baseline; gap: 16px; }
.terms b { font-size: 21px; font-weight: 400; letter-spacing: -.02em; white-space: nowrap; min-width: 128px; }
.terms span { color: #4f675d; font-size: 13px; line-height: 1.45; }

.req-section { margin-top: 74px; border-top: 1px solid var(--line); padding-top: 40px; max-width: 900px; }
.req-section .section-heading { margin-bottom: 18px; }
.req-section .section-heading h2 { font-size: clamp(28px, 3vw, 40px); }

@media (width <= 1100px) {
	.line-grid, .info-grid { grid-template-columns: 1fr 1fr; }
	.wholesale-block { grid-template-columns: 1fr; gap: 32px; padding: 40px; }
}
@media (width <= 760px) {
	.line-grid, .info-grid { grid-template-columns: 1fr; }
	.wholesale-block { border-radius: 26px; padding: 28px 22px; }
	.terms li { flex-direction: column; gap: 4px; padding: 16px 18px; }
	.terms b { min-width: 0; }
	.prose h2 { margin-top: 40px; }
	.info-card { min-height: 0; padding: 22px; }
}

/* ---------- страницы, которые заказчик пишет сам в редакторе ---------- */

/* .pdesc держит white-space: pre-line — это верно для описания товара,
   пришедшего из кабинета одной строкой с переносами, но ломает вёрстку
   обычной страницы. Для страниц перекрываем. */
/* Текст читается в узкой колонке, а сетки и блоки-«плакаты» (линейки,
   контакты, опт, реквизиты) на прежней витрине шли во всю ширину — .prose их
   не оборачивал. Сохраняем это: колонку 820px держим только у текста, иначе
   таблица условий сминается в четыре строки на ячейку. */
.textpage { max-width: none; }
.textpage > p, .textpage > h2, .textpage > h3,
.textpage > ul:not(.terms), .textpage > ol, .textpage > .cta-row { max-width: 820px; }

.textpage p, .textpage li { white-space: normal; }
.textpage h2 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; letter-spacing: -.03em; margin: 40px 0 12px; }
.textpage h3 { font-size: 20px; font-weight: 700; margin: 28px 0 10px; }
.textpage ul, .textpage ol { color: #4f675d; font-size: 15px; line-height: 1.75; padding-left: 22px; }
.textpage li { margin: 0 0 8px; }
.textpage a { color: var(--green); font-weight: 600; }
.textpage img { border-radius: 20px; margin: 18px 0; }
.textpage table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 18px 0; }
.textpage td, .textpage th { border-bottom: 1px solid var(--line); padding: 10px 8px; text-align: left; }

.page-intro { color: #4f675d; font-size: 15px; line-height: 1.7; max-width: 820px; margin: -14px 0 26px; }

.pager { margin-top: 40px; display: flex; justify-content: center; }
.pager .page-numbers { border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; margin: 0 3px; font-size: 13px; font-weight: 650; }
.pager .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #fff; }

/* format-card: изображение занимает правую часть карточки с растворением левого края,
   текст слева получает гарантированную чистую зону (иначе cover кладёт продукт под текст) */
.format-card > img { left: auto; width: 62%; object-position: 65% center;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32%);
	mask-image: linear-gradient(90deg, transparent 0, #000 32%); }
.format-card h3 { max-width: 58%; }
.format-card p { max-width: 180px; }