@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600&display=swap');

.sm-inner {
  --ip-ink: #191b17;
  --ip-dark: #151713;
  --ip-gold: #d1b47e;
  --ip-paper: #f3f0e9;
  --ip-surface: #fffdf9;
  --ip-muted: #6a6e65;
  margin: 0;
  color: var(--ip-ink);
  background: var(--ip-paper);
  font-family: "DM Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.sm-inner h1, .sm-inner h2, .sm-inner h3 { letter-spacing: -.035em; }

/* Shared premium header */
.sm-inner header {
  height: 94px;
  padding: 0 !important;
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, rgba(12,14,11,.96), rgba(12,14,11,.84)) !important;
  border-bottom: 1px solid rgba(209,180,126,.22) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.14);
  backdrop-filter: blur(20px);
}
.sm-inner header .container-header { width: min(90%,1280px); max-width:1280px; height:100%; gap:40px; }
.sm-inner header .logo a { display:inline-flex; align-items:center; }
.sm-inner header .logo img { width:auto; height:62px; max-height:62px; object-fit:contain; filter:drop-shadow(0 5px 14px rgba(0,0,0,.28)); }
.sm-inner header nav { margin-left:auto; }
.sm-inner header nav ul { gap:6px; }
.sm-inner header nav > ul > li > a { position:relative; padding:11px 12px; border-radius:2px; color:rgba(255,255,255,.82); font-size:.79rem; font-weight:600; letter-spacing:.045em; }
.sm-inner header nav > ul > li:not(:last-child) > a::after { content:""; position:absolute; left:12px; right:12px; bottom:5px; height:1px; background:var(--ip-gold); transform:scaleX(0); transition:transform .25s ease; }
.sm-inner header nav > ul > li:not(:last-child) > a:hover::after,
.sm-inner header nav > ul > li:not(:last-child) > a.active::after { transform:scaleX(1); }
.sm-inner header nav > ul > li:last-child > a { margin-left:8px; padding:12px 18px; background:var(--ip-gold); border:1px solid var(--ip-gold); color:var(--ip-dark); }

