/*
Theme Name: Transkop Paracin
Theme URI: https://transkop.net/
Author: Ivan Petrovic
Author URI: https://ivan-petrovic.vercel.app/
Description: Transkop Paracin - behaton ploce
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: transkop-paracin
*/
:root{
  /* Colors */
  --color-text-black:#393737;
  --color-text-white:#FFFFFF;
  --color-transkop-orange:#C9613C;
  --color-transkop-red:#BA352F;
  --color-transkop-grey:#7C7C7C;
  --color-background-grey:#F3F3F3;
  --color-dark-grey:#393737;
  --color-dark-grey-70:rgba(57,55,55,0.7);
  --color-dark-grey-50:rgba(57,55,55,0.5);

  /* Typography scale (px converted to rem at 16px base) */
  --fs-h1:3.875rem; /* 62px */
  --lh-h1:1; /* 100% */
  --fs-h2:2.625rem; /* 42px */
  --lh-h2:1.1; /* 110% */
  --fs-h3:2rem; /* 32px */
  --lh-h3:1.2; /* 120% */
  --fs-h4:1.75rem; /* 28px */
  --lh-h4:1.2; /* 120% */
  --fs-h5:1.25rem; /* 20px */
  --lh-h5:1.2; /* 120% */
  --fs-h6:1.125rem; /* 18px */
  --lh-h6:1.5; /* 150% */
  --fs-p:1rem; /* 16px */
  --lh-p:1.5; /* 150% */
  --fs-a:0.875rem; /* 14px */
  --lh-a:1.5; /* 150% */
  --ls-a:0.15em; /* 15% letter spacing */
}

*, ::before, ::after {
  box-sizing: border-box;
}

html{ font-size:16px; }
body{
  font-family:'Inter';
  color:var(--color-text-black);
  background:#fff;
  overflow-x: hidden;
  margin: 0;
}

html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth body {
  overflow: hidden;
}
.lenis.lenis-smooth {
  scroll-behavior: auto;
}

main {
  display:flex;
  flex-direction:column;
}

h1, h2, h3, h4, h5, h6{ color:var(--color-text-black); margin:0; }
h1{ font-size:var(--fs-h1); line-height:var(--lh-h1); font-weight:700; }
h2{ font-size:var(--fs-h2); line-height:var(--lh-h2); font-weight:600; }
h3{ font-size:var(--fs-h3); line-height:var(--lh-h3); font-weight:600; }
h4{ font-size:var(--fs-h4); line-height:var(--lh-h4); font-weight:600; }
h5{ font-size:var(--fs-h5); line-height:var(--lh-h5); font-weight:600; }
h6{ font-size:var(--fs-h6); line-height:var(--lh-h6); font-weight:700; text-transform:uppercase; }

p{ font-size:var(--fs-p); line-height:var(--lh-p); font-weight:300;  margin: 0;}
a{ font-size:var(--fs-a); line-height:var(--lh-a); font-weight:400; letter-spacing:var(--ls-a); text-transform:uppercase; text-decoration:none; position:relative; display:inline-block; overflow:hidden; }
a:hover{ text-decoration:none; }

/* Utility text colors */
.text-black{ color:var(--color-text-black) !important; }
.text-white{ color:var(--color-text-white) !important; }
.text-orange{ color:var(--color-transkop-orange) !important; }
.transkop-orange{ color:var(--color-transkop-orange) !important; }
.text-red{ color:var(--color-transkop-red) !important; }
.text-grey{ color:var(--color-transkop-grey) !important; }
.bg-grey{ background:var(--color-background-grey) !important; }
.dark-grey{ color:var(--color-dark-grey) !important; }
.dark-grey-70{ color:var(--color-dark-grey-70) !important; }
.dark-grey-50{ color:var(--color-dark-grey-50) !important; }

/* Layout */
.container-boxed{ width:100%; max-width:calc(1320px + 4rem); margin:0 auto; padding-left:2rem; padding-right:2rem; }
/* Front page section spacing */
.home section + section{ margin-top:20vh; }

