/* Gardeniax — kertészeti webáruház. Fő stíluslap. */

:root{
  --bg: #f6f4ed;
  --ink: #1c2a20;
  --green: #2f6b45;
  --green-dark: #21402c;
  --green-darker: #1b3324;
  --green-mid: #2a4d35;
  --green-pale: #cfe0cb;
  --green-tint: #e9efe4;
  --green-tint-2: #eef1e8;
  --text-1: #1c2a20;
  --text-2: #2c3d30;
  --text-3: #3d4a3b;
  --text-4: #42513f;
  --text-5: #4d5a4a;
  --text-6: #5f6d5c;
  --text-7: #6b7a66;
  --text-8: #6f8f6a;
  --text-9: #87977f;
  --border-1: #e2ddcf;
  --border-2: #ddd8c8;
  --border-3: #d7d2c2;
  --border-4: #eee9dc;
  --border-5: #e8e3d4;
  --border-6: #cbc6b4;
  --card: #fffdf8;
  --input-bg: #fffefa;
  --cream-text: #f3f6ef;
  --cream-text-2: #eef3ea;
  --footer-text: #c8d6c2;
  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --placeholder: repeating-linear-gradient(135deg, #e8eee3 0 12px, #dbe4d5 12px 24px);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a{ color: var(--green); text-decoration: none; }
a:hover{ color: var(--green-dark); text-decoration: underline; }
p{ text-wrap: pretty; }
img{ max-width: 100%; display: block; }
h1,h2,h3{ font-family: var(--serif); }
button{ font-family: inherit; }

@keyframes gxfade{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform:none; } }

.skip-link{
  position: absolute; left: -9999px; top: 0; background:#fff; color:#000;
  padding: 10px 16px; z-index: 100; border-radius: 0 0 8px 0;
}
.skip-link:focus{ left: 0; }

.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* ---------- Promo bar ---------- */
.promo-bar{
  background: var(--green-dark); color:#e9f0e4; font-size:13px; letter-spacing:.04em;
  text-align:center; padding: 9px 16px; font-weight:500;
}

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index:40; background: rgba(246,244,237,.95);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-1);
}
.header-inner{
  max-width:1200px; margin:0 auto; padding:14px 28px;
  display:flex; align-items:center; gap:28px;
}
.brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.brand-mark{ width:30px; height:30px; border-radius:50% 50% 50% 4px; background: var(--green); flex: none; }
.brand-name{ font-family: var(--serif); font-size:23px; font-weight:600; letter-spacing:-.01em; color: var(--green-dark); }

.main-nav{ display:flex; align-items:center; gap:22px; font-size:14.5px; font-weight:500; }
.main-nav a{ color: var(--text-2); }
.main-nav a:hover{ color: var(--green); text-decoration:none; }
.main-nav a[aria-current="page"]{ color: var(--green); }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:38px; height:38px; border:1px solid var(--border-3); border-radius:10px;
  background: var(--card); cursor:pointer; flex:none; padding:0;
}
.nav-toggle span{ display:block; width:18px; height:2px; background: var(--green-dark); border-radius:2px; }

