:root{--bg:#e1e0dc;--paper:#f8f8f6;--white:#fff;--ink:#171717;--muted:#66645f;--soft:#e3e2df;--brown:#777b80;--brown-dark:#44484d;--brown-light:#b9bec4;--line:#d7d5d0;--radius:4px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:86px}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}.header{height:78px;padding:0 clamp(18px,6vw,88px);display:flex;align-items:center;justify-content:space-between;background:#e1e0dced;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:12px;font-size:12px;line-height:1.25;letter-spacing:1.5px;font-weight:800}.brand-name{font-size:11px;letter-spacing:2px;font-weight:800;color:var(--ink)}.mark{width:56px;height:56px;flex:0 0 56px;border-radius:50%;background:var(--bg);color:var(--ink);border:2px solid #b9b9b6;box-shadow:inset 0 0 0 2px #eeeeec, 0 0 0 1px #d4d4d1;display:grid;place-items:center;font-size:16px;letter-spacing:-.7px;font-weight:800}.header nav{display:flex;align-items:center;gap:28px;font-size:12px;font-weight:700}.header nav a:not(.navbtn):hover,.footer-top:hover{color:var(--brown)}.navbtn{background:var(--brown);color:white;padding:11px 18px;border-radius:3px}.menu{display:none}.hero{min-height:570px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:28px;padding:68px clamp(24px,9vw,140px);background:var(--bg);overflow:hidden}.eyebrow{font-size:10px;font-weight:800;letter-spacing:2.5px;color:var(--brown);margin:0 0 17px}.eyebrow-divider{color:#b9b9b6;padding:0 5px}.hero h1,.section h2,.capsule-section h2{font-weight:800;letter-spacing:-2px;line-height:1.07}.hero h1{font-size:clamp(43px,5.2vw,70px);margin:0 0 22px}.hero h1 span,.section h2 span,.capsule-section h2 span{color:var(--brown)}.lead{font-size:15px;color:#4f4e4a;max-width:490px;line-height:1.85}.price-panel{display:flex;align-items:center;gap:18px;border-left:3px solid var(--brown);padding:6px 0 6px 16px;margin:24px 0 8px}.price-panel span{font-size:12px;color:var(--muted)}.price-panel strong{font-size:27px;letter-spacing:-1px}.actions{display:flex;gap:11px;flex-wrap:wrap;margin:25px 0 14px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:15px;border:1px solid transparent;border-radius:3px;padding:13px 18px;font:700 12px 'DM Sans',sans-serif;cursor:pointer;transition:background .2s,transform .2s}.btn:hover{transform:translateY(-1px)}.primary{background:var(--brown);color:white}.primary:hover{background:var(--brown-dark)}.secondary{border-color:var(--brown);color:var(--brown-dark);background:transparent}.light{background:white;color:var(--brown-dark);margin-top:12px}.fine{font-size:10px;color:#77756f}.hero .hero-price-note{font-size:15px;color:#4f4e4a;line-height:1.85;max-width:490px;margin:8px 0}.hero .hero-location-note{font-size:12px;color:#4f4e4a;line-height:1.75;max-width:490px;margin:0 0 12px}.hero-visual{height:390px;position:relative;display:grid;place-items:center}.visual-circle{position:absolute;width:335px;height:335px;border-radius:50%;background:#e0dfdb;border:1px solid #d0cec8}.machine{position:relative;width:180px;height:265px;z-index:2}.machine-cap{position:absolute;top:0;left:5px;width:170px;height:29px;border-radius:12px 12px 3px 3px;background:#d0cfcb;border:1px solid #bdbbb5}.machine-panel{position:absolute;top:20px;left:17px;width:146px;height:223px;background:linear-gradient(90deg,#deddd9,#fafaf8 45%,#cecdc8);border:1px solid #c4c2bc;border-radius:9px 9px 14px 14px;box-shadow:18px 24px 35px #26221d17}.screen{position:absolute;top:32px;left:39px;width:68px;height:38px;background:#deddd8;border:1px solid #b4b1aa;border-radius:4px}.button-row{position:absolute;top:81px;left:36px;display:flex;gap:9px}.button-row i{width:11px;height:11px;border-radius:50%;background:var(--brown);border:2px solid #f9f9f7}.spout{position:absolute;top:116px;left:62px;width:21px;height:36px;background:linear-gradient(90deg,#99968f,#e2e1dc,#77746e);border-radius:0 0 4px 4px}.drip-tray{position:absolute;top:160px;left:23px;width:100px;height:13px;background:#bcbab4;border:1px solid #a4a19a;border-radius:3px}.visual-label{position:absolute;bottom:8px;right:2%;display:flex;align-items:center;gap:10px;font-size:9px;letter-spacing:1.8px;color:#67645f}.visual-label b{font-size:18px;letter-spacing:-.5px;color:var(--brown)}.info-strip{display:flex;justify-content:center;gap:clamp(20px,6vw,85px);padding:23px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#e7e6e2}.info-strip div{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:700}.info-strip b{font-size:10px;color:var(--brown);letter-spacing:1px}.section{padding:82px clamp(22px,9vw,140px)}.section-heading{text-align:center;max-width:740px;margin:0 auto 40px}.section h2,.capsule-section h2{font-size:clamp(34px,4vw,49px);margin:0 0 16px}.section-heading>p:last-child{color:var(--muted);font-size:13px;line-height:1.9}.model-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.model-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;min-width:0}.model-card.featured{border-color:var(--brown);box-shadow:0 10px 30px #4c392414}.model-art{height:220px;background:#e3e2de;position:relative;display:grid;place-items:center;overflow:hidden}.model-art:before{content:'';position:absolute;width:175px;height:175px;border-radius:50%;background:#d7d5d0}.model-tag{position:absolute;left:13px;top:13px;z-index:3;background:#f8f8f6d9;color:var(--brown-dark);padding:6px 8px;font-size:8px;font-weight:800;letter-spacing:1px}.render-machine{position:relative;z-index:2;width:104px;height:151px;border-radius:10px 10px 8px 8px;background:linear-gradient(90deg,#272727,#4a4946 50%,#242424);box-shadow:13px 18px 22px #25211e24}.render-top{position:absolute;left:-4px;top:-5px;width:112px;height:17px;background:#272725;border-radius:8px 8px 3px 3px}.render-screen{position:absolute;top:26px;left:25px;width:54px;height:24px;background:#161616;border:1px solid #66635d;border-radius:3px}.render-spout{position:absolute;top:61px;left:43px;width:18px;height:29px;background:linear-gradient(90deg,#141414,#8b8881,#171717)}.render-tray{position:absolute;top:96px;left:14px;width:76px;height:9px;background:linear-gradient(#77746d,#292929);border-radius:1px}.m1050{width:105px;height:154px}.mmini{width:97px;height:132px;margin-top:16px}.mmini .render-screen{top:23px}.mmini .render-spout{top:56px}.mmini .render-tray{top:88px}.mmilk{width:115px;height:158px;margin-left:-16px}.mmilk .render-screen{width:59px;left:28px}.milk-unit{position:absolute;right:-30px;top:48px;width:29px;height:72px;border-radius:4px;background:linear-gradient(90deg,#c9c8c3,#f3f2ef,#bcbab5);border:1px solid #aaa8a1}.mcompact{width:111px;height:140px;margin-top:9px}.mcompact .render-screen{top:23px}.mcompact .render-spout{top:56px}.mcompact .render-tray{top:90px}.art-1050{background:#e4e3df}.art-mini{background:#e8e7e3}.art-milk{background:#dfded9}.art-compact{background:#e5e4e0}.model-body{padding:20px 18px 18px;display:flex;flex-direction:column;flex:1}.model-kicker{font-size:9px;letter-spacing:1.8px;font-weight:800;color:var(--brown);margin:0 0 5px}.model-body h3{font-size:20px;letter-spacing:-.5px;margin:0 0 10px}.model-desc{font-size:11px;line-height:1.7;color:var(--muted);min-height:57px;margin:0 0 17px}.monthly{border-top:1px solid var(--line);padding:13px 0 15px;display:flex;flex-direction:column;gap:2px;margin-top:auto}.monthly span{font-size:10px;color:var(--muted)}.monthly strong{font-size:16px;color:var(--brown-dark)}.model-select{width:100%;font-size:10px;padding:12px 9px;background:transparent;color:var(--brown-dark);border-color:#9ca1a7;justify-content:space-between}.model-select:hover{background:#e3e5e7}.source-note{max-width:940px;margin:20px auto 0;color:#74716b;font-size:10px;line-height:1.8}.source-note a{color:var(--brown-dark);text-decoration:underline;text-underline-offset:3px}.capsule-section{background:var(--bg);padding:68px clamp(22px,9vw,140px)}.capsule-inner{max-width:1120px;margin:auto;display:grid;grid-template-columns:1fr .8fr;gap:40px;align-items:center}.capsule-section h2{font-size:clamp(38px,4.8vw,56px)}.capsule-section p:not(.eyebrow){font-size:13px;line-height:1.9;color:#55534e;max-width:540px}.capsule-stack{min-height:230px;position:relative;display:flex;align-items:center;justify-content:center;gap:9px}.capsule-stack i{display:block;width:58px;height:84px;clip-path:polygon(12% 0,88% 0,100% 74%,50% 100%,0 74%);background:linear-gradient(90deg,#5c6065,#c6c9cd,#777b80);box-shadow:0 12px 20px #30251d1c;transform:rotate(-17deg)}.capsule-stack i:nth-child(2){background:linear-gradient(90deg,#30302e,#77756e,#292927);transform:translateY(19px) rotate(5deg)}.capsule-stack i:nth-child(3){background:linear-gradient(90deg,#a1a09b,#e4e3df,#85837d);transform:translateY(-6px) rotate(20deg)}.capsule-stack b{position:absolute;bottom:6px;right:6%;font-size:25px;color:var(--brown-dark);letter-spacing:-1px}.how-section{background:var(--paper)}.steps{max-width:1050px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.steps article{border-top:2px solid var(--brown);padding:21px 22px;background:#f0efec}.steps article>b{font-size:11px;color:var(--brown);letter-spacing:1.5px}.steps h3{font-size:17px;margin:12px 0 7px}.steps p{font-size:12px;color:var(--muted);line-height:1.8;margin:0}.order-section{background:var(--bg)}#order-form{max-width:900px;margin:auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:30px;display:grid;grid-template-columns:1fr 1fr;gap:17px}.field{display:flex;flex-direction:column;gap:7px}.field label{font-size:11px;font-weight:700}.field input,.field select,.field textarea{width:100%;border:1px solid #d2d0ca;background:#fff;color:var(--ink);border-radius:3px;padding:13px;font:12px 'DM Sans',sans-serif}.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid #aeb3b9;outline-offset:1px}.field textarea{resize:vertical}.full{grid-column:1/-1}.consent{display:flex;align-items:flex-start;gap:8px;font-size:10px;color:#66645f}.consent input{margin-top:4px;accent-color:var(--brown)}.form-note{font-size:10px;color:#77756f;margin:0}.form-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.status{font-size:11px;color:var(--brown-dark);margin:0}footer{padding:38px clamp(22px,9vw,140px) 24px;background:var(--bg);color:var(--ink);border-top:1px solid var(--line)}.footer-main{display:flex;align-items:center;gap:28px;flex-wrap:wrap}.footer-main>p{font-size:11px;color:var(--muted);margin-right:auto}.footer-top{font-size:11px;color:var(--brown-dark);font-weight:700}.legal{border-top:1px solid #c9c7c1;padding-top:17px;margin-top:26px;font-size:10px;line-height:1.8;color:#696761}.copyright{font-size:10px;color:#77756f;margin:18px 0 0}
@media(max-width:1000px){.model-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.model-desc{min-height:auto}.hero{padding-left:6vw;padding-right:6vw}.section{padding-left:6vw;padding-right:6vw}.capsule-section{padding-left:6vw;padding-right:6vw}}
@media(max-width:700px){html{scroll-padding-top:72px}.header{height:68px;padding:0 17px}.menu{display:block;border:0;background:none;color:var(--brown-dark);font-size:25px}.header nav{display:none;position:absolute;top:67px;left:0;right:0;background:var(--paper);padding:16px 20px 20px;flex-direction:column;gap:13px;align-items:stretch;border-bottom:1px solid var(--line)}.header nav.open{display:flex}.header nav a{padding:8px}.navbtn{text-align:center}.hero{grid-template-columns:1fr;padding:44px 22px 20px;gap:0}.hero h1{font-size:43px;letter-spacing:-1.6px}.lead{font-size:14px}.hero .hero-price-note{font-size:14px}.hero-visual{height:300px}.visual-circle{width:250px;height:250px}.machine{transform:scale(.84)}.visual-label{bottom:2px;right:3%}.info-strip{display:grid;gap:12px;padding:18px 23px}.section{padding:58px 19px}.section h2{font-size:35px;letter-spacing:-1.3px}.section-heading{margin-bottom:28px}.model-grid{grid-template-columns:1fr;gap:16px}.model-card{display:grid;grid-template-columns:42% 58%}.model-art{height:auto;min-height:260px}.model-art:before{width:135px;height:135px}.model-tag{font-size:7px;left:7px;right:7px;letter-spacing:.6px}.render-machine{transform:scale(.85)}.model-body{padding:17px 14px}.model-body h3{font-size:19px}.model-desc{font-size:10px}.monthly{padding:10px 0 12px}.monthly strong{font-size:14px}.model-select{font-size:9px;gap:4px;padding:10px 8px}.capsule-section{padding:55px 22px}.capsule-inner{grid-template-columns:1fr;gap:10px}.capsule-section h2{font-size:40px}.capsule-stack{min-height:160px}.capsule-stack b{bottom:0;right:8%}.steps{grid-template-columns:1fr;gap:12px}.steps article{padding:18px}.order-section{padding-left:17px;padding-right:17px}#order-form{grid-template-columns:1fr;padding:20px;gap:14px}.full{grid-column:auto}.form-actions{align-items:stretch;flex-direction:column}.form-actions .btn{width:100%}.footer-main{gap:14px}.footer-main>p{flex-basis:100%;margin:0}.footer-top{margin:6px 0}}
@media(max-width:390px){.model-card{grid-template-columns:39% 61%}.model-art{min-height:275px}.model-body{padding:14px 11px}.model-tag{font-size:6px}.model-desc{font-size:9px}.model-select{font-size:8px}.monthly strong{font-size:13px}}


/* ZFK visual identity: bold black letters in a polished silver ring */
.mark{
  border:3px solid transparent;
  background:linear-gradient(var(--bg),var(--bg)) padding-box,
             linear-gradient(135deg,#666a70 0%,#f7f8f9 18%,#aeb3b9 34%,#ffffff 48%,#7b8086 66%,#dfe2e5 82%,#62676d 100%) border-box;
  color:#090909;
  font-weight:900;
  font-size:18px;
  letter-spacing:-1.2px;
  box-shadow:0 1px 3px #00000022,inset 0 0 0 1px #ffffff;
}
.brand-name{letter-spacing:1.5px}
.model-card.featured{border-color:#92979d;box-shadow:0 10px 30px #4c505414}
.model-select{border-color:#9ca1a7}
.model-select:hover{background:#e3e5e7}
.steps article{border-top-color:#777b80}
.price-panel{border-left-color:#777b80}
@media(max-width:700px){.mark{font-size:16px;letter-spacing:-1.1px}}
/* Dodatci za tehničke kartice aparata */
.model-grid-specs{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:22px}
.model-grid-specs .model-art{height:280px;background:#fff;padding:18px}
.model-grid-specs .model-art:before{display:none}
.model-grid-specs .model-art img{display:block;position:relative;z-index:1;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.model-grid-specs .model-body{padding:22px}
.spec-columns{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:4px 0 18px}
.spec-columns section{min-width:0;background:#f1f1ef;border:1px solid #dededb;padding:14px}
.spec-columns h4{margin:0 0 10px;font-size:12px;line-height:1.4;letter-spacing:.2px}
.spec-columns p,.spec-columns li{font-size:11px;line-height:1.7;color:#555550}
.spec-columns p{margin:0 0 9px}
.spec-columns ul{margin:0;padding-left:16px}
.spec-columns li{margin:0 0 4px}
.model-grid-specs .model-desc{min-height:0}
@media(max-width:700px){.model-grid-specs{grid-template-columns:1fr}.model-grid-specs .model-card{display:flex}.model-grid-specs .model-art{height:245px;min-height:245px}.model-grid-specs .model-body{padding:18px}.spec-columns{grid-template-columns:1fr 1fr;gap:10px}.spec-columns section{padding:11px 9px}.spec-columns p,.spec-columns li{font-size:10px}}
@media(max-width:420px){.spec-columns{grid-template-columns:1fr}.spec-columns section{padding:14px}}

/* Placeholder for Inovy Mini product photo until supplied */
.model-grid-specs .photo-pending{position:relative;z-index:1;display:grid;place-items:center;width:100%;height:100%;min-height:220px;background:#f1f1ef;color:#777b80;font-size:12px;font-weight:800;letter-spacing:2px;text-align:center;line-height:1.8;border:1px dashed #c4c6c8}


/* Accessibility refinements */
:where(a, button, input, select, textarea):focus-visible{outline:3px solid #4b535c;outline-offset:3px}
button:disabled{cursor:not-allowed;opacity:.65}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
@media(max-width:700px){.header nav a{min-height:44px;display:flex;align-items:center}.menu{min-width:44px;min-height:44px;display:grid;place-items:center}.model-select{min-height:44px}}


/* ZFK beta visual refresh: real product photography and a balanced three-model catalogue */
.model-grid-specs{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.model-art>img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;padding:22px 28px}
.model-art:has(img):before{width:145px;height:145px;background:#d9d8d4}
.hero-photo{height:430px;min-width:0;border-radius:0;background:transparent;border:0;overflow:hidden}
.hero-photo:before{content:none}
.hero-product-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center;padding:0;filter:drop-shadow(0 24px 20px #24211c20)}
.hero-photo .visual-label{z-index:3;right:20px;bottom:17px;background:#f8f8f6e8;padding:10px 12px;border:1px solid #d7d5d0;letter-spacing:1px}
.hero-photo .visual-label b{font-size:13px;letter-spacing:0}
.model-card .model-art{height:250px}
@media(max-width:1000px){.model-grid-specs{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-photo{height:370px}}
@media(max-width:700px){.model-grid-specs{grid-template-columns:1fr}.model-card .model-art{height:270px}.hero-photo{height:300px;margin-top:8px}.hero-product-image{padding:16px 28px}.hero-photo .visual-label{right:10px;bottom:10px;padding:7px 9px}.hero-photo .visual-label b{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}


/* Product photo galleries: multiple real-world views per model */
.model-grid-specs .model-card .model-art{
  height: 350px;
  padding: 12px;
  display: block;
  overflow: hidden;
  background: var(--bg);
}
.model-grid-specs .model-card .model-art:before{display:none}
.product-gallery{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:minmax(0,1fr) 94px;
  gap:8px;
  width:100%;
  height:100%;
  padding-top:22px;
}
.product-gallery img{
  display:block;
  position:relative;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  object-fit:contain;
  padding:8px;
  background:#f5f5f3;
  border:1px solid #e4e3df;
  border-radius:3px;
  mix-blend-mode:normal;
}
/* Blend only the two specified white-background product photos into the site gray. */
.product-gallery:has(img.blend-bg){
  background:var(--bg);
  isolation:isolate;
}
.product-gallery img.blend-bg{
  background:transparent;
  border-color:var(--bg);
  mix-blend-mode:multiply;
  -webkit-mix-blend-mode:multiply;
}
.product-gallery .gallery-main{grid-column:1/-1}
@media(max-width:1000px){
  .model-grid-specs .model-card .model-art{height:330px}
  .product-gallery{grid-template-rows:minmax(0,1fr) 82px}
}
@media(max-width:700px){
  .model-grid-specs .model-card .model-art{height:330px;min-height:330px}
  .product-gallery{grid-template-rows:minmax(0,1fr) 82px;padding-top:22px}
}
@media(max-width:420px){
  .model-grid-specs .model-card .model-art{height:315px;min-height:315px;padding:9px}
  .product-gallery{grid-template-rows:minmax(0,1fr) 76px;gap:6px}
  .product-gallery img{padding:5px}
}


/* Product-image lightbox and smaller hero headline */
.hero h1{font-size:clamp(38px,4.4vw,60px)}
@media(max-width:700px){.hero h1{font-size:38px;letter-spacing:-1.3px}}
.product-gallery img,.hero-product-image{cursor:zoom-in}
.product-gallery img:focus-visible,.hero-product-image:focus-visible{outline:3px solid #4b535c;outline-offset:3px}
.image-lightbox{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(16,16,16,.88)}
.image-lightbox.open{display:flex}
.image-lightbox img{display:block;max-width:min(98vw,1600px);max-height:92vh;width:auto;height:auto;object-fit:contain;background:#fff;border-radius:4px;box-shadow:0 20px 70px #0006}
.image-lightbox-close{position:absolute;top:16px;right:18px;width:46px;height:46px;border:1px solid #ffffff88;border-radius:50%;background:#202020;color:#fff;font-size:28px;line-height:1;cursor:pointer}
.image-lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:48px;height:64px;border:1px solid #ffffff88;border-radius:6px;background:#202020d9;color:#fff;font-size:44px;line-height:1;cursor:pointer;z-index:2}
.image-lightbox-nav:hover,.image-lightbox-close:hover{background:#343434}
.image-lightbox-previous{left:18px}
.image-lightbox-next{right:18px}
.image-lightbox-nav[hidden]{display:none}
.image-lightbox-caption{position:absolute;bottom:12px;left:20px;right:20px;color:#fff;text-align:center;font-size:12px}
@media(max-width:600px){.image-lightbox{padding:58px 12px 52px}.image-lightbox-nav{width:38px;height:54px;font-size:36px}.image-lightbox-previous{left:8px}.image-lightbox-next{right:8px}.image-lightbox img{max-width:96vw;max-height:82vh}}
body.lightbox-open{overflow:hidden}

/* Lavazza Firma capsule selection */
.capsule-heading{max-width:1120px;margin:0 auto 28px}
.capsule-heading h2{margin:0 0 12px;font-size:clamp(34px,4vw,49px);font-weight:800;letter-spacing:-2px;line-height:1.07}
.capsule-heading h2 span{color:var(--brown)}
.capsule-heading>p:not(.eyebrow){font-size:14px;line-height:1.8;color:#55534e;max-width:640px}
.capsule-gallery{max-width:1120px;margin:32px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.capsule-card{min-width:0;padding:18px;background:#f8f8f6;border:1px solid #d7d5d0;border-radius:4px;display:flex;flex-direction:column;align-items:center;text-align:center}
.capsule-card img{display:block;width:100%;height:190px;object-fit:contain;background:var(--bg);border-radius:3px;cursor:zoom-in}
.capsule-card img:focus-visible{outline:3px solid #4b535c;outline-offset:3px}
.capsule-card h3{font-size:15px;line-height:1.35;margin:16px 0 4px;letter-spacing:-.2px}
.capsule-card p{font-size:12px!important;margin:0;color:#66645f!important}
.capsule-cta{max-width:1120px;margin:28px auto 0}
@media(max-width:760px){.capsule-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.capsule-card{padding:10px}.capsule-card img{height:150px}.capsule-card h3{font-size:13px}}
@media(max-width:420px){.capsule-gallery{grid-template-columns:1fr 1fr}.capsule-card img{height:125px}}


/* Confirmation shown after a successful form redirect */
#success-message.success-message{max-width:900px;margin:-16px auto 24px;padding:18px 20px;border:1px solid #003da5;border-left:5px solid #003da5;background:#eef3ff!important;color:#003da5!important;font-size:24px!important;font-weight:900!important;line-height:1.45;border-radius:3px}
.success-message[hidden]{display:none}


/* Jednako tanak okvir na sva tri modela aparata. */
.model-grid-specs .model-card{border:1px solid #92979d;box-shadow:0 10px 30px #4c505414}


/* Red uppercase Lavazza Firma brand in the hero introduction. */
.lavazza-firma-red{color:#c8102e;font-weight:800;text-transform:uppercase;letter-spacing:.025em}


/* Direct email ordering option below the contact form. */
.email-order-note{max-width:900px;margin:28px auto 0;padding:22px 24px;background:#f8f8f6;border:1px solid #c9c7c1;border-radius:4px}
.email-order-note>p:first-child{margin:0 0 10px;font-weight:800;font-size:16px;color:#292a2c}
.email-copy-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.email-copy-row>a{font-size:17px;font-weight:800;color:#003da5;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.copy-email-btn{border:1px solid #92979d;border-radius:3px;background:#fff;padding:10px 14px;color:#292a2c;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.copy-email-btn:hover{background:#e1e0dc}
.email-order-hint{margin:12px 0 0;color:#5d5b56;font-size:13px;line-height:1.65}
.email-copy-status{margin:8px 0 0;color:#245d36;font-size:13px;font-weight:700}
@media(max-width:520px){.email-order-note{padding:18px 16px}.email-copy-row{align-items:flex-start;flex-direction:column}}


/* Gumbi za odabir modela u Lavazza plavoj boji. */
.model-grid-specs .model-select{background:#003da5;border-color:#003da5;color:#fff}
.model-grid-specs .model-select:hover{background:#002f80;border-color:#002f80;color:#fff}
.model-grid-specs .model-select:focus-visible{outline-color:#003da5}


/* Plavi gumbi za odabir kapsula, usklađeni s gumbima aparata. */
.capsule-select{width:100%;margin-top:16px;background:#003da5;border-color:#003da5;color:#fff;font-size:10px;padding:12px 9px;justify-content:space-between}
.capsule-select:hover{background:#002f80;border-color:#002f80;color:#fff}
.capsule-select:focus-visible{outline-color:#003da5}

/* Prikaz količine kapsula u zasebnom širokom polju. */
#capsules{font-variant-numeric:tabular-nums;letter-spacing:.04em;max-width:100%}

/* Kompaktnije polje broja odabranih paketa kapsula. */
#capsules{width:112px;max-width:112px}

/* Crvena boja označava konačan odabir kapsula (npr. 4/4). */
#capsules.capsule-limit-reached{color:#c62828;border-color:#c62828;background:#fff2f2;font-weight:800}


/* Količina je ispod odabranih vrsta; podebljani nazivi i malo šire polje broja kutija. */
.capsule-selection-field>label{display:block;margin-top:12px;font-weight:800}
.capsule-selection-field>label:first-child{margin-top:0}
#capsules{width:150px;max-width:150px}


/* Keep optional extra-capsule field hidden until an appliance is selected. */
#additional-capsules-field[hidden]{display:none!important}


/* Elegant yes/no choice for optional extra capsules. */
.capsule-choice-fieldset{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;margin:0 0 14px;padding:0;border:0}
.capsule-choice-fieldset legend{width:100%;margin:0 0 10px;padding:0;color:var(--ink);font-size:12px}
.capsule-choice-fieldset label{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:104px;padding:12px 22px;border:1px solid #c4c8cd;border-radius:999px;background:#fff;color:#34373b;font-size:12px;font-weight:800;letter-spacing:.08em;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease}
.capsule-choice-fieldset label:has(input:checked){background:#003da5;border-color:#003da5;color:#fff;box-shadow:0 4px 12px #003da526}
.capsule-choice-fieldset label:has(input:focus-visible){outline:3px solid #4b535c;outline-offset:3px}
.capsule-choice-fieldset input{width:15px;height:15px;margin:0;accent-color:#fff}
#additional-capsules-details{display:flex;flex-direction:column;gap:8px;padding:15px;background:#f1f3f6;border:1px solid #d9dde3;border-radius:6px}
#additional-capsules-details[hidden]{display:none!important}
#additional-capsules-details>label{font-size:11px}
#additional-capsules-details #additional-capsules{max-width:240px;background:#fff}
@media(max-width:520px){.capsule-choice-fieldset{gap:8px}.capsule-choice-fieldset label{flex:1;min-width:0;padding:12px 15px}}

/* Make the additional-capsule continuation action unmistakable when it is shown. */
.capsule-cta #extra-capsules-done{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:16px 22px;background:#c8102e;border:2px solid #c8102e;border-radius:4px;color:#fff;font-size:14px;font-weight:800;line-height:1.5;box-shadow:0 5px 14px #c8102e30;text-align:center}
.capsule-cta #extra-capsules-done:hover{background:#a50d25;border-color:#a50d25;box-shadow:0 7px 18px #c8102e40}
.capsule-cta #extra-capsules-done:focus-visible{outline:3px solid #171717;outline-offset:3px}
#extra-capsules-done[hidden]{display:none!important}

/* Ensure hidden form rows stay hidden despite the .field display rule. */
.field[hidden]{display:none!important}

/* Lavazza Blue label above the capsule selection heading. */
.capsule-heading > .eyebrow{font-size:14px;color:#003da5;font-weight:800}

/* Lavazza blue for the main hero call-to-action only. */
.hero .actions a.btn.primary[href="#ponuda"]{background-color:#003da5!important;border-color:#003da5!important;color:#fff!important}
.hero .actions a.btn.primary[href="#ponuda"]:hover{background-color:#002f80!important;border-color:#002f80!important;color:#fff!important}

/* Match the hero enquiry button to the grey top-right navigation button. */
.hero .actions .btn.secondary{background-color:var(--brown);border-color:var(--brown);color:#fff}
.hero .actions .btn.secondary:hover{background-color:var(--brown-dark);border-color:var(--brown-dark);color:#fff}
.lavazza-blue{color:#003da5;font-weight:800;text-transform:uppercase;letter-spacing:.025em}

/* Subtle, accessible interaction polish for product cards, photos and controls. */
.model-grid-specs .model-card,
.capsule-card{
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.product-gallery img,
.capsule-card img,
.hero-product-image{
  transition:transform .26s ease,filter .26s ease;
}
.btn:active{
  transform:translateY(1px) scale(.985);
}
.btn:focus-visible{
  outline:3px solid #003da5;
  outline-offset:3px;
}
@media(hover:hover) and (pointer:fine){
  .model-grid-specs .model-card:hover,
  .model-grid-specs .model-card:focus-within{
    transform:translateY(-4px);
    box-shadow:0 16px 34px #24282d20;
    border-color:#737a82;
  }
  .capsule-card:hover,
  .capsule-card:focus-within{
    transform:translateY(-3px);
    box-shadow:0 12px 24px #24282d16;
    border-color:#a0a5aa;
  }
  .product-gallery img:hover,
  .capsule-card img:hover,
  .hero-product-image:hover{
    transform:scale(1.025);
    filter:contrast(1.025);
  }
}

@media(max-width:700px){
  .capsule-select,
  .model-select{min-height:48px}
  .field input,
  .field select{min-height:48px}
  .field textarea{min-height:120px}
  /* Machine photos become a swipeable carousel with a small preview of the next image. */
  .model-grid-specs .model-card .model-art{overflow:hidden}
  .product-gallery{
    display:flex;
    align-items:stretch;
    gap:10px;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:2px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:#aeb3b9 transparent;
    padding:22px 2px 8px;
  }
  .product-gallery img,
  .product-gallery .gallery-main{
    flex:0 0 86%;
    width:86%;
    min-width:86%;
    height:100%;
    grid-column:auto;
    scroll-snap-align:center;
    scroll-snap-stop:always;
  }
  .product-gallery img{padding:7px}
  /* The capsule gallery is swipeable left/right instead of shrinking every card. */
  .capsule-gallery{
    display:flex;
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:4px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:#aeb3b9 transparent;
    padding:3px 4px 14px;
    margin:26px 0 0;
  }
  .capsule-card{
    flex:0 0 min(82%,310px);
    min-width:0;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    padding:14px;
  }
  .capsule-card img{height:170px}
  .capsule-card .btn{width:100%;min-height:48px}
}
@media(max-width:420px){
  .product-gallery{gap:8px}
  .product-gallery img,
  .product-gallery .gallery-main{flex-basis:89%;width:89%;min-width:89%}
  .capsule-card{flex-basis:84%;padding:12px}
  .capsule-card img{height:155px}
}

/* Respect visitors who prefer reduced motion. */
@media(prefers-reduced-motion:reduce){
  .model-grid-specs .model-card,
  .capsule-card,
  .product-gallery img,
  .capsule-card img,
  .hero-product-image,
  .btn{transition:none!important}
}

/* Both capsule summary fields expand so every chosen variety and quantity remains visible. */
#capsule-varieties,
#additional-capsule-varieties{
  display:block;
  width:100%;
  min-height:72px;
  height:auto;
  overflow:hidden;
  resize:none;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  line-height:1.55;
  padding:12px 13px;
}
#additional-capsule-varieties{background:#fff;border:1px solid #d2d0ca;border-radius:3px;color:var(--ink);font:12px 'DM Sans',sans-serif}
@media(max-width:700px){
  #capsule-varieties,
  #additional-capsule-varieties{min-height:78px;font-size:13px;line-height:1.6}
}

/* Interactive appliance finder: a quiet, guided experience that fits the existing ZFK design. */
.finder-section{background:#e8e7e3}
.finder-panel{max-width:900px;margin:0 auto;padding:clamp(20px,4vw,38px);background:var(--paper);border:1px solid #ceccc6;border-radius:8px;box-shadow:0 18px 46px #24282d0b}
.finder-progress{display:flex;align-items:center;gap:18px;margin:0 0 28px;color:#5d6268;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.finder-progress-track{height:5px;flex:1;overflow:hidden;border-radius:999px;background:#dedfdf}
.finder-progress-track span{display:block;width:33.333%;height:100%;border-radius:inherit;background:#003da5;transition:width .24s ease}
.finder-step[hidden],.finder-result[hidden]{display:none!important}
.finder-options{margin:0;padding:0;border:0;min-width:0}
.finder-options legend{display:flex;align-items:center;gap:13px;width:100%;margin:0 0 20px;padding:0;color:var(--ink);font-size:clamp(18px,2.5vw,24px);font-weight:800;letter-spacing:-.5px;line-height:1.3}
.finder-question-number{display:inline-grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:50%;background:#003da5;color:#fff;font-size:12px;letter-spacing:0}
.finder-option-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.finder-option{position:relative;display:flex;align-items:flex-start;gap:11px;min-width:0;min-height:114px;padding:18px 15px;border:1px solid #d2d0ca;border-radius:6px;background:#fff;cursor:pointer;transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease}
.finder-option input{flex:0 0 auto;width:17px;height:17px;margin:3px 0 0;accent-color:#003da5}
.finder-option-content{display:flex;flex-direction:column;gap:7px;min-width:0}
.finder-option-content strong{color:#22252a;font-size:13px;line-height:1.4}
.finder-option-content small{color:#6a6c70;font-size:11px;line-height:1.6}
.finder-option:has(input:checked){border-color:#003da5;background:#f0f5ff;box-shadow:0 0 0 1px #003da5 inset}
.finder-option:focus-within{outline:3px solid #003da5;outline-offset:3px}
.finder-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}
.finder-actions .btn{min-height:46px}
.finder-actions-split{justify-content:space-between}
.finder-actions .primary,.finder-result-button{background:#003da5;border-color:#003da5;color:#fff}
.finder-actions .primary:hover,.finder-result-button:hover{background:#002f80;border-color:#002f80}
.finder-status{min-height:0;margin:0;color:#b42332;font-size:12px;font-weight:700}
.finder-status:not(:empty){margin-top:14px}
.finder-result{padding-top:10px}
.finder-result .eyebrow{margin-bottom:10px;color:#003da5}
.finder-recommendation-tag{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:3px;background:#eaf1ff;color:#003da5;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.finder-result h3{margin:12px 0 9px;color:#202226;font-size:clamp(25px,3vw,34px);letter-spacing:-1px;line-height:1.2}
.finder-result-copy{max-width:680px;color:#4f5358;font-size:14px;line-height:1.85}
.finder-result-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;list-style:none;margin:18px 0;padding:0}
.finder-result-facts li{display:flex;align-items:center;min-height:60px;padding:13px;background:#f0efec;border:1px solid #dfddd7;border-radius:4px;color:#34373b;font-size:12px;font-weight:700;line-height:1.55}
.finder-disclaimer{margin:10px 0 0;color:#71716d;font-size:10px;line-height:1.7}
.finder-result-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:21px}
.finder-result-button{min-height:48px}
.finder-restart{min-height:48px}
@media(hover:hover) and (pointer:fine){
  .finder-option:hover{transform:translateY(-2px);border-color:#9ba9c0;box-shadow:0 7px 18px #24282d0d}
}
@media(max-width:760px){
  .finder-section{padding:54px 18px}
  .finder-panel{padding:20px 16px;border-radius:6px}
  .finder-option-grid{grid-template-columns:1fr;gap:9px}
  .finder-option{min-height:0;padding:15px 14px}
  .finder-option-content{gap:4px}
  .finder-option-content strong{font-size:14px}
  .finder-option-content small{font-size:12px}
  .finder-options legend{font-size:19px;align-items:flex-start}
  .finder-progress{margin-bottom:23px}
  .finder-result-facts{grid-template-columns:1fr;gap:7px}
  .finder-result-facts li{min-height:0;padding:11px 13px}
  .finder-result-actions{flex-direction:column}
  .finder-result-actions .btn{width:100%;min-height:48px}
  .finder-actions .btn{min-height:48px}
}
@media(prefers-reduced-motion:reduce){
  .finder-progress-track span,.finder-option{transition:none!important}
}
.finder-result h3:focus{outline:2px solid #003da5;outline-offset:4px}


/* Cinematic homepage: understated photo slideshow and a compact full-width YouTube strip. */
.hero-photo{isolation:isolate;background:var(--bg)}
.hero-photo .hero-slide{
  position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;
  object-fit:cover;object-position:center;opacity:0;visibility:hidden;pointer-events:none;
  transform:scale(1.035);transition:opacity .9s ease,transform 6s linear,visibility .9s;z-index:0;
}
.hero-photo .hero-slide.is-active{
  opacity:1;visibility:visible;pointer-events:auto;transform:scale(1);z-index:1;
}
.hero-slide-overlay{
  position:absolute;z-index:3;left:16px;right:16px;bottom:17px;display:flex;
  justify-content:space-between;align-items:center;gap:12px;color:#181818;
  font-size:9px;font-weight:800;letter-spacing:1.8px;text-shadow:0 1px 6px #fff9;pointer-events:none;
}
.hero-slide-progress{position:absolute;z-index:4;left:0;right:0;bottom:0;height:3px;background:#17171726;overflow:hidden}
.hero-slide-progress span{display:block;width:100%;height:100%;background:#003da5;transform:scaleX(0);transform-origin:left center}
.hero-photo.hero-slideshow-running .hero-slide-progress span{animation:hero-slide-progress 6.2s linear infinite}
@keyframes hero-slide-progress{to{transform:scaleX(1)}}
.hero-slideshow-toggle{
  position:absolute;z-index:5;top:13px;right:13px;width:38px;height:38px;display:grid;place-items:center;
  border:1px solid #ffffffa8;border-radius:50%;background:#f8f8f6d9;color:#171717;
  font:700 14px 'DM Sans',sans-serif;cursor:pointer;backdrop-filter:blur(8px)
}
.hero-slideshow-toggle:hover{background:#fff}
.hero-slideshow-toggle:focus-visible{outline:3px solid #003da5;outline-offset:3px}

/* Sticky background reveal: the image sits behind the edges of the sections above and below. */
.film-section{
  position:relative;z-index:1;height:clamp(360px,62vh,560px);margin-top:-78px;margin-bottom:-92px;
  background:transparent;color:#fff;overflow:visible;isolation:isolate;
}
.film-sticky{
  position:sticky;top:78px;height:min(30vw,430px);min-height:250px;width:100%;
  display:flex;align-items:center;justify-content:center;padding:0;
}
.film-banner{
  display:block;position:relative;width:100%;height:100%;max-height:430px;overflow:hidden;
  background-color:#111;
  background-image:url("https://e-dipsamatic.com/cdn/shop/collections/FIRMA.firma_cialdine_ricreata_new_04_db4c8ede-3869-40ff-8592-207f16eabf27_1200x1200.png?v=1626347133");
  background-repeat:no-repeat;background-position:center;background-size:cover;background-attachment:fixed;
  isolation:isolate;color:#fff;text-decoration:none;outline-offset:-5px;
}
.film-banner:focus-within{outline:3px solid #fff}
.film-banner-image{
  position:absolute;left:0;top:-42%;display:block;width:100%;height:184%;object-fit:cover;
  opacity:0;transform:translate3d(0,var(--film-image-shift,0px),0) scale(1.04);
  will-change:transform;
}
.film-banner-shade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,#10111235,transparent 55%,#10111212);
}
.film-banner-play{
  position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);
  min-width:82px;min-height:82px;padding:18px;border:2px solid #ffffffed;border-radius:50%;
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:#003da5e8;color:#fff;text-decoration:none;box-shadow:0 6px 28px #0005;
  opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease,background .22s ease;
}
.film-banner-play span[aria-hidden="true"]{font-size:21px;line-height:1;color:#fff}
.film-control-label{font:800 11px 'DM Sans',sans-serif;letter-spacing:1px;color:#fff}
.film-banner:hover .film-banner-play,
.film-banner:focus-within .film-banner-play{opacity:1;visibility:visible}
.film-banner-play:hover{background:#0051c8;transform:translate(-50%,-50%) scale(1.06)}
/* The next section slides over the lower edge, creating the layered reveal. */
.how-section{position:relative;z-index:2}
@media(hover:none),(pointer:coarse){
  .film-banner-play{opacity:1;visibility:visible;min-width:68px;min-height:68px}
}
@media(max-width:700px){
  .hero-photo .hero-slide{object-fit:contain;padding:12px 4px}
  .hero-slide-overlay{left:10px;right:10px;bottom:12px;font-size:8px;letter-spacing:1.2px}
  .hero-slideshow-toggle{top:10px;right:10px;width:36px;height:36px}
  .film-section{height:clamp(280px,48vh,390px);margin-top:-42px;margin-bottom:-62px}
  .film-sticky{top:68px;height:min(42vw,300px);min-height:190px}
  .film-banner{height:100%;max-height:300px;background-image:none;background-attachment:scroll}
  .film-banner-image{opacity:1}
  .film-banner-play{left:50%;top:50%;right:auto;bottom:auto;padding:18px;min-width:68px;min-height:68px}
  .film-banner-copy{right:16px;bottom:15px}
  .film-banner-eyebrow{left:16px;top:16px;font-size:8px;letter-spacing:1.3px}
  .film-banner-copy strong{font-size:16px}
  .film-banner-copy small{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  .hero-photo .hero-slide{transition:none;transform:none}
  .hero-photo.hero-slideshow-running .hero-slide-progress span{animation:none}
  .hero-slideshow-toggle{display:none}
  .film-banner-play{transition:none}
}

/* Keep the PLAY control centered on narrow screens too. */
@media(max-width:700px){
  .film-banner-play{left:50%;top:50%;right:auto;bottom:auto;padding:18px;min-width:68px;min-height:68px}
}


/* Satin-aluminium background matched to the silver brushed surface behind the capsule image. */
:root{
  --bg:#c9cdd1;
  --paper:#f5f6f7;
  --soft:#e2e5e8;
  --line:#b9bfc5;
  --muted:#5f666d;
  --brown:#707982;
  --brown-dark:#3e464e;
  --brown-light:#b8bec4;
}
html{background-color:#c9cdd1}
body{
  background-color:#c9cdd1;
  background-image:
    radial-gradient(ellipse at 18% 10%,rgba(255,255,255,.78) 0%,rgba(255,255,255,.30) 19%,rgba(255,255,255,0) 48%),
    radial-gradient(ellipse at 78% 72%,rgba(255,255,255,.24) 0%,rgba(255,255,255,0) 44%),
    linear-gradient(132deg,#b9bec3 0%,#e5e7e9 23%,#c6cbd0 47%,#eef0f1 67%,#c2c7cc 100%),
    repeating-linear-gradient(132deg,rgba(70,78,86,.075) 0,rgba(70,78,86,.075) 1px,rgba(255,255,255,.18) 1px,rgba(255,255,255,.18) 2px,rgba(255,255,255,0) 2px,rgba(255,255,255,0) 4px);
  background-attachment:fixed;
  background-blend-mode:normal,normal,normal,soft-light;
}
.header{
  background:rgba(220,224,228,.86);
  border-bottom-color:rgba(153,160,167,.75);
}
.hero,.capsule-section,.order-section,footer,.finder-section{
  background-color:transparent;
}
.info-strip{background:rgba(239,241,243,.72)}
.how-section{background:rgba(247,248,249,.68)}
.model-art,.art-1050,.art-mini,.art-milk,.art-compact{
  background-color:#d9dde1;
}
.model-art:before{background:#cbd1d6}
.capsule-card,.finder-panel,.model-card,#order-form{
  box-shadow:0 12px 34px rgba(39,47,55,.07);
}
@media(max-width:700px){
  body{background-attachment:scroll}
  .header{background:rgba(220,224,228,.94)}
}


/* Extend the brushed-silver palette consistently across all page sections and content surfaces. */
:root{
  --paper:rgba(237,240,242,.88);
  --soft:#dfe3e6;
  --line:#b9c0c6;
}
.header,
.info-strip,
.how-section,
.finder-section,
.model-card,
.capsule-card,
.finder-panel,
#order-form,
.email-order-note,
#additional-capsules-details,
#additional-capsule-varieties,
.capsule-choice-fieldset label,
.finder-option,
.finder-result-facts li{
  background-color:rgba(211,216,221,.84);
}
.header{background-color:rgba(213,218,223,.9)}
.info-strip{background-color:rgba(222,226,230,.76)}
.how-section{background-color:rgba(230,233,236,.72)}
.finder-section{background-color:transparent}
.model-card,
.capsule-card,
.finder-panel,
#order-form,
.email-order-note{
  border-color:rgba(160,168,176,.65);
  box-shadow:0 12px 34px rgba(39,47,55,.075),inset 0 1px 0 rgba(255,255,255,.36);
}
.capsule-card img,
#additional-capsules-details #additional-capsules,
.image-lightbox img{background-color:#d9dde1}
.capsule-choice-fieldset label:has(input:checked),
.finder-option:has(input:checked){
  background-color:rgba(190,204,219,.94);
}
#additional-capsules-details{background-color:rgba(201,207,213,.88)}
#additional-capsule-varieties{background-color:rgba(213,218,223,.88)}
.finder-option{background-color:rgba(224,228,232,.86)}
.finder-option:has(input:checked){background-color:rgba(194,207,221,.94)}
.finder-result-facts li{background-color:rgba(204,210,216,.78)}
.success-message{background-color:#e3edf3}
.copy-email-btn{background-color:rgba(239,242,244,.92)}
@media(max-width:700px){
  .header{background-color:rgba(213,218,223,.96)}
}


/* Mobile-specific framing for the Lavazza Firma capsule photograph. */
@media(max-width:700px){
  #lavazza-film.film-section{
    height:clamp(230px,68vw,330px);
    margin-top:-30px;
    margin-bottom:-44px;
    overflow:visible;
  }
  #lavazza-film .film-sticky{
    top:68px;
    height:clamp(190px,58vw,270px);
    min-height:0;
    padding:0 10px;
  }
  #lavazza-film .film-banner{
    width:100%;
    height:100%;
    max-height:none;
    background-color:#c9cdd1;
    background-image:none;
    background-attachment:scroll;
  }
  #lavazza-film .film-banner-image{
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    opacity:1;
    transform:none;
    padding:0;
  }
  #lavazza-film .film-banner-shade{
    background:linear-gradient(0deg,rgba(16,17,18,.12),transparent 38%,rgba(16,17,18,.03));
  }
  #lavazza-film .film-banner-play{
    min-width:54px;
    min-height:54px;
    padding:12px;
    border-width:1px;
  }
  #lavazza-film .film-control-label{font-size:9px}
}


/* Keep the former homepage slideshow area empty while preserving its layout space. */
.hero-photo.hero-visual-empty,
.hero-photo.hero-visual-empty:before{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  content:none;
}
.hero-photo.hero-visual-empty{display:block;visibility:visible;min-height:300px}
@media(min-width:1001px){.hero-photo.hero-visual-empty{height:430px;min-height:430px}}
@media(max-width:1000px){.hero-photo.hero-visual-empty{height:370px;min-height:370px}}
@media(max-width:700px){.hero-photo.hero-visual-empty{height:300px;min-height:300px;margin-top:8px}}


/* Homepage hero: use the uploaded Lavazza Firma product image. */
.hero-image-wrap{height:430px;min-width:0;display:flex;align-items:center;justify-content:center;overflow:visible;background:transparent;border:0;box-shadow:none}
.hero-image-wrap:before{content:none!important;display:none!important}
.hero-product-image{display:block;width:100%;height:100%;max-width:100%;object-fit:contain;object-position:center;filter:none;border:0;box-shadow:none}
@media(max-width:1000px){.hero-image-wrap{height:370px}}
@media(max-width:700px){.hero-image-wrap{height:auto;min-height:0;aspect-ratio:1200/611;margin-top:12px;overflow:visible}.hero-product-image{width:100%;height:100%;object-fit:contain}}


/* Let the hero image fill the full right-hand column to the viewport edge. */
.hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;padding-right:0}
.hero-image-wrap{width:100%;height:430px;min-width:0;justify-self:stretch;overflow:hidden;margin-right:0}
.hero-product-image{width:100%;height:100%;max-width:none;object-fit:cover;object-position:center right}
@media(max-width:1000px){.hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-right:0;gap:18px}.hero-image-wrap{height:370px}}
@media(max-width:700px){.hero{grid-template-columns:1fr;padding-right:22px;gap:0}.hero-image-wrap{width:calc(100% + 22px);margin-right:-22px;margin-left:0;height:auto;aspect-ratio:1200/611;overflow:hidden}.hero-product-image{object-fit:contain;object-position:center}}


/* Tighten the hero gap so the image begins immediately beside the copy. */
@media(min-width:1001px){.hero{grid-template-columns:minmax(0,0.88fr) minmax(0,1.12fr);gap:0;padding-right:0}.hero-copy{padding-right:22px}.hero-image-wrap{width:100%;margin-left:0}}
@media(min-width:701px) and (max-width:1000px){.hero{grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:0;padding-right:0}.hero-copy{padding-right:14px}.hero-image-wrap{width:100%;margin-left:0}}


/* Mobile parity: keep every interactive element usable by touch and size PLAY to the screen. */
@media(max-width:700px){
  html{scroll-padding-top:76px;-webkit-text-size-adjust:100%}
  body{overflow-x:hidden}
  .hero{min-width:0;overflow:hidden}
  .hero-copy,.hero-image-wrap{min-width:0}
  .hero-image-wrap{width:calc(100% + 22px);margin-right:-22px;margin-left:0;aspect-ratio:1200/611;height:auto;min-height:0;max-height:none;overflow:hidden}
  .hero-product-image{display:block;width:100%;height:100%;object-fit:contain;object-position:center right;padding:0}
  #lavazza-film.film-section{height:clamp(220px,65vw,340px);margin-top:-24px;margin-bottom:-34px;overflow:visible;touch-action:pan-y}
  #lavazza-film .film-sticky{position:sticky;top:68px;width:100%;height:clamp(180px,55vw,285px);min-height:0;padding:0}
  #lavazza-film .film-banner{width:100%;height:100%;max-height:none;overflow:hidden;touch-action:pan-y}
  #lavazza-film .film-banner-image{width:100%;height:100%;top:0;left:0;object-fit:contain;object-position:center;opacity:1;transform:none;padding:0}
  #lavazza-film .film-banner-play,
  #lavazza-film .film-banner-play:hover{width:clamp(52px,17vw,76px);height:clamp(52px,17vw,76px);min-width:clamp(52px,17vw,76px);min-height:clamp(52px,17vw,76px);padding:8px;border-width:1.5px;gap:3px;flex-direction:column;opacity:1;visibility:visible;transform:translate(-50%,-50%);touch-action:manipulation}
  #lavazza-film .film-banner-play span[aria-hidden="true"]{font-size:clamp(14px,4.4vw,21px);line-height:1}
  #lavazza-film .film-control-label{display:block;font-size:clamp(7px,2.3vw,10px);line-height:1;letter-spacing:.7px}
  .btn,.model-select,.copy-email-btn,.capsule-card button,.finder-actions button{min-height:44px;touch-action:manipulation}
  .model-grid-specs .model-card .model-art{min-width:0}
  .product-gallery img,.capsule-gallery img,.hero-product-image{touch-action:manipulation}
  .image-lightbox{padding:12px;overscroll-behavior:contain}
  .image-lightbox img{max-width:100%;max-height:82dvh;object-fit:contain}
  .image-lightbox-close{width:44px;height:44px;min-width:44px;min-height:44px}
  #order-form input,#order-form select,#order-form textarea{font-size:16px}
  .consent input{width:20px;height:20px;flex:0 0 20px}
}
@media(max-width:390px){
  #lavazza-film .film-banner-play,
  #lavazza-film .film-banner-play:hover{width:54px;height:54px;min-width:54px;min-height:54px;padding:6px}
  #lavazza-film .film-control-label{font-size:7px}
  .hero h1{font-size:clamp(32px,9vw,38px)}
}
@media(hover:none),(pointer:coarse){
  #lavazza-film .film-banner-play{opacity:1;visibility:visible}
  .btn:hover{transform:none}
}


/* High-contrast LAVAZZA FIRMA label at the start of the hero introduction. */
.lavazza-black-banner{display:inline-block;background:#000;color:#fff;padding:.16em .42em;margin:0 .12em .18em 0;font-weight:800;letter-spacing:.035em;line-height:1.2;box-decoration-break:clone;-webkit-box-decoration-break:clone}


/* Mobile polish: center the three-machine hero image and show the full capsule image clearly below it. */
@media(max-width:700px){
  .hero-image-wrap{
    width:calc(100% + 44px);
    margin-left:-22px;
    margin-right:-22px;
    padding:0 12px;
    height:auto;
    min-height:0;
    aspect-ratio:1200/611;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
  .hero-image-wrap .hero-product-image{
    width:100%;
    height:100%;
    max-width:100%;
    object-fit:contain;
    object-position:center center;
    padding:0;
    margin:0 auto;
  }
  /* On phones, prioritize a complete, centered capsule photograph over the desktop sticky/parallax effect. */
  #lavazza-film.film-section{
    height:auto;
    min-height:0;
    margin:10px 0 18px;
    padding:0;
    overflow:visible;
    position:relative;
    touch-action:pan-y;
  }
  #lavazza-film .film-sticky{
    position:relative;
    top:auto;
    width:100%;
    height:auto;
    min-height:0;
    padding:0;
  }
  #lavazza-film .film-banner{
    position:relative;
    width:100%;
    height:auto;
    min-height:0;
    max-height:none;
    aspect-ratio:1/1;
    overflow:hidden;
    background:#c9cdd1;
    background-image:none;
    background-attachment:scroll;
  }
  #lavazza-film .film-banner-image{
    position:absolute;
    display:block;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center center;
    padding:0;
    margin:0;
    opacity:1;
    transform:none;
  }
  #lavazza-film .film-banner-shade{
    background:linear-gradient(0deg,rgba(16,17,18,.10),transparent 35%);
  }
  #lavazza-film .film-banner-play{
    left:50%;
    top:50%;
    right:auto;
    bottom:auto;
    transform:translate(-50%,-50%);
  }
  #lavazza-film .film-banner-play:hover{
    transform:translate(-50%,-50%);
  }
}
@media(max-width:390px){
  #lavazza-film.film-section{margin-top:6px;margin-bottom:14px}
  #lavazza-film .film-banner{aspect-ratio:1/1}
}


/* Mobile refinement requested for the ZFK homepage: centered hero and a compact, wide capsule banner. */
@media(max-width:700px){
  .hero-image-wrap{
    width:100%;
    max-width:100%;
    margin:8px auto 0;
    padding:0;
    aspect-ratio:1200/611;
    height:auto;
    min-height:0;
    display:grid;
    place-items:center;
    overflow:hidden;
  }
  .hero-image-wrap .hero-product-image{
    display:block;
    width:100%;
    height:100%;
    max-width:100%;
    object-fit:contain;
    object-position:50% 50%;
    padding:0;
    margin:0;
  }
  /* Keep the capsule/video strip close to the desktop banner proportions, not a large square block. */
  #lavazza-film.film-section{
    height:auto;
    min-height:0;
    margin:8px 0 18px;
    padding:0;
    overflow:visible;
    position:relative;
  }
  #lavazza-film .film-sticky{
    position:relative;
    top:auto;
    width:100%;
    height:auto;
    min-height:0;
    padding:0;
  }
  #lavazza-film .film-banner{
    position:relative;
    width:100%;
    height:auto;
    min-height:0;
    max-height:210px;
    aspect-ratio:16/7;
    overflow:hidden;
    background:var(--bg);
  }
  #lavazza-film .film-banner-image{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    padding:0;
    margin:0;
    opacity:1;
    transform:none;
  }
  #lavazza-film .film-banner-shade{
    background:linear-gradient(0deg,rgba(16,17,18,.12),transparent 45%);
  }
  #lavazza-film .film-banner-play{
    left:50%;
    top:50%;
    right:auto;
    bottom:auto;
    transform:translate(-50%,-50%);
  }
  #lavazza-film .film-banner-play:hover{
    transform:translate(-50%,-50%);
  }
  .capsule-gallery{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .capsule-card{
    height:100%;
    padding:12px;
    align-items:stretch;
  }
  .capsule-card img{
    width:100%;
    height:clamp(130px,38vw,170px);
    object-fit:contain;
    object-position:center;
    background:#fff;
  }
  .capsule-card h3{min-height:2.7em}
  .capsule-card .btn{width:100%;margin-top:auto}
}
@media(max-width:390px){
  #lavazza-film .film-banner{aspect-ratio:16/7;max-height:175px}
  .capsule-card{padding:9px}
  .capsule-card img{height:128px}
}


/* Mobile refinement: remove excess whitespace around the capsule banner and lift a smaller PLAY control above the capsules. */
@media(max-width:700px){
  .hero-image-wrap{margin-bottom:0}
  #lavazza-film.film-section{
    height:auto;
    min-height:0;
    margin:0;
    padding:0;
    overflow:visible;
  }
  #lavazza-film .film-sticky{
    position:relative;
    top:auto;
    height:auto;
    min-height:0;
    width:100%;
    padding:0;
  }
  #lavazza-film .film-banner{
    width:100%;
    height:auto;
    min-height:0;
    max-height:150px;
    aspect-ratio:16/5;
    margin:0;
    background:var(--bg);
    overflow:hidden;
  }
  #lavazza-film .film-banner-image{
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 52%;
    padding:0;
    margin:0;
    transform:none;
  }
  #lavazza-film .film-banner-play,
  #lavazza-film .film-banner-play:hover{
    top:8px;
    left:50%;
    right:auto;
    bottom:auto;
    width:40px;
    height:40px;
    min-width:40px;
    min-height:40px;
    padding:4px;
    gap:0;
    flex-direction:column;
    border-width:1px;
    transform:translateX(-50%);
    opacity:1;
    visibility:visible;
  }
  #lavazza-film .film-banner-play span[aria-hidden="true"]{
    font-size:14px;
    line-height:1;
  }
  #lavazza-film .film-control-label{
    font-size:6px;
    line-height:1;
    letter-spacing:.4px;
  }
  #lavazza-film .film-banner-shade{
    background:linear-gradient(180deg,rgba(0,0,0,.10),transparent 40%);
  }
  #lavazza-film + #kako-radi{margin-top:0}
}
@media(max-width:390px){
  #lavazza-film .film-banner{max-height:132px}
  #lavazza-film .film-banner-play,
  #lavazza-film .film-banner-play:hover{
    width:36px;height:36px;min-width:36px;min-height:36px;
  }
}


/* Mobile-only: show the PLAY icon without a blue circular button background. */
@media(max-width:700px){
  #lavazza-film .film-banner-play,
  #lavazza-film .film-banner-play:hover,
  #lavazza-film .film-banner-play:focus,
  #lavazza-film .film-banner-play:active{
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    -webkit-box-shadow:none !important;
    color:#fff;
  }
  #lavazza-film .film-banner-play span[aria-hidden="true"]{
    color:#fff;
    text-shadow:0 1px 3px rgba(0,0,0,.75);
  }
}


/* Final mobile PLAY reset: neutralize any inherited button and pseudo-element styling. */
@media (max-width:700px){
  #lavazza-film .film-banner .film-banner-play,
  #lavazza-film .film-banner .film-banner-play:link,
  #lavazza-film .film-banner .film-banner-play:visited,
  #lavazza-film .film-banner .film-banner-play:hover,
  #lavazza-film .film-banner .film-banner-play:focus,
  #lavazza-film .film-banner .film-banner-play:focus-visible,
  #lavazza-film .film-banner .film-banner-play:active{
    appearance:none !important;
    -webkit-appearance:none !important;
    background:none !important;
    background-color:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    -webkit-box-shadow:none !important;
  }
  #lavazza-film .film-banner .film-banner-play::before,
  #lavazza-film .film-banner .film-banner-play::after{
    content:none !important;
    display:none !important;
    background:none !important;
    border:0 !important;
    box-shadow:none !important;
  }
  #lavazza-film .film-banner .film-banner-play span{
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    color:#fff !important;
  }
  #lavazza-film .film-banner .film-banner-play span[aria-hidden="true"]{
    text-shadow:0 1px 3px rgba(0,0,0,.8);
  }
}


/* Mobile PLAY button: Lavazza-blue circle, white triangle, raised 0.5 cm. */
@media(max-width:700px){
  #lavazza-film .film-banner{overflow:visible}
  #lavazza-film .film-banner .film-banner-play,
  #lavazza-film .film-banner .film-banner-play:link,
  #lavazza-film .film-banner .film-banner-play:visited,
  #lavazza-film .film-banner .film-banner-play:hover,
  #lavazza-film .film-banner .film-banner-play:focus,
  #lavazza-film .film-banner .film-banner-play:focus-visible,
  #lavazza-film .film-banner .film-banner-play:active{
    top:-11px !important;
    left:50% !important;
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-direction:row !important;
    background:#005ca9 !important;
    background-color:#005ca9 !important;
    border:0 !important;
    border-radius:50% !important;
    box-shadow:0 2px 6px rgba(0,0,0,.22) !important;
    transform:translateX(-50%) !important;
    overflow:visible !important;
  }
  #lavazza-film .film-banner .film-banner-play span[aria-hidden="true"]{
    display:block !important;
    color:#fff !important;
    font-size:16px !important;
    line-height:1 !important;
    text-shadow:none !important;
    margin-left:2px;
  }
  #lavazza-film .film-banner .film-control-label{display:none !important}
}
@media(max-width:390px){
  #lavazza-film .film-banner .film-banner-play,
  #lavazza-film .film-banner .film-banner-play:hover{width:36px !important;height:36px !important;min-width:36px !important;min-height:36px !important}
}


/* Mobile-first consistency pass: keep the desktop design language while making every section comfortable on phones. */
@media (max-width:700px){
  html,body{max-width:100%;overflow-x:hidden}
  .header{width:100%;gap:10px;padding:0 14px}
  .brand{min-width:0;gap:8px}
  .brand-name{font-size:10px;letter-spacing:1px;white-space:normal;line-height:1.25}
  .menu{flex:0 0 44px}
  .hero{width:100%;min-width:0;padding:32px 18px 10px;gap:0}
  .hero-copy{width:100%;min-width:0}
  .hero h1{font-size:clamp(31px,8.8vw,38px);line-height:1.06;overflow-wrap:anywhere}
  .hero .lead{font-size:14px;line-height:1.7}
  .hero .fine{font-size:13px;line-height:1.65}
  .hero .actions{display:grid;grid-template-columns:1fr;gap:10px}
  .hero .actions .btn{width:100%;min-height:48px;justify-content:center}
  .hero-image-wrap{
    width:100%;max-width:100%;height:auto;min-height:0;max-height:none;
    margin:12px auto 0;padding:0;aspect-ratio:1200/611;
    display:grid;place-items:center;overflow:hidden
  }
  .hero-image-wrap .hero-product-image{
    width:100%;height:100%;max-width:100%;object-fit:contain;
    object-position:center center;padding:0;margin:0
  }
  /* Keep the capsule/video banner compact and centered below the three-machine image. */
  #lavazza-film.film-section{width:100%;height:auto;min-height:0;margin:8px 0 20px;padding:0;overflow:visible}
  #lavazza-film .film-sticky{position:relative;top:auto;width:100%;height:auto;min-height:0;padding:0}
  #lavazza-film .film-banner{width:100%;height:auto;min-height:0;max-height:150px;aspect-ratio:16/5;margin:0;overflow:visible;background:var(--bg)}
  #lavazza-film .film-banner-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 52%;padding:0;margin:0;opacity:1;transform:none}
  #lavazza-film .film-banner-shade{background:linear-gradient(0deg,rgba(16,17,18,.12),transparent 45%)}
  #lavazza-film .film-banner-play{top:-11px!important;left:50%!important;transform:translateX(-50%)!important}
  #lavazza-film .film-banner-play:hover{transform:translateX(-50%)!important}
  .section{padding:44px 17px}
  .section-heading{margin-bottom:22px}
  .section h2,.capsule-heading h2{font-size:clamp(28px,7.5vw,36px);letter-spacing:-1px;line-height:1.12}
  .model-grid-specs{grid-template-columns:minmax(0,1fr);gap:18px}
  .model-grid-specs .model-card{display:flex;flex-direction:column;min-width:0;width:100%}
  .model-grid-specs .model-card .model-art{width:100%;height:280px;min-height:280px;padding:10px;overflow:hidden}
  .product-gallery{display:flex;align-items:stretch;gap:10px;width:100%;height:100%;padding:22px 2px 8px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:2px;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .product-gallery img,.product-gallery .gallery-main{flex:0 0 86%;width:86%;min-width:86%;height:100%;grid-column:auto;scroll-snap-align:center;scroll-snap-stop:always;object-fit:contain}
  .model-grid-specs .model-body{padding:17px}
  .model-body h3{font-size:22px}
  .spec-columns{grid-template-columns:minmax(0,1fr);gap:10px}
  .spec-columns section{padding:14px}
  .spec-columns p,.spec-columns li{font-size:13px;line-height:1.65}
  .spec-columns h4{font-size:13px}
  .monthly{font-size:13px}
  .model-grid-specs .model-select{width:100%;min-height:48px;font-size:13px;justify-content:center}
  /* Capsule cards remain a visible two-column catalogue, rather than a sideways-only slider. */
  .capsule-section{padding:42px 16px}
  .capsule-heading{margin-bottom:18px}
  .capsule-heading>p:not(.eyebrow){font-size:13px;line-height:1.65}
  .capsule-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;max-width:100%;margin:20px 0 0;padding:0;overflow:visible}
  .capsule-card{display:flex;flex-direction:column;align-items:stretch;min-width:0;width:100%;height:100%;padding:10px;scroll-snap-align:none}
  .capsule-card img{width:100%;height:clamp(112px,34vw,165px);object-fit:contain;object-position:center;background:var(--bg)}
  .capsule-card h3{font-size:clamp(12px,3.5vw,14px);line-height:1.35;min-height:2.7em;margin:12px 0 5px;overflow-wrap:anywhere}
  .capsule-card p{font-size:12px!important}
  .capsule-card .btn{width:100%;min-height:46px;margin-top:auto;padding:10px 7px;font-size:10px;justify-content:center}
  .steps{grid-template-columns:minmax(0,1fr);gap:10px}
  .finder-panel{padding:18px 14px}
  .finder-option-grid{grid-template-columns:minmax(0,1fr)}
  .finder-actions,.finder-actions-split{gap:10px}
  .finder-actions .btn,.finder-actions-split .btn{min-height:46px}
  .order-section{padding:42px 14px}
  #order-form{display:grid;grid-template-columns:minmax(0,1fr);gap:13px;padding:16px}
  #order-form .field,#order-form .full{grid-column:1/-1;min-width:0;width:100%}
  #order-form input,#order-form select,#order-form textarea{width:100%;max-width:100%;min-width:0;font-size:16px}
  #order-form .consent{align-items:flex-start;line-height:1.55}
  #order-form .form-actions{display:flex;flex-direction:column;align-items:stretch}
  #order-form .form-actions .btn{width:100%;min-height:48px}
  .email-order-note{margin-top:20px;padding:17px 14px}
  .email-copy-row{align-items:flex-start;flex-direction:column;gap:10px}
  .email-copy-row>a{font-size:16px;overflow-wrap:anywhere}
  footer{padding-left:17px;padding-right:17px}
  .footer-main{display:flex;flex-wrap:wrap;align-items:flex-start}
  .footer-brand{max-width:100%}
  .legal{font-size:11px;line-height:1.65}
}
@media (max-width:390px){
  .brand-name{font-size:9px;letter-spacing:.7px}
  .hero{padding-left:15px;padding-right:15px}
  .hero h1{font-size:clamp(29px,8.5vw,34px)}
  .model-grid-specs .model-card .model-art{height:255px;min-height:255px}
  .capsule-section{padding-left:12px;padding-right:12px}
  .capsule-gallery{gap:8px}
  .capsule-card{padding:8px}
  .capsule-card img{height:clamp(105px,32vw,128px)}
  .capsule-card .btn{font-size:9px}
  #order-form{padding:13px}
}


/* Mobile: place the existing video PLAY control over the first image with the three Firma machines. */
@media (max-width:700px){
  .hero-image-wrap{position:relative}
  .hero-image-wrap .film-banner-play{
    position:absolute!important;
    top:8px!important;
    right:8px!important;
    left:auto!important;
    z-index:10!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    padding:0!important;
    margin:0!important;
    background:#005ca9!important;
    background-color:#005ca9!important;
    color:#fff!important;
    border:0!important;
    border-radius:50%!important;
    box-shadow:0 2px 7px rgba(0,0,0,.25)!important;
    transform:none!important;
    overflow:visible!important;
  }
  .hero-image-wrap .film-banner-play span[aria-hidden="true"]{
    display:block!important;
    color:#fff!important;
    font-size:15px!important;
    line-height:1!important;
    margin-left:2px!important;
  }
  .hero-image-wrap .film-banner-play .film-control-label{display:none!important}
}
@media (max-width:390px){
  .hero-image-wrap .film-banner-play{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important}
}


/* Order steps: bold numbers in the site's main background color. */
.steps article>b{
  display:inline-block;
  color:var(--bg);
  font-size:clamp(28px,3.2vw,38px);
  font-weight:900;
  line-height:1;
  letter-spacing:1px;
  margin-bottom:4px;
}
@media(max-width:700px){
  .steps article>b{font-size:32px}
}


/* Mobile capsule-banner reveal: a restrained overlap plus progressive scroll reveal. */
@media (max-width:700px){
  #lavazza-film.film-section{
    position:relative;
    z-index:2;
    margin-top:-7px;
    margin-bottom:18px;
  }
  #lavazza-film .film-banner{
    border-radius:0 0 12px 12px;
    box-shadow:0 8px 18px rgba(20,28,36,.10);
  }
  #lavazza-film .film-banner-image{
    border-radius:inherit;
  }
}
@supports (animation-timeline:view()){
  @media (max-width:700px) and (prefers-reduced-motion:no-preference){
    #lavazza-film .film-banner-image{
      animation: zfk-capsule-image-reveal linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 30%;
    }
    @keyframes zfk-capsule-image-reveal{
      from{opacity:.78;transform:scale(1.035)}
      to{opacity:1;transform:scale(1)}
    }
  }
}
@media (max-width:700px) and (prefers-reduced-motion:reduce){
  #lavazza-film .film-banner-image{animation:none;transform:none}
}


/* Mobile experiment 2: sticky capsule image with a longer reveal window. */
@media (max-width:700px) and (prefers-reduced-motion:no-preference){
  #lavazza-film.film-section{
    height:clamp(390px,78vh,620px);
    min-height:390px;
    margin:0 0 12px;
    padding:0;
    overflow:visible;
    position:relative;
    z-index:1;
  }
  #lavazza-film .film-sticky{
    position:sticky;
    top:76px;
    width:100%;
    height:clamp(220px,54vw,330px);
    min-height:220px;
    padding:0;
  }
  #lavazza-film .film-banner{
    width:100%;
    height:100%;
    min-height:0;
    max-height:none;
    aspect-ratio:auto;
    overflow:hidden;
    border-radius:10px;
    background:var(--bg);
    box-shadow:0 8px 20px rgba(20,28,36,.12);
  }
  #lavazza-film .film-banner-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    padding:0;
    margin:0;
    opacity:1;
    transform:none;
    animation:none;
  }
  #lavazza-film .film-banner-shade{
    background:linear-gradient(0deg,rgba(16,17,18,.10),transparent 35%);
  }
}
@media (max-width:700px) and (prefers-reduced-motion:reduce){
  #lavazza-film.film-section{
    height:auto;
    min-height:0;
    margin:8px 0 20px;
  }
  #lavazza-film .film-sticky{position:relative;top:auto;height:auto;min-height:0}
  #lavazza-film .film-banner{aspect-ratio:1/1;height:auto}
  #lavazza-film .film-banner-image{object-fit:contain}
}


/* Mobile v3: mirror the desktop sticky-background reveal instead of the compact inline banner. */
@media (max-width:700px) and (prefers-reduced-motion:no-preference){
  #lavazza-film.film-section{
    position:relative;
    z-index:1;
    height:clamp(430px,76svh,620px);
    min-height:430px;
    margin-top:-42px;
    margin-bottom:-58px;
    padding:0;
    overflow:visible;
    isolation:isolate;
  }
  #lavazza-film .film-sticky{
    position:sticky;
    top:68px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:clamp(210px,58vw,330px);
    min-height:210px;
    padding:0;
  }
  #lavazza-film .film-banner{
    position:relative;
    display:block;
    width:100%;
    height:100%;
    max-height:none;
    aspect-ratio:auto;
    overflow:hidden;
    border-radius:0;
    background-color:transparent;
    background-image:none;
    box-shadow:none;
  }
  #lavazza-film .film-banner-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    padding:0;
    margin:0;
    opacity:1;
    transform:none;
    animation:none;
  }
  #lavazza-film .film-banner-shade{
    background:linear-gradient(0deg,rgba(16,17,18,.10),transparent 35%);
  }
  #lavazza-film .film-banner-play{
    top:50%!important;
    left:50%!important;
    right:auto!important;
    bottom:auto!important;
    transform:translate(-50%,-50%)!important;
  }
}
@media (max-width:700px) and (prefers-reduced-motion:reduce){
  #lavazza-film.film-section{
    height:auto;
    min-height:0;
    margin:8px 0 20px;
    padding:0;
  }
  #lavazza-film .film-sticky{position:relative;top:auto;height:auto;min-height:0}
  #lavazza-film .film-banner{height:auto;aspect-ratio:16/5;max-height:150px}
  #lavazza-film .film-banner-image{object-fit:contain}
}


/* Mobile: the capsule banner is intended for desktop view only. */
@media (max-width:700px){
  #lavazza-film.film-section{display:none!important}
}


/* Phone landscape: keep the mobile layout even when the rotated viewport is wide. */
@media (orientation:landscape) and (max-height:520px) and (max-width:950px){
  html{scroll-padding-top:60px}
  .header{height:58px;padding:0 16px}
  .menu{display:grid;min-width:44px;min-height:44px;place-items:center}
  .header nav{
    display:none;position:absolute;top:57px;left:0;right:0;
    background:var(--paper);padding:12px 18px 16px;flex-direction:column;
    gap:8px;align-items:stretch;border-bottom:1px solid var(--line)
  }
  .header nav.open{display:flex}
  .header nav a{min-height:44px;display:flex;align-items:center;padding:8px}
  .navbtn{text-align:center}
  .hero{grid-template-columns:1fr;padding:28px 22px 18px;gap:0;min-height:0}
  .hero h1{font-size:clamp(32px,5vw,42px);letter-spacing:-1.3px}
  .lead,.hero .hero-price-note{font-size:14px}
  .hero-visual{height:clamp(210px,48vh,290px);margin-top:6px}
  .visual-circle{width:min(42vw,235px);height:min(42vw,235px)}
  .hero-photo{height:clamp(210px,48vh,290px);margin-top:6px}
  .hero-product-image{padding:8px 22px;object-fit:contain}
  .hero-photo .visual-label{right:10px;bottom:8px;padding:6px 8px}
  .info-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:16px 20px}
  .section{padding:42px 18px}
  .section-heading{margin-bottom:24px}
  .model-grid-specs{grid-template-columns:1fr}
  .model-grid-specs .model-card{display:flex}
  .model-grid-specs .model-card .model-art{height:300px;min-height:300px}
  .product-gallery{grid-template-rows:minmax(0,1fr) 76px}
  .model-grid-specs .model-body{padding:18px}
  .spec-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .spec-columns section{padding:12px}
  .capsule-section{padding:42px 20px}
  .capsule-inner{grid-template-columns:1fr;gap:10px}
  .capsule-stack{min-height:140px}
  .steps{grid-template-columns:1fr;gap:12px}
  #order-form{grid-template-columns:1fr;padding:20px;gap:14px}
  #order-form .full{grid-column:auto}
  .form-actions{align-items:stretch;flex-direction:column}
  .form-actions .btn{width:100%}
  .footer-main{gap:14px}
  .footer-main>p{flex-basis:100%;margin:0}
  #lavazza-film.film-section{display:none!important}
}


/* Landscape phones: let the three-machine hero image span the full viewport width. */
@media (orientation:landscape) and (max-height:520px) and (max-width:950px){
  .hero{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:14px 0 0;
  }
  .hero-copy{
    width:100%;
    padding:0 22px;
  }
  .hero-photo{
    width:100vw;
    max-width:none;
    height:clamp(250px,calc(100svh - 72px),440px);
    min-height:250px;
    margin:12px 0 0;
    align-self:center;
  }
  .hero-product-image{
    width:100%;
    height:100%;
    padding:0;
    object-fit:contain;
    object-position:center;
  }
}


/* Keep the PLAY button in the portrait position when a phone is rotated to landscape. */
@media (orientation:landscape) and (max-height:520px){
  .hero-image-wrap{position:relative}
  .hero-image-wrap .film-banner-play,
  .hero-image-wrap .film-banner-play:hover,
  .hero-image-wrap .film-banner-play:focus,
  .hero-image-wrap .film-banner-play:focus-visible,
  .hero-image-wrap .film-banner-play:active{
    position:absolute!important;
    top:8px!important;
    right:8px!important;
    left:auto!important;
    bottom:auto!important;
    z-index:10!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    padding:0!important;
    margin:0!important;
    background:#005ca9!important;
    background-color:#005ca9!important;
    color:#fff!important;
    border:0!important;
    border-radius:50%!important;
    box-shadow:0 2px 7px rgba(0,0,0,.25)!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    overflow:visible!important;
    touch-action:manipulation!important;
  }
  .hero-image-wrap .film-banner-play span[aria-hidden="true"]{
    display:block!important;
    color:#fff!important;
    font-size:15px!important;
    line-height:1!important;
    margin-left:2px!important;
  }
  .hero-image-wrap .film-banner-play .film-control-label{display:none!important}
}


/* Landscape phones: always pin PLAY to the top-right of the hero image, matching portrait. */
@media (orientation:landscape) and (max-height:520px){
  .hero-image-wrap{position:relative!important}
  .hero-image-wrap .film-banner-play,
  .hero-image-wrap .film-banner-play:link,
  .hero-image-wrap .film-banner-play:visited,
  .hero-image-wrap .film-banner-play:hover,
  .hero-image-wrap .film-banner-play:focus,
  .hero-image-wrap .film-banner-play:focus-visible,
  .hero-image-wrap .film-banner-play:active{
    position:absolute!important;
    top:8px!important;
    right:27px!important;
    left:auto!important;
    bottom:auto!important;
    z-index:20!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    padding:0!important;
    margin:0!important;
    background:#005ca9!important;
    background-color:#005ca9!important;
    color:#fff!important;
    border:0!important;
    border-radius:50%!important;
    box-shadow:0 2px 7px rgba(0,0,0,.25)!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    overflow:visible!important;
    touch-action:manipulation!important;
  }
  .hero-image-wrap .film-banner-play span[aria-hidden="true"]{
    display:block!important;
    color:#fff!important;
    font-size:15px!important;
    line-height:1!important;
    margin-left:2px!important;
  }
  .hero-image-wrap .film-banner-play .film-control-label{display:none!important}
}


/* Enlarge the three-machine hero image in landscape: keep the full photo visible while reducing side gaps. */
@media (orientation:landscape) and (max-height:520px){
  .hero-photo{
    height:clamp(300px,108svh,500px)!important;
    min-height:300px!important;
  }
  .hero-image-wrap .hero-product-image{
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    object-fit:contain!important;
    object-position:center center!important;
    padding:0!important;
    margin:0!important;
    transform:scale(1.02);
    transform-origin:center center;
  }
}


/* Three-step order cards: black typography and page-matching fills, retaining the existing top rules. */
#kako-radi .section-heading h2,
#kako-radi .section-heading h2 span,
#kako-radi .steps article,
#kako-radi .steps article>b,
#kako-radi .steps article h3,
#kako-radi .steps article p{
  color:#000!important;
}
#kako-radi .steps article{
  background:var(--bg)!important;
}


/* Let the complete three-step section show the site's actual main background, not a pale panel. */
#kako-radi.how-section{
  background:transparent!important;
  background-color:transparent!important;
}
#kako-radi .steps article{
  background:transparent!important;
}


/* Four model cards: keep all four in one desktop row, with readable full-width specifications. */
@media (min-width:1001px){
  .model-grid-specs{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .model-grid-specs .spec-columns{grid-template-columns:1fr;gap:12px}
  .model-grid-specs .model-body{padding:16px}
  .model-grid-specs .model-body h3{font-size:18px}
}
@media (min-width:701px) and (max-width:1000px){.model-grid-specs{grid-template-columns:repeat(2,minmax(0,1fr))}.model-grid-specs .spec-columns{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.model-grid-specs{grid-template-columns:1fr}.model-grid-specs .spec-columns{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.model-grid-specs .spec-columns{grid-template-columns:1fr}}


/* Mobile landscape: make the four-machine hero photo the first, edge-to-edge element. */
@media (max-width: 950px) and (max-height: 600px) and (orientation: landscape) {
  .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 0;
    padding: 0;
  }
  .hero-photo {
    order: -1;
    width: 100vw;
    max-width: 100vw;
    height: min(66vh, 440px);
    min-height: 250px;
    margin: 0 calc(50% - 50vw);
    border-radius: 0;
    overflow: hidden;
  }
  .hero-product-image {
    width: 100%;
    height: 100%;
    max-width: none;
    padding: 0;
    object-fit: cover;
    object-position: center center;
  }
  .hero-copy {
    width: 100%;
    padding: 26px clamp(20px, 5vw, 56px) 30px;
  }
}


/* Mobile: restore the capsule image and reproduce the desktop sticky reveal. */
@media (max-width:700px){
  #lavazza-film.film-section{
    display:block!important;
    position:relative;
    z-index:1;
    height:clamp(430px,78svh,600px);
    min-height:430px;
    margin:0 0 -185px;
    padding:0;
    overflow:visible;
    isolation:isolate;
  }
  #lavazza-film .film-sticky{
    position:sticky;
    top:68px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:clamp(220px,58vw,320px);
    min-height:220px;
    padding:0;
  }
  #lavazza-film .film-banner{
    position:relative;
    display:block;
    width:100%;
    height:100%;
    max-height:none;
    aspect-ratio:auto;
    overflow:hidden;
    border-radius:0;
    background:var(--bg);
    background-image:none;
    box-shadow:none;
  }
  #lavazza-film .film-banner-image{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    padding:0;
    margin:0;
    opacity:1;
    transform:none;
    animation:none;
  }
  #lavazza-film .film-banner-shade{
    background:linear-gradient(0deg,rgba(16,17,18,.10),transparent 35%);
  }
  #kako-radi.how-section{
    position:relative;
    z-index:2;
    margin-top:0;
    background:var(--bg);
    background-color:var(--bg);
    padding-top:58px;
  }
}

/* Landscape phones: keep the capsule sticky reveal enabled, with a shorter image. */
@media (orientation:landscape) and (max-height:520px) and (max-width:950px){
  #lavazza-film.film-section{
    display:block!important;
    height:clamp(330px,82svh,440px);
    min-height:330px;
    margin:0 0 -135px;
  }
  #lavazza-film .film-sticky{
    top:58px;
    height:clamp(170px,42vw,250px);
    min-height:170px;
  }
  #kako-radi.how-section{padding-top:42px}
}


/* Mobile: remove the capsule sticky image; keep the desktop reveal unchanged. */
@media (max-width:700px){
  #lavazza-film.film-section{display:none!important}
}


/* Mobile-first motion: gentle hero parallax and cards that reveal as they enter view. */
@media (max-width:700px) and (orientation:portrait) and (prefers-reduced-motion:no-preference){
  .hero-image-wrap .hero-product-image{
    transform:translate3d(0,var(--mobile-hero-shift,0px),0) scale(1.025);
    will-change:transform;
  }
}
@media (max-width:700px) and (prefers-reduced-motion:no-preference){
  .mobile-reveal{
    opacity:0;
    transform:translate3d(0,14px,0);
    transition:opacity .48s ease,transform .48s cubic-bezier(.2,.7,.2,1);
    transition-delay:var(--mobile-reveal-delay,0ms);
  }
  .mobile-reveal.is-visible{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}
@media (max-width:700px) and (prefers-reduced-motion:reduce){
  .mobile-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .hero-image-wrap .hero-product-image{transform:none!important}
}


/* Four-machine hero image: show the complete photo on landscape phones and shift PLAY slightly left. */
@media (max-width: 950px) and (max-height: 600px) and (orientation: landscape) {
  .hero-photo {
    height: min(66svh, 440px) !important;
    min-height: 250px !important;
    background: #D9DADD !important;
    overflow: hidden !important;
  }
  .hero-image-wrap .hero-product-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    background: #D9DADD !important;
  }
  .hero-image-wrap .film-banner-play,
  .hero-image-wrap .film-banner-play:link,
  .hero-image-wrap .film-banner-play:visited,
  .hero-image-wrap .film-banner-play:hover,
  .hero-image-wrap .film-banner-play:focus,
  .hero-image-wrap .film-banner-play:focus-visible,
  .hero-image-wrap .film-banner-play:active {
    right: 47px !important;
    left: auto !important;
  }
}


/* Landscape hero correction: keep the intro copy first and show the photo full-width below it. */
@media (max-width: 950px) and (max-height: 600px) and (orientation: landscape) {
  .hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
  }
  .hero-copy {
    order: 0 !important;
    width: 100% !important;
    padding: 26px clamp(20px, 5vw, 56px) 24px !important;
  }
  .hero-photo {
    order: 1 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1024 / 684 !important;
    margin: 0 calc(50% - 50vw) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }
  .hero-image-wrap .hero-product-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    background: #D9DADD !important;
  }
}


/* The sticky capsule banner has been removed; retain the video link on the hero image. */
.hero-image-wrap .film-banner-play{
  top:12px;
  right:12px;
  left:auto;
  bottom:auto;
  transform:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#005ca9;
  color:#fff;
  opacity:1;
  visibility:visible;
  box-shadow:0 2px 7px rgba(0,0,0,.25);
}
.hero-image-wrap .film-banner-play span[aria-hidden="true"]{font-size:15px;line-height:1}
.hero-image-wrap .film-banner-play .film-control-label{display:none}


/* Book-like vertical navigation: stop at each main section in both directions.
   Oversized sections remain scrollable internally so product details and the form stay usable. */
html{
  scroll-snap-type:y mandatory;
  scroll-padding-top:78px;
}
main > section{
  scroll-snap-align:start;
  scroll-snap-stop:always;
}
@media(max-width:700px){
  html{scroll-padding-top:68px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-snap-type:y proximity}
}


/* Machine catalogue: give every model the same full-size photo viewport.
   Each gallery image is an equal-width slide instead of a large main image plus tiny thumbnails. */
#ponuda .model-grid-specs .model-card .model-art{
  height:350px;
  min-height:350px;
  padding:0;
  overflow:hidden;
  position:relative;
}
#ponuda .model-grid-specs .model-card .product-gallery{
  display:flex;
  align-items:stretch;
  gap:0;
  width:100%;
  height:100%;
  padding:0;
  margin:0;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:0;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:#aeb3b9 transparent;
}
#ponuda .model-grid-specs .model-card .product-gallery img,
#ponuda .model-grid-specs .model-card .product-gallery .gallery-main{
  display:block;
  flex:0 0 100%;
  width:100%;
  min-width:100%;
  height:100%;
  min-height:100%;
  grid-column:auto;
  padding:0;
  margin:0;
  object-fit:contain;
  object-position:center;
  background:#d9dde1;
  border:0;
  border-radius:0;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}
/* Preserve the intended blending for photos supplied on white backgrounds. */
#ponuda .model-grid-specs .model-card .product-gallery img.blend-bg{
  background:transparent;
  mix-blend-mode:multiply;
  -webkit-mix-blend-mode:multiply;
}
@media(max-width:1000px){
  #ponuda .model-grid-specs .model-card .model-art{height:330px;min-height:330px}
}
@media(max-width:700px){
  #ponuda .model-grid-specs .model-card .model-art{height:300px;min-height:300px;padding:0}
}
@media(max-width:420px){
  #ponuda .model-grid-specs .model-card .model-art{height:285px;min-height:285px;padding:0}
}


/* Photo-frame fill: soft silver-gray tones to blend with the machine photos and page background. */
/* First two cards (MALI FORMAT and KOMPAKTAN): soften the top/bottom letterboxing. */
#ponuda .model-grid-specs .model-card:nth-child(1) .product-gallery img,
#ponuda .model-grid-specs .model-card:nth-child(2) .product-gallery img{
  background:linear-gradient(135deg,#d5d7d8 0%,#e2e2df 38%,#d0d3d5 72%,#dededb 100%) !important;
}
/* Fourth card (LF Inovy & Milk): use the same silver-gray fill at the left/right edges. */
#ponuda .model-grid-specs .model-card:nth-child(4) .product-gallery img{
  background:linear-gradient(135deg,#d5d7d8 0%,#e2e2df 38%,#d0d3d5 72%,#dededb 100%) !important;
}


/* Revised machine photo frames: reduce unused vertical space and control each image's fill. */
#ponuda .model-grid-specs .model-card .model-art{
  height:260px !important;
  min-height:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}
#ponuda .model-grid-specs .model-card .product-gallery{
  height:100% !important;
  min-height:0 !important;
}
/* Match the first three photo frames with a shared soft silver-gray background. */
#ponuda .model-grid-specs .model-card:nth-child(1) .product-gallery,
#ponuda .model-grid-specs .model-card:nth-child(2) .product-gallery,
#ponuda .model-grid-specs .model-card:nth-child(3) .product-gallery{
  background:linear-gradient(135deg,#d5d7d8 0%,#e2e2df 38%,#d0d3d5 72%,#dededb 100%) !important;
}
#ponuda .model-grid-specs .model-card:nth-child(1) .product-gallery img,
#ponuda .model-grid-specs .model-card:nth-child(2) .product-gallery img,
#ponuda .model-grid-specs .model-card:nth-child(3) .product-gallery img{
  background:transparent !important;
}
/* LF Inovy & Milk: black fill appears on the sides where the photo does not cover the frame. */
#ponuda .model-grid-specs .model-card:nth-child(4) .product-gallery,
#ponuda .model-grid-specs .model-card:nth-child(4) .product-gallery img{
  background:#000 !important;
}
@media(max-width:1000px){
  #ponuda .model-grid-specs .model-card .model-art{height:245px !important;min-height:0 !important}
}
@media(max-width:700px){
  #ponuda .model-grid-specs .model-card .model-art{height:235px !important;min-height:0 !important}
}
@media(max-width:420px){
  #ponuda .model-grid-specs .model-card .model-art{height:220px !important;min-height:0 !important}
}


/* Full-bleed machine galleries: fill every photo viewport edge-to-edge without blank side bands. */
#ponuda .model-grid-specs .model-card .model-art{
  height:300px !important;
  min-height:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#d9dadd !important;
}
#ponuda .model-grid-specs .model-card .product-gallery{
  display:flex !important;
  align-items:stretch !important;
  gap:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  background:#d9dadd !important;
}
#ponuda .model-grid-specs .model-card .product-gallery img,
#ponuda .model-grid-specs .model-card .product-gallery .gallery-main{
  display:block !important;
  flex:0 0 100% !important;
  width:100% !important;
  min-width:100% !important;
  height:100% !important;
  min-height:100% !important;
  max-width:none !important;
  padding:0 !important;
  margin:0 !important;
  object-fit:cover !important;
  object-position:center center !important;
  background:#d9dadd !important;
  border:0 !important;
  border-radius:0 !important;
  mix-blend-mode:normal !important;
  -webkit-mix-blend-mode:normal !important;
}
/* Do not put black behind LF Inovy & Milk: its milk unit must remain visible. */
#ponuda .model-grid-specs .model-card:nth-child(4) .product-gallery,
#ponuda .model-grid-specs .model-card:nth-child(4) .product-gallery img,
#ponuda .model-grid-specs .model-card:nth-child(4) .product-gallery .gallery-main{
  background:#d9dadd !important;
}
@media(max-width:1000px){
  #ponuda .model-grid-specs .model-card .model-art{height:285px !important}
}
@media(max-width:700px){
  #ponuda .model-grid-specs .model-card .model-art{height:250px !important}
}
@media(max-width:420px){
  #ponuda .model-grid-specs .model-card .model-art{height:225px !important}
}


/* LF 1150: use visible charcoal tones so the black machine remains distinct. */
#ponuda .model-grid-specs .model-card:nth-child(3) .model-art,
#ponuda .model-grid-specs .model-card:nth-child(3) .product-gallery,
#ponuda .model-grid-specs .model-card:nth-child(3) .product-gallery img{
  background:linear-gradient(135deg,#666666 0%,#4b4b4b 42%,#707070 72%,#555555 100%) !important;
}
#ponuda .model-grid-specs .model-card:nth-child(3) .product-gallery img{
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
  mix-blend-mode:multiply !important;
  -webkit-mix-blend-mode:multiply !important;
}


/* LF 1150 uses two new photos with their own finished black backgrounds. */
#ponuda .model-grid-specs .model-card:nth-child(3) .model-art,
#ponuda .model-grid-specs .model-card:nth-child(3) .product-gallery,
#ponuda .model-grid-specs .model-card:nth-child(3) .product-gallery img{
  background:#000 !important;
}
#ponuda .model-grid-specs .model-card:nth-child(3) .product-gallery img{
  object-fit:cover !important;
  object-position:center center !important;
  transform:none !important;
  mix-blend-mode:normal !important;
  -webkit-mix-blend-mode:normal !important;
}


