/*--------------------------------------------------------------------------HEADER--------------------------------------------------------------------------*/
.proizvod_slika-new {
position: relative;
width: 100%;
aspect-ratio: 1/1;
overflow: hidden;
border-radius: 8px;
}
.proizvod_slika-new::before {
content: "";
position: absolute;
inset: -20px;
background-size: cover;
background-position: center;
filter: blur(25px);
transform: scale(1.2);
z-index: 0;
}
/* ovaj layer daje dodatni blur */
.proizvod_slika-new img.bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(8px);
transform: scale(1.3);
}
/* Slika se razvlaci APSOLUTNO (top/right/bottom/left), a ne preko height:100%.
Razlog: visina okvira dolazi iz aspect-ratio, pa je "100% visine roditelja"
lanac koji Safari na iPhoneu zna razrijesiti na nulu - slika tada nestane,
a ispod nje ostane vidljiv bijeli sloj img.bg (white.webp), dakle prazan
bijeli kvadrat prave velicine. Chrome isti lanac razrjesava ispravno.
S odmacima visina dolazi iz polozaja, ne iz postotka, pa je pouzdana svugdje.
Provjereno: u Chromiumu daje identican rezultat (172x172 na istom mjestu). */
.proizvod_slika-new img.main {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
z-index: 2;
}
.menu_bar {
background-color: #FF4FB3;
}
.menu_bar.is-sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
}
body.has-sticky-menu {
padding-top: 156px;
}
.mob_bar {
position: fixed;
top: 0;
left: 0;
right: 0; /* full width */
z-index: 1000; /* below .sidenav */
}
/* Side drawer must be above header */
.sidenav {
position: fixed;
z-index: 2000;
}
html, body { /*OVO NADODAO RADI OVOG SLIDERA NA VRHU STO SE ROTIRA*/
overflow-x: hidden;
max-width: 100%;
}
/* ---------- Sirina glavnog kontejnera na velikim ekranima ----------
style.css postavlja .body_width na 1200px za sve iznad 1280px, pa je na
1920 iskoristeno samo 63%, a na 2560 svega 47% ekrana. Ovdje se sirina
pusta u stupnjevima, tek iznad 1500px. Laptopi (1366, 1440), tableti i
mobiteli ostaju netaknuti.
Mreza artikala ostaje 4 po redu na svakoj sirini, kartice samo narastu:
1200 -> 215px, 1520 -> 279px, 1700 -> 315px.
Granice su namjerno ispod okruglih brojeva jer traka za pomicanje uzme ~15px:
monitor 1600px daje innerWidth 1585, a 1920px na 125% skaliranja samo 1521. */
@media screen and (min-width: 1500px) {
.body_width {
width: 1400px;
}
}
@media screen and (min-width: 1850px) {
.body_width {
width: 1520px;
}
}
@media screen and (min-width: 2350px) {
.body_width {
width: 1700px;
}
}
.header-web-top {
width: 100%;
background-color: #FF4FB3;
text-align: center;
line-height: 30px;
font-size: 12px;
color: #fff;
font-family: 'Outfit', sans-serif;
overflow: hidden;
}
.cursorpointer {
font-family: 'Outfit', sans-serif;
}
/*.header-top-icon {
color: #fff;
font-size: 12px;
}
.header-top-a {
font-family: 'Outfit', sans-serif;
font-size: 12px;
}*/
.header-middle {
width: 100%;
background-color: #fff;
text-align: center;
padding-top: 30px;
box-shadow: 0 0 1px #aaa;
}
.header-top-new {
display: flex;
justify-content: space-around;
align-items: center;
gap: 20px;
flex-wrap: nowrap;
padding: 1px 20px;
animation: scroll-left 10s linear infinite;
width: max-content;
will-change: transform;
backface-visibility: hidden;
}
.header-top-new .box-1 {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
min-width: 320px;
/*min-width: 250px;*/
text-align: center;
padding: 1px 20px;
/*background-color: #FAFAFA;*/
border-radius: 10px;
/*border: 2px solid #6ECBF0;*/
}
.header-top-new .box-1 i {
/*font-size: 35px;*/
font-size: 20px;
color: #ff4fb3;
margin-right: 15px;
display: block;
padding-top: 8px;
padding-bottom: 8px;
}
.header-top-new .box-1 p {
margin: 0;
/*font-size: 16px;*/
font-size: 14px;
font-weight: 700;
color: #0b3242;
line-height: 1.4;
font-family: 'Outfit', sans-serif;
text-transform: none !important;
letter-spacing: 0.5px;
}
/*@keyframes scroll-left {
0% {
transform: translateX(90%) translateZ(0);
}
100% {
transform: translateX(-90%) translateZ(0);
}
}*/
/* Gornja traka: 4 kutije s min-width:320px + width:max-content na roditelju
daju 1540px, sto je sire od svakog laptopa - na 1366 se rezalo 87px sa
svake strane, skrivao je overflow-x:hidden. Kutije neka se stisnu umjesto
da razvlace stranicu.
Napomena: width:max-content je bio zbog animacije scroll-left, ali su njeni
@keyframes zakomentirani pa animacija ionako ne radi. */
.header-top-new {
width: auto;
max-width: 100%;
}
.header-top-new .box-1 {
flex: 1 1 0;
min-width: 0;
}
.popup-overlay_Opci,
.popup-overlay_Privatnost {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* poluprozirni crni sloj */
z-index: 999; /* postavljamo visoki z-index da bude iznad ostatka sadržaja */
overflow: auto;
}
.popup-content_Opci,
.popup-content_Privatnost {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 40px 20px 20px 20px;
border-radius: 5px;
font-family: 'Outfit', sans-serif;
z-index: 1000; /* postavljamo još viši z-index kako bi bio iznad overlay-a */
max-width: 80%; /* maksimalna širina */
max-height: 90%; /* maksimalna visina sadržaja */
overflow-y: auto; /* omogućava vertikalni scroll ako sadržaj premašuje visinu popup-content-a */
padding-right: 20px; /* dodajemo malo prostora za scrollbar */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#zatvoriPopup_Privatnost,
#zatvoriPopup_Opci {
background-color: #6ECBF0;
border: none;
border-radius: 10px;
padding: 5px 10px;
color: #fff;
}
#zatvoriPopup_Privatnost:hover,
#zatvoriPopup_Opci:hover {
cursor: pointer;
}
#opciuvjeti-link,
#privatnost-link {
text-decoration: underline;
}
#opciuvjeti-link:hover,
#privatnost-link:hover {
cursor: pointer;
color: #6ECBF0;
}
/*--------------------------------------------------------------------------HEADER-KRAJ--------------------------------------------------------------------------*/
.crta-podnaslov {
border: none;
height: 2px;
background: linear-gradient(to right, transparent, #6ECBF0, transparent);
margin: 10px 0 30px 0;
}
.crta-podnaslov-pocetna {
border: none;
height: 2px;
background: linear-gradient(to right, transparent, #6ECBF0, transparent);
width: 30%;
margin: 0px auto 30px auto;
}
.crta-podnaslov-blog {
border: none;
height: 2px;
background: linear-gradient(to right, transparent, #6ECBF0, transparent);
width: 60%;
margin: 10px auto 30px auto;
}
.pocetna-title {
margin-bottom:10px !important;
}
/*--------------------------------------------------------------------------SLIDER--------------------------------------------------------------------------*/
/*.div_banner_web {
background-repeat: no-repeat;
height: 450px;
width: 80%;
margin: 0 auto;
background-color: #dcefec;
}
*/
/* ROTATOR BANERA - cita se iz tablice Slider.
VISINA SE NE ZAKUCAVA. Baneri su 1920x574 (omjer 3.34); s fiksnih 450px
okvir je bio omjera 2.02 pa je "cover" rezao ~40% slike lijevo i desno.
aspect-ratio drzi okvir u omjeru slike, pa slika uvijek stane cijela. */
.slider-bb {
position: relative;
width: 80%;
aspect-ratio: 1920 / 574;
margin: 0 auto;
overflow: hidden;
background-color: #dcefec;
}
/* svaki slajd je preko cijelog okvira, vidljiv je samo onaj s klasom .aktivan */
.slider-bb-slajd {
position: absolute;
inset: 0;
display: block;
background-image: var(--bb-slika);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0;
transition: opacity 0.6s ease-in-out;
pointer-events: none;
}
.slider-bb-slajd.aktivan {
opacity: 1;
pointer-events: auto;
}
/* STRELICE */
.slider-bb-strelica {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: 44px;
height: 44px;
border: none;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.75);
color: #FF4FB3;
font-size: 20px;
line-height: 44px;
cursor: pointer;
padding: 0;
transition: background-color 0.2s ease;
}
.slider-bb-strelica:hover {
background-color: #fff;
}
.slider-bb-prev {
left: 20px;
}
.slider-bb-next {
right: 20px;
}
/* TOCKICE */
.slider-bb-tockice {
position: absolute;
bottom: 18px;
left: 0;
right: 0;
z-index: 3;
display: flex;
justify-content: center;
gap: 8px;
}
.slider-bb-tockica {
width: 11px;
height: 11px;
padding: 0;
border: none;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.65);
cursor: pointer;
transition: background-color 0.2s ease;
}
.slider-bb-tockica.aktivan {
background-color: #FF4FB3;
}
@media screen and (max-width: 567px) {
/* i ovdje bez fiksne visine - inace se opet rezu rubovi.
Ako se u bazu ubace prave mobilne slike drugog omjera (npr. kvadratne),
ovdje treba promijeniti aspect-ratio na taj omjer. */
.slider-bb {
width: 100%;
aspect-ratio: 1920 / 574;
}
.crta-podnaslov-blog {
width: 100%;
}
/* na mobitelu se koristi DatotekaMob iz baze */
.slider-bb-slajd {
background-image: var(--bb-slika-mob);
}
.slider-bb-strelica {
width: 34px;
height: 34px;
line-height: 34px;
font-size: 16px;
}
.slider-bb-prev {
left: 8px;
}
.slider-bb-next {
right: 8px;
}
}
@media (prefers-reduced-motion: reduce) {
.slider-bb-slajd {
transition: none;
}
}
/*----------------------------------------REZERVA ZA STARIJI iOS----------------------------------------*/
/* Safari podrzava "aspect-ratio" tek od iOS 15, a "inset" od iOS 14.5.
Okvir slike artikla i okvir slidera visinu dobivaju ISKLJUCIVO iz aspect-ratio -
bez njega ostanu visoki 0px i slike potpuno nestanu, dok na Androidu i
racunalu sve izgleda uredno.
Duge inacice (top/right/bottom/left) su bezopasne svugdje - moderni
preglednici ih samo prepisu s "inset".
@supports blok se izvrsava SAMO ondje gdje aspect-ratio ne postoji,
pa na novim uredajima ne mijenja bas nista. */
.slider-bb-slajd {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.proizvod_slika-new img.bg {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
@supports not (aspect-ratio: 1 / 1) {
/* postotni padding daje visinu na stari nacin: 100% sirine = kvadrat */
.proizvod_slika-new {
height: 0;
padding-top: 100%;
}
/* uz height:0 na roditelju, relativno pozicionirana slika bi i dalje
bila visoka 0 - zato se ovdje razvlaci apsolutno preko okvira */
.proizvod_slika-new img.main {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 574 / 1920 = 29.9% - isti omjer kao aspect-ratio iznad */
.slider-bb {
height: 0;
padding-top: 29.9%;
}
}
.main-title {
margin-bottom: 40px;
}
/*--------------------------------------------------------------------------SLIDER-KRAJ--------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------BLOG--------------------------------------------------------------------------*/
.blog {
margin-top: 20px;
}
/*--------------------------------------------------------------------------BLOG-KRAJ--------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------CLANAK--------------------------------------------------------------------------*/
#clanak-detaljno-title {
font-size: 35px;
}
.clanak p {
font-family: 'Outfit', sans-serif;
color: #888;
}
.clanak a {
color: #FF4FB3;
text-decoration: none;
transition: all 0.2s ease;
}
.clanak strong {
font-weight: 700;
color: #333;
}
/*--------------------------------------------------------------------------CLANAK-KRAJ--------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------ARTIKAL DETALJNO--------------------------------------------------------------------------*/
#opis p {
font-family: 'Outfit', sans-serif;
/*font-size: 14px;*/
font-size: 16px;
color: #000;
/*color: #888;*/
line-height: 1.6;
margin-bottom: 20px;
}
.proizvod_opsirnije_kolicina {
display: inline-flex;
align-items: center;
border: 1px solid #e3e9f1;
border-radius: 10px;
overflow: hidden;
background: #fff;
margin-bottom: 20px;
}
/* minus / plus */
.proizvod_opsirnije_kolicina .items {
width: 38px;
height: 38px;
border: none;
background: #f8fbff;
color: #6ECBF0;
font-size: 13px;
cursor: pointer;
transition: all 0.2s ease;
}
.proizvod_opsirnije_kolicina .items:hover {
background: #6ECBF0;
color: #fff;
}
/* input */
.proizvod_opsirnije_kolicina .qty {
width: 50px;
height: 38px;
border: none;
text-align: center;
font-size: 14px;
font-weight: 600;
outline: none;
}
/* lagane vertikalne linije između */
.proizvod_opsirnije_kolicina .reduced {
border-right: 1px solid #e3e9f1;
}
.proizvod_opsirnije_kolicina .increase {
border-left: 1px solid #e3e9f1;
}
/* Glavni wrapper */
.option.size_choose {
display: flex;
margin-bottom: 15px;
font-family: Arial, sans-serif;
}
/* Label */
.option.size_choose label {
display: block;
margin-bottom: 5px;
font-weight: 500;
color: #888;
font-family: 'Switzer-Regular', sans-serif;
margin-top: 4px;
margin-right: 10px;
}
/* Select box */
.select-velicina {
width: 100%; /* puni širinu roditelja */
max-width: 200px; /* po želji */
padding: 8px 12px;
border: 2px solid #FF4FB3;
border-radius: 5px;
background-color: #fff;
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
}
/* Hover i fokus */
.select-velicina:hover,
.select-velicina:focus {
border-color: #6ECBF0;
box-shadow: 0 0 5px rgba(224,123,134,0.5);
outline: none;
}
/* Opcije u dropdownu */
.select-velicina option {
padding: 5px 10px;
}
/* Stil za default option */
.select-velicina option[value=""] {
color: #999;
font-style: italic;
}
.boje-det-div {
margin-bottom: 10px;
margin-top: 10px;
display: flex;
align-items: center;
}
.boje-det, .dezen-det {
list-style: none;
padding: 0;
margin: 0 0 0 15px;
display: flex;
gap: 10px;
}
.boje-det li {
width: 30px;
height: 30px;
}
.boje-det li a {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid #ddd;
}
.boje-det li a:hover, .dezen-det li a:hover {
cursor: pointer;
border: 2px solid #000;
}
.boje-det li.active-color a {
border: 4px solid #6ECBF0; /* boja border-a kad je aktivno */
border-radius: 50% !important;
}
.dezen-det-div {
margin-bottom: 10px;
margin-top: 30px;
display: flex;
align-items: center;
}
.dezen-det li {
width: 50px;
height: 50px;
}
.dezen-det li a {
width: 50px;
height: 50px;
border-radius: 0%;
}
.dezen-det li.active-dezen a {
border: 4px solid #6ECBF0; /* boja border-a kad je aktivno */
border-radius: 0% !important;
}
.slika-artikla-det {
position: relative;
width: 100%;
padding-top: 100%; /* Makes it square */
background-size: contain;
background-position: center;
background-repeat: no-repeat;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
transition: transform 0.3s ease;
}
.slika-artikla-deta:hover {
transform: scale(1.02);
}
.zoom-icon {
position: absolute;
top: 10px;
left: 10px;
z-index: 3;
background-color: #fff;
color: #FF4FB3;
padding: 5px 8px;
font-size: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease;
}
.zoom-icon:hover {
color: #6ECBF0;
transform: scale(1.3);
}
/* ---------- Velika slika: okvir, strelice ---------- */
.glavna-slika-okvir {
position: relative;
}
.glavna-slika-link {
position: relative;
display: block;
}
.galerija-strelica {
position: absolute;
top: 50%;
margin-top: -22px;
width: 44px;
height: 44px;
padding: 0;
border: none;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.9);
color: #FF4FB3;
font-size: 20px;
line-height: 1;
cursor: pointer;
z-index: 3;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-webkit-appearance: none;
appearance: none;
transition: background-color 0.25s ease, color 0.25s ease;
}
.galerija-strelica:hover {
background-color: #fff;
color: #6ECBF0;
}
.galerija-prije {
left: 10px;
}
.galerija-poslije {
right: 10px;
}
@media (max-width: 567px) {
.galerija-strelica {
width: 38px;
height: 38px;
margin-top: -19px;
font-size: 17px;
}
}
/* ---------- Male slike ispod glavne slike artikla ---------- */
.skrivena-slika {
display: none;
}
/* .body_width je display:table, a tablica se siri po sadrzaju. Zato bi traka
sa 10 slicica povukla cijelu kolonu za sobom (glavna slika je isla na 720px).
Rjesenje: traka je apsolutno pozicionirana, pa ne ulazi u racunicu sirine.
Okvir joj daje visinu, jer apsolutno dijete ne moze roditelja razvuci. */
.galerija-traka-okvir {
position: relative;
height: 112px;
margin-top: 15px;
}
.galerija-male {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-wrap: nowrap;
align-items: stretch;
box-sizing: border-box;
padding-bottom: 8px;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: #d9d9d9 transparent;
}
.galerija-male::-webkit-scrollbar {
height: 6px;
}
.galerija-male::-webkit-scrollbar-track {
background: transparent;
}
.galerija-male::-webkit-scrollbar-thumb {
background: #d9d9d9;
border-radius: 3px;
}
/* Sirina je postotak trake, ne fiksni px - tako uvijek stane tocno 5 komada
bez obzira na sirinu kolone. Visinu daje align-items: stretch. */
.galerija-mala {
flex: 0 0 calc((100% - 50px) / 5);
min-width: 0;
box-sizing: border-box;
margin: 0 10px 0 0;
padding: 0;
border: 2px solid #e5e5e5;
border-radius: 8px;
background-color: #fff;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
transition: border-color 0.25s ease;
}
.galerija-mala:hover {
border-color: #6ECBF0;
}
.galerija-mala.aktivna {
border-color: #FF4FB3;
}
@media (max-width: 567px) {
.galerija-traka-okvir {
height: 86px;
}
.galerija-mala {
flex: 0 0 calc((100% - 32px) / 4); /* na mobitelu 4, veca meta za prst */
margin: 0 8px 0 0;
}
}
/* Sigurnosna mreza. Traka je apsolutna, pa ako omotac .galerija-traka-okvir
nedostaje u HTML-u (stara stranica iz cachea uz novi CSS), zakaci se za
prvog pozicioniranog pretka i legne TOCNO preko glavne slike.
Kad je traka izravno dijete .gallery-single, znaci da omotaca nema -
tad je vracamo u normalan tok ispod slike. */
.gallery-single > .galerija-male {
position: static;
flex-wrap: wrap;
overflow: visible;
padding-bottom: 0;
}
.gallery-single > .galerija-male > .galerija-mala {
height: 104px;
margin-bottom: 10px;
}
@media (max-width: 567px) {
.gallery-single > .galerija-male > .galerija-mala {
height: 78px;
}
}
/* ---------- Tabovi na artiklu (Opis / Provjeri dostupnost / Videozapis) ----------
style.css daje labelama width: calc(33.33% - 54px) i font 24px. S tri taba
i duzim nazivima to na uskom ekranu pukne - fiksnih 54px pojede vecinu
sirine, pa tekst izlazi izvan labele. Ovdje se to skalira. */
@media (max-width: 991px) {
.tabset > label {
width: calc(33.33% - 8px);
padding: 10px 4px;
font-size: 17px;
line-height: 1.25;
overflow-wrap: break-word;
word-wrap: break-word;
vertical-align: bottom;
}
}
@media (max-width: 567px) {
.tabset > label {
width: calc(33.33% - 4px);
padding: 8px 2px;
font-size: 13px;
}
.tab-panel {
padding: 20px 15px;
}
}
/* Prazni tabovi dok se ne napune sadrzajem */
.tab-uskoro {
margin: 0;
color: #999;
font-style: italic;
}
/* ---------- Tabovi premjesteni uz sliku ----------
Prije su isli punom sirinom (1380px), pa je labela bila 426px. U desnom
stupcu je stupac ~690px, a style.css labelama oduzima fiksnih 54px i drzi
font na 24px - "Provjeri dostupnost" tu vise ne stane. Zato se ovdje
skalira prema stupcu, neovisno o sirini ekrana. */
.tabovi-uz-sliku {
margin-top: 25px;
clear: both;
}
.tabovi-uz-sliku .tabset > label {
width: calc(33.33% - 8px);
padding: 10px 4px;
font-size: 15px;
line-height: 1.25;
overflow-wrap: break-word;
word-wrap: break-word;
vertical-align: bottom;
/* Boje: neaktivno plavo na blago sivoj, aktivno roza na bijeloj.
Donji rub je svijetlo roza kroz cijeli red, a pod aktivnim tabom
puna roza - tako se vidi gdje si. style.css je aktivnom tabu davao
blijedu #FF4FB3 i sivu sjenu, sto se gubilo uz ostatak stranice. */
background-color: #f6f7f8;
color: #6ECBF0;
border-bottom: 3px solid #fce4ee;
border-radius: 10px 10px 0 0;
box-shadow: none;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* style.css crta ::after kao plavu crticu sirine 22px - ne treba nam */
.tabovi-uz-sliku .tabset > label::after {
display: none;
}
.tabovi-uz-sliku .tabset > label:hover {
background-color: #fdf1f6;
color: #FF4FB3;
box-shadow: none;
}
.tabovi-uz-sliku .tabset > input:checked + label {
background-color: #fff;
color: #FF4FB3;
font-weight: 600;
border-bottom-color: #FF4FB3;
box-shadow: none;
}
.tabovi-uz-sliku .tab-panel {
padding: 20px;
}
/* style.css daje .videoWrapper padding-bottom:56.25% (16:9) ALI I
padding-top:25px. Tih 25px pokvari omjer - okvir ispadne 1.57 umjesto
1.78, pa YouTube popuni visinu i odreze sliku sa strana (naslov videa
bio je odsjecen zdesna). Bez gornjeg paddinga okvir je tocno 16:9. */
.tabovi-uz-sliku .videoWrapper {
padding-top: 0;
}
/* Videozapis se prikazuje samo kad artikal stvarno ima video (222 od 8466),
pa tabova zna biti dva ili tri - sirina labele mora pratiti taj broj. */
.tabovi-uz-sliku.tabovi-2 .tabset > label {
width: calc(50% - 8px);
}
@media (max-width: 567px) {
.tabovi-uz-sliku.tabovi-2 .tabset > label {
width: calc(50% - 4px);
}
}
/* Skraceni opis + gumb "Procitaj vise". Klasu skracen dodaje Script.js,
i to samo ako je sadrzaj visi od 480px - inace gumba nema. */
.tabovi-uz-sliku .tab-panel {
position: relative;
}
.tabovi-uz-sliku .tab-panel.skracen {
max-height: 420px;
overflow: hidden;
}
/* preljev prema bijelom, da se vidi da tekst ide dalje */
.tabovi-uz-sliku .tab-panel.skracen::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 140px;
background: linear-gradient(rgba(255,255,255,0), #fff 70%);
pointer-events: none;
}
.opis-vise {
display: block;
margin: 18px auto 0;
padding: 10px 26px;
border: 2px solid #6ECBF0;
border-radius: 999px;
background-color: #fff;
color: #6ECBF0;
font-family: 'Outfit', sans-serif;
font-size: 15px;
font-weight: 600;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
transition: background-color 0.2s ease, color 0.2s ease;
}
.opis-vise:hover {
background-color: #6ECBF0;
color: #fff;
}
/* dok je skraceno, gumb lebdi na dnu iznad preljeva */
.tab-panel.skracen .opis-vise {
position: absolute;
left: 50%;
margin-left: -85px; /* umjesto transform, radi i na starijim preglednicima */
width: 170px;
bottom: 16px;
margin-top: 0;
z-index: 2;
}
@media (max-width: 567px) {
.tabovi-uz-sliku .tabset > label {
width: calc(33.33% - 4px);
padding: 8px 2px;
font-size: 13px;
}
.tabovi-uz-sliku .tab-panel {
padding: 15px;
}
}
/* ---------- Okvir bloka artikla ----------
style.css je imao box-shadow: 0 0 1px #aaa - ostra siva vlas iz starijeg
naraštaja dizajna. Ostatak stranice (filteri, footer, pilule) koristi
mekani rub sa zaobljenjem, pa se blok artikla pridruzuje toj obitelji.
Boja je svijetla plava, u tonu s #6ECBF0. */
.proizvod_opsirnije_margin {
border: 2px solid #d9eff9;
border-radius: 14px;
box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}
/* ---------- Naslov artikla ----------
style.css mu daje height:100px i overflow:hidden. Naslov u jednom retku
je visok 30px, pa je ispod njega ostajalo 70px praznine - a naslov duzi
od tri retka bi se odrezao. Visina neka prati tekst. */
.proizvod_opsirnije_naslov {
height: auto;
overflow: visible;
margin-bottom: 16px;
}
/* ---------- Podaci o artiklu (proizvodjac / sifra / dostupnost) ----------
Prije su bili tri retka s crticom i
. Sad su retci s oznakom lijevo
i vrijednoscu desno, a dostupnost je pilula u istom stilu kao ustede i
kvacice u tabu dostupnosti. */
.podaci-artikla {
margin-top: 0;
margin-bottom: 20px;
padding: 0;
font-size: 14px;
}
.podaci-artikla .podatak {
display: flex;
align-items: center;
padding: 9px 0;
border-bottom: 1px solid #f1f1f1;
}
.podaci-artikla .podatak:last-child {
border-bottom: none;
}
.podatak-oznaka {
flex: 0 0 110px;
font-family: 'Outfit', sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.6px;
text-transform: uppercase;
color: #a0a0a0;
}
.podatak-vrijednost {
flex: 1 1 auto;
min-width: 0;
font-weight: 600;
color: #333;
word-break: break-word;
}
.podatak-stanje {
flex: 0 0 auto;
padding: 4px 12px;
border-radius: 999px;
font-family: 'Outfit', sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.3px;
}
.podatak-stanje.je-dostupno {
background-color: #e8f8ec;
color: #2f9e44;
}
.podatak-stanje.nije-dostupno {
background-color: #fdecec;
color: #c92a2a;
}
@media (max-width: 567px) {
.podatak-oznaka {
flex: 0 0 92px;
font-size: 11px;
}
.podaci-artikla {
font-size: 13px;
}
}
/* ---------- Kratki opis ispod naziva ---------- */
.proizvod_opis_kratki {
margin: 0 0 18px;
padding: 12px 16px;
border-left: 3px solid #6ECBF0;
border-radius: 0 8px 8px 0;
background-color: #f6fbfe;
font-family: 'Outfit', sans-serif;
font-size: 14px;
line-height: 1.5;
color: #555;
}
.proizvod_opis_kratki p:last-child {
margin-bottom: 0;
}
/* ---------- Cijene na artiklu detaljno ---------- */
.proizvod_opsirnije_cijena {
display: flex;
flex-direction: column;
justify-content: center;
height: auto;
min-height: 60px;
padding: 18px 20px;
border: 2px solid #fec0da;
border-radius: 12px;
background-color: #fce4ee;
font-size: 36px;
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.4px;
}
.proizvod_opsirnije_cijena_nova {
position: static;
margin: 0;
font-size: 36px;
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.4px;
color: #FF4FB3;
}
.proizvod_opsirnije_cijena_stara {
position: static;
margin: 6px 0 0;
font-size: 17px;
font-weight: 500;
line-height: 1.2;
letter-spacing: 0;
color: #9a9a9a;
}
@media (max-width: 991px) {
.proizvod_opsirnije_cijena,
.proizvod_opsirnije_cijena_nova {
font-size: 32px;
}
}
@media (max-width: 567px) {
.proizvod_opsirnije_cijena,
.proizvod_opsirnije_cijena_nova {
font-size: 29px;
}
.proizvod_opsirnije_cijena_stara {
font-size: 15px;
}
}
/* ---------- Ukupna usteda u kosarici ----------
Redak se uklapa u pojas ostalih zbrojeva (float:left, width:100%,
text-align:right, siva podloga), a sama pilula je u istom stilu kao
.proizvod_usteda na artiklu detaljno. */
.kosarica_usteda_red {
float: left;
width: 100%;
box-sizing: border-box;
padding: 6px 20px 10px;
background-color: #eee;
text-align: right;
}
.kosarica_usteda {
display: inline-flex;
align-items: center;
padding: 8px 16px;
border-radius: 999px;
background-color: #fce4ee;
color: #FF4FB3;
font-family: 'Outfit', sans-serif;
line-height: 1;
white-space: nowrap;
}
.kosarica_usteda i {
margin-right: 9px;
font-size: 13px;
opacity: 0.85;
}
.kosarica_usteda_oznaka {
margin-right: 8px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.6px;
text-transform: uppercase;
}
.kosarica_usteda_iznos {
font-size: 17px;
font-weight: 800;
}
@media (max-width: 567px) {
.kosarica_usteda {
padding: 7px 13px;
}
.kosarica_usteda_oznaka {
font-size: 12px;
}
.kosarica_usteda_iznos {
font-size: 15px;
}
}
/* ---------- Dostupnost po poslovnicama ---------- */
.dostupnost-lista {
list-style: none;
margin: 0 0 14px;
padding: 0;
}
.dostupnost-stavka {
display: flex;
align-items: flex-start;
padding: 12px 0;
border-bottom: 1px solid #f1f1f1;
}
.dostupnost-stavka:last-child {
border-bottom: none;
}
.dostupnost-kvacica {
flex: 0 0 auto;
margin-right: 12px;
margin-top: 2px;
font-size: 18px;
color: #37b24d;
}
.dostupnost-tekst {
flex: 1 1 auto;
min-width: 0;
}
/* isto kao gore - bez "a" na pocetku pobjedjuje a:link i naziv ispadne crn */
a.dostupnost-naziv {
display: block;
font-family: 'Outfit', sans-serif;
font-size: 15px;
font-weight: 700;
color: #6ECBF0;
text-decoration: none;
}
a.dostupnost-naziv:hover {
color: #FF4FB3;
text-decoration: underline;
}
.dostupnost-adresa {
display: block;
margin-top: 2px;
font-size: 13px;
line-height: 1.35;
color: #777;
}
/* Pilula, u istom stilu kao .proizvod_usteda - broj tako izgleda kao
nesto na sto se pritisne, a ne kao obican tekst.
Selektor mora poceti s "a" jer style.css ima a:link { color: inherit },
sto je specificnost (0,1,1) i pobjedjuje golu klasu (0,1,0). Bez toga
broj ispadne crn. */
a.dostupnost-tel {
display: inline-flex;
align-items: center;
margin-top: 8px;
padding: 7px 15px;
border-radius: 999px;
background-color: #fce4ee;
color: #FF4FB3;
font-family: 'Outfit', sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
text-decoration: none;
}
a.dostupnost-tel i {
margin-right: 8px;
font-size: 12px;
opacity: 0.85;
}
.dostupnost-oznaka {
flex: 0 0 auto;
margin-left: 10px;
padding: 4px 10px;
border-radius: 999px;
background-color: #e8f8ec;
color: #2f9e44;
font-family: 'Outfit', sans-serif;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.dostupnost-skladiste {
margin: 0 0 12px;
padding: 10px 14px;
border-radius: 10px;
background-color: #eaf6fd;
color: #3a7c99;
font-size: 13px;
line-height: 1.4;
}
.dostupnost-prazno {
margin: 0 0 8px;
font-size: 14px;
color: #555;
}
/* Ogradna napomena uz dostupnost. Isti okvir kao .dostupnost-skladiste iznad,
samo crven: plavo je informacija, crveno je ograda. Vrijednosti su namjerno
iste da izgledaju kao par. */
.dostupnost-napomena {
margin: 0;
padding: 10px 14px;
border-radius: 10px;
background-color: #fdecec;
color: #c0392b;
font-size: 13px;
line-height: 1.4;
}
@media (max-width: 567px) {
.dostupnost-oznaka {
font-size: 11px;
padding: 3px 8px;
}
.dostupnost-adresa {
font-size: 12px;
}
}
/* ---------- Usteda na akcijskom artiklu ----------
Pilula u istim roza tonovima kao filteri (#fce4ee) i akcijska oznaka
(#FF4FB3). Razmaci idu preko margina, ne preko gap-a, jer gap u flexu
ne radi na iOS-u ispod 14.1. */
.proizvod_usteda {
display: inline-flex;
align-items: center;
margin-top: 12px;
padding: 9px 18px;
border: 2px solid #fec0da;
border-radius: 12px;
background-color: #fce4ee;
color: #FF4FB3;
font-family: 'Outfit', sans-serif;
line-height: 1;
white-space: nowrap;
}
.proizvod_usteda i {
margin-right: 9px;
font-size: 14px;
opacity: 0.85;
}
.usteda_oznaka {
margin-right: 8px;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.6px;
}
.usteda_iznos {
font-size: 18px;
font-weight: 800;
}
@media (max-width: 567px) {
.proizvod_usteda {
padding: 8px 14px;
}
.usteda_oznaka {
font-size: 13px;
}
.usteda_iznos {
font-size: 16px;
}
}
/*--------------------------------------------------------------------------ARTIKAL DETALJNO -> KRAJ--------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------STATIKA--------------------------------------------------------------------------*/
.statika p {
font-family: 'Outfit', sans-serif !important;
font-size: 16px !important;
color: #888 !important;
line-height: 1.6 !important;
margin-bottom: 20px !important;
}
.statika a {
color: #FF4FB3 !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
}
/*--------------------------------------------------------------------------STATIKA -> KRAJ--------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------ARTIKAL KARTICA--------------------------------------------------------------------------*/
.proizvod {
border-radius: 10px;
}
/* Tabs (CSS-only behavior target) */
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}
.cat_list {
margin-bottom: 50px;
}
.tab-link {
font-weight: 600;
position: relative;
font-size: 21px;
text-transform: uppercase !important;
color: #FF4FB3 !important;
font-size: 18px;
margin-right: 15px;
}
.tab-link::after {
content: "|" !important;
position: absolute;
right: -12px;
color: #FF4FB3;
}
.tab-link:last-child::after {
content: "" !important;
}
.tab-link.active {
font-weight: 600;
font-size: 23px;
border-bottom: 2px solid #6ECBF0;
color: #6ECBF0 !important;
background-color: #fff !important;
}
.div-pocetna-tab {
border-bottom: 3px solid #FF4FB3;
margin-bottom: 40px;
}
.proizvod_cijena_nova {
font-size: 15px;
}
.proizvod_cijena_stara {
font-size: 12px;
}
.pocetna_kat_div {
background-color: #F4F4F4;
padding: 10px;
border-radius: 10px;
}
.pocetna_kat_div::after {
content: "";
display: block;
clear: both;
}
/*----------------------------------------POCETNA - IZDVOJENE KATEGORIJE (novi raspored)----------------------------------------*/
/* Sve je vezano na klasu .pocetna_kat_flex koja postoji SAMO na tom bloku.
Nista od postojecih klasa (.div_4, .div_5, .div_60_100, .proizvod) se ne mijenja
globalno - samo se nadjacava unutar ovog bloka. */
/* Tri stupca jednake visine: artikli 60%, slika 20%, izbornik 20% */
.pocetna_kat_flex {
display: flex;
align-items: stretch;
gap: 10px;
}
/* STUPAC S ARTIKLIMA - grid umjesto floatova.
minmax(0, 1fr), NE 1fr: "1fr" znaci minmax(auto, 1fr), pa siroka slika
moze rastegnuti svoj stupac i stupci ispadnu nejednaki. */
.pocetna_kat_flex > .div_60_100 {
float: none;
width: auto;
min-width: 0;
flex: 3 1 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
align-content: start;
}
/* KARTICA - grid vec drzi jednaku sirinu, ovo drzi jednaku visinu */
.pocetna_kat_flex .div_4 {
float: none;
width: auto;
min-width: 0;
margin: 0;
}
.pocetna_kat_flex .proizvod {
margin: 0;
min-width: 0;
height: 100%;
display: flex;
flex-direction: column;
}
/* CIJENA
- margin-top: auto -> gura cijenu i dugme na dno kartice, bez obzira
je li naziv u jednom ili tri reda
- desna margina 55px -> kutija zavrsava PRIJE ikone kosarice, koja je
apsolutno pozicionirana uz desni rub kartice.
Bez toga ikona stoji preko teksta cijene.
- lijeva margina 8px -> vraca sirinu koju je oduzela desna margina
- height: auto -> akcijska cijena ima dva reda (nova + precrtana)
- nowrap -> cijena se nikad ne lomi u dva reda
(najduza na sajtu je 59px, prostora ima 83px) */
.pocetna_kat_flex .proizvod .proizvod_cijena {
/* donja margina MORA ostati 20px - ikona kosarice je apsolutno
pozicionirana na bottom:5px + margin-bottom:15px = 20px od dna.
Svaka druga vrijednost i cijena vise nije u ravnini s ikonom. */
margin: 10px 55px 20px 8px;
margin-top: auto;
padding: 8px 6px;
height: auto;
min-height: 20px;
white-space: nowrap;
}
/* ikona uz sam rub kartice, da cijeni ostane sto vise mjesta */
.pocetna_kat_flex .proizvod .proizvod_kosarica {
margin-right: 8px;
}
/* DESNA DVA STUPCA - visinu diktira najvisi stupac, ne fiksnih 646px */
.pocetna_kat_flex > .div_5 {
float: none;
width: auto;
flex: 1 1 0;
display: flex;
}
.pocetna_kat_flex .menu_proizvodi_pocetna_slika {
height: auto;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.pocetna_kat_flex .menu_proizvodi_pocetna {
display: block;
height: auto;
width: 100%;
padding-bottom: 100px; /* prostor za apsolutno pozicionirani "Pogledaj sve" */
}
/* Popis grupa uz istaknutu kategoriju na pocetnoj. Boja i :hover stajali su
na kontejneru (.menu_proizvodi_podnaslov u style.css), pa je prelaz misem
bojao sve veze odjednom i nijedna se nije isticala. Hover ide na vezu. */
.pocetna_kat_flex .menu_proizvodi_podnaslov a {
display: inline-block;
font-size: 15px;
line-height: 1.5;
font-weight: 400;
letter-spacing: .2px;
padding: 3px 0 3px 10px;
border-left: 2px solid transparent;
color: #5a5a5a;
transition: color .15s ease, border-color .15s ease, padding-left .15s ease;
}
.pocetna_kat_flex .menu_proizvodi_podnaslov a:hover {
color: #FF4FB3;
border-left-color: #FF4FB3;
padding-left: 16px;
}
@media screen and (max-width: 1100px) {
.pocetna_kat_flex > .div_60_100 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media screen and (max-width: 567px) {
.pocetna_kat_flex {
flex-direction: column;
}
.pocetna_kat_flex > .div_60_100 {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
/* uze kartice na mobitelu -> malo manje mjesta rezervirano za ikonu.
Donja margina i ovdje ostaje 20px zbog ravnine s ikonom. */
.pocetna_kat_flex .proizvod .proizvod_cijena {
margin: 10px 50px 20px 8px;
margin-top: auto;
}
.pocetna_kat_flex .menu_proizvodi_pocetna_slika {
min-height: 300px;
}
.pocetna_kat_flex .menu_proizvodi_pocetna {
padding-bottom: 90px;
}
/* Na mobitelu nema :hover, pa su ove veze ostale obican tekst - nista
ne govori da se na njih tapka.
se gasi da svaka veza bude redak
pune sirine, s crtom razdvajanja i strelicom desno. */
.pocetna_kat_flex .menu_proizvodi_podnaslov br {
display: none;
}
.pocetna_kat_flex .menu_proizvodi_podnaslov a {
display: block;
position: relative;
padding: 11px 26px 11px 0;
border-left: 0;
border-bottom: 1px solid #f0eff0;
}
/* Zadnje dijete je
, zato :last-of-type a ne :last-child. */
.pocetna_kat_flex .menu_proizvodi_podnaslov a:last-of-type {
border-bottom: 0;
}
/* Strelica: kvadratic s dvije stranice, zarotiran za 45 stupnjeva. */
.pocetna_kat_flex .menu_proizvodi_podnaslov a::after {
content: "";
position: absolute;
right: 6px;
top: 50%;
width: 6px;
height: 6px;
border-right: 2px solid #FF4FB3;
border-bottom: 2px solid #FF4FB3;
transform: translateY(-50%) rotate(-45deg);
}
.pocetna_kat_flex .menu_proizvodi_podnaslov a:active {
color: #FF4FB3;
}
}
/*--------------------------------------------------------------------------ARTIKAL KARTICA-KRAJ--------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------3 BOX-A--------------------------------------------------------------------------*/
.div-pocetna-novo {
width: calc(16% - 0px) !important;
}
.boxes {
margin-bottom: 30px;
width: 100%;
display: flex;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
}
.boxes .box1 {
width: 32%;
aspect-ratio: 1 / 1;
/*border: 2px solid #FF4FB3;*/
border-radius: 10px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.boxes .box1:hover {
cursor: pointer; /* pokazivač ruke */
transform: translateY(-5px) scale(1.05); /* malo iskače */
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* shadow iza */
}
.boxes .box1 img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/*--------------------------------------------------------------------------3 BOX-A-> KRAJ--------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------BLOG SECTION--------------------------------------------------------------------------*/
.div-blog {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 40px;
}
.div-blog .div_4 {
width: calc(25% - 15px); /* 4 items per row with gap */
flex: 0 0 calc(25% - 15px);
}
.blog-card {
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
}
.blog-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}
.blog-slika {
width: 100%;
height: 200px;
background-size: contain; /* bilo cover - rezalo je uspravne slike i do 78% visine;
izvori idu od omjera 0.8 do 3.88 pa nema kadra koji pase svima */
background-position: center;
background-repeat: no-repeat;
}
.body_width.clanak > * {
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.body_width.clanak > .blog-media {
text-align: center;
}
/* slika se vise ne prelijeva preko stupca */
.body_width.clanak > .blog-media img {
max-width: 100%;
height: auto;
}
@media screen and (min-width: 1500px) {
.body_width.clanak > * {
max-width: 1000px;
}
}
@media screen and (min-width: 1850px) {
.body_width.clanak > * {
max-width: 1100px;
}
}
@media screen and (min-width: 2350px) {
.body_width.clanak > * {
max-width: 1200px;
}
}
.blog-content {
padding: 20px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.blog-title {
font-family: 'Outfit', sans-serif;
font-size: 18px;
font-weight: 700;
color: #333;
margin: 0 0 10px 0;
line-height: 1.4;
min-height: 55px;
max-height: 55px;
overflow: hidden;
}
.blog-description {
font-family: 'Outfit', sans-serif;
font-size: 14px;
color: #666;
line-height: 1.6;
margin: 0 0 15px 0;
flex-grow: 1;
min-height: 130px;
max-height: 130px;
overflow: hidden;
}
.blog-read-more {
font-family: 'Outfit', sans-serif;
font-size: 14px;
font-weight: 600;
color: #FF4FB3;
text-decoration: none;
transition: color 0.3s ease;
}
.blog-card:hover .blog-read-more {
color: #6ECBF0;
}
/*--------------------------------------------------------------------------BLOG SECTION -> KRAJ--------------------------------------------------------------------------*/
.txtcapitalize {
text-transform: capitalize;
}
.txtuppercase {
text-transform: uppercase;
}
.txtlowercase {
text-transform: lowercase;
}
.txtinitial {
text-transform: initial;
}
.cursorpointer {
cursor: pointer;
}
.pager_brojevi {
border: none;
width: 50px;
height: 50px;
padding: 0px;
}
.payment-option-box {
padding: 20px;
border: 1px solid #e1e1e1;
}
.mb-30 {
margin-bottom: 30px;
}
.payment-option-box-inner {
padding: 10px;
display: inline-block;
/*width: 100%;*/
}
.gray-bg {
background: #f5f5f5;
}
.payment-top-box {
display: inline-block;
width: 100%;
/*margin-bottom: 20px;*/
}
.left-side {
float: left;
}
.paypal-box {
border: 1px solid #ddd;
float: left;
padding: 10px;
position: relative;
margin-left: 10px;
}
.paypal-img {
padding: 5px 5px 0px 5px;
}
.ulPlacanje {
margin: 0px;
}
/*
* {
text-transform: lowercase !important;
}*/
/*--------------------------------------------------------------------------LIJEVI MENI NA KATEGORIJAMA------------------------------------------------------------------------*/
/* Glavni container */
.left-menu {
background: #ffffff;
border: 2px solid #fce4ee;
border-radius: 14px;
padding: 15px;
box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}
/* Jedna stavka */
.left-menu-item {
margin-bottom: 8px;
}
/* Link */
.left-menu-link {
display: block;
padding: 10px 14px;
border-radius: 10px;
text-decoration: none;
transition: all 0.2s ease;
}
/* Naslov */
.left-menu-title {
font-size: 17px;
font-weight: 700;
color: #333;
font-family: 'Outfit', sans-serif;
}
/* Hover efekt */
.left-menu-link:hover {
background: #fce4ee;
}
/*--------------------------------------------------------------------------LIJEVI MENI NA KATEGORIJAMA -> KRAJ------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------KOŠARICA------------------------------------------------------------------------*/
.payment-option-box-inner {
font-family: 'Outfit', sans-serif;
}
/* ---------- Redak kosarice: naziv, cijene, iznos ----------
Sve je prije bilo #888 - naziv, cijena i iznos u istoj sivoj, pa se nije
vidjelo sto je vaznije. Sad vrijedi ista logika kao na artiklu detaljno:
roza znaci snizeno, plava je obicna cijena, a iznos retka je najtamniji
jer je to broj koji kupac zbraja.
Napomena: pravilo "br + *" koje je ovdje stajalo nije radilo nista - nova
cijena je bila goli tekst iza
, a ne element, pa selektor nije imao
sto pogoditi. Sad je omotana u . */
.kosarica_proizvod_cijena {
text-align: left;
margin-bottom: 5px;
margin-top: 30px;
line-height: 1.25;
}
.kosarica_proizvod_cijena s {
display: block;
font-size: 13px;
font-weight: 500;
color: #b0b0b0;
text-decoration: line-through;
}
.kosarica_cijena_nova {
display: block;
font-size: 19px;
font-weight: 700;
color: #FF4FB3;
}
.kosarica_cijena_obicna {
display: block;
font-size: 19px;
font-weight: 600;
color: #6ECBF0;
}
.kosarica_proizvod_naziv {
font-size: 16px;
font-weight: 600;
color: #333;
}
.kosarica_proizvod_iznos {
font-size: 20px;
font-weight: 700;
color: #FF4FB3;
}
.tel-greska {
margin-bottom: 18px;
padding: 12px 16px;
border-radius: 10px;
background-color: #fdecec;
color: #c92a2a;
font-family: 'Outfit', sans-serif;
font-size: 14px;
font-weight: 600;
}
.tel-polje {
display: flex;
align-items: stretch;
}
.tel-prefiks {
display: flex;
align-items: center;
padding: 0 12px;
border: 1px solid #ccc;
border-right: none;
border-radius: 5px 0 0 5px;
background-color: #f4f6f7;
color: #555;
font-weight: 600;
white-space: nowrap;
}
.tel-unos {
border-radius: 0 5px 5px 0 !important;
min-width: 0;
}
.tel-napomena {
margin-top: 6px;
font-size: 12px;
line-height: 1.4;
color: #888;
}
.tel-unos:invalid:not(:placeholder-shown) {
border-color: #e03131;
}
/* ---------- Donji blok: zbrojevi ----------
style.css ih je sve drzao na #888, pa se "Ukupno za platiti" nije razlikovalo
od dostave. Sad su medjuzbrojevi tamniji i citljiviji, a konacni iznos je
krupan i u plavoj - istoj kao naslov stranice. */
.kosarica_proizvod_dostava {
color: #666;
font-size: 15px;
}
.kosarica_proizvod_ukupno {
color: #6ECBF0;
font-size: 22px;
font-weight: 700;
border-top: 2px solid #d9eff9;
}
@media (max-width: 567px) {
.kosarica_cijena_nova,
.kosarica_cijena_obicna {
font-size: 16px;
}
.kosarica_proizvod_naziv {
font-size: 14px;
}
.kosarica_proizvod_iznos {
font-size: 17px;
}
.kosarica_proizvod_dostava {
font-size: 14px;
}
.kosarica_proizvod_ukupno {
font-size: 19px;
}
}
/*PROMO KOD*/
.popust-kod {
font-family: 'Outfit', sans-serif;
font-weight: 300; /* Outfit-Light */
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
max-width: 500px;
border-radius: 10px;
}
/* NASLOV */
.popust-kod p {
border-bottom: 2px solid #6ECBF0;
font-size: 16px;
color: #333;
text-align: center;
padding-bottom: 5px;
width: 100%;
}
/* FLEX ROW ZA INPUT + BUTTON */
.popust-row {
display: flex;
flex-direction: column;
gap: 10px; /* razmak između inputa i buttona */
justify-content: center;
width: 100%;
}
/* INPUT */
.popust-row input {
width: 85%;
height: 12px;
padding: 10px;
border: 1px solid #6ECBF0;
border-radius: 6px;
font-size: 14px;
}
/* BUTTON */
.popust-row button {
width: 44%;
padding: 10px;
background-color: #FF4FB3;
color: #fff;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: 500;
font-family: 'Outfit', sans-serif;
transition: background 0.2s ease;
}
.popust-row button:hover {
background-color: #6ECBF0;
}
/* OZNAKA NA ARTIKLU U KOSARICI */
.kosarica_popust_oznaka {
display: inline-block;
margin-top: 6px;
padding: 2px 10px;
font-family: 'Outfit', sans-serif;
font-size: 12px;
font-weight: 500;
line-height: 18px;
color: #1B7F4B;
background-color: #E7F7EE;
border: 1px solid #7FCFA3;
border-radius: 20px;
white-space: nowrap;
}
.kosarica_popust_oznaka i {
margin-right: 4px;
}
/* PORUKA O PRIMJENI INFLUENCER KODA */
.popust-kod p.popust-poruka {
border-bottom: none;
font-family: 'Outfit', sans-serif;
font-weight: 300;
font-size: 14px;
color: #333;
text-align: center;
width: 100%;
margin: 0;
padding: 8px 10px;
background-color: #EAF8FE;
border: 1px solid #6ECBF0;
border-radius: 6px;
animation: popustPorukaUlaz 0.35s ease-out;
}
/* KOD NE VRIJEDI */
.popust-kod p.popust-poruka-ne {
color: #B4353A;
background-color: #FDECEC;
border-color: #F3B4B6;
}
/* BROJEVI U PORUCI */
.pulsiraj {
display: inline-block;
font-weight: 600;
font-size: 16px;
color: #FF4FB3;
animation: pulsPopust 0.9s ease-in-out 3;
}
@keyframes popustPorukaUlaz {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulsPopust {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.35);
}
}
@media (prefers-reduced-motion: reduce) {
.popust-kod p.popust-poruka,
.pulsiraj {
animation: none;
}
}
.heading-hvala {
text-align: center;
font-family: 'Outfit', sans-serif;
font-size: 24px;
font-weight: 700;
color: #888;
}
.heading-hvala span {
color: #FF4FB3;
text-decoration: underline;
}
/*--------------------------------------------------------------------------KOŠARICA -> KRAJ------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------WIDGET KOŠARICA------------------------------------------------------------------------*/
/* Mini Cart Widget */
/* Izgled je iz iste obitelji kao filter kartice (.left-menu) i sortiranje
(.ddlSortiraj): bijelo, meki rub, radijus i blaga sjena. */
.mini-cart {
position: fixed;
top: 0;
right: -420px; /* sakriveno izvan ekrana */
width: 420px;
height: 100vh;
background: #fff;
z-index: 10000;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 18px 0 0 18px;
box-shadow: -8px 0 30px rgba(0,0,0,.18);
transition: right .3s ease, box-shadow .3s ease;
}
/* Zatamnjenje stranice iza panela. Sjena sa spread 100vmax crta se IZVAN
okvira elementa, pa pokrije cijeli ekran - bez dodatnog elementa i bez
diranja JS-a. Ne hvata klikove, sluzi samo oku. */
.mini-cart.open {
right: 0;
box-shadow: -8px 0 30px rgba(0,0,0,.18), 0 0 0 100vmax rgba(31,16,24,.38);
}
.mini-cart-header {
background: #6ECBF0;
color: #fff;
padding: 16px 18px;
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
.mini-cart-header h3 {
margin: 0;
font-size: 19px;
font-weight: 600;
letter-spacing: .3px;
font-family: 'Outfit', sans-serif;
}
#kosarica-widget-title {
color: #fff !important;
}
#closeCart {
background: rgba(255,255,255,.18);
border: none;
color: #fff;
font-size: 24px;
width: 34px;
height: 34px;
border-radius: 50%;
cursor: pointer;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
transition: background .2s ease;
}
#closeCart:hover {
background: rgba(255,255,255,.35);
}
/* min-height:0 je nuzan: bez njega flex stavka ne smije biti niza od svog
sadrzaja, pa se popis ne skraceni nego istisne ukupno i dugme s ekrana. */
.mini-cart-items {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding: 8px 18px;
}
.minicart-item {
display: flex;
gap: 14px;
padding: 12px 10px;
margin: 0 -10px;
border-radius: 12px;
border-bottom: 1px solid #f4f2f3;
transition: background .15s ease;
}
.minicart-item:last-child {
border-bottom: 0;
}
.minicart-item:hover {
background: #fdf6fa;
}
.minicart-item-image {
flex-shrink: 0;
width: 74px;
height: 74px;
}
/* contain, ne cover: proizvodi su slikani na bijelom i nisu kvadratni,
cover im je rezao rubove. */
.minicart-item-image img {
width: 100%;
height: 100%;
object-fit: contain;
background: #fff;
border-radius: 10px;
border: 1px solid #efedee;
padding: 3px;
box-sizing: border-box;
}
.minicart-item-details {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.minicart-item-name {
margin: 0 0 6px 0;
font-size: 13.5px;
font-weight: 600;
color: #2f2f2f;
line-height: 1.35;
font-family: 'Outfit', sans-serif;
transition: color .15s ease;
}
.minicart-item-name:hover {
color: #FF4FB3;
}
.minicart-item-quantity,
.minicart-item-price {
margin: 0;
font-size: 13px;
color: #666;
font-family: 'Outfit', sans-serif;
}
/* Cijena je jedini broj zbog kojeg se ovdje gleda - neka se i vidi. */
.minicart-item-price {
font-size: 14px;
font-weight: 700;
color: #FF4FB3;
}
.minicart-item-delete {
flex-shrink: 0;
width: 34px;
height: 34px;
background: transparent;
border: none;
border-radius: 50%;
color: #b9b4b7;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all .2s ease;
align-self: center;
}
.minicart-item-delete:hover {
background: #ffe9f4;
color: #FF4FB3;
}
.minicart-item-delete i {
font-size: 15px;
}
/* Naslov i kartice stoje IZVAN .mini-cart-items, pa nemaju roditelja s
paddingom - bili su zalijepljeni uz lijevi rub panela. */
.related-items-title {
font-family: 'Outfit', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: .6px;
text-transform: uppercase;
color: #9a9499;
margin: 4px 0 10px;
padding: 0 18px;
flex-shrink: 0;
}
.related-items {
display: flex;
gap: 10px;
flex-direction: row;
padding: 0 18px 14px;
flex-shrink: 0;
}
.related-items > div {
flex: 1 1 0;
min-width: 0;
max-width: none;
display: flex;
flex-direction: column;
gap: 6px;
text-align: center;
background: #fff;
border: 1px solid #f6e7f0;
border-radius: 12px;
padding: 8px;
transition: border-color .15s ease, box-shadow .15s ease;
}
.related-items > div:hover {
border-color: #FF4FB3;
box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.related-item-image {
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 8px;
}
.related-item-image img {
width: 100%;
height: 100%;
object-fit: contain;
}
.related-item-name {
margin: 0;
font-size: 11px;
font-weight: 600;
color: #5e585c;
font-family: 'Outfit', sans-serif;
line-height: 1.3;
text-transform: none !important;
/* dva retka pa tri tockice, umjesto tvrdog rezanja na 16px visine */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.related-item-price {
margin: 0;
font-size: 12.5px;
font-weight: 700;
color: #FF4FB3;
font-family: 'Outfit', sans-serif;
}
.mini-cart-total {
padding: 14px 18px;
background: #fff;
font-size: 17px;
font-weight: 700;
color: #2f2f2f;
border-top: 1px solid #f0eef0;
font-family: 'Outfit', sans-serif;
flex-shrink: 0;
}
/* Dugme je bilo #6ECBF0 na traci #6ECBF0 - isti ton kao podloga ispod sebe,
pa se nije vidjelo da je uopce dugme. */
.mini-cart-pay {
height: auto;
background: #fff;
padding: 0 18px 18px;
display: block;
flex-shrink: 0;
}
.mini-cart-pay a {
display: block;
}
.mini-cart-pay button {
width: 100%;
background: #FF4FB3;
color: #fff;
border: none;
padding: 14px 20px;
font-size: 16px;
font-weight: 700;
font-family: 'Outfit', sans-serif;
cursor: pointer;
border-radius: 12px;
box-shadow: 0 6px 16px rgba(255,79,179,.30);
transition: background .2s ease, transform .1s ease, box-shadow .2s ease;
}
.mini-cart-pay button:hover {
background: #ef3ba3;
box-shadow: 0 8px 20px rgba(255,79,179,.38);
}
.mini-cart-pay button:active {
transform: translateY(1px);
}
/*--------------------------------------------------------------------------WIDGET KOŠARICA -> KRAJ------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------KATEGORIJE-----------------------------------------------------------------------*/
.sort-div {
margin-bottom: 30px;
}
#fieldset-sort {
border: none !important;
}
/* Izgled preuzet s filter kartica (.left-menu + .left-menu-title), da
sortiranje i filteri izgledaju kao ista obitelj. Nativna strelica se gasi
s appearance:none i crta se ista fa-angle-down kao na filterima. */
.ddlSortiraj {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-sizing: border-box;
/* sirina neka ostane prirodna (~303px, od najduze opcije). width:100% bi
ga rastegnuo na 1400px jer mu je roditelj cijela sirina sadrzaja, a
filter je u uzem lijevom stupcu. Lijevi rubovi se ionako poklapaju. */
width: auto;
max-width: 100%;
background-color: #ffffff;
border: 2px solid #fce4ee;
border-radius: 14px;
padding: 15px 42px 15px 15px;
box-shadow: 0 6px 18px rgba(0,0,0,0.05);
font-family: 'Outfit', sans-serif;
font-size: 17px;
font-weight: 700;
color: #333;
cursor: pointer;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23333333' d='M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 14px 14px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ddlSortiraj:hover {
border-color: #FF4FB3;
}
.ddlSortiraj:focus {
outline: none;
border-color: #FF4FB3;
box-shadow: 0 0 5px rgba(193,102,168,0.4);
}
/* Padajuci popis crta operativni sustav - tu vrijedi samo osnovno */
.ddlSortiraj option {
font-size: 15px;
font-weight: 400;
color: #333;
background-color: #fff;
}
/* fieldset ima zadani min-width koji bi razbio width:100% */
#fieldset-sort {
margin: 0;
padding: 0;
min-width: 0;
}
.div_6-nadgrupe {
position: relative;
width: 250px;
background: #fff;
border-bottom: 1px solid #f1f1f1;
}
/* Tekst NadGrupe */
.div_6-nadgrupe > .menu_naglaseno span {
display: block;
padding: 4px 8px;
font-weight: 500;
transition: background 0.2s ease;
}
/* Hover NadGrupe */
.div_6-nadgrupe:hover {
background: #ffeaf5;
box-shadow: inset 3px 0 0 #FF4FB3;
}
/* ============================= */
/* GRUPE (desni panel) */
/* ============================= */
.div_6-grupe-wrapper {
position: absolute;
top: 0;
left: 100%;
width: 250px;
background: #fff;
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
z-index: 1000;
display: none;
}
/* Prikaži desni panel */
.div_6-nadgrupe:hover > .div_6-grupe-wrapper {
display: block;
}
/* Pojedinačna grupa */
.div_6-grupe {
border-bottom: 1px solid #f5f5f5;
width: 100%;
}
/* Tekst Grupe */
.div_6-grupe span {
display: block;
padding: 4px 8px;
transition: all 0.2s ease;
}
/* Hover Grupe */
.div_6-grupe:hover {
background: #ffeaf5;
box-shadow: inset 3px 0 0 #FF4FB3;
}
.menu_naglaseno.has-sub span::after {
content: "›";
float: right;
font-size: 20px;
line-height: 1;
font-weight: 700;
color: #FF4FB3;
opacity: 0.65;
transition: opacity 0.15s ease, transform 0.15s ease;
}
/* Na hover strelica postane puna i malo se pomakne u smjeru otvaranja. */
.div_6-nadgrupe:hover > .menu_naglaseno.has-sub span::after,
.div_6-grupe:hover > .menu_naglaseno.has-sub span::after {
opacity: 1;
transform: translateX(2px);
}
/* ============================= */
/* PODGRUPE (treći nivo) */
/* ============================= */
/* Wrapper podgrupa */
.div_6-podgrupe-wrapper {
position: absolute;
top: 0;
left: 100%; /* otvara se desno od Grupe */
width: 250px;
background: #fff;
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
z-index: 1000;
display: none; /* prikazuje se samo na hover */
}
/* Hover na Grupu → prikaži podgrupe */
.div_6-grupe:hover > .div_6-podgrupe-wrapper {
display: block;
}
/* Pojedinačna podgrupa */
.div_6-podgrupe {
border-bottom: 1px solid #f5f5f5;
width: 100%;
}
/* Tekst podgrupe */
.div_6-podgrupe span {
display: block;
padding: 4px 8px;
transition: all 0.2s ease;
}
/* Hover podgrupe */
.div_6-podgrupe:hover {
background: #ffeaf5;
box-shadow: inset 3px 0 0 #FF4FB3;
}
/*--------------------------------------------------------------------------KATEGORIJE -> KRAJ-----------------------------------------------------------------------*/
/*--------------------------------------------------------------------------KONTAKT-----------------------------------------------------------------------*/
.buci_lokacije {
display: flex;
gap: 30px;
flex-wrap: wrap;
}
.buci_lokacija {
flex: 1;
min-width: 220px;
padding: 20px;
background: #f7f7f7;
border-radius: 8px;
transition: transform 0.2s, box-shadow 0.2s;
}
.buci_lokacija:hover {
transform: translateY(-3px);
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.buci_lokacija strong {
font-size: 18px;
color: #FF4FB3; /* ljubičasta */
font-weight: 700;
}
.buci_lokacija p {
margin: 8px 0;
color: #333; /* tamno siva za tekst */
line-height: 1.5;
}
.buci_lokacija a {
color: #FF4FB3; /* tamnija ljubičasta za linkove */
text-decoration: none;
font-weight: 500;
transition: color 0.2s;
}
.buci_lokacija a:hover {
color: #FF69B4; /* hot pink na hover */
text-decoration: underline;
}
.buci_lokacija span {
color: #FF4FB3; /* ista boja za naglašeni tekst (npr. “Maloprodaja:” ili “Veleprodaja:”) */
font-weight: 600;
}
/*--------------------------------------------------------------------------KONTAKT -> KRAJ-----------------------------------------------------------------------*/
/*--------------------------------------------------------------------------FOOTER-----------------------------------------------------------------------*/
/* ===== CUSTOM FOOTER STYLING ===== */
.footer-slonic img {
display: block;
width: 200px;
max-width: 100%;
height: auto;
margin: 0 auto;
}
@media (max-width: 991px) {
.footer-slonic img {
width: 150px;
}
}
.footer-custom {
/*background: linear-gradient(135deg, #6ECBF0 0%, #6AA399 100%);*/
color: #fff;
padding: 60px 0 40px;
position: relative;
overflow: hidden;
}
/* Optional subtle pattern overlay */
.footer-custom::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.03) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.03) 0%, transparent 50%);
pointer-events: none;
}
.footer-container-custom {
display: flex;
flex-wrap: nowrap; /* Changed from wrap to nowrap */
gap: 30px; /* Reduced from 50px */
/*justify-content: space-between;*/
position: relative;
z-index: 1;
overflow-x: auto; /* Allow horizontal scroll if needed on very small screens */
}
.footer-col {
flex: 1;
min-width: 200px; /* Reduced from 240px */
max-width: 280px; /* Added max-width to prevent too much stretching */
animation: fadeInUp 0.6s ease-out;
}
/* Slonic u footeru. Sjedi na dnu stupca, kao na predlosku.
Izvorna slika ima 419x525 piksela - to je gornja granica, iznad toga
se samo naduvava i gubi ostrinu. */
.footer-slonic {
display: flex;
align-items: flex-end;
justify-content: center;
/* fiksna sirina - s flex:1 bi ga ostala tri stupca stisnula na 216px */
flex: 0 0 auto;
width: 280px;
min-width: 0;
max-width: 280px;
}
.footer-slonic img {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 768px) {
.footer-slonic {
max-width: none;
}
.footer-slonic img {
width: 180px;
}
}
/* Naslovi */
.footer-title-custom {
font-size: 15px; /* Reduced from 16px */
font-weight: 700;
margin-bottom: 20px; /* Reduced from 25px */
text-transform: uppercase;
letter-spacing: 1.2px; /* Reduced from 1.5px */
position: relative;
font-family: 'Outfit', sans-serif;
padding-bottom: 10px; /* Reduced from 12px */
}
/* Underline accent */
.footer-title-custom::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 40px; /* Reduced from 50px */
height: 3px;
background: #8ccced; /*#FF4FB3*/
border-radius: 2px;
transition: width 0.3s ease;
}
.footer-col:hover .footer-title-custom::after {
width: 70px; /* Reduced from 80px */
}
/* Linkovi */
.footer-links ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links ul li {
margin-bottom: 10px; /* Reduced from 12px */
transform: translateX(0);
transition: transform 0.3s ease;
}
.footer-links ul li:hover {
transform: translateX(5px);
}
.footer-links a {
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
transition: all 0.3s ease;
font-size: 13px; /* Reduced from 14px */
font-family: 'Outfit', sans-serif;
display: inline-flex;
align-items: center;
position: relative;
}
.footer-links a::before {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 2px;
background: #FF4FB3;
transition: width 0.3s ease;
}
.footer-links a:hover {
color: #fff;
padding-left: 0;
}
.footer-links a:hover::before {
width: 100%;
}
/* Ikonice */
.footer-links i {
margin-right: 8px; /* Reduced from 10px */
width: 18px; /* Reduced from 20px */
transition: all 0.3s ease;
color: #8ccced; /*#FF4FB3*/
font-size: 14px; /* Reduced from 15px */
}
.footer-links a:hover i {
color: #fff;
transform: scale(1.15);
}
#aposlovnice {
scroll-margin-top: 100px; /* visina headera */
}
#aposlovnice ul li strong {
font-weight: 600;
font-size: 16px;
}
/* Fade in animation */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Delay animation for each column */
.footer-col:nth-child(1) {
animation-delay: 0.1s;
}
.footer-col:nth-child(2) {
animation-delay: 0.2s;
}
.footer-col:nth-child(3) {
animation-delay: 0.3s;
}
.footer-col:nth-child(4) {
animation-delay: 0.4s;
}
/*--------------------------------------------------------------------------BRENDOVI-----------------------------------------------------------------------*/
.brand-list {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 0;
list-style: none;
}
/* je i sam flex spremnik da ga kartica ispuni po visini.
NE stavljati height:100% na - unutar flex stavke to stvara kruznu
ovisnost, pa ostane nizi od kartice i redovi se preklapaju. */
.brand-list li {
width: calc(24% - 14px);
display: flex;
}
/* Cijela plocica je poveznica - zato je kartica na , a ne na ,
da hover i klik pokrivaju istu povrsinu. */
.brand-list li a {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 25px 15px;
background-color: #fff;
border: 1px solid #eee;
border-radius: 10px;
text-decoration: none;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.brand-list li a:hover {
transform: translateY(-6px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.10);
border-color: #6ECBF0;
}
/* Zadana visina prostora za logo drzi sve kartice jednake, bez obzira
na omjer pojedinog loga i na to je li se slika vec ucitala (lazy). */
.brand-list .brand-logo {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 70px;
}
.brand-list img {
width: auto;
height: auto;
max-width: 60%;
max-height: 100%;
object-fit: contain;
display: block;
transition: transform 0.25s ease;
}
.brand-list li a:hover img {
transform: scale(1.08);
}
.brand-list .brand-naziv {
font-family: 'Outfit', sans-serif;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.3px;
color: #888;
text-align: center;
transition: color 0.25s ease;
}
.brand-list li a:hover .brand-naziv {
color: #FF4FB3;
}
/* MOBITEL - dva brenda po redu umjesto cetiri.
Racunica: 2 x (50% - 10px) + 20px razmaka = tocno 100% sirine.
Sve je pod .brand-list, koji postoji samo na stranici brendova. */
@media screen and (max-width: 567px) {
.brand-list li {
width: calc(50% - 10px);
}
}
@media (prefers-reduced-motion: reduce) {
.brand-list li a,
.brand-list img {
transition: none;
}
.brand-list li a:hover {
transform: none;
}
.brand-list li a:hover img {
transform: none;
}
}
/*--------------------------------------------------------------------------BRENDOVI -> KRAJ-----------------------------------------------------------------------*/
/*--------------------------------------------------------------------------PRETRAGA-----------------------------------------------------------------------*/
.pretraga-div {
width: 100% !important;
}
#pretraga_title {
margin-top: 50px !important;
}
/*--------------------------------------------------------------------------PRETRAGA -> KRAJ-----------------------------------------------------------------------*/
/*--------------------------------------------------------------------------NOVITETI-----------------------------------------------------------------------*/
.noviteti-div {
width: calc(100% - 20px) !important;
}
/*--------------------------------------------------------------------------NOVITETI -> KRAJ-----------------------------------------------------------------------*/
/*--------------------------------------------------------------------------@MOBILE--------------------------------------------------------------------------------*/
@media (max-width: 768px) {
.groups-left {
display: flex;
}
.div-pocetna-novo {
width: calc(50% - 0px) !important;
}
.has-sticky-mob #mobHeaderBottom {
position: fixed;
padding: 10px 0;
left: 0;
width: 100%;
background: #fff;
z-index: 9999;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/*.has-sticky-mob #mobHeaderBar .div_25 {
display: none;
}*/
.footer-custom {
padding: 40px 0 30px;
}
.footer-container-custom {
flex-direction: column;
flex-wrap: wrap;
gap: 35px;
overflow-x: visible;
}
.footer-col {
width: 100%;
min-width: auto;
max-width: none;
}
.footer-title-custom {
font-size: 15px;
margin-bottom: 18px;
}
.footer-links a {
font-size: 13px;
}
.footer-links ul li {
margin-bottom: 10px;
}
.main-title {
font-size: 19px;
}
/* NASLOVI NA POCETNOJ - ista debljina fonta kao na desktopu.
style.css u ovom istom medijskom upitu prebacuje h1 i h2 sa Switzer-Bold
na Switzer-Regular; ovdje se to vraca, ali SAMO za ova dva naslova.
Klase .main-title i .main-subtitle postoje jedino na Default.aspx,
pa ostali naslovi na sajtu ostaju nepromijenjeni. */
.main-title,
.main-subtitle {
font-family: 'Switzer-Bold', sans-serif;
}
body#default {
padding-top: 150px;
}
.izbornik_mob {
z-index: 9999 !important;
}
.div_banner_web {
background-repeat: no-repeat;
height: 550px;
width: 100%;
}
.boxes {
flex-direction: column;
}
.boxes .box1 {
width: 100%;
aspect-ratio: 1 / 1;
margin-bottom: 15px;
}
.tab-link {
font-size: 15px;
}
.header-middle {
display: none;
}
.header-top-new {
display: none !important;
}
.menu_bar {
display: none;
}
.proizvod_cijena_nova {
font-size: 12px;
}
.proizvod_cijena_stara {
font-size: 11px;
}
/* Preko cijelog ekrana - zaobljeni lijevi rub i zatamnjenje iza vise
nemaju smisla kad nema nicega sto bi se vidjelo pokraj panela. */
.mini-cart {
width: 100%;
right: -100%;
border-radius: 0;
}
.mini-cart.open {
box-shadow: none;
}
/* max-height je bio rucna racunica koja nije znala za blok "Slicni
proizvodi" ispod sebe, pa je dugme znalo ispasti ispod ekrana.
Flex s min-height:0 to izracuna sam. */
.mini-cart-items {
max-height: none;
padding: 8px 15px;
}
/* Blog mobile styles */
.div-blog {
gap: 15px;
}
.div-blog .div_4 {
width: 100%; /* Full width on mobile - 1 per row */
flex: 0 0 100%;
}
.blog-slika {
height: 180px;
}
.blog-content {
padding: 15px;
}
.blog-title {
font-size: 16px;
min-height: 43px;
max-height: 43px;
overflow: hidden;
}
.blog-description {
font-size: 13px;
}
.proizvod_opsirnije_kosarica {
width: 100%;
}
#social_media {
display: flex;
justify-content: center;
gap: 20px;
align-items: center;
margin-top: 10%;
}
#social_media li {
list-style: none;
}
#social_media li a {
font-size: 40px !important;
color: #FF4FB3;
}
.div_6-nadgrupe > .menu_naglaseno span {
font-weight: 600;
font-size: 16px;
}
/* .div_6-nadgrupe > .menu_naglaseno span::after {
content: "›";
float: right;
font-size: 30px;
margin-right: 10px;
opacity: 0.4;
}*/
#pretraga_title {
margin: 100px 0 25px 0 !important;
}
.proizvod_putanja {
/*margin-top: 200px;*/
margin-top: 50px;
}
.art-det-div {
width: calc(90% - 0px);
}
.main-title-default {
font-size: 22px !important;
color: #6ECBF0 !important;
}
#fieldset-sort {
border: none !important;
display: flex;
justify-content: center;
}
/* .sidenav {
overflow: visible;
}*/
/*.panel {
overflow: visible;
}*/
.div_6-grupe-wrapper {
left: 0 !important;
top: 40px !important;
}
}
/*test*/
.mobile-menu,
.mobile-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.mobile-menu ul {
display: none;
}
.menu-item {
display: flex;
justify-content: space-between;
align-items: center;
}
.mobile-menu a {
display: block;
padding: 14px;
text-decoration: none;
color: #333;
flex: 1;
}
.menu-toggle {
width: 40px;
text-align: center;
cursor: pointer;
}
.menu-toggle:after {
content: ">";
font-size: 18px;
}
.menu-toggle.open:after {
content: "▼";
}
.mobile-menu ul a {
padding-left: 30px;
}
.mobile-menu ul ul a {
padding-left: 50px;
}
.nadgrupa-item-mob {
font-size: 18px !important;
}
.grupa-item-mob {
font-size: 16px !important;
color: #888 !important;
}
.podgrupa-item-mob {
font-size: 14px !important;
color: #888 !important;
}
/*--------------------------------------------------------------------------
NEDOSTUPNI ARTIKLI
Prije se nedostupnost vidjela samo na artikal detaljno, i to kao tekst
koji je nasljedivao stil dugmeta "Dodaj u kosaricu" - pa je izgledao
klikabilno. Na karticama nije pisalo nista, samo bi nestala ikona
kosarice i ostala prazna rupa.
--------------------------------------------------------------------------*/
/* Prigusena slika. Filter na omotacu stvara stacking context, pa oznaka
sigurno ostaje iznad slike bez obzira na redoslijed u DOM-u. */
.proizvod.nema-na-stanju .proizvod_slika-new,
.proizvod.nema-na-stanju .proizvod_slika {
opacity: 0.5;
filter: grayscale(60%);
}
/* Naslov u sivo. Cijena ostaje roza kao i na dostupnim artiklima - cijena je
podatak i ne mijenja se time sto artikla trenutno nema; nedostupnost vec
nosi badge i prigusena slika. */
.proizvod.nema-na-stanju .proizvod_naslov {
color: #6f6f6f;
}
/* Kartica nedostupnog artikla se ne smije dizati na hover kao kupiva. */
.proizvod.nema-na-stanju:hover {
box-shadow: 0 0 1px #aaa;
}
/* ARTIKAL DETALJNO
.nedostupno je dosad imao samo stil .proizvod_opsirnije_kosarica, dakle
plavi gradijent, cursor: pointer, hover koji ga podize i active koji ga
pritisne. Izgledao je kao zivo dugme. Specificnost (0,2,0) odnosno
(0,3,0) na hover/active je dosta da pobijedi izvorna pravila. */
.proizvod_opsirnije_kosarica.nedostupno {
background-color: #e9eaec;
background-image: none;
color: #6f737a;
cursor: default;
box-shadow: inset 0 0 0 1px #d5d7da;
}
.proizvod_opsirnije_kosarica.nedostupno:hover,
.proizvod_opsirnije_kosarica.nedostupno:active {
transform: none;
box-shadow: inset 0 0 0 1px #d5d7da;
}
/* Natpis na mjestu gdje stoji dugme za kosaricu. Iste pozicijske vrijednosti
kao .proizvod_kosarica (bottom 5 + margin-bottom 15, right 0 + margin-right 15)
da sjedne tocno gdje je bilo dugme, samo siroko koliko tekst trazi. */
.proizvod_nedostupno_natpis {
position: absolute;
bottom: 5px;
right: 0;
margin-right: 15px;
margin-bottom: 15px;
height: 37px;
line-height: 37px;
padding: 0 7px;
border-radius: 4px;
background-color: #eceef0;
color: #6f737a;
font-size: 11px;
font-weight: 500;
white-space: nowrap;
}
/* Kartica se skalira s vieportom, pa se prostor za cijenu uz badge (75px)
mijenja ovako - izmjereno: 567px->143px, 540->131, 480->103, 414->72,
375->53. Do 480px cijena stane i uz najdulji iznos; ispod toga trocifrena
cijena zavuce zadnji znak pod badge. Na telefonima zato cijena ide van, a
badge preuzme cijeli red. visibility umjesto display da red zadrzi visinu. */
@media (max-width: 480px) {
.proizvod.nema-na-stanju .proizvod_cijena_nova,
.proizvod.nema-na-stanju .proizvod_cijena_stara {
visibility: hidden;
}
.proizvod.nema-na-stanju .proizvod_nedostupno_natpis {
left: 0;
margin-left: 15px;
text-align: center;
}
}
/*--------------------------------------------------------------------------
PAGER NA MOBITELU
Pet dugmadi po 50px + margin 10px (dakle 70px svako) = 350px, plus padding
20px s obje strane = 390px. Na 360px ekranu je dostupno 338px, na 320px
samo 303px, pa zadnje dugme (») padne u drugi red.
--------------------------------------------------------------------------*/
@media (max-width: 567px) {
/* izmedu dugmadi su tekstualni cvorovi i trose sirinu. font-size: 0
na roditelju ih svede na nulu, a dugmad dobiju svoju velicinu natrag. */
.pager {
padding: 10px 0;
font-size: 0;
}
.pager_brojevi {
width: 44px;
height: 44px;
margin: 5px 3px;
font-size: 14px;
}
}
/* Cijena po sredini kad nema akcijske cijene.
.proizvod_cijena ima fiksnu visinu 20px + 8px paddinga = 36px, a
.proizvod_cijena_nova ima line-height: 8px, pa tekst sjedi 4px od vrha i
17px od dna - vidno visoko. Kad ima i prekrizena stara cijena, dva djeteta
popune prostor i to izgleda dobro, pa se dira samo slucaj s jednom cijenom.
:only-child je tocno taj slucaj - ako nema akcije, ispise se samo
.proizvod_cijena_nova. Line-height 20px popuni cijelu visinu sadrzaja, tekst
se u njoj centrira, a visina kutije ostaje ista jer je fiksna. */
.proizvod_cijena_nova:only-child {
line-height: 20px;
}
/*--------------------------------------------------------------------------
PAGER ISPOD ARTIKALA, NE PORED
.tablicaArtikala drzi kartice (.div_4, float: left) ali ih nije zatvarala,
pa joj je visina bila 0 i floatovi su ispadali van. Pager je zato zavrsavao
u praznom stupcu zadnjeg reda umjesto ispod mreze.
Clearfix na kontejneru - klasa dosad nije imala nikakav CSS, pa ovo nista
ne prepisuje. Vrijedi za svih 7 listinga i Ponuda.aspx.
--------------------------------------------------------------------------*/
.tablicaArtikala::after {
content: "";
display: block;
clear: both;
}
/*--------------------------------------------------------------------------
PADAJUCI MENI NA MOBITELU
Na dodir nema hovera, pa se "gdje sam" ne moze pokazati prelaskom misa.
Umjesto toga: otvorena kategorija ostaje oznacena (klasu .otvoren dodaje
Script.js uz .open na strelici), a dodir daje kratki odziv.
--------------------------------------------------------------------------*/
/* Otvorena kategorija - ostaje oznacena dok je podmeni otvoren. */
.mobile-menu .menu-item.otvoren {
background: #ffeaf5;
box-shadow: inset 3px 0 0 #FF4FB3;
}
.mobile-menu .menu-item.otvoren > a {
color: #FF4FB3 !important;
}
/* Odziv na dodir. */
.mobile-menu a:active,
.mobile-menu .menu-toggle:active {
background: #ffeaf5;
}
/* Strelica: izrazenija i u boji brenda. Umjesto zamjene znaka (> pa ▼)
rotira se isti znak, pa je prijelaz miran i oblik dosljedan desktopu. */
.menu-toggle:after {
content: "›";
font-size: 26px;
font-weight: 700;
line-height: 1;
color: #FF4FB3;
display: inline-block;
transition: transform 0.2s ease;
}
.menu-toggle.open:after {
content: "›";
transform: rotate(90deg);
}
/*--------------------------------------------------------------------------
KOSARICA NA MOBITELU
style.css je stavci davao sliku pune sirine s padding-top: 100%, dakle
kvadrat od ~353px na telefonu od 375px. Stavka je ispadala 528px visoka,
a stranica s tri artikla 4398px.
Ovdje stavka postaje mreza: mala slicica lijevo, naziv gore desno, a ispod
njega kolicina lijevo te cijena i iznos desno. VB se ne dira, samo se
postojeci elementi rasporede po mrezi.
--------------------------------------------------------------------------*/
@media (max-width: 567px) {
.kosarica_proizvod {
display: grid;
grid-template-columns: 90px minmax(0, auto) minmax(0, 1fr);
grid-template-areas:
"slika naziv naziv"
"slika kolicina cijena"
"slika kolicina iznos";
column-gap: 12px;
row-gap: 4px;
align-items: center;
align-content: start;
height: auto;
line-height: 1.35;
padding: 12px 40px 12px 12px;
overflow: visible;
}
.kosarica_proizvod_slika {
grid-area: slika;
width: 90px;
height: 90px;
padding-top: 0;
align-self: start;
background-size: contain;
border-radius: 8px;
}
.kosarica_proizvod_naziv {
grid-area: naziv;
float: none;
width: auto;
padding: 0;
font-size: 14px;
line-height: 1.35;
text-align: left;
}
.kosarica_proizvod_kolicina {
grid-area: kolicina;
float: none;
width: auto;
height: auto;
line-height: 1;
text-align: left;
}
.kosarica_proizvod_kolicina .kosarica_proizvod_kolicina_unos {
width: 48px;
height: 36px;
padding: 0 4px;
text-align: center;
font-size: 14px;
}
.kosarica_proizvod_cijena {
grid-area: cijena;
float: none;
width: auto;
padding-right: 0;
text-align: right;
line-height: 1.3;
}
/* Oznaka uz iznos - vidi se samo ovdje, na mobitelu. Specificnost (0,2,0)
je namjerna: pravilo koje je skriva stoji nize u datoteci, pa bi uz
jednaku specificnost ono pobijedilo. */
.kosarica_proizvod_iznos .kosarica_iznos_oznaka {
display: block;
color: #9a9a9a;
font-weight: 400;
font-size: 12px;
line-height: 1.2;
}
.kosarica_proizvod_iznos {
grid-area: iznos;
float: none;
width: auto;
padding-right: 0;
text-align: right;
line-height: 1.3;
white-space: nowrap;
}
/* Kanta u gornji desni kut stavke, umjesto preko slike. */
.kosarica_proizvod_delete {
float: none;
width: 26px;
height: 26px;
top: 10px;
right: 8px;
left: auto;
background-size: contain;
}
}
/* Oznaka uz iznos u kosarici je samo za mobitel - vidi medijski upit gore. */
.kosarica_iznos_oznaka {
display: none;
}
/* ---------- Traka s obavijesti o kolacicima ----------
Ispisuje je Komponente.TrakaUvjeti() iz Copyright(), i to samo dok kolacic
"uvjeti1" ne postoji.
z-index 1500 je namjerno izmedju .mob_bar (1000) i .sidenav (2000): traka
stoji iznad sadrzaja, ali je bocni izbornik i kosarica (10000) prekriju kad
se otvore, umjesto da im visi preko dna. */
.uvjeti_traka {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1500;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 18px;
padding: 14px 20px;
background: #fff;
border-top: 2px solid #fce4ee;
box-shadow: 0 -6px 18px rgba(0,0,0,.08);
font-family: 'Outfit', sans-serif;
}
.uvjeti_traka_tekst {
max-width: 760px;
font-size: 15px;
line-height: 1.5;
color: #5a5a5a;
}
.uvjeti_traka_tekst a {
color: #FF4FB3;
text-decoration: underline;
}
.uvjeti_traka_tekst a:hover {
color: #6ECBF0;
}
.uvjeti_traka_gumb {
flex-shrink: 0;
border: none;
padding: 11px 34px;
background: #FF4FB3;
color: #fff;
font-family: inherit;
font-size: 15px;
font-weight: 700;
border-radius: 12px;
cursor: pointer;
box-shadow: 0 6px 16px rgba(255,79,179,.30);
transition: background .2s ease, transform .1s ease;
}
.uvjeti_traka_gumb:hover {
background: #e63f9f;
}
.uvjeti_traka_gumb:active {
transform: translateY(1px);
}
/* Podloga ispod sadrzaja da traka ne prekrije zadnji redak podnozja. Klasu i
tocnu visinu postavlja Script.js: na uskom ekranu se tekst prelomi u vise
redaka, pa bi fiksna vrijednost ili prekrila podnozje ili ostavila prazninu.
Broj u var() je samo zastita ako JS ne stigne izmjeriti. */
body.ima_traku_uvjeti {
padding-bottom: var(--visina-trake-uvjeti, 86px);
}
@media screen and (max-width: 567px) {
.uvjeti_traka {
gap: 12px;
padding: 12px 15px 14px;
text-align: center;
}
.uvjeti_traka_tekst {
font-size: 14px;
}
.uvjeti_traka_gumb {
width: 100%;
padding: 12px 20px;
}
}