/*
Theme Name: Nikolaou Olive
Theme URI: https://nikolaoufamily.gr
Description: Elementor child theme for Nikolaou Family Olive Oil — quiet, earthy palette.
Author: Nikolaou Family
Version: 1.5.8
Template: hello-elementor
Tags: elementor, olive-oil, custom
Text Domain: nikolaou-olive
*/

/* =========================================================
   DESIGN TOKENS — Nikolaou Olive Oil palette
   ========================================================= */
:root {
  /* Core palette */
  --nk-bg:         #F8F5F0;   /* warm linen — page background */
  --nk-surface:    #EDE8DA;   /* soft cream — cards, sections */
  --nk-primary:    #4E6235;   /* muted olive green — headings, CTAs */
  --nk-primary-dk: #3A4B28;   /* deeper olive — hover states */
  --nk-gold:       #B8966A;   /* warm earth gold — accents */
  --nk-gold-lt:    #D4B48A;   /* lighter gold — borders, dividers */
  --nk-text:       #252515;   /* near-black olive — body text */
  --nk-muted:      #6B6B52;   /* warm gray — secondary text */
  --nk-white:      #FDFAF5;   /* warmed white */

  /* Typography */
  --nk-font-head:  'Cormorant Garamond', 'Georgia', serif;
  --nk-font-body:  'Jost', 'Helvetica Neue', Arial, sans-serif;

  /* Spacing */
  --nk-radius:     4px;
  --nk-radius-lg:  10px;
}

/* =========================================================
   BASE
   ========================================================= */
html, body {
  background-color: var(--nk-bg);
  color: var(--nk-text);
  font-family: var(--nk-font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--nk-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover { color: var(--nk-primary-dk); }

/* =========================================================
   HEADINGS
   ========================================================= */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--nk-font-head);
  color: var(--nk-text);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.25;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.9rem); }
h4 { font-size: 1.25rem; }

/* =========================================================
   GOOGLE FONTS LOAD
   ========================================================= */

/* =========================================================
   ELEMENTOR GLOBAL OVERRIDES
   ========================================================= */

/* Page / Section backgrounds */
.elementor-section,
.e-con {
  background-color: transparent;
}

/* Section with surface variant */
.elementor-section.nk-surface,
.e-con.nk-surface {
  background-color: var(--nk-surface);
}

/* Section with olive variant */
.elementor-section.nk-olive,
.e-con.nk-olive {
  background-color: var(--nk-primary);
  color: var(--nk-white);
}
.elementor-section.nk-olive h1,
.elementor-section.nk-olive h2,
.elementor-section.nk-olive h3,
.e-con.nk-olive h1,
.e-con.nk-olive h2,
.e-con.nk-olive h3 {
  color: var(--nk-white);
}

/* =========================================================
   BUTTONS
   ========================================================= */