/* Match the established desktop hover lift on the fourth machine card, LF Inovy & Milk. */
#ponuda .model-grid-specs > .model-card:nth-child(4){
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
@media (hover:hover) and (pointer:fine){
  #ponuda .model-grid-specs > .model-card:nth-child(4):hover,
  #ponuda .model-grid-specs > .model-card:nth-child(4):focus-within{
    transform:translateY(-4px) !important;
    box-shadow:0 16px 34px #24282d20 !important;
    border-color:#737a82 !important;
  }
}


/* Responsive image fit for mobile browsers: show the complete machine instead of cropping it. */
@media (max-width: 700px) {
  #ponuda .model-grid-specs .model-card .model-art {
    height: clamp(220px, 66vw, 285px) !important;
    min-height: 0 !important;
    background: #D9DADD !important;
  }
  #ponuda .model-grid-specs .model-card .product-gallery {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #92979d #D9DADD;
  }
  #ponuda .model-grid-specs .model-card .product-gallery img {
    scroll-snap-align: start;
    object-fit: contain !important;
    object-position: center center !important;
    background: #D9DADD !important;
  }
  .capsule-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(8px, 2.5vw, 12px);
  }
  .capsule-card {
    min-width: 0;
    padding: clamp(7px, 2.5vw, 11px);
  }
  .capsule-card img {
    width: 100%;
    max-width: 100%;
    height: clamp(125px, 38vw, 175px);
    object-fit: contain;
    object-position: center;
    background: #D9DADD;
  }
  .capsule-card .btn {
    width: 100%;
    min-height: 42px;
    padding: 10px 7px;
    white-space: normal;
    line-height: 1.35;
  }
}
@media (max-width: 360px) {
  .capsule-card h3 { font-size: 12px; overflow-wrap: anywhere; }
  .capsule-card p { font-size: 11px !important; }
  .capsule-card .btn { font-size: 9px; }
}


