/* =====================================================================
   Berlight — stranica proizvoda (Faza 1). Sve je pod .pr2 da ne utice na
   ostatak sajta. Boje i font kao u style.css: #ae9131 zlatna, #333333 tekst,
   #808080 sivi tekst, 'Open Sans'. Vrednosti se postavljaju eksplicitno jer
   style.css ima tag-pravila (h1,h2,p,a) koja bi inace "procurila".
   ===================================================================== */

.pr2, .pr2 * { box-sizing: border-box; }
.pr2 { display: block; width: 100%; color: #333333; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.6; background: #ffffff; }
.pr2 img { display: block; max-width: 100%; border: 0; }
.pr2 a { color: #333333; text-decoration: none; }
.pr2 h1, .pr2 h2, .pr2 h3 { font-family: 'Open Sans', Arial, Helvetica, sans-serif; text-align: left; margin: 0; padding: 0; color: #333333; display: block; position: static; }
.pr2 p { margin: 0 0 1em; padding: 0; }
.pr2-wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; }

/* ---------- putanja ---------- */
.pr2-crumb { font-size: 12px; letter-spacing: .04em; color: #808080; padding: 18px 0 10px; }
.pr2-crumb a { color: #808080; }
.pr2-crumb a:hover { color: #333333; }
.pr2-crumb span { color: #333333; }

/* ---------- gornji deo: galerija + podaci ---------- */
.pr2-top { display: -ms-grid; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; padding: 6px 0 10px; }

/* galerija */
.pr2-gal { position: relative; min-width: 0; }
.pr2-main { position: relative; background: #f2f2f2; overflow: hidden; aspect-ratio: 4/5; }
.pr2-main .pr2-slide { display: none; position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
.pr2-main .pr2-slide.pr2-on { display: block; }
.pr2-main .pr2-slide img { width: 100%; height: 100%; object-fit: cover; -webkit-transition: -webkit-transform .25s ease; transition: transform .25s ease; }
.pr2-tag { position: absolute; left: 14px; top: 14px; z-index: 3; background: #ae9131; color: #ffffff; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; font-weight: 600; }
.pr2-zoom { position: absolute; right: 14px; top: 14px; z-index: 3; background: rgba(255,255,255,.9); font-size: 13px; padding: 5px 9px; color: #666666; pointer-events: none; }
.pr2-nav { position: absolute; bottom: 16px; z-index: 3; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: #333333; font-size: 20px; line-height: 1; cursor: pointer; padding: 0; }
.pr2-nav:hover { background: #ffffff; }
.pr2-prev { right: 64px; }
.pr2-next { right: 16px; }
.pr2-thumbs { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px; padding-top: 12px; }
.pr2-thumbs .pr2-t { width: 76px; height: 94px; padding: 0; background: #f2f2f2; border: 1px solid transparent; cursor: pointer; overflow: hidden; }
.pr2-thumbs .pr2-t img { width: 100%; height: 100%; object-fit: cover; }
.pr2-thumbs .pr2-t.pr2-on { border-color: #333333; }

/* podaci */
.pr2-info { min-width: 0; padding-top: 4px; }
.pr2-brand { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #ae9131; font-weight: 600; margin-bottom: 10px; }
.pr2-info h1 { font-weight: 300; font-size: 40px; line-height: 1.08; margin: 0 0 8px; }
.pr2-dz { font-size: 13.5px; color: #808080; margin-bottom: 20px; }
.pr2-dz b { color: #555555; font-weight: 600; }
.pr2-price { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; gap: 12px; -ms-flex-wrap: wrap; flex-wrap: wrap; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; padding: 18px 0; margin-bottom: 24px; }
.pr2-amt { font-size: 25px; font-weight: 400; color: #333333; }
.pr2-vat { font-size: 12px; color: #808080; }
.pr2-old { font-size: 14px; color: #999999; }

/* varijante */
.pr2-opt { margin-bottom: 22px; }
.pr2-lab { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 12px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #808080; margin-bottom: 11px; }
.pr2-lab .pr2-cur { letter-spacing: .02em; text-transform: none; font-size: 12.5px; color: #555555; text-align: right; }
.pr2-btns { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px; }
.pr2 button.pr2-v { font: inherit; text-align: left; cursor: pointer; background: #ffffff; border: 1px solid #e5e5e5; color: #333333; padding: 11px 15px; min-width: 96px; line-height: 1.35; }
.pr2 button.pr2-v:hover { border-color: #ae9131; }
.pr2 button.pr2-v.pr2-on { border-color: #333333; background: #333333; color: #ffffff; }
.pr2 button.pr2-v .pr2-vn { display: block; font-size: 13px; }
.pr2 button.pr2-v small { display: block; font-size: 11.5px; color: #808080; margin-top: 3px; }
.pr2 button.pr2-v.pr2-on small { color: rgba(255,255,255,.75); }
.pr2-sku { font-size: 12.5px; color: #808080; margin: -6px 0 20px; }
.pr2-sku b { color: #333333; font-weight: 600; }
.pr2-selects { display: none; }			/* postojeci padajuci meniji rade u pozadini (cena + upit) */

/* poziv na akciju i poverenje */
.pr2-cta { margin: 26px 0 18px; }
.pr2 a.pr2-btn { display: block; text-align: center; background: #333333; color: #ffffff; padding: 17px 22px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.pr2 a.pr2-btn:hover { background: #ae9131; color: #ffffff; }
.pr2-trust { list-style: none; margin: 0; padding: 0; border-top: 1px solid #e5e5e5; padding-top: 18px; }
.pr2-trust li { position: relative; padding: 7px 0 7px 26px; font-size: 13.5px; color: #666666; }
.pr2-trust li:before { content: ""; position: absolute; left: 2px; top: 16px; width: 12px; height: 1px; background: #ae9131; }
.pr2-dl { margin-top: 16px; }
.pr2-dl a { font-size: 12.5px; letter-spacing: .04em; color: #666666; border-bottom: 1px solid #e5e5e5; padding-bottom: 2px; }
.pr2-dl a:hover { color: #ae9131; border-color: #ae9131; }

/* ---------- opis ---------- */
.pr2-band { background: #f5f3ef; margin-top: 50px; padding: 60px 0; }
.pr2-story { display: block; }
.pr2-story.pr2-story-img { display: -ms-grid; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; -webkit-box-align: center; -ms-flex-align: start; align-items: start; }
.pr2-k { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #ae9131; font-weight: 600; margin-bottom: 14px; }
.pr2-story h2 { font-weight: 300; font-size: 30px; line-height: 1.2; margin: 0 0 18px; }
.pr2-text { font-size: 15px; line-height: 1.8; color: #5d5a55; max-width: 62ch; }
.pr2-text p { margin: 0 0 1.1em; }
.pr2-text ul, .pr2-text ol { margin: 0 0 1.1em; padding-left: 20px; }
.pr2-text li { padding-bottom: 5px; }
.pr2-text img { height: auto; margin: 14px 0; }
.pr2-text a { color: #ae9131; border-bottom: 1px solid rgba(174,145,49,.35); }
.pr2-text * { font-family: 'Open Sans', Arial, Helvetica, sans-serif !important; }
.pr2-storyimg { background: #f5f3ef; overflow: hidden; }
.pr2-storyimg img { display: block; width: 100%; height: auto; }

/* ---------- specifikacije (postojeci HTML .datas .block) ---------- */
.pr2-specs { padding: 56px 0 10px; }
.pr2-specs h2 { font-weight: 300; font-size: 26px; margin: 0 0 26px; }
.pr2-specs .datas { display: -ms-grid; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 64px; }
.pr2-specs .datas .block { font-size: 14px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 20px; width: auto; float: none; padding: 13px 0; border-bottom: 1px solid #e5e5e5; font-size: 13.5px; }
.pr2-specs .datas .block .title { font-size: 14px !important; font-weight: 400 !important; color: #808080 !important; display: block; padding: 0; margin: 0; line-height: 1.5; }
.pr2-specs .datas .block { color: #333333; }
.pr2-specs .datas .block > *:last-child { text-align: right; color: #333333; }

/* ---------- povezani / familija ---------- */
.pr2-related { padding: 46px 0 80px; }
.pr2-related h2 { font-weight: 300; font-size: 26px; margin: 0 0 26px; }
.pr2-related .products { display: block; width: auto; float: none; }
.pr2-related .x4 { display: -ms-grid !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; width: auto; float: none; }
.pr2-related .block .foto { display: block; position: relative; width: 100%; }
.pr2-related .block .foto img { width: 100%; height: auto; }
.pr2-related .block .txt { display: block; padding-top: 10px; }
.pr2-related .block .price { display: block; padding-top: 6px; }
.pr2-related .buttonholder { display: none; }
.pr2-related .block { width: auto !important; margin: 0 !important; float: none !important; padding: 0 0 10px !important; }
.pr2-related .block .title { font-size: 15px; }
.pr2-related .block .price { font-size: 13.5px; color: #666666; }
.pr2-related .products .block .foto img { width: 100%; }

/* ---------- mobilni ---------- */
@media screen and (max-width: 980px) {
  .pr2-wrap { padding: 0 24px; }
  .pr2-top { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .pr2-info h1 { font-size: 30px; }
  .pr2-story.pr2-story-img { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .pr2-specs .datas { grid-template-columns: minmax(0, 1fr); }
  .pr2-related .x4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .pr2-band { padding: 44px 0; margin-top: 34px; }
}
@media screen and (max-width: 560px) {
  .pr2-wrap { padding: 0 20px; }
  .pr2-info h1 { font-size: 26px; }
  .pr2-amt { font-size: 22px; }
  .pr2-main { aspect-ratio: 1/1; }
  .pr2-thumbs .pr2-t { width: 60px; height: 74px; }
  .pr2 button.pr2-v { min-width: 0; -webkit-box-flex: 1; -ms-flex: 1 1 calc(50% - 5px); flex: 1 1 calc(50% - 5px); }
  .pr2-related .x4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .pr2-story h2 { font-size: 24px; }
}

/* =====================================================================
   Faza 1 — dopuna: krugovi boja, modeli familije, kolicina, tabovi
   ===================================================================== */

/* modeli iste familije (svaki je pravi link na svoju stranicu) */
.pr2-models { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px; }
.pr2 a.pr2-m { display: block; width: 104px; padding: 8px; border: 1px solid #e5e5e5; background: #ffffff; text-align: center; color: #333333; }
.pr2 a.pr2-m:hover { border-color: #ae9131; }
.pr2 a.pr2-m.pr2-on { border-color: #333333; }
.pr2 a.pr2-m img { width: 100%; height: 76px; object-fit: contain; background: #f7f7f7; }
.pr2 a.pr2-m span { display: block; font-size: 12.5px; margin-top: 7px; line-height: 1.3; }
.pr2 a.pr2-m small { display: block; font-size: 11.5px; color: #808080; margin-top: 2px; }

/* krug boje + naziv ispod (light11 / mohd nacin, u nasem tonu) */
.pr2-colorgrp .pr2-btns { gap: 14px; }
.pr2 button.pr2-v.pr2-sw { border: 0; background: none; padding: 0; min-width: 0; width: 76px; text-align: center; }
.pr2 button.pr2-v.pr2-sw .pr2-dot { display: block; width: 42px; height: 42px; border-radius: 50%; border: 1px solid #cccccc; margin: 0 auto; }
.pr2 button.pr2-v.pr2-sw .pr2-vn { display: block; font-size: 11.5px; color: #666666; margin-top: 7px; line-height: 1.3; }
.pr2 button.pr2-v.pr2-sw small { display: block; font-size: 11px; color: #999999; margin-top: 1px; }
.pr2 button.pr2-v.pr2-sw:hover .pr2-dot { outline: 1px solid #ae9131; outline-offset: 3px; }
.pr2 button.pr2-v.pr2-sw.pr2-on { background: none; color: #333333; }
.pr2 button.pr2-v.pr2-sw.pr2-on .pr2-dot { outline: 2px solid #333333; outline-offset: 3px; }
.pr2 button.pr2-v.pr2-sw.pr2-on .pr2-vn { color: #333333; font-weight: 600; }
.pr2 button.pr2-v.pr2-sw.pr2-on small { color: #808080; }

/* kolicina + fabricki kod */
.pr2-buy { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; gap: 18px; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 20px 0 0; }
.pr2-qlab { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #808080; margin-bottom: 9px; }
.pr2-qbox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 1px solid #e5e5e5; }
.pr2 button.pr2-q { width: 42px; height: 48px; border: 0; background: #ffffff; font-size: 18px; line-height: 1; color: #333333; cursor: pointer; padding: 0; }
.pr2 button.pr2-q:hover { color: #ae9131; }
.pr2-qbox input { width: 54px; height: 48px; border: 0; text-align: center; font-family: inherit; font-size: 15px; color: #333333; background: #ffffff; padding: 0; }
.pr2-buy .pr2-sku { margin: 0 0 14px; }

/* poverenje i preuzimanje — sa ikonicama */
.pr2-trust li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 11px; padding: 7px 0; }
.pr2-trust li:before { display: none; }
.pr2-trust svg { width: 18px; height: 18px; stroke: #ae9131; fill: none; stroke-width: 1.4; -ms-flex: none; flex: none; }
.pr2-dl a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; }
.pr2-dl svg { width: 16px; height: 16px; stroke: #ae9131; fill: none; stroke-width: 1.4; }

/* tabovi specifikacija */
.pr2-tabs { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 28px; -ms-flex-wrap: wrap; flex-wrap: wrap; border-bottom: 1px solid #e5e5e5; margin: -8px 0 24px; }
.pr2 .pr2-tabs button { font-family: inherit; background: none; border: 0; cursor: pointer; padding: 0 0 13px; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: #808080; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pr2 .pr2-tabs button.pr2-on { color: #333333; border-color: #333333; }

/* naslov povezanih + link na celu familiju */
.pr2-rh { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; gap: 16px; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 24px; }
.pr2-rh h2 { margin: 0; }
.pr2-rh a { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #ae9131; }
.pr2-rh a:hover { color: #333333; }

/* citat dizajnera u opisu, ako ga tekst sadrzi */
.pr2-text blockquote { border-left: 2px solid #ae9131; padding-left: 22px; margin: 24px 0; font-size: 20px; line-height: 1.5; color: #333333; font-style: normal; }
.pr2-text blockquote small { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #808080; margin-top: 12px; }

@media screen and (max-width: 560px) {
  .pr2 a.pr2-m { width: calc(33.333% - 7px); }
  .pr2 button.pr2-v.pr2-sw { width: 68px; }
  .pr2-buy { gap: 14px; }
}

/* =====================================================================
   Doterivanje: poverenje i preuzimanje jasnije (vece slovo, tamniji tekst, blagi panel)
   ===================================================================== */
.pr2-trust { background: #f7f5f0; border-top: 0; padding: 16px 20px; margin-top: 4px; }
.pr2-trust li { font-size: 14.5px; line-height: 1.45; color: #333333; padding: 8px 0; gap: 13px; }
.pr2-trust li + li { border-top: 1px solid #ebe6db; }
.pr2-trust svg { width: 20px; height: 20px; stroke-width: 1.6; }
.pr2-dl { margin-top: 18px; }
.pr2-dl a { font-size: 14px; color: #333333; border-bottom: 1px solid #ae9131; padding-bottom: 3px; }
.pr2-dl a:hover { color: #ae9131; }
.pr2 a.pr2-btn { font-size: 14px; letter-spacing: .1em; padding: 18px 22px; }
/* red bez teksta se ne prikazuje (npr. natpis jos nije upisan u admin) */
.pr2-trust li:has(> span:empty) { display: none; }
.pr2-trust:not(:has(li > span:not(:empty))) { display: none; }
/* sitni natpisi citljiviji */
.pr2-lab { font-size: 11.5px; color: #666666; }
.pr2 button.pr2-v.pr2-sw .pr2-vn { font-size: 12.5px; color: #444444; }
.pr2 button.pr2-v.pr2-sw small { font-size: 11.5px; color: #888888; }
.pr2 a.pr2-m span { font-size: 13px; color: #333333; }
.pr2 a.pr2-m small { font-size: 12px; color: #777777; }
.pr2-qlab { font-size: 11.5px; color: #666666; }
.pr2-buy .pr2-sku { font-size: 13.5px; color: #666666; }
.pr2-dz { font-size: 14px; color: #666666; }
/* plocice modela: naziv + dimenzija jasno, da se odmah vidi razlika (ø60 / ø90 / ø40) */
.pr2 a.pr2-m { width: 132px; padding: 9px 8px 10px; }
.pr2 a.pr2-m img { height: 84px; }
.pr2 a.pr2-m .pr2-mn { display: block; font-size: 13.5px; color: #333333; margin-top: 8px; line-height: 1.3; }
.pr2 a.pr2-m .pr2-md { display: block; font-style: normal; font-size: 13px; font-weight: 600; color: #333333; margin-top: 3px; letter-spacing: .01em; }
.pr2 a.pr2-m small { margin-top: 3px; }
.pr2 a.pr2-m.pr2-on { border-width: 2px; padding: 8px 7px 9px; }
@media screen and (max-width: 560px) { .pr2 a.pr2-m { width: calc(33.333% - 7px); } }

/* ===== Faza 1b: konfigurator + jedinstveni krugovi boja (isti za sve brendove) ===== */
/* krug: dubina iznutra; obrada se vidi u samom krugu — mat = blag prelaz, sjajno = odsjaj, metal = vise prelaza */
.pr2 button.pr2-v.pr2-sw .pr2-dot { border: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.16), inset 0 -3px 6px rgba(0,0,0,.10); }
.pr2 button.pr2-v.pr2-sw.pr2-on .pr2-dot { outline: 2px solid #ae9131; outline-offset: 3px; }
.pr2 button.pr2-v.pr2-on:not(.pr2-sw) { border-color: #ae9131; background: #ffffff; color: #222222; box-shadow: inset 0 0 0 1px #ae9131; }
.pr2 button.pr2-v.pr2-off { opacity: .45; }
.pr2 button.pr2-v.pr2-off:not(.pr2-sw) { border-style: dashed; }
.pr2 button.pr2-v.pr2-sw.pr2-off .pr2-dot { outline: 1px dashed #999999; outline-offset: 3px; }
.sw-bela-mat      { background: linear-gradient(90deg, #dcdcd8, #fbfbf9); }
.sw-bela-sjajna   { background: linear-gradient(148deg, #ececea 0%, #ececea 18%, #cfcfcb 38%, #f2f2f0 52%, #ffffff 62%, #ececea 80%); }
.sw-crna-mat      { background: linear-gradient(90deg, #111111, #555555); }
.sw-crna-sjajna   { background: linear-gradient(148deg, #050505 0%, #050505 18%, #4a4a4a 38%, #0a0a0a 52%, #e6e6e6 62%, #050505 78%); }
.sw-siva-mat      { background: linear-gradient(90deg, #7d7d7d, #c9c9c9); }
.sw-antracit      { background: linear-gradient(90deg, #2f3134, #5a5d61); }
.sw-aluminijum    { background: linear-gradient(90deg, #5e6163, #b5b9bb 55%, #e9ebec); }
.sw-hrom          { background: linear-gradient(148deg, #8b9092 0%, #8b9092 15%, #3a3a3a 35%, #9aa0a2 55%, #ffffff 65%, #8b9092 82%); }
.sw-nikl          { background: linear-gradient(90deg, #6b6158, #c1bcaf 50%, #dddddd 90%); }
.sw-zlatna-sjajna { background: linear-gradient(148deg, #c9a431 0%, #c9a431 15%, #7d5d05 35%, #d4b13c 55%, #fff5cf 65%, #c9a431 82%); }
.sw-zlatna-mat    { background: linear-gradient(90deg, #7a5c14, #c9a431, #efe0a8); }
.sw-mesing        { background: linear-gradient(90deg, #7a5c14, #c19b3c, #ecd9a0); }
.sw-bakar         { background: linear-gradient(90deg, #5a2a22, #b8664f, #f0b09c); }
.sw-bronza        { background: linear-gradient(90deg, #4a3522, #8c6f4e, #c9ab86); }
.sw-rdja          { background: linear-gradient(90deg, #5b3522, #8a5a3b, #a8704a); }
.sw-pergament     { background: repeating-linear-gradient(35deg, rgba(120,90,40,.10) 0 2px, rgba(0,0,0,0) 2px 6px), linear-gradient(90deg, #e2d3b2, #f2e8cf); }
.sw-sivi-saten    { background: linear-gradient(160deg, #b3b6b8, #8a8d8f 55%, #a4a7a9); }
.sw-crni-saten    { background: linear-gradient(160deg, #3a3a3a, #141414 55%, #2c2c2c); }
.sw-bela-saten    { background: linear-gradient(160deg, #ffffff, #e8e8e4 55%, #f6f6f3); }
.pr2-pribor { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column; gap: 8px; }
.pr2-chk { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; font-size: 13.5px; color: #333333; cursor: pointer; }
.pr2-chk input { width: 18px; height: 18px; accent-color: #ae9131; margin: 0; }
.pr2-chk small { color: #808080; font-size: 12.5px; }
.pr2-nofoto { font-size: 12.5px; color: #8a6a12; background: #faf3df; padding: 8px 12px; margin: -6px 0 18px; }
/* sekcija Familija */
.pr2-famgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; }
.pr2-fi { display: block; color: #333333; text-decoration: none; }
.pr2-fi img, .pr2-fi .pr2-fph { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #f4f4f2; }
.pr2-fi em { display: block; font-style: normal; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #ae9131; margin: 10px 0 2px; }
.pr2-fi span { display: block; font-size: 14.5px; line-height: 1.35; }
.pr2-fi small { display: block; color: #808080; font-size: 12.5px; margin-top: 2px; }
.pr2-fi:hover span { color: #ae9131; }
@media (max-width: 600px) { .pr2-famgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 600px) {
  .pr2 button.pr2-v.pr2-sw { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 72px; }
}
/* Faza 1b: slike cele, bez zumiranja — kvadratni okvir, fotografija "contain" na belom */
.pr2-main { aspect-ratio: 1/1; background: #ffffff; border: 1px solid #efefed; }
.pr2-main .pr2-slide img { object-fit: contain; background: #ffffff; }
.pr2-thumbs .pr2-t { width: 76px; height: 76px; background: #ffffff; border: 1px solid #efefed; }
.pr2-thumbs .pr2-t img { object-fit: contain; }
.pr2-thumbs .pr2-t.pr2-on { border-color: #ae9131; }
@media (max-width: 600px) { .pr2-thumbs .pr2-t { width: 60px; height: 60px; } }
/* Faza 1b / Flos: ostali krugovi (isti princip: mat = blag prelaz, sjajno = odsjaj, metal = vise prelaza, materijal = tekstura) */
.sw-braon         { background: linear-gradient(90deg, #4a2f22, #7a5240); }
.sw-zelena        { background: linear-gradient(148deg, #1f5a36 0%, #1f5a36 18%, #143d24 38%, #23633c 52%, #9fd0b0 62%, #1f5a36 80%); }
.sw-zelena-met    { background: linear-gradient(148deg, #2c4a3e 0%, #2c4a3e 15%, #15261f 35%, #3b5e50 55%, #a9c9bb 65%, #2c4a3e 82%); }
.sw-tamno-zelena  { background: linear-gradient(90deg, #14291d, #2d4a37); }
.sw-zalfija       { background: linear-gradient(90deg, #7f8f7c, #a7b5a2); }
.sw-crvena        { background: linear-gradient(148deg, #b3151c 0%, #b3151c 18%, #7a0a0e 38%, #c01a20 52%, #ffb4b4 62%, #b3151c 80%); }
.sw-bordo         { background: linear-gradient(90deg, #4a0f1c, #7a1e30); }
.sw-roze          { background: linear-gradient(90deg, #c98f8f, #e8c0bd); }
.sw-narandzasta   { background: linear-gradient(148deg, #d2621c 0%, #d2621c 18%, #9c430c 38%, #de6f25 52%, #ffd2ac 62%, #d2621c 80%); }
.sw-zuta          { background: linear-gradient(148deg, #d9b12e 0%, #d9b12e 18%, #a07f12 38%, #e2bd3c 52%, #fff0b5 62%, #d9b12e 80%); }
.sw-plava         { background: linear-gradient(90deg, #22415f, #3f6a8f); }
.sw-svetlo-plava  { background: linear-gradient(90deg, #7fa3bd, #b3cddd); }
.sw-bez           { background: linear-gradient(90deg, #cdb99a, #e8dcc6); }
.sw-sampanj       { background: linear-gradient(90deg, #8f7a55, #cdb88c 55%, #efe2c2); }
.sw-mud           { background: linear-gradient(90deg, #6a6055, #8e8375); }
.sw-oker-siva     { background: linear-gradient(90deg, #7a6f5b, #a39781); }
.sw-crni-nikl     { background: linear-gradient(90deg, #1d1d1f, #55575b 55%, #8a8c90); }
.sw-bronza-sjajna { background: linear-gradient(148deg, #8c6f4e 0%, #8c6f4e 15%, #4a3522 35%, #9a7b58 55%, #f0d9b8 65%, #8c6f4e 82%); }
.sw-providna      { background: repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 3px, rgba(0,0,0,0) 3px 7px), linear-gradient(148deg, #f7f9fa, #dfe6ea 55%, #ffffff); }
.sw-dim           { background: linear-gradient(148deg, #6e6a66, #3d3a37 55%, #817c77); }
.sw-ambra         { background: linear-gradient(148deg, #c98a3a, #8f5a1c 55%, #e3a95a); }
.sw-slonovaca     { background: repeating-linear-gradient(90deg, rgba(120,100,70,.08) 0 2px, rgba(0,0,0,0) 2px 5px), linear-gradient(90deg, #efe6d3, #fbf6ea); }
.sw-ratan         { background: repeating-linear-gradient(45deg, #a47a4a 0 3px, #c79b62 3px 6px), #b88a55; }
.sw-chromatica    { background: conic-gradient(#d24a3a, #e3b33c, #4f9a6a, #3b6aa8, #8a4fa0, #d24a3a); }
.sw-bazaltina     { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.12) 0 2px, rgba(0,0,0,0) 3px), linear-gradient(90deg, #5a5956, #7d7b77); background-size: 7px 7px, auto; }
.sw-cement        { background: radial-gradient(circle at 60% 40%, rgba(0,0,0,.08) 0 1px, rgba(0,0,0,0) 2px), linear-gradient(90deg, #a09d97, #c3c0ba); background-size: 5px 5px, auto; }
.sw-prajmer       { background: repeating-linear-gradient(45deg, #e9e7e2 0 4px, #dcd9d2 4px 8px); }
/* dvobojni krug: leva i desna polovina */
.pr2 .pr2-dot.pr2-split { position: relative; overflow: hidden; display: block; }
.pr2 .pr2-dot.pr2-split > i { position: absolute; top: 0; bottom: 0; width: 50%; }
.pr2 .pr2-dot.pr2-split > i:first-child { left: 0; }
.pr2 .pr2-dot.pr2-split > i:last-child { right: 0; }
.sw-teget-met     { background: linear-gradient(148deg, #2b3a55 0%, #2b3a55 15%, #16203a 35%, #34466a 55%, #a8b8d8 65%, #2b3a55 82%); }
.sw-sivo-plava    { background: linear-gradient(148deg, #56708a 0%, #56708a 18%, #3c5268 38%, #5f7a95 52%, #c9d8e6 62%, #56708a 80%); }
/* Modularni sistem (sastavljanje) — ista dugmad kao ostale opcije */
.pr2 button.pr2-v.pr2-el { position: relative; }
.pr2 button.pr2-v.pr2-el[disabled] { cursor: not-allowed; }
.pr2-kom { position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: #ae9131; color: #ffffff; font-size: 11.5px; font-weight: 600; line-height: 22px; text-align: center; }
.pr2-sast span { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.pr2-ukl { font: inherit; font-size: 12px; color: #808080; background: none; border: 0; padding: 0; margin-left: 14px; text-decoration: underline; cursor: pointer; }
.pr2-ukl:hover { color: #ae9131; }
.pr2-sastav-nap { font-size: 12px; line-height: 1.5; color: #808080; margin: -6px 0 18px; }

/* Boje: mreza umesto slobodnog prelamanja.
   Ranije su dugmad bila flex stavke fiksne sirine, pa su duzi nazivi ("Prajmer (za
   farbanje u boju zida)") pravili visi red i krugovi se nisu poklapali izmedju redova.
   Sada su kolone jednake i svaki red je iste visine, pa krugovi stoje u liniji. */
.pr2-colorgrp .pr2-btns { display: -ms-grid; display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 20px 10px; -ms-flex-align: start; align-items: start; }
.pr2 button.pr2-v.pr2-sw { width: auto; min-width: 0; }
/* naziv uvek zauzima visinu dva reda, da jednoredni i dvoredni nazivi stoje isto */
.pr2 button.pr2-v.pr2-sw .pr2-vn { min-height: 2.6em; display: -webkit-box; -webkit-box-orient: vertical; }
@media screen and (max-width: 560px) {
  .pr2-colorgrp .pr2-btns { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 18px 8px; }
  .pr2 button.pr2-v.pr2-sw { width: auto; }
}
@media screen and (max-width: 600px) {
  .pr2 button.pr2-v.pr2-sw { -ms-flex: 0 1 auto; flex: 0 1 auto; width: auto; }
}
/* naziv na najvise dva reda: tako su sve plocice iste visine i razmak medju redovima je
   ujednacen. Pun naziv izabrane boje i dalje stoji gore desno uz naslov grupe. */
.pr2 button.pr2-v.pr2-sw .pr2-vn { -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }

/* podaci izabrane varijante u tabeli Specifikacije (paket 52) */
.pr2-vb-off { display: none !important; }
.pr2-specs .datas .pr2-vb-sum { grid-column: 1 / -1; display: block; background: #f5f3ef; border-bottom: 0; padding: 16px 20px; margin-bottom: 8px; line-height: 1.7; color: #333333; }
.pr2-specs .datas .pr2-vb-sum .title { display: block; font-size: 11px !important; letter-spacing: .14em; text-transform: uppercase; color: #ae9131 !important; font-weight: 600 !important; margin-bottom: 6px; }
.pr2-specs .datas .pr2-vb-sum > *:last-child { text-align: left; }