*{box-sizing:border-box}:root{--red:#e21e2b;--red-dark:#b90f1a;--ink:#18181b;--muted:#6d6d74;--line:#e7e7ea;--soft:#f5f5f6;--white:#fff;--shadow:0 18px 50px rgba(20,20,24,.09)}html{scroll-behavior:smooth}body{margin:0;font-family:"Montserrat",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#fff}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.hidden{display:none!important}.container{width:min(1280px,calc(100% - 36px));margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}.header-inner{width:min(1280px,calc(100% - 36px));height:76px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:22px}.brand{display:flex;align-items:center;gap:11px;font-size:21px;font-weight:800;letter-spacing:-.04em}.brand>span:last-child>span{color:var(--red)}.brand-mark{width:38px;height:38px;border-radius:var(--r-sm);background:var(--red);color:#fff;display:grid;place-items:center;font-size:19px}.header-note{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;margin-left:auto}.status-dot{width:8px;height:8px;border-radius:50%;background:#2aa85a;box-shadow:0 0 0 5px #eaf8ef}.header-cta{background:var(--ink);color:#fff;padding:12px 17px;border-radius:var(--r-sm);font-size:13px;font-weight:800}.back-link{font-size:14px;color:var(--muted);font-weight:700}
.catalog-nav{position:sticky;top:76px;z-index:45;background:#fff;border-bottom:1px solid var(--line)}.nav-inner{height:50px;display:flex;align-items:center;gap:4px}.nav-inner button,.nav-inner a:where(.quick-category){border:0;background:transparent;padding:10px 13px;border-radius:var(--r-sm);font-size:12px;font-weight:800;cursor:pointer}.nav-inner button:hover,.nav-inner a:where(.quick-category):hover{background:var(--soft)}.categories-toggle{color:var(--red)!important;margin-right:7px}.categories-toggle span{margin-left:6px}.categories-menu{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--elev-4);max-height:calc(100vh - 150px);overflow:auto;padding:25px 0 32px}.categories-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:25px 34px}.menu-category-title{width:100%;border:0;background:transparent;display:flex;justify-content:space-between;text-align:left;padding:0 0 9px;border-bottom:2px solid var(--ink);font-weight:800;cursor:pointer}.menu-category-title small{color:var(--muted)}.menu-subcategories{display:flex;flex-direction:column;padding-top:7px}.menu-subcategories button{border:0;background:transparent;text-align:left;padding:6px 0;display:flex;justify-content:space-between;gap:10px;color:#4f4f56;font-size:12px;cursor:pointer}.menu-subcategories button:hover{color:var(--red)}.menu-subcategories small{color:#8c8c8c}.active-filter{display:flex;align-items:center;justify-content:space-between;background:#fff4f5;border:1px solid #ffd8dc;border-radius:var(--r-md);padding:12px 15px;margin:0 0 18px}.active-filter>div{display:flex;gap:10px;align-items:center}.active-filter span{font-size:11px;color:var(--muted)}.active-filter strong{font-size:13px}.active-filter button{border:0;background:transparent;color:var(--red);font-size:12px;font-weight:700;cursor:pointer}
.catalog-hero{background:linear-gradient(118deg,#171719 0%,#29292e 70%,#3a181b 100%);color:#fff}.hero-inner{min-height:330px;display:flex;align-items:center;justify-content:space-between;gap:48px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--red);text-transform:uppercase}.catalog-hero .eyebrow{color:#ff6670}.catalog-hero h1{font-size:clamp(42px,6vw,76px);line-height:.98;letter-spacing:-.06em;max-width:780px;margin:12px 0 20px}.hero-copy{color:#c9c9ce;font-size:17px;line-height:1.65;max-width:690px}.hero-badge{width:180px;height:180px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:rgba(255,255,255,.05)}.hero-badge strong{font-size:38px}.hero-badge span{font-size:12px;color:#c9c9ce;max-width:90px}
.catalog-shell{padding-top:32px}.search-panel{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;box-shadow:var(--elev-3)}.search-panel label{display:block;font-size:12px;font-weight:800;margin-bottom:9px}.search-row{display:flex;gap:9px}.search-row input{min-width:0;flex:1;border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 15px;outline:none}.search-row input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(226,30,43,.1)}.search-row button,.quote-button{border:0;border-radius:var(--r-sm);padding:0 23px;background:var(--red);color:#fff;font-weight:700;cursor:pointer}.search-row button:hover,.quote-button:hover{background:var(--red-dark)}.search-row .button-ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}.results-bar{display:flex;align-items:center;justify-content:space-between;padding:27px 2px 18px;color:var(--muted);font-size:14px}.results-bar strong{font-size:25px;color:var(--ink);margin-right:4px}.message{padding:28px;border-radius:var(--r-md);background:var(--soft);color:var(--muted);margin:18px 0}
.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.product-card{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;transition:transform .2s ease,box-shadow .2s ease}.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.card-media{position:relative;aspect-ratio:1;background:#f6f6f7;overflow:hidden;display:grid;place-items:center}.card-image{width:100%;height:100%;object-fit:contain;padding:15px;opacity:0;transition:opacity .28s ease,transform .45s cubic-bezier(.2,.7,.2,1)}.card-image.loaded{opacity:1}.card-image-hover,.card-image-hover.loaded{position:absolute;inset:0;opacity:0;transform:scale(1.025)}.image-skeleton{position:absolute;inset:0;background:linear-gradient(90deg,#f3f3f4 25%,#fafafa 45%,#f3f3f4 65%);background-size:220% 100%;animation:shimmer 1.3s infinite}.card-media.no-image:after{content:"Slika nije dostupna";color:#8c8c8c;font-size:12px}.card-badge{position:absolute;z-index:2;left:12px;top:12px;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:999px;padding:6px 9px;font-size:10px;font-weight:700}.card-content{padding:17px}.card-category{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 0 8px}.card-content h2{font-size:17px;line-height:1.3;margin:0;min-height:44px}.card-code{font-size:12px;color:var(--muted);margin:8px 0 17px}.card-meta{border-top:1px solid var(--line);padding-top:14px;display:flex;justify-content:space-between;align-items:center}.card-meta>div{display:flex;flex-direction:column}.card-price{font-size:18px;font-weight:800}.card-meta small{font-size:10px;color:var(--muted)}.card-arrow{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:#fff;font-size:19px}.variant-summary{display:flex;gap:6px;flex-wrap:wrap;margin-top:13px}.variant-summary span{background:var(--soft);border-radius:999px;padding:5px 7px;font-size:10px;font-weight:600}.pagination{display:flex;align-items:center;justify-content:center;gap:17px;padding:46px 0 72px}.pagination button{border:1px solid var(--line);background:#fff;padding:12px 16px;border-radius:var(--r-sm);font-weight:600;cursor:pointer}.pagination button:disabled{opacity:.35;cursor:not-allowed}.site-footer{border-top:1px solid var(--line);padding:27px 0;color:var(--muted);font-size:12px}

@media (hover:hover) and (pointer:fine){.product-card:hover .card-media:not(.has-hover-image) .card-image-primary{transform:scale(1.045)}.product-card:hover .card-media.has-hover-image .card-image-primary{opacity:0}.product-card:hover .card-media.has-hover-image .card-image-hover.loaded{opacity:1;transform:scale(1)}}

/* DemoShop functional update v21 */
.search-panel{position:relative;z-index:20}.search-suggestions{position:absolute;z-index:50;left:18px;right:18px;top:calc(100% - 8px);overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:0 0 15px 15px;box-shadow:0 22px 45px rgba(15,15,20,.16)}.search-suggestion{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:86px;padding:11px 16px;border-bottom:1px solid var(--line);color:var(--ink)}.search-suggestion:last-child{border-bottom:0}.search-suggestion:hover,.search-suggestion.active{background:#f7f7f8}.search-suggestion-copy{display:grid;min-width:0}.search-suggestion-copy strong{font-size:16px;line-height:1.25}.search-suggestion-copy small{margin-top:3px;font-weight:800}.search-suggestion-copy em{margin-top:5px;color:var(--muted);font-size:12px;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-suggestion mark{background:#dfe9ff;color:#1257c7;border-radius:var(--r-2xs);padding:0 1px}.search-suggestion img{width:76px;height:62px;object-fit:contain;flex:0 0 auto}.search-suggestion img[hidden]{display:none}.search-suggestion-empty{padding:20px;color:var(--muted);text-align:center}
.card-description{color:var(--muted);font-size:12px;line-height:1.45;margin:6px 0 0;min-height:35px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card-content h2{min-height:auto}.card-code{margin-top:8px}
.measurement-content{padding:22px 0}.measurement-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;margin-bottom:20px}.measurement-rows>div{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--line)}.measurement-rows span{color:var(--muted)}.measurement-image{margin:18px 0;text-align:center}.measurement-image img{display:block;max-width:min(760px,100%);max-height:620px;margin:auto;object-fit:contain}.measurement-image figcaption{margin-top:10px;color:var(--muted);font-size:12px}.measurement-document{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px;border:1px solid var(--line);border-radius:var(--r-sm)}.measurement-document span{color:var(--red);font-weight:800}
.product-video{padding:0 2px 28px}.product-video-frame{position:relative;width:min(900px,100%);aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-md);background:#111}.product-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.related-products{padding:55px 0 78px}.related-products-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px}.related-products-heading h2{font-size:32px;margin:4px 0 0}.related-products-heading>a{font-weight:800;color:var(--red)}.related-products-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.related-product-card{overflow:hidden;border:1px solid var(--line);border-radius:var(--r-md);background:#fff}.related-product-media{position:relative;display:block;aspect-ratio:1;background:#f6f6f7;overflow:hidden}.related-product-media img{position:absolute;inset:0;width:100%;height:100%;padding:14px;object-fit:contain;transition:opacity .28s ease,transform .4s ease}.related-product-hover{opacity:0}.related-product-card>div{padding:15px}.related-product-card small{color:var(--muted)}.related-product-card h3{font-size:17px;line-height:1.25;margin:7px 0}.related-product-card p{min-height:35px;margin:0 0 15px;color:var(--muted);font-size:12px;line-height:1.45}.related-product-price{font-size:17px}
@media(hover:hover) and (pointer:fine){.related-product-card:hover .related-product-primary{transform:scale(1.04)}.related-product-card.has-related-hover:hover .related-product-primary{opacity:0}.related-product-card.has-related-hover:hover .related-product-hover{opacity:1;transform:scale(1.02)}}
@media(max-width:1000px){.related-products-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.search-suggestions{left:0;right:0;top:100%;border-radius:var(--r-sm)}.search-suggestion{min-height:72px;padding:9px 12px}.search-suggestion img{width:58px;height:52px}.measurement-rows{grid-template-columns:1fr}.related-products{padding-top:35px}.related-products-heading{align-items:start}.related-products-heading h2{font-size:26px}.related-products-grid{gap:10px}.related-product-card>div{padding:12px}.related-product-card h3{font-size:14px}.related-product-card p{display:none}}
.product-page{min-height:calc(100vh - 76px)}.product-detail{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(380px,.94fr);gap:58px;padding:50px 0 80px}.main-image-wrap img{transition:opacity .2s;}.main-image-wrap img.loading-image{opacity:.35}.thumb{border:1px solid var(--line);border-radius:11px;}.thumb.active{border:2px solid var(--red)}.product-info{padding-top:10px}.product-info h1{font-size:clamp(38px,4.8vw,62px);line-height:1.02;letter-spacing:-.05em;margin:10px 0 13px}.model-line{color:var(--muted)}.price-row{margin:28px 0;padding:21px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.price-row span{display:block;font-size:33px;font-weight:800}.price-row small{color:var(--muted)}.option-block{margin:25px 0}.option-heading{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px}.option-heading span{font-size:12px;color:var(--muted)}.color-options,.size-options{display:flex;gap:8px;flex-wrap:wrap}.color-button,.size-button{min-width:49px;height:45px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;font-weight:700;cursor:pointer}.color-button.active,.size-button.active{border:2px solid var(--red);color:var(--red);background:#fff7f8}.variant-card{display:grid;grid-template-columns:1fr 1fr;background:var(--soft);border-radius:var(--r-md);padding:17px;margin:27px 0}.variant-card div{display:flex;flex-direction:column;gap:5px}.variant-card span{font-size:11px;color:var(--muted)}.quote-button{width:100%;height:56px;font-size:16px}.helper{font-size:11px;color:var(--muted);line-height:1.5}
@keyframes shimmer{to{background-position:-220% 0}}@media(max-width:1000px){.product-grid{grid-template-columns:repeat(3,1fr)}.product-detail{grid-template-columns:1fr;gap:26px}.hero-badge{display:none}}@media(max-width:700px){.header-note{display:none}.header-cta{padding:10px 12px}.hero-inner{min-height:280px}.catalog-hero h1{font-size:44px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.search-row{flex-wrap:wrap}.search-row input{flex-basis:100%}.search-row button{height:44px;flex:1}.card-content{padding:13px}.card-content h2{font-size:14px;min-height:38px}.card-price{font-size:15px}.card-arrow{width:34px;height:34px}.product-detail{padding-top:27px}.product-info h1{font-size:38px}.variant-card{grid-template-columns:1fr;gap:15px}}@media(max-width:390px){.product-grid{grid-template-columns:1fr}.header-cta{display:none}}
@media(max-width:1000px){.categories-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.quick-category:nth-of-type(n+5){display:none}}@media(max-width:700px){.catalog-nav{top:76px}.nav-inner{overflow-x:auto}.quick-category{display:none}.categories-grid{grid-template-columns:1fr 1fr;gap:22px}.categories-menu{position:fixed;top:126px;bottom:0;max-height:none}.active-filter>div{align-items:flex-start;flex-direction:column;gap:2px}}@media(max-width:430px){.categories-grid{grid-template-columns:1fr}}

/* Search suggestion images v27: load immediately, reveal only after success. */
.search-suggestion img.search-suggestion-image{opacity:0;transition:opacity .18s ease}
.search-suggestion img.search-suggestion-image.loaded{opacity:1}

/* Product gallery modes v28 */
.gallery-modes{display:inline-flex;align-items:center;gap:4px;margin:0 0 14px;padding:4px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff}
.gallery-modes button{height:36px;padding:0 13px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;transition:background .18s ease,color .18s ease}
.gallery-modes button:hover{background:var(--soft);color:var(--ink)}
.gallery-modes button:disabled{opacity:.42;cursor:not-allowed;background:transparent;color:var(--muted)}
.gallery-modes button.active{background:var(--ink);color:#fff}

/* Fotografije boja i pregled zaliha po veličini */
.color-photo-button{border:1px solid var(--line);border-radius:11px;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s;}.color-photo-button.active{border:2px solid var(--ink);color:var(--ink);background:#fff;}.color-photo-wrap{display:block;position:relative;width:62px;height:62px;border-radius:7px;background:var(--soft);overflow:hidden}.color-photo-wrap img{width:100%;height:100%;object-fit:contain}.color-photo-skeleton{position:absolute;inset:0;background:linear-gradient(90deg,#f1f1f2,#fafafa,#f1f1f2);background-size:200%;animation:shimmer 1.2s infinite}.color-photo-wrap.no-photo:after{content:"—";position:absolute;inset:0;display:grid;place-items:center;color:#8c8c8c}.color-code{display:block;margin-top:5px;font-size:10px;font-weight:700;color:var(--muted)}.compact-size-picker{margin-bottom:17px}.variant-table-block{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;}.variant-table-head,.variant-table-row{display:grid;grid-template-columns:1.5fr .8fr .6fr .85fr;align-items:center;gap:12px;text-align:left}.variant-table-head{background:var(--soft);font-weight:800;letter-spacing:.08em;text-transform:uppercase;}.variant-table-row{width:100%;border:0;border-top:1px solid var(--line);background:#fff;cursor:pointer;}.variant-table-row:hover{background:#fafafa}.variant-table-row>span:first-child{display:flex;align-items:baseline;gap:9px}.variant-table-row strong{font-size:13px}.variant-table-row small{color:var(--muted);}.variant-table-row>span:nth-child(2),.variant-table-row>span:nth-child(3){font-size:12px;font-weight:600}.in-stock{color:#16803c}.out-stock{color:var(--muted)}.variant-table-row.loading{color:var(--muted)}

/* Korpa za upit */
.header-actions{display:flex;align-items:center;gap:18px}.cart-link{display:flex;align-items:center;gap:8px;background:var(--ink);color:#fff;padding:10px 13px;border-radius:var(--r-sm);font-size:12px;font-weight:700}.cart-count{min-width:21px;height:21px;padding:0 5px;border-radius:999px;background:#555;color:#fff;display:grid;place-items:center;font-size:10px}.cart-count.has-items{background:var(--red)}.add-to-cart-row{display:grid;grid-template-columns:100px 1fr;gap:10px}.add-to-cart-row label{font-size:10px;font-weight:800;color:var(--muted)}.add-to-cart-row input{width:100%;height:39px;margin-top:5px;border:1px solid var(--line);border-radius:var(--r-sm);padding:0 10px;font-weight:700}.add-to-cart-row .quote-button{height:56px;align-self:end}.helper a{color:var(--red);font-weight:700}.cart-page{padding:55px 0 90px}.cart-title h1{font-size:clamp(40px,5vw,66px);letter-spacing:-.055em;margin:8px 0}.cart-title>p:last-child{color:var(--muted)}.cart-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(330px,.65fr);gap:34px;margin-top:34px}.cart-items{display:flex;flex-direction:column;gap:12px}.cart-item{display:grid;grid-template-columns:110px minmax(0,1fr) 88px 140px 32px;gap:16px;align-items:center;border:1px solid var(--line);border-radius:var(--r-md);padding:13px;background:#fff}.cart-item-image{width:110px;height:100px;background:var(--soft);border-radius:11px;display:grid;place-items:center;overflow:hidden}.cart-item-image img{width:100%;height:100%;object-fit:contain}.cart-item-info p{font-size:10px;color:var(--red);font-weight:800;margin:0 0 5px}.cart-item-info h2{font-size:16px;margin:0 0 6px}.cart-item-info span{font-size:11px;color:var(--muted)}.cart-quantity{font-size:10px;color:var(--muted)}.cart-quantity input{width:100%;height:38px;margin-top:5px;border:1px solid var(--line);border-radius:var(--r-sm);padding:0 8px}.cart-item-price{display:flex;flex-direction:column;text-align:right}.cart-item-price small{font-size:10px;color:var(--muted);margin-top:4px}.remove-item{border:0;background:transparent;color:#8c8c8c;font-size:24px;cursor:pointer}.remove-item:hover{color:var(--red)}.cart-summary{position:sticky;top:95px;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;height:max-content;background:#fff;box-shadow:var(--elev-4)}.cart-summary h2{margin:0 0 18px}.cart-summary label{display:block;font-size:11px;font-weight:600;margin-top:12px}.cart-summary input,.cart-summary textarea{width:100%;margin-top:5px;border:1px solid var(--line);border-radius:var(--r-sm);padding:11px;resize:vertical}.summary-total{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin:20px 0;padding-top:16px}.summary-total span{font-size:12px;color:var(--muted)}.summary-total strong{font-size:20px}.cart-summary .quote-button{height:52px}.form-error{color:var(--red)!important}
@media(max-width:900px){.cart-layout{grid-template-columns:1fr}.cart-summary{position:static}.cart-item{grid-template-columns:90px 1fr 70px}.cart-item-image{width:90px;height:85px}.cart-item-price{grid-column:2;text-align:left}.remove-item{grid-column:3;grid-row:1}}@media(max-width:560px){.cart-item{grid-template-columns:72px 1fr 28px;gap:10px}.cart-item-image{width:72px;height:72px}.cart-quantity{grid-column:2;width:80px}.cart-item-price{grid-column:2}.remove-item{grid-column:3}.add-to-cart-row{grid-template-columns:86px 1fr}.header-actions .back-link{display:none}}
.form-success{color:#16803c!important;font-weight:800}.website-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}.quote-button:disabled{opacity:.65;cursor:wait}
.quote-success-panel{max-width:920px;margin:54px auto 20px;padding:clamp(38px,6vw,72px) clamp(24px,7vw,82px);border:1px solid #9edcbc;border-radius:var(--r-lg);background:linear-gradient(145deg,#effcf5,#e2f8ec);color:#174d33;text-align:center;box-shadow:0 28px 80px rgba(24,129,77,.15);outline:none}.quote-success-icon{display:grid;place-items:center;width:82px;height:82px;margin:0 auto 24px;border-radius:50%;background:linear-gradient(135deg,#20a86a,#57c77b);color:#fff;font-size:43px;font-weight:800;box-shadow:0 14px 32px rgba(32,168,106,.28)}.quote-success-panel .eyebrow{margin:0 0 12px;color:#18814d}.quote-success-panel h1,.quote-success-panel h2{margin:0;font-size:clamp(34px,5vw,58px);line-height:1.04;letter-spacing:-.055em}.quote-success-panel>p:not(.eyebrow){max-width:650px;margin:20px auto 30px;color:#47725d;font-size:clamp(15px,1.7vw,18px);line-height:1.7}.quote-success-action{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:54px;padding:0 24px;border-radius:var(--r-sm);background:linear-gradient(115deg,var(--brand-teal),var(--brand-green));color:#fff;font-weight:800;box-shadow:0 12px 28px rgba(33,181,201,.2);transition:transform .2s,box-shadow .2s}.quote-success-action:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(33,181,201,.28)}
@media(max-width:560px){.quote-success-panel{margin-top:24px;padding:38px 20px;border-radius:var(--r-lg)}.quote-success-icon{width:68px;height:68px;font-size:36px}.quote-success-action{width:100%}}

/* Jednostavan višestepeni meni v31 */
.categories-toggle span{display:inline-block;transition:transform .2s ease}.categories-toggle[aria-expanded="true"] span{transform:rotate(180deg)}
.categories-menu{padding:0;overflow:hidden}.categories-grid{display:block}.category-browser{display:grid;grid-template-columns:.9fr 1fr 1.15fr;min-height:430px;max-height:calc(100vh - 150px);background:#fff;animation:menu-reveal .2s ease both}.category-level{min-width:0;padding:24px;overflow:auto;border-right:1px solid var(--line)}.category-level:last-child{border-right:0}.category-level-secondary{background:#fafafa}.category-level-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;min-height:52px;margin-bottom:13px}.category-level-heading>div{display:flex;flex-direction:column;gap:3px}.category-level-heading span{color:var(--red);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.category-level-heading strong{font-size:18px;line-height:1.2}.menu-all-link{flex:none;border:0;background:transparent;color:var(--red);padding:4px 0;font-size:11px;font-weight:800;cursor:pointer}.menu-step-list{display:flex;flex-direction:column;gap:4px}.menu-step-button{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto 14px;align-items:center;gap:9px;border:0;border-radius:var(--r-sm);background:transparent;padding:10px 11px;text-align:left;color:var(--ink);font-size:12px;font-weight:700;cursor:pointer;transition:background .16s ease,color .16s ease,transform .16s ease}.menu-step-button small{color:var(--muted);font-size:10px}.menu-step-button b{color:#8f8f8f;font-size:18px;font-weight:500}.menu-step-button:hover{background:#fff;transform:translateX(2px)}.category-level-primary .menu-step-button.active{background:var(--ink);color:#fff}.category-level-primary .menu-step-button.active small,.category-level-primary .menu-step-button.active b{color:#ddd}.category-level-secondary .menu-step-button.active{background:#fff;border:1px solid #ffd7da;color:var(--red);box-shadow:var(--elev-3)}.menu-featured-action{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;border:0;border-radius:var(--r-sm);background:var(--ink);color:#fff;padding:15px 16px;text-align:left;cursor:pointer}.menu-featured-action span{font-size:12px}.menu-featured-action b{font-size:19px}.menu-tertiary-list{display:flex;flex-direction:column;gap:7px;margin-top:13px}.menu-tertiary-list button,.menu-tertiary-list a{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #f0dfe1;border-radius:var(--r-sm);background:#fff;padding:12px 13px;color:var(--ink);font-size:12px;font-weight:800;text-align:left;cursor:pointer;transition:border-color .16s ease,transform .16s ease}.menu-tertiary-list button:hover,.menu-tertiary-list a:hover{border-color:var(--red);transform:translateX(2px)}.menu-tertiary-list button b,.menu-tertiary-list a b{color:var(--red);font-size:16px}.menu-empty-copy{margin:8px 0;color:var(--muted);font-size:12px;line-height:1.55}.categories-menu.hidden{display:none}@keyframes menu-reveal{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}
.category-mobile-toolbar{display:none}
@media(max-width:900px){.category-browser{grid-template-columns:.9fr 1fr}.category-level-tertiary{grid-column:1/-1;border-top:1px solid var(--line)}.menu-tertiary-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){body.menu-open{overflow:hidden}body.menu-open .catalog-nav{z-index:120}.categories-menu{position:fixed;z-index:110;inset:0;top:0;max-height:none;overflow:hidden;background:#fff}.categories-menu>.container{width:100%;height:100%;padding:0}.category-browser{display:flex;max-height:none;min-height:0;height:100dvh;flex-direction:column;overflow:hidden;animation:none}.category-mobile-toolbar{display:grid;grid-template-columns:82px 1fr 44px;align-items:center;gap:8px;min-height:70px;padding:11px 14px;border-bottom:1px solid var(--line);background:#fff}.category-mobile-toolbar>div{display:grid;gap:2px;text-align:center}.category-mobile-toolbar small{color:var(--brand-teal-dark);font-size:10px;font-weight:800;letter-spacing:.14em}.category-mobile-toolbar strong{font-size:13px}.category-mobile-back,.category-mobile-close{height:42px;border:0;border-radius:var(--r-sm);background:var(--brand-soft);color:var(--ink);font-weight:800;cursor:pointer}.category-mobile-back{display:flex;align-items:center;justify-content:center;gap:6px}.category-mobile-back:disabled{visibility:hidden}.category-mobile-close{font-size:25px}.category-level{display:none;flex:1;overflow:auto;border:0;padding:20px 16px 30px}.category-browser[data-mobile-step="1"] .category-level-primary,.category-browser[data-mobile-step="2"] .category-level-secondary,.category-browser[data-mobile-step="3"] .category-level-tertiary{display:block}.category-level-heading{min-height:0;margin-bottom:16px}.category-level-heading strong{font-size:20px}.menu-step-list,.menu-tertiary-list{display:grid;grid-template-columns:1fr;gap:8px}.menu-step-button{min-height:52px;padding:12px 13px;border:1px solid var(--line);background:#fff;font-size:13px}.category-level-primary .menu-step-button.active{border-color:var(--ink)}.category-level-secondary{background:#fafcfb}.category-level-tertiary{background:linear-gradient(145deg,#fff 0%,#f3fbf8 100%)}.menu-featured-action{min-height:58px}.menu-tertiary-list button,.menu-tertiary-list a{min-height:52px;padding:13px}.menu-all-link{padding:8px 0;font-size:12px}}

/* v66 - veza ka Demo Group sajtu */
.group-site-nav-link,.group-site-header-link{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border:1px solid #b9ddd5;border-radius:999px;color:var(--brand-teal-dark);font-size:12px;font-weight:800;transition:.2s ease}
.group-site-nav-link{padding:9px 13px}
.group-site-header-link{padding:9px 12px}
.group-site-nav-link:hover,.group-site-header-link:hover{border-color:var(--brand-teal-dark);background:var(--brand-mint);transform:translateY(-1px)}
@media(max-width:700px){.group-site-nav-link{font-size:11px;padding:9px 11px}.group-site-header-link{font-size:10px;padding:8px}.header-actions{gap:7px}}
@media(max-width:430px){.category-level-heading strong{font-size:18px}}

/* Izdvojene kolekcije i hero detalji v32 */
.hero-actions{display:flex;align-items:center;gap:10px;margin-top:26px}.hero-actions a{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:47px;padding:0 18px;border-radius:var(--r-sm);font-size:12px;font-weight:800;transition:transform .18s ease,background .18s ease,border-color .18s ease}.hero-action-primary{background:var(--red);color:#fff}.hero-action-primary:hover{background:var(--red-dark);transform:translateY(-2px)}.hero-action-secondary{border:1px solid rgba(255,255,255,.25);color:#fff}.hero-action-secondary:hover{border-color:rgba(255,255,255,.55);transform:translateY(-2px)}
.home-highlights{background:#f5f5f6;padding:40px 0 8px;scroll-margin-top:140px}.search-panel{scroll-margin-top:145px}.highlights-heading{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:22px}.highlights-heading h2{font-size:clamp(30px,4vw,46px);letter-spacing:-.045em;line-height:1;margin:7px 0 0}.highlights-heading>p{max-width:470px;margin:0;color:var(--muted);font-size:13px;line-height:1.65}.highlight-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.highlight-card{position:relative;isolation:isolate;min-height:235px;overflow:hidden;border:1px solid rgba(20,20,24,.08);border-radius:var(--r-lg);padding:24px;background:#fff;color:var(--ink);text-align:left;cursor:pointer;box-shadow:var(--elev-3);transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,border-color .25s ease}.highlight-card:hover{transform:translateY(-6px);box-shadow:var(--elev-4);border-color:rgba(226,30,43,.24)}.highlight-kicker,.highlight-description,.highlight-card small,.highlight-link{position:relative;z-index:2;display:block}.highlight-kicker{max-width:230px;color:var(--red);font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}.highlight-card>strong{position:relative;z-index:2;display:block;max-width:72%;margin:11px 0 4px;font-size:25px;line-height:1.06;letter-spacing:-.035em}.highlight-description{max-width:65%;color:var(--muted);font-size:12px;line-height:1.45}.highlight-card small{margin-top:16px;color:#707078;font-size:10px}.highlight-card small b{color:var(--ink);font-size:12px}.highlight-link{margin-top:21px;font-size:11px;font-weight:800}.highlight-link b{margin-left:6px;color:var(--red);font-size:16px}.highlight-art{position:absolute;z-index:1;right:-25px;bottom:-30px;width:175px;height:175px;border-radius:50%;background:linear-gradient(145deg,#fff,#ececef);box-shadow:inset 0 0 0 1px rgba(20,20,24,.04)}.highlight-art i{position:absolute;display:block;border-radius:var(--r-lg);background:#202024;box-shadow:var(--elev-3);transform:rotate(-10deg)}.highlight-art i:nth-child(1){width:64px;height:82px;left:34px;top:37px}.highlight-art i:nth-child(2){width:52px;height:64px;left:88px;top:60px;background:var(--red);transform:rotate(12deg)}.highlight-art i:nth-child(3){width:30px;height:30px;left:74px;top:25px;border-radius:50%;background:#fff;border:5px solid #d7d7dc;box-shadow:none}.highlight-home .highlight-art{background:linear-gradient(145deg,#fff7f7,#f1dfe1)}.highlight-home .highlight-art i:nth-child(1){width:76px;height:76px;border-radius:var(--r-sm) 8px 30px 30px;background:#fff;border:8px solid #202024;box-shadow:none}.highlight-home .highlight-art i:nth-child(2){width:38px;height:44px;left:100px;top:54px;border:8px solid var(--red);border-left:0;border-radius:0 22px 22px 0;background:transparent;box-shadow:none;transform:none}.highlight-home .highlight-art i:nth-child(3){width:46px;height:8px;left:48px;top:78px;border:0;border-radius:999px;background:var(--red)}.highlight-tech .highlight-art{background:linear-gradient(145deg,#f1f5ff,#dfe7fb)}.highlight-tech .highlight-art i:nth-child(1){width:62px;height:104px;left:47px;top:27px;border-radius:var(--r-md);background:#1d2535}.highlight-tech .highlight-art i:nth-child(2){width:38px;height:38px;left:88px;top:75px;border-radius:50%;background:var(--red);transform:none}.highlight-tech .highlight-art i:nth-child(3){width:18px;height:5px;left:69px;top:38px;border:0;border-radius:999px;background:#fff}.catalog-hero .hero-inner>div:first-child{animation:hero-copy-in .55s cubic-bezier(.2,.7,.2,1) both}.hero-badge{animation:hero-badge-in .65s .08s cubic-bezier(.2,.7,.2,1) both}.highlight-card{animation:highlight-in .48s cubic-bezier(.2,.7,.2,1) both}.highlight-card:nth-child(2){animation-delay:.08s}.highlight-card:nth-child(3){animation-delay:.16s}@keyframes hero-copy-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes hero-badge-in{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}@keyframes highlight-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:950px){.highlight-grid{grid-template-columns:1fr 1fr}.highlight-card:last-child{grid-column:1/-1}.highlight-card:last-child .highlight-description{max-width:78%}}
@media(max-width:700px){.hero-actions{align-items:stretch;flex-direction:column}.hero-actions a{width:100%}.highlights-heading{align-items:start;flex-direction:column;gap:12px}.highlight-grid{grid-template-columns:1fr}.highlight-card:last-child{grid-column:auto}.highlight-card{min-height:220px}.highlight-card>strong{font-size:23px}.highlight-art{right:-34px}.home-highlights{padding-top:30px}}
@media(prefers-reduced-motion:reduce){.catalog-hero .hero-inner>div:first-child,.hero-badge,.highlight-card{animation:none}.hero-actions a,.highlight-card,.highlight-art i{transition:none}}

/* Automatske oznake i Noviteti v33 */
.product-status-badges{position:absolute;z-index:5;top:12px;right:12px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;pointer-events:none}.status-badge{min-width:35px;height:35px;padding:0 8px;border-radius:var(--r-xs);display:grid;place-items:center;color:#fff;font-size:11px;font-weight:800;letter-spacing:.035em;box-shadow:var(--elev-3)}.status-new{background:#08a5b2}.status-sublimation{background:linear-gradient(135deg,#e72e7c 0%,#ff8c18 24%,#f4d90b 43%,#25b86d 62%,#1685dc 80%,#783dcc 100%);font-size:17px;text-shadow:0 1px 3px rgba(0,0,0,.34)}.status-hit{background:#d60038;font-size:18px}.product-page-badges{display:flex;align-items:center;gap:8px;min-height:35px;margin:8px 0 3px}.product-page-badges:empty{display:none}.product-page-badges .status-badge{position:static;display:grid}
.home-new-products{padding:55px 0 58px;background:#fff;overflow:hidden}.new-products-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px}.new-products-heading h2{margin:7px 0 0;font-size:clamp(32px,4vw,48px);line-height:1;letter-spacing:-.05em}.new-products-controls{display:flex;gap:8px}.new-products-controls button{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);font-size:18px;cursor:pointer;transition:border-color .18s ease,background .18s ease,color .18s ease,transform .18s ease}.new-products-controls button:hover{border-color:var(--ink);background:var(--ink);color:#fff;transform:translateY(-2px)}.new-products-message{margin:14px 0;color:var(--muted);font-size:13px}.new-products-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px)/4);gap:16px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:inline mandatory;scrollbar-width:none;padding:2px 1px 20px}.new-products-track::-webkit-scrollbar{display:none}.new-products-track .product-card{scroll-snap-align:start;min-width:0;animation:new-card-in .45s cubic-bezier(.2,.7,.2,1) both}.new-products-track .product-card:nth-child(2){animation-delay:.05s}.new-products-track .product-card:nth-child(3){animation-delay:.1s}.new-products-track .product-card:nth-child(4){animation-delay:.15s}@keyframes new-card-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:1000px){.new-products-track{grid-auto-columns:calc((100% - 32px)/3)}}
@media(max-width:700px){.home-new-products{padding:38px 0}.new-products-track{grid-auto-columns:min(78vw,290px);gap:12px}.new-products-controls button{width:38px;height:38px}.product-status-badges{top:9px;right:9px}.status-badge{min-width:31px;height:31px;border-radius:var(--r-xs)}.status-sublimation,.status-hit{font-size:15px}}
@media(prefers-reduced-motion:reduce){.new-products-track .product-card{animation:none}.new-products-controls button{transition:none}}

/* Dinamicki hero sa aktuelnim proizvodima v35 */
.catalog-hero{position:relative;overflow:hidden}.catalog-hero:before{content:"";position:absolute;right:-180px;top:-250px;width:650px;height:650px;border-radius:50%;background:radial-gradient(circle,rgba(226,30,43,.22),rgba(226,30,43,0) 68%);pointer-events:none}.hero-inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(410px,.85fr);align-items:center;gap:54px;min-height:520px;padding:45px 0}.hero-copy-column{position:relative;z-index:2}.catalog-hero h1{max-width:690px;font-size:clamp(46px,5vw,70px)}.hero-copy{max-width:620px}.hero-catalog-count{display:inline-flex;align-items:center;gap:11px;margin-top:18px;padding:8px 12px;border:1px solid rgba(255,255,255,.15);border-radius:999px;background:rgba(255,255,255,.06)}.hero-catalog-count strong{font-size:18px;line-height:1}.hero-catalog-count span{max-width:190px;color:#c9c9ce;font-size:10px;line-height:1.25}.hero-showcase{position:relative;z-index:3;height:420px;min-width:0}.hero-product-slides{position:relative;height:370px}.hero-product-slide{position:absolute;inset:0;overflow:hidden;border:1px solid rgba(255,255,255,.22);border-radius:var(--r-lg);background:linear-gradient(145deg,#fff 0%,#f1f1f4 62%,#e1e1e6 100%);color:var(--ink);box-shadow:0 26px 60px rgba(0,0,0,.28);opacity:0;visibility:hidden;transform:translateX(24px) scale(.985);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.7,.2,1),visibility .45s}.hero-product-slide.active{opacity:1;visibility:visible;transform:translateX(0) scale(1)}.hero-product-kicker{position:absolute;z-index:4;left:18px;top:17px;padding:7px 9px;border-radius:var(--r-xs);background:#08a5b2;color:#fff;font-size:10px;font-weight:800;letter-spacing:.08em}.hero-product-image{position:absolute;right:0;top:0;width:62%;height:68%;display:grid;place-items:center;overflow:hidden}.hero-product-image:before{content:"";position:absolute;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,#fff 0%,rgba(255,255,255,.45) 55%,rgba(255,255,255,0) 72%)}.hero-product-image img{position:relative;z-index:2;width:100%;height:100%;padding:20px;object-fit:contain;mix-blend-mode:multiply;filter:drop-shadow(0 16px 16px rgba(20,20,24,.13))}.hero-product-image.no-image:after{content:"DemoShop";color:#8c8c8c;font-weight:800;letter-spacing:.06em}.hero-product-copy{position:absolute;z-index:3;left:0;right:0;bottom:0;min-height:180px;padding:22px 23px 19px;background:linear-gradient(180deg,rgba(255,255,255,.72),#fff 24%);border-top:1px solid rgba(20,20,24,.06)}.hero-product-copy>small{display:block;color:var(--red);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.hero-product-copy>strong{display:block;max-width:82%;margin-top:5px;font-size:25px;line-height:1.05;letter-spacing:-.035em}.hero-product-copy>p{max-width:86%;margin:7px 0 0;color:var(--muted);font-size:11px;line-height:1.35}.hero-product-meta{display:flex;align-items:center;gap:9px;margin-top:12px}.hero-product-meta>b{font-size:15px}.hero-product-stock{padding:5px 7px;border-radius:999px;background:#f2f2f4;color:#666;font-size:10px;font-style:normal;font-weight:800}.hero-product-stock-available{background:#eaf8f1;color:#087a45}.hero-product-stock-low{background:#fff4e5;color:#d95700}.hero-product-stock-empty{background:#fff0f1;color:#b42318}.hero-product-copy>em{position:absolute;right:22px;bottom:20px;color:var(--ink);font-size:10px;font-style:normal;font-weight:800}.hero-product-copy>em b{margin-left:4px;color:var(--red);font-size:15px}.hero-showcase-controls{height:50px;display:flex;align-items:center;justify-content:center;gap:13px}.hero-showcase-controls>button{width:34px;height:34px;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(255,255,255,.07);color:#fff;cursor:pointer;transition:background .18s ease,border-color .18s ease}.hero-showcase-controls>button:hover{background:var(--red);border-color:var(--red)}.hero-showcase-dots{display:flex;align-items:center;gap:6px}.hero-showcase-dots button{width:7px;height:7px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.3);cursor:pointer;transition:width .2s ease,background .2s ease}.hero-showcase-dots button.active{width:24px;background:#fff}.hero-showcase-loading,.hero-showcase-fallback{height:370px;border:1px solid rgba(255,255,255,.15);border-radius:var(--r-lg);background:rgba(255,255,255,.055);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;color:#fff}.hero-showcase-loading span{width:40px;height:40px;border:3px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:hero-loading 1s linear infinite}.hero-showcase-loading strong{font-size:12px}.hero-showcase-fallback{align-items:flex-start;padding:34px;text-align:left}.hero-showcase-fallback span{color:#ff6a73;font-size:10px;font-weight:800;letter-spacing:.13em}.hero-showcase-fallback strong{max-width:330px;font-size:34px;line-height:1.05;letter-spacing:-.045em}.hero-showcase-fallback p{max-width:300px;margin:0;color:#c9c9ce;font-size:13px;line-height:1.55}@keyframes hero-loading{to{transform:rotate(360deg)}}
@media(max-width:1000px){.hero-inner{grid-template-columns:minmax(0,1fr) minmax(350px,.8fr);gap:30px}.hero-showcase{height:390px}.hero-product-slides{height:340px}.hero-product-copy{min-height:172px}.hero-product-copy>strong{font-size:22px}}
@media(max-width:760px){.hero-inner{display:grid;grid-template-columns:1fr;gap:23px;min-height:0;padding:38px 0 27px}.catalog-hero h1{font-size:44px}.hero-copy{font-size:15px}.hero-catalog-count{margin-top:12px}.hero-showcase{height:374px}.hero-product-slides,.hero-showcase-loading,.hero-showcase-fallback{height:324px}.hero-product-image{width:75%;height:61%}.hero-product-copy{min-height:172px;padding:19px 18px 16px}.hero-product-copy>strong{font-size:22px}.hero-product-copy>p{max-width:78%;font-size:10px}.hero-product-copy>em{right:18px;bottom:17px}.hero-actions{margin-top:17px}}
@media(max-width:430px){.catalog-hero h1{font-size:40px}.hero-product-copy>strong{max-width:100%;font-size:20px}.hero-product-copy>p{display:none}.hero-product-meta{margin-top:10px;align-items:flex-start;flex-direction:column;gap:5px}.hero-product-copy>em{font-size:0}.hero-product-copy>em b{font-size:18px}.hero-product-image{width:82%}}
@media(prefers-reduced-motion:reduce){.hero-product-slide{transition:none}.hero-showcase-loading span{animation:none}}

/* Novo meni, varijante i najavljeni dolasci v36 */
.new-menu-wrap{position:relative}.new-menu-toggle{display:flex;align-items:center;gap:6px}.new-menu-toggle span{font-size:12px;transition:transform .18s ease}.new-menu-toggle[aria-expanded="true"] span{transform:rotate(180deg)}.new-menu{position:absolute;z-index:60;left:0;top:calc(100% + 7px);width:230px;padding:7px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;box-shadow:var(--elev-4);animation:menu-reveal .18s ease both}.new-menu button{width:100%;display:flex;align-items:flex-start;flex-direction:column;gap:3px;padding:11px 12px!important;text-align:left;border-radius:var(--r-sm)!important}.new-menu button:hover{background:#fff4f5!important}.new-menu strong{font-size:12px}.new-menu small{color:var(--muted);font-size:10px;font-weight:600;line-height:1.35}.status-organic{height:39px;min-width:44px;padding:4px 5px;border:1.5px solid #10a34a;background:#fff;color:#0a8b3d;font-size:7px;line-height:1;box-shadow:0 5px 14px rgba(10,139,61,.12)}.status-organic i{position:relative;width:13px;height:11px;margin-bottom:1px}.status-organic i:before,.status-organic i:after{content:"";position:absolute;bottom:0;width:7px;height:10px;border:1.5px solid #10a34a;border-radius:var(--r-sm) 1px 8px 1px;transform:rotate(-25deg)}.status-organic i:after{right:0;transform:scaleX(-1) rotate(-25deg)}.card-variant-previews{display:flex;align-items:center;gap:6px;min-height:43px;margin:-5px 0 10px}.card-variant-previews button{width:38px;height:38px;padding:2px;border:1px solid transparent;border-radius:7px;background:#fff;cursor:pointer;overflow:hidden;transition:border-color .16s ease,transform .16s ease}.card-variant-previews button:hover,.card-variant-previews button:focus-visible,.card-variant-previews button.active{border-color:#adb5c4;transform:translateY(-1px)}.card-variant-previews img{width:100%;height:100%;object-fit:contain}.card-variant-previews small{margin-left:2px;color:var(--muted);font-size:10px}.card-media.previewing-variant .card-image-primary{opacity:1!important;transform:none!important}.card-media.previewing-variant .card-image-hover{opacity:0!important}.card-arrival{display:flex;align-items:center;gap:8px;margin:-7px 0 12px;padding:0 3px;color:#2878f0}.card-arrival>span:last-child{display:flex;flex-direction:column;gap:2px}.card-arrival strong{font-size:11px;line-height:1.15}.card-arrival small{color:#5b6575;font-size:10px;line-height:1.2}.arrival-truck{position:relative;flex:none;width:16px;height:10px;border:1.5px solid currentColor;border-radius:var(--r-2xs)}.arrival-truck:before{content:"";position:absolute;right:-5px;bottom:-1.5px;width:5px;height:7px;border:1.5px solid currentColor;border-left:0;border-radius:0 2px 2px 0}.arrival-truck:after{content:"";position:absolute;left:2px;bottom:-4px;width:3px;height:3px;border:1.5px solid currentColor;border-radius:50%;background:#fff;box-shadow:10px 0 0 -1.5px #fff,10px 0 0 0 currentColor}.pagination.hidden{display:none}
.status-origin{position:relative;height:39px;min-width:44px;padding:13px 4px 3px;border:1.5px solid currentColor;border-radius:var(--r-2xs);background:#fff;box-shadow:var(--elev-2);font-size:6px;line-height:.9}.status-origin i{position:absolute;left:0;right:0;top:0;height:10px;border-radius:var(--r-2xs) 1px 0 0}.status-origin b,.status-origin small{display:block;font:inherit;font-weight:800}.status-swiss{color:#d30a35}.status-swiss i{background:linear-gradient(90deg,#d30a35 0 38%,#fff 38% 62%,#d30a35 62%)}.status-italy{color:#168442}.status-italy i{background:linear-gradient(90deg,#159447 0 33.33%,#fff 33.33% 66.66%,#d91e36 66.66%)}.status-rpet{position:relative;height:37px;min-width:44px;padding:0 4px;border:1.5px solid #169447;border-radius:var(--r-2xs);background:#fff;color:#087c36;box-shadow:0 5px 14px rgba(8,124,54,.12);font-size:9px}.status-rpet:before,.status-rpet:after{content:"↻";position:absolute;top:50%;font-size:12px;transform:translateY(-50%)}.status-rpet:before{left:1px}.status-rpet:after{right:1px;transform:translateY(-50%) scaleX(-1)}.status-rpet b{font-size:9px;letter-spacing:-.02em}
@media(max-width:700px){.new-menu-wrap{position:static}.new-menu{position:fixed;left:12px;right:12px;top:130px;width:auto}.card-variant-previews button{width:35px;height:35px}.card-arrival strong{font-size:10px}.card-arrival small{font-size:10px}.status-organic{height:35px;min-width:40px}}

/* Kompaktan meni i lager na karticama v34 */
.product-card{display:flex;flex-direction:column}.card-image-link{display:block}.card-content{display:flex;flex:1;flex-direction:column}.card-stock{display:flex;align-items:center;gap:9px;min-height:39px;margin:0 0 13px;padding:8px 10px;border-radius:var(--r-sm);background:#f7f7f8}.card-stock-dot{flex:none;width:8px;height:8px;border-radius:50%;background:#a8a8af;box-shadow:0 0 0 4px rgba(168,168,175,.12)}.card-stock>span:last-child{display:flex;min-width:0;flex-direction:column;gap:2px}.card-stock strong{font-size:11px;line-height:1.2}.card-stock small{color:var(--muted);font-size:10px;line-height:1.2}.card-stock-available{background:#f1fbf6}.card-stock-available .card-stock-dot{background:#12b76a;box-shadow:0 0 0 4px rgba(18,183,106,.12)}.card-stock-available strong{color:#087a45}.card-stock-low{background:#fff8ed}.card-stock-low .card-stock-dot{background:#f57812;box-shadow:0 0 0 4px rgba(245,120,18,.12)}.card-stock-low strong{color:#d95700}.card-stock-empty{background:#fff4f5}.card-stock-empty .card-stock-dot{background:#d92d20;box-shadow:0 0 0 4px rgba(217,45,32,.11)}.card-stock-empty strong{color:#b42318}.card-stock-unavailable strong,.card-stock-loading strong{color:#74747c}.card-meta{margin-top:auto}

@media(min-width:701px){.categories-menu{overflow:visible;max-height:none;padding:8px 0 0;background:transparent;border:0;box-shadow:none;pointer-events:none}.categories-menu>.container{pointer-events:auto}.category-browser{min-height:0;max-height:none;align-items:start;background:transparent;animation:menu-reveal .18s ease both;}.category-level{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--elev-4);}.category-level-secondary{background:#fbfbfc}.category-level-tertiary{background:linear-gradient(145deg,#fff 0%,#fff7f8 100%)}.category-level-heading{min-height:0;gap:8px;}.category-level-heading span{display:none}.category-level-heading strong{letter-spacing:-.01em;}.menu-all-link{padding:2px 0;font-size:10px}.menu-step-list{gap:2px}.menu-step-button{grid-template-columns:minmax(0,1fr) auto 10px;gap:6px;padding:8px;border-radius:var(--r-xs);font-size:11px;font-weight:700}.menu-step-button small{font-size:10px}.menu-step-button b{font-size:15px}.menu-featured-action{gap:9px;padding:10px 11px;border-radius:var(--r-sm)}.menu-featured-action span{font-size:10px;line-height:1.35}.menu-featured-action b{font-size:15px}.menu-tertiary-list{gap:4px;margin-top:7px}.menu-tertiary-list button,.menu-tertiary-list a{gap:7px;padding:9px 10px;border-radius:var(--r-sm);font-size:10px}.menu-tertiary-list button b,.menu-tertiary-list a b{font-size:13px}.menu-empty-copy{margin:5px 0;font-size:10px}}

@media(max-width:700px){.card-stock{min-height:36px;margin-bottom:11px;padding:7px 8px}.card-stock strong{font-size:10px}.card-stock small{font-size:10px}}

/* Vece i potpuno vidljive slike proizvoda v37 */
.hero-showcase{height:440px}.hero-product-slides{height:390px}.hero-product-slide{background:linear-gradient(145deg,#fff 0%,#f7f7f9 100%)}.hero-product-image{left:0;right:0;top:0;width:100%;height:62%;padding:4px 58px 0}.hero-product-image:before{width:330px;height:260px}.hero-product-image img{position:absolute;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;padding:8px 64px 5px;object-fit:contain;object-position:center center;mix-blend-mode:multiply}.hero-product-copy{min-height:40%;padding:19px 23px 18px;background:#fff;border-top:1px solid rgba(20,20,24,.07)}.card-image{padding:8px}.new-products-track .card-media{background:#fff}.new-products-track .card-image{padding:4px}.new-products-track .card-image-primary{transform:none}
@media(max-width:1000px){.hero-showcase{height:420px}.hero-product-slides{height:370px}.hero-product-image{height:61%;padding-inline:42px}.hero-product-copy{min-height:41%}}
@media(max-width:760px){.hero-showcase{height:400px}.hero-product-slides,.hero-showcase-loading,.hero-showcase-fallback{height:350px}.hero-product-image{width:100%;height:60%;padding:4px 24px 0}.hero-product-image img{padding:6px 24px 4px}.hero-product-copy{min-height:42%;padding:17px 18px 15px}.new-products-track .card-image{padding:3px}}
@media(max-width:430px){.hero-product-image{width:100%;height:59%;padding-inline:14px}.hero-product-copy{min-height:43%}}

/* v48: pametni filteri kataloga */
.catalog-shell{width:min(1500px,calc(100% - 36px))}.catalog-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:30px;align-items:start}.catalog-results{min-width:0}.catalog-layout .product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.catalog-filters{position:sticky;top:144px;max-height:calc(100vh - 162px);overflow:auto;padding:3px 16px 24px 0;scrollbar-width:thin;scrollbar-color:#c9c9cf transparent}.filters-top{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:11px 0 14px;background:#fff;border-bottom:1px solid var(--line)}.filters-top strong{font-size:17px}.filters-top button{border:0;background:#fff3f4;color:var(--red);border-radius:var(--r-sm);padding:7px 9px;font-size:10px;font-weight:700;cursor:pointer}.filter-section{border-bottom:1px solid var(--line)}.filter-section summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 0;cursor:pointer;font-size:13px;font-weight:800}.filter-section summary::-webkit-details-marker{display:none}.filter-section summary:after{content:"⌄";color:#9b9ba3;transition:transform .18s}.filter-section[open] summary:after{transform:rotate(180deg)}.filter-options{display:flex;flex-direction:column;gap:9px;padding:0 0 15px}.filter-options.scrollable{max-height:220px;overflow:auto;padding-right:5px}.filter-option{display:grid;grid-template-columns:17px minmax(0,1fr) auto;align-items:center;gap:8px;color:#666674;font-size:12px;cursor:pointer}.filter-option input{width:15px;height:15px;margin:0;accent-color:var(--red)}.filter-option small{color:#8c8c8c;font-size:10px}.filter-option:has(input:checked){color:var(--ink);font-weight:800}.filter-category-tree{border-bottom:1px solid var(--line);padding:13px 0}.filter-category-title{font-size:13px;font-weight:800;margin-bottom:9px}.filter-category-list{display:flex;flex-direction:column;gap:4px}.filter-category-list button{border:0;background:transparent;text-align:left;display:flex;justify-content:space-between;gap:8px;padding:6px 5px;border-radius:var(--r-xs);color:#5f5f6d;font-size:11px;cursor:pointer}.filter-category-list button:hover,.filter-category-list button.active{background:#fff3f4;color:var(--red);font-weight:700}.filter-category-list button.sub{padding-left:16px}.filter-category-list small{color:#8c8c8c}.price-filter{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding-bottom:15px}.price-filter input{min-width:0;width:100%;height:38px;border:1px solid var(--line);border-radius:var(--r-sm);padding:0 9px;font-size:11px}.price-filter button{grid-column:1/-1;border:0;border-radius:var(--r-sm);background:var(--ink);color:#fff;height:34px;font-size:11px;font-weight:700;cursor:pointer}.filters-loading,.filters-empty{color:var(--muted);font-size:11px;padding:14px 0}.mobile-filters-toggle{display:none}.filter-chips{display:flex;flex-wrap:wrap;gap:7px}.filter-chip{border:1px solid #ffd8dc;background:#fff4f5;color:#a91d29;border-radius:999px;padding:6px 9px;font-size:10px;font-weight:800;cursor:pointer}@media(max-width:1250px){.catalog-layout .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:900px){.catalog-layout{display:block}.catalog-layout .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.mobile-filters-toggle{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:45px;margin:0 0 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;font-weight:800}.mobile-filters-toggle span{min-width:22px;height:22px;border-radius:999px;background:var(--red);color:#fff;display:grid;place-items:center;font-size:10px}.catalog-filters{display:none;position:fixed;z-index:80;inset:0 0 0 auto;width:min(360px,92vw);max-height:none;background:#fff;padding:18px 22px;box-shadow:-20px 0 50px rgba(0,0,0,.18)}.catalog-filters.open{display:block}.filters-top{top:-18px;padding-top:18px}.filters-top:before{content:"Filteri"}.filters-top>strong{display:none}}@media(max-width:700px){.catalog-layout .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog-shell{width:min(100% - 22px,1500px)}}

/* v49: PromoBox krugovi boja */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.color-filter-grid{display:flex;flex-wrap:wrap;gap:10px;padding:1px 2px 16px}.color-filter-option{position:relative;display:block;width:34px;height:34px;border-radius:50%;cursor:pointer}.color-filter-option input{position:absolute;opacity:0;pointer-events:none}.color-filter-option>span{display:block;width:34px;height:34px;border:1px solid #d5d7dc;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 2px #fff;transition:transform .16s ease,box-shadow .16s ease}.color-filter-option:hover>span{transform:scale(1.08)}.color-filter-option input:checked+span{box-shadow:inset 0 0 0 3px #fff,0 0 0 3px var(--ink);transform:scale(.92)}.color-filter-option input:focus-visible+span{outline:3px solid rgba(226,30,43,.28);outline-offset:3px}

/* Opis i tehničke specifikacije */
.product-extra{border-top:1px solid var(--line);padding-bottom:80px}.info-section{border-bottom:1px solid var(--line)}.info-section summary{list-style:none;cursor:pointer;padding:22px 2px;font-size:15px;font-weight:800;text-transform:uppercase;display:flex;justify-content:space-between}.info-section summary::-webkit-details-marker{display:none}.info-section summary:after{content:"+";font-size:21px;font-weight:500}.info-section[open] summary:after{content:"−"}.info-content{padding:0 2px 24px;max-width:1150px;color:#50505a;line-height:1.7;font-size:14px}.info-content p{white-space:pre-line}.specification-columns{display:grid;grid-template-columns:1fr 1fr;gap:70px;padding:0 2px 28px}.specification-columns h3{font-size:13px;text-transform:uppercase;letter-spacing:.05em;margin:8px 0 12px}.spec-list{margin:0}.spec-list>div{display:grid;grid-template-columns:1fr 1.2fr;gap:15px;border-bottom:1px solid #eee;padding:8px 0;font-size:12px}.spec-list dt{color:var(--muted)}.spec-list dd{margin:0;text-align:right;font-weight:600}.print-methods{display:flex;gap:7px;flex-wrap:wrap}.print-methods span{background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:7px 10px;font-size:11px;font-weight:600}.print-methods p{font-size:12px;color:var(--muted)}@media(max-width:760px){.specification-columns{grid-template-columns:1fr;gap:28px}.spec-list>div{grid-template-columns:1fr 1fr}}
/* v50 - PromoBox inspirisan naslovni baner i unapredjeni slider noviteta */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.promo-banner-section{padding:10px 0 0;background:#fff;overflow:hidden}
.promo-banner{position:relative;isolation:isolate}
.promo-banner-viewport{position:relative;height:clamp(370px,31vw,500px);overflow:hidden;border-radius:var(--r-lg);background:#e8e9ec;box-shadow:var(--elev-1)}
.promo-banner-slide{position:absolute;inset:0;display:grid;grid-template-columns:minmax(310px,.72fr) minmax(0,1.28fr);overflow:hidden;padding:clamp(34px,4vw,66px);opacity:0;visibility:hidden;transform:translateX(34px) scale(.99);transition:opacity .48s ease,transform .62s cubic-bezier(.2,.75,.2,1),visibility .48s}
.promo-banner-slide.active{opacity:1;visibility:visible;transform:translateX(0) scale(1)}
.promo-banner-slide:before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(112deg,#cbd1d7 0%,#f2f1f0 49%,#d8dde4 100%)}
.promo-banner-slide:after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:43%;background:rgba(255,255,255,.56);border-top:1px solid rgba(255,255,255,.72)}
.promo-banner-mobile:before{background:linear-gradient(112deg,#adb9c4 0%,#eef0f2 47%,#ccd5dc 100%)}
.promo-banner-audio:before{background:linear-gradient(115deg,#d7d0ca 0%,#f5f1ed 48%,#c7d1dc 100%)}
.promo-banner-copy{position:relative;z-index:5;align-self:start;max-width:520px}
.promo-banner-kicker{display:inline-flex;padding:7px 10px;border-radius:var(--r-xs);background:#fff;color:#202024;font-size:10px;font-weight:800;letter-spacing:.09em;box-shadow:var(--elev-3)}
.promo-banner-copy h1{margin:18px 0 8px;color:#111217;font-family:Georgia,"Times New Roman",serif;font-size:clamp(37px,4.15vw,66px);font-weight:500;line-height:.92;letter-spacing:-.065em}
.promo-banner-copy h1 em{color:#707a85;font-style:normal;font-weight:400}
.promo-banner-copy>p{margin:0;color:#30343a;font-size:clamp(14px,1.25vw,18px);font-weight:800;letter-spacing:.045em;text-transform:uppercase}
.promo-banner-actions{position:absolute;left:0;top:clamp(232px,18.5vw,300px);display:flex;flex-wrap:wrap;gap:8px;max-width:390px}
.promo-banner-actions a{display:inline-flex;align-items:center;gap:7px;padding:10px 12px;border:1px solid rgba(18,19,23,.18);border-radius:999px;background:rgba(255,255,255,.7);color:#17181c;font-size:10px;font-weight:800;text-decoration:none;backdrop-filter:blur(7px);transition:background .18s ease,transform .18s ease,border-color .18s ease}
.promo-banner-actions a:hover{background:#fff;border-color:#17181c;transform:translateY(-2px)}
.promo-banner-actions b{font-weight:800}
.promo-banner-products{position:relative;z-index:3;min-width:0;height:100%}
.promo-product{position:absolute;display:grid;place-items:center;width:53%;height:92%;top:-3%;filter:drop-shadow(0 24px 23px rgba(34,38,44,.18));transition:transform .65s cubic-bezier(.2,.75,.2,1)}
.promo-product-left{left:0;transform:rotate(-7deg) translateY(10px)}
.promo-product-right{right:-2%;transform:rotate(6deg) translateY(-1px)}
.active .promo-product-left{animation:promo-product-left-in .75s .08s both cubic-bezier(.2,.75,.2,1)}
.active .promo-product-right{animation:promo-product-right-in .8s .14s both cubic-bezier(.2,.75,.2,1)}
.promo-product img{position:relative;z-index:2;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.promo-product>span{position:absolute;z-index:4;right:4%;top:16%;display:grid;place-items:center;width:54px;height:54px;border:1px solid rgba(18,19,23,.35);border-radius:50%;background:rgba(255,255,255,.64);color:#1a1b20;font-size:10px;font-weight:800;text-align:center}
.promo-product>small{position:absolute;z-index:4;left:50%;bottom:4%;transform:translateX(-50%);width:max-content;max-width:210px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.78);color:#26282d;font-size:9px;font-weight:800;text-align:center;box-shadow:var(--elev-3)}
.promo-product.image-unavailable:before{content:"DemoShop";display:grid;place-items:center;width:72%;height:72%;border:1px solid rgba(20,20,24,.12);border-radius:var(--r-lg);background:rgba(255,255,255,.46);color:#999;font-size:22px;font-weight:800}
.promo-banner-single .promo-product{left:13%;top:-8%;width:76%;height:108%;transform:rotate(-4deg)}
.promo-banner-single .promo-product>span{right:10%;top:20%;width:62px;height:62px;font-size:20px}
.promo-banner-controls{display:flex;align-items:center;justify-content:center;gap:14px;height:58px}
.promo-banner-controls>button{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease}
.promo-banner-controls>button:hover{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateY(-2px)}
.promo-banner-dots{display:flex;align-items:center;gap:7px}
.promo-banner-dots button,.new-products-dots button{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:#cad3e0;cursor:pointer;transition:width .2s ease,background .2s ease}
.promo-banner-dots button.active,.new-products-dots button.active{width:25px;background:#33435c}
@keyframes promo-product-left-in{from{opacity:0;transform:translateX(50px) rotate(-12deg)}to{opacity:1;transform:rotate(-7deg) translateY(10px)}}
@keyframes promo-product-right-in{from{opacity:0;transform:translateX(80px) rotate(12deg)}to{opacity:1;transform:rotate(6deg) translateY(-1px)}}

.promo-banner-section+.home-new-products{padding-top:17px}
.new-products-heading{position:relative;display:flex;justify-content:center;align-items:center;margin-bottom:18px;text-align:center}
.new-products-heading .eyebrow{display:none}
.new-products-heading h2{font-size:clamp(34px,3.4vw,50px)}
.new-products-controls{position:absolute;right:0;top:50%;transform:translateY(-50%)}
.new-products-track{grid-auto-columns:calc((100% - 64px)/5);padding-bottom:15px}
.new-products-dots{display:flex;align-items:center;justify-content:center;gap:7px;min-height:18px;margin-top:1px}

@media(max-width:1180px){.promo-banner-slide{grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);padding:38px}.promo-banner-copy h1{font-size:48px}.promo-banner-actions{top:215px}.new-products-track{grid-auto-columns:calc((100% - 48px)/4)}}
@media(max-width:900px){.promo-banner-viewport{height:520px}.promo-banner-slide{grid-template-columns:1fr 1.25fr;padding:34px}.promo-banner-copy h1{font-size:42px}.promo-banner-actions{top:210px}.promo-product{width:64%}.promo-product-left{left:-8%}.promo-product-right{right:-13%}.new-products-track{grid-auto-columns:calc((100% - 32px)/3)}}
@media(max-width:700px){.promo-banner-section{padding-top:7px}.promo-banner-viewport{height:570px;border-radius:var(--r-md)}.promo-banner-slide{display:block;padding:27px 23px}.promo-banner-slide:after{height:48%}.promo-banner-copy{max-width:100%}.promo-banner-kicker{font-size:10px}.promo-banner-copy h1{margin-top:12px;font-size:37px;line-height:.96}.promo-banner-copy>p{font-size:12px}.promo-banner-actions{position:relative;top:auto;margin-top:15px;max-width:100%}.promo-banner-actions a{padding:8px 10px;font-size:10px}.promo-banner-products{position:absolute;left:12px;right:12px;bottom:10px;height:55%}.promo-product{height:100%;width:60%}.promo-product-left{left:-4%}.promo-product-right{right:-8%}.promo-product>span{width:42px;height:42px;font-size:8px}.promo-product>small{display:none}.promo-banner-single .promo-product{left:14%;top:-5%;width:76%;height:110%}.promo-banner-controls{height:50px}.promo-banner-section+.home-new-products{padding-top:11px}.new-products-heading{justify-content:flex-start;text-align:left;padding-right:96px}.new-products-controls{right:0}.new-products-track{grid-auto-columns:min(78vw,290px)}.new-products-dots{justify-content:flex-start;overflow:hidden}.new-products-dots button{flex:none}}
@media(prefers-reduced-motion:reduce){.promo-banner-slide,.promo-product,.promo-banner-actions a{animation:none!important;transition:none!important}}

/* v51 - kruzni slideri i dodatne promo price */
.new-products-viewport{overflow:hidden;margin:0 -1px}
.new-products-track{display:flex;grid-auto-flow:initial;grid-auto-columns:initial;gap:16px;overflow:visible;scroll-snap-type:none;scrollbar-width:auto;padding:2px 1px 20px;will-change:transform}
.new-products-track .product-card{flex:0 0 calc((100% - 64px)/5);scroll-snap-align:none}
.new-products-dots{max-width:100%;overflow:hidden}
.new-products-dots button{flex:none}

.home-promo-stories{padding:7px 0 48px;background:#fff;overflow:hidden}
.promo-stories-heading{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:18px}
.promo-stories-heading h2{margin:6px 0 0;font-size:clamp(29px,3.3vw,44px);line-height:1;letter-spacing:-.045em}
.promo-stories-arrows{display:flex;gap:8px}
.promo-stories-arrows button{display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);font-size:18px;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease}
.promo-stories-arrows button:hover{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateY(-2px)}
.promo-stories-viewport{overflow:hidden}
.promo-stories-track{display:flex;gap:14px;will-change:transform}
.promo-story{position:relative;isolation:isolate;flex:0 0 calc((100% - 28px)/3);height:285px;overflow:hidden;border-radius:var(--r-lg);padding:24px;color:#fff;background:#202126;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:box-shadow .2s ease}
.promo-story:before{content:"";position:absolute;z-index:-2;inset:0;background:radial-gradient(circle at 78% 28%,rgba(255,255,255,.18),transparent 44%),linear-gradient(135deg,#22252b,#0f1013)}
.promo-story:after{content:"";position:absolute;z-index:-1;right:-58px;bottom:-78px;width:245px;height:245px;border-radius:50%;background:rgba(255,255,255,.11)}
.promo-story:hover{box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),0 18px 35px rgba(20,20,24,.12)}
.promo-story>span,.promo-story>strong,.promo-story>small{position:relative;z-index:3;display:block;max-width:58%}
.promo-story>span{font-size:10px;font-weight:800;letter-spacing:.13em;color:#ff717b}
.promo-story>strong{margin-top:9px;font-size:26px;line-height:1.02;letter-spacing:-.035em}
.promo-story>small{margin-top:8px;color:rgba(255,255,255,.7);font-size:11px;line-height:1.4}
.promo-story img{position:absolute;z-index:2;right:-2%;bottom:-7%;width:58%;height:87%;object-fit:contain;mix-blend-mode:multiply;filter:drop-shadow(0 18px 16px rgba(0,0,0,.2));transition:transform .38s cubic-bezier(.2,.72,.2,1)}
.promo-story:hover img{transform:translateY(-5px) rotate(-2deg) scale(1.035)}
.promo-story-blue:before{background:radial-gradient(circle at 78% 25%,rgba(255,255,255,.22),transparent 45%),linear-gradient(135deg,#135d8a,#5aa9d2)}
.promo-story-blue>span{color:#fff}.promo-story-green:before{background:radial-gradient(circle at 78% 25%,rgba(255,255,255,.2),transparent 45%),linear-gradient(135deg,#184d3b,#77a77b)}
.promo-story-green>span{color:#d9ffd6}.promo-story-violet:before{background:radial-gradient(circle at 78% 25%,rgba(255,255,255,.2),transparent 45%),linear-gradient(135deg,#3d2a65,#9b75c5)}
.promo-story-violet>span{color:#f0dcff}.promo-story-paper{color:#191a1e}.promo-story-paper:before{background:radial-gradient(circle at 78% 25%,rgba(255,255,255,.4),transparent 45%),linear-gradient(135deg,#e3d7c6,#f8f2e9)}
.promo-story-paper>span{color:#9d502c}.promo-story-paper>small{color:#5f574f}.promo-story-rose{color:#281b1f}.promo-story-rose:before{background:radial-gradient(circle at 78% 25%,rgba(255,255,255,.42),transparent 45%),linear-gradient(135deg,#e7c5ca,#fff0f2)}
.promo-story-rose>span{color:#a73c55}.promo-story-rose>small{color:#6f555c}.promo-story-home{color:#162322}.promo-story-home:before{background:radial-gradient(circle at 78% 25%,rgba(255,255,255,.45),transparent 45%),linear-gradient(135deg,#c9e0db,#edf6f3)}
.promo-story-home>span{color:#16806e}.promo-story-home>small{color:#53706c}.promo-story-red:before{background:radial-gradient(circle at 78% 25%,rgba(255,255,255,.22),transparent 45%),linear-gradient(135deg,#7f1820,#dc3643)}
.promo-story-red>span{color:#ffd6d9}
.promo-stories-dots{display:flex;align-items:center;justify-content:center;gap:7px;min-height:22px;margin-top:15px;overflow:hidden}
.promo-stories-dots button{flex:none;width:8px;height:8px;padding:0;border:0;border-radius:999px;background:#cad3e0;cursor:pointer;transition:width .2s ease,background .2s ease}
.promo-stories-dots button.active{width:25px;background:#33435c}

@media(max-width:1180px){.new-products-track .product-card{flex-basis:calc((100% - 48px)/4)}.promo-story{flex-basis:calc((100% - 14px)/2)}}
@media(max-width:900px){.new-products-track .product-card{flex-basis:calc((100% - 32px)/3)}.promo-story{height:270px}}
@media(max-width:700px){.new-products-track .product-card{flex-basis:min(78vw,290px)}.home-promo-stories{padding-bottom:35px}.promo-stories-heading{align-items:center}.promo-stories-heading .eyebrow{display:none}.promo-stories-heading h2{font-size:29px}.promo-stories-arrows button{width:38px;height:38px}.promo-stories-track{gap:12px}.promo-story{flex-basis:min(84vw,330px);height:260px;padding:20px}.promo-story>strong{font-size:23px}.promo-stories-dots{justify-content:flex-start}.promo-story img{width:60%}}
@media(prefers-reduced-motion:reduce){.new-products-track,.promo-stories-track,.promo-story img{transition:none!important}}

/* v52: originalni slikovni PromoBox baneri (privremeni DemoShop sadržaj) */
.promo-banner-viewport{height:auto;aspect-ratio:3/1;border-radius:var(--r-md);background:#f2f3f5}
.promo-banner-slide.promo-banner-image-slide{display:block;padding:0;background:#f2f3f5;transform:translateX(28px);transition:opacity .45s ease,transform .58s cubic-bezier(.2,.75,.2,1),visibility .45s}
.promo-banner-slide.promo-banner-image-slide.active{transform:translateX(0)}
.promo-banner-slide.promo-banner-image-slide:before,.promo-banner-slide.promo-banner-image-slide:after{display:none}
.promo-banner-image-slide>a{display:block;width:100%;height:100%;overflow:hidden;border-radius:var(--r-md);background:#f2f3f5}
.promo-banner-image-slide img{display:block;width:100%;height:100%;object-fit:fill}
.promo-banner-dots{max-width:min(68vw,520px);overflow:hidden}
.promo-banner-dots button{flex:0 0 auto}
.portfolio-nav-link{margin-left:auto;padding:10px 13px;border-radius:var(--r-sm);color:var(--ink);font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap}.portfolio-nav-link:hover{background:var(--soft);color:var(--red)}
@media(max-width:700px){.promo-banner-viewport{aspect-ratio:3/1;min-height:0;border-radius:var(--r-sm)}.promo-banner-slide.promo-banner-image-slide{padding:0}.promo-banner-image-slide>a{border-radius:var(--r-sm)}.promo-banner-controls{height:46px;gap:10px}.promo-banner-dots{gap:5px;max-width:66vw}.promo-banner-dots button{width:6px;height:6px}.promo-banner-dots button.active{width:18px}}

/* v54 - DemoShop logo i nova tirkizno-zelena paleta */
:root{
  --brand-teal:#21b5c9;
  --brand-teal-dark:#168fa4;
  --brand-green:#61c560;
  --brand-lime:#78ca34;
  --brand-mint:#e9f8f3;
  --brand-soft:#f3faf7;
  --ink:#231f20;
  --muted:#68736f;
  --line:#dfe9e6;
  --soft:#f2f8f6;
  --shadow:0 20px 52px rgba(22,92,83,.12)
}
body{background:#fbfdfc}
.site-header{background:rgba(255,255,255,.95);border-bottom-color:#dce9e5;box-shadow:var(--elev-3)}
.brand{flex:none;width:154px;height:58px;gap:0;letter-spacing:0}
.brand-logo{display:block;width:154px;height:50px;object-fit:contain;object-position:left center}
.brand-mark,.brand>span:last-child{display:none}
.catalog-nav{background:rgba(250,253,252,.97);border-bottom-color:#dfe9e6}
.categories-toggle{color:var(--brand-teal-dark)!important}
.nav-inner button:hover,.nav-inner a:where(.quick-category):hover,.portfolio-nav-link:hover,.new-menu button:hover{background:var(--brand-mint)!important;color:#147f91}
.menu-subcategories button:hover,.portfolio-nav-link:hover,.related-products-heading>a,.measurement-document span,.document-item span,.helper a{color:var(--brand-teal-dark)}
.menu-category-title{border-bottom-color:var(--brand-teal)}
.active-filter{background:var(--brand-soft);border-color:#ccebe3}
.active-filter button{color:var(--brand-teal-dark)}
.eyebrow{color:var(--brand-teal-dark)}
.search-panel{border-color:#d9e9e4;box-shadow:0 12px 34px rgba(28,102,90,.06)}
.search-row input:focus,.cart-summary input:focus,.cart-summary textarea:focus,.price-filter input:focus{border-color:var(--brand-teal);outline:0;box-shadow:0 0 0 3px rgba(33,181,201,.13)}
.search-row button:not(.button-ghost),.quote-button,.portfolio-cta a{
  background:linear-gradient(115deg,var(--brand-teal),var(--brand-green));
  box-shadow:0 10px 24px rgba(33,181,201,.18)
}
.search-row button:not(.button-ghost):hover,.quote-button:hover,.portfolio-cta a:hover{background:linear-gradient(115deg,var(--brand-teal-dark),#46ad52)}
.product-card,.related-product-card,.cart-item,.cart-summary{border-color:#dfe9e6}
.product-card:hover,.related-product-card:hover{border-color:#a8ddd3;box-shadow:var(--shadow)}
.card-arrow,.cart-link,.header-cta{background:var(--ink)}
.card-arrow{transition:background .18s ease,transform .18s ease}
.product-card:hover .card-arrow{background:linear-gradient(135deg,var(--brand-teal),var(--brand-green));transform:translateX(2px)}
.variant-summary span,.print-methods span{background:var(--brand-soft)}
.thumb.active,.color-button.active,.size-button.active{border-color:var(--brand-teal);color:var(--brand-teal-dark);background:#f4fffc}
.gallery-modes button.active{background:linear-gradient(115deg,var(--brand-teal-dark),var(--brand-green))}
.color-photo-button.active{border-color:var(--brand-teal-dark);}
.filter-option input{accent-color:var(--brand-teal-dark)}
.filter-category-list button:hover,.filter-category-list button.active{background:var(--brand-mint);color:var(--brand-teal-dark)}
.filters-top button,.filter-chip{background:var(--brand-soft);border-color:#ccebe3;color:#147f91}
.mobile-filters-toggle span,.cart-count.has-items{background:linear-gradient(135deg,var(--brand-teal),var(--brand-green))}
.color-filter-option input:focus-visible+span{outline-color:rgba(33,181,201,.32)}

/* v71: veći uzorci boja i jasna početna navigacija */
.card-variant-previews{gap:8px;min-height:52px}.card-variant-previews button{flex:0 0 46px;width:46px;height:46px;padding:3px;border-radius:9px}
.color-filter-grid{gap:12px}.color-filter-option,.color-filter-option>span{width:42px;height:42px}
.home-nav-link{font-weight:800;color:var(--brand-teal-dark)}
.color-button{min-width:58px;height:54px;padding:0 12px;font-size:14px}
html,body{overflow-x:hidden}
.required-mark{color:var(--red);font-weight:800}
@media(max-width:700px){.card-variant-previews button{flex-basis:42px;width:42px;height:42px}.color-filter-option,.color-filter-option>span{width:40px;height:40px}.home-nav-link{flex:none}}
.status-new{background:linear-gradient(135deg,var(--brand-teal),#24a9b9 52%,var(--brand-green))}
.status-hit{background:#d60038}
.promo-banner-controls>button:hover,.new-products-controls button:hover,.promo-stories-arrows button:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.promo-banner-dots button.active,.new-products-dots button.active,.promo-stories-dots button.active{background:linear-gradient(90deg,var(--brand-teal),var(--brand-green))}
.promo-story-red:before{background:radial-gradient(circle at 78% 25%,rgba(255,255,255,.24),transparent 45%),linear-gradient(135deg,#126f7d,#55bd65)}
.promo-story-red>span{color:#e8fff0}
.promo-story-rose{color:#18312e}.promo-story-rose:before{background:radial-gradient(circle at 78% 25%,rgba(255,255,255,.5),transparent 45%),linear-gradient(135deg,#d9f1eb,#f5fbf9)}
.promo-story-rose>span{color:#168f80}.promo-story-rose>small{color:#4f706a}
.site-footer{background:var(--ink);border-top:0;color:#c7d4d0}
.site-footer .container:before{content:"";display:inline-block;width:25px;height:25px;margin-right:10px;vertical-align:middle;background:url("assets/brand/demoshop-icon-transparent-v59.png") center/contain no-repeat}
.document-item:not(.document-item-static):hover{border-color:var(--brand-teal)}
@media(max-width:700px){
  .brand{width:126px;height:54px}.brand-logo{width:126px;height:43px}
  .header-inner{gap:12px}.header-actions{gap:10px}
}

/* DemoShop V83: pregledan katalog i PromoBox-inspirisani filteri */
.catalog-shell{width:min(1460px,calc(100% - 40px))}
.catalog-layout{grid-template-columns:292px minmax(0,1fr);gap:34px}
.catalog-filters{top:132px;max-height:calc(100vh - 150px);padding:0 20px 28px 0}
.filters-top{padding:15px 0 16px}
.filters-top strong{font-size:19px;letter-spacing:-.02em}
.filters-top button{padding:8px 11px;border-radius:var(--r-sm);background:#fff0f1;color:#d62d3e}
.filter-section{border-bottom:1px solid #e5ecea}
.filter-section>summary{padding:17px 2px;font-size:14px;font-weight:700}
.filter-section>summary small{margin-left:auto;color:#a5afad;font-size:10px;font-weight:700}
.filter-section>summary:after{content:"⌃";margin-left:8px;color:#91a09d;font-size:13px}
.category-filter-section{border-bottom:0}
.filter-category-tree{padding:0;border-bottom:1px solid #e5ecea}
.filter-category-list{gap:0;padding:0 0 14px}
.filter-category-group{border-bottom:1px solid #f0f3f2}
.filter-category-group:last-child{border-bottom:0}
.filter-category-group>summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto 14px;align-items:center;gap:8px;padding:10px 3px;color:#566460;font-size:13px;cursor:pointer}
.filter-category-group>summary::-webkit-details-marker{display:none}
.filter-category-group>summary:after{content:"⌄";color:#9aa8a5;transition:transform .18s ease}
.filter-category-group[open]>summary{color:#10231f;font-weight:800}
.filter-category-group[open]>summary:after{transform:rotate(180deg)}
.filter-category-group>summary small,.filter-category-sublist small{color:#a4aeac;font-size:10px;font-weight:600}
.filter-category-sublist{display:flex;flex-direction:column;gap:3px;padding:0 0 10px 10px}
.filter-category-list button.sub{padding:7px 8px 7px 11px;border-left:2px solid #e6efed;border-radius:0 8px 8px 0;font-size:12px}
.filter-category-list button.sub:hover,.filter-category-list button.sub.active{border-left-color:var(--brand-teal);background:#eaf9f6;color:#087f7c}
.filter-category-empty{padding:7px 10px;color:#9aa4a2;font-size:10px}
.filter-options{gap:10px;padding:0 2px 17px}
.filter-options.scrollable{max-height:255px;padding-right:8px;scrollbar-width:thin;scrollbar-color:#aebbb8 transparent}
.filter-option{grid-template-columns:18px minmax(0,1fr) auto;gap:9px;color:#64716f;font-size:13px}
.filter-option input{width:16px;height:16px;accent-color:#168f87}
.filter-option small{color:#a0aaa8;font-size:10px}
.filter-option:has(input:checked){color:#142824;font-weight:800}
.color-filter-grid{gap:9px;padding:1px 2px 18px}
.color-filter-option,.color-filter-option>span{width:36px;height:36px}
.size-filter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;max-height:260px;overflow:auto;padding-right:5px}
.size-filter-option{position:relative;display:grid;grid-template-columns:1fr;place-items:center;min-height:38px;padding:5px;border:1px solid transparent;border-radius:var(--r-sm);background:#f1f5f4;color:#4f5e5b;text-align:center}
.size-filter-option input{position:absolute;opacity:0;pointer-events:none}
.size-filter-option span{font-size:11px;font-weight:600}
.size-filter-option small{display:none}
.size-filter-option:hover{border-color:#9bd9d1;background:#eaf9f6}
.size-filter-option:has(input:checked){border-color:#1aa99f;background:#dff6f2;color:#087a74;box-shadow:inset 0 0 0 1px #1aa99f}
.price-filter{gap:9px;padding:0 2px 18px}
.price-filter input{height:42px;border-color:#dbe5e2;border-radius:var(--r-sm);font-size:12px}
.price-filter button{height:39px;border-radius:var(--r-sm);background:linear-gradient(135deg,var(--brand-teal),var(--brand-green))}
.results-bar{min-height:56px;padding:0 2px 14px;border-bottom:1px solid #e4ecea}
.results-bar>div:first-child strong{font-size:23px}
.active-filter{align-items:flex-start;gap:16px;margin:14px 0 18px;padding:13px 15px;border:1px solid #d9ebe7;border-radius:var(--r-sm);background:#f5fbf9}
.active-filter>div{display:flex;min-width:0;flex:1;flex-direction:column;gap:7px}
.active-filter>div>span{color:#6e7c79;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.active-filter-name{display:none}
.active-filter strong{display:none}
.filter-chips{gap:6px}
.filter-chip{border-color:#b9e3dd;background:#fff;color:#087f7a;padding:7px 10px;font-size:10px}
.filter-chip:hover{border-color:#39b9ad;background:#e8f9f6}
.active-filter>button{flex:none;margin-top:20px;border:0;background:transparent;color:#c72e3e;font-size:11px;font-weight:700;cursor:pointer}
.catalog-layout .product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.catalog-layout .product-card{border-radius:var(--r-md);box-shadow:0 8px 25px rgba(25,60,53,.045)}
.catalog-layout .card-media{aspect-ratio:1.12/1;background:#fff}
.catalog-layout .card-content{padding:16px}
.catalog-layout .card-content h2{min-height:auto;font-size:18px}
.catalog-layout .card-description{min-height:34px}
.catalog-layout .card-meta{padding-top:13px}

@media(min-width:1500px){.catalog-layout{grid-template-columns:300px minmax(0,1fr)}}
@media(max-width:1050px) and (min-width:901px){.catalog-layout{grid-template-columns:260px minmax(0,1fr);gap:24px}.catalog-layout .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.catalog-layout .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog-filters{padding:18px 22px 30px}.filters-top{padding-right:0}.active-filter{margin-top:12px}}
@media(max-width:560px){.catalog-shell{width:calc(100% - 20px)}.catalog-layout .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.results-bar{font-size:11px}.results-bar>div:first-child strong{font-size:19px}.active-filter{flex-direction:column}.active-filter>button{margin-top:0}.catalog-layout .card-content{padding:11px}.catalog-layout .card-content h2{font-size:14px}.catalog-layout .card-category,.catalog-layout .card-description{display:none}.catalog-layout .card-code{margin:6px 0 10px}.catalog-layout .card-stock{padding:7px;margin-bottom:9px}.catalog-layout .card-stock small{display:none}.catalog-layout .card-price{font-size:15px}.catalog-layout .card-arrow{width:32px;height:32px}.catalog-layout .variant-summary{display:none}}

/* v55 - puni Demo Group footer */
.site-footer{padding:70px 0 0;background:radial-gradient(circle at 8% 0,rgba(33,181,201,.15),transparent 28%),radial-gradient(circle at 92% 100%,rgba(97,197,96,.13),transparent 28%),#231f20;color:#b9c7c3}
.site-footer .container:before{display:none}
.footer-grid{display:grid;grid-template-columns:minmax(280px,1.35fr) repeat(3,minmax(150px,.65fr));gap:58px;padding-bottom:55px}
.footer-about{max-width:360px}
.footer-logo{display:block;width:180px;margin-bottom:22px}
.footer-logo img{display:block;width:100%;height:auto}
.footer-about p{margin:0 0 20px;color:#aebdb9;font-size:13px;line-height:1.7}
.footer-company-link{display:inline-flex;align-items:center;gap:9px;color:#7ce0d1;font-size:12px;font-weight:700;transition:color .18s ease,transform .18s ease}
.footer-company-link:hover{color:#91e668;transform:translateX(2px)}
.footer-column{display:flex;align-items:flex-start;flex-direction:column;gap:11px}
.footer-column h2{margin:5px 0 10px;color:#f8fbfa;font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.footer-column a,.footer-column address,.footer-column p{margin:0;color:#aebdb9;font-size:12px;line-height:1.65;font-style:normal;transition:color .18s ease}
.footer-column a:hover{color:#7ce0d1}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-top:23px;padding-bottom:25px;border-top:1px solid rgba(255,255,255,.1);color:#82918d;font-size:10px}
@media(max-width:950px){.footer-grid{grid-template-columns:1.15fr repeat(2,1fr);gap:38px}.footer-column:last-child{grid-column:2/4}}
@media(max-width:650px){.site-footer{padding-top:52px}.footer-grid{grid-template-columns:1fr;gap:30px;padding-bottom:38px}.footer-about{max-width:none}.footer-column:last-child{grid-column:auto}.footer-bottom{align-items:flex-start;flex-direction:column;gap:8px}.footer-logo{width:155px}}

/* v56 - pretraga u vrhu, automatski slajderi, pakovanja, PDV i korpa za upit */
.header-inner{width:min(1500px,calc(100% - 36px));gap:22px}
.header-search{position:relative;display:flex;align-items:center;flex:1;max-width:690px;height:44px;margin-left:auto;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;box-shadow:var(--elev-3)}
.header-search input{min-width:0;flex:1;height:100%;border:0;background:transparent;padding:0 16px;outline:0;color:var(--ink)}
.header-search:focus-within{border-color:var(--brand-teal);box-shadow:0 0 0 3px rgba(33,181,201,.12)}
.header-search>button{width:52px;height:100%;border:0;border-left:1px solid var(--line);border-radius:0 10px 10px 0;background:#f4f8f7;color:#294b48;font-size:20px;cursor:pointer}
.header-search .header-search-clear{position:absolute;right:52px;width:38px;border:0;background:transparent;color:var(--muted)}
.header-search .search-suggestions{left:0;right:0;top:calc(100% + 7px);border-radius:var(--r-md);max-height:min(520px,70vh);overflow:auto}
.header-note{margin-left:0;white-space:nowrap}.header-actions{white-space:nowrap}
.nav-inner button,.nav-inner a:where(.quick-category),.portfolio-nav-link{font-size:13px}
.portfolio-nav-cta{margin-left:8px!important;padding:10px 16px!important;border-radius:999px!important;background:linear-gradient(115deg,var(--brand-teal),var(--brand-green))!important;color:#fff!important;box-shadow:0 8px 20px rgba(33,181,201,.2)}
.portfolio-nav-cta:hover{background:linear-gradient(115deg,var(--brand-teal-dark),#46ad52)!important;color:#fff!important;transform:translateY(-1px)}
.category-level-heading span,.menu-all-link,.category-level-secondary .menu-step-button.active,.menu-tertiary-list button b,.menu-tertiary-list a b{color:var(--brand-teal-dark)}
.category-level-secondary .menu-step-button.active{border-color:#a9ddd4}.menu-tertiary-list button:hover,.menu-tertiary-list a:hover{border-color:var(--brand-teal)}
.menu-featured-action{background:linear-gradient(115deg,var(--brand-teal-dark),var(--brand-green))}
@media(min-width:701px){.menu-step-button{font-size:12px}.menu-tertiary-list button,.menu-tertiary-list a{font-size:11px}}

.promo-banner-controls>button,.new-products-controls,.promo-stories-arrows{display:none!important}
.promo-banner-controls,.new-products-footer{justify-content:center}.promo-stories-dots{justify-content:center}
.card-price-vat,.price-with-vat{display:block!important;margin-top:3px;color:var(--brand-teal-dark)!important;font-size:11px!important;font-weight:800!important}
.price-row .price-with-vat{font-size:14px!important}.related-product-price-vat{display:block;margin-top:3px;color:var(--brand-teal-dark);font-size:11px}

.add-to-cart-row{grid-template-columns:minmax(190px,.8fr) minmax(190px,1fr);align-items:end}.quantity-picker{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:11px}.quantity-picker>div{display:grid;grid-template-columns:44px minmax(70px,1fr) 44px;height:46px;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:#fff}.quantity-picker button{border:0;background:#f4f8f7;font-size:20px;cursor:pointer}.quantity-picker button:disabled{opacity:.35;cursor:not-allowed}.quantity-picker output{display:grid;place-items:center;color:var(--ink);font-weight:800}.quantity-picker small{color:var(--brand-teal-dark);font-size:10px}

.cart-drawer-backdrop{position:fixed;inset:0;z-index:89;background:rgba(11,23,21,.62);backdrop-filter:blur(2px)}.cart-drawer{position:fixed;z-index:90;top:0;right:0;width:min(510px,100%);height:100dvh;display:flex;flex-direction:column;background:#fff;box-shadow:-22px 0 60px rgba(0,0,0,.2)}body.cart-drawer-open{overflow:hidden}.cart-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:21px 24px;border-bottom:1px solid var(--line)}.cart-drawer-head h2{margin:0;font-size:21px}.cart-drawer-head h2 small{color:var(--muted);font-size:12px;font-weight:500}.cart-drawer-head button{border:0;background:transparent;font-size:27px;cursor:pointer}.cart-drawer-items{flex:1;overflow:auto;padding:12px 24px}.cart-drawer-item{display:grid;grid-template-columns:76px minmax(0,1fr) 115px;gap:13px;padding:15px 0;border-bottom:1px solid var(--line)}.cart-drawer-image{width:76px;height:76px;border-radius:11px;background:var(--soft);overflow:hidden}.cart-drawer-image img{width:100%;height:100%;object-fit:contain}.cart-drawer-copy{display:flex;flex-direction:column;gap:4px;min-width:0}.cart-drawer-copy strong{font-size:13px}.cart-drawer-copy small,.cart-drawer-copy span{color:var(--muted);font-size:10px}.drawer-stepper{display:grid;grid-template-columns:32px 55px 32px;width:max-content;margin-top:6px;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}.drawer-stepper button{border:0;background:#f4f8f7;cursor:pointer}.drawer-stepper button:disabled{opacity:.35}.drawer-stepper output{display:grid;place-items:center;font-size:11px;font-weight:800}.cart-drawer-price{display:flex;align-items:flex-end;flex-direction:column;gap:3px;text-align:right}.cart-drawer-price strong{font-size:13px}.cart-drawer-price small{color:var(--brand-teal-dark);font-size:10px}.cart-drawer-price button{margin-top:auto;border:0;background:transparent;color:var(--muted);font-size:10px;cursor:pointer}.cart-drawer-empty{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;height:100%;color:var(--muted)}.cart-drawer-footer{padding:20px 24px;border-top:1px solid var(--line);background:#fbfdfc}.drawer-total-line{display:flex;justify-content:space-between;margin:6px 0;color:var(--muted);font-size:12px}.drawer-total-final{margin-top:13px;padding-top:13px;border-top:1px solid var(--line);color:var(--ink);font-size:15px}.drawer-primary,.drawer-secondary{display:grid;place-items:center;width:100%;height:46px;margin-top:12px;border:0;border-radius:var(--r-sm);font-weight:800;cursor:pointer}.drawer-primary{background:linear-gradient(115deg,var(--brand-teal),var(--brand-green));color:#fff}.drawer-secondary{background:#fff;border:1px solid var(--line)}

.cart-item-info small{display:block;margin-top:7px;color:var(--brand-teal-dark);font-size:10px}.cart-quantity-stepper{display:grid;grid-template-columns:30px 50px 30px;height:38px;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}.cart-quantity-stepper button{border:0;background:#f4f8f7;cursor:pointer}.cart-quantity-stepper output{display:grid;place-items:center;font-size:11px;font-weight:800}.customer-type{display:flex;gap:16px;margin:0 0 15px;padding:12px;border:1px solid var(--line);border-radius:var(--r-sm)}.customer-type legend{padding:0 5px;font-size:11px;font-weight:800}.customer-type label{display:flex;align-items:center;gap:6px;margin:0}.customer-type input{width:auto;margin:0;accent-color:var(--brand-teal-dark)}.cart-totals{display:flex;flex-direction:column;gap:8px;margin:20px 0;padding-top:17px;border-top:1px solid var(--line)}.cart-totals>div{display:flex;justify-content:space-between;color:var(--muted);font-size:12px}.cart-totals .cart-total-final{padding-top:10px;border-top:1px solid var(--line);color:var(--ink);font-size:15px}.form-success{color:#18814d!important}
.cart-edit-link{color:inherit;text-decoration:none}.cart-item-image.cart-edit-link{transition:transform .2s ease,box-shadow .2s ease}.cart-item-image.cart-edit-link:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(20,60,52,.12)}.cart-item-info h2 .cart-edit-link:hover{color:var(--brand-teal-dark)}.cart-edit-action{display:inline-flex;margin-top:9px;color:var(--brand-teal-dark);font-size:10px;font-weight:800;text-decoration:none}.cart-edit-action:hover{text-decoration:underline}

@media(max-width:1150px){.header-note{display:none}.header-search{max-width:none}.cart-item{grid-template-columns:90px minmax(0,1fr) 110px 120px 28px}.cart-item-image{width:90px;height:86px}}
@media(max-width:700px){.site-header{position:relative}.header-inner{height:auto;min-height:74px;flex-wrap:wrap;padding:10px 0}.header-search{order:3;flex-basis:100%;max-width:none}.catalog-nav{top:0}.header-actions .back-link{display:inline-flex;align-items:center;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.nav-inner{height:54px}.portfolio-nav-cta{margin-left:auto!important}.cart-item{grid-template-columns:72px minmax(0,1fr) 28px}.cart-quantity-stepper,.cart-item-price{grid-column:2}.remove-item{grid-column:3;grid-row:1}.add-to-cart-row{grid-template-columns:1fr}.cart-drawer-item{grid-template-columns:64px minmax(0,1fr)}.cart-drawer-image{width:64px;height:64px}.cart-drawer-price{grid-column:2;align-items:flex-start;text-align:left}.cart-drawer-price button{margin-top:5px}.search-suggestion-copy strong{font-size:13px}}

/* v57 - vidljive slike pretrage, jasna količina i čist footer logo */
.header-search .search-suggestion-image{display:block;width:76px;height:62px;flex:0 0 76px;object-fit:contain;opacity:0;transition:opacity .18s ease}
.header-search .search-suggestion-image.loaded{opacity:1}
.cart-item{grid-template-columns:110px minmax(0,1fr) 118px 140px 32px}
.cart-quantity-stepper{grid-template-columns:34px 46px 34px;width:116px;height:40px;border-color:#cdded9;background:#fff}
.cart-quantity-stepper button{display:grid;place-items:center;min-width:34px;padding:0;background:#eaf7f3;color:#147f78;font-size:19px;font-weight:800;line-height:1}
.cart-quantity-stepper button:first-child{border-right:1px solid #cdded9}
.cart-quantity-stepper button:last-child{border-left:1px solid #cdded9}
.cart-quantity-stepper button:hover{background:linear-gradient(135deg,var(--brand-teal),var(--brand-green));color:#fff}
.cart-quantity-stepper output{min-width:46px;background:#fff;color:var(--ink)}
.footer-logo-clean{display:flex!important;align-items:center;gap:13px;width:max-content!important;background:transparent!important}
.footer-logo-clean img{width:62px!important;height:62px!important;object-fit:contain;background:transparent!important}
.footer-logo-clean span{display:flex;flex-direction:column;color:#f7fbfa;font-size:27px;line-height:.78;letter-spacing:-.055em}
.footer-logo-clean b{font-weight:800}
@media(max-width:1150px) and (min-width:701px){.cart-item{grid-template-columns:90px minmax(0,1fr) 118px 120px 28px}}
@media(max-width:700px){.header-search .search-suggestion-image{width:58px;height:52px;flex-basis:58px}.cart-item{grid-template-columns:72px minmax(0,1fr) 28px}.cart-quantity-stepper{width:116px}.footer-logo-clean img{width:54px!important;height:54px!important}.footer-logo-clean span{font-size:24px}}

/* DemoShop V67: katalog ranije, kompaktniji noviteti i Instagram galerija */
main{display:flex;flex-direction:column}
main>.promo-banner-section{order:1}
main>#catalogStart{order:2}
main>.home-promo-stories{order:3}
main>.home-highlights{order:4}
main>.home-new-products{order:5}
main>.instagram-showcase{order:6}

#catalogStart{padding-top:30px;padding-bottom:48px;scroll-margin-top:132px}
.catalog-results{scroll-margin-top:132px}
.home-promo-stories{padding-top:58px}
.home-new-products{padding:44px 0 52px;background:#f7f9f9}
.home-new-products .container{width:min(1220px,calc(100% - 36px))}
.new-products-heading h2{font-size:clamp(30px,2.7vw,40px)}
.new-products-track .product-card{flex-basis:calc((100% - 64px)/5)}

.instagram-showcase{padding:64px 0 68px;background:#fff}
.instagram-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:25px}
.instagram-heading h2{margin:5px 0 0;font-size:clamp(34px,3.6vw,52px);line-height:1;letter-spacing:-.045em}
.instagram-profile-link{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 18px;border:1px solid #b9e7e3;border-radius:var(--r-sm);background:linear-gradient(135deg,#e9fbf9,#f6fffe);color:#087d82;font-weight:700;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.instagram-profile-link:hover{transform:translateY(-2px);border-color:#72d3ca;box-shadow:0 12px 28px rgba(17,144,149,.14)}
.instagram-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:13px}
.instagram-tile{position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:14px;background:#f2f5f4;text-decoration:none;box-shadow:0 1px 0 rgba(25,35,34,.06)}
.instagram-tile img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease,filter .35s ease}
.instagram-tile span{position:absolute;left:10px;right:10px;bottom:10px;padding:8px 10px;border-radius:9px;background:rgba(18,27,30,.78);color:#fff;font-size:11px;font-weight:800;line-height:1.2;opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease}
.instagram-tile:hover img{transform:scale(1.045);filter:saturate(1.04)}
.instagram-tile:hover span,.instagram-tile:focus-visible span{opacity:1;transform:none}

@media(max-width:1000px){
  .instagram-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .instagram-tile span{opacity:1;transform:none}
}

@media(max-width:700px){
  #catalogStart{padding-top:18px;padding-bottom:34px;scroll-margin-top:88px}
  .catalog-results{scroll-margin-top:88px}
  .home-new-products{display:none}
  .home-promo-stories{padding-top:42px}
  .instagram-showcase{padding:46px 0 52px}
  .instagram-heading{align-items:stretch;flex-direction:column;gap:17px;margin-bottom:18px}
  .instagram-heading h2{font-size:36px}
  .instagram-profile-link{align-self:flex-start;min-height:44px;padding:10px 14px;font-size:13px}
  .instagram-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .instagram-tile{border-radius:11px}
  .instagram-tile span{left:7px;right:7px;bottom:7px;padding:7px 8px;font-size:10px}
}

/* V83 finalne postavke kataloga - moraju ostati poslednje */
.catalog-shell{width:min(1460px,calc(100% - 40px))}
.catalog-layout{grid-template-columns:292px minmax(0,1fr);gap:34px}
.catalog-filters{top:132px;max-height:calc(100vh - 150px);padding:0 20px 28px 0}
.filters-top{padding:15px 0 16px}.filters-top strong{font-size:19px}.filters-top button{padding:8px 11px;background:#fff0f1;color:#d62d3e}
.filter-category-tree{padding:0;border-bottom:1px solid #e5ecea}.category-filter-section{border-bottom:0}.filter-category-list{gap:0;padding-bottom:14px}
.filter-category-group{border-bottom:1px solid #eef2f1}.filter-category-group>summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto 14px;gap:8px;align-items:center;padding:10px 3px;color:#566460;font-size:13px;cursor:pointer}.filter-category-group>summary::-webkit-details-marker{display:none}.filter-category-group>summary:after{content:"⌄";color:#9aa8a5}.filter-category-group[open]>summary{color:#10231f;font-weight:800}.filter-category-group[open]>summary:after{transform:rotate(180deg)}
.filter-category-sublist{display:flex;flex-direction:column;gap:3px;padding:0 0 10px 10px}.filter-category-list button.sub{padding:7px 8px 7px 11px;border-left:2px solid #e6efed;border-radius:0 8px 8px 0;font-size:12px}.filter-category-list button.sub:hover,.filter-category-list button.sub.active{border-left-color:var(--brand-teal);background:#eaf9f6;color:#087f7c}
.filter-section>summary{padding:17px 2px;font-size:14px}.filter-section>summary small{margin-left:auto;color:#a5afad;font-size:10px}.filter-options{gap:10px;padding:0 2px 17px}.filter-options.scrollable{max-height:255px;padding-right:8px}.filter-option{grid-template-columns:18px minmax(0,1fr) auto;gap:9px;font-size:13px}.filter-option input{width:16px;height:16px;accent-color:#168f87}
.color-filter-option,.color-filter-option>span{width:36px;height:36px}.size-filter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;max-height:260px;overflow:auto}.size-filter-option{position:relative;display:grid;grid-template-columns:1fr;place-items:center;min-height:38px;padding:5px;border:1px solid transparent;border-radius:var(--r-sm);background:#f1f5f4;text-align:center}.size-filter-option input{position:absolute;opacity:0}.size-filter-option small{display:none}.size-filter-option:has(input:checked){border-color:#1aa99f;background:#dff6f2;color:#087a74;box-shadow:inset 0 0 0 1px #1aa99f}
.price-filter input{height:42px;border-radius:var(--r-sm)}.price-filter button{height:39px;background:linear-gradient(135deg,var(--brand-teal),var(--brand-green))}
.active-filter{align-items:flex-start;gap:16px;margin:14px 0 18px;padding:13px 15px;border:1px solid #d9ebe7;border-radius:var(--r-sm);background:#f5fbf9}.active-filter>div{display:flex;min-width:0;flex:1;flex-direction:column;gap:7px}.active-filter>div>span{font-size:10px;font-weight:700;text-transform:uppercase}.active-filter strong{display:none}.active-filter>button{flex:none;margin-top:20px;border:0;background:transparent;color:#c72e3e;font-weight:700;cursor:pointer}.filter-chip{border-color:#b9e3dd;background:#fff;color:#087f7a}
.catalog-layout .product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.catalog-layout .product-card{border-radius:var(--r-md)}.catalog-layout .card-media{aspect-ratio:1.12/1;background:#fff}.catalog-layout .card-content{padding:16px}.catalog-layout .card-content h2{min-height:auto;font-size:18px}
@media(max-width:1050px) and (min-width:901px){.catalog-layout{grid-template-columns:260px minmax(0,1fr);gap:24px}.catalog-layout .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.catalog-layout{display:block}.catalog-layout .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog-filters{padding:18px 22px 30px}}
@media(max-width:560px){.catalog-shell{width:calc(100% - 20px)}.catalog-layout .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.active-filter{flex-direction:column}.active-filter>button{margin-top:0}.catalog-layout .card-content{padding:11px}.catalog-layout .card-content h2{font-size:14px}.catalog-layout .card-category,.catalog-layout .card-description{display:none}.catalog-layout .variant-summary{display:none}}

/* V84: sortiranje, broj proizvoda i prošireni tehnički filteri */
.results-bar{display:flex;align-items:center;justify-content:space-between;gap:20px}
.catalog-view-controls{display:flex;align-items:center;justify-content:flex-end;gap:12px;color:#687572;font-size:11px}
.catalog-view-controls label{display:flex;align-items:center;gap:7px;white-space:nowrap}
.catalog-view-controls select{height:38px;padding:0 34px 0 11px;border:1px solid #d6e2df;border-radius:var(--r-sm);background:#fff;color:#24332f;font:inherit;font-weight:600;cursor:pointer}
.catalog-view-controls #pageInfo{min-width:90px;text-align:right}
@media(max-width:900px){.results-bar{align-items:flex-start;flex-direction:column}.catalog-view-controls{width:100%;justify-content:flex-start;flex-wrap:wrap}.catalog-view-controls #pageInfo{margin-left:auto}}
@media(max-width:560px){.catalog-view-controls{display:grid;grid-template-columns:1fr 90px}.catalog-view-controls label{display:flex;align-items:flex-start;flex-direction:column;gap:4px}.catalog-view-controls select{width:100%;height:40px;padding-left:8px}.catalog-view-controls #pageInfo{grid-column:1/-1;margin-left:0;text-align:left}}

/* V89: dugi pregledni filteri, Montserrat i doteran katalog */
/* V95: font-family moved to body — this override is no longer needed */
.catalog-layout{grid-template-columns:300px minmax(0,1fr);gap:38px}
.catalog-filters{position:relative;top:auto;max-height:none;overflow:visible;padding:0 24px 30px 0;scrollbar-width:auto}
.filters-top{position:relative;top:auto;padding:16px 0 18px}
.filters-top>div{display:flex;align-items:center;gap:8px}
.filters-top strong{font-size:20px;font-weight:600}
.filter-section>summary{min-height:48px;padding:13px 2px;font-size:14px;font-weight:700;line-height:20px}
.filter-section>summary small{font-size:11px;font-weight:500}
.filter-option{min-height:28px;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;color:#66716f;font-size:14px;line-height:20px}
.filter-option input{width:17px;height:17px}
.filter-option small{font-size:11px;font-weight:500}
.filter-options{gap:4px;padding-bottom:18px}
.filter-options.scrollable{max-height:520px;overflow-y:auto;padding-right:10px;scrollbar-width:thin;scrollbar-color:#aebbb8 transparent}
.filter-options.scrollable::-webkit-scrollbar{width:5px}.filter-options.scrollable::-webkit-scrollbar-thumb{border-radius:var(--r-sm);background:#aebbb8}
.size-filter-grid{max-height:none;overflow:visible;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.size-filter-option{min-height:40px}.size-filter-option span{font-size:12px}
.filter-category-group>summary{min-height:38px;font-size:14px;line-height:20px}
.filter-category-list button.sub{min-height:34px;font-family:inherit;font-size:13px}
.results-bar{position:sticky;z-index:12;top:112px;margin:0 -8px;padding:12px 8px 14px;background:rgba(255,255,255,.96);box-shadow:var(--elev-3);backdrop-filter:blur(8px)}
.catalog-layout .card-media{aspect-ratio:1.18/1}
.catalog-layout .card-content{padding:15px}
.catalog-layout .card-content h2{font-size:17px;line-height:1.25}
.catalog-layout .card-description{display:-webkit-box;min-height:20px;margin:5px 0 0;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:1;font-size:11px}
.catalog-layout .card-code{margin:7px 0 12px;font-size:11px;font-weight:600}
.catalog-layout .card-stock{min-height:36px;margin-bottom:10px;padding:7px 9px}
.catalog-layout .card-meta{padding-top:11px}.catalog-layout .card-price{font-size:17px}
.close-mobile-filters,.mobile-filters-apply{display:none}

@media(max-width:1050px) and (min-width:901px){.catalog-layout{grid-template-columns:270px minmax(0,1fr);gap:26px}}
@media(max-width:900px){
  .catalog-filters{display:none;position:fixed;z-index:90;inset:0 0 0 auto;width:min(380px,94vw);max-height:100dvh;overflow-y:auto;padding:18px 22px 0;background:#fff;box-shadow:-20px 0 50px rgba(0,0,0,.2)}
  .catalog-filters.open{display:block}
  .filters-top{position:sticky;z-index:5;top:-18px;margin:0 -2px;padding:18px 2px 14px;background:#fff}
  .filters-top:before{display:none}.filters-top>strong{display:block}
  .close-mobile-filters{display:grid;place-items:center;width:36px;height:36px;padding:0!important;border:1px solid #d7e4e1!important;border-radius:50%!important;background:#fff!important;color:#23332f!important;font-size:23px!important;line-height:1}
  .mobile-filters-apply{position:sticky;z-index:6;display:block;bottom:0;width:calc(100% + 44px);height:58px;margin:20px -22px 0;border:0;background:linear-gradient(135deg,var(--brand-teal),var(--brand-green));color:#fff;font-family:"Montserrat",sans-serif;font-size:14px;font-weight:800;box-shadow:var(--elev-3)}
  .filter-options.scrollable{max-height:440px}.size-filter-grid{max-height:440px;overflow-y:auto}
  .results-bar{top:0}
}

/* V91: mirniji uzorci boja i sigurne duge oznake veličina */
.card-variant-previews button{border-color:#e2e9e7;background:#fff;box-shadow:0 2px 7px rgba(25,62,55,.04);transition:border-color .22s ease,background-color .22s ease,box-shadow .22s ease,transform .22s ease}
.card-variant-previews button:hover,.card-variant-previews button:focus-visible{border-color:#8fd4cc;background:#f4fcfa;box-shadow:0 5px 14px rgba(24,142,132,.12);transform:translateY(-1px)}
.card-variant-previews button.active{border-color:#239f95;background:#effbf9;box-shadow:0 0 0 2px rgba(35,159,149,.12);transform:none}
.card-variant-previews img{transition:transform .24s ease,opacity .2s ease}.card-variant-previews button:hover img{transform:scale(1.035)}
.card-media .card-image-primary{transition:opacity .22s ease,transform .32s ease}.card-media.variant-image-switching .card-image-primary{opacity:.35!important;transform:scale(.99)!important}
.size-filter-option{min-width:0;overflow:hidden;padding:6px 4px}
.size-filter-option span{display:block;width:100%;min-width:0;overflow:hidden;color:inherit;font-size:clamp(9px,1vw,12px);font-weight:600;line-height:1.12;text-align:center;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:420px){.size-filter-grid{grid-template-columns:repeat(3,minmax(68px,1fr))}.size-filter-option span{font-size:10px}}
@media(prefers-reduced-motion:reduce){.card-variant-previews button,.card-variant-previews img,.card-media .card-image-primary{transition:none!important}}

/* V92: preglednije kartice proizvoda na telefonima */
@media(max-width:560px){
  .catalog-layout .card-media{aspect-ratio:1.28/1}
  .catalog-layout .card-image{padding:10px}
  .catalog-layout .card-content{padding:13px}
  .catalog-layout .card-content h2{min-height:0;line-height:1.22}
  .catalog-layout .card-code{margin:6px 0 10px;white-space:nowrap}
  .catalog-layout .card-meta>div{min-width:0}
  .catalog-layout .card-meta small{font-size:10px;letter-spacing:-.02em;white-space:nowrap}
  .catalog-layout .card-price-vat{font-size:10px!important;white-space:nowrap}
  .catalog-layout .card-arrow{flex:0 0 32px}
}
@media(max-width:430px){
  .catalog-shell{width:calc(100% - 20px)}
  .catalog-layout .product-grid{grid-template-columns:1fr;gap:14px}
  .catalog-layout .product-card{border-radius:var(--r-md)}
  .catalog-layout .card-media{aspect-ratio:1.45/1}
  .catalog-layout .card-image{padding:14px}
  .catalog-layout .card-content{padding:16px}
  .catalog-layout .card-content h2{font-size:18px}
  .catalog-layout .card-description{display:-webkit-box;min-height:18px;margin:5px 0 0;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:1;font-size:11px}
  .catalog-layout .card-code{font-size:11px}
  .catalog-layout .card-stock{min-height:38px}
  .catalog-layout .card-price{font-size:18px}
  .catalog-layout .card-meta small{font-size:10px;letter-spacing:0}
  .catalog-layout .card-price-vat{font-size:11px!important}
  .catalog-layout .variant-summary{display:flex}
}

/* V93: stabilno uklapanje glavnih fotografija u mobilne kartice */
@media(max-width:560px){
  .catalog-layout .card-media{
    min-width:0;
    min-height:0;
    isolation:isolate;
  }
  .catalog-layout .card-image-primary,
  .catalog-layout .card-image-hover{
    position:absolute;
    inset:0;
    display:block;
    box-sizing:border-box;
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    object-position:center center;
  }
  .catalog-layout .card-image-primary{
    transform:translateZ(0);
  }
}
@media(max-width:430px){
  .catalog-layout .card-media{aspect-ratio:1.34/1}
  .catalog-layout .card-image-primary,
  .catalog-layout .card-image-hover{padding:clamp(12px,4vw,18px)}
}

/* ============================================================
   V95 — BATCH 1: TYPOGRAPHY FOUNDATION
   Font family is now set once on <body> (Montserrat variable,
   400..900) and loaded on every page. No layout, colour or
   behaviour changes in this block.
   ============================================================ */

:root{
  /* Type scale — 10px floor, ~1.2 ratio. Tokens only for now;
     components migrate onto these in later batches. */
  --fs-2xs:10px;   /* micro labels, badge text            */
  --fs-xs:11px;    /* meta, captions                      */
  --fs-sm:12px;    /* secondary UI text                   */
  --fs-md:13px;    /* dense UI text, filters              */
  --fs-base:14px;  /* body copy                           */
  --fs-lg:16px;    /* card titles, emphasised body        */
  --fs-xl:18px;    /* prices, sub-headings                */
  --fs-2xl:22px;   /* small headings                      */
  --fs-3xl:28px;   /* section headings (mobile)           */
  --fs-4xl:40px;   /* page headings (desktop)             */

  /* Weight scale — 5 steps, all available in the variable font. */
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;
  --fw-extrabold:800;
}

/* Page-level headings: brought down from 62–66px display sizes so
   that price and CTA can outrank the product name. */
.product-info h1,
.cart-title h1,
.quote-success-panel h1,.quote-success-panel h2{
  font-size:clamp(28px,3.2vw,40px);
  line-height:1.1;
  letter-spacing:-.025em;
}

/* Section headings: one scale replacing eight separate clamps
   that ranged from 40px to 68px. */
.highlights-heading h2,
.new-products-heading h2,
.promo-stories-heading h2,
.instagram-heading h2{
  font-size:clamp(26px,3vw,38px);
  line-height:1.12;
  letter-spacing:-.02em;
}

/* Sub-section heading (within a product page). */
.related-products-heading h2{
  font-size:clamp(22px,2.4vw,28px);
  line-height:1.15;
  letter-spacing:-.02em;
}

/* ============================================================
   V96 — BATCH 1 (completion): TYPOGRAPHY NORMALISATION
   Adjustments required by the switch to Montserrat.
   No colours, radii, shadows, animations or component
   structure are changed in this block.
   ============================================================ */

/* --- 1. Rendering ------------------------------------------
   Montserrat is a geometric sans and renders noticeably heavier
   than the previous system fonts on macOS/iOS without smoothing. */
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* --- 2. Uppercase micro-labels -----------------------------
   Was: 8 different combinations of size (8–11px), weight
   (700/800) and tracking (.08–.16em). Now one label style.
   Colour is inherited from the existing rules and unchanged. */
.eyebrow,
.footer-column h2,
.highlight-kicker,
.promo-banner-kicker,
.hero-product-kicker,
.hero-product-copy>small,
.promo-story>span,
.category-level-heading span,
.category-mobile-toolbar small,
.active-filter>div>span,
.variant-table-head,
.customer-type legend{
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  line-height:1.3;
}
.card-category{
  font-size:10px;
  font-weight:600;
  letter-spacing:.08em;
  line-height:1.3;
}

/* --- 3. Buttons --------------------------------------------
   One weight, centred text, no wrapping, consistent optical
   centring. Sizes, colours and radii are untouched. */
.quote-button,
.search-row button,
.pagination button,
.price-filter button,
.mobile-filters-toggle,
.mobile-filters-apply,
.drawer-primary,
.drawer-secondary,
.quote-success-action,
.filters-top button,
.instagram-profile-link,
.home-catalog-link,
.cart-link,
.portfolio-nav-cta,
.nav-inner button, .nav-inner a:where(.quick-category),
.portfolio-nav-link{
  font-weight:700;
  line-height:1;
  text-align:center;
  white-space:nowrap;
}
.mobile-filters-apply{font-family:inherit}

/* --- 4. Numerals -------------------------------------------
   Tabular figures so prices and stock counts align vertically
   down a column of cards and table rows. */
.card-price,.card-price-vat,
.price-row span,.price-with-vat,
.related-product-price,.related-product-price-vat,
.cart-item-price,.cart-drawer-price,
.cart-totals,.summary-total,
.card-stock small,
.variant-table-row,
.spec-list dd,
.filter-option small,
.filter-section>summary small,
.results-bar,
.home-product-card strong{
  font-variant-numeric:tabular-nums;
}
.card-price,.price-row span,.related-product-price,
.home-product-card strong,
.cart-totals strong,.summary-total strong{
  font-weight:700;
}

/* --- 5. Product titles -------------------------------------
   One size and one leading across catalogue cards, related
   products and the homepage. Clamped to two lines so long
   supplier names cannot make cards in the same row different
   heights. */
.card-content h2,
.catalog-layout .card-content h2,
.related-product-card h3{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:16px;
  font-weight:600;
  line-height:1.3;
  min-height:2.6em;
  letter-spacing:-.005em;
}

/* --- 6. Card rebalance -------------------------------------
   Montserrat's wider metrics made the text block heavier, which
   pushed the image out of first place in the reading order.
   Compensated purely by tightening vertical spacing in the text
   block — image ratio, padding and layout are unchanged. */
.catalog-layout .card-code{margin:6px 0 10px}
.catalog-layout .card-stock{margin-bottom:9px}
.catalog-layout .card-meta{padding-top:10px}
.catalog-layout .card-description{margin:4px 0 0;line-height:1.4}
.card-meta small{line-height:1.35}
.card-badge,.status-badge{line-height:1;white-space:nowrap;font-weight:700}

/* --- 7. Form labels ----------------------------------------
   11px labels were the smallest interactive text on the site.
   Sizes only; no field geometry changes. */
.cart-summary label{font-size:12px;font-weight:600;line-height:1.4}
.add-to-cart-row label,
.quantity-picker,
.quantity-picker small{font-size:11px}
.helper{font-size:12px;line-height:1.5}

/* --- 8. Overflow protection --------------------------------
   Catalogue nav carries up to 10 items; Montserrat is wider, so
   the row is tightened between 901px and 1400px where the
   container is narrowest relative to its content. */
/* Catalogue nav carries up to 10 items. Estimated row width at the
   previous 13px/13px-padding setting is ~1150px against a 1244px
   container at 1280 viewport, and ~1150px against a 988px container
   at 1024 — i.e. it already overflowed below ~1150px and Montserrat's
   wider metrics made it worse. Because .nav-inner has no overflow
   handling and html,body use overflow-x:hidden, overflowing items are
   clipped and become unreachable. Two changes, no structural edits: */
.nav-inner button, .nav-inner a:where(.quick-category),.portfolio-nav-link{
  font-size:12px;
  padding-left:11px;
  padding-right:11px;
  white-space:nowrap;
}
/* Quick-category shortcuts drop out earlier (1150px instead of 1000px).
   They duplicate the "Kategorije" mega-menu and the filter sidebar, so
   nothing becomes unreachable. Existing mechanism, later breakpoint. */
@media(max-width:1150px){.quick-category{display:none}}
.catalog-view-controls{flex-wrap:wrap}

/* --- 9. Mobile ---------------------------------------------- */
@media(max-width:560px){
  .catalog-layout .card-content h2{font-size:14px;min-height:2.6em}
  .related-product-card h3{font-size:14px;min-height:2.6em}
}
@media(max-width:430px){
  .catalog-layout .card-content h2{font-size:16px;min-height:2.6em}
}

/* ============================================================
   V97 — BATCH 2: NAVIGATION, STICKY BEHAVIOUR, BROWSING UX
   Polish only. No typography changes (Batch 1 is frozen), no
   new colours beyond the existing brand tokens, no structural
   or logic changes.
   ============================================================ */

:root{
  --dur-fast:.14s;
  --dur:.2s;
  --ease:cubic-bezier(.2,.7,.2,1);
  --focus-ring:0 0 0 3px rgba(33,181,201,.35);
}

/* --- TASK 1: STICKY HEADER ---------------------------------- */

/* Header height unified: the homepage header was 82px and every
   other page 76px, so the header visibly jumped 6px when moving
   between index and katalog. */
.site-header{
  box-shadow:var(--elev-3);
  transition:box-shadow var(--dur) var(--ease);
}
/* The nav is the bottom edge of the sticky stack, so it carries the
   shadow; the header's own shadow sits behind it and is not visible
   on pages that have a nav. */
.catalog-nav{
  backdrop-filter:blur(14px);
  box-shadow:var(--elev-3);
}

/* Mobile: the header was position:relative, so search and the cart
   scrolled away permanently — on a 1,756-product catalogue those are
   the two most important controls. The header is now sticky and the
   nav is not, which keeps total sticky chrome the same as before
   rather than stacking two bars. The nav keeps position:relative so
   its z-index still applies when the mega-menu is open. */
@media(max-width:700px){
  .site-header{position:sticky;top:0;z-index:60}
  /* backdrop-filter creates a containing block for fixed descendants.
     That confined the full-screen categories menu to the 54px nav bar,
     leaving only its toolbar visible on phones. */
  .catalog-nav{
    position:relative;
    top:auto;
    box-shadow:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  .header-inner{min-height:70px;padding:9px 0}
}

/* --- TASK 2: STICKY FILTERS --------------------------------- */

/* V89 overrode V48's sticky sidebar with position:relative, so with
   48 products per page a filter change meant scrolling ~4,000px back
   to the top. Restored, with its own scroll container so long filter
   lists stay reachable. 138px = 76 header + 50 nav + 12 gap. */
@media(min-width:901px){
  .catalog-filters{
    position:sticky;
    top:138px;
    max-height:calc(100vh - 158px);
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:#c3d3cf transparent;
  }
  .catalog-filters::-webkit-scrollbar{width:6px}
  .catalog-filters::-webkit-scrollbar-thumb{border-radius:var(--r-sm);background:#c3d3cf}
  .catalog-filters::-webkit-scrollbar-track{background:transparent}
  /* "Filteri / Poništi sve" stays visible while the list scrolls. */
  /* Negative offset + matching padding is the technique already used
     elsewhere in this file: it keeps the block flush to the top of the
     scroll container instead of leaving its padding as a see-through
     gap. Current padding is 16px 0 18px. */
  .filters-top{
    position:sticky;
    top:-16px;
    z-index:4;
    margin-bottom:2px;
    background:#fff;
  }
  /* Inner scroll areas shortened so more filter groups are visible
     at once now that the sidebar itself scrolls. */
  .filter-options.scrollable{max-height:320px}
}

/* Results bar was sticking at top:112px with z-index:12, behind a
   126px header+nav stack at z-index 50/45 — its top ~14px was hidden
   and the product count clipped on scroll. */
.results-bar{top:126px;z-index:40}
@media(max-width:900px){
  /* Below 901px the header is the only sticky element and its height
     is variable, so a fixed offset cannot be correct. Static avoids
     the collision entirely. */
  .results-bar{position:static;backdrop-filter:none;box-shadow:none}
}

/* --- TASK 3: NAVIGATION ------------------------------------- */

/* Desktop mega-menu: .menu-step-button:hover set background:#fff on
   a column whose background is already #fff, so the primary category
   column had no visible hover at all. */
.menu-step-button:hover,
.menu-step-button:focus-visible{background:var(--brand-mint)}
.category-level-primary .menu-step-button.active:hover{background:var(--ink)}
.menu-step-button{transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}

/* Mega-menu spacing evened out: the three columns used 12px padding
   but different internal rhythms. */
@media(min-width:701px){
  .category-level-heading{padding-bottom:9px;}
  .menu-step-list{gap:3px}
  .menu-step-button{padding:9px 10px}
  .menu-tertiary-list{gap:5px}
}

/* Mobile menu touch targets to 44px. */
@media(max-width:700px){
  .category-mobile-back,.category-mobile-close{height:44px;min-width:44px}
  .category-mobile-toolbar{min-height:72px}
  .menu-step-button{min-height:48px}
  .menu-tertiary-list button,.menu-tertiary-list a{min-height:48px}
}

/* Breadcrumb on the product page: was flush against the badges with
   no breathing room. */
#breadcrumb{margin:0 0 4px}

/* --- TASK 4: SEARCH ----------------------------------------- */

/* Icon button was 52px wide with a 20px glyph and no centring rules,
   so the magnifier sat slightly high and left of centre. */
.header-search>button{
  display:grid;
  place-items:center;
  line-height:1;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.header-search>button:hover{background:var(--brand-mint);color:var(--brand-teal-dark)}
/* Clear control was a 38px target. */
.header-search .header-search-clear{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  line-height:1;
}
/* Suggestion rows were 86px tall, which showed very few results in
   the dropdown. Tightened so more of the list is visible. */
.search-suggestion{min-height:74px;transition:background var(--dur-fast) var(--ease)}
.search-suggestion-empty{padding:26px 20px;line-height:1.5}

/* --- TASK 5: FILTER UX -------------------------------------- */

/* Filter rows were 28px — the smallest touch target on the site and
   the most expensive to mis-tap, because the result set changes and
   the reason is not visible. */
.filter-option{
  min-height:36px;
  padding:2px 6px;
  margin-left:-6px;
  border-radius:var(--r-xs);
  transition:background var(--dur-fast) var(--ease);
}
.filter-option:hover{background:var(--brand-soft)}
.filter-option:has(input:checked){background:var(--brand-mint)}
.filter-option input{cursor:pointer}

/* Reset control alignment: "Prikaži sve ×" was pushed into place with
   margin-top:20px, which only lined up when the chip row was exactly
   one line tall. */
.active-filter{align-items:center}
.active-filter>button{
  margin-top:0;
  align-self:center;
  padding:8px 10px;
  border-radius:var(--r-sm);
  transition:background var(--dur-fast) var(--ease);
}
.active-filter>button:hover{background:#fff}
.filter-chip{transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.filters-top button{transition:background var(--dur-fast) var(--ease)}
.filter-section>summary{transition:color var(--dur-fast) var(--ease)}
.filter-section>summary:hover{color:var(--brand-teal-dark)}
.filter-category-list button{transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.color-filter-option>span{transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.size-filter-option{transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}

/* --- TASK 6: PRODUCT BROWSING ------------------------------- */

/* Even vertical rhythm between the results bar, the active-filter
   row and the grid; these were 14/18/27px apart depending on whether
   filters were applied, so the grid start position moved. */
.results-bar{padding-bottom:12px}
.active-filter{margin:12px 0 16px}
.catalog-layout .product-grid{row-gap:20px}
.pagination{padding:38px 0 64px}
.pagination button{transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.pagination button:not(:disabled):hover{border-color:var(--ink);background:var(--ink);color:#fff}

/* --- TASK 7: CART ------------------------------------------- */

/* Quantity controls to 44px. Widths and logic unchanged. */
.cart-quantity-stepper{height:44px}
.cart-quantity-stepper button{transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.drawer-stepper{grid-template-columns:40px 55px 40px}
.drawer-stepper button{transition:background var(--dur-fast) var(--ease)}
.drawer-stepper button:hover{background:var(--brand-mint)}
.quantity-picker button{transition:background var(--dur-fast) var(--ease)}
.quantity-picker button:not(:disabled):hover{background:var(--brand-mint)}

/* Remove control was a bare 24px glyph with no box — the easiest
   accidental tap on the page, and it is destructive. */
.remove-item{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:var(--r-sm);
  line-height:1;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.remove-item:hover{background:var(--soft)}
.cart-drawer-price button{
  padding:6px 8px;
  margin-left:-8px;
  border-radius:var(--r-xs);
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.cart-drawer-price button:hover{background:var(--soft);color:var(--ink)}

/* Empty states given presence instead of a single grey line. */
.cart-drawer-empty{gap:10px;padding:32px 20px;text-align:center}
.cart-drawer-head{padding:20px 24px}
.cart-drawer-footer{padding:20px 24px 24px}
.cart-drawer-item{padding:16px 0}
#emptyCart{padding:36px 28px;line-height:1.6}

/* --- TASK 8: CHECKOUT --------------------------------------- */

/* Inputs to a 44px minimum; alignment and spacing evened out. */
.cart-summary input,.cart-summary textarea{
  min-height:44px;
  padding:11px 13px;
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.cart-summary textarea{min-height:96px}
.cart-summary label{margin-top:14px}
.customer-type{align-items:center;padding:12px 14px}
.customer-type label{min-height:32px;cursor:pointer}
.customer-type input{cursor:pointer}

/* The form message was 12px muted text with no visual weight — the
   only feedback on the last screen before conversion. Now it reads
   as a status block. Colours are the existing error/success values. */
#formMessage{margin-top:12px;padding:11px 13px;border-radius:var(--r-sm);background:var(--soft)}
#formMessage.form-error{background:#fff3f4}
#formMessage.form-success{background:#eefaf3}

/* --- TASK 9: MICRO INTERACTIONS ----------------------------- */

/* Keyboard focus was effectively invisible site-wide: five
   :focus-visible rules across ~150KB of CSS, four of which removed
   outlines. One consistent ring, using the existing brand colour. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--brand-teal);
  outline-offset:2px;
  border-radius:var(--r-xs);
}
.product-card:focus-within{border-color:#a8ddd3}

/* :hover never fires on touch devices, so tapping any button on this
   site produced no visual response at all until the next paint. */
.quote-button:not(:disabled):active,
.drawer-primary:active,
.drawer-secondary:active,
.mobile-filters-apply:active,
.mobile-filters-toggle:active,
.pagination button:not(:disabled):active,
.price-filter button:active,
.quote-success-action:active,
.filters-top button:active,
.cart-link:active,
.portfolio-nav-cta:active,
.home-catalog-link:active,
.instagram-profile-link:active,
.card-arrow:active,
.thumb:active,
.color-button:active,
.size-button:active,
.color-photo-button:active,
.variant-table-row:active,
.quantity-picker button:not(:disabled):active,
.cart-quantity-stepper button:active,
.drawer-stepper button:not(:disabled):active,
.filter-chip:active,
.remove-item:active,
.menu-step-button:active,
.menu-tertiary-list button:active, .menu-tertiary-list a:active,
.nav-inner button:active, .nav-inner a:where(.quick-category):active{
  transform:translateY(1px) scale(.985);
}
.quote-button,.drawer-primary,.drawer-secondary,.mobile-filters-toggle,
.card-arrow,.thumb,.color-button,.size-button,.color-photo-button,
.variant-table-row,.filter-chip,.nav-inner button, .nav-inner a:where(.quick-category),.cart-link{
  transition:transform var(--dur-fast) var(--ease),background var(--dur) var(--ease),
             border-color var(--dur) var(--ease),color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}

/* --- TASK 11: VISUAL POLISH --------------------------------- */

/* Selected thumbnails/swatches switched from a 1px to a 2px border,
   nudging every sibling by 1px on each click. Same appearance, no
   layout shift. */
.thumb.active,.color-button.active,.size-button.active{
  border-width:1px;
  box-shadow:inset 0 0 0 1px var(--brand-teal);
}

/* Glyph-based controls were not optically centred in their boxes. */
.card-arrow,.info-section summary:after,.cart-drawer-head button,
.close-mobile-filters,.category-mobile-close{line-height:1}
.card-arrow{padding-bottom:2px}
.mobile-filters-toggle span{line-height:1}

/* Sticky summary offset matched the old 76px header but not the gap. */
.cart-summary{top:92px}

/* Uneven section padding between the filter drawer header and its
   first group on tablet. */
@media(max-width:900px){
  .catalog-filters{padding-top:16px}
  .filters-top{margin-bottom:4px}
}

@media(prefers-reduced-motion:reduce){
  .site-header,.menu-step-button,.filter-option,.pagination button,
  .remove-item,.search-suggestion,.header-search>button{transition:none}
  .quote-button:active,.drawer-primary:active,.card-arrow:active,
  .thumb:active,.color-button:active,.size-button:active,
  .nav-inner button:active, .nav-inner a:where(.quick-category):active,.cart-link:active{transform:none}
}

/* ============================================================
   V98 — PRODUCT IMAGE PRESENTATION & VARIANT SELECTION
   Scoped strictly to product image components and the product
   page variant selectors. No global img rules, no typography
   changes, no colour changes, no JS or logic changes.
   ============================================================ */

:root{
  /* One shape and one breathing-room ratio for every product
     image container on the site. The inset is a percentage so a
     165px mobile card and a 361px desktop card get proportionally
     identical margins instead of the same pixel value. */
  --product-ratio:1;
  --product-inset:6%;
  --product-inset-tight:5%;
}

/* --- 1. SHARED PRODUCT IMAGE CONTAINER ---------------------- */

.card-media,
.related-product-media,
.home-product-media,
.main-image-wrap,
.color-photo-wrap,
.cart-item-image,
.cart-drawer-image,
.thumb,
.card-variant-previews button{
  display:grid;
  place-items:center;
  overflow:hidden;
}

/* Scoped image rule — product thumbnails only, never a global img
   override. object-position is stated explicitly rather than relying
   on the initial value. */
.card-image,
.related-product-media img,
.home-product-media img,
.main-image-wrap img,
.color-photo-wrap img,
.cart-item-image img,
.cart-drawer-image img,
.thumb img,
.card-variant-previews img,
.search-suggestion img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
}

/* --- 2. ONE ASPECT RATIO ------------------------------------
   The catalogue card media ratio drifted across five values
   (1.12 / 1.18 / 1.28 / 1.34 / 1.45) while the Noviteti slider,
   related products and the homepage cards were all 1:1 — so the
   same product was a different shape depending on where it
   appeared. Square is the neutral choice for a catalogue mixing
   pens (tall, narrow) with bags (wide) and apparel. */
.card-media,
.catalog-layout .card-media,
.related-product-media,
.home-product-media{
  aspect-ratio:var(--product-ratio);
}

/* --- 3. ONE INSET -------------------------------------------
   Padding on an object-fit:contain image insets the content box,
   which is what keeps products off the card edges. These values
   drifted across 3/4/8/10/14/15px plus a clamp(). */
.card-image,
.catalog-layout .card-image,
.catalog-layout .card-image-primary,
.new-products-track .card-image,
.related-product-media img,
.home-product-media img{
  padding:var(--product-inset);
}

/* The hover image used clamp(12px,4vw,18px) while the primary used
   14px, so the product visibly changed size the moment the cursor
   entered the card. Both now use the same inset. */
.catalog-layout .card-image-hover,
.card-image-hover{
  padding:var(--product-inset);
}
.measurement-image img{object-position:center center}

/* --- 5. COLOUR / SHADE SELECTOR ------------------------------
   .color-photo-button was height:auto inside a wrapping flex row,
   so button height followed the length of the colour code. Items
   on the same line stretched to match, but items on different
   lines did not — producing a ragged grid where swatches did not
   line up and the active ring could sit against its neighbour.
   A grid gives every swatch identical dimensions, wraps cleanly at
   any width, and needs no change to the markup or the click
   handlers. */
.color-options{align-items:stretch;}
.color-photo-button{display:grid;width:auto;min-width:0;height:100%;align-content:start;}
.color-photo-wrap{
  width:100%;
  height:auto;
  aspect-ratio:1;
  padding:6%;
}
.color-photo-button .color-code{display:block;width:100%;min-width:0;}
/* The active ring extends 4px beyond the button; a 12px gap keeps
   two selected-adjacent swatches from touching. */
.color-photo-button.active{z-index:1}

@media(max-width:430px){
  .color-options{grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:10px}
}

/* --- 6. SIZE SELECTOR ----------------------------------------
   Equal heights were already correct; the buttons had no
   horizontal padding, so longer labels ("One size", "38/40") sat
   flush against the border. */
.size-options{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.size-button{
  min-width:52px;
  height:46px;
  padding:0 12px;
  display:inline-grid;
  place-items:center;
}
.size-button:disabled{cursor:not-allowed;opacity:.45}

/* --- 7. VARIANT TABLE ----------------------------------------
   Four columns are correct on desktop. On narrow phones the
   arrival cell ("1.200 kom. · 15.09.2026") is the only long value;
   overflow-wrap keeps it inside its cell instead of pushing the
   grid wider than the viewport. Headers are single words and stay
   on one line at every width. */
.variant-table-head>span,
.variant-table-row>span{min-width:0}
.variant-table-head>span{white-space:nowrap}
@media(max-width:560px){
  .variant-table-head,.variant-table-row{gap:8px;padding-left:11px;padding-right:11px}
  .variant-table-row>span{overflow-wrap:anywhere}
}
@media(max-width:400px){
  .variant-table-head,.variant-table-row{
    grid-template-columns:1.35fr .85fr .6fr .95fr;
    gap:6px;
    padding-left:9px;
    padding-right:9px;
  }
}

/* --- 8. EVERY OTHER PRODUCT THUMBNAIL ------------------------
   These boxes were 76x62, 110x100, 90x86, 76x76, 62x62 and 74x74.
   Non-square boxes holding contain-fitted images waste space on
   one axis and make the same product look a different size in the
   drawer than on the cart page. All square now; the grid columns
   that hold them are unchanged. */
.search-suggestion img,
.header-search .search-suggestion-image{
  width:62px;
  height:62px;
  flex:0 0 62px;
  padding:2px;
}
.cart-item-image{width:110px;height:110px}
.cart-item-image img,.cart-drawer-image img{padding:8%}
.thumb img{padding:4%}
.card-variant-previews img{padding:2px}

@media(max-width:900px){
  .cart-item-image{width:90px;height:90px}
}
@media(max-width:700px){
  .cart-item-image{width:72px;height:72px}
  .cart-drawer-image{width:64px;height:64px}
}
@media(max-width:430px){
  .search-suggestion img,
  .header-search .search-suggestion-image{width:52px;height:52px;flex-basis:52px}
}

/* --- 9. NEVER STRETCHED --------------------------------------
   object-fit:fill is an explicit instruction to distort. The
   banners happen to match their 3:1 container today, so this is a
   safeguard rather than a visible change. */
.promo-banner-image-slide img{object-fit:cover;object-position:center center}

/* ============================================================
   V99 — BATCH 3: DESIGN SYSTEM
   A documented token layer plus controlled overrides. No
   typography changes (frozen at V96), no product image or
   swatch changes (frozen at V98), no layout changes, no new
   forced-priority declarations, no JS.
   ============================================================ */

:root{
  /* ---- BRAND ------------------------------------------------
     Unchanged values, promoted to semantic names. The teal/green
     pair is the approved direction; nothing new was invented. */
  --brand:              #21b5c9;   /* = --brand-teal      */
  --brand-strong:       #168fa4;   /* = --brand-teal-dark */
  --brand-accent:       #61c560;   /* = --brand-green     */
  --brand-tint:         #e9f8f3;   /* = --brand-mint      */
  --brand-tint-soft:    #f3faf7;   /* = --brand-soft      */
  --brand-gradient:     linear-gradient(115deg,var(--brand-teal),var(--brand-green));

  /* ---- NEUTRALS ---------------------------------------------
     Consolidates the near-duplicate greys that had accumulated
     (#f5f5f6 #f6f6f7 #f7f7f8 #fafafa #f3f3f4 were all "the light
     surface"; #e7e7ea #e5ecea #dfe9e6 #dceae6 #cdded9 were all
     "the border"). */
  --surface:            #fff;
  --surface-1:          #fbfdfc;   /* barely-off-white panels   */
  --surface-2:          #f5f8f7;   /* filled controls, wells    */
  --surface-3:          #eef4f2;   /* pressed / secondary fill  */
  --border:             #e2eae8;   /* default hairline          */
  --border-strong:      #cdded9;   /* emphasised divider        */

  /* ---- TEXT -------------------------------------------------- */
  --text:               #18181b;   /* = --ink   */
  --text-muted:         #66716f;
  --text-subtle:        #8a9694;
  --text-on-brand:      #fff;
  --placeholder:        #97a5a2;

  /* ---- FEEDBACK ---------------------------------------------
     Red is retained ONLY as a semantic danger colour (errors,
     required fields, destructive actions) and for the Swiss
     flag badge. It is no longer a brand colour. */
  --danger:             #d92f3c;
  --danger-tint:        #fff3f4;
  --success:            #20a86a;
  --success-tint:       #eefaf3;
  --warning:            #b7791f;

  /* ---- RADIUS (5 steps, replacing 24 values) ---------------- */
  --r-2xs: 4px;    /* hairline details, marks             */
  --r-xs:  6px;    /* badges, small chips                 */
  --r-sm:  10px;   /* buttons, inputs, controls           */
  --r-md:  14px;   /* cards, panels, tables               */
  --r-lg:  20px;   /* drawers, modals, large surfaces     */
  --r-pill: 999px; /* pills (unchanged)                   */

  /* ---- ELEVATION (4 steps, replacing 84 distinct shadows) --- */
  --elev-1: 0 1px 2px rgba(24,58,51,.06);
  --elev-2: 0 4px 12px rgba(24,58,51,.07);
  --elev-3: 0 10px 26px rgba(24,58,51,.08);
  --elev-4: 0 20px 48px rgba(24,58,51,.10);

  /* ---- SPACING (4pt scale) ---------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;

  /* ---- MOTION (declared in V97, documented here) ------------ */
  /* --dur-fast .14s | --dur .2s | --ease cubic-bezier(.2,.7,.2,1) */
  --dur-slow: .3s;

  /* ---- FOCUS ------------------------------------------------- */
  --focus-color: var(--brand);
  --focus-width: 2px;
  --focus-offset: 2px;
}

/* --- COLOUR CONSOLIDATION ----------------------------------
   Eight places where the pre-V54 red palette was still winning
   the cascade inside an otherwise teal interface. Verified by
   cascade analysis, not by eye — each of these was the last
   rule to set that property for that selector. */

.highlight-kicker,
.highlight-link b,
.active-filter>button{color:var(--brand-strong)}

.highlight-art i:nth-child(2),
.highlight-home .highlight-art i:nth-child(3),
.highlight-tech .highlight-art i:nth-child(2){background:var(--brand)}
.highlight-home .highlight-art i:nth-child(2){border-color:var(--brand)}

/* Category line on every cart row was brand-red; it is metadata. */
.cart-item-info p{color:var(--text-muted)}

/* Pink hairline inside the otherwise teal mega-menu. */
.menu-tertiary-list button,.menu-tertiary-list a{border-color:var(--border)}

/* Pink chip border in the active-filter row. */
.filter-chip{border-color:var(--border)}

/* "Poništi sve" was pink-on-pink; it is a neutral reset action. */
.filters-top button{background:var(--surface-2);color:var(--text-muted)}
.filters-top button:hover{background:var(--brand-tint);color:var(--brand-strong)}

/* Search match highlight was blue (#dfe9ff / #1257c7) — a third
   colour family inside the most-used control on the site. */
.search-suggestion mark,
.header-search mark{background:var(--brand-tint);color:var(--brand-strong)}

/* Red retained deliberately as semantic danger, not as brand. */
.form-error,.required-mark,.remove-item:hover{color:var(--danger)}
#formMessage.form-error{background:var(--danger-tint)}
#formMessage.form-success{background:var(--success-tint)}

/* --- BUTTON SYSTEM ------------------------------------------
   Heights were 34/38/39/42/44/45/46/52/56/58px. Two sizes now.
   Hierarchy, colours and labels are unchanged. */
.pagination button,
.price-filter button,
.filters-top button,
.gallery-modes button{min-height:40px}

.quote-button,
.drawer-primary,
.drawer-secondary,
.quote-success-action,
.mobile-filters-toggle{min-height:48px}

button:disabled,
.quote-button:disabled,
.pagination button:disabled{opacity:.5;cursor:not-allowed}

/* --- FORM CONTROLS -------------------------------------------
   One height, one radius, one border, one focus treatment. */
.cart-summary input,
.cart-summary textarea,
.price-filter input,
.header-search input,
.catalog-view-controls select{
  border-radius:var(--r-sm);
  background:var(--surface);
}
.cart-summary input::placeholder,
.cart-summary textarea::placeholder,
.price-filter input::placeholder,
.header-search input::placeholder{color:var(--placeholder)}

.cart-summary input:focus-visible,
.cart-summary textarea:focus-visible,
.price-filter input:focus-visible,
.catalog-view-controls select:focus-visible{
  outline:var(--focus-width) solid var(--focus-color);
  outline-offset:var(--focus-offset);
}
.cart-summary input:disabled,
.cart-summary textarea:disabled{background:var(--surface-2);cursor:not-allowed;opacity:.6}

/* Checkbox and radio accents unified to brand. */
.filter-option input,
.customer-type input{accent-color:var(--brand)}

/* --- CARD CONSISTENCY ----------------------------------------
   Borders and resting elevation only. Padding rhythm, image
   presentation and hover transforms are untouched. */
.product-card,
.related-product-card,
.cart-item,
.highlight-card,
.variant-table-block,
.info-section,
.message{border-color:var(--border)}

/* --- NAVIGATION & MENUS --------------------------------------- */
.categories-menu,
.new-menu,
.search-suggestions,
.header-search .search-suggestions{border-color:var(--border);box-shadow:var(--elev-4)}
.category-level{border-color:var(--border)}

/* The tertiary mega-menu column carried a pink gradient; it is
   now the same neutral panel as its siblings. */
.category-level-tertiary{background:var(--surface-1)}

/* --- ACCESSIBILITY STATES ------------------------------------
   Every state gets a non-colour cue as well as a colour one, so
   the interface stays readable without colour perception. */

/* SELECTED — shape cue (inset bar) in addition to the tint. */
.filter-option:has(input:checked){box-shadow:inset 2px 0 0 var(--brand)}

/* ERROR / SUCCESS — position cue (leading bar) plus the tint. */
#formMessage.form-error{border-left:3px solid var(--danger)}
#formMessage.form-success{border-left:3px solid var(--success)}

/* DISABLED — opacity and cursor, never colour alone. */
[disabled],[aria-disabled="true"]{cursor:not-allowed}

/* FOCUS-VISIBLE — one ring, defined once, used everywhere. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible,
[tabindex]:focus-visible{
  outline:var(--focus-width) solid var(--focus-color);
  outline-offset:var(--focus-offset);
}

/* ============================================================
   V100 — BATCH 4: FINAL PREMIUM POLISH
   State application, motion and touch targets only.
   Typography, image system, gallery, shade selector, tokens,
   colours, radii and shadows are all frozen and untouched —
   this block only *applies* the approved tokens where states
   were missing.
   ============================================================ */

/* --- 1. HOVER STATES ----------------------------------------
   Interactive elements that had no hover feedback at all.
   All use approved tokens; none move more than 1px. */

.quick-category:hover{background:var(--brand-tint);color:var(--brand-strong)}
.menu-all-link:hover{background:var(--brand-tint);color:var(--brand-strong)}
.back-link:hover{color:var(--brand-strong)}
.home-product-link:hover{background:var(--brand-tint);color:var(--brand-strong)}
.card-arrow:hover{background:var(--brand-gradient);color:var(--text-on-brand)}
.info-section summary:hover{color:var(--brand-strong)}
.customer-type label:hover{background:var(--surface-2)}
.close-mobile-filters:hover,
.cart-drawer-head button:hover{background:var(--surface-2);color:var(--text)}
.new-products-controls button:hover,
.promo-stories-arrows button:hover{background:var(--brand-tint);border-color:var(--brand)}
.promo-banner-dots button:hover,
.new-products-dots button:hover,
.promo-stories-dots button:hover{opacity:.85}
.related-product-card{transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.related-product-card:hover{border-color:var(--border-strong)}
.brand:hover{opacity:.85}

/* --- 2. FOCUS-VISIBLE ---------------------------------------
   The global ring from V99 covers a/button/input/select/textarea/
   summary. Two cases it cannot reach: */

/* Card links sit inside .product-card{overflow:hidden}, which clips
   an outline. The card itself carries the indication instead. */
.product-card:focus-within{border-color:var(--brand);box-shadow:var(--elev-2)}
.related-product-card:focus-within{border-color:var(--brand)}

/* Dots are 6-8px; an outline on the visual dot is unreadable, so the
   ring goes on the expanded hit box created in section 6. */
.promo-banner-dots button:focus-visible,
.new-products-dots button:focus-visible,
.promo-stories-dots button:focus-visible{outline-offset:0}

/* --- 3. ACTIVE AND SELECTED STATES --------------------------
   Selected states carry a shape cue as well as a colour cue, so
   they survive without colour perception (V99 principle, applied
   to the remaining controls). */

.gallery-modes button.active,
.filter-category-list button.active{box-shadow:inset 0 -2px 0 var(--brand)}
.size-filter-option:has(input:checked){box-shadow:inset 2px 0 0 var(--brand)}
.new-menu button.active,
.quick-category.active{box-shadow:inset 0 -2px 0 var(--brand)}

/* --- 4. BUTTON FEEDBACK -------------------------------------
   Press feedback for controls the V97 pass did not cover.
   1px translate, no scale beyond .985, no bounce. */
.quick-category:active,
.menu-all-link:active,
.close-mobile-filters:active,
.cart-drawer-head button:active,
.new-products-controls button:active,
.promo-stories-arrows button:active,
.gallery-modes button:active,
.size-filter-option:active,
.color-filter-option:active,
.search-suggestion:active,
.home-product-link:active,
.related-product-card:active,
.info-section summary:active{transform:translateY(1px)}

/* Waiting state on submit already exists in cart.js; make it read
   as waiting rather than merely faded. */
.quote-button:disabled{cursor:wait}

/* --- 5. PRODUCT CARD POLISH ---------------------------------
   Border and shadow transitions only. Image system, structure,
   padding rhythm and typography untouched. */
.product-card{transition:border-color var(--dur) var(--ease),
                         box-shadow var(--dur) var(--ease),
                         transform var(--dur) var(--ease)}
.product-card:hover{border-color:var(--border-strong)}

/* --- 6. TOUCH TARGETS ---------------------------------------
   Expanded hit areas via pseudo-elements and content-box padding,
   so the *visual* size of every control is unchanged. Nothing in
   the frozen systems is resized. */

.card-arrow{position:relative}
.card-arrow::after{content:"";position:absolute;inset:-5px;border-radius:inherit}

.color-filter-option{position:relative}
.color-filter-option::after{content:"";position:absolute;inset:-5px;border-radius:inherit}

.card-variant-previews button{position:relative}
.card-variant-previews button::after{content:"";position:absolute;inset:-4px;border-radius:inherit}

.close-mobile-filters{width:44px;height:44px;display:grid;place-items:center}

/* Carousel dots: visible dot unchanged, tap area 40px tall. */
.promo-banner-dots button,
.new-products-dots button,
.promo-stories-dots button{
  box-sizing:content-box;
  padding:16px 7px;
  background-clip:content-box;
}
.promo-banner-dots,
.new-products-dots,
.promo-stories-dots{gap:0}

@media(max-width:900px){
  .new-products-controls button,
  .promo-stories-arrows button{width:44px;height:44px}
  .cart-drawer-head button{min-width:44px;min-height:44px}
}

/* --- 7. SEARCH ----------------------------------------------- */
.search-suggestion:hover{background:var(--surface-1)}
.search-suggestion:focus-visible{outline-offset:-2px}
.search-suggestion-empty{color:var(--text-muted)}
.header-search input:focus-visible{outline-offset:-1px}

/* --- 8. FILTERS ---------------------------------------------- */
.filters-top button{transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.filter-section>summary{cursor:pointer}
.mobile-filters-toggle{transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.mobile-filters-apply{transition:opacity var(--dur-fast) var(--ease)}
.mobile-filters-apply:active{opacity:.9}

/* --- 9. CART -------------------------------------------------- */
.cart-item{transition:border-color var(--dur) var(--ease)}
.cart-item:hover{border-color:var(--border-strong)}
.cart-drawer-item{transition:background var(--dur-fast) var(--ease)}
.drawer-primary,.drawer-secondary{transition:background var(--dur) var(--ease),
                                             border-color var(--dur) var(--ease),
                                             transform var(--dur-fast) var(--ease)}

/* --- 10. QUOTE FORM ------------------------------------------ */
.cart-summary label{cursor:default}
.cart-summary input:focus-visible,
.cart-summary textarea:focus-visible{outline-offset:1px}
.required-mark{margin-left:2px}

/* --- 11. EMPTY / LOADING / ERROR STATES ---------------------- */
.message,#emptyCart,.search-suggestion-empty,.cart-drawer-empty{
  color:var(--text-muted);
}
.card-media.no-image:after{color:var(--text-subtle)}

/* --- 12. MOTION ----------------------------------------------
   Transitions on interactive elements capped into the 120-220ms
   band. Image cross-fades are part of the frozen V98 system and
   are deliberately left alone. */
.gallery-modes button,
.size-filter-option,
.color-filter-option,
.filter-category-list button,
.quick-category,
.menu-all-link,
.back-link,
.home-product-link,
.card-arrow,
.close-mobile-filters,
.cart-drawer-head button,
.new-products-controls button,
.promo-stories-arrows button,
.info-section summary,
.customer-type label{
  transition:background-color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             opacity var(--dur-fast) var(--ease),
             transform var(--dur-fast) var(--ease);
}

/* --- 13. SMALL LOCAL SPACING CORRECTIONS --------------------- */
.gallery-modes{margin-bottom:var(--sp-3)}
.cart-drawer-empty{gap:var(--sp-2)}

/* --- 14. REDUCED MOTION --------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .quick-category,.menu-all-link,.back-link,.home-product-link,
  .card-arrow,.close-mobile-filters,.cart-drawer-head button,
  .new-products-controls button,.promo-stories-arrows button,
  .gallery-modes button,.size-filter-option,.color-filter-option,
  .filter-category-list button,.info-section summary,
  .customer-type label,.product-card,.related-product-card,
  .cart-item,.cart-drawer-item,.drawer-primary,.drawer-secondary,
  .mobile-filters-toggle,.mobile-filters-apply{transition:none}

  .quick-category:active,.menu-all-link:active,.close-mobile-filters:active,
  .cart-drawer-head button:active,.new-products-controls button:active,
  .promo-stories-arrows button:active,.gallery-modes button:active,
  .size-filter-option:active,.color-filter-option:active,
  .search-suggestion:active,.home-product-link:active,
  .related-product-card:active,.info-section summary:active{transform:none}
}

/* ============================================================
   V101 — FILTER SIDEBAR UX
   CSS only. No JavaScript, no filter logic, no API values, no
   URL parameters. Typography, image system, tokens, colours,
   radii and shadows are frozen and used, not changed.
   ============================================================ */

/* --- 1. SIZE FILTER: content-sized chips --------------------
   CAUSE OF TRUNCATION: .size-filter-grid was
   `repeat(3,minmax(0,1fr))` — three EQUAL columns — while
   .size-filter-option span carried `white-space:nowrap;
   overflow:hidden; text-overflow:ellipsis`. Every value was
   forced into the same ~78px cell regardless of its length, so
   "S" wasted two thirds of its cell while "36/38" or "L (50-52)"
   was cut to "3..." / "L...". The size facet mixes 1-character
   and 9-character values, so equal columns cannot work.
   Chips are now sized by their content and wrap naturally. */
.size-filter-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-content:flex-start;
  max-height:236px;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:2px 8px 14px 2px;
  scrollbar-width:thin;
  scrollbar-color:#aebbb8 transparent;
}
.size-filter-grid::-webkit-scrollbar{width:6px}
.size-filter-grid::-webkit-scrollbar-thumb{border-radius:var(--r-sm);background:#aebbb8}
.size-filter-grid::-webkit-scrollbar-track{background:transparent}

.size-filter-option{
  display:inline-grid;
  place-items:center;
  width:auto;
  min-width:44px;
  max-width:100%;
  min-height:44px;
  margin-left:0;
  padding:0 12px;
  border-radius:var(--r-sm);
  overflow:visible;
}
/* The ellipsis machinery is switched off — with content-sized
   chips there is nothing left to truncate. */
.size-filter-option span{
  display:inline;
  width:auto;
  min-width:0;
  overflow:visible;
  text-overflow:clip;
  white-space:nowrap;
}

/* --- 2. TWO REGRESSIONS FROM V97 ----------------------------
   `.filter-option{padding:2px 6px;margin-left:-6px;
   border-radius:var(--r-xs)}` was written for the checkbox ROWS
   (brand, material, print). Size chips carry BOTH classes
   `filter-option size-filter-option`, and the V97 block sits
   later in the file, so it also won on the chips:
     a) margin-left:-6px pulled every chip 6px left, so the first
        column hung outside the sidebar and the visual gap between
        columns was wrong.
     b) the chips inherited the row radius (--r-xs) instead of the
        control radius (--r-sm).
   Both corrected above. */

/* V97/V99 also applied the checkbox-ROW selected treatment to the
   chips, replacing the chip's own ring with a left bar — a weak
   cue on a centre-aligned chip. The ring is restored; it is a
   shape cue, so selection stays readable without colour. */
.size-filter-option:hover{background:var(--brand-tint);border-color:var(--brand)}
.size-filter-option:has(input:checked){
  border-color:var(--brand-strong);
  background:var(--brand-tint);
  box-shadow:inset 0 0 0 2px var(--brand-strong);
}
.size-filter-option input:focus-visible+span{
  outline:var(--focus-width) solid var(--focus-color);
  outline-offset:4px;
}

/* --- 3. TYPOGRAPHY FLOOR BUG --------------------------------
   `.size-filter-option span` carried `font-size:clamp(9px,1vw,12px)`.
   Batch 1 established a 10px minimum and raised every 8px/9px
   literal, but a clamp() *minimum* was not caught by that pass, so
   below a 1000px viewport this rendered at 9px. Raising the floor
   only — the preferred and maximum values are untouched. */
.size-filter-option span{font-size:clamp(10px,1vw,12px)}

/* --- 4. SECTION HEADINGS & EXPAND/COLLAPSE ------------------ */
.filter-section>summary{gap:10px}
.filter-section>summary:after{transition:transform var(--dur) var(--ease)}
.filter-section[open]>summary:after{transform:rotate(180deg)}
.filter-category-group>summary{min-height:44px}
.filter-category-list button{min-height:40px}
.filter-category-list button.sub{min-height:40px}

/* --- 5. SCROLL AREAS: intentional, not accidental -----------
   A hairline on a scrollable list makes the clip read as a
   boundary rather than a cut-off. */
.size-filter-grid,
.filter-options.scrollable{
  border-bottom:1px solid var(--border);
  padding-bottom:12px;
  margin-bottom:8px;
}

/* --- 6. SIDEBAR WIDTH ----------------------------------------
   Unchanged up to 1599px (250/260/270/292/300px by breakpoint).
   A single 20px increase at very wide viewports, where the grid
   has room to spare — the product grid keeps well over 1100px. */
@media(min-width:1600px){
  .catalog-layout{grid-template-columns:320px minmax(0,1fr)}
}

/* --- 7. MOBILE FILTER PANEL ---------------------------------- */
@media(max-width:900px){
  .size-filter-grid{max-height:none;overflow:visible;border-bottom:0}
  .filter-options.scrollable{max-height:none;overflow:visible;border-bottom:0}
  .size-filter-option{min-height:44px;padding:0 14px}
  .close-mobile-filters{width:44px;height:44px}
}
@media(max-width:400px){
  .size-filter-grid{gap:7px}
  .size-filter-option{min-width:42px;padding:0 10px}
}

@media(prefers-reduced-motion:reduce){
  .filter-section>summary:after{transition:none}
}

/* ============================================================
   V103 — PRODUCTION QA: RESPONSIVE DEFECT FIXES
   Four defects only. No redesign, no spacing changes beyond
   what each fix requires, no new components or animations.
   ============================================================ */

/* --- QA-1. SAFE AREA — INVESTIGATED, NOT A DEFECT ----------
   The project contains zero env(safe-area-inset-*) rules, and two
   controls are anchored to the bottom of a full-height fixed
   overlay (.mobile-filters-apply and .cart-drawer-footer), so this
   looked like a notched-phone defect.
   It is not. env(safe-area-inset-*) only resolves to a non-zero
   value when the viewport meta carries viewport-fit=cover. Every
   page uses the default (width=device-width,initial-scale=1),
   which behaves as viewport-fit=contain — iOS lays the page out
   inside the safe area, so the home indicator never overlays
   these controls.
   No fix applied: safe-area padding here would resolve to 0 on
   every device and add CSS for no effect.
   IF viewport-fit=cover is ever added, this becomes a real defect
   and both controls will need bottom insets. */

/* --- QA-2. SCROLL CHAINING IN THE FILTER DRAWER -------------
   The mobile filter drawer is overflow-y:auto with no
   overscroll-behavior, so scrolling past the end of the filter
   list scrolls the catalogue behind it — the page loses the
   user's position while the drawer is still open.
   (script.js sets .open on the drawer but no body class, so a
   true scroll lock would require JavaScript. overscroll-behavior
   is the CSS-only equivalent and prevents the chaining.) */
@media(max-width:900px){
  .catalog-filters.open{overscroll-behavior:contain}
}

/* --- QA-3. VIEWPORT UNITS ON MOBILE -------------------------
   100vh excludes the collapsing browser chrome on iOS and
   Android, so a 100vh-derived max-height can exceed the actually
   visible viewport and leave the bottom of a panel unreachable.
   dvh is applied as a progressive enhancement — the 100vh line
   stays as the fallback for older engines. */
@supports(height:100dvh){
  @media(min-width:701px){
    .categories-menu,.category-browser{max-height:calc(100dvh - 150px)}
  }
  @media(max-width:700px){
    .categories-menu,.category-browser{height:100dvh;max-height:100dvh}
  }
}

/* ============================================================
   V104 — TASK 1: RESERVED PRODUCT DESCRIPTION AREA
   Layout behaviour only. No typography, colour, radius, shadow
   or image-system change; card structure and markup untouched.
   ============================================================ */

/* The catalogue description was clamped to a single line with an
   18-20px reservation, so a two-line description was cut mid-phrase
   and cards looked unfinished. The area is now reserved in em, so it
   scales with the (frozen) type size and every card in a row holds
   the same block whether its description is one line or five. */
@media(min-width:901px){
  .catalog-layout .card-description{
    -webkit-line-clamp:2;
    min-height:2.8em;      /* exactly 2 lines at line-height 1.4 */
  }
}
@media(min-width:1201px){
  .catalog-layout .card-description{
    -webkit-line-clamp:3;
    min-height:4.2em;      /* exactly 3 lines at line-height 1.4 */
  }
}

/* V108 production QA: prevent min-content widths from forcing the
   product detail column beyond narrow phone viewports. */
.product-detail > *{min-width:0}
.product-breadcrumb{display:flex;flex-wrap:wrap;gap:5px}
.product-breadcrumb a{color:inherit;text-decoration:none}
.product-breadcrumb a:hover{text-decoration:underline}

/* At tablet widths the three header actions plus search exceed the
   available row. Demo Group remains available in the site navigation;
   hiding only this duplicate header link keeps Cart fully reachable. */
@media(max-width:900px) and (min-width:701px){
  .header-actions .group-site-header-link{display:none}
}

/* Second cause of misalignment: .card-variant-previews is rendered
   only when a product has more than one preview, so single-variant
   cards lost 57px (52px min-height, -5px top and 10px bottom margin)
   and their stock block, ETA and price sat higher than their
   neighbours'. The slot is now reserved when the block is absent, so
   stock and ETA align across a row. Price was already bottom-anchored
   by .card-meta{margin-top:auto}. */
.catalog-layout .card-content:not(:has(.card-variant-previews)) .card-stock{
  margin-top:57px;
}


/* .card-description is rendered only when the product has one
   (`display.description ? ... : ""` in script.js), so cards without a
   description lost the whole reserved block and their stock, ETA and
   price sat higher than their neighbours'. The slot is reserved on the
   element that follows it in the DOM. Values match the reservations
   above: 4px margin + 2 lines (33.6px) / 3 lines (50.4px) at 12px/1.4. */
@media(min-width:901px){
  .catalog-layout .card-content:not(:has(.card-description)) .card-code{margin-top:38px}
}
@media(min-width:1201px){
  .catalog-layout .card-content:not(:has(.card-description)) .card-code{margin-top:54px}
}

/* ============================================================
   V111 — MOBILNI PRIKAZ: NAZIV I OPIS NA KARTICI
   Samo ≤900px. Desktop (≥901px) se ne dira.

   UZROK PROBLEMA (dva odvojena, oba potvrđena u kaskadi):

   1) Pravilo `.catalog-layout .card-description{display:none}` u
      @media(max-width:560px) dolazi PRE globalnog pravila
      `.catalog-layout .card-description{display:-webkit-box;...}`.
      Ista specifičnost (0,2,0), a kasniji izvor pobeđuje bez obzira
      na media query — pa je opis na mobilnom ipak prikazan. To
      "skrivanje" je bilo mrtvo pravilo i pre ove izmene.

   2) Vidljivi opis je na mobilnom imao `-webkit-line-clamp:1` uz
      `min-height:18–20px`. `min-height` je DONJA granica — ona ne
      može da spreči prelivanje. Kada line-clamp iz bilo kog razloga
      ne odseče tekst (druga deklaracija `display`, stariji engine,
      prelom na vrlo uskom ekranu), sadržaj naraste preko kutije i
      uđe u red "Model ...". Otuda preklapanje sa screenshot-a.

   REŠENJE: naziv i opis dobijaju po 2 reda, sa `max-height` kao
   tvrdim graničnikom pored line-clamp-a. Ako clamp radi — max-height
   nikad ne stupa na snagu. Ako ne radi — `overflow:hidden` seče
   čisto i tekst ne može da uđe u model, swatch-eve, zalihu ni cenu.
   Nema fiksne visine kartice: .card-content je flex kolona i raste.
   ============================================================ */

@media(max-width:900px){
  .catalog-layout .card-content h2,
  .catalog-layout .card-description{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-width:0;
    overflow-wrap:anywhere;   /* vrlo dugačke reči na 320px */
  }

  /* Naziv: najviše 2 reda. */
  .catalog-layout .card-content h2{
    -webkit-line-clamp:2;
    max-height:2.75em;        /* tvrdi graničnik uz clamp */
  }

  /* Opis: najviše 2 reda, sa "..." kada je duži. */
  .catalog-layout .card-description{
    -webkit-line-clamp:2;
    min-height:2.8em;         /* isti blok za sve kartice u redu */
    max-height:2.95em;        /* tvrdi graničnik uz clamp */
    margin:4px 0 0;
  }

  /* Normalan razmak posle teksta, pre modela i swatch-eva. */
  .catalog-layout .card-code{margin:8px 0 12px}
}

/* ============================================================
   V112 — "Kontakt" u navigaciji na svim glavnim stranicama
   Kontakt sekcija ostaje samo na početnoj; ovo su linkovi ka njoj.

   Namerno NE koristi postojeće klase iz .header-actions:
     .back-link                 -> display:none ispod 560px
     .group-site-header-link    -> display:none globalno
   Kontakt mora biti vidljiv na svim širinama, posebno na mobilnom.
   Vizuelno preuzima stil .back-link (14px, muted, 700) da se ne
   uvodi nov izgled navigacije.
   ============================================================ */
.header-contact-link{
  display:inline-flex;
  align-items:center;
  min-height:44px;              /* tap target */
  padding:0 2px;
  color:var(--muted);
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
  transition:color var(--dur-fast) var(--ease);
}
.header-contact-link:hover{color:var(--brand-strong)}
@media(max-width:700px){
  .header-contact-link{font-size:13px}
}
/* V114: fullscreen product gallery with keyboard, touch and pointer zoom. */
.main-image-wrap{position:relative;width:100%;cursor:zoom-in;}
.gallery-zoom-hint{position:absolute;right:14px;bottom:14px;padding:7px 10px;border-radius:999px;background:rgba(20,20,24,.78);color:#fff;font-size:11px;font-weight:800}
.product-lightbox{position:fixed;z-index:1000;inset:0;display:grid;grid-template-columns:64px minmax(0,1fr) 64px;align-items:center;background:rgba(8,9,12,.96);color:#fff;overscroll-behavior:contain}
.product-lightbox.hidden{display:none}.product-lightbox button{color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);cursor:pointer}
.lightbox-close{position:absolute;z-index:2;right:20px;top:18px;width:48px;height:48px;border-radius:999px;font-size:30px}.lightbox-nav{width:48px;height:64px;margin:auto;border-radius:14px;font-size:42px}.lightbox-stage{height:100dvh;display:grid;place-items:center;overflow:hidden;touch-action:none}.lightbox-stage img{max-width:92%;max-height:88dvh;object-fit:contain;transform:translate3d(0,0,0) scale(1);transform-origin:center;transition:transform .16s ease;cursor:zoom-in;user-select:none}.lightbox-stage img.zoomed{cursor:grab;transition:none}.lightbox-stage img.dragging{cursor:grabbing}.lightbox-counter{position:absolute;top:26px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:800}.lightbox-help{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);margin:0;color:#d2d2d7;font-size:11px;text-align:center}
body.lightbox-open{overflow:hidden}
@media(max-width:700px){.product-lightbox{grid-template-columns:44px minmax(0,1fr) 44px}.lightbox-nav{width:38px;height:54px}.lightbox-help{width:80%}.gallery-zoom-hint{display:none}}

/* ============================================================
   V114.1 — CATALOG PARITY / CLEAN BROWSING PASS
   Catalogue-only composition: no homepage hero, canonical three-level
   taxonomy, compact active filters and PromoBox-like information density.
   DemoShop brand tokens remain unchanged.
   ============================================================ */
.catalog-main{padding-top:0;background:#fff}
.catalog-shell{padding-top:28px}
.catalog-page-heading{margin:0 0 22px 280px}
.catalog-breadcrumb{display:flex;align-items:center;gap:9px;min-height:24px;margin:0 0 20px;color:var(--muted);font-size:12px}
.catalog-breadcrumb a{color:var(--muted);text-decoration:none}
.catalog-breadcrumb a:hover{color:var(--brand-teal-dark)}
.catalog-breadcrumb .breadcrumb-separator,.catalog-breadcrumb>span[aria-hidden="true"]{color:#b6c0bd}
.catalog-breadcrumb span:last-child{color:var(--ink)}
.catalog-heading-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.catalog-heading-row h1{margin:0;color:var(--ink);font-size:32px;line-height:1.12;letter-spacing:-.035em}
.catalog-heading-meta{margin:0 2px 3px;color:var(--muted);font-size:11px}
.catalog-layout{grid-template-columns:246px minmax(0,1fr);gap:34px}
.catalog-filters{top:132px;max-height:calc(100vh - 150px)}
.results-bar{min-height:52px;padding:0 0 12px;border-bottom:1px solid var(--line)}
.results-bar>div:first-child{display:flex;align-items:baseline;gap:6px}
.results-bar>div:first-child strong{font-size:22px;letter-spacing:-.03em}
.catalog-view-controls{gap:15px}
.catalog-view-controls label{gap:7px;color:var(--muted);font-size:10px}
.catalog-view-controls select{height:38px;min-width:108px;background:#fff;border-color:var(--line);border-radius:8px}
.active-filter{min-height:0;margin:10px 0 16px;padding:0;border:0;background:transparent;box-shadow:none}
.active-filter>div{display:flex;align-items:center;flex-direction:row;gap:8px;flex-wrap:wrap}
.active-filter>div>span{flex:none;color:var(--muted);font-size:10px;letter-spacing:0;text-transform:none}
.filter-chips{display:flex;align-items:center;gap:6px}
.filter-chip{min-height:30px;padding:5px 9px;border:0;background:#f2f4f4;color:#43504d;font-size:10px;font-weight:600}
.filter-chip:hover{background:var(--brand-soft);color:var(--brand-teal-dark)}
.active-filter>button{margin-left:auto;padding:6px 8px;background:transparent;color:var(--brand-teal-dark);font-size:10px}
.active-filter>button:hover{background:var(--brand-soft)}
.filter-category-list{gap:1px}
.filter-category-group>summary{padding:9px 2px;font-size:12px}
.filter-category-sublist{padding:0 0 9px 8px}
.filter-subcategory-group{display:block}
.filter-category-list button.sub{min-height:34px;padding:7px 8px 7px 11px;font-size:11px}
.filter-third-list{display:flex;flex-direction:column;margin:2px 0 5px 11px;padding-left:8px;border-left:1px solid #dce7e4}
.filter-category-list button.sub.third{min-height:31px;padding-left:11px;border-left:0;font-size:10px}
.filter-category-list button.sub.third.active{box-shadow:inset 2px 0 0 var(--brand-teal)}
.filter-section summary{padding:12px 0;font-size:12px}
.filter-option{min-height:33px;font-size:12px}
.catalog-layout .product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;row-gap:18px}
.catalog-layout .product-card{border-radius:10px;box-shadow:none}
.catalog-layout .card-media{aspect-ratio:1/1}
.catalog-layout .card-content{padding:14px}
.catalog-layout .card-content h2{font-size:16px;line-height:1.18}
.catalog-layout .card-description{font-size:10px;line-height:1.45;min-height:29px}
.catalog-layout .card-category{font-size:9px}
.catalog-layout .card-stock{margin:8px 0 10px;padding:8px 9px}
.catalog-layout .card-meta{padding-top:10px}
.status-coming,.status-arrived{min-width:46px;padding:0 6px;font-size:8px;letter-spacing:.01em}
.status-coming{background:#52606d}
.status-arrived{background:#159b6b}

/* Desktop cascading category menu — one source of truth: Group1/2/3. */
@media(min-width:701px){
  .categories-menu{padding-top:7px}
  .category-browser{width:max-content;grid-template-columns:220px 240px 240px;gap:7px}
  .category-level{padding:10px;}
  .category-level-primary,.category-level-secondary,.category-level-tertiary{background:#fff}
  .category-level-heading{align-items:center;margin-bottom:6px;padding:1px 2px 8px;border-bottom:1px solid var(--line)}
  .category-level-heading strong{font-size:12px}
  .menu-step-button{min-height:38px;padding:8px 9px;background:#fff;font-size:11px;font-weight:500}
  .menu-step-button:hover,.menu-step-button:focus-visible{transform:none;background:#f5f7f7}
  .category-level-primary .menu-step-button.active{background:#f3f5f5;color:var(--ink);box-shadow:inset 2px 0 0 var(--brand-teal)}
  .category-level-primary .menu-step-button.active small,.category-level-primary .menu-step-button.active b{color:var(--muted)}
  .category-level-secondary .menu-step-button.active{border:0;background:#f3f5f5;color:var(--ink);box-shadow:inset 2px 0 0 var(--brand-teal)}
  .menu-tertiary-list{gap:2px;margin-top:0}
  .menu-tertiary-list button,.menu-tertiary-list a{min-height:38px;padding:8px 9px;border:0;background:#fff;border-radius:6px;font-size:11px;font-weight:500}
  .menu-tertiary-list button:hover,.menu-tertiary-list a:hover{transform:none;background:#f5f7f7}
  .menu-tertiary-list button small,.menu-tertiary-list a small{margin-left:auto;color:var(--muted);font-size:9px}
}

@media(max-width:1350px) and (min-width:1101px){
  .catalog-layout .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1100px) and (min-width:901px){
  .catalog-page-heading{margin-left:274px}
  .catalog-layout{grid-template-columns:240px minmax(0,1fr);gap:26px}
  .catalog-layout .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* V120.12.8: nedostajući pojas 701–900. "Density" pravilo iznad
   (repeat(4,…)) je bez media opsega i kasnije u izvoru, pa je pobeđivalo
   starije tablet pravilo @max-900 — tableti su dobijali 4 kolone od
   ~166px sa karticama visokim ~690px (izmereno na 744px). V116 guard
   serija (≤700 / ≤360) se ovim kompletira i za tablet pojas. */
@media(max-width:900px) and (min-width:701px){
  .catalog-layout .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .catalog-shell{padding-top:18px}
  .catalog-page-heading{margin:0 0 17px}
  .catalog-heading-row h1{font-size:27px}
  .catalog-heading-meta{display:none}
  .catalog-breadcrumb{margin-bottom:12px}
  .active-filter{align-items:flex-start;flex-direction:row}
  .active-filter>div{flex-direction:row;align-items:center}
}
@media(max-width:560px){
  .catalog-shell{padding-top:14px}
  .catalog-heading-row h1{font-size:24px}
  .catalog-breadcrumb{gap:6px;font-size:10px;white-space:nowrap;overflow:hidden}
  .catalog-breadcrumb span,.catalog-breadcrumb a{overflow:hidden;text-overflow:ellipsis}
  .results-bar{align-items:flex-start;gap:10px}
  .catalog-view-controls{gap:8px}
  .catalog-view-controls label{font-size:0}
  .catalog-view-controls label:has(#catalogSort)::before{content:"Sort";font-size:9px}
  .catalog-view-controls label:has(#catalogLimit)::before{content:"Prikaz";font-size:9px}
  .catalog-view-controls select{min-width:82px;height:36px;font-size:10px}
  .active-filter{gap:8px}
  .active-filter>div>span{width:100%}
  .active-filter>button{margin-left:0}
}

/* ============================================================
   V115 — "PRIKAŽI SVOJ LOGO" (pregled brendiranja)
   Koristi postojeće DemoShop tokene. Bez novog vizuelnog sistema.
   ============================================================ */

.logo-studio-open{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:100%;
  min-height:48px;
  margin-top:14px;
  padding:0 16px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--surface);
  color:var(--brand-strong);
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.logo-studio-open:hover{border-color:var(--brand);background:var(--brand-tint)}
.logo-studio-open:active{transform:translateY(1px)}

body.logo-studio-open{overflow:hidden}

.logo-studio{
  position:fixed;
  inset:0;
  z-index:1300;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(10,14,13,.72);
}
.logo-studio.hidden{display:none}

.logo-studio-panel{
  display:flex;
  flex-direction:column;
  width:min(1080px,100%);
  max-height:92vh;
  overflow:hidden;
  border-radius:var(--r-lg);
  background:var(--surface);
  box-shadow:var(--elev-4);
}
@supports(max-height:92dvh){ .logo-studio-panel{max-height:92dvh} }

.logo-studio-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:20px 22px;
  border-bottom:1px solid var(--border);
}
.logo-studio-head h2{margin:4px 0 0;font-size:clamp(20px,2.2vw,26px);line-height:1.15;letter-spacing:-.02em}
.logo-studio-close{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  flex:none;
  border:0;
  border-radius:var(--r-sm);
  background:transparent;
  color:var(--text);
  font-size:24px;
  line-height:1;
  cursor:pointer;
}
.logo-studio-close:hover{background:var(--surface-2)}

.logo-studio-body{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
  gap:22px;
  padding:22px;
  overflow-y:auto;
}

.logo-studio-stage{
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:1;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface-2);
  touch-action:none;
}
.logo-studio-product{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  padding:5%;
  pointer-events:none;
  user-select:none;
}
.logo-studio-logo{
  position:absolute;
  left:50%;
  top:50%;
  width:28%;
  transform:translate(-50%,-50%);
  object-fit:contain;
  cursor:grab;
  user-select:none;
}
.logo-studio-logo:active{cursor:grabbing}
.logo-studio-logo.hidden{display:none}
.logo-studio-3d{width:100%;height:100%}

.logo-studio-3d-slot{
  margin:10px 0 0;
  padding:11px 13px;
  border-radius:var(--r-sm);
  background:var(--surface-2);
  color:var(--text-muted);
  font-size:12px;
  line-height:1.5;
}
.logo-studio-3d-slot strong{color:var(--text)}

.logo-studio-controls{display:flex;flex-direction:column;gap:16px;min-width:0}
.logo-studio-row{display:flex;flex-direction:column;gap:7px}
.logo-studio-row label{font-size:12px;font-weight:600;color:var(--text)}
.logo-studio-row output{float:right;color:var(--brand-strong);font-variant-numeric:tabular-nums}
.logo-studio-row select,
.logo-studio-row input[type="file"]{
  min-height:44px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--surface);
  font:inherit;
  font-size:13px;
}
.logo-studio-row input[type="range"]{width:100%;accent-color:var(--brand);min-height:32px}
.logo-studio-upload span{display:block;font-size:13px;font-weight:700}
.logo-studio-upload small{display:block;margin-top:3px;color:var(--text-muted);font-size:11px;font-weight:500;line-height:1.4}

.logo-studio-hint{margin:0;color:var(--text-muted);font-size:12px;line-height:1.5}
.logo-studio-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.logo-studio-reset,.logo-studio-quote{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 16px;
  border-radius:var(--r-sm);
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
}
.logo-studio-reset{border:1px solid var(--border);background:var(--surface);color:var(--text)}
.logo-studio-reset:hover{border-color:var(--brand);color:var(--brand-strong)}
.logo-studio-quote{flex:1;border:0;background:var(--brand-gradient);color:var(--text-on-brand)}
.logo-studio-note{margin:0;color:var(--text-subtle);font-size:11px;line-height:1.5}

@media(max-width:860px){
  .logo-studio-body{grid-template-columns:minmax(0,1fr);gap:18px;padding:16px}
  .logo-studio-head{padding:16px}
  .logo-studio{padding:8px}
}

@media(prefers-reduced-motion:reduce){
  .logo-studio-open{transition:none}
  .logo-studio-open:active{transform:none}
}

/* V116 final responsive guard: late desktop rules must not restore four
   catalog columns after the mobile breakpoints have already matched. */
@media(max-width:700px){
  .catalog-layout .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:360px){
  .catalog-layout .product-grid{grid-template-columns:minmax(0,1fr)!important}
}

/* ============================================================
   V117 — MEGA-MENI KATEGORIJA: BOJE, STANJA I SKROL
   Koristi postojeći DemoShop tirkizno-zeleni identitet i tokene.
   Bez novih boja izvan palete.
   ============================================================ */

/* --- 1. Aktivno stanje: bez teškog crnog bloka i blede zelene ---
   Ranije: .menu-step-button.active{background:var(--ink);color:#fff}
   (pun crni pravougaonik) i drugo pravilo sa #ffd7da/var(--red).
   Sada: bela podloga, diskretna ivica i tirkizni akcenat sa leve
   strane — jasno vidljivo, ali mirno. */
.menu-step-button.active,
.menu-step-button[aria-pressed="true"]{
  background:#fff;
  border:1px solid var(--brand-teal);
  box-shadow:inset 3px 0 0 var(--brand-teal-dark);
  color:var(--ink);
}
.menu-step-button.active small,
.category-level-primary .menu-step-button.active small{color:var(--brand-teal-dark)}
.menu-step-button.active b,
.category-level-primary .menu-step-button.active b{color:var(--brand-teal-dark)}

.menu-step-button:hover,
.menu-step-button:focus-visible{background:var(--brand-soft);color:var(--ink)}
.menu-step-button:hover b{color:var(--brand-teal-dark)}

/* Ujednačena visina redova, razmaci i poravnanje brojača/strelica. */
.menu-step-button{
  min-height:42px;
  border:1px solid transparent;   /* sprečava skok od 1px kad postane aktivno */
  align-content:center;
}
.menu-step-button small{
  color:var(--text-subtle);
  font-size:11px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  text-align:right;
}
.menu-step-button b{
  width:14px;
  color:var(--text-subtle);
  font-size:14px;
  line-height:1;
  text-align:center;
}
.menu-step-button > span{display:flex;flex-direction:column;gap:1px;min-width:0}

/* Sekundarna tehnička šifra — samo kada pravi naziv ne postoji. */
.menu-step-code{
  color:var(--text-subtle);
  font-size:10px;
  font-style:normal;
  font-weight:600;
  letter-spacing:.04em;
}

/* Kontrast teksta u kolonama. */
.category-level-heading strong{color:var(--ink)}
.menu-all-link{color:var(--brand-teal-dark);font-weight:700}
.menu-all-link:hover{background:var(--brand-tint);color:var(--brand-teal-dark)}

/* --- 2. Treća kolona nikada prazna --- */
@media(min-width:701px){
  /* Ranije se cela kolona sakrivala pa je meni izgledao pokvareno.
     Sada ostaje i nosi jasno "Prikaži sve". */
  .category-browser.no-tertiary{grid-template-columns:220px 240px 240px}
}
.menu-tertiary-all{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  min-height:42px;
  padding:9px 10px;
  border:1px solid var(--brand-teal);
  border-radius:var(--r-sm);
  background:var(--brand-tint);
  color:var(--brand-teal-dark);
  font-size:11px;
  font-weight:700;
  text-align:left;
  cursor:pointer;
}
.menu-tertiary-all:hover{background:#fff}
.menu-tertiary-all small{color:var(--brand-teal-dark);font-variant-numeric:tabular-nums}

/* --- 3. Skrolovanje --- */
/* Zaključavanje skrola stranice ostaje SAMO na mobilnom, gde je meni
   fullscreen. Na desktopu je meni padajući panel i nije bilo razloga
   da blokira skrol cele stranice. */
body.menu-open{overflow:visible}
@media(max-width:700px){
  body.menu-open{overflow:hidden}
}

/* Točkić/trackpad skroluje kolonu, a ne stranicu iza nje. */
.category-level{
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#c3d3cf transparent;
  scroll-behavior:auto;           /* bez "smooth" skoka pri promeni kolone */
}
.category-level::-webkit-scrollbar{width:8px}
.category-level::-webkit-scrollbar-thumb{border-radius:8px;background:#c3d3cf}
.category-level::-webkit-scrollbar-track{background:transparent}

/* Meni se uklapa u visinu ekrana; nijedna stavka nije nedostupna. */
@media(min-width:701px){
}

/* ============================================================
   V117 — LOGO STUDIO: LAYOUT, UPLOAD I MOBILNI PRIKAZ
   Na screenshotu je donji tekst bio odsečen, a desna kolona je
   tražila unutrašnji skrol jer je telo modala imalo fiksnu visinu
   uz odvojeno skrolovanje kontrola.
   ============================================================ */

/* Skroluje CELO telo modala, a ne pojedinačne kolone. */
.logo-studio-body{
  align-items:start;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.logo-studio-controls{overflow:visible}
.logo-studio-stage-wrap{position:sticky;top:0}

/* Napomena ispod scene više nije odsečena. */
.logo-studio-3d-slot{overflow:visible;white-space:normal}

/* Nativni file input se sakriva, a koristi se stilizovano dugme —
   izbegava neprevedeni "Odaberi fajl / Nije odabrano" iz pregledača. */
.logo-studio-file{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;border:0;
}
.logo-studio-file-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.logo-studio-pick{
  flex:none;
  min-height:44px;
  padding:0 15px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--surface);
  color:var(--text);
  font:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}
.logo-studio-pick:hover{border-color:var(--brand-teal);color:var(--brand-teal-dark)}
.logo-studio-file:focus-visible + .logo-studio-file-row .logo-studio-pick{
  outline:2px solid var(--brand-teal);outline-offset:2px;
}
.logo-studio-filename{
  min-width:0;
  flex:1;
  overflow:hidden;
  color:var(--text-muted);
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.logo-studio-remove{
  min-height:44px;
  margin-top:8px;
  padding:0 15px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--surface);
  color:var(--danger, #d92f3c);
  font:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}
.logo-studio-remove:hover{border-color:var(--danger, #d92f3c)}
.logo-studio-remove.hidden{display:none}

/* Klizači bez trzanja: bez tranzicije na transformu logotipa dok se vuče. */
.logo-studio-logo{transition:none;will-change:transform}

/* Mobilni: scena nije lepljiva, sve staje bez neprirodnog skrola. */
@media(max-width:860px){
  .logo-studio-stage-wrap{position:static}
  .logo-studio-panel{max-height:94dvh}
  .logo-studio-body{padding:14px;gap:14px}
  .logo-studio-actions{position:sticky;bottom:0;padding-top:10px;background:var(--surface)}
}

/* V117 — 3D kontrola i stanja */
.gallery-modes button[disabled]{opacity:.45;cursor:not-allowed}
.gallery-3d-note{
  margin:6px 0 0;
  color:var(--text-subtle);
  font-size:11px;
  line-height:1.5;
}
.gallery-3d-note.hidden{display:none}
.model-loading,.model-error{
  display:grid;
  place-items:center;
  width:100%;height:100%;
  padding:20px;
  color:var(--text-muted);
  font-size:13px;
  text-align:center;
}

/* ============================================================
   V117.1 — ISPRAVKE
   ============================================================ */

/* --- 4a. Aktivna kategorija: belo + tirkizna ivica ------------
   Starije, specifičnije pravilo (.category-level-primary .menu-step-button.active)
   je i dalje davalo sivu/tamnu podlogu. Ovde se pobeđuje istom
   specifičnošću, bez !important. */
.category-level .menu-step-button.active,
.category-level-primary .menu-step-button.active,
.category-level-secondary .menu-step-button.active,
.category-level .menu-step-button[aria-pressed="true"]{
  background:#fff;
  border:1px solid var(--brand-teal);
  box-shadow:inset 3px 0 0 var(--brand-teal-dark);
  color:var(--ink);
}
.category-level .menu-step-button.active small,
.category-level .menu-step-button.active b{color:var(--brand-teal-dark)}

/* --- 4b. Skrol: bez shorthand-a koji vraća horizontalni overflow --- */
body.menu-open{overflow:hidden}          /* mobilni fullscreen meni */
@media(min-width:701px){
  body.menu-open{
    overflow-x:hidden;                   /* nikad horizontalni overflow */
    overflow-y:auto;                     /* stranica se normalno skroluje */
  }
}

/* Interne šifre se kupcu ne prikazuju — pravilo ostaje neaktivno. */
.menu-step-code{display:none}

/* --- 2. Zaseban 3D panel --- */
body.model3d-open{overflow:hidden}
.model3d{
  position:fixed;
  inset:0;
  z-index:1350;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(10,14,13,.82);
}
.model3d.hidden{display:none}
.model3d-panel{
  display:flex;
  flex-direction:column;
  width:min(920px,100%);
  max-height:92dvh;
  overflow:hidden;
  border-radius:var(--r-lg);
  background:var(--surface);
  box-shadow:var(--elev-4);
}
.model3d-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 20px;
  border-bottom:1px solid var(--border);
}
.model3d-head h2{margin:0;font-size:clamp(18px,2vw,22px);line-height:1.2}
.model3d-close{
  display:grid;place-items:center;
  width:44px;height:44px;flex:none;
  border:0;border-radius:var(--r-sm);
  background:transparent;color:var(--text);
  font-size:24px;line-height:1;cursor:pointer;
}
.model3d-close:hover{background:var(--surface-2)}
.model3d-stage{
  display:grid;
  place-items:center;
  min-height:min(60dvh,460px);
  background:var(--surface-2);
}
.model3d-viewer{width:100%;height:min(60dvh,460px);background:var(--surface-2)}
.model3d-viewer.is-loading{position:absolute;opacity:0;pointer-events:none}
.model3d-note{
  margin:0;padding:12px 20px 16px;
  color:var(--text-muted);font-size:12px;line-height:1.5;
}
@media(max-width:700px){
  .model3d{padding:8px}
  .model3d-stage,.model3d-viewer{min-height:52dvh;height:52dvh}
}

/* ============================================================
   V118 — DESKTOP FLYOUT KATEGORIJA: BOJE I STABILNOST

   PRAVI UZROK CRNE POZADINE:
   u fajlu je naslagano 38 pravila za .menu-step-button. Ono koje je
   pobeđivalo bilo je
     .category-level-primary .menu-step-button.active:hover
       { background: var(--ink) }
   Zbog `:hover` ima specifičnost 0,3,1 i nadjačavalo je svako
   `.active` pravilo (0,3,0) iz V117.1. Zato je aktivna stavka
   pocrnela BAŠ dok je pokazivač iznad nje, a vratila se u tirkiznu
   čim se miš pomeri — to je "naizmenično belo/tirkizno i crno" sa
   snimka. Pravila 25 i 27 su uz to davala sivu #f3f5f5 na desktopu.

   Ispod su pravila iste ili veće specifičnosti, postavljena POSLE
   svih starih, pa pobeđuju bez !important.
   ============================================================ */

/* Osnovno stanje: bela podloga, taman tekst. */
.category-level .menu-step-button,
.category-level-primary .menu-step-button,
.category-level-secondary .menu-step-button{
  background:#fff;
  border:1px solid transparent;
  color:var(--ink);
}

/* Hover / fokus: veoma svetla tirkizna. Nikada crna. */
.category-level .menu-step-button:hover,
.category-level .menu-step-button:focus-visible,
.category-level-primary .menu-step-button:hover,
.category-level-secondary .menu-step-button:hover{
  background:var(--brand-soft);
  color:var(--ink);
  transform:none;                 /* stari translateX(2px) je pomerao red */
}

/* Aktivno: bela + tirkizna leva linija. Pokriva i :hover kombinaciju,
   koja je bila stvarni krivac. */
.category-level .menu-step-button.active,
.category-level .menu-step-button.active:hover,
.category-level .menu-step-button.active:focus-visible,
.category-level .menu-step-button[aria-pressed="true"],
.category-level .menu-step-button[aria-pressed="true"]:hover,
.category-level-primary .menu-step-button.active,
.category-level-primary .menu-step-button.active:hover,
.category-level-primary .menu-step-button.active:focus-visible,
.category-level-secondary .menu-step-button.active,
.category-level-secondary .menu-step-button.active:hover,
.category-level-secondary .menu-step-button.active:focus-visible{
  background:#fff;
  border:1px solid var(--brand-teal);
  box-shadow:inset 3px 0 0 var(--brand-teal-dark);
  color:var(--ink);
  transform:none;
}
.category-level .menu-step-button.active small,
.category-level .menu-step-button.active b,
.category-level-primary .menu-step-button.active small,
.category-level-primary .menu-step-button.active b{color:var(--brand-teal-dark)}

/* Fokus tastaturom: jasna tirkizna oznaka. */
.category-level .menu-step-button:focus-visible,
.menu-all-link:focus-visible,
.menu-tertiary-list button:focus-visible, .menu-tertiary-list a:focus-visible{
  outline:2px solid var(--brand-teal);
  outline-offset:-2px;
}

/* Mobilno: takođe bez crne. */
@media(max-width:700px){
  .category-level-primary .menu-step-button.active,
  .category-level-primary .menu-step-button.active:hover{
    border-color:var(--brand-teal);
    background:#fff;
    color:var(--ink);
  }
}

/* --- STABILNE ŠIRINE I POZICIONIRANJE (desktop) --------------- */
@media(min-width:701px){
  /* Paneli su fiksne širine, pa promena sadržaja ne menja raspored.
     Grid je uvek tri kolone — treći panel se sakriva vidljivošću, ne
     uklanjanjem, da se širina ne menja pri hoveru. */
  .category-browser,
  .category-browser.no-tertiary{
    width:max-content;
    grid-template-columns:236px 236px 236px;
    gap:0;                        /* bez mrtvog razmaka kroz koji hover pada */
    align-items:start;
  }
  .category-level{
    width:236px;
    max-height:min(470px, calc(100dvh - 190px));
    border-right:1px solid var(--border);
    border-radius:0;
  }
  .category-level:first-child{border-top-left-radius:var(--r-md);border-bottom-left-radius:var(--r-md)}
  .category-level:last-child{border-right:1px solid var(--border);border-top-right-radius:var(--r-md);border-bottom-right-radius:var(--r-md)}

  /* Treći panel bez sadržaja: mesto ostaje, ali je prazan i neaktivan. */
  .category-browser.no-tertiary .category-level-tertiary{
    display:block;
    visibility:hidden;
    pointer-events:none;
  }

  /* Naziv i broj ne smeju da menjaju položaj pri hoveru ili aktivaciji. */
  .menu-step-button{
    grid-template-columns:minmax(0,1fr) 44px 12px;
    align-items:center;
  }
  .menu-step-button > span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    display:block;
  }
  .menu-step-button small{
    text-align:right;
    font-variant-numeric:tabular-nums;
  }

  /* Diskretan i stabilan scrollbar. */
  .category-level{scrollbar-gutter:stable}
}

/* ============================================================
   V120.4 — NAVIGACIJA NA TELEFONU I PUNI NAZIVI U MEGA-MENIJU

   Dve odvojene stavke, obe rešene bez nove strukture, bez novih
   prelomnih tačaka i bez skrivanja ijednog elementa. Koriste se
   POSTOJEĆI prelomi 700px (mobilni) i 701px (desktop flyout).
   ============================================================ */

/* --- 1. RED NAVIGACIJE SE PRELIVAO NA TELEFONU ----------------

   Izmereno na 400px: .nav-inner clientWidth = 364px, scrollWidth
   = 543px. Šest stavki (Početna, Kategorije, Novo, Kontakt, Naši
   proizvodi, Demo Group) traže 536px + razmaci, a container na
   400px daje 364px. Zeleni CTA "Naši proizvodi" je počinjao na
   339px i završavao na 452px — dakle presečen na ivici od 382px,
   a "Demo Group" je bio potpuno van vidljivog dela.

   Postojeće pravilo `.nav-inner{overflow-x:auto}` jeste činilo red
   skrolabilnim, ali bez ikakve vizuelne naznake: stranica se ne
   preliva (html,body imaju overflow-x:hidden), pa korisnik nema
   signal da udesno postoji još sadržaja. Praktično su poslednje
   dve stavke bile nedostupne.

   Rešenje je prelom reda umesto skrola. `flex-wrap:wrap` deluje
   samo kada sadržaj zaista ne staje — na 700px i dalje je jedan
   red, identično kao ranije; na 400px se dobija drugi red i sve
   stavke ostaju vidljive i klikabilne. Fiksna visina mora da
   postane min-height, inače bi prelomljen red bio odsečen po
   vertikali. `overflow:visible` uklanja sada nepotreban skrol
   kontejner (uz overflow-x:auto pregazila bi se i overflow-y u
   auto, pa bi se pojavio vertikalni skrol u traci od 54px).

   Automatske leve margine se poništavaju: pri jednom redu one su
   se rešavale na 0 jer nije bilo slobodnog prostora, ali kada red
   pređe u dva, slobodnog prostora ima i stavke bi se razbacale. */
@media(max-width:700px){
  .nav-inner{
    height:auto;
    min-height:54px;
    flex-wrap:wrap;
    align-content:center;
    row-gap:6px;
    padding-block:8px;
    overflow:visible;
  }
  .nav-inner .portfolio-nav-link{margin-left:0}
  .nav-inner .portfolio-nav-cta{margin-left:0!important}
}

/* --- 2. DUGI NAZIVI U DESKTOP MEGA-MENIJU ---------------------

   Uzrok nije preuska kolona nego mrtav prostor u njoj. V118 je
   postavio `.menu-step-button{grid-template-columns:236px -> 116px
   44px 12px}`, gde je srednja kolona od 44px bila rezervisana za
   broj proizvoda (`<small>`), a treća za strelicu.

   V120 taksonomija namerno NE prikazuje brojeve (ne smeju se
   hardkodovati), pa se `<small>` više ne renderuje: strelica `<b>`
   upada u kolonu od 44px, treća kolona od 12px ostaje prazna, a
   naziv dobija samo 116px. Izmereno: "Dodatna radna oprema" traži
   tačno 116px već i u zamenskom fontu — sa Montserrat-om, koji je
   širi, sečeni su i "Dodatna radna oprema" i "Promo pultovi i
   panoi".

   Kolone se svode na stvarni sadržaj (naziv + strelica), čime se
   nazivu vraća 44px + 12px + jedan razmak od 6px. Ako se `<small>`
   ikada vrati, grid ga automatski smesti u treću kolonu.

   Uz to se uklanja `text-overflow:ellipsis`: umesto sečenja, izuzetno
   dug naziv se prelama u dva reda. Pri vraćenoj širini nijedan
   postojeći naziv se ne prelama, pa visine redova ostaju jednake i
   hover geometrija se ne menja — prelom je samo sigurnosna mreža za
   buduće nazive, umesto tihog sečenja. Ovo je jedno pravilo za sve
   nazive, ne zakrpa za dva konkretna slučaja. */
@media(min-width:701px){
  .menu-step-button{
    grid-template-columns:minmax(0,1fr) auto;
  }
  .menu-step-button > span{
    display:block;
    min-width:0;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    overflow-wrap:break-word;
    line-height:1.25;
  }
}

/* ============================================================
   V120.6 — BATCH 1: PRIVREMENO NEDOSTUPNI ČVOROVI NAVIGACIJE
   Serverski režim: čvorovi koje Worker V114.4.1 ne obrađuje tačno se
   prikazuju kao "uskoro" (bez lažnog dejstva). Samo stanje, bez novih boja.
   ============================================================ */
.menu-unsupported{opacity:.55;cursor:default}
.menu-unsupported:hover,.menu-unsupported:focus-visible{background:#fff!important;transform:none!important}
.menu-soon{display:inline-block;margin-left:4px;color:var(--text-subtle);font-size:10px;font-style:normal;font-weight:700;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle}
span.menu-all-link.menu-soon{padding:2px 0;font-size:10px}
.catalog-results>#catalogNotice{margin:0 0 16px;border-left:3px solid var(--brand);background:var(--brand-tint-soft);color:var(--text)}

/* ============================================================
   V120.7 — BATCH 2: BROJEVI U MEGA-MENIJU I STABLU (iz lokalnog skupa)
   V120.4 je sveo desktop red na "naziv + strelica" jer brojeva nije bilo;
   sada postoje (isključivo iz učitanog skupa podataka), pa red ponovo nosi
   naziv + broj + strelicu. Bez novih boja.
   ============================================================ */
@media(min-width:701px){
  .menu-step-button{grid-template-columns:minmax(0,1fr) auto auto;column-gap:8px}
  .menu-step-button small{font-size:11px;color:var(--text-subtle);font-variant-numeric:tabular-nums;white-space:nowrap}
}
.menu-tertiary-all small{margin-left:auto}
.filter-category-group>summary small{font-variant-numeric:tabular-nums}
.filter-category-list button.sub small,.filter-category-list button.all small{margin-left:auto;color:var(--text-subtle);font-size:10px;font-variant-numeric:tabular-nums}

/* ============================================================
   V120.8 — BATCH 3: STRANICA PROIZVODA NAD GENERACIJSKIM UGOVOROM
   Samo strukturne dopune (podnaslov iz naziva, kvalifikacija cene,
   dostupnost na nivou modela, karakteristike, lager na sličnim).
   Bez nove vizuelne paradigme; postojeći tokeni.
   ============================================================ */
.product-subtitle{margin:-6px 0 10px;color:var(--text-muted);font-size:15px;line-height:1.5}
.price-row #priceQualifier{display:block;max-width:46ch;margin-top:6px;color:var(--text-muted);font-size:12px;line-height:1.45}
.price-row .price-with-vat:empty{display:none!important}
.variant-card #stockNote{display:block;margin-top:2px;color:var(--text-muted);font-size:11px;line-height:1.45}
.variant-card strong[data-stock-state="C"]{color:var(--danger)}
.variant-card strong[data-stock-state="E"]{color:var(--text-muted)}
.variant-card strong.availability-available{color:#087a45}
.characteristics-list{max-width:760px}
.characteristics-list>div{grid-template-columns:minmax(120px,.8fr) 1.4fr}
.characteristics-list dd{text-align:left}
.color-photo-button .color-code{text-transform:none;letter-spacing:0;}
.related-product-card .related-stock{display:block;margin-top:6px;font-size:11px;color:var(--text-muted)}
.related-product-card .related-stock-available{color:#087a45}
.related-product-card .related-stock-empty{color:var(--danger)}
.status-badge.status-generic{background:var(--surface-3);color:var(--text);font-size:10px;padding:0 8px}
@media(max-width:560px){.characteristics-list>div{grid-template-columns:1fr 1fr}}

/* ================================================================
   V120.11.1 — BOCNO STABLO KATEGORIJA (harmonika ROOT > G2 > G3)
   DemoShop tipografija/boje; ponasanje po referentnom listingu.
   ================================================================ */
.tax-tree{display:flex;flex-direction:column;gap:2px;padding:6px 0 2px}
.tax-node{display:flex;flex-direction:column}
.tax-row{display:flex;align-items:center;gap:4px}
.tax-label{flex:1;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 9px;border:0;background:none;text-align:left;font:inherit;font-size:13px;font-weight:600;color:var(--text,#16303c);border-radius:8px;cursor:pointer;min-width:0}
.tax-label>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tax-label:hover{background:rgba(31,138,152,.08)}
.tax-label small{font-size:11px;font-weight:500;color:#7d8b93;flex:0 0 auto}
.tax-label.active{background:rgba(31,138,152,.15);color:var(--brand-teal,#1f8a98)}
.tax-label.active small{color:var(--brand-teal,#1f8a98)}
.tax-label.trail{color:var(--brand-teal,#1f8a98)}
.tax-chevron{width:27px;height:27px;flex:0 0 27px;display:flex;align-items:center;justify-content:center;border:0;background:none;color:#67757d;font-size:16px;line-height:1;border-radius:7px;cursor:pointer;transition:transform .16s ease,background .16s ease,color .16s ease}
.tax-chevron:hover{background:rgba(31,138,152,.1);color:var(--brand-teal,#1f8a98)}
.tax-chevron.open{transform:rotate(90deg)}
.tax-children{display:flex;flex-direction:column;gap:1px;margin:1px 0 5px 8px;padding-left:10px;border-left:1px solid rgba(15,42,56,.1)}
.tax-level-2>.tax-row .tax-label{font-size:12.5px;font-weight:500;padding:6px 9px}
.tax-level-3>.tax-row .tax-label{font-size:12px;font-weight:500;padding:5px 9px;color:#42545e}
.tax-level-3>.tax-row .tax-label.active{color:var(--brand-teal,#1f8a98)}
.tax-label.menu-unsupported{opacity:.55;cursor:default}

/* ================================================================
   V120.11.2 — CISTA KOMERCIJALNA NAVIGACIJA + ELEGANTNIJI MEGA-MENI
   ================================================================ */
/* vrh: KATEGORIJE | NOVO | POSEBNA PONUDA | TEKSTIL */
.nav-commercial{gap:8px;align-items:center}
.nav-commercial .categories-toggle,
.nav-commercial .new-menu-toggle,
.nav-commercial .quick-category{text-transform:uppercase;letter-spacing:.06em;font-size:12.5px;font-weight:700;padding:9px 14px;border-radius:10px;line-height:1.2;transition:background .15s ease,color .15s ease,box-shadow .15s ease}
.nav-commercial .quick-category:hover,
.nav-commercial .new-menu-toggle:hover,
.nav-commercial .categories-toggle:hover{background:rgba(31,138,152,.1)}
.nav-commercial .nav-chevron{display:inline-block;margin-left:2px;font-size:11px;opacity:.65;transition:transform .15s ease}
.nav-commercial [aria-expanded="true"] .nav-chevron{transform:rotate(180deg)}

/* mega-meni: mirna bela povrsina, suptilan okvir/senka, cist ritam */
.categories-menu .category-browser{background:#fff;border:1px solid rgba(15,42,56,.09);border-radius:16px;box-shadow:0 22px 48px rgba(15,42,56,.16);overflow:hidden}
.categories-menu .category-level{padding:14px 10px}
.categories-menu .category-level+.category-level{border-left:1px solid rgba(15,42,56,.07)}
.categories-menu .category-level-heading{padding:2px 8px 10px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.categories-menu .category-level-heading strong{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#5c6b74}
.categories-menu .menu-all-link{font-size:11.5px;font-weight:600;color:var(--brand-teal,#1f8a98);background:none;border:0;cursor:pointer;padding:4px 6px;border-radius:7px;transition:background .15s ease}
.categories-menu .menu-all-link:hover{background:rgba(31,138,152,.1)}
.categories-menu .menu-step-button,
.categories-menu .menu-tertiary-list button, .categories-menu .menu-tertiary-list a{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:9px 12px;border:0;background:none;text-align:left;font:inherit;font-size:13px;font-weight:500;line-height:1.35;color:#213743;border-radius:9px;cursor:pointer;transition:background .14s ease,color .14s ease}
.categories-menu .menu-step-button:hover,
.categories-menu .menu-tertiary-list button:hover, .categories-menu .menu-tertiary-list a:hover{background:rgba(31,138,152,.08)}
.categories-menu .menu-step-button.active{background:rgba(31,138,152,.14);color:var(--brand-teal,#1f8a98);font-weight:700}
.categories-menu .menu-step-button b{color:#9aa6ad;font-weight:600;transition:color .14s ease,transform .14s ease}
.categories-menu .menu-step-button.active b,
.categories-menu .menu-step-button:hover b{color:var(--brand-teal,#1f8a98);transform:translateX(2px)}
.categories-menu .menu-step-button small,
.categories-menu .menu-tertiary-list button small, .categories-menu .menu-tertiary-list a small{font-size:11px;font-weight:500;color:#67757d}
.categories-menu .menu-step-button.active small{color:var(--brand-teal,#1f8a98)}
.categories-menu .menu-tertiary-all{font-weight:600}

/* NOVO padajuci meni: ista povrsina kao mega-meni, kompaktan */
.new-menu{background:#fff;border:1px solid rgba(15,42,56,.09);border-radius:13px;box-shadow:0 18px 40px rgba(15,42,56,.15);padding:7px;min-width:250px}
.new-menu button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:10px 12px;border:0;background:none;text-align:left;font:inherit;border-radius:9px;cursor:pointer;transition:background .14s ease}
.new-menu button:hover{background:rgba(31,138,152,.09)}
.new-menu button strong{font-size:13px;color:#16303c}
.new-menu button small{font-size:11.5px;color:#78868e;line-height:1.35}

/* mobilni: udobne mete dodira, bez prelivanja */
@media(max-width:700px){
  .nav-commercial{flex-wrap:wrap;row-gap:6px}
  .nav-commercial .categories-toggle,
  .nav-commercial .new-menu-toggle,
  .nav-commercial .quick-category{min-height:40px;font-size:12px;padding:8px 12px}
}

/* V120.11.2: finalna 4-stavke navigacija je vidljiva na SVIM sirinama —
   ponistava starije mobilne display:none za quick-category. */
.catalog-nav .nav-commercial .quick-category{display:inline-flex;align-items:center}

/* V120.11.5 QA fix: traka boja na kartici se NIKADA ne izliva van kartice —
   na uskim karticama (tablet 4 kolone / mobilni 2 kolone) sličice se
   prelamaju u novi red umesto da probijaju ivicu (V119 nasleđe: nowrap +
   overflow visible). */
.card-variant-previews{flex-wrap:wrap;max-width:100%}

/* ================================================================
   V120.11.6 — BOGATA B2B PREZENTACIJA VARIJANTI NA STRANICI PROIZVODA
   (tabela izabrane boje, matrica boja x velicina, akordeoni, dokumenti)
   ================================================================ */
.variant-table-block{margin:18px 0 4px}
.variant-table-wrap{border:1px solid rgba(15,42,56,.1);border-radius:12px;}
.variant-table th,.variant-table td{text-align:left;border-bottom:1px solid rgba(15,42,56,.07);white-space:nowrap;vertical-align:top;}
.variant-table tbody tr.variant-row{cursor:pointer;transition:background .13s ease}
.variant-table tbody tr.variant-row:hover{background:rgba(31,138,152,.06)}
.variant-table tbody tr.variant-row.active{background:rgba(31,138,152,.12);box-shadow:inset 3px 0 0 var(--brand-teal,#1f8a98)}
.variant-table .cell-stock .stock-on-quote{color:#5c6b74;font-weight:500}
.variant-table .cell-arrival .arrival-cell{background:rgba(222,155,42,.12);border-radius:6px;font-weight:600;}
.variant-table tfoot .variant-total td{background:rgba(15,42,56,.045);font-weight:700;border-bottom:0}
.variant-table-block .helper{margin-top:6px}

/* meta uz cip boje */
.color-photo-button .color-code-id{font-style:normal;}
.color-photo-button .color-meta{font-size:10px;color:#7d8b93;line-height:1.3;margin-top:1px;}

/* akordeoni: OPIS / SPECIFIKACIJE / DOKUMENTACIJA */
.product-extra .info-section{border:1px solid rgba(15,42,56,.1);border-radius:12px;background:#fff;margin-bottom:10px;overflow:hidden}
.product-extra .info-section>summary{padding:13px 16px;font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;color:#16303c;transition:background .14s ease}
.product-extra .info-section>summary:hover{background:rgba(31,138,152,.06)}
.product-extra .info-section[open]>summary{border-bottom:1px solid rgba(15,42,56,.08)}
.product-extra .info-content{padding:14px 16px}
.product-description{font-size:13.5px;line-height:1.6;color:#2c414d;max-width:70ch}
.document-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.document-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid rgba(15,42,56,.08);border-radius:10px;background:rgba(15,42,56,.02)}
.document-list .document-name{display:flex;flex-direction:column;gap:1px;min-width:0}
.document-list .document-name small{color:#7d8b93;font-size:11px}
.document-list .document-download{flex:0 0 auto;font-size:12px;font-weight:700;color:#fff;background:var(--brand-teal,#1f8a98);padding:7px 13px;border-radius:9px;text-decoration:none;transition:filter .14s ease}
.document-list .document-download:hover{filter:brightness(1.08)}

/* matrica boja x velicina */
.variant-matrix-section{margin:22px 0}
.matrix-heading{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.variant-matrix{min-width:560px}
.variant-matrix th.matrix-color{white-space:nowrap;font-weight:600}
.variant-matrix th.matrix-color small{display:block;color:#67757d;font-size:10px;font-weight:500}
.variant-matrix td{text-align:center}
.variant-matrix td.cell-none{color:#c3ccd1}
.variant-matrix td.cell-variant{cursor:pointer;transition:background .13s ease}
.variant-matrix td.cell-variant:hover{background:rgba(31,138,152,.07)}
.variant-matrix td.cell-variant.active{background:rgba(31,138,152,.14);box-shadow:inset 0 0 0 2px var(--brand-teal,#1f8a98);border-radius:4px}
.variant-matrix .cell-yes{color:var(--brand-teal,#1f8a98);font-weight:800}
.variant-matrix .cell-zero{color:#a33;font-weight:700}
.variant-matrix .cell-arrivals{display:block;margin-top:2px}
.variant-matrix .cell-arrivals .arrival-cell{display:block;margin:1px auto}

@media(max-width:700px){
  .variant-table{min-width:460px;}
  .variant-table th,.variant-table td{padding:8px 9px}
  .variant-matrix{min-width:480px}
  .product-extra .info-section>summary{padding:12px 13px}
}

/* V120.11.6 QA fix: ZALIHA i DOLAZAK celije smeju da se prelome — tabela
   varijanti staje u kolonu informacija na desktopu (bez unutrasnjeg skrola);
   na uskim ekranima omotac i dalje kontrolisano skroluje. */
.variant-table{min-width:460px}
.variant-table td.cell-stock,.variant-table td.cell-arrival{white-space:normal;min-width:104px}
.variant-table th,.variant-table td{padding:8px 9px}
.variant-table tfoot td{white-space:normal}

/* ==================================================================
   V120.11.7 — ISPRAVKA KOREN-UZROKA: atribut `hidden` je bio bez dejstva

   Merenje na produkcijskom buildu 120.11.6 (katalog, 1280 px):
     32/32 kontejnera `.tax-children` nosilo je atribut `hidden`
     (JS stanje = "grana zatvorena"), a svih 32 se i dalje iscrtavalo
     (computed display: flex, visina 692 px). Ševron se okretao, stablo
     se nikada nije skupljalo — otuda prijava "grane se ne zatvaraju".

   Uzrok nije JS (Set `sideTreeOpen` je radio ispravno) nego CSS:
   autorsko pravilo `.tax-children{display:flex}` pobeđuje UA pravilo
   `[hidden]{display:none}` (autorski sloj > UA sloj, bez obzira na
   specifičnost). Isti defekt je latentan i na `.tax-node`, `.tax-row`,
   `.tax-tree`, `.filter-options`, `.color-filter-grid` (izmereno).

   Zato se semantika platforme vraća globalno — jednom, na izvoru —
   umesto krpljenja pojedinačnih selektora (u V120.9 je već bio
   zakrpljen samo `.search-suggestion img[hidden]`, isti defekt).
   Provereno: nigde u kodu nema inline `style.display`, niti elementa
   koji sa `hidden` treba da ostane vidljiv.
   ================================================================== */
[hidden]{display:none!important}

/* Vidljiva potvrda stanja grane (pored rotacije ševrona). */
.tax-node.open>.tax-row>.tax-label{color:var(--brand-teal-dark,#166b76)}
.tax-chevron[aria-expanded="true"]{color:var(--brand-teal,#1f8a98)}

/* ==================================================================
   V120.11.7 — GUSTINA PRIKAZA PROIZVODA

   1) Kompaktan birač boja (§7). Na modelima sa mnogo nijansi (MASTER MEN
      50.050 = 23 boje) foto-kartice od 78 px su gutale ekran. Od 6 boja
      naviše `.color-options-dense` prelazi na male čipove; činjenična
      meta ide u `title`, a glavni pregled zaliha/dolazaka je matrica.
   2) Jednodimenzionalna BOJA tabela (§4) za klasu B (688/1.686 modela).
   3) "Ključne karakteristike" uz OPIS (§8).
   4) Gušća profesionalna B2B matrica (§12) sa lepljivom kolonom BOJA.
   ================================================================== */

/* --- 1. kompaktan birač boja ------------------------------------ */
.option-heading .option-count{margin-right:auto;padding:1px 7px;border-radius:999px;background:rgba(31,138,152,.1);color:var(--brand-teal-dark,#166b76);font-size:11px;font-weight:700}
.color-options.color-options-dense{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:7px}
.color-options-dense .color-photo-button{grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto;align-items:center;justify-items:start;gap:8px;padding:5px 8px 5px 5px;border-radius:9px;text-align:left}
.color-options-dense .color-photo-wrap{width:34px;height:34px;aspect-ratio:1;padding:3px;border-radius:6px}
.color-options-dense .color-photo-button .color-code{margin-top:0;font-size:11px;font-weight:700;color:#16303c;text-align:left;line-height:1.25}
.color-options-dense .color-photo-button .color-code-id{display:block;margin-left:0;font-size:10px;color:#67757d;font-weight:500}
.color-options-dense .color-photo-button.active{border-width:1px;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--brand-teal,#1f8a98)}

/* --- 2. jednodimenzionalna tabela BOJA --------------------------- */
/* 4 kolone (bez CENA) traže manje od nasleđenih 460px sa .variant-table —
   sa 400px tabela boja staje bez unutrašnjeg skrola i na 1024px. */
.color-table{min-width:400px}
.color-table td.cell-colour{min-width:136px}
.color-table .cell-colour{display:flex;align-items:center;gap:9px}
.color-table .colour-swatch{flex:0 0 30px;width:30px;height:30px;border:1px solid var(--line);border-radius:6px;background:var(--soft);overflow:hidden;display:grid;place-items:center}
.color-table .colour-swatch img{width:100%;height:100%;object-fit:contain}
.color-table .colour-swatch.no-photo:after{content:"—";color:#8c8c8c;font-size:11px}
.color-table .colour-name{display:flex;flex-direction:column;gap:1px;min-width:0}
.color-table .colour-name strong{font-size:12.5px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.color-table .colour-name small{font-size:10px;color:#67757d;font-weight:600}
.color-table tr.color-row{cursor:pointer;transition:background .13s ease}
.color-table tr.color-row:hover{background:#fafafa}
.color-table tr.color-row.active{background:rgba(31,138,152,.1);box-shadow:inset 3px 0 0 var(--brand-teal,#1f8a98)}
.color-table tr.color-row:focus-visible{outline:2px solid var(--brand-teal,#1f8a98);outline-offset:-2px}

/* --- 3. Ključne karakteristike uz OPIS --------------------------- */
.key-facts-block{margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}
.key-facts-title{margin:0 0 8px;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#7d8b93}
.key-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px 18px;margin:0;padding:0;list-style:none}
.key-facts li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px dotted rgba(15,42,56,.12)}
.key-facts li span{font-size:11.5px;color:#7d8b93;flex:0 0 auto}
.key-facts li strong{font-size:12px;font-weight:700;color:#16303c;text-align:right;min-width:0}

/* --- 4. gušća matrica -------------------------------------------- */
.variant-matrix th,.variant-matrix td{padding:6px 8px;font-size:11.5px}
.variant-matrix th.matrix-color{position:sticky;left:0;z-index:2;background:#fff;box-shadow:1px 0 0 var(--line);text-align:left;min-width:132px}
.variant-matrix thead th{position:sticky;top:0;z-index:1;background:var(--soft)}
.variant-matrix thead th:first-child{z-index:3}
.variant-matrix .cell-arrivals .arrival-cell{font-size:9.5px;line-height:1.25}

/* --- 5. kompaktan NOVO padajući meni (§15) ----------------------- */
.new-menu-compact{min-width:186px;width:186px;padding:6px}
.new-menu-compact button{flex-direction:row;align-items:center;padding:9px 11px}
.new-menu-compact button strong{font-size:13px;font-weight:700}

@media(max-width:700px){
  .color-table{min-width:400px}
  .key-facts{grid-template-columns:1fr}
  .variant-matrix-section .variant-table-wrap{max-height:none}
  .variant-matrix th.matrix-color{min-width:112px}
  /* Ševron je glavna kontrola otvaranja/zatvaranja grane — na dodir mora da
     bude dovoljno veliki (27px je bilo premalo za pouzdan pogodak prstom). */
  .tax-chevron{width:40px;height:40px;flex:0 0 40px;font-size:18px}
  .tax-label{padding:9px 9px;min-height:40px}
}

/* ==================================================================
   V120.11.7 FINAL — sadržaj proizvoda iz V114.5.4 ugovora

   1) OPIS nosi STVARNE pasuse dobavljača (1.643 modela, medijana 772
      znaka, do 2.937). Bez ovoga bi 2.900 znakova bilo jedan zid teksta.
   2) Birač boja je traka, ne pola ekrana kartica: 10–25 boja mora da
      stane u nekoliko urednih redova (50.050 ima 23, 52.033 ima 23).
   3) Kartica izbora govori o IZABRANOJ varijanti + njenim činjenicama.
   4) Matrica je gušća i poravnata, sa lepljivom prvom kolonom.
   ================================================================== */

/* --- 1. OPIS: pravi pasusi ---------------------------------------- */
.product-description{display:block}
.product-description p{margin:0 0 11px;line-height:1.62;font-size:14px;color:#31424c}
.product-description p:last-child{margin-bottom:0}
.product-description p+p{margin-top:0}
.color-photo-button{grid-template-columns:32px minmax(0,1fr);grid-template-rows:auto;align-items:center;justify-items:start;gap:8px;padding:4px 8px 4px 4px;border-radius:8px;text-align:left;min-height:42px}
.color-photo-wrap{width:32px;height:32px;aspect-ratio:1;padding:2px;border-radius:5px}
.color-photo-button .color-code{margin-top:0;font-size:11px;font-weight:700;color:#16303c;text-align:left;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.color-photo-button .color-code-id{display:block;margin-left:0;font-size:9.5px;color:#67757d;font-weight:500}
.color-photo-button .color-meta{display:none}          /* meta živi u title-u */
.color-photo-button.active{border-width:1px;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--brand-teal,#1f8a98)}
.color-options-dense{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
#colorBlock .option-heading{align-items:baseline}

/* --- 3. kartica izbora + činjenice varijante ---------------------- */
.selection-card{grid-template-columns:1fr 1fr;gap:12px 18px;padding:14px 16px}
.selection-card #stockNote{font-size:10.5px;color:#7d8b93;line-height:1.35}
.variant-facts-block{grid-column:1/-1;border-top:1px solid rgba(15,42,56,.1);padding-top:10px;margin-top:2px}
.variant-facts{display:flex;flex-wrap:wrap;gap:5px 14px;margin-top:4px}
.variant-fact{font-size:11.5px;color:#31424c;white-space:nowrap}
.variant-fact em{font-style:normal;color:#67757d;margin-right:3px}

/* --- 4. gušća, poravnata matrica ---------------------------------- */
.variant-matrix{table-layout:fixed}
.variant-matrix th,.variant-matrix td{padding:5px 6px;font-size:11px;text-align:center;vertical-align:middle}
.variant-matrix thead th{position:sticky;top:0;z-index:2;background:var(--soft);font-size:10.5px;letter-spacing:.02em}
.variant-matrix th.matrix-color{position:sticky;left:0;z-index:3;background:#fff;box-shadow:1px 0 0 var(--line);text-align:left;width:150px;min-width:150px;max-width:150px}
.variant-matrix thead th:first-child{z-index:4;background:var(--soft)}
.variant-matrix th.matrix-color span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px}
.variant-matrix th.matrix-color small{color:#67757d;font-weight:500;font-size:9.5px}
.variant-matrix td{width:auto}
.variant-matrix .cell-arrivals .arrival-cell{font-size:9px;line-height:1.2;white-space:nowrap}
.variant-matrix-section .variant-table-wrap{max-height:min(72vh,700px);overflow:auto}

@media(max-width:700px){
  .color-options,.color-options-dense{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  .selection-card{grid-template-columns:1fr}
  .variant-facts{gap:4px 12px}
  .variant-matrix th.matrix-color{width:118px;min-width:118px;max-width:118px}
  .product-description p{font-size:13.5px}
}

/* --- 5. mnogo boja na telefonu: dvoredna traka koja skroluje U SEBI -----
   23 boje u mreži zauzimaju ~629 px vertikale na 375 px — pola ekrana pre
   nego što se vidi ijedan podatak o dostupnosti. Dvoredni horizontalni
   skroler drži birač na ~100 px i NIKADA ne gura stranicu (skrol je unutar
   bloka, page overflow ostaje 0). */
@media(max-width:700px){
  .color-options.color-options-dense{grid-template-columns:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;}
  .color-options.color-options-dense>.color-photo-button{scroll-snap-align:start}
}


/* =====================================================================
   V120.11.7 — KATEGORIJE mega-meni: poravnate tri kolone (samo desktop)

   ISKLJUCIVO VIZUELNO. Bez izmene markupa, JS-a, hover-intent logike,
   taksonomije (8 ROOT / 47 G2 / 77 G3) i bez diranja mobilnog menija
   (ceo blok je u @media(min-width:701px)).

   Mereno PRE ispravke, 1280px, KUCNI SETOVI > SOLJE:
     • dna kolona neravna .............. 556 / 598 / 357 px
     • broj u redu luta po x-osi ....... raspon 39 px (kol.1), 40 px (kol.2),
                                         dok je u kol.3 priljubljen desno
     • visina reda ..................... 42 / 42 / 38 px
     • razmak u listi .................. 3 / 3 / 2 px
     • senka ........................... var(--elev-4) na SVAKOJ koloni
     • razdelnik ....................... dvostruk i u dve boje:
                                         border-right rgb(226,234,232) +
                                         border-left rgba(15,42,56,.07)
     • druga kolona .................... scrollHeight 471 vs 470 -> traka
                                         se pojavljuje zbog 1 px

   UZROK lutanja brojeva: red VEC ima ispravnu resetku
     .menu-step-button{grid-template-columns:minmax(0,1fr) 44px 12px}
   ali ju je kasniji kozmeticki blok pregazio sa display:flex +
   justify-content:space-between, pa je resetka postala mrtvo slovo i
   broj je zavrsio na sredini reda — na razlicitom x-u u svakom redu.
   Ovde se resetka vraca i primenjuje i na trecu kolonu.
   ===================================================================== */
@media(min-width:701px){

  /* --- jedan panel: jedna ivica, jedna senka, jednaka visina --------- */
  /* align-items:start je pravio tri razlicita dna; stretch daje jedan
     ravan pravougaonik. Sirine kolona (236/236/236) i .no-tertiary
     ponasanje ostaju netaknuti. */
  .categories-menu .category-browser{align-items:stretch}

  /* Zaostalo tablet pravilo iz @media(max-width:900px) i dalje je davalo
     trecoj koloni grid-column:1/-1, pa je izmedju 701 i 900 px padala u
     DRUGI red (mereno na 768 px sa starim CSS-om: vrhovi 128/128/598,
     dna 556/598/795). Resetka je sada uvek jedan red, na svakoj sirini. */
  .categories-menu .category-level-tertiary{grid-column:auto;border-top:0}

  .categories-menu .category-level{
    border:0;                     /* ivica i senka pripadaju panelu */
    border-radius:0;
    box-shadow:none;
    background:#fff;
    overflow-x:hidden;
    overflow-y:auto;
    scrollbar-width:thin;         /* suptilno skrolovanje kada zatreba */
    scrollbar-gutter:stable;      /* traka ne pomera brojeve i strelice */
  }

  /* jedan, jednobojan vertikalni razdelnik pune visine panela */
  .categories-menu .category-level+.category-level{
    border-left:1px solid rgba(15,42,56,.08);
  }
  /* prva kolona nema razdelnik: providna ivica iste sirine izjednacava
     unutrasnju sirinu sve tri kolone (205 px), pa se brojevi i strelice
     poklapaju u piksel. */
  /* (prva kolona NIJE :first-child — ispred nje u DOM-u stoji mobilni
     toolbar, sakriven na desktopu — pa se cilja klasom.) */
  .categories-menu .category-level-primary{border-left:1px solid transparent}

  /* .no-tertiary: treca kolona ostaje radi stabilne sirine (visibility,
     ne display), ali sa njom nestane i njena leva linija. Razdelnik se
     tada crta na desnoj strani druge kolone, pa panel i dalje izgleda
     kao uredna resetka umesto kao prazan visak. */
  .categories-menu .category-browser.no-tertiary .category-level-secondary{
    border-right:1px solid rgba(15,42,56,.08);
  }

  /* --- naslov: ista visina u sve tri kolone, bez preloma ------------- */
  .categories-menu .category-level-heading{
    min-height:36px;
    align-items:center;
    margin-bottom:0;
  }
  .categories-menu .category-level-heading strong{
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .categories-menu .menu-all-link{flex:none;white-space:nowrap}

  /* --- isti ritam liste u sve tri kolone ----------------------------- */
  .categories-menu .menu-step-list,
  .categories-menu .menu-tertiary-list{
    display:flex;
    flex-direction:column;
    gap:3px;
    margin-top:0;
  }

  /* --- jedan red = jedna resetka: naziv | broj | strelica ------------ */
  .categories-menu .menu-step-button,
  .categories-menu .menu-tertiary-list button, .categories-menu .menu-tertiary-list a{
    display:grid;
    grid-template-columns:minmax(0,1fr) 40px 12px;
    align-items:center;
    justify-content:initial;
    gap:8px;
    min-height:40px;
    padding:9px 12px;
    /* Aktivan red je nosio 1px ivicu, a neaktivni nijednu; uz border-box
       to mu je pomeralo broj i strelicu za 1px (i pravilo trzaj pri
       izboru). Svi redovi sada imaju istu geometriju — aktivno stanje
       menja samo boju ivice. */
    border:1px solid transparent;
  }
  .categories-menu .menu-step-button>span,
  .categories-menu .menu-tertiary-list button>span, .categories-menu .menu-tertiary-list a>span{
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  /* brojevi: uvek druga traka, desno poravnati, tabelarne cifre */
  .categories-menu .menu-step-button>small,
  .categories-menu .menu-tertiary-list button>small, .categories-menu .menu-tertiary-list a>small{
    grid-column:2;
    justify-self:end;
    text-align:right;
    font-variant-numeric:tabular-nums;
  }
  /* strelica: uvek treca traka. Treca kolona nema <b>, ali traka ostaje
     rezervisana, pa se desna ivica poklapa sa prve dve kolone i kolona
     vise ne izgleda otkaceno. */
  .categories-menu .menu-step-button>b{
    grid-column:3;
    justify-self:end;
    line-height:1;
  }

  /* Strelica se pomera SAMO na hover/fokus. Ranije je isti translateX(2px)
     vazio i za .active, pa je aktivan red u MIROVANJU stajao 2px van
     linije (mereno: 205 vs 203). Hover ponasanje ostaje netaknuto. */
  .categories-menu .menu-step-button.active b{transform:none}
  .categories-menu .menu-step-button:hover b,
  .categories-menu .menu-step-button:focus-visible b{transform:translateX(2px)}
}

/* Najuza desktop traka (701-743 px): panel je fiksnih 3x236+18 = 728 px i
   tu se secao o desnu ivicu. Kolone tada postaju jednake frakcije pune
   sirine — i dalje TRI kolone, i dalje identicne medjusobno, pa poravnanje
   naziva/brojeva/strelica ostaje netaknuto. Od 728 px navise nista se ne
   menja (ostaje vec proveren fiksni raspored). Granica je 743, a ne 727,
   jer Chrome media upite meri po innerWidth (ukljucuje traku za skrolovanje
   od ~15 px), pa je stvarna sirina rasporeda tolika manja. */
@media(min-width:701px) and (max-width:743px){
  .categories-menu .category-browser,
  .categories-menu .category-browser.no-tertiary{
    width:100%;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .categories-menu .category-level{width:auto}
}


/* Header na tablet sirinama (701-788 px): .header-inner je nowrap flex, a
   .header-search je imao podrazumevani min-width:auto, pa nije mogao da se
   skupi — .header-actions je izlazio iz ekrana i "Korpa" se secala
   (mereno: +70 px na 701, +18 px na 753). Jedna deklaracija, bez redizajna. */
.header-search{min-width:0}


/* =====================================================================
   V120.11.7i — mobilna lepljiva traka za kupovinu (ISKLJUČIVO <=700px).
   Desktop je netaknut: van ovog upita pravilo ne postoji.
   ===================================================================== */
.sticky-cart{display:none}
@media(max-width:700px){
  .sticky-cart{
    position:fixed;
    z-index:90;
    inset:auto 0 0 0;
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 14px calc(9px + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.97);
    backdrop-filter:saturate(140%) blur(6px);
    border-top:1px solid rgba(15,42,56,.12);
    box-shadow:0 -8px 22px rgba(15,42,56,.12);
    transition:transform .18s ease,opacity .18s ease;
  }
  .sticky-cart[hidden]{display:none}
  /* prava traka je na ekranu -> lepljiva se sklanja, bez preklapanja */
  .sticky-cart.is-suppressed{transform:translateY(105%);opacity:0;pointer-events:none}
  .sticky-cart-info{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
  .sticky-cart-info strong{font-size:12.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sticky-cart-info small{font-size:11px;line-height:1.2;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sticky-cart .quote-button{flex:none;width:auto;min-height:44px;padding:0 16px;font-size:13px}
  /* sadržaj se ne krije iza trake */
  body.has-sticky-cart{padding-bottom:68px}
}


/* =====================================================================
   V120.11.7 — ZAVRŠNI VIZUELNI SLOJ (owner final polish)

   Samo izgled. Nijedna funkcija, nijedan podatak, nijedno stanje izbora
   nije dirano: markup i JS ostaju isti osim dva aditivna dodatka (krug
   boje u matrici i title na stavkama menija). Sve što sledi je CSS.

   Mereno PRE (1280 px, 50.050 MASTER MEN):
     hero .............. galerija 621x1876, info 550x1876, mrtav prostor
                         ispod slike 1181 px, razmak kolona 58 px
     boje .............. 23 čipa u krutoj 4-kolonskoj rešetki 132x46,
                         kvadratna sličica 34x34 r6 -> blok 342 px
     tabela ............ redovi 53 px, th 10.5 px, td 12.5 px
     matrica ........... prva kolona BEZ kruga boje
     OPIS .............. 626 px širine, line-height 21.6, razmak ¶ 11 px
     meni .............. 3x236 = 710 px, traka naziva 111 px,
                         26 skraćenih naziva (najduži zahteva 206 px)
   ===================================================================== */

/* ------------------------------------------------------------------ *
 * 1. HERO — jedna kompozicija umesto dve nezavisne kolone
 * ------------------------------------------------------------------ */
@media(min-width:901px){
  /* Galerija se više ne rasteže na visinu info kolone (align-items je bio
     `normal` = stretch), pa nestaje visoka prazna površina ispod slike. */
  .product-detail{align-items:start;gap:44px}

  /* Progresivno poboljšanje: dok je info kolona duga, slika ostaje u vidnom
     polju. Ako okruženje ne podrži sticky, ponašanje je obično statično —
     bez vizuelne regresije. */
  .gallery-panel{position:sticky;top:92px}

  /* Slika dobija miran okvir umesto da lebdi: blaga podloga, jedan radijus,
     bez teške senke. */
  .main-image-wrap{border:1px solid rgba(15,42,56,.08);border-radius:14px;overflow:hidden;}
  .main-image-wrap img{mix-blend-mode:multiply}

  /* Alatna traka galerije: kompaktna, tiha, poravnata sa slikom. */
  .gallery-modes{gap:6px;margin-bottom:10px}
  .gallery-modes button{
    min-height:34px;padding:0 11px;border-radius:9px;
    font-size:11.5px;font-weight:600;letter-spacing:.01em;
  }
  /* Traka sličica: uži ritam, krug-free, jasno izabrana. */
  #thumbs{gap:8px;margin-top:12px}
  #thumbs button,#thumbs img{border-radius:10px}
}

/* Info kolona: kontrolisan vertikalni ritam umesto niza nezavisnih kutija. */
@media(min-width:701px){
  .product-info>*+*{margin-top:0}
  .product-breadcrumb{margin-bottom:10px}
  #productName{margin:6px 0 2px;letter-spacing:-.02em}
  .product-subtitle{margin:0 0 2px}
  .model-line{margin:6px 0 0}
  .price-row{margin-top:18px;padding-top:16px;border-top:1px solid rgba(15,42,56,.08)}
  .option-block,.variant-table-block,.selection-card,.add-to-cart-row{margin-top:20px}
}

/* ------------------------------------------------------------------ *
 * 2. BOJE — pilule sa pravim krugom nijanse (ne kartice)
 *    Slika u krugu je STVARNA fotografija te nijanse (isti izvor koji je
 *    modul već koristio). Boja se nikada ne izvodi iz naziva.
 * ------------------------------------------------------------------ */
.color-options{display:flex;flex-wrap:wrap;grid-template-columns:none;}
.color-options .color-button,
.color-options .color-photo-button{display:inline-flex;border:1px solid rgba(15,42,56,.14);border-radius:999px;box-shadow:none;transform:none;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;}
.color-options .color-button:hover,
.color-options .color-button:focus-visible{
  border-color:var(--brand-teal,#1f8a98);
  background:var(--brand-tint,#f2fbfa);
  transform:none;
}
/* krug nijanse */
.color-options .color-photo-wrap{flex:none;display:block;}
.color-options .color-photo-wrap img{display:block;}
.color-options .color-photo-wrap.no-photo{background:#e6eaea}
/* naziv + šifra u jednom redu */
.color-options .color-code{display:inline-flex;min-width:0;color:#20323b;}
.color-options .color-code-id{font-style:normal;font-weight:500;font-variant-numeric:tabular-nums;}
.color-options .color-button.active .color-code{color:var(--brand-teal-dark,#146873)}
/* činjenična meta već stoji u title-u pilule */
.color-options .color-meta{display:none}

/* Naslov bloka boja — mirniji */
#colorBlock .option-heading{
  display:flex;align-items:baseline;gap:8px;
  margin-bottom:10px;font-size:12px;
}

/* Mobilno: dve kompaktne vrste koje se skroluju u sebi (bez prelivanja). */
@media(max-width:700px){
  .color-options.color-options-dense{gap:6px;scrollbar-width:thin;padding-bottom:6px;}
  .color-options .color-button{min-height:32px}
}

/* ------------------------------------------------------------------ *
 * 3. TABELE VARIJANTI / BOJA — komercijalna tabela, ne data-grid
 * ------------------------------------------------------------------ */
.variant-table-wrap{border:1px solid rgba(15,42,56,.10);border-radius:12px;background:#fff;}
.variant-table{border-spacing:0;}
.variant-table thead th{position:sticky;top:0;z-index:2;}
.variant-table tbody td,
.variant-table tbody th{border-bottom:1px solid rgba(15,42,56,.06);}
.variant-table tbody tr:last-child td,
.variant-table tbody tr:last-child th{border-bottom:0}
.variant-table tbody tr{transition:background .13s ease}
.variant-table tbody tr:hover{background:rgba(31,138,152,.05);cursor:pointer}
.variant-table tbody tr.active{
  background:var(--brand-tint,#f2fbfa);
  box-shadow:inset 3px 0 0 var(--brand-teal,#1f8a98);
}
.variant-table tbody tr.active td:first-child,
.variant-table tbody tr.active th:first-child{font-weight:700;color:var(--brand-teal-dark,#146873)}
/* sekundarni podaci tiši od primarnih */
.variant-table tbody td small,
.variant-table tbody .muted,
.variant-table tbody .cell-note{color:#67757d;font-size:11px}
.variant-table tfoot td,
.variant-table tbody tr.total-row td{background:#fafbfb;border-top:1px solid rgba(15,42,56,.10);font-weight:700;}
.variant-table-block .option-heading{font-size:12px;}
#colorTableNote,.variant-table-block .helper{margin-top:8px;font-size:11px;color:#67757d}

/* ------------------------------------------------------------------ *
 * 4. MATRICA BOJA × VELIČINA — lagana i čitljiva
 * ------------------------------------------------------------------ */
.variant-matrix-section{margin-top:26px}
.variant-matrix-section .variant-table-wrap{border-radius:14px}
.variant-matrix-section table{table-layout:auto}
.variant-matrix-section thead th{
  padding:9px 8px;
  font-size:10px;
  text-align:center;
  background:#f7f9f9;
}
.variant-matrix-section thead th:first-child{text-align:left;padding-left:12px}
.variant-matrix-section tbody th.matrix-color{
  position:sticky;left:0;z-index:1;
  display:table-cell;
  padding:7px 14px 7px 12px;
  background:#fff;
  border-right:1px solid rgba(15,42,56,.10);
  border-bottom:1px solid rgba(15,42,56,.06);
  text-align:left;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
}
/* krug boje u prvoj koloni — stvarna nijansa, isti izvor kao pilule */
.matrix-swatch{
  display:inline-block;
  width:18px;height:18px;
  margin-right:9px;
  vertical-align:-4px;
  border-radius:50%;
  overflow:hidden;
  background:#f1f4f4;
  box-shadow:inset 0 0 0 1px rgba(15,42,56,.12);
}
.matrix-swatch img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.matrix-swatch.no-photo{background:#e6eaea}
.matrix-color .matrix-color-name{color:#20323b}
.matrix-color small{
  margin-left:8px;color:#9aa6ac;font-size:10.5px;font-weight:500;
  font-variant-numeric:tabular-nums;
}
.variant-matrix-section tbody td{
  padding:7px 8px;
  text-align:center;
  border-bottom:1px solid rgba(15,42,56,.06);
  border-left:1px solid rgba(15,42,56,.045);
  font-size:12px;
}
.variant-matrix-section tbody tr:hover th.matrix-color,
.variant-matrix-section tbody tr:hover td{background:rgba(31,138,152,.04)}
.variant-matrix-section td.cell-none{color:#c9d1d4}
.variant-matrix-section td.cell-variant{cursor:pointer;transition:background .12s ease}
.variant-matrix-section td.cell-variant:hover{background:rgba(31,138,152,.10)}
.variant-matrix-section td.cell-variant.active{
  background:var(--brand-tint,#f2fbfa);
  box-shadow:inset 0 0 0 1px var(--brand-teal,#1f8a98);
  border-radius:6px;
}
.variant-matrix-section .cell-yes{color:var(--brand-teal-dark,#146873);font-weight:700}
.variant-matrix-section .cell-zero{color:#b4bfc4;font-weight:700}
.variant-matrix-section .cell-arrivals{
  display:block;margin-top:1px;color:#67757d;font-size:9.5px;line-height:1.15;
  font-variant-numeric:tabular-nums;
}
#matrixLegend,.variant-matrix-section .helper{margin-top:9px;font-size:11px;color:#67757d}

/* ------------------------------------------------------------------ *
 * 5. OPIS — udobno čitanje, ista dobavljačeva proza
 * ------------------------------------------------------------------ */
.info-section .info-content{padding:18px 22px 22px}
#productDescription{
  max-width:72ch;
  font-size:14px;
  line-height:1.75;
  color:#2c3d45;
}
#productDescription p{margin:0 0 14px}
#productDescription p:last-child{margin-bottom:0}
.info-section>summary{
  padding:14px 22px;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:700;
  color:#41535c;
}
.info-section{border-radius:12px;border:1px solid rgba(15,42,56,.09);background:#fff}
.info-section+.info-section{margin-top:10px}
.info-section[open]>summary{border-bottom:1px solid rgba(15,42,56,.07)}

/* Na vrlo širokim ekranima tekst ne ostavlja polupraznu desnu polovinu:
   dobija drugi stubac umesto da se rasteže preko cele širine. */
@media(min-width:1400px){
  #productDescription{
    max-width:none;
    columns:2;
    column-gap:52px;
  }
  #productDescription p{break-inside:avoid}
}

/* ------------------------------------------------------------------ *
 * 6. SPECIFIKACIJE — tehnički list, ne lista parova
 * ------------------------------------------------------------------ */
.spec-list{display:block}
.spec-list>div{
  display:grid;
  grid-template-columns:minmax(140px,34%) minmax(0,1fr);
  gap:16px;
  align-items:baseline;
  padding:9px 0;
  border-bottom:1px solid rgba(15,42,56,.06);
  min-height:0;
}
.spec-list>div:last-child{border-bottom:0}
.spec-list dt{
  color:#75848b;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.01em;
}
.spec-list dd{
  margin:0;
  color:#1f313a;
  font-size:12.5px;
  font-weight:600;
  line-height:1.45;
}
@media(min-width:1100px){
  /* dva stupca parova — kraći, pregledniji tehnički list */
  .spec-list{columns:2;column-gap:48px}
  .spec-list>div{break-inside:avoid}
}
#characteristicsNote{margin-top:12px;font-size:11px;color:#67757d}

/* ------------------------------------------------------------------ *
 * 7. DOKUMENTACIJA — uredna lista stvarnih PDF-ova
 * ------------------------------------------------------------------ */
.document-list{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.document-list li{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 14px;
  border:1px solid rgba(15,42,56,.10);
  border-radius:10px;
  background:#fcfdfd;
}
.document-list .document-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.document-list .document-name strong{font-size:12.5px;color:#1f313a}
.document-list .document-name small{font-size:11px;color:#67757d}
.document-list .document-download{
  flex:none;
  padding:7px 13px;
  border-radius:8px;
  border:1px solid var(--brand-teal,#1f8a98);
  color:var(--brand-teal-dark,#146873);
  font-size:11.5px;font-weight:700;text-decoration:none;
  transition:background .14s ease;
}
.document-list .document-download:hover{background:var(--brand-tint,#f2fbfa)}

/* ------------------------------------------------------------------ *
 * 8. KARTICA IZBORA + KORPA — mirnija, manje "kutija u kutiji"
 * ------------------------------------------------------------------ */
.selection-card{
  border:1px solid rgba(15,42,56,.10);
  border-radius:12px;
  background:#fcfdfd;
  padding:14px 16px;
  box-shadow:none;
}
.selection-card>div>span:first-child{color:#75848b;font-size:11px;font-weight:600}
.selection-card strong{font-size:13px;color:#1f313a}
.variant-facts-block{margin-top:10px;padding-top:10px;border-top:1px solid rgba(15,42,56,.08)}
.variant-facts{display:flex;flex-wrap:wrap;gap:6px 14px}
.variant-fact{font-size:11.5px;color:#41535c}
.variant-fact em{font-style:normal;color:#67757d;margin-right:5px}
.quote-button{border-radius:10px;font-weight:700;letter-spacing:.01em}

/* ------------------------------------------------------------------ *
 * 9. KATEGORIJE MEGA-MENI — puni nazivi, bez tri tačke
 *    Mereno: najduži naziv traži 124 (ROOT) / 154 (G2) / 206 px (G3).
 *    Traka naziva je bila 111 px u sve tri kolone -> 26 skraćenih naziva.
 *    Nove kolone daju 157 / 189 / 237 px naziva.
 * ------------------------------------------------------------------ */
@media(min-width:914px){
  .categories-menu .category-browser,
  .categories-menu .category-browser.no-tertiary{
    width:max-content;
    grid-template-columns:250px 282px 330px;
  }
  .categories-menu .category-level{width:auto}
}
/* uža traka broja i razmaka oslobađa ~10 px po redu za naziv */
@media(min-width:701px){
  .categories-menu .menu-step-button,
  .categories-menu .menu-tertiary-list button, .categories-menu .menu-tertiary-list a{
    grid-template-columns:minmax(0,1fr) 36px 12px;
    gap:7px;
  }
}
/* Ispod 914 px raspored je proporcionalan istim odnosima (ne jednake
   trećine), pa najduža treća kolona i tu dobija najviše prostora. */
@media(min-width:701px) and (max-width:913px){
  .categories-menu .category-browser,
  .categories-menu .category-browser.no-tertiary{
    width:100%;
    grid-template-columns:250fr 282fr 330fr;
  }
  .categories-menu .category-level{width:auto}
}

/* ------------------------------------------------------------------ *
 * 10. MOBILNI PROIZVOD — ritam, ne sabijeni desktop
 * ------------------------------------------------------------------ */
@media(max-width:700px){
  .product-detail{gap:22px}
  .main-image-wrap{border:1px solid rgba(15,42,56,.08);border-radius:12px;background:#fcfdfd;overflow:hidden}
  #productName{font-size:22px;line-height:1.2;margin:6px 0 2px}
  .product-subtitle{font-size:13px}
  .price-row{margin-top:14px;padding-top:14px;border-top:1px solid rgba(15,42,56,.08)}
  .option-block,.variant-table-block,.selection-card,.add-to-cart-row{margin-top:16px}
  .info-section .info-content{padding:14px 16px 18px}
  .info-section>summary{padding:13px 16px}
  #productDescription{font-size:13.5px;line-height:1.72;max-width:none}
  .spec-list>div{grid-template-columns:minmax(110px,44%) minmax(0,1fr);gap:12px;padding:8px 0}
  .document-list li{padding:10px 12px}
  .variant-matrix-section{margin-top:18px}
}


/* =====================================================================
   V120.11.7 polish — korekcije posle prvog merenja
   ===================================================================== */

/* Postojeće pravilo `.matrix-color span{display:block}` je i krug boje i
   naziv slagalo jedno ispod drugog (red 40 -> 61 px). Prva kolona sada drži
   krug + naziv + šifru u JEDNOM redu i dobija širinu za to. */
.variant-matrix-section tbody th.matrix-color{
  width:172px;min-width:172px;max-width:172px;
  padding:6px 12px 6px 12px;
}
.variant-matrix-section th.matrix-color>.matrix-swatch{
  display:inline-block;
  vertical-align:middle;
  margin-right:9px;
}
.variant-matrix-section th.matrix-color>.matrix-color-name{
  display:inline-block;
  vertical-align:middle;
  max-width:calc(100% - 74px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
}
.variant-matrix-section th.matrix-color>small{
  display:inline-block;
  vertical-align:middle;
  margin-left:8px;
}
/* dolasci u ćeliji: tesnije linije, red ostaje kompaktan i sa dva dolaska */
.variant-matrix-section .cell-arrivals{margin-top:1px}
.variant-matrix-section .cell-arrivals .arrival-cell{
  font-size:9px;line-height:1.18;padding:0 5px;margin:1px auto;
}
.variant-table .arrival-cell{font-size:10.5px;line-height:1.25;padding:1px 6px;margin:1px 0}

/* OPIS: dva stupca već od 1180 px — desna polovina više nije prazna. */
@media(min-width:1180px){
  #productDescription{
    max-width:none;
    columns:2;
    column-gap:48px;
    column-fill:balance;
  }
  #productDescription p{break-inside:avoid}
}
/* šifra varijante tabularno — kolone se ne „ljuljaju" */
.variant-table .cell-code{font-variant-numeric:tabular-nums;white-space:nowrap}
.variant-table .cell-price{font-variant-numeric:tabular-nums;white-space:nowrap}


/* =====================================================================
   V120.11.7 polish — mega-meni u tablet pojasu (701–913 px)

   Na >=914 px panel je fiksnih 864 px (250/282/330) i tu je skraćivanja
   NULA, provereno iscrpno: svaki ROOT x svaki G2. Ispod toga panel mora da
   se skupi, pa se ovde oslobađa svaki piksel koji se može osloboditi bez
   dodavanja horizontalnog skrola u meni i bez rušenja geometrije:
   uža traka broja, tešnji razmaci, manji unutrašnji padding kolone i za
   pola stepena manji naziv. Geometrija (jedan red, ista visina, poravnati
   brojevi i strelice) ostaje netaknuta.

   Ono što i posle ovoga ne stane nosi pun naziv u `title` atributu.
   ===================================================================== */
@media(min-width:701px) and (max-width:913px){
  .categories-menu .category-level{padding:12px 8px}
  .categories-menu .menu-step-button,
  .categories-menu .menu-tertiary-list button, .categories-menu .menu-tertiary-list a{
    grid-template-columns:minmax(0,1fr) 32px 10px;
    gap:6px;
    padding:9px 9px;
    font-size:11.5px;
  }
  .categories-menu .menu-step-button>small,
  .categories-menu .menu-tertiary-list button>small, .categories-menu .menu-tertiary-list a>small{font-size:10px}
  .categories-menu .category-level-heading{padding:2px 4px 9px}
  .categories-menu .category-level-heading strong{font-size:11.5px}
  .categories-menu .menu-all-link{font-size:10.5px;padding:3px 4px}
}

/* Najuži desktop pojas: još 8 px za naziv (uža traka broja, tešnji razmak i
   padding). Na 768 px time nestaje i poslednji skraćeni naziv. */
@media(min-width:701px) and (max-width:800px){
  .categories-menu .category-level{padding:12px 7px}
  .categories-menu .menu-step-button,
  .categories-menu .menu-tertiary-list button, .categories-menu .menu-tertiary-list a{
    grid-template-columns:minmax(0,1fr) 30px 10px;
    gap:5px;
    padding:9px 8px;
  }
}

/* Dva stupca OPIS-a samo kada ima šta da se rasporedi: kratak činjenični
   fallback (npr. 37.107, jedan pasus) ostaje u jednoj koloni, jer bi ga
   balansiranje raspolovilo. Prag: tri i više pasusa. */
@media(min-width:1180px){
  #productDescription{columns:auto;max-width:72ch}
  #productDescription:has(p:nth-child(3)){columns:2;column-gap:48px;max-width:none}
}


/* =====================================================================
   V120.11.7 r2 — VLASNIKOV KOREKTIVNI PROLAZ

   Sve što sledi je GLOBALNO, na zajedničkim klasama, a ne na jednom modelu.
   Popis pre ispravke (37.107, ali iste klase nose SVI arhetipovi):
     .helper / #variantTableNote / #colorTableNote / #characteristicsNote  11 px  #67757d
     #stockNote                                                          10.5 px #7d8b93
     #packageHint / #cartFeedback                                         11 px
     .selection-card oznake, .variant-fact, .document-list small          11 px
     .key-facts-title, .eyebrow, th                                       10 px
   Pravilo: nijedna smislena kupčeva informacija ispod 12 px i ispod ~4.5:1.
   Sekundarno ostaje sekundarno — ali čitljivo.
   ===================================================================== */

/* ---------- 1. GLOBALNA ČITLJIVOST SITNOG TEKSTA ---------- */
.helper,
#variantTableNote,
#colorTableNote,
#characteristicsNote,
#matrixLegend,
.variant-table-block .helper,
.variant-matrix-section .helper{
  font-size:12.5px;
  line-height:1.5;
  color:#5f6f77;
  margin-top:10px;
  max-width:76ch;
}
#stockNote{
  display:block;
  margin-top:3px;
  font-size:12px;
  line-height:1.45;
  color:#5f6f77;
}
#packageHint,
#cartFeedback{
  font-size:12.5px;
  line-height:1.5;
  color:#5f6f77;
}
#cartFeedback{margin-top:10px;max-width:76ch}

/* kartica izbora — oznake i vrednosti */
.selection-card{padding:16px 18px}
.selection-card>div>span:first-child{font-size:11.5px;color:#5f6f77;font-weight:600}
.selection-card strong{font-size:14px;color:#16262e}
.variant-facts-block>span:first-child{font-size:11.5px;color:#5f6f77;font-weight:600}
.variant-fact{font-size:12.5px;color:#33454e}
.variant-fact em{font-style:normal;color:#5f6f77;margin-right:6px;font-size:11.5px}

/* ključne karakteristike / eyebrow */
.key-facts-title{font-size:11.5px;color:#5f6f77;letter-spacing:.06em}
.eyebrow{font-size:11px;letter-spacing:.1em}

/* dokumenti */
.document-list .document-name strong{font-size:13.5px}
.document-list .document-name small{font-size:12px;color:#5f6f77}
.document-list .document-download{font-size:12.5px;padding:8px 15px}

/* specifikacije */
.spec-list dt{font-size:12.5px;color:#5f6f77}
.spec-list dd{font-size:13.5px;color:#16262e}
.spec-list>div{padding:10px 0}

/* alatna traka galerije */
.gallery-modes button{font-size:12.5px}
.gallery-zoom-hint{font-size:12px;padding:6px 12px}
.variant-table tbody td,
.variant-table tbody th{color:#22333b;}
.variant-table .cell-code{color:#4a5a63;}
.variant-table .cell-price{font-size:13px;color:#16262e;font-weight:600}
.variant-table .cell-stock,
.variant-table .stock-on-quote{font-size:12.5px;color:#3f5560}
.variant-table .cell-arrival .arrival-cell{font-size:11.5px;line-height:1.35;}
.variant-table tfoot td,
.variant-table tbody tr.total-row td{font-size:13px}
.variant-table tbody tr.active td:first-child,
.variant-table tbody tr.active th:first-child{font-size:13.5px}

/* ---------- 3. MATRICA — legenda krugova + čitljivija mreža ---------- */
.matrix-legend{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:2px 0 14px;
}
.matrix-legend-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:5px 13px 5px 6px;
  border:1px solid rgba(15,42,56,.14);
  border-radius:999px;
  background:#fff;
  font:inherit;
  font-size:12px;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:#33454e;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease;
}
.matrix-legend-chip:hover,
.matrix-legend-chip:focus-visible{
  border-color:var(--brand-teal,#1f8a98);
  background:var(--brand-tint,#f2fbfa);
}

/* krug boje — pun ton kada je naziv istinito prepoznat */
.matrix-swatch{
  display:inline-block;
  width:18px;height:18px;
  border-radius:50%;
  overflow:hidden;
  background:#f1f4f4;
  box-shadow:inset 0 0 0 1px rgba(15,42,56,.16);
  flex:none;
}
.matrix-swatch.is-solid{overflow:visible}
.matrix-legend-chip .matrix-swatch{width:16px;height:16px}

/* prva kolona: ● NAZIV / šifra ispod (kao u vlasnikovoj referenci) */
.variant-matrix-section tbody th.matrix-color{
  width:206px;min-width:206px;max-width:206px;
  padding:9px 14px 9px 13px;
  white-space:nowrap;
}
.variant-matrix-section th.matrix-color>.matrix-swatch{
  vertical-align:middle;
  margin-right:10px;
  width:20px;height:20px;
}
.variant-matrix-section th.matrix-color>.matrix-color-text{
  display:inline-block;
  vertical-align:middle;
  max-width:calc(100% - 34px);
}
.variant-matrix-section th.matrix-color .matrix-color-name{
  display:block;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:#16262e;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:100%;
}
.variant-matrix-section th.matrix-color small{
  display:block;
  margin:1px 0 0;
  font-size:11px;
  font-weight:600;
  color:var(--brand-teal-dark,#146873);
  font-variant-numeric:tabular-nums;
}

/* ćelije — veći, mirniji tekst */
.variant-matrix-section thead th{
  padding:11px 10px;
  font-size:11.5px;
  letter-spacing:.06em;
  color:#5f6f77;
}
.variant-matrix-section tbody td{
  padding:9px 10px;
  font-size:13px;
}
.variant-matrix-section .cell-yes{font-size:15px}
.variant-matrix-section .cell-zero{font-size:14px}
.variant-matrix-section .cell-arrivals .arrival-cell{
  font-size:10.5px;line-height:1.3;padding:1px 6px;
}
.variant-matrix-section td.cell-none{font-size:14px;color:#9aa5ab}
#matrixLegend{font-size:12px;color:#5f6f77}
.matrix-heading strong{font-size:15px}

/* ---------- 4. ZONA KUPOVINE ---------- */
.add-to-cart-row{margin-top:18px;gap:16px}
.quantity-picker>span{font-size:12.5px;color:#5f6f77;font-weight:600}
.quote-button{font-size:15px;padding:0 26px;min-height:52px}

/* ---------- 5. MOBILNO ---------- */
@media(max-width:700px){
  .helper,#variantTableNote,#colorTableNote,#characteristicsNote,
  #packageHint,#cartFeedback{font-size:12.5px;line-height:1.55}
  .variant-matrix-section tbody th.matrix-color{width:170px;min-width:170px;max-width:170px}
  .matrix-legend{gap:6px;margin-bottom:12px}
  .matrix-legend-chip{font-size:11.5px;padding:4px 11px 4px 5px}
  .selection-card{padding:14px}
  .quote-button{min-height:50px;font-size:14.5px}
}

/* =====================================================================
   V120.11.7 r2 — "Uvećaj" na proizvodima sa JEDNOM slikom

   .product-lightbox je grid 44px | 1fr | 44px, a strelice prev/next dobijaju
   [hidden] kada postoji samo jedna slika. Tada je scena automatskim
   raspoređivanjem padala u PRVU kolonu od 44 px, pa se "uvećana" slika
   crtala na 59x59 px (mereno: 37.107, 58.148) — izgledalo je kao da
   Uvećaj ne radi. Scena je sada uvek srednja kolona.
   ===================================================================== */
.lightbox-stage{grid-column:2}
.product-lightbox .lightbox-prev{grid-column:1}
.product-lightbox .lightbox-next{grid-column:3}
.lightbox-stage img{max-width:96%}
.lightbox-help{grid-column:1/-1;font-size:12px;color:rgba(255,255,255,.72)}
.lightbox-close{font-size:26px}

/* =====================================================================
   V120.11.7 r2 — LEPLJIVA GALERIJA: UKLONJENA

   Ponašanje pri skrolovanju nije bilo moguće proveriti ni u jednom okruženju
   koje ovde postoji (ni window.scrollTo ni scrollTo unutar iframe-a ne
   pomeraju stranicu), a body/html nose overflow-x:hidden što ume da poništi
   position:sticky. Po vlasnikovom pravilu: stabilna obična galerija je bolja
   od nepouzdane lepljive. align-items:start ostaje — nema rastegnutog panela.
   ===================================================================== */
@media(min-width:901px){
  .gallery-panel{position:static;top:auto}
}

/* =====================================================================
   V120.11.7 r2 — MEGA-MENI NA 701–719 px

   Na 743 px i naviše skraćivanja nema (mereno: 768/820/900/914/1024/1280/
   1440/1920 = 0). Na 701 px kontejner ima 665 px, a puni nazivi traže 862 px
   (ROOT 124 + G2 154 + G3 206 + okvir) — matematički ne staje. Umesto tri
   tačke ili tooltipa, panel tu zadržava PUN raspored i skroluje se unutar
   sebe: svi nazivi ostaju čitavi, stranica se ne prelива.
   ===================================================================== */
@media(min-width:701px) and (max-width:719px){
  .categories-menu>.container{overflow-x:auto;scrollbar-width:thin;padding-bottom:4px}
  .categories-menu .category-browser,
  .categories-menu .category-browser.no-tertiary{
    width:max-content;
    grid-template-columns:250px 282px 330px;
  }
  .categories-menu .category-level{width:auto}
  .categories-menu .menu-step-button,
  .categories-menu .menu-tertiary-list button, .categories-menu .menu-tertiary-list a{
    grid-template-columns:minmax(0,1fr) 36px 12px;
    gap:7px;
    padding:9px 12px;
    font-size:12px;
  }
  .categories-menu .category-level{padding:14px 10px}
}

/* =====================================================================
   V120.11.7 r2 — MEGA-MENI: PUNI NAZIVI NA SVAKOJ ŠIRINI

   Analitički popis SVIH 8/47/77 čvorova (canvas measureText sa stvarnim
   fontom menija) daje tačne maksimume:
       ROOT            125 px  "Torbe & Putovanje"
       G2              159 px  "Dodatna radna oprema"
       G3              155 px  "Zimske jakne i vetrovke"
       "Prikaži sve —" 244 px  "Prikaži sve — Dodatna radna oprema"
   Uz 119 px okvira po koloni (broj, strelica, razmaci, padding, traka)
   potrebne kolone su 250 / 286 / 369 = 905 px.

   Zato: JEDAN raspored na svim desktop širinama. Iznad ~956 px staje bez
   ostatka; ispod toga panel zadržava iste pune kolone i skroluje se UNUTAR
   svog kontejnera. Nema tri tačke ni na jednom nazivu, nema prelivanja
   stranice, geometrija (jedan red, ista visina, poravnati brojevi i
   strelice) ostaje ista. Tooltip ostaje samo kao dodatak, ne kao rešenje.
   ===================================================================== */
@media(min-width:701px){
  .categories-menu>.container{overflow-x:auto;overflow-y:visible;scrollbar-width:thin}
  .categories-menu .category-browser,
  .categories-menu .category-browser.no-tertiary{
    width:max-content;
    grid-template-columns:250px 286px 369px;
  }
  .categories-menu .category-level{width:auto}
  .categories-menu .menu-step-button,
  .categories-menu .menu-tertiary-list button, .categories-menu .menu-tertiary-list a{
    grid-template-columns:minmax(0,1fr) 36px 12px;
    gap:7px;
    padding:9px 12px;
    font-size:13px;
  }
  .categories-menu .category-level{padding:14px 10px}
  .categories-menu .menu-step-button>small,
  .categories-menu .menu-tertiary-list button>small, .categories-menu .menu-tertiary-list a>small{font-size:11px}
}

/* =====================================================================
   V120.11.7 r2 — ČITLJIVOST: ISPRAVKA SPECIFIČNOSTI

   Prethodni blok je gubio kaskadu na tri mesta (mereno):
     .selection-card #stockNote {10.5px}  >  #stockNote {12px}
     .variant-card span {11px}            >  .variant-fact {12.5px}
   Ovde se cilja istom ili višom specifičnošću. Ovo su tačno oni tekstovi sa
   vlasnikovih snimaka (kartica izbora, EAN, napomena o ukupnom stanju).
   ===================================================================== */
.selection-card #stockNote,
.variant-card #stockNote{
  font-size:12.5px;line-height:1.45;color:#5f6f77;display:block;margin-top:4px;
}
.selection-card .variant-fact,
.variant-card .variant-fact{font-size:12.5px;color:#33454e}
.selection-card .variant-fact em,
.variant-card .variant-fact em{font-size:12px;color:#5f6f77;font-style:normal}
.selection-card .variant-facts-block>span:first-child,
.variant-card .variant-facts-block>span:first-child{font-size:12px;color:#5f6f77}
.selection-card>div>span:first-child,
.variant-card>div>span:first-child{font-size:12px;color:#5f6f77}
.product-breadcrumb a,.product-breadcrumb span{font-size:11.5px}
#colorCount,.option-count{font-size:11.5px}
.key-facts-title{font-size:12px}
.related-stock,.related-product-price-vat{font-size:12px}
.eyebrow{font-size:11.5px}

/* poslednji sitni informativni tekst na karticama sličnih proizvoda */
.related-product-card .related-stock,
.related-products .related-stock{font-size:12px}
.related-product-card .related-product-price-vat,
.related-products .related-product-price-vat{font-size:12px}

/* =====================================================================
   V120.11.7 r2 — ČITLJIVOST VAN STRANICE PROIZVODA

   Isti popis pušten na index / katalog / korpa našao je istu klasu greške i
   izvan stranice proizvoda (kartice, paginacija, zaglavlje, lepljiva traka).
   Podiže se samo SMISLEN kupčev tekst; ukrasni znak statusa (%/N) ostaje
   grafički element.
   ===================================================================== */
.card-category,.product-card .card-category{font-size:11.5px}
.product-card h2,.product-card h3,.related-product-card h2{font-size:13px}
.product-card small,.related-product-card small{font-size:11.5px}
#resultsLabel,#pageInfo,.pagination button{font-size:12px}
.back-link,.header-contact-link,.group-site-header-link{font-size:12px}
#stickyCartStock{font-size:12px}
#stickyCartCode{font-size:13px}
.arrival-entry{font-size:11.5px}
.variant-matrix-section .cell-arrivals .arrival-cell{font-size:11px}
.card-price,.product-card .price{font-size:14px}

/* preostali imenovani mikro-tekst na karticama i u korpi */
.product-card .card-description,.related-product-card .card-description,.card-description{font-size:11.5px;line-height:1.45}
.product-card .card-code,.related-product-card .card-code,.card-code{font-size:11.5px}
.product-card .card-badge,.card-badge{font-size:11px}
.card-price-vat,.product-card .card-price-vat{font-size:11.5px}
.cart-edit-action,.cart-item .cart-edit-action{font-size:12px}
#catalogHeadingMeta,.catalog-heading-meta{font-size:12px}
main legend,.filters-top legend{font-size:12px}
.color-options .color-button .color-code{font-size:12px}
.color-options .color-button .color-code-id{font-size:11px}

/* =====================================================================
   V120.11.7 r2 — mobilne korekcije posle merenja
     • legenda boja kod 23 nijanse je bila 314 px visoka -> ograničena
       visina sa skrolom u sebi (isti princip kao traka boja u herou)
     • lightbox je koristio 74% širine (bočne kolone 44 px) -> na telefonu
       su bočne kolone uže, slika dobija skoro celu širinu
   ===================================================================== */
@media(max-width:700px){
  .matrix-legend{max-height:118px;overflow-y:auto;scrollbar-width:thin;padding-right:2px}
  .product-lightbox{grid-template-columns:34px minmax(0,1fr) 34px}
  .lightbox-stage img{max-width:99%;max-height:76dvh}
  .lightbox-nav{width:30px;height:46px;font-size:30px}
}

/* MOQ / komercijalno pakovanje — vidljiva poruka uz količinu i CTA */
#packageHint.is-order-rule{
  color:#8a5b12;
  background:rgba(222,155,42,.12);
  border:1px solid rgba(222,155,42,.30);
  border-radius:9px;
  padding:8px 11px;
  font-size:12.5px;
  font-weight:600;
  line-height:1.45;
  display:block;
  margin-top:8px;
}
.cart-moq-note{font-size:12px;color:#8a5b12;font-weight:600;display:block;margin-top:3px}

/* =====================================================================
   V120.11.8 — HERO BIRAČ BOJA: STVARNE FOTOGRAFIJE NIJANSI

   Vlasnikova referenca razdvaja dve stvari:
     • HERO  = male kartice sa STVARNOM fotografijom proizvoda u toj boji
     • MATRICA = jednostavni puni krugovi boje (ostaje kako jeste)
   Zato hero ovde vraća pravu sličicu nijanse, ali u kompaktnoj kartici,
   ne u teškoj pravougaonoj kutiji od ranije.
   Bez brojeva ispod sličice: DemoShop nema autoritativan tačan lager po
   boji, pa se broj NE prikazuje (referenca ga ima — mi ga ne izmišljamo).
   ===================================================================== */
.color-options{gap:8px}
.color-options .color-button,
.color-options .color-photo-button{
  flex-direction:column;
  align-items:center;
  gap:5px;
  width:74px;
  min-height:0;
  padding:6px 5px 7px;
  border-radius:11px;
  border:1px solid rgba(15,42,56,.14);
  background:#fff;
}
.color-options .color-photo-wrap{
  width:56px;height:56px;
  border-radius:8px;
  overflow:hidden;
  background:#f6f8f8;
  box-shadow:none;
}
.color-options .color-photo-wrap img{width:100%;height:100%;object-fit:cover;border-radius:8px}
.color-options .color-code{
  flex-direction:column;
  align-items:center;
  gap:1px;
  width:100%;
  font-size:11.5px;
  font-weight:600;
  line-height:1.2;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.color-options .color-code-id{font-size:10.5px;color:#67757d}
.color-options .color-button.active,
.color-options .color-button[aria-pressed="true"]{
  border-color:var(--brand-teal,#1f8a98);
  box-shadow:inset 0 0 0 1px var(--brand-teal,#1f8a98);
  background:var(--brand-tint,#f2fbfa);
}
/* mnogo boja: kontrolisana visina, skrol unutar bloka */
#colorOptions{max-height:246px;overflow-y:auto;scrollbar-width:thin;padding-right:2px}

@media(max-width:700px){
  .color-options.color-options-dense{
    display:grid;grid-auto-flow:column;grid-template-rows:1fr;
    grid-auto-columns:max-content;overflow-x:auto;overflow-y:hidden;
  }
  #colorOptions{max-height:none}
  .color-options .color-button{width:66px;padding:5px 4px 6px}
  .color-options .color-photo-wrap{width:50px;height:50px}
}

/* =====================================================================
   V120.11.8 — GALERIJA: velika slika + traka sličica ispod
   ===================================================================== */
@media(min-width:901px){
  .product-detail{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px}
  .main-image-wrap{border-radius:16px;background:#fcfdfd}
}
#thumbs{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;
}
#thumbs .thumb{
  width:76px;height:76px;
  padding:4px;
  border:1px solid rgba(15,42,56,.14);
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  transition:border-color .15s ease,box-shadow .15s ease;
}
#thumbs .thumb img{width:100%;height:100%;object-fit:contain;display:block}
#thumbs .thumb:hover{border-color:var(--brand-teal,#1f8a98)}
#thumbs .thumb.active{
  border-color:var(--brand-teal,#1f8a98);
  box-shadow:inset 0 0 0 1px var(--brand-teal,#1f8a98);
}
@media(max-width:700px){
  #thumbs{gap:8px;margin-top:10px}
  #thumbs .thumb{width:62px;height:62px}
}

/* =====================================================================
   V120.11.8 — OPIS koristi širinu stranice
   ===================================================================== */
@media(min-width:1180px){
  #productDescription{columns:auto;max-width:none}
  #productDescription:has(p:nth-child(3)){columns:2;column-gap:56px}
}
.info-section .info-content{padding:20px 26px 24px}
#productDescription{font-size:14.5px;line-height:1.78;color:#2b3c44}
#productDescription p{margin:0 0 15px}

/* pretraga: mesto za sličicu se ne ruši kada slike nema */
.search-suggestion-media{width:44px;height:44px;flex:none;display:grid;place-items:center;background:#f6f8f8;border-radius:8px;overflow:hidden}
.search-suggestion-media.is-empty{background:#f0f3f3}
.search-suggestion-image{max-width:100%;max-height:100%;object-fit:contain}

/* =====================================================================
   V120.11.9 — FINALNI GLOBALNI VIZUELNI PROLAZ (referenca vlasnika)
   ---------------------------------------------------------------------
   Jedan sloj, na kraju fajla, jer je stilski list slojevit i ranije su
   dva defekta bila KASKADNE regresije (display:flex je ubio postojeci
   grid; grid-column iz 900px je procurio na desktop). Sve ovde je
   GLOBALNO — nijedan selektor ne pominje sifru modela ni kategoriju.

   Merenja pre izmene (1920x1000, 50.045 / 50.050):
     .product-page          1280px, margine 2x312px  (header je 1500px!)
     .product-detail        605 / 576, gap 48
     .color-options         display:flex  ->  grid-template-columns MRTAV
     .color-photo-button    fiksnih 74px, .color-code white-space:nowrap
     "neon narandzasta"     treba 87px, dobija 62px  -> ODSECENO 25px
     .matrix-color-name     treba 150px, dobija 144px -> ODSECENO 6px
     #productDescription    columns:2 na >=1180px (referenca je JEDAN blok)
   ===================================================================== */

/* --- 0. Zajednicka skala razmaka (§25) ------------------------------- */
.product-page{
  --ps-1:8px; --ps-2:14px; --ps-3:22px; --ps-4:34px;
  --ps-5:52px; --ps-6:72px; --ps-7:96px;
  --ps-rule:rgba(15,42,56,.10);
}

/* --- 1. SIRINA STRANICE (§1, §32) ------------------------------------
   Proizvodna stranica je bila uza od sopstvenog zaglavlja (1280 vs 1500).
   Poravnava se sa .header-inner, pa sadrzaj i zaglavlje dele istu ivicu. */
.container.product-page{width:min(1500px,calc(100% - 36px))}

/* --- 2. KOMPOZICIJA HERO BLOKA (§1, §2) ------------------------------
   Referenca: slika levo je UZA od informacione kolone (~0,42 : 0,58).
   Desna kolona time dobija prostor za pun naslov, pune nazive boja i
   tabelu varijanti bez lomljenja. */
.product-detail{
  grid-template-columns:minmax(0,.86fr) minmax(440px,1.14fr);
  gap:var(--ps-5);
  padding:var(--ps-5) 0 var(--ps-6);
  align-items:start;
}

/* --- 3. GLAVNA SLIKA (§2) --------------------------------------------
   Proizvod je heroj: manji unutrasnji okvir, mirna podloga, bez teske
   kartice. `contain` ostaje jer katalog nije samo tekstil (§29) —
   kvadratna kutija + contain podjednako korektno drzi i solju i majicu. */
.gallery-panel{position:sticky;top:var(--ps-3)}
.main-image-wrap{border:1px solid var(--ps-rule);border-radius:18px;}

/* --- 4. TRAKA SLICICA ISPOD GLAVNE SLIKE (§3) ------------------------
   Traka je spremna za seq 4: kada `product.images` stigne, slicice samo
   upadaju u gotovu geometriju. Kada model ima jednu sliku, traka se
   uredno urusi (bez prazne kutije) — .thumbs je tada prazan element. */
#thumbs,.thumbs{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding-bottom:2px;}
#thumbs:empty,.thumbs:empty{display:none;margin-top:0}
#thumbs .thumb,.thumbs .thumb{flex:0 0 auto;border-radius:10px;border:1px solid var(--ps-rule);background:#fff;transition:border-color .14s ease,box-shadow .14s ease;}
#thumbs .thumb.active,.thumbs .thumb.active{
  border-color:var(--brand-teal,#1f8a98);
  box-shadow:inset 0 0 0 1px var(--brand-teal,#1f8a98);
}

/* --- 5. HIJERARHIJA DESNE KOLONE (§5, §6, §7, §24) -------------------
   Manje kutija, vise tipografije i belina — referenca skoro nema okvira. */
.product-info{padding-top:2px}
.product-info h1{
  font-size:clamp(31px,2.6vw,42px);
  line-height:1.1;
  letter-spacing:-.025em;
  margin:var(--ps-1) 0 6px;
}
.product-breadcrumb{margin-bottom:var(--ps-2)}
.model-line{font-size:13.5px;color:#5d6f78;margin:0 0 var(--ps-1)}
.product-subtitle{font-size:14px;color:#5d6f78;line-height:1.55;margin:0 0 var(--ps-2)}

/* cena: najjaci element posle naslova, bez dvostruke linije oko sebe */
.price-row{
  margin:var(--ps-3) 0 var(--ps-4);
  padding:0 0 var(--ps-3);
  border-top:0;
  border-bottom:1px solid var(--ps-rule);
}
.price-row span{font-size:clamp(30px,2.5vw,38px);font-weight:800;letter-spacing:-.02em;line-height:1.05}
.price-row .price-with-vat{display:inline-block;margin-top:6px;font-size:14px;color:#3d525c;font-weight:600}
.price-row small{display:block;margin-top:var(--ps-1);font-size:12px;line-height:1.5;color:#6d7f88;max-width:62ch}

/* --- 6. HERO BIRAC BOJA (§8, §9) — TVRD ZAHTEV VLASNIKA --------------
   Kontejner postaje STVARNI grid (ranije je `display:flex` cinio
   grid-template-columns mrtvim), a kartica vise nije fiksnih 74px.
   Popis stvarnih naziva (189 modela, 113 razlicitih naziva) daje
   najduzi STVARNI naziv boje od 17 znakova ("SVETLO PEPELJASTA");
   22–26 znakova ("CICAK KOPCA TIRKIZNO PLAVI", 54.004) su dokumentovani
   TIER C ne-nazivi boje. Zato: naziv se PRELAMA, nikada ne skracuje. */
.color-options,
.color-options.color-options-dense{display:grid;}
.color-options .color-button,
.color-options .color-photo-button,
.color-options-dense .color-photo-button{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:auto;min-width:0;height:100%;text-align:center;}
.color-options .color-photo-wrap,
.color-options-dense .color-photo-wrap{aspect-ratio:1;padding:0;}
/* PUN NAZIV BOJE — prelamanje umesto odsecanja */
.color-options .color-code,
.color-options-dense .color-photo-button .color-code{display:block;width:100%;min-width:0;white-space:normal;overflow-wrap:break-word;text-overflow:clip;overflow:visible;font-weight:600;text-align:center;color:#20323b;}
.color-options .color-code-id,
.color-options-dense .color-photo-button .color-code-id{display:block;margin:3px 0 0;font-weight:500;color:#67757d;text-align:center;}

/* --- 7. TABELE VARIJANTI (§11, §12) ----------------------------------
   Cilj je mirna, siroka, citljiva tabela — ne "ukrasen" UI. */
.variant-table-wrap{border-radius:12px;border:1px solid var(--ps-rule);overflow:auto}
.variant-table{width:100%;border-collapse:collapse;}
.variant-table thead th{font-weight:800;text-transform:uppercase;color:#5d6f78;background:#f7f9f9;border-bottom:1px solid var(--ps-rule);}
.variant-table tbody td,.variant-table tbody th{border-bottom:1px solid rgba(15,42,56,.06);}
.variant-table tbody tr:last-child td,.variant-table tbody tr:last-child th{border-bottom:0}
.variant-table tbody tr.active td,.variant-table tbody tr.active th{background:rgba(31,138,152,.07)}

/* --- 8. IZBOR / KOLICINA / CTA KAO JEDAN TOK (§13) -------------------- */
.variant-card.selection-card{
  background:transparent;
  border:1px solid var(--ps-rule);
  border-radius:12px;
  padding:var(--ps-3);
  margin:var(--ps-3) 0 var(--ps-2);
  gap:var(--ps-2);
}
.variant-card span{font-size:11.5px;letter-spacing:.03em}
.add-to-cart-row{margin-top:var(--ps-2)}
#packageHint{font-size:12px;line-height:1.5;color:#5d6f78}

/* --- 9. SEKCIJE OPIS / SPECIFIKACIJE / DOKUMENTACIJA (§15–§19) ------- */
.product-extra{border-top:1px solid var(--ps-rule);margin-top:var(--ps-2);padding-top:var(--ps-4)}
.product-extra .info-section,.info-section{
  border:1px solid var(--ps-rule);
  border-radius:14px;
  background:#fff;
}
.info-section+.info-section{margin-top:10px}
.product-extra .info-section>summary,.info-section>summary{
  padding:16px 22px;
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#16303c;
}
.info-section .info-content,.product-extra .info-content{
  padding:var(--ps-1) 22px var(--ps-4);
  max-width:none;
}

/* OPIS koristi SIRINU STRANICE — jedan mirni blok, kao na referenci.
   Prethodni sloj je na >=1180px lomio prozu u DVE kolone; referenca to
   nema, a vlasnik trazi da se tekst "razvuce" preko stranice. */
#productDescription{
  columns:auto;
  max-width:none;
  font-size:15px;
  line-height:1.75;
  color:#33454e;
}
#productDescription p{margin:0 0 var(--ps-2);max-width:none}
#productDescription p:last-child{margin-bottom:0}
.key-facts-block{margin-top:var(--ps-3);padding-top:var(--ps-3);border-top:1px solid var(--ps-rule)}
.key-facts-title{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#5d6f78;margin:0 0 var(--ps-1)}

/* Specifikacije dele isti sistem sa OPIS-om */
.spec-list>div{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:20px;padding:11px 0;font-size:13.5px}
.spec-list dt{color:#6d7f88}
.spec-list dd{font-weight:600}

/* --- 10. LEGENDA MATRICE (§20) ---------------------------------------
   Pun naziv boje mora da se vidi — nikakvo skracivanje. */
.matrix-legend{
  display:flex;
  flex-wrap:wrap;
  gap:var(--ps-1);
  margin:var(--ps-2) 0 var(--ps-3);
}
.matrix-legend>*{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;
  max-width:none;
  padding:7px 14px 7px 10px;
  border:1px solid var(--ps-rule);
  border-radius:999px;
  background:#fff;
  font-size:12px;
  font-weight:600;
  line-height:1.25;
  color:#25373f;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}

/* --- 11. MATRICA (§21, §22) ------------------------------------------ */
.variant-matrix-section{margin:var(--ps-5) 0 0}
.variant-matrix-section tbody th.matrix-color{
  min-width:190px;
  padding:11px 14px;
  text-align:left;
  vertical-align:middle;
}
.variant-matrix-section th.matrix-color>.matrix-color-text{min-width:0}
.variant-matrix-section th.matrix-color .matrix-color-name{
  display:block;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:break-word;
  font-size:13px;
  font-weight:700;
  line-height:1.28;
}
.variant-matrix-section th.matrix-color small{display:block;margin-top:2px;font-size:11px;color:#67757d}
.variant-matrix-section thead th{padding:12px 10px;font-size:11.5px;letter-spacing:.06em}

/* --- 12. RITAM SEKCIJA (§25) ------------------------------------------ */
.related-products{margin-top:var(--ps-6)}

/* --- 13. TABLET / UZAK DESKTOP (§31) ---------------------------------- */
@media(max-width:1100px){
  .product-detail{grid-template-columns:minmax(0,.92fr) minmax(400px,1.08fr);gap:var(--ps-4)}
}
@media(max-width:900px){
  .product-detail{grid-template-columns:1fr;gap:var(--ps-4);padding-top:var(--ps-4)}
  .gallery-panel{position:static}
  .main-image-wrap{max-width:520px;margin-inline:auto}
  .color-options,.color-options.color-options-dense{grid-template-columns:repeat(auto-fill,minmax(114px,1fr))}
}

/* --- 14. MOBILNI (§30) ------------------------------------------------ */
@media(max-width:700px){
  .container.product-page{width:calc(100% - 24px)}
  .product-detail{padding:var(--ps-3) 0 var(--ps-4)}
  .product-info h1{font-size:clamp(24px,6.4vw,30px)}
  .price-row span{font-size:29px}
  .color-options,.color-options.color-options-dense{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));}
  .info-section .info-content,.product-extra .info-content{padding:var(--ps-1) 15px var(--ps-3)}
  .product-extra .info-section>summary,.info-section>summary{padding:14px 15px}
  #productDescription{font-size:14.5px;line-height:1.72}
  .variant-matrix-section tbody th.matrix-color{min-width:150px}
  .variant-card.selection-card{padding:var(--ps-2)}
}

/* ---------------------------------------------------------------------
   V120.11.9 — ISPRAVKA 1: birac boja, mobilni i visina na desktopu
   ---------------------------------------------------------------------
   Dva ranija sloja (linije ~3687 i ~4576) mobilni dense birac prebacuju u
   `grid-auto-flow:column` + `grid-auto-columns:max-content` horizontalni
   skroler. Time je moj `grid-template-columns` bio MRTAV na <=700px, pa su
   kartice dobijale sirinu po sadrzaju (izmereno: 104px vs 161px u istom
   redu, 18 implicitnih kolona u kontejneru od 336px).

   Skroler se ZADRZAVA (vlasnik ga izricito dozvoljava, §9, i za 18–23 boje
   je bolji od sest redova na 375px), ali kolone postaju UJEDNACENE.
   --------------------------------------------------------------------- */
@media(max-width:700px){
  .color-options.color-options-dense,
  .color-options{
    display:grid;
    grid-auto-flow:column;
    grid-template-columns:none;
    grid-template-rows:repeat(2,minmax(0,auto));
    grid-auto-columns:116px;      /* UJEDNACENO — bilo max-content */
    gap:8px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:thin;
    padding-bottom:8px;
    scroll-snap-type:inline proximity;
  }
  .color-options .color-button,
  .color-options .color-photo-button,
  .color-options-dense .color-photo-button{
    width:auto;
    min-height:0;
    padding:8px 7px 9px;
    scroll-snap-align:start;
  }
  .color-options .color-photo-wrap,
  .color-options-dense .color-photo-wrap{width:48px;height:48px}
  /* jednobojni / malobrojni modeli: bez skrolera, obican wrap */
  .color-options:not(.color-options-dense){
    grid-auto-flow:row;
    grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
    grid-auto-columns:auto;
    overflow-x:visible;
  }
}

/* Desktop: raniji sloj drzi #colorOptions na max-height:246px sa unutrasnjim
   skrolom. Sa citljivijim (sirim) karticama to bi sakrilo vecinu boja iza
   skrola, a vlasnik trazi "cist visered wrap" (§9). Kapa se podize toliko
   da se prakticno sve boje vide, uz zadrzan limit za ekstremne modele. */
@media(min-width:701px){
  #colorOptions{max-height:min(56vh,540px);overflow-y:auto;padding-right:4px}
}

/* ---------------------------------------------------------------------
   V120.11.9 — ISPRAVKA 2: responzivni pojasevi hero bloka (§31)
   ---------------------------------------------------------------------
   Izmereno na 50.050: tabela varijanti trazi ~600px (VELICINA/SIFRA/CENA/
   ZALIHA/DOLAZAK). Pre ispravke je informaciona kolona u pojasu 901–1024
   bila 441–507px, pa je tabela skrolovala bocno 96–162px — tacno ono na
   sta §31 upozorava ("velika leva slika gura tabelu u premali prostor").

   Prvi pokusaj (tvrdi `minmax(620px,…)` na informacionoj koloni) je
   problem OKRENUO: kolona sa slikom je pala na 213–230px, pa je proizvod
   prestao da bude heroj (§2). Zato se prag vezuje za sirinu na kojoj
   OBOJE stane, bez tvrdih minimuma:

     <=1150px    jedna kolona (slika centrirana do 520px, info puna sirina)
     1151–1400   dve kolone .78 / 1.22   (na 1151: slika 421, info 660)
     >1400       ciljani odnos .86 / 1.14 (referenca; 1920: 623 / 825)
   --------------------------------------------------------------------- */
@media(max-width:1150px){
  .product-detail{grid-template-columns:1fr;gap:var(--ps-4);padding-top:var(--ps-4)}
  .gallery-panel{position:static}
  .main-image-wrap{max-width:520px;margin-inline:auto}
}
@media(min-width:1151px) and (max-width:1400px){
  .product-detail{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:var(--ps-4)}
  .gallery-panel{position:sticky}
  .main-image-wrap{max-width:none;margin-inline:0}
}
@media(min-width:1401px){
  .product-detail{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:var(--ps-5)}
  .gallery-panel{position:sticky}
  .main-image-wrap{max-width:none;margin-inline:0}
}

/* ---------------------------------------------------------------------
   V120.11.9 — ISPRAVKA 3: OPIS je JEDAN blok pune sirine (§15, §17)
   ---------------------------------------------------------------------
   Sloj V120.11.8 na >=1180px lomi prozu u DVE kolone preko
   `#productDescription:has(p:nth-child(3))`. Taj selektor ima VECU
   specificnost (id + pseudo-klasa) od mog `#productDescription`, pa je
   moj `columns:auto` bio nadglasan — izmereno: columnCount "2" na 1440 i
   1920. Referenca vlasnika ima JEDAN blok koji se prostire celom sirinom,
   pa se ovde poravnava specificnost i kolone se gase.
   --------------------------------------------------------------------- */
@media(min-width:1180px){
  #productDescription:has(p:nth-child(3)){
    columns:auto;
    column-gap:normal;
    max-width:none;
  }
}
#productDescription{columns:auto;column-count:auto;max-width:none}

/* Duga linija je svesna posledica zahteva "tekst se razvlaci preko
   stranice". Na 1920 to je ~190 znakova po redu — duze od tipografskog
   optimuma (60–90), pa se citljivost drzi velikim proredom i jasnim
   razmakom izmedju pasusa, tacno kao na referenci. */
#productDescription{line-height:1.78}
#productDescription p+p{margin-top:0}

/* =====================================================================
   V120.11.9b — ZAVRSNI MIKRO-PROLAZ (referenca vlasnika)
   Samo tri celine: medija okvir, harmonike, mera pasusa u OPIS-u.
   Sve globalno; nijedan selektor ne pominje sifru modela ni kategoriju.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. ADAPTIVNI MEDIJA OKVIR (§1)
   ---------------------------------------------------------------------
   IZMERENO PRE IZMENE (16 arhetipova, direktno sa CDN-a dobavljaca):
   SVE slike su tacno 1080x1080, odnos 1.000 — i majice i solje i olovke
   i torbe i USB i alat. Dakle "portretni" okvir NE bi povecao proizvod:
   kod `contain` kvadratna slika se vezuje za manju dimenziju, pa bi
   visi okvir samo dodao praznu traku iznad i ispod (mereno bi bilo
   623x623 slike u 623x780 okviru = 157px mrtvog prostora). Zato:

     a) okvir se vise NE zakljucava na `aspect-ratio:1` nego PRATI
        stvarni odnos slike (intrinsic). Za danasnje kvadratne izvore
        rezultat je identican kvadrat; ako seq 4 (ili bilo koji buduci
        izvor) donese portretnu ili panoramsku sliku, okvir se sam
        prilagodi — bez ijedne nove linije i bez kropovanja.
     b) uklanja se NAS unutrasnji razmak, pa platno dobavljaca pokriva
        okvir 1:1 i proizvod je onoliko velik koliko kolona dozvoljava.
        To je jedini stvarni dobitak koji postoji nad kvadratnim izvorom.
   --------------------------------------------------------------------- */
.main-image-wrap{aspect-ratio:auto;display:grid;place-items:center;overflow:hidden;za kvadratni izvor je
     jednako konacnoj visini, za panoramski se urusi na stvarnu visinu */
  min-height:min(72vw,320px);}
.main-image-wrap img{height:auto;/* grize SAMO kod portretnih izvora — kvadratni se vezuje za sirinu */
  max-height:min(78vh,760px);object-fit:contain;}
@media(min-width:1151px){
}

/* ---------------------------------------------------------------------
   2. HARMONIKE: OPIS / SPECIFIKACIJE / DOKUMENTACIJA (§2)
   ---------------------------------------------------------------------
   Referenca nema kartice: samo naslov, ševron i tanka linija. Skidaju se
   okviri, radijusi, pozadine i razmak izmedju kartica; ostaje ritam i
   tipografija. Funkcionalnost <details>/<summary> se NE dira.
   --------------------------------------------------------------------- */
.product-extra{border-top:0;margin-top:var(--ps-4);padding-top:0}
.info-section,
.product-extra .info-section{
  border:0;
  border-bottom:1px solid var(--ps-rule);
  border-radius:0;
  background:transparent;
  margin:0;
  overflow:visible;
}
.info-section:first-of-type,
.product-extra .info-section:first-of-type{border-top:1px solid var(--ps-rule)}
.info-section+.info-section,
.product-extra .info-section+.info-section{margin-top:0}
.info-section[open]>summary,
.product-extra .info-section[open]>summary{border-bottom:0}

.info-section>summary,
.product-extra .info-section>summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:var(--ps-3) 2px;
  background:transparent;
  font-size:14px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#16303c;
  cursor:pointer;
}
.info-section>summary:hover,
.product-extra .info-section>summary:hover{background:transparent;color:var(--brand-teal-dark,#146873)}

/* jednostavan ševron umesto +/− */
.info-section>summary::after,
.product-extra .info-section>summary::after{
  content:"\203A";                 /* › */
  flex:none;
  font-size:20px;
  font-weight:400;
  line-height:1;
  color:#7d8f98;
  /* zatvoreno: › udesno — kao SPECIFIKACIJE/DOKUMENTACIJA na referenci */
  transform:rotate(0deg);
  transition:transform .18s ease,color .18s ease;
}
.info-section[open]>summary::after,
.product-extra .info-section[open]>summary::after{
  /* otvoreno: ˅ nadole — kao OPIS na referenci */
  transform:rotate(90deg);
  color:#16303c;
}
.info-section>summary::-webkit-details-marker{display:none}

.info-section .info-content,
.product-extra .info-content{
  padding:0 2px var(--ps-5);
  max-width:none;
  background:transparent;
}

/* ---------------------------------------------------------------------
   3. MERA PASUSA U OPIS-U (§3)
   ---------------------------------------------------------------------
   Sekcija ostaje PUNE sirine (nikakav povratak na usku kolonu od 626px),
   ali sam pasus dobija elegantnu meru. Pre izmene: 158 znakova po redu na
   1920 — predugacko. Plafon od 118ch drzi red u trazenom opsegu 115–125,
   dok OPIS i dalje pociva na punoj sirini sekcije i prirodno je levo
   poravnat sa njom.
   --------------------------------------------------------------------- */
#productDescription{max-width:none}
/* Tipografija ide NA PASUS, ne na kontejner: raniji sloj nosi
   .product-description p{font-size:14px;line-height:1.62}, pa je
   podesavanje na #productDescription stizalo samo do kontejnera, a
   vidljivi tekst je ostajao 14px/1.62. Id-selektor to resava.
   Mera: izmereno 1ch = 1,271 stvarnih znakova u ovom fontu, pa 118ch
   daje 150 znakova po redu; 94ch daje ~120 — trazeni opseg 115-125. */
#productDescription p{
  max-width:94ch;
  font-size:15px;
  line-height:1.75;
  color:#33454e;
  margin:0 0 var(--ps-2);
}
#productDescription p:last-child{margin-bottom:0}
#productDescription p+p{margin-top:0}
.key-facts-block{max-width:94ch}

@media(max-width:900px){
  /* na uzim ekranima plafon nikada ne sme da suzi tekst ispod sirine
     koja je ionako dostupna — mobilni ostaje jedna puna kolona */
  #productDescription p,.key-facts-block{max-width:none}
}

/* =====================================================================
   V120.11.10 — GLOBALNI KOREKTIVNI PROLAZ
     A. citljivost kartica kataloga
     E. cena u korpi (prikaz jedinicne cene)
     B. tacna zaliha po varijanti (stil; podatak stize sa V114.5.7)
     C. komponenta dolaska
     F. globalna kompakcija proizvodne stranice
   Sve globalno; nijedan selektor ne pominje sifru modela ni kategoriju.
   ===================================================================== */

/* ---------------------------------------------------------------------
   A. KARTICE KATALOGA — kategorija se PRELAMA umesto da se odseca
   ---------------------------------------------------------------------
   Izmereno pre izmene (1440, katalog): `.card-category` ima
   `white-space:nowrap` + `text-overflow:ellipsis`, pa je 27 od 32
   kartica na prvoj strani bilo odseceno ("Privesci & Alati · Alati ·
   Merni p..."). Naslov je vec bio ispravan (line-clamp:2, 0 odsecenih).

   Popis stvarnih vrednosti: 50 razlicitih linija kategorije,
   duzina min 21 / medijana 38 / MAX 51 znak
   ("Kućni setovi · Kuhinjski pribor · Otvarači za flaše").
   Zato: dva reda, rezervisana visina (mreza ostaje poravnata), bez
   elipse. Naslov ostaje sekundarno vazniji jer je veci i tamniji.
   --------------------------------------------------------------------- */
.product-card .card-category{
  white-space:normal;
  overflow-wrap:break-word;
  text-overflow:clip;
  overflow:visible;
  /* BEZ clamp-a: nijedna stvarna linija kategorije se ne odseca ni na
     jednoj sirini kartice. Rezervisana visina od dva reda cuva ritam
     mreze, a redje duze linije samo uzmu treci red — CSS grid izjednaci
     visine kartica u redu, pa poravnanje ostaje. */
  display:block;
  line-height:1.35;
  min-height:calc(2 * 1.35em);       /* rezervisano -> kartice ostaju poravnate */
  margin-bottom:6px;
}

/* ---------------------------------------------------------------------
   E. KORPA — jedinicna cena bez i sa PDV-om
   --------------------------------------------------------------------- */
.cart-item-price{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.cart-unit-price{
  display:block;
  font-size:12px;
  line-height:1.35;
  color:#5d6f78;
  font-weight:600;
}
.cart-unit-price small{
  display:block;
  font-size:11.5px;
  font-weight:500;
  color:#67757d;
}
.cart-item-price>strong{font-size:17px;line-height:1.2;margin-top:2px}
.cart-item-price>small{font-size:11.5px;color:#5d6f78}

/* ---------------------------------------------------------------------
   B. TACNA ZALIHA PO VARIJANTI (podatak stize sa V114.5.7)
   --------------------------------------------------------------------- */
.variant-table .stock-exact{font-weight:700;color:#16303c;font-variant-numeric:tabular-nums}
.variant-table .stock-none{color:#b23b3b;font-weight:600}
.variant-table .stock-on-quote{color:#5d6f78}

/* ---------------------------------------------------------------------
   C. KOMPONENTA DOLASKA — ikonica mora da se VIDI
   --------------------------------------------------------------------- */
.arrival-truck{
  display:inline-block;
  width:1.05em;height:1.05em;
  flex:none;
  vertical-align:-0.15em;
  margin-right:6px;
  background-color:currentColor;
  /* kamion kao maska: uvek u boji teksta, nikada nevidljiv */
  -webkit-mask:var(--truck-mask) center/contain no-repeat;
  mask:var(--truck-mask) center/contain no-repeat;
}
.product-page,.cart-page,body{
  --truck-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 6a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v2h2.6a1 1 0 0 1 .8.4l2.4 3.2a1 1 0 0 1 .2.6V16a1 1 0 0 1-1 1h-1.2a2.8 2.8 0 0 1-5.6 0H9.8a2.8 2.8 0 0 1-5.6 0H4a1 1 0 0 1-1-1V6Zm11 4v3h5v-.5L17.1 10H14ZM7 15.2a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6Zm8.6 0a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6Z'/></svg>");
}
#arrivalBlock>span:first-child{display:inline-flex;align-items:center;color:#8a5a12}
#arrivalBlock strong{color:#16303c}
.variant-table .arrival-cell{display:inline-flex;align-items:center;gap:0}

/* ---------------------------------------------------------------------
   F. GLOBALNA KOMPAKCIJA (§13–§18)
   ---------------------------------------------------------------------
   Cilj vlasnika: manje "zumirano", vise informacija u prvom ekranu.
   Skala razmaka se stiska globalno, a ne pojedinacna pravila, pa cela
   stranica ostaje u istom ritmu.
   --------------------------------------------------------------------- */
.product-page{
  --ps-1:6px; --ps-2:10px; --ps-3:16px; --ps-4:24px;
  --ps-5:34px; --ps-6:48px; --ps-7:64px;
}

/* medija kolona uza + kapirana visina: slika vise ne dominira ekranom */
@media(min-width:1151px) and (max-width:1400px){
  .product-detail{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:var(--ps-4)}
}
@media(min-width:1401px){
  .product-detail{grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);gap:var(--ps-5)}
}
.main-image-wrap img{max-height:min(52vh,470px)}
@media(min-width:1151px){
  .main-image-wrap{min-height:min(24vw,300px)}
}

/* desna kolona — manje razmaka, ista citljivost */
.product-info h1{font-size:clamp(26px,2.05vw,34px);margin:4px 0 4px}
.product-breadcrumb{margin-bottom:var(--ps-1)}
.model-line{font-size:13px;margin:0 0 6px}
.product-subtitle{font-size:13.5px;margin:0 0 var(--ps-1)}
.price-row{margin:var(--ps-2) 0 var(--ps-3);padding:0 0 var(--ps-2)}
.price-row span{font-size:clamp(25px,1.95vw,31px)}
.price-row .price-with-vat{margin-top:4px;font-size:13.5px}
.price-row small{margin-top:4px;font-size:11.5px;max-width:56ch}
.option-block{margin:var(--ps-2) 0}
.option-heading{margin-bottom:var(--ps-1)}
.variant-card.selection-card{padding:var(--ps-2) var(--ps-3);margin:var(--ps-2) 0 var(--ps-1);gap:var(--ps-1)}
.add-to-cart-row{margin-top:var(--ps-1)}
.quote-button{height:48px;font-size:15px}
@media(min-width:701px){
  #colorOptions{max-height:min(46vh,420px)}
}
.variant-table tbody td,.variant-table tbody th{line-height:1.4;}
.variant-matrix-section tbody th.matrix-color{padding:8px 12px}
.variant-matrix-section thead th{padding:9px 9px}

/* sekcije ispod hero bloka */
.product-extra{margin-top:var(--ps-3)}
.info-section>summary,.product-extra .info-section>summary{padding:var(--ps-3) 2px;font-size:13px}
.info-section .info-content,.product-extra .info-content{padding:0 2px var(--ps-4)}
#productDescription{font-size:14.5px}
#productDescription p{font-size:14.5px;line-height:1.7}
.variant-matrix-section{margin-top:var(--ps-4)}
.related-products{margin-top:var(--ps-5);padding:var(--ps-5) 0 var(--ps-6)}

/* mobilni: kompakcija NE sme da smanji citljivost */
@media(max-width:700px){
  .product-info h1{font-size:clamp(23px,6vw,28px)}
  .price-row span{font-size:26px}
  .quote-button{height:50px}
  .product-card .card-category{-webkit-line-clamp:2}
}

/* ---------------------------------------------------------------------
   V120.11.10a — kartice kataloga na UZIM sirinama
   ---------------------------------------------------------------------
   Merenje posle prve izmene: na >=1024px kategorija vise nije odsecena
   (0/32), ali na 375 i 768 kartica je uza pa najduza stvarna linija
   (51 znakova, "Kućni setovi · Kuhinjski pribor · Otvarači za flaše")
   trazi tri reda. Clamp se zato vezuje za sirinu, a rezervisana visina
   ide uz njega da mreza ostane poravnata.
   --------------------------------------------------------------------- */
@media(max-width:1023px){
  .product-card .card-category{
    min-height:calc(3 * 1.35em);
  }
  .product-card .card-description{
    -webkit-line-clamp:4;
    min-height:calc(4 * 1.45em);
  }
}

/* ---------------------------------------------------------------------
   V120.11.10a — preostali visoki blokovi desne kolone
   ---------------------------------------------------------------------
   Izmereno na 50.050 @1920 posle prve kompakcije: kartica izbora 171px,
   CTA red 109px, red cene 106px. Red tabele od 60px NIJE posledica
   razmaka (padding je vec 8px) nego STVARNOG sadrzaja — celija dolaska
   nosi dve-tri najavljene isporuke; taj red sme da bude visi jer nosi
   vise informacija, dok redovi bez najave ostaju niski.
   --------------------------------------------------------------------- */
.variant-card.selection-card{
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  padding:10px 14px;
  gap:8px 18px;
  margin:8px 0 6px;
}
.variant-card.selection-card>div{gap:2px}
.variant-card span{font-size:11px;line-height:1.3}
.variant-card strong{font-size:13.5px;line-height:1.35}
.variant-facts-block{grid-column:1/-1}

.add-to-cart-row{gap:12px;margin-top:8px}
.quantity-picker{gap:4px}
.quantity-picker>small{margin-top:2px}
#packageHint{font-size:11.5px;line-height:1.4}
#cartFeedback{margin-top:6px}

.price-row small{line-height:1.45}

/* ---------------------------------------------------------------------
   V120.11.10a — sirine kolona tabele varijanti
   ---------------------------------------------------------------------
   Dijagnoza: sifra ("50.050.90-XS") i cena su se PRELAMALE u tri reda
   jer im je kolona bila preuska, pa je red bio visok 51-60px iako
   nosi jedan podatak. To su kratki, nedeljivi tokeni — dobijaju
   `nowrap` i svoju sirinu, a visak prostora ide koloni DOLAZAK koja
   jedina stvarno nosi vise linija.
   --------------------------------------------------------------------- */
.variant-table{table-layout:auto}
.variant-table .cell-code,
.variant-table .cell-price{white-space:nowrap}
.variant-table .cell-stock{white-space:nowrap}
.variant-table tbody td,
.variant-table tbody th{vertical-align:middle}

/* V120.11.10a — kamion malo veci i u boji najave (citljivost, §C) */
.arrival-truck{width:1.25em;height:1.25em;margin-right:7px;vertical-align:-0.22em}
#arrivalBlock>span:first-child,
#arrivalBlock>span:first-child *{color:#8a5a12}
.variant-table .cell-arrival .arrival-cell{color:#8a5a12}

/* =====================================================================
   V120.11.11 — KOMPOZICIJA PROIZVODNE STRANICE (vlasnikova referenca)
   ---------------------------------------------------------------------
   Ovo NIJE dalje smanjivanje fontova. Merenja pokazuju da je problem
   GEOMETRIJA:

   IZMERENO 120.11.10a (52.033 @1920, sadrzaj 1500px)
     leva kolona   557px = 37,1 %      desna 909px = 60,6 %
     OKVIR slike   557 x 472, ali SLIKA unutra 470 x 470
                   -> 87px MRTVE sirine u kartici sa ivicom i radijusom
     naslov -> zaglavlje tabele        479px
     cena  -> zaglavlje tabele         354px
     blok boja (14 boja, 2 reda)       218px   (~109px po redu)
     kartica boje                      108 x 93
     traka tabova iznad slike          416 x 46

   REFERENCA (PromoBox screenshot, viewport ~1919, sadrzaj 216..1680)
     leva kolona   ~594px = 40,6 %     desna ~829px = 56,6 %   razmak ~41
     slika ISPUNJAVA kolonu — nema kartice, nema ivice, nema radijusa
     naslov -> zaglavlje tabele        ~407px
     cena  -> zaglavlje tabele         ~250px
     blok boja (23 boje, 2 reda)       ~153px  (~76px po redu)
     plocica boje                      ~54 x 54 + broj ispod

   CILJ: zatvoriti proporcionalni jaz, bez kropovanja i bez gubitka
   punih naziva boja. Sve globalno — nijedan selektor ne zna za model.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. SLIKA VISE NIJE VELIKA KARTICA
   ---------------------------------------------------------------------
   Okvir je bio siri od slike (557 vs 470) i nosio je ivicu, radijus i
   tonirano dno — to je "kartica" osecaj. Sada slika ISPUNJAVA kolonu:
   proizvod postaje vizuelno veci, a mrtvi ram nestaje. `contain` i
   dalje vazi, nista se ne kropuje.
   --------------------------------------------------------------------- */
.main-image-wrap{
  border:0;
  border-radius:10px;
  background:#fff;
  min-height:0;
  padding:0;
}
.main-image-wrap img{
  width:100%;
  max-width:100%;
  /* kapa se dize: slika sme da koristi sirinu kolone. Visina hero bloka
     ionako dolazi iz DESNE kolone (izmereno 1241 vs 528), pa veca slika
     ne produzava stranicu. */
  max-height:min(74vh,660px);
  padding:0;
}
/* blagi okvir bez kartice — samo tanka linija po dnu galerije */
.gallery-panel{padding-bottom:0}

/* ---------------------------------------------------------------------
   2. ODNOS LEVO / DESNO PREMA REFERENCI (40,6 % / 56,6 %)
   --------------------------------------------------------------------- */
@media(min-width:1401px){
  .product-detail{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:38px}
}
@media(min-width:1151px) and (max-width:1400px){
  .product-detail{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:30px}
}

/* ---------------------------------------------------------------------
   3. TRAKA TABOVA — laksa i niza (bila 46px)
   --------------------------------------------------------------------- */
.gallery-modes{gap:4px;margin-bottom:10px}
.gallery-modes button{
  min-height:0;
  padding:6px 11px;
  font-size:11.5px;
  border-radius:8px;
}
#galleryModes{margin-bottom:10px}
#thumbs .thumb,.thumbs .thumb{padding:4px;border-radius:8px;}

/* ---------------------------------------------------------------------
   5. ZAGLAVLJE PROIZVODA — zbijeno (breadcrumb → H1 → opis → model → cena)
   --------------------------------------------------------------------- */
.product-breadcrumb{margin-bottom:4px}
.product-page-badges{margin:0 0 4px}
.product-info h1{font-size:clamp(25px,1.95vw,33px);line-height:1.06;margin:2px 0 3px}
.product-subtitle{font-size:13.5px;line-height:1.45;margin:0 0 3px}
.model-line{font-size:12.5px;margin:0 0 8px}

/* cena: kompaktna, bez velikog donjeg razmaka */
.price-row{margin:0 0 12px;padding:0 0 12px}
.price-row span{font-size:clamp(24px,1.85vw,30px);line-height:1.08}
.price-row small{margin-top:3px;font-size:11.5px;line-height:1.4;max-width:52ch}
.price-row .price-with-vat{margin-top:3px;font-size:13px}

/* ---------------------------------------------------------------------
   6. BIRAC BOJA — najveca preostala razlika
   ---------------------------------------------------------------------
   Referenca: 23 boje u 153px. Mi moramo da nosimo i PUN NAZIV, pa
   ciljamo ~76px po redu umesto dosadasnjih 109px: manja slicica
   (44 -> 36), tesnji razmaci, naziv 11px u najvise dva reda.
   PUN NAZIV OSTAJE — bez elipse, bez odsecanja.
   --------------------------------------------------------------------- */
.option-block{margin:0 0 10px}
.option-heading{margin-bottom:6px}
.color-options,.color-options.color-options-dense{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));}
@media(min-width:701px){
  #colorOptions{max-height:min(40vh,340px)}
}

/* ---------------------------------------------------------------------
   7. TABELA POCINJE ODMAH POSLE BOJA
   --------------------------------------------------------------------- */
.variant-table-block{margin-top:0}
.variant-table tbody td,.variant-table tbody th{padding:7px 12px}

/* selekcija / CTA — bez velikih praznina */
.variant-card.selection-card{padding:9px 12px;margin:8px 0 4px;gap:6px 16px}
.add-to-cart-row{margin-top:6px}
.quote-button{height:46px}

/* ---------------------------------------------------------------------
   8. MOBILNI — kompozicija se ne sme preneti u necitljivost
   --------------------------------------------------------------------- */
@media(max-width:700px){
  .main-image-wrap{border-radius:10px}
  .main-image-wrap img{max-height:none}
  .gallery-modes button{padding:7px 11px;font-size:12px}
  .quote-button{height:50px}
}

/* ---------------------------------------------------------------------
   V120.11.11a — zavrsno stezanje (mereno, ne "po osecaju")
   ---------------------------------------------------------------------
   Posle prvog prolaza ostala su tri jaza prema referenci:
     traka tabova   46px   (dugme ima FIKSNIH 36px + 4px padding + ivica)
     red boja       94px   (referenca ~76px)
     cena -> tabela 308px  (referenca ~250px)
   --------------------------------------------------------------------- */

/* traka tabova: 46 -> 38 */
.gallery-modes{padding:3px;margin:0 0 9px;border-radius:9px}
.gallery-modes button{height:30px;padding:0 10px;font-size:11.5px;border-radius:7px}
.color-options,.color-options.color-options-dense{gap:4px}

/* cena -> tabela: skidanje viska izmedju cene, naslova boja i tabele */
.price-row{margin:0 0 9px;padding:0 0 9px}
.option-block{margin:0 0 8px}
.option-heading{margin-bottom:5px}
.variant-table-block .option-heading{margin-bottom:5px}

/* mobilni zadrzava citljive dodire */
@media(max-width:700px){
  .gallery-modes button{height:34px;padding:0 12px;font-size:12px}
}

/* =====================================================================
   V120.11.12 — VIZUELNI PARITET SA ZIVOM REFERENCOM
   ---------------------------------------------------------------------
   Referenca izmerena UZIVO u pregledacu na 1920x1013
   (promobox.com/sr/products/MASTER MEN), a ne "po secanju":

     sadrzaj            218 .. 1687  = 1469
     leva kolona        595  (40,5 %)
     razmak kolona      40
     desna kolona       834  (56,8 %)
     glavna slika       596 x 596
     slicice            62 x 62, 13px ispod slike
     H1                 30px
     cena               30px
     BIRAC BOJA         kartica 56 x 74, 23 BOJE U DVA REDA, blok 156px
     zaglavlje tabele   y = 596        (naslov -> tabela = 402)
     red tabele         41px, telo 16px, zaglavlje 14px

   Nase stanje pre ove izmene (120.11.11a, 52.033 @1920):
     leva 629 (41,9 %) / desna 833 (55,5 %), razmak 38, sadrzaj 1500
     H1 33px, cena 30px
     kartica boje 89 x 69  ->  23 boje u TRI reda, blok 241px
     telo tabele 13px, zaglavlje 10,5px

   Jedini stvarni preostali jaz je BIRAC BOJA (tri reda umesto dva) i
   tipografija tabele koja je kod nas MANJA nego na referenci.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. BIRAC BOJA — 23 BOJE U DVA REDA (glavni zahtev ovog prolaza)
   ---------------------------------------------------------------------
   Racun: desna kolona je 833px. Da bi stalo 12 kartica u red uz razmak
   od 4px, kartica sme da bude (833 - 11*4) / 12 = 65,75px.
   Referenca ima 56px, ali ona ispod slicice pise SAMO broj; mi pisemo
   PUN NAZIV, pa naziv dobija do dva reda u uzoj kartici.
   Rezultat: 23 boje u DVA reda, blok ~180px prema 156px na referenci.
   PUN NAZIV OSTAJE CITLJIV — bez elipse, bez odsecanja.
   --------------------------------------------------------------------- */
.color-options,
.color-options.color-options-dense{
  grid-template-columns:repeat(auto-fill,minmax(62px,1fr));
  gap:4px;
  align-items:stretch;
}
.color-options .color-button,
.color-options .color-photo-button,
.color-options-dense .color-photo-button{
  padding:4px 3px 5px;
  gap:3px;
  border-radius:7px;
}
.color-options .color-photo-wrap,
.color-options-dense .color-photo-wrap{width:34px;height:34px;border-radius:5px}
.color-options .color-code,
.color-options-dense .color-photo-button .color-code{line-height:1.15;/* naziv se PRELAMA u uzoj kartici — nikada se ne skracuje */
  white-space:normal;overflow-wrap:break-word;hyphens:auto;}
.color-options .color-code-id,
.color-options-dense .color-photo-button .color-code-id{margin-top:1px;}
@media(min-width:701px){
  /* dva reda kartica staju bez unutrasnjeg skrola */
  #colorOptions{max-height:min(34vh,300px)}
}

/* ---------------------------------------------------------------------
   2. TIPOGRAFIJA TABELE — referenca je VECA od nase, ne manja
   ---------------------------------------------------------------------
   Referenca: telo 16px, zaglavlje 14px, red 41px.
   Mi smo bili na 13px / 10,5px. Podizanje na 14px / 11px popravlja
   citljivost, a red i dalje ostaje NIZI od referentnog 41px.
   --------------------------------------------------------------------- */
.variant-table{font-size:14px}
.variant-table thead th{font-size:11px;letter-spacing:.06em;}
.variant-table .cell-code{font-size:13px}

/* ---------------------------------------------------------------------
   3. FINO PODESAVANJE PROPORCIJA NA REFERENTNE 40,5 / 56,8
   --------------------------------------------------------------------- */
@media(min-width:1401px){
  .product-detail{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:40px}
}

/* ---------------------------------------------------------------------
   4. NASLOV NA REFERENTNIH 30px (bili smo na 33px)
   --------------------------------------------------------------------- */
.product-info h1{font-size:clamp(24px,1.78vw,30px)}

/* ---------------------------------------------------------------------
   5. SLICICE: 62x62 i 13px ispod slike (referenca)
   --------------------------------------------------------------------- */
#thumbs,.thumbs{margin-top:13px;gap:8px}
#thumbs .thumb,.thumbs .thumb{width:62px;height:62px}

/* ---------------------------------------------------------------------
   6. MOBILNI — paritet se ne prenosi u necitljivost
   --------------------------------------------------------------------- */
@media(max-width:700px){
  .color-options,.color-options.color-options-dense{grid-auto-columns:100px;gap:6px}
  .color-options .color-photo-wrap,.color-options-dense .color-photo-wrap{width:40px;height:40px}
  .color-options .color-code,.color-options-dense .color-photo-button .color-code{font-size:11.5px;line-height:1.25}
  .color-options .color-code-id,.color-options-dense .color-photo-button .color-code-id{font-size:10px}
  .variant-table{font-size:13px}
  #thumbs .thumb,.thumbs .thumb{width:58px;height:58px}
}
@media(min-width:701px) and (max-width:1150px){
  /* jedna kolona: desna zona je siroka, kartice smeju biti udobnije */
  .color-options,.color-options.color-options-dense{grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}
}

/* Telo tabele: raniji sloj postavlja font direktno na `tbody td` (vidi
   liniju ~4321), sto nadjacava `.variant-table{font-size}`. Zato se ovde
   postavlja na ISTOJ specificnosti. Referenca ima 16px — mi ostajemo na
   14px, sto je i dalje citljivije od dosadasnjih 12,5–13,5px, a red je
   i dalje nizi od referentnog 41px. */
.variant-table tbody td,
.variant-table tbody th{font-size:14px}
.variant-table tbody td.cell-code{font-size:13px}
.variant-table tbody td.cell-arrival{font-size:12.5px}
@media(max-width:700px){
  .variant-table tbody td,.variant-table tbody th{font-size:13px}
}

/* Pojedinacne kolone su nosile starije, sitnije vrednosti (cena 13,
   zaliha 12,5). Referenca ima 16px u telu tabele; mi ostajemo skromniji,
   ali ZALIHA i CENA moraju da budu udobno citljive. Red i dalje ostaje
   nizi od referentnih 41px. */
.variant-table tbody td.cell-price,
.variant-table tbody td.cell-stock{font-size:13.5px}
.variant-table tbody tr.active td:first-child{font-size:14px}
@media(max-width:700px){
  .variant-table tbody td.cell-price,
  .variant-table tbody td.cell-stock{font-size:12.5px}
}

/* Naziv boje nazad na 11px: vlasnik je ranije izricito zamerio sitan
   tekst. Provereno da dva reda i 12 kartica po redu i dalje vaze. */
.color-options .color-code,
.color-options-dense .color-photo-button .color-code{font-size:11px}

/* =====================================================================
   V120.11.13 — ZAVRSNA GUSTINA TABELE + GLOBALNA CITLJIVOST
   ---------------------------------------------------------------------
   IZMERENO PRE (50.050 @1920, tabela 843px):
     red                60px (svi redovi)
     padding celije     8px 12px, line-height 1.4
     kolone             VELICINA 102 | SIFRA 149 | CENA 158 | ZALIHA 233 | DOLAZAK 200
     celija DOLAZAK     ~3 reda za DVE stvarne najave
   Sadrzajni maksimumi iz stvarnog kataloga:
     sifra varijante    MAX 18 znakova ("34.750.92-33X25X12")
     stockLabel         MAX 19 ("Stanje se proverava")
     najava             "+55.000 · 01.06.27", NAJVISE 2 po varijanti
   Zakljucak: ZALIHA (233px) i VELICINA (102px) su bile preseroke za svoj
   sadrzaj, a DOLAZAK — jedina kolona koja stvarno nosi dva reda — je bila
   stisnuta. Zato se sirine vezuju za SADRZAJ, a ne za proizvoljne brojeve.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. SIRINE KOLONA PREMA SADRZAJU
   ---------------------------------------------------------------------
   Kolone se vezuju za SADRZAJ preko "white-space:nowrap": time min-content
   kolone postaje pun niz, pa joj "table-layout:auto" MORA dodeliti bar
   toliko sirine. Sav visak pripada koloni DOLAZAK, jedinoj sa "width:auto"
   i jedinoj koja stvarno nosi vise od jednog reda. Nista se ne skracuje
   niti sakriva. Ciljano po KLASI, ne po nth-child, jer tabela boja ima
   drugi skup kolona (BOJA | SIFRA | ZALIHA | DOLAZAK).

   ODBACENO: "width:1%" uz nowrap. Zvuci kao standardni trik, ali ga je
   pregledac ovde pokusao da ispostuje i stisnuo kolone ISPOD sadrzaja —
   izmereno: ZALIHA 104px za tekst kome treba 154px, pa je tekst curio
   preko celije. Sam nowrap je ispravan i dovoljan.
   --------------------------------------------------------------------- */
.variant-table .cell-code,
.variant-table .cell-price,
.variant-table .cell-stock{white-space:nowrap}
.variant-table thead th{white-space:nowrap}
.variant-table tbody tr > td:first-child,
.variant-table tbody tr > th:first-child{white-space:nowrap}
/* DOLAZAK uzima ostatak: jedina kolona sa stvarnim visednim sadrzajem */
.variant-table .cell-arrival{width:auto}
/* tabela boja: naziv boje sme da se prelama, ostalo ne */
.variant-table.color-table .cell-colour{width:auto;white-space:normal}

/* ---------------------------------------------------------------------
   2. GUSTINA — jedan korak nize, bez smanjivanja fonta
   ---------------------------------------------------------------------
   Font ostaje 14 / 13,5 / 13px (referenca ima 16px). Skida se SAMO
   visak razmaka: padding 8->6, line-height 1.4->1.32.
   --------------------------------------------------------------------- */
.variant-table tbody td,
.variant-table tbody th{padding:6px 10px;line-height:1.32}
.variant-table thead th{line-height:1.25;}

/* ---------------------------------------------------------------------
   3. CELIJE DOLASKA — kompaktne, ali NIJEDNA najava se ne uklanja
   ---------------------------------------------------------------------
   Do dve stvarne najave po varijanti (izmereno). Svaka dobija svoj red,
   poravnate kolicine i datumi, bez dodatnih margina i bez preklapanja.
   --------------------------------------------------------------------- */
.variant-table .cell-arrival{line-height:1.28;font-size:12.5px}
.variant-table .cell-arrival .arrival-cell{
  display:block;
  margin:0;
  padding:0;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.variant-table .cell-arrival .arrival-cell + .arrival-cell{margin-top:2px}
.variant-table .cell-arrival br{display:none}

/* brojcane kolone poravnate radi skeniranja */
.variant-table .cell-price,
.variant-table .cell-stock{font-variant-numeric:tabular-nums}

/* red UKUPNO ostaje jasno odvojen */
.variant-table tbody tr.total-row td{padding:8px 10px}

/* ---------------------------------------------------------------------
   4. GLOBALNA CITLJIVOST — nijedan smisleni tekst ne sme da bude sicusan
   ---------------------------------------------------------------------
   Popis stvarnih vrednosti: naziv kartice MAX 25, pun naziv dobavljaca
   MAX 133, taksonomija MAX 51, naziv boje MAX 26, sifra MAX 18.
   Ovde se podize samo ono sto je bilo ispod udobnog praga.
   --------------------------------------------------------------------- */
#packageHint{font-size:12px;line-height:1.45}
.helper{font-size:12px;line-height:1.5}
.variant-card span{font-size:11.5px}
.variant-card strong{font-size:14px}
.matrix-legend > *{font-size:12px}
.variant-matrix-section th.matrix-color small{font-size:11px}
.cart-unit-price{font-size:12.5px}
.cart-unit-price small{font-size:12px}
.cart-item-price > small{font-size:12px}
.sticky-cart small{font-size:12px}
.sticky-cart strong{font-size:13.5px}

/* nijedan tekst ne sme da dodiruje ivicu celije/kartice */
.variant-table tbody td:first-child{padding-left:12px}
.variant-table thead th:first-child{padding-left:12px}
.variant-table tbody td:last-child{padding-right:12px}
.variant-table thead th:last-child{padding-right:12px}

/* ---------------------------------------------------------------------
   5. UZI DESKTOP / TABLET — kolone se ne smeju zgnjeciti
   --------------------------------------------------------------------- */
@media(max-width:1150px){
  .variant-table tbody td,.variant-table tbody th{padding:6px 9px}
  .variant-table .cell-arrival{font-size:12px}
}

/* ---------------------------------------------------------------------
   6. MOBILNI — gustina se NE prenosi u necitljivost
   --------------------------------------------------------------------- */
@media(max-width:700px){
  .variant-table tbody td,.variant-table tbody th{padding:8px 9px;line-height:1.35}
  .variant-table thead th{padding:8px 9px}
  .variant-table .cell-arrival{font-size:12px}
  #packageHint,.helper{font-size:12px}
  .variant-card strong{font-size:14px}
}

/* ---------------------------------------------------------------------
   V120.11.13a — pojas 1151–1400px
   ---------------------------------------------------------------------
   Izmereno na 1280: informaciona kolona daje tabeli 703px, a prirodne
   sirine svih pet kolona traze ~733px, pa je pregledac stiskao SIFRU
   ispod sadrzaja (npr. "50.050.90-XXL" trazi 112px, dobija 102px).
   Umesto bocnog skrola (vlasnik ga izricito ne zeli iznad 701px), vraca
   se ~30px kroz uzi horizontalni padding i za pola stepena manju sifru.
   Nista se ne skracuje niti sakriva.
   --------------------------------------------------------------------- */
@media(min-width:1151px) and (max-width:1400px){
  .variant-table tbody td,
  .variant-table tbody th{padding:6px 8px}
  .variant-table thead th{padding:7px 8px}
  .variant-table tbody td:first-child,
  .variant-table thead th:first-child{padding-left:10px}
  .variant-table tbody td:last-child,
  .variant-table thead th:last-child{padding-right:10px}
  .variant-table .cell-code{font-size:12.5px}
  .variant-table .cell-arrival{font-size:12px}
}

/* ---------------------------------------------------------------------
   V120.11.13a — kada sadrzaj STVARNO ne stane
   ---------------------------------------------------------------------
   Najgori slucaj (50.050): pet kolona + sifra od 18 znakova + RASPON cene
   + dug status zalihe + dve najave. Na 1151-1280 informaciona kolona daje
   tabeli 627-703px, a sadrzaju treba ~730px.

   Pravilo vlasnika je jasno: §2 zabranjuje ruzno prelamanje, §8 zabranjuje
   sakrivanje podataka, a §10 dozvoljava SADRZAN skrol "kada je stvarno
   neophodan". Zato tabela dobija `min-width:max-content`:
     * kada sadrzaj STANE  -> `width:100%` pobedjuje, tabela popuni sirinu,
       nema trake za skrol (tako je na 1440 i vise)
     * kada NE STANE       -> tabela zadrzi punu sirinu, a `.variant-table-wrap`
       skroluje U SEBI; nista se ne prelama, nista se ne krije,
       a skrol STRANICE ostaje 0
   Matrica ima sopstveni skrol i ne dira se.
   --------------------------------------------------------------------- */
.variant-table-wrap{overflow-x:auto}
.variant-table:not(.variant-matrix){min-width:max-content}

/* Sifra nijanse ispod kartice boje bila je 9,5px — vlasnik je izricito
   naveo "codes becoming unreadable" kao neprihvatljivo. Kod je kratak
   (dvocifren), pa podizanje ne trosi sirinu, samo ~2px visine kartice.
   Provereno da 23 boje i dalje staju u DVA reda. */
.color-options .color-code-id,
.color-options-dense .color-photo-button .color-code-id{font-size:11px}

/* =====================================================================
   V120.11.13a — GLOBALNA CITLJIVOST: tri stvarna nalaza iz revizije
   ===================================================================== */

/* 1. ZAGLAVLJE: "Korpa" je bila ODSECENA.
   Izmereno na 375 (layout 360): `.header-actions` se prostire do 366px,
   dakle 6px preko ekrana, a predak sa `overflow-x:hidden` je secao
   kontrolu Korpe. Isti defekt je zabelezen i u pojasu 701-788px.
   Uzrok: `.header-inner` je nowrap flex, a `.header-search` je flex
   stavka bez `min-width:0`, pa ne sme da se skupi ispod svog sadrzaja i
   gura akcije van ekrana. Jedna linija resava koren. */
.header-search{min-width:0}

/* 2. BEDZ SERTIFIKATA je bio 7px — necitljivo. */
.status-badge{font-size:10px;letter-spacing:.04em}
.product-page-badges .status-badge{font-size:10px}

/* 3. PODNOZJE: linkovi i copyright su bili 10px. */
.site-footer .footer-bottom,
.site-footer .footer-bottom *{font-size:12px}
.site-footer a,
.site-footer p,
.site-footer li{font-size:12.5px}
.site-footer h3,.site-footer h4,.site-footer strong{font-size:13px}

/* ---------------------------------------------------------------------
   V120.11.13b — dorada tri nalaza
   --------------------------------------------------------------------- */

/* ZAGLAVLJE na mobilnom: `.header-actions` je imao `white-space:nowrap`
   na KONTEJNERU, pa se red akcija nije smeo prelomiti i sirio se na 348px
   u kontejneru od 324px — Korpa je zavrsavala odsecena. Prelamanje se
   dozvoljava KONTEJNERU, a pojedinacne oznake i dalje ostaju u jednom
   redu (ne lome se na pola reci). Nijedan link se ne uklanja. */
@media(max-width:700px){
  .header-actions{white-space:normal;flex-wrap:wrap;row-gap:6px;justify-content:flex-end}
  .header-actions > *{white-space:nowrap}
}

/* BEDZ SERTIFIKATA: 7 -> 11px (kratka velika slova, i dalje kompaktan) */
.status-badge,
.product-page-badges .status-badge,
.product-status-badges .status-badge{font-size:11px;letter-spacing:.03em}

/* PODNOZJE: ciljano na istoj specificnosti kao izvorno pravilo (linija ~369) */
.footer-bottom{font-size:12px}
.footer-bottom a,.footer-bottom p,.footer-bottom span,.footer-bottom small{font-size:12px}
.site-footer .footer-about p,
.site-footer .footer-col a,
.site-footer .footer-col li{font-size:12.5px}

/* Naslovi kolona u podnozju su <h2> unutar `.footer-column` i imali su
   10px — najsitniji smisleni tekst na stranici. Podizu se na 12,5px;
   linkovi i adresa u istoj koloni prate. */
.site-footer .footer-column h2{font-size:12.5px;letter-spacing:.06em}
.site-footer .footer-column a,
.site-footer .footer-column p,
.site-footer .footer-column address{font-size:12.5px}

/* Neki bedzevi nose unutrasnji <b> sa sopstvenom velicinom (npr. RPET na
   karticama slicnih proizvoda, 9px). Naslednici bedza prate bedz. */
.status-badge b,
.status-badge span,
.status-badge small{font-size:inherit;letter-spacing:inherit}

/* Sifra nijanse u prvoj koloni TABELE BOJA (`.colour-name small`) je bila
   10px — isti nalaz kao kod hero kartica, druga povrsina. */
.variant-table .colour-name small,
.variant-table .cell-colour small{font-size:11px}

/* KATALOG: dva smislena teksta su bila 10px. */
.variant-summary span{font-size:11.5px}
.catalog-view-controls label{font-size:11.5px}

/* ---------------------------------------------------------------------
   V120.11.13c — poslednji sitni tekstovi (izmereno, ne pretpostavljeno)
   ---------------------------------------------------------------------
   Nalazi na katalogu: stanje na kartici i cenovna napomena su na
   mobilnom bili 10px, kao i mrvice; cipovi velicina u filterima 10,24px.
   Sve su smisleni kupacki tekstovi sa vlasnikove liste (§6).
   --------------------------------------------------------------------- */
@media(max-width:700px){
  .product-card .card-stock strong,
  .product-card .card-stock,
  .card-price-vat,
  .product-card small{font-size:11.5px}
  .catalog-breadcrumb a,
  .catalog-breadcrumb span{font-size:11.5px}
  .instagram-tile span{font-size:11.5px}
}
.filter-option.size-filter-option span,
.filter-option span{font-size:11.5px}

/* "po komadu bez PDV-a" je bio zakljucan na 10px sa `!important`
   (mobilna pravila `.catalog-layout .card-price-vat`). Jedini nacin da
   se podigne je ista tezina — sadrzaj je smislena cenovna napomena. */
@media(max-width:700px){
  .catalog-layout .card-price-vat,
  .product-card .card-price-vat{font-size:11.5px!important}
}
@media(min-width:701px){
  .catalog-layout .card-price-vat,
  .product-card .card-price-vat{font-size:11.5px!important}
}

/* ---------------------------------------------------------------------
   V120.11.13d — poslednji nalazi revizije citljivosti
   --------------------------------------------------------------------- */

/* KATALOG: "po komadu bez PDV-a" je bare <small> u cenovnom <div>-u
   kartice (bez klase), pa ranija ciljanja nisu hvatala. */
.product-card small,
.catalog-layout .product-card small,
.product-grid .product-card small{font-size:11.5px}

/* POCETNA: opisi plocica su se skracivali elipsom (izmereno prelivanje
   8-21px). Tekst je smislen, pa se PRELAMA umesto da se sece (§5, §8). */
.home-launcher-tile small{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  line-height:1.35;
}

/* POCETNA: editorijalne "eyebrow" oznake su bile 10px. */
.home-launcher-tile span,
.instagram-tile span,
.home-editorial-tile span{font-size:11px;letter-spacing:.05em}

/* Oznaka dolaska na kartici kataloga bila je 10px na mobilnom — to je
   podatak o isporuci, ne dekoracija (§6). */
.product-card .card-arrival,
.product-card .card-arrival *,
.card-arrival strong,
.card-arrival small{font-size:11.5px}

/* POCETNA — dva poslednja nalaza, ciljana tacno (izmereni lanci):
   1) SMALL u `.home-launcher-tile` je i dalje imao nowrap+ellipsis iz
      ranijeg sloja; opis plocice je smislen tekst i sme da se prelomi.
   2) "eyebrow" oznaka je SPAN u `.home-collection-grid a`, 10px. */
.home-launcher-grid .home-launcher-tile small{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  line-height:1.35;
}
.home-collection-grid a span{font-size:11px;letter-spacing:.05em}

/* Poslednja dva: oznaka naloga na Instagram bloku pocetne. */
.instagram-strip span,
.instagram-strip small,
.instagram-head span,
.instagram-head small{font-size:11px}

/* Oznake naloga u `.home-social-actions` (Instagram / Facebook), 10px. */
.home-social-actions small,
.home-social-actions span{font-size:11px}

/* Oznake naloga su zakljucane ranijim pravilom vece tezine; ista tezina. */
.home-social-actions a small,
.home-social-actions a span small,
.home-social-actions a span{font-size:11px !important}

/* RADOVI: brojac galerije i kategorijska oznaka bili su 10px. */
.group-count,
.works-grid .work-card span,
.work-card span,
.work-category{font-size:11px}

/* RADOVI: prethodna pravila su jaca; ista tezina. Kategorijska oznaka je
   bare <span> u kartici galerije. */
.group-count{font-size:11px !important}
.works-gallery span,
.work-group span,
.gallery-group span{font-size:11px}

/* RADOVI: kategorijska oznaka je SMALL u `.work-copy`. */
.work-card .work-copy small,
.work-copy small{font-size:11px}

/* =====================================================================
   V120.12 — FINALNI SLOJ: GLOBALNI TOKENI KOMPONENTI
   =====================================================================

   Skala je izvedena iz IZMERENIH proporcija žive PromoBox stranice
   (samo gustina/veličina — nijedan brend, boja, logo ni identitet).
   DemoShop ostaje DemoShop.

   Ovo je JEDAN deljeni sloj tokena. Nema pravila po modelu, nema
   [data-model], nema #product-N. Svako pravilo ispod važi globalno za
   sve kategorije proizvoda.

   Mereni ciljevi sadržaja:
     1280 -> 1201 · 1366 -> 1287 · 1440 -> 1361 · 1600/1920 -> 1470 (cap)
   Iznad 1600 komponente se VIŠE NE UVEĆAVAJU — višak širine je vazduh.
   ===================================================================== */

:root {
  --v12-container-max: 1470px;
  --v12-outer-pad: 32px;
  --v12-hero-gap: 40px;
  --v12-hero-gap-narrow: 28px;
  --v12-gallery-max: 596px;
  --v12-thumb: 64px;
  --v12-thumb-gap: 8px;
  --v12-shade-tile: 56px;
  --v12-shade-tile-sm: 52px;
  --v12-radius: 8px;
  --v12-hover: 140ms;
  --v12-s1: 4px;  --v12-s2: 8px;  --v12-s3: 12px; --v12-s4: 16px;
  --v12-s5: 24px; --v12-s6: 32px; --v12-s7: 40px;
  --v12-row-h: 42px;
  --v12-head-h: 38px;
}

/* ---------- 1. GLOBALNI DESKTOP KONTEJNER ---------- */
@media (min-width: 1025px) {
  .product-page .container,
  .product-page > .container,
  .product-detail-wrap,
  .product-container {
    width: min(calc(100% - (var(--v12-outer-pad) * 2)), var(--v12-container-max));
    max-width: var(--v12-container-max);
    margin-inline: auto;
    padding-inline: 0;
  }
}

/* ---------- 2. HERO KOLONE: GALERIJA CAP-uje, INFO uzima ostatak ---------- */
@media (min-width: 1025px) {
  .product-detail {
    grid-template-columns: minmax(0, var(--v12-gallery-max)) minmax(0, 1fr);
    gap: var(--v12-hero-gap);
    align-items: start;
    padding: var(--v12-s7) 0 64px;
  }
  /* Opis počinje odmah ispod VIŠE kolone — bez lažne fiksne visine heroja. */
  .product-detail > * { min-width: 0; }
}
@media (min-width: 1025px) and (max-width: 1399px) {
  .product-detail { gap: var(--v12-hero-gap-narrow); }
}

/* ---------- 3. GLAVNA SLIKA: TVRDI GLOBALNI CAP ---------- */
@media (min-width: 1025px) {
  .main-image-wrap {
    width: 100%;
    max-width: var(--v12-gallery-max);
    aspect-ratio: 1 / 1;
    border-radius: var(--v12-radius);
    overflow: hidden;
  }
  .main-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  /* Nikakav vw/clamp ne sme da nastavi da uvećava sliku na 1600-1920. */
  .product-gallery { max-width: var(--v12-gallery-max); }
}

/* ---------- 4. TRAKA SLIČICA ---------- */
.thumbs {display: flex;gap: var(--v12-thumb-gap);margin-top: var(--v12-s3);}
.thumb {
  width: var(--v12-thumb);
  height: var(--v12-thumb);
  flex: 0 0 var(--v12-thumb);
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--v12-radius);
  background: #fff;
  cursor: pointer;
  /* Samo boja/okvir — nikakav transform, skala ni pomeranje layouta. */
  transition: border-color var(--v12-hover) ease, background-color var(--v12-hover) ease, box-shadow var(--v12-hover) ease;
}
.thumb:hover { border-color: #b9bec7; background: #fcfcfd; transform: none; }
.thumb.active {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink) inset;
  transform: none;
}
.thumb img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- 5. PLOČICE NIJANSI ---------- */
@media (min-width: 1025px) {
  .color-options { gap: var(--v12-thumb-gap); }
  .color-photo-button {
    width: var(--v12-shade-tile);
    min-width: var(--v12-shade-tile);
    height: auto;
    padding: 3px;
    border-radius: var(--v12-radius);
    transition: border-color var(--v12-hover) ease, box-shadow var(--v12-hover) ease;
  }
  .color-photo-wrap {
    width: 100%;
    height: calc(var(--v12-shade-tile) - 8px);
    border-radius: 6px;
  }
  .color-photo-button:hover { transform: none; }
  .color-photo-button.active { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--ink); }
  /* Naziv/šifra NE ide ispod svake pločice — izabrana nijansa se čita u
     zaglavlju izbora i u tooltipu. Ostaje dostupno čitačima ekrana. */
  .color-photo-button .color-code {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
}
/* 1280-1399: 52px sprečava glupi treći red sa jednom pločicom. */
@media (min-width: 1025px) and (max-width: 1399px) {
  .color-photo-button { width: var(--v12-shade-tile-sm); min-width: var(--v12-shade-tile-sm); }
  .color-photo-wrap { height: calc(var(--v12-shade-tile-sm) - 8px); }
}

/* ---------- 6. TIPOGRAFIJA: gusta ecommerce stranica, ne marketing ---------- */
@media (min-width: 1025px) {
  .product-info h1 {
    font-size: 30px;
    line-height: 36px;
    letter-spacing: -0.02em;
    margin: 0 0 var(--v12-s1);
    /* Naslov se PRELAMA prirodno — bez fiksne visine i bez sečenja. */
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    display: block;
    -webkit-line-clamp: none;
  }
  .model-line { font-size: 16px; line-height: 24px; }
  .price-row span { font-size: 30px; line-height: 36px; }
  .product-info, .product-info p { font-size: 14px; line-height: 21px; }
}

/* ---------- 7. VERTIKALNI RITAM DESNE KOLONE ---------- */
@media (min-width: 1025px) {
  .product-info { padding-top: 0; }
  .product-info h1 + .model-line { margin-top: var(--v12-s1); }
  .product-info .short-description,
  .product-info .product-lead { margin-top: var(--v12-s4); }
  .price-row { margin: var(--v12-s5) 0; padding: var(--v12-s4) 0; }
  .option-block { margin: var(--v12-s5) 0; }
  .option-heading { margin-bottom: var(--v12-s2); }
  .variant-table-block { margin: var(--v12-s4) 0 var(--v12-s5); }
}

/* ---------- 8. MATRICA ZALIHA: kompaktni redovi ---------- */
.variant-table-head {
  min-height: var(--v12-head-h);
  padding: var(--v12-s2) var(--v12-s4);
  align-content: center;
}
.variant-table-row {
  min-height: var(--v12-row-h);
  padding: var(--v12-s2) var(--v12-s4);
  align-items: center;
  transition: background-color var(--v12-hover) ease;
}
.variant-table-row strong,
.variant-table-row > span { font-size: 14px; line-height: 20px; }
.variant-table-row small { font-size: 12px; line-height: 18px; }
.variant-table-head { font-size: 11px; }
/* Ćelija sme da prelomi — nikada da preseče. */
.variant-table-row > span,
.variant-table-head > span { min-width: 0; overflow-wrap: anywhere; }

/* ---------- 9. MEGA-MENI: JEDNA POVRŠINA, BEZ BELE KARTICE U 3. KOLONI ----
   Ranije je SVAKI .category-level bio zasebna bela kartica sa okvirom i
   senkom, razdvojena gap-om — treća kolona je zato "plutala" kao poseban
   panel. Sada je POVRŠINA jedna (.category-browser), a kolone su unutrašnje
   sekcije razdvojene hairline linijom. */
@media (min-width: 701px) {
  .category-browser {
    gap: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--v12-radius);
    box-shadow: var(--elev-4);
    overflow: hidden;
  }
  .category-browser > .category-level,
  .category-level-primary,
  .category-level-secondary,
  .category-level-tertiary {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .category-browser > .category-level + .category-level {
    border-left: 1px solid var(--line);
  }
  .category-level { padding: var(--v12-s3) var(--v12-s4); }
  /* Nikakav gradijent/obojena podloga u trećoj koloni. */
  .category-level-tertiary { background-image: none; }
  .menu-tertiary-list button, .menu-tertiary-list a {
    border-color: var(--line);
    transition: border-color var(--v12-hover) ease, background-color var(--v12-hover) ease;
  }
  .menu-tertiary-list button:hover, .menu-tertiary-list a:hover { transform: none; }
  .menu-step-button { transition: background-color var(--v12-hover) ease, color var(--v12-hover) ease; }
  .menu-step-button:hover { transform: none; }
}

/* ---------- 10. GLOBALNO SPREČAVANJE SEČENJA TEKSTA ----------
   Nijedan tekst prema kupcu ne sme da bude vidljivo presečen. Gde sadržaj
   varira, dozvoljava se prirodno prelamanje. */
.product-info h1,
.product-title,
.product-card h3,
.product-card .product-name,
.card-title,
.filter-chip,
.badge,
.stock-badge,
.menu-step-button,
.menu-step-button small,
.category-level-heading strong,
.variant-table-row,
.variant-table-head,
.cart-item-name,
.footer-column a {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: none;
}
/* Dugmad i čipovi rastu po sadržaju umesto da seku labelu. */
.filter-chip, .badge, .quote-button, .size-button, .color-button {
  height: auto;
  min-height: 36px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
/* Flex/grid deca moraju smeti da se skupe, inače prelivaju kontejner. */
.product-detail > *, .product-info > *, .variant-table-row > *,
.cart-row > *, .filter-row > * { min-width: 0; }

/* ---------- 11. HOVER DISCIPLINA (globalno) ----------
   Bez skale, bez skoka, bez pomeranja layouta, bez velike senke. */
.product-card:hover, .product-card:hover img,
.thumb:hover, .color-photo-button:hover,
.menu-step-button:hover, .menu-tertiary-list button:hover, .menu-tertiary-list a:hover,
.search-result-item:hover {
  transform: none;
}
.product-card, .product-card img, .thumb, .color-photo-button,
.menu-step-button, .filter-chip, .quote-button {
  transition-duration: var(--v12-hover);
}

/* ---------- 12. GORNJI CAP: 1600 i 1920 ne uvećavaju komponente ---------- */
@media (min-width: 1600px) {
  .product-detail { grid-template-columns: minmax(0, var(--v12-gallery-max)) minmax(0, 1fr); }
  .main-image-wrap, .product-gallery, .thumbs { max-width: var(--v12-gallery-max); }
  .product-info h1 { font-size: 30px; line-height: 36px; }
}

/* ---------------------------------------------------------------------
   V120.12 — KOREKCIJA 1 (izmereno u pregledaču, ne pretpostavljeno)

   Prvi prolaz je promašio četiri stvari; sve četiri su potvrđene merenjem:
     • kontejner je SAM element `main.container.product-page`, ne potomak,
       pa `.product-page .container` nije mogao da se poklopi;
     • `.color-options-dense .color-photo-button` (0,2,0) je nadjačavao
       `.color-photo-button` (0,1,0) — pločice su ostale 64px;
     • moj vizuelno-skriveni `.color-code` je izgubio `width:1px`, pa je
       apsolutno pozicioniran element bio 1425px širok i pravio
       HORIZONTALNO PRELIVANJE cele stranice (2083px). Dugme već nosi
       `title` i `aria-label`, pa se labela jednostavno UKLANJA iz layouta;
     • `.thumb` je ostao 62px iz specifičnijeg pravila.
   --------------------------------------------------------------------- */

@media (min-width: 1025px) {
  main.container.product-page,
  .container.product-page {
    width: min(calc(100% - (var(--v12-outer-pad) * 2)), var(--v12-container-max));
    max-width: var(--v12-container-max);
    padding-inline: 0;
    margin-inline: auto;
  }
}

/* Pločice nijansi — ista specifičnost kao postojeće `dense` pravilo. */
@media (min-width: 1025px) {
  .color-options .color-photo-button,
  .color-options-dense .color-photo-button {width: var(--v12-shade-tile);min-width: var(--v12-shade-tile);max-width: var(--v12-shade-tile);padding: 3px;border-radius: var(--v12-radius);}
  .color-options .color-photo-wrap,
  .color-options-dense .color-photo-wrap {width: 100%;}
}
@media (min-width: 1025px) and (max-width: 1399px) {
  .color-options .color-photo-button,
  .color-options-dense .color-photo-button {
    width: var(--v12-shade-tile-sm);
    min-width: var(--v12-shade-tile-sm);
    max-width: var(--v12-shade-tile-sm);
  }
  .color-options .color-photo-wrap,
  .color-options-dense .color-photo-wrap { height: calc(var(--v12-shade-tile-sm) - 10px); }
}

/* Labela ispod pločice se UKLANJA iz layouta (ne "vizuelno skriva"):
   apsolutno pozicioniran ostatak je pravio prelivanje. Ime izabrane
   nijanse i dalje stoji u zaglavlju izbora i u tooltipu dugmeta. */
.color-photo-button .color-code,
.color-photo-button .color-code-id,
.color-photo-button .color-meta { display: none; }

/* Sličice — nadjačaj specifičnije postojeće pravilo. */
.thumbs .thumb,
.product-gallery .thumbs .thumb {
  width: var(--v12-thumb);
  height: var(--v12-thumb);
  flex: 0 0 var(--v12-thumb);
  box-sizing: border-box;
}

/* Poslednja linija odbrane: nijedan potomak stranice ne sme da napravi
   horizontalno prelivanje dokumenta. */
html, body { max-width: 100%; overflow-x: hidden; }

/* ---------------------------------------------------------------------
   V120.12 — KOREKCIJA 2

   • `#thumbs .thumb` (1,1,0) je nadjačavao moj `.thumbs .thumb` (0,2,0),
     pa su sličice ostale 62px umesto 64px.
   • Galerija je bila zakucana na 596px na SVIM širinama. Mereni referentni
     odnos NIJE ravan — galerija raste po prelomima i tek na 1600+ staje na
     596. Zbog toga je informaciona kolona na 1440 bila 725px umesto ~771px,
     pa su pločice nijansi padale u 10+10+3 umesto ~12+11.

     mereno:  1280 -> 484 | 1366 -> 520 | 1440 -> 550 | 1600+ -> 596 (cap)
   --------------------------------------------------------------------- */

#thumbs .thumb,
.thumbs .thumb {
  width: var(--v12-thumb);
  height: var(--v12-thumb);
  flex: 0 0 var(--v12-thumb);
  padding: 4px;
  border-radius: var(--v12-radius);
  box-sizing: border-box;
}

/* Galerija prati merene proporcije po prelomu; iznad 1600 se ZAUSTAVLJA. */
@media (min-width: 1025px) and (max-width: 1319px) {
  :root { --v12-gallery-max: 484px; }
}
@media (min-width: 1320px) and (max-width: 1399px) {
  :root { --v12-gallery-max: 520px; }
}
@media (min-width: 1400px) and (max-width: 1559px) {
  :root { --v12-gallery-max: 550px; }
}
@media (min-width: 1560px) {
  :root { --v12-gallery-max: 596px; }
}

/* Traka sličica prati širinu galerije, ali sme da skroluje kada zatreba —
   nikada da preseče sličicu i nikada da prelije stranicu. */
.thumbs {
  max-width: var(--v12-gallery-max);
  overflow-x: auto;
  flex-wrap: wrap;
  scrollbar-width: thin;
}

/* ---------------------------------------------------------------------
   V120.12 — KOREKCIJA 3

   Naziv nijanse ispod pločice se NIJE gasio: postojeće pravilo
   `.color-options-dense .color-photo-button .color-code` ima specifičnost
   (0,3,0) i tuklo je moje (0,2,0). Apsolutno pozicioniran ostatak je zato
   i dalje bio 1425px širok i prelivao dokument (2063px).

   Napomena za kasnije: nad ovim jednim elementom stoji 40 nagomilanih
   pravila iz ranijih prolaza. Ovo je zakrpa specifičnosti, ne čišćenje.
   --------------------------------------------------------------------- */
.color-options .color-code,
.color-options .color-code-id,
.color-options .color-meta,
.color-options-dense .color-photo-button .color-code,
.color-options-dense .color-photo-button .color-code-id,
.color-options-dense .color-photo-button .color-meta {
  display: none;
}

/* Sada kada nema labele, pločica je kvadrat i mreža sme na 8px razmak. */
@media (min-width: 1025px) {
  .color-options,
  .color-options.color-options-dense {
    gap: var(--v12-thumb-gap);
    padding-right: 0;
  }
  .color-options .color-photo-button,
  .color-options-dense .color-photo-button {
    height: var(--v12-shade-tile);
  }
  .color-options .color-photo-wrap,
  .color-options-dense .color-photo-wrap {
    height: 100%;
  }
}
@media (min-width: 1025px) and (max-width: 1399px) {
  .color-options .color-photo-button,
  .color-options-dense .color-photo-button { height: var(--v12-shade-tile-sm); }
}

/* ---------------------------------------------------------------------
   V120.12 — KOREKCIJA 4

   `.color-options` je GRID, ne flex: korak mreže je diktirala postojeća
   `grid-template-columns` staza (70px), a ne širina pločice (56px). Zato
   je na 1440 stajalo 11+11+1 — tačno onaj glupi treći red sa jednom
   pločicom koji ne sme da postoji. Staza se sada vezuje za token pločice.
   --------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .color-options,
  .color-options.color-options-dense {
    grid-template-columns: repeat(auto-fill, var(--v12-shade-tile));
    justify-content: start;
  }
}
@media (min-width: 1025px) and (max-width: 1399px) {
  .color-options,
  .color-options.color-options-dense {
    grid-template-columns: repeat(auto-fill, var(--v12-shade-tile-sm));
  }
}

/* ---------------------------------------------------------------------
   V120.12 — KOREKCIJA 5

   (a) Matrica zaliha koristi `.variant-table` / `.variant-row` (pravi
       <table>), a ne `.variant-table-row` iz osnovne teme — moja pravila
       gustine iz prvog sloja se zato NISU primenila. Izmereno stanje je
       već dobro (red 44px, ćelija 14px, kolone VELIČINA/ŠIFRA/CENA/
       ZALIHA/DOLAZAK), pa se koriguje samo visina zaglavlja (28 -> ~38px)
       i horizontalni razmak ćelije. Vertikalni razmak se NE dira da red
       ostane u traženom opsegu 41-44px.

   (b) Pločice nijansi su na 1280-1399 padale u 11+11+1. Sa 52px pločicom
       i 8px razmakom 12 kolona traži 712px, a dostupno je 689px. Razmak
       kolona se zato na tim širinama spušta na 5px (12x52 + 11x5 = 679),
       čime 23 nijanse staju u 12+11 bez usamljenog trećeg reda.
   --------------------------------------------------------------------- */
.variant-table thead th {
  min-height: var(--v12-head-h);
  height: var(--v12-head-h);
  padding: 9px 14px;
  vertical-align: middle;
}
.variant-table td {
  padding: 6px 14px;
  vertical-align: middle;
}
/* Ćelija sme da prelomi, nikada da preseče. */
.variant-table th, .variant-table td { overflow-wrap: anywhere; }

@media (min-width: 1025px) and (max-width: 1399px) {
  .color-options,
  .color-options.color-options-dense { column-gap: 5px; }
}

/* ---------------------------------------------------------------------
   V120.12 — CENSUS FIX 1: matrica zaliha je horizontalno skrolovala na 1280

   Mereno: tabela 708px unutar omotača od 685px, pa je red DOLAZAK morao da
   se skroluje. Uzrok nije bila širina kolone nego `white-space:nowrap` na
   `.arrival-cell` — svaka najava je bila jedan neprelomiv niz od 158px.

   Najava se sada prelama na razmaku (količina · datum ostaju čitljivi), pa
   tabela staje u raspoloživu širinu i nema horizontalnog skrola.
   --------------------------------------------------------------------- */
.variant-table .arrival-cell,
.arrival-cell {
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  display: inline-block;
  max-width: 100%;
}

/* Tabela ne sme da bude šira od svog omotača: sa `table-layout:auto` kolone
   uzimaju max-content, pa je tabela bila 708px u omotaču od 685px. Uz
   `width:100%` i najavu koja sme da se prelomi, matrica staje bez skrola. */
.variant-table { width: 100%; max-width: 100%; }
/* max-width na <td> se u `table-layout:auto` ignoriše — min-content kolone
   diktira UNUTRAŠNJI span, pa se ograničava on. */
.variant-table .arrival-cell { max-width: 12ch; }

/* Veze i dimenzije štampe (Specifications.Id) — diskretno, bez novih boja. */
.spec-model-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.spec-model-link:hover { text-decoration-thickness: 2px; }
.spec-print-dimension dd { font-variant-numeric: tabular-nums; }

/* =====================================================================
   V120.12.2 — §1 MATRICA ZALIHA STAJE BEZ HORIZONTALNOG SKROLA

   Mereno na 1280: tabela 699px u omotaču od 685px -> manjak 14px.
   Kolone ŠIFRA/CENA/VELIČINA/DOLAZAK drže `nowrap` (šifra varijante i
   raspon cene se NE smeju lomiti), pa se manjak ne može rešiti prelamanjem
   tih ćelija.

   Rešenje bez gubitka podataka: horizontalni razmak ćelije 14px -> 12px,
   što je i dalje unutar traženog opsega 12-16px i oslobađa 20px (2 x 2 x 5).
   Tekst ostaje 14px, sekundarni 11-12px, red 41-44px — sve nepromenjeno.
   ===================================================================== */
.variant-table thead th { padding: 9px 12px; }
.variant-table td { padding: 6px 12px; }
/* Prva i poslednja kolona dobijaju spoljni razmak od okvira, ne od susedne. */
.variant-table thead th:first-child, .variant-table td:first-child { padding-left: 10px; }
.variant-table thead th:last-child, .variant-table td:last-child { padding-right: 10px; }

/* Uži razmak je smanjio i visinu reda na 31px — van prihvaćenog opsega
   41-44px. U tabelama `height` na ćeliji deluje kao MINIMALNA visina, pa
   red koji stvarno traži dva reda teksta (dve najave) i dalje sme da
   naraste. Gustina se time vraća na prihvaćenu vrednost. */
.variant-table td { height: 42px; }
.variant-table thead th { height: 38px; }

/* =====================================================================
   V120.12.2 — §2 OPIS KORISTI RASPOLOŽIVU ŠIRINU

   Sekcija je već bila puna širina (1.201px na 1280), ali je SAM PASUS imao
   `max-width: 902px` iz ranijeg prolaza za dužinu reda — otud velika prazna
   bela površina desno na vlasnikovom snimku.

   Mera se podiže na traženih ~1.100-1.250px i ograničava na 1.250px da red
   ne postane predugačak na 1920. Tipografija 15,5px / 1,55 po zahtevu.
   OPIS NIJE vezan za desnu kolonu proizvoda — čita se kao široka donja
   sekcija, u istom deljenom kontejneru kao SPECIFIKACIJE i DOKUMENTACIJA.
   ===================================================================== */
@media (min-width: 1025px) {
  #productDescription p,
  .product-description p,
  #descSection .info-content p {
    max-width: min(100%, 1250px);
    font-size: 15.5px;
    line-height: 1.55;
  }
  #productDescription,
  .product-description { max-width: 100%; }
  /* Zaglavlja donjih sekcija dele istu strukturu i poravnanje. */
  #descSection, #specSection, #docsSection { max-width: 100%; }
}

/* =====================================================================
   V120.12.2 — §4 MEGA-MENI: UKLONJENA VELIKA PRAZNA BELA POVRŠINA

   Mereno: treća kolona 448px visine sa samo 205px sadržaja => 243px
   praznine (54% kolone). Uzrok: `align-items:stretch` + visina površine
   koju diktira NAJVIŠA kolona, pa kratka G3 lista ostavlja beli blok.

   Ispravka (bez nove kartice, senke i radijusa):
     * površina ostaje JEDNA i nepromenjena;
     * kolone se skraćuju na sadržaj (`align-items:start`), pa treća
       kolona više ne pravi prazan blok;
     * separatori se crtaju na SAMOJ površini kao suptilne pune linije,
       nezavisno od visine kolone — bez raščupanih ivica;
     * kompaktnija maks. visina (470 -> 380px) drži meni sabijenim, duže
       liste i dalje skroluju.
   ===================================================================== */
@media (min-width: 701px) {
  .category-browser {
    align-items: start;
    position: relative;
  }
  .category-level { max-height: 380px; }
  /* Separator se ne oslanja na visinu kolone. */
  .category-browser > .category-level + .category-level { border-left: 0; }
  .category-browser::before,
  .category-browser::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 1px;
    background: var(--line);
    pointer-events: none;
  }
  /* Granice pratе mrežu: 250px i 250+286px (vidi grid-template-columns). */
  .category-browser::before { left: 250px; }
  .category-browser::after { left: 536px; }
}

/* `align-items:start` na mreži je izgubilo od specifičnijeg pravila, pa je
   treća kolona i dalje bila razvučena. `align-self` se postavlja po stavci. */
@media (min-width: 701px) {
  .category-browser > .category-level { align-self: start; }
}

/* =====================================================================
   V120.12.2 — §5 TABLET: PLOČICE NIJANSI SU BILE PREVELIKE

   Mereno: 84px na 1024 i 86px na 768 (desktop token je 56px). Prsti traže
   veći cilj nego miš, ali 86px je bilo nesrazmerno i mreža je delovala
   grubo. 64px je udoban dodirni cilj i vizuelno konzistentan sa trakom
   sličica. Desktop geometrija se NE dira (ovo važi samo ispod 1025px).
   ===================================================================== */
@media (max-width: 1024px) {
  .color-options,
  .color-options.color-options-dense {
    grid-template-columns: repeat(auto-fill, 64px);
    gap: 8px;
    justify-content: start;
  }
  .color-options .color-photo-button,
  .color-options-dense .color-photo-button {
    width: 64px; min-width: 64px; max-width: 64px; height: 64px;
  }
  .color-options .color-photo-wrap { height: 100%; }
}

/* Mreža nijansi na mobilnom NE sme da bude horizontalni skroler: uz
   `overflow-x:auto` roditelj nema definisanu širinu, pa `auto-fill` sa
   fiksnom stazom poređa svih 23 nijanse u JEDAN red od 1.146px (vidljivo
   10 od 23). Prelamanje je ovde upotrebljivije od bočnog skrolovanja —
   sve nijanse su vidljive bez skrola. */
@media (max-width: 1024px) {
  .color-options,
  .color-options.color-options-dense {
    overflow-x: visible;
    max-width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(56px, 64px));
    justify-content: start;
  }
}

/* Na <=700px je postojalo namerno `grid-auto-flow:column` (horizontalna
   traka nijansi u dva reda). Uz 23 nijanse to daje traku od 1.146px u kojoj
   je vidljivo 10 od 23 — kupac mora bočno da skroluje da bi uopšte video
   ponuđene boje. Tok se vraća na `row` da bi se mreža PRELAMALA i sve
   nijanse bile vidljive. */
@media (max-width: 700px) {
  .color-options,
  .color-options.color-options-dense {
    grid-auto-flow: row;
    grid-template-rows: auto;
    grid-template-columns: repeat(auto-fill, minmax(56px, 64px));
    overflow-x: visible;
  }
}

/* =====================================================================
   V120.12.2 — §1 ZAVRŠNO: tabela veličina GARANTOVANO staje

   Podešavanje razmaka i širine ćelija spustilo je manjak sa 14px na 7px,
   ali `table-layout:auto` i dalje uzima max-content, pa je ostatak zavisio
   od dužine podataka (na 1366+ je već stajalo, na 1280 nije).

   `table-layout:fixed` + `width:100%` čini širinu tabele JEDNAKOM omotaču
   po definiciji — nezavisno od sadržaja. Kolone dobijaju udele izmerene
   prema stvarnim potrebama (šifra 115px, cena 123px na 14px tekstu), a sve
   što ne stane PRELAMA se umesto da prelije. Podaci se ne gube.

   Ograničeno na tabelu veličina: tabela boja (`.color-table`) ima 4 kolone
   i zadržava automatski raspored.
   ===================================================================== */
@media (min-width: 1025px) {
.variant-table:not(.color-table) {
  table-layout: fixed;
  width: 100%;
}
.variant-table:not(.color-table) th:nth-child(1),
.variant-table:not(.color-table) td:nth-child(1) { width: 12%; }
.variant-table:not(.color-table) th:nth-child(2),
.variant-table:not(.color-table) td:nth-child(2) { width: 19%; }
.variant-table:not(.color-table) th:nth-child(3),
.variant-table:not(.color-table) td:nth-child(3) { width: 18%; }
.variant-table:not(.color-table) th:nth-child(4),
.variant-table:not(.color-table) td:nth-child(4) { width: 26%; }
.variant-table:not(.color-table) th:nth-child(5),
.variant-table:not(.color-table) td:nth-child(5) { width: 25%; }
}

/* Poslednji uzrok manjka: tabela je nosila `min-width: max-content`, što
   nadjačava `width:100%` i drži je 4px širom od omotača. Sa fiksnim
   rasporedom `min-width:0` je bezbedno — kolone imaju zadate udele, a
   sadržaj koji ne stane se prelama. */
@media (min-width: 1025px) { .variant-table:not(.color-table) { min-width: 0; } }

/* =====================================================================
   V120.12.8 — MOBILNA NAVIGACIJA: POPRAVKA IZMERENIH KVAROVA
   (audit 2026-08-29; sve izmereno u pregledaču na 375/390/430/560/700)

   1. ZAGLAVLJE na product/cart/radovi je na telefonu bilo visoko 251px u
      TRI neravna reda: logo / četiri raznorodna linka u dva pod-reda
      (visine 15–44px, na y=85..176, „Korpa" sama u svom redu) / pretraga.
      Ceo blok je lepljiv, pa je sa mobilnom trakom korpe zauzimao 39%
      ekrana 375×812. Rešenje = ISTI obrazac kao katalog (V120.11.2):
      red 1 logo + Korpa, red 2 pretraga (~128px). „Kontakt" i „Demo
      Group" ostaju dostupni u podnožju svake stranice, „← Početna"
      pokriva logotip. Nijedan link se ne uklanja sa desktopa.
   2. NOVO padajući meni je na telefonu bio position:fixed na top:130px —
      otvarao se PREKO sopstvenog dugmeta (dugme je na y≈147 ispod višeg
      prelomljenog zaglavlja) kao plutajuća kutija od 186px. Sada se
      sidri neposredno ispod dugmeta, na bilo kojoj visini zaglavlja.
   3. „Ceo katalog"/„Prikaži sve" prečica u zaglavlju koraka menija je
      bila 22px visoka — ispod svakog razumnog dodirnog cilja.
   4. Redovi koraka mobilnog menija su bili 42px; cilj je 44px.
   (Radovi hero naslov je proveren i NIJE diran: V96 blok u radovi.css
    ga već drži na 28px na telefonu.)
   ===================================================================== */
@media(max-width:700px){
  /* 1 — kompaktno zaglavlje: red 1 logo + Korpa, red 2 pretraga. */
  .header-actions .back-link,
  .header-actions .header-contact-link,
  .header-actions .group-site-header-link{display:none}
  .header-inner{gap:8px 22px}

  /* 2 — NOVO meni ispod svog dugmeta, ne preko njega. */
  .new-menu-wrap{position:relative}
  .new-menu,
  .new-menu.new-menu-compact{
    position:absolute;
    top:calc(100% + 6px);
    left:0;
    right:auto;
    width:230px;
    z-index:70;
  }

  /* 3 — dodirni cilj prečice u zaglavlju koraka menija. */
  .categories-menu .menu-all-link{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:6px 10px;
  }

  /* 4 — redovi koraka menija na pun dodirni cilj. */
  .category-browser .menu-step-button{min-height:44px}
}

/* =====================================================================
   V120.12.8b — MOBILNI MENI KATEGORIJA: FULL-BLEED + OPTIČKO CENTRIRANJE
   (vlasnikova ručna vizuelna provera, 2026-08-29)

   Vlasnik je na telefonskoj širini video beli panel „pomeren udesno":
   veliki prazan levi žleb, manji desni. Izmereni uzroci:

   1. Toolbar je bio grid `82px 1fr 44px` (linija ~49). Na koraku 1 je
      „Nazad" dugme visibility:hidden, pa je gore-levo stajala PRAZNA
      ćelija od 82px — naslovna ćelija je zbog asimetričnih bočnih kolona
      počinjala na x=105 i bila +19px desno od centra ekrana. Ceo vrh
      panela je zato čitao kao „sadržaj gurnut udesno".
   2. Pravilo `.categories-menu .category-browser{border:1px…;
      border-radius:16px;box-shadow:…}` (linija ~3022) je bez media
      opsega, pa je i FULL-SCREEN mobilni panel nosio karticu sa okvirom,
      radiusom i desktop senkom — utisak „desktop drawer-a".
   3. Levi ritam nije bio jedinstven: toolbar 14px, nivoi 10px,
      naslov nivoa +8px, redovi +12px.

   Rešenje (SAMO ≤700px; JS, taksonomija, koraci, Escape, scroll-lock i
   desktop mega-meni NEDIRNUTI):
   — panel eksplicitno full-bleed: left:0/right:0/width:100vw/max-width:none,
     bez okvira, radiusa i senke;
   — toolbar pravi 3-kolonski grid 44px/1fr/44px („Nazad" samo ← ikona,
     44px, aria-label ostaje) → naslov je matematički centriran, a prazna
     leva ćelija na koraku 1 je ogledalo desnog × dugmeta;
   — jedan unutrašnji ritam od 16px za toolbar, naslove nivoa i redove.
   ===================================================================== */
@media(max-width:700px){
  /* 1 — spoljni panel: pravi full-bleed preko celog ekrana. */
  .categories-menu{left:0;right:0;width:100vw;max-width:none;margin:0;padding:0}
  .categories-menu>.container{width:100%;max-width:none;margin:0;padding:0}
  .categories-grid{width:100%;margin:0;padding:0}
  .categories-menu .category-browser{
    width:100%;
    max-width:none;
    margin:0;
    border:0;
    border-radius:0;
    box-shadow:none;
  }

  /* 2 — toolbar: 44px / 1fr / 44px, naslov stvarno centriran. */
  .category-browser .category-mobile-toolbar{
    grid-template-columns:44px minmax(0,1fr) 44px;
    gap:8px;
    padding:13px 16px;
  }
  .category-mobile-back{width:44px;min-width:44px;padding:0}
  .category-mobile-back span{display:none}
  .category-mobile-toolbar>div{text-align:center}

  /* 3 — jedinstven unutrašnji ritam: 16px kolona sadržaja.
     Napomena: pravilo veće specifičnosti (kolonski razdelnik
     `.category-browser > .category-level + .category-level`) je i na
     mobilnom davalo border-left:1px sekundarnom/tercijarnom nivou, pa su
     redovi koraka 2/3 bili 17/16 umesto 16/16 — ovde se gasi istom
     putanjom selektora. */
  .categories-menu .category-level{padding:14px 16px 26px}
  .categories-menu .category-browser > .category-level,
  .categories-menu .category-browser > .category-level + .category-level{border:0}
  .categories-menu .category-level-heading{padding:2px 0 10px}
}

/* =====================================================================
   V120.12.8c — MOBILNI MENI: JEDNA VERTIKALNA OSA ZA BROJEVE PROIZVODA
   (vlasnikova korekcija, 2026-08-29)

   Izmereno na 375px: centri brojeva u koracima 1–2 su se rasipali od
   x=201 do x=240 (39px), jer neskopirano pravilo
   `.categories-menu .menu-step-button{display:flex;justify-content:
   space-between}` gazi osnovni grid reda — `space-between` stavlja
   <small> na sredinu razmaka iza naziva, pa pozicija broja zavisi od
   dužine naziva kategorije.

   Ispravka SAMO ≤700px: red se vraća na grid sa FIKSNOM kolonom broja
   (48px) i broj se centrira u njoj. Naziv ostaje u istoj koloni na
   istom levom rubu (x=28 na 375), ševron ostaje u svojoj 14px koloni
   na istoj poziciji (x=333), gap ostaje 8px kao u flex sloju — pomera
   se ISKLJUČIVO broj. Korak 3 (.menu-tertiary-list) se ne dira.
   ===================================================================== */
@media(max-width:700px){
  .categories-menu .category-browser .menu-step-button{
    display:grid;
    grid-template-columns:minmax(0,1fr) 48px 14px;
    gap:8px;
  }
  .categories-menu .category-browser .menu-step-button small{
    justify-self:center;
    text-align:center;
  }
}

/* =====================================================================
   V120.12.8d — USKI MOBILNI KATALOG: SADRŽAJ NE SME LEVO OD KOLONE
   (ljudski QA nalaz, 2026-08-29 — sadržaj „isečen sa leve strane")

   Izmereno na 320/375: SVE stoji na koloni x=10 (mrvice, H1, kartice),
   ali je traka rezultata („1.685 proizvoda" / „Sortiraj po") počinjala
   na x=2 — na 2px od ivice ekrana, van kolone sadržaja. Uzrok je
   NASLEĐENI DESKTOP OFSET: sticky pravilo (linija ~515) daje
   `.results-bar{margin:0 -8px;padding:…8px…}` za desktop „bleed", a
   kasniji sloj (linija ~2131) resetuje padding na `0 0 12px` i ostavlja
   SAMO negativnu marginu. Na telefonu je traka odavno position:static,
   pa bleed nema svrhu — ostaje čist pomak od -8px.

   Drugi nalaz: `.instagram-profile-link` je na ≤700 `align-self:
   flex-start` u koloni → širina mu je max-content (~286px) i na
   ekranima užim od ~305px PROBIJA viewport udesno (izmereno [18,304]
   na 280px). Uz overflow-x:hidden to je i jedini okidač koji na
   pravom telefonu može da „zaglavi" ceo dokument pomeren ulevo
   (scroll-into-view na fokus). Kapira se na 100% i pušta da se
   sadržaj prelomi.

   SAMO ≤700px; tablet (744: count x=12) i desktop (1280: x=292,
   sticky sa -8px bleed-om) ostaju bajt-isti.
   ===================================================================== */
@media(max-width:700px){
  .results-bar{margin:0}
  .instagram-profile-link{max-width:100%;flex-wrap:wrap}
}

/* V120.14.1 — linkovi kategorija: podrazumevane vrednosti dugmeta (UA) */
a:where([data-menu-category], [data-menu-subcategory], [data-menu-apply], [data-side-taxonomy], [data-taxonomy-path]) {
  color: buttontext;
  text-align: center;
  text-rendering: auto;
}