/* Mobile layout correction: preserve image scale and give each section its own responsive frame. */
@media (max-width: 700px) {
  /* The four-machine hero image should use the full available width, without extra inset padding. */
  .hero-photo {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1024 / 684;
    margin-top: 8px;
    overflow: hidden;
  }
  .hero-photo .hero-product-image {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    filter: none !important;
  }

  /* Product photos: do not scale the entire image down; fit the full photo inside its gallery cell. */
  #ponuda .model-grid-specs .model-card .product-gallery img {
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    padding: 4px !important;
  }

  /* Capsule images already have a responsive height; avoid an extra shrink transform. */
  .capsule-card img {
    transform: none !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
}
@media (max-width: 420px) {
  .hero-photo {
    aspect-ratio: 1024 / 684;
  }
  #ponuda .model-grid-specs .model-card .product-gallery img {
    transform: none !important;
    padding: 3px !important;
  }
}


/* Canonical mobile machine-photo layout.
   One rule set replaces the conflicting late overrides; desktop remains unchanged. */
@media (max-width: 700px) {
  #ponuda .model-grid-specs > .model-card:nth-child(1) .model-art,
  #ponuda .model-grid-specs > .model-card:nth-child(2) .model-art,
  #ponuda .model-grid-specs > .model-card:nth-child(3) .model-art,
  #ponuda .model-grid-specs > .model-card:nth-child(4) .model-art {
    height: clamp(300px, 86vw, 360px) !important;
    min-height: 300px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #D9DADD !important;
  }

  #ponuda .model-grid-specs > .model-card:nth-child(1) .product-gallery,
  #ponuda .model-grid-specs > .model-card:nth-child(2) .product-gallery,
  #ponuda .model-grid-specs > .model-card:nth-child(3) .product-gallery,
  #ponuda .model-grid-specs > .model-card:nth-child(4) .product-gallery {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    background: #D9DADD !important;
  }

  #ponuda .model-grid-specs > .model-card:nth-child(1) .product-gallery img,
  #ponuda .model-grid-specs > .model-card:nth-child(2) .product-gallery img,
  #ponuda .model-grid-specs > .model-card:nth-child(3) .product-gallery img,
  #ponuda .model-grid-specs > .model-card:nth-child(4) .product-gallery img {
    box-sizing: border-box !important;
    display: block !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: scale(1.06) !important;
    transform-origin: center center !important;
    background: #D9DADD !important;
    border: 0 !important;
    border-radius: 0 !important;
    mix-blend-mode: normal !important;
    -webkit-mix-blend-mode: normal !important;
  }
}

