:root {
  --bg: #ffffff;
  --bg-elev: #f9faf9;
  --accent: #ffb84a;
  --brand: #1a7f3c;
  --text: #1c1c1c;
  --shadow: 0 6px 20px rgba(0,0,0,.08);
  --header-offset: 96px; /* fallback za anchor offset; JS po potrebi ažurira */
}

/* Reset / base */
* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-offset);
}
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial;
  color: var(--text);
  background: #fff;
  line-height: 1.6;
}
.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* ===== Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow);
}
.bar {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 100px; gap: 16px;
}
.logo img { height: 80px; width: auto; display: block; }

nav { flex: 1; }
.nav {
  display: flex; align-items: center; justify-content: center;
  gap: 20px; list-style: none; padding: 0; margin: 0;
}
.nav a {
  color: var(--brand); text-decoration: none; font-weight: 600;
  padding: 10px 12px; border-radius: 8px; transition: all .2s ease;
  /* padding: 10px 14px; border-radius: 8px; transition: all .2s ease; */
}
.nav a:hover { background: var(--brand); color: #fff; }

/* Buttons */
.btn, .btn-outline {
  padding: 12px 26px; border-radius: 999px; font-weight: 700; font-size: 1rem;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
  transition: all .2s ease; min-width: 180px; text-align: center;
}
.btn { background: var(--brand); color: #fff; border: 2px solid var(--brand); }
.btn:hover { background: #14642f; border-color: #14642f; }

.btn-outline { background: #fff; color: var(--brand); border: 2px solid var(--brand); }
.btn-outline:hover { background: var(--brand); color: #fff; }


/* INTRO v3 START */
.intro-v3 {
  background: linear-gradient(180deg, #f3faf4 0%, #ffffff 100%);
  padding: 4rem 1rem;
}

.intro-v3__container {
  flex-direction: row-reverse; /* slika lijevo, tekst desno */
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 12px; /* dodano, fix */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  /*background-color: #f8f8f8;*/
}

:root{
  --brand: #2f9e44;      /* zelena */
  --accent: #FBB221;     /* narančasta iz loga */
  --accent-dark: #C88508;/* tamnija za hover/focus */
}

.intro-v3__text a:not(.btn):not(.btn-outline),
.note-box-home a {
  color: var(--brand);
  text-decoration: underline;
  font-weight: 600;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

.intro-v3__text a:not(.btn):not(.btn-outline):hover,
.intro-v3__text a:not(.btn):not(.btn-outline):focus-visible,
.note-box-home a:hover,
.note-box-home a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

/* bez ljubičastog visited */
.intro-v3__text a:visited,
.note-box-home a:visited { color: var(--accent); }


ul li a {
  color: #0f834d;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

ul li a:hover {
  color: #055a34;
  text-decoration: underline;
}


@media (max-width: 900px) {
  .intro-v3__container { padding-left: 0; }
}

.intro-v3__text {
  flex: 1;
  min-width: 320px;
}

.intro-v3__text h1 {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 3rem;
  margin-bottom: 1rem;
  color: var(--brand);
  margin-top: -6px; /* dodano, fix*/
}

.intro-v3__text p {
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
  color: #333;
  line-height: 1.6;
}

.intro-v3__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.intro-v3__list li {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: #1a1a1a;
  display: flex;
  align-items: center;
}

.intro-v3__list li::before {
  content: "✔";
  color: #2f9e44;
  margin-right: 0.5rem;
}

.intro-v3__image {
  flex: 1;
  min-width: 320px;
  text-align: center;
}

.intro-v3__image img {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* INTRO v3 END */


/* Hero */
.hero {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: 40px; max-width: 1200px; margin: 0 auto; padding: 64px 16px 54px;
}
.hero-text h1 { font-size: 2.6rem; color: var(--brand); margin-bottom: 20px; line-height: 1.2; }
.hero-text p { margin: 0 0 16px; font-size: 1.05rem; }
.hero img { max-width: 100%; border-radius: 16px; box-shadow: var(--shadow); }

/* Services */
section.services {
  max-width: 1200px; margin: 0 auto 100px; padding: 0 16px; display: grid; gap: 64px;
}
.service {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
  background: var(--bg-elev); border-radius: 20px; padding: 40px;
  box-shadow: var(--shadow); transition: transform .3s ease, box-shadow .3s ease;
}
.service:hover { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(0,0,0,.12); }
.service:nth-child(even) { grid-template-columns: 1fr 1fr; direction: rtl; }
.service:nth-child(even) .service-text { direction: ltr; }

.service img {
  width: 100%; border-radius: 14px; box-shadow: var(--shadow);
  object-fit: cover; aspect-ratio: 4/3;
}
.service h2 { color: var(--brand); margin-bottom: 16px; font-size: 1.9rem; line-height: 2.1rem; }
.service h3 { margin-bottom: 16px; font-size: 1.6rem; }
.service p { margin: 0 0 14px; }
.pill {
  display: inline-block; padding: 6px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 12%, white); color: var(--brand);
  font-size: .85rem; font-weight: 700; margin-bottom: 12px;
}
.cta-row { display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }

/* Contact card */
.contact-box {
  background: #fff; border: 2px dashed var(--brand); border-radius: 20px;
  padding: 32px; text-align: center; box-shadow: var(--shadow);
}
.contact-box h2 { font-size: 2rem; color: var(--brand); margin-bottom: 16px; }
.contact-box p { margin-bottom: 16px; }
.contact-box a { color: var(--brand); font-weight: 600; text-decoration: none; }
.contact-box a:hover { text-decoration: underline; }

/* Podstranice content */
main {
  max-width: 800px;
  margin: 30px auto;
  padding: 0 20px;
  line-height: 1.7;
}
main h1, main h2, main h3 {
  color: var(--brand);
  margin-top: 20px; margin-bottom: 20px;
}
main h1 {
  line-height: 40px;
}
main h2, main h3 {
  line-height: 30px;
  margin-top: 30px;
  margin-bottom: 0px;
}

main h3 {
  color: #1c1c1c;
}

main p { margin-bottom: 18px; font-size: 1.05rem; }

h2 a, h3 a {
  color: inherit;          /* koristi boju naslova, npr. zelenu */
  text-decoration: none;   
}

h2 a:hover, h3 a:hover {
  text-decoration: underline; 
}

h2 a:visited, h3 a:visited {
  text-decoration: none; 
}

/* =========================
   RESPONSIVE
   ========================= */

/* Tablet */
@media (max-width: 1024px) {
  .bar { min-height: 90px; }
  .logo img { height: 72px; }
  .nav { gap: 16px; }
  .hero-text h1 { font-size: 2.3rem; }
  .intro-v3__text h1 { font-size: 2.3rem; line-height: 2.5rem; }
  .intro-v3 { padding: 2rem 1rem; }
}

/* Telefon / usko */
@media (max-width: 900px) {
  /* Header grid: logo | CTA | lang; nav ispod */
  .bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 8px;
    min-height: unset;
    padding: 10px 0;
  }
  .logo { grid-column: 1; grid-row: 1; }
  .logo img { height: 56px; }

  .bar .btn {
    grid-column: 2; grid-row: 1; justify-self: center;
    padding: 10px 14px; min-width: auto; font-size: .95rem;
  }

  .lang-select { grid-column: 3; grid-row: 1; justify-self: end; }
  .lang-select select {
    padding: 6px 10px !important; font-size: .95rem; border-radius: 8px;
  }

  nav { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .nav {
    justify-content: flex-start; align-items: center;
    gap: 10px; padding: 6px 0 8px; margin: 0;
    overflow-x: auto; white-space: nowrap; flex-wrap: nowrap;
  }
  .nav li { flex: 0 0 auto; }
  .nav a {
    padding: 8px 12px; font-size: .95rem; border-radius: 999px;
    border: 1px solid rgba(26,127,60,.22); background: #fff;
  }
  .nav a:hover { background: var(--brand); color: #fff; }

  .nav::-webkit-scrollbar { height: 6px; }
  .nav::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 6px; }

  /* Hero */
  .hero {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 40px 16px 80px;
  }
  .hero img { max-width: 82%; margin: 0 auto; }
  .hero-text h1 { font-size: 2rem; }
  .intro-v3__text h1 { font-size: 2.3rem; line-height: 2.5rem; }

  /* Services */
  .service { grid-template-columns: 1fr; text-align: center; padding: 24px; }
  .service:nth-child(even) { direction: ltr; }
  .service h2 { font-size: 1.6rem; }
  .service h3 { font-size: 1.35rem; }
  .pill { font-size: .8rem; }

  /* Podstranice */
  main { margin: 36px auto; max-width: 720px; }
  main h1 { font-size: 2.3rem; line-height: 2.5rem; }
}

/* Vrlo mali ekrani */
@media (max-width: 520px) {
  .logo img { height: 50px; }
  .bar .btn { font-size: .9rem; padding: 9px 12px; }
  .nav { gap: 8px; }
  .nav a { padding: 7px 10px; font-size: .9rem; }
  .btn, .btn-outline { width: 100%; min-width: 0; }
  .cta-row { justify-content: center; }
  .hero-text h1 { font-size: 1.8rem; }
  .intro-v3__text h1 { font-size: 2rem; line-height: 2.2rem; margin-top: 20px; }
  .intro-v3 { padding: 1rem 1rem;}
  main { margin: 28px auto; }
  main h1 { font-size: 1.9rem; line-height: 2.1rem; }
}

/* ==== FIX: mobile layout za .service (full width title, text, pa slika) ==== */
@media (max-width: 900px) {
  .service{
    display: grid;
    grid-template-columns: 1fr !important; /* forsiraj jedan stupac */
    text-align: center;
  }
  /* poništi trik s 'direction' na parnim karticama */
  .service:nth-child(even){ direction: ltr !important; }

  .service .service-text{ order: 1; }
  .service .service-text h2{
    text-align: center;
    margin: 0 0 16px;
    max-width: 26ch;        /* kompaktniji naslov, kao na trećoj slici */
    margin-inline: auto;
  }
  .service .service-text p{ text-align: left; } /* ili center, ako ti je draže */

  .service .image-wrap{
    order: 2;
    margin-top: 16px;
    width: 100%;
  }
  .service .image-wrap img{
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto;     /* ne forsiraj 4/3 na mobitelu */
  }
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.service-box {
  background: #f9fbfc;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease;
}

.service-box img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.service-box h3 {
  margin: 16px;
  font-size: 1.1rem;
  font-weight: 600;
}

.service-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0,0,0,.12);
}

.service-box a {
  text-decoration: none;
  color: inherit;
}

.service-box a:hover h2 {
  text-decoration: underline;
  color: #007b55;
}


/* breadcrumb start */

nav[aria-label="Breadcrumb"] {
  margin: 0 0 8px 0;   /* malo razmaka ispod prije H1 */
  padding: 2px 0;      /* tanki unutarnji padding gore/dolje */
  line-height: 1.4;    /* smanjena visina retka */
}

.breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  margin: 0;
  padding: 0;
}

.breadcrumb li + li::before {
  content: "›";
  padding: 0 8px;
  color: #666;
}

.breadcrumb a {
  text-decoration: none;
  color: #007b55;
}

.breadcrumb a:hover {
  text-decoration: underline;
}
/* breadcrumb end */

/* Linkovi unutar tekstualnih blokova usluga */
main p a {
  color: #0f834d;          /* zelena nijansa u skladu s brendom */
  text-decoration: none;   /* makne podcrtavanje */
  font-weight: 600;        /* blago podebljano */
  transition: color 0.3s ease;
}

main p a:hover {
  color: #055a34;          /* tamnija zelena na hover */
  text-decoration: underline; /* opcionalno underline */
}

.service-text p a {
  color: #0f834d;          /* zelena nijansa u skladu s brendom */
  text-decoration: none;   /* makne podcrtavanje */
  font-weight: 600;        /* blago podebljano */
  transition: color 0.3s ease;
}

.service-text p a:hover {
  color: #055a34;          /* tamnija zelena na hover */
  text-decoration: underline; /* opcionalno underline */
}


.note-box {
  background-color: #f3faf4;
  border-left: 6px solid #2f9e44;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #1a1a1a;
  border-radius: 4px;
}

.note-box-home {
  min-width: 100%;
  background-color: #f3faf4;
  border-left: 6px solid #2f9e44;
  padding: 1rem 1.25rem;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.6;
  color: #1a1a1a;
  border-radius: 4px;
}

.note-box strong {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 600;
  color: #2f9e44;
}


.note-box-home a,
.note-box a {
  color: var(--brand, #2f9e44);
  text-decoration: none;
  font-weight: 600;
}

.note-box-home a:hover,
.note-box a:hover,
.note-box-home a:focus-visible,
.note-box a:focus-visible {
  color: #1e7a3b;
  text-decoration: underline;
  outline: 2px solid rgba(47,158,68,.25);
  outline-offset: 2px;
}

.note-box-home a:visited,
.note-box a:visited {
  color: var(--brand, #2f9e44);
}



/* Kontakt – single column layout */
.contact-page{
  max-width: 900px;
  margin: 24px auto 64px;
  padding: 0 16px;
  display: grid;
  gap: 20px;
}

.contact-hero{
  background: var(--bg-elev, #f9faf9);
  border-radius: 20px;
  padding: 28px;
  box-shadow: var(--shadow, 0 6px 20px rgba(0,0,0,.08));
}
.contact-hero h1{ color: var(--brand); margin: 0 0 10px; }
.contact-hero p{ margin: 0 0 14px; }

.cta-row--left{ justify-content: flex-start; }

.contact-card, .map-card, .contact-form{
  background: var(--bg-elev, #f9faf9);
  border-radius: 20px;
  padding: 28px;
  box-shadow: var(--shadow, 0 6px 20px rgba(0,0,0,.08));
}

.contact-card h2, .contact-form h3{ color: var(--brand); margin: 0 0 12px; }

.contact-list{
  list-style: none; padding: 0; margin: 10px 0 0;
}
.contact-list li{ margin: 8px 0; }
.contact-list a{ color: var(--brand); font-weight: 600; text-decoration: none; }
.contact-list a:hover{ text-decoration: underline; }

.map-wrap{
  border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow, 0 6px 20px rgba(0,0,0,.08));
  aspect-ratio: 4 / 3;
}
.map-wrap iframe{ width: 100%; height: 100%; border: 0; display: block; }

.contact-form label{ display:block; font-weight:600; margin:12px 0 6px; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea{
  width: 100%;
  border: 1.5px solid rgba(0,0,0,.12);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 1rem;
  background: #fff;
}
.contact-form textarea{ resize: vertical; }
.contact-form .chk{ display:flex; align-items:center; gap:10px; margin:12px 0 14px; }

/* Mobilno: sve već izgleda single-column, pa samo malo zraka */
@media (max-width: 520px){
  .contact-hero, .contact-card, .map-card, .contact-form{ padding: 22px; }
}


/* Kontakt linkovi u zelenoj boji */
.contact-links a {
  color: var(--brand);
  font-weight: normal;
  text-decoration: none;
}

.contact-links a:hover {
  text-decoration: underline;
}


/* Reviews section */
.reviews { background: var(--bg-elev, #f9f9f9); padding: 56px 0; margin-top: 60px /* fix of footer top margin */ /* margin-top: -20px; */ }
.reviews h2 { color: var(--brand, #1e7a3b); text-align: center; margin: 0 0 24px; font-size: 1.9rem; line-height: 2.1rem; }
.reviews .container { max-width: 1100px; margin: 0 auto; }

/* Carousel shell */
.reviews-carousel { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.rc-viewport { overflow: hidden; }
.rc-track { display: flex; gap: 18px; will-change: transform; transition: transform .35s ease; }

/* Cards */
.review-card {
  background: #fff; border-radius: 14px; /* box-shadow: 0 6px 20px rgba(0,0,0,.08) box-shadow: 0 3px 8px rgba(0,0,0,.05)*/;
  border: 1px solid #e5e5e5;
  box-shadow: 0 2px 6px rgba(0,0,0,.02);
  padding: 18px; display: grid; gap: 10px; min-height: 170px;
}
.review-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.review-name { font-weight: 700; }
.review-loc { font-size: .92rem; color: #555; }
.review-text { margin: 0; color: #222; font-size: .95rem; line-height: 1.4; }

/* Stars */
.stars { font-size: 1.1rem; letter-spacing: 2px; display: inline-block; }
.stars .on  { color: #fbbc04; } /* žuta */
.stars .off { color: #d0d0d0; } /* siva */

/* Cards per viewport */
.review-card { flex: 0 0 calc((100% - 2 * 18px) / 3); }
@media (max-width: 900px) {
  .review-card { flex: 0 0 calc((100% - 18px) / 2); }
}
@media (max-width: 560px) {
  .review-card { flex: 0 0 100%; }
}


/* Arrows */
.rc-btn {
  width: 40px; height: 40px; border-radius: 999px; border: 0;
  background: var(--brand, #1e7a3b); color: #fff; cursor: pointer;
  display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.08);
}
.rc-btn:disabled { opacity: .35; cursor: not-allowed; }


/* KALKULATOR CIJENA START */


/* stil za checked */
/* Kada je usluga označena */
.svc-body:not(.hidden) {
  background: linear-gradient(180deg, #def0e5 0%, #f2faf6 100%); /* još izraženija svijetlo-zelena */
  border: 1px solid #c5dbce;       /* mrvicu jači rub */
  border-radius: 7px;
  padding: 14px;
  margin-top: 8px;
  box-shadow: 0 3px 8px rgba(47,158,68,0.15); /* naglašenija sjena */
  transition: all 0.25s ease;
}

/* Labela check-a kada je aktivna */
.check input[type="checkbox"]:checked + label,
.check input[type="checkbox"]:checked {
  font-weight: 600;
  color: #1a7f3c;
  background: #e3f6eb;           /* intenzivnija nijansa */
  border-radius: 7px;
  padding: 4px 8px;
  transition: all 0.25s ease;
}


/* bottom mobile ukupno */
.mobile-total {
  position: sticky;          /* lijepi se za dno viewporta */
  bottom: 0;
  display: none;             /* default skriveno na desktopu */
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
  background: linear-gradient(180deg, #0f6b32 0%, #0d5d2b 100%);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  z-index: 1000;
  box-shadow: 0 -6px 20px rgba(0,0,0,0.12);
  border-top: 1px solid rgba(255,255,255,0.12);
}
.mobile-total .label { letter-spacing: .02em; opacity: .9; }
.mobile-total .value { font-size: 1.15rem; }

/* “skriveno” pomoćna klasa */
.mobile-total.hidden { display: none !important; }

/* Samo na malim ekranima prikazujemo */
@media (max-width: 768px) {
  .mobile-total { display: flex; }
  /* malo podigni dno sadržaja da bar ne prekriva nešto bitno */
  main { /* padding-bottom: 84px; */ }
}

/* Hover/tap feedback (ne pretjerano) */
@media (hover: hover) {
  .mobile-total:hover {
    filter: brightness(1.05);
  }
}


/* FAQ start */

.faq{max-width:1200px;margin:28px auto 0;}
.faq h2{font-size:1.4rem}
.faq details{border:1px solid var(--line);border-radius:7px;padding:12px 14px;margin:10px 0;}
.faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq .answer{margin-top:8px;color:#2a3b32;font-size:.95rem}

/*
.faq{max-width:1200px;margin:28px auto 0;}
.faq h2{font-size:1.4rem}
.faq details{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:10px 0;}
.faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq .answer{margin-top:8px;color:#2a3b32;font-size:.95rem}
.answer a { color: var(--brand); font-weight: 600; text-decoration: none; }
.answer a:hover { text-decoration: underline; }

/* FAQ end */



/* KALKULATOR CIJENA END */


/* Rasenpflege */
.pricing-table{
  width:100%;
  border-collapse:collapse;
  border:1px solid #e5e7eb;
  border-radius:12px;
  overflow:hidden;
  table-layout:fixed;
  font-size:16px;
}
.pricing-table th, .pricing-table td{
  padding:14px 16px;
  border-bottom:1px solid #e5e7eb;
}
.pricing-table thead th{
  background:#eaf6ee;
  color:#111827;
  font-weight:700;
}

.pricing-table td:nth-child(1),
.pricing-table th:nth-child(1){
  text-align:left;
}

.pricing-table td:nth-child(2),
.pricing-table th:nth-child(2){
  text-align:center;
}

.pricing-table tfoot td{
  background:#ededed;
  color:var(--khm-muted);
  font-size:14px;
  padding:12px 16px;
}

/* 2 stupca na malim širinama */
@media (max-width:640px){
  .pricing-table{ font-size:14px; }
  .pricing-table th, .pricing-table td{ padding:10px 12px; }

  /* širine stupaca */
  .pricing-table th:first-child,
  .pricing-table td:first-child{ width:65%; }
  .pricing-table th:nth-child(2),
  .pricing-table td:nth-child(2){ width:35%; }

  /* bolja čitljivost teksta u 1. stupcu */
  .pricing-table td:first-child{
    white-space:normal; /* prelamanje */
    word-break:break-word;
  }
}


/* podkategorije START */


/* ===== Subcategory chips (PODKATEGORIJE) ===== */
.subcats{ margin:16px 0 8px; overflow:visible; }
.subcats-viewport{
  position:relative;
  width:100%;
  overflow:visible;                 /* strelice smiju viriti izvan */
}

/* Traka čipova – bez rezervacije prostora za strelice */
.subcats-track{
  display:flex; gap:12px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:8px 0;
}
.subcats-track::-webkit-scrollbar{ display:none; }

/* Čipovi */
.subcats .chip{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  height:40px; padding:0 16px; white-space:nowrap;

  background:#f6faf8;
  color:#176c36;
  border:1px solid #b9d7c7;
  border-radius:999px;

  font-weight:500;
  font-size:.98rem;
  text-decoration:none;

  box-shadow:0 1px 0 rgba(0,0,0,.03), 0 2px 8px rgba(20,108,52,.06);
  transition:transform .08s ease, border-color .2s ease, background .2s ease, color .2s ease;

  scroll-snap-align:start;
  scroll-snap-stop:always;
}
.subcats .chip:hover{
  transform:translateY(-1px);
  background:#eaf7ef;
  border-color:#9dcbb0;
  color:#155f2d;
}
.subcats .chip.is-active{
  background:#1a7f3c;
  color:#fff !important;
  border-color:#1a7f3c;
  box-shadow:0 2px 10px rgba(26,127,60,.18);
  font-weight:700;
  transform:none;
}
.subcats .chip:visited{ color:inherit; }

/* Strelice – izvan contenta, savršeno centriran chevron */
.subcats-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px; height:42px;

  display:flex; align-items:center; justify-content:center;
  border:none; border-radius:999px;
  background:var(--green, #1a7f3c); color:#fff;
  cursor:pointer; z-index:5;                  /* iznad svega */
  box-shadow:0 6px 18px rgba(26,127,60,.35), 0 0 0 3px #fff;
  -webkit-tap-highlight-color: transparent;

  font-size:0;                                 /* nema teksta u gumbu */
}

/* Chevron crtamo borderima (uvijek centriran) */
.subcats-btn::before{
  content:'';
  width:12px; height:12px;
  border-right:3px solid currentColor;
  border-bottom:3px solid currentColor;
  border-radius:1px;
  display:block;
  margin-top:1px;                             /* optičko poravnanje */
}
.subcats-btn.prev::before{ transform:rotate(135deg); }   /* ← */
.subcats-btn.next::before{ transform:rotate(-45deg); }   /* → */

/* Pozicija strelica – IZVAN sadržaja */
.subcats-btn.prev{ left:-50px; }
.subcats-btn.next{ right:-50px; }

.subcats-btn:hover{ transform:translateY(-50%) scale(1.05); }
.subcats-btn:active{ transform:translateY(-50%) scale(0.96); }

/* Edge fade (ostaje unutar viewporta) */
.subcats-viewport .edge{
  position:absolute; top:0; bottom:0;
  width:48px; pointer-events:none; z-index:4;
  background:linear-gradient(to right, #fff, rgba(255,255,255,0));
}
.subcats-viewport .edge-left{ left:0; }
.subcats-viewport .edge-right{ right:0; transform:scaleX(-1); }

/* Hint badge (mobitel, prvi put) */
.subcats-hint{
  position:absolute; left:50%; transform:translateX(-50%);
  top:-10px; background:rgba(26,127,60,.95); color:#fff;
  padding:6px 10px; border-radius:999px; font-size:.8rem; font-weight:700;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  display:none; white-space:nowrap; z-index:6;
}
.subcats-viewport.show-hint .subcats-hint{ display:block; animation:hintFade 2.6s forwards; }

@keyframes hintFade{
  0%{ opacity:0; transform:translate(-50%,-6px); }
  10%{ opacity:1; transform:translate(-50%,0); }
  70%{ opacity:1; }
  100%{ opacity:0; transform:translate(-50%,-6px); }
}

/* Uže širine: smanji offset da ne “ispadne” s ekrana */
@media (max-width:1200px){
  .subcats-btn.prev{ left:-40px; }
  .subcats-btn.next{ right:-40px; }
}
@media (max-width:980px){
  .subcats-btn.prev{ left:-30px; }
  .subcats-btn.next{ right:-30px; }
}

/* Mobile – po dogovoru skrivene strelice */
@media (max-width:780px){
  .subcats-btn{ display:none !important; }
  .subcats .chip{ height:38px; padding:0 14px; font-size:.95rem; }
}

/* Mikro poravnanje ikonice strelica */
.subcats-btn.prev::before {
  transform: rotate(135deg) translateX(-1px) translateY(-1px);
}

.subcats-btn.next::before {
  transform: rotate(-45deg) translateX(-1px) translateY(-1px);
}

/*.subcats, .subcats-viewport { overflow: visible !important; }*/

/* podkategorije END */


/* ========== ↓ landing pages local START ↓ ========== */

/* ===== LP: 2-stupčani popis s zelenim kvačicama ===== */
.lp-points { margin-top: 10px; }
.lp-points__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 2 stupca */
  column-gap: 48px;                 /* razmak među stupcima */
  row-gap: 10px;                    /* vertikalni razmak */
}
.lp-points__list li{
  position: relative;
  padding-left: 28px;               /* prostor za ikonu */
  line-height: 1.6;
  color: #1f2a24;                   /* tamni tekst, čitljiv */
}
.lp-points__list li::before{
  content:"";
  position: absolute;
  left: 0;
  top: 0.45em;                      /* optičko poravnanje s tekstom */
  width: 16px;
  height: 16px;
  background:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'>\
<polyline points='20 6 9 17 4 12'/></svg>") center/16px 16px no-repeat;
  background-color: var(--accent);   /* koristi postojeću brand boju */
  border-radius: 3px;               /* lagani “badge” kvadratić */
  box-shadow: 0 0 0 1px color-mix(in srgb, #666666 25%, transparent);
  transform: translateY(-2px);      /* fino spuštanje */
}

/* Responsive: ispod 720px — 1 stupac */
@media (max-width: 720px){
  .lp-points__list{ grid-template-columns: 1fr; column-gap: 0; }
}




/* ===== LP: Održavanje vrtova – stabilna, responzivna varijanta ===== */
.lp-maint-simple {
  /*background:#fff;*/
  padding:0; /* 80px 0; */
  /*border-top:1px solid #e6eee8;*/
}
.lp-maint-simple h2 {
  color:var(--brand);
  margin:0 0 8px;
}
.lp-maint-simple > .container > .muted {
  max-width:880px;
}

/* ===== Lista usluga ===== */
.lpms-list {
  margin-top:32px;
  display:flex;
  flex-direction:column;
  gap:32px;
}

/* ===== Kartica usluge ===== */
.lpms-item {
  display:flex;
  align-items:center;
  gap:0; /* 32px; */
  background:#fff;
  border:1px solid #e8eee8;
  border-radius:18px;
  padding:10px; /* 20px; */
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  transition:transform .25s ease, box-shadow .25s ease;
}
.lpms-item:hover {
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(0,0,0,.1);
}

/* ===== Slika ===== */
.lpms-thumb {
  margin-left: 10px; /* pomicanje slike lijevo */
  flex-shrink:0;
  width:100%;
  max-width:300px;           /* ograničena širina */
  border-radius:14px;
  overflow:hidden;
  background:#f2f7f3;
}
.lpms-thumb img {
  display:block;
  width:100%;
  height:auto;               /* ključ: visina se prilagođava širini */
  object-fit:cover;
  border-radius:14px;
}

/* ===== Tekst ===== */
.lpms-copy {
  flex:1;
  margin-left: -20px;
}
.lpms-copy h3 {
  margin:0 0 6px;
  font-size:1.2rem;
  color:var(--brand);
  line-height:1.4;
}
.lpms-copy p {
  margin:0;
  line-height:1.7;
  color:#2a332e;
}

/* ===== CTA ispod liste ===== */
.lpms-cta {
  margin-top:28px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .lpms-item {
    flex-direction:column;
    text-align:center;
    padding:16px;
  }
  .lpms-thumb {
    max-width:100%;
    width:100%;
    margin-left: 0; /* fix pomicanja slike lijevo */
  }
  .lpms-copy {
    padding:10px; /* padding-top:10px; */
    margin-left: 0; /* fix */
    background-color: #fff; /* fix */
  }
  .lpms-copy h3 {
    font-size:1.1rem;
  }
}
@media (max-width: 600px) {
  .lp-maint-simple {
    padding:60px 0;
  }
  .lpms-list {
    gap:26px;
  }
  .lpms-item {
    padding:14px;
  }
  .lpms-thumb img {
    border-radius:12px;
  }
}

/* === FIX: vertikalne slike u .lpms-item (jednaka visina thumbs) === */

/* DESKTOP/TABLET: slika zauzima svoj stupac, ali visina je kontrolirana omjerom */
.lpms-item{
  display: grid;
  grid-template-columns: minmax(300px, 46%) 1fr; /* slika ~max 46% */
  gap: 28px;
  align-items: center;
}

.lpms-thumb{
  width: 100%;
  aspect-ratio: 16 / 10;      /* KLJUČ: jednaka visina za sve slike */
  border-radius: 14px;
  overflow: hidden;
  background: #f2f7f3;
}

.lpms-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;          /* cropa vertikalne bez razvlačenja kartice */
  display: block;
  border-radius: 14px;
  transition: transform .4s ease;
}

.lpms-item:hover .lpms-thumb img{ transform: scale(1.03); }

/* MOBILE: jedan stupac, malo širi omjer da je thumbnail “niži” */
@media (max-width: 980px){
  .lpms-item{
    grid-template-columns: 1fr;
    text-align: center;
    gap: 18px;
  }
  .lpms-thumb{
    aspect-ratio: 16 / 9;     /* kompaktnije skrolanje na mobitelu */
    width: 100%;
  }
}

/* sitni polishing */
@media (max-width: 600px){
  .lpms-thumb{ aspect-ratio: 4 / 3; } /* malo viši crop na najmanjim ekranima */
}


/* ===== CTA Buttons ===== */
.cta-center {
  display: flex;
  justify-content: center;   /* horizontalno centriranje */
  align-items: center;       /* vertikalno poravnanje ako su različite visine */
  gap: 16px;                 /* razmak između gumba */
  margin-top: 28px;
  flex-wrap: wrap;           /* da ne pucaju na mobitelu */
}

.landing-btn1-cta {
  display: inline-block;
  background: linear-gradient(135deg, #ff8c00, #ff6500); /* narančasti ton */
  color: #fff;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 1.05rem;
  box-shadow: 0 4px 15px rgba(255, 102, 0, 0.3);
  transition: all 0.25s ease;
  border: 1px solid #fff;
}

.landing-btn1-cta:hover {
  background: linear-gradient(135deg, #ff9d26, #ff7a00);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(255, 102, 0, 0.4);
}

.landing-btn2-cta {
  display: inline-block;
  background: linear-gradient(135deg, #fdd835, #fbc02d);
  color: #000;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 1.05rem;
  box-shadow: 0 4px 15px rgba(255, 102, 0, 0.3);
  transition: all 0.25s ease;
  border: 1px solid #fff;
}

.landing-btn2-cta:hover {
  background: linear-gradient(135deg, #ff9d26, #ff7a00);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(255, 102, 0, 0.4);
}


/* ===== LP: Proces – timeline (v2) ===== */
.lp-proc.v2{ padding:0 0 56px; /* padding:44px 0 56px; */ }
.lp-proc.v2 h2{ margin:0 0 6px; color:var(--brand); }
.lp-proc.v2 .muted{ margin:0 0 16px; max-width:880px; }

/* Lista koraka */
.lp-proc-tl{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:14px;
}

/* Svaki korak: 2 kolone (rail + kartica) */
.lp-step{
  display:grid;
  grid-template-columns: 44px 1fr;
  align-items:start;
  gap:14px;
}

/* Lijevi stupac – vertikalna linija + bedž */
.lp-step__rail{
  position:relative; min-height: 100%;
}
.lp-step__rail::after{
  content:""; position:absolute; top:0; bottom:0; left:21px;
  width:2px; background: color-mix(in srgb, var(--brand) 18%, #dfe8e1);
}
.lp-step:last-child .lp-step__rail::after{ bottom:16px; } /* elegantan završetak */

/* Broj koraka */
.lp-step__badge{
  position:relative; z-index:1;
  display:grid; place-items:center;
  width:34px; height:34px; border-radius:999px;
  background:var(--brand); color:#fff; font-weight:700; font-size:.95rem;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
  margin-left:4px; /* centriranje na rail */
}

/* Desni stupac – kartica */
.lp-step__card{
  background:#f6fbf7;
  border:1px dashed color-mix(in srgb, var(--brand) 22%, #dfe8e1);
  border-radius:14px;
  padding:16px 18px;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.lp-step__card:hover{
  background:#eef8f2;
  box-shadow:0 6px 14px rgba(0,0,0,.08);
}

.lp-step__card h3{
  margin:0 0 6px; font-size:1.05rem; font-weight:700; color:#0f1b16;
}
.lp-step__card p{
  margin:0; color:var(--muted, #63706a); line-height:1.6;
}

/* Responsive */
@media (max-width: 700px){
  .lp-proc.v2{ padding:36px 0 46px; }
  .lp-step{ grid-template-columns: 36px 1fr; gap:12px; }
  .lp-step__badge{ width:28px; height:28px; font-size:.85rem; }
  .lp-step__rail::after{ left:17px; }
  .lp-step__card{ padding:14px 16px; }
  .lp-step__card h3{ font-size:1rem; }
}





/* ===== LP: Galerija radova ===== */
.lp-gal{ /*background:#f7fbf8; padding:72px 0;*/ }
.lp-gal__head{ text-align:center; margin-bottom:22px; }
.lp-gal__head h2{ color:var(--brand); font-size:clamp(28px,4vw,46px); margin:0 0 6px; }
.lp-gal__head .muted{ max-width:900px; margin:0 auto; }

/* Grid */
.lp-gal__grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:28px;
  margin-top:8px;
}

/* Item */
.lp-gal__item{
  margin:0; padding:0; border-radius:14px; overflow:hidden;
  background:#fff; box-shadow:0 10px 28px rgba(0,0,0,.08);
}

/* Link + slika */
.lp-gal__link{ position:relative; display:block; line-height:0; }
.lp-gal__item img{
  width:100%; height:auto; display:block;
  aspect-ratio: 4 / 3;            /* konzistentna visina thumbs */
  object-fit: cover;
  transition: transform .35s ease, filter .35s ease;
  filter: saturate(1);
  border-radius:14px;
}

/* Hover: lagano zatamni i podigni zasićenost */
.lp-gal__link::after{
  content:""; position:absolute; inset:0;
  background:rgba(0,0,0,0); transition: background .35s ease;
  border-radius:14px;
}
.lp-gal__link:hover img{ transform: scale(1.03); filter: saturate(1.1); }
.lp-gal__link:hover::after{ background: rgba(0,0,0,.25); }

/* Caption overlay */
.lp-gal__cap{
  position:absolute; left:12px; bottom:12px;
  background: rgba(0,0,0,.55);
  color:#fff; font-weight:600; font-size: .98rem;
  padding:8px 12px; border-radius:14px;
  line-height:1.25; max-width: 85%;
  transform: translateY(6px);
  opacity: .0;
  transition: .3s ease;
}
.lp-gal__link:hover .lp-gal__cap{ transform: translateY(0); opacity:1; }

/* CTA ispod galerije */
.lp-gal__cta{ display:flex; justify-content:center; gap:14px; margin-top:24px; flex-wrap:wrap; }
/* koristi već definirane .btn-cta i .btn-cta-outline iz ranijeg bloka */

/* Responsive */
@media (max-width: 1024px){
  .lp-gal__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:22px; }
}
@media (max-width: 640px){
  .lp-gal{ /*padding:56px 0;*/ }
  .lp-gal__grid{ grid-template-columns: 1fr; gap:18px; }
  .lp-gal__cap{ font-size: .96rem; }
}









/* ========== ↓ landing pages local END ↓ ========== */