/* ==========================================================================
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;
}
/* SAMO NA DESKTOPU (≥992px, isti prag na kom Helix pokazuje glavni meni —
vidi "d-none d-lg-block" na
). Ovde je
korpi potrebna fiksna 150px "rezervacija" mesta jer se panel na hover
otvara preko position:absolute. Na mobilnom (ispod 992px) ova fiksna
širina je bila PREVELIKA za red logo+meni+korpa+hamburger, pa je red
morao da se prelomi u drugi red i "iscuri" ispod headera preko hero
sekcije — zato ovo NIKAD ne sme da važi na mobilnom. */
@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 */
}
/* STVARNA STRUKTURA (potvrđeno iz Inspect elementa):
#vmCartModule
.hiddencontainer (inline display:none — ignorisati)
.vm_cart_products > .vmcontainer > .product_row (ime + cena float:right)
.total (inline style="float:right")
.total_products <-- bedž "N product", dolazi POSLE .total, ne pre!
.show_cart > a.details (inline style="float:right", link "Plaćanje")
div[style*="clear"]
.payments-signin-button (prazan)
KLJUČNA ISPRAVKA: #vmCartModule ima FIKSNU širinu 280px UVEK (i pre i na
hover), ne "auto". Ranije je širina rasla SA 120px (bedž) NA 280px (kartica)
tek na hover, a pošto je kontejner bio usidren za desnu ivicu (right:0),
taj rast širine je pomerao levu ivicu i sve unutra (bedž, "Plaćanje") na
čudna mesta — to je uzrok "još gore" izgleda sa screenshot-a. Kad je
širina UVEK ista, ništa se ne pomera — samo se sadržaj otkriva/sakriva. */
@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:13px;
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;
}
.vm_cart_products .product_row span {
margin: 0 5px;
}
/* Na hover: SAMO JEDNA kartica (pozadina/senka/padding) na #vmCartModule kao
celini. Deca (.vm_cart_products/.total/.total_products/.show_cart) su samo
red teksta bez svoje pozadine/senke — tako, ako je neko od njih prazno
(npr. korpa je prazna → .total i .show_cart su prazni div-ovi), ne pravi
se vidljiva "duh" bela kutija bez sadržaja, kao što se desilo malopre.
.total_products NIJE sakriven na hover jer je za praznu korpu on JEDINI
sadržaj ("Korpa je prazna" tekst) — za punu korpu i dalje se vidi kao
kratak red iznad Total-a. SAMO DESKTOP (≥992px) — hover ionako ne radi
dobro na dodir/mobilnom, pa na mobilnom korpa ostaje običan mali bedž
u redu (vidi mobilni blok ispod). */
@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;
}
.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;
}
}
/* MOBILNI PRIKAZ (<992px) — korpa mora da ostane OBIČNA flex-stavka u redu
sa logoom i hamburgerom (bez fiksne 150px rezervacije i bez apsolutnog
pozicioniranja iz desktop bloka gore, koji su bili uzrok da red pukne u
drugi red i "iscuri" ispod headera). Ovde je samo kompaktan bedž — bez
hover panela (na dodir ionako ne radi), tekst malo manji da stane pored
hamburgera na uskom ekranu. */
@media (max-width:991.98px){
/* PRAVI UZROK "korpa+hamburger padaju ispod logoa": #sp-header .row je
Bootstrap flex red sa flex-wrap:wrap. #sp-menu (kolona sa meni/korpa/
hamburger) je flex-stavka koja PO DEFAULTU ima min-width:auto — znači
ne sme da se skupi ispod širine svog sadržaja, čak i kad je taj sadržaj
(npr. sakriveni