@media (max-width: 420px) {
  #ponuda .model-grid-specs > .model-card:nth-child(1) .model-art,
  #ponuda .model-grid-specs > .model-card:nth-child(2) .model-art,
  #ponuda .model-grid-specs > .model-card:nth-child(3) .model-art,
  #ponuda .model-grid-specs > .model-card:nth-child(4) .model-art {
    height: 320px !important;
    min-height: 320px !important;
  }
}








/* Mobile-only: keep every machine gallery aligned to the Inovy Mini reference.
   Desktop styles are untouched. No per-machine zoom or blend-mode tricks. */
@media (max-width: 700px) {
  #ponuda .model-grid-specs > .model-card:nth-child(1) .model-art,
  #ponuda .model-grid-specs > .model-card:nth-child(2) .model-art,
  #ponuda .model-grid-specs > .model-card:nth-child(3) .model-art,
  #ponuda .model-grid-specs > .model-card:nth-child(4) .model-art,
  #ponuda .model-grid-specs > .model-card:nth-child(1) .product-gallery,
  #ponuda .model-grid-specs > .model-card:nth-child(2) .product-gallery,
  #ponuda .model-grid-specs > .model-card:nth-child(3) .product-gallery,
  #ponuda .model-grid-specs > .model-card:nth-child(4) .product-gallery {
    background: #D9DADD !important;
  }

  #ponuda .model-grid-specs > .model-card:nth-child(1) .product-gallery img,
  #ponuda .model-grid-specs > .model-card:nth-child(2) .product-gallery img,
  #ponuda .model-grid-specs > .model-card:nth-child(3) .product-gallery img,
  #ponuda .model-grid-specs > .model-card:nth-child(4) .product-gallery img {
    transform: none !important;
    transform-origin: center center !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #D9DADD !important;
    mix-blend-mode: normal !important;
    -webkit-mix-blend-mode: normal !important;
  }
}


