/* Nordik Wellness — Shared Stylesheet
   Auto-extracted from index.php. Also used by single-product.php.
*/

/* ─── RESET & BASE ─────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --cream:       #f5f0e8;
      --cream-light: #faf7f2;
      --charcoal:    #1e1e1c;
      --charcoal-md: #3a3a37;
      --charcoal-lt: #6b6b65;
      --green-dark:  #2b3d2f;
      --green-mid:   #3d5440;
      --white:       #ffffff;
      --border:      rgba(30,30,28,0.12);
      --font-serif:  'Cormorant Garamond', Georgia, serif;
      --font-sans:   'Inter', system-ui, sans-serif;
      --max-w:       1200px;
      --section-v:   96px;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font-sans);
      font-size: 16px;
      line-height: 1.65;
      color: var(--charcoal);
      background: var(--cream-light);
      -webkit-font-smoothing: antialiased;
    }

    img { display: block; max-width: 100%; height: auto; }
    a   { color: inherit; text-decoration: none; }

    .container {
      width: min(var(--max-w), 100% - 48px);
      margin-inline: auto;
    }

    h1, h2, h3, h4, h5 {
      font-family: var(--font-serif);
      font-weight: 400;
      line-height: 1.2;
      letter-spacing: -0.01em;
    }
    h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
    h2 { font-size: clamp(1.9rem, 3.5vw, 2.8rem); }
    h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
    h5 { font-size: 1.1rem; }

    p { font-size: 0.9375rem; color: var(--charcoal-md); max-width: 60ch; }

    .btn {
      display: inline-block;
      padding: 13px 32px;
      font-family: var(--font-sans);
      font-size: 0.8125rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      cursor: pointer;
      border: none;
      transition: background 0.2s, color 0.2s, transform 0.15s;
    }
    .btn:hover { transform: translateY(-1px); }
    .btn-dark { background: var(--charcoal); color: var(--cream-light); }
    .btn-dark:hover { background: var(--green-dark); }
    .btn-outline { background: transparent; color: var(--charcoal); border: 1px solid var(--charcoal); }
    .btn-outline:hover { background: var(--charcoal); color: var(--cream-light); }
    .btn-outline-light { background: transparent; color: var(--cream-light); border: 1px solid rgba(245,240,232,0.6); }
    .btn-outline-light:hover { background: rgba(245,240,232,0.15); }

    /* HEADER */
    .site-header {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      background: rgba(250,247,242,0.96);
      backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--border);
      transition: box-shadow 0.2s;
    }
    .site-header.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.07); }
    .nav-inner { display: flex; align-items: center; height: 72px; gap: 0; }
    .nav-logo { flex-shrink: 0; }
    .nav-logo img { height: 36px; width: auto; }
    .nav-links { flex: 1; display: flex; justify-content: center; align-items: center; gap: 32px; list-style: none; }
    .nav-links a { font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--charcoal-md); transition: color 0.15s; }
    .nav-links a:hover { color: var(--charcoal); }
    .nav-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
    .nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; margin-left: 16px; }
    .nav-toggle span { display: block; width: 24px; height: 1.5px; background: var(--charcoal); }

    /* HERO */
    .hero { position: relative; height: 100svh; min-height: 600px; overflow: hidden; }
    .hero-bg {
      position: absolute; inset: 0;
      background:
        linear-gradient(to bottom, rgba(20,22,18,0.42) 0%, rgba(20,22,18,0.18) 50%, rgba(20,22,18,0.55) 100%),
        url('https://nordikwellness.com/wp-content/uploads/2026/01/slider-1-scaled.jpg') center/cover no-repeat;
    }
    .hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding-bottom: 80px; }
    .hero-content h1 { color: var(--cream-light); font-weight: 300; font-style: italic; max-width: 14ch; margin-bottom: 20px; text-shadow: 0 2px 24px rgba(0,0,0,0.25); }
    .hero-content p { color: rgba(245,240,232,0.88); font-size: 1rem; max-width: 46ch; margin-bottom: 36px; }
    .hero-btns { display: flex; gap: 16px; flex-wrap: wrap; }

    .section { padding-block: var(--section-v); }
    .section-label { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--charcoal-lt); margin-bottom: 16px; }

    /* PRODUCTS SECTION */
    .products-section { background: var(--cream); padding-block: var(--section-v); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
    .product-category { margin-top: 64px; }
    .product-category:first-of-type { margin-top: 48px; }
    .category-header { display: flex; align-items: baseline; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border); margin-bottom: 28px; }
    .category-header h3 { font-family: var(--font-serif); font-size: clamp(1.4rem, 2.5vw, 1.9rem); font-weight: 400; color: var(--charcoal); margin: 0; }
    .category-coming-soon { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-light); background: var(--charcoal-lt); padding: 4px 10px; border-radius: 2px; white-space: nowrap; }
    .products-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .product-card { background: var(--cream-light); border: 1px solid var(--border); overflow: hidden; display: flex; flex-direction: column; }
    .product-card-image { display: block; overflow: hidden; flex-shrink: 0; }
    .product-card-image img { width: 100%; height: auto; display: block; transition: transform 0.6s ease; }
    .product-card:hover .product-card-image img { transform: scale(1.04); }
    .product-card-body { padding: 24px 24px 28px; display: flex; flex-direction: column; flex: 1; }
    .product-card-body .card-series { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--charcoal-lt); margin-bottom: 8px; }
    .product-card-body h4 { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 400; color: var(--charcoal); margin-bottom: 10px; }
    .product-card-body p { font-size: 0.9rem; color: var(--charcoal-md); line-height: 1.65; margin-bottom: 20px; flex: 1; max-width: none; }
    .product-card-body .btn { align-self: flex-start; }
    /* Coming soon card overlay */
    .product-card.is-coming-soon { position: relative; }
    .product-card.is-coming-soon .product-card-image { opacity: 0.45; filter: grayscale(30%); }
    .product-card.is-coming-soon .product-card-body { opacity: 0.55; }
    .coming-soon-label { position: absolute; top: 16px; left: 16px; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-light); background: var(--charcoal); padding: 5px 12px; }

    /* LANGUAGE SWITCHER */
    .lang-switcher { display: flex; align-items: center; gap: 0; border: 1px solid var(--border); border-radius: 3px; overflow: hidden; flex-shrink: 0; }
    .lang-btn { background: none; border: none; padding: 5px 9px; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; cursor: pointer; color: var(--charcoal-lt); font-family: var(--font-sans); transition: background 0.15s, color 0.15s; line-height: 1; }
    .lang-btn + .lang-btn { border-left: 1px solid var(--border); }
    .lang-btn.active { background: var(--charcoal); color: var(--cream-light); }
    .lang-btn:not(.active):hover { background: var(--cream); color: var(--charcoal); }


    /* PULL QUOTE */
    .pull-quote { background: var(--green-dark); color: var(--cream-light); padding-block: var(--section-v); text-align: center; }
    .pull-quote blockquote { font-family: var(--font-serif); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 300; font-style: italic; line-height: 1.4; max-width: 28ch; margin-inline: auto; margin-bottom: 28px; }
    .pull-quote cite { font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,240,232,0.6); font-style: normal; }

    /* FEATURE SECTIONS */
    .feature-section { display: grid; grid-template-columns: 1fr 1fr; min-height: 640px; }
    .feature-section.reverse .feature-image { order: -1; }
    .feature-image { overflow: hidden; background: var(--charcoal); }
    .feature-image img { width: 100%; height: 100%; object-fit: cover; }
    .feature-text { background: var(--cream); display: flex; flex-direction: column; justify-content: center; padding: 72px 64px; }
    .feature-text h2 { margin-bottom: 20px; }
    .feature-text p { margin-bottom: 0; }

    /* BANNER */
    .banner-section { position: relative; min-height: 440px; overflow: hidden; display: flex; align-items: center; }
    .banner-bg {
      position: absolute; inset: 0;
      background:
        linear-gradient(to right, rgba(20,22,18,0.72) 0%, rgba(20,22,18,0.3) 60%, transparent 100%),
        url('https://nordikwellness.com/wp-content/uploads/2026/01/man-1024x348.jpg') center/cover no-repeat;
    }
    .banner-content { position: relative; z-index: 2; color: var(--cream-light); padding-block: 80px; }
    .banner-content .section-label { color: rgba(245,240,232,0.6); }
    .banner-content h2 { margin-bottom: 16px; max-width: 16ch; }
    .banner-content p { color: rgba(245,240,232,0.82); margin-bottom: 36px; }

    /* ABOUT / WHY */
    .why-section { background: var(--cream); }
    .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 48px; margin-top: 56px; }
    .why-item h5 { font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px; color: var(--green-dark); }
    .why-item p { font-size: 0.875rem; max-width: none; }

    /* PROCESS */
    .process-section { background: var(--cream-light); }
    .process-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 56px; }
    .process-step { background: var(--cream); padding: 48px 40px; border: 1px solid var(--border); }
    .step-number { font-family: var(--font-serif); font-size: 3rem; font-weight: 300; color: var(--border); line-height: 1; margin-bottom: 20px; }
    .process-step h5 { font-family: var(--font-sans); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; margin-bottom: 12px; }
    .process-step p { font-size: 0.875rem; max-width: none; }

    /* FAQ */
    .faq-section { background: var(--cream); }
    .faq-list { margin-top: 48px; }
    .faq-item { border-top: 1px solid var(--border); }
    .faq-item:last-child { border-bottom: 1px solid var(--border); }
    .faq-q { display: flex; justify-content: space-between; align-items: center; padding: 24px 0; cursor: pointer; gap: 16px; font-family: var(--font-serif); font-size: 1.15rem; font-weight: 400; color: var(--charcoal); list-style: none; }
    .faq-q::after { content: '+'; font-size: 1.4rem; font-weight: 300; flex-shrink: 0; color: var(--charcoal-lt); transition: transform 0.2s; }
    details[open] .faq-q::after { transform: rotate(45deg); }
    .faq-a { padding: 0 0 24px; font-size: 0.9rem; color: var(--charcoal-md); }

    /* CONTACT */
    .contact-section { background: var(--cream-light); }
    .contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; align-items: center; margin-top: 56px; }
    .contact-offices { display: flex; flex-direction: column; gap: 40px; }
    .office-card { padding: 32px; background: var(--cream); border: 1px solid var(--border); }
    .office-card h5 { font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-dark); font-weight: 500; margin-bottom: 16px; }
    .office-card address { font-style: normal; font-size: 0.875rem; line-height: 1.8; color: var(--charcoal-md); }
    .office-card a { color: var(--green-mid); border-bottom: 1px solid rgba(61,84,64,0.3); }
    .office-card a:hover { color: var(--green-dark); border-color: var(--green-dark); }
    .contact-form h3 { margin-bottom: 8px; }
    .contact-form > p { margin-bottom: 32px; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .form-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
    .form-field label { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; color: var(--charcoal-lt); }
    .form-field input, .form-field textarea, .form-field select { width: 100%; padding: 13px 16px; background: var(--cream); border: 1px solid var(--border); font-family: var(--font-sans); font-size: 0.9375rem; color: var(--charcoal); outline: none; transition: border-color 0.15s; -webkit-appearance: none; }
    .form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--green-mid); }
    .form-field textarea { resize: vertical; min-height: 120px; }
    .form-submit { margin-top: 8px; }
    .form-submit .btn { width: 100%; text-align: center; padding: 16px 32px; }
    .form-notice { margin-top: 16px; font-size: 0.875rem; display: none; }
    .form-notice.success { color: var(--green-mid); display: block; }
    .form-notice.error { color: #b84040; display: block; }

    /* FOOTER */
    .site-footer { background: var(--charcoal); color: var(--cream-light); padding-block: 72px 40px; }
    .footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 56px; border-bottom: 1px solid rgba(245,240,232,0.1); }
    .footer-brand img { height: 32px; width: auto; display: block; }
