/* Dorade originalnog tamnog dizajna. Osnovna tema ostaje u style.css. */
.outlet-refined { color-scheme: dark; }
.outlet-refined .sadrzaj { grid-template-columns: 250px minmax(0, 1fr); }
.ponuda-proizvodi { min-width: 0; scroll-margin-top: 110px; }
.ponuda-proizvodi:focus { outline: none; }
.ponuda-proizvodi:focus-visible { outline: 2px solid var(--zuta); }

/* Fotografije na grafitnoj podlozi, sa prostorom za DOT i popust. */
.outlet-refined .kartica {
  background: linear-gradient(165deg, #1a1e24, #101318 75%);
  border-color: #2d323b;
  animation: none;
}

.outlet-refined .kartica:hover { border-color: #bb850e; transform: translateY(-4px); }
.outlet-refined .kartica .slika,
.outlet-refined .kartica .slika.ima-foto {
  position: relative;
  margin: 0;
  padding: 48px 18px 15px;
  background: radial-gradient(ellipse at 50% 45%, #535961 0%, #2b3038 43%, #191d24 78%);
  border-radius: 0;
  border-bottom: 1px solid #ffffff09;
}
.outlet-refined .kartica .slika img {
  width: 100%; max-width: 220px; height: 210px;
  filter: drop-shadow(0 15px 12px #0008);
}
.outlet-refined .kartica:hover .slika img { transform: scale(1.045); }
.kartica-oznake { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: center; }
.kartica-oznake .popust-badge,
.kartica-oznake .dot-badge { position: static; }
.kartica-oznake .popust-badge { box-shadow: 0 5px 16px #0003; font-size: 18px; padding: 5px 12px; }
.kartica-oznake .dot-badge { color: #e3e6ec; background: #161a20cf; border-color: #555c67; font-size: 13px; }
.outlet-refined .kartica .info { padding: 20px; gap: 7px; }
.outlet-refined .kartica .marka { font-size: 11px; letter-spacing: 2.3px; }
.outlet-refined .kartica .naziv-g { font-size: 14px; font-weight: 500; color: #b9c1cc; min-height: 38px; overflow-wrap: anywhere; }
.outlet-refined .kartica .dimenzija { font-size: 30px; line-height: 1.1; letter-spacing: .5px; }
.outlet-refined .kartica .dimenzija .sezona-txt { display: block; font: 11px var(--font-u); letter-spacing: .3px; color: #a7afba; margin-top: 8px; }
.outlet-refined .kartica .oznake { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin: 8px 0 13px; }
.outlet-refined .kartica .oznaka { font-size: 10px; padding: 5px 7px; border-radius: 7px; white-space: nowrap; color: #c2c9d2; }
.outlet-refined .kartica .poslovnica-oznaka { border: 0; background: none; padding-left: 0; }
.poslovnica-oznaka::before { content: ''; display: inline-block; width: 5px; height: 5px; background: var(--zuta); border-radius: 50%; margin-right: 7px; vertical-align: 2px; }
.outlet-refined .kartica .stanje-malo { color: #ffd469; }
.outlet-refined .kartica .cijene { border-top: 1px solid #30353f; padding-top: 16px; }
.outlet-refined .kartica .nova-cijena { font-size: 39px; text-shadow: none; }
.outlet-refined .kartica .nova-cijena small { font-size: 16px; }
.outlet-refined .po-gumi { color: #a0a9b7; font-size: 11px; margin-top: 2px; }
.btn-artikal {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  width: 100%; margin-top: 14px; min-height: 44px; padding: 12px 17px;
  background: #f9ae0005; border: 1px solid #a27825; border-radius: 999px;
  color: #ffd064; font: 600 12px var(--font-u); letter-spacing: .4px;
  cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.btn-artikal span { font-size: 20px; line-height: 1; }
.btn-artikal:hover, .btn-artikal:focus-visible { color: #08090b; background: var(--zuta); border-color: var(--zuta); }

/* Pomoc i pretraga. */
.outlet-refined .k-naslov { justify-content: space-between; gap: 18px; }
.dim-pomoc { position: relative; flex-shrink: 0; }
.dim-pomoc summary { color: #d0d5de; font-size: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.dim-pomoc-panel { position: absolute; right: 0; top: 30px; z-index: 6; width: 310px; background: #1a1e25; padding: 23px; border: 1px solid #52504a; border-radius: 16px; box-shadow: 0 20px 45px #0009; }
.dim-pomoc-panel > strong { display: block; color: var(--zuta); font: 600 32px var(--font-b); letter-spacing: 2px; }
.dim-pomoc-panel i { color: #77808e; font-style: normal; }
.dim-pomoc-panel p { font-size: 12px; line-height: 1.6; margin: 10px 0 15px; color: #b4bdcb; }
.dim-pomoc-panel > div { display: flex; justify-content: space-between; gap: 15px; }
.dim-pomoc-panel span b { display: block; color: #f2f4f8; font-size: 16px; margin-bottom: 4px; }
.outlet-refined .dim-citac { display: grid; grid-template-columns: minmax(0,1fr) 12px minmax(0,1fr) 12px minmax(0,1fr) 1.35fr; }
.outlet-refined .dim-polje { min-width: 0; }
.outlet-refined .dim-polje select {
  width: 100%; padding-right: 27px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23f9ae00' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 16px; background-position: right 12px center;
}
.outlet-refined .btn-trazi { padding-left: 18px; padding-right: 18px; letter-spacing: 1.5px; }
.filter-toggle { display: none; }
.odabrani-filteri { display: flex; flex-wrap: wrap; gap: 8px; }
.odabrani-filteri:not(:empty) { margin: 0 0 20px; }
.filter-chip { max-width: 100%; overflow-wrap: anywhere; font: 12px var(--font-u); color: #fbd278; border: 1px solid #7f621e; border-radius: 999px; padding: 9px 14px; background: #f9ae0010; cursor: pointer; min-height: 36px; }
.filter-chip:hover { background: #f9ae0025; }
.outlet-refined .check-lista label .broj { color: #9ba5b5; }
.outlet-refined .filter-grupa input[type="text"]::placeholder { color: #8a95a6; }

/* Detalji: fotografija, specifikacija i izbor seta. */
.outlet-refined .modal-artikal { width: min(1060px, 100%); background: linear-gradient(140deg, #1b2027, #0c0f14); }
.outlet-refined .ma-grid { grid-template-columns: .95fr 1.05fr; align-items: start; }
.outlet-refined .ma-slika.ima-foto { background: radial-gradient(ellipse at center, #59606a, #2a303a 52%, #1a1f27 80%); padding: 65px 30px 40px; min-height: 410px; border: 1px solid #ffffff0d; }
.outlet-refined .ma-slika img { max-width: 360px; }
.outlet-refined .ma-slika .popust-badge { top: 18px; left: 18px; }
.outlet-refined .ma-naslov { font-size: 23px; color: #bcc5d1; line-height: 1.35; margin: 8px 0 10px; font-weight: 500; }
.outlet-refined .ma-dimenzija { font-size: 37px; line-height: 1.1; margin-bottom: 20px; }
.outlet-refined .ma-dimenzija .sezona-txt { font-size: 17px; letter-spacing: 0; }
.outlet-refined .ma-dot { border-color: #ac7b234f; background: #f9ae0008; }
.outlet-refined .ma-dot b { color: #ffce67; }
.outlet-refined .ma-detalji span { letter-spacing: 1px; }
.outlet-refined .ma-napomena { font-size: 12px; line-height: 1.6; }
.outlet-refined .ma-cijene { justify-content: space-between; border-top-style: solid; }
.outlet-refined .ma-cijene .nova-cijena { text-shadow: none; }
.ma-kupovina { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 22px; padding: 18px; border: 1px solid #4b4230; border-radius: 16px; background: linear-gradient(120deg,#f9ae000b,#ffffff03); }
.ma-kolicina label, .ma-ukupno > span { display: block; font-size: 11px; color: #c1c7d0; margin-bottom: 10px; }
.kolicina-kontrole { display: flex; align-items: center; border: 1px solid #53545a; border-radius: 999px; overflow: hidden; background: #090b1080; }
.kolicina-kontrole button { border: 0; background: none; color: var(--zuta); width: 42px; height: 42px; font-size: 21px; cursor: pointer; }
.kolicina-kontrole select { background: #15181f; color: #f2f3f6; font: 600 15px var(--font-u); width: 54px; height: 42px; border: 0; padding-left: 8px; }
.kolicina-kontrole button:hover:not(:disabled) { background: #f9ae0020; }
.kolicina-kontrole button:disabled, .brzi-kom button:disabled { opacity: .3; cursor: default; }
.brzi-kom { display: flex; gap: 8px; margin-top: 9px; }
.brzi-kom button { min-height: 32px; padding: 4px 12px; border-radius: 999px; color: #b9c2d0; border: 1px solid #3c414d; background: transparent; font: 11px var(--font-u); cursor: pointer; }
.brzi-kom button[aria-pressed="true"] { border-color: #b68b36; color: #fcd077; background: #f9ae0010; }
.ma-ukupno { text-align: right; }
.ma-ukupno output { display: block; font: 700 34px/1 var(--font-b); color: var(--zuta); white-space: nowrap; }
.ma-ukupno small { display: block; font-size: 10px; color: #aeb7c5; margin-top: 9px; }
.outlet-refined .ma-akcije:not(.ma-akcije-chat) { grid-template-columns: 1fr; margin-top: 18px; gap: 10px; }
.outlet-refined .btn-poziv { padding: 18px 20px; font-size: 13px; letter-spacing: 1px; }
.outlet-refined .btn-mail { border-color: #444b58; color: #ccd4e0; background: #ffffff03; font-size: 11px; padding: 12px; letter-spacing: 1px; }
.outlet-refined .btn-wap, .outlet-refined .btn-viber { border: 1px solid #3d4655; background: #ffffff03; color: #bfc8d6; box-shadow: none; padding: 12px 10px; font-size: 10px; letter-spacing: .3px; }
.outlet-refined .btn-wap svg { color: #56da8d; }
.outlet-refined .btn-viber svg { color: #b0a3ff; }
.outlet-refined .btn-wap:hover, .outlet-refined .btn-viber:hover { border-color: #888260; background: #ffffff08; }
.outlet-refined .ma-kontakt-info { overflow-wrap: anywhere; line-height: 1.7; font-size: 11px; }

@media (max-width: 1000px) {
  .outlet-refined .sadrzaj { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .filter-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 18px; color: #f2f4f7; background: linear-gradient(130deg,#212630,#13161d); border: 1px solid #454a54; border-radius: 14px; font: 600 13px var(--font-u); cursor: pointer; }
  .filter-toggle svg { width: 21px; height: 21px; stroke: var(--zuta); fill: none; stroke-width: 1.5; }
  #filter-toggle-state { margin-left: auto; color: #e1b75d; font-size: 11px; font-weight: 400; }
  .outlet-refined .filteri { display: none; position: static; }
  .outlet-refined .filteri.otvoreni { display: block; }
  .outlet-refined .dim-citac { grid-template-columns: minmax(0,1fr) 12px minmax(0,1fr) 12px minmax(0,1fr); }
  .outlet-refined .btn-trazi { grid-column: 1/-1; margin-top: 7px; }
  .outlet-refined .ma-grid { grid-template-columns: 1fr; }
  .outlet-refined .ma-slika.ima-foto { min-height: 240px; padding: 36px 25px 20px; }
  .outlet-refined .ma-slika img { max-width: 220px; }
}

@media (max-width: 600px) {
  .outlet-refined .header-inner { padding: 12px 14px; }
  .outlet-refined .outlet-by { font-size: 22px; letter-spacing: 2px; }
  .outlet-refined .outlet-by small { font-size: 10px; letter-spacing: 3px; }
  .outlet-refined img.logo-gumam { height: 30px; }
  .outlet-refined .hero { padding: 19px 18px 23px; gap: 13px; overflow: clip; }
  .outlet-refined .hero::before { width: 100%; left: 0; }
  .outlet-refined .hero-guma img { width: 140px; animation: none; }
  .outlet-refined .hero-guma .znacka { font-size: 15px; padding: 7px 12px; border-radius: 12px; }
  .outlet-refined .hero-guma .znacka small { font-size: 7px; letter-spacing: 1px; }
  .outlet-refined .hero-guma .znacka.z1 { top: 4%; right: 14%; }
  .outlet-refined .hero-guma .znacka.z2 { bottom: 5%; left: 14%; }
  .outlet-refined .nadnaslov { font-size: 8px; letter-spacing: 1.5px; padding: 7px 11px; margin-bottom: 13px; }
  .outlet-refined .hero #hero-naslov { font-size: clamp(26px,7vw,36px); line-height: 1.12; letter-spacing: -.8px; }
  .outlet-refined .hero .podnaslov { font-size: 12px; line-height: 1.55; margin: 13px auto 18px; }
  .outlet-refined .hero-brojke { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
  .outlet-refined .hero-brojke .stavka { min-width: 0; }
  .outlet-refined .hero-brojke b { font-size: 17px; }
  .outlet-refined .hero-brojke span { display: block; font-size: 7px; letter-spacing: .5px; margin-top: 5px; }
  .outlet-refined .ticker { padding: 8px 0; }
  .outlet-refined .ticker-brend { margin: 0 25px; }
  .outlet-refined .ticker-brend img { height: 25px; }
  .outlet-refined .ticker-brend.brend-veci img { height: 33px; }
  .outlet-refined .ticker-brend.brend-najveci img { height: 42px; }
  .outlet-refined .konzola { padding: 0 14px; margin-top: 22px; }
  .outlet-refined .konzola-panel { padding: 20px 16px; border-radius: 20px; }
  .outlet-refined .k-naslov { align-items: start; gap: 10px; margin-bottom: 19px; }
  .outlet-refined .k-naslov h2 { font-size: 10px; line-height: 1.55; letter-spacing: 1.2px; max-width: 160px; }
  .dim-pomoc { max-width: 105px; flex-shrink: 1; }
  .dim-pomoc summary { font-size: 10px; line-height: 1.5; text-align: right; }
  .dim-pomoc-panel { width: 270px; padding: 20px; }
  .outlet-refined .dim-citac { gap: 6px; grid-template-columns: minmax(0,1fr) 8px minmax(0,1fr) 8px minmax(0,1fr); }
  .outlet-refined .dim-polje select { font-size: 25px; padding: 8px 23px 8px 8px; background-size: 12px; background-position: right 8px center; border-radius: 12px; height: 49px; }
  .outlet-refined .dim-polje .etiketa { font-size: 8px; letter-spacing: 1px; }
  .outlet-refined .dim-razmak { font-size: 23px; padding-bottom: 10px; }
  .outlet-refined .btn-trazi { font-size: 11px; letter-spacing: 1.5px; padding: 15px; }
  .outlet-refined .sadrzaj { padding: 0 14px; margin: 22px auto; gap: 13px; }
  .outlet-refined .rezultati-vrh { gap: 8px; align-items: center; flex-wrap: nowrap; margin-bottom: 15px; }
  .outlet-refined .broj-rez { font-size: 10px; }
  .outlet-refined .rezultati-vrh select { font-size: 10px; padding: 10px 8px; max-width: 54%; letter-spacing: 0; }
  .outlet-refined .grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .outlet-refined .kartica { border-radius: 17px; }
  .outlet-refined .kartica .slika, .outlet-refined .kartica .slika.ima-foto { padding: 42px 9px 13px; }
  .outlet-refined .kartica .slika img { height: 135px; max-width: 135px; }
  .kartica-oznake { top: 10px; left: 9px; right: 9px; }
  .kartica-oznake .popust-badge { font-size: 14px; padding: 4px 8px; }
  .kartica-oznake .dot-badge { font-size: 10px; letter-spacing: .4px; padding: 4px 7px; }
  .outlet-refined .kartica .info { padding: 13px 11px; gap: 6px; }
  .outlet-refined .kartica .marka { font-size: 9px; letter-spacing: 1px; }
  .outlet-refined .kartica .naziv-g { font-size: 11px; min-height: 42px; }
  .outlet-refined .kartica .dimenzija { font-size: 24px; letter-spacing: 0; }
  .outlet-refined .kartica .dimenzija .sezona-txt { font-size: 10px; margin-top: 6px; }
  .outlet-refined .kartica .oznake { flex-direction: column; align-items: start; gap: 5px; margin: 4px 0 8px; }
  .outlet-refined .kartica .oznaka { font-size: 9px; padding: 3px 6px; }
  .outlet-refined .kartica .poslovnica-oznaka { padding-left: 0; }
  .outlet-refined .kartica .cijene { padding-top: 11px; gap: 4px; }
  .outlet-refined .kartica .nova-cijena { font-size: 28px; }
  .outlet-refined .kartica .nova-cijena small { font-size: 10px; margin-left: 2px; }
  .outlet-refined .kartica .stara-cijena { font-size: 10px; }
  .outlet-refined .kartica .stara-cijena small { font-size: 7px; letter-spacing: .2px; }
  .outlet-refined .kartica .po-gumi { font-size: 8px; }
  .btn-artikal { padding: 10px 12px; font-size: 10px; letter-spacing: 0; margin-top: 10px; }
  .btn-artikal span { font-size: 17px; }
  .filter-chip { font-size: 10px; min-height: 34px; padding: 8px 12px; }
  .outlet-refined .modal-pozadina { padding: 9px; }
  .outlet-refined .modal-artikal { padding: 54px 17px 22px; border-radius: 22px; max-height: 94dvh; }
  .outlet-refined .modal-zatvori { top: 10px; right: 12px; }
  .outlet-refined .ma-slika.ima-foto { min-height: 220px; padding: 38px 22px 18px; }
  .outlet-refined .ma-slika img { max-width: 200px; }
  .outlet-refined .ma-slika .popust-badge { font-size: 17px; top: 12px; left: 12px; }
  .outlet-refined .ma-naslov { font-size: 19px; }
  .outlet-refined .ma-dimenzija { font-size: 32px; }
  .outlet-refined .ma-dimenzija .sezona-txt { font-size: 15px; }
  .outlet-refined .ma-detalji { gap: 8px; }
  .outlet-refined .ma-detalji div { padding: 10px 11px; }
  .outlet-refined .ma-detalji span { font-size: 9px; letter-spacing: .3px; }
  .ma-kupovina { padding: 14px 12px; gap: 10px; }
  .kolicina-kontrole button { width: 35px; }
  .kolicina-kontrole select { width: 48px; }
  .ma-ukupno output { font-size: 29px; }
  .ma-ukupno small { font-size: 8px; }
  .outlet-refined .ma-akcije-chat { grid-template-columns: 1fr 1fr; gap: 8px; }
  .outlet-refined .btn-wap, .outlet-refined .btn-viber { font-size: 9px; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) { .outlet-refined *, .outlet-refined *::before, .outlet-refined *::after { transition: none !important; animation: none !important; } }

/* Brzi izbor dimenzije, lokacije i dovoljne količine. */
.popularne-dimenzije { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 23px; padding-top: 19px; border-top: 1px solid #ffffff12; }
.popularne-dimenzije > span { font: 11px var(--font-u); color: #a0aab9; }
#brze-dimenzije { display: flex; flex-wrap: wrap; gap: 8px; }
#brze-dimenzije button { min-height: 36px; padding: 7px 14px; color: #d7dde6; background: #ffffff04; border: 1px solid #3d4450; border-radius: 999px; font: 600 13px var(--font-b); letter-spacing: .6px; cursor: pointer; transition: background .2s, border-color .2s; }
#brze-dimenzije button span { color: #f2bf59; margin-left: 3px; }
#brze-dimenzije button:hover { background: #f9ae0012; border-color: #9a7430; }
#brze-dimenzije button[aria-pressed="true"] { border-color: var(--zuta); background: #f9ae0017; color: #ffd579; }
.brzi-izbor { margin-bottom: 25px; padding: 23px; border-radius: 21px; border: 1px solid #3a414d; background: linear-gradient(120deg,#1e242d,#11151c); box-shadow: 0 10px 30px #0002; }
.brzi-izbor-vrh { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.mini-naslov { color: #c79941; font-size: 9px; letter-spacing: 2px; font-weight: 600; }
.brzi-izbor h2 { font: 600 20px var(--font-u); letter-spacing: -.4px; margin-top: 7px; }
.brzi-izbor-vrh > a { color: #b8c2d0; font-size: 11px; text-decoration: none; white-space: nowrap; }
.brzi-izbor-vrh > a span { color: var(--zuta); margin-left: 8px; }
.brzi-izbor-vrh > a:hover { color: var(--zuta); }
.gradovi-dugmad { display: flex; flex-wrap: wrap; gap: 8px; }
.gradovi-dugmad button { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1; white-space: nowrap; min-height: 42px; padding: 10px 13px; border: 1px solid #444d5b; border-radius: 999px; background: #0a0d1240; color: #cbd3de; font: 500 12px var(--font-u); cursor: pointer; transition: background .2s, color .2s; }
.gradovi-dugmad button:hover { border-color: #b1873e; background: #f9ae0010; }
.gradovi-dugmad button[aria-pressed="true"] { background: linear-gradient(120deg,var(--zuta),#ffca49); border-color: transparent; color: #101216; font-weight: 700; }
.grad-tacka { display: block; flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background: #828d9e; }
[aria-pressed="true"] .grad-tacka { background: #171c26; }
.izbor-seta { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid #ffffff10; margin-top: 20px; padding-top: 18px; }
.set-naslov { font-size: 12px; font-weight: 600; color: #d2dae4; }
.izbor-seta p { color: #949fae; font-size: 10px; margin-top: 5px; line-height: 1.5; }
#brzi-set { display: flex; gap: 4px; padding: 4px; border: 1px solid #3c4451; border-radius: 999px; background: #080b1155; flex-shrink: 0; }
#brzi-set button { border: 0; background: none; color: #adb8c9; border-radius: 999px; padding: 9px 13px; min-height: 34px; font: 11px var(--font-u); white-space: nowrap; cursor: pointer; }
#brzi-set button:hover { color: #ffe0a0; }
#brzi-set button[aria-pressed="true"] { background: #f9ae0020; color: #ffce6b; box-shadow: inset 0 0 0 1px #a47933; }
.btn-prazno-reset { margin-top: 20px; border-radius: 999px; border: 1px solid #9e7c35; padding: 12px 20px; color: #ffd075; background: #f9ae0010; font: 12px var(--font-u); cursor: pointer; }
.btn-prazno-reset:hover { background: #f9ae0020; }
.cijena-seta { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; padding: 9px 0 2px; color: #aab4c3; font-size: 10px; }
.cijena-seta b { color: #f9ce76; font-size: 12px; }

/* Jednaka velicina kadra, opticko centriranje i zajednicka podloga. */
.foto-kadar { width: 100%; aspect-ratio: 1; position: relative; isolation: isolate; margin: 0 auto; }
.foto-kadar::before { content: ''; position: absolute; z-index: -1; bottom: 1%; left: 13%; width: 74%; height: 5%; border-radius: 50%; background: #0008; filter: blur(6px); }
.outlet-refined .kartica .slika .foto-kadar { max-width: 220px; }
.outlet-refined .kartica .slika .foto-kadar img,
.outlet-refined .ma-slika .foto-kadar img,
.outlet-refined .slicna-kartica .foto-kadar img { display: block; width: 100%; height: 100%; max-width: none; aspect-ratio: 1; object-fit: contain; object-position: center; margin: 0; transform: translate(var(--foto-x,0%), var(--foto-y,0%)) scale(var(--foto-scale,1)); border-radius: 0; filter: drop-shadow(0 12px 10px #0005); }
.outlet-refined .kartica:hover .slika .foto-kadar img { transform: translate(var(--foto-x,0%), var(--foto-y,0%)) scale(calc(var(--foto-scale,1) * 1.025)); }
.outlet-refined .ma-slika .foto-kadar { max-width: 350px; }
.outlet-refined .slicna-kartica .foto-kadar { max-width: 90px; margin-bottom: 12px; }
.foto-logo::before { display: none; }

/* Tri jasna koraka, bez laznog statusa rezervacije. */
.kupovina-koraci { position: relative; z-index: 1; max-width: 1360px; padding: 0 24px; margin: 80px auto 0; scroll-margin-top: 115px; }
.kupovina-uvod { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.kupovina-uvod h2 { margin-top: 12px; font: 600 31px/1.2 var(--font-u); letter-spacing: -.8px; }
.kupovina-uvod h2 span { color: var(--zuta); }
.kupovina-uvod > p { font-size: 12px; color: #a4afbf; line-height: 1.7; }
.koraci-lista { list-style: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.koraci-lista li { position: relative; padding: 28px; border: 1px solid #343d4a; border-radius: 22px; background: linear-gradient(145deg,#202630,#10141b); display: flex; flex-direction: column; align-items: start; }
.korak-broj { position: absolute; top: 24px; right: 26px; font: 600 36px var(--font-b); color: #46505f; }
.koraci-lista svg { width: 33px; height: 33px; fill: none; stroke: #f6bc4f; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 29px; }
.koraci-lista h3 { font: 600 18px/1.3 var(--font-u); color: #e3e8ef; margin-bottom: 12px; }
.koraci-lista p { color: #a3afc0; font-size: 12px; line-height: 1.8; margin-bottom: 24px; }
.koraci-lista a { margin-top: auto; text-decoration: none; font-size: 11px; color: #f6c66a; padding: 4px 0; }
.koraci-lista a span { margin-left: 13px; font-size: 16px; }
.koraci-lista a:hover { color: #ffe9b6; }
.korak-napomena { margin-top: auto; color: #c7cfdc; font-size: 10px; line-height: 1.6; padding: 5px 0; }
.korak-napomena span { color: #f6c66a; margin-right: 5px; }
#poslovnice { scroll-margin-top: 90px; }

@media (max-width: 1100px) {
  .izbor-seta { flex-wrap: wrap; gap: 12px; }
  .gradovi-dugmad button { flex: 0 1 auto; }
  .kupovina-uvod { align-items: start; }
  .kupovina-uvod h2 { font-size: 27px; }
  .koraci-lista li { padding: 24px; }
}
@media (max-width: 1000px) { .outlet-refined .ma-slika .foto-kadar { max-width: 220px; } }
@media (max-width: 600px) {
  .popularne-dimenzije { margin-top: 18px; padding-top: 15px; gap: 10px; }
  .popularne-dimenzije > span { font-size: 9px; }
  #brze-dimenzije { gap: 6px; }
  #brze-dimenzije button { font-size: 12px; padding: 7px 11px; min-height: 34px; }
  .brzi-izbor { margin-bottom: 20px; border-radius: 18px; padding: 17px 14px; }
  .brzi-izbor-vrh { align-items: start; gap: 9px; margin-bottom: 17px; }
  .mini-naslov { font-size: 8px; letter-spacing: 1.1px; }
  .brzi-izbor h2 { font-size: 17px; line-height: 1.3; max-width: 175px; }
  .brzi-izbor-vrh > a { font-size: 9px; margin-top: 4px; }
  .brzi-izbor-vrh > a span { margin-left: 3px; }
  .gradovi-dugmad { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
  .gradovi-dugmad button { font-size: 10px; min-height: 38px; padding: 9px 6px; gap: 5px; }
  .gradovi-dugmad button:first-child { grid-column: span 1; white-space: normal; }
  .grad-tacka { width: 4px; height: 4px; }
  .izbor-seta { margin-top: 16px; padding-top: 16px; gap: 12px; }
  .set-naslov { font-size: 11px; }
  .izbor-seta p { font-size: 9px; }
  #brzi-set { width: 100%; justify-content: space-between; }
  #brzi-set button { padding: 9px 11px; min-height: 36px; font-size: 10px; flex: 1; }
  .outlet-refined .kartica .slika .foto-kadar { max-width: 135px; }
  .outlet-refined .ma-slika .foto-kadar { max-width: 200px; }
  .outlet-refined .slicna-kartica .foto-kadar { max-width: 80px; }
  .cijena-seta { flex-wrap: wrap; gap: 3px; font-size: 9px; padding-top: 7px; }
  .cijena-seta b { font-size: 11px; }
  .kupovina-koraci { padding: 0 14px; margin-top: 48px; scroll-margin-top: 80px; }
  .kupovina-uvod { flex-direction: column; gap: 13px; margin-bottom: 20px; }
  .kupovina-uvod h2 { font-size: 25px; }
  .kupovina-uvod > p { font-size: 11px; }
  .koraci-lista { grid-template-columns: 1fr; gap: 12px; }
  .koraci-lista li { padding: 23px; border-radius: 18px; }
  .koraci-lista svg { margin-bottom: 19px; }
  .koraci-lista h3 { font-size: 17px; }
  .koraci-lista p { font-size: 12px; margin-bottom: 18px; }
}

/* Dijeljenje artikla, jasni kontakti i prijedlozi za praznu pretragu. */
.btn-artikal { text-decoration: none; }
.outlet-refined :is(button, a, summary, select, input):focus-visible { outline: 2px solid #ffd16d; outline-offset: 4px; }
.outlet-refined .modal-artikal { padding: 24px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #55504a #161a20; }
.modal-traka { position: sticky; top: -24px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 18px; margin: -24px -24px 24px; background: #15191ff5; backdrop-filter: blur(14px); border-bottom: 1px solid #343b46; }
.modal-traka > span { font-size: 9px; color: #a6b1bf; letter-spacing: 2px; }
.outlet-refined .modal-traka .modal-zatvori { position: static; flex-shrink: 0; width: 40px; height: 40px; }
.ma-info, .ma-detalji > div, .slicna-kartica { min-width: 0; }
.outlet-refined .ma-naslov, .outlet-refined .ma-detalji b { overflow-wrap: anywhere; }
.ma-zaglavlje { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.ma-dijeljenje { position: relative; margin-left: auto; }
.ma-dijeljenje summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 12px; border: 1px solid #47515f; border-radius: 999px; color: #d5dde7; font: 11px var(--font-u); cursor: pointer; }
.ma-dijeljenje summary::-webkit-details-marker { display: none; }
.ma-dijeljenje summary svg { width: 14px; height: 14px; fill: none; stroke: #e1b85f; stroke-width: 1.5; }
.ma-dijeljenje[open] summary, .ma-dijeljenje summary:hover { border-color: #b18a3c; background: #f9ae000b; }
.ma-share-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 4; width: min(320px, calc(100vw - 76px)); padding: 18px; border: 1px solid #706044; border-radius: 16px; background: #1d232d; box-shadow: 0 18px 50px #000a; }
.ma-share-panel label { display: block; font-size: 11px; color: #c7d0dd; margin-bottom: 10px; }
.ma-share-panel input { width: 100%; min-width: 0; padding: 12px 10px; border: 1px solid #505b6b; border-radius: 8px; font: 11px var(--font-u); color: #dae2ec; background: #0b0f16; }
.ma-share-panel button { width: 100%; margin-top: 10px; min-height: 42px; border: 0; border-radius: 999px; background: var(--zuta); color: #11151c; font: 600 12px var(--font-u); cursor: pointer; }
.ma-share-panel p { font-size: 11px; line-height: 1.6; color: #edcb83; }
.ma-share-panel p:not(:empty) { margin-top: 12px; }
.ma-poslovnica { margin-top: 24px; padding: 21px; border: 1px solid #414954; border-radius: 16px; background: #ffffff03; }
.ma-poslovnica h4 { margin: 10px 0 6px; font: 600 17px var(--font-u); color: #e0e6ef; }
.ma-poslovnica p { font-size: 12px; color: #aebac9; line-height: 1.6; margin-bottom: 12px; }
.ma-telefoni { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ma-telefoni a { color: #e5eaf0; font: 600 17px var(--font-b); letter-spacing: .7px; text-decoration: none; padding: 5px 0; }
.ma-email { display: inline-block; max-width: 100%; margin-top: 4px; padding: 5px 0; color: #bac6d7; font-size: 12px; overflow-wrap: anywhere; text-decoration: none; }
.btn-navigacija { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; min-height: 44px; padding: 11px 15px; border: 1px solid #786238; border-radius: 999px; color: #edc779; background: #f9ae0008; font: 500 11px var(--font-u); text-decoration: none; }
.btn-navigacija span { font-size: 18px; }
.btn-navigacija:hover { background: #f9ae0015; border-color: #c0933b; color: #ffe3a7; }
.outlet-refined .fp-kartica { display: flex; flex-direction: column; }
.fp-kartica .fp-mail { margin-bottom: 18px; }
.fp-kartica .btn-navigacija { margin-top: auto; }
.outlet-refined .footer-sitno { color: #98a3b2; line-height: 1.7; }
.outlet-refined .prazno { padding: 42px 28px; border-style: solid; border-color: #3b4553; background: linear-gradient(145deg,#202630,#11151c); }
.prazno h3 { font-size: 21px; line-height: 1.4; }
#prazno-opis { max-width: 510px; margin: 12px auto 0; color: #aab6c7; font-size: 12px; line-height: 1.8; }
.prazno-prijedlozi { display: grid; gap: 10px; max-width: 610px; margin: 24px auto 0; }
.prazno-prijedlozi:empty { display: none; }
.prazno-prijedlog { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 20px; border: 1px solid #515567; border-radius: 14px; background: #ffffff03; text-align: left; font-family: var(--font-u); cursor: pointer; }
.prazno-prijedlog b { display: block; font-size: 13px; font-weight: 600; color: #e1e7f0; }
.prazno-prijedlog small { display: block; margin-top: 7px; font-size: 10px; line-height: 1.6; color: #a8b5c6; }
.prijedlog-broj { color: #f8cd75; font-size: 11px; white-space: nowrap; }
.prijedlog-broj > span { padding-left: 10px; font-size: 18px; }
.prazno-prijedlog:hover { border-color: #c08d31; background: #f9ae0008; }
.ma-nedostupno { max-width: 530px; padding: 40px 10px 50px; margin: auto; text-align: center; }
.ma-nedostupno h3 { margin: 18px 0 15px; font: 600 25px/1.4 var(--font-u); }
.ma-nedostupno p { color: #aebacb; font-size: 13px; line-height: 1.8; }
.outlet-refined .slicna-kartica .s-model { white-space: normal; overflow-wrap: anywhere; min-height: 32px; }
.ma-kupovina { flex-wrap: wrap; }
.ma-ukupno { margin-left: auto; }
.ma-ukupno output { font-variant-numeric: tabular-nums; }

@media (max-width: 600px) {
  .outlet-refined .modal-artikal { padding: 17px; }
  .modal-traka { top: -17px; margin: -17px -17px 20px; padding: 8px 14px; }
  .outlet-refined .modal-traka .modal-zatvori { width: 44px; height: 44px; }
  .ma-zaglavlje { gap: 8px; }
  .ma-dijeljenje summary { font-size: 10px; padding: 8px 11px; }
  .ma-poslovnica { padding: 18px 15px; }
  .ma-poslovnica h4 { font-size: 16px; }
  .ma-email { font-size: 11px; }
  .outlet-refined .prazno { padding: 30px 17px; border-radius: 18px; }
  .prazno h3 { font-size: 19px; }
  #prazno-opis { font-size: 11px; }
  .prazno-prijedlog { flex-direction: column; align-items: start; gap: 12px; padding: 16px; }
  .prazno-prijedlog b { font-size: 12px; }
  .prijedlog-broj { display: flex; justify-content: space-between; width: 100%; }
}
@media (max-width: 380px) {
  .outlet-refined .kartica .cijene { flex-wrap: wrap; row-gap: 8px; }
  .outlet-refined .kartica .nova-cijena { margin-left: auto; }
  .outlet-refined .ma-dimenzija .sezona-txt { display: block; margin-top: 9px; }
}

/* Kompaktan uvod: pretraga bliže vrhu, guma uz tekst i na telefonu. */
.outlet-refined .hero {
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  padding: 20px 24px;
  text-align: left;
}
.hero-uvod { min-width: 0; }
.outlet-refined .hero::before { top: -210px; left: -100px; width: 600px; height: 520px; }
.outlet-refined .hero .nadnaslov { font-size: 9px; letter-spacing: 2.4px; padding: 7px 12px; margin: 0 0 12px; }
.outlet-refined .hero .nadnaslov .puls { width: 6px; height: 6px; flex-shrink: 0; }
.outlet-refined .hero #hero-naslov { font-size: clamp(30px, 3vw, 40px); line-height: 1.13; letter-spacing: -.7px; }
.hero-naslov-red, .outlet-refined .hero #hero-naslov > .zuto { display: block; }
.outlet-refined .hero #hero-naslov > .zuto { margin-top: 3px; }
.outlet-refined .hero .podnaslov { max-width: 660px; margin: 13px 0 14px; font-size: 13px; line-height: 1.65; }
.outlet-refined .hero-brojke { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 640px; gap: 20px; padding-top: 13px; border-top: 1px solid #ffffff12; }
.outlet-refined .hero-brojke .stavka { min-width: 0; }
.outlet-refined .hero-brojke b { font-size: 23px; line-height: 1.2; }
.outlet-refined .hero-brojke span { display: block; margin-top: 5px; font-size: 8px; line-height: 1.5; letter-spacing: 1.4px; }
.outlet-refined .hero-guma { order: 0; align-items: center; min-width: 0; }
.outlet-refined .hero-guma img { width: 252px; max-width: 100%; animation: rotacija 60s linear infinite; filter: drop-shadow(0 15px 24px #0008) drop-shadow(0 0 35px #f9ae0015); }
.outlet-refined .hero-guma .znacka { font-size: 19px; padding: 8px 13px; border-radius: 12px; }
.outlet-refined .hero-guma .znacka small { font-size: 8px; letter-spacing: 1.2px; }
.outlet-refined .hero-guma .znacka.z1 { top: 8%; right: 0; }
.outlet-refined .hero-guma .znacka.z2 { bottom: 8%; left: 0; }

@media (min-width: 701px) and (max-width: 1100px) {
  .outlet-refined .hero { grid-template-columns: minmax(0, 1fr) 220px; gap: 24px; padding: 24px; }
  .outlet-refined .hero #hero-naslov { font-size: clamp(24px, 3.05vw, 32px); }
  .outlet-refined .hero .podnaslov { font-size: 12px; }
  .outlet-refined .hero .nadnaslov { font-size: 8px; letter-spacing: 1.5px; }
  .outlet-refined .hero-guma img { width: 198px; }
  .outlet-refined .hero-guma .znacka { font-size: 16px; padding: 7px 10px; }
  .outlet-refined .hero-guma .znacka small { font-size: 7px; }
  .outlet-refined .hero-guma .znacka.z1 { right: -4px; }
  .outlet-refined .hero-brojke { gap: 12px; }
  .outlet-refined .hero-brojke b { font-size: 21px; }
  .outlet-refined .hero-brojke span { font-size: 7px; letter-spacing: .9px; }
}
@media (max-width: 700px) {
  .outlet-refined .hero { grid-template-columns: minmax(0, 1fr) clamp(108px, 25vw, 160px); gap: 14px 16px; padding: 20px 18px; }
  .hero-uvod { display: contents; }
  .outlet-refined .hero::before { width: 100%; left: 0; }
  .outlet-refined .hero .nadnaslov { grid-column: 1 / -1; grid-row: 1; justify-self: start; margin: 0; font-size: 8px; letter-spacing: 1.4px; padding: 7px 10px; }
  .outlet-refined .hero #hero-naslov { grid-column: 1; grid-row: 2; align-self: center; font-size: clamp(21px, 4.5vw, 29px); line-height: 1.18; letter-spacing: -.5px; }
  .outlet-refined .hero-guma { grid-column: 2; grid-row: 2; align-self: center; padding-bottom: 14px; }
  .outlet-refined .hero-guma img { width: 100%; animation: none; }
  .outlet-refined .hero-guma .znacka.z1 { display: none; }
  .outlet-refined .hero-guma .znacka.z2 { bottom: 0; left: auto; right: 0; padding: 6px 10px; font-size: 14px; border-radius: 9px; transform: rotate(-4deg); }
  .outlet-refined .hero-guma .znacka small { font-size: 6px; letter-spacing: 1px; }
  .outlet-refined .hero .podnaslov { grid-column: 1 / -1; grid-row: 3; margin: 0; max-width: none; font-size: 11px; line-height: 1.65; }
  .outlet-refined .hero-brojke { grid-column: 1 / -1; grid-row: 4; max-width: none; gap: 10px; padding-top: 12px; }
  .outlet-refined .hero-brojke b { font-size: 18px; }
  .outlet-refined .hero-brojke span { font-size: 7px; letter-spacing: .6px; margin-top: 5px; }
}
@media (max-width: 360px) {
  .outlet-refined .hero { grid-template-columns: minmax(0, 1fr) 96px; padding: 18px 14px; gap: 13px 12px; }
  .outlet-refined .hero #hero-naslov { font-size: 20px; }
  .outlet-refined .hero .nadnaslov { font-size: 7px; letter-spacing: 1.2px; }
  .outlet-refined .hero-brojke { gap: 7px; }
  .outlet-refined .hero-brojke b { font-size: 16px; }
  .outlet-refined .hero-brojke span { font-size: 6.5px; letter-spacing: .4px; }
}

.header-inner .business-entry{position:absolute;right:24px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:12px;padding:12px 18px;border:1px solid #6b5827;border-radius:8px;background:#252116;color:#ffca34;font-size:13px;font-weight:700;text-decoration:none}.business-entry:hover{background:#3a3019}.business-entry:focus-visible{outline:2px solid #ffca34;outline-offset:4px}@media(max-width:850px){.header-inner .business-entry{position:static;transform:none;font-size:11px;padding:9px 14px;gap:6px}.header-inner{flex-direction:column;gap:10px}}