/* Black backdrop behind the existing machine photos; keep the photos in the foreground. */
#ponuda .model-grid-specs .model-card .model-art,
#ponuda .model-grid-specs .model-card .product-gallery {
  background: #000 !important;
}
#ponuda .model-grid-specs .model-card .product-gallery img {
  position: relative;
  z-index: 1;
}
/* Preserve the existing gray blending treatment for the two special photos. */
#ponuda .model-grid-specs .model-card .product-gallery:has(img.blend-bg) {
  background: #D9DADD !important;
}

/* Keep the gallery surface black; the photo tiles themselves stay above it. */
#ponuda .model-grid-specs .model-card .product-gallery:has(img.blend-bg) {
  background: #000 !important;
}
#ponuda .model-grid-specs .model-card .product-gallery img.blend-bg {
  background: #D9DADD !important;
  border-color: #D9DADD !important;
  mix-blend-mode: normal !important;
  -webkit-mix-blend-mode: normal !important;
}


/* Machine galleries: full-width photos stacked naturally, with black behind each image.
   Each photo keeps its own aspect ratio; no forced equal-height tiles or cropped machines. */
#ponuda .model-grid-specs .model-card .model-art {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: #000 !important;
}
#ponuda .model-grid-specs .model-card .product-gallery {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: #000 !important;
}
#ponuda .model-grid-specs .model-card .product-gallery img,
#ponuda .model-grid-specs .model-card .product-gallery .gallery-main {
  display: block !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #000 !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  mix-blend-mode: normal !important;
  -webkit-mix-blend-mode: normal !important;
}
#ponuda .model-grid-specs .model-card .model-tag {
  z-index: 3;
}
@media (max-width: 700px) {
  #ponuda .model-grid-specs .model-card .model-art {
    height: auto !important;
    min-height: 0 !important;
  }
  #ponuda .model-grid-specs .model-card .product-gallery img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    object-fit: contain !important;
  }
}


/* Final mobile tuning: the first card keeps the reference scale; later machine cards
   get progressively larger image windows so their photos visually fill the column.
   Different card heights are intentional; the full column width is always used. */
@media (max-width: 700px) {
  #ponuda .model-grid-specs > .model-card:nth-child(1) .model-art { height: 270px !important; }
  #ponuda .model-grid-specs > .model-card:nth-child(2) .model-art { height: 300px !important; }
  #ponuda .model-grid-specs > .model-card:nth-child(3) .model-art { height: 330px !important; }
  #ponuda .model-grid-specs > .model-card:nth-child(4) .model-art { height: 360px !important; }

  #ponuda .model-grid-specs .model-card .model-art {
    position: relative !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
  }
  #ponuda .model-grid-specs .model-card .product-gallery {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #000 !important;
  }
  #ponuda .model-grid-specs .model-card .product-gallery img {
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #000 !important;
    transform: none !important;
  }
}
@media (max-width: 420px) {
  #ponuda .model-grid-specs > .model-card:nth-child(1) .model-art { height: 250px !important; }
  #ponuda .model-grid-specs > .model-card:nth-child(2) .model-art { height: 280px !important; }
  #ponuda .model-grid-specs > .model-card:nth-child(3) .model-art { height: 310px !important; }
  #ponuda .model-grid-specs > .model-card:nth-child(4) .model-art { height: 340px !important; }
}


/* Each mobile photo gets a full-width viewport. Later cards use taller viewports,
   allowing their product photos to appear larger instead of leaving side margins. */
@media (max-width: 700px) {
  #ponuda .model-grid-specs .model-card .product-gallery {
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  #ponuda .model-grid-specs .model-card .product-gallery img {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #000 !important;
  }
}


/* Machine gallery reset: show each new photo at its natural proportions and full card width.
   Avoid fixed-height mobile windows and object-fit:cover, which can crop the machines. */
#ponuda .model-grid-specs .model-card .model-art {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: #000 !important;
}
#ponuda .model-grid-specs .model-card .product-gallery {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: #000 !important;
}
#ponuda .model-grid-specs .model-card .product-gallery img,
#ponuda .model-grid-specs .model-card .product-gallery .gallery-main {
  display: block !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  background: #000 !important;
}
@media (max-width: 700px) {
  #ponuda .model-grid-specs .model-card .model-art,
  #ponuda .model-grid-specs .model-card .product-gallery {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  #ponuda .model-grid-specs .model-card .product-gallery img {
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: contain !important;
  }
}


