/* ENTER, predlog redizajna. Paleta iz tkanina + crvena iz oka orla u logou. */
:root {
  --paper: #ebe9e2;
  --paper-2: #e2dfd5;
  --card: #f4f3ee;
  --ink: #15160f;
  --ink-2: #26271f;
  --muted: #5f6157;
  --line: #c9c6ba;
  --line-d: #3a3b32;
  --olive: #4a4f2e;
  --coyote: #b58f5c;
  --signal: #d4442a;
  --studio: #5d5e5a;
  --wrap: 1320px;
  --gut: 24px;
  --cond: 'Archivo', system-ui, sans-serif;
  --mono: 'Archivo', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 16px/1.55 var(--cond); font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { margin: 0; font-family: var(--cond); font-stretch: 72%; font-weight: 700; line-height: .98; letter-spacing: -.005em; }
h1 { font-size: clamp(44px, 6.4vw, 92px); }
h2 { font-size: clamp(34px, 4vw, 58px); }
h3 { font-size: 22px; font-stretch: 80%; font-weight: 650; line-height: 1.1; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.mono { font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
/* gornja traka, putanja i obaveštenja: obična slova */
.topbar.mono, .crumbs.mono, .toast.mono { text-transform: none; letter-spacing: .005em; font-weight: 400; font-size: 13px; }
.crumbs.mono { font-size: 13.5px; }
.small { font-size: 14px; color: var(--muted); }
.lead { font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 38em; }
.eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.eyebrow-l { color: #a9aa9c; }
.ph { background: #ffe680; color: #3a2f00; box-shadow: 0 0 0 2px #ffe680; border-radius: 1px; }
.hide-s { }
[hidden] { display: none !important; }

/* dugmad */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px; border: 1.5px solid transparent; border-radius: 2px; font: 600 15px/1 var(--cond); font-stretch: 90%; letter-spacing: .02em; text-decoration: none; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.btn:active { transform: translateY(1px); }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-dark:hover { background: var(--olive); }
.btn-line { border-color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--paper); }
.btn-light { background: var(--paper); color: var(--ink); }
.btn-light:hover { background: #fff; }
.btn-ghost-l { border-color: #6d6e62; color: var(--paper); }
.btn-ghost-l:hover { border-color: var(--paper); }
.btn-signal { background: var(--signal); color: #fff; }
.btn-signal:hover { background: #b9361f; }
.btn-block { width: 100%; }
.link { background: none; border: 0; padding: 0; text-decoration: underline; }
.link-l { color: var(--paper); text-decoration: none; border-bottom: 1px solid #6d6e62; padding-bottom: 2px; }
.link-l:hover { border-color: var(--paper); }

/* topbar + header */
.topbar { background: var(--ink); color: #b4b5a8; }
.topbar-in { display: flex; justify-content: space-between; gap: 16px; height: 32px; align-items: center; }
.topbar a { text-decoration: none; color: var(--paper); white-space: nowrap; }
.hdr { position: sticky; top: 0; z-index: 40; background: var(--ink); color: var(--paper); border-bottom: 1px solid var(--line-d); }
.hdr-in { display: flex; align-items: center; height: 64px; gap: 32px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.logo img { width: 52px; height: auto; }
.logo span { font: 800 22px/1 var(--cond); font-stretch: 125%; letter-spacing: .12em; }
.nav { display: flex; gap: 26px; margin-right: auto; }
.nav a { text-decoration: none; font-size: 15px; font-stretch: 90%; color: #cfd0c4; padding: 22px 0; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.nav a:hover, .nav a[aria-current] { color: #fff; border-color: var(--signal); }
.hdr-act { display: flex; align-items: center; gap: 18px; }
.hdr-shop { text-decoration: none; font-weight: 600; font-stretch: 90%; padding: 9px 16px; border: 1px solid #55564b; border-radius: 2px; }
.hdr-shop:hover { border-color: var(--paper); }
.cart-btn { position: relative; background: none; border: 0; padding: 6px; display: flex; color: var(--paper); }
.cart-n { position: absolute; top: -2px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--signal); color: #fff; font-size: 10px; display: grid; place-items: center; letter-spacing: 0; transform: scale(0); transition: transform .25s; }
.cart-n.has { transform: scale(1); }
.cart-n.bump { animation: bump .4s; }
@keyframes bump { 50% { transform: scale(1.35); } }
.burger { display: none; background: none; border: 0; width: 40px; height: 40px; position: relative; }
.burger span { position: absolute; left: 9px; right: 9px; height: 1.5px; background: var(--paper); transition: transform .25s; }
.burger span:first-child { top: 15px; } .burger span:last-child { top: 23px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* hero */
.hero { border-bottom: 1px solid var(--line); }
.hero-in { display: grid; grid-template-columns: 5fr 6fr; gap: 56px; align-items: center; }
.hero-txt { padding: 72px 0; }
.hero h1 { margin-bottom: 28px; font-size: clamp(44px, 5.6vw, 84px); }
.hero h1 em { font-style: normal; color: var(--olive); }
.hero-act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-img { position: relative; margin: 0 calc(var(--gut) * -1) 0 0; height: min(84vh, 820px); min-height: 520px; overflow: hidden; background: var(--studio); }
.hero-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; opacity: 0; transform: scale(1.06); transition: opacity 1.4s ease, transform 8s linear; }
.hero-img > img.on { opacity: 1; transform: scale(1); }
.hangtag { position: absolute; z-index: 2; left: 28px; bottom: 28px; display: flex; flex-direction: column; gap: 3px; min-width: 200px; padding: 14px 20px 14px 44px; background: var(--paper); text-decoration: none;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); transform-origin: 20px 50%; filter: drop-shadow(0 8px 18px rgba(0,0,0,.3)); }
.hangtag-hole { position: absolute; left: 14px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: var(--studio); box-shadow: inset 0 1px 2px rgba(0,0,0,.7), 0 0 0 2px #d8d5ca; }
.hangtag-n { font: 700 22px/1 var(--cond); font-stretch: 75%; }
.hangtag-c { font-size: 14px; color: var(--muted); }
.hangtag-c b { color: var(--ink); font-weight: 600; }
.hangtag-n, .hangtag-c { transition: opacity .3s; }
.hangtag.out .hangtag-n, .hangtag.out .hangtag-c { opacity: 0; }
.hangtag.swing, .hangtag:hover { animation: swing 1.1s ease-out; }
@keyframes swing { 0% { transform: rotate(0); } 18% { transform: rotate(-6deg); } 42% { transform: rotate(3.5deg); } 66% { transform: rotate(-1.5deg); } 84% { transform: rotate(.6deg); } 100% { transform: rotate(0); } }
.hero-dots { position: absolute; z-index: 2; right: 24px; bottom: 30px; display: flex; gap: 6px; }
.hero-dots span { width: 26px; height: 2px; background: rgba(255,255,255,.35); position: relative; overflow: hidden; cursor: pointer; }
.hero-dots span::before { content: ""; position: absolute; inset: -10px 0; }
.hero-dots span::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.hero-dots span.on::after { animation: dot var(--dur, 6s) linear forwards; }
.hero-dots.paused span.on::after { animation-play-state: paused; }
@keyframes dot { to { transform: scaleX(1); } }

/* uzorci tkanina: cik-cak ivica kao od krojačkih makaza */
.fabrics { padding-top: 40px; padding-bottom: 8px; }
.fabrics-h { font-weight: 600; font-stretch: 85%; margin-bottom: 18px; }
.fabrics-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.fab { text-decoration: none; display: flex; flex-direction: column; gap: 4px; }
.fab-chip { --z: 9px; display: block; height: 86px; margin-bottom: 10px; background:
  linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 8px 8px,
  linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 8px 8px,
  repeating-linear-gradient(45deg, rgba(0,0,0,.07) 0 1px, transparent 1px 3px), var(--f);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--z) 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--z) 51% repeat-x;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--z) 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--z) 51% repeat-x;
  transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.fab-smooth { background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.12) 45%, rgba(255,255,255,0) 60%) 0 0 / 250% 100%, var(--f); transition: transform .45s cubic-bezier(.2,.7,.2,1), background-position 1.2s; }
.fab:hover .fab-smooth { background-position: 100% 0, 0 0; }
.fab-weave { background: repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 2px, transparent 2px 4px), repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 4px), var(--f); }
.fab:hover .fab-chip { transform: translateY(-4px) rotate(-1.2deg); }
.fab b { font-weight: 650; font-stretch: 85%; font-size: 17px; }
.fab span:last-child { font-size: 14px; color: var(--muted); line-height: 1.4; }

/* šav: isprekidana linija koja se "prošije" pri skrolu */
.seam { height: 2px; margin: -14px 0 28px; background: repeating-linear-gradient(90deg, var(--ink) 0 9px, transparent 9px 15px); }
.js .seam { clip-path: inset(0 100% 0 0); transition: clip-path 1.6s cubic-bezier(.65,.05,.25,1); }
.js .seam.in { clip-path: inset(0 0 0 0); }
/* ripstop mreža + porub sa dvostrukim šavom na tamnim sekcijama */
.ripstop { position: relative; background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px); background-size: 9px 9px; }
.ripstop::before, .ripstop::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; z-index: 1; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(235,233,226,.28) 0 7px, transparent 7px 12px); }
.ripstop::before { top: 9px; } .ripstop::after { bottom: 9px; }
/* tkana etiketa */
.label-woven { display: inline-block; font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 7px 10px; background: #f1ecdd; color: #2a2a22; border-radius: 1px; outline: 1px dashed rgba(42,42,34,.45); outline-offset: -4px; }
.feature .label-woven { margin-bottom: 18px; }
/* krojački metar */
.tape { height: 14px; margin: 4px 0 14px; background:
  linear-gradient(90deg, var(--ink) 1px, transparent 1px) 0 0 / 50px 14px repeat-x,
  linear-gradient(90deg, var(--muted) 1px, transparent 1px) 0 100% / 10px 8px repeat-x,
  linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 100% / 5px 4px repeat-x; border-bottom: 1px solid var(--ink); opacity: .8; }
.js .tape { clip-path: inset(0 100% 0 0); transition: clip-path 1.4s cubic-bezier(.65,.05,.25,1); }
.js .tape.in { clip-path: inset(0 0 0 0); }
.tape-lg { margin-top: 40px; height: 18px; background-size: 50px 18px, 10px 10px, 5px 5px; }

/* sekcije */
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 32px; }
.more { font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; white-space: nowrap; }
.more:hover { text-decoration-color: var(--signal); }
.cats, .rail, .uses, .guides, .related { padding-top: 96px; }
.guides { padding-bottom: 104px; }

/* kategorije */
.cats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cat { position: relative; display: flex; flex-direction: column; text-decoration: none; }
.cat-img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--studio); }
.cat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.cat:hover .cat-img img { transform: scale(1.04); }
.cat-t { font: 700 34px/1 var(--cond); font-stretch: 72%; margin-top: 16px; }
.cat-p { color: var(--muted); margin-top: 6px; font-size: 15px; }
.cat:hover .cat-t { color: var(--olive); }

/* tamna sekcija sa modelom */
.feature { background: var(--ink); color: var(--paper); margin-top: 104px; }
.feature-in { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.feature-img { margin: 0 0 0 calc(var(--gut) * -1); height: 100%; min-height: 640px; overflow: hidden; }
.feature-img img { width: 100%; height: 100%; object-fit: cover; }
.feature-txt { padding: 88px 0; }
.feature-txt h2 { font-size: clamp(48px, 6vw, 88px); margin-bottom: 18px; }
.feature .lead { color: #c4c5b8; }
.closeups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 32px 0 36px; }
.closeups figure { margin: 0; }
.closeups img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.closeups figure:hover img { transform: scale(1.04); }
.closeups figure > :first-child { overflow: hidden; }
.closeups figcaption { margin-top: 10px; font-size: 14px; color: #b4b5a8; line-height: 1.4; }
.closeups b { color: var(--paper); font-weight: 600; }

/* kartice proizvoda */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 16px; }
.grid-few { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); max-width: 1000px; }
.card { display: flex; flex-direction: column; }
.card-img { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--studio); }
.card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transition: opacity .35s, transform .6s cubic-bezier(.2,.7,.2,1); }
.card-img .b { opacity: 0; }
.card:hover .card-img .b { opacity: 1; }
.card:hover .card-img img { transform: scale(1.03); }
.tag { position: absolute; top: 12px; left: 12px; font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; background: var(--paper); padding: 6px 8px; border-radius: 1px; }
.tag.label-woven { padding: 7px 10px; }
.tag-sale { background: var(--signal); color: #fff; }
.card-body { padding-top: 14px; display: flex; flex-direction: column; flex: 1; }
.card-kind { color: var(--muted); margin-bottom: 4px; font-size: 11px; }
.card h3 { font-size: 26px; font-stretch: 72%; font-weight: 700; }
.card h3 a { text-decoration: none; }
.card h3 a:hover { color: var(--olive); }
.card-line { color: var(--muted); font-size: 14px; margin: 6px 0 10px; }
.card-price { font-weight: 600; margin: 0 0 12px; }
.card-price s, .buy-price s { color: var(--muted); font-weight: 400; margin-left: 6px; }
.sw-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.sw-btn { width: 26px; height: 26px; border-radius: 50%; padding: 3px; background: none; border: 1.5px solid transparent; display: grid; place-items: center; transition: border-color .2s; }
.sw-btn.on { border-color: var(--ink); }
.sw-btn:hover { border-color: var(--muted); }
.sw { width: 100%; height: 100%; border-radius: 50%; background: var(--c, #777); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); display: block; }
.camo-dark { background: radial-gradient(circle at 30% 30%, #4a4a3c 0 22%, transparent 23%), radial-gradient(circle at 72% 62%, #6b5c43 0 18%, transparent 19%), radial-gradient(circle at 40% 80%, #2c2e25 0 20%, transparent 21%), #1b1b18; }
.camo-gray { background: radial-gradient(circle at 30% 30%, #8a8b86 0 22%, transparent 23%), radial-gradient(circle at 70% 65%, #4c4d49 0 20%, transparent 21%), #6a6b66; }
.sw-n { color: var(--muted); font-size: 11px; margin-left: 6px; }
.sw-lg { width: 38px; height: 38px; }

/* upotrebe */
.uses-t { width: 100%; border-collapse: collapse; border-top: 1.5px solid var(--ink); }
.uses-t th, .uses-t td { text-align: left; vertical-align: baseline; padding: 20px 24px 20px 0; border-bottom: 1px solid var(--line); }
.uses-t th { font: 700 34px/1 var(--cond); font-stretch: 72%; width: 22%; }
.uses-t td { color: var(--ink-2); }
.uses-t td.uses-m { padding-right: 0; text-align: right; white-space: nowrap; }
.uses-t tr { transition: background .25s; }
.uses-t tr:hover { background: var(--paper-2); }
.uses-m a { display: inline-block; margin-left: 6px; font-size: 14px; font-weight: 500; text-decoration: none; padding: 6px 10px; border: 1px solid var(--line); border-radius: 2px; transition: background .2s, border-color .2s, color .2s; }
.uses-m a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* po meri */
.custom { display: grid; grid-template-columns: 5fr 6fr; gap: 72px; align-items: center; padding-top: 104px; }
.custom-img { margin: 0; position: relative; }
.custom-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; background: var(--studio); }
.custom-img figcaption { margin-top: 10px; color: var(--muted); font-size: 14px; }
.custom-txt h2 { margin-bottom: 28px; }
.custom-list { margin: 0; border-top: 1px solid var(--line); }
.custom-list div { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.custom-list dt { font-weight: 650; font-stretch: 85%; font-size: 17px; }
.custom-list dd { margin: 0; color: var(--ink-2); }
.custom-list-d { border-color: var(--line-d); margin-top: 28px; }
.custom-list-d div { border-color: var(--line-d); }
.custom-list-d dd { color: #c4c5b8; }

/* radionica */
.shop-story { background: var(--olive); color: var(--paper); margin-top: 104px; }
.story-in { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; padding-top: 88px; padding-bottom: 88px; align-items: center; }
.sign { justify-self: end; width: min(100%, 360px); padding: 28px 30px; border: 2px solid rgba(235,233,226,.8); border-radius: 6px; position: relative; text-align: center; }
.sign::before, .sign::after { content: ""; position: absolute; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: rgba(235,233,226,.6); }
.sign::before { left: 10px; } .sign::after { right: 10px; }
.sign-h { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #c9cab7; margin-bottom: 16px; }
.sign-t { font-size: 17px; margin-bottom: 14px; }
.sign-t b { display: block; font: 700 64px/1 var(--cond); font-stretch: 70%; margin-top: 4px; }
.sign-a { color: #dcdcd0; font-size: 15px; padding-top: 14px; border-top: 1px dashed rgba(235,233,226,.35); }
.sign-l { color: var(--paper); font-size: 15px; }
.story-h h2 { margin-bottom: 22px; }
.story-h p { color: #dcdcd0; max-width: 32em; }
.story-h .eyebrow-l { color: #c9cab7; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 1fr 1.3fr; gap: 20px; align-items: baseline; padding: 14px 0; border-top: 1px solid rgba(235,233,226,.25); }
.timeline b { font: 700 clamp(48px, 6vw, 84px)/1 var(--cond); font-stretch: 70%; letter-spacing: -.01em; }
.timeline span { color: #dcdcd0; }

/* vodiči */
.guides-list { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.guides-list a { display: grid; grid-template-columns: 160px 1fr; gap: 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); text-decoration: none; transition: padding .25s; }
.guides-list span { color: var(--muted); font-size: 14px; }
.guides-list b { font-size: 22px; font-stretch: 80%; font-weight: 600; }
.guides-list a:hover { padding-left: 10px; }
.guides-list a:hover b { text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 5px; }

/* traka po meri */
.strip { margin-top: 104px; margin-bottom: 104px; }
.strip-in { background: var(--ink); color: var(--paper); padding: 56px; display: grid; grid-template-columns: 1fr auto; column-gap: 48px; align-items: end; }
.strip-in .eyebrow { grid-column: 1 / -1; color: #a9aa9c; }
.strip-in h2 { font-size: clamp(30px, 3.4vw, 46px); margin-bottom: 14px; }
.strip-in p { color: #c4c5b8; margin: 0; max-width: 34em; }
.strip-in h2, .strip-in p { grid-column: 1; }
.strip-act { grid-column: 2; grid-row: 1 / span 2; align-self: end; display: flex; gap: 12px; flex-wrap: wrap; }

/* lista proizvoda */
.list-head { padding-top: 56px; padding-bottom: 28px; }
.list-head-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; }
.list-head .lead { margin: 0; font-size: 17px; }
.list-count { color: var(--muted); margin: 26px 0 0; }
.list-bar { position: sticky; top: 64px; z-index: 20; background: var(--paper); margin-bottom: 32px; }
.list-bar-in { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.list-bar-in::before { content: ""; position: absolute; left: max(var(--gut), calc((100% - var(--wrap)) / 2 + var(--gut))); right: max(var(--gut), calc((100% - var(--wrap)) / 2 + var(--gut))); top: 0; height: 1.5px; background: var(--ink); }
.list-bar::after { content: ""; position: absolute; left: max(var(--gut), calc((100% - var(--wrap)) / 2 + var(--gut))); right: max(var(--gut), calc((100% - var(--wrap)) / 2 + var(--gut))); bottom: 0; height: 1px; background: var(--line); }
.tabs { display: flex; gap: 26px; overflow-x: auto; scrollbar-width: none; }
.tabs a { text-decoration: none; font-weight: 600; font-stretch: 85%; padding: 16px 0; border-bottom: 2px solid transparent; white-space: nowrap; color: var(--muted); }
.tabs a .mono { font-size: 10px; margin-left: 3px; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current] { color: var(--ink); border-color: var(--signal); }
.list-tools { display: flex; align-items: center; gap: 20px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 5px; border: 1px solid var(--line); border-radius: 15px; background: none; font-size: 13px; transition: border-color .2s, background .2s; }
.chip .sw { width: 18px; height: 18px; flex: none; }
.chip:hover { border-color: var(--muted); }
.chip.on { border-color: var(--ink); background: var(--card); }
.sort { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.sort select { font: 500 14px var(--cond); background: transparent; border: 1px solid var(--line); border-radius: 2px; padding: 6px 8px; color: var(--ink); text-transform: none; letter-spacing: 0; }
.empty { padding: 40px 0; color: var(--muted); }

/* stranica proizvoda */
.crumbs { display: flex; gap: 10px; padding-top: 22px; padding-bottom: 22px; color: var(--muted); font-size: 11px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.pdp { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: start; }
.gal { display: grid; grid-template-columns: 76px 1fr; gap: 12px; }
.gal-main { grid-column: 2; grid-row: 1; background: var(--studio); aspect-ratio: 3 / 4; overflow: hidden; cursor: zoom-in; }
.gal-main img { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s, transform .4s; }
.gal-main.zoom { cursor: zoom-out; }
.gal-main.zoom img { transform: scale(1.8); }
.gal-main img.fade { opacity: .2; }
.gal-thumbs { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 8px; max-height: 100%; overflow-y: auto; scrollbar-width: none; }
.thumb { padding: 0; border: 1.5px solid transparent; background: var(--studio); aspect-ratio: 3 / 4; flex: none; transition: border-color .2s, opacity .2s; opacity: .65; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.on { border-color: var(--ink); opacity: 1; }
.thumb:hover { opacity: 1; }
.buy { position: sticky; top: 92px; padding-bottom: 24px; }
.buy h1 { font-size: clamp(48px, 5vw, 76px); margin-bottom: 12px; }
.buy-tag { font-size: 18px; color: var(--ink-2); }
.buy-price { font-size: 26px; font-weight: 650; font-stretch: 85%; padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.opt { margin-bottom: 22px; }
.opt-l { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; margin-bottom: 10px; }
.opt-l b { font-weight: 400; color: var(--muted); margin-left: 8px; margin-right: auto; }
.opt-l a { color: var(--muted); font-size: 11px; }
.sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.size { height: 46px; border: 1px solid var(--line); background: var(--card); border-radius: 2px; font-weight: 600; font-stretch: 90%; transition: border-color .15s, background .15s, color .15s; }
.size:hover { border-color: var(--ink); }
.size.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.opt-err { color: var(--signal); font-size: 14px; margin: 8px 0 0; }
.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.buy-hint { font-size: 14px; color: var(--muted); margin-top: 14px; }
.pdp-note { font-size: 14px; background: var(--card); border-left: 2px solid var(--signal); padding: 10px 14px; }
.buy-made { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.pdp-info { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; margin-top: 88px; border-top: 1.5px solid var(--ink); }
.pdp-block { padding: 32px 0; border-bottom: 1px solid var(--line); }
.pdp-block h2 { font-size: 32px; margin-bottom: 18px; display: flex; gap: 10px; align-items: baseline; }
.pdp-block h2 .mono { color: var(--muted); }
.pdp-intro { grid-column: 1 / -1; }
.pdp-intro p { max-width: 46em; font-size: 22px; line-height: 1.45; font-stretch: 92%; margin: 0; }
.spec { margin: 0; }
.spec div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 9px 0; border-top: 1px solid var(--line); }
.spec dt { font: 600 11px/2 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.spec dd { margin: 0; }
.table-wrap { overflow-x: auto; }
.sizes-t { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 14.5px; font-variant-numeric: tabular-nums; }
.sizes-t thead th { letter-spacing: .06em; font-weight: 600 !important; }
.sizes-t th, .sizes-t td { text-align: left; padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.sizes-t thead th { font-size: 10px; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.sizes-t tbody th { font-weight: 500; }
.sizes-t tr { transition: background .2s; }
.sizes-t tr.on { background: var(--ink); color: var(--paper); }
.sizes-t tr.on th { padding-left: 8px; }
.pdp-block .small { margin: 14px 0 0; }

/* statične stranice */
.page-head { padding-top: 72px; padding-bottom: 56px; border-bottom: 1px solid var(--line); }
.page-head h1 { max-width: 14em; margin-bottom: 24px; }
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; padding-top: 72px; align-items: start; }
.about-img { margin: 0; }
.about-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.about-txt h2 { margin-bottom: 22px; }
.about-txt > p { font-size: 17px; }
.about-txt .custom-list { margin-top: 32px; }
.ph-note { margin-top: 32px; margin-bottom: 64px; }
.steps-sec { display: grid; grid-template-columns: 2fr 1fr; gap: 24px 64px; padding-top: 72px; padding-bottom: 32px; }
.steps-h { grid-column: 1 / -1; font-size: 32px; }
.steps { list-style: none; padding: 0; margin: 0; border-top: 1.5px solid var(--ink); }
.steps li { display: grid; grid-template-columns: 60px 220px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.steps .mono { color: var(--signal); }
.steps p { margin: 0; color: var(--ink-2); }
.measure { margin: 0; color: var(--ink); align-self: start; }
.measure svg { width: 100%; max-width: 260px; }
.measure figcaption { color: var(--muted); font-size: 11px; margin-top: 10px; }
.contact { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; padding-top: 56px; padding-bottom: 104px; }
.contact-list { margin: 0; }
.contact-list div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-list dt { color: var(--muted); padding-top: 4px; }
.contact-list dd { margin: 0; font-size: 20px; font-stretch: 88%; }
.contact-list a { text-decoration: none; border-bottom: 1px solid var(--line); }
.contact-list a:hover { border-color: var(--ink); }
.map iframe { width: 100%; height: 440px; border: 0; filter: grayscale(.8) contrast(1.05); background: var(--paper-2); }
.map a { display: inline-block; margin-top: 10px; color: var(--muted); }

/* futer */
.ftr { background: var(--ink); color: #b4b5a8; padding-top: 72px; }
.ftr-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 56px; }
.ftr-grid > div { display: flex; flex-direction: column; gap: 8px; }
.ftr-grid a { text-decoration: none; color: var(--paper); width: fit-content; }
.ftr-grid a:hover { color: #fff; text-decoration: underline; }
.ftr-grid p { margin: 0; }
.ftr-brand .logo { color: var(--paper); margin-bottom: 14px; }
.ftr-brand p { max-width: 26em; font-size: 15px; }
.ftr-h { color: #7f8073; margin-bottom: 6px !important; font-size: 11px; }
.ftr-bot { display: flex; justify-content: space-between; gap: 16px; padding-top: 20px; padding-bottom: 24px; border-top: 1px solid var(--line-d); font-size: 11px; color: #7f8073; }
.ftr-bot a { color: #b4b5a8; text-decoration: none; }

/* korpa */
.drawer { position: fixed; inset: 0; z-index: 90; visibility: hidden; }
.drawer.open { visibility: visible; }
.drawer-bg { position: absolute; inset: 0; background: rgba(21,22,15,.5); opacity: 0; transition: opacity .3s; }
.drawer.open .drawer-bg { opacity: 1; }
.drawer-p { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--paper); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.drawer.open .drawer-p { transform: none; }
.drawer-h { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--line); }
.drawer-h p { margin: 0; }
.x { background: none; border: 0; font-size: 28px; line-height: 1; padding: 0 4px; }
.drawer-items { flex: 1; overflow-y: auto; padding: 8px 24px; }
.drawer-empty { color: var(--muted); padding: 32px 0; }
.ci { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: start; }
.ci img { width: 64px; height: 84px; object-fit: cover; background: var(--studio); }
.ci b { font-stretch: 85%; font-size: 17px; display: block; }
.ci .mono { color: var(--muted); font-size: 11px; }
.ci-q { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ci-q button { width: 26px; height: 26px; border: 1px solid var(--line); background: none; border-radius: 2px; line-height: 1; }
.ci-p { font-weight: 600; white-space: nowrap; }
.ci-rm { background: none; border: 0; color: var(--muted); font-size: 12px; text-decoration: underline; padding: 0; margin-top: 8px; display: block; }
.drawer-f { padding: 20px 24px 24px; border-top: 1px solid var(--line); }
.drawer-sum { display: flex; justify-content: space-between; font-size: 18px; margin-bottom: 4px; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 95; transform: translate(-50%, 20px); opacity: 0; background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 2px; transition: opacity .25s, transform .25s; pointer-events: none; font-size: 12px; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* odgovor */
@media (max-width: 1100px) {
  .nav { gap: 18px; }
  .nav a { font-size: 14px; }
  .grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  :root { --gut: 20px; }
  .burger { display: block; }
  .hide-s { display: none; }
  .nav { position: fixed; top: 96px; left: 0; right: 0; bottom: 0; background: var(--ink); flex-direction: column; gap: 0; padding: 12px var(--gut) 40px; transform: translateX(100%); transition: transform .3s; overflow-y: auto; }
  .nav.open { transform: none; }
  .nav a { font: 700 34px/1 var(--cond); font-stretch: 72%; padding: 18px 0; border-bottom: 1px solid var(--line-d); color: var(--paper); }
  .hdr-in { justify-content: space-between; }
  .hero-in { grid-template-columns: 1fr; gap: 0; }
  .hero-txt { padding: 48px 0 36px; }
  .hero-img { margin: 0 calc(var(--gut) * -1); height: 72vh; min-height: 440px; }
  .fabrics-row { grid-template-columns: repeat(5, 150px); overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gut) * -1); padding: 6px var(--gut) 4px; }
  .sign { justify-self: start; }
  .uses-t, .uses-t tbody, .uses-t tr, .uses-t th, .uses-t td { display: block; width: auto; }
  .uses-t tr { padding: 18px 0; border-bottom: 1px solid var(--line); }
  .uses-t th, .uses-t td { border: 0; padding: 0 0 8px; }
  .uses-t td.uses-m { text-align: left; white-space: normal; padding-top: 4px; }
  .uses-m a { margin: 0 6px 6px 0; }
  .cats-grid { grid-template-columns: 1fr 1fr; }
  .cats-grid .cat:first-child { grid-column: 1 / -1; }
  .cats-grid .cat:first-child .cat-img { aspect-ratio: 16 / 10; }
  .cats-grid .cat:first-child .cat-img img { object-position: 50% 35%; }
  .feature-in, .custom, .story-in, .about, .contact, .list-head-row, .pdp, .pdp-info, .steps-sec { grid-template-columns: 1fr; }
  .feature-in { gap: 0; }
  .feature-img { margin: 0 calc(var(--gut) * -1); min-height: 0; height: 70vh; }
  .feature-txt { padding: 56px 0 64px; }
  .custom { gap: 36px; }
  .story-in { gap: 40px; padding-top: 64px; padding-bottom: 64px; }
  .list-head-row { gap: 16px; }
  .list-bar { position: relative; }
  .list-tools { width: 100%; justify-content: space-between; padding-bottom: 14px; flex-wrap: wrap; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .chip { flex: none; }
  .pdp { gap: 28px; }
  .buy { position: static; }
  .gal { grid-template-columns: 1fr; }
  .gal-main { grid-column: 1; margin: 0 calc(var(--gut) * -1); }
  .gal-thumbs { grid-column: 1; grid-row: 2; flex-direction: row; overflow-x: auto; }
  .thumb { width: 64px; }
  .pdp-info { margin-top: 56px; }
  .strip-in { grid-template-columns: 1fr; padding: 40px 28px; }
  .strip-act { grid-column: 1; grid-row: auto; margin-top: 24px; }
  .steps li { grid-template-columns: 40px 1fr; }
  .steps li p { grid-column: 2; }
  .measure { max-width: 240px; }
  .ftr-grid { grid-template-columns: 1fr 1fr; }
  .ftr-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  :root { --gut: 16px; }
  body { font-size: 15px; }
  .lead { font-size: 17px; }
  .topbar-in span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hero-act .btn { flex: 1; padding: 0 16px; }
  .hangtag { left: 16px; bottom: 16px; min-width: 0; }
  .hero-dots { right: 16px; bottom: 22px; }
  .closeups { gap: 8px; }
  .closeups figcaption { font-size: 13px; }
  .grid { grid-template-columns: 1fr 1fr; gap: 28px 10px; }
  .card h3 { font-size: 22px; }
  .card-line { font-size: 13px; }
  .cats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cat-t { font-size: 26px; }
  .cat-p { font-size: 14px; }
  .custom-list div, .spec div, .contact-list div { grid-template-columns: 1fr; gap: 4px; }
  .timeline li { grid-template-columns: 1fr; gap: 4px; }
  .guides-list a { grid-template-columns: 1fr; gap: 2px; }
  .guides-list b { font-size: 19px; }
  .cats, .rail, .uses, .guides, .related { padding-top: 72px; }
  .feature, .shop-story, .strip { margin-top: 72px; }
  .custom { padding-top: 72px; }
  .strip { margin-bottom: 72px; padding: 0; }
  .strip-in { padding: 36px 16px; }
  .sec-head { margin-bottom: 22px; }
  .ftr-grid { grid-template-columns: 1fr; }
  .ftr-bot { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* dugme posle dodavanja: šav uokviri dugme */
.btn-signal.added { background: var(--ink); outline: 1px dashed rgba(235,233,226,.7); outline-offset: -6px; }

/* izbor boje: isečci prave tkanine */
.sw { background-size: cover; background-position: center; }
.fabric-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.fo { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 0; background: none; border: 0; width: 72px; }
.fo-img { display: block; width: 72px; height: 72px; border-radius: 2px; background: var(--c) center / cover; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
  outline: 1.5px solid transparent; outline-offset: 3px; transition: outline-color .2s, transform .35s cubic-bezier(.2,.7,.2,1), background-size .5s; background-size: 130%; }
.fo:hover .fo-img { transform: translateY(-2px); background-size: 150%; }
.fo.on .fo-img { outline-color: var(--ink); }
.fo-l { font-size: 12px; line-height: 1.2; color: var(--muted); text-align: center; }
.fo.on .fo-l { color: var(--ink); font-weight: 600; }
.fab-zoom { display: flex; gap: 16px; align-items: center; margin: 0 0 18px; }
.fab-zoom-img { flex: none; width: 112px; height: 112px; background: #3a3b35 center / cover; transition: opacity .2s; border-radius: 2px;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 8px 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 8px 51% repeat-x;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 8px 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 8px 51% repeat-x; }
.fab-zoom-img.swap { opacity: .15; }
.fab-zoom figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--muted); }
.fab-zoom b { font-size: 17px; font-stretch: 85%; color: var(--ink); }

/* razmak pre futera na stranici proizvoda */
.related { padding-bottom: 112px; }

/* o firmi: tkana etiketa brenda */
.story-in { grid-template-columns: 1.2fr 1fr; align-items: center; }
.story-h p { color: #dcdcd0; max-width: 34em; }
.story-dl { margin: 28px 0 26px; border-top: 1px solid rgba(235,233,226,.22); max-width: 34em; }
.story-dl div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(235,233,226,.22); }
.story-dl dt { font: 600 11px/2 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: #c2c3b0; }
.story-dl dd { margin: 0; }
.story-dl a { color: var(--paper); text-decoration: none; }
.story-links { display: flex; gap: 24px; }
.label-stage { display: grid; place-items: center; min-height: 360px; perspective: 900px; }
.brand-label { position: relative; width: min(100%, 400px); padding: 36px 52px 30px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: #23241c;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.25) 0 1px, transparent 1px 2px),
    #eee8d7;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 18px 40px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.2);
  transform: rotate(-4deg); transition: transform .8s cubic-bezier(.2,.7,.2,1); }
/* presavijeni krajevi koji se ušivaju u šav */
.brand-label::before, .brand-label::after { content: ""; position: absolute; top: 0; bottom: 0; width: 22px; background: linear-gradient(90deg, rgba(0,0,0,.12), rgba(0,0,0,0)); }
.brand-label::before { left: 0; border-right: 1.5px dashed rgba(35,36,28,.45); }
.brand-label::after { right: 0; transform: scaleX(-1); border-right: 1.5px dashed rgba(35,36,28,.45); }
.brand-label img { width: 116px; height: auto; margin-bottom: 2px; }
.brand-label b { font: 800 50px/1 var(--cond); font-stretch: 125%; letter-spacing: .16em; margin-right: -.16em; }
.bl-line { font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.bl-meta { display: flex; gap: 14px; font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #6a6b5c; padding-top: 10px; margin-top: 4px; border-top: 1px solid rgba(35,36,28,.25); }
.bl-meta i { font-style: normal; }
.label-stage:hover .brand-label { transform: rotate(-1.5deg) translateY(-4px); }
@media (max-width: 960px) {
  .story-in { grid-template-columns: 1fr; }
  .label-stage { min-height: 0; padding: 12px 0 8px; }
  .fab-zoom-img { width: 88px; height: 88px; }
}
@media (max-width: 640px) {
  .story-dl div { grid-template-columns: 1fr; gap: 2px; }
  .fo, .fo-img { width: 60px; } .fo-img { height: 60px; }
}

/* ---------- WordPress / WooCommerce ---------- */
.cats-grid { grid-template-columns: repeat(var(--n, 3), 1fr); }
.cart-btn { text-decoration: none; }
.size.off { color: #a3a49a; background: transparent; border-style: dashed; cursor: not-allowed; text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
.fo[data-out] .fo-img { opacity: .45; }
.drawer-cart { display: block; text-align: center; margin-top: 12px; font-size: 14px; color: var(--muted); }
.ci b a { text-decoration: none; }
.ci-q button:disabled, .ci-rm:disabled { opacity: .4; }
.ph-gap { height: 104px; }
.page-head-sm { padding-top: 48px; padding-bottom: 28px; }
.page-body { padding-top: 40px; padding-bottom: 104px; }
.prose { font-size: 17px; line-height: 1.65; }
.prose > * { max-width: 44rem; }
.prose h2 { font-size: clamp(28px, 3vw, 40px); margin: 1.6em 0 .5em; }
.prose h3 { font-size: 24px; margin: 1.4em 0 .4em; }
.prose a { text-decoration-color: var(--signal); text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose img { height: auto; }
.about-txt.prose > * { max-width: none; }
.steps-body h2:first-child { margin-top: 0; }
.post { padding-top: 8px; padding-bottom: 72px; }
.post h1 { max-width: 16em; font-size: clamp(38px, 5vw, 68px); margin-bottom: 36px; }
.post-body { border-top: 1.5px solid var(--ink); padding-top: 32px; }
.blog-list { padding-top: 40px; padding-bottom: 104px; }
.pager { margin-top: 32px; }
.pager .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.pager .page-numbers { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--line); text-decoration: none; border-radius: 2px; }
.pager .page-numbers.current { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }

/* WooCommerce poruke */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { list-style: none; margin: 0 0 24px; padding: 14px 18px; background: var(--card); border-left: 2px solid var(--olive); font-size: 15px; }
.woocommerce-error { border-color: var(--signal); }
.wc-page .button, .wc-page button.button, .wc-page input.button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border: 0; border-radius: 2px; background: var(--ink); color: var(--paper); font: 600 15px/1 var(--cond); text-decoration: none; cursor: pointer; }
.wc-page .button:hover { background: var(--olive); }
.wc-page input[type=text], .wc-page input[type=email], .wc-page input[type=tel], .wc-page input[type=password], .wc-page textarea, .wc-page select { font: inherit; padding: 10px 12px; border: 1px solid var(--line); background: #fff; border-radius: 2px; width: 100%; }
.wc-page table.shop_table { width: 100%; border-collapse: collapse; }
.wc-page table.shop_table th, .wc-page table.shop_table td { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--line); }

/* WooCommerce blokovi: korpa i plaćanje u bojama teme */
.wc-page { --wp--preset--color--contrast: var(--ink); }
.wc-page .wc-block-components-button:not(.is-link), .wc-page .wc-block-cart__submit-button, .wc-page .wc-block-components-checkout-place-order-button {
  background: var(--signal) !important; color: #fff !important; border-radius: 2px !important; min-height: 52px; font: 600 16px/1 var(--cond) !important; border: 0 !important; }
.wc-page .wc-block-components-button:not(.is-link):hover { background: #b9361f !important; }
.wc-page .wc-block-components-text-input input, .wc-page .wc-block-components-combobox input, .wc-page .wc-blocks-components-select__select, .wc-page .wc-block-components-textarea { border-radius: 2px !important; border-color: var(--line) !important; background: #fff !important; }
.wc-page .wc-block-components-title, .wc-page .wc-block-components-checkout-step__title { font-family: var(--cond) !important; font-stretch: 80%; font-weight: 700 !important; }
.wc-page .wc-block-components-product-name { font-weight: 600; text-decoration: none; color: var(--ink); }
.wc-page .wc-block-components-totals-item__value, .wc-page .wc-block-components-product-price { font-weight: 600; }
.wc-page .wc-block-components-sidebar-layout .wc-block-components-main, .wc-page .wc-block-components-sidebar { padding-top: 8px; }
.wc-page .wc-block-components-panel, .wc-page .wc-block-components-totals-wrapper { border-color: var(--line) !important; }
.wc-page .wc-block-components-radio-control__option { border-radius: 2px !important; }
.wc-page > * { max-width: none; }
@media (max-width: 960px) {
  .cats-grid { grid-template-columns: 1fr 1fr; }
}
.woocommerce-order h2, .woocommerce-order-details h2, .woocommerce-customer-details h2 { font-size: 30px; margin: 40px 0 14px; }
.woocommerce-order-overview { padding-left: 1.1em; line-height: 1.9; }
.woocommerce-customer-details address { font-style: normal; line-height: 1.7; }

/* ---------- stranice od blokova ---------- */
/* standardni blokovi (tekst) idu u kolonu poravnatu sa sadržajem, ENTER blokovi (section) su pune širine */
.blocks > :not(section):not(.wp-block-woocommerce-cart):not(.wp-block-woocommerce-checkout) {
  width: min(100% - 2 * var(--gut), 46rem);
  margin-left: max(var(--gut), calc((100% - var(--wrap)) / 2 + var(--gut)));
  font-size: 17px; line-height: 1.65;
}
.blocks > h2 { font-size: clamp(28px, 3vw, 40px); margin-top: 1.6em; margin-bottom: .5em; }
.blocks > h3 { font-size: 24px; margin-top: 1.4em; margin-bottom: .4em; }
.blocks > section + :not(section) { margin-top: 64px; }
.blocks > :not(section):last-child { margin-bottom: 104px; }
.blocks > section:last-child.page-head, .blocks > section:last-child.wrap:not(.strip):not(.guides):not(.contact) { padding-bottom: 104px; }
.blocks a { text-decoration-color: var(--signal); text-underline-offset: 3px; }
.blocks .wp-block-image img { height: auto; }
.custom-rev .custom-img { order: 2; }
.custom-noimg { grid-template-columns: 1fr; }
.custom-noimg .custom-txt { max-width: 46rem; }
.custom-body > :last-child { margin-bottom: 0; }
.custom-body .lead { margin-bottom: 1em; }
.feature-noimg { grid-template-columns: 1fr; }
.feature-noimg .feature-txt { max-width: 46rem; }
.steps-body ol { padding-left: 1.2em; }
.steps-body li { margin-bottom: .7em; }
.post-body > * { max-width: 46rem; }
.post-body h2 { font-size: clamp(26px, 2.6vw, 36px); margin: 1.4em 0 .5em; }
.post-body h3 { font-size: 22px; margin: 1.3em 0 .4em; }
.post-body figure { margin: 28px 0; }
@media (max-width: 960px) {
  .custom-rev .custom-img { order: 0; }
}

/* mere izabrane veličine, ispod dugmića */
.guide-link { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; color: var(--ink) !important; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.guide-link:hover { text-decoration-color: var(--signal); }
.size-fit { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 12px 0 0; padding: 12px 14px; background: var(--card); border-left: 2px solid var(--ink); font-size: 14px; color: var(--muted); }
.size-fit b { font: 700 20px/1 var(--cond); font-stretch: 80%; color: var(--ink); margin-right: 4px; }
.size-fit i { font-style: normal; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.size-fit em { font-style: normal; font-size: 12px; }
.size-fit.pop { animation: fitIn .35s ease-out; }
@keyframes fitIn { from { opacity: 0; transform: translateY(-4px); } }

/* panel sa tabelom mera */
.drawer-guide .drawer-p { width: min(520px, 100%); }
.guide-body { flex: 1; overflow-y: auto; padding: 20px 24px 32px; }
.guide-hint { font-size: 14px; color: var(--muted); margin-bottom: 12px; }
.guide-t tbody tr { cursor: pointer; }
.guide-t tbody tr:hover { background: var(--paper-2); }
.guide-t tbody tr.off { color: #a3a49a; cursor: not-allowed; }
.guide-t tbody tr.off th { text-decoration: line-through; }
.guide-t tbody tr.on { background: var(--ink); color: var(--paper); }
.guide-t tbody tr.on th { padding-left: 8px; }
.guide-how { display: grid; grid-template-columns: 90px 1fr; gap: 6px 18px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; }
.guide-how svg { grid-row: span 2; width: 90px; color: var(--ink); }
.guide-how p { margin: 0; }

/* mini korpa posle dodavanja */
.drawer-added { margin: 0 auto 0 14px !important; font-size: 13px; font-weight: 600; color: var(--olive); display: flex; align-items: center; gap: 6px; }
.drawer-added::before { content: ""; width: 14px; height: 8px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translateY(-2px); }
.ci-new { position: relative; animation: ciIn .6s ease-out; }
.ci-new::before { content: ""; position: absolute; left: -24px; top: 0; bottom: -1px; width: 3px; background: var(--signal); }
@keyframes ciIn { from { background: #f6e6c8; } }
.drawer-links { display: flex; justify-content: space-between; margin-top: 14px; font-size: 14px; }
.drawer-links a, .drawer-links .link { color: var(--muted); }
.admin-bar .drawer-p { top: 32px; }
@media (max-width: 782px) { .admin-bar .drawer-p { top: 46px; } }

/* ---------- forma za upit ---------- */
.inquiry { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; padding-top: 96px; padding-bottom: 32px; align-items: start; }
.inquiry-h h2 { margin-bottom: 18px; }
.inquiry-h p { color: var(--ink-2); max-width: 30em; }
.inquiry-direct { font-size: 15px; color: var(--muted) !important; }
.inquiry-direct a { color: var(--ink); }
.inquiry-f { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; padding: 28px; background: var(--card); border: 1px solid var(--line); position: relative; }
.inquiry-f::before { content: ""; position: absolute; inset: 6px; border: 1px dashed rgba(21,22,15,.18); pointer-events: none; }
.fld { display: flex; flex-direction: column; gap: 6px; position: relative; }
.fld span { font: 600 11px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.fld input, .fld textarea { font: inherit; font-size: 16px; padding: 12px 12px; border: 1px solid var(--line); border-radius: 2px; background: #fff; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(21,22,15,.08); }
.fld-wide { grid-column: 1 / -1; }
.inquiry-act { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; position: relative; }
.inquiry-act small { color: var(--muted); font-size: 13px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.inquiry-ok { padding: 28px; background: var(--card); border-left: 3px solid var(--olive); font-size: 17px; }
.inquiry-err { grid-column: 1 / -1; color: var(--signal); margin: 0; font-size: 15px; }

/* ---------- kako izmeriti ---------- */
.measure-guide { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; padding-top: 96px; align-items: center; }
.mg-txt h2 { margin-bottom: 14px; }
.mg-list { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1.5px solid var(--ink); counter-reset: mg; }
.mg-list li { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 14px 10px 14px 0; border-bottom: 1px solid var(--line); cursor: default; transition: background .2s, padding .2s; outline: none; }
.mg-list li b { font-weight: 650; font-stretch: 85%; font-size: 17px; display: flex; align-items: center; gap: 10px; }
.mg-list li b::before { content: ""; width: 14px; height: 2px; background: var(--line); transition: background .2s, width .2s; }
.mg-list li span { color: var(--ink-2); font-size: 15px; }
.mg-list li.on { background: var(--card); padding-left: 10px; }
.mg-list li.on b::before { background: var(--signal); width: 22px; }
.mg-fig { margin: 0; color: var(--ink); background: var(--card); padding: 28px; border: 1px solid var(--line); }
.mg-fig svg { width: 100%; max-height: 440px; }
.mg-line { stroke: var(--line); stroke-width: 1.5; fill: none; stroke-dasharray: 5 4; transition: stroke .25s, stroke-width .25s; }
.mg-line.on { stroke: var(--signal); stroke-width: 3; stroke-dasharray: none; }

/* ---------- česta pitanja ---------- */
.faq { padding-top: 96px; display: grid; grid-template-columns: 1fr 1.6fr; gap: 56px; align-items: start; }
.faq-list { border-top: 1.5px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; position: relative; font-weight: 600; font-stretch: 88%; font-size: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -8px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq summary:hover { color: var(--olive); }
.faq-a { padding: 0 40px 18px 0; color: var(--ink-2); }
.faq-a p { margin: 0 0 .7em; }

/* ---------- kontakt ---------- */
.contact2 { padding-top: 24px; }
.contact-cols { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1.5px solid var(--ink); }
.cc { padding: 28px 28px 36px 0; }
.cc + .cc { padding-left: 28px; border-left: 1px solid var(--line); }
.cc-h { font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--signal); margin-bottom: 18px; }
.cc-big { display: block; font: 700 clamp(34px, 3.6vw, 52px)/1 var(--cond); font-stretch: 72%; text-decoration: none; margin-bottom: 14px; }
.cc-big:hover { color: var(--olive); }
.cc-mail { display: block; font-size: 19px; font-weight: 600; font-stretch: 90%; text-decoration: none; border-bottom: 1px solid var(--line); width: fit-content; margin-top: 6px; }
.cc-mail:hover { border-color: var(--ink); }
.cc p { color: var(--muted); font-size: 15px; margin: 6px 0 14px; }
.cc-addr { color: var(--ink) !important; font-size: 19px !important; font-weight: 600; font-stretch: 90%; line-height: 1.35; }
.contact-map { position: relative; height: 520px; margin-top: 24px; background: var(--paper-2); }
.contact-map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.85) contrast(1.05); }
.map-ph { height: 100%; display: grid; place-items: center; color: var(--muted); }
.map-over { position: absolute; left: 0; right: 0; bottom: 32px; pointer-events: none; }
.sign-light { background: var(--ink); color: var(--paper); border-color: var(--ink); justify-self: start; pointer-events: auto; box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.sign-light::before, .sign-light::after { background: rgba(235,233,226,.5); }
.contact2 + .inquiry { padding-top: 88px; }
.blocks > section.inquiry:last-child, .blocks > section.faq:last-child { padding-bottom: 104px; }

@media (max-width: 960px) {
  .inquiry, .measure-guide, .faq { grid-template-columns: 1fr; gap: 28px; }
  .contact-cols { grid-template-columns: 1fr; }
  .cc, .cc + .cc { padding: 24px 0; border-left: 0; }
  .cc + .cc { border-top: 1px solid var(--line); }
  .contact-map { height: 420px; }
}
@media (max-width: 640px) {
  .inquiry-f { grid-template-columns: 1fr; padding: 20px; }
  .mg-list li { grid-template-columns: 1fr; gap: 4px; }
  .inquiry, .measure-guide, .faq { padding-top: 72px; }
}

/* galerija (standardni blok) preko cele širine sadržaja */
.blocks > .wp-block-gallery { width: auto !important; margin-right: max(var(--gut), calc((100% - var(--wrap)) / 2 + var(--gut))) !important; display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 12px !important; }
.blocks > .wp-block-gallery .wp-block-image { width: auto !important; margin: 0 !important; aspect-ratio: 1; overflow: hidden; }
.blocks > .wp-block-gallery img { width: 100%; height: 100% !important; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.blocks > .wp-block-gallery .wp-block-image:hover img { transform: scale(1.04); }
.blocks > h2 + .wp-block-gallery { margin-top: 20px; }
@media (max-width: 640px) { .blocks > .wp-block-gallery { grid-template-columns: 1fr 1fr; } }

/* ---------- isporuka: red ispod dugmeta ---------- */
.ship-line { display: flex; align-items: center; gap: 9px; margin: 12px 0 0; font-size: 14px; color: var(--ink-2); }
.ship-line svg { flex: none; color: var(--olive); }

/* ---------- isporuka i plaćanje: poštanska nalepnica ---------- */
.pdp-ship { grid-column: 1 / -1; }
.parcel { position: relative; background: #f7f5ef; border: 1px solid var(--line); padding: 0 0 4px; box-shadow: 0 1px 0 rgba(0,0,0,.03); }
.parcel::before { content: ""; position: absolute; inset: 7px; border: 1.5px dashed rgba(21,22,15,.22); pointer-events: none; }
.parcel-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 26px; border-bottom: 1.5px solid var(--ink); margin: 7px 7px 0; }
.parcel-from { font: 600 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.parcel-code { font: 600 13px/1 var(--mono); letter-spacing: .12em; padding: 6px 0 6px 64px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 13px) left center / 56px 22px no-repeat; }
.parcel-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; margin: 0 7px; }
.pc { padding: 22px 26px 24px; }
.pc + .pc { border-left: 1px solid var(--line); }
.pc-h { font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--signal); margin-bottom: 12px; }
.pc p { font-size: 15px; color: var(--ink-2); margin: 0 0 8px; }
.pc-big { font: 700 32px/1 var(--cond) !important; font-stretch: 72% !important; color: var(--ink) !important; margin-bottom: 10px !important; }
.pc-date { margin-top: 14px !important; padding-top: 12px; border-top: 1px dashed var(--line); }
.pc-date b { color: var(--olive); }
.pc-list { list-style: none; margin: 0; padding: 0; }
.pc-list li { font-size: 15px; padding: 3px 0 3px 20px; position: relative; }
.pc-list li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 9px; height: 5px; border-left: 1.5px solid var(--olive); border-bottom: 1.5px solid var(--olive); transform: rotate(-45deg); }
.pc-link { font-size: 15px; font-weight: 600; color: var(--ink); }
@media (max-width: 1100px) { .parcel-grid { grid-template-columns: 1fr 1fr; } .pc:nth-child(3) { border-left: 0; } .pc:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 640px) { .parcel-grid { grid-template-columns: 1fr; } .pc + .pc { border-left: 0; border-top: 1px solid var(--line); } .parcel-top { flex-direction: column; align-items: flex-start; } .pc { padding: 18px 20px; } }
.pc-lead { color: var(--ink) !important; font-weight: 500; }
.pc-big { font-size: 28px !important; }

/* ---------- vodiči ---------- */
.blog-head { border-bottom: 0; padding-bottom: 28px; }
.blog-list { padding-top: 8px; padding-bottom: 32px; }
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 24px; }
.pcard { display: flex; flex-direction: column; }
.pcard-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2); }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.pcard:hover .pcard-img img { transform: scale(1.04); }
.pcard-ph { display: block; width: 100%; height: 100%; background: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 9px 9px, linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 9px 9px, var(--olive); }
.pcard-body { padding-top: 16px; display: flex; flex-direction: column; flex: 1; }
.pcard-topic { color: var(--signal); text-decoration: none; margin-bottom: 8px; width: fit-content; }
.pcard-topic:hover { text-decoration: underline; }
.pcard h3 { font-size: 23px; font-stretch: 80%; font-weight: 650; line-height: 1.15; margin-bottom: 10px; }
.pcard h3 a { text-decoration: none; }
.pcard h3 a:hover { color: var(--olive); }
.pcard-ex { color: var(--ink-2); font-size: 15px; margin-bottom: 12px; }
.pcard-meta { margin-top: auto; color: var(--muted); font-size: 13px; margin-bottom: 0; padding-top: 10px; border-top: 1px solid var(--line); }
.pcard-big { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; margin-bottom: 64px; padding-bottom: 56px; border-bottom: 1.5px solid var(--ink); }
.pcard-big .pcard-img { aspect-ratio: 16 / 10; }
.pcard-big h3 { font-size: clamp(32px, 3.4vw, 50px); font-stretch: 72%; font-weight: 700; line-height: 1; margin-bottom: 16px; }
.pcard-big .pcard-ex { font-size: 17px; }
.pcard-big .pcard-meta { margin-top: 8px; border: 0; padding: 0; }
.guides .pgrid { margin-top: 4px; }
/* tekst */
.post { padding-bottom: 24px; }
.post-head { padding-top: 8px; padding-bottom: 32px; max-width: calc(46rem + 2 * var(--gut)); margin: 0 auto; }
.post-head h1 { font-size: clamp(38px, 5vw, 64px); max-width: none; margin: 8px 0 18px; }
.post-meta { color: var(--muted); font-size: 14px; margin: 0; }
.post-hero { margin: 0 auto 48px; }
.post-hero img { width: 100%; max-height: 640px; object-fit: cover; aspect-ratio: 16 / 9; }
.post-body { max-width: 46rem; margin: 0 auto; padding: 0 var(--gut); border-top: 0; }
.post-body > * { max-width: none; }
.post-body p:first-of-type { font-size: 20px; line-height: 1.55; color: var(--ink); }
.post-body h2 { padding-top: 12px; border-top: 1px solid var(--line); }
.post-models { padding-top: 88px; }
.post-related { padding-top: 88px; }
.post-related .pgrid, .post-models .grid { margin-top: 4px; }
@media (max-width: 960px) {
  .pgrid { grid-template-columns: 1fr 1fr; }
  .pcard-big { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 640px) {
  .pgrid { grid-template-columns: 1fr; gap: 32px; }
  .post-body p:first-of-type { font-size: 18px; }
}
.post-page .post-head { padding-top: 56px; }

/* ---------- korpa: krupnija slova + preporuke ---------- */
.drawer-p { width: min(460px, 100%); }
.drawer-h p.mono { font-size: 13px; }
.ci { grid-template-columns: 76px 1fr auto; gap: 16px; padding: 18px 0; }
.ci img { width: 76px; height: 100px; }
.ci b { font-size: 20px; line-height: 1.15; }
.ci .mono { font-size: 12.5px; display: block; margin-top: 4px; }
.ci-q { gap: 10px; margin-top: 10px; font-size: 16px; }
.ci-q button { width: 32px; height: 32px; font-size: 17px; }
.ci-p { font-size: 17px; }
.ci-rm { font-size: 13.5px; }
.drawer-sum { font-size: 21px; }
.drawer-f .small { font-size: 14px; }
.drawer-links { font-size: 15px; }
.cs { margin-top: 22px; padding-top: 18px; border-top: 1.5px solid var(--ink); }
.cs-h { font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.cs-item { display: grid; grid-template-columns: 60px 1fr 32px; gap: 14px; align-items: center; padding: 10px; margin: 0 -10px; text-decoration: none; border-radius: 2px; transition: background .2s; }
.cs-item:hover { background: var(--card); }
.cs-item img { width: 60px; height: 76px; object-fit: cover; background: var(--studio); }
.cs-item b { display: block; font-size: 17px; font-stretch: 85%; }
.cs-item small { display: block; font-size: 13px; color: var(--muted); margin: 2px 0 4px; line-height: 1.3; }
.cs-item i { font-style: normal; font-weight: 600; font-size: 15px; }
.cs-item em { font-style: normal; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 18px; transition: background .2s, color .2s, border-color .2s; }
.cs-item:hover em { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* stranica korpe i plaćanja: veća slova u WooCommerce blokovima */
.wc-page { font-size: 17px; }
.wc-page .wc-block-components-product-name { font-size: 19px !important; }
.wc-page .wc-block-components-product-metadata, .wc-page .wc-block-components-product-details { font-size: 15px !important; }
.wc-page .wc-block-components-totals-item { font-size: 16px; }
.wc-page .wc-block-components-totals-footer-item { font-size: 20px; }
.wc-page .wc-block-cart-items th { font-size: 12px; letter-spacing: .06em; }
.wc-page .wc-block-components-quantity-selector input { font-size: 16px; }
.cart-cross { padding-top: 64px; }

/* ---------- deljenje i poređenje na proizvodu ---------- */
.buy-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.tool-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--line); border-radius: 2px; padding: 8px 12px; font-size: 14px; font-weight: 600; transition: border-color .2s, background .2s, color .2s; }
.tool-btn:hover { border-color: var(--ink); }
.tool-btn.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.share-l { font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.share-b { font: 500 13px/1 var(--cond); padding: 7px 10px; border: 1px solid var(--line); border-radius: 14px; background: none; color: var(--ink); text-decoration: none; transition: background .2s, border-color .2s, color .2s; }
.share-b:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.share-native { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.buy-made { border-top: 0; padding-top: 0; margin-top: 14px; }

/* kartica: dugme Uporedi preko slike */
.card { position: relative; }
.card-cmp { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 0; border-radius: 2px; background: rgba(235,233,226,.92); font: 600 12px/1 var(--cond); opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .2s, background .2s, color .2s; }
.card:hover .card-cmp, .card-cmp:focus-visible, .card-cmp.on { opacity: 1; transform: none; }
.card-cmp.on { background: var(--ink); color: var(--paper); }
@media (hover: none) { .card-cmp { opacity: 1; transform: none; } .card-cmp span { display: none; } }

/* traka poređenja */
.cmp-tray { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--ink); color: var(--paper); transform: translateY(110%); transition: transform .35s cubic-bezier(.2,.7,.2,1); box-shadow: 0 -10px 30px rgba(0,0,0,.2); }
.cmp-tray.show { transform: none; }
.cmp-tray-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; padding-bottom: 12px; }
.cmp-tray-items { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.cmp-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 4px; background: rgba(235,233,226,.08); border: 1px solid #3a3b32; border-radius: 2px; white-space: nowrap; font-size: 14px; }
.cmp-chip img { width: 30px; height: 38px; object-fit: cover; }
.cmp-chip button { background: none; border: 0; color: #b4b5a8; font-size: 18px; padding: 0 4px; }
.cmp-slot { display: inline-flex; align-items: center; padding: 0 12px; border: 1px dashed #55564b; border-radius: 2px; color: #8e8f82; font-size: 13px; white-space: nowrap; }
.cmp-tray-act { display: flex; align-items: center; gap: 16px; flex: none; }
.cmp-tray-act .link { color: #b4b5a8; font-size: 14px; }
.cmp-tray-act .btn { min-height: 42px; }
.cmp-hint { font-size: 14px; color: #b4b5a8; }
@media (max-width: 640px) { .cmp-chip b { display: none; } .cmp-slot { display: none; } }

/* stranica poređenja */
.compare { padding-top: 8px; padding-bottom: 104px; }
.compare-empty { padding: 32px 0 0; }
.compare-tools { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; font-size: 15px; }
.cmp-diff { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.cmp-t { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: calc(160px + var(--cols) * 220px); }
.cmp-t th, .cmp-t td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.cmp-lab { width: 160px; font: 600 11px/1.6 var(--mono) !important; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.cmp-head { position: relative; border-bottom: 1.5px solid var(--ink) !important; }
.cmp-img { display: block; aspect-ratio: 3 / 4; background: var(--studio); overflow: hidden; margin-bottom: 12px; }
.cmp-img img { width: 100%; height: 100%; object-fit: cover; }
.cmp-head .mono { color: var(--muted); font-size: 11px; margin-bottom: 4px; }
.cmp-name { display: block; font: 700 26px/1 var(--cond); font-stretch: 72%; text-decoration: none; margin-bottom: 6px; }
.cmp-price { font-weight: 600; margin: 0; }
.cmp-rm { margin-top: 10px; padding: 0; background: none; border: 0; font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.cmp-rm:hover { color: var(--signal); }
.cmp-t td small { display: block; color: var(--muted); font-size: 13px; margin-top: 6px; }
.cmp-none { color: #a3a49a; }
.cmp-t.only-diff tr[data-same="1"] { display: none; }
.cmp-t tr:not(.cmp-cta):hover td { background: var(--card); }
.cmp-cta td { border-bottom: 0; padding-top: 22px; }

/* plaćanje: rezime ispod zaglavlja */
.wc-page .wc-block-components-sidebar-layout .wc-block-components-sidebar.is-sticky,
.wc-page .wc-block-checkout__sidebar.is-sticky,
.wc-page .wc-block-cart__sidebar.is-sticky { top: calc(64px + 24px) !important; }
.admin-bar .wc-page .wc-block-checkout__sidebar.is-sticky,
.admin-bar .wc-page .wc-block-cart__sidebar.is-sticky { top: calc(64px + 24px + 32px) !important; }

/* ---------- meni: Prodavnica sa panelom kategorija ---------- */
.nav { gap: 28px; align-items: center; }
.mega-item { position: static; }
.mega-trigger { display: inline-flex; align-items: center; gap: 7px; }
.mega-trigger svg { transition: transform .25s; }
.mega-item:hover .mega-trigger svg, .mega-item.open .mega-trigger svg { transform: rotate(180deg); }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--ink); border-top: 1px solid var(--line-d); box-shadow: 0 24px 40px rgba(0,0,0,.25); visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s; }
.mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: repeating-linear-gradient(90deg, rgba(235,233,226,.22) 0 7px, transparent 7px 12px); }
.mega-item:hover .mega, .mega-item:focus-within .mega, .mega-item.open .mega { visibility: visible; opacity: 1; transform: none; }
.mega-in { display: grid; grid-template-columns: 1fr 300px; gap: 40px; padding-top: 28px; padding-bottom: 36px; }
.mega-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.nav .mega a { padding: 0; border: 0; color: var(--paper); }
.mega-cat { display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.mega-img { display: block; aspect-ratio: 4 / 5; background: var(--studio); overflow: hidden; margin-bottom: 8px; }
.mega-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.mega-cat:hover .mega-img img { transform: scale(1.05); }
.mega-cat b { font: 700 22px/1 var(--cond); font-stretch: 75%; }
.mega-cat small { color: #a9aa9c; font-size: 13px; }
.mega-side { display: flex; flex-direction: column; border-left: 1px solid var(--line-d); padding-left: 32px; }
.mega-side a { display: block; padding: 12px 0 !important; border-bottom: 1px solid var(--line-d) !important; text-decoration: none; }
.mega-side a:last-child { border-bottom: 0 !important; }
.mega-side b { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; }
.mega-side small { display: block; color: #a9aa9c; font-size: 13px; margin-top: 3px; }
.mega-side a:hover b { color: #fff; text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 4px; }
.mega-side .label-woven { font-size: 9px; padding: 5px 7px; }
.hdr { position: sticky; }
@media (max-width: 960px) {
  .nav { gap: 0; align-items: stretch; }
  .mega-trigger svg { display: none; }
  .mega { position: static; visibility: visible; opacity: 1; transform: none; box-shadow: none; border: 0; background: transparent; }
  .mega::before { display: none; }
  .mega-in { grid-template-columns: 1fr; padding: 0 0 8px; gap: 0; }
  .mega-cats { grid-template-columns: 1fr; gap: 0; }
  .mega-cat { flex-direction: row; align-items: center; gap: 14px; padding: 10px 0 !important; border-bottom: 1px solid var(--line-d) !important; }
  .mega-img { width: 52px; height: 64px; aspect-ratio: auto; margin: 0; flex: none; }
  .mega-cat b { font-size: 26px; }
  .mega-cat small { margin-left: auto; }
  .mega-side { border: 0; padding: 0; }
  .mega-side small { display: none; }
  .mega-side a { padding: 12px 0 !important; }
  .mega-side b { font-size: 18px; }
  .mega-trigger { font: 600 13px/1 var(--mono) !important; letter-spacing: .08em; text-transform: uppercase; color: #8e8f82 !important; padding: 18px 0 6px !important; border: 0 !important; pointer-events: none; }
}
@media (max-width: 960px) { .admin-bar .nav { top: calc(96px + 46px); } }
@media (min-width: 783px) and (max-width: 960px) { .admin-bar .nav { top: calc(96px + 32px); } }

/* traka sa filterima: razmak ispod i senka dok je zalepljena */
.list-bar-in { padding-bottom: 14px; row-gap: 6px; }
.list-bar-in .tabs a { padding-bottom: 12px; }
.list-bar.stuck { box-shadow: 0 10px 18px -12px rgba(21,22,15,.35); }
.admin-bar .list-bar { top: calc(64px + 32px); }