/* ============================================================
   rebuild.css — styles for rebuilt sub-pages (solutions, products,
   o-nama, kontakt, pomoc). Complements style.css + rjesenja.css.
   ============================================================ */

:root{
  --rb-navy:#0B1D33; --rb-navy-2:#0F2A4A; --rb-teal:#0F766E; --rb-teal-2:#10B981;
  --rb-ink:#1F2A37; --rb-muted:#5A6B7B; --rb-line:#E7ECF2; --rb-bg:#F6F8FA;
}

/* ---------- HERO (photo) inner ---------- */
.solution-hero{position:relative;overflow:hidden;background:var(--rb-navy);color:#fff;padding:124px 0 60px;}
.solution-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.30;z-index:0;}
.solution-hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(120deg,rgba(8,20,36,.96) 0%,rgba(8,20,36,.78) 45%,rgba(8,20,36,.45) 100%);}
.solution-hero .container{position:relative;z-index:2;}
.solution-hero-inner{max-width:760px;}
.solution-hero-eyebrow{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rb-teal-2);margin-bottom:14px;}
.solution-hero h1{font-size:3rem;line-height:1.06;font-weight:800;color:#fff;margin:0 0 18px;letter-spacing:-.02em;}
.solution-hero h1 .highlight{color:var(--rb-teal-2);}
.solution-hero-lead{font-size:1.12rem;line-height:1.65;color:rgba(255,255,255,.82);max-width:640px;margin:0 0 8px;}
.solution-hero .breadcrumb-current{color:rgba(255,255,255,.85);}
.solution-hero .solution-hero-stats .stat-num{font-size:1.5rem;font-weight:800;color:#fff;}
.solution-hero .solution-hero-stats .stat-label{font-size:.82rem;color:rgba(255,255,255,.62);}
.solution-hero-cta{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:8px;}
.btn-ghost{color:rgba(255,255,255,.85);text-decoration:none;font-weight:600;font-size:.95rem;
  padding:13px 20px;border:1px solid rgba(255,255,255,.25);border-radius:10px;transition:.25s;}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5);}

@media(max-width:820px){.solution-hero{padding:104px 0 48px;}.solution-hero h1{font-size:2.2rem;}}

/* ---------- ZONES ---------- */
.solution-zones{padding:90px 0;background:#fff;}
.zones-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:900px){.zones-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.zones-grid{grid-template-columns:1fr;}}
.zone-card{display:flex;gap:16px;align-items:flex-start;padding:24px;border:1px solid var(--rb-line);
  border-radius:16px;background:var(--rb-bg);transition:.3s;}
.zone-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(15,23,42,.08);border-color:#D5E0EA;}
.zone-check{flex:0 0 40px;height:40px;border-radius:10px;background:rgba(15,118,110,.10);
  display:flex;align-items:center;justify-content:center;}
.zone-text h3{font-size:1.05rem;font-weight:700;color:var(--rb-navy);margin:2px 0 6px;}
.zone-text p{font-size:.9rem;line-height:1.6;color:var(--rb-muted);margin:0;}

/* ---------- REFERENCES strip ---------- */
.solution-refs{padding:80px 0;background:var(--rb-bg);}
.solution-refs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:760px){.solution-refs-grid{grid-template-columns:1fr;}}
.solution-ref-item{display:block;border-radius:16px;overflow:hidden;aspect-ratio:4/3;border:1px solid var(--rb-line);}
.solution-ref-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.solution-ref-item:hover img{transform:scale(1.06);}
.solution-refs-cta{text-align:center;margin-top:36px;}

/* ---------- CTA band ---------- */
.solution-cta{padding:80px 0;background:#fff;}
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  background:linear-gradient(120deg,var(--rb-navy) 0%,var(--rb-navy-2) 100%);
  border-radius:22px;padding:46px 50px;position:relative;overflow:hidden;
  box-shadow:0 30px 60px -25px rgba(11,29,51,.6);}
