/*
Theme Name: Polder
Theme URI: https://navaris-nl.nl/
Author: Navaris NL redactie
Author URI: https://navaris-nl.nl/
Description: Catalogusthema voor de Nederlandse Navaris-collectie. Petrolgroene accenten, rustig grijs en tegels met een smalle kleurrand.
Version: 1.5
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: polder
Tags: e-commerce, blog, two-columns, custom-menu, featured-images
*/

@font-face {
  font-family: 'Lexend';
  src: url('assets/fonts/lexend-var.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: 'Commissioner';
  src: url('assets/fonts/commissioner-var.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-display: swap;
}

:root {
  --nn-teal: #0f8f8c;
  --nn-teal-d: #0a6a68;
  --nn-teal-l: #e3f2f1;
  --nn-ink: #24292b;
  --nn-ink-2: #4e5a58;
  --nn-paper: #f5f7f7;
  --nn-white: #ffffff;
  --nn-line: #dde5e4;
  --nn-mark: #7c7e7d;
  --nn-green: #1e7d43;
  --nn-amber: #8f6a1c;
  --nn-gray: #74807e;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Commissioner', system-ui, sans-serif;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--nn-ink);
  background: var(--nn-paper);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--nn-teal); }
a:hover { color: var(--nn-teal-d); }
h1, h2, h3, h4, .site-title { font-family: 'Lexend', system-ui, sans-serif; line-height: 1.25; }
h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 23px; font-weight: 650; }
h3 { font-size: 18px; font-weight: 600; }
.nn-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── шапка ── */
.site-header { background: var(--nn-white); border-bottom: 3px solid var(--nn-teal); }
.nn-top { display: flex; align-items: center; gap: 26px; padding: 14px 20px; max-width: 1120px; margin: 0 auto; }
.site-branding { display: flex; align-items: center; gap: 10px; }
.custom-logo-link { display: block; }
.custom-logo { height: 44px; width: auto; }
.site-title { font-size: 24px; font-weight: 750; margin: 0; }
.site-title a { color: var(--nn-ink); text-decoration: none; }
.site-description { font-size: 12.5px; color: var(--nn-ink-2); display: none; }
.main-navigation { margin-left: auto; }
.main-navigation ul { list-style: none; display: flex; gap: 4px; flex-wrap: wrap; }
.main-navigation a {
  display: block; padding: 7px 12px; text-decoration: none; color: var(--nn-ink-2);
  font-family: 'Lexend', sans-serif; font-size: 14px; font-weight: 500; border-radius: 7px;
}
.main-navigation a:hover { background: var(--nn-teal-l); color: var(--nn-teal-d); }
.main-navigation .current-menu-item > a { background: var(--nn-teal); color: #fff; }
.nn-menu-toggle {
  display: none; margin-left: auto; background: var(--nn-teal); color: #fff; border: 0;
  border-radius: 8px; padding: 8px 14px; font: 600 14px 'Lexend', sans-serif; cursor: pointer;
}
@media (max-width: 860px) {
  .nn-menu-toggle { display: block; }
  .main-navigation { display: none; width: 100%; margin: 0; }
  .main-navigation.is-open { display: block; }
  .main-navigation ul { flex-direction: column; padding-bottom: 10px; }
  .nn-top { flex-wrap: wrap; }
}

/* ── герой ── */
.nn-hero { background: #eef0f1; border-bottom: 1px solid var(--nn-line); }
.nn-hero-in { display: grid; grid-template-columns: 1.1fr 1fr; gap: 34px; align-items: center; padding: 44px 20px; max-width: 1120px; margin: 0 auto; }
.nn-hero h1 { font-size: 34px; color: var(--nn-ink); }
.nn-hero p { margin-top: 14px; color: var(--nn-ink-2); max-width: 46em; }
.nn-hero-tag { display: inline-block; background: var(--nn-teal); color: #fff; font: 600 13px 'Lexend', sans-serif; padding: 4px 12px; border-radius: 99px; margin-bottom: 14px; }
.nn-hero-facts { list-style: none; margin-top: 18px; }
.nn-hero-facts li { padding: 3px 0 3px 28px; position: relative; color: var(--nn-ink-2); font-size: 15px; }
.nn-hero-facts li::before {
  content: '\2713'; position: absolute; left: 0; top: 3px; width: 20px; height: 20px;
  background: var(--nn-teal); color: #fff; border-radius: 50%; font-size: 12px;
  line-height: 20px; text-align: center;
}
.nn-hero-img { border-radius: 12px; overflow: hidden; border: 1px solid var(--nn-line); background: #fff; }
.nn-hero-img img { width: 100%; object-fit: cover; }
@media (max-width: 860px) { .nn-hero-in { grid-template-columns: 1fr; padding: 32px 20px; } .nn-hero h1 { font-size: 27px; } }

/* ── trust-полоса ── */
.nn-trust { background: var(--nn-white); border-bottom: 1px solid var(--nn-line); }
.nn-trust-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding: 26px 20px; max-width: 1120px; margin: 0 auto; }
.nn-trust h3 { font-size: 15px; color: var(--nn-teal-d); }
.nn-trust h3::before { content: '\25c6'; color: var(--nn-teal); font-size: 10px; margin-right: 7px; vertical-align: 2px; }
.nn-trust p { font-size: 13.5px; color: var(--nn-ink-2); margin-top: 5px; }
@media (max-width: 860px) { .nn-trust-in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .nn-trust-in { grid-template-columns: 1fr; } }

/* ── цифры каталога ── */
.nn-numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 6px 0 4px; }
.nn-num { background: var(--nn-white); border: 1px solid var(--nn-line); border-radius: 10px; padding: 16px 18px; text-align: center; }
.nn-num b { display: block; font: 750 32px 'Lexend', sans-serif; color: var(--nn-teal); }
.nn-num span { font-size: 13.5px; color: var(--nn-ink-2); }
@media (max-width: 700px) { .nn-numbers { grid-template-columns: 1fr 1fr; } }

/* ── таблица линеек ── */
.nn-lines { width: 100%; border-collapse: collapse; background: var(--nn-white); border: 1px solid var(--nn-line); border-radius: 10px; overflow: hidden; }
.nn-lines th { background: var(--nn-teal-l); color: var(--nn-teal-d); font: 600 14px 'Lexend', sans-serif; text-align: left; padding: 11px 16px; }
.nn-lines td { padding: 11px 16px; border-top: 1px solid var(--nn-line); font-size: 14.5px; color: var(--nn-ink-2); vertical-align: top; }
.nn-lines td:first-child { font-family: 'Lexend', sans-serif; font-weight: 600; color: var(--nn-ink); white-space: nowrap; }
.nn-lines td:first-child a { color: var(--nn-teal-d); text-decoration: none; }
.nn-lines td:first-child a:hover { text-decoration: underline; }
.nn-lines-scroll { overflow-x: auto; }
@media (max-width: 700px) { .nn-lines td, .nn-lines th { padding: 9px 12px; } }

/* ── чек-лист качеств ── */
.nn-check { list-style: none; max-width: 52em; }
.nn-check li { padding: 8px 0 8px 32px; position: relative; color: var(--nn-ink-2); border-bottom: 1px dashed var(--nn-line); }
.nn-check li:last-child { border-bottom: 0; }
.nn-check li::before {
  content: '\2713'; position: absolute; left: 0; top: 10px; width: 21px; height: 21px;
  background: var(--nn-teal-l); color: var(--nn-teal-d); border-radius: 50%;
  font-size: 12px; font-weight: 700; line-height: 21px; text-align: center;
}
.nn-check li b { color: var(--nn-ink); }

/* ── методология редакции ── */
.nn-method { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; padding: 4px 0; }
.nn-method-step { background: var(--nn-white); border: 1px solid var(--nn-line); border-radius: 10px; padding: 18px 20px; counter-increment: step; }
.nn-method-step h3 { font-size: 15.5px; color: var(--nn-ink); }
.nn-method-step h3::before {
  content: counter(step); display: inline-block; width: 24px; height: 24px; margin-right: 9px;
  background: var(--nn-teal); color: #fff; border-radius: 50%; font-size: 13px;
  line-height: 24px; text-align: center;
}
.nn-method-step p { font-size: 14px; color: var(--nn-ink-2); margin-top: 8px; }
@media (max-width: 700px) { .nn-method { grid-template-columns: 1fr; } }

/* ── секции ── */
.nn-section { padding: 36px 0 8px; }
.nn-sec-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.nn-sec-head h2 { color: var(--nn-ink); }
.nn-sec-head .nn-sec-line { flex: 1; height: 1px; background: var(--nn-line); }
.nn-sec-head a { font: 600 14px 'Lexend', sans-serif; text-decoration: none; white-space: nowrap; }

/* ── карточки ── */
.nn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: 20px; }
.nn-card {
  background: var(--nn-white); border: 1px solid var(--nn-line); border-top: 3px solid var(--nn-teal);
  border-radius: 10px; overflow: hidden; display: flex; flex-direction: column;
}
.nn-card-ph { height: 210px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 14px; }
.nn-card-ph img { max-height: 100%; width: auto; object-fit: contain; }
.nn-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.nn-card-name { font-family: 'Lexend', sans-serif; font-size: 15.5px; font-weight: 600; margin: 0; }
.nn-card-name a { color: var(--nn-ink); text-decoration: none; }
.nn-card-name a:hover { color: var(--nn-teal); }
.nn-card-short { font-size: 13.5px; color: var(--nn-ink-2); margin-top: 6px; }
.nn-card-meta { margin-top: auto; padding-top: 12px; }
.nn-price { font-family: 'Lexend', sans-serif; font-size: 19px; font-weight: 700; color: var(--nn-ink); }
.nn-rate { font-size: 13px; color: var(--nn-ink-2); margin-top: 3px; }
.nn-rate .nn-stars { color: #d78a00; letter-spacing: 1px; }
.nn-chip { display: inline-block; font: 600 11.5px 'Lexend', sans-serif; padding: 2px 9px; border-radius: 99px; margin-top: 7px; }
.nn-chip-in { background: #e5f3ea; color: var(--nn-green); }
.nn-chip-sc { background: #f7efdc; color: var(--nn-amber); }
.nn-chip-ad { background: #ebefee; color: var(--nn-gray); }
.nn-card-act { display: flex; gap: 8px; margin-top: 12px; }

/* ── кнопки ── */
.nn-btn {
  display: inline-block; text-align: center; text-decoration: none; cursor: pointer;
  font: 600 14px 'Lexend', sans-serif; padding: 10px 18px; border-radius: 8px; border: 0;
}
.nn-btn-buy { background: var(--nn-teal); color: #fff; flex: 1; }
.nn-btn-buy:hover { background: var(--nn-teal-d); color: #fff; }
.nn-btn-more { background: var(--nn-teal-l); color: var(--nn-teal-d); }
.nn-btn-more:hover { background: #d2e9e7; color: var(--nn-teal-d); }

/* ── категория ── */
.nn-cat-lead { font-size: 18px; color: var(--nn-ink-2); max-width: 46em; margin: 10px 0 26px; }
.nn-outro { background: var(--nn-white); border-left: 4px solid var(--nn-teal); border-radius: 0 10px 10px 0; padding: 22px 26px; margin: 34px 0 8px; }
.nn-outro p { max-width: 52em; color: var(--nn-ink-2); }

/* ── PDP ── */
.nn-crumbs { font-size: 13px; color: var(--nn-gray); padding: 16px 0 0; }
.nn-crumbs a { color: var(--nn-gray); text-decoration: none; }
.nn-crumbs a:hover { color: var(--nn-teal); }
.nn-product { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; padding: 22px 0 10px; align-items: start; }
.nn-product-media { background: var(--nn-white); border: 1px solid var(--nn-line); border-radius: 12px; padding: 26px; display: flex; align-items: center; justify-content: center; min-height: 380px; }
.nn-product-media img { max-height: 420px; width: auto; object-fit: contain; }
.nn-product-info h1 { font-size: 26px; }
.nn-product-info .nn-rate { font-size: 14px; margin-top: 8px; }
.nn-buybox { background: var(--nn-white); border: 1px solid var(--nn-line); border-radius: 12px; padding: 20px 22px; margin-top: 18px; }
.nn-buybox .nn-price { font-size: 28px; }
.nn-buybox .nn-btn-buy { display: block; margin-top: 14px; }
.nn-buybox-note { font-size: 12.5px; color: var(--nn-gray); margin-top: 10px; }
.nn-short { margin-top: 16px; color: var(--nn-ink-2); }
@media (max-width: 860px) { .nn-product { grid-template-columns: 1fr; } .nn-product-media { min-height: auto; } }

.nn-essay { max-width: 52em; padding: 10px 0; }
.nn-essay p { margin: 14px 0; }
.nn-essay p:first-child::first-letter {
  font-family: 'Lexend', sans-serif; font-weight: 750; font-size: 44px; line-height: .9;
  color: var(--nn-teal); float: left; padding: 4px 10px 0 0;
}
.nn-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 14px 0 30px; }
.nn-feat { background: var(--nn-white); border: 1px solid var(--nn-line); border-left: 4px solid var(--nn-teal); border-radius: 0 10px 10px 0; padding: 18px 20px; }
.nn-feat h3 { color: var(--nn-teal-d); }
.nn-feat h3::before { content: '\25c6'; color: var(--nn-mark); font-size: 9px; margin-right: 8px; vertical-align: 2px; }
.nn-feat p { font-size: 14.5px; color: var(--nn-ink-2); margin-top: 7px; }
@media (max-width: 700px) { .nn-feats { grid-template-columns: 1fr; } }

/* ── документы ── */
.nn-doc { max-width: 52em; padding: 26px 0 34px; }
.nn-doc h1 { margin-bottom: 10px; }
.nn-doc h2 { margin: 26px 0 8px; color: var(--nn-teal-d); }
.nn-doc p { margin: 10px 0; color: var(--nn-ink-2); }
.nn-doc .nn-email {
  display: inline-block; background: var(--nn-teal-l); border-radius: 8px; padding: 10px 18px;
  font: 600 16px 'Lexend', sans-serif; color: var(--nn-teal-d); margin: 8px 0; text-decoration: none;
}

/* ── 404 ── */
.nn-404 { text-align: center; padding: 70px 20px; }
.nn-404 .nn-404-code { font: 750 84px 'Lexend', sans-serif; color: var(--nn-teal); }
.nn-404 p { color: var(--nn-ink-2); margin: 12px 0 22px; }

/* ── подвал ── */
.site-footer { background: var(--nn-ink); color: #aeb8b6; margin-top: 40px; }
.nn-foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; padding: 36px 20px 26px; max-width: 1120px; margin: 0 auto; }
.nn-foot h3 { color: #fff; font-size: 15px; margin-bottom: 10px; }
.nn-foot ul { list-style: none; }
.nn-foot li { margin: 6px 0; }
.nn-foot a { color: #aeb8b6; text-decoration: none; font-size: 14px; }
.nn-foot a:hover { color: #fff; }
.nn-foot p { font-size: 13.5px; }
.nn-foot-brand { font: 750 20px 'Lexend', sans-serif; color: #fff; }
.nn-foot-brand b { color: #4db8b5; }
.site-info { border-top: 1px solid #3a4244; padding: 16px 20px; }
.site-info .nn-wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 12.5px; color: #93a09e; }
@media (max-width: 860px) { .nn-foot { grid-template-columns: 1fr; } }