.elementor-button,
.elementor-button.elementor-size-md {
  background-color: var(--nk-primary);
  border-color: var(--nk-primary);
  color: var(--nk-white);
  border-radius: var(--nk-radius);
  font-family: var(--nk-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 32px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.elementor-button:hover,
.elementor-button:focus {
  background-color: var(--nk-primary-dk);
  border-color: var(--nk-primary-dk);
  color: var(--nk-white);
}

/* Ghost / outline button variant */
.elementor-button.nk-btn-outline {
  background-color: transparent;
  border: 1.5px solid var(--nk-primary);
  color: var(--nk-primary);
}
.elementor-button.nk-btn-outline:hover {
  background-color: var(--nk-primary);
  color: var(--nk-white);
}

/* Gold accent button */
.elementor-button.nk-btn-gold {
  background-color: var(--nk-gold);
  border-color: var(--nk-gold);
  color: var(--nk-white);
}
.elementor-button.nk-btn-gold:hover {
  background-color: #A0834E;
  border-color: #A0834E;
}

/* =========================================================
   DIVIDERS
   ========================================================= */
.elementor-divider-separator {
  border-color: var(--nk-gold-lt) !important;
}

/* =========================================================
   CARDS / IMAGE BOX
   ========================================================= */
.elementor-image-box-wrapper,
.elementor-widget-image-box .elementor-widget-container {
  background-color: var(--nk-white);
  border-radius: var(--nk-radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(37, 37, 21, 0.07);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.elementor-image-box-wrapper:hover {
  box-shadow: 0 6px 28px rgba(37, 37, 21, 0.13);
  transform: translateY(-3px);
}

.elementor-image-box-title {
  font-family: var(--nk-font-head) !important;
  color: var(--nk-primary) !important;
}

/* =========================================================
   ICON BOX
   ========================================================= */
.elementor-icon-box-icon .elementor-icon i,
.elementor-icon-box-icon .elementor-icon svg {
  color: var(--nk-gold);
}

/* =========================================================
   NAVIGATION / HEADER
   ========================================================= */
#site-header,
.site-header {
  background-color: var(--nk-white);
  border-bottom: 1px solid var(--nk-surface);
}

/* Logo area */
.site-logo img {
  max-height: 60px;
}

/* Nav links */
.elementor-nav-menu a,
nav a {
  color: var(--nk-text);
  font-family: var(--nk-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.elementor-nav-menu a:hover,
nav a:hover {
  color: var(--nk-primary);
}

/* Active nav item */
.elementor-nav-menu .current-menu-item a,
.elementor-nav-menu .current-menu-ancestor a {
  color: var(--nk-primary);
  border-bottom: 2px solid var(--nk-gold);
}

/* =========================================================
   HERO SECTION
   ========================================================= */
.nk-hero {
  min-height: 80vh;
  display: flex;
  align-items: center;
}
.nk-hero-overlay {
  background: linear-gradient(
    135deg,
    rgba(37, 37, 21, 0.55) 0%,
    rgba(78, 98, 53, 0.35) 100%
  );
}

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.elementor-testimonial--align-center .elementor-testimonial__content {
  background-color: var(--nk-white);
  border-radius: var(--nk-radius-lg);
  border-left: 4px solid var(--nk-gold);
  padding: 28px 32px;
  box-shadow: 0 2px 16px rgba(37, 37, 21, 0.06);
}

/* =========================================================
   FOOTER
   ========================================================= */
#site-footer,
.site-footer {
  background-color: var(--nk-text);
  color: rgba(253, 250, 245, 0.75);
}
.site-footer a { color: var(--nk-gold-lt); }
.site-footer a:hover { color: var(--nk-gold); }
.site-footer h3,
.site-footer h4 {
  color: var(--nk-white);
  font-family: var(--nk-font-head);
}

/* =========================================================
   WOOCOMMERCE (if used for e-shop)
   ========================================================= */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background-color: var(--nk-primary) !important;
  color: var(--nk-white) !important;
  border-radius: var(--nk-radius) !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background-color: var(--nk-primary-dk) !important;
}
.woocommerce .price { color: var(--nk-gold) !important; }

/* =========================================================
   UTILITIES — apply to Elementor sections via CSS class field
   ========================================================= */
.nk-py-sm  { padding-top: 40px !important; padding-bottom: 40px !important; }
.nk-py-md  { padding-top: 80px !important; padding-bottom: 80px !important; }
.nk-py-lg  { padding-top: 120px !important; padding-bottom: 120px !important; }

.nk-text-olive  { color: var(--nk-primary) !important; }
.nk-text-gold   { color: var(--nk-gold) !important; }
.nk-text-muted  { color: var(--nk-muted) !important; }
.nk-text-white  { color: var(--nk-white) !important; }

.nk-bg-surface  { background-color: var(--nk-surface) !important; }
.nk-bg-olive    { background-color: var(--nk-primary) !important; }
.nk-bg-white    { background-color: var(--nk-white) !important; }

.nk-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--nk-gold);
  margin-bottom: 0.5em;
}

.nk-separator {
  display: block;
  width: 48px;
  height: 3px;
  background-color: var(--nk-gold);
  margin: 16px 0 24px;
}
.nk-separator.center { margin-left: auto; margin-right: auto; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; }
  h3 { font-size: 1.25rem; }

  .elementor-button { padding: 12px 24px; }
}

/* =========================================================
   CUSTOM HEADER — .nk-site-header
   ========================================================= */
.nk-site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--nk-white);
  border-bottom: 1px solid var(--nk-surface);
  box-shadow: 0 1px 8px rgba(37,37,21,.05);
}

.nk-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 80px;
}

.nk-header-logo a {
  display: inline-flex;
  align-items: center;
}
.nk-logo-img {
  display: block;
  max-height: 56px;
  width: auto;
}
.nk-logo-text {
  font-family: var(--nk-font-head);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--nk-primary);
}

/* Nav menu */
.nk-header-nav { display: flex; align-items: center; }

.nk-nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}
.nk-nav-menu li { position: relative; }
.nk-nav-menu li a {
  display: block;
  padding: 8px 16px;
  font-family: var(--nk-font-body);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nk-text);
  transition: color .2s ease;
  white-space: nowrap;
}
.nk-nav-menu li a:hover,
.nk-nav-menu li.current-menu-item > a,
.nk-nav-menu li.current-menu-ancestor > a {
  color: var(--nk-primary);
}
.nk-nav-menu li.current-menu-item > a {
  border-bottom: 2px solid var(--nk-gold);
  padding-bottom: 6px;
}

/* Dropdown */
.nk-nav-menu .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--nk-white);
  border: 1px solid var(--nk-surface);
  border-top: 2px solid var(--nk-primary);
  box-shadow: 0 4px 20px rgba(37,37,21,.1);
  list-style: none;
  padding: 8px 0;
  margin: 0;
  z-index: 100;
}
.nk-nav-menu li:hover > .sub-menu { display: block; }
.nk-nav-menu .sub-menu li a {
  padding: 8px 20px;
  font-size: .8rem;
  text-transform: none;
  letter-spacing: .03em;
}
.nk-nav-menu .sub-menu li a:hover { background: var(--nk-bg); color: var(--nk-primary); }