.cta-band::before{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(16,185,129,.35),transparent 70%);}
.cta-band-text{position:relative;z-index:1;max-width:640px;}
.cta-band-text h2{font-size:1.7rem;font-weight:800;color:#fff;margin:0 0 10px;}
.cta-band-text p{font-size:1rem;line-height:1.6;color:rgba(255,255,255,.78);margin:0;}
.cta-band .btn-primary{position:relative;z-index:1;white-space:nowrap;}
@media(max-width:760px){.cta-band{padding:34px 26px;}.cta-band-text h2{font-size:1.35rem;}}

/* ---------- buttons ---------- */
.btn-secondary{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:10px;
  font-weight:600;font-size:.95rem;text-decoration:none;color:var(--rb-navy);background:#fff;
  border:1px solid var(--rb-line);transition:.25s;}
.btn-secondary:hover{border-color:var(--rb-teal);color:var(--rb-teal);transform:translateY(-2px);}
.btn-lg{padding:16px 30px;font-size:1rem;}

/* ---------- PRODUCT LISTING (proizvodi pages) ---------- */
.product-listing{padding:70px 0 90px;background:var(--rb-bg);}
.product-listing .proizvod-grid{margin-top:10px;}
.product-feature{padding:90px 0;background:#fff;}
.product-feature .pf-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center;}
@media(max-width:860px){.product-feature .pf-inner{grid-template-columns:1fr;gap:30px;}}
.pf-media{border-radius:20px;overflow:hidden;border:1px solid var(--rb-line);
  background:radial-gradient(circle at 50% 38%,#fff,#EEF2F6);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:28px;}
.pf-media img{max-width:100%;max-height:100%;object-fit:contain;}
.pf-text .section-badge{margin-bottom:14px;}
.pf-text h2{font-size:2rem;font-weight:800;color:var(--rb-navy);margin:0 0 16px;letter-spacing:-.01em;}
.pf-text p{font-size:1.02rem;line-height:1.7;color:var(--rb-muted);margin:0 0 18px;}
.pf-list{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:12px;}
.pf-list li{display:flex;gap:12px;align-items:flex-start;font-size:.96rem;color:var(--rb-ink);}
.pf-list li svg{flex:0 0 auto;margin-top:3px;}

/* ---------- generic content page (o-nama / pomoc) ---------- */
.content-section{padding:80px 0;background:#fff;}
.content-section.alt{background:var(--rb-bg);}
.content-narrow{max-width:820px;margin:0 auto;}
.content-narrow p{font-size:1.05rem;line-height:1.8;color:var(--rb-ink);margin:0 0 18px;}
.content-narrow h3{font-size:1.35rem;font-weight:700;color:var(--rb-navy);margin:34px 0 12px;}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:20px;}
@media(max-width:900px){.value-grid{grid-template-columns:1fr;}}
.value-card{padding:28px;border:1px solid var(--rb-line);border-radius:16px;background:#fff;}
.value-card .vc-icon{width:46px;height:46px;border-radius:12px;background:rgba(15,118,110,.1);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.value-card h3{margin:0 0 8px;font-size:1.1rem;color:var(--rb-navy);}
.value-card p{font-size:.92rem;line-height:1.6;color:var(--rb-muted);margin:0;}

/* timeline (process) */
.timeline{display:grid;gap:0;margin-top:30px;}
.tl-step{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:0 0 34px;position:relative;}
.tl-step:not(:last-child)::before{content:"";position:absolute;left:31px;top:54px;bottom:0;width:2px;background:var(--rb-line);}
.tl-num{width:54px;height:54px;border-radius:50%;background:var(--rb-navy);color:#fff;font-weight:800;
  display:flex;align-items:center;justify-content:center;font-size:1.15rem;}
.tl-body h3{margin:8px 0 6px;font-size:1.15rem;color:var(--rb-navy);}
.tl-body p{margin:0;color:var(--rb-muted);line-height:1.65;}

/* contact layout */
.contact-section{padding:80px 0;background:var(--rb-bg);}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:start;}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;}}
.contact-info-card{background:#fff;border:1px solid var(--rb-line);border-radius:20px;padding:36px;}
.contact-info-item{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--rb-line);}
.contact-info-item:last-child{border-bottom:none;}
.contact-info-item .ci-icon{flex:0 0 42px;height:42px;border-radius:10px;background:rgba(15,118,110,.1);display:flex;align-items:center;justify-content:center;}
.contact-info-item h4{margin:0 0 3px;font-size:.95rem;color:var(--rb-navy);}
.contact-info-item p,.contact-info-item a{margin:0;font-size:.92rem;color:var(--rb-muted);text-decoration:none;}
.contact-info-item a:hover{color:var(--rb-teal);}
.contact-form-card{background:#fff;border:1px solid var(--rb-line);border-radius:20px;padding:36px;box-shadow:0 8px 40px rgba(15,23,42,.06);}
.contact-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:560px){.contact-form .form-row{grid-template-columns:1fr;}}
.contact-form .form-group{margin-bottom:16px;display:flex;flex-direction:column;}
.contact-form label{font-size:.82rem;font-weight:600;color:var(--rb-navy);margin-bottom:6px;}
.contact-form input,.contact-form select,.contact-form textarea{padding:12px 14px;border:1px solid var(--rb-line);
  border-radius:10px;font-size:.95rem;font-family:inherit;color:var(--rb-ink);background:#fff;}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:var(--rb-teal);box-shadow:0 0 0 3px rgba(15,118,110,.12);}
.contact-form .btn-primary{width:100%;justify-content:center;margin-top:6px;}

/* pomoc steps / cards */
.help-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:24px;}
@media(max-width:760px){.help-grid{grid-template-columns:1fr;}}
.help-card{padding:30px;border:1px solid var(--rb-line);border-radius:18px;background:#fff;transition:.3s;}
.help-card:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(15,23,42,.08);border-color:#D5E0EA;}
.help-card .hc-step{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rb-teal);}
.help-card h3{margin:8px 0 10px;font-size:1.2rem;color:var(--rb-navy);}
.help-card p{margin:0;color:var(--rb-muted);line-height:1.65;font-size:.95rem;}

/* page hero (simple, for o-nama/kontakt/pomoc) */
.page-hero{position:relative;background:linear-gradient(120deg,var(--rb-navy) 0%,var(--rb-navy-2) 100%);color:#fff;padding:120px 0 56px;overflow:hidden;}
.page-hero::before{content:"";position:absolute;right:-80px;top:-80px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(16,185,129,.3),transparent 70%);}
.page-hero .container{position:relative;z-index:1;max-width:820px;}
.page-hero .solution-hero-eyebrow{color:var(--rb-teal-2);}
.page-hero h1{font-size:2.7rem;font-weight:800;margin:0 0 16px;letter-spacing:-.02em;}
.page-hero h1 .highlight{color:var(--rb-teal-2);}
.page-hero p{font-size:1.1rem;line-height:1.7;color:rgba(255,255,255,.82);margin:0;}
@media(max-width:820px){.page-hero{padding:100px 0 44px;}.page-hero h1{font-size:2rem;}}

/* static (non-link) product variant card */
.proizvod-card--static{cursor:default;}
.proizvod-card--static:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(15,23,42,.08);}

/* ===== About / Kontakt / Pomoc rebuilt pages ===== */
.section-header--left{text-align:left;max-width:760px;margin-left:0;}
.btn-block{width:100%;justify-content:center;}
.btn-ghost--dark{color:#0B1D33;border-color:rgba(11,29,51,.22);}
.btn-ghost--dark:hover{background:#0B1D33;color:#fff;border-color:#0B1D33;}

/* About intro */
.about-intro{padding:5rem 0 1rem;}
.about-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center;}
.about-intro-text h2{font-size:2rem;margin:.6rem 0 1rem;color:#0B1D33;}
.about-intro-text p{color:#475569;line-height:1.75;margin-bottom:1.1rem;}
.about-intro-media img{width:100%;border-radius:18px;box-shadow:0 24px 60px rgba(15,23,42,.16);display:block;}

/* About process numbers */
.about-process{padding:4.5rem 0;}
.process-num{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:46px;border-radius:12px;background:rgba(15,118,110,.1);color:#0F766E;font-weight:700;font-size:1.05rem;}
.about-process .process-step{display:flex;gap:1.1rem;align-items:flex-start;}
.about-process .process-body h3{font-size:1.15rem;color:#0B1D33;margin-bottom:.35rem;}
.about-process .process-body p{color:#64748b;line-height:1.65;}

/* About partner band */
.about-partner{padding:1rem 0 5rem;}
.about-partner-inner{background:linear-gradient(135deg,#0B1D33 0%,#0F766E 140%);border-radius:22px;padding:3rem;position:relative;overflow:hidden;}
.about-partner-inner::after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;background:radial-gradient(circle,rgba(45,212,191,.25),transparent 70%);}
.about-partner-text{max-width:620px;position:relative;z-index:1;}
.about-partner-text .section-badge{background:rgba(255,255,255,.12);color:#a7f3e9;}
.about-partner-text h2{color:#fff;font-size:1.8rem;margin:.6rem 0 1rem;}
.about-partner-text p{color:rgba(255,255,255,.82);line-height:1.7;margin-bottom:1.5rem;}

/* Contact */
.contact-section{padding:4.5rem 0 5.5rem;}
.contact-list{list-style:none;padding:0;margin:1.8rem 0 0;display:flex;flex-direction:column;gap:1.3rem;}
.contact-list li{display:flex;gap:1rem;align-items:flex-start;}
.contact-ic{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;background:rgba(15,118,110,.1);flex-shrink:0;}
.contact-list strong{display:block;color:#0B1D33;font-size:.92rem;margin-bottom:.15rem;}
.contact-list a,.contact-list span{color:#475569;text-decoration:none;}
.contact-list a:hover{color:#0F766E;}
.contact-form-card .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.form-note{font-size:.8rem;color:#94a3b8;text-align:center;margin-top:.9rem;}

/* Pomoc steps */
.pomoc-section{padding:5rem 0 3rem;}
.pomoc-steps{display:flex;flex-direction:column;gap:1.3rem;margin-top:2.2rem;}
.pomoc-step{display:flex;gap:1.3rem;align-items:flex-start;background:#fff;border:1px solid #eef1f5;border-radius:18px;padding:1.8rem;box-shadow:0 10px 30px rgba(15,23,42,.05);}
.pomoc-step-num{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:#0F766E;color:#fff;font-weight:700;flex-shrink:0;}
.pomoc-step-body h3{font-size:1.2rem;color:#0B1D33;margin-bottom:.5rem;}
.pomoc-step-body p{color:#64748b;line-height:1.7;}
.pomoc-chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem;}
.pomoc-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.5rem .9rem;border-radius:999px;background:rgba(15,118,110,.08);color:#0F766E;font-size:.85rem;font-weight:600;text-decoration:none;transition:all .2s;}
.pomoc-chip:hover{background:#0F766E;color:#fff;}
.pomoc-chip svg{width:14px;height:14px;}
.pomoc-help{padding:2rem 0 5.5rem;}
.pomoc-help-inner{background:linear-gradient(135deg,#0B1D33 0%,#0F766E 140%);border-radius:22px;padding:3rem;position:relative;overflow:hidden;}
.pomoc-help-inner::after{content:"";position:absolute;right:-60px;bottom:-80px;width:280px;height:280px;background:radial-gradient(circle,rgba(45,212,191,.22),transparent 70%);}
.pomoc-help-text{max-width:640px;position:relative;z-index:1;}
.pomoc-help-text .section-badge{background:rgba(255,255,255,.12);color:#a7f3e9;}
.pomoc-help-text h2{color:#fff;font-size:1.8rem;margin:.6rem 0 1rem;}
.pomoc-help-text p{color:rgba(255,255,255,.82);line-height:1.7;margin-bottom:1.5rem;}
.pomoc-help-cta{display:flex;gap:1rem;flex-wrap:wrap;}
.pomoc-help-cta .btn-ghost--dark{color:#fff;border-color:rgba(255,255,255,.4);}
.pomoc-help-cta .btn-ghost--dark:hover{background:#fff;color:#0B1D33;}

@media (max-width:860px){
  .about-intro-grid,.contact-grid{grid-template-columns:1fr;gap:2rem;}
  .contact-form-card .form-row{grid-template-columns:1fr;}
  .about-partner-inner,.pomoc-help-inner{padding:2rem;}
}


/* ============================================================
   PHOTO CARD MEDIA — cover-fill for ambient/realizacija photos
   (packshot product images keep their `contain` treatment).
   Add class `proizvod-card-media--cover` on photographic cards.
   ============================================================ */
.solution-ref-item{position:relative;overflow:hidden;}
.solution-ref-item img{width:100%;height:100%;object-fit:cover;display:block;}


/* ============================================================
   PRODUCT CARD GALLERY + LIGHTBOX (core pattern)
   ============================================================ */
.product-groups{padding:70px 0 90px;background:var(--rb-bg);}
.product-group{margin-bottom:64px;}
.product-group:last-child{margin-bottom:0;}
.product-group-head{display:block;border-bottom:1px solid #e1e7ec;
  padding-bottom:16px;margin-bottom:30px;}
.product-group-head h2{font-size:1.5rem;color:var(--rb-navy);margin:0 0 8px;font-weight:800;letter-spacing:-.01em;}
.product-group-head p{margin:0;color:var(--rb-muted);font-size:.95rem;max-width:760px;line-height:1.5;}

.pcard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:24px;}

.pcard{background:#fff;border:1px solid #e9edec;border-radius:16px;overflow:hidden;display:flex;
  flex-direction:column;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.pcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(15,46,43,.10);border-color:#cfe0dd;}
.pcard-media{position:relative;aspect-ratio:4/3;background:#f4f6f5;cursor:pointer;overflow:hidden;}
.pcard-media img{width:100%;height:100%;object-fit:contain;padding:14px;transition:transform .4s ease;display:block;}
.pcard-media.is-photo img{object-fit:cover;padding:0;}
.pcard-media.is-juka img{object-fit:cover;object-position:center bottom;padding:0;}
.pcard:hover .pcard-media img{transform:scale(1.04);}
.pcard-zoom{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;
  background:rgba(15,46,43,.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;
  color:#fff;opacity:0;transition:opacity .25s ease;pointer-events:none;}
.pcard:hover .pcard-zoom{opacity:1;}
.pcard-count{position:absolute;left:12px;bottom:12px;background:rgba(15,46,43,.62);backdrop-filter:blur(4px);
  color:#fff;font-size:.72rem;font-weight:600;padding:4px 10px;border-radius:999px;display:flex;align-items:center;gap:5px;}
.pcard-thumbs{display:flex;gap:8px;padding:12px 14px 0;}
.pcard-thumb{width:44px;height:44px;border-radius:8px;overflow:hidden;border:2px solid #e9edec;cursor:pointer;
  background:#f4f6f5;transition:border-color .2s ease;flex:0 0 auto;}
.pcard-thumb.active{border-color:var(--rb-teal);}
.pcard-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.pcard-body{padding:14px 16px 18px;display:flex;flex-direction:column;flex:1;}
.pcard-series{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rb-teal);margin-bottom:4px;}
.pcard-body h3{font-size:1.06rem;color:var(--rb-navy);margin:0 0 6px;font-weight:700;}
.pcard-body p{font-size:.89rem;color:var(--rb-muted);line-height:1.5;margin:0 0 12px;flex:1;}
.pcard-specs{display:flex;flex-wrap:wrap;gap:6px;}
.pcard-specs span{font-size:.73rem;color:#3f524f;background:#f1f5f4;padding:4px 10px;border-radius:6px;font-weight:500;}

/* Lightbox */
.plightbox{position:fixed;inset:0;z-index:3000;background:rgba(8,20,18,.93);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .25s ease;}
.plightbox.active{display:flex;opacity:1;}
.plightbox-stage{position:relative;max-width:92vw;max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:14px;}
.plightbox-img{max-width:90vw;max-height:72vh;object-fit:contain;border-radius:10px;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.4);}
.plightbox-caption{color:#fff;font-size:.95rem;text-align:center;}
.plightbox-caption .lb-counter{color:#9fcfc8;margin-left:6px;}
.plightbox-close{position:absolute;top:-46px;right:0;width:40px;height:40px;border:none;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease;}
.plightbox-close:hover{background:rgba(255,255,255,.28);}
.plightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:none;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease;z-index:2;}
.plightbox-nav:hover{background:rgba(255,255,255,.30);}
.plightbox-prev{left:-68px;}
.plightbox-next{right:-68px;}
.plightbox-thumbs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;max-width:90vw;}
.plightbox-thumb{width:52px;height:52px;border-radius:8px;overflow:hidden;border:2px solid transparent;cursor:pointer;opacity:.55;transition:all .2s ease;}
.plightbox-thumb.active{border-color:#fff;opacity:1;}
.plightbox-thumb img{width:100%;height:100%;object-fit:cover;display:block;}

@media (max-width:768px){
  .product-groups{padding:50px 0 64px;}
  .product-group{margin-bottom:48px;}
  .product-group-head{gap:8px;}
  .pcard-grid{grid-template-columns:1fr;gap:16px;}
  .pcard-grid--4{grid-template-columns:1fr;}
  .pcard-media img{padding:10px;}
  .pcard-body h3{font-size:.98rem;}
  .pcard-thumb{width:38px;height:38px;}
  .plightbox-prev{left:8px;}
  .plightbox-next{right:8px;}
  .plightbox-close{top:8px;right:8px;}
  .plightbox-nav{width:44px;height:44px;background:rgba(255,255,255,.22);}
}

/* ---- Rješenja: "Pogledaj sve" shortcut under recommended products ---- */
.proizvod-see-all{display:flex;justify-content:center;margin-top:44px;}
.proizvod-see-all a{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;
  border:1.5px solid var(--rb-teal,#0F766E);border-radius:100px;color:var(--rb-teal,#0F766E);
  font-weight:700;font-size:.95rem;text-decoration:none;background:#fff;
  transition:background .18s ease,color .18s ease,transform .18s ease;}
.proizvod-see-all a:hover{background:var(--rb-teal,#0F766E);color:#fff;transform:translateY(-2px);}
.proizvod-see-all a svg{transition:transform .18s ease;}
.proizvod-see-all a:hover svg{transform:translateX(4px);}

/* =========================================================================
   MULTI-STEP CONSULTATION POPUP + WHATSAPP BUBBLE
   ========================================================================= */
.miapop{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(15,23,42,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease;}
.miapop.active{opacity:1;visibility:visible;}
.miapop-card{position:relative;width:100%;max-width:480px;background:#fff;border-radius:20px;
  box-shadow:0 30px 80px -20px rgba(15,23,42,.45);padding:34px 32px 26px;
  transform:translateY(18px) scale(.98);opacity:0;
  transition:transform .32s cubic-bezier(.16,.84,.44,1),opacity .32s ease;
  max-height:calc(100vh - 48px);overflow-y:auto;}
.miapop.active .miapop-card{transform:translateY(0) scale(1);opacity:1;}
.miapop-close{position:absolute;top:14px;right:14px;width:38px;height:38px;display:flex;align-items:center;
  justify-content:center;border:none;border-radius:50%;background:#f1f5f9;color:#475569;cursor:pointer;
  transition:background .2s ease,color .2s ease;}
.miapop-close:hover{background:#e2e8f0;color:#0f172a;}
.miapop-head{text-align:left;margin-bottom:18px;padding-right:30px;}
.miapop-badge{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:#0f766e;background:rgba(15,118,110,.1);padding:5px 11px;border-radius:999px;margin-bottom:12px;}
.miapop-head h3{font-size:22px;line-height:1.25;color:#0f172a;margin:0 0 8px;font-weight:800;}
.miapop-head p{font-size:14.5px;line-height:1.5;color:#64748b;margin:0;}
.miapop-progress{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.miapop-progress-bar{flex:1;height:6px;background:#eef2f6;border-radius:999px;overflow:hidden;}
.miapop-progress-bar span{display:block;height:100%;width:33.33%;
  background:linear-gradient(90deg,#0f766e,#14b8a6);border-radius:999px;transition:width .35s ease;}
.miapop-steps-label{font-size:12.5px;color:#64748b;white-space:nowrap;}
.miapop-steps-label strong{color:#0f766e;}
.miapop-step{display:none;animation:miapopFade .3s ease;}
.miapop-step.active{display:block;}
@keyframes miapopFade{from{opacity:0;transform:translateX(8px);}to{opacity:1;transform:translateX(0);}}
.miapop-q{display:block;font-size:15px;font-weight:700;color:#0f172a;margin-bottom:14px;}
.miapop-chips{display:flex;flex-wrap:wrap;gap:9px;}
.miapop-chip{font:inherit;font-size:13.5px;font-weight:600;color:#334155;background:#f5f7fa;
  border:1.5px solid #e7ecf1;border-radius:11px;padding:10px 14px;cursor:pointer;transition:all .18s ease;}
.miapop-chip:hover{border-color:#0f766e;color:#0f766e;}
.miapop-chip.selected{background:#0f766e;border-color:#0f766e;color:#fff;}
.miapop-field{margin-bottom:14px;}
.miapop-field label{display:block;font-size:13px;font-weight:600;color:#334155;margin-bottom:6px;}
.miapop-field label span{color:#ef4444;}
.miapop-field input,.miapop-field textarea{width:100%;font:inherit;font-size:14.5px;color:#0f172a;
  background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:11px;padding:11px 13px;
  transition:border-color .18s ease,background .18s ease;box-sizing:border-box;}
.miapop-field input:focus,.miapop-field textarea:focus{outline:none;border-color:#0f766e;background:#fff;}
.miapop-field textarea{resize:vertical;min-height:54px;}
.miapop-error{display:none;font-size:13px;color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;
  border-radius:9px;padding:9px 12px;margin-top:4px;}
.miapop-error.show{display:block;}
.miapop-actions{display:flex;gap:10px;margin-top:20px;}
.miapop-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;
  font-size:15px;font-weight:700;border-radius:12px;padding:13px 18px;cursor:pointer;border:none;
  transition:all .2s ease;text-decoration:none;}
.miapop-btn-primary{background:#0f766e;color:#fff;}
.miapop-btn-primary:hover{background:#0b5953;}
.miapop-btn-ghost{flex:0 0 auto;background:#f1f5f9;color:#475569;}
.miapop-btn-ghost:hover{background:#e2e8f0;}
.miapop-btn[disabled]{opacity:.6;cursor:not-allowed;}
.miapop-btn[hidden]{display:none!important;}
.miapop-disclaimer{text-align:center;font-size:12px;color:#94a3b8;margin:14px 0 0;}
.miapop-success{text-align:center;padding:16px 4px 8px;animation:miapopFade .35s ease;}
.miapop-success-icon{width:64px;height:64px;margin:0 auto 16px;border-radius:50%;
  background:rgba(15,118,110,.12);color:#0f766e;display:flex;align-items:center;justify-content:center;}
.miapop-success h3{font-size:21px;font-weight:800;color:#0f172a;margin:0 0 8px;}
.miapop-success p{font-size:14.5px;color:#64748b;line-height:1.5;margin:0 0 18px;}
.miapop-success .miapop-btn{display:inline-flex;flex:0 0 auto;padding:12px 26px;}
.wa-pill{position:fixed;right:22px;bottom:22px;z-index:8500;display:inline-flex;align-items:center;gap:12px;
  padding:10px 20px 10px 12px;border-radius:999px;background:#25d366;color:#fff;text-decoration:none;
  box-shadow:0 12px 30px -8px rgba(37,211,102,.65);transition:transform .2s ease,box-shadow .2s ease;
  animation:waPulse 2.8s infinite;}
.wa-pill:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 16px 36px -8px rgba(37,211,102,.8);}
.wa-pill:active{transform:scale(.98);}
.wa-pill-icon{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;}
.wa-pill-text{display:flex;flex-direction:column;line-height:1.15;}
.wa-pill-text strong{font-size:17px;font-weight:800;letter-spacing:.01em;}
.wa-pill-num{font-size:14px;font-weight:600;opacity:.92;}
@keyframes waPulse{
  0%{box-shadow:0 12px 30px -8px rgba(37,211,102,.65),0 0 0 0 rgba(37,211,102,.4);}
  70%{box-shadow:0 12px 30px -8px rgba(37,211,102,.65),0 0 0 14px rgba(37,211,102,0);}
  100%{box-shadow:0 12px 30px -8px rgba(37,211,102,.65),0 0 0 0 rgba(37,211,102,0);}}
@media(max-width:560px){
  .miapop{padding:0;align-items:flex-end;}
  .miapop-card{max-width:100%;border-radius:20px 20px 0 0;padding:26px 20px 22px;
    transform:translateY(100%);max-height:92vh;}
  .miapop.active .miapop-card{transform:translateY(0);}
  .miapop-head h3{font-size:20px;}
  .miapop-actions{flex-wrap:wrap;}
  .wa-pill{right:14px;bottom:14px;padding:8px 16px 8px 10px;gap:10px;}
  .wa-pill-icon{width:40px;height:40px;}
  .wa-pill-text strong{font-size:15px;}
  .wa-pill-num{font-size:12.5px;}
}

/* ===== Contact page form: success + error states ===== */
.contact-form-success{
  text-align:center;
  padding:32px 24px;
}
.contact-form-success .miapop-success-icon{
  width:64px;height:64px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;
  background:#dcfce7;color:#0F766E;
}
.contact-form-success h3{margin:0 0 8px;font-size:1.35rem;color:#0f172a;}
.contact-form-success p{margin:0;color:#475569;}
.contact-form .form-error{
  margin:4px 0 0;padding:10px 14px;border-radius:8px;
  background:#fef2f2;color:#b91c1c;font-size:.92rem;
  border:1px solid #fecaca;
}

/* ===== Rjesenja: gallery cards tag + category link ===== */
.pcard{position:relative}
.pcard .pcard-tag{position:absolute;top:12px;left:12px;z-index:3;background:rgba(15,118,110,.95);color:#fff;font-size:.7rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;padding:5px 10px;border-radius:999px;backdrop-filter:blur(4px)}
.pcard-cat-link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:.85rem;font-weight:600;color:#0F766E;text-decoration:none;border-top:1px solid #e6eceb;padding-top:12px;width:100%;transition:gap .2s ease,color .2s ease}
.pcard-cat-link svg{transition:transform .2s ease}
.pcard-cat-link:hover{color:#0b574f}
.pcard-cat-link:hover svg{transform:translateX(4px)}

/* ---- Rješenja: per-category rows (heading + link + 4 cards + see-all) ---- */
.rjesenje-rows{padding:84px 0 96px;background:#fff;}
.rjesenje-rows .section-header{margin-bottom:48px;}
.rjesenje-row-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.rjesenje-row-head-text{flex:1;min-width:240px;}
.rjesenje-row-link{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-weight:700;font-size:.9rem;color:var(--rb-teal,#0F766E);text-decoration:none;
  padding:9px 18px;border:1.5px solid var(--rb-teal,#0F766E);border-radius:100px;background:#fff;
  transition:background .18s ease,color .18s ease,transform .18s ease;margin-bottom:4px;}
.rjesenje-row-link:hover{background:var(--rb-teal,#0F766E);color:#fff;transform:translateY(-2px);}
.rjesenje-row-link svg{transition:transform .18s ease;}
.rjesenje-row-link:hover svg{transform:translateX(4px);}
.pcard-grid--4{grid-template-columns:repeat(4,1fr);}
@media(max-width:1080px){.pcard-grid--4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.pcard-grid--4{grid-template-columns:1fr;gap:14px;}
  .rjesenje-row-link{padding:8px 14px;font-size:.82rem;}}


/* ============================================================
   MOBILE MEGA-MENU (mnav) — animated accordion drawer
   Built dynamically by initMobileNav() in script.js
   ============================================================ */

/* Hide the legacy drawer entirely (superseded by .mnav) */
.mobile-drawer { display: none !important; }

.mnav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(7, 16, 28, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    z-index: 9997;
}
.mnav-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

.mnav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: min(88vw, 380px);
    background: linear-gradient(180deg, #0B1D33 0%, #0A1626 100%);
    box-shadow: -24px 0 70px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    z-index: 9998;
    transform: translateX(108%);
    transition: transform 0.42s cubic-bezier(0.33, 1, 0.68, 1);
    will-change: transform;
    overscroll-behavior: contain;
}
.mnav.is-open {
    transform: translateX(0);
}

/* Header bar */
.mnav-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mnav-head-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #2DD4BF;
}
.mnav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.mnav-close:hover {
    background: rgba(45, 212, 191, 0.14);
    border-color: rgba(45, 212, 191, 0.5);
    transform: rotate(90deg);
}

/* Scrollable body */
.mnav-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 18px 28px;
}

/* Staggered entrance for each top-level row */
.mnav-row {
    opacity: 0;
    transform: translateX(22px);
}
.mnav.is-open .mnav-row {
    animation: mnavRowIn 0.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    animation-delay: calc(0.12s + var(--i, 0) * 0.06s);
}
@keyframes mnavRowIn {
    to { opacity: 1; transform: translateX(0); }
}

/* Plain top-level links */
.mnav-link {
    display: flex;
    align-items: center;
    padding: 15px 6px;
    font-size: 1.06rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    transition: color 0.2s ease, padding-left 0.2s ease;
}
.mnav-link:hover,
.mnav-link.is-current {
    color: #2DD4BF;
    padding-left: 12px;
}

/* Accordion */
.mnav-acc {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.mnav-acc-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px 6px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.06rem;
    font-weight: 600;
    color: #fff;
    text-align: left;
    font-family: inherit;
    transition: color 0.2s ease;
}
.mnav-acc-trigger:hover { color: #2DD4BF; }
.mnav-acc.is-open > .mnav-acc-trigger { color: #2DD4BF; }
.mnav-chev {
    flex: 0 0 auto;
    margin-left: 12px;
    transition: transform 0.35s cubic-bezier(0.33, 1, 0.68, 1);
    color: rgba(255, 255, 255, 0.55);
}
.mnav-acc.is-open .mnav-chev {
    transform: rotate(180deg);
    color: #2DD4BF;
}

.mnav-acc-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}
.mnav-acc-inner {
    padding: 4px 0 12px;
}

/* Sub-item cards with thumbnails */
.mnav-sub {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 10px 10px;
    margin: 4px 0;
    border-radius: 12px;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.mnav-sub:hover {
    background: rgba(45, 212, 191, 0.1);
    border-color: rgba(45, 212, 191, 0.35);
    transform: translateX(4px);
}
.mnav-sub-thumb {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 9px;
    background-size: cover;
    background-position: center;
    background-color: #13283f;
}
.mnav-sub-thumb--blank {
    background: linear-gradient(135deg, #15314c, #0d2236);
}
.mnav-sub-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.mnav-sub-text strong {
    font-size: 0.94rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.25;
}
.mnav-sub-text small {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Footer block */
.mnav-foot {
    margin-top: 22px;
    padding-top: 4px;
}
.mnav-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 15px 18px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2DD4BF, #14B8A6);
    color: #06231e;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(45, 212, 191, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mnav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 38px rgba(45, 212, 191, 0.42);
}
.mnav-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 14px;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 600;
    font-size: 0.96rem;
    text-decoration: none;
    transition: color 0.2s ease;
}
.mnav-phone:hover { color: #2DD4BF; }

/* Keep hamburger above drawer */
.mobile-menu-toggle { position: relative; z-index: 9999; }
body.nav-open { overflow: hidden; }

/* The drawer is only relevant where the hamburger toggle shows (<=768px) */
@media (min-width: 769px) {
    .mnav, .mnav-backdrop { display: none !important; }
}


/* =========================================================================
   MOBILE HEADER CLEANUP (<=768px)
   - hide the top utility bar (phone/email/location) so it no longer
     overlaps the logo
   - keep logo on the left, push hamburger to the far right edge
   - eliminate horizontal overflow (page drifting right / empty space)
   ========================================================================= */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

@media (max-width: 768px) {
    /* Top contact strip is redundant on phones -> hide it completely */
    .utility-bar { display: none !important; }

    /* Header: logo left, hamburger hard right */
    .header-container {
        padding-left: 18px;
        padding-right: 18px;
        justify-content: space-between;
    }
    .logo-link { margin-right: auto; }

    /* The CTA + nav are already hidden at this width; make sure the
       toggle sits flush to the right edge regardless of source order */
    .mobile-menu-toggle {
        margin-left: auto;
        margin-right: 0;
    }

    /* Because the utility bar is gone, the sticky header should start at
       the very top — neutralize any top offset that assumed the bar. */
    .site-header { top: 0 !important; }
}


/* ======================================================================
   JUKA PARTNER BRAND STRIP (proizvodi-rashladne-vitrine)
   ====================================================================== */
.juka-brand {
    padding: 64px 0;
    background: linear-gradient(135deg, #0B2E2B 0%, #0F3D38 55%, #0F766E 140%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.juka-brand::before {
    content: "JUKA";
    position: absolute;
    right: -2%;
    top: 50%;
    transform: translateY(-50%);
    font-size: clamp(120px, 22vw, 320px);
    font-weight: 800;
    letter-spacing: -0.04em;
    color: rgba(255,255,255,0.04);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}
.juka-brand-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 40px;
    align-items: center;
}
.juka-brand-mark {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-right: 36px;
    border-right: 1px solid rgba(255,255,255,0.15);
}
.juka-wordmark {
    font-size: 56px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: #fff;
}
.juka-brand-tag {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6EE7DB;
    background: rgba(110,231,219,0.12);
    border: 1px solid rgba(110,231,219,0.3);
    padding: 5px 12px;
    border-radius: 999px;
}
.juka-brand-text h2 {
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 700;
    margin: 0 0 14px;
    color: #fff;
    line-height: 1.2;
}
.juka-brand-text p {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255,255,255,0.82);
    margin: 0 0 20px;
    max-width: 760px;
}
.juka-brand-text p strong { color: #fff; }
.juka-brand-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.juka-brand-badges span {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16);
    padding: 8px 16px;
    border-radius: 999px;
}
@media (max-width: 768px) {
    .juka-brand { padding: 44px 0; }
    .juka-brand-inner {
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .juka-brand-mark {
        flex-direction: row;
        align-items: center;
        gap: 14px;
        padding-right: 0;
        padding-bottom: 20px;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.15);
        width: 100%;
    }
    .juka-wordmark { font-size: 40px; }
    .juka-brand-text p { font-size: 15px; }
}