.cart-link{
  display:flex; align-items:center; gap:9px; cursor:pointer; background: var(--green);
  color:#fffdf8; padding:9px 16px; border-radius:999px; font-size:14px; font-weight:600;
  border: none;
}
.cart-link:hover{ background: var(--green-dark); text-decoration:none; color:#fffdf8; }
.cart-count{
  background:#fffdf8; color: var(--green-dark); min-width:21px; height:21px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
}

/* ---------- Buttons ---------- */
.btn{
  cursor:pointer; display:inline-block; border:none; text-align:center;
  font-family: var(--sans); font-weight:600; border-radius:999px; font-size:15px;
  padding:15px 28px;
}
.btn-primary{ background: var(--green); color:#fffdf8; }
.btn-primary:hover{ background: var(--green-dark); color:#fffdf8; text-decoration:none; }
.btn-outline{ border:1px solid var(--green-dark); color: var(--green-dark); background:transparent; }
.btn-outline:hover{ background: var(--green-tint); text-decoration:none; }
.btn-pale{ background: var(--green-pale); color: var(--green-dark); }
.btn-pale:hover{ background:#fffdf8; text-decoration:none; }
.btn-sm{ padding:8px 14px; border-radius:999px; font-size:13px; font-weight:700; background: var(--green-tint); color: var(--green-dark); border:none; cursor:pointer; }
.btn-sm:hover{ background: var(--green); color:#fffdf8; text-decoration:none; }

/* ---------- Layout helpers ---------- */
.container{ max-width:1200px; margin:0 auto; padding:0 28px; }
.container-1100{ max-width:1100px; margin:0 auto; padding:0 28px; }
.container-1000{ max-width:1000px; margin:0 auto; padding:0 28px; }
.container-820{ max-width:820px; margin:0 auto; padding:0 28px; }
.container-760{ max-width:760px; margin:0 auto; padding:0 28px; }
main{ flex:1; }

.eyebrow{
  display:inline-block; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--text-8); font-weight:700; margin-bottom:18px;
}

/* ---------- Hero ---------- */
.hero{
  max-width:1200px; margin:0 auto; padding:56px 28px 28px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
}
.hero h1{ font-size:58px; line-height:1.05; font-weight:500; margin:0 0 20px; letter-spacing:-.02em; color: var(--green-dark); }
.hero-lead{ font-size:18px; line-height:1.65; color: var(--text-4); margin:0 0 28px; max-width:520px; }
.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:32px; margin-top:38px; flex-wrap:wrap; }
.hero-stats .num{ font-family: var(--serif); font-size:26px; color: var(--green-dark); }
.hero-stats .lbl{ font-size:13px; color: var(--text-7); }

.hero-media{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:200px 150px; gap:14px; }
.hero-media .ph:first-child{ grid-column:1/-1; }
.ph{
  border-radius:16px; overflow:hidden; position:relative; background: var(--placeholder);
}
.ph img{ width:100%; height:100%; object-fit:cover; }
.ph-cap{
  position:absolute; left:12px; bottom:12px; font-family: ui-monospace, Menlo, monospace;
  font-size:11px; color:#5c6b57; background:#fffdf8cc; padding:4px 8px; border-radius:5px;
}

/* ---------- Feature grid ---------- */
.features{ max-width:1200px; margin:0 auto; padding:44px 28px; }
.features-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.feature-card{ background: var(--card); border:1px solid var(--border-1); border-radius:14px; padding:22px; }
.feature-dot{ width:26px; height:26px; border-radius:50% 50% 50% 4px; background: var(--green-pale); margin-bottom:14px; }
.feature-title{ font-weight:700; font-size:15px; margin-bottom:6px; }
.feature-text{ font-size:13.5px; line-height:1.6; color: var(--text-6); }

/* ---------- Section heading ---------- */
.section{ max-width:1200px; margin:0 auto; padding:32px 28px; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:22px; gap:16px; flex-wrap:wrap; }
.section h2{ font-size:34px; font-weight:500; margin:0 0 6px; color: var(--green-dark); }
.section-sub{ color: var(--text-6); margin:0; font-size:15.5px; }
.section-link{ cursor:pointer; font-weight:600; font-size:14.5px; color: var(--green); white-space:nowrap; }

/* ---------- Category grid ---------- */
.cat-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.cat-card{ display:block; border-radius:14px; overflow:hidden; background: var(--card); border:1px solid var(--border-1); }
.cat-card:hover{ border-color: var(--green); text-decoration:none; }
.cat-card .ph{ aspect-ratio:4/3; border-radius:0; }
.cat-card-body{ padding:14px; }
.cat-card-name{ font-weight:700; font-size:14.5px; margin-bottom:4px; color: var(--ink); }
.cat-card-count{ font-size:12.5px; color: var(--text-7); }

/* ---------- Product grid / cards ---------- */
.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.product-card{
  background: var(--card); border:1px solid var(--border-1); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column;
}
.product-card .ph{ aspect-ratio:1/1; border-radius:0; }
.product-body{ padding:16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.product-cat{ font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--text-9); font-weight:700; }
.product-name{ font-family: var(--serif); font-size:17.5px; line-height:1.3; color: var(--green-dark); }
.product-short{ font-size:13px; color: var(--text-7); line-height:1.55; flex:1; }
.product-stock{ font-size:12.5px; color: var(--green); font-weight:600; }
.product-row{ display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
.product-price{ font-weight:700; font-size:16px; color: var(--green-dark); }

/* ---------- CTA banner (home) ---------- */
.cta-banner{ max-width:1200px; margin:44px auto; padding:0 28px; }
.cta-banner-inner{
  background: var(--green-dark); border-radius:20px; padding:52px;
  display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center;
}
.cta-banner h2{ font-size:36px; font-weight:500; color: var(--cream-text); margin:0 0 16px; line-height:1.15; }
.cta-banner p{ color: var(--footer-text); font-size:16px; line-height:1.65; margin:0 0 24px; }
.cta-steps{ display:grid; gap:12px; }
.cta-step{ background: var(--green-mid); border-radius:12px; padding:18px; }
.cta-step-num{ color: var(--green-pale); font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; margin-bottom:6px; }
.cta-step-text{ color: var(--cream-text-2); font-size:15px; }

/* ---------- Articles ---------- */
.article-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.article-grid.two-col{ grid-template-columns:repeat(2,1fr); gap:22px; }
.article-card{ display:block; background: var(--card); border:1px solid var(--border-1); border-radius:14px; overflow:hidden; }
.article-card:hover{ border-color: var(--green); text-decoration:none; }
.article-card .ph{ aspect-ratio:16/9; border-radius:0; }
.article-card-body{ padding:18px; }
.article-grid.two-col .article-card-body{ padding:22px; }
.article-meta{ font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--text-9); font-weight:700; margin-bottom:8px; }
.article-title{ font-family: var(--serif); font-size:19px; line-height:1.3; color: var(--green-dark); margin-bottom:8px; }
.article-grid.two-col .article-title{ font-size:23px; line-height:1.25; }
.article-excerpt{ font-size:13.5px; color: var(--text-7); line-height:1.6; }
.article-grid.two-col .article-excerpt{ font-size:14.5px; color: var(--text-6); line-height:1.65; }

/* ---------- Reviews ---------- */
.reviews-section{ background: var(--green-tint-2); border-top:1px solid var(--border-1); border-bottom:1px solid var(--border-1); }
.reviews-grid{ max-width:1200px; margin:0 auto; padding:44px 28px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.review-card{ background: var(--card); border-radius:14px; padding:24px; }
.review-stars{ color: var(--green); letter-spacing:.2em; font-size:13px; margin-bottom:12px; }
.review-text{ font-family: var(--serif); font-style:italic; font-size:16.5px; line-height:1.6; color: var(--text-2); margin-bottom:14px; }
.review-name{ font-size:13px; color: var(--text-7); font-weight:600; }

/* ---------- Newsletter CTA (blog) ---------- */
.newsletter-cta{
  margin-top:34px; background: var(--green-dark); border-radius:16px; padding:34px;
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
.newsletter-cta h2{ font-size:26px; color: var(--cream-text); margin:0 0 8px; }
.newsletter-cta p{ color: var(--footer-text); font-size:15px; line-height:1.6; max-width:520px; margin:0; }
.newsletter-form{ display:flex; gap:10px; flex-wrap:wrap; }
.newsletter-form input[type="email"]{
  border:none; border-radius:999px; padding:13px 20px; font-size:14px; font-family: var(--sans); min-width:230px;
}
.newsletter-form button{
  cursor:pointer; background: var(--green-pale); color: var(--green-dark); border:none;
  padding:13px 24px; border-radius:999px; font-weight:700; font-size:14px; white-space:nowrap;
}
.newsletter-form button:hover{ background:#fffdf8; }
.form-note{ font-size:13px; color: var(--footer-text); margin-top:10px; width:100%; }

/* ---------- Page heading ---------- */
.page-head{ padding:44px 28px 12px; max-width:1200px; margin:0 auto; }
.page-head h1{ font-size:44px; font-weight:500; margin:0 0 10px; color: var(--green-dark); }
.page-head p{ color: var(--text-6); font-size:16px; margin:0 0 26px; max-width:680px; }

/* ---------- Shop filters ---------- */
.chip-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px; }
.chip{
  cursor:pointer; padding:10px 18px; border-radius:999px; font-size:14px; font-weight:600;
  border:1px solid var(--border-3); background: var(--card); color: var(--text-3);
}
.chip[aria-pressed="true"]{ background: var(--green); color:#fffdf8; border-color: var(--green); }

/* ---------- Info block (shop bottom) ---------- */
.info-panel{
  margin-top:40px; background: var(--card); border:1px solid var(--border-1); border-radius:16px;
  padding:32px; display:grid; grid-template-columns:1fr 1fr; gap:36px;
}
.info-panel h2{ font-size:25px; font-weight:500; margin:0 0 12px; color: var(--green-dark); }
.info-panel p{ font-size:14.5px; line-height:1.7; color: var(--text-5); margin:0 0 12px; }

/* ---------- Cart ---------- */
.cart-wrap{ max-width:1000px; margin:0 auto; padding:44px 28px 64px; }
.cart-wrap h1{ font-size:42px; font-weight:500; margin:0 0 26px; color: var(--green-dark); }
.cart-grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:26px; align-items:start; }
.cart-items{ background: var(--card); border:1px solid var(--border-1); border-radius:16px; overflow:hidden; }
.cart-row{
  display:grid; grid-template-columns:88px 1fr auto; gap:16px; padding:18px;
  border-bottom:1px solid var(--border-4); align-items:center;
}
.cart-row:last-child{ border-bottom:none; }
.cart-thumb{ width:88px; height:88px; border-radius:10px; background: var(--placeholder); overflow:hidden; }
.cart-thumb img{ width:100%; height:100%; object-fit:cover; }
.cart-item-name{ font-family: var(--serif); font-size:17px; color: var(--green-dark); margin-bottom:4px; }
.cart-item-meta{ font-size:12.5px; color: var(--text-9); margin-bottom:10px; }
.qty-row{ display:flex; align-items:center; gap:10px; }
.qty-btn{
  cursor:pointer; width:28px; height:28px; border-radius:8px; border:1px solid var(--border-3);
  display:flex; align-items:center; justify-content:center; font-weight:700; color: var(--green-dark);
  background: var(--card);
}
.qty-val{ min-width:22px; text-align:center; font-weight:700; }
.remove-link{ cursor:pointer; font-size:12.5px; color:#8a7b6b; margin-left:8px; text-decoration:underline; background:none; border:none; font-family:inherit; }
.cart-line-total{ font-weight:700; font-size:16px; color: var(--green-dark); }

.summary-box{ background: var(--card); border:1px solid var(--border-1); border-radius:16px; padding:24px; }
.summary-box h2{ font-family: var(--serif); font-size:21px; color: var(--green-dark); margin:0 0 18px; }
.summary-row{ display:flex; justify-content:space-between; font-size:14.5px; margin-bottom:10px; color: var(--text-5); }
.summary-note{ font-size:12.5px; color: var(--text-9); margin-bottom:16px; }
.summary-total{
  border-top:1px solid var(--border-4); padding-top:14px; display:flex; justify-content:space-between;
  font-weight:700; font-size:18px; color: var(--green-dark); margin-bottom:18px;
}
.summary-legal{ font-size:12px; color: var(--text-9); line-height:1.6; margin-top:14px; }
.btn-block{ display:block; width:100%; text-align:center; }

.cart-empty, .cart-success{
  background: var(--card); border:1px dashed var(--border-6); border-radius:16px; padding:52px; text-align:center;
}
.cart-success{ background: var(--green-tint); border:1px solid var(--green-pale); }
.cart-success h2{ font-family: var(--serif); font-size:28px; color: var(--green-dark); margin-bottom:10px; }
.cart-success p{ color: var(--text-5); font-size:15.5px; line-height:1.7; margin:0 auto 20px; max-width:520px; }
.cart-empty p{ color: var(--text-6); font-size:16px; margin:0 0 20px; }

/* ---------- Article page ---------- */
.article-page{ max-width:760px; margin:0 auto; padding:38px 28px 60px; }
.back-link{ cursor:pointer; font-size:13.5px; color: var(--green); font-weight:600; }
.article-page .article-meta{ margin:22px 0 12px; }
.article-page h1{ font-size:42px; line-height:1.14; font-weight:500; margin:0 0 18px; color: var(--green-dark); }
.article-page .lede{ font-size:19px; line-height:1.65; color: var(--text-5); margin:0 0 26px; }
.article-hero{ aspect-ratio:16/9; border-radius:16px; margin-bottom:30px; }
.article-block{ margin-bottom:26px; }
.article-block h2{ font-size:27px; font-weight:500; color: var(--green-dark); margin:0 0 12px; line-height:1.25; }
.article-block p{ font-size:16.5px; line-height:1.78; color: var(--text-3); margin:0 0 14px; }
.li-row{ display:flex; gap:12px; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--border-5); }
.li-dot{ width:9px; height:9px; border-radius:50% 50% 50% 2px; background: var(--green); margin-top:7px; flex:none; }
.li-text{ font-size:15.5px; line-height:1.6; color: var(--text-3); }
.ask-box{ background: var(--green-tint); border-radius:16px; padding:26px; margin-top:34px; }
.ask-box h2{ font-family: var(--serif); font-size:20px; color: var(--green-dark); margin-bottom:8px; }
.ask-box p{ font-size:14.5px; color: var(--text-5); line-height:1.65; margin-bottom:16px; }

/* ---------- About ---------- */
.about-wrap{ max-width:1000px; margin:0 auto; padding:44px 28px 60px; }
.about-wrap h1{ font-size:44px; font-weight:500; margin:0 0 18px; color: var(--green-dark); }
.about-lede{ font-size:18px; line-height:1.7; color: var(--text-5); margin:0 0 30px; max-width:720px; }
.about-split{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-bottom:36px; align-items:start; }
.about-split .ph{ aspect-ratio:4/3; }
.about-split h2{ font-size:26px; font-weight:500; color: var(--green-dark); margin:0 0 12px; }
.about-split p{ font-size:15px; line-height:1.7; color: var(--text-5); margin:0 0 12px; }
.stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:36px; }
.stat-card{ background: var(--card); border:1px solid var(--border-1); border-radius:14px; padding:24px; }
.stat-num{ font-family: var(--serif); font-size:30px; color: var(--green-dark); margin-bottom:6px; }
.stat-lbl{ font-size:14px; color: var(--text-6); line-height:1.6; }
.about-wrap h2.section-h{ font-size:30px; font-weight:500; color: var(--green-dark); margin:0 0 14px; }
.about-wrap > p{ font-size:16px; line-height:1.75; color: var(--text-3); margin:0 0 14px; }
.company-box{ background: var(--card); border:1px solid var(--border-1); border-radius:16px; padding:28px; margin-top:26px; }
.company-box h2{ font-size:24px; font-weight:500; color: var(--green-dark); margin:0 0 14px; }
.company-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 28px; font-size:14.5px; color: var(--text-5); line-height:1.6; }

/* ---------- Contact ---------- */
.contact-wrap{ max-width:1000px; margin:0 auto; padding:44px 28px 60px; }
.contact-wrap h1{ font-size:44px; font-weight:500; margin:0 0 12px; color: var(--green-dark); }
.contact-wrap > p{ color: var(--text-6); font-size:16px; margin:0 0 30px; max-width:640px; }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start; }
.contact-form-card{ background: var(--card); border:1px solid var(--border-1); border-radius:16px; padding:26px; }
.contact-form-card h2{ font-family: var(--serif); font-size:22px; color: var(--green-dark); margin:0 0 18px; }
.form-grid{ display:grid; gap:12px; }
.form-grid input[type="text"], .form-grid input[type="email"], .form-grid input[type="tel"], .form-grid textarea{
  border:1px solid var(--border-2); border-radius:10px; padding:13px 15px; font-size:14.5px;
  font-family: var(--sans); background: var(--input-bg); width:100%;
}
.form-grid textarea{ resize:vertical; }
.form-check{ display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color: var(--text-7); line-height:1.55; }
.form-check input{ margin-top:3px; }
.contact-side{ display:grid; gap:16px; }
.info-card{ background: var(--card); border:1px solid var(--border-1); border-radius:16px; padding:24px; }
.info-card h2{ font-family: var(--serif); font-size:20px; color: var(--green-dark); margin-bottom:14px; }
.info-card .lines{ font-size:14.5px; line-height:1.9; color: var(--text-5); }
.info-card .lines-loose{ font-size:14.5px; line-height:1.8; color: var(--text-5); }
.location-ph{ aspect-ratio:16/10; }
.form-status{ font-size:13.5px; margin-top:10px; }
.form-status.ok{ color: var(--green); font-weight:600; }
.form-status.err{ color:#a1442c; font-weight:600; }

/* ---------- FAQ ---------- */
.faq-wrap{ max-width:820px; margin:0 auto; padding:44px 28px 60px; }
.faq-wrap h1{ font-size:44px; font-weight:500; margin:0 0 12px; color: var(--green-dark); }
.faq-wrap > p{ color: var(--text-6); font-size:16px; margin:0 0 28px; }
.faq-list{ display:grid; gap:12px; }
.faq-item{ background: var(--card); border:1px solid var(--border-1); border-radius:14px; padding:0; }
.faq-q{
  cursor:pointer; width:100%; text-align:left; background:none; border:none; padding:20px 22px;
  display:flex; justify-content:space-between; gap:16px; align-items:center; font-family:inherit;
}
.faq-q-text{ font-weight:700; font-size:15.5px; color: var(--green-dark); }
.faq-sign{ color: var(--green); font-size:20px; font-weight:400; flex:none; }
.faq-a{ font-size:14.5px; line-height:1.75; color: var(--text-5); padding:0 22px 20px; display:none; }
.faq-item[data-open="true"] .faq-a{ display:block; }

/* ---------- Legal / doc pages ---------- */
.doc-wrap{ max-width:820px; margin:0 auto; padding:44px 28px 60px; }
.doc-wrap h1{ font-size:40px; line-height:1.15; font-weight:500; margin:0 0 10px; color: var(--green-dark); }
.doc-lead{ font-size:17px; line-height:1.7; color: var(--text-5); margin:0 0 8px; }
.doc-updated{ font-size:12.5px; color: var(--text-9); margin-bottom:30px; }
.doc-block{ margin-bottom:24px; }
.doc-block h2{ font-size:24px; font-weight:500; color: var(--green-dark); margin:0 0 10px; line-height:1.3; }
.doc-block p{ font-size:15.5px; line-height:1.78; color: var(--text-3); margin:0 0 12px; }
.doc-li-row{ display:flex; gap:11px; align-items:flex-start; padding:7px 0; }
.doc-li-dot{ width:8px; height:8px; border-radius:50% 50% 50% 2px; background: var(--green); margin-top:7px; flex:none; }
.doc-li-text{ font-size:15px; line-height:1.65; color: var(--text-3); }
.doc-help{ background: var(--green-tint); border-radius:14px; padding:22px; font-size:14px; line-height:1.7; color: var(--text-3); }

/* ---------- Footer ---------- */
.site-footer{ background: var(--green-darker); color: var(--footer-text); margin-top:auto; }
.footer-top{
  max-width:1200px; margin:0 auto; padding:52px 28px 26px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px;
}
.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-brand .brand-mark{ width:26px; height:26px; background: var(--green-pale); }
.footer-brand-name{ font-family: var(--serif); font-size:21px; color: var(--cream-text); }
.footer-about{ font-size:14px; line-height:1.7; margin:0 0 16px; max-width:300px; }
.footer-company{ font-size:13px; line-height:1.8; }
.footer-col-title{ color: var(--cream-text); font-weight:700; font-size:14px; margin-bottom:14px; }
.footer-links{ display:grid; gap:9px; font-size:14px; }
.footer-links a{ color: var(--footer-text); }
.footer-links a:hover{ color: var(--cream-text); text-decoration:none; }
.footer-bottom{ border-top:1px solid var(--green-mid); }
.footer-bottom-inner{
  max-width:1200px; margin:0 auto; padding:18px 28px; display:flex; justify-content:space-between;
  gap:20px; font-size:12.5px; flex-wrap:wrap;
}

/* ---------- Cookie banner ---------- */
.cookie-banner{
  position:fixed; left:20px; right:20px; bottom:20px; z-index:60; background: var(--card);
  border:1px solid var(--border-3); border-radius:16px; box-shadow:0 18px 44px rgba(28,42,32,.18);
  padding:22px 26px; display:flex; gap:24px; align-items:center; max-width:980px; margin:0 auto;
  animation: gxfade .3s ease;
}
.cookie-banner[hidden]{ display:none; }
.cookie-banner-text{ flex:1; }
.cookie-banner-title{ font-weight:700; font-size:15px; color: var(--green-dark); margin-bottom:6px; }
.cookie-banner-desc{ font-size:13.5px; line-height:1.65; color: var(--text-6); }
.cookie-banner-actions{ display:flex; gap:10px; flex:none; }
.btn-cookie-reject{
  cursor:pointer; border:1px solid var(--border-3); color: var(--text-3); background:none;
  padding:11px 18px; border-radius:999px; font-size:13.5px; font-weight:600; font-family:inherit;
}
.btn-cookie-reject:hover{ background: var(--green-tint-2); }
.btn-cookie-accept{
  cursor:pointer; background: var(--green); color:#fffdf8; border:none;
  padding:11px 22px; border-radius:999px; font-size:13.5px; font-weight:700; font-family:inherit;
}
.btn-cookie-accept:hover{ background: var(--green-dark); }

/* ---------- 404 ---------- */
.error-wrap{ max-width:700px; margin:0 auto; padding:90px 28px; text-align:center; }
.error-wrap .code{ font-family: var(--serif); font-size:100px; color: var(--green-pale); line-height:1; margin-bottom:10px; }
.error-wrap h1{ font-size:32px; color: var(--green-dark); margin:0 0 14px; }
.error-wrap p{ font-size:16px; color: var(--text-6); margin:0 0 26px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero{ grid-template-columns:1fr; padding:36px 22px 20px; }
  .hero h1{ font-size:42px; }
  .hero-media{ grid-template-rows: 170px 130px; }
  .features-grid{ grid-template-columns:repeat(2,1fr); }
  .cat-grid{ grid-template-columns:repeat(3,1fr); }
  .product-grid{ grid-template-columns:repeat(3,1fr); }
  .article-grid{ grid-template-columns:repeat(2,1fr); }
  .reviews-grid{ grid-template-columns:1fr; }
  .cta-banner-inner{ grid-template-columns:1fr; padding:32px; }
  .about-split{ grid-template-columns:1fr; }
  .stat-grid{ grid-template-columns:1fr; }
  .company-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .cart-grid{ grid-template-columns:1fr; }
  .info-panel{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; }

  .nav-toggle{ display:flex; }
  .main-nav{
    display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch;
    gap:0; background: var(--bg); border-bottom:1px solid var(--border-1); padding:8px 20px 16px;
    box-shadow:0 12px 24px rgba(28,42,32,.08);
  }
  .main-nav[data-open="true"]{ display:flex; }
  .main-nav a{ padding:12px 4px; border-bottom:1px solid var(--border-4); }
  .main-nav a:last-child{ border-bottom:none; }
  .header-inner{ position:relative; }
}

@media (max-width: 640px){
  .header-inner{ padding:12px 18px; gap:14px; }
  .brand-name{ font-size:19px; }
  .hero h1{ font-size:32px; }
  .hero-stats{ gap:22px; }
  .features-grid{ grid-template-columns:1fr; }
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .product-grid{ grid-template-columns:repeat(2,1fr); }
  .article-grid{ grid-template-columns:1fr; }
  .article-grid.two-col{ grid-template-columns:1fr; }
  .cart-row{ grid-template-columns:64px 1fr; }
  .cart-line-total{ grid-column:1/-1; text-align:right; }
  .newsletter-cta{ flex-direction:column; align-items:flex-start; }
  .newsletter-form{ width:100%; }
  .newsletter-form input[type="email"]{ flex:1; min-width:0; }
  .footer-top{ grid-template-columns:1fr; padding:40px 20px 20px; }
  .cookie-banner{ flex-direction:column; align-items:stretch; left:12px; right:12px; bottom:12px; padding:20px; }
  .cookie-banner-actions{ justify-content:stretch; }
  .cookie-banner-actions button{ flex:1; }
  .page-head, .cart-wrap, .about-wrap, .contact-wrap, .faq-wrap, .doc-wrap, .article-page{ padding-left:18px; padding-right:18px; }
  .hero, .features, .section, .cta-banner{ padding-left:18px; padding-right:18px; }
}