/* Hamburger */
.nk-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nk-bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--nk-text);
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}
.nk-hamburger[aria-expanded="true"] .nk-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nk-hamburger[aria-expanded="true"] .nk-bar:nth-child(2) { opacity: 0; }
.nk-hamburger[aria-expanded="true"] .nk-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── Mobile nav ─── */
@media (max-width: 900px) {
  .nk-hamburger { display: flex; }
  .nk-header-nav {
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    background: var(--nk-white);
    border-bottom: 1px solid var(--nk-surface);
    box-shadow: 0 4px 16px rgba(37,37,21,.08);
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .nk-header-nav.is-open { max-height: 600px; }
  .nk-nav-menu {
    flex-direction: column;
    padding: 16px 0 20px;
    gap: 0;
  }
  .nk-nav-menu li a { padding: 10px 24px; font-size: .85rem; }
  .nk-nav-menu .sub-menu {
    display: none;
    position: static;
    border: none;
    border-top: 0;
    box-shadow: none;
    background: var(--nk-bg);
    padding: 0;
  }
  .nk-nav-menu li.is-open > .sub-menu { display: block; }
  .nk-nav-menu .sub-menu li a { padding-left: 40px; }
}

/* =========================================================
   CONTAINER UTILITY (used in footer)
   ========================================================= */
.nk-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* =========================================================
   CUSTOM FOOTER — .nk-site-footer
   ========================================================= */
.nk-site-footer {
  background-color: var(--nk-text);   /* #252515 */
  color: rgba(253,250,245,.75);
  font-size: .9rem;
  line-height: 1.7;
}
.nk-site-footer a {
  color: var(--nk-gold-lt);
  text-decoration: none;
  transition: color .2s ease;
}
.nk-site-footer a:hover { color: var(--nk-gold); }

.nk-footer-main { padding: 72px 0 56px; }

.nk-footer-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
}

/* Column headings */
.nk-footer-heading {
  font-family: var(--nk-font-head);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--nk-white);
  margin: 0 0 20px;
  letter-spacing: .02em;
}

/* Brand column */
.nk-footer-logo { display: block; margin-bottom: 20px; }
.nk-footer-tagline {
  font-size: .85rem;
  line-height: 1.6;
  color: rgba(253,250,245,.6);
  margin: 0 0 24px;
}

/* Social */
.nk-social-wrap { display: flex; gap: 14px; }
.nk-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(184,150,106,.35);
  color: var(--nk-gold);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.nk-social-link:hover {
  background: var(--nk-gold);
  border-color: var(--nk-gold);
  color: var(--nk-white);
}

/* Links list */
.nk-footer-links,
.nk-footer-contact {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nk-footer-links li { margin-bottom: 10px; }
.nk-footer-links li a { color: rgba(253,250,245,.7); }
.nk-footer-links li a:hover { color: var(--nk-gold); padding-left: 4px; transition: padding-left .2s ease, color .2s ease; }

/* Contact list */
.nk-footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  color: rgba(253,250,245,.7);
}
.nk-footer-contact li svg {
  flex-shrink: 0;
  margin-top: 4px;
  color: var(--nk-gold);
}

/* Footer bar */
.nk-footer-bar {
  background-color: #1A1A0E;
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.nk-footer-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.nk-footer-bar p {
  margin: 0;
  font-size: .8rem;
  color: rgba(253,250,245,.45);
}
.nk-footer-bar a { color: rgba(253,250,245,.45); }
.nk-footer-bar a:hover { color: var(--nk-gold); }

/* ─── Mobile footer ─── */
@media (max-width: 900px) {
  .nk-footer-cols { grid-template-columns: 1fr; gap: 36px; }
  .nk-footer-main { padding: 48px 0 40px; }
  .nk-footer-bar-inner { flex-direction: column; text-align: center; }
}

/* =========================================================
   HIDE Hello Elementor default site-header text/description
   (in case theme still outputs it alongside our header)
   ========================================================= */
.site-header .site-title,
.site-header .site-description,
.site-header.dynamic-header {
  display: none !important;
}
/* =========================================================
   FIX 2 — Override Hello Elementor reset bleed
   ========================================================= */

/* Reset HE pink link colour inside our header/footer */
.nk-site-header a,
.nk-site-header a:hover,
.nk-site-header a:active,
.nk-site-footer  a,
.nk-site-footer  a:hover,
.nk-site-footer  a:active { text-decoration: none; }

.nk-site-header nav a,
.nk-site-header nav a:hover { color: inherit; }

/* Hamburger — hard-reset HE button pink border / colour */
button.nk-hamburger,
button.nk-hamburger:hover,
button.nk-hamburger:focus {
  background-color: transparent !important;
  border: none !important;
  color: var(--nk-text) !important;
  box-shadow: none !important;
  padding: 4px !important;
}

/* Suppress page title that Hello Elementor outputs above Elementor content */
body.elementor-page .page-header,
body.elementor-page .page-header .entry-title,
body.elementor-default .page-header {
  display: none !important;
}

/* Ensure our sticky header stays above Elementor sections with z-index */
#nk-header { z-index: 9999 !important; }

/* Remove any margin-top WordPress or HE might add to body on sticky headers */
body { margin-top: 0 !important; }

/* Ensure footer dark background isn't wiped by any HE body rule */
#nk-footer,
#nk-footer.nk-site-footer {
  background-color: #252515 !important;
}