/* Header */
.site-header{ position:fixed; top:0; left:0; right:0; height:100px; display:flex; align-items:center;  z-index:1005; background:#fff; transition:height 0.3s ease, background-color 0s 0.5s; }
.site-header .header-inner{ width:100%; position:relative; display:flex; align-items:center; justify-content:space-between;}
.site-header .header-inner{ transition:padding 0.3s ease; }
.site-header .site-logo img, .site-header .site-logo .custom-logo{ width:230px; height:auto; display:block; transition: width 0.3s ease, height 0.3s ease; }

.site-header .header-actions{ width:240px; display:flex; align-items:center; justify-content:flex-end; gap:12px; }
.site-header .site-logo, .site-header .btn-contact{ position:relative; }
body.nav-open .site-header { background: transparent; transition: background-color 0.3s; }

.site-header .btn-contact{ height:55px; display:inline-flex; align-items:center; justify-content:center; padding:0 18px; border:1px solid var(--color-text-black); border-radius:30px; background:#fff; color:var(--color-text-black); text-transform:none; letter-spacing:0; font-size:1rem; transition:all 0.3s ease; }
.site-header .btn-contact{ transition: height 0.3s ease, padding 0.3s ease, font-size 0.3s ease, border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease; }
.site-header .btn-contact:hover{ text-decoration:none; background:var(--color-dark-grey); color:var(--color-text-white) !important; }
.site-header .btn-contact-icon { display: none; }
.site-header .btn-contact-text { display: inline; }

/* Shrink on scroll */
.site-header.is-shrunk{ height:70px; }
.site-header.is-shrunk .site-logo img, 
.site-header.is-shrunk .site-logo .custom-logo{ width:160px; }
.site-header.is-shrunk .btn-contact{ height:45px; padding:0 14px; font-size:0.9rem; }
.site-header.is-shrunk .hamburger{ width:45px; height:45px; }
.site-header.is-shrunk .hamburger .hamburger-icon{ width:24px; height:24px; }

.site-header .hamburger{ width:55px; height:55px; background:#fff; border:1px solid var(--color-text-black); border-radius:100px; display:inline-flex; align-items:center; justify-content:center; padding:0; cursor:pointer; transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease; }
.site-header .hamburger .hamburger-icon{ width:30px; height:30px; display:block; transition: width 0.3s ease, height 0.3s ease, transform 0.4s ease; }
.site-header .hamburger.is-active .hamburger-icon{ transform: rotate(180deg); }

/* Site nav */
.site-nav{ position:fixed; inset:0; background:var(--color-background-grey); z-index:1003; display:flex; pointer-events:none; clip-path: circle(0 at var(--nav-cx, 50%) var(--nav-cy, 50%)); transition: clip-path 0.5s ease-in-out; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* Promote to its own layer only while the menu is open/animating — keeping it permanent kept a full-screen GPU layer alive and caused scroll jank on mobile */
body.nav-open .site-nav{ will-change: clip-path; }
.site-nav.is-open{ pointer-events:auto; clip-path: circle(150vmax at var(--nav-cx, 20%) var(--nav-cy, 20%)); }
.site-nav .container-boxed{ width:100%; min-height:100%; display:flex; align-items:center; justify-content:center; }
.site-nav .nav-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; padding:0; margin:0 auto; }
.site-nav .nav-col{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2rem; }
.site-nav .nav-col .menu{ list-style:none; margin:0; padding-left:0; }
.site-nav .nav-col h2{ color:var(--color-transkop-orange); }
.site-nav a{ color:var(--color-text-black); font-size:1.5rem; text-transform:none; letter-spacing:0; }
.site-nav a, .site-footer .footer-col a{ position:relative; display:inline-block; overflow:hidden; padding-bottom:0; transition:ease-in 0.3s; text-decoration:none; align-self: baseline;}
.site-nav a::after, .site-footer .footer-col a::after{ content:''; position:absolute; bottom:0; left:0; width:100%; height:1px; transform:translateX(-100%); transition:transform 0.3s ease; }
.site-nav a::after{ background-color:var(--color-dark-grey); }
.site-footer .footer-col a::after{ background-color:#fff; }
.site-nav a:hover::after, .site-footer .footer-col a:hover::after{ transform:translateX(0); }
.site-nav a:hover, .site-footer .footer-col a:hover{ text-decoration:none; }

@media (prefers-reduced-motion: reduce){
.site-nav{ transition:none; clip-path:none; display:none; }
.site-nav.is-open{ display:flex; }
}

/* Buttons */
.btn-hero{ width:210px; height:50px; border-radius:30px; padding:0 1rem; display:inline-flex; align-items:center; justify-content:center; background:transparent; border:1px solid transparent; color:var(--color-text-black); font-size:var(--fs-a); line-height:var(--lh-a); letter-spacing:var(--ls-a); text-transform:uppercase; font-weight:400; }
.btn-hero img{ margin-left:10px; width:16px; height:16px; display:inline-block; transition:transform 0.3s ease, filter 0.3s ease; }
.btn-hero--primary{ background:var(--color-transkop-orange); color:var(--color-text-white); border-color:var(--color-transkop-orange); transition:all 0.3s ease;  }
.btn-hero--primary:hover{ background:var(--color-transkop-red); border-color:var(--color-transkop-red); transition:all 0.3s ease;}
.btn-hero--outline{ background:transparent; color:var(--color-dark-grey); border-color:var(--color-dark-grey); transition:all 0.3s ease; }
.btn-hero--outline:hover{ background:var(--color-dark-grey); color:var(--color-text-white); }
.btn-hero:hover{ text-decoration:none; }
.btn-hero:hover img{ transform:rotate(45deg); }
.btn-hero--primary img{ filter: invert(1); }
.btn-hero--outline:hover img{ filter: invert(1); }

/* Hero */
.hero{ position:relative; height:calc(100vh - 100px); display:flex; align-items:flex-end; margin-top:100px; overflow:hidden; }
.hero .container-boxed{ position:relative; z-index:2; width:100%; }
.hero .hero-content{ display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:10svh; max-width:535px; }
.hero .hero-content h5{ color:var(--color-transkop-red); margin-bottom:1rem; font-weight:300; }
.hero .actions{ display:flex; flex-wrap:nowrap; gap:1rem; }
.hero p { margin-top:40px; margin-bottom:60px; }
.hero .hero-media{ position:absolute; top:0; right:0; width:55%; max-width:1275px; height:100%; z-index:1; pointer-events: none; }
.hero-img-1 { width: 100%; height: 100%; object-fit: contain; object-position: right bottom; opacity: 0; animation: fadeInRight 0.8s ease forwards; display: block; }
.hero-img-2 { position: absolute; bottom: 5%; width: 50%; height: auto; object-fit: contain; z-index: 2; opacity: 0; animation: slideDownImg 1s ease 0.8s forwards; display: block; }

@keyframes fadeInRight {
from { opacity: 0; transform: translateX(50px); }
to { opacity: 1; transform: translateX(0); }
}

.hero-overlay {
position: absolute;
right: 0;
width: 0;
z-index: 10;
opacity: 0;
  mix-blend-mode: multiply;
}

.hero-overlay-red {
top: 10%;
height: 40%;
background-color: rgba(186, 53, 47, 0.8);
clip-path: polygon(0% 50%, 100% 0%, 100% 100%, 0% 100%);
animation: sweepTrapezoid 0.8s ease-out forwards;
}

.hero-overlay-orange {
top: 50%;
left: 0;
width: 42.5%;
height: 20%;
margin-top: -1px; /* slight overlap to avoid visible gap on rounding */
background-color: rgba(204, 97, 44, 0.8);
animation: fadeInOrange 0.8s ease-out 0.4s forwards;
}

@keyframes sweepTrapezoid {
0% { 
  opacity: 1;
  width: 0; 
}
100% { 
  opacity: 1;
  width: 100%; 
}
}

@keyframes fadeInOrange {
0% { 
  opacity: 1;
  height: 0;
}
100% { 
  opacity: 1;
  height: 20%;
}
}

@keyframes slideDownImg {
0% { 
  opacity: 0;
  bottom: 15%;
}
100% { 
  opacity: 1;
  bottom: 5%;
}
}

/* Footer */
.site-footer{ position:relative; width:100%; display:block; border-top:3px solid #fff; padding:0; background:var(--color-dark-grey); margin-top:auto; }
.site-footer .footer-bg{ width:100%; height:auto; display:block; object-fit:contain; }
.site-footer .footer-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; }

.site-footer .footer-top-wrapper{ width:100%; padding-top:0; padding-bottom:50px; }
.site-footer .footer-top-row{ display:flex; justify-content:space-between; align-items:flex-end; }
.site-footer .footer-logo img{ filter: brightness(0) invert(1); width:225px; height:auto; display:block; }
.site-footer .footer-addresses{ display:flex; flex-direction:column; gap:10px; text-align:left; }
.site-footer .footer-addresses p{ font-size:18px; font-weight:300; line-height:1.5; margin:0; color:#fff; }

.site-footer .footer-bottom-row{ width:100%; background:rgba(35, 35, 36, 0.8); height:70px; display:flex; align-items:center; margin-top:0; }
.site-footer .footer-bottom-inner{ width:100%; display:flex; justify-content:space-between; align-items:center; }

.site-footer .footer-mail{ display:inline-block; color: var(--color-text-white); text-transform:none; letter-spacing:var(--ls-a); font-size:0.875rem; text-decoration:none; transition:color 0.2s ease; }
.site-footer .footer-mail:hover{ color:var(--color-transkop-orange); text-decoration:none; }

.site-footer .footer-socials{ display:flex; gap:15px; align-items:center; overflow:visible; }
.site-footer .footer-socials a{ display:inline-block; overflow:visible; }
.site-footer .footer-socials img{ width:16px; height:16px; filter: brightness(0) invert(1); transition:all 0.3s ease; }
.site-footer .footer-socials a:hover img{ transform:scale(1.1); filter: invert(43%) sepia(61%) saturate(666%) hue-rotate(326deg) brightness(92%) contrast(89%); }


.homepage-inner{ display:grid; grid-template-columns:15% 85%; }
.homepage-left{ display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; }
.homepage-left h2,.homepage-left p{  color:var(--color-transkop-grey) }

.link-with-arrow{ display:inline-flex; align-items:center; gap:10px; color:var(--color-text-black); font-size:var(--fs-a); line-height:var(--lh-a); letter-spacing:var(--ls-a); text-transform:uppercase; text-decoration:none; position:relative; overflow:hidden; padding-bottom:0; }
.link-with-arrow .link-text{ position:relative; display:inline-block; padding-bottom:0; }
.link-with-arrow .link-text::after{ content:''; position:absolute; bottom:0; left:0; width:100%; height:1px; background-color:var(--color-dark-grey); transform:translateX(-100%); transition:transform 0.3s ease; }
.link-with-arrow:hover .link-text::after{ transform:translateX(0); }
.link-with-arrow img{ width:16px; height:16px; transition:transform 0.3s ease; }
.link-with-arrow:hover{ text-decoration:none; }
.link-with-arrow:hover img{ transform:rotate(45deg); }

.about .about-right {display:flex; flex-direction:column; gap:60px; }
.about .about-right h2 .text-orange{ color:var(--color-transkop-orange); }

.about .about-stats .splide__list { display:grid !important; grid-template-columns:repeat(4, 1fr); gap:10px; width: 100%; }
.about .about-stat{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:1rem 1rem; height:150px; }

@media (max-width: 1024px) {
  .about .about-stats .splide__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
  .about .about-stats .splide__list { display: flex !important; box-sizing: border-box; gap: 0; padding: 0; } /* Splide handles layout */
}

.about .about-cta{ display:flex; justify-content:space-between; gap:1rem; }
.about .about-cta p{ max-width:650px; margin:0; }

/* Services section */
.services .services-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.services .services-top h2{ margin:0; }
.services .services-right p{ margin-top:1rem; margin-bottom:4rem; }
.services .services-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
.services .services-card{ display:flex; flex-direction:column; gap:2rem; padding:2rem; height:220px; text-decoration:none; color:inherit;}
.services .services-card .service-head{ display:flex; align-items:center; justify-content:space-between; }
.services .services-card .service-left{ display:flex; align-items:center; gap:1rem; }
.services .services-card .service-icon{ width:35px; height:35px; }
.services .services-card .service-cta{ border:0; background:transparent; padding:0; cursor:pointer; }
.services .services-card .service-cta__circle{ width:35px; height:35px; border-radius:50%; background:var(--color-dark-grey); display:inline-flex; align-items:center; justify-content:center; }
.services .services-card .service-cta__circle img{ width:16px; height:16px; filter: invert(1); transition:transform 0.3s ease; }
.services .services-card .service-cta:hover .service-cta__circle img{ transform:rotate(45deg); }
.services .services-card h5, .services .services-card .service-desc{ margin:0; text-transform:none; letter-spacing:0;}
.services-image{ width:100%; height:100vh; position:relative; overflow:hidden; }
.services-image .services-image__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.services .services-card, .services .services-card h5, .services .services-card .service-desc{ transition:color 0.3s ease, background-color 0.3s ease; }
.services .services-card .service-icon{ transition:filter 0.3s ease; }
.services .services-card .service-cta__circle{ transition:background-color 0.3s ease; }
.services .services-card .service-cta__circle img{ transition:transform 0.3s ease, filter 0.3s ease; }
.services .services-card:hover{ background:var(--color-transkop-orange) !important; color:#fff; }
.services .services-card:hover h5,
.services .services-card:hover .service-desc{ color:#fff; }
.services .services-card:hover .service-icon{ filter: brightness(0) invert(1); }
.services .services-card:hover .service-cta__circle{ background:#fff; }
.services .services-card:hover .service-cta__circle img{ filter:none; }

@media (max-width: 767.98px) {
.services .services-right p{margin-bottom:3rem;max-width:280px;}
.services .services-card{gap:1.5rem; padding:1.5rem;}
}
/* Products section */
.products .products-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.products .products-top h2{ margin:0; }
.products .products-right p{ max-width:650px; margin-top:1rem; margin-bottom:4rem; }
.products .products-layout{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:stretch; }
.products .products-media{ position:relative; width:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.products .products-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; transition:opacity 0.3s linear; }
.products #products-media-img{ opacity:1; }
.products #products-media-img-overlay{ opacity:0; }
.products .products-list{ display:flex; flex-direction:column; gap:10px; }
.products .products-list{ height:100%; }
.products .products-media{ height:100%; }
.products .product-tab{ border:0; padding:0; text-align:left; cursor:pointer; }
.products .product-tab .product-tab__inner{ display:flex; align-items:center; justify-content:space-between; padding:1.5rem; }
.products .product-tab h5{ margin:0; transition:color 0.3s ease; }
.products .product-tab .service-cta__circle{ width:35px; height:35px; border-radius:50%; background:var(--color-dark-grey); display:inline-flex; align-items:center; justify-content:center; transition:background-color 0.3s ease; }
.products .product-tab .service-cta__circle img{ width:16px; height:16px; filter: invert(1); transition:filter 0.3s ease, transform 0.3s ease; }
.products .product-tab:hover .service-cta__circle img{ transform:rotate(45deg); }
.products .product-tab.is-active,
.products .product-tab:hover{ background:var(--color-transkop-orange) !important; }
.products .product-tab.is-active h5,
.products .product-tab:hover h5{ color:#fff; }
.products .product-tab.is-active .service-cta__circle,
.products .product-tab:hover .service-cta__circle{ background:#fff; }
.products .product-tab.is-active .service-cta__circle img,
.products .product-tab:hover .service-cta__circle img{ filter:none; }

/* Portfolio section */
.portfolio .portfolio-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.portfolio .portfolio-right p{ max-width:650px; margin-top:1rem; margin-bottom:4rem; }
.portfolio .portfolio-right{ position:relative; z-index:1; }
.portfolio { overflow:hidden; }
.portfolio .portfolio-slider-wrap{ position:relative; }
.portfolio .splide__track{ overflow:visible; }
.portfolio .portfolio-card{ display:block; color:inherit; text-decoration:none; cursor:pointer; }
.portfolio .portfolio-card__media{ position:relative; width:100%; aspect-ratio:3/4; overflow: hidden;}
.portfolio .portfolio-card__media img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform 0.3s ease;}
.portfolio .portfolio-card__meta{ padding:1rem 1.5rem; }
.portfolio .portfolio-card__bottom{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.portfolio .portfolio-cta{ display:inline-flex; }
.portfolio .portfolio-cta__circle{ width:35px; height:35px; border-radius:50%; background:transparent; display:inline-flex; align-items:center; justify-content:center; transition:background-color 0.3s ease; }
.portfolio .portfolio-cta__circle img{ width:16px; height:16px; filter:invert(1); transition:filter 0.3s ease, transform 0.3s ease; }
.portfolio .splide__slide:hover .portfolio-cta__circle{ background:var(--color-dark-grey); }
.portfolio .portfolio-card__cat,.portfolio .portfolio-card__tag{ margin:0; font-size:14px; color:var(--color-dark-grey-50); }
.portfolio .portfolio-card__meta, .portfolio .portfolio-card__meta h6, .portfolio .portfolio-card__cat, .portfolio .portfolio-card__tag{ transition: background-color 0.3s ease, color 0.3s ease; }
.portfolio .splide__slide{ transition: background-color 0.3s ease; }
.portfolio .splide__slide:hover{ background:var(--color-transkop-orange); }
.portfolio .splide__slide:hover .portfolio-card__media img{ transform: scale(1.1);}
.portfolio .splide__slide:hover .portfolio-card__meta h6,
.portfolio .splide__slide:hover .portfolio-card__cat,
.portfolio .splide__slide:hover .portfolio-card__tag{ color:#fff; }
.portfolio .portfolio-arrows{ position:static; display:flex; justify-content:flex-end; gap:3rem; margin-top:3rem; }
.portfolio-related-wrap{ width:100%; background-color: var(--color-background-grey);}
.portfolio-related{ margin:0 auto; padding:4rem 2rem; overflow: visible; background:transparent; }
.product-single-gallery{ overflow:visible; margin-bottom:4rem; }
.product-single-gallery .splide__track{ overflow:visible; }
.product-related-wrap{ width:100%; background-color: var(--color-background-grey);}
.product-related{ margin:0 auto; padding:4rem 2rem; overflow:visible; background:transparent; }
.product-related .portfolio-top{ margin-bottom:3rem; }
.product-related .splide__track{ overflow:visible; }
.product-related .splide__slide{ transition: transform 0.3s ease; background:transparent; }
.product-related .splide__slide:hover{ background:transparent; }
.product-related .splide__slide:hover .product-card__media img{ transform:scale(1.06); }
.product-related .product-card__meta h6{ transition: color 0.3s ease; }
.portfolio-related .portfolio-top{ margin-bottom:3rem; }
.portfolio .portfolio-arrow{ width:50px; height:50px; border:1px solid var(--color-text-black); border-radius:100px; background:white; display:inline-flex; align-items:center; justify-content:center; transition:background-color 0.2s ease, border-color 0.2s ease; }
.portfolio .portfolio-arrow img{ width:20px; height:20px; transform:rotate(45deg); transition:filter 0.2s ease; }
.portfolio .portfolio-arrow:hover{ background:var(--color-dark-grey); border-color:var(--color-dark-grey); }
.portfolio .portfolio-arrow:hover img{ filter:invert(1); }
.portfolio .js-portfolio-prev img{ transform:rotate(225deg); }

/* Portfolio Grid page */
.portfolio-grid-page{ padding-top:9rem; padding-bottom:6rem; }
.products-tax{ padding-top:9rem; padding-bottom:6rem; }
.products-tax__header{ margin-bottom:2rem; }
.chips{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:1rem; }
.chip{ display:inline-flex; align-items:center; gap:8px; padding:0.5rem 1.5rem; background:var(--color-background-grey); color:var(--color-text-black); border-radius:999px; text-transform:none; letter-spacing:0; font-size:var(--fs-p);transition:background-color 0.2s ease, color 0.2s ease; }
.chip:hover{ background:var(--color-transkop-orange); color:#fff; text-decoration:none; }
.chip.is-active{ background:var(--color-transkop-orange); color:#fff; }
.active-filters{ margin-top:1.5rem; display:flex; align-items:center; gap:1rem; }
.active-filters__label{ font-size:1rem; color:var(--color-transkop-grey); text-transform:none; letter-spacing:0; }
.active-filters__chips{ display:flex; flex-wrap:wrap; gap:0.5rem; }
.chip--small{ padding:0.25rem 0.75rem; font-size:1rem; border-radius:20px; background:var(--color-background-grey); color:var(--color-text-black); text-transform:none; letter-spacing:0; }
.chip--small .chip-text{ margin-right:6px; }
.chip--small .chip-close{ font-size:16px; height:16px; line-height:14px; }
.chip--small.is-active{ border:1px solid var(--color-text-black); border-radius: 30px; color:var(--color-text-black); background-color: #fff; }
.chip--small.is-active:hover{ background:var(--color-transkop-red);  border:1px solid var(--color-transkop-red); color:#fff; }
.products-tax__content{ display:grid; grid-template-columns:1fr; gap:1rem; }
.products-tax__content.has-sidebar{ grid-template-columns:20% 1fr; }
.products-tax__sidebar{ align-self:start; background:var(--color-background-grey); padding:1rem; border-radius: 5px; }
.subcategory-list{ list-style:none; margin:0; padding-left:0; display:flex; flex-direction:column; gap:0; }
.subcategory-list li{ padding-top:1rem;padding-bottom: .75rem; }
.subcategory-list li + li{ border-top:0.5px solid var(--color-transkop-grey); }
.subcategory-list a, .subcategory-list span{ text-transform:none; letter-spacing:0; color:var(--color-text-black); font-size:var(--fs-p); line-height: 1.2; }
.subcategory-list a:hover{ color:var(--color-transkop-orange); text-decoration:none; }
.subcategory-list .is-active{ color:var(--color-transkop-orange); cursor:default; }
.products-tax__grid .grid-3x{ display:grid; grid-template-columns:repeat(4, 1fr); column-gap:1rem; row-gap:3rem; }
.products-tax__content.has-sidebar .products-tax__grid .grid-3x{ grid-template-columns:repeat(3, 1fr); }
.product-card__media{ width:100%; aspect-ratio:3/4; overflow:hidden; }
.product-card__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.3s ease; }
.product-card__meta{ margin-top:1rem; }
.product-card__link{ display:block; width:100%; }
.product-card__link:hover .product-card__media img{ transform:scale(1.06); }
.products-tax__pagination{ margin-top:2rem; }
.products-tax__pagination{ display:flex; justify-content:center; }
.products-tax__pagination .page-numbers{ color:var(--color-transkop-grey); text-transform:none; letter-spacing:0; padding:0.5rem 0.75rem; display:inline-flex; align-items:center; justify-content:center; line-height:1; vertical-align:middle; font-size: 1rem; }
.products-tax__pagination .page-numbers:hover{ color:var(--color-text-black); text-decoration:none; }
.products-tax__pagination .page-numbers.current{ color:var(--color-transkop-orange); }
.products-tax__pagination .pag-arrow{ width:15px; height:15px; display:inline-block; vertical-align:middle; filter: none; }
.products-tax__pagination .pag-prev{ transform: rotate(225deg); }
.products-tax__pagination .pag-next{ transform: rotate(45deg); }

@media (max-width: 1024px) {
.products-tax__content.has-sidebar{ grid-template-columns:1fr; }
.products-tax__grid .grid-3x{ grid-template-columns:repeat(2, 1fr); }
}
.portfolio-grid-header{ margin-bottom:2rem; }
.portfolio-grid__list{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; }
.portfolio-grid__item{ background:transparent; }
.portfolio-card__container{ height:100%; }
.portfolio .portfolio-grid__item{ transition: background-color 0.3s ease; }
.portfolio .portfolio-grid__item:hover{ background:var(--color-transkop-orange); }
.portfolio .portfolio-grid__item:hover .portfolio-card__media img{ transform: scale(1.1); }
.portfolio .portfolio-grid__item:hover .portfolio-card__meta h6,
.portfolio .portfolio-grid__item:hover .portfolio-card__cat,
.portfolio .portfolio-grid__item:hover .portfolio-card__tag{ color:#fff; }
.portfolio .portfolio-grid__item:hover .portfolio-cta__circle{ background:var(--color-dark-grey); }

.portfolio-load-more{
  margin-top:2rem;
  display:flex;
  justify-content:center;
}

.h1-as-h2{ font-size:var(--fs-h2); line-height:var(--lh-h2); font-weight:600; }
.h1-as-h3{ font-size:var(--fs-h3); line-height:var(--lh-h3); font-weight:600;}
/* Products archive page */
.products-archive{ padding-top:9rem; padding-bottom:6rem; }
.products-archive .cat-media{ aspect-ratio:3/2; display:flex; align-items:flex-end; justify-content:stretch; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%), var(--cat-img) center no-repeat; background-size: auto, 100%; overflow:hidden; transition: background-size 0.3s ease; }
.products-archive a:hover .cat-media{ background-size: auto, 110%; }
.products-archive .product-cat-caption{ padding: 1.5rem; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%); color:#fff; font-size:1rem; text-transform:none; letter-spacing:0; font-weight:300; width: 100%}
.products-archive .product-tab{ border:0; padding:0; text-align:left; cursor:pointer; transition: background-color 0.3s ease; }
.products-archive .product-tab .product-tab__inner{ display:flex; align-items:center; justify-content:space-between; padding:1.5rem; }
.products-archive .product-tab h5{ margin:0; transition:color 0.3s ease; }
.products-archive .product-tab .service-cta__circle{ width:35px; height:35px; border-radius:50%; background:var(--color-dark-grey); display:inline-flex; align-items:center; justify-content:center; transition:background-color 0.3s ease; }
.products-archive .product-tab .service-cta__circle img{ width:16px; height:16px; filter: invert(1); transition:filter 0.3s ease, transform 0.3s ease; }
.products-archive a:hover .product-tab{ background:var(--color-transkop-orange) !important; }
.products-archive a:hover .product-tab h5{ color:#fff; }
.products-archive a:hover .product-tab .service-cta__circle{ background:#fff; }
.products-archive a:hover .product-tab .service-cta__circle img{ filter:none; transform:rotate(45deg); }

/* Single Product */
.single-product{ margin-top:100px; overflow-x:hidden; }
.single-product__nav{ padding-top:2rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; gap:2rem; }
.link-with-arrow--back img{ transform:rotate(225deg) !important; }
.link-with-arrow--back:hover img{ transform:rotate(225deg) !important; }
.link-with-arrow img{ transform:rotate(45deg); }
.link-with-arrow--back{ text-decoration:none; }
.link-with-arrow--back .link-text{ position:relative; display:inline-block; text-transform: none; }
.link-with-arrow--back .link-text::after{
content:'';
position:absolute;
left:0;
right:0;
bottom:0;
height:1px;
background:currentColor;
transform:scaleX(0);
transform-origin:left;
transition:transform 0.3s ease;
}
.link-with-arrow--back:hover .link-text::after{
transform:scaleX(1);
}
.single-product__header{ padding-top:4rem; padding-bottom:3rem; }
.single-product__grid{ display:grid; grid-template-columns:1fr 2fr; gap:4rem; align-items:start; }
.single-product__media{ width:100%; aspect-ratio:1/1; background:var(--color-background-grey); overflow:hidden;}
.single-product__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.single-product__info{ display:flex; flex-direction:column; gap:2.5rem; height:100%; width: 100%;}
.single-product__thickness-section{ display:flex; flex-direction:column; gap:1rem; }
.single-product__thickness-row{ display:flex; align-items:flex-end; gap:30px; flex-wrap:nowrap; }
.single-product__thickness-icons{ display:flex; align-items:flex-end; gap:1rem; flex-wrap:nowrap; }
.thickness-icon{
  object-fit:contain;
  height:30px;
  max-height:30px;
  width:auto;
  display:block;
  flex-shrink:0;
}
.thickness-icon[src$="pesacki.svg"]{
  height:40px;
  max-height:40px;
}
.single-product__description{ background:#f3f3f3; padding:20px; border-radius:4px; margin-top:auto;}
.thickness-icons-wrap{ position:relative; display:inline-flex; align-items:flex-start; gap:0.5rem; padding-right:0; }
.thickness-legend__trigger{ position:absolute; top:-22px; right:-22px; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; padding:0; border:0; background:transparent; cursor:pointer; }
.thickness-legend__trigger img{ width:20px; height:20px; display:block; }
.thickness-legend-modal[hidden]{ display:none; }
.thickness-legend-modal{ position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; padding:1.5rem; background:rgba(0,0,0,0.65); }
.thickness-legend-modal__dialog{ position:relative; background:#fff; border-radius:12px; padding:2rem; max-width:900px; width:100%; max-height:90vh; overflow:auto; box-shadow:0 10px 40px rgba(0,0,0,0.2); outline:0; }
.thickness-legend-modal__close{ position:absolute; top:0.75rem; right:0.75rem; background:transparent; border:0; font-size:1.5rem; cursor:pointer; }
.thickness-legend-modal__backdrop{ position:absolute; inset:0; }
.thickness-legend-modal__dialog h3{ margin-bottom:3rem; }
.thickness-legend-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:2.5rem; }
.thickness-legend-item{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:0.75rem; text-align:center; }
.thickness-legend-item img{ max-height:50px; height:100%; width:100%; object-fit:contain; }
.single-product__description p{ font-size: 18px; }
.single-product__tabs{ padding-bottom:3rem; overflow: hidden; }
.product-tabs{ display:flex; gap:1rem; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; padding-bottom:0.25rem; scrollbar-width:none; -ms-overflow-style:none; }
.product-tabs::-webkit-scrollbar{ display:none; }
.product-tabs__tab{ background:transparent; border:0; padding:0.75rem 1rem; font-size:24px; font-weight:500; text-transform:capitalize; color:rgba(57, 55, 55, 0.4); cursor:pointer; border-bottom:3px solid transparent; transition:color 0.3s ease, border-color 0.2s ease; flex:0 0 auto; white-space:nowrap; }
.product-tabs__tab:hover{ color:var(--color-text-black); }
.product-tabs__tab.is-active{ color:var(--color-text-black); border-color:var(--color-transkop-orange); }
.product-tabs__tab:focus-visible{ outline:2px solid var(--color-transkop-orange); outline-offset:2px; }
.product-tabs__panels{ padding-top:3rem; }
.product-tabs__panel{ display:none; }
.product-tabs__panel.is-active{ display:block; }
.product-tabs__panel p{ margin-bottom:1rem; }

/* Tehnicke Karakteristike Table */
.tehnicke-table {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.tehnicke-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  border-radius: 4px;
  padding: 0.5rem 30px;
  min-height: 40px;
}
.tehnicke-label, .tehnicke-value {
  font-size: 18px;
}
.tehnicke-value {
  text-align: end;
}
/* Obrade Section */
.obrade-section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 15%;
}
.obrade-group {
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.obrade-label {
  font-size: 1rem;
  font-weight: 400;
  margin: 0;
  text-transform: uppercase;
}
.obrade-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.obrade-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}
.obrade-img-wrap {
  width: 80px;
  height: 80px;
  border-radius: 100px;
  overflow: hidden;
  background: var(--color-background-grey);
}
.obrade-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.obrade-item:hover .obrade-img-wrap img {
  transform: scale(1.1);
}
.obrade-name {
  font-size: 0.875rem;
  color: var(--color-text-black);
  font-weight: 500;
  line-height: 1.2;
}
.mobile-gallery-title {
  display: none;
}
.dokumenti-section {
  margin-bottom: 2rem;
}
.product-documents-grid{ display:flex; flex-direction:column; gap:0.5rem; align-items:stretch; width:100%; max-width:100%; }
.product-documents-group + .product-documents-group{ margin-top:1rem; }
.product-documents-group:not(:last-child)::after{
  content:'';
  display:block;
  height:1px;
  background:var(--color-background-grey);
  margin-top:1rem;
}
.product-document-card{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:nowrap; width:100%; max-width:100%; min-width:320px; }
.product-document__header{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.product-document__icon{ width:24px; height:24px; flex-shrink:0; }
.product-document__title{ margin:0; font-size:20px; font-weight:400; line-height:1.4; color:var(--color-text-black); }
.product-document__actions{ display:flex; align-items:center; gap:16px; flex-shrink:0; margin-left:auto; }
.product-document__btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; width:140px; height:36px; background: var(--color-background-grey); border:0; border-radius:100px; color:var(--color-text-black); text-decoration:none; font-size:16px; letter-spacing:0px; text-transform:capitalize; transition:background-color 0.2s ease, color 0.2s ease; cursor:pointer; }
.product-document__btn:hover{ background:var(--color-transkop-orange); color:#fff; text-decoration:none; }
.product-document__btn img{ width:16px; height:16px; transition:filter 0.2s ease; }
.product-document__btn:hover img{ filter:invert(1); }
.preporuke{ padding:6rem 0 4rem 0; display:flex; flex-direction:column; gap:3rem; }
.preporuke__intro{ display:flex; flex-direction:column; gap:1.5rem; padding-top: 6rem; }
.preporuke__title{ margin:0; }
.preporuke__wysiwyg p{ margin-bottom:1rem; }
.preporuke__section{ padding:0; }
.preporuke__grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:2rem; align-items:flex-start; }
.preporuke__item{ display:flex; flex-direction:column; gap:1rem; }
.preporuke__media img, .preporuke__under-media img{ width:100%; height:auto; border-radius:0; display:block; }
.preporuke__caption{ text-align:left; color:var(--color-transkop-grey); font-size:0.95rem; }
.preporuke__under-text{ color:var(--color-text-black); line-height:1.6; }
.preporuke__note{ margin-top:1rem; background:var(--color-background-grey); padding:1.5rem; border-radius:12px; line-height:1.6; }
.preporuke__media{ position:relative; }
.preporuke__media--overlay .preporuke__caption--overlay{
  position:absolute;
  top:7%;
  left:25%;
  width:80%;
  max-width:80%;
  transform:translateX(-12.5%);
  text-align:left;
}
.preporuke__under-text{
  display:flex;
  align-items:center;
  gap:1rem;
}
.preporuke__under-text .preporuke__icon{
  width:auto;
  height:30px;
  object-fit:contain;
  vertical-align:middle;
}
.preporuke__icon[src$="pesacki.svg"] {
  height:40px;
}

/* Download page */
.download-page{
  padding-top:9rem;
  padding-bottom:6rem;
  overflow-x:hidden;
}

.download-page .product-tabs,.download-page .single-product__tabs{
    overflow:visible;
}

/* Contact page */
.contact-page{
  padding-top:3rem;
  padding-bottom:3rem;
}
.contact-right h1{
  margin-bottom:2rem;
}

/* Default page/archive fallback */
.default-page,
.archive-fallback{
  padding-top:3rem;
  padding-bottom:3rem;
}

/* Products archive grid (replacement for Bootstrap grid) */
.products-archive__header{
  margin-bottom:2rem;
}
.products-archive__grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:2rem;
}
.products-archive__item{
  width:100%;
}
.products-archive__link{
  display:block;
  text-decoration:none;
}

/* Archive fallback grid */
.archive-fallback__grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:2rem;
}
.archive-fallback__item{
  width:100%;
}

@media (max-width: 767.98px){
  .products-archive__grid,
  .archive-fallback__grid{
    grid-template-columns:1fr;
  }
}

.single-product__classic{ margin-right:0.5rem; display:inline-block; vertical-align:baseline; }

/* Single Product - Ivičnjaci */
.single-product__info--ivicnjak{ gap:0; }
.single-product__dimenzije{ margin:24px 0 0; font-size:24px; font-weight:600; line-height:1.3; color:var(--color-text-black); }
.single-product__description--ivicnjak{ margin-top:24px; margin-bottom:0; }
.single-product__documents{ margin-top:60px; margin-bottom:0; }
.single-product__documents .product-document-card{ justify-content:flex-start; gap:16px; }
.single-product__documents .product-document__header{ flex:0 1 auto; }
.single-product__documents .product-document__actions{ margin-left:0; }
.ivicnjak-images{ display:flex; gap:4rem; align-items:flex-start; padding-top:0; padding-bottom:3rem; }
.ivicnjak-images__col{ flex:1 1 50%; min-width:0; }
.ivicnjak-images__col--left{ display:flex; flex-direction:column; gap:2rem; }
.ivicnjak-images__fig{ margin:0; }
.ivicnjak-images__fig img{ width:100%; height:auto; display:block; }
.ivicnjak-images__col--right{ display:flex; justify-content:flex-start; }
.ivicnjak-images__fig--presek{ width:50%; }
.ivicnjak-images__fig--presek img{ width:100%; }
.product-related-wrap--plain{ background-color:transparent; }

/* Single Portfolio */
.single-portfolio{ overflow-x: hidden;}
.single-portfolio__hero{ position:relative; width:100%; height:calc(100vh - 100px); overflow:hidden; margin-top:100px; }
.single-portfolio__hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.single-portfolio__container{ padding-top:5rem; padding-bottom:6rem; }
.single-portfolio__title{ margin:0 0 2rem 0; }
.single-portfolio__meta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.single-portfolio__labels{ display:flex; flex-direction:column; gap:0.5rem; margin-bottom:2rem; }
.single-portfolio__labels .meta-row{ display:flex; align-items:baseline; gap:0.5rem; font-size:0.875rem; letter-spacing:var(--ls-a); text-transform:uppercase; }
.single-portfolio__labels .meta-label{ color:var(--color-dark-grey-50); }
.single-portfolio__labels .meta-value{ font-weight:700; color:var(--color-text-black); text-transform:none; }
.single-portfolio__content p{ text-align:justify; }
.materials{ width: 75%; margin-left: auto; }
.materials__list{ display:flex; flex-direction:column; gap:0.5rem;}
.materials__item{ width:fit-content; max-width:100%; }
.materials__link{
  display: block;
  text-decoration: none;
  padding: 1rem;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}
.materials__link:hover{
  background: var(--color-background-grey);
}
.materials__row{ display:grid; grid-template-columns:60px 1fr; gap:1rem; align-items:start; }
.materials__thumb{ width:60px; height:60px; background:var(--color-background-grey); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.materials__img{ width:100%; height:100%; object-fit:cover; display:block; }
.material-row{ display:flex; align-items:baseline; gap:0.5rem; font-size:0.875rem; letter-spacing:var(--ls-a); text-transform:uppercase; }
.material-label{ color:var(--color-dark-grey-50); }
.material-value{ font-weight:700; color:var(--color-text-black); text-transform:none; }

/* Gallery on single portfolio */
.portfolio-single-gallery{ overflow:visible; padding-bottom: 5rem; }
.portfolio-single-gallery .splide__track{ overflow:visible; }
.portfolio-single-gallery .portfolio-card__media{ aspect-ratio:auto; background:transparent; height:60vh; }
.portfolio-single-gallery .portfolio-card__media img{ object-fit:contain; width:auto; max-width:none; height:100%; display:block; margin:0 auto; }
.portfolio-single-gallery .js-gallery-prev img{ transform:rotate(225deg) !important; }

/* Override hover styles from homepage portfolio slider */
.portfolio-single-gallery .splide__slide:hover{ background:transparent; }
.portfolio-single-gallery .splide__slide:hover .portfolio-card__media img{ transform:none; }
.portfolio-single-gallery .splide__slide:hover .portfolio-card__meta h6,
.portfolio-single-gallery .splide__slide:hover .portfolio-card__cat,
.portfolio-single-gallery .splide__slide:hover .portfolio-card__tag{ color:inherit; }
.portfolio-single-gallery .splide__slide:hover .portfolio-cta__circle{ background:transparent; }

/* Lightbox styles */
.lightbox-overlay{ position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity 0.2s ease, visibility 0s linear 0.2s; }
.lightbox-overlay.is-open{ opacity:1; visibility:visible; transition:opacity 0.2s ease; }
.lightbox-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,0.85); z-index:0; }
.lightbox-content{ position:relative; z-index:1; max-width:90vw; max-height:90vh; display:flex; align-items:center; justify-content:center; gap:1rem; }
.lightbox-img{ max-width:90vw; max-height:90vh; width:auto; height:auto; object-fit:contain; display:block; }
.lightbox-close,.lightbox-prev,.lightbox-next{ position:fixed; background:transparent; color:#fff; border:0; font-size:2rem; line-height:1; cursor:pointer; z-index:1101; }
.lightbox-close{ top:1rem; right:1rem; }
.lightbox-prev,.lightbox-next{ top:50%; transform:translateY(-50%); width:50px; height:50px; background:transparent; border:1px solid #fff; border-radius:100px; display:flex; align-items:center; justify-content:center; transition:background-color 0.2s ease, border-color 0.2s ease; }
.lightbox-prev{ left:calc(1rem); }
.lightbox-next{ right:calc(1rem); }
.lightbox-prev{ left:1rem; }
.lightbox-next{ right:1rem; }
.lightbox-prev img{ transform:rotate(225deg); width:20px; height:20px; filter:invert(1); transition:filter 0.2s ease; }
.lightbox-next img{ transform:rotate(45deg); width:20px; height:20px; filter:invert(1); transition:filter 0.2s ease; }
.lightbox-prev:hover,
.lightbox-next:hover{ background:#fff; border-color:#fff; }
.lightbox-prev:hover img,
.lightbox-next:hover img{ filter:invert(0); }
.lightbox-close img{ width:20px; height:20px; filter:invert(1); }

/* ==========================================================================
 O NAMA PAGE STYLES
 ========================================================================== */

/* Hero O Nama section */
.hero-o-nama{ 
  position: relative;
  min-height: calc(100vh - 100px); 
  margin-top: 100px; 
  display: flex;
  overflow: hidden;
}
.hero-o-nama::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:50%;
  height:100%;
  background: linear-gradient(180deg, rgba(204, 97, 44, 0.92) 0%, rgba(186, 53, 47, 0.92) 100%);
  mix-blend-mode: multiply;
  z-index:2;
  pointer-events:none;
}
.hero-o-nama__img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: bottom right;
  z-index: -1;
  pointer-events: none;
}
.hero-o-nama-inner{ 
  width: 100%; 
  max-width: calc(1320px + 4rem); 
  margin: 0 auto;
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 5rem;
}
.hero-o-nama-content{ 
  display: flex;
  padding: 3rem 0;
  position: relative;
  z-index: 3;
}
.hero-o-nama-content h2{ 
  color: var(--color-text-white); 
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 600;
  max-width: 275px;
}
.hero-o-nama-text{ 
  display: flex;
  padding-top: 3rem;
  position: relative;
  z-index: 1;
}

/* Screen reader only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* O nama content section */
.o-nama-content{ 
  padding: 10rem 2rem;
}
.o-nama-content h3{ 
  text-align: center;
  max-width: 1085px; 
  margin: 0 auto;
  font-weight: 400;
  line-height: 1.5;
}
.o-nama-content h3 strong{
  font-weight: 700;
}

/* Istorijat section */
.istorijat{
  padding: 10rem 0;
}
.istorijat-inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: flex-start;
}
.istorijat-image{
  position: sticky;
  top: 100px;
}
.istorijat-image img, .istorijat__img{
  width: 100%;
  height: 85vh;
  object-fit: cover;
  object-position: center;
}
.istorijat-content h3{
  margin-bottom: 3rem;
  color: var(--color-text-black);
}

/* Timeline styles */
.timeline{
  position: relative;
  padding-left: 2rem;
}
.timeline::before{
  content: '';
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-background-grey);
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 0.8s ease;
  z-index: 0;
}
.timeline.animate::before{
  transform: scaleY(1);
}
.timeline-item{
  position: relative;
  margin-bottom: 3rem;
  opacity: 0;
  transform: translateX(-30px);
  transition: all 0.6s ease;
}
.timeline-item.animate{
  opacity: 1;
  transform: translateX(0);
}
.timeline-dot{
  position: absolute;
  left: -32px;
  top: 0px;
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 50%;
  border: 6px solid var(--color-transkop-orange);
  transform: scale(0);
  transition: transform 0.4s ease;
  z-index: 10;
}
.timeline-item.animate .timeline-dot{
  transform: scale(1);
}
.timeline-content h5{
  color: var(--color-transkop-grey);
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.timeline-content p{
  margin: 0;
  line-height: 1.6;
}

/* O nama detail section */
.o-nama-detail{
  padding: 10rem 0;
}
.o-nama-detail-inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.o-nama-detail-content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.o-nama-detail-content h3{
  margin-bottom: 3rem;
  color: var(--color-text-black);
}
.o-nama-detail-text{
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin-bottom: 3rem;
}
.o-nama-detail-text p{
  text-align: justify;
  margin: 0;
  line-height: 1.6;
}
.o-nama-detail-image{
  position: sticky;
  top: 100px;
}
.o-nama-detail-image img, .o-nama-detail__img{
  width: 100%;
  height: 85vh;
  object-fit: cover;
  object-position: center;
}

/* Fade-in animation for O nama detail items */
.fade-item{
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}
.fade-item.animate{
  opacity: 1;
  transform: translateY(0);
}

/* Hide map left container only on O nama page */
.page-o-nama .map-section .homepage-left,
.page-template-o-nama .map-section .homepage-left,
body[class*="o-nama"] .map-section .homepage-left{
  display: none !important;
}
.page-o-nama .map-section .homepage-inner,
.page-template-o-nama .map-section .homepage-inner,
body[class*="o-nama"] .map-section .homepage-inner{
  grid-template-columns: 1fr !important;
}

/* Map section */
/* Map section */
.map-section .map-boxed-wrapper{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; background: url('assets/img/map-bg.webp') center center / cover no-repeat; padding:3rem 3rem 3rem 0; border-radius:0; }
.map-section .map-right{ position:relative; z-index:1; }
.map-section .map-right p{ max-width:650px; margin-top:1rem; margin-bottom:0; }

.map-section .map-cities{ display:flex; align-items:center; }
.map-section .city-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:1rem; }
.map-section .city-list li{ font-size:2rem; font-weight:500; color:#7C7C7C; cursor:pointer; transition:color 0.3s ease; }
.map-section .city-list li:hover{ color:var(--color-transkop-orange); }

.map-section .map-visual-boxed{ position:relative; width:100%; }
.map-section .map-wrap{ position:relative; width:100%; max-width:100%; margin:0 auto; }
.map-section .map-base{ width:100%; height:auto; display:block; }
.map-section .map-marker{ position:absolute; }
.map-section .map-pin{ width:60px; height:60px; display:block; }
.map-section .map-tooltip{ position:absolute; left:50%; bottom:100%; transform:translate(-50%, -12px); background:#fff; color:var(--color-text-black); padding:0.75rem 1rem; box-shadow:0 8px 24px rgba(0,0,0,0.15); width:max-content; max-width:260px; opacity:0; visibility:hidden; transition:opacity 0.15s ease, transform 0.15s ease; z-index:10; }
.map-section .map-tooltip::after{ content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-top:8px solid #fff; }
.map-section .map-marker:hover .map-tooltip,
.map-section .map-marker.is-active .map-tooltip{ opacity:1; visibility:visible; transform:translate(-50%, -16px); }
.map-section .map-tooltip h6{ margin-bottom: .25rem;}
.map-section .map-tooltip p{ margin:0; font-size:0.875rem; letter-spacing:0; text-transform:none; }

/* 404 Error Page */
.error-404-page{ min-height:calc(100vh - 200px); display:flex; align-items:center; justify-content:center; padding:6rem 0; }
.error-404-content{ text-align:center; max-width:800px; margin:0 auto; }
.error-404-inner{ padding:2rem 0; }

.error-404-number{ font-size:8rem; font-weight:700; color:var(--color-transkop-orange); line-height:1; margin-bottom:1rem; }
.error-404-title{ font-size:var(--fs-h2); font-weight:600; color:var(--color-text-black); margin-bottom:1.5rem; }
.error-404-description{ font-size:var(--fs-p); color:var(--color-transkop-grey); margin-bottom:3rem; max-width:600px; margin-left:auto; margin-right:auto; }

.error-404-actions{ display:flex; align-items:center; justify-content:center; gap:1.5rem; margin-bottom:4rem; }
.error-404-actions .btn-hero{ width:auto; min-width:180px; padding:0 2rem; }

.error-404-suggestions{ margin-top:2rem; }
.error-404-suggestions h3{ font-size:var(--fs-h4); margin-bottom:2rem; color:var(--color-text-black); }
.suggestions-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:1.5rem; max-width:600px; margin:0 auto; }
.suggestion-item{ text-align:center; }
.suggestion-item a{ display:flex; flex-direction:column; align-items:center; gap:1rem; padding:1.5rem; border:1px solid var(--color-background-grey); transition:all 0.3s ease; text-transform:none; letter-spacing:0; }
.suggestion-item a:hover{ border-color:var(--color-transkop-orange); transform:translateY(-4px); box-shadow:0 8px 24px rgba(201,97,60,0.15); }
.suggestion-item img{ width:40px; height:40px; filter:var(--color-transkop-orange); }
.suggestion-item span{ font-size:0.875rem; font-weight:500; color:var(--color-text-black); }

/* Responsive Media Queries */

/* Tablet and smaller desktop */
@media (max-width: 1024px) {

.site-nav.is-open{ clip-path: circle(110vmax at var(--nav-cx, 20%) var(--nav-cy, 20%)); }

.home section + section{ margin-top:8rem; }
.single-portfolio__meta-grid{ grid-template-columns:1fr; }
.istorijat-inner{
  grid-template-columns: 1fr;
  gap: 3rem;
}
.istorijat-image{
  position: static;
}
.istorijat-image img{
  height: 50vh;
}
.o-nama-detail-inner{
  grid-template-columns: 1fr;
  gap: 3rem;
}
.o-nama-detail-image{
  position: static;
  order: -1;
}
.o-nama-detail-image img{
  height: 50vh;
}

/* Global Tablet Padding */
.container-boxed {
  padding-left: 16px;
  padding-right: 16px;
}

/* Hero Tablet */
.hero {
  flex-direction: column;
  height: auto;
  padding-top: 0;
}
.hero .hero-media {
  position: relative;
  width: calc(100% - 16px);
  min-height: 300px;
  order: -1;
  padding-left: 16px;
  pointer-events: none;
}
.hero .hero-img-1{
  position: relative;
  height:90vh;
}
.hero .hero-img-2{
  width: 50%;
  margin-left: -16px;
}
.hero .container-boxed {
  width: 100%;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.hero .hero-content {
  max-width: 100%;
  padding-bottom: 0;
  justify-content: flex-start;
}
.hero p {
    margin-top: 20px;
    margin-bottom: 30px;
}

/* About Tablet */
/* Handled via .splide__list override above */
.hero-o-nama{
  min-height:80vh;
  height:80vh;
}
.about .about-cta {
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}
.about .about-cta p {
  max-width: 100%;
}

/* Map Tablet */
.map-section .map-pin {
  width: 45px;
  height: 45px;
}

/* Materials Tablet */
.materials {
  margin-left: 0;
  width: 100%;
}
.single-portfolio__meta-grid {
  flex-direction: column;
}

.services-image {
  height: 70vh;
}

.preporuke{
  padding:4rem 0 3rem 0;
  gap:2rem;
}
.preporuke__grid{
  grid-template-columns:repeat(2, 1fr);
  gap:3rem;
}
.preporuke__item{
  flex-direction:column-reverse;
}
}

/* Contact page */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:100px 0; align-items:stretch; }
.contact-col{ padding:2rem; display:flex; flex-direction:column; justify-content:center; border-radius:4px; }
.contact-stack{ display:flex; flex-direction:column; gap:2rem; }
.contact-right__title{ margin-bottom:1rem; }
.contact-right__intro{ margin-bottom:2rem; font-size:var(--fs-p); line-height:var(--lh-p); color:var(--color-text-black); text-transform:none; letter-spacing:0; }

/* Links styled like paragraph */
.p-link{ font-size:var(--fs-p); line-height:var(--lh-p); font-weight:300; text-transform:none; letter-spacing:0; color:var(--color-text-black); text-decoration:none; position:relative; display:inline-block; overflow:hidden; padding-bottom:0; }
.p-link::after{ content:''; position:absolute; bottom:0; left:0; width:100%; height:1px; background-color:var(--color-dark-grey); transform:translateX(-100%); transition:transform 0.3s ease; }
.p-link:hover::after{ transform:translateX(0); }
.p-label{ font-size:var(--fs-p); line-height:var(--lh-p); font-weight:600; text-transform:none; letter-spacing:0; color:var(--color-text-black); }

/* CF7: spacing and controls */
.wpcf7 form p{ margin:0; }
.wpcf7 form p:has(.wpcf7-form-control-wrap){ margin-bottom:1.5rem; }
.wpcf7 form p:has(textarea){ margin-bottom:2rem; }
.wpcf7 form .wpcf7-form-control{ width:100%; border:none; border-radius:10px; padding:0.75rem 1rem; background:#fff; color:var(--color-text-black); }
.wpcf7 form label{ display:block; }
.wpcf7 form .wpcf7-form-control-wrap{ display:block; width:100%; }
.wpcf7 form label .wpcf7-form-control-wrap{ margin-top:0.5rem; }
.wpcf7 form textarea{ height:7rem; }

/* CF7 submit as hero button with arrow */
.wpcf7 form .wpcf7-submit{ position:relative; width:100%; height:50px; border-radius:30px; padding:0 1rem 0 1.25rem; display:inline-flex; align-items:center; justify-content:center; background:var(--color-transkop-orange); border:1px solid var(--color-transkop-orange); color:var(--color-text-white); font-size:14px; line-height:var(--lh-a); letter-spacing:var(--ls-a); text-transform:uppercase; cursor:pointer; transition:background-color 0.3s ease, border-color 0.3s ease; margin-top:0; }
.wpcf7 form .wpcf7-submit::after{ content:''; display:inline-block; width:16px; height:16px; margin-left:10px; background:url('assets/img/button-arrow.svg') no-repeat center / contain; filter:invert(1); transition:transform 0.3s ease; }
.wpcf7 form .wpcf7-submit:hover{ background:var(--color-transkop-red); border-color:var(--color-transkop-red); }
.wpcf7 form .wpcf7-submit:hover::after{ transform:rotate(45deg); }
.wpcf7 form .wpcf7-response-output { margin: 0;padding: 0.2em 1em; border:none; font-weight:700;text-align:center;}

/* Mobile */
@media (max-width: 767.98px) {

:root {
  --fs-h1: 2rem;
  --lh-h1: 1.1;

  --fs-h2: 1.5rem;
  --lh-h2: 1.15;

  --fs-h3: 1.5rem;
  --lh-h3: 1.25;

  --fs-h4: 1.375rem;
  --lh-h4: 1.25;

  --fs-h5: 1.125rem;
  --lh-h5: 1.3;

  --fs-h6: 1rem;
  --lh-h6: 1.4;

  --fs-p: 0.875rem;
  --lh-p: 1.6;

  --fs-a: 0.75rem;
  --lh-a: 1.5;
  --ls-a: 0.12em;
}

.products .products-media {
  display: none;
}
.products .products-layout {
  grid-template-columns: 1fr;
}
/* Hide portfolio arrows on mobile */
.portfolio .portfolio-arrows {
  display: none;
}

.home section + section { margin-top: 5rem; }
.portfolio-grid__list { grid-template-columns: repeat(2, 1fr); }
.error-404-number{ font-size:5rem; }
.error-404-title{ font-size:var(--fs-h3); }
.error-404-actions{ flex-direction:column; gap:1rem; }
.error-404-actions .btn-hero{ width:100%; max-width:280px; justify-content:center; }
.suggestions-grid{ grid-template-columns:repeat(2, 1fr); gap:1rem; }
.suggestion-item a{ padding:1rem; }

.contact-page{
  padding: 0 1rem;
  padding-bottom: 6rem;
}
.contact-grid{ min-height:auto; align-items:stretch; grid-template-columns:1fr; display:flex; flex-direction:column-reverse; margin-bottom:0;}

/* Prevent body scroll when nav is open (mobile only) */
.nav-open { overflow: hidden; }

/* Global Mobile Layout */
.homepage-inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.homepage-left {
  width: fit-content;
  align-self: flex-start;
  flex-direction: column;
  gap: 0;
  margin-bottom: 0;
  align-items: center;
}
.homepage-left h2 {
  font-size: var(--fs-h1);
  line-height: 1;
}
.homepage-left p {
  font-size: var(--fs-a);
  margin: 0;
}
.btn-hero {
  width: 50%;
  height: 42px;
  padding: 0 0.5rem;
  font-size: 12px;
  letter-spacing: 0.2;
}
.hero .actions {
  width: 100%;
  justify-content: center;
  gap: 1rem;
}
.hero .btn-hero {
  width: 50%;
}
.hero .btn-hero img {
  width: 14px;
  height: 14px;
}
.hero .container-boxed{
  padding: 1rem;
}
.services .services-grid {
  grid-template-columns: 1fr;
}
.services .services-card {
  height: auto;
}

.site-header .btn-contact {
  display: inline-flex;
  width: 45px;
  height: 45px;
  padding: 0;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--color-text-black);
  background: #fff;
}
.site-header .btn-contact-text { display: none; }
.site-header .btn-contact-icon {
  display: block;
  width: 24px;
  height: 24px;
  transition: filter 0.3s ease;
}
.site-header .btn-contact:hover .btn-contact-icon { filter: brightness(0) invert(1); }
.site-header .hamburger { order: 2; }
.site-header .header-actions {
  display: flex !important;
  gap: 0.5rem;
}

/* Force Shrink Header Look on Mobile */
.site-header { height: 70px; }
.site-header .site-logo img, 
.site-header .site-logo .custom-logo { width: 150px; }
.site-header .hamburger { width: 45px; height: 45px; }
.site-header .hamburger .hamburger-icon { width: 24px; height: 24px; }

/* Hero Mobile */
.hero {
  margin-top: 70px;
}
.hero .hero-img-1{
  height:55vh;
}
.hero .hero-img-2{
  bottom: 10% !important;
}

/* Map Section Mobile */
.map-section .map-boxed-wrapper {
  grid-template-columns: 1fr;
  padding: 1rem;
  margin-top: 0;
  background: url('assets/img/map-bg.webp') bottom right / cover no-repeat;
}
.map-section .city-list {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;    
}
.map-section .city-list li {
  font-size: 18px;
  line-height: 1;
}

/* Map Pin Mobile */
.map-section .map-pin {
  width: 35px;
  height: 35px;
}

.services-image {
  height: 50vh;
}

/* About Stat Mobile */
.about .about-stat h3 {
  font-size: 20px;
}
.about .about-stats {
   display: block; /* Ensure wrapper allows slider */
}
.about .about-stat {
  height: 120px;
}

/* Portfolio Card Mobile */
.portfolio .portfolio-card__meta {
  padding: 1rem 0.5rem;
}
.portfolio-card__meta h6, .product-card__meta h6{
  font-size: 14px;
}
.portfolio .portfolio-card__cat, .portfolio .portfolio-card__tag{
  font-size: 12px;
}

/* Product Tabs Mobile */
.product-tab__inner h5{
  font-size: 16px;
}

/* Service CTA Mobile */
.products .product-tab .service-cta__circle, 
.products-archive .product-tab .service-cta__circle,
.services .services-card .service-cta__circle {
  width: 30px;
  height: 30px;
}
.portfolio .portfolio-top{
  align-items: baseline;
}
.portfolio .portfolio-top h3 {
  max-width: 200px;
}
.product-related-wrap--plain .portfolio-top h3 {
  max-width: none;
}
.products .product-tab .service-cta__circle img, 
.products-archive .product-tab .service-cta__circle img,
.services .services-card .service-cta__circle img {
  width: 14px;
  height: 14px;
}

.link-with-arrow {
  font-size: 12px;
  gap: 5px;
  align-items: flex-end;
  height: 1.5rem;
}

.link-with-arrow img{
  height: 18px !important;
}

/* Footer Mobile */
.site-footer {
  height: 50vh !important;
}
.site-footer .footer-bg {
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.site-footer .footer-top-wrapper {
  height: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.site-footer .footer-top-row {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 1rem;
  height: 100%;
}
.site-footer .footer-logo img {
  width: 150px;
}

/* Navigation Mobile */
.site-nav .nav-grid {
  grid-template-columns: 1fr;
  width: 100%;
  padding: 100px 16px;
  align-items: flex-start;
  gap: 2rem;
}
.site-nav .nav-col {
  gap: 0.5rem;
}
.site-nav .nav-col h2 {
  font-size: 18px;
}
.site-nav .nav-col li a {
  font-size: 16px;
}
.site-nav .container-boxed {
  align-items: flex-start;
  padding: 0;
  justify-content: flex-start;
  height: auto !important;
}
.hero-o-nama{
  position: relative;
  min-height: auto;
  height: auto;
  flex-direction: column-reverse;
  gap: 4rem;
}
.hero-o-nama::before{
  display:none;
}
.hero-o-nama__img{
  position: relative;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  z-index: 0;
}
.hero-o-nama-inner{
  grid-template-columns: 1fr;
  gap: 2rem;
}
.hero-o-nama-content,
.hero-o-nama-text{
  padding: 0;
}
.hero-o-nama-content h2{
  color: var(--color-text-black);
  max-width: none;
}
.hero-o-nama-text p{
  font-size: 16px;
}
.o-nama-content{
  padding: 5rem 1rem;
}
.o-nama-content h3{
  font-size: 20px;
}
.istorijat, .o-nama-detail{
  padding: 5rem 1rem;
}
.portfolio-grid-page, .products-tax, .products-archive{
  padding-top: 100px;
}

/* Single Portfolio Hero Mobile */
.single-portfolio__hero {
  margin-top: 70px;
}
.single-product__header{
  padding-top:2rem;
  padding-bottom:2rem;
}

.single-portfolio__hero, .single-portfolio__hero img {
  height: 50vh;
}
.single-portfolio__container{
  padding-top: 2rem;
}

.meta-label, .meta-value, .material-label, .material-value {
  font-size: 12px;
}
.portfolio-single-gallery{
  padding-bottom:0;
}

.portfolio-single-gallery .portfolio-card__media {
  height: 25vh;
}

.products-tax__content.has-sidebar .products-tax__grid .grid-3x,
.products-tax__grid .grid-3x {
  grid-template-columns: repeat(2, 1fr);
  column-gap: 0.5rem;
  row-gap: 1.5rem;
}

.single-product{
  margin-top:70px; overflow-x:hidden !important;
}
.single-product__tabs.container-boxed{
  padding-left:0;
  padding-right:0;
}
.single-product__nav{
  padding-top:1rem;
  flex-wrap:wrap;
  gap:1rem;
}
.single-product__grid{
display: flex;
flex-direction: column;
gap:2rem;
}
.single-product__info{
  gap:1.5rem;
}
.single-product__description{
  padding:1rem;
}
.single-product__info--ivicnjak{
  gap:1.5rem;
}
.single-product__dimenzije{
  font-size:18px;
  margin-top:-15px;
}
.single-product__documents{
  margin-top:0.5rem;
}
.ivicnjak-images{
  flex-direction:column;
  gap:0;
  padding-bottom:2rem;
}
.ivicnjak-images__col--left{
  gap:0;
}
.single-product__description p{
  font-size:14px;
}
.single-product__thickness-section{
  margin-top:-1rem;
}
.single-product__thickness-row{
  justify-content:flex-start;
  gap:0.5rem;
}
.single-product__thickness-label{
  font-size:13px;
  margin-bottom:2px;
  min-width:125px;
}
.single-product__thickness-icons{
  transform:scale(0.7);
  max-width: 50%;
  transform-origin:left center;
  justify-content:flex-start;
}
.thickness-legend__trigger{
top: -8px; right: 8px;
}
.thickness-icon{
  width:auto;
  height:25px;
  max-height:25px;
}
.thickness-icon[src$="pesacki.svg"]{
  height:32px;
  max-height:32px;
}
  .thickness-legend{
    margin-bottom:0.5rem;
  }
  .thickness-legend-modal__dialog{
    padding:1.5rem;
  }
  .thickness-legend-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:1rem;
  }
  .thickness-icons-wrap{
    padding-right:0;
  }
.product-tabs{
  gap:0.5rem;
  padding: 0 1rem;
}
.product-tabs__tab{
  padding:0.5rem;
  font-size:16px;
}
.product-tabs__panels{
  padding: 2rem 1rem;
  padding-bottom:0;
}
.obrade-group{
  gap:0.5rem;
}
.obrade-section{
  flex-direction: column;
}
.obrade-list{
  gap:1rem;
}
.obrade-label, .obrade-name{
 font-size:12px;
}
.obrade-item{
  gap:0.5rem;
}
.obrade-img-wrap{
  height:60px;
  width:60px;
}
.tehnicke-row {
    padding: 0.5rem;
    min-height: 35px;
  }
  .tehnicke-label, .tehnicke-value {
  font-size: 14px;
}
.mobile-gallery-title {
  display: block;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  font-weight: 600;
}
.product-documents-grid{
  gap:1.5rem;
  width:100%;
  max-width:100%;
}
.product-document__actions{
  gap:0.25rem;
  margin-left:auto;
}
.product-document-card{
  width:100%;
  max-width:100%;
  justify-content:space-between;
  gap:0.5rem;
  min-width:0;
}
.product-document__header{
  flex:1;
}
.product-document__icon{
  width:16px;
  height:16px;
}
.product-document__header{
  width:100%;
  margin-bottom:0rem;
  gap:0.25rem;
}
.product-document__title{
  font-size:13px;
}

.product-document__btn{
  width:82px;
  height:25px;
  font-size:11px;
  gap:6px;
}
.product-document__btn img{
  width:10px;
  height:10px;
}
.preporuke__intro{ padding-top: 4rem; }
.preporuke{
  padding:4rem 0 3rem 0;
  gap:2rem;
}
.preporuke__grid{
  grid-template-columns:1fr;
}
.download-page{
  padding-top:100px;
  padding-bottom:4rem;
}
}

.chip{
  font-size: 12px;
  letter-spacing: 0.2;
  padding: 0.5rem 1rem;
}
.site-footer .footer-addresses p{
  font-size: 14px;
}

/* ===================== Usluge stranice (Izgradnja / Projektovanje) ===================== */
.usluga{ --usluga-gap:160px; padding-top:100px; padding-bottom:8rem; overflow-x:hidden; }
/* Uniforman razmak između sekcija (160 desktop / 80 mobile) */
.usluga > section + section{ margin-top:var(--usluga-gap); }
.usluga .portfolio-related-wrap{ background-color:transparent; }
.usluga .portfolio-related{ padding-top:0; padding-bottom:0; }

/* Intro */
.usluga-intro{ padding-top:8rem; }
.usluga-eyebrow{ color:var(--color-transkop-grey); font-size:var(--fs-a); line-height:var(--lh-a); letter-spacing:var(--ls-a); text-transform:uppercase; margin:0 0 1.5rem; }
.usluga-head{ display:flex; align-items:end; gap:1rem; margin-bottom:1.5rem; }
.usluga-icon{ width:70px; height:70px; object-fit:contain; }
.usluga-head h1{ margin:0; }
.usluga-lead{ font-size:var(--fs-h3); line-height:var(--lh-h3); font-weight:300; }

/* Statistika (slika + sadržaj space-between) — isto za Izgradnju i Projektovanje */
.usluga-stat__inner{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:stretch; }
.usluga-stat__media{ max-width:430px; overflow:hidden; } /* aspect-ratio se postavlja inline (npr. 9/16) */
.usluga-stat__img,
.usluga-stat__video{ width:100%; height:100%; object-fit:cover; display:block; }
.usluga-stat__content{ display:flex; flex-direction:column; justify-content:space-between; gap:2rem; }
.usluga-stat__row{ margin:0; }
.usluga-stat__number{ font-size:85px; line-height:1.6; font-weight:600; letter-spacing:-0.05em; color:var(--color-text-black); margin:0; }
.usluga-stat__label{ color:var(--color-transkop-grey); font-size:var(--fs-p); line-height:var(--lh-p); font-weight:300; letter-spacing:normal; text-transform:none; margin:0; }
.usluga-stat__text{ max-width:480px; font-size:var(--fs-p); line-height:var(--lh-p); margin:0; }
.usluga-stat__heading{ margin:0; }

/* Slika + potpis (samo Izgradnja) */
.usluga-caption__inner{ display:grid; grid-template-columns:33% 1fr; gap:3rem; align-items:center; }
.usluga-caption__media{ aspect-ratio:16/10; overflow:hidden; }
.usluga-caption__img{ width:100%; height:100%; object-fit:cover; display:block; }
.usluga-caption__text{ color:var(--color-transkop-grey); font-size:var(--fs-p); line-height:var(--lh-p); max-width:420px; margin:0; }

/* Feature (veliki prikaz / plan) – max 75% na desktopu */
.usluga-feature h3{ margin:0 0 1rem; }
.usluga-feature__text{ max-width:680px; color:var(--color-transkop-grey); font-size:var(--fs-p); line-height:var(--lh-p); margin:0 0 4rem; }
.usluga-feature__media{ width:100%; max-width:75%; margin-left:auto; overflow:hidden; }
.usluga-feature__img{ width:100%; height:auto; display:block; }

/* CTA / Konsultacije (tekst width 100%, max 700px) */
.usluga-cta__inner{ display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; }
.usluga-cta__text{ width:100%; max-width:705px; font-weight:700; font-size:var(--fs-h6); line-height:var(--lh-h6); margin:0; }

/* Šta obuhvata (grid; kartice F3F3F3, gap 10px, min-visina 350, sadržaj space-between) */
.usluga-grid h2{ margin:0 0 1rem; }
.usluga-grid__intro{ max-width:640px; color:var(--color-transkop-grey); font-size:var(--fs-p); line-height:var(--lh-p); margin:0 0 3rem; }
.usluga-grid__list{ display:grid; gap:10px; }
.usluga-grid__list.is-numbered{ grid-template-columns:repeat(2,1fr); }
.usluga-grid__list.is-plain{ grid-template-columns:repeat(4,1fr); }
.usluga-grid__card{ background:var(--color-background-grey); padding:20px; min-height:350px; display:flex; flex-direction:column; justify-content:space-between; gap:0.75rem; }
.usluga-grid__num{ display:block; font-size:var(--fs-h3); line-height:var(--lh-h3); color:var(--color-transkop-grey); font-weight:300; }
.usluga-grid__card h4{ margin:0 0 0.75rem; text-transform:none; font-weight:500; }
.usluga-grid__body{ margin:0; }
.usluga-grid__body h4{ margin:0 0 0.75rem; }
.usluga-grid__card p{ color:var(--color-transkop-grey); font-size:var(--fs-p); line-height:var(--lh-p); margin:0; }

/* Izgradnja "Šta obuhvata": sivi band + beli band 100% boxed (lista max 1090px, padding 40px) */
.usluga--izgradnja .usluga-grid{ background:var(--color-background-grey); padding:90px 0; }
.usluga--izgradnja .usluga-grid__band{ width:100%; background:#fff; padding:45px 0; }
.usluga--izgradnja .usluga-grid__band .usluga-grid__list.is-numbered{
  max-width:1090px;
  margin-left:auto;
  margin-right:auto;
  padding:0 40px;
  gap:80px;
}
.usluga--izgradnja .usluga-grid__card{ background:transparent; padding:0; min-height:0; justify-content:flex-start; }

/* Zatvarajući tekst */
.usluga-closing h4{ max-width:1000px; margin:0; }
.usluga-closing--alt p{ max-width:620px; color:var(--color-transkop-grey); font-size:var(--fs-p); line-height:var(--lh-p); margin:0; }

/* Završna sekcija (Projektovanje): blokovi razmaknuti 80px */
.usluga-final__inner{ display:flex; flex-direction:column; gap:80px; }
.usluga-final__heading{ display:flex; flex-direction:column; gap:28px; max-width:880px;}
.usluga-final__heading p{color:var(--color-transkop-grey); font-size:var(--fs-h6); line-height:var(--lh-p); }
.usluga-final__row{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:start; }
.usluga-final__img{ width:100%; height:auto; display:block; }
.usluga-final__text{ font-size:var(--fs-h5); line-height:var(--lh-p); color:var(--color-text-black); max-width:600px;}
.usluga-final__text--right{ margin-left:auto; }
.usluga-final__text--left{ margin-right:auto; }
/* Gornji red: desna slika je 50% širine svoje ćelije, prislonjena desno */
.usluga--projektovanje .usluga-final__heading + .usluga-final__row .usluga-final__img:last-child{ width:50%; justify-self:end; align-self:end; }

/* Kolaž */
.usluga-collage__text{ font-weight:700; font-size:var(--fs-h6); line-height:var(--lh-h6); max-width:560px; margin:0 0 2.5rem; }
.usluga-collage__grid{ position:relative; display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; align-items:start; }
.usluga-collage__accent{ position:absolute; top:-1.5rem; left:25%; width:30%; height:90px; background:var(--color-transkop-orange); clip-path:polygon(8% 0, 100% 0, 92% 100%, 0 100%); z-index:0; }
.usluga-collage__img{ position:relative; z-index:1; width:100%; height:auto; display:block; }
.usluga-collage__img--2{ margin-top:3rem; }

@media (max-width: 1024px){
  .usluga-stat__inner,
  .usluga-caption__inner{ grid-template-columns:1fr; gap:1.5rem; align-items:start; }
  .usluga-stat__content{ justify-content:flex-start; }
  .usluga-cta__inner{ flex-direction:column; }
  .usluga-feature__media{ max-width:100%; }
  .usluga-grid__list.is-plain{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 767.98px){
  .usluga{ --usluga-gap:80px; padding-bottom:80px; }
  .usluga-icon{ width:50px; height:50px; }
  .usluga-lead{ font-size:var(--fs-h5); line-height:var(--lh-h6); }
  .usluga-intro{ padding-top:0; }
  .usluga-stat__number{ font-size:50px; line-height:1.2; }
  .usluga-grid__list.is-numbered,
  .usluga-grid__list.is-plain{ grid-template-columns:1fr; }
  .usluga-feature h3{ max-width:250px;}
  .usluga-grid__card{ min-height:0; padding:16px; }
  .usluga--izgradnja .usluga-grid{ padding:50px 0; }
  .usluga--izgradnja .usluga-grid__band{ padding:30px 0; }
  .usluga--izgradnja .usluga-grid__band .usluga-grid__list.is-numbered{ padding:0 24px; gap:50px; }
  .usluga--izgradnja .usluga-grid__card{ padding:0; }
  .usluga-final__row{ grid-template-columns:1fr; gap:1rem; }
  .usluga--projektovanje .usluga-final__heading + .usluga-final__row .usluga-final__img:last-child{ width:100%; }
  .usluga .portfolio-related .portfolio-top h3{ max-width:none; }
  .usluga-final__text--right,
  .usluga-final__text--left{ max-width:100%; }
  .usluga-final__inner{ gap:30px; }
  .usluga-collage__grid{ grid-template-columns:1fr; }
  .usluga-collage__img--2{ margin-top:0; }
  .usluga-collage__accent{ left:10%; width:55%; }
}