/* Shared page hero */
.sm-inner .hero-image {
  position:relative;
  width:100%;
  height:clamp(430px,58vh,650px);
  margin:0;
  overflow:hidden;
  border-radius:0;
  background:var(--ip-dark);
  box-shadow:none;
}
.sm-inner .hero-image::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(10,12,9,.84),rgba(10,12,9,.28) 65%,rgba(10,12,9,.16)); }
.sm-inner .hero-image::after { content:"STOLARIJA MLAKIĆ · OD 1984."; position:absolute; z-index:2; left:max(5%,calc((100vw - 1280px)/2)); top:45%; transform:translateY(-145px); color:var(--ip-gold); font-size:.69rem; font-weight:700; letter-spacing:.2em; }
.sm-inner .hero-image img { width:100%; height:100%; object-fit:cover; object-position:center; }
.sm-inner .hero-image .hero-text { z-index:2; left:max(5%,calc((100vw - 1280px)/2)); right:auto; top:50%; width:min(900px,82%); padding:0; transform:translateY(-50%); color:#fff; background:none; font-family:Georgia,serif; font-size:clamp(4rem,8vw,8rem); line-height:.92; font-weight:500; text-align:left; text-shadow:0 6px 30px rgba(0,0,0,.25); }

/* Shared CTA */
.sm-inner .container-offer-section { margin:0; padding:clamp(90px,10vw,145px) 5%; background:var(--ip-gold); color:var(--ip-dark); }
.sm-inner .container-offer-content { width:min(1100px,100%); margin:auto; display:flex; align-items:center; justify-content:space-between; gap:40px; }
.sm-inner .container-offer-content h2 { margin:0; max-width:680px; font-family:Georgia,serif; font-size:clamp(2.8rem,5vw,5rem); line-height:1; font-weight:500; }
.sm-inner .container-offer-content .button { min-height:56px; padding:0 26px; border:1px solid var(--ip-dark); border-radius:2px; background:var(--ip-dark); color:#fff !important; font-size:.78rem; font-weight:700; letter-spacing:.06em; }

/* About */
.sm-about .about-section { padding:clamp(90px,10vw,150px) 0; background:var(--ip-paper); }
.sm-about .about-section > .container { width:min(90%,1280px); max-width:1280px; display:block; }
.sm-about .about-content { display:grid; grid-template-columns:.92fr 1.08fr; align-items:center; gap:clamp(60px,9vw,130px); }
.sm-about .about-text p { margin:0 0 20px; color:var(--ip-muted); font-size:1.02rem; line-height:1.85; }
.sm-about .about-text p:first-child { color:var(--ip-ink); font-family:Georgia,serif; font-size:clamp(1.45rem,2.5vw,2.15rem); line-height:1.45; }
.sm-about .about-image { height:650px; overflow:hidden; border-radius:2px 70px 2px 2px; box-shadow:0 28px 70px rgba(26,24,19,.16); }
.sm-about .about-image img { width:100%; height:100%; object-fit:cover; }
.sm-about .why-choose-us { margin:clamp(100px,12vw,170px) calc(50% - 50vw) 0; padding:clamp(90px,9vw,140px) max(5%,calc((100vw - 1280px)/2)); background:var(--ip-dark); }
.sm-about .why-choose-us h1 { max-width:820px; margin:0 auto 16px !important; color:#fff; font-family:Georgia,serif; font-size:clamp(3rem,5vw,5.2rem); line-height:1; }
.sm-about .why-choose-us > p { color:rgba(255,255,255,.5); }
.sm-about .benefits { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:55px; }
.sm-about .benefit { min-width:0; padding:32px 22px; border:1px solid rgba(255,255,255,.1); border-radius:12px; background:rgba(255,255,255,.05); box-shadow:none; }
.sm-about .benefit:hover { transform:translateY(-5px); background:rgba(255,255,255,.08); }
.sm-about .benefit .icon-container { width:55px; height:55px; display:grid; place-items:center; margin:0 auto 22px; border-radius:50%; background:var(--ip-gold); }
.sm-about .benefit h2 { color:#fff; font-size:1rem; letter-spacing:.02em; }
.sm-about .benefit p { color:rgba(255,255,255,.52); font-size:.83rem; }
.sm-about .container-highlight { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:clamp(90px,9vw,130px) 0; }
.sm-about .container-highlight .column { width:auto; height:430px; overflow:hidden; }
.sm-about .container-highlight img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.sm-about .container-highlight .column:hover img { transform:scale(1.04); }
.sm-about .features { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:0; }
.sm-about .feature { padding:44px; border:1px solid rgba(25,27,23,.1); border-radius:4px; background:var(--ip-surface); }
.sm-about .feature h3 { font-family:Georgia,serif; font-size:2rem; }
.sm-about .feature p { color:var(--ip-muted); line-height:1.75; }

/* Products */
.sm-products #traditionals { margin:0; padding:clamp(90px,10vw,145px) 0; background:var(--ip-paper); }
.sm-products .traditionals { margin:0; padding:0; background:none; box-shadow:none; }
.sm-products .tradition-container { width:min(90%,1280px); max-width:1280px; }
.sm-products .tradition-row { gap:clamp(60px,9vw,130px); align-items:center; }
.sm-products .traditional-left .image-container { min-height:520px; }
.sm-products .traditional-left .main-image { width:100%; height:520px; max-height:none !important; object-fit:cover; border-radius:3px 60px 3px 3px; box-shadow:0 28px 70px rgba(26,24,19,.15); }
.sm-products .traditional-right h2 { font-family:Georgia,serif; font-size:clamp(3rem,5vw,5.2rem); font-weight:500; }
.sm-products .traditional-right p { color:var(--ip-muted); font-size:1.03rem; line-height:1.8; }
.sm-products .line-poructs { display:none; }
.sm-products .Doors { padding:clamp(75px,8vw,110px) max(5%,calc((100vw - 1280px)/2)); background:var(--ip-surface); border-top:1px solid rgba(25,27,23,.09); }
.sm-products .Doors:nth-of-type(even) { background:var(--ip-paper); }
.sm-products .Doors > h2 { margin:0 0 45px; font-family:Georgia,serif; font-size:clamp(2.5rem,4vw,4rem); font-weight:500; }
.sm-products .image-carousel { position:relative; gap:18px; }
.sm-products .image-container-door,
.sm-products .image-container-krila,
.sm-products .image-container-rucke { gap:14px; padding:5px 0 20px; }
.sm-products .carousel-image,
.sm-products .carousel-image-krila,
.sm-products .carousel-image-rucke { height:390px !important; object-fit:cover; border-radius:8px; box-shadow:0 12px 35px rgba(26,24,19,.1); }
.sm-products .arrow { width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(25,27,23,.18); border-radius:50%; background:var(--ip-surface); color:var(--ip-dark); font-size:1.2rem; box-shadow:0 8px 25px rgba(0,0,0,.1); }

/* References */
.sm-reference .gallery-title { padding:clamp(90px,9vw,130px) 5% 45px; background:var(--ip-paper); }
.sm-reference .gallery-title h2 { width:min(1280px,100%); margin:auto; font-family:Georgia,serif; font-size:clamp(3rem,5vw,5rem); font-weight:500; }
.sm-reference .gallery { width:min(90%,1280px); margin:0 auto; padding:0 0 clamp(100px,10vw,150px); display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.sm-reference .gallery img { width:100%; height:390px; object-fit:cover; border-radius:4px; box-shadow:none; transition:transform .35s ease,box-shadow .35s ease; }
.sm-reference .gallery img:nth-child(4n+1) { grid-row:span 2; height:794px; }
.sm-reference .gallery img:hover { transform:translateY(-5px); box-shadow:0 24px 55px rgba(26,24,19,.17); }

/* Visualization */
.sm-visualization #canvas-container { padding:clamp(80px,8vw,120px) 5%; background:var(--ip-paper); }
.sm-visualization #canvas-wrapper { width:min(1280px,100%); min-height:680px; margin:auto; overflow:hidden; border:1px solid rgba(25,27,23,.12); border-radius:16px; background:#dedad0; box-shadow:0 28px 70px rgba(26,24,19,.14); }
.sm-visualization .dropdown-container { position:absolute; z-index:10; top:22px; left:22px; right:22px; display:flex; flex-wrap:wrap; gap:10px; padding:14px; border:1px solid rgba(255,255,255,.15); border-radius:12px; background:rgba(20,22,18,.86); backdrop-filter:blur(16px); }
.sm-visualization .dropdown-btn { min-height:45px; padding:0 18px; border:1px solid rgba(255,255,255,.18); border-radius:7px; background:rgba(255,255,255,.07); color:#fff; font-weight:600; }
.sm-visualization #wallColorPicker { width:48px; height:45px; padding:4px; border:1px solid rgba(255,255,255,.18); border-radius:7px; background:transparent; }
.sm-visualization .select-texture,
.sm-visualization .select-texture-floor,
.sm-visualization .dropdown-menu { border:1px solid rgba(25,27,23,.12); border-radius:10px; background:var(--ip-surface); box-shadow:0 18px 45px rgba(0,0,0,.18); }
.sm-visualization .thumbnail { border-radius:6px; }

/* Contact */
.sm-contact .contact { margin:0; padding:clamp(90px,9vw,140px) 0; background:var(--ip-paper); box-shadow:none; }
.sm-contact .contact > .container { width:min(90%,1280px); max-width:1280px; display:grid; grid-template-columns:350px 1fr; align-items:start; gap:70px; }
.sm-contact .left-content { position:sticky; top:130px; width:auto; padding:38px; border-radius:8px; background:var(--ip-dark); color:#fff; }
.sm-contact .left-content h4 { color:var(--ip-gold); letter-spacing:.14em; }
.sm-contact .left-content p,.sm-contact .left-content a { color:rgba(255,255,255,.7); line-height:1.7; }
.sm-contact .right-content { width:auto; }
.sm-contact .right-content .title-line { margin:0 0 12px; }
.sm-contact .right-content h3 { margin:0; font-family:Georgia,serif; font-size:clamp(2.3rem,4vw,3.6rem); font-weight:500; }
.sm-contact .right-content p { color:var(--ip-muted); }
.sm-contact .right-content iframe { height:430px; margin:12px 0 65px; border-radius:12px; box-shadow:0 18px 50px rgba(26,24,19,.12); filter:saturate(.8) contrast(.96); }

/* Offer form */
.sm-offer main { padding:clamp(85px,9vw,135px) 5%; background:var(--ip-paper); }
.sm-offer .form-container { width:min(1050px,100%); margin:auto; padding:0; border-radius:0; background:transparent; box-shadow:none; }
.sm-offer .form-container-content { padding:clamp(35px,6vw,75px); border:1px solid rgba(25,27,23,.1); border-radius:14px; background:var(--ip-surface); box-shadow:0 28px 70px rgba(26,24,19,.1); }
.sm-offer form { display:block; }
.sm-offer form .form-group { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:16px; }
.sm-offer form .form-group.full-width,
.sm-offer form .form-group:has(> :only-child) { grid-template-columns:1fr; }
.sm-offer input,.sm-offer select,.sm-offer textarea { width:100%; min-height:58px; padding:16px 18px; border:1px solid rgba(25,27,23,.16); border-radius:5px; background:#faf8f3; color:var(--ip-dark); font-family:inherit; font-size:.95rem; transition:border-color .2s,box-shadow .2s; }
.sm-offer textarea { min-height:170px; resize:vertical; }
.sm-offer input:focus,.sm-offer select:focus,.sm-offer textarea:focus { outline:none; border-color:#ad8953; box-shadow:0 0 0 3px rgba(173,137,83,.12); }
.sm-offer form > p { color:var(--ip-muted); font-size:.82rem; line-height:1.7; }
.sm-offer form .button { min-width:190px; min-height:56px; border:0; border-radius:3px; background:var(--ip-dark); color:#fff; font-weight:700; }

.sm-inner footer { margin-top:0; }

@media (max-width:1020px) {
  .sm-inner header { height:78px; }
  .sm-inner header .logo img { height:54px; max-height:54px; }
  .sm-inner .hero-image { height:470px; }
  .sm-inner .hero-image::after { transform:translateY(-110px); }
  .sm-about .about-content,.sm-contact .contact > .container { grid-template-columns:1fr; }
  .sm-about .benefits { grid-template-columns:repeat(2,1fr); }
  .sm-contact .left-content { position:static; }
  .sm-reference .gallery { grid-template-columns:repeat(2,1fr); }
  .sm-reference .gallery img:nth-child(4n+1) { grid-row:auto; height:390px; }
}

@media (max-width:680px) {
  .sm-inner .hero-image { height:390px; }
  .sm-inner .hero-image::after { top:49%; left:5%; transform:translateY(-92px); font-size:.58rem; }
  .sm-inner .hero-image .hero-text { left:5%; width:90%; font-size:clamp(3.1rem,15vw,4.8rem); }
  .sm-inner .container-offer-content { display:block; }
  .sm-inner .container-offer-content .button { width:100%; margin-top:30px; }
  .sm-about .about-image { height:430px; }
  .sm-about .benefits,.sm-about .features,.sm-about .container-highlight { grid-template-columns:1fr; }
  .sm-about .container-highlight .column { height:360px; }
  .sm-products .traditional-left .main-image { height:420px; }
  .sm-products .Doors { padding-left:5%; padding-right:5%; }
  .sm-products .carousel-image,.sm-products .carousel-image-krila,.sm-products .carousel-image-rucke { height:320px !important; }
  .sm-reference .gallery { grid-template-columns:1fr; }
  .sm-reference .gallery img,.sm-reference .gallery img:nth-child(4n+1) { height:360px; }
  .sm-visualization #canvas-container { padding-left:3%; padding-right:3%; }
  .sm-visualization #canvas-wrapper { min-height:620px; border-radius:10px; }
  .sm-visualization .dropdown-container { top:10px; left:10px; right:10px; }
  .sm-contact .right-content iframe { height:340px; }
  .sm-offer form .form-group { grid-template-columns:1fr; }
  .sm-offer .form-container-content { padding:28px 20px; }
}

@media (prefers-reduced-motion:reduce) {
  .sm-inner *,.sm-inner *::before,.sm-inner *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* 2026 inner-page rebuild: immediate content, compact editorial heroes */
.sm-inner .fade-in-up,
.sm-inner .fade-in-up-delay,
.sm-inner .fade-slide-in,
.sm-inner .opacity-in-up,
.sm-inner .flip-in,
.sm-inner .bounce-in,
.sm-inner .rotate-in,
.sm-inner .scale-in {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

.sm-inner .hero-image {
  position: relative !important;
  display: block !important;
  height: clamp(420px, 52vh, 560px) !important;
  min-height: 420px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #121410 !important;
  overflow: hidden !important;
}

.sm-inner .hero-image img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center 48% !important;
  opacity: 1 !important;
  transform: none !important;
}

.sm-inner .hero-image::before {
  z-index: 1 !important;
  background: linear-gradient(90deg, rgba(10,12,9,.84) 0%, rgba(10,12,9,.5) 42%, rgba(10,12,9,.14) 78%) !important;
}

.sm-inner .hero-image::after {
  top: 50% !important;
  transform: translateY(-105px) !important;
}

.sm-inner .hero-image .hero-text {
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-30%) !important;
  font-size: clamp(3.8rem, 6.8vw, 7rem) !important;
  line-height: .92 !important;
}

.sm-about .about-section {
  padding: clamp(80px, 8vw, 120px) 0 !important;
}

.sm-about .about-content {
  display: grid !important;
  grid-template-columns: minmax(0,.9fr) minmax(460px,1.1fr) !important;
  gap: clamp(55px,7vw,105px) !important;
  align-items: center !important;
  width: 100% !important;
}

.sm-about .about-text,
.sm-about .about-image {
  display: block !important;
  width: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.sm-about .about-text::before {
  content: "OBITELJSKA TRADICIJA · VLASTITA PROIZVODNJA";
  display: block;
  margin-bottom: 24px;
  color: #9a7845;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
}

.sm-about .about-text p:first-child {
  margin-bottom: 26px !important;
  color: #20231e !important;
  font-size: clamp(1.35rem,2vw,1.85rem) !important;
  line-height: 1.5 !important;
}

.sm-about .about-text p:not(:first-child) {
  max-width: 620px;
  margin-bottom: 16px !important;
  font-size: .98rem !important;
  line-height: 1.75 !important;
}

.sm-about .about-image {
  position: relative !important;
  height: clamp(520px,58vw,680px) !important;
  min-height: 520px !important;
  overflow: hidden !important;
  border-radius: 3px 72px 3px 3px !important;
  box-shadow: 0 30px 80px rgba(26,24,19,.16) !important;
}

.sm-about .about-image::after {
  content: "40+ GODINA ISKUSTVA";
  position: absolute;
  left: 24px;
  bottom: 24px;
  padding: 14px 18px;
  background: rgba(18,20,16,.88);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  backdrop-filter: blur(12px);
}

.sm-about .about-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  opacity: 1 !important;
  transform: none !important;
}

@media (max-width: 1020px) {
  .sm-about .about-content {
    grid-template-columns: 1fr !important;
  }

  .sm-about .about-image {
    height: 560px !important;
  }
}

@media (max-width: 680px) {
  .sm-inner .hero-image {
    height: 380px !important;
    min-height: 380px !important;
  }

  .sm-inner .hero-image::after {
    transform: translateY(-82px) !important;
  }

  .sm-inner .hero-image .hero-text {
    font-size: clamp(3rem,14vw,4.4rem) !important;
  }

  .sm-about .about-image {
    height: 430px !important;
    min-height: 430px !important;
    border-radius: 3px 42px 3px 3px !important;
  }
}