/* Fix: HE reset.css sets li vertical-align:baseline which breaks flex nav */
.nk-nav-menu li { vertical-align: initial; }

/* Fix: HE reset sets ul/ol margin which may add gap inside footer lists */
.nk-footer-links,
.nk-footer-contact { margin: 0 !important; padding: 0 !important; }

/* Fix: page-content wrapper HE adds — remove default padding */
.page-content { padding: 0; }
/* =========================================================
   FIX 3 — Explicit colour overrides (belt-and-suspenders)
   ========================================================= */

/* Nav link colours — override HE reset a{color:#c36} */
#nk-primary-nav a,
#nk-primary-nav a:link,
#nk-primary-nav a:visited {
  color: var(--nk-text) !important;
  text-decoration: none !important;
}
#nk-primary-nav a:hover,
#nk-primary-nav a:focus {
  color: var(--nk-primary) !important;
}
#nk-primary-nav .current-menu-item > a {
  color: var(--nk-primary) !important;
  border-bottom: 2px solid var(--nk-gold) !important;
}

/* Footer link colours */
#nk-footer a,
#nk-footer a:link,
#nk-footer a:visited {
  color: var(--nk-gold-lt) !important;
  text-decoration: none !important;
}
#nk-footer a:hover,
#nk-footer a:focus { color: var(--nk-gold) !important; }

/* Footer bar copyright links */
.nk-footer-bar a,
.nk-footer-bar a:hover { color: rgba(253,250,245,.45) !important; }
.nk-footer-bar a:hover { color: var(--nk-gold) !important; }

/* Ensure header is white, not transparent / inherited from HE reset */
#nk-header,
#nk-header.nk-site-header {
  background-color: #FDFAF5 !important;
}

/* Undo HE reset.css ul li vertical-align / display issues inside nav */
.nk-nav-menu,
.nk-nav-menu li,
.nk-nav-menu .sub-menu {
  list-style: none !important;
  vertical-align: initial !important;
}

/* Fix any HE-added bullet icons on li::before / li::after */
.nk-nav-menu li::before,
.nk-nav-menu li::after { content: none !important; }
/* =========================================================
   FA6 → FA5 bridge
   Icons were generated with FA6 class syntax (fa-solid, fa-brands)
   but Elementor ships FA5 whose stylesheet only maps .fas/.fab.
   These rules make FA6 class names resolve to the correct font.
   ========================================================= */
.fa-solid {
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 900 !important;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
}
.fa-regular {
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 400 !important;
  font-style: normal;
  display: inline-block;
}
.fa-brands {
  font-family: 'Font Awesome 5 Brands' !important;
  font-weight: 400 !important;
  font-style: normal;
  display: inline-block;
}

/* =========================================================
   Homepage news shortcode — 3-column post grid
   ========================================================= */
.nk-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 767px) { .nk-posts-grid { grid-template-columns: 1fr; } }
@media (min-width: 768px) and (max-width: 1023px) { .nk-posts-grid { grid-template-columns: repeat(2,1fr); } }

.nk-post-card {
    background: var(--nk-white);
    border: 1px solid var(--nk-surface);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.nk-post-card__thumb,
.nk-post-card__thumb img { display: block; width: 100%; }
.nk-post-card__thumb img { aspect-ratio: 16/9; object-fit: cover; }
.nk-post-card__body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.nk-post-card__date {
    display: block; font-size: 11px; font-family: 'Jost',sans-serif;
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--nk-muted); margin-bottom: 8px;
}
.nk-post-card__title {
    font-family: 'Cormorant Garamond',serif; font-size: 1.2rem;
    font-weight: 600; line-height: 1.3; margin: 0 0 10px;
}
.nk-post-card__title a { color: var(--nk-text) !important; text-decoration: none !important; }
.nk-post-card__title a:hover { color: var(--nk-primary) !important; }
.nk-post-card__excerpt {
    font-size: .875rem; color: var(--nk-muted); line-height: 1.6;
    margin-bottom: 14px; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden;
}
.nk-post-card__link {
    font-family: 'Jost',sans-serif; font-size: .8rem; font-weight: 600;
    color: var(--nk-primary) !important; text-decoration: none !important;
    text-transform: uppercase; letter-spacing: .08em;
}
.nk-post-card__link:hover { color: var(--nk-gold) !important; }

/* =========================================================
   Blog archive page — 3x3 grid with pagination
   ========================================================= */
