/* TP-CSS-LOADED-MARKER */
:root { --tp-custom-css-loaded: 1; }
/* =========================================================
TERMO-PROM – tp-custom.css (KONSOLIDIRANO / ČISTO)
Updated: 2025-12-29
Što je popravljeno u odnosu na “prenaglo skraćenu” verziju:
- Vraćen je kompletan sadržaj tvoje datoteke (slider, hero, grid, brand-bar, quicknav, klima/dt…)
- Uklonjeni su dupli i konfliktni blokovi (TP FIX / HOTFIX / HOTFIX 2 / FIX / FINIŠ / FOOTER inset duplikati)
- “Panel širina” je riješena JEDNOM logikom: --tp-page-max + .container max-width
- “Unutarnja margina teksta” (tijelo + footer) je JEDNA varijabla: --tp-inset (ZRAČNO = 6ch)
- Donja 2 gumba na KLIMA + DT su lijevo/desno (flex + auto margin)
Napomena:
- Namjerno NE diram globalne Bootstrap .row margine (samo lokalno gdje treba),
da ne izazovemo “bijeg” gumba.
========================================================= */
/* =========================================================
0) GLOBAL VARIJABLE (JEDNA ISTINA)
========================================================= */
:root{
--tp-page-max: 1260px;
--tp-page-pad: 12px;
/* Unutarnji odmak teksta: širina riječi “ZRAČNO” ≈ 6ch */
--tp-inset: 3.6ch; /* 40% manji inset (bilo 6ch) */
/* kompatibilnost sa starim nazivom */
--tp-zrak: var(--tp-inset);
/* KLIMA */
--tp-klima-bg: #d9f0df;
/* DIZALICE TOPLINE (final) */
--tp-dizalice-bg: #F6F4E6;
--tp-top-gray: #f2f2f2;
/* OKRUGLI GUMBI (home) */
--tp-round-btn-pc: 145px;
--tp-round-btn-mob: 135px;
--tp-round-btn-xs: 130px;
/* TERMO-PROM plava */
--tp-prom-blue: #1f66d1;
--tp-prom-blue-dark: #1a58b6;
/* “Pošaljite nam upit” nijansa (tvoja iz CSS-a) */
--tp-info-bg: #2A9AC5;
--tp-info-bd: #2386AA;
--tp-info-bg-hover: #2386AA;
--tp-info-bd-hover: #1E7595;
}
/* =========================================================
0.1) GLOBAL SIGURNOST
========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
/* =========================================================
0.2) PANEL ŠIRINA: poravnaj sve .container na istu širinu kao footer
(Bootstrap 1170 -> 1260)
========================================================= */
@media (min-width: 1200px){
.container{
max-width: var(--tp-page-max) !important;
}
}
/* =========================================================
0.3) “ZRAČNO” – UNUTARNJE MARGINE TEKSTA (globalno)
- Primjenjuje se na tekst (p/ul/ol) u #content
- Ne dira naslove (h1/h2/h3/h4/h5/h6) i ne dira grid/gumbe
========================================================= */
#content p{
padding-left: var(--tp-inset) !important;
padding-right: var(--tp-inset) !important;
line-height: 1.65 !important;
}
#content ul,
#content ol{
padding-left: calc(var(--tp-inset) + 1.4em) !important;
padding-right: var(--tp-inset) !important;
}
/* =========================================================
1) KOŠARICA – crni gumb + bijeli tekst (SVUDA)
========================================================= */
#cart > .btn,
#cart .btn,
#cart button,
#cart .dropdown-toggle,
#header-cart #cart > .btn,
#header-cart .dropdown-toggle,
#header-cart a.dropdown-toggle,
#cart-total,
a#cart-total,
button#cart-total,
.header-cart #cart-total,
#header .cart,
#header .cart a,
#header .cart button{
background: #000 !important;
border-color: #000 !important;
color: #fff !important;
text-shadow: none !important;
box-shadow: none !important;
}
#cart i, #cart svg,
#header-cart i, #header-cart svg,
#cart-total i, #cart-total svg,
#header .cart i, #header .cart svg{
color: #fff !important;
fill: #fff !important;
}
#cart .badge,
#header-cart .badge{
background: #fff !important;
color: #000 !important;
}
/* =========================================================
2) FOOTER – crna pozadina + panel u marginama
+ “ZRAČNO” inset za tekst (JEDNOM)
========================================================= */
#footer{
position: relative !important;
background: transparent !important;
width: 100%;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
z-index: 5 !important;
clear: both !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#footer::before{
content: "";
position: absolute;
top: 0; bottom: 0;
left: 50%;
transform: translateX(-50%);
width: min(calc(100% - (var(--tp-page-pad) * 2)), var(--tp-page-max));
background: #000 !important;
border-radius: 12px;
pointer-events: none;
z-index: 0;
}
#footer > .container,
#footer .container{
position: relative;
z-index: 1;
max-width: var(--tp-page-max) !important;
margin-left: auto !important;
margin-right: auto !important;
/* ključ: unutarnji odmak teksta u footeru */
padding-left: calc(var(--tp-page-pad) + var(--tp-inset)) !important;
padding-right: calc(var(--tp-page-pad) + var(--tp-inset)) !important;
background: transparent !important;
}
/* U footeru ukini dodatna uvlačenja listi */
#footer ul,
#footer ol{
margin-left: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
#footer .list-unstyled{
margin-left: 0 !important;
padding-left: 0 !important;
}
#footer .row,
#footer [class*="col-"]{
background: transparent !important;
}
#footer, #footer p, #footer li{
color: rgba(255,255,255,0.92) !important;
}
#footer h5{
color: #fff !important;
font-weight: 700 !important;
letter-spacing: 0.2px;
margin-bottom: 10px;
}
#footer a{
color: rgba(255,255,255,0.92) !important;
text-decoration: none;
}
#footer a:hover{
color: #fff !important;
text-decoration: underline;
}
#footer .row{
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Footer – čitljivost */
#footer h5{ font-size: 16px !important; line-height: 1.25 !important; }
#footer ul li, #footer ul li a{ font-size: 14px !important; line-height: 1.65 !important; }
#footer ul li{ margin: 3px 0 !important; }
@media (max-width: 767px){
#footer h5{ font-size: 15px !important; }
#footer ul li, #footer ul li a{ font-size: 13px !important; }
}
/* Footer naslovi crveni (tvoj dodatak) */
#footer .col-sm-3 > h5,
#footer .col-sm-3 h5,
#footer .col-sm-3 .footer-title,
#footer .col-sm-3 .title{
color: #c40000 !important;
}
/* Donji “text-center” dio poravnaj lijevo */
#footer .text-center,
#footer .text-center *{
text-align: left !important;
}
#footer .text-center .btn,
#footer .text-center a.btn{
display: inline-block !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* =========================================================
3) TOP TRAKA (#top) – pozadina samo u marginama
========================================================= */
#top{
position: relative !important;
background: transparent !important;
width: 100%;
}
#top::before{
content: "";
position: absolute;
top: 0; bottom: 0;
left: 50%;
transform: translateX(-50%);
width: min(calc(100% - (var(--tp-page-pad) * 2)), var(--tp-page-max));
background: var(--tp-top-gray) !important;
border-radius: 10px;
pointer-events: none;
z-index: 0;
}
#top > .container,
#top .container{
position: relative;
z-index: 1;
max-width: var(--tp-page-max) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: var(--tp-page-pad) !important;
padding-right: var(--tp-page-pad) !important;
background: transparent !important;
}
#top .row{
margin-left: 0 !important;
margin-right: 0 !important;
}
/* =========================================================
4) SLOGAN U HEADERU – FALLBACK (CSS ::after)
========================================================= */
header .container > .row{
display: flex;
flex-wrap: wrap;
}
header .container > .row::after{
content: "GRIJANJE, HLAĐENJE, VENTILACIJA I OBNOVLJIVI IZVORI ENERGIJE";
display: block !important;
width: 100% !important;
max-width: 100% !important;
text-align: center !important;
margin: 6px auto 8px !important;
padding: 0 12px !important;
font-weight: 700 !important;
letter-spacing: 0.6px !important;
font-size: 24px !important;
line-height: 1.25 !important;
padding-top: 2px !important;
padding-bottom: 2px !important;
color: #c00000 !important;
-webkit-text-fill-color: #c00000 !important;
flex: 0 0 100% !important;
order: 20 !important;
pointer-events: none;
}
@supports(selector(:has(*))){
header .container > .row:has(#tp-header-slogan)::after{
content: "" !important;
display: none !important;
}
}
@media (max-width: 991.98px){
header .container > .row::after{
font-size: 18px !important;
line-height: 1.25 !important;
letter-spacing: 0.35px !important;
}
}
@media (max-width: 575.98px){
header .container > .row::after{
font-size: 13px !important;
letter-spacing: 0.2px !important;
padding: 0 8px !important;
}
}
#tp-header-slogan{
display: block !important;
text-align: center !important;
font-weight: 800 !important;
letter-spacing: 0.6px;
line-height: 1.25;
color: #c00000 !important;
-webkit-text-fill-color: #c00000 !important;
font-size: 16px !important;
position: relative;
z-index: 50;
}
/* =========================================================
5) HOME – GLAVNI SLIDER
========================================================= */
.tp-main-slider{
max-width: var(--tp-page-max);
margin: 0 auto 20px;
position: relative;
overflow: hidden;
min-height: 260px;
}
.tp-main-slider-inner{ position: relative; width: 100%; min-height: 260px; }
.tp-main-slide{ position: relative; display: none; min-height: 260px; }
.tp-main-slide.is-active{ display: block; }
.tp-main-slide img{ display:block; width:100%; height:auto; }
.tp-main-slider button.tp-main-nav{
position:absolute;
top:50%;
transform:translateY(-50%);
z-index:5;
width:40px;
height:40px;
border-radius:50%;
border:none;
background:rgba(0,0,0,0.35);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
}
.tp-main-slider .tp-main-prev{ left:10px; right:auto; }
.tp-main-slider .tp-main-next{ right:10px; left:auto; }
.tp-main-dots{
position:absolute;
left:50%;
bottom:10px;
transform:translateX(-50%);
display:flex;
gap:6px;
margin:0;
padding:0;
}
.tp-main-dot{
width:10px;
height:10px;
border-radius:50%;
border:none;
padding:0;
background:#d5d5d5;
cursor:pointer;
}
.tp-main-dot.is-active{ background:#ff6b00; }
/* =========================================================
6) HOME – HERO BLOK
========================================================= */
.tp-hero{
margin: 20px 0 30px;
padding: 20px 15px 30px;
border-radius: 12px;
background: linear-gradient(180deg, #f9c5d1 0%, #b3d9ff 100%);
}
.tp-hero-inner{
max-width: var(--tp-page-max);
margin: 0 auto;
}
.tp-hero .tp-hero-strip{
display:flex;
align-items:center;
justify-content:center;
gap:4px;
width: 100% !important;
max-width: none !important;
margin: 0 auto !important;
background: rgba(255,255,255,0.98) !important;
border: 2px solid #c00000 !important;
border-radius: 10px !important;
box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 6px 16px rgba(0,0,0,0.08) !important;
padding: 10px 14px !important;
font-size: 14px;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
}
@media (max-width: 768px){
.tp-hero .tp-hero-strip{
white-space: normal !important;
flex-wrap: wrap !important;
row-gap: 4px;
font-size: 12px;
text-align: center;
padding: 10px 12px !important;
}
}
.tp-hero-favicon{ height: 20px !important; width: auto !important; display:inline-block; vertical-align:middle; }
.tp-iban-red{ color: #d40000 !important; -webkit-text-fill-color: #d40000 !important; font-weight: 700 !important; }
.tp-iban-blue{ color: #0b57d0 !important; -webkit-text-fill-color: #0b57d0 !important; font-weight: 700 !important; }
.tp-hero-iban-group{ white-space: nowrap !important; letter-spacing: 0; }
.tp-hero-iban{ margin: 0; }
.tp-subtitle{
font-size: 30px;
font-weight: 800;
letter-spacing: 6px;
text-transform: uppercase;
color: #d40000;
text-align: center;
margin-top: 10px;
margin-bottom: 25px;
display:block;
}
/* DONJI SLOGAN (HOME) */
.tp-bottom-slogan{
width: 100% !important;
max-width: var(--tp-page-max) !important;
margin: 14px auto 18px !important;
padding: 0 var(--tp-page-pad) !important;
text-align: center !important;
font-weight: 700 !important;
letter-spacing: 0.8px !important;
line-height: 1.25 !important;
color: #c00000 !important;
font-size: 16px !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: anywhere !important;
flex: 0 0 100% !important;
}
.tp-bottom-slogan *{ text-align: center !important; }
@media (max-width: 768px){
.tp-bottom-slogan{
font-size: 14px !important;
letter-spacing: 0.4px !important;
margin: 12px auto 14px !important;
}
}
/* =========================================================
7) HOME – GRID KATEGORIJA
========================================================= */
.tp-category-grid{
max-width: var(--tp-page-max);
margin: 0 auto;
padding: 10px 0 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 18px;
row-gap: 26px;
justify-items: center;
}
.tp-category{ text-align:center; text-decoration:none; color:#333; }
#common-home .tp-category-circle{
width: var(--tp-round-btn-pc) !important;
height: var(--tp-round-btn-pc) !important;
border-radius:50%;
border: 6px solid #c08a10;
background:#fffaf0;
margin:0 auto 8px;
display:flex;
align-items:center;
justify-content:center;
box-shadow: 0 10px 22px rgba(0,0,0,.12);
cursor:pointer;
user-select:none;
-webkit-tap-highlight-color: transparent;
transition: transform .12s ease, box-shadow .12s ease;
will-change: transform;
}
@media (max-width: 1100px){
#common-home .tp-category-circle{
width: var(--tp-round-btn-mob) !important;
height: var(--tp-round-btn-mob) !important;
}
}
@media (max-width: 420px){
#common-home .tp-category-circle{
width: var(--tp-round-btn-xs) !important;
height: var(--tp-round-btn-xs) !important;
}
}
.tp-category:hover .tp-category-circle{ transform: translateY(-2px); box-shadow: 0 14px 26px rgba(0,0,0,.14); }
.tp-category:active .tp-category-circle{ transform: translateY(2px) scale(.98); box-shadow: 0 8px 18px rgba(0,0,0,.12); }
.tp-category-circle img{ max-width:82%; max-height:82%; display:block; transform: translateY(3px); }
.tp-category-circle img.tp-icon-kotlovi{ max-height: 90%; }
.tp-category-circle img.tp-icon-grijaca-tijela{ max-width: 78%; max-height: 78%; }
.tp-category-label{
display:block;
font-size:11px;
font-weight:700;
text-transform: uppercase;
}
@media (max-width: 768px){
.tp-category-grid{ grid-template-columns: repeat(2, 1fr); }
}
/* =========================================================
8) HOME – DONJI ROLL BAR (brandovi)
========================================================= */
.tp-brand-outer{
overflow:hidden;
background:#fff;
border-top:1px solid #e0e0e0;
border-bottom:1px solid #e0e0e0;
padding:10px 0;
margin-top:15px;
white-space:nowrap;
}
.tp-brand-track{ display:inline-block; white-space:nowrap; will-change: transform; }
.tp-brand-item{ display:inline-block; padding: 0 24px; vertical-align: middle; }
.tp-brand-item img{ height:56px; width:auto; display:block; }
.tp-brand-item--big img{ height:64px; }
@media (max-width: 768px){
.tp-brand-item img{ height:42px; }
.tp-brand-item--big img{ height:50px; }
}
/* =========================================================
9) POVRATAK (info/footer) – zadrži (koristi se i drugdje)
========================================================= */
.tp-back-home-wrap{ width:100%; text-align:center; margin:18px 0 6px; }
.tp-back-home-btn{
display: inline-block;
padding: 10px 16px;
border-radius: 8px !important;
font-weight: 700;
text-decoration: none;
background: var(--tp-info-bg) !important;
border: 1px solid var(--tp-info-bd) !important;
color: #fff !important;
box-shadow: none !important;
}
.tp-back-home-btn:hover{
background: var(--tp-info-bg-hover) !important;
border-color: var(--tp-info-bd-hover) !important;
color: #fff !important;
text-decoration: none;
}
.tp-back-home-btn:active{
background: var(--tp-info-bd-hover) !important;
border-color: var(--tp-info-bd-hover) !important;
}
/* =========================================================
10) MENU – stabilizacija + širina u marginama
========================================================= */
#menu{
opacity: 1 !important;
visibility: visible !important;
display: block !important;
position: relative !important;
z-index: 20000 !important;
pointer-events: auto !important;
width: 100% !important;
max-width: var(--tp-page-max) !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
padding-left: var(--tp-page-pad) !important;
padding-right: var(--tp-page-pad) !important;
}
#menu .dropdown-menu, #menu .navbar-collapse{ z-index: 20001 !important; }
#menu > .container, #menu .container, #menu .container-fluid{
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
@media (max-width: 767.98px){
#menu{ min-height: 32px !important; padding-top: 4px !important; padding-bottom: 4px !important; }
#menu #category{
color: #000 !important;
-webkit-text-fill-color: #000 !important;
opacity: 1 !important;
font-size: 13px !important;
line-height: 1.1 !important;
margin: 0 !important;
font-weight: 800 !important;
letter-spacing: 0.2px !important;
}
#menu .navbar-toggler, #menu button.navbar-toggler{
border: 2px solid rgba(0,0,0,0.55) !important;
border-radius: 3px !important;
min-width: 36px !important;
min-height: 30px !important;
padding: 4px 6px !important;
font-weight: 900 !important;
}
#menu .navbar-toggler span, #menu .navbar-toggle .icon-bar{ height: 2px !important; }
}
/* =========================================================
11) BREADCRUMBS – crveni obrub (globalno)
========================================================= */
ul.breadcrumb{
border: 2px solid #c00000 !important;
padding: 6px 10px !important;
margin: 10px 0 12px !important;
border-radius: 8px !important;
background: transparent !important;
}
/* =========================================================
12) RAZDJELNICA
========================================================= */
.tp-divider-line{ border-top: 2px solid #c00000; margin: 14px 0 18px; }
.tp-divider-line + *{ margin-top: 12px !important; }
/* =========================================================
13) TABLET (768–1024): 100% širine za category + info
========================================================= */
@media (min-width: 768px) and (max-width: 1024px){
body[class*="product-category"] #column-left,
body[class*="product-category"] #column-right,
body[class*="information-"] #column-left,
body[class*="information-"] #column-right{ display: none !important; }
body[class*="product-category"] #content,
body[class*="information-"] #content{
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
float: none !important;
}
body[class*="product-category"] .row,
body[class*="information-"] .row{
display: flex !important;
flex-wrap: wrap !important;
}
#content *{ max-width: 100%; }
}
/* =========================================================
14) FAVICON TRAKA (globalno)
========================================================= */
.tp-favicon-strip-wrap{ margin: 10px 0; }
.tp-favicon-strip{
border: 2px solid #d40000;
border-radius: 10px;
padding: 10px 12px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
text-align: center;
}
.tp-favicon-strip .tp-sep{ opacity: .6; }
.tp-favicon-strip a{ text-decoration: none; font-weight: 700; }
.tp-favicon-strip .tp-iban{ font-size: 16px; font-weight: 800; line-height: 1.2; }
.tp-favicon-strip .tp-iban + .tp-iban{ display: none !important; }
@media (max-width: 767px){
.tp-favicon-strip{ flex-direction: column; gap: 6px; padding: 12px 10px; }
.tp-favicon-strip .tp-sep{ display:none; }
.tp-favicon-strip .tp-iban{ font-size: 17px; }
}
/* =========================================================
15) KLIMA (path=61) – stabilan blok
========================================================= */
#product-category.tp-klima-only #column-left,
#product-category.tp-klima-only #column-right{ display: none !important; }
#product-category.tp-klima-only .row{ display: flex !important; flex-wrap: wrap !important; }
#product-category.tp-klima-only #content{
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
padding-left: 0 !important; /* važno: da inset određuje var(--tp-inset), ne Bootstrap padding */
padding-right: 0 !important;
}
/* Panel boja (bez full-bleed hackova) */
#product-category.tp-klima-only{
background: var(--tp-klima-bg) !important;
background-image: none !important;
border-radius: 16px;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 2px solid #d60000 !important;
--tp-klima-circle-pc: 155px;
--tp-klima-circle-tab: 145px;
--tp-klima-circle-mob: 140px;
--tp-klima-circle: var(--tp-klima-circle-pc);
}
@media (min-width: 768px) and (max-width: 1024px){
#product-category.tp-klima-only{ --tp-klima-circle: var(--tp-klima-circle-tab); }
}
@media (max-width: 767px){
#product-category.tp-klima-only{ --tp-klima-circle: var(--tp-klima-circle-mob); }
}
#product-category.tp-klima-only #content .tp-favicon-strip{
background: rgba(255,255,255,0.98) !important;
border: 2px solid #c00000 !important;
border-radius: 10px !important;
box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 6px 16px rgba(0,0,0,0.08) !important;
}
/* Krugovi (promjer “zaključan”) */
#product-category.tp-klima-only #content .tp-klima-root .tp-category-circle,
#product-category.tp-klima-only #content .tp-klima-root a .tp-category-circle,
#product-category.tp-klima-only #content .tp-subcats .tp-subcat-btn,
#product-category.tp-klima-only #content .tp-subcats a.tp-subcat-btn{
width: var(--tp-klima-circle) !important;
height: var(--tp-klima-circle) !important;
min-width: var(--tp-klima-circle) !important;
min-height: var(--tp-klima-circle) !important;
border-radius: 50% !important;
aspect-ratio: 1 / 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
}
#product-category.tp-klima-only #content .tp-klima-root .tp-category-circle img,
#product-category.tp-klima-only #content .tp-subcats .tp-subcat-btn img{
max-width: 82% !important;
max-height: 82% !important;
display: block !important;
}
#product-category.tp-klima-only #content .tp-klima-root,
#product-category.tp-klima-only #content .tp-subcats{
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 26px !important;
row-gap: 26px !important;
column-gap: 26px !important;
}
@media (min-width: 992px){
#product-category.tp-klima-only #content .tp-klima-root,
#product-category.tp-klima-only #content .tp-subcats{
padding-left: 10px !important;
padding-right: 10px !important;
}
}
#product-category.tp-klima-only #content .tp-category-label,
#product-category.tp-klima-only #content .tp-subcat-text{
max-width: var(--tp-klima-circle) !important;
text-align: center !important;
line-height: 1.15 !important;
}
/* =========================================================
16) TP QUICK NAV
========================================================= */
.tp-quicknav{ margin: 10px 0 14px 0; }
.tp-quicknav .container{
max-width: var(--tp-page-max) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: var(--tp-page-pad) !important;
padding-right: var(--tp-page-pad) !important;
}
.tp-qn-round-wrap{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
padding: 10px 0 6px 0;
}
.tp-qn-round{
text-decoration: none !important;
display: inline-flex;
flex-direction: column;
align-items: center;
width: 132px;
}
.tp-qn-round__circle{
width: 96px;
height: 96px;
border-radius: 50%;
background: #ffffff;
border: 2px solid rgba(0,0,0,0.12);
box-shadow: 0 6px 16px rgba(0,0,0,0.10);
display: grid;
place-items: center;
position: relative;
overflow: hidden;
}
.tp-qn-round__icon{ width: 70%; height: 70%; object-fit: contain; }
.tp-qn-round__label{
margin-top: 8px;
text-align: center;
font-weight: 700;
font-size: 14px;
color: #0b2b4a;
line-height: 1.15;
}
.tp-qn-rect-wrap{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
padding: 8px 0 12px 0;
border-top: 1px dashed rgba(0,0,0,0.12);
}
.tp-qn-rect{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 14px;
border-radius: 12px;
text-decoration: none !important;
font-weight: 800;
font-size: 13px;
letter-spacing: 0.2px;
background: #1f6fb2;
color: #fff !important;
border: 1px solid rgba(0,0,0,0.10);
box-shadow: 0 6px 14px rgba(0,0,0,0.10);
}
.tp-qn-rect:hover{ filter: brightness(1.06); }
@media (max-width: 768px){
.tp-qn-round{ width: 118px; }
.tp-qn-round__circle{ width: 86px; height: 86px; }
.tp-qn-round__label{ font-size: 13px; }
.tp-qn-rect{ padding: 10px 12px; font-size: 12.5px; }
}
@media (max-width: 480px){
.tp-qn-round{ width: 104px; }
.tp-qn-round__circle{ width: 78px; height: 78px; }
}
/* =========================================================
17) DIZALICE TOPLINE (path=62) – final izgled (tp-dizalice-only / tp-dt-only)
========================================================= */
/* Kolone OFF (kao i klima) */
#product-category.tp-dt-only #column-left,
#product-category.tp-dt-only #column-right,
#product-category.tp-dizalice-only #column-left,
#product-category.tp-dizalice-only #column-right{
display: none !important;
}
#product-category.tp-dt-only .row,
#product-category.tp-dizalice-only .row{
display: flex !important;
flex-wrap: wrap !important;
}
#product-category.tp-dt-only #content,
#product-category.tp-dizalice-only #content{
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
padding-left: 0 !important; /* važno: da inset određuje var(--tp-inset), ne Bootstrap padding */
padding-right: 0 !important;
}
/* Panel boja (topla, “na granici lavande i žute”) */
#product-category.tp-dt-only,
#product-category.tp-dizalice-only{
background: var(--tp-dizalice-bg) !important;
background-image: none !important;
border-radius: 16px;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 2px solid #d60000 !important;
}
/* I body pozadina (da ne “vraća bijelo”) */
body.product-category-62,
body[class*="product-category-62"]{
background: var(--tp-dizalice-bg) !important;
background-image: none !important;
}
/* Čitljivost teksta (spriječi “bijelo” iz bilo kojeg razloga) */
#product-category.tp-dt-only #content,
#product-category.tp-dt-only #content p,
#product-category.tp-dt-only #content li,
#product-category.tp-dt-only #content h1,
#product-category.tp-dt-only #content h2,
#product-category.tp-dt-only #content h3,
#product-category.tp-dt-only #content h4,
#product-category.tp-dt-only #content h5,
#product-category.tp-dt-only #content h6,
#product-category.tp-dizalice-only #content,
#product-category.tp-dizalice-only #content p,
#product-category.tp-dizalice-only #content li,
#product-category.tp-dizalice-only #content h1,
#product-category.tp-dizalice-only #content h2,
#product-category.tp-dizalice-only #content h3,
#product-category.tp-dizalice-only #content h4,
#product-category.tp-dizalice-only #content h5,
#product-category.tp-dizalice-only #content h6{
color: #2b2b2b !important;
}
/* DT breadcrumb “staklo” */
#product-category.tp-dt-only ul.breadcrumb,
#product-category.tp-dizalice-only ul.breadcrumb{
background: rgba(255,255,255,0.55) !important;
}
/* Favicon traka u #content – obrub + sjena */
#product-category.tp-dt-only #content .tp-favicon-strip,
#product-category.tp-dizalice-only #content .tp-favicon-strip{
border: 2px solid #c00000 !important;
border-radius: 10px !important;
background: rgba(255,255,255,0.98) !important;
box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 6px 16px rgba(0,0,0,0.08) !important;
}
/* =========================================================
18) DONJA 2 GUMBA (Povratak na naslovnicu / Povratak na vrh)
- lijevi lijevo, desni desno
- na mobitelu pokušaj 1 red (ako ekran dopušta)
========================================================= */
#product-category.tp-klima-only .tp-back-home.tp-bottom-nav,
#product-category.tp-dt-only .tp-back-home.tp-bottom-nav,
#product-category.tp-dizalice-only .tp-back-home.tp-bottom-nav{
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 10px !important;
margin: 18px 0 16px !important;
text-align: left !important;
width: 100% !important;
padding-left: var(--tp-inset) !important; /* u ravnini s tekstom */
padding-right: var(--tp-inset) !important;
box-sizing: border-box !important;
flex-wrap: nowrap !important; /* preferiraj 1 red */
}
#product-category.tp-klima-only .tp-back-home.tp-bottom-nav a,
#product-category.tp-dt-only .tp-back-home.tp-bottom-nav a,
#product-category.tp-dizalice-only .tp-back-home.tp-bottom-nav a{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 10px 16px !important;
border-radius: 10px !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
text-decoration: none !important;
background: var(--tp-info-bg) !important;
border: 1px solid var(--tp-info-bd) !important;
color: #fff !important;
box-shadow: 0 4px 10px rgba(0,0,0,0.10) !important;
white-space: nowrap !important;
min-width: 0 !important;
}
#product-category.tp-klima-only .tp-back-home.tp-bottom-nav a:hover,
#product-category.tp-dt-only .tp-back-home.tp-bottom-nav a:hover,
#product-category.tp-dizalice-only .tp-back-home.tp-bottom-nav a:hover{
background: var(--tp-info-bg-hover) !important;
border-color: var(--tp-info-bd-hover) !important;
}
/* Desni gumb uvijek desno */
#product-category.tp-klima-only .tp-back-home.tp-bottom-nav .tp-back-top-btn,
#product-category.tp-dt-only .tp-back-home.tp-bottom-nav .tp-back-top-btn,
#product-category.tp-dizalice-only .tp-back-home.tp-bottom-nav .tp-back-top-btn{
margin-left: auto !important;
}
/* MOBITEL: smanji padding da stanu; na ultra-uskom dopusti prelamanje */
@media (max-width: 575.98px){
#product-category.tp-klima-only .tp-back-home.tp-bottom-nav a,
#product-category.tp-dt-only .tp-back-home.tp-bottom-nav a,
#product-category.tp-dizalice-only .tp-back-home.tp-bottom-nav a{
padding: 9px 12px !important;
font-size: 13px !important;
}
}
@media (max-width: 360px){
#product-category.tp-klima-only .tp-back-home.tp-bottom-nav,
#product-category.tp-dt-only .tp-back-home.tp-bottom-nav,
#product-category.tp-dizalice-only .tp-back-home.tp-bottom-nav{
flex-wrap: wrap !important;
}
}
/* =========================================================
19) FINAL: NASLOVI + PODNASLOVI U ISTOJ LIJEVOJ LINIJI KAO TEKST
- Radi na KLIMA (tp-klima-only) i DIZALICE (tp-dizalice-only / tp-dt-only)
- Hvata naslove i izvan #content (tema ih zna renderati u wrapperu iznad sadržaja)
========================================================= */
/* 19.1) Ugasiti centriranja wrappera koja tema zna nametnuti */
#product-category.tp-klima-only .page-header,
#product-category.tp-klima-only .page-title,
#product-category.tp-klima-only .text-center,
#product-category.tp-dt-only .page-header,
#product-category.tp-dt-only .page-title,
#product-category.tp-dt-only .text-center,
#product-category.tp-dizalice-only .page-header,
#product-category.tp-dizalice-only .page-title,
#product-category.tp-dizalice-only .text-center{
text-align: left !important;
justify-content: flex-start !important;
}
/* 19.2) Hard lock: svi H1–H6 u tim kategorijama dobiju isti “inset” kao tekst */
#product-category.tp-klima-only h1,
#product-category.tp-klima-only h2,
#product-category.tp-klima-only h3,
#product-category.tp-klima-only h4,
#product-category.tp-klima-only h5,
#product-category.tp-klima-only h6,
#product-category.tp-dt-only h1,
#product-category.tp-dt-only h2,
#product-category.tp-dt-only h3,
#product-category.tp-dt-only h4,
#product-category.tp-dt-only h5,
#product-category.tp-dt-only h6,
#product-category.tp-dizalice-only h1,
#product-category.tp-dizalice-only h2,
#product-category.tp-dizalice-only h3,
#product-category.tp-dizalice-only h4,
#product-category.tp-dizalice-only h5,
#product-category.tp-dizalice-only h6{
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
text-align: left !important;
padding-left: var(--tp-inset) !important;
padding-right: var(--tp-inset) !important;
margin-left: 0 !important;
margin-right: 0 !important;
text-indent: 0 !important;
}
/* =========================================================
19.3) FOOTER BOTTOM (“Pošaljite nam upit” + tekst) – vrati u panel margine/inset
- Hvata i slučaj kada je bottom dio izvan .container
========================================================= */
#footer > .text-center,
#footer > .text-end,
#footer > .footer-bottom,
#footer .footer-bottom,
#footer .footer-bottom .text-center,
#footer .footer-bottom .text-end,
#footer .text-center{
max-width: var(--tp-page-max) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: calc(var(--tp-page-pad) + var(--tp-inset)) !important;
padding-right: calc(var(--tp-page-pad) + var(--tp-inset)) !important;
box-sizing: border-box !important;
text-align: left !important;
}
#footer .text-center .btn,
#footer .text-center a.btn{
margin-left: 0 !important;
}
/* =========================================================
20) DONJA 2 GUMBA (KLIMA + DIZALICE) – lijevo/desno, u ravnini s tekstom
========================================================= */
#product-category.tp-klima-only .tp-back-home.tp-bottom-nav,
#product-category.tp-dt-only .tp-back-home.tp-bottom-nav,
#product-category.tp-dizalice-only .tp-back-home.tp-bottom-nav{
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 10px !important;
width: 100% !important;
box-sizing: border-box !important;
padding-left: var(--tp-inset) !important;
padding-right: var(--tp-inset) !important;
flex-wrap: nowrap !important; /* preferiraj 1 red */
text-align: left !important;
}
/* Na jako uskim ekranima dopusti prelamanje da ne “pukne” layout */
@media (max-width: 360px){
#product-category.tp-klima-only .tp-back-home.tp-bottom-nav,
#product-category.tp-dt-only .tp-back-home.tp-bottom-nav,
#product-category.tp-dizalice-only .tp-back-home.tp-bottom-nav{
flex-wrap: wrap !important;
}
}
/* ======================================================
FINAL V3 – 1) NASLOVI = TEKST (ista lijeva linija)
– 2) FOOTER “Pošaljite nam upit” u CENTAR
====================================================== */
/* 1) Umjesto paddinga na p/h2... stavi “inset” na #content kao cjelinu */
#product-category.tp-klima-only #content,
#product-category.tp-dt-only #content,
#product-category.tp-dizalice-only #content{
padding-left: var(--tp-inset) !important;
padding-right: var(--tp-inset) !important;
box-sizing: border-box !important;
}
/* 2) Sve unutar #content neka NE dodaje svoje lijeve paddinge/margine
(inače se naslovi i tekst nikad neće poklopiti) */
#product-category.tp-klima-only #content h1,
#product-category.tp-klima-only #content h2,
#product-category.tp-klima-only #content h3,
#product-category.tp-klima-only #content h4,
#product-category.tp-klima-only #content h5,
#product-category.tp-klima-only #content h6,
#product-category.tp-dt-only #content h1,
#product-category.tp-dt-only #content h2,
#product-category.tp-dt-only #content h3,
#product-category.tp-dt-only #content h4,
#product-category.tp-dt-only #content h5,
#product-category.tp-dt-only #content h6,
#product-category.tp-dizalice-only #content h1,
#product-category.tp-dizalice-only #content h2,
#product-category.tp-dizalice-only #content h3,
#product-category.tp-dizalice-only #content h4,
#product-category.tp-dizalice-only #content h5,
#product-category.tp-dizalice-only #content h6,
#product-category.tp-klima-only #content p,
#product-category.tp-dt-only #content p,
#product-category.tp-dizalice-only #content p{
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
text-indent: 0 !important;
text-align: left !important;
}
/* 3) Liste: vrati normalno uvlacenje listi, ali kontrolirano */
#product-category.tp-klima-only #content ul,
#product-category.tp-klima-only #content ol,
#product-category.tp-dt-only #content ul,
#product-category.tp-dt-only #content ol,
#product-category.tp-dizalice-only #content ul,
#product-category.tp-dizalice-only #content ol{
padding-left: 1.4em !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
text-align: left !important;
}
/* 4) Ako tema centrira neki wrapper, pregazi */
#product-category.tp-klima-only #content .text-center,
#product-category.tp-klima-only #content .text-center *,
#product-category.tp-dt-only #content .text-center,
#product-category.tp-dt-only #content .text-center *,
#product-category.tp-dizalice-only #content .text-center,
#product-category.tp-dizalice-only #content .text-center *{
text-align: left !important;
}
/* ======================================================
FOOTER – “Pošaljite nam upit” u CENTAR
(obično je to direktni .text-center ispod #footer)
====================================================== */
#footer > .text-center{
max-width: var(--tp-page-max) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: var(--tp-page-pad) !important;
padding-right: var(--tp-page-pad) !important;
box-sizing: border-box !important;
text-align: center !important;
}
#footer > .text-center .btn,
#footer > .text-center a.btn{
display: inline-block !important;
margin: 8px auto 0 !important;
}
#footer > .text-center p,
#footer > .text-center span,
#footer > .text-center p,
#footer > .text-center span,
#footer > .text-center small{
text-align: center !important;
}
/* ======================================================
FOOTER BOTTOM – centriraj “Pošaljite nam upit” + copyright
(PC + tablet + mobitel)
====================================================== */
/* 1) Glavni wrapper (obično direktno ispod #footer) */
#footer > .text-center{
max-width: var(--tp-page-max) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: var(--tp-page-pad) !important;
padding-right: var(--tp-page-pad) !important;
box-sizing: border-box !important;
text-align: center !important;
}
/* 2) Tekst ispod gumba */
#footer > .text-center p,
#footer > .text-center span,
#footer > .text-center small,
#footer > .text-center a{
text-align: center !important;
}
/* 3) Gumb “Pošaljite nam upit” */
#footer > .text-center .btn,
#footer > .text-center a.btn,
#footer > .text-center button.btn{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 10px auto 8px !important; /* centar */
float: none !important;
max-width: 100% !important;
}
/* 4) Ako tema ima negativne margine, ugasi ih */
#footer > .text-center{
left: auto !important;
right: auto !important;
transform: none !important;
}
/* ======================================================
FOOTER – CENTAR samo za DONJI BLOK (poslije .row)
“Pošaljite nam upit” + “Pokreće OpenCart” + “TERMO-PROM © 2025”
====================================================== */
/* 1) Osiguraj da stupci u footeru ostanu lijevo (ako ih nešto dira) */
#footer .row,
#footer .row *{
text-align: left !important;
}
/* 2) Donji blok je najčešće odmah nakon .row u istom .containeru */
#footer .container > .row + .text-center,
#footer .container > .row + div.text-center,
#footer .container > .row + p.text-center,
#footer .container > .row + .footer-bottom,
#footer .container > .row + div,
#footer .footer-bottom,
#footer .footer-bottom *{
text-align: center !important;
}
/* 3) U slučaju da je donji blok u posebnom wrapperu bez klase footer-bottom */
#footer .container > .row + div{
text-align: center !important;
}
/* 4) Gumb “Pošaljite nam upit” – centar (bez float-a) */
#footer .container > .row + .text-center .btn,
#footer .container > .row + div.text-center .btn,
#footer .container > .row + div .btn,
#footer .footer-bottom .btn,
#footer .footer-bottom a.btn,
#footer .container > .row + .text-center a.btn,
#footer .container > .row + div a.btn{
float: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 10px auto 8px !important;
}
/* 5) Tekst ispod gumba – centar */
#footer .container > .row + .text-center p,
#footer .container > .row + div.text-center p,
#footer .container > .row + div p,
#footer .footer-bottom p,
#footer .footer-bottom small,
#footer .footer-bottom span{
text-align: center !important;
}
/* ======================================================
FOOTER – HARD CENTER po “Kontakt” linku (Pošaljite nam upit)
Radi i kad tema promijeni strukturu
====================================================== */
/* A) Centriraj BLOK koji sadrži kontakt-gumb (moderni Chrome/Edge podržavaju :has) */
#footer .container > *:has(a[href*="route=information/contact"]),
#footer .container > *:has(a[href*="information/contact"]),
#footer .container > *:has(a[href*="kontakt"]),
#footer .container > *:has(a[href*="contact"]){
text-align: center !important;
}
/* B) Sam gumb – centar i bez float-a */
#footer a.btn[href*="route=information/contact"],
#footer a.btn[href*="information/contact"],
#footer a.btn[href*="kontakt"],
#footer a.btn[href*="contact"]{
float: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 10px auto 8px !important;
}
/* C) Tekst ispod gumba (unutar istog bloka) – centar */
#footer .container > *:has(a[href*="route=information/contact"]) p,
#footer .container > *:has(a[href*="information/contact"]) p,
#footer .container > *:has(a[href*="kontakt"]) p,
#footer .container > *:has(a[href*="contact"]) p,
#footer .container > *:has(a[href*="route=information/contact"]) small,
#footer .container > *:has(a[href*="information/contact"]) small,
#footer .container > *:has(a[href*="kontakt"]) small,
#footer .container > *:has(a[href*="contact"]) small,
#footer .container > *:has(a[href*="route=information/contact"]) span,
#footer .container > *:has(a[href*="information/contact"]) span,
#footer .container > *:has(a[href*="kontakt"]) span,
#footer .container > *:has(a[href*="contact"]) span{
text-align: center !important;
}
/* ======================================================
FOOTER – VRATI DONJI BLOK U CENTAR
(Pošaljite nam upit + “Pokreće OpenCart” + TERMO-PROM 2025)
====================================================== */
/* A) Stupci (row) neka budu lijevo (to je OK) */
#footer .row,
#footer .row *{
text-align: left !important;
}
/* B) Donji blok: obično je .text-center iza .row (ili zadnji .text-center u footeru) */
#footer .container > .row + .text-center,
#footer .container > .row + div.text-center,
#footer .container > .text-center:last-child,
#footer .container > div.text-center:last-child{
text-align: center !important;
}
/* C) U donjem bloku centriraj sav tekst */
#footer .container > .row + .text-center *,
#footer .container > .row + div.text-center *,
#footer .container > .text-center:last-child *,
#footer .container > div.text-center:last-child *{
text-align: center !important;
}
/* D) Gumb “Pošaljite nam upit” centar */
#footer .container > .row + .text-center .btn,
#footer .container > .row + div.text-center .btn,
#footer .container > .text-center:last-child .btn,
#footer .container > div.text-center:last-child .btn{
float: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 10px auto 8px !important;
}
/* ======================================================
PATCH (SIGURNO) – NE DIRA NASLOVNICU
- Footer bottom: centar gumb + “Pokreće OpenCart” + “TERMO-PROM 2025”
- Klima: donja 2 gumba razmak lijevo/desno
====================================================== */
/* =========================
A) FOOTER BOTTOM – CENTAR
========================= */
/* 1) Ne diramo stupce (.row). Diramo samo elemente u footeru koji NISU .row */
#footer .container > :not(.row){
text-align: center !important;
}
/* 2) Ako tema koristi desno poravnanje (text-end / pull-right / float), pregazi samo u bottom dijelu */
#footer .container > :not(.row).text-end,
#footer .container > :not(.row) .text-end,
#footer .container > :not(.row) .pull-right,
#footer .container > :not(.row) .float-end{
float: none !important;
text-align: center !important;
}
/* 3) Gumb “Pošaljite nam upit” – centar (bez float-a, bez “lijepljenja” u kut) */
#footer .container > :not(.row) .btn,
#footer .container > :not(.row) a.btn,
#footer .container > :not(.row) button.btn,
#footer .container > :not(.row) input.btn{
float: none !important;
margin-left: auto !important;
margin-right: auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* 4) Tekst “Pokreće OpenCart … / TERMO-PROM 2025” – neka bude blok i u centru */
#footer .container > :not(.row) p,
#footer .container > :not(.row) small,
#footer .container > :not(.row) span{
display: block !important;
width: 100% !important;
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ==========================================
B) KLIMA – DONJA 2 GUMBA LIJEVO / DESNO
========================================== */
/* Gađamo samo “Klima uređaji” stranicu i samo TP wrapper */
#product-category.tp-klima-only .tp-back-home,
#product-category.tp-klima-only .tp-back-home-wrap{
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 12px !important;
width: 100% !important;
}
/* Ukloni centriranje koje dolazi iz margina na linkovima */
#product-category.tp-klima-only .tp-back-home a,
#product-category.tp-klima-only .tp-back-home-wrap a{
margin: 0 !important;
}
/* Desni gumb (zadnji link) guramo skroz desno */
#product-category.tp-klima-only .tp-back-home a:last-child,
#product-category.tp-klima-only .tp-back-home-wrap a:last-child{
margin-left: auto !important;
}
/* ======================================================
PATCH V5 (samo KLIMA bottom nav + footer bottom)
- koristi :has() da pogodi stvarni wrapper
====================================================== */
/* ==========================================
A) KLIMA – DONJA 2 GUMBA LIJEVO / DESNO
(gađa roditelja koji sadrži link na home + link na #top)
========================================== */
/* 1) Najčešći “home” link (OpenCart) + “vrh” anchor */
#product-category.tp-klima-only :is(div, p, section, nav):has(a[href*="route=common/home"]):has(a[href="#top"]),
#product-category.tp-klima-only :is(div, p, section, nav):has(a[href="/"]):has(a[href="#top"]),
#product-category.tp-klima-only :is(div, p, section, nav):has(a[href*="index.php?route=common/home"]):has(a[href="#top"]),
#product-category.tp-klima-only :is(div, p, section, nav):has(a[href*="common/home"]):has(a[href*="#top"]){
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 12px !important;
width: 100% !important;
}
/* 2) Ako “vrh” nije #top nego neki drugi anchor, pokrij i to */
#product-category.tp-klima-only :is(div, p, section, nav):has(a[href*="common/home"]):has(a[href^="#"]){
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 12px !important;
width: 100% !important;
}
/* 3) Ukloni centrirajuće margine na samim linkovima */
#product-category.tp-klima-only :is(div, p, section, nav):has(a[href*="common/home"]):has(a[href^="#"]) a{
margin: 0 !important;
}
/* 4) Desni link (anchor) gurni skroz desno */
#product-category.tp-klima-only :is(div, p, section, nav):has(a[href*="common/home"]):has(a[href^="#"]) a[href^="#"]{
margin-left: auto !important;
}
/* ================================
B) FOOTER BOTTOM – U CENTAR
(gumb + 2 retka teksta)
================================ */
/* 1) Pronađi kolonu (div) u footer row koja sadrži .btn “Pošaljite nam upit”
i napravi je 100% širine (prelomi u novi red). */
#footer .row > div:has(.btn){
flex: 0 0 100% !important;
max-width: 100% !important;
width: 100% !important;
text-align: center !important;
}
/* 2) Unutar te kolone sve centriraj */
#footer .row > div:has(.btn) *{
text-align: center !important;
}
/* 3) Sam gumb – centar */
#footer .row > div:has(.btn) .btn,
#footer .row > div:has(.btn) a.btn,
#footer .row > div:has(.btn) button.btn{
float: none !important;
display: inline-flex !important;
margin: 10px auto 6px !important;
}
/* 4) Tekst ispod gumba – centar preko pune širine */
#footer .row > div:has(.btn) small,
#footer .row > div:has(.btn) p,
#footer .row > div:has(.btn) span{
display: block !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* =========================================================
MOBILE FIX: IBAN mora biti vidljiv u favicon trakama (HOME/KLIMA/DT)
========================================================= */
@media (max-width: 767.98px){
/* 1) Nikad ne skrivaj drugi dio IBAN-a na mobitelu */
.tp-favicon-strip .tp-iban + .tp-iban{
display: inline !important;
}
/* 2) Dopusti normalno lomljenje i više redaka u trakama */
.tp-favicon-strip,
.tp-hero-strip{
flex-wrap: wrap !important;
white-space: normal !important;
overflow: visible !important;
text-align: center !important;
}
/* 3) IBAN grupa – neka se vidi cijeli i neka se lomi po potrebi */
.tp-favicon-strip .tp-hero-iban-group,
.tp-hero-strip .tp-hero-iban-group{
display: inline-flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 2px !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
word-break: break-word !important;
}
/* 4) Malo smanji da stane na ekran, ali ostane čitljivo */
.tp-favicon-strip .tp-iban,
.tp-hero-strip .tp-hero-iban,
.tp-hero-strip .tp-hero-iban-label,
.tp-favicon-strip .tp-hero-iban-label{
font-size: 13px !important;
line-height: 1.2 !important;
}
/* 5) Ako ti separatori previše zbijaju sadržaj, sakrij ih na mobitelu */
.tp-favicon-strip .tp-sep,
.tp-hero-strip .tp-sep{
display: none !important;
}
}
/* =========================================================
MOBILE FIX (KLIMA + DIZALICE): IBAN mora biti vidljiv u favicon traci
========================================================= */
@media (max-width: 767.98px){
/* 1) Osiguraj da favicon traka na KLIMA/DT dopušta više redaka */
#product-category.tp-klima-only #content .tp-favicon-strip,
#product-category.tp-dt-only #content .tp-favicon-strip,
#product-category.tp-dizalice-only #content .tp-favicon-strip{
flex-wrap: wrap !important;
white-space: normal !important;
overflow: visible !important;
text-align: center !important;
}
/* 2) Ne skrivaj nijedan IBAN dio (pokrij sve varijante klasa) */
#product-category.tp-klima-only #content .tp-favicon-strip .tp-iban,
#product-category.tp-dt-only #content .tp-favicon-strip .tp-iban,
#product-category.tp-dizalice-only #content .tp-favicon-strip .tp-iban,
#product-category.tp-klima-only #content .tp-favicon-strip .tp-hero-iban,
#product-category.tp-dt-only #content .tp-favicon-strip .tp-hero-iban,
#product-category.tp-dizalice-only #content .tp-favicon-strip .tp-hero-iban,
#product-category.tp-klima-only #content .tp-favicon-strip .tp-hero-iban-group,
#product-category.tp-dt-only #content .tp-favicon-strip .tp-hero-iban-group,
#product-category.tp-dizalice-only #content .tp-favicon-strip .tp-hero-iban-group,
#product-category.tp-klima-only #content .tp-favicon-strip [class*="iban"],
#product-category.tp-dt-only #content .tp-favicon-strip [class*="iban"],
#product-category.tp-dizalice-only #content .tp-favicon-strip [class*="iban"]{
display: inline !important;
visibility: visible !important;
opacity: 1 !important;
}
/* 3) IBAN grupu prebaci u vlastiti red (najčistije na mobitelu) */
#product-category.tp-klima-only #content .tp-favicon-strip .tp-hero-iban-group,
#product-category.tp-dt-only #content .tp-favicon-strip .tp-hero-iban-group,
#product-category.tp-dizalice-only #content .tp-favicon-strip .tp-hero-iban-group{
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
width: 100% !important;
margin-top: 4px !important;
gap: 2px !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
word-break: break-word !important;
}
/* 4) Ako je IBAN “splitan” u 2 .tp-iban span-a, ovo ga obavezno vraća */
#product-category.tp-klima-only #content .tp-favicon-strip .tp-iban + .tp-iban,
#product-category.tp-dt-only #content .tp-favicon-strip .tp-iban + .tp-iban,
#product-category.tp-dizalice-only #content .tp-favicon-strip .tp-iban + .tp-iban{
display: inline !important;
}
/* 5) Sitno smanjenje fonta da uvijek stane */
#product-category.tp-klima-only #content .tp-favicon-strip [class*="iban"],
#product-category.tp-dt-only #content .tp-favicon-strip [class*="iban"],
#product-category.tp-dizalice-only #content .tp-favicon-strip [class*="iban"]{
font-size: 13px !important;
line-height: 1.2 !important;
}
/* 6) Separatori često “pojedu” prostor – makni ih na mobitelu */
#product-category.tp-klima-only #content .tp-favicon-strip .tp-sep,
#product-category.tp-dt-only #content .tp-favicon-strip .tp-sep,
#product-category.tp-dizalice-only #content .tp-favicon-strip .tp-sep{
display: none !important;
}
}
/* =========================================================
HARD MOBILE FIX (KLIMA + DIZALICE): IBAN mora biti vidljiv
- radi i ako je traka .tp-favicon-strip ili .tp-hero-strip
========================================================= */
@media (max-width: 767.98px){
/* 1) Traku prebaci u stupac (svaki komad u svoj red) */
#product-category.tp-klima-only #content .tp-favicon-strip,
#product-category.tp-dt-only #content .tp-favicon-strip,
#product-category.tp-dizalice-only #content .tp-favicon-strip,
#product-category.tp-klima-only #content .tp-hero-strip,
#product-category.tp-dt-only #content .tp-hero-strip,
#product-category.tp-dizalice-only #content .tp-hero-strip{
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: nowrap !important;
white-space: normal !important;
overflow: visible !important;
gap: 6px !important;
text-align: center !important;
padding: 12px 10px !important;
}
/* 2) Separatori na mobitelu samo smetaju */
#product-category.tp-klima-only #content .tp-favicon-strip .tp-sep,
#product-category.tp-dt-only #content .tp-favicon-strip .tp-sep,
#product-category.tp-dizalice-only #content .tp-favicon-strip .tp-sep,
#product-category.tp-klima-only #content .tp-hero-strip .tp-sep,
#product-category.tp-dt-only #content .tp-hero-strip .tp-sep,
#product-category.tp-dizalice-only #content .tp-hero-strip .tp-sep{
display: none !important;
}
/* 3) IBAN: pokaži sve što ima “iban” u klasi (najširi mogući hvatač) */
#product-category.tp-klima-only #content [class*="iban"],
#product-category.tp-dt-only #content [class*="iban"],
#product-category.tp-dizalice-only #content [class*="iban"]{
display: inline !important;
visibility: visible !important;
opacity: 1 !important;
max-width: 100% !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
word-break: break-word !important;
font-size: 13px !important;
line-height: 1.2 !important;
}
/* 4) Ako je IBAN grupiran, daj mu puni red i centar */
#product-category.tp-klima-only #content .tp-hero-iban-group,
#product-category.tp-dt-only #content .tp-hero-iban-group,
#product-category.tp-dizalice-only #content .tp-hero-iban-group{
display: block !important;
width: 100% !important;
text-align: center !important;
margin-top: 2px !important;
}
/* 5) Ako je IBAN podijeljen na dva spana (.tp-iban + .tp-iban) – nemoj skrivati drugi */
#product-category.tp-klima-only #content .tp-iban + .tp-iban,
#product-category.tp-dt-only #content .tp-iban + .tp-iban,
#product-category.tp-dizalice-only #content .tp-iban + .tp-iban{
display: inline !important;
}
}
/* TP HARD SHOW – favicon traka mora biti vidljiva */
.tp-favicon-strip-container,
.tp-favicon-strip-wrap,
.tp-favicon-strip{
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* ======================================================
TP FAVICON TRAKA – MOBILE TIPOGRAFIJA (veći font, manji razmaci)
====================================================== */
/* Općenito: u traci ukloni “default” margine paragrafa i sličnog */
.tp-favicon-strip p,
.tp-favicon-strip div,
.tp-favicon-strip span,
#tp-favicon-strip p,
#tp-favicon-strip div,
#tp-favicon-strip span{
margin: 0 !important;
padding: 0 !important;
}
/* Ako koristiš flex/column i gap, ovo smanjuje razmake između redova */
.tp-favicon-strip,
#tp-favicon-strip{
line-height: 1.15 !important;
row-gap: 4px;
}
/* MOBITEL: povećaj font, dodatno smanji razmake */
@media (max-width: 480px){
.tp-favicon-strip,
#tp-favicon-strip{
font-size: 14.5px !important; /* povećaj po potrebi 14–16 */
line-height: 1.12 !important; /* zbijenije */
row-gap: 3px;
}
/* Ako su “retci” posebni elementi (često su klase tipa line/item) */
.tp-favicon-strip .tp-line,
.tp-favicon-strip .tp-row,
.tp-favicon-strip .tp-item,
#tp-favicon-strip .tp-line,
#tp-favicon-strip .tp-row,
#tp-favicon-strip .tp-item{
margin: 0 !important;
padding: 0 !important;
}
}
/* IBAN stil (bold ostaje, boje rade kroz spanove iz JS-a) */
.tp-iban{
font-weight: 700;
white-space: nowrap;
}
.tp-iban .tp-iban-b{ font-weight: 800; } /* pojačaj čitljivost */
.tp-iban .tp-iban-blue{ color: #0b4aa2; } /* plava */
.tp-iban .tp-iban-red{ color: #c01616; } /* crvena */
/* ======================================================
TP FAVICON TRAKA – TERMO-PROM veći font + bold
====================================================== */
/* Ako imaš link/logo u traci */
.tp-favicon-strip a,
#tp-favicon-strip a{
font-weight: 800;
}
/* Najčešće: naziv firme je u nekom span/div elementu */
.tp-favicon-strip .tp-brand,
.tp-favicon-strip .tp-brand-name,
.tp-favicon-strip .tp-logo-text,
.tp-favicon-strip .tp-company,
#tp-favicon-strip .tp-brand,
#tp-favicon-strip .tp-brand-name,
#tp-favicon-strip .tp-logo-text,
#tp-favicon-strip .tp-company{
font-weight: 900 !important;
letter-spacing: 0.2px;
}
/* MOBITEL: još malo veće */
@media (max-width: 480px){
.tp-favicon-strip .tp-brand,
.tp-favicon-strip .tp-brand-name,
.tp-favicon-strip .tp-logo-text,
.tp-favicon-strip .tp-company,
#tp-favicon-strip .tp-brand,
#tp-favicon-strip .tp-brand-name,
#tp-favicon-strip .tp-logo-text,
#tp-favicon-strip .tp-company{
font-size: 15.5px !important; /* po potrebi 15–17 */
font-weight: 900 !important;
}
}
/* ======================================================
FAVICON TRAKA – TERMO-PROM isti font kao IBAN
====================================================== */
/* Jedna “kontrolna” veličina za traku (po želji finije podesi broj) */
.tp-favicon-strip,
#tp-favicon-strip{
--tp-strip-font: 13.5px; /* promijeni ako želiš 13 / 14 */
}
/* IBAN (ako već koristiš .tp-iban ili je unutar trake) */
.tp-favicon-strip .tp-iban,
#tp-favicon-strip .tp-iban{
font-size: var(--tp-strip-font) !important;
font-weight: 800 !important;
}
/* TERMO-PROM odmah iza favicon znaka */
.tp-favicon-strip .tp-brand-name,
#tp-favicon-strip .tp-brand-name{
font-size: var(--tp-strip-font) !important;
font-weight: 800 !important;
color: #000 !important; /* da ne bude sivo */
letter-spacing: 0.2px;
}
/* MOBITEL: malo veće ako želiš */
@media (max-width: 480px){
.tp-favicon-strip,
#tp-favicon-strip{
--tp-strip-font: 14.5px;
}
}
/* TERMO-PROM kao prvi tekst odmah nakon favicon slike (fallback) */
.tp-favicon-strip img + span,
#tp-favicon-strip img + span{
font-size: 13.5px !important;
font-weight: 800 !important;
color: #000 !important;
}
/* ======================================================
FAVICON TRAKA – MOBILE: SMANJI RAZMAKE IZMEĐU REDOVA
====================================================== */
@media (max-width: 480px){
/* 1) Stisni line-height + (ako postoji) gap u traci */
.tp-favicon-strip,
#tp-favicon-strip{
line-height: 1.05 !important;
row-gap: 2px !important;
gap: 2px !important; /* ako je flex/grid */
padding-top: 6px !important; /* po želji */
padding-bottom: 6px !important; /* po želji */
}
/* 2) Ukloni sve margine/paddinge koji stvaraju “prazan hod” */
.tp-favicon-strip p,
.tp-favicon-strip div,
.tp-favicon-strip span,
.tp-favicon-strip li,
#tp-favicon-strip p,
#tp-favicon-strip div,
#tp-favicon-strip span,
#tp-favicon-strip li{
margin: 0 !important;
padding: 0 !important;
line-height: 1.05 !important;
}
/* 3) Ako imaš točkice/razdjelnike kao zasebne retke (•) – stisni ih najviše */
.tp-favicon-strip .tp-dot,
.tp-favicon-strip .tp-sep,
#tp-favicon-strip .tp-dot,
#tp-favicon-strip .tp-sep{
line-height: 1 !important;
margin: 0 !important;
padding: 0 !important;
}
}
/* ======================================================
FAVICON BLOK – MOBILE: zbij redove (bez promjene rasporeda)
====================================================== */
@media (max-width: 480px){
.tp-favicon-strip,
#tp-favicon-strip{
line-height: 1.05 !important;
padding-top: 6px !important;
padding-bottom: 6px !important;
}
.tp-favicon-strip p,
.tp-favicon-strip div,
.tp-favicon-strip span,
.tp-favicon-strip li,
#tp-favicon-strip p,
#tp-favicon-strip div,
#tp-favicon-strip span,
#tp-favicon-strip li{
margin: 0 !important;
padding: 0 !important;
line-height: 1.05 !important;
}
}
/* ======================================================
SLIDER LAMPICE – između slajdera i favicon bloka
(bez dodavanja novog razmaka; radi na PC/tablet/mob)
====================================================== */
/* 1) Slajder wrapper mora biti "relative" da možemo pozicionirati lampice */
.swiper-viewport,
.swiper,
.carousel,
[id^="slideshow"],
[id*="slideshow"]{
position: relative;
}
/* 2) SWIPER (OpenCart često koristi ovo) – lampice spusti ispod slajdera */
.swiper-viewport .swiper-pagination,
.swiper .swiper-pagination,
[id^="slideshow"] .swiper-pagination,
[id*="slideshow"] .swiper-pagination{
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: -14px !important; /* ključ: lampice u razmak između slajdera i favicon bloka */
margin: 0 !important;
padding: 0 !important;
z-index: 50 !important;
pointer-events: auto;
}
/* 3) BOOTSTRAP CAROUSEL (ako je tema takva) – isto ponašanje */
.carousel .carousel-indicators,
[id^="slideshow"] .carousel-indicators,
[id*="slideshow"] .carousel-indicators{
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: -14px !important;
margin: 0 !important;
z-index: 50 !important;
}
/* 4) Ne povećavaj razmak: prvi element iza slajdera ne smije gurati dolje dodatno */
.swiper-viewport + *,
.swiper + *,
.carousel + *,
[id^="slideshow"] + *,
[id*="slideshow"] + *{
margin-top: 0 !important;
}
/* ======================================================
SLIDER LAMPICE – IZMEĐU SLIDERA I FAVICON BLOKA (HARD FIX)
Pokriva: Swiper / Bootstrap carousel / Owl / Slick
====================================================== */
/* A) Spriječi da slider "odreže" lampice kad ih spustimo ispod */
.swiper-viewport,
.swiper,
.swiper-container,
#slideshow0,
[id^="slideshow"],
[id*="slideshow"],
.carousel,
.owl-carousel{
position: relative !important;
overflow: visible !important;
}
/* B) SWIPER lampice (OpenCart često) */
.swiper-viewport .swiper-pagination,
.swiper .swiper-pagination,
.swiper-container .swiper-pagination,
#slideshow0 .swiper-pagination,
[id^="slideshow"] .swiper-pagination,
[id*="slideshow"] .swiper-pagination{
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: -16px !important; /* lampice u "među-prostor" */
margin: 0 !important;
padding: 0 !important;
z-index: 9999 !important;
text-align: center !important;
}
/* C) BOOTSTRAP carousel-indicators */
.carousel .carousel-indicators,
#slideshow0 .carousel-indicators,
[id^="slideshow"] .carousel-indicators,
[id*="slideshow"] .carousel-indicators{
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: -16px !important;
margin: 0 !important;
z-index: 9999 !important;
}
/* D) OWL dots (često u temama) */
.owl-carousel .owl-dots{
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: -16px !important;
margin: 0 !important;
z-index: 9999 !important;
text-align: center !important;
}
/* E) SLICK dots */
.slick-slider .slick-dots{
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: -16px !important;
margin: 0 !important;
z-index: 9999 !important;
text-align: center !important;
}
/* F) Ne dodaj dodatni razmak ispod slidera (da favicon blok ne “bježi” dolje) */
.swiper-viewport + *,
.swiper + *,
.swiper-container + *,
#slideshow0 + *,
[id^="slideshow"] + *,
[id*="slideshow"] + *,
.carousel + *,
.owl-carousel + *{
margin-top: 0 !important;
}
/* ======================================================
SLIDER LAMPICE – MOBITEL: podigni ih unutar slike (da nisu na rubu)
Pokriva: Swiper / Bootstrap carousel / Owl / Slick
====================================================== */
@media (max-width: 480px){
/* SWIPER */
.swiper-viewport .swiper-pagination,
.swiper .swiper-pagination,
.swiper-container .swiper-pagination,
#slideshow0 .swiper-pagination,
[id^="slideshow"] .swiper-pagination,
[id*="slideshow"] .swiper-pagination{
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 14px !important; /* PODIGNI (povećaj na 18-22 ako želiš još više) */
margin: 0 !important;
padding: 0 !important;
z-index: 9999 !important;
text-align: center !important;
}
/* BOOTSTRAP carousel */
.carousel .carousel-indicators,
#slideshow0 .carousel-indicators,
[id^="slideshow"] .carousel-indicators,
[id*="slideshow"] .carousel-indicators{
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 14px !important;
margin: 0 !important;
z-index: 9999 !important;
}
/* OWL */
.owl-carousel .owl-dots{
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 14px !important;
margin: 0 !important;
z-index: 9999 !important;
text-align: center !important;
}
/* SLICK */
.slick-slider .slick-dots{
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 22px !important;
margin: 0 !important;
z-index: 9999 !important;
text-align: center !important;
}
/* Bonus: malo “zraka” i bolja čitljivost (bez promjene širina/layouta) */
.swiper-viewport .swiper-pagination,
.carousel .carousel-indicators,
.owl-carousel .owl-dots,
.slick-slider .slick-dots{
padding: 2px 0 !important;
/* ako želiš, mogu dodati lagani poluprozirni "badge" ispod lampica */
}
}
/* ======================================================
FINAL OVERRIDE – SLIDER LAMPICE (PC/Tablet između slajdera i favicon bloka)
+ Mobitel: digni lampice unutar slike
(NE dira header, NE povećava razmak)
====================================================== */
/* 1) Spriječi rezanje lampica (tema često ima overflow:hidden) */
#slideshow0,
[id^="slideshow"],
[id*="slideshow"],
.swiper-viewport,
.swiper,
.swiper-container,
.carousel,
.owl-carousel,
.slick-slider{
position: relative !important;
overflow: visible !important;
}
/* 2) PC + TABLET: lampice u “među-prostor” (između slajdera i favicon bloka) */
#slideshow0 .swiper-pagination,
[id^="slideshow"] .swiper-pagination,
[id*="slideshow"] .swiper-pagination,
.swiper-viewport .swiper-pagination,
.swiper .swiper-pagination,
.swiper-container .swiper-pagination,
.carousel .carousel-indicators,
#slideshow0 .carousel-indicators,
[id^="slideshow"] .carousel-indicators,
[id*="slideshow"] .carousel-indicators,
.owl-carousel .owl-dots,
.slick-slider .slick-dots{
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: -14px !important; /* “među-prostor” */
margin: 0 !important;
padding: 0 !important;
z-index: 99999 !important;
text-align: center !important;
pointer-events: auto !important;
}
/* 3) Ne dodaj novi razmak ispod slidera (favicon blok ostaje gdje je) */
#slideshow0 + *,
[id^="slideshow"] + *,
[id*="slideshow"] + *,
.swiper-viewport + *,
.swiper + *,
.swiper-container + *,
.carousel + *,
.owl-carousel + *,
.slick-slider + *{
margin-top: 0 !important;
}
/* 4) MOBITEL: ako ih tema ipak ne može spustiti, digni ih U SLIKU (da nisu na rubu) */
@media (max-width: 480px){
#slideshow0 .swiper-pagination,
[id^="slideshow"] .swiper-pagination,
[id*="slideshow"] .swiper-pagination,
.swiper-viewport .swiper-pagination,
.swiper .swiper-pagination,
.swiper-container .swiper-pagination,
.carousel .carousel-indicators,
#slideshow0 .carousel-indicators,
[id^="slideshow"] .carousel-indicators,
[id*="slideshow"] .carousel-indicators,
.owl-carousel .owl-dots,
.slick-slider .slick-dots{
bottom: 20px !important; /* unutar slike */
}
}
/* ======================================================
FAVICON BLOK – MOB/TABLET: favicon + TERMO-PROM u istom redu
====================================================== */
@media (max-width: 768px){
/* 1) Favicon blok neka bude flex u jednom redu */
.tp-favicon-strip,
#tp-favicon-strip{
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: nowrap !important;
}
/* 2) Favicon slika (okrugli znak) */
.tp-favicon-strip img,
#tp-favicon-strip img{
display: inline-block !important;
vertical-align: middle !important;
margin: 0 8px 0 0 !important; /* razmak desno od ikone */
flex: 0 0 auto !important;
}
/* 3) TERMO-PROM tekst (bilo koji element koji ga nosi) */
.tp-favicon-strip .tp-brand-name,
.tp-favicon-strip .tp-brand,
.tp-favicon-strip .tp-logo-text,
.tp-favicon-strip .tp-company,
#tp-favicon-strip .tp-brand-name,
#tp-favicon-strip .tp-brand,
#tp-favicon-strip .tp-logo-text,
#tp-favicon-strip .tp-company{
display: inline-block !important;
vertical-align: middle !important;
white-space: nowrap !important; /* NE smije prelomiti u novi red */
flex: 0 0 auto !important;
}
/* 4) Ako nema posebne klase za TERMO-PROM pa je to “obični” tekst u prvom span/div,
barem spriječi da prvi tekstni element ode ispod ikone */
.tp-favicon-strip > span,
.tp-favicon-strip > div,
#tp-favicon-strip > span,
#tp-favicon-strip > div{
white-space: nowrap !important;
}
}
/* ======================================================
FAVICON BLOK – TABLET/MOB: favicon lijevo + TERMO-PROM u istom redu
====================================================== */
@media (max-width: 768px){
/* 1) Nađi red koji sadrži favicon i naziv – prisili ga u jedan red */
.tp-favicon-strip,
#tp-favicon-strip{
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important; /* centriraj cijeli red */
gap: 10px !important;
}
/* 2) Ikona (favicon) uvijek lijevo */
.tp-favicon-strip img,
#tp-favicon-strip img{
display: block !important;
flex: 0 0 auto !important;
margin: 0 !important;
}
/* 3) TERMO-PROM tekst – bez prijeloma u novi red */
.tp-favicon-strip .tp-brand-name,
.tp-favicon-strip .tp-logo-text,
.tp-favicon-strip .tp-company,
.tp-favicon-strip .tp-brand,
#tp-favicon-strip .tp-brand-name,
#tp-favicon-strip .tp-logo-text,
#tp-favicon-strip .tp-company,
#tp-favicon-strip .tp-brand{
display: block !important;
white-space: nowrap !important;
margin: 0 !important;
}
/* 4) Fallback: ako TERMO-PROM nema posebnu klasu, spriječi da prvi tekst padne ispod */
.tp-favicon-strip *{
max-width: 100%;
}
}
/* ======================================================
FAVICON BLOK – TABLET/MOB: stil za tp-brand-row
====================================================== */
@media (max-width: 768px){
.tp-brand-row{
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
margin: 0 !important;
padding: 0 !important;
}
.tp-brand-row img{
display: block !important;
flex: 0 0 auto !important;
margin: 0 !important;
}
.tp-brand-row *{
white-space: nowrap !important;
}
}
/* ======================================================
tp-brand-row – povećaj TERMO-PROM da bude sukladan faviconu (mob/tablet)
====================================================== */
@media (max-width: 768px){
/* Povećaj favicon malo (ako želiš da bude “glavni”) */
.tp-brand-row img{
width: 32px !important; /* po potrebi 34–40 */
height: auto !important;
}
/* Povećaj TERMO-PROM i pojačaj */
.tp-brand-row{
gap: 16px !important;
}
.tp-brand-row *{
font-size: 24px !important; /* po potrebi 18–22 */
font-weight: 1000 !important;
line-height: 1.05 !important;
letter-spacing: 0.3px !important;
}
}
/* Ako želiš posebno na baš malim mobitelima */
@media (max-width: 420px){
.tp-brand-row img{ width: 34px !important; }
.tp-brand-row *{ font-size: 19px !important; }
}
/* =====================================================================
TP – FAVICON TRAKA (KONSOLIDIRANO) – ZADNJI BLOK U DATOTECI
Cilj:
- tp-brand-row: favicon LIJEVO + TERMO-PROM DESNO (mob+tablet)
- TERMO-PROM veći, sukladan faviconu
- separator/točke ukloniti na mobitelu I TABLETU
- razmake između redova na mobitelu zbijenije
Napomena: Ovaj blok je namjerno zadnji i s !important da pobijedi starije
===================================================================== */
/* 0) Sigurnost: da traka uvijek ostane vidljiva */
.tp-favicon-strip,
#tp-favicon-strip{
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* 1) Ukloni “točkice / separatore” na tabletu i mobitelu */
/* 1) Ukloni “točkice / separatore” na tabletu i mobitelu */
@media (max-width: 1366px){
.tp-favicon-strip .tp-sep,
.tp-favicon-strip .tp-dot,
#tp-favicon-strip .tp-sep,
#tp-favicon-strip .tp-dot{
display: none !important;
}
}
/* 2) Brand red (favicon + TERMO-PROM) – uvijek u jednom redu na tablet/mob */
@media (max-width: 1024px){
.tp-favicon-strip .tp-brand-row,
#tp-favicon-strip .tp-brand-row{
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: nowrap !important;
gap: 14px !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.05 !important;
}
.tp-favicon-strip .tp-brand-row img,
#tp-favicon-strip .tp-brand-row img{
display: block !important;
flex: 0 0 auto !important;
width: 36px !important; /* po potrebi 32–40 */
height: auto !important;
margin: 0 !important;
}
/* TERMO-PROM – pojačaj i povećaj (samo u brand-row) */
.tp-favicon-strip .tp-brand-row,
.tp-favicon-strip .tp-brand-row *,
#tp-favicon-strip .tp-brand-row,
#tp-favicon-strip .tp-brand-row *{
white-space: nowrap !important;
font-weight: 990 !important;
font-size: 26px !important; /* sukladan faviconu; po potrebi 20–26 */
letter-spacing: 0.3px !important;
line-height: 1.05 !important;
color: #000 !important;
}
}
/* 3) Na baš malim mobitelima: finije */
@media (max-width: 420px){
.tp-favicon-strip .tp-brand-row img,
#tp-favicon-strip .tp-brand-row img{
width: 34px !important;
}
.tp-favicon-strip .tp-brand-row,
.tp-favicon-strip .tp-brand-row *,
#tp-favicon-strip .tp-brand-row,
#tp-favicon-strip .tp-brand-row *{
font-size: 20px !important;
}
}
/* 4) Zbij razmake u favicon bloku (mail/mob/IBAN) na mobitelu */
@media (max-width: 480px){
.tp-favicon-strip,
#tp-favicon-strip{
padding-top: 8px !important;
padding-bottom: 8px !important;
line-height: 1.05 !important;
}
.tp-favicon-strip p,
.tp-favicon-strip div,
.tp-favicon-strip span,
.tp-favicon-strip li,
#tp-favicon-strip p,
#tp-favicon-strip div,
#tp-favicon-strip span,
#tp-favicon-strip li{
margin: 0 !important;
padding: 0 !important;
line-height: 1.05 !important;
}
}
/* 5) Ako imaš posebne hard-lock selektore za KLIMA/DT kategorije,
osiguraj da brand-row ostane u jednom redu */
@media (max-width: 767.98px){
#product-category.tp-klima-only #content .tp-favicon-strip .tp-brand-row,
#product-category.tp-dt-only #content .tp-favicon-strip .tp-brand-row,
#product-category.tp-dizalice-only #content .tp-favicon-strip .tp-brand-row,
#product-category.tp-klima-only #content #tp-favicon-strip .tp-brand-row,
#product-category.tp-dt-only #content #tp-favicon-strip .tp-brand-row,
#product-category.tp-dizalice-only #content #tp-favicon-strip .tp-brand-row{
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: center !important;
gap: 14px !important;
}
}
/* ======================================================
HOME – POZADINA BLOKA S GUMBIMA (CRVENO → PLAVO)
+ FAVICON TRAKA – BEZ BIJELIH VRŠAKA U KUTOVIMA
====================================================== */
/* ---------- 1) HOME: gradijent iza bloka s okruglim gumbima ---------- */
/* Pokušavamo pogoditi wrapper bez obzira kako se u temi zove:
- #common-home je standardni OpenCart body id za naslovnicu
- Uključeni su češći wrapperi/sekcije; višak ne škodi. */
#common-home .tp-category-buttons,
#common-home .tp-category-block,
#common-home .tp-kategorije,
#common-home .tp-home-cats,
#common-home .tp-home-buttons,
#common-home .home-category-buttons,
#common-home .category-buttons,
#common-home .categories,
#common-home .tp-round-buttons-wrap,
#common-home .tp-round-buttons,
#common-home .tp-buttons-wrap {
/* CRVENO gore → prijelaz oko sredine → PLAVO dolje */
background: linear-gradient(
180deg,
#d60000 0%,
#d60000 18%,
#7a2db3 52%,
#0a52ff 100%
) !important;
/* da se pozadina lijepo “napuni” i ne ponavlja */
background-repeat: no-repeat !important;
background-size: cover !important;
/* ukloni eventualne slike/tematske pozadine koje bi smetale */
background-image: linear-gradient(
180deg,
#d60000 0%,
#d60000 18%,
#7a2db3 52%,
#0a52ff 100%
) !important;
/* Važno: da ne “probije” bijelo u kutovima */
border-radius: 16px;
overflow: hidden;
/* malo zraka da gradijent izgleda “premium” */
padding-top: 14px;
padding-bottom: 14px;
}
/* Ako tema na djeci (unutarnjim divovima) vraća bijelu pozadinu, ugasi je */
#common-home .tp-category-buttons > *,
#common-home .tp-category-block > *,
#common-home .tp-kategorije > *,
#common-home .tp-home-cats > *,
#common-home .tp-home-buttons > *,
#common-home .home-category-buttons > *,
#common-home .category-buttons > *,
#common-home .categories > * {
background-color: transparent !important;
background-image: none !important;
}
/* ---------- 2) FAVICON TRAKA: nema bijelih vršaka u kutovima ---------- */
/* Ovdje je poanta: element koji ima radius MORA imati i overflow:hidden
+ njegov parent ne smije imati bijelu pozadinu koja “viri” iza radijusa. */
.tp-favicon-strip,
#tp-favicon-strip,
.tp-favicon-bar,
#tp-favicon-bar {
background: inherit !important; /* ako je već boja/gradijent definiran gore u temi */
border-radius: 16px;
overflow: hidden;
-webkit-mask-image: -webkit-radial-gradient(white, black); /* iOS/Chrome anti-bleed */
}
/* Ako postoji unutarnji container unutar trake – i njega držimo transparentnim */
.tp-favicon-strip .container,
#tp-favicon-strip .container,
.tp-favicon-bar .container,
#tp-favicon-bar .container {
background: transparent !important;
}
/* A ako tema ima neki “wrapper” oko trake koji je bijel – ugasi ga */
.tp-favicon-strip-wrap,
#tp-favicon-strip-wrap,
.tp-top-wrap,
#tp-top-wrap {
background: transparent !important;
} /* ← OVO DODAJ (zatvaranje bloka) */
/* ======================================================
HOME (NASLOVNICA) – GRADIJENT PANEL (CRVENO → PLAVO)
POGAĐA STVARNI CONTAINER U #content
====================================================== */
/* 1) GRADIJENT NA GLAVNOM HOME PANELU (bijeli blok sa zaobljenim rubom) */
#common-home #content > .container,
#common-home #content .container:first-child{
background: linear-gradient(
180deg,
#d60000 0%,
#d60000 18%,
#7a2db3 52%,
#0a52ff 100%
) !important;
/* ključ za "nema bijelih vršaka" na zaobljenim rubovima */
border-radius: 16px !important;
overflow: hidden !important;
/* da tema ne ubaci svoju sliku/boju */
background-image: linear-gradient(
180deg,
#d60000 0%,
#d60000 18%,
#7a2db3 52%,
#0a52ff 100%
) !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
/* 2) UNUTARNJI WRAP-ERI: makni bijelu pozadinu koja “ubija” gradijent */
#common-home #content > .container > .row,
#common-home #content > .container > .row > [class*="col-"],
#common-home #content > .container .row,
#common-home #content > .container .row > [class*="col-"]{
background: transparent !important;
background-image: none !important;
}
/* 3) FAVICON TRAKA: dodatno osiguranje protiv bijelih vršaka */
#common-home .tp-favicon-strip,
#common-home #tp-favicon-strip,
#common-home .tp-favicon-bar,
#common-home #tp-favicon-bar{
border-radius: 16px !important;
overflow: hidden !important;
background: transparent !important;
}
/* Ako unutar favicon trake postoji container koji vraća bijelo */
#common-home .tp-favicon-strip .container,
#common-home #tp-favicon-strip .container,
#common-home .tp-favicon-bar .container,
#common-home #tp-favicon-bar .container{
background: transparent !important;
}
/* ======================================================
HOME – PANEL S FAVICON TRAKOM + SLOGANOM + GUMBIMA
GRADIJENT CRVENO → PLAVO, BEZ BIJELIH VRŠAKA
====================================================== */
/* 1) Gradijent na glavnom panelu naslovnice */
#common-home #content > .container {
background: linear-gradient(180deg,
#d60000 0%,
#d60000 18%,
#7a2db3 52%,
#0a52ff 100%
) !important;
border-radius: 18px !important;
overflow: hidden !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
/* 2) Spriječi da unutarnji elementi “vrate bijelo” */
#common-home #content > .container .row,
#common-home #content > .container .row > [class*="col-"],
#common-home #content > .container .container,
#common-home #content > .container .container-fluid {
background: transparent !important;
background-image: none !important;
}
/* 3) Favicon traka: dodatni lock protiv bijelih kuteva */
#common-home .tp-favicon-strip,
#common-home #tp-favicon-strip,
#common-home .tp-favicon-bar,
#common-home #tp-favicon-bar,
#common-home .tp-favicon-strip-container {
background: transparent !important;
border-radius: 18px !important;
overflow: hidden !important;
}
/* ======================================================
HOME (NASLOVNICA) – PANEL GUMBI: GRADIJENT CRVENO → PLAVO
+ FAVICON TRAKA: bez bijelih vršaka u kutovima
====================================================== */
/* 1) Gradijent na glavnom HOME panelu (blok gdje su favicon traka + slogan + okrugli gumbi)
Ako ti tema koristi klasični OpenCart layout, ovo pogađa pravi wrapper. */
#common-home #content > .container{
background: linear-gradient(180deg,
#d60000 0%,
#d60000 18%,
#7a2db3 52%,
#0a52ff 100%
) !important;
border-radius: 18px !important;
overflow: hidden !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
/* 2) Spriječi da unutarnji elementi “vrate bijelu” (najčešći razlog zašto gradijent ne vidiš) */
#common-home #content > .container .row,
#common-home #content > .container .row > [class*="col-"],
#common-home #content > .container .container,
#common-home #content > .container .container-fluid{
background: transparent !important;
background-image: none !important;
}
/* 3) Favicon traka – dodatni lock protiv bijelih kuteva
Radius + overflow na svim varijantama wrappera koje si koristio */
#common-home .tp-favicon-strip,
#common-home #tp-favicon-strip,
#common-home .tp-favicon-bar,
#common-home #tp-favicon-bar,
#common-home .tp-favicon-strip-container{
background: transparent !important;
border-radius: 18px !important;
overflow: hidden !important;
/* anti-bleed u nekim browserima */
-webkit-mask-image: -webkit-radial-gradient(white, black);
}
/* 4) Unutarnji container favicon trake ne smije imati bijelu pozadinu */
#common-home .tp-favicon-strip .container,
#common-home #tp-favicon-strip .container,
#common-home .tp-favicon-bar .container,
#common-home #tp-favicon-bar .container{
background: transparent !important;
}
/* ======================================================
HOME (NASLOVNICA) – GLAVNI PANEL (#common-home)
GRADIJENT: crveno (gore) → prijelaz (sredina) → plavo (dolje)
====================================================== */
#common-home{
background: linear-gradient(180deg,
#d60000 0%,
#d60000 18%,
#7a2db3 52%,
#0a52ff 100%
) !important;
border-radius: 18px !important;
overflow: hidden !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
/* Unutarnji elementi ne smiju “vratiti bijelu” */
#common-home > .row,
#common-home > .row > #content{
background: transparent !important;
background-image: none !important;
}
/* ======================================================
FAVICON TRAKA – LOCK PROTIV BIJELIH KUTEVA
(ključ: vanjski wrapper)
====================================================== */
#common-home .tp-favicon-strip-wrap{
border-radius: 18px !important;
overflow: hidden !important;
background: transparent !important;
-webkit-mask-image: -webkit-radial-gradient(white, black);
}
#common-home .tp-favicon-strip-wrap *{
background: transparent !important;
}
/* =====================================================
TP HERO – HARD FIX (vidljivo na svim uređajima)
===================================================== */
.tp-hero {
min-height: 120px; /* možeš kasnije fino podesiti */
background: #f7e3ea !important; /* tvoja roza */
display: block;
}
/* ======================================================
HOME – HARD LOCK POZADINA (samo naslovnica)
====================================================== */
/* 1) Ciljamo baš common-home (OpenCart home ID) */
#common-home,
#common-home body,
body #common-home {
background: #d9f0df !important; /* promijeni u boju koju želiš */
background-image: none !important;
}
/* 2) Najvažnije: obojaj stvarni wrapper koji drži sadržaj */
#common-home main,
#common-home #content,
#common-home .container,
#common-home .container-fluid {
background: transparent !important; /* da se ne “vrati bijelo” iz wrappera */
}
/* 3) Ako želiš da cijela stranica (iza svega) bude u boji */
body.common-home {
background: #d9f0df !important;
background-image: none !important;
}
/* HOME – NUKLEARNA OPCIJA (samo ako gore ne radi) */
body.common-home,
body.common-home #page,
body.common-home .wrapper,
body.common-home #wrapper {
background: #d9f0df !important;
background-image: none !important;
}
/* ======================================================
HOME – OBOJI BIJELU PLOHU S GUMBIMA, A ZADRŽI ROZI OKVIR
====================================================== */
/* 1) ROZI OKVIR (ostaje kakav jest) – samo osiguraj radius/clip */
#common-home section.tp-hero{
border-radius: 18px !important;
overflow: hidden !important; /* da se unutarnje plohe ne “probiju” preko ruba */
}
/* 2) BIJELA POVRŠINA (unutra, gdje su gumbi) – ovo bojimo */
#common-home section.tp-hero .tp-hero-inner{
background: #d9f0df !important; /* odaberi boju (pistacio npr.) */
background-image: none !important;
border-radius: 0 !important; /* da ostane “ravno” unutar okvira */
}
/* 3) Ako tema boju drži baš na gridu gumba, pregazi i to */
#common-home section.tp-hero .tp-category-grid{
background: #d9f0df !important;
background-image: none !important;
}
/* 4) Malo “zraka” da izgleda uredno */
#common-home section.tp-hero .tp-category-grid{
padding-bottom: 10px;
}
/* ======================================================
HOME – BOJA UNUTARNJE PLOHE (gumbi), rozi okvir ostaje
====================================================== */
/* 1) Oboji unutarnji panel (gdje su gumbi) */
#common-home .tp-hero .tp-hero-inner{
background: #d9f0df !important; /* promijeni nijansu po želji */
background-image: none !important;
}
/* 2) Ako theme vraća bijelo na gridu, pregazi i njega */
#common-home .tp-hero .tp-category-grid{
background: transparent !important; /* neka prati .tp-hero-inner */
}
#common-home .tp-hero{
border-radius: 18px !important;
overflow: hidden !important;
}
/* ======================================================
HOME – ZAOBLJENJE BIJELOG POLJA (gumbi) DA PRATI OKVIR
====================================================== */
/* 1) Vanjski okvir (da reže unutra, ako nešto prelazi) */
#common-home section.tp-hero{
border-radius: 18px !important;
overflow: hidden !important;
}
/* 2) Unutarnje “bijelo polje” gdje su gumbi */
#common-home .tp-hero-inner{
border-radius: 18px !important; /* isto kao vanjski okvir */
overflow: hidden !important; /* da kutovi stvarno “režu” */
background-clip: padding-box !important;
}
/* 3) Ako je bijelina zapravo na gridu, za svaki slučaj */
#common-home .tp-category-grid{
border-radius: 18px !important;
overflow: hidden !important;
}
/* =========================================================
HOME – UNUTARNJI PANEL (iza gumba) + zaobljenje koje prati okvir
Cilj: obojiti “bijelo polje” a zadržati vanjski gradijentni okvir
========================================================= */
/* Vanjski okvir (tvoj gradijent) – neka reže unutrašnjost po radiusu */
#common-home .tp-hero{
overflow: hidden !important; /* KLJUČ: da se unutarnji panel reže po rubu */
border-radius: 12px !important; /* prati postojeći radius okvira */
}
/* Unutarnji panel (to je realno “bijelo polje”) */
#common-home .tp-hero-inner{
background: #ffffff !important; /* OVDJE mijenjaš boju “bijelog polja” */
border-radius: 10px !important; /* malo manje od vanjskog da izgleda uredno */
padding: 16px 12px 18px !important;
margin: 0 !important;
}
/* Da header i grid ne “vraćaju” bijele/čudne pozadine */
#common-home .tp-hero-header,
#common-home .tp-category-grid{
background: transparent !important;
}
/* Ako želiš da panel bude pastelno obojen (umjesto bijelo), samo promijeni ovu liniju:
background: #ffffff; -> npr. #f7fff7 (svijetlo pistacio) ili #fff7fb (svijetlo roza)
*/
/* =========================================================
HOME – BIJELO POLJE (IZA GUMBA): ZAOBLJENJE + CLIP
Cilj: unutarnji panel dobije vlastitu pozadinu + radius,
pa se radius stvarno vidi i prati vanjski okvir.
========================================================= */
/* 1) Vanjski okvir (tvoj gradijent) – reže sve unutra po rubu */
#common-home section.tp-hero{
border-radius: 18px !important;
overflow: hidden !important;
}
/* 2) Unutarnje “bijelo polje” (gdje su gumbi) – DAJ MU POZADINU */
#common-home section.tp-hero .tp-hero-inner{
background: #ffffff !important; /* ostaje bijelo, ali sada je “stvarno” bijelo */
border-radius: 18px !important; /* prati vanjski okvir */
overflow: hidden !important; /* da rubovi režu sadržaj */
background-clip: padding-box !important;
/* OVO JE KLJUČ da se radius vidi: malo ga uvučemo od okvira */
margin: 12px !important;
}
/* 3) Grid gumba neka bude transparentan da ne “kvari” rub */
#common-home section.tp-hero .tp-category-grid{
background: transparent !important;
}
/* ======================================================
HOME – pozadina gumba (krugovi / kartice) – TERAKOTA ili PIJESAK
Ne dira okvir ni radius bijelog polja.
====================================================== */
/* Varijante boja */
:root{
--tp-sand: #F3E6D2; /* nježna boja pijeska */
--tp-terr: #E6B08E; /* topla terakota (nježnija) */
--tp-terr2: #DFA27A; /* malo jača terakota */
}
/* 1) Pokušaj: ako je krug stvarni element (div/span) */
#common-home .tp-category-grid .tp-round,
#common-home .tp-category-grid .tp-circle,
#common-home .tp-category-grid .category-icon,
#common-home .tp-category-grid .tp-cat-icon,
#common-home .tp-category-grid .tp-cat-btn-icon{
background: var(--tp-sand) !important; /* promijeni u --tp-terr ili --tp-terr2 */
background-image: none !important;
}
/* 2) Pokušaj: ako je cijeli gumb link koji je kružan */
#common-home .tp-category-grid a,
#common-home .tp-category-grid a .icon,
#common-home .tp-category-grid a .img,
#common-home .tp-category-grid a .image,
#common-home .tp-category-grid a .thumb{
background: transparent !important; /* da ne obojamo cijelu karticu */
}
/* 3) Najčešće: krug je “button” element s border-radius 50% */
#common-home .tp-category-grid a.tp-category-btn,
#common-home .tp-category-grid a.tp-round-btn,
#common-home .tp-category-grid a.category-btn,
#common-home .tp-category-grid a.tp-gumb{
background: var(--tp-sand) !important; /* promijeni u --tp-terr ili --tp-terr2 */
background-image: none !important;
}
/* 4) Ako je krug napravljen preko pseudo-elementa */
#common-home .tp-category-grid a::before,
#common-home .tp-category-grid .tp-category-btn::before{
background: var(--tp-sand) !important; /* promijeni u --tp-terr ili --tp-terr2 */
}
/* 5) Da ikonice ostanu čiste (ne diramo boju ikone) */
#common-home .tp-category-grid img,
#common-home .tp-category-grid svg{
background: transparent !important;
}
/* ======================================================
TP HOME – BOJA POZADINE OKRUGLIH GUMBA (TERAKOTA/PIJESAK)
Stavi NA KRAJ tp-custom.css
====================================================== */
:root{
--tp-terakota: #d9a07a; /* toplija terakota */
--tp-pijesak: #ead2b8; /* nježniji pijesak */
}
/* 1) Najčešći slučaj: link/kartica gumba */
.tp-category a,
.tp-category a:visited,
.tp-cat a,
.tp-cat a:visited,
.category-grid a,
.category-grid a:visited,
#common-home .category a,
#common-home .category a:visited{
background: var(--tp-pijesak) !important;
background-image: none !important;
border-radius: 999px !important; /* ako je element sam krug */
}
/* 2) Ako je krug u posebnom wrapperu (ikonica u krugu) */
.tp-category .icon,
.tp-category .icon-wrap,
.tp-category .circle,
.tp-category .round,
.tp-cat .icon,
.tp-cat .icon-wrap,
.tp-cat .circle,
.tp-cat .round,
.category-grid .icon,
.category-grid .icon-wrap,
.category-grid .circle,
.category-grid .round{
background: var(--tp-pijesak) !important;
background-image: none !important;
border-radius: 999px !important;
}
/* 3) Ako je bijela pozadina na ![]()
ili