/* Same light chip treatment as the Chamber logo, so both read consistently */
.footer-brand-link { display: inline-flex; align-items: center; background: #FAF7F2;
  border-radius: 4px; padding: 10px 16px; margin-bottom: 20px; transition: opacity 0.15s; }
.footer-brand-link:hover { opacity: 0.85; }
    .footer-brand p { font-size: 0.8125rem; color: rgba(245,240,232,0.55); max-width: 30ch; }
    .footer-col h6 { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; color: rgba(245,240,232,0.45); margin-bottom: 16px; }
    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .footer-col a { font-size: 0.875rem; color: rgba(245,240,232,0.7); transition: color 0.15s; }
    .footer-col a:hover { color: var(--cream-light); }
    .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 32px; font-size: 0.75rem; color: rgba(245,240,232,0.35); }

    /* MOBILE */
    @media (max-width: 900px) {
      :root { --section-v: 64px; }

      /* Nav */
      .nav-inner { justify-content: space-between; }
      .nav-links, .nav-actions { display: none; }
      .nav-toggle { display: flex; }

      /* Mobile nav — open state (class toggled by JS) */
      .nav-links.mobile-open {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        top: 72px; left: 0; right: 0;
        background: var(--cream-light);
        padding: 0 24px 8px;
        gap: 0;
        border-bottom: 1px solid var(--border);
        box-shadow: 0 8px 32px rgba(0,0,0,0.07);
        z-index: 99;
      }
      .nav-links.mobile-open li {
        border-bottom: 1px solid var(--border);
      }
      .nav-links.mobile-open a {
        display: block;
        padding: 18px 0;
        font-size: 0.8125rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--charcoal) !important;
      }
      /* Actions (CTA + lang switcher) hidden on mobile */
      .nav-actions { display: none !important; }

      /* Product cards — single column on mobile */
      .products-row { grid-template-columns: 1fr; gap: 16px; }
      .product-category { margin-top: 48px; }
      .product-card-body { padding: 20px 20px 24px; }

      /* Feature sections */
      .feature-section { grid-template-columns: 1fr; }
      .feature-section.reverse .feature-image { order: 0; }
      .feature-image { aspect-ratio: 3/2; min-height: auto; }
      .feature-text { padding: 48px 32px; }

      /* Banner */
      .banner-section { min-height: 380px; }
      .banner-bg { background-position: 70% center; }
      .banner-content { padding-block: 64px; }
      .banner-content h2 { max-width: none; }

      /* About */
      .why-grid { grid-template-columns: 1fr 1fr; }

      /* Process / Contact / Footer */
      .process-steps { grid-template-columns: 1fr; }
      .contact-grid { grid-template-columns: 1fr; gap: 48px; }
      .form-row { grid-template-columns: 1fr; }
      .footer-top { grid-template-columns: 1fr 1fr; }
      .footer-brand { grid-column: 1/-1; }
      .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
    }

    @media (max-width: 600px) {
      :root { --section-v: 48px; }
      .container { width: calc(100% - 32px); }

      /* Hero */
      .hero-content { padding-bottom: 56px; }
      .hero-btns { flex-direction: column; }
      .hero-btns .btn { text-align: center; }

      /* Features */
      .feature-text { padding: 40px 24px; }
      .feature-image { aspect-ratio: 4/3; }

      /* Banner */
      .banner-section { min-height: 320px; }
      .banner-content p { max-width: none; }

      /* About — override inline grid */
      #about .container > div { grid-template-columns: 1fr !important; gap: 40px !important; }
      .why-grid { grid-template-columns: 1fr !important; margin-top: 0 !important; }

      /* Pull quote */
      .pull-quote { padding-block: 56px; }

      /* Process */
      .process-step { padding: 36px 28px; }

      /* Footer */
      .footer-top { grid-template-columns: 1fr; }
    }