.nk-blog-main {
    max-width: 1200px; margin: 0 auto; padding: 60px 24px 80px;
}
.nk-blog-header {
    text-align: center; margin-bottom: 48px;
    padding-bottom: 24px; border-bottom: 2px solid var(--nk-surface);
}
.nk-blog-title {
    font-family: 'Cormorant Garamond',serif;
    font-size: clamp(2rem,4vw,3rem); font-weight: 600;
    color: var(--nk-text); margin: 0 0 8px;
}
.nk-blog-subtitle {
    font-size: 1rem; color: var(--nk-muted); font-family: 'Jost',sans-serif;
}
.nk-blog-grid {
    display: grid; grid-template-columns: repeat(3,1fr);
    gap: 32px; margin-bottom: 48px;
}
@media (max-width: 767px) { .nk-blog-grid { grid-template-columns: 1fr; } }
@media (min-width: 768px) and (max-width: 1023px) { .nk-blog-grid { grid-template-columns: repeat(2,1fr); } }

.nk-blog-card {
    background: var(--nk-white); border: 1px solid var(--nk-surface);
    border-radius: 4px; overflow: hidden; display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
}
.nk-blog-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(37,37,21,.1); }
.nk-blog-card__thumb { display: block; }
.nk-blog-card__thumb img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.nk-blog-card__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.nk-blog-card__date {
    display: block; font-family: 'Jost',sans-serif;
    font-size: 11px; text-transform: uppercase;
    letter-spacing: .12em; color: var(--nk-muted); margin-bottom: 10px;
}
.nk-blog-card__title {
    font-family: 'Cormorant Garamond',serif; font-size: 1.25rem;
    font-weight: 600; line-height: 1.3; margin: 0 0 12px;
}
.nk-blog-card__title a { color: var(--nk-text) !important; text-decoration: none !important; }
.nk-blog-card__title a:hover { color: var(--nk-primary) !important; }
.nk-blog-card__excerpt {
    font-family: 'Jost',sans-serif; font-size: .9rem;
    color: var(--nk-muted); line-height: 1.65; margin-bottom: 16px;
    flex: 1; display: -webkit-box; -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden;
}
.nk-blog-card__link {
    font-family: 'Jost',sans-serif; font-size: .8rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--nk-primary) !important; text-decoration: none !important;
}
.nk-blog-card__link:hover { color: var(--nk-gold) !important; }
.nk-blog-empty {
    grid-column: 1/-1; text-align: center;
    color: var(--nk-muted); font-size: 1.1rem; padding: 48px;
}
.nk-blog-pagination {
    display: flex; justify-content: space-between;
    align-items: center; padding-top: 24px;
    border-top: 1px solid var(--nk-surface);
}
.nk-blog-pagination__prev { flex: 1; }
.nk-blog-pagination__next { flex: 1; text-align: right; }
.nk-blog-pagination a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 28px; background: var(--nk-primary);
    color: var(--nk-white) !important;
    font-family: 'Jost',sans-serif; font-size: .82rem; font-weight: 600;
    text-decoration: none !important; border-radius: 4px;
    text-transform: uppercase; letter-spacing: .08em; transition: background .2s;
}
.nk-blog-pagination a:hover { background: #3A4B28; }


/* =========================================================
   Roboto font override (v1.4.0)
   ========================================================= */
body,
body h1, body h2, body h3, body h4, body h5, body h6,
body p, body a, body li, body td, body th, body span,
body button, body input, body select, body textarea,
.elementor-widget-container,
.elementor-heading-title,
.elementor-widget-text-editor p,
.elementor-widget-text-editor span,
.nk-site-header,
.nk-site-footer {
    font-family: 'Roboto', sans-serif !important;
}

/* =========================================================
   Product detail page styles
   ========================================================= */
.nk-product-detail {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 24px 80px;
}
.nk-product-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--nk-primary);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none !important;
    margin-bottom: 40px;
}
.nk-product-back:hover { color: var(--nk-gold); }
.nk-product-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    margin-bottom: 72px;
}
.nk-product-hero__image { text-align: center; }
.nk-product-hero__image img {
    max-height: 480px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 12px 36px rgba(78,98,53,.15));
}
.nk-product-badge {
    display: inline-block;
    background: var(--nk-gold);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 2px;
    margin-bottom: 16px;
}
.nk-product-title {
    font-size: 2.4rem !important;
    color: var(--nk-primary) !important;
    line-height: 1.2;
    margin: 0 0 20px !important;
}
.nk-product-desc {
    color: var(--nk-text);
    line-height: 1.85;
    font-size: 1rem;
    margin-bottom: 28px;
}
.nk-product-chars {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}
.nk-char {
    background: var(--nk-primary);
    color: #fff;
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: .5px;
}
.nk-product-cta-inline {
    display: inline-flex;
    align-items: center;
    background: var(--nk-primary);
    color: #fff !important;
    padding: 14px 32px;
    border-radius: 3px;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none !important;
    transition: background .2s;
}
.nk-product-cta-inline:hover { background: #3d4e28; color: #fff !important; }
.nk-product-cert {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f0f5e8;
    border: 1px solid #c8d9ae;
    border-radius: 4px;
    padding: 10px 20px;
    color: var(--nk-primary);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 28px;
}
.nk-product-sizes {
    background: var(--nk-bg);
    border-radius: 4px;
    padding: 56px 24px;
    margin-bottom: 64px;
    text-align: center;
}
.nk-product-sizes h2 {
    color: var(--nk-primary) !important;
    font-size: 1.6rem !important;
    margin-bottom: 40px !important;
}
.nk-sizes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 24px;
    max-width: 820px;
    margin: 0 auto;
}
.nk-size-item { text-align: center; }
.nk-size-item img {
    height: 140px;
    width: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto 10px;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.1));
}
.nk-size-item span {
    font-weight: 600;
    color: var(--nk-text);
    font-size: 0.9rem;
}
@media (max-width: 768px) {
    .nk-product-hero { grid-template-columns: 1fr; gap: 32px; }
    .nk-product-title { font-size: 1.8rem !important; }
    .nk-sizes-grid { grid-template-columns: repeat(3, 1fr); }
}


