/* ==========================================================================
SPM Stamenković — Custom CSS za Helix Ultimate
Nalepiti u: Template Manager > Helix Ultimate stil > Custom Code > Custom CSS
========================================================================== */
/* --- Fontovi (dodati i link u Custom Code > Custom Code ako Helix
ne učita Google Fonts automatski):
*/
/* ==========================================================================
VirtueMart Cart modul (header) — kompaktna ikonica sa brojem stavki,
pun sadržaj (lista/total/Plaćanje) tek na hover kao padajući panel.
Struktura potvrđena kroz Inspect element: #vmCartModule sadrži
.vm_cart_products (lista), .total, .total_products ("N product"),
.show_cart > a.details (link ka checkout-u).
========================================================================== */
/* Pozicioniranje "desno od Sign In" preko CSS reda (order).
VAŽNO (iz header.php): Korpa (pozicija "menu") i ".header-modules" (Search
+ Sign In, hardkodovano u templejtu, ne pravi Joomla modul) NISU jedno u
drugom — oboje su BRAĆA/SESTRE unutar istog flex reda "#sp-menu .sp-column".
Zato order stavljamo na TA DVA elementa (i na hamburger, da ostane poslednji),
ne unutar .header-modules gde korpa uopšte i ne postoji. */
#sp-menu .sp-column > .sp-module.top-cart{
order:1;
}
#offcanvas-toggler{
order:2;
}
/* VAŽNO: .sp-module je stvarna flex-stavka u header redu (pored Sign In/
hamburger). Kad njeno dete (#vmCartModule) postane position:absolute na
hover, apsolutno pozicionirani element ne doprinosi širini roditelja — pa
bi se .sp-module skupio na skoro 0px i cela traka bi se pomerila. Zato mu
dajemo FIKSNU širinu/visinu koja se NIKAD ne menja, bez obzira šta se
dešava unutra (bedž ili otvoren panel). Sve je sa !important i overflow:
visible da nijedno pravilo iz templejta (Helix/Bootstrap) ne može ovo
da pregazi ili da odseče panel. */
#sp-menu,
#sp-menu .sp-column{
overflow:visible !important;
}
@media (min-width:992px){
.sp-module.top-cart{
position:relative !important;
width:150px !important;
height:36px !important;
min-width:150px !important;
max-width:150px !important;
flex:0 0 150px !important;
overflow:visible !important;
}
}
.sp-module.top-cart .sp-module-title{
display:none;
}
.vm-centered .vmgroup .row,
.vm-centered .vmgroup > div {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.vm-centered .vmgroup .product,
.vm-centered .vmgroup [class*="width"] {
float: none; /* VM default koristi float:left */
}
@media (min-width:992px){
#vmCartModule.top-cart{
position:absolute !important;
top:0 !important;
right:0 !important;
left:auto !important;
bottom:auto !important;
margin:0 !important;
display:block !important;
width:auto !important;
box-sizing:border-box !important;
text-align:right;
z-index:50;
}
}
/* Sakriveno po defaultu — otkriva se samo na hover */
#vmCartModule > .vm_cart_products,
#vmCartModule > .total,
#vmCartModule > .show_cart,
#vmCartModule > div[style*="clear"]{
display:none;
}
/* Uvek vidljiva kompaktna oznaka: ikonica korpe + broj stavki. Drži se uz
desnu ivicu 280px kutije (text-align:right gore) — ista pozicija kao pre. */
#vmCartModule > .total_products{
display:inline-flex;
align-items:center;
gap:6px;
background:var(--spm-blush);
color:var(--spm-primary);
font-weight:700;
font-size:0; /* sakriva pravi tekst ("Korpa je prazna") u collapsed stanju */
padding:8px 16px 8px 32px;
border-radius:30px;
position:relative;
cursor:pointer;
white-space:nowrap;
z-index:2;
}
#vmCartModule > .total_products::before{
content:"\1F6D2";
position:absolute;
left:12px;
font-size:14px;
}
/* collapsed labela = "Korpa" (pravi tekst se vidi tek na hover) */
#vmCartModule > .total_products::after{
content:"Korpa";
font-size:13px;
}
.vm_cart_products .product_row span {
margin: 0 5px;
}
#sp-position8 .sp-module-content {
margin: 25px;
}
.back-to-category {
margin: 20px 0;
}
.back-to-category a {
display: inline-block;
background: #c81e3a;
color: #fff!important;
padding: 10px 18px;
border-radius: 5px;
text-decoration: none;
font-size: 14px;
font-weight: 600;
line-height: 1;
transition: background-color 0.25s ease;
}
.back-to-category a:hover,
.back-to-category a:focus {
background: #8f1226;
color: #fff;
text-decoration: none;
}
.back-to-category a:active {
background: #74101f;
}
.nav.nav-stack {
display: block;
padding-left: 0;
list-style: none;
}
.nav.nav-stack li {
display: block;
width: 100%;
margin-bottom: 8px; /* opcionalno razmak */
}
.nav.nav-stack li a {
display: block;
}
.topinfo {
display: inline-block;
}
.vm-details-button .product-details {
display: inline-block;
background: #b01030;
color: #fff;
padding: 10px 22px;
border-radius: 22px;
text-decoration: none;
}
.jd-header{
background:#C81E3A;
padding:34px 40px;
display:flex;align-items:center;gap:24px;
margin:0 0 24px;
font-family:inherit;
}
.jd-header__icon{
width:70px;height:70px;flex:0 0 70px;
border-radius:50%;
background:#fff;
display:flex;align-items:center;justify-content:center;
}
.jd-header__icon svg{width:38px;height:38px;fill:#e30613;}
.jd-header__title{font-size:32px;font-weight:700;color:#fff;margin:0 0 6px;line-height:1.15;}
.jd-header__sub{font-size:16px;color:#ffd4d4;margin:0;}
@media (max-width:575px){
.jd-header{padding:24px 22px;gap:16px;flex-direction:column;text-align:center;}
.jd-header__icon{width:58px;height:58px;flex-basis:58px;}
.jd-header__icon svg{width:30px;height:30px;}
.jd-header__title{font-size:24px;}
.jd-header__sub{font-size:14px;}
}
.category-view h1 {
display:none}
@media (min-width:992px){
.sp-module.top-cart:hover #vmCartModule.top-cart{
right:-125px !important;
background:#fff;
box-shadow:0 16px 40px rgba(0,0,0,.16);
border:1px solid #f2e9e4;
border-radius:var(--spm-radius);
padding:18px 20px;
text-align:left;
}
.sp-module.top-cart:hover #vmCartModule > .total_products{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
background:none;
color:var(--spm-primary);
font-size:14px;
font-weight:700;
text-align:center;
padding:2px 0 14px 0;
border-bottom:1px solid #f2e9e4;
margin-bottom:14px;
}
.sp-module.top-cart:hover #vmCartModule > .total_products::before{
content:"\1F6D2";
position:static;
font-size:15px;
}
/* na hover: sakrij "Korpa" i pusti pravi tekst ("Korpa je prazna") */
.sp-module.top-cart:hover #vmCartModule > .total_products::after{
content:"";
font-size:0;
}
.sp-module.top-cart:hover #vmCartModule > .vm_cart_products,
.sp-module.top-cart:hover #vmCartModule > .total,
.sp-module.top-cart:hover #vmCartModule > .show_cart{
display:block;
width:100% !important;
box-sizing:border-box !important;
float:none !important;
text-align:left;
}
.sp-module.top-cart:hover #vmCartModule > .total{
font-size:14px;
font-weight:700;
padding-top:8px;
border-top:1px solid #f2e9e4;
margin-top:6px;
}
.sp-module.top-cart:hover .product_row{
font-size:13px;
padding:6px 0;
border-bottom:1px solid #f2e9e4;
float:none !important;
}
.sp-module.top-cart:hover .product_row .subtotal_with_tax{
float:right !important;
}
.sp-module.top-cart:hover .show_cart .details{
display:inline-block;
margin-top:10px;
background:var(--spm-primary);
color:#fff !important;
padding:8px 20px;
border-radius:30px;
font-weight:700;
text-decoration:none;
float:none !important;
}
}
@media (max-width:991.98px){
#sp-header .row{
flex-wrap:nowrap !important;
}
#sp-logo{
flex-shrink:0 !important;
}
#sp-menu{
min-width:0 !important;
flex-shrink:1 !important;
/* flex-grow:0 !important;*/
}
#sp-menu .sp-column{
min-width:0 !important;
}
#sp-menu nav.sp-megamenu-wrapper{
display:none !important;
}
.sp-module.top-cart{
position:static !important;
width:auto !important;
height:auto !important;
min-width:0 !important;
max-width:none !important;
flex:0 0 auto !important;
}
#vmCartModule.top-cart{
position:relative !important;
width:auto !important;
display:inline-flex !important;
text-align:left;
}
#vmCartModule > .total_products{
font-size:0; /* mobilni: sakriva pravi tekst, prikazuje "Korpa" */
padding:6px 10px 6px 24px;
max-width:150px;
overflow:hidden;
text-overflow:ellipsis;
}
#vmCartModule > .total_products::before{
left:8px;
font-size:12px;
}
#vmCartModule > .total_products::after{
font-size:11.5px;
}
#vmCartModule > .show_cart{
display:block !important;
position:absolute !important;
inset:0 !important;
z-index:5;
}
#vmCartModule > .show_cart .details{
display:block !important;
width:100%;
height:100%;
opacity:0;
}
}
:root{
--spm-primary:#C81E3A;
--spm-primary-dark:#8F1226;
--spm-gold:#E8A33D;
--spm-cream:#FFF9F3;
--spm-blush:#FBE4E6;
--spm-mint:#E4F1EC;
--spm-lavender:#EFE7F7;
--spm-text:#2B2320;
--spm-text-light:#786b64;
--spm-radius:16px;
--spm-shadow:0 10px 30px rgba(43,35,32,0.08);
}
body{
font-family:'Nunito Sans', -apple-system, sans-serif;
color:var(--spm-text);
background:var(--spm-cream);
}
h1,h2,h3,h4,h5,
.sppb-addon-title,
.helix-ultimate-block-title{
font-family:'Poppins', sans-serif !important;
font-weight:700;
}
/* --- Linkovi i dugmad (Helix Ultimate + SPPB Button addon) --- */
a{ color:var(--spm-primary); }
a:hover{ color:var(--spm-primary-dark); }
/* Napomena: SPPB Button addon nosi svoju boju po instanci (podešava se u
editoru za svako dugme posebno), zato mu OVDE ne nameravamo boju preko
!important — samo oblik/razmak, da ne pregazimo npr. bela dugmad na
crvenim/ljubičastim promo banerima. */
.sppb-btn,
.sppb-btn-primary{
border-radius:50px !important;
font-weight:700 !important;
padding:10px 26px !important;
}
/* Ovo su nativna Helix Ultimate / Joomla dugmad (meni, forme) koja nemaju
sopstvenu boju po instanci, pa je ovde bezbedno nametnuti brend crvenu. */
.helix-btn,
button.validate{
background:var(--spm-primary) !important;
border-color:var(--spm-primary) !important;
border-radius:50px !important;
font-weight:700 !important;
padding:10px 26px !important;
}
.helix-btn:hover,
button.validate:hover{
background:var(--spm-primary-dark) !important;
border-color:var(--spm-primary-dark) !important;
}
/* Namerno UKLONJENO: ".sppb-btn-secondary" je bila generička klasa koju SPPB
dodaje dugmadima, pa je preko !important gazila boje koje smo podesili
po instanci (zato su dugmad na promo banerima ispala providna/samo ivica
umesto punog belog polja). Ako ti zatreba stvarno "outline" dugme, koristi
dole definisanu ".spm-btn-outline" klasu i dodaj je ručno u polje
"Custom Class" tog konkretnog dugmeta u SPPB editoru. */
.spm-btn-outline{
background:transparent !important;
border:2px solid #fff !important;
color:#fff !important;
border-radius:50px !important;
}
/* --- Top bar / Header (prilagoditi selektore prema Helix stilu koji koristite) --- */
.helix-ultimate-topbar{
background:var(--spm-primary-dark) !important;
color:#f4dede !important;
font-size:12.5px;
}
.helix-ultimate-header{
box-shadow:0 2px 10px rgba(0,0,0,0.05);
}
.helix-ultimate-menu > li > a{
font-weight:700 !important;
}
/* --- Glavni meni traka (ako koristite crvenu traku ispod headera) --- */
.spm-nav-bar{
background:var(--spm-primary);
}
.spm-nav-bar a{
color:#fff !important;
font-weight:700;
}
.spm-usp-icon i[class*="fa-"]{
display:inline-flex !important;
align-items:center;
justify-content:center;
width:48px;
height:48px;
border-radius:12px;
background:var(--spm-blush);
color:var(--spm-primary) !important;
font-size:20px !important;
}
/* Hero sekcija — dodati na Row koji sadrži naslov + dugme */
.spm-hero{
background:linear-gradient(120deg, var(--spm-blush) 0%, var(--spm-lavender) 100%);
padding:70px 0;
}
.spm-hero .sppb-addon-title{ font-size:44px; line-height:1.15; }
/* Kartice kategorija — dodati na Column addon */
.spm-cat-card{
border-radius:var(--spm-radius);
padding:26px;
min-height:160px;
box-shadow:var(--spm-shadow);
transition:transform .2s ease;
}
.spm-cat-card:hover{ transform:translateY(-4px); }
.spm-cat-card.spm-c1{ background:linear-gradient(135deg,#FBE4E6,#f6c7cc); }
.spm-cat-card.spm-c2{ background:linear-gradient(135deg,#E4F1EC,#c3e3d6); }
.spm-cat-card.spm-c3{ background:linear-gradient(135deg,#EFE7F7,#d9c8ef); }
.spm-cat-card.spm-c4{ background:linear-gradient(135deg,#FFF3D6,#f3d98c); }
.spm-cat-card.spm-c5{ background:linear-gradient(135deg,#E4ECF7,#c3d4ee); }
.spm-cat-card.spm-c6{ background:linear-gradient(135deg,#FCE9DA,#f3c79e); }
/* Icon Box (USP traka) — dodati na Icon Box addon */
.spm-usp .sppb-addon-icon{
background:var(--spm-blush) !important;
color:var(--spm-primary) !important;
border-radius:12px !important;
}
/* Promo baneri (2 kolone) */
.spm-promo-a{ background:linear-gradient(135deg,#C81E3A,#8F1226); color:#fff; border-radius:20px; padding:40px; }
.spm-promo-b{ background:linear-gradient(135deg,#7A4FA3,#4E2F73); color:#fff; border-radius:20px; padding:40px; }
/* B2B / Veleprodaja CTA traka */
.spm-b2b{
background:var(--spm-primary-dark);
color:#fff;
padding:50px 0;
text-align:center;
}
/* ==========================================================================
VirtueMart modul "Popularni/Najnoviji proizvodi".
VAŽNO: modul ima DVA moguća layout fajla — "single.php" (bez ikakve grid
logike, uvek 1 po redu — ono što je do sada bilo aktivno) i "default.php"
(prava grid logika: svaki proizvod dobija klase "product-container widthXX
floatleft"). Pravi fix je promeniti "Изглед/Layout" na modulu i očistiti
Joomla keš (System > Clear Cache) — videti objašnjenje u razgovoru.
Ovaj CSS blok radi za OBA slučaja: neutrališe stari float/width sistem i
forsira flex-grid, tako da nije bitno koji je layout tačno aktivan niti
koliko je "products_per_row" podešeno u modulu.
========================================================================== */
/* single.php: proizvodi su goli div-ovi bez klase, direktno u
.product-container (koji je ovde OMOTAČ, ne kartica).
VAŽNO #1: ".product-container" NIJE jedinstvena klasa samo za modul —
VirtueMart je koristi i kao spoljašnji omotač cele stranice pojedinačnog
proizvoda (productdetails-view). Zato OBAVEZNO tražimo i "vmproduct" uz nju.
VAŽNO #2: taj deo klase nije uvek doslovno "vmproduct" — VirtueMart lepi
modul-specifičan sufiks direktno na kraj (npr. "vmproductbig-title",
"vmproductw1400"), pa tražimo PODNISKU [class*="vmproduct"] umesto tačnog
imena klase. Ni jedna varijanta se ne poklapa sa "productdetails-view" na
pravoj strani proizvoda, tako da je bezbedno u oba slučaja. */
.product-container[class*="vmproduct"]{
display:flex !important;
flex-wrap:wrap;
gap:22px;
justify-content:flex-start;
}
.product-container[class*="vmproduct"] > div{
flex:0 1 260px;
max-width:260px;
}
/* default.php: svaki proizvod JESTE ".product-container" (sa dodatnim
widthXX/floatleft klasama) unutar omotača "vmproduct productdetails".
VAŽNO: taj omotač NIJE uvek doslovno ".vmproduct" — VirtueMart lepi
moduleclass_sfx direktno na kraj ("vmproductw1400", "vmproductbig-title"...)
pa tačna klasa zavisi od podešavanja svakog modula. Zato koristimo
[class*="vmproduct"] (sadrži tu podnisku) umesto tačnog imena klase —
pogađa sve varijante sufiksa. */
[class*="vmproduct"].productdetails{
display:flex !important;
flex-wrap:wrap;
gap:22px;
justify-content: center;
}
[class*="vmproduct"].productdetails > div[style*="clear"]{
display:none;
}
[class*="vmproduct"].productdetails > .product-container{
float:none !important;
width:auto !important;
flex:0 1 260px;
max-width:260px;
}
/* (Stara neispravno skopirana verzija ovog pravila je uklonjena odavde —
videti gore ".product-container.vmproduct" koje je bezbedno skopirano.) */
.product-container .spacer{
background:#fff;
border-radius:var(--spm-radius);
box-shadow:var(--spm-shadow);
overflow:hidden;
padding-bottom:16px;
height:100%;
transition:transform .2s ease;
}
.product-container .spacer:hover{
transform:translateY(-3px);
}
/* Slika ima fiksne width/height atribute (440x293) iz VirtueMarta — CSS ih
pregazi da bi popunila karticu umesto da ostane sitna u praznom prostoru. */
.product-container .featuredProductImage{
width:100% !important;
height:200px !important;
object-fit:cover;
}
.product-container .productdetails{
padding:0 16px;
}
.product-container .product-price{
color:var(--spm-primary);
font-weight:800;
margin:10px 0;
}
/* Bootstrap "w-100" na dugmetu ga razvlači preko cele kartice — sad kad je
kartica uska (260px) to više nije problem, ali ga ipak zaokružujemo i
bojimo u brend crvenu (podrazumevana Bootstrap plava/siva inače probija). */
.product-container .addtocart-button.w-100{
border-radius:50px !important;
background:var(--spm-primary) !important;
border-color:var(--spm-primary) !important;
}
.product-container .addtocart-button.w-100:hover{
background:var(--spm-primary-dark) !important;
border-color:var(--spm-primary-dark) !important;
}
.PricesalesPrice,
.product-price{
color:var(--spm-primary) !important;
font-weight:800 !important;
}
.addtocart-bar .addtocart-button,
.addtocart-area button{
background:var(--spm-primary) !important;
border-radius:50px !important;
border:none !important;
}
/* --- Footer --- */
.helix-ultimate-footer,
footer.spm-footer{
background:#241715;
color:#d8c9c5;
}
.helix-ultimate-footer h3,
.helix-ultimate-footer h4{
color:#fff !important;
}
/* --- Sakrij "Pakovanje/Veličina" (VirtueMart custom fields) SAMO u ovom
modulu na početnoj. VAŽNO: [class*="vmproduct"] uz .product-container
(samo modul ima taj deo klase, u bilo kojoj sufiks-varijanti) — bez toga
bi ovo sakrilo i pravi padajući meni na strani pojedinačnog proizvoda. --- */
.product-container[class*="vmproduct"] .vm-customfields-wrap{
display:none !important;
}
/* Isto, za "default.php" stil modula (npr. "Nedavno pogledani") gde je
[class*="vmproduct"] na SPOLJAŠNJEM omotaču, a svaka kartica je zaseban
".product-container" pored nje (bez te klase na sebi) — zato ovde mora
razmak (potomak), ne spojen selektor kao gore. */
[class*="vmproduct"].productdetails .vm-customfields-wrap{
display:none !important;
}
/* --- Isto, ali za stranicu KATEGORIJE (/proizvodi-spm/...) — drugačiji
VirtueMart prikaz (component browse view) od modula, prepoznatljiv po
atributu data-vm="product-container" koji nemaju ni modul ni pojedinačna
strana proizvoda. Sakriva i "Boja" (cf4all dugmad u bojama), ne samo
padajuće menije. --- */
[data-vm="product-container"] .vm-customfields-wrap{
display:none !important;
}
/* --- Količina (+/-) na product karticama — diskretno, ne puna crvena kao
glavno dugme, da "Dodaj u korpu" ostane vizuelno najjača akcija. --- */
/* Red koji sadrži količinu i dugme (Bootstrap "row") — centriramo ga da
kartica ne izgleda krivo kad se količina prelomi u sopstveni red iznad
dugmeta (usko dugme na uskoj kartici). */
.addtocart-bar .row{
justify-content:center;
}
.addtocart-bar .col-auto{
width:100%;
display:flex;
justify-content:center;
}
.quantity-box{
display:flex !important;
align-items:center;
gap:4px;
background:var(--spm-cream);
border-radius:30px;
padding:3px;
width:fit-content;
margin:0 auto 10px auto;
}
.quantity-controls.quantity-minus,
.quantity-controls.quantity-plus{
background:#fff !important;
color:var(--spm-primary) !important;
border:1px solid #f0dede !important;
border-radius:50% !important;
width:30px !important;
height:30px !important;
display:flex !important;
align-items:center;
justify-content:center;
padding:0 !important;
line-height:1;
}
.quantity-controls.quantity-minus:hover,
.quantity-controls.quantity-plus:hover{
background:var(--spm-blush) !important;
border-color:var(--spm-blush) !important;
}
.quantity-input{
border:none !important;
background:transparent !important;
width:34px !important;
font-weight:700;
color:var(--spm-text);
}
/* --- Responsive sitni popravci --- */
@media(max-width:767px){
.spm-hero .sppb-addon-title{ font-size:30px; }
.spm-cat-card{ min-height:120px; padding:18px; }
}
/* ==========================================================================
Category (browse-view) grid + kartice.
VirtueMart je u Bootstrap 5 modu (ucitava se samo vm-bs5-common.css), a
override products.php ispisuje STARE float klase "vm-col vm-col-4" koje
BS5 CSS ne stiluje. Zato ovde sami pravimo grid (CSS Grid, 4 kolone koje
popunjavaju 100% sirine container-a) + stiliziramo kartice sa hover zoom-om.
Sve je skopirano na ".browse-view" da ne diramo modul na pocetnoj.
========================================================================== */
/* --- Grid: 4 jednake kolone preko cele sirine, responzivno --- */
.browse-view .row{
display:grid !important;
grid-template-columns:repeat(4, 1fr);
gap:24px;
margin:0 0 24px;
}
.browse-view .product.vm-col{
float:none !important;
width:auto !important;
max-width:none !important;
margin:0 !important;
}
@media(max-width:991px){ .browse-view .row{ grid-template-columns:repeat(3, 1fr); } }
@media(max-width:767px){ .browse-view .row{ grid-template-columns:repeat(2, 1fr); gap:16px; } }
@media(max-width:479px){ .browse-view .row{ grid-template-columns:1fr; } }
/* razmak izmedju pretrage/sortiranja i grida proizvoda */
/* --- Toolbar za sortiranje/prikaz: kompaktan i moderan, ne preko cele sirine.
Sortiranje levo, "Results / po strani" desno. --- */
.browse-view .orderby-displaynumber{
display:flex;
align-items:flex-end;
justify-content:space-between;
flex-wrap:wrap;
gap:16px 24px;
margin-bottom:26px;
padding-bottom:16px;
border-bottom:1px solid #efe3df;
}
.browse-view .orderby-displaynumber .floatleft,
.browse-view .orderby-displaynumber .floatright{
float:none !important;
margin:0 !important;
}
/* .clear div i prazna gornja paginacija su flex-stavke koje guraju "Results"
ulevo -> sklanjamo ih da display-number ode skroz desno */
.browse-view .orderby-displaynumber > .clear{ display:none; }
.browse-view .orderby-displaynumber .vm-pagination-top{ display:none; }
.browse-view .vm-order-list .form-label,
.browse-view .display-number{
font-size:12px;
font-weight:600;
color:#9a8f8c;
}
.browse-view .vm-order-list .input-group{
width:auto;
flex-wrap:nowrap;
align-items:center;
gap:6px;
margin-top:4px;
}
.browse-view .orderby-displaynumber select{
width:auto !important;
min-width:190px;
border:1px solid #e6d8d3 !important;
border-radius:10px !important;
padding:8px 12px !important;
background-color:#fff !important;
font-size:14px;
color:var(--spm-text);
box-shadow:none !important;
}
.browse-view .orderby-displaynumber select:hover{
border-color:var(--spm-primary) !important;
}
.browse-view .vm-order-list .input-group .btn{
border:1px solid #e6d8d3;
border-radius:10px;
padding:7px 10px;
background:#fff;
}
.browse-view .display-number{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:4px;
text-align:right;
}
.browse-view .display-number select#limit{
min-width:84px;
}
@media(max-width:575px){
.browse-view .orderby-displaynumber{ justify-content:flex-start; }
.browse-view .orderby-displaynumber select{ min-width:150px; }
}
/* --- Kartica ---
VAZNO: u markup-u je "class='spacer product-container'" na ISTOM divu
(nisu ugnjezdeni), pa karticu ciljamo preko ".product .spacer". --- */
.browse-view .product{
display:flex;
}
.browse-view .product .spacer{
width:100%;
height:100%;
display:flex;
flex-direction:column;
background:#fff;
border:1px solid #efe3df;
border-radius:18px;
overflow:hidden;
box-shadow:0 4px 16px rgba(60,30,20,.06);
padding:0 0 18px;
transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.browse-view .product .spacer:hover{
transform:translateY(-6px);
border-color:var(--spm-primary);
box-shadow:0 18px 38px rgba(60,30,20,.16);
}
/* --- Slika + blagi zoom na hover --- */
.browse-view .vm-product-media-container{
overflow:hidden;
border-radius:18px 18px 0 0;
background:#faf4f2;
}
.browse-view .browseProductImage{
display:block;
width:100% !important;
height:210px !important;
object-fit:cover;
transition:transform .45s ease;
}
.browse-view .product .spacer:hover .browseProductImage{
transform:scale(1.08);
}
/* --- Tekst na kartici --- */
.browse-view .product h2{
font-size:16px;
line-height:1.3;
font-weight:700;
margin:14px 0 4px;
padding:0 16px;
}
.browse-view .product h2 a{
color:var(--spm-primary);
text-decoration:none;
}
.browse-view .product h2 a:hover{
text-decoration:underline;
}
.browse-view .product_s_desc{
font-size:12.5px;
line-height:1.4;
color:#9a8f8c;
margin:0 0 12px;
padding:0 16px;
}
/* --- Footer / dugme "Opsirnije" gurnuto na dno kartice, centrirano --- */
.browse-view .vm-product-footer{
margin-top:auto;
}
.browse-view .vm-details-button{
padding:0 16px;
text-align:center;
}
.browse-view .vm-details-button .product-details{
padding:9px 20px;
font-size:14px;
}
/* ==========================================================================
STRANA PROIZVODA (productdetails-view).
Slika levo / detalji desno, uredjena kupovna zona, pill kolicina sa +/-
ikonicama (umesto "quantity plus/minus" teksta), i uskladjeno sa sajtom.
========================================================================== */
/* --- gornji red: back dugme + prev/next --- */
.productdetails-view .back-to-category{ margin:4px 0 14px; }
.productdetails-view .product-neighbours{
display:flex; justify-content:space-between; gap:12px;
font-size:13px; margin-bottom:18px;
}
.productdetails-view .product-neighbours a{ color:var(--spm-primary); text-decoration:none; }
.productdetails-view .product-neighbours a:hover{ text-decoration:underline; }
.product-neighbours {display:none!important}
/* --- dve kolone: slika | detalji --- */
.productdetails-view .vm-product-container{
display:flex;
gap:36px;
align-items:stretch;
}
.productdetails-view .vm-product-media-container{
flex:0 0 46%;
max-width:46%;
display:flex;
flex-direction:column;
position:relative;
}
/* rezervisi prostor ispod slike za thumbnaile (samo ako ih ima) */
.productdetails-view .vm-product-container:has(.additional-images .floatleft){
margin-bottom:98px;
}
.productdetails-view .vm-product-details-container{
flex:1 1 auto;
min-width:0;
display:flex;
flex-direction:column;
}
@media(max-width:767px){
.productdetails-view .vm-product-container{ flex-direction:column; gap:22px; align-items:stretch; }
.productdetails-view .vm-product-media-container{ flex-basis:auto; max-width:100%; width:100%; }
}
/* --- glavna slika kao kartica koja popunjava visinu leve kolone
(poravnata sa karticom desno) --- */
.productdetails-view .main-image{
margin:0;
flex:1 1 auto;
min-height:280px;
display:flex;
background:#fff;
border:1px solid #efe3df;
border-radius:18px;
box-shadow:0 6px 20px rgba(60,30,20,.07);
overflow:hidden;
}
.productdetails-view .main-image > a{
flex:1 1 auto;
display:flex;
align-items:center;
justify-content:center;
padding:16px;
min-height:0;
}
.productdetails-view .main-image img{
width:auto;
max-width:100%;
height:auto;
max-height:100%;
object-fit:contain;
display:block;
border:0;
border-radius:0;
box-shadow:none;
background:transparent;
}
.productdetails-view .main-image .clear{ display:none; }
/* --- dodatne slike (thumbnails): male, uokvirene, poredjane u red ---
Struktura: .additional-images > .floatleft > a > img --- */
.productdetails-view .additional-images{
position:absolute;
top:100%;
left:0;
right:0;
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:14px;
justify-content:flex-start;
}
.productdetails-view .additional-images .floatleft{
float:none !important;
width:66px !important;
height:66px !important;
margin:0 !important;
}
.productdetails-view .additional-images .floatleft a{
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
padding:5px;
background:#fff;
border:1px solid #efe3df;
border-radius:10px;
overflow:hidden;
transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.productdetails-view .additional-images .floatleft a:hover{
border-color:var(--spm-primary);
transform:translateY(-2px);
box-shadow:0 6px 14px rgba(60,30,20,.12);
}
.productdetails-view .additional-images .floatleft img{
width:100% !important;
height:100% !important;
object-fit:contain;
display:block;
}
/* Na mobilnom su kolone jedna ispod druge -> thumbnaili moraju u normalan tok
(ne apsolutno), inace prekrivaju karticu kratkog opisa ispod slike. */
@media(max-width:767px){
.productdetails-view .vm-product-container:has(.additional-images .floatleft){
margin-bottom:0;
}
.productdetails-view .additional-images{
position:static;
top:auto;
margin-top:14px;
}
}
/* --- detalji: sakrij duplirani naziv (h1 ga vec prikazuje gore) --- */
.productdetails-view .vm-product-details-container > h3{ display:none; }
/* prazan "dummy" rating placeholder pravi rupu iznad kartice -> sklanjamo ga */
.productdetails-view .ratingbox.dummy{ display:none; }
/* kratki opis kao mala uokvirena "chip" kartica iznad kupovne zone,
uskladjena sa belim karticama i podebljana da ne deluje izolovano */
.productdetails-view .product-short-description{
color:#4b423f;
font-size:15px;
font-weight:600;
line-height:1.5;
margin:0 0 16px;
padding:12px 18px;
background:#fff;
border:1px solid #efe3df;
border-left:4px solid var(--spm-primary);
border-radius:12px;
box-shadow:0 3px 12px rgba(60,30,20,.04);
}
/* --- kupovna kartica: rasteze se na punu visinu kolone (u ravni sa slikom) --- */
.productdetails-view .spacer-buy-area{
background:#fff;
border:1px solid #efe3df;
border-radius:18px;
padding:20px 22px;
box-shadow:0 4px 16px rgba(60,30,20,.05);
flex:1 1 auto;
display:flex;
flex-direction:column;
}
.productdetails-view .addtocart-area{
flex:1 1 auto;
display:flex;
flex-direction:column;
}
.productdetails-view .addtocart-area > form{
flex:1 1 auto;
display:flex;
flex-direction:column;
}
.productdetails-view .product-price .PricesalesPrice{
color:var(--spm-primary) !important;
font-weight:800 !important;
font-size:26px;
line-height:1;
}
/* --- "Pakovanje" polje --- */
.productdetails-view .product-fields{ margin:2px 0 14px; }
.productdetails-view .product-fields-title span{ font-weight:600; color:var(--spm-text); }
.productdetails-view .product-field-display .form-select{
max-width:320px;
border-radius:10px;
border:1px solid #e3d5d1;
padding:9px 12px;
}
/* --- kupovna traka: kolicina + dugme u redu, gurnuta na dno kartice --- */
.productdetails-view .addtocart-bar{
display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap;
margin-top:auto;
padding-top:16px;
}
.productdetails-view .addtocart-bar .quantity-box{
display:inline-flex; align-items:center;
background:var(--spm-cream, #faf4f2);
border:1px solid #eaddd9;
border-radius:30px;
padding:3px 6px;
margin:0;
}
.productdetails-view .quantity-input{
border:none !important; background:transparent !important;
width:40px !important; text-align:center; font-weight:700; color:var(--spm-text);
}
.productdetails-view .quantity-controls.js-recalculate{
display:inline-flex; gap:6px;
}
/* +/- dugmici: sakrij tekst "quantity plus/minus", stavi ikonice */
.productdetails-view .quantity-controls.quantity-plus,
.productdetails-view .quantity-controls.quantity-minus{
font-size:0 !important;
width:34px; height:34px; padding:0 !important;
border:1px solid #eaddd9 !important;
background:#fff center/16px no-repeat !important;
border-radius:50% !important;
cursor:pointer;
}
.productdetails-view .quantity-controls.quantity-plus{
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b01030' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") !important;
}
.productdetails-view .quantity-controls.quantity-minus{
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b01030' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") !important;
}
.productdetails-view .quantity-controls.quantity-plus:hover,
.productdetails-view .quantity-controls.quantity-minus:hover{
border-color:var(--spm-primary) !important;
background-color:#fff5f6 !important;
}
.productdetails-view .addtocart-bar .addtocart-button{
flex:1 1 200px;
}
.productdetails-view .addtocart-bar .addtocart-button .btn{
width:100%;
background:var(--spm-primary) !important;
border:none !important;
border-radius:50px !important;
padding:11px 18px;
font-weight:600;
}
.productdetails-view .addtocart-bar .addtocart-button .btn:hover{
background:var(--spm-primary-dark, #8e0d26) !important;
}
/* --- Opis + Komentari: uskladjene "kartica" sekcije preko cele sirine --- */
.productdetails-view .product-description,
.productdetails-view .customer-reviews{
background:#fff;
border:1px solid #efe3df;
border-radius:18px;
padding:24px 26px;
box-shadow:0 4px 16px rgba(60,30,20,.05);
margin-top:26px;
}
.productdetails-view .product-description .title,
.productdetails-view .customer-reviews h4{
display:block;
font-size:19px; font-weight:700; color:var(--spm-text);
margin:0 0 14px; padding-bottom:10px;
border-bottom:2px solid #f2e2de;
}
.productdetails-view .product-description p{ margin:0 0 8px; }
.productdetails-view .product-description ul{ margin:8px 0; padding-left:20px; }
.productdetails-view .product-description li{ margin:3px 0; }
.productdetails-view .customer-reviews .step{ color:#8a7f7c; font-size:14px; }
/* --- "Slicni proizvodi" naslov uskladjen sa ostalim sekcijama --- */
.productdetails-view .product-related-products{ margin-top:30px; }
.productdetails-view .product-related-products .vm-section-title{
font-size:19px; font-weight:700; color:var(--spm-text);
}
/* ==========================================================================
Grid PODKATEGORIJA (category-view > .row > .category.floatleft.width25).
Van je .browse-view pa ga grid iznad ne hvata; koristi stare vm klase koje
BS5 CSS ne stiluje -> pravimo isti grid + kartice kao za proizvode.
Ciljamo ".category-view > .row" (direktno dete) da NE diramo redove
proizvoda koji su unutar ugnjezdenog ".browse-view".
========================================================================== */
.category-view > .row{
display:grid !important;
grid-template-columns:repeat(4, 1fr);
gap:24px;
margin:0 0 24px;
}
.category-view > .row > .clear,
.category-view .horizontal-separator{ display:none; }
@media(max-width:991px){ .category-view > .row{ grid-template-columns:repeat(3, 1fr); } }
@media(max-width:767px){ .category-view > .row{ grid-template-columns:repeat(2, 1fr); gap:16px; } }
@media(max-width:479px){ .category-view > .row{ grid-template-columns:1fr; } }
.category-view .category.floatleft{
float:none !important;
width:auto !important;
max-width:none !important;
margin:0 !important;
display:flex;
}
.category-view .category .spacer{
width:100%;
height:100%;
background:#fff;
border:1px solid #efe3df;
border-radius:18px;
overflow:hidden;
box-shadow:0 4px 16px rgba(60,30,20,.06);
transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.category-view .category .spacer:hover{
transform:translateY(-6px);
border-color:var(--spm-primary);
box-shadow:0 18px 38px rgba(60,30,20,.16);
}
.category-view .category h2{
margin:0;
font-size:16px;
line-height:1.2;
}
.category-view .category h2 a{
display:block;
text-decoration:none;
}
.category-view .category .browseCategoryImage{
display:block;
width:100% !important;
height:190px !important;
object-fit:cover;
transition:transform .45s ease;
}
.category-view .category .spacer:hover .browseCategoryImage{
transform:scale(1.07);
}
.category-view .category h2 a span{
display:block;
text-align:center;
font-size:16px;
font-weight:700;
color:var(--spm-primary);
padding:14px 12px;
}
/* naslov strane kategorije - manji */
.category-view > h1{
font-size:28px;
font-weight:700;
line-height:1.2;
margin:0 0 22px;
}
@media(max-width:767px){ .category-view > h1{ font-size:22px; } }
@media (min-width: 991px) and (max-width: 1400px) {
.logo-image {
height: 40px!important;
}
}
@media (min-width: 991px) and (max-width: 1199px) {
.logo-image {
height: 32px!important;
}
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li span {
padding: 0 5px;
}
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {
font-size: 13px;
}
#sp-logo {padding:0!important}
}