.home-page{background:#fff;color:var(--ink)}
.home-header .header-inner{height:82px}.home-header .header-actions{display:flex;align-items:center;gap:12px}.home-catalog-link{padding:11px 16px;border:1px solid #d8e7e3;border-radius:var(--r-sm);color:var(--brand-teal-dark);font-size:13px;font-weight:800}
.home-nav{position:sticky;top:82px;z-index:45;padding:8px 0;border-bottom:1px solid rgba(205,227,221,.8);background:rgba(247,251,250,.94);backdrop-filter:blur(16px)}.home-nav-inner{display:flex;align-items:center;gap:5px;min-height:44px;padding:5px 7px;border:1px solid #e0ece9;border-radius:var(--r-md);background:#fff;box-shadow:var(--elev-3)}.home-nav a{padding:10px 14px;border-radius:var(--r-sm);color:#3b4948;font-size:12px;font-weight:700;white-space:nowrap;transition:.2s}.home-nav a:hover{background:#edf8f5;color:var(--brand-teal-dark)}.home-nav a.active{background:linear-gradient(115deg,var(--brand-teal),var(--brand-green));color:#fff;box-shadow:0 7px 18px rgba(26,173,174,.22)}.home-group-link{margin-left:auto!important;border:1px solid #c7e4de!important;background:#f7fbfa;color:var(--brand-teal-dark)!important}
.home-hero{padding:18px 0 28px;background:linear-gradient(180deg,#f5faf9,#fff)}.home-hero-carousel{position:relative;overflow:hidden;border-radius:var(--r-lg);background:#edf5f3;box-shadow:var(--elev-4)}.home-hero-viewport{position:relative;aspect-ratio:1280/430}.home-hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s ease}.home-hero-slide.active{opacity:1;visibility:visible}.home-hero-slide img{width:100%;height:100%;object-fit:cover}.home-hero-arrow{position:absolute;z-index:3;top:50%;display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(255,255,255,.75);border-radius:50%;background:rgba(255,255,255,.9);color:var(--ink);font-size:20px;box-shadow:0 10px 25px rgba(0,0,0,.12);transform:translateY(-50%);cursor:pointer}.home-hero-prev{left:18px}.home-hero-next{right:18px}.home-hero-arrow:hover{background:var(--brand-teal);color:#fff}.home-hero-dots{position:absolute;z-index:3;left:50%;bottom:16px;display:flex;gap:7px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.86);transform:translateX(-50%)}.home-hero-dots button{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:#b9c8c5;cursor:pointer;transition:.2s}.home-hero-dots button.active{width:28px;background:linear-gradient(90deg,var(--brand-teal),var(--brand-green))}
.section-pad{padding:75px 0}.home-section-heading{display:flex;align-items:end;justify-content:space-between;gap:36px;margin-bottom:34px}.home-section-heading h1,.home-section-heading h2{margin:4px 0 0;font-size:clamp(36px,4.3vw,62px);line-height:.98;letter-spacing:-.06em}.home-section-heading>a{display:inline-flex;align-items:center;gap:18px;padding:12px 0;border-bottom:1px solid #b8d9d2;color:var(--brand-teal-dark);font-weight:800}.home-section-heading>a span{font-size:21px}
.home-category-section{padding-top:62px}.home-category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.home-category-card{position:relative;display:grid;grid-template-rows:minmax(205px,1fr) 80px;min-height:315px;overflow:hidden;border:1px solid #dfebe8;border-radius:var(--r-lg);background:linear-gradient(145deg,#f7fbfa,#eaf4f1);box-shadow:var(--elev-4);transition:.3s}.home-category-card:hover{transform:translateY(-4px);box-shadow:var(--elev-4)}.home-category-card:after{content:none}.home-category-card img{display:block;width:100%;height:100%;min-height:0;padding:12px;object-fit:contain;object-position:center;transition:transform .4s}.home-category-card:hover img{transform:scale(1.025)}.home-category-card>span{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto;align-content:center;padding:13px 19px;background:linear-gradient(115deg,#12282c,#1c3d3c);color:#fff}.home-category-card small{grid-column:1/-1;color:#bcd4cf;font-size:10px}.home-category-card strong{margin-top:4px;font-size:22px;line-height:1.05}.home-category-card b{align-self:end;font-size:21px}
.home-trust{border-top:1px solid #e1eeea;border-bottom:1px solid #e1eeea;background:#f5faf8}.home-trust-grid{display:grid;grid-template-columns:repeat(4,1fr)}.home-trust article{display:grid;grid-template-columns:48px 1fr;gap:13px;align-items:center;padding:25px 24px;border-right:1px solid #dceae6}.home-trust article:last-child{border:0}.home-trust article>span{display:grid;place-items:center;width:43px;height:43px;border-radius:var(--r-sm);background:#fff;color:var(--brand-teal-dark);font-weight:800;box-shadow:var(--elev-3)}.home-trust article div{display:grid;gap:3px}.home-trust strong{font-size:13px}.home-trust small{color:var(--muted);font-size:10px;line-height:1.4}
.home-new-section{background:#fff}.home-new-message{padding:30px;border-radius:var(--r-md);background:#f2f8f6;color:var(--muted)}.home-product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.home-product-card{overflow:hidden;border:1px solid #dfe9e6;border-radius:var(--r-lg);background:#fff;box-shadow:var(--elev-4);transition:.25s}.home-product-card:hover{transform:translateY(-5px);box-shadow:var(--elev-4)}.home-product-media{position:relative;display:grid;place-items:center;aspect-ratio:1;background:#f5f8f7}.home-product-media>span{position:absolute;z-index:2;top:12px;left:12px;padding:6px 9px;border-radius:999px;background:linear-gradient(115deg,var(--brand-teal),var(--brand-green));color:#fff;font-size:10px;font-weight:800}.home-product-media img{width:100%;height:100%;padding:14px;object-fit:contain}.home-product-media.no-image:after{content:"Slika uskoro";color:var(--muted);font-size:12px}.home-product-media.no-image img{display:none}.home-product-card>div{position:relative;padding:18px}.home-product-card small{color:var(--brand-teal-dark);font-size:10px;font-weight:800}.home-product-card h3{min-height:45px;margin:7px 38px 4px 0;font-size:19px;line-height:1.15}.home-product-card p{margin:0;color:var(--muted);font-size:11px}.home-product-card strong{display:block;margin-top:13px;font-size:18px}.home-product-link{position:absolute;right:16px;bottom:16px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#edf8f5;color:var(--brand-teal-dark);font-size:20px}
.home-branding-section{padding-top:50px;background:#f4faf8}.home-branding-card{display:grid;grid-template-columns:1.05fr .95fr;min-height:480px;overflow:hidden;border-radius:var(--r-lg);background:linear-gradient(125deg,#13252a,#1b3b3a);color:#fff;box-shadow:0 28px 80px rgba(19,52,51,.18)}.home-branding-card>div:first-child{align-self:center;padding:clamp(36px,6vw,78px)}.home-branding-card .eyebrow{color:#61d29a}.home-branding-card h2{max-width:650px;margin:9px 0 22px;font-size:clamp(39px,4.8vw,67px);line-height:.96;letter-spacing:-.06em}.home-branding-card p:not(.eyebrow){max-width:620px;color:#bdd0cc;font-size:16px;line-height:1.7}.home-branding-actions{display:flex;gap:11px;margin-top:30px}.home-branding-actions a{padding:14px 18px;border-radius:var(--r-sm);background:linear-gradient(115deg,var(--brand-teal),var(--brand-green));font-weight:800}.home-branding-actions a:last-child{border:1px solid #52706e;background:transparent}.home-branding-visual{position:relative;min-height:430px;background:radial-gradient(circle at 50% 42%,rgba(68,207,145,.22),transparent 52%)}.home-branding-visual img{position:absolute;width:52%;height:68%;object-fit:contain;border-radius:var(--r-lg);filter:drop-shadow(0 25px 30px rgba(0,0,0,.34))}.home-branding-visual img:first-child{left:4%;top:10%;transform:rotate(-5deg)}.home-branding-visual img:last-child{right:4%;bottom:8%;transform:rotate(6deg)}
.home-collections{background:#f4faf8}.home-collection-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.home-collection-grid a{position:relative;display:flex;min-height:245px;overflow:hidden;flex-direction:column;justify-content:end;padding:25px;border-radius:var(--r-lg);background:linear-gradient(145deg,#fff,#e9f5f1);box-shadow:var(--elev-4);transition:.25s}.home-collection-grid a:before{content:"";position:absolute;width:150px;height:150px;right:-35px;top:-35px;border-radius:50%;background:linear-gradient(135deg,rgba(33,181,201,.22),rgba(97,197,96,.28))}.home-collection-grid a:hover{transform:translateY(-5px)}.home-collection-grid span{color:var(--brand-teal-dark);font-size:10px;font-weight:800;letter-spacing:.12em}.home-collection-grid strong{max-width:190px;margin:9px 0;font-size:27px;line-height:1.05}.home-collection-grid small{color:var(--muted);line-height:1.5}
.home-work-section{background:#fff}.home-work-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.home-work-grid a{position:relative;overflow:hidden;aspect-ratio:.84;border-radius:18px;background:#eef4f2}.home-work-grid img{width:100%;height:100%;object-fit:cover;transition:.4s}.home-work-grid a:hover img{transform:scale(1.035)}.home-work-grid span{position:absolute;left:13px;right:13px;bottom:13px;padding:12px 14px;border-radius:11px;background:rgba(17,27,30,.88);color:#fff;font-size:13px;font-weight:700;backdrop-filter:blur(8px)}
.home-final-cta{padding:68px 0;background:linear-gradient(120deg,#11a9bb,#5ac76a);color:#fff}.home-final-cta>.container{display:flex;align-items:end;justify-content:space-between;gap:35px}.home-final-cta .eyebrow{color:#e8fff2}.home-final-cta h2{max-width:780px;margin:7px 0 0;font-size:clamp(38px,5vw,68px);line-height:.96;letter-spacing:-.06em}.home-final-cta a{display:inline-flex;align-items:center;gap:20px;padding:16px 20px;border-radius:var(--r-sm);background:#fff;color:#17443d;font-weight:800;white-space:nowrap}
@media(max-width:1050px){.home-nav-inner{gap:18px;overflow-x:auto}.home-category-grid{grid-template-columns:repeat(2,1fr)}.home-trust-grid{grid-template-columns:repeat(2,1fr)}.home-trust article:nth-child(2){border-right:0}.home-trust article:nth-child(-n+2){border-bottom:1px solid #dceae6}.home-product-grid{grid-template-columns:repeat(3,1fr)}.home-collection-grid{grid-template-columns:repeat(2,1fr)}.home-branding-card{grid-template-columns:1fr}.home-branding-visual{min-height:380px}.home-work-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.home-header .header-inner{height:auto;min-height:76px;flex-wrap:wrap;padding:10px 0}.home-header .header-search{order:3;width:100%;flex-basis:100%}.home-header .home-catalog-link{display:none}.home-nav{top:126px}.home-nav-inner{min-height:46px}.home-nav a{font-size:11px}.home-hero{padding-top:10px}.home-hero>.container{width:calc(100% - 20px)}.home-hero-carousel{border-radius:var(--r-md)}.home-hero-viewport{aspect-ratio:9/8}.home-hero-slide img{object-fit:cover}.home-hero-arrow{width:38px;height:38px}.home-hero-prev{left:8px}.home-hero-next{right:8px}.home-hero-dots{bottom:9px}.section-pad{padding:52px 0}.home-section-heading{align-items:flex-start;flex-direction:column;gap:15px;margin-bottom:25px}.home-section-heading h1,.home-section-heading h2{font-size:38px}.home-category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.home-category-card,.home-category-card img{min-height:220px}.home-category-card>span{left:15px;bottom:14px}.home-category-card small{font-size:10px}.home-category-card strong{font-size:19px}.home-trust-grid{grid-template-columns:1fr}.home-trust article{border-right:0;border-bottom:1px solid #dceae6!important}.home-trust article:last-child{border-bottom:0!important}.home-product-grid{display:flex;overflow-x:auto;gap:12px;padding-bottom:12px;scroll-snap-type:x mandatory}.home-product-card{flex:0 0 min(78vw,285px);scroll-snap-align:start}.home-branding-card{border-radius:var(--r-lg)}.home-branding-actions{flex-direction:column}.home-branding-actions a{text-align:center}.home-branding-visual{min-height:300px}.home-collection-grid{grid-template-columns:1fr}.home-collection-grid a{min-height:190px}.home-work-grid{grid-template-columns:repeat(2,1fr);gap:10px}.home-final-cta>.container{align-items:flex-start;flex-direction:column}.home-final-cta a{width:100%;justify-content:center}}

.home-product-media.no-image{background:#eef7f4 url("assets/brand/demoshop-icon-transparent-v59.png") center 42%/74px auto no-repeat}.home-product-media.no-image:after{content:"Fotografija trenutno nije dostupna";align-self:end;margin-bottom:27px;color:#657a76;font-size:11px}.home-social-section{background:linear-gradient(145deg,#102126,#183a39);color:#fff}.home-social-heading{display:flex;align-items:end;justify-content:space-between;gap:45px;margin-bottom:32px}.home-social-heading h2{max-width:700px;margin:6px 0 14px;font-size:clamp(38px,4.6vw,65px);line-height:.96;letter-spacing:-.055em}.home-social-heading>div>p:last-child{max-width:650px;margin:0;color:#b8cfca;line-height:1.65}.home-social-actions{display:flex;gap:10px}.home-social-actions>a{display:flex;align-items:center;gap:11px;min-width:172px;padding:12px 15px;border:1px solid #45635f;border-radius:var(--r-md);background:rgba(255,255,255,.06);transition:.25s}.home-social-actions>a:hover{transform:translateY(-3px);background:rgba(255,255,255,.12)}.home-social-actions b{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-sm);color:#fff;font-size:24px}.home-social-actions .instagram b{background:linear-gradient(135deg,#7b35c8,#e64476,#f4a035)}.home-social-actions .facebook b{background:#1877f2;font-family:Arial;font-weight:800}.home-social-actions span{display:grid;font-weight:800}.home-social-actions small{color:#a9c1bc;font-size:10px;font-weight:500}.home-social-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}.home-social-grid a{position:relative;overflow:hidden;aspect-ratio:1;border-radius:14px;background:#263b3c}.home-social-grid img{width:100%;height:100%;object-fit:cover;transition:.35s}.home-social-grid span{position:absolute;right:10px;top:9px;display:grid;place-items:center;width:31px;height:31px;border-radius:9px;background:rgba(10,17,20,.68);font-size:19px;opacity:0;transform:translateY(-5px);transition:.25s}.home-social-grid a:hover img{transform:scale(1.045)}.home-social-grid a:hover span{opacity:1;transform:none}
@media(max-width:1050px){.home-social-heading{align-items:flex-start;flex-direction:column}.home-social-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.home-nav{padding:5px 0}.home-nav-inner{gap:4px;padding:4px;border-radius:var(--r-sm)}.home-nav a{padding:9px 11px}.home-category-card{grid-template-rows:150px 78px;min-height:228px}.home-category-card img{min-height:0!important;padding:8px}.home-category-card>span{left:auto;bottom:auto;padding:11px 13px}.home-category-card strong{font-size:17px}.home-social-actions{width:100%;flex-direction:column}.home-social-actions>a{width:100%}.home-social-grid{grid-template-columns:repeat(2,1fr);gap:7px}.home-social-grid span{opacity:1;transform:none}.home-social-heading h2{font-size:38px}}
.home-category-card{grid-template-rows:235px 80px;height:315px}
@media(max-width:700px){.home-category-card{grid-template-rows:150px 78px;height:228px;min-height:228px}}

/* V79: svetlije kategorije i uredniji društveni blok */
.home-category-card{border-color:#e2ebe9;background:#fff;box-shadow:0 12px 34px rgba(30,72,67,.075)}.home-category-card img{padding:24px;background:radial-gradient(circle at 50% 45%,#fff 0,#f5f9f8 72%)}.home-category-card>span{border-top:1px solid #e3ece9;background:#fff;color:#142d30}.home-category-card small{color:#70827f}.home-category-card b{color:var(--brand-teal-dark)}
.home-branding-visual{margin:28px 28px 28px 0;overflow:hidden;border:1px solid rgba(130,204,187,.2);border-radius:var(--r-lg);background:radial-gradient(circle at 52% 48%,rgba(89,203,154,.18),rgba(14,36,39,.25) 68%)}.home-branding-visual img{border-radius:0;filter:drop-shadow(0 24px 25px rgba(0,0,0,.34))}.home-branding-visual img:first-child{left:3%;top:8%;width:57%;height:82%;transform:rotate(-3deg)}.home-branding-visual img:last-child{right:-1%;bottom:5%;width:57%;height:70%;transform:rotate(9deg)}
.home-social-section{border-top:1px solid #e1ece9;background:linear-gradient(145deg,#f7fbfa,#edf7f4);color:#142d30}.home-social-heading>div>p:last-child{color:#687d79}.home-social-actions>a{border-color:#d8e7e3;background:#fff;box-shadow:0 8px 24px rgba(24,74,67,.06)}.home-social-actions>a:hover{background:#fff;box-shadow:0 15px 30px rgba(24,74,67,.12)}.home-social-actions small{color:#6d817d}.home-social-grid a{border:1px solid #dae7e3;background:#f1f6f4;box-shadow:0 9px 26px rgba(25,70,64,.08)}.home-social-grid img{padding:5px;object-fit:contain;background:#f5f1ee}.home-social-grid span{color:#fff}
@media(max-width:1050px){.home-branding-visual{margin:0 25px 25px;min-height:360px}}
@media(max-width:700px){.home-category-card img{padding:12px}.home-branding-visual{min-height:285px;margin:0 13px 13px}.home-social-grid img{padding:3px}}

/* V80: jedinstvena kompozicija proizvoda bez belih kartica */
.home-branding-visual{isolation:isolate;border-color:rgba(255,255,255,.2);background:#fff}.home-branding-visual:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(220,245,238,.42),transparent 72%);pointer-events:none}.home-branding-visual img{z-index:1;mix-blend-mode:normal;filter:drop-shadow(0 18px 18px rgba(17,53,50,.15));transform:none!important}.home-branding-visual img:first-child{left:2%;top:10%;width:50%;height:80%}.home-branding-visual img:last-child{right:1%;bottom:13%;width:53%;height:58%}
@media(max-width:700px){.home-branding-visual img:first-child{left:1%;top:12%;width:51%;height:75%}.home-branding-visual img:last-child{right:0;bottom:17%;width:54%;height:50%}}
.home-branding-visual img{filter:brightness(1.12) contrast(1.06)}

/* V81: čista DemoShop poruka umesto fotografija proizvoda */
.home-branding-logo{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:22px;padding:clamp(30px,5vw,68px);background:radial-gradient(circle at 50% 43%,#fff 0,#f5fbf9 68%,#e9f5f1 100%)}.home-branding-logo:before{content:none}.home-branding-logo img,.home-branding-logo img:first-child{position:static;width:min(440px,88%);height:auto;max-height:210px;object-fit:contain;filter:none;transform:none!important}.home-branding-logo p{margin:0!important;color:#6b807c!important;font-size:15px!important;letter-spacing:.03em;text-align:center}.home-branding-logo p strong{color:var(--brand-teal-dark);font-weight:800}
@media(max-width:700px){.home-branding-logo{min-height:270px;padding:36px 24px}.home-branding-logo img,.home-branding-logo img:first-child{width:min(290px,88%);height:auto;max-height:145px}}

/* V82: logo bez svetlog panela */
.home-branding-logo{border:0;background:transparent;box-shadow:none}.home-branding-logo img,.home-branding-logo img:first-child{filter:brightness(1.22) contrast(1.04)}.home-branding-logo p{color:#a9c6c0!important}.home-branding-logo p strong{color:#65d99d}
.home-logo-lockup{display:flex;align-items:center;justify-content:center;gap:22px}.home-branding-logo .home-logo-lockup img,.home-branding-logo .home-logo-lockup img:first-child{position:static;width:clamp(105px,11vw,155px);height:clamp(105px,11vw,155px);object-fit:contain;filter:none}.home-logo-lockup span{display:grid;line-height:.78;letter-spacing:-.055em}.home-logo-lockup b{color:#f4f7f6;font-size:clamp(58px,6.2vw,88px);font-weight:800}.home-logo-lockup b:last-child{color:#66d69b}
@media(max-width:700px){.home-logo-lockup{gap:13px}.home-branding-logo .home-logo-lockup img,.home-branding-logo .home-logo-lockup img:first-child{width:88px;height:88px}.home-logo-lockup b{font-size:48px}}

/* ============================================================
   V95 — BATCH 1: TYPOGRAPHY FOUNDATION (homepage)
   Matches the section/page heading scale defined in style.css.
   ============================================================ */
.home-section-heading h1,
.home-section-heading h2,
.home-social-heading h2,
.home-branding-card h2,
.home-final-cta h2{
  font-size:clamp(26px,3vw,38px);
  line-height:1.12;
  letter-spacing:-.02em;
}

/* ============================================================
   V96 — BATCH 1 (completion): TYPOGRAPHY NORMALISATION (home)
   Matches the label, title, price and button rules in style.css.
   No colours, radii, shadows or layout changes.
   ============================================================ */

/* Uppercase micro-labels — same treatment as the rest of the site. */
.home-collection-grid span,
.home-category-card small,
.home-social-actions small{
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  line-height:1.3;
}
.home-category-card small{letter-spacing:.04em;text-transform:none}
.home-social-actions small{letter-spacing:normal;font-weight:500}

/* Product titles: was 19px here vs 17px in the catalogue.
   Now one size everywhere, clamped to two lines. */
.home-product-card h3{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.6em;
  font-size:16px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.005em;
}
.home-product-card p{line-height:1.4}
.home-product-card strong{font-size:17px;font-weight:700}
.home-product-card small{font-weight:600}

/* Buttons and nav links: one weight, no wrapping. */
.home-nav a,
.home-branding-actions a,
.home-final-cta a,
.home-section-heading a{
  font-weight:700;
  white-space:nowrap;
}

/* Homepage nav overflowed the container and was clipped by
   html,body{overflow-x:hidden} — the last items were unreachable
   on phones. Now scrollable, structure unchanged. */
@media(max-width:900px){
  .home-nav-inner{
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .home-nav-inner::-webkit-scrollbar{display:none}
  .home-group-link{margin-left:0!important}
}

/* ============================================================
   V97 — BATCH 2: NAVIGATION & STICKY BEHAVIOUR (homepage)
   Polish only. No typography changes, no new colours, no
   structural or logic changes.
   ============================================================ */

/* Header height unified with every other page (was 82px here, 76px
   everywhere else, so the header jumped 6px on index -> katalog).
   V120.12.8: unification is DESKTOP-ONLY. Written unscoped, this late rule
   (same specificity, later source) beat the ≤700px `height:auto` wrap rule
   above, so the wrapped search row spilled out of the 76px header and sat
   exactly over the home-nav — elementFromPoint on every nav link returned
   the search input, i.e. the whole homepage nav was unclickable on phones. */
@media(min-width:701px){
  .home-header .header-inner{height:76px}
}
.home-nav{
  top:76px;
  box-shadow:var(--elev-3);
}

/* The homepage nav was pinned at top:126px on mobile — an offset that
   assumed a non-sticky header. Now that the header is sticky (and its
   mobile height is variable), a fixed offset cannot be correct, so
   the nav scrolls with the page like the catalogue nav. */
@media(max-width:700px){
  .home-nav{position:relative;top:auto;box-shadow:none}
}

/* Nav link feedback: hover existed, press did not — and :hover never
   fires on touch. */
.home-nav a:active{transform:translateY(1px) scale(.985)}
.home-nav a{transition:background var(--dur-fast,.14s) var(--ease,ease),
                       color var(--dur-fast,.14s) var(--ease,ease),
                       transform var(--dur-fast,.14s) var(--ease,ease)}

/* Carousel dots were 8px targets. The visible dot is unchanged; the
   tappable area around it is now 44px. */
.home-hero-dots{gap:0}
.home-hero-dots button{
  box-sizing:content-box;
  padding:18px 8px;
  background-clip:content-box;
}

/* ============================================================
   V120.12.8 — MOBILE NAV REPAIR (homepage)
   Audit 2026-08-29, measured in the browser at 375/744/1920.

   The ≤900px nav was a horizontal scroll strip (V96) with the
   scrollbar hidden: at 375px its content ran to 695px, so the
   last four links (Tekstil, Naši radovi, Kontakt, Demo Group)
   sat off-screen with no visual affordance that they exist —
   desktop navigation compressed into mobile. Replaced with a
   centered wrap: every link visible, nothing scrolls sideways.
   ≥901px the single row fits (measured min content ≈740px vs
   ≥851px container) and keeps the desktop look.
   ============================================================ */
@media(max-width:900px){
  .home-nav-inner{
    flex-wrap:wrap;
    justify-content:center;
    overflow-x:visible;
    gap:6px;
    padding:6px;
  }
  .home-nav a{flex:none}
}
/* Phone: comfortable touch rows (was 32px tall). */
@media(max-width:700px){
  .home-nav a{
    display:inline-flex;
    align-items:center;
    min-height:40px;
    padding:9px 13px;
  }
}

/* Card feedback made consistent with the catalogue cards. */
.home-product-card:active,
.home-category-card:active,
.home-collection-grid a:active{transform:translateY(0) scale(.99)}
.home-category-card,.home-collection-grid a{
  transition:transform var(--dur,.2s) var(--ease,ease),
             box-shadow var(--dur,.2s) var(--ease,ease),
             border-color var(--dur,.2s) var(--ease,ease);
}

/* Even vertical rhythm inside the homepage product card — the title,
   description and price blocks used 7/4/13px, which read as drift
   rather than a scale. */
.home-product-card>div{padding:18px 18px 20px}
.home-product-card h3{margin:8px 38px 6px 0}
.home-product-card strong{margin-top:12px}

@media(prefers-reduced-motion:reduce){
  .home-nav a:active,.home-product-card:active,
  .home-category-card:active,.home-collection-grid a:active{transform:none}
}

/* ============================================================
   V98 — PRODUCT IMAGE PRESENTATION (homepage)
   Uses the shared product-image tokens from style.css.
   ============================================================ */

/* Homepage product cards were already 1:1 but had no inset, so
   products sat flush against the tile edge. */
.home-product-media img{
  padding:var(--product-inset,6%);
  object-fit:contain;
  object-position:center center;
}

/* Category tiles used a fixed 12px pad regardless of tile size —
   generous on a 2-up mobile tile, tight on a 4-up desktop one. */
.home-category-card img{
  padding:7%;
  object-position:center center;
}

/* ============================================================
   V102 — HOMEPAGE OPENING PANEL (Concept 2)
   First screen only. Uses the approved tokens, type scale and
   card surface treatment — no new visual language.
   ============================================================ */

.home-opening{padding:34px 0 8px}
.home-opening-inner{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:44px;
  align-items:start;
}
.home-opening-copy{min-width:0}
.home-opening-lead{
  max-width:52ch;
  margin:10px 0 0;
  color:var(--text-muted);
  line-height:1.55;
}

/* Compact trust line — supporting information, not a content block. */
.home-trust-line{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin:14px 0 0;
  padding:0;
  list-style:none;
}
.home-trust-line li{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--text);
  font-size:13px;
  font-weight:600;
  line-height:1.4;
}
.home-trust-line li::before{
  content:"";
  flex:0 0 auto;
  width:6px;
  height:6px;
  border-radius:var(--r-pill);
  background:var(--brand);
}

/* Category launcher — the primary homepage action. */
.home-launcher{margin-top:24px}
.home-launcher-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-bottom:10px;
}
.home-launcher-head .eyebrow{margin:0}
.home-launcher-head a{
  color:var(--brand-strong);
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
}
.home-launcher-head a:hover{text-decoration:underline}

.home-launcher-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.home-launcher-tile{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"name arrow" "sub arrow";
  align-items:center;
  gap:0 10px;
  min-height:62px;
  padding:11px 13px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface);
  color:var(--text);
  text-decoration:none;
  transition:border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             background-color var(--dur) var(--ease),
             transform var(--dur-fast) var(--ease);
}
.home-launcher-tile strong{
  grid-area:name;
  min-width:0;
  font-size:14px;
  font-weight:700;
  line-height:1.25;
}
.home-launcher-tile small{
  grid-area:sub;
  min-width:0;
  overflow:hidden;
  color:var(--text-muted);
  font-size:11px;
  font-weight:500;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.home-launcher-tile b{
  grid-area:arrow;
  color:var(--brand-strong);
  font-size:15px;
  font-weight:700;
  transition:transform var(--dur-fast) var(--ease);
}
.home-launcher-tile:hover{
  border-color:var(--brand);
  background:var(--brand-tint-soft);
  box-shadow:var(--elev-2);
}
.home-launcher-tile:hover b{transform:translateX(2px)}
.home-launcher-tile:active{transform:translateY(1px)}

/* Static Demo Group visual — one image, no rotation, no slides.
   The frame is a fixed 4:5 slot: replacing the photograph is a
   single file swap with no layout change. */
.home-opening-visual{margin:0}
.home-opening-visual-frame{
  position:relative;
  display:grid;
  place-items:center;
  gap:12px;
  aspect-ratio:4/5;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--brand-tint-soft);
  box-shadow:var(--elev-2);
}
.home-opening-visual-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
/* Placeholder presentation — active only while the frame holds the
   brand mark instead of a photograph. */
.home-opening-visual-frame img[aria-hidden="true"]{
  width:96px;
  height:96px;
  object-fit:contain;
  opacity:.55;
}
.home-opening-visual-frame figcaption{
  color:var(--text-subtle);
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.home-opening-visual-frame:has(img:not([aria-hidden="true"])) figcaption{display:none}

/* Single static campaign panel — secondary, below the fold. */
.home-campaign-panel{
  display:block;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--surface-2);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.home-campaign-panel img{display:block;width:100%;height:auto}
.home-campaign-panel:hover{border-color:var(--brand);box-shadow:var(--elev-2)}

/* ---- RESPONSIVE ---- */
@media(max-width:1200px){
  .home-opening-inner{gap:32px}
  .home-launcher-grid{gap:9px}
}
@media(max-width:1024px){
  .home-opening-inner{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:26px}
  .home-launcher-tile small{display:none}
  .home-launcher-tile{min-height:52px}
}
@media(max-width:900px){
  .home-opening{padding:24px 0 4px}
  .home-opening-inner{grid-template-columns:minmax(0,1fr);gap:24px}
  .home-opening-visual{order:-1}
  .home-opening-visual-frame{aspect-ratio:16/9}
  .home-launcher-tile small{display:block}
  .home-launcher-tile{min-height:60px}
}
@media(max-width:700px){
  .home-launcher-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-opening-visual-frame{aspect-ratio:3/2}
}
@media(max-width:430px){
  .home-opening-inner{gap:20px}
  .home-trust-line{gap:6px 14px}
  .home-trust-line li{font-size:12px}
  .home-launcher-grid{gap:8px}
  .home-launcher-tile{min-height:56px;padding:10px 11px}
  .home-launcher-tile small{display:none}
}
@media(max-width:360px){
  .home-launcher-grid{grid-template-columns:minmax(0,1fr)}
  .home-launcher-tile{min-height:48px}
}

@media(prefers-reduced-motion:reduce){
  .home-launcher-tile,.home-launcher-tile b,.home-campaign-panel{transition:none}
  .home-launcher-tile:active{transform:none}
  .home-launcher-tile:hover b{transform:none}
}

/* ============================================================
   V104 — TASK 2: HOMEPAGE HERO PANEL
   ============================================================ */

/* The supplied hero is 1717x916 (1.874:1). The placeholder frame was
   4:5 portrait, which would have cropped roughly 60% of the width and
   destroyed the composition. The frame now matches the artwork
   exactly, so the image is shown uncropped, and centres against the
   taller copy column. */
.home-opening-visual-frame{aspect-ratio:1717/916}
.home-opening-visual{align-self:center}

/* ============================================================
   V104 — TASK 3: CATEGORY ICONS ON THE LAUNCHER TILES
   ============================================================ */
.home-launcher-tile{
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"icon name arrow" "icon sub arrow";
  gap:0 11px;
}
.home-launcher-icon{
  grid-area:icon;
  width:28px;
  height:28px;
  flex:none;
}
@media(max-width:1024px){
  .home-launcher-icon{width:24px;height:24px}
}
@media(max-width:430px){
  .home-launcher-icon{width:22px;height:22px}
  .home-launcher-tile{gap:0 9px}
}

/* ============================================================
   V110 — KONTAKT SEKCIJA (početna strana)
   Koristi isključivo postojeće DemoShop tokene: boje, radius,
   senke, spacing i tipografiju. Bez novog vizuelnog sistema.
   ============================================================ */

/* Sticky header (76px) + nav (50px) — da naslov ne završi ispod njih
   kada se dođe preko #kontakt linka. */
.home-contact{scroll-margin-top:140px}

.home-contact-intro{max-width:760px;margin-bottom:28px}
.home-contact-intro h2{
  margin:6px 0 0;
  font-size:clamp(26px,3vw,38px);
  line-height:1.12;
  letter-spacing:-.02em;
}
.home-contact-lead{
  max-width:60ch;
  margin:12px 0 0;
  color:var(--text-muted);
  line-height:1.55;
}

/* --- kartice sa osobama --- */
.home-contact-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.home-contact-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  padding:18px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.home-contact-card:hover{border-color:var(--brand);box-shadow:var(--elev-2)}
.home-contact-name{
  margin:0;
  color:var(--text-muted);
  font-size:12px;
  font-weight:600;
  line-height:1.3;
}
.home-contact-phone{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:48px;          /* tap target */
  color:var(--text);
  font-size:22px;
  font-weight:700;
  letter-spacing:-.01em;
  text-decoration:none;
  font-variant-numeric:tabular-nums;
}
.home-contact-phone span{color:var(--brand-strong);font-size:17px}
.home-contact-phone:hover{color:var(--brand-strong)}
.home-contact-mail{
  display:flex;
  align-items:center;
  min-height:44px;          /* tap target */
  min-width:0;
  overflow:hidden;
  color:var(--brand-strong);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.home-contact-mail:hover{text-decoration:underline}

/* --- opšti podaci --- */
.home-contact-meta{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:14px;
  padding-top:22px;
  border-top:1px solid var(--border);
}
.home-contact-meta-item{min-width:0}
.home-contact-meta-item .eyebrow{margin:0 0 8px}
.home-contact-meta-item address{
  margin:0 0 6px;
  color:var(--text);
  font-size:14px;
  font-style:normal;
  line-height:1.5;
}
.home-contact-meta-item a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:44px;          /* tap target */
  max-width:100%;
  overflow:hidden;
  color:var(--brand-strong);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.home-contact-meta-item a:hover{text-decoration:underline}
.home-contact-social{display:flex;flex-wrap:wrap;gap:0 20px}

/* --- responzivno --- */
@media(max-width:900px){
  .home-contact-grid,.home-contact-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .home-contact-grid,.home-contact-meta{grid-template-columns:minmax(0,1fr)}
  .home-contact-card{padding:16px}
  .home-contact-phone{font-size:21px}
  .home-contact-meta{gap:18px}
}
@media(max-width:360px){
  .home-contact-phone{font-size:19px}
}

@media(prefers-reduced-motion:reduce){
  .home-contact-card{transition:none}
}

/* ============================================================
   V115 — HERO SLAJDER NA POČETNOJ
   Baneri su premešteni iz kataloga na početnu. Slajder je ispod
   navigacije (u toku strane), pa je ne prekriva ni na jednoj
   širini. Autoplay 6s, sa pauzom na hover/fokus.
   ============================================================ */

.home-hero-slider{position:relative}

.home-hero-viewport{
  position:relative;
  aspect-ratio:1470/490;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--surface-2);
}
.home-hero-slide{
  position:absolute;
  inset:0;
  display:block;
  opacity:0;
  visibility:hidden;
  transition:opacity .45s var(--ease,ease);
}
.home-hero-slide.active{opacity:1;visibility:visible}
.home-hero-slide img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;          /* baner je 3:1, kontejner je 3:1 -> bez sečenja */
  object-position:center;
}

.home-hero-arrow{
  position:absolute;
  top:50%;
  z-index:2;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  margin-top:-22px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.92);
  color:var(--text);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.home-hero-arrow-prev{left:12px}
.home-hero-arrow-next{right:12px}
.home-hero-arrow:hover{border-color:var(--brand);background:#fff;color:var(--brand-strong)}
.home-hero-arrow:active{transform:translateY(1px)}

.home-hero-dots{
  display:flex;
  justify-content:center;
  gap:0;
  margin-top:12px;
}
.home-hero-dots button{
  box-sizing:content-box;
  width:8px;
  height:8px;
  padding:14px 5px;
  border:0;
  border-radius:var(--r-pill);
  background:var(--border-strong);
  background-clip:content-box;
  cursor:pointer;
  transition:background var(--dur) var(--ease);
}
.home-hero-dots button[aria-current="true"]{background:var(--brand);background-clip:content-box}
.home-hero-dots button:hover{background:var(--brand-strong);background-clip:content-box}

@media(max-width:700px){
  .home-hero-arrow{width:38px;height:38px;margin-top:-19px;font-size:17px}
  .home-hero-arrow-prev{left:8px}
  .home-hero-arrow-next{right:8px}
}

@media(prefers-reduced-motion:reduce){
  .home-hero-slide{transition:none}
  .home-hero-arrow{transition:none}
  .home-hero-arrow:active{transform:none}
}

/* ================================================================
   V120.11 — "NOVO U PONUDI" KARUSELA (dataset .product-card kartice)
   Horizontalna traka sa scroll-snap (svajp nativno), strelice i
   auto-klizanje su u home.js. Ne dira postojeći .home-product-grid
   (legacy /new-products rezerva koristi iste kartice u ovoj traci).
   ================================================================ */
.home-new-carousel{position:relative}
.home-new-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 14px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
/* V120.11.5: broj vidljivih kartica po sirini — ~5 siroki desktop, 4 desktop,
   2–3 tablet, ~1.2 mobilni; korak = jedna kartica (gap 18px u kalkulaciji). */
.home-new-track .product-card{flex:0 0 calc((100% - 72px)/5);min-width:210px;scroll-snap-align:start;margin:0}
@media(max-width:1359px){.home-new-track .product-card{flex-basis:calc((100% - 54px)/4)}}
@media(max-width:999px){.home-new-track .product-card{flex-basis:calc((100% - 36px)/3);min-width:0}}
@media(max-width:699px){.home-new-track .product-card{flex-basis:calc((100% - 18px)/2.2)}}
@media(max-width:479px){.home-new-track .product-card{flex-basis:82%}}
.home-new-track .home-product-card{flex:0 0 min(280px,78vw);scroll-snap-align:start}
.home-new-track .product-card .card-media{aspect-ratio:1/1;overflow:hidden}
.home-new-track .product-card .card-image{width:100%;height:100%;object-fit:contain}
.home-new-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:42px;height:42px;border-radius:50%;border:1px solid rgba(15,42,56,.14);background:#fff;color:#0f2a38;font-size:22px;line-height:1;cursor:pointer;box-shadow:0 8px 22px rgba(15,42,56,.16);display:flex;align-items:center;justify-content:center;transition:transform .18s ease,box-shadow .18s ease}
.home-new-arrow:hover{transform:translateY(-50%) scale(1.06);box-shadow:0 10px 26px rgba(15,42,56,.22)}
.home-new-arrow-prev{left:-10px}
.home-new-arrow-next{right:-10px}
@media(max-width:900px){.home-new-arrow{display:none}}


/* ============================================================
   V120.12.14 - MOBILNI HERO BANERI (1080x960, 9:8)
   Dedikovana mobilna kreativa se ucitava samo do 700px, preko
   <picture><source media="(max-width:700px)">. Karusel logika,
   redosled slajdova i linkovi se ne diraju.

   (1) <picture> je inline element; slika unutar njega koristi
       height:100%, pa wrapper mora da popuni slajd. Geometrija
       ostaje identicna dosadasnjoj (slika je i ranije popunjavala
       ceo slajd), pa desktop izgled ostaje nepromenjen.

   (2) Postojece pravilo .home-hero-viewport{aspect-ratio:9/8} u
       ranijem @media(max-width:700px) bloku BIVA PREGAZENO kasnijim
       nekondicionalnim pravilom .home-hero-viewport{aspect-ratio:1470/490}
       (ista specificnost, kasniji izvorni red pobedjuje), pa je
       mobilni hero do sada bio 3:1. Ovde se odnos vraca na 9:8
       iskljucivo ispod 700px, uz vecu specificnost (#homeHeroSlider),
       da bi nova 1080x960 kreativa bila prikazana bez isecanja.
       Desktop (>=701px) i dalje koristi 1470/490.
   ============================================================ */

.home-hero-slide picture{display:block;width:100%;height:100%}

@media(max-width:700px){
  #homeHeroSlider .home-hero-viewport{aspect-ratio:9/8}
}

/* ============================================================
   V120.12.15 - MOBILNE TACKE KARUSELA ISPOD BANERA (<=700px)
   Kasniji V115 blok vec definise .home-hero-dots kao static, centriran,
   margin-top:12px. Ali stariji (minifikovani) blok na pocetku fajla i
   dalje isporucuje position:absolute; left:50%; bottom; transform;
   padding; background; border-radius - te osobine V115 blok nikada ne
   redeklarise, pa su tacke ostajale kao providna "pilula" PREKO
   odobrene 9:8 kreative (mereno: 182x50px = donjih 18.8% x srednjih
   51.4% banera).

   Ovde se ponistavaju samo te zaostale osobine, i to iskljucivo ispod
   700px, cime tacke padaju u normalan tok ISPOD okvira slike. Funkcija,
   redosled, aktivno stanje i velicina dodirne mete ostaju netaknuti.
   Desktop (>=701px) zadrzava postojeci overlay - bez izmena.
   ============================================================ */

@media(max-width:700px){
  #homeHeroSlider .home-hero-dots{
    position:static;
    left:auto;
    bottom:auto;
    transform:none;
    z-index:auto;
    padding:0;
    background:none;
    border-radius:0;
    margin-top:10px;
  }
}