/* =========================================================
   Services shortcode grid (v1.5.0)
   ========================================================= */
.nk-svc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 32px 0 0;
}
.nk-svc-box {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 4px;
    padding: 32px 20px 28px;
    text-align: center;
    text-decoration: none !important;
    display: block;
    transition: background .2s, transform .2s;
    color: #FDFAF5 !important;
}
.nk-svc-box:hover {
    background: rgba(255,255,255,0.16);
    transform: translateY(-3px);
    color: #FDFAF5 !important;
}
.nk-svc-icon {
    display: block;
    font-size: 2.4rem;
    color: #B8966A;
    margin-bottom: 16px;
    line-height: 1;
}
.nk-svc-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #FDFAF5 !important;
    margin: 0 0 10px !important;
    line-height: 1.3;
}
.nk-svc-desc {
    font-size: 0.85rem;
    color: rgba(253,250,245,0.80) !important;
    line-height: 1.65;
    margin: 0 !important;
}
.nk-svc-cta {
    text-align: center;
    margin-top: 40px;
}
.nk-svc-cta a {
    display: inline-block;
    background: #B8966A !important;
    color: #FDFAF5 !important;
    padding: 13px 40px;
    border-radius: 3px;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    text-decoration: none !important;
    transition: background .2s;
}
.nk-svc-cta a:hover { background: #9d7d58 !important; }

/* Olive oil image-boxes: padding around each box */
.elementor-element-h2q55 > .elementor-element-populated,
.elementor-element-2c3o0 > .elementor-element-populated,
.elementor-element-f5o84 > .elementor-element-populated,
.elementor-element-nk_herbs_col > .elementor-element-populated {
    padding: 12px 14px !important;
}

@media (max-width: 767px) {
    .nk-svc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .nk-svc-grid { grid-template-columns: 1fr; }
}


/* =========================================================
   Olive oil image-box columns: equal height + padding (nk-oilfix v1.5.1)
   ========================================================= */

/* Make each column a column-direction flex so its child can stretch */
.elementor-element-h2q55,
.elementor-element-2c3o0,
.elementor-element-f5o84,
.elementor-element-nk_herbs_col {
    display: flex !important;
    flex-direction: column !important;
}

/* Stretch the populated div to fill the full column height */
.elementor-element-h2q55 > .elementor-element-populated,
.elementor-element-2c3o0 > .elementor-element-populated,
.elementor-element-f5o84 > .elementor-element-populated,
.elementor-element-nk_herbs_col > .elementor-element-populated {
    flex: 1 1 auto !important;
    padding: 24px 20px 28px !important;
    box-sizing: border-box;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(78,98,53,0.07);
}


/* =========================================================
   Single Post Template (v1.5.2)
   ========================================================= */
.nk-single-main { background: var(--nk-bg, #F8F5F0); }

/* Hero */
.nk-post-hero {
    position: relative;
    background: #4E6235;
    background-size: cover;
    background-position: center top;
    min-height: 480px;
    display: flex;
    align-items: flex-end;
}
.nk-post-hero--no-img { min-height: 300px; align-items: center; }
.nk-post-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(20,30,10,.82) 0%, rgba(20,30,10,.38) 55%, rgba(20,30,10,.10) 100%);
}
.nk-post-hero--no-img .nk-post-hero__overlay { background: rgba(20,30,10,.45); }
.nk-post-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    padding: 60px 24px 68px;
}
.nk-post-cat {
    display: inline-block;
    background: #B8966A;
    color: #fff !important;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: 2px;
    text-decoration: none !important;
    margin-bottom: 18px;
}
.nk-post-hero__title {
    font-size: 2.8rem !important;
    font-weight: 700 !important;
    color: #FDFAF5 !important;
    line-height: 1.18 !important;
    margin: 0 0 20px !important;
    max-width: 720px;
}
.nk-post-hero__meta {
    color: rgba(253,250,245,.78) !important;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
}
.nk-sep { opacity: .45; }

/* Body */
.nk-post-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 60px 24px 96px;
}