/* Four appliance cards: show only the primary photo in the card.
   The second photo remains in the gallery DOM and is reachable in the lightbox
   with the left/right arrows after clicking the primary photo. */
#ponuda .model-grid-specs .model-card .model-art {
  height: 300px !important;
  min-height: 300px !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #D9DADD !important;
}
#ponuda .model-grid-specs .model-card .product-gallery {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #D9DADD !important;
}
#ponuda .model-grid-specs .model-card .product-gallery img {
  display: none !important;
}
#ponuda .model-grid-specs .model-card .product-gallery img.gallery-main {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 !important;
  padding: 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #D9DADD !important;
  transform: none !important;
  mix-blend-mode: normal !important;
  -webkit-mix-blend-mode: normal !important;
}
#ponuda .model-grid-specs .model-card .product-gallery img.gallery-main {
  cursor: zoom-in;
}
@media (max-width: 700px) {
  #ponuda .model-grid-specs .model-card .model-art {
    height: 300px !important;
    min-height: 300px !important;
  }
  #ponuda .model-grid-specs .model-card .product-gallery img.gallery-main {
    padding: 8px !important;
  }
}


/* Product labels: keep the background snug around the text instead of stretching across the photo. */
#ponuda .model-grid-specs .model-card .model-tag {
  display: inline-block !important;
  width: fit-content !important;
  max-width: calc(100% - 26px) !important;
  left: 13px !important;
  right: auto !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  padding: 6px 9px !important;
}
@media (max-width: 700px) {
  #ponuda .model-grid-specs .model-card .model-tag {
    left: 8px !important;
    right: auto !important;
    max-width: calc(100% - 16px) !important;
    padding: 6px 8px !important;
  }
}


/* Desktop: restore natural continuous wheel/trackpad scrolling; keep snap only for horizontal image galleries. */
@media (min-width: 701px) {
  html {
    scroll-snap-type: none !important;
  }
  main > section {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
  }
}


/* Blend the six capsule photos with white backgrounds into the site gray.
   Keep all other capsule photos and card styling unchanged. */
#kapsule .capsule-gallery > .capsule-card:nth-child(4) img,
#kapsule .capsule-gallery > .capsule-card:nth-child(5) img,
#kapsule .capsule-gallery > .capsule-card:nth-child(6) img,
#kapsule .capsule-gallery > .capsule-card:nth-child(7) img,
#kapsule .capsule-gallery > .capsule-card:nth-child(8) img,
#kapsule .capsule-gallery > .capsule-card:nth-child(11) img {
  background: var(--bg) !important;
  mix-blend-mode: multiply;
  -webkit-mix-blend-mode: multiply;
}


/* Give every capsule photo the same site-gray image background.
   The six photos that contain white margins blend into that same gray. */
#kapsule .capsule-gallery .capsule-card img {
  background: var(--bg) !important;
}
#kapsule .capsule-gallery > .capsule-card:nth-child(4) img,
#kapsule .capsule-gallery > .capsule-card:nth-child(5) img,
#kapsule .capsule-gallery > .capsule-card:nth-child(6) img,
#kapsule .capsule-gallery > .capsule-card:nth-child(7) img,
#kapsule .capsule-gallery > .capsule-card:nth-child(8) img,
#kapsule .capsule-gallery > .capsule-card:nth-child(11) img {
  mix-blend-mode: multiply !important;
  -webkit-mix-blend-mode: multiply !important;
}


/* Keep the six capsule photos on the same light gray as the first three,
   while avoiding the darkening caused by multiply blending. */
#kapsule .capsule-gallery > .capsule-card:nth-child(4) img,
#kapsule .capsule-gallery > .capsule-card:nth-child(5) img,
#kapsule .capsule-gallery > .capsule-card:nth-child(6) img,
#kapsule .capsule-gallery > .capsule-card:nth-child(7) img,
#kapsule .capsule-gallery > .capsule-card:nth-child(8) img,
#kapsule .capsule-gallery > .capsule-card:nth-child(11) img {
  background: var(--bg) !important;
  mix-blend-mode: darken !important;
  -webkit-mix-blend-mode: darken !important;
}


/* Restore PR #89: use the site's gray background behind all capsule images. */
#kapsule .capsule-gallery .capsule-card img {
  background: var(--bg) !important;
  background-color: var(--bg) !important;
}


/* Enlarge capsule pack photos so they visually fill each card's image frame. */
#kapsule .capsule-gallery .capsule-card .capsule-image-link {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg);
}
#kapsule .capsule-gallery .capsule-card .capsule-image-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none;
  transform-origin: center;
}
@media (max-width: 700px) {
  #kapsule .capsule-gallery .capsule-card .capsule-image-link {
    aspect-ratio: 4 / 3;
  }
  #kapsule .capsule-gallery .capsule-card .capsule-image-link img {
    transform: none;
  }
}


/* Capsule image links use the normal arrow pointer. Show a readable label on hover. */
#kapsule .capsule-image-link {
  position: relative;
  display: block;
  width: 100%;
  cursor: default !important;
  text-align: center;
}
#kapsule .capsule-image-link img {
  cursor: default !important;
}
#kapsule .capsule-hover-label {
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 2;
  transform: translate(-50%, 4px);
  display: inline-block;
  width: max-content;
  max-width: calc(100% - 16px);
  padding: 6px 11px;
  border: 1px solid #c8c9cb;
  border-radius: 3px;
  background: rgba(224, 225, 227, .96);
  color: #111 !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: background-color .18s ease, opacity .18s ease, transform .18s ease, visibility .18s ease;
}
@media (hover: hover) and (pointer: fine) {
  #kapsule .capsule-image-link:hover .capsule-hover-label,
  #kapsule .capsule-image-link:focus-visible .capsule-hover-label {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }
  #kapsule .capsule-image-link:hover .capsule-hover-label {
    background: rgba(190, 192, 195, .98);
    border-color: #aeb0b3;
  }
}
@media (hover: none) {
  #kapsule .capsule-hover-label {
    bottom: 8px;
    font-size: 13px;
  }
}


/* Capsule "Saznaj više": fixed, readable tag in the upper-left corner of every capsule image. */
#kapsule .capsule-image-link .capsule-hover-label {
  left: auto !important;
  right: 8px !important;
  top: 8px !important;
  bottom: auto !important;
  transform: none !important;
  display: inline-block !important;
  width: max-content;
  max-width: calc(100% - 16px);
  padding: 5px 9px;
  background: rgba(224, 225, 227, .97) !important;
  border: 1px solid #c8c9cb !important;
  border-radius: 3px;
  color: #111 !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none;
}


/* Darken the capsule "Saznaj više" label when the pointer is directly over it. */
@media (hover: hover) and (pointer: fine) {
  #kapsule .capsule-image-link .capsule-hover-label {
    pointer-events: auto;
    cursor: default;
    transition: background-color .18s ease, border-color .18s ease;
  }
  #kapsule .capsule-image-link .capsule-hover-label:hover {
    background: #aeb0b3 !important;
    border-color: #85888c !important;
  }
}


/* Capsule cards: replace the text badge with a subtle information icon. */
#kapsule .capsule-image-link .capsule-hover-label {
  width: 30px !important;
  height: 30px !important;
  max-width: none !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  font-size: 0 !important;
  line-height: 1 !important;
  background: rgba(25, 27, 30, .78) !important;
  border: 1px solid rgba(255, 255, 255, .78) !important;
  color: #fff !important;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .18);
  pointer-events: none !important;
  transition: background-color .18s ease, transform .18s ease !important;
}
#kapsule .capsule-image-link .capsule-hover-label::before {
  content: "i";
  display: block;
  font-family: Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}
#kapsule .capsule-image-link img {
  transition: transform .22s ease;
}
@media (hover: hover) and (pointer: fine) {
  #kapsule .capsule-image-link:hover img {
    transform: scale(1.035);
  }
  #kapsule .capsule-image-link:hover .capsule-hover-label,
  #kapsule .capsule-image-link:focus-visible .capsule-hover-label {
    background: rgba(25, 27, 30, .96) !important;
    transform: scale(1.08) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  #kapsule .capsule-image-link img,
  #kapsule .capsule-image-link .capsule-hover-label {
    transition: none !important;
  }
}


/* Remove the former four-machine hero image and let the introduction use the full hero width. */
.hero{grid-template-columns:minmax(0,1fr)!important;min-height:0!important;}
.hero-copy{width:100%;max-width:760px;margin-inline:auto;}


/* Place the uploaded merged-machines image below the complete hero introduction. */
.hero{grid-template-columns:minmax(0,1fr)!important;min-height:0!important;gap:0!important;padding-right:clamp(24px,9vw,140px)!important;}
.hero-copy{width:100%;max-width:900px;margin-inline:auto;}
.hero-machines-below{width:min(100%,1100px);margin:26px auto 0;grid-column:1/-1;min-width:0;}
.hero-machines-below img{display:block;width:100%;height:auto;max-height:610px;object-fit:contain;object-position:center;}
@media(max-width:700px){.hero{padding:32px 18px 22px!important}.hero-machines-below{width:100%;margin-top:18px}.hero-machines-below img{width:100%;height:auto;object-fit:contain}}


/* Two-model offer: LB 300 and LB 1200 only. */
.model-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  max-width: 1120px;
  margin-inline: auto;
}
.model-grid-two .model-card {
  min-width: 0;
}
.model-grid-two .product-gallery img {
  cursor: zoom-in;
}
@media (max-width: 700px) {
  .model-grid-two {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}


/* PR: maximize the two model photos under “Odaberite svoj aparat”.
   Keep both columns equal on desktop, show the full machine without cropping,
   and give the stacked mobile card a larger image area. */
#ponuda .model-grid-two .model-card .model-art {
  height: clamp(480px, 48vw, 680px) !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
#ponuda .model-grid-two .model-card .product-gallery {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}
#ponuda .model-grid-two .model-card .product-gallery img.gallery-main {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
}
@media (max-width: 700px) {
  #ponuda .model-grid-two .model-card .model-art {
    height: min(145vw, 620px) !important;
    min-height: 420px !important;
  }
  #ponuda .model-grid-two .model-card .product-gallery img.gallery-main {
    padding: 0 !important;
  }
}


/* PR: enlarge the LB 300 Mini photo so the machine appears comparable in visual size to the LB 1200. */
#ponuda .model-grid-two .model-card:first-child .product-gallery img.gallery-main {
  transform: scale(1.3) !important;
  transform-origin: center center !important;
}


/* PR: widen the LB 1200 column and enlarge its photo to match the visual size of LB 300 Mini.
   Keep a single full-width column on mobile. */
@media (min-width: 701px) {
  #ponuda .model-grid-two {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) !important;
  }
  #ponuda .model-grid-two .model-card:nth-child(2) .product-gallery img.gallery-main {
    transform: scale(1.15) !important;
    transform-origin: center center !important;
  }
}


/* Balance the LB 300 Mini and LB 1200 photo canvases on desktop.
   Widen the left column to match the right and slightly enlarge the LB 300 image.
   Keep the mobile layout stacked and unchanged. */
@media (min-width: 701px) {
  #ponuda .model-grid-two {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  #ponuda .model-grid-two .model-card:first-child .product-gallery img.gallery-main {
    transform: scale(1.4) !important;
    transform-origin: center center !important;
  }
  #ponuda .model-grid-two .model-card:nth-child(2) .product-gallery img.gallery-main {
    transform: scale(1.25) !important;
    transform-origin: center center !important;
  }
}


/* Follow-up: double the LB 300 Mini column width and photo scale on desktop.
   Preserve the current LB 1200 photo size and the stacked mobile layout. */
@media (min-width: 701px) {
  #ponuda .model-grid-two {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
  }
  #ponuda .model-grid-two .model-card:first-child .product-gallery img.gallery-main {
    transform: scale(2.8) !important;
    transform-origin: center center !important;
  }
}


/* Equal 50/50 machine cards with matching 768px desktop photo frames.
   Reset the previous 2:1 column split and the oversized LB 300 transform;
   contain both machines at the same display height without cropping. */
@media (min-width: 701px) {
  #ponuda .model-grid-two {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    max-width: 1120px !important;
    width: 100% !important;
  }
  #ponuda .model-grid-two .model-card .model-art {
    height: 768px !important;
    min-height: 768px !important;
  }
  #ponuda .model-grid-two .model-card .product-gallery {
    height: 100% !important;
  }
  #ponuda .model-grid-two .model-card .product-gallery img.gallery-main {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
  }
}


/* Portrait product photography: accommodate 600×800 (3:4) photos in both equal machine columns. */
@media (min-width: 701px) {
  #ponuda .model-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 1120px !important;
    gap: 22px !important;
  }
  #ponuda .model-grid-two .model-card .model-art {
    height: 768px !important;
    min-height: 768px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  #ponuda .model-grid-two .model-card .product-gallery {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(0, 1fr) 88px !important;
    gap: 10px !important;
    width: 100% !important;
    height: 100% !important;
    padding: 18px 12px 10px !important;
    overflow: hidden !important;
  }
  #ponuda .model-grid-two .model-card .product-gallery img {
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 4px !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }
  #ponuda .model-grid-two .model-card .product-gallery img.gallery-main {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: min(100%, 600px) !important;
    max-width: 600px !important;
    aspect-ratio: 3 / 4 !important;
    object-fit: contain !important;
  }
}
@media (max-width: 700px) {
  #ponuda .model-grid-two .model-card .model-art {
    height: 500px !important;
    min-height: 0 !important;
  }
  #ponuda .model-grid-two .model-card .product-gallery {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    height: 100% !important;
    padding: 24px 12px 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  #ponuda .model-grid-two .model-card .product-gallery img,
  #ponuda .model-grid-two .model-card .product-gallery img.gallery-main {
    flex: 0 0 min(82%, 600px) !important;
    width: min(82%, 600px) !important;
    min-width: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 3 / 4 !important;
    object-fit: contain !important;
    scroll-snap-align: center;
    transform: none !important;
  }
}
@media (max-width: 420px) {
  #ponuda .model-grid-two .model-card .model-art { height: 440px !important; }
}


/* Fix LB 300 portrait gallery specifically: keep all three 600×800 photos whole. */
@media (min-width: 701px) {
  #ponuda .model-grid-two > .model-card:first-child .product-gallery {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(0, 1fr) 150px !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 16px 12px 12px !important;
    overflow: hidden !important;
  }
  #ponuda .model-grid-two > .model-card:first-child .product-gallery img {
    display: block !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 3 / 4 !important;
    object-fit: contain !important;
    object-position: center !important;
    padding: 3px !important;
    transform: none !important;
  }
  #ponuda .model-grid-two > .model-card:first-child .product-gallery img.gallery-main {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    width: auto !important;
    max-width: 100% !important;
    height: 100% !important;
    aspect-ratio: 3 / 4 !important;
    object-fit: contain !important;
  }
  #ponuda .model-grid-two > .model-card:first-child .product-gallery img:not(.gallery-main) {
    grid-row: 2 !important;
  }
}


/* Temporary clean layout after removing the old LB 300 column for a fresh rebuild. */
#ponuda .model-grid-one {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 680px !important;
  margin-inline: auto !important;
}
#ponuda .model-grid-one > .model-card {
  width: 100% !important;
  min-width: 0 !important;
}


/* Fresh rebuild of both machine cards: consistent gallery, no cropped product photos. */
#ponuda .zfk-rebuilt-model-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:stretch!important;
  gap:24px!important;
  width:100%!important;
  max-width:1120px!important;
  margin-inline:auto!important;
}
#ponuda .zfk-rebuilt-model-card{
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  width:100%!important;
  overflow:hidden!important;
  background:#f8f8f6!important;
  border:1px solid #c8c9c9!important;
  border-radius:4px!important;
}
#ponuda .zfk-rebuilt-model-art{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  position:relative!important;
  height:auto!important;
  min-height:0!important;
  padding:14px!important;
  background:#D9DADD!important;
  border-bottom:1px solid #c3c5c8!important;
  overflow:hidden!important;
}
#ponuda .zfk-rebuilt-model-art:before{display:none!important}
#ponuda .zfk-rebuilt-model-art .model-tag{
  position:relative!important;
  z-index:2!important;
  align-self:flex-start!important;
  top:auto!important;left:auto!important;right:auto!important;
  margin:0 0 12px!important;
  padding:6px 10px!important;
  background:#171717!important;
  color:#fff!important;
  font-size:10px!important;
  letter-spacing:1px!important;
}
#ponuda .zfk-rebuilt-gallery{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-template-rows:300px!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
  padding:0!important;
  margin:0!important;
  overflow:visible!important;
  background:transparent!important;
  align-items:stretch!important;
}
#ponuda .zfk-rebuilt-gallery img,
#ponuda .zfk-rebuilt-gallery img.gallery-main{
  display:block!important;
  position:relative!important;
  width:100%!important;
  min-width:0!important;
  height:300px!important;
  max-height:300px!important;
  padding:8px!important;
  margin:0!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#D9DADD!important;
  border:1px solid #b8bbc0!important;
  border-radius:2px!important;
  mix-blend-mode:normal!important;
  cursor:zoom-in!important;
}
#ponuda .zfk-rebuilt-gallery img:hover{transform:scale(1.015)}
#ponuda .zfk-gallery-hint{
  margin:9px 0 0!important;
  color:#55585d!important;
  font-size:10px!important;
  text-align:center!important;
}
#ponuda .zfk-rebuilt-model-body{
  display:flex!important;
  flex:1 1 auto!important;
  flex-direction:column!important;
  padding:22px!important;
}
#ponuda .zfk-rebuilt-model-body>p:not(.model-kicker):not(.model-source){
  font-size:12px!important;
  line-height:1.8!important;
  color:#555!important;
}
#ponuda .zfk-rebuilt-model-body .model-specs{
  margin:12px 0 18px!important;
  padding-left:18px!important;
}
#ponuda .zfk-rebuilt-model-body .model-specs li{
  margin:0 0 7px!important;
  font-size:11px!important;
  line-height:1.7!important;
}
#ponuda .zfk-rebuilt-model-body .model-source{
  margin-top:auto!important;
  padding-top:10px!important;
  font-size:10px!important;
  line-height:1.7!important;
}
#ponuda .zfk-rebuilt-model-body .model-select{
  width:100%!important;
  min-height:46px!important;
  margin-top:12px!important;
  background:#003da5!important;
  border-color:#003da5!important;
  color:#fff!important;
  justify-content:center!important;
}
#ponuda .zfk-rebuilt-model-body .model-select:hover{
  background:#002f80!important;
  border-color:#002f80!important;
}
@media(max-width:900px){
  #ponuda .zfk-rebuilt-model-grid{gap:16px!important}
  #ponuda .zfk-rebuilt-gallery{grid-template-columns:1fr!important;grid-template-rows:300px!important}
  #ponuda .zfk-rebuilt-gallery img:not(.gallery-main){display:none!important}
  #ponuda .zfk-rebuilt-gallery img.gallery-main{height:300px!important}
}
@media(max-width:700px){
  #ponuda .zfk-rebuilt-model-grid{grid-template-columns:minmax(0,1fr)!important;max-width:560px!important;gap:20px!important}
  #ponuda .zfk-rebuilt-model-art{padding:12px!important}
  #ponuda .zfk-rebuilt-gallery{
    display:flex!important;
    align-items:stretch!important;
    gap:10px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    scroll-padding-inline:2px!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:thin!important;
    padding:0 0 8px!important;
  }
  #ponuda .zfk-rebuilt-gallery img,
  #ponuda .zfk-rebuilt-gallery img.gallery-main{
    display:block!important;
    flex:0 0 86%!important;
    width:86%!important;
    min-width:86%!important;
    height:330px!important;
    max-height:330px!important;
    scroll-snap-align:center!important;
    object-fit:contain!important;
  }
  #ponuda .zfk-rebuilt-gallery img:not(.gallery-main){display:block!important}
  #ponuda .zfk-rebuilt-model-body{padding:20px!important}
}
@media(max-width:390px){
  #ponuda .zfk-rebuilt-gallery img,
  #ponuda .zfk-rebuilt-gallery img.gallery-main{
    flex-basis:90%!important;width:90%!important;min-width:90%!important;height:300px!important;max-height:300px!important;
  }
}


/* ZFK: two portrait image slots for the LB 300 mini and LB 1200 Classy & Milk */
#ponuda .model-image-columns {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}
#ponuda .model-image-column {
  min-width: 0;
}
#ponuda .model-image-column h3 {
  margin: 0 0 14px;
  text-align: center;
  font-size: clamp(17px, 1.7vw, 22px);
  line-height: 1.35;
  letter-spacing: -.35px;
}
#ponuda .model-image-placeholder {
  width: 100%;
  aspect-ratio: 3 / 4;
  border: 1px solid #bfc0c1;
  background: #d9dadd;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #777b80;
  text-align: center;
  overflow: hidden;
}
#ponuda .model-image-placeholder span {
  font-size: 13px;
  font-weight: 700;
}
#ponuda .model-image-placeholder small {
  font-size: 11px;
  letter-spacing: .4px;
}
@media (max-width: 700px) {
  #ponuda .model-image-columns {
    grid-template-columns: minmax(0, 1fr);
    max-width: 520px;
    gap: 28px;
  }
  #ponuda .model-image-column h3 {
    font-size: 19px;
  }
}