/* ─── DESKTOP HEADER REFINEMENT ─────────────────────── */
/* Widens header container to ~1300px so logo shifts ~50px left,
   CTA/lang-switcher ~50px right, while content stays at 1200px  */
.site-header .container {
  width: min(1500px, 100% - 16px);
}
@media (min-width: 901px) {
  .nav-links { gap: 44px; }
}

/* Mobile: lang switcher visible inside hamburger menu */
@media (max-width: 900px) {
  .nav-links.mobile-open .lang-switcher {
    display: flex !important;
    padding: 18px 0 8px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
  }
}
/* ─── TRUE NAV CENTERING (grid: 1fr auto 1fr) ────────── */
/* Replaces flex layout so nav is centred relative to viewport,
   not skewed by the unequal logo vs actions widths           */
@media (min-width: 901px) {
  .nav-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 72px;
  }
  .nav-logo  { justify-self: start; }
  .nav-links { display: flex; justify-content: center; align-items: center; gap: 44px; list-style: none; }
  .nav-actions { justify-self: end; display: flex; align-items: center; gap: 12px; }
}


/* Partner / chamber logo — light chip so the official colours stay legible on the dark footer */
.footer-partner { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 16px 20px; padding-top: 40px; }
.footer-partner a { display: inline-flex; align-items: center; background: #FAF7F2; border-radius: 4px; padding: 10px 16px; transition: opacity 0.15s; }
.footer-partner a:hover { opacity: 0.85; }
.footer-partner img { display: block; height: 34px; width: auto; max-width: 100%; }
.footer-partner #koda-logo { height: 62px; }
@media (max-width: 640px) { .footer-partner { padding-top: 32px; gap: 12px; } .footer-partner img { height: 26px; } .footer-partner #koda-logo { height: 48px; } }


/* ─── Completed Projects — single-page gallery ───────────────────────── */
.project-gallery-page .pg-intro { max-width: 620px; color: var(--charcoal-lt, #6b6b65); margin: 0 0 96px; font-size: 1.0625rem; line-height: 1.7; }
.pg-cat { margin: 0 0 120px; }
.pg-cat:last-child { margin-bottom: 40px; }
.pg-cat-title { font-family: var(--font-serif); font-size: 2rem; font-weight: 400; margin: 0 0 40px;
  padding-bottom: 20px; border-bottom: 1px solid var(--border, #dcd8d0); }
.pg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.pg-item { display: block; overflow: hidden; background: var(--cream, #f1efe8); cursor: zoom-in; }
.pg-item img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  transition: transform 0.6s cubic-bezier(0.2,0.6,0.2,1); }
.pg-item:hover img { transform: scale(1.04); }

.pg-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(20,20,18,0.95);
  display: flex; align-items: center; justify-content: center; }
.pg-lightbox[hidden] { display: none; }
.pg-lb-img { max-width: 92vw; max-height: 88vh; object-fit: contain; display: block; }
.pg-lightbox button { position: absolute; background: none; border: none; color: rgba(250,247,242,0.8);
  cursor: pointer; font-family: var(--font-sans); line-height: 1; padding: 12px; transition: color 0.15s; }
.pg-lightbox button:hover { color: #fff; }
.pg-close { top: 20px; right: 28px; font-size: 40px; }
.pg-prev { left: 16px; font-size: 56px; }
.pg-next { right: 16px; font-size: 56px; }

@media (max-width: 900px) { .pg-grid { gap: 28px; } .pg-cat { margin-bottom: 88px; } .pg-cat-title { font-size: 1.6rem; margin-bottom: 28px; } }
@media (max-width: 600px) { .pg-grid { grid-template-columns: 1fr; gap: 20px; } .pg-cat { margin-bottom: 72px; }
  .project-gallery-page .pg-intro { margin-bottom: 64px; } .pg-prev, .pg-next { font-size: 40px; } }


/* ─── Completed Projects — product link beneath each gallery card ─── */
.pg-card { margin: 0; display: flex; flex-direction: column; }
.pg-card figcaption { margin-top: 12px; }
.pg-card-link { display: inline-block; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted, #6b6b65); text-decoration: none; border-bottom: 1px solid currentColor;
  padding-bottom: 2px; transition: color 0.2s; }
.pg-card-link:hover, .pg-card-link:focus-visible { color: var(--ink, #1e1e1c); }


/* ─── Completed Projects — model overview cards and detail pages ─── */
.pg-preview { display: block; overflow: hidden; background: var(--cream, #f1efe8); }
.pg-preview img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  transition: transform 0.6s cubic-bezier(0.2,0.6,0.2,1); }
.pg-preview:hover img { transform: scale(1.04); }
.pg-card-title { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 400; margin: 0 0 10px; }

.pg-back { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.pg-back:hover, .pg-back:focus-visible { border-bottom-color: currentColor; }
.pg-eyebrow { font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted, #6b6b65); margin: 0 0 10px; }
.pg-grid-single { grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.pg-product-cta { margin: 48px 0 0; }

@media (max-width: 900px) { .pg-grid-single { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 600px) { .pg-grid-single { grid-template-columns: 1fr; gap: 16px; } }

/* --- BLOG -----------------------------------------------------------
   Listing (/blog/) and single post. Reuses the existing tokens, type
   scale and .btn styles - no new visual language.                     */

.nw-blog .nw-blog-intro { max-width: 620px; color: var(--charcoal-lt, #6b6b65);
  margin: 0 0 72px; font-size: 1.0625rem; line-height: 1.7; }

.nw-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 40px; }
.nw-post-card { display: flex; flex-direction: column; }
.nw-post-thumb { display: block; overflow: hidden; background: var(--cream, #f5f0e8); margin-bottom: 22px; }
.nw-post-thumb img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  transition: transform 0.6s cubic-bezier(0.2,0.6,0.2,1); }
.nw-post-thumb:hover img { transform: scale(1.04); }
.nw-post-body { display: flex; flex-direction: column; flex: 1; }
.nw-post-date { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--charcoal-lt, #6b6b65); margin: 0 0 10px; }
.nw-post-title { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 400;
  line-height: 1.25; margin: 0 0 12px; }
.nw-post-title a { color: inherit; text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.nw-post-title a:hover, .nw-post-title a:focus-visible { border-bottom-color: currentColor; }
.nw-post-excerpt { color: var(--charcoal-lt, #6b6b65); font-size: 0.95rem; line-height: 1.7; margin: 0 0 18px; }
.nw-post-more { margin-top: auto; align-self: flex-start; font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--charcoal, #1e1e1c);
  text-decoration: none; border-bottom: 1px solid var(--charcoal, #1e1e1c); padding-bottom: 3px; }
.nw-post-more:hover { color: var(--green-dark, #2b3d2f); border-bottom-color: var(--green-dark, #2b3d2f); }
.nw-blog-empty { color: var(--charcoal-lt, #6b6b65); font-size: 1.0625rem; }

.nw-blog-pager { margin-top: 72px; padding-top: 32px; border-top: 1px solid var(--border, #dcd8d0); }
.nw-blog-pager .nav-links { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.nw-blog-pager a, .nw-blog-pager .current { font-size: 0.9rem; color: var(--charcoal, #1e1e1c); text-decoration: none; }
.nw-blog-pager .current { font-weight: 600; }
.nw-blog-pager a:hover { color: var(--green-dark, #2b3d2f); }

/* -- Single post -- */
.nw-article .nw-article-title { max-width: 20ch; margin: 0 0 14px; }
.nw-article-meta { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--charcoal-lt, #6b6b65); margin: 0 0 40px; }
.nw-article-hero { margin: 0 0 56px; }
.nw-article-hero img { width: 100%; height: auto; display: block; }

.nw-article-body { max-width: 68ch; font-size: 1.0625rem; line-height: 1.75; color: var(--charcoal-md, #3a3a37); }
.nw-article-body > *:first-child { margin-top: 0; }
.nw-article-body p { margin: 0 0 24px; }
.nw-article-body h2 { font-family: var(--font-serif); font-size: 1.85rem; font-weight: 400;
  line-height: 1.25; color: var(--charcoal, #1e1e1c); margin: 56px 0 18px; }
.nw-article-body h3 { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 400;
  line-height: 1.3; color: var(--charcoal, #1e1e1c); margin: 36px 0 12px; }
.nw-article-body ul, .nw-article-body ol { margin: 0 0 24px; padding-left: 22px; }
.nw-article-body li { margin-bottom: 9px; }
.nw-article-body a { color: var(--green-dark, #2b3d2f); text-decoration: none;
  border-bottom: 1px solid rgba(43,61,47,0.35); transition: border-color 0.2s; }
.nw-article-body a:hover, .nw-article-body a:focus-visible { border-bottom-color: var(--green-dark, #2b3d2f); }
.nw-article-body strong { color: var(--charcoal, #1e1e1c); font-weight: 600; }
.nw-article-body img { max-width: 100%; height: auto; display: block; margin: 32px 0; }
.nw-article-body figure { margin: 32px 0; }
.nw-article-body figcaption { font-size: 0.85rem; color: var(--charcoal-lt, #6b6b65); margin-top: 10px; }
.nw-article-body blockquote { margin: 32px 0; padding-left: 22px;
  border-left: 2px solid var(--border, #dcd8d0); color: var(--charcoal-lt, #6b6b65); font-style: italic; }
.nw-article-body table { width: 100%; border-collapse: collapse; margin: 0 0 28px; font-size: 0.95rem; }
.nw-article-body th, .nw-article-body td { text-align: left; padding: 11px 12px;
  border-bottom: 1px solid var(--border, #dcd8d0); vertical-align: top; }
.nw-article-body th { font-weight: 600; color: var(--charcoal, #1e1e1c); }

.nw-article-cta { max-width: 68ch; margin: 72px 0 0; padding: 40px; background: var(--cream, #f5f0e8); }
.nw-article-cta h2 { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 400; margin: 0 0 12px; }
.nw-article-cta p { color: var(--charcoal-lt, #6b6b65); line-height: 1.7; margin: 0 0 24px; }

@media (max-width: 1000px) { .nw-blog-grid { grid-template-columns: repeat(2, 1fr); gap: 44px 32px; } }
@media (max-width: 640px) {
  .nw-blog-grid { grid-template-columns: 1fr; gap: 44px; }
  .nw-blog .nw-blog-intro { margin-bottom: 48px; }
  .nw-post-title { font-size: 1.35rem; }
  .nw-article .nw-article-title { max-width: none; }
  .nw-article-meta { margin-bottom: 28px; }
  .nw-article-hero { margin-bottom: 36px; }
  .nw-article-body { font-size: 1rem; }
  .nw-article-body h2 { font-size: 1.55rem; margin: 40px 0 14px; }
  .nw-article-body h3 { font-size: 1.2rem; }
  .nw-article-body table { display: block; overflow-x: auto; }
  .nw-article-cta { padding: 28px 22px; margin-top: 52px; }
}

/* ---- Blog: per-language article cards ------------------------------- */
/* Estonian articles must not surface while the site is in English, and
   vice versa. The language toggle already writes <html lang>, so the CSS
   handles the first paint and the script in home.php keeps the empty-state
   message and pager in sync. */
.nw-blog-grid[hidden],
.nw-post-card[hidden],
.nw-blog-empty[hidden],
.nw-blog-pager[hidden] { display: none !important; }

html[lang^="en"] .nw-post-card[data-post-lang="et"],
html[lang^="en"] .nw-post-card[data-post-lang="de"],
html[lang^="et"] .nw-post-card[data-post-lang="en"],
html[lang^="et"] .nw-post-card[data-post-lang="de"] { display: none; }

/* Article hero. A portrait photo at the full 1200px figure width rendered
   1600px tall and pushed the article itself below the fold. Cap the height and
   let the width follow, aligned with the text column so portrait and landscape
   heroes both sit at a consistent, readable size. */
.nw-article-hero img {
  width: auto;
  max-width: 100%;
  max-height: 440px;
  margin-left: 0;
  margin-right: auto;
}

@media (max-width: 640px) {
  .nw-article-hero img { max-height: 380px; }
}