/* Content */
.nk-post-content {
    font-size: 1.0625rem;
    line-height: 1.875;
    color: #252515;
    margin-bottom: 48px;
}
.nk-post-content h2 {
    font-size: 1.65rem !important;
    font-weight: 700 !important;
    color: #4E6235 !important;
    margin: 52px 0 16px !important;
    line-height: 1.25 !important;
}
.nk-post-content h3 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #4E6235 !important;
    margin: 40px 0 12px !important;
}
.nk-post-content p { margin: 0 0 1.6em; }
.nk-post-content a { color: #4E6235; border-bottom: 1px solid rgba(184,150,106,.5); text-decoration: none; }
.nk-post-content a:hover { color: #B8966A; border-color: #B8966A; }
.nk-post-content ul,
.nk-post-content ol { padding-left: 1.6em; margin: 0 0 1.6em; }
.nk-post-content li { margin-bottom: .45em; }
.nk-post-content blockquote {
    margin: 40px 0;
    padding: 20px 28px;
    border-left: 4px solid #B8966A;
    background: #fff;
    border-radius: 0 4px 4px 0;
    font-style: italic;
    font-size: 1.05em;
    color: #4E6235;
}
.nk-post-content blockquote p:last-child { margin: 0; }
.nk-post-content img { max-width: 100%; height: auto; border-radius: 4px; display: block; margin: 32px auto; }
.nk-post-content figure { margin: 32px 0; }
.nk-post-content figcaption { text-align: center; font-size: .85rem; color: #6B6B52; margin-top: 8px; }

/* Tags */
.nk-post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 32px;
    margin-bottom: 40px;
    border-top: 1px solid rgba(78,98,53,.12);
}
.nk-tag-pill {
    background: #f0f5e8;
    color: #4E6235 !important;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none !important;
    border-bottom: none !important;
    transition: background .2s;
}
.nk-tag-pill:hover { background: #c8d9ae; }

/* Back link */
.nk-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #4E6235 !important;
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none !important;
    border-bottom: none !important;
    transition: color .2s;
}
.nk-back-link:hover { color: #B8966A !important; }
.nk-back-link svg { flex-shrink: 0; transition: transform .2s; }
.nk-back-link:hover svg { transform: translateX(-3px); }

@media (max-width: 768px) {
    .nk-post-hero, .nk-post-hero--has-img { min-height: 340px; }
    .nk-post-hero--no-img { min-height: 240px; }
    .nk-post-hero__title { font-size: 1.75rem !important; }
    .nk-post-wrap { padding: 40px 20px 64px; }
    .nk-post-content { font-size: 1rem; }
    .nk-post-content h2 { font-size: 1.35rem !important; }
}


/* =========================================================
   Blog archive: uniform card heights (nk-blogfix v1.5.3)
   ========================================================= */

/* Define missing CSS variables */
:root {
    --nk-surface: rgba(37,37,21,0.10);
    --nk-muted:   #6B6B52;
}

/* Fixed image height — replaces aspect-ratio which varies with lazy-load */
.nk-blog-card__thumb {
    display: block;
    height: 210px !important;
    overflow: hidden;
}
.nk-blog-card__thumb img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: unset !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block;
    transition: transform .35s ease;
}
.nk-blog-card:hover .nk-blog-card__thumb img { transform: scale(1.05); }

/* Clamp title to 2 lines so a long title never bloats the card */
.nk-blog-card__title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: calc(1.3 * 2 * 1.25rem);  /* reserve 2 lines */
}

/* Excerpt: stop conflicting flex:1 so -webkit-line-clamp actually clips */
.nk-blog-card__excerpt {
    flex: none !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Push read-more link to bottom of card body */
.nk-blog-card__link { margin-top: auto; padding-top: 16px; }


/* ================================================================
   Contact Form 7 — Branded Styling (v1.5.4)
   ================================================================ */

/* Form layout: two-column top row */
.nk-cf7-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 600px) { .nk-cf7-row { grid-template-columns: 1fr; } }

/* Labels */
.nk-cf7-label {
    display: block !important;
    font-size: 0.825rem !important;
    font-weight: 600 !important;
    color: #252515 !important;
    margin-bottom: 6px !important;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.nk-cf7-label abbr {
    text-decoration: none;
    color: #B8966A;
    margin-left: 2px;
}

/* All text inputs, email, textarea */
.wpcf7-form .wpcf7-text,
.wpcf7-form .wpcf7-email,
.wpcf7-form .wpcf7-textarea {
    width: 100% !important;
    border: 1.5px solid #dde8cc !important;
    border-radius: 4px !important;
    padding: 12px 16px !important;
    font-size: 0.9375rem !important;
    color: #252515 !important;
    background: #fff !important;
    font-family: "Roboto", sans-serif !important;
    transition: border-color 0.18s, box-shadow 0.18s !important;
    box-sizing: border-box !important;
    -webkit-appearance: none;
    display: block !important;
    margin-bottom: 20px !important;
}
.wpcf7-form .wpcf7-text::placeholder,
.wpcf7-form .wpcf7-email::placeholder,
.wpcf7-form .wpcf7-textarea::placeholder { color: #aaa !important; }

.wpcf7-form .wpcf7-text:focus,
.wpcf7-form .wpcf7-email:focus,
.wpcf7-form .wpcf7-textarea:focus {
    outline: none !important;
    border-color: #4E6235 !important;
    box-shadow: 0 0 0 3px rgba(78,98,53,.12) !important;
}

/* Textarea */
.wpcf7-form .wpcf7-textarea {
    min-height: 160px !important;
    resize: vertical !important;
}

/* Validation — invalid field */
.wpcf7-not-valid.wpcf7-text,
.wpcf7-not-valid.wpcf7-email,
.wpcf7-not-valid.wpcf7-textarea {
    border-color: #c0392b !important;
    background: #fef8f8 !important;
}
.wpcf7-not-valid-tip {
    font-size: 0.78rem !important;
    color: #c0392b !important;
    margin-top: -14px !important;
    margin-bottom: 16px !important;
    display: block !important;
}

/* Submit button */
.wpcf7-form .wpcf7-submit {
    background: #4E6235 !important;
    color: #FDFAF5 !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 14px 44px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    font-family: "Roboto", sans-serif !important;
    transition: background 0.2s !important;
    display: inline-block !important;
    margin-top: 8px !important;
}
.wpcf7-form .wpcf7-submit:hover { background: #3d4e28 !important; }

/* Spinner */
.wpcf7-form .wpcf7-spinner {
    vertical-align: middle !important;
    margin-left: 10px !important;
}

/* Response output box */
.wpcf7-response-output {
    border-radius: 4px !important;
    padding: 14px 20px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    margin-top: 20px !important;
    border-width: 1px !important;
    border-style: solid !important;
}
.wpcf7-form.sent .wpcf7-response-output {
    background: #f0f5e8 !important;
    border-color: #b8d48a !important;
    color: #3d4e28 !important;
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output {
    background: #fff4f4 !important;
    border-color: #f5c6c6 !important;
    color: #c0392b !important;
}


/* CF7 auto-generated br/p cleanup (v1.5.5) */
.wpcf7 form br { display: none !important; }
.wpcf7 form > p,
.wpcf7 form .nk-cf7-col > p {
    margin: 0 !important;
    padding: 0 !important;
}
.wpcf7 form .nk-cf7-row > .nk-cf7-col {
    min-width: 0; /* prevent grid blowout */
}
/* Spacing between fields outside the 2-col row */
.wpcf7 form > p + p { margin-top: 0 !important; }


/* Oil columns: image-box-wrapper bg matches column white bg (v1.5.6) */
.elementor-element-h2q55 .elementor-image-box-wrapper,
.elementor-element-2c3o0 .elementor-image-box-wrapper,
.elementor-element-f5o84 .elementor-image-box-wrapper,
.elementor-element-nk_herbs_col .elementor-image-box-wrapper {
    background: #fff !important;
}


/* Oil column cards: unified white bg — all inner elements (v1.5.7) */
.elementor-element-7wtdv .elementor-element-h2q55 > .elementor-widget-wrap,
.elementor-element-7wtdv .elementor-element-2c3o0 > .elementor-widget-wrap,
.elementor-element-7wtdv .elementor-element-f5o84 > .elementor-widget-wrap,
.elementor-element-7wtdv .elementor-element-nk_herbs_col > .elementor-widget-wrap {
    background: #fff !important;
}
.elementor-element-7wtdv .elementor-element-h2q55 .elementor-widget-image-box,
.elementor-element-7wtdv .elementor-element-2c3o0 .elementor-widget-image-box,
.elementor-element-7wtdv .elementor-element-f5o84 .elementor-widget-image-box,
.elementor-element-7wtdv .elementor-element-nk_herbs_col .elementor-widget-image-box {
    background: #fff !important;
}
.elementor-element-7wtdv .elementor-element-h2q55 .elementor-image-box-wrapper,
.elementor-element-7wtdv .elementor-element-2c3o0 .elementor-image-box-wrapper,
.elementor-element-7wtdv .elementor-element-f5o84 .elementor-image-box-wrapper,
.elementor-element-7wtdv .elementor-element-nk_herbs_col .elementor-image-box-wrapper {
    background: #fff !important;
}


/* Oil columns: suppress inner image-box shadow (outer card already has shadow) (v1.5.8) */
.elementor-element-7wtdv .elementor-element-h2q55 .elementor-image-box-wrapper,
.elementor-element-7wtdv .elementor-element-2c3o0 .elementor-image-box-wrapper,
.elementor-element-7wtdv .elementor-element-f5o84 .elementor-image-box-wrapper,
.elementor-element-7wtdv .elementor-element-nk_herbs_col .elementor-image-box-wrapper {
    box-shadow: none !important;
}
.elementor-element-7wtdv .elementor-element-h2q55 .elementor-image-box-wrapper:hover,
.elementor-element-7wtdv .elementor-element-2c3o0 .elementor-image-box-wrapper:hover,
.elementor-element-7wtdv .elementor-element-f5o84 .elementor-image-box-wrapper:hover,
.elementor-element-7wtdv .elementor-element-nk_herbs_col .elementor-image-box-wrapper:hover {
    box-shadow: none !important;
}