/* ZFK: portrait galleries for the LB 300 mini and LB 1200 Classy & Milk */
#ponuda .model-image-columns {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}
#ponuda .model-image-column { min-width: 0; }
#ponuda .model-image-column h3 {
  margin: 0 0 14px;
  text-align: center;
  font-size: clamp(17px, 1.7vw, 22px);
  line-height: 1.35;
  letter-spacing: -.35px;
}
#ponuda .model-image-gallery { min-width: 0; }
#ponuda .model-image-gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background: #d9dadd;
  border: 1px solid #bfc0c1;
  cursor: zoom-in;
}
#ponuda .model-image-gallery .model-image-main { max-width: 600px; margin: 0 auto; }
#ponuda .model-image-thumbnails {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
#ponuda .model-image-thumbnails img { max-width: 100%; }
#ponuda .model-gallery-hint {
  margin: 9px 0 0;
  color: #55585d;
  text-align: center;
  font-size: 12px;
  line-height: 1.45;
}
@media (max-width: 700px) {
  #ponuda .model-image-columns {
    grid-template-columns: minmax(0, 1fr);
    max-width: 520px;
    gap: 28px;
  }
  #ponuda .model-image-column h3 { font-size: 19px; }
  #ponuda .model-image-thumbnails { gap: 8px; }
}


/* ZFK: keep alternate machine photos out of the page layout; show them only in the click-to-open lightbox carousel. */
#ponuda .model-image-thumbnails {
  display: none !important;
}
#ponuda .model-image-gallery .model-image-main {
  display: block;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}




/* ZFK: fit the newly supplied landscape photos without cropping or forcing portrait dimensions. */
#ponuda .model-image-columns {
  max-width: 1040px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(20px, 3vw, 36px);
}
#ponuda .model-image-column { min-width: 0; }
#ponuda .model-image-gallery {
  width: 100%;
  max-width: none;
  aspect-ratio: 4 / 3;
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
  border: 1px solid #c9c9c6;
  box-shadow: 0 5px 18px rgba(20,20,20,.07);
}
#ponuda .model-image-gallery .model-image-main {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  margin: 0;
  background: #fff;
}
#ponuda .model-image-thumbnails { display: none !important; }
#ponuda .model-gallery-hint {
  margin: 10px 0 0;
  color: #55585d;
  text-align: center;
  font-size: 12px;
  line-height: 1.45;
}
@media (max-width: 700px) {
  #ponuda .model-image-columns {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
    gap: 28px;
  }
  #ponuda .model-image-gallery { width: 100%; }
  #ponuda .model-image-column h3 { font-size: 19px; }
}


/* ZFK: professional, accessible technical details for LB machine comparison. */
#ponuda .machine-details {
  margin-top: 18px;
  color: #202226;
  font-size: 14px;
  line-height: 1.65;
}
#ponuda .machine-intro { margin: 0 0 12px; }
#ponuda .machine-highlights {
  margin: 0 0 16px;
  padding-left: 20px;
}
#ponuda .machine-highlights li { margin: 5px 0; }
#ponuda .machine-specs {
  border: 1px solid #b8bbc0;
  border-radius: 8px;
  background: rgba(255,255,255,.42);
  overflow: hidden;
}
#ponuda .machine-specs summary {
  cursor: pointer;
  padding: 12px 14px;
  color: #003da5;
  font-weight: 750;
}
#ponuda .machine-specs summary:focus-visible {
  outline: 3px solid #003da5;
  outline-offset: -3px;
}
#ponuda .machine-specs dl {
  margin: 0;
  padding: 0 14px 12px;
}
#ponuda .machine-specs dl > div {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid #d0d2d5;
}
#ponuda .machine-specs dt { font-weight: 700; }
#ponuda .machine-specs dd { margin: 0; }
#ponuda .machine-note {
  margin: 12px 0 0;
  font-size: 12px;
  color: #4e5156;
}
@media (max-width: 700px) {
  #ponuda .machine-details { font-size: 14px; }
  #ponuda .machine-specs dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}


/* ZFK: make the technical-specification disclosure feel clearly interactive. */
#ponuda .machine-specs {
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
#ponuda .machine-specs summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  background: rgba(255,255,255,.28);
  transition: background-color 180ms ease, color 180ms ease, padding 180ms ease;
}
#ponuda .machine-specs summary::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #fff;
  background: #003da5;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  transition: transform 180ms ease, background-color 180ms ease;
}
#ponuda .machine-specs[open] summary::after {
  content: "−";
  background: #252a31;
}
@media (hover: hover) and (pointer: fine) {
  #ponuda .machine-specs summary:hover {
    color: #fff;
    background: #343a43;
    padding-left: 18px;
  }
  #ponuda .machine-specs summary:hover::after {
    color: #003da5;
    background: #fff;
    transform: scale(1.08);
  }
  #ponuda .machine-specs:hover {
    border-color: #343a43;
    box-shadow: 0 4px 12px rgba(20,25,35,.16);
  }
}
#ponuda .machine-specs summary:focus-visible {
  outline: 3px solid #003da5;
  outline-offset: -3px;
  background: #343a43;
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  #ponuda .machine-specs,
  #ponuda .machine-specs summary,
  #ponuda .machine-specs summary::after {
    transition: none;
  }
}


/* ZFK: prominent Lavazza-blue selection button under each machine's specifications. */
#ponuda .machine-select {
  width: 100%;
  margin: 14px 0 18px;
  min-height: 50px;
  justify-content: space-between;
  padding: 14px 18px;
  background: #003da5;
  border-color: #003da5;
  color: #fff;
  box-shadow: 0 3px 8px rgba(0, 35, 100, .16);
  font-size: 13px;
  letter-spacing: .01em;
}
#ponuda .machine-select span {
  font-size: 17px;
  transition: transform 180ms ease;
}
#ponuda .machine-select:hover {
  background: #002f80;
  border-color: #002f80;
  color: #fff;
  box-shadow: 0 6px 14px rgba(0, 35, 100, .24);
  transform: translateY(-2px);
}
#ponuda .machine-select:hover span {
  transform: translate(2px, -2px);
}
#ponuda .machine-select:focus-visible {
  outline: 3px solid #003da5;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  #ponuda .machine-select,
  #ponuda .machine-select span {
    transition: none;
  }
}


/* ZFK: istakni minimalnu mjesečnu količinu kapsula ispod naziva aparata. */
#ponuda .machine-minimum-capsules {
  margin: -5px 0 14px;
  color: #79502b;
  text-align: center;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: .02em;
}
#ponuda .machine-minimum-capsules strong { font-weight: 800; }


/* Align the hero copy with the left edge of the photo and slightly enlarge the text. */
.hero-copy{width:100%;max-width:1100px;margin-inline:auto;text-align:left;}
.hero-copy h1{font-size:clamp(46px,5.4vw,74px);}
.hero-copy .lead{font-size:17px;max-width:760px;line-height:1.8;margin:0 0 14px;text-align:left;}
.hero .hero-price-note{font-size:16px;max-width:760px;text-align:left;}
.hero .hero-location-note{font-size:14px;max-width:760px;text-align:left;}
.hero-copy .actions{justify-content:flex-start;}
.hero-copy .btn{font-size:13px;}
@media(max-width:700px){
  /* Keep the full hero copy aligned to the image edge on phones, with easier-to-read type. */
  .hero-copy{width:100%;max-width:none;margin-inline:0;text-align:left;}
  .hero-copy h1{font-size:clamp(38px,10vw,46px);text-align:left;}
  .hero-copy .lead{font-size:16px;line-height:1.75;max-width:100%;text-align:left;}
  .hero .hero-price-note{font-size:15px;max-width:100%;text-align:left;}
  .hero .hero-location-note{font-size:14px;max-width:100%;text-align:left;}
  .hero-copy .actions{justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;}
  .hero-copy .btn{font-size:14px;}
}


/* Required capsule selection feedback when an appliance is selected. */
#order-form .capsule-selection-invalid textarea,
#order-form .capsule-selection-invalid input {
  border: 2px solid #c62828 !important;
  background: #fff5f5 !important;
}
#order-form .capsule-selection-invalid > label {
  color: #b71c1c !important;
}
#order-form .capsule-error-note {
  color: #b71c1c !important;
  font-weight: 700;
}

/* Make the LAVAZZA BLUE label above the capsule chooser three times larger. */
#kapsule .capsule-heading > .eyebrow {
  font-size: 30px;
  line-height: 1.2;
}


/* ZFK: first Lavazza BLUE capsule box gallery — product description lives on its own detail page. */
/* Raspored kapsula: tri proizvoda u retku, a sljedeći proizvodi prelaze u novi redak. */
#kapsule {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  column-gap: clamp(14px, 2.5vw, 30px);
  row-gap: 30px;
}
#kapsule > .capsule-heading {
  grid-column: 1 / -1;
  width: 100%;
}
#kapsule .blue-capsule-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  width: 100%;
  max-width: 360px;
  min-width: 0;
  margin: 0 auto;
}
@media (max-width: 760px) {
  #kapsule {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px;
    row-gap: 24px;
  }
}
@media (max-width: 420px) {
  #kapsule {
    grid-template-columns: minmax(0, 1fr);
  }
}
#kapsule .blue-capsule-card {
  display: block;
  width: 100%;
  padding: 12px;
  background: #fff;
  border: 1px solid #dedede;
  box-shadow: 0 8px 26px rgba(20, 25, 35, .07);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
#kapsule .blue-capsule-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
}
#kapsule .blue-capsule-card:hover,
#kapsule .blue-capsule-card:focus-visible {
  border-color: #003da5;
  box-shadow: 0 12px 30px rgba(0, 35, 100, .14);
  transform: translateY(-2px);
}
#kapsule .blue-capsule-card:focus-visible {
  outline: 3px solid #003da5;
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  #kapsule .blue-capsule-card { transition: none; }
}


/* Naslov proizvoda i vidljiv gumb za odabir u glavnoj galeriji kapsula. */
#kapsule .blue-capsule-title{width:100%;margin:0 0 12px;color:#000;text-align:center;font-size:clamp(1.05rem,2.6vw,1.35rem);font-weight:400;line-height:1.35}
#kapsule .blue-capsule-gallery .capsule-select{font-size:17px;font-weight:800;justify-content:center;text-align:center;min-height:48px}


/* Keep the selected DA option for additional capsules in Lavazza blue. */
.capsule-choice-fieldset label:has(input[name="Dodatne kapsule"][value="Da"]:checked){background-color:#003da5!important;border-color:#003da5!important;color:#fff!important;box-shadow:0 4px 12px #003da526}


/* Refined mobile layout for the three-question appliance finder. */
@media(max-width:760px){
  #vodic.finder-section{padding:46px 16px 52px}
  #vodic .section-heading{max-width:520px;margin:0 auto 23px;text-align:left}
  #vodic .section-heading .eyebrow{margin-bottom:10px;font-size:11px;letter-spacing:.14em}
  #vodic .section-heading h2{max-width:360px;font-size:clamp(30px,8vw,38px);line-height:1.08;letter-spacing:-1.2px}
  #vodic .section-heading>p:last-child{max-width:390px;margin-top:12px;font-size:14px;line-height:1.7}
  #vodic .finder-panel{max-width:520px;margin:0 auto;padding:19px 15px 17px;border:1px solid #d7dbe0;border-radius:12px;background:rgba(248,249,250,.97);box-shadow:0 10px 28px rgba(28,38,50,.08)}
  #vodic .finder-progress{display:grid;grid-template-columns:1fr;gap:9px;margin-bottom:23px;font-size:10px;letter-spacing:.09em}
  #vodic .finder-progress-track{width:100%;height:4px}
  #vodic .finder-options legend{gap:10px;margin-bottom:16px;font-size:18px;line-height:1.35;letter-spacing:-.35px}
  #vodic .finder-question-number{flex-basis:32px;width:32px;height:32px;font-size:11px}
  #vodic .finder-option-grid{grid-template-columns:minmax(0,1fr);gap:9px}
  #vodic .finder-option{align-items:center;gap:12px;min-height:0;padding:14px 13px;border-radius:8px;background:#fff}
  #vodic .finder-option input{width:18px;height:18px;margin:0;flex-shrink:0}
  #vodic .finder-option-content{gap:3px}
  #vodic .finder-option-content strong{font-size:14px;line-height:1.35}
  #vodic .finder-option-content small{font-size:12px;line-height:1.45}
  #vodic .finder-option:has(input:checked){background:#f0f2f4;border-color:#d7dbe0;box-shadow:none}
  #vodic .finder-actions{margin-top:19px;gap:9px}
  #vodic .finder-actions .btn{min-height:48px;padding:12px 17px;border-radius:5px;font-size:13px}
  #vodic .finder-actions-split .btn{flex:1}
  #vodic .finder-status:not(:empty){padding:10px 12px;border-radius:6px;background:#fff1f2;font-size:12px;line-height:1.5}
  #vodic .finder-result{padding-top:5px}
  #vodic .finder-recommendation-tag{font-size:9px;line-height:1.5}
  #vodic .finder-result h3{font-size:28px;line-height:1.15;letter-spacing:-.8px}
  #vodic .finder-result-copy{font-size:13px;line-height:1.75}
  #vodic .finder-result-facts{gap:7px;margin:15px 0}
  #vodic .finder-result-facts li{padding:11px 12px;border-radius:7px;font-size:12px}
  #vodic .finder-result-actions{gap:9px;margin-top:17px}
  #vodic .finder-result-actions .btn{min-height:48px;border-radius:5px;font-size:13px}
}
@media(max-width:380px){
  #vodic.finder-section{padding-right:12px;padding-left:12px}
  #vodic .finder-panel{padding:17px 12px 14px}
  #vodic .finder-options legend{font-size:17px}
  #vodic .finder-option{padding:13px 11px}
}


/* Mobile: keep the updated appliance names and recommendation controls readable. */
@media(max-width:760px){
  #vodic .finder-result h3{
    max-width:100%;
    overflow-wrap:anywhere;
    hyphens:auto;
  }
  #vodic .finder-result-copy{
    overflow-wrap:break-word;
  }
  #vodic .finder-result-facts{
    grid-template-columns:minmax(0,1fr);
  }
  #vodic .finder-result-actions{
    display:flex;
    flex-direction:column;
    align-items:stretch;
  }
  #vodic .finder-result-actions .btn{
    width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
    text-align:center;
    justify-content:center;
  }
}


/* Mobile finder: remove persistent blue focus frames from the first step. */
@media(max-width:760px){
  #vodic .finder-panel{
    border:0!important;
    box-shadow:none!important;
    background:transparent!important;
  }
  #vodic .finder-option:focus-within{
    outline:none!important;
    box-shadow:none!important;
  }
  #vodic .finder-option,
  #vodic .finder-option:has(input:checked){
    border-color:#d7dbe0!important;
    box-shadow:none!important;
    background:#fff!important;
  }
  #vodic .finder-question-number{
    background:#e3e5e7!important;
    color:#34373b!important;
  }
}


/* Final mobile finder fix: remove the blue outline around the whole active question group. */
@media (max-width: 760px) {
  #vodic .finder-options,
  #vodic .finder-options:focus,
  #vodic .finder-options:focus-within,
  #vodic .finder-options:focus-visible,
  #vodic .finder-options legend,
  #vodic .finder-options legend:focus,
  #vodic .finder-options legend:focus-within,
  #vodic .finder-options legend:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
  }
  #vodic .finder-options {
    -webkit-tap-highlight-color: transparent;
  }
  #vodic .finder-option:focus,
  #vodic .finder-option:focus-visible,
  #vodic .finder-option:focus-within {
    outline: none !important;
    box-shadow: none !important;
  }
  #vodic .finder-option input:focus,
  #vodic .finder-option input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }
}


/* Keep the minimum capsule quantity note the same size as the surrounding hero copy. */
.hero .hero-minimum-note{font-size:15px;line-height:1.85;max-width:490px;color:#4f4e4a;margin:8px 0}
@media(max-width:700px){.hero .hero-minimum-note{font-size:14px;line-height:1.85;max-width:100%}}


/* Cross-Android/mobile-browser hardening: responsive sizing, touch targets and safe-area support.
   Keep these overrides last so older legacy rules cannot undo the mobile fixes. */
:root {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 84px;
}
html {
  width: 100%;
  min-width: 0;
  overflow-x: clip;
  scroll-behavior: smooth;
}
body {
  width: 100%;
  min-width: 0;
  overflow-x: clip;
  -webkit-tap-highlight-color: rgba(0, 61, 165, .12);
}
img, video, canvas, svg {
  max-width: 100%;
}
button, input, select, textarea {
  font: inherit;
}
button, a, summary, input, select, textarea {
  touch-action: manipulation;
}
button, .btn, .capsule-select, .copy-email-btn {
  min-height: 44px;
}
input, select, textarea {
  max-width: 100%;
}
@supports (padding: max(0px)) {
  .header {
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }
  footer, .footer-main {
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }
}
@media (hover: none), (pointer: coarse) {
  #ponuda .machine-select:hover,
  #kapsule .blue-capsule-card:hover {
    transform: none;
  }
  #ponuda .machine-specs summary:hover {
    padding-left: 14px;
  }
  #ponuda .machine-select,
  #kapsule .blue-capsule-card {
    -webkit-tap-highlight-color: rgba(0, 61, 165, .12);
  }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 72px; }
  .header {
    min-height: 64px;
    gap: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .brand { min-width: 0; max-width: calc(100% - 54px); }
  .brand-name {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .menu {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
  }
  .hero, .section, .capsule-section, .order-section {
    min-width: 0;
    max-width: 100%;
  }
  .hero-copy, .section-heading, .machine-details, #order-form {
    overflow-wrap: anywhere;
  }
  .hero .actions {
    width: 100%;
    gap: 10px;
  }
  .hero .actions .btn {
    min-height: 48px;
    max-width: 100%;
  }
  #ponuda .model-image-columns {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 560px;
    padding-left: 0;
    padding-right: 0;
  }
  #ponuda .model-image-gallery {
    width: 100%;
    aspect-ratio: 4 / 3;
  }
  #ponuda .model-image-gallery .model-image-main {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  #ponuda .machine-specs dl,
  #ponuda .machine-specs dd {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  #kapsule {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    column-gap: 12px;
    row-gap: 22px;
  }
  #kapsule .blue-capsule-gallery {
    width: 100%;
    min-width: 0;
  }
  #kapsule .blue-capsule-title {
    font-size: clamp(14px, 3.8vw, 18px);
    overflow-wrap: anywhere;
  }
  #kapsule .blue-capsule-card {
    padding: 8px;
  }
  #kapsule .capsule-select {
    width: 100%;
    min-height: 46px;
    padding: 10px 8px;
    font-size: 14px;
    line-height: 1.35;
    white-space: normal;
  }
  #order-form {
    grid-template-columns: minmax(0, 1fr);
  }
  #order-form .field,
  #order-form .full,
  #order-form .consent {
    min-width: 0;
    width: 100%;
    grid-column: 1 / -1;
  }
  #order-form input:not([type="checkbox"]):not([type="radio"]),
  #order-form select,
  #order-form textarea {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    font-size: 16px; /* Prevents Android/iOS browsers from zooming on focus. */
    line-height: 1.4;
  }
  #order-form textarea { min-height: 88px; }
  #order-form input[type="checkbox"],
  #order-form input[type="radio"] {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }
  #order-form .consent {
    align-items: flex-start;
    gap: 10px;
    line-height: 1.6;
  }
  .email-copy-row {
    flex-wrap: wrap;
    gap: 10px;
  }
  .email-copy-row a {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .email-copy-row button {
    min-height: 44px;
  }
}
@media (max-width: 420px) {
  #kapsule {
    grid-template-columns: minmax(0, 1fr);
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
  #kapsule .blue-capsule-title {
    font-size: 17px;
  }
  .hero-copy h1 {
    font-size: clamp(34px, 9.4vw, 42px);
    overflow-wrap: normal;
  }
  .hero .actions {
    align-items: stretch;
  }
  .hero .actions .btn {
    width: 100%;
    justify-content: center;
  }
  #ponuda .machine-specs summary {
    padding: 12px;
    font-size: 14px;
  }
}
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  .header { position: relative; }
  .hero { padding-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* Uninterrupted page scrolling across touch devices and desktop browsers.
   Explicitly disable scroll snapping so the page never locks onto section boundaries. */
html {
  scroll-behavior: smooth;
  scroll-snap-type: none !important;
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: touch;
}
body {
  scroll-snap-type: none !important;
  overscroll-behavior-y: auto;
}
*, *::before, *::after {
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Person-count calculator and final appliance recommendation */
.finder-people-help{margin:0 0 18px;color:#62666c;font-size:13px;line-height:1.7}
.finder-people-counter{display:flex;align-items:center;justify-content:center;gap:22px;margin:20px auto 24px}
.finder-counter-button{display:grid;place-items:center;width:48px;height:48px;border:1px solid #003da5;border-radius:50%;background:#fff;color:#003da5;font-size:27px;line-height:1;cursor:pointer}
.finder-counter-button:hover{background:#eef3ff}
.finder-people-input-label{display:flex;align-items:center;gap:10px}
.finder-people-input-label input{width:100px;padding:9px;border:0;border-bottom:2px solid #003da5;background:transparent;color:#171717;font-size:34px;font-weight:800;text-align:center}
.finder-people-input-label span{color:#62666c;font-size:13px}
.finder-consumption-preview{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.finder-consumption-preview>div{display:flex;flex-direction:column;gap:6px;padding:17px;border:1px solid #d9dce1;border-radius:6px;background:#f5f7fb}
.finder-consumption-preview span{color:#62666c;font-size:11px}
.finder-consumption-preview strong{color:#003da5;font-size:17px;line-height:1.4}
.finder-quantity-note{color:#74716b;font-size:10px;line-height:1.7;margin:13px 0 0}
.finder-result-models{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.finder-result-models[hidden]{display:none!important}
.finder-model-choice{display:flex;flex-direction:column;gap:10px;padding:18px;border:1px solid #d4d7dc;border-radius:6px;background:#fff}
.finder-model-choice h4{margin:0;font-size:17px;line-height:1.35}
.finder-model-choice p{margin:0 0 6px;color:#5e6268;font-size:12px;line-height:1.7;flex:1}
.finder-model-choice .btn{width:100%;min-height:46px}
.finder-result-button[hidden]{display:none!important}
@media(max-width:760px){.finder-consumption-preview,.finder-result-models{grid-template-columns:1fr}.finder-people-counter{gap:16px}.finder-counter-button{width:44px;height:44px}}


/* Welcome prompt: distinguish new visitors from existing customers. */
.customer-gateway{margin:25px 0 14px;max-width:520px;padding:18px 20px;border:1px solid #c9c7c1;border-radius:4px;background:rgba(255,255,255,.48)}
.customer-gateway-question{margin:0 0 13px;font-size:14px;font-weight:800;color:#222}
.customer-gateway-actions{display:flex;gap:10px;flex-wrap:wrap}
.customer-gateway-actions .btn{min-height:46px}
@media(max-width:700px){.customer-gateway{padding:16px;margin-top:20px}.customer-gateway-actions{display:grid;grid-template-columns:1fr}.customer-gateway-actions .btn{width:100%}}


/* Existing-customer monthly quantity change request */
.customer-change-section{scroll-margin-top:28px}
.customer-change-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:900px;margin:0 auto;padding:clamp(20px,4vw,36px);border:1px solid #d9dce1;border-radius:10px;background:#fff}
.customer-change-form .field{display:flex;flex-direction:column;gap:8px;min-width:0}
.customer-change-form label{font-size:14px;font-weight:600;line-height:1.5}
.customer-change-form input:not([type=checkbox]),.customer-change-form select,.customer-change-form textarea{width:100%;min-width:0;padding:12px 13px;border:1px solid #c9cdd3;border-radius:5px;background:#fff;color:#171717;font:inherit}
.customer-change-form input:focus,.customer-change-form select:focus,.customer-change-form textarea:focus{outline:2px solid #003da5;outline-offset:2px}
.customer-change-form .field.full,.customer-change-form .full{grid-column:1/-1}
.customer-change-form .consent{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.65}
.customer-change-form .consent input{flex:0 0 18px;width:18px;height:18px;margin-top:3px}
.customer-change-form .consent a{color:#003da5;text-decoration:underline}
.customer-change-form .form-actions{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.customer-change-form .form-actions .btn{background:#003da5;border-color:#003da5;color:#fff}
@media(max-width:700px){.customer-change-form{grid-template-columns:minmax(0,1fr);padding:18px;gap:14px}.customer-change-form .field.full,.customer-change-form .full{grid-column:1}.customer-change-form input:not([type=checkbox]),.customer-change-form select,.customer-change-form textarea{font-size:16px;min-height:46px}}


/* Keep customer-specific forms collapsed until the visitor chooses their customer status. */
#promjena-kolicine[hidden],
#new-customer-fields[hidden] {
  display: none !important;
}
#order-form .order-form-fields {
  display: contents;
}
#order-form .order-form-fields[hidden] {
  display: none !important;
}
#order-form .user-status-field {
  grid-column: 1 / -1;
  margin-bottom: 4px;
}




/* Customer-status links: red for new users, Lavazza blue for existing users. */
.customer-gateway-actions a[data-customer-route="new"] {
  background: #c62828;
  border-color: #c62828;
  color: #fff;
}
.customer-gateway-actions a[data-customer-route="new"]:hover,
.customer-gateway-actions a[data-customer-route="new"]:focus-visible {
  background: #a91f1f;
  border-color: #a91f1f;
  color: #fff;
}
.customer-gateway-actions a[data-customer-route="existing"] {
  background: #003da5;
  border-color: #003da5;
  color: #fff;
}
.customer-gateway-actions a[data-customer-route="existing"]:hover,
.customer-gateway-actions a[data-customer-route="existing"]:focus-visible {
  background: #002d7a;
  border-color: #002d7a;
  color: #fff;
}


/* Capsule buttons: one-second hover feedback and persistent per-variety selection count. */
#kapsule .capsule-select {
  transform: scale(1);
  transform-origin: center;
  transition: background-color 1s ease, border-color 1s ease, transform 1s ease, box-shadow 1s ease;
}
#kapsule .capsule-select:hover,
#kapsule .capsule-select:focus-visible {
  background-color: #00245f;
  border-color: #00245f;
  transform: scale(1.04);
  box-shadow: 0 7px 16px #003da52b;
}
#kapsule .capsule-select.capsule-selected {
  background-color: #002f80;
  border-color: #002f80;
  box-shadow: inset 0 0 0 1px #ffffff45;
}
#kapsule .capsule-select.capsule-selected:hover,
#kapsule .capsule-select.capsule-selected:focus-visible {
  background-color: #001f55;
  border-color: #001f55;
}
/* Identical one-second tap feedback for both new and existing customers.
   The resting class prevents hover styling from keeping the button enlarged. */
#kapsule .capsule-select.capsule-click-feedback {
  animation: capsule-selection-tap 1s ease both;
  position: relative;
  z-index: 1;
}
#kapsule .capsule-select.capsule-click-resting:hover,
#kapsule .capsule-select.capsule-click-resting:focus-visible {
  transform: scale(1);
  box-shadow: none;
}
#kapsule .capsule-select.capsule-click-resting.capsule-selected:hover,
#kapsule .capsule-select.capsule-click-resting.capsule-selected:focus-visible {
  background-color: #002f80;
  border-color: #002f80;
  box-shadow: inset 0 0 0 1px #ffffff45;
}
@keyframes capsule-selection-tap {
  0%, 100% { transform: scale(1); }
  18%, 62% { transform: scale(1.045); background-color: #001f55; border-color: #001f55; box-shadow: 0 7px 16px #003da540; }
}
#kapsule .capsule-select.capsule-click-resting {
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
#kapsule .capsule-select.capsule-click-resting:not(.capsule-selected) {
  background-color: #003da5;
  border-color: #003da5;
}
@media (prefers-reduced-motion: reduce) {
  #kapsule .capsule-select { transition: none; }
  #kapsule .capsule-select.capsule-click-feedback { animation: none; }
}


/* Lavazza-blue confirmation for successful existing-customer requests. */


/* Align the homepage hero image with the left edge of the introduction text. */
.hero-machines-below{
  width:100%;
  max-width:100%;
  margin:26px 0 0!important;
  grid-column:1/-1;
  min-width:0;
}
.hero-machines-below img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  max-height:none!important;
  object-fit:contain;
  object-position:center;
}
@media(max-width:700px){
  .hero-machines-below{width:100%;margin:18px 0 0!important;}
  .hero-machines-below img{width:100%;height:auto;object-fit:contain;}
}


/* Hero image: 30% smaller and centered horizontally on the webpage. */
.hero-machines-below{
  width:70%!important;
  max-width:70%!important;
  margin:26px auto 0!important;
  justify-self:center;
}
.hero-machines-below img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  margin:0 auto;
  object-fit:contain;
  object-position:center center;
}
@media(max-width:700px){
  .hero-machines-below{
    width:70%!important;
    max-width:70%!important;
    margin:18px auto 0!important;
  }
}


/* Let the real transparent pixels reveal the same layered silver page background.
   Do not paint a solid rectangle behind the image or isolate it from the body background. */
.hero-machines-below{
  background:transparent!important;
  isolation:auto;
}
.hero-machines-below img{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  mix-blend-mode:normal;
  -webkit-mix-blend-mode:normal;
}


/* ZFK mobile parity: keep every current desktop feature usable on phones and tablets. */
@media (max-width: 760px) {
  html {
    width: 100%;
    scroll-padding-top: 76px;
    -webkit-text-size-adjust: 100%;
  }
  body {
    width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
  }
  .header {
    position: sticky;
    top: 0;
    z-index: 50;
    min-height: 64px;
    height: auto;
    padding: 7px 14px;
    gap: 10px;
  }
  .brand {
    gap: 9px;
    min-width: 0;
    flex: 1 1 auto;
  }
  .mark {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
  }
  .brand-name {
    font-size: 10px;
    line-height: 1.3;
    letter-spacing: 1px;
  }
  .header nav {
    z-index: 60;
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .header nav a {
    min-height: 46px;
    padding: 11px 10px;
    font-size: 14px;
  }
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    min-height: 0;
    padding: 34px 18px 28px;
    overflow: visible;
  }
  .hero-copy {
    width: 100%;
    min-width: 0;
    max-width: 620px;
    margin: 0 auto;
  }
  .hero-copy h1 {
    font-size: clamp(34px, 8.8vw, 43px);
    line-height: 1.08;
    letter-spacing: -1.25px;
  }
  .hero-copy .lead {
    font-size: 15px;
    line-height: 1.75;
  }
  .hero .hero-price-note {
    font-size: 14px;
    line-height: 1.75;
  }
  .hero .hero-location-note {
    font-size: 13px;
    line-height: 1.7;
  }
  .hero-machines-below {
    grid-column: 1;
    width: 100% !important;
    max-width: 620px !important;
    margin: 22px auto 0 !important;
    justify-self: center;
  }
  .hero-machines-below img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
  }
  .customer-gateway {
    width: 100%;
    max-width: none;
    padding: 15px;
    margin: 20px 0 8px;
  }
  .customer-gateway-question {
    font-size: 14px;
    line-height: 1.5;
  }
  .customer-gateway-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }
  .customer-gateway-actions .btn {
    width: 100%;
    min-height: 48px;
    white-space: normal;
    text-align: center;
  }
  .section,
  .capsule-section,
  footer {
    padding-left: 18px;
    padding-right: 18px;
  }
  .section-heading {
    width: 100%;
    min-width: 0;
    margin-bottom: 26px;
  }
  .section-heading h2,
  .section h2,
  .capsule-section h2 {
    overflow-wrap: normal;
    hyphens: auto;
  }
  #ponuda .model-image-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 620px;
    gap: 32px;
    margin-inline: auto;
  }
  #ponuda .model-image-column {
    width: 100%;
    min-width: 0;
  }
  #ponuda .model-image-column h3 {
    margin-bottom: 8px;
    font-size: clamp(19px, 5vw, 23px);
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  #ponuda .machine-minimum-capsules {
    margin: 0 0 13px;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
  }
  #ponuda .model-image-gallery {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
    margin: 0 auto;
    overflow: hidden;
  }
  #ponuda .model-image-gallery .model-image-main {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center;
    margin: 0;
  }
  #ponuda .machine-details {
    margin-top: 17px;
    font-size: 15px;
    line-height: 1.7;
    overflow-wrap: anywhere;
  }
  #ponuda .machine-intro,
  #ponuda .machine-highlights {
    font-size: 14px;
    line-height: 1.75;
  }
  #ponuda .machine-highlights {
    padding-left: 20px;
  }
  #ponuda .machine-specs {
    width: 100%;
    max-width: 100%;
  }
  #ponuda .machine-specs summary {
    min-height: 50px;
    padding: 13px 12px;
    gap: 8px;
    font-size: 14px;
    line-height: 1.4;
  }
  #ponuda .machine-specs dl {
    padding: 0 12px 12px;
  }
  #ponuda .machine-specs dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
    padding: 10px 0;
  }
  #ponuda .machine-specs dt,
  #ponuda .machine-specs dd {
    min-width: 0;
    font-size: 13px;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }
  #ponuda .machine-select {
    width: 100%;
    min-height: 50px;
    margin-top: 15px;
    padding: 13px 14px;
    font-size: 14px;
    line-height: 1.4;
    white-space: normal;
    justify-content: center;
    text-align: center;
  }
  #kapsule {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    min-width: 0;
    column-gap: 13px;
    row-gap: 25px;
  }
  #kapsule > .capsule-heading {
    grid-column: 1 / -1;
    min-width: 0;
  }
  #kapsule .blue-capsule-gallery {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    align-content: start;
  }
  #kapsule .blue-capsule-title {
    min-height: 2.7em;
    margin: 0 0 9px;
    font-size: clamp(14px, 3.7vw, 17px);
    line-height: 1.35;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  #kapsule .blue-capsule-card {
    width: 100%;
    padding: 7px;
    min-width: 0;
  }
  #kapsule .blue-capsule-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
  }
  #kapsule .capsule-select,
  #kapsule .blue-capsule-gallery .capsule-select {
    width: 100%;
    min-height: 48px;
    margin-top: 9px;
    padding: 10px 7px;
    font-size: 13px;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  #vodic .finder-panel {
    width: 100%;
    min-width: 0;
  }
  #vodic .finder-option {
    min-width: 0;
  }
  #vodic .finder-option-content,
  #vodic .finder-option-content strong,
  #vodic .finder-option-content small {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  #vodic .finder-actions {
    display: flex;
    flex-wrap: wrap;
  }
  #vodic .finder-actions .btn {
    min-height: 48px;
  }
  #vodic .finder-people-input-label input {
    width: 88px;
    min-height: 48px;
    font-size: 30px;
  }
  #vodic .finder-consumption-preview strong {
    font-size: 15px;
    overflow-wrap: anywhere;
  }
  #order-form,
  .customer-change-form {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
    padding: 18px;
  }
  #order-form .field,
  #order-form .full,
  #order-form .consent,
  .customer-change-form .field,
  .customer-change-form .full {
    min-width: 0;
    width: 100%;
    grid-column: 1 / -1;
  }
  #order-form input:not([type="checkbox"]):not([type="radio"]),
  #order-form select,
  #order-form textarea,
  .customer-change-form input:not([type="checkbox"]),
  .customer-change-form select,
  .customer-change-form textarea {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    font-size: 16px;
    line-height: 1.45;
  }
  #order-form textarea,
  .customer-change-form textarea {
    min-height: 100px;
  }
  #order-form .btn,
  .customer-change-form .btn,
  .form-actions .btn {
    min-height: 48px;
    white-space: normal;
    line-height: 1.4;
  }
  #order-form .consent,
  .customer-change-form .consent {
    align-items: flex-start;
    line-height: 1.65;
    overflow-wrap: anywhere;
  }
  .form-actions {
    align-items: stretch;
    gap: 10px;
  }
  .form-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .steps article {
    min-width: 0;
  }
  .footer-main {
    align-items: flex-start;
  }
  .footer-main > p {
    width: 100%;
    overflow-wrap: anywhere;
  }
  .email-copy-row {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
  }
  .email-copy-row a {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 380px) {
  .hero {
    padding-left: 14px;
    padding-right: 14px;
  }
  .section,
  .capsule-section,
  footer {
    padding-left: 14px;
    padding-right: 14px;
  }
  #kapsule {
    grid-template-columns: minmax(0, 1fr);
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
  #kapsule .blue-capsule-title {
    min-height: 0;
    font-size: 16px;
  }
  #ponuda .model-image-gallery {
    aspect-ratio: 4 / 3;
  }
  #order-form,
  .customer-change-form {
    padding: 14px;
  }
}

@media (hover: none), (pointer: coarse) {
  #ponuda .machine-specs summary:hover {
    padding-left: 12px;
    color: #003da5;
    background: rgba(255,255,255,.28);
  }
  #ponuda .machine-select:hover,
  #kapsule .blue-capsule-card:hover,
  #kapsule .capsule-select:hover {
    transform: none;
  }
  #kapsule .capsule-select {
    touch-action: manipulation;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  .header {
    position: relative;
  }
  .header nav {
    max-height: calc(100vh - 64px);
  }
  .hero {
    padding-top: 20px;
  }
  .hero-machines-below {
    max-width: min(72vw, 620px) !important;
  }
}


/* Reduce the LAVAZZA BLUE label above the capsule chooser by 50%. */
#kapsule .capsule-heading > .eyebrow {
  font-size: 15px;
  line-height: 1.2;
}

/* On mobile, halve the label size as well. */
@media (max-width: 760px) {
  #kapsule .capsule-heading > .eyebrow {
    font-size: 7px;
    line-height: 1.2;
  }
}


/* Keep the existing-customer success banner identical to the new-customer banner on desktop, tablet and mobile. */
#customer-change-status.success-message {
  display: block;
  width: 100%;
  max-width: 900px;
  margin: -16px auto 24px;
  padding: 15px 18px;
  border: 1px solid #0b76b7;
  border-left: 4px solid #0b76b7;
  border-radius: 3px;
  background: #e3edf3;
  color: #005b96;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
#customer-change-status.success-message[hidden] {
  display: none;
}
@media (max-width: 1000px) {
  #customer-change-status.success-message {
    width: 100%;
    max-width: 900px;
    margin: -16px auto 24px;
    font-size: 15px;
  }
}
@media (max-width: 700px) {
  #customer-change-status.success-message {
    padding: 15px 18px;
    font-size: 15px;
    line-height: 1.6;
  }
}


/* Turn the new-customer submit button Lavazza blue only when required fields are complete. */
#order-form .form-actions > button[type="submit"].is-ready,
#order-form .form-actions > button[type="submit"].is-ready:hover {
  background: #003da5;
  border-color: #003da5;
  color: #fff;
}

/* Keep the ready submit button visibly Lavazza blue across desktop and mobile. */
#order-form .form-actions > button[type="submit"].is-ready,
#order-form .form-actions > button[type="submit"].is-ready:hover {
  background-color: #003da5 !important;
  border-color: #003da5 !important;
  color: #fff !important;
}


/* Keep the existing-customer form visibility identical on desktop and mobile.
   Explicitly honor the hidden attribute and reset any inherited section display rules. */
#promjena-kolicine[hidden] {
  display: none !important;
  visibility: hidden !important;
}
#promjena-kolicine:not([hidden]) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  scroll-margin-top: 88px;
}
@media (max-width: 700px) {
  #promjena-kolicine:not([hidden]) {
    scroll-margin-top: 76px;
    padding: 44px 17px;
  }
  .customer-change-form {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    padding: 20px 16px;
    gap: 14px;
  }
  .customer-change-form .field,
  .customer-change-form .field.full,
  .customer-change-form .full {
    grid-column: 1 / -1;
    min-width: 0;
  }
  .customer-change-form .form-actions,
  .customer-change-form .form-actions .btn {
    width: 100%;
  }
}


/* Touch-friendly existing-customer form on phones and tablets. */
@media (max-width: 1000px) {
  #promjena-kolicine:not([hidden]) {
    padding-left: clamp(16px, 3vw, 28px);
    padding-right: clamp(16px, 3vw, 28px);
  }
  .customer-change-form {
    width: 100%;
    max-width: 900px;
  }
  .customer-change-form input:not([type="checkbox"]),
  .customer-change-form select,
  .customer-change-form textarea {
    min-height: 48px;
    font-size: 16px;
    touch-action: manipulation;
  }
  .customer-change-form select {
    white-space: normal;
    text-overflow: ellipsis;
  }
  .customer-change-form .btn {
    min-height: 48px;
    touch-action: manipulation;
  }
}
@media (min-width: 701px) and (max-width: 1000px) {
  .customer-change-form {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 24px;
  }
  .customer-change-form .field.full,
  .customer-change-form .full {
    grid-column: 1 / -1;
  }
}


/* Responsive parity for the new-customer inquiry form on tablet and mobile. */
@media (min-width:701px) and (max-width:1000px){
  .order-section{padding:58px 5vw}
  #order-form{width:100%;padding:24px;gap:15px;grid-template-columns:repeat(2,minmax(0,1fr))}
  #order-form .field{min-width:0}
  #order-form .field input,
  #order-form .field select,
  #order-form .field textarea{min-width:0;max-width:100%}
  #order-form .full{grid-column:1/-1}
  #order-form .form-actions .btn{min-height:48px}
}
@media (max-width:700px){
  #order-form{grid-template-columns:minmax(0,1fr);width:100%;gap:14px}
  #order-form .field,
  #order-form .full{grid-column:1/-1;min-width:0}
  #order-form .consent{font-size:12px;line-height:1.6}
  #order-form .consent input{flex:0 0 20px;width:20px;height:20px;margin:2px 0 0}
  #order-form .form-actions{gap:10px}
  #order-form .form-actions .btn{min-height:50px;touch-action:manipulation}
  #success-message.success-message{font-size:clamp(19px,5vw,24px)!important;padding:15px 14px;overflow-wrap:anywhere}
}