/* eto.hr — dopune na Aimeos default temu */
/* --- Čitljivost badgeva ----------------------------------------------------
Tema ovog sajta ima --ai-primary: #000000, a Aimeos za badge zadaje samo
pozadinu — tekst ostane naslijeđen (taman) pa ispadne crno na crnom. */
.aimeos .product .badge-item {
color: #fff;
border-radius: 2px;
}
.aimeos .product.new .badge-item.new {
background-color: var(--ai-primary, #282828);
color: #fff;
}
.aimeos .product.sale .badge-item.sale {
background-color: var(--ai-danger, #a00000);
color: #fff;
}
/* --- Badgevi dostupnosti ---------------------------------------------------
Aimeos renderira sve badgeve, a prikazuje ih tek klasa na proizvodu
(postavlja je uvoz u `css-class` iz polja `Stanje` u feedu).
"Šalje se danas" smije stajati samo uz stvarnu zalihu > 0. */
.aimeos .product.instock .badge-item.instock {
background-color: #1a7f37;
color: #fff;
display: inline-block;
padding: .1rem .5rem;
font-weight: 700;
letter-spacing: .5px;
}
.aimeos .product.incoming .badge-item.incoming {
background-color: #9a6700;
color: #fff;
display: inline-block;
padding: .1rem .5rem;
font-weight: 600;
letter-spacing: .5px;
}
/* Kad artikl nosi više badgeva, neka se slažu jedan ispod drugoga */
.aimeos .product .badges {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
/* --- Filter dostupnosti ---------------------------------------------------- */
.catalog-filter-instock {
padding: .5rem .25rem 1rem;
border-bottom: 1px solid #e3e3e3;
margin-bottom: .75rem;
}
.catalog-filter-instock h5 { font-size: 1rem; margin: 0 0 .4rem; }
.catalog-filter-instock ul { list-style: none; margin: 0; padding: 0; }
.catalog-filter-instock li { padding: .15rem 0; }
.catalog-filter-instock a {
display: flex;
align-items: flex-start;
gap: .4rem;
color: #333;
text-decoration: none;
}
.catalog-filter-instock a:hover { text-decoration: underline; }
.catalog-filter-instock li.active a { font-weight: 700; color: #000; }
.catalog-filter-instock .mark { flex: 0 0 1rem; line-height: 1.3; }
.catalog-filter-instock .hint {
display: block;
font-weight: 400;
font-size: .8rem;
color: #666;
}
/* --- Zamjene na skladištu -------------------------------------------------- */
.alternatives {
margin: 2rem auto;
max-width: 1200px;
padding: 1rem 1.25rem 1.25rem;
border: 1px solid #d7e6da;
border-left: 4px solid #1a7f37;
background: #f4faf5;
border-radius: 3px;
}
.alternatives h2 { font-size: 1.15rem; margin: 0 0 .2rem; }
.alternatives .lead { margin: 0 0 .9rem; color: #1a7f37; font-weight: 600; }
.alternatives .alt-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: .75rem;
}
.alternatives .alt-list a {
display: flex;
gap: .6rem;
align-items: center;
padding: .5rem;
background: #fff;
border: 1px solid #e3e3e3;
border-radius: 3px;
color: #333;
text-decoration: none;
height: 100%;
}
.alternatives .alt-list a:hover { border-color: #1a7f37; }
.alternatives img, .alternatives .noimg {
flex: 0 0 60px; width: 60px; height: 60px;
object-fit: contain; background: #f6f6f6;
}
.alternatives .alt-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.alternatives .alt-name { font-size: .85rem; line-height: 1.25; }
.alternatives .alt-price { font-weight: 700; }
.alternatives .alt-stock { font-size: .75rem; color: #1a7f37; font-weight: 600; }
/* --- Font (test) -----------------------------------------------------------
Tema koristi Roboto Condensed, čiji `latin` subset NE sadrži č ć đ š ž —
ta se slova renderiraju fallback fontom, pa je tipografija izmiješana.
Inter (latin-ext) ima sva hrvatska slova i tabularne znamenke za cijene.
Uključuje se klasom `font-inter` na (prekidač ?font=inter).
Font je self-hostan jer CSP dopušta samo `default-src 'self'`. */
/* Inter se poslužuje u DVA subseta, kako to radi i Google:
`latin` nosi ASCII (95 znakova), `latin-ext` hrvatska slova.
Jedan bez drugoga ne pokriva tekst — subset `latin-ext` sadrži samo 2
ASCII znaka, pa bi se s njim samim 99% teksta crtalo fallback fontom. */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/fonts/inter-latin.woff2') format('woff2-variations');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/fonts/inter-latin-ext.woff2') format('woff2-variations');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
U+A720-A7FF;
}
body.font-inter,
body.font-inter .aimeos,
body.font-inter h1, body.font-inter h2, body.font-inter h3,
body.font-inter h4, body.font-inter h5, body.font-inter h6 {
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
/* Cijene: tabularne znamenke da se stupci poravnaju i ne poskakuju */
body.font-inter .price .value,
body.font-inter .alt-price,
body.font-inter .price-item .value {
font-feature-settings: 'tnum' 1;
font-variant-numeric: tabular-nums;
}
/* Dugi nazivi artikala (25% ih je preko 60 znakova) — malo zraka */
body.font-inter .product .name,
body.font-inter .alt-name {
line-height: 1.3;
letter-spacing: 0;
}
/* --- Rok isporuke ---------------------------------------------------------- */
.delivery-info {
margin: 1rem auto;
max-width: 1200px;
padding: .75rem 1rem;
border: 1px solid #e3e3e3;
border-left: 4px solid #999;
background: #fafafa;
border-radius: 3px;
}
.delivery-info.is-certain {
border-color: #d7e6da;
border-left-color: #1a7f37;
background: #f4faf5;
}
.delivery-info .delivery-main { margin: 0; font-size: 1.05rem; }
.delivery-info.is-certain .delivery-main strong { color: #1a7f37; }
.delivery-info .delivery-cutoff { margin: .2rem 0 0; font-size: .9rem; }
.delivery-info .countdown { font-weight: 700; font-variant-numeric: tabular-nums; }
.delivery-info .muted { color: #666; }
/* --- Obavijest o dolasku --------------------------------------------------- */
.stock-notify {
margin: 1rem auto 2rem;
max-width: 1200px;
padding: 1rem 1.25rem;
border: 1px solid #e3e3e3;
border-radius: 3px;
background: #fafafa;
}
.stock-notify h2 { font-size: 1.1rem; margin: 0 0 .2rem; }
.stock-notify .lead { margin: 0 0 .7rem; color: #666; font-size: .9rem; }
.stock-notify .row-inline { display: flex; gap: .5rem; flex-wrap: wrap; }
.stock-notify input[type="email"] {
flex: 1 1 240px;
max-width: 340px;
padding: .5rem .6rem;
border: 1px solid #bbb;
border-radius: 3px;
font: inherit;
}
.stock-notify input[aria-invalid="true"] { border-color: #a00000; }
.stock-notify button {
padding: .5rem 1.1rem;
border: 0;
border-radius: 3px;
background: #1a7f37;
color: #fff;
font: inherit;
font-weight: 700;
cursor: pointer;
}
.stock-notify button:hover { background: #14682c; }
.stock-notify .err { color: #a00000; margin: .4rem 0 0; font-size: .9rem; }
.stock-notify .ok { margin: 0; color: #1a7f37; font-weight: 700; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* --- Logo -----------------------------------------------------------------
Aimeos u navbar upisuje height="140", a footer height="40". Za horizontalni
wordmark to je predimenzionirano, pa se ograničava ovdje umjesto diranja
vendor templatea.
29.08.2026: novi logo je omjera 4.64:1, stari je bio 3.47:1 — pri istoj
visini je 34 % ŠIRI i na 1024 px je gurao izbornik tako da su „Zadnji
komadi" i „Popravljena roba" ispadali izvan ekrana. Zato sad širina, a ne
visina, određuje veličinu: max-width drži logo u istom prostoru kao prije,
a visina se izvodi iz njega. */
/* 29.08.2026 (kasno): logo u zaglavlju je premalen — vlasnik ga jedva vidi.
Uploadani logo je LOCKUP (2170x725, omjer 3:1) i nosi potpis „sutra na
vašim vratima", koji na 40 px visine nije čitljiv. Zato visina raste, a
širina ostaje ograničena da izbornik ne ispadne s ekrana (vidi bilješku
iznad — to se već jednom dogodilo na 1024 px). */
.navbar-brand img {
height: auto !important;
max-height: 48px;
width: auto;
max-width: 190px;
}
/* Tek od 1200 px logo raste do pune veličine. Ispod toga NE: na 1024 px je
izbornik ionako prepun — „Popravljena roba" ondje ispada s ekrana i BEZ
ovog povećanja (provjereno snimkom prije i poslije izmjene, vidi bilješku
u backlogu). Veći logo taj kvar ne bi uzrokovao, ali bi ga pogoršao. */
@media (min-width: 1200px) {
.navbar-brand img { max-height: 68px; max-width: 250px; }
}
/* Puna veličina tek od 1600 px. Granice su izmjerene, ne procijenjene:
na 1280 px logo od 280 px odgurne „Popravljenu robu" preko ruba, a na
1400 px izbaci telefonski broj iz zaglavlja. Na 1600 px stane sve. */
@media (min-width: 1440px) {
.navbar-brand img { max-height: 88px; max-width: 300px; }
}
@media (min-width: 1600px) {
.navbar-brand img { max-height: 108px; max-width: 360px; }
}
footer .footer-right .logo img {
height: auto !important;
max-height: 34px;
width: auto;
}
@media (max-width: 640px) {
.navbar-brand img { max-height: 44px; max-width: 165px; }
}
/* --- Upute za plaćanje ----------------------------------------------------- */
.pay-box {
max-width: 1200px;
margin: 1.5rem auto;
padding: 1.25rem 1.5rem;
border: 1px solid #d7e6da;
border-left: 4px solid #1a7f37;
background: #f4faf5;
border-radius: 3px;
}
.pay-box h2 { margin: 0 0 .8rem; font-size: 1.2rem; }
.pay-grid { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: start; }
.pay-code img { display: block; background: #fff; padding: .5rem; border: 1px solid #dfe3ea; max-width: 100%; height: auto; }
.pay-hint { margin: .4rem 0 0; font-size: .85rem; color: #555; max-width: 320px; }
.pay-data dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem .9rem; margin: 0 0 .9rem; }
.pay-data dt { color: #667; font-size: .9rem; }
.pay-data dd { margin: 0; font-weight: 600; }
.pay-data .mono { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: .3px; }
.pay-data .amount { font-size: 1.15rem; color: #1a7f37; font-variant-numeric: tabular-nums; }
.pay-instant {
margin: 0 0 .6rem;
padding: .6rem .8rem;
background: #fff;
border: 1px solid #d7e6da;
border-radius: 3px;
font-size: .9rem;
}
.pay-note { margin: 0; font-size: .85rem; color: #555; }
.pay-error { margin: 0; color: #a00000; font-weight: 600; }
@media (max-width: 720px) {
.pay-grid { grid-template-columns: 1fr; }
}
/* --- Blagajna: skrivanje suvišnog -------------------------------------------
Radi se CSS-om, ne izmjenom templatea: sažetak u istom bloku nosi i
pristanak na uvjete i gumb za narudžbu, pa uklanjanje iz templatea zna
odrezati i njih. */
.checkout-standard-summary .item.coupon,
.checkout-standard-summary .item.comment,
.checkout-standard-summary .item.customerref,
.checkout-standard-summary .item.delivery,
.checkout-standard-summary .item.account,
/* Ponavljanje adrese, usluga i stavki — kupac ih je upravo unio i vidi
ih u košarici. NE dira se `common-summary-additional`: tamo je pristanak
na uvjete, koji je zakonski obavezan, ni gumb za narudžbu. */
.checkout-standard-summary .common-summary-address,
.checkout-standard-summary .common-summary-service,
.checkout-standard-summary .common-summary-detail,
.checkout-standard-summary > .summary > h1,
.checkout-standard-summary > h1 { display: none !important; }
/* --- R1 kvačica ------------------------------------------------------------ */
.r1-toggle { margin: .5rem 0 .75rem; }
.r1-toggle label { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-weight: 600; }
.r1-toggle em { font-weight: 400; color: #667; font-style: normal; font-size: .9rem; }
.form-item.r1-hidden { display: none !important; }
/* ---------------------------------------------------------------
Pravne stranice
Tekst za čitanje, ne za skeniranje: uža mjera, veći prored.
--------------------------------------------------------------- */
.legal-page {
padding: 2rem 0 4rem;
/* 68 znakova po retku -- duži redak oko ovoga postaje naporan */
--legal-measure: 68ch;
}
.legal-breadcrumb {
font-size: .875rem;
color: #6b7280;
margin-bottom: 1rem;
}
.legal-breadcrumb a { color: #6b7280; }
.legal-breadcrumb span[aria-hidden] { margin: 0 .35rem; }
.legal-page h1 {
font-size: 1.9rem;
line-height: 1.25;
margin-bottom: .75rem;
}
.legal-lead {
font-size: 1.1rem;
color: #4b5563;
max-width: var(--legal-measure);
margin-bottom: 2rem;
}
.legal-page h2 {
font-size: 1.2rem;
margin: 2.25rem 0 .75rem;
padding-bottom: .4rem;
border-bottom: 1px solid #e5e7eb;
}
.legal-page p,
.legal-page li {
max-width: var(--legal-measure);
line-height: 1.7;
}
.legal-page ul { margin-bottom: 1rem; }
.legal-page li { margin-bottom: .4rem; }
/* Definicijska lista: naziv lijevo, vrijednost desno */
.legal-data {
display: grid;
grid-template-columns: minmax(11rem, auto) 1fr;
gap: .5rem 1.5rem;
max-width: var(--legal-measure);
margin-bottom: 1.5rem;
}
.legal-data dt { color: #6b7280; font-weight: 400; }
.legal-data dd { margin: 0; font-weight: 500; }
.legal-iban {
font-variant-numeric: tabular-nums;
letter-spacing: .02em;
}
/* Tablice moraju moći pobjeći iz mjere, ali ne smiju gurati stranicu
u vodoravni scroll -- zato scroll ide unutar samog omotača */
.legal-table {
display: block;
overflow-x: auto;
width: 100%;
border-collapse: collapse;
margin-bottom: 1.5rem;
font-size: .95rem;
}
.legal-table th,
.legal-table td {
text-align: left;
vertical-align: top;
padding: .6rem .9rem;
border-bottom: 1px solid #e5e7eb;
}
.legal-table thead th {
background: #f9fafb;
font-weight: 600;
white-space: nowrap;
}
.legal-table code { font-size: .9em; }
.legal-note {
font-size: .9rem;
color: #6b7280;
border-left: 3px solid #e5e7eb;
padding-left: .9rem;
}
/* Obrazac za raskid -- izgleda kao dokument koji se ispisuje */
.legal-form {
border: 1px solid #d1d5db;
border-radius: 4px;
padding: 1.5rem;
margin-bottom: 1.5rem;
max-width: var(--legal-measure);
background: #fff;
}
.legal-form p { margin-bottom: .9rem; }
.legal-updated {
margin-top: 3rem;
font-size: .85rem;
color: #9ca3af;
}
/* Bočna navigacija */
.legal-nav { padding-top: 3.5rem; }
.legal-nav h2 {
font-size: .8rem;
text-transform: uppercase;
letter-spacing: .06em;
color: #6b7280;
margin-bottom: .75rem;
border: 0;
}
.legal-nav ul { list-style: none; padding: 0; }
.legal-nav li { margin-bottom: .5rem; }
.legal-nav a.current { font-weight: 600; }
.footer-legal p { margin-bottom: .35rem; }
@media (max-width: 991px) {
.legal-nav { padding-top: 2rem; }
}
/* Ispis obrasca: samo dokument, bez navigacije i gumba */
@media print {
header, footer, .legal-nav, .legal-breadcrumb,
.legal-print, .back-to-top { display: none !important; }
.legal-page { padding: 0; }
.legal-form { border: 0; padding: 0; }
a[href]::after { content: ""; }
}
/* Naslovi sekcija na naslovnici su linkovi na kategoriju (Cataloglist\Eto) —
izgledaju kao naslov, a strelica i podcrtavanje na hover kažu da vode dalje */
.cms-page h2 > .section-link { color: inherit; text-decoration: none; }
.cms-page h2 > .section-link::after {
content: "\2192"; margin-left: .4em; font-size: .8em;
opacity: .45; transition: opacity .15s, transform .15s; display: inline-block;
}
.cms-page h2 > .section-link:hover { text-decoration: underline; text-underline-offset: .15em; }
.cms-page h2 > .section-link:hover::after { opacity: 1; transform: translateX(.15em); }
/* --- Dodano u košaricu: gumb bljesne zeleno (umjesto popupa, v. js/eto.js) -- */
@keyframes eto-added {
0%, 55% {
background-color: #1a7f37;
border-color: #1a7f37;
color: #fff;
}
}
.aimeos .addbasket .btn-added {
animation: eto-added 1.2s ease-out;
}
/* na listi gumb ima ikonu košarice u ::before — za vrijeme blica je nema */
.aimeos .addbasket .btn-added:before {
content: none;
}
.aimeos .addbasket .btn-added .eto-check {
font-weight: 700;
margin-right: .25rem;
}
/* --- Checkout: dropdown za poštanski broj / mjesto / ulicu (js/eto.js) ---- */
.eto-ac {
position: relative;
}
.eto-ac-list {
position: absolute;
top: calc(100% - .5rem);
left: 0;
right: 0;
z-index: 1050;
margin: 0;
padding: .25rem 0;
list-style: none;
background: #fff;
border: 1px solid #cfcfcf;
border-radius: 4px;
box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
max-height: 16rem;
overflow-y: auto;
font-weight: 400;
color: #222;
}
.eto-ac-list li {
padding: .45rem .75rem;
cursor: pointer;
line-height: 1.3;
}
.eto-ac-list li small {
color: #777;
font-size: .8em;
}
.eto-ac-list li:hover,
.eto-ac-list li.active {
background: #f0f0f0;
}
/* neobavezna polja: normalna debljina, obavezna ostaju podebljana (Aimeos) */
.checkout-standard-address .form-item.optional label {
font-weight: 400;
}
/* ============================================================
Moj račun (/profile) — layout s tabovima, vidi
resources/views/vendor/shop/account/index.blade.php i eto.js
============================================================ */
.account-page { padding: 1.5rem 0 3rem; }
.account-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid #e3e3e3;
}
.account-header h1 { margin: 0; font-size: 1.6rem; }
.account-user { margin: 0.25rem 0 0; color: #555; font-size: 0.9rem; }
.account-logout {
border: 1px solid #ccc;
background: #fff;
padding: 0.45rem 1.1rem;
}
.account-logout:hover { border-color: #000; }
.account-layout {
display: grid;
grid-template-columns: 220px 1fr;
gap: 2rem;
align-items: start;
}
.account-nav {
display: flex;
flex-direction: column;
border: 1px solid #e3e3e3;
background: #fafafa;
position: sticky;
top: 1rem;
}
.account-nav a {
padding: 0.65rem 1rem;
color: #333;
text-decoration: none;
border-left: 3px solid transparent;
border-bottom: 1px solid #efefef;
font-size: 0.92rem;
}
.account-nav a:last-child { border-bottom: 0; }
.account-nav a:hover { background: #f0f0f0; color: #000; }
.account-nav a.active {
background: #fff;
color: #000;
font-weight: 600;
border-left-color: #1a7f37;
}
.account-tab { display: none; }
.account-tab.active { display: block; }
.account-panel {
border: 1px solid #e3e3e3;
background: #fff;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
}
.account-panel > h2 {
margin: 0 0 1rem;
font-size: 1.1rem;
padding-bottom: 0.6rem;
border-bottom: 1px solid #efefef;
}
.account-note { color: #666; font-size: 0.88rem; margin: 0.25rem 0 1rem; }
.account-empty { color: #666; margin: 0; }
.account-empty a { color: #1a7f37; font-weight: 600; text-decoration: none; }
.account-empty a:hover { text-decoration: underline; }
/* pregled: kartice */
.account-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
}
.account-card {
display: flex;
flex-direction: column;
gap: 0.15rem;
border: 1px solid #e3e3e3;
background: #fff;
padding: 1rem 1.1rem;
text-decoration: none;
color: inherit;
}
.account-card:hover { border-color: #1a7f37; }
.account-card .card-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: #666; }
.account-card .card-value { font-size: 1.7rem; font-weight: 700; color: #000; line-height: 1.2; }
.account-card .card-hint { font-size: 0.8rem; color: #888; }
/* forme (mock) */
.account-form .form-row { margin-bottom: 1rem; }
.account-form label { display: block; font-size: 0.88rem; color: #444; margin-bottom: 0.3rem; }
.account-form .form-control { max-width: 26rem; }
.account-form .form-inline { display: flex; gap: 0.75rem; align-items: center; }
.account-form .form-inline .form-control { flex: 0 1 16rem; }
.account-form .btn { border: 1px solid #ccc; background: #fff; }
.account-form .btn:hover { border-color: #000; }
.account-form .btn-primary { background: #000; border-color: #000; color: #fff; }
.account-form .btn-primary:disabled { opacity: 0.5; }
.account-form .btn-danger { background: #fff; border-color: #a00000; color: #a00000; }
.account-form .btn-danger:hover { background: #a00000; color: #fff; }
.account-toggle-row { display: flex; align-items: center; justify-content: space-between; max-width: 26rem; }
.account-toggle-row > label:first-child { margin: 0; }
/* toggle prekidač */
.account-toggle { position: relative; display: inline-block; width: 2.6rem; height: 1.4rem; margin: 0; }
.account-toggle input { opacity: 0; width: 0; height: 0; }
.account-toggle span {
position: absolute; inset: 0;
background: #ccc; transition: background 0.15s;
}
.account-toggle span::before {
content: ""; position: absolute;
height: 1rem; width: 1rem; left: 0.2rem; top: 0.2rem;
background: #fff; transition: transform 0.15s;
}
.account-toggle input:checked + span { background: #1a7f37; }
.account-toggle input:checked + span::before { transform: translateX(1.2rem); }
/* bodovi */
.account-points { display: flex; align-items: baseline; gap: 0.5rem; margin: 0.5rem 0; }
.account-points .points-value { font-size: 2.4rem; font-weight: 700; color: #1a7f37; }
.account-points .points-label { color: #666; }
.account-gdpr-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 34rem; }
.account-gdpr-row .account-note { margin: 0.15rem 0 0; }
/* ugniježđeni Aimeos profil (adrese) bez duplog okvira */
.account-addresses .account-profile { padding: 0; }
.account-addresses .account-profile .container-xxl { padding: 0; }
@media (max-width: 767px) {
.account-layout { grid-template-columns: 1fr; }
.account-nav {
position: static;
flex-direction: row;
flex-wrap: wrap;
}
.account-nav a { border-bottom: 0; border-left: 0; border-top: 3px solid transparent; }
.account-nav a.active { border-top-color: #1a7f37; }
}
/* ============================================================
Tablični pregled artikala (l_type=table) — veleprodajni stil,
markup u ext/eto/.../catalog/lists/items-table.php
============================================================ */
/* gumbi pregleda: aktivno stanje + ikona za tablicu */
.catalog-list-type { display: flex; align-items: center; gap: 0.25rem; }
.catalog-list-type .type-item.active { border-bottom: 2px solid #1a7f37; }
.catalog-list-type .type-table:after {
content: "";
display: inline-block;
background-color: currentColor;
mask-repeat: no-repeat;
mask-size: 100% 100%;
height: 1.2rem;
width: 1.2rem;
mask-image: url("data:image/svg+xml,");
}
/* broj artikala po stranici */
.list-pagesize { margin-right: auto; font-size: 0.85rem; color: #666; display: inline-flex; align-items: center; gap: 0.35rem; }
.list-pagesize .pagesize-item {
padding: 0.15rem 0.45rem;
border: 1px solid #e3e3e3;
color: #333;
text-decoration: none;
}
.list-pagesize .pagesize-item:hover { border-color: #000; }
/* Vendorovo `.aimeos a:link` boji sve poveznice tamnom bojom i nadjačavalo
je ovo pravilo — odabrani broj bio je crn tekst na crnoj podlozi. */
.aimeos .list-pagesize .pagesize-item.active,
.aimeos .list-pagesize a.pagesize-item.active:link,
.aimeos .list-pagesize a.pagesize-item.active:visited {
background: #1a7f37;
border-color: #1a7f37;
color: #fff;
font-weight: 600;
}
/* raspored: grid redak po artiklu; .offer i .section su display:contents pa
im djeca (price-list, stock-list, form) sjedaju u stupce retka */
.aimeos .catalog-list-items.type-table { display: block; }
.aimeos .catalog-list-items.type-table .table-head,
.aimeos .catalog-list-items.type-table .product {
display: grid;
/* Fiksne širine: svaki je red SVOJ grid, pa bi max-content stupci u
svakom retku ispali drukčije široki i ništa se ne bi poravnalo po
vertikali. Širine su zato fiksne i dovoljne za najduži sadržaj
(tekst zalihe smije u 2 reda). */
/* redoslijed po želji korisnika: naziv | dostupnost | cijena | količina */
grid-template-columns: 72px minmax(0, 1fr) 11.5rem 7.5rem 15.5rem;
gap: 0 1.25rem;
align-items: center;
width: 100%;
max-width: none;
float: none;
margin: 0;
padding: 0.5rem 0.75rem;
border-bottom: 1px solid #e3e3e3;
position: static;
text-align: left;
}
.aimeos .catalog-list-items.type-table .table-head {
background: #f6f6f6;
border: 1px solid #e3e3e3;
font-weight: 600;
font-size: 0.85rem;
color: #444;
padding: 0.5rem 0.75rem;
}
.aimeos .catalog-list-items.type-table .table-head .head-price { text-align: right; }
.aimeos .catalog-list-items.type-table .product:hover {
background: #fafafa;
box-shadow: none;
transform: none;
}
.aimeos .catalog-list-items.type-table .table-media {
display: flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
background: #fff;
}
.aimeos .catalog-list-items.type-table .table-media img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.aimeos .catalog-list-items.type-table .table-main { min-width: 0; }
.aimeos .catalog-list-items.type-table .table-code {
display: inline-block;
font-weight: 700;
font-size: 0.85rem;
color: #1a7f37;
text-decoration: none;
}
.aimeos .catalog-list-items.type-table .table-code:hover { text-decoration: underline; }
.aimeos .catalog-list-items.type-table .table-name {
display: block;
color: #222;
font-size: 0.92rem;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.aimeos .catalog-list-items.type-table .table-name:hover { color: #000; text-decoration: underline; }
.aimeos .catalog-list-items.type-table .table-desc {
font-size: 0.8rem;
color: #777;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* badge-evi ("Šalje se danas", "Akcija", -10%) kao mali inline chipovi */
.aimeos .catalog-list-items.type-table .table-badges { margin-top: 0.2rem; }
.aimeos .catalog-list-items.type-table .table-badges > * {
position: static !important;
display: inline-flex;
gap: 0.3rem;
margin: 0 0.3rem 0 0;
}
.aimeos .catalog-list-items.type-table .table-badges > * > * { position: static !important; }
.aimeos .catalog-list-items.type-table .offer,
.aimeos .catalog-list-items.type-table .offer .section { display: contents; }
.aimeos .catalog-list-items.type-table .price-list {
grid-column: 4;
grid-row: 1;
text-align: right;
position: static;
min-width: 6rem;
}
.aimeos .catalog-list-items.type-table .stock-list {
grid-column: 3;
grid-row: 1;
position: static;
font-size: 0.82rem;
line-height: 1.25;
margin: 0;
}
.aimeos .catalog-list-items.type-table form.basket {
grid-column: 5;
grid-row: 1;
margin: 0;
position: static;
display: block;
}
.aimeos .catalog-list-items.type-table .addbasket .input-group {
display: flex;
flex-wrap: nowrap;
justify-content: flex-end;
gap: 0.35rem;
}
/* kompaktniji gumbi u tabličnom retku da stupac ne raste u širinu */
.aimeos .catalog-list-items.type-table .addbasket .btn-pin,
.aimeos .catalog-list-items.type-table .addbasket .btn-save {
width: 2.3rem;
padding: 0.35rem 0.25rem;
}
.aimeos .catalog-list-items.type-table .addbasket input[type="number"] {
width: 3.4rem;
}
.aimeos .catalog-list-items.type-table .addbasket input[type="number"] {
width: 4.2rem;
text-align: center;
border: 1px solid #ccc;
padding: 0.3rem 0.2rem;
}
/* suženi prikaz (992-1399px, sidebar pojede širinu): naziv preko cijele
širine, ispod njega dostupnost pa cijena, gumbi desno preko oba retka */
@media (max-width: 1399px) and (min-width: 992px) {
.aimeos .catalog-list-items.type-table .product {
grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr) 15.5rem;
gap: 0.3rem 1rem;
}
.aimeos .catalog-list-items.type-table .table-media { grid-row: 1 / span 2; }
.aimeos .catalog-list-items.type-table .table-main { grid-column: 2 / span 2; grid-row: 1; }
.aimeos .catalog-list-items.type-table .stock-list { grid-column: 2; grid-row: 2; }
.aimeos .catalog-list-items.type-table .price-list { grid-column: 3; grid-row: 2; text-align: left; }
.aimeos .catalog-list-items.type-table form.basket { grid-column: 4; grid-row: 1 / span 2; align-self: center; }
}
@media (max-width: 991px) {
.aimeos .catalog-list-items.type-table .table-head { display: none; }
.aimeos .catalog-list-items.type-table .product {
grid-template-columns: 72px minmax(0, 1fr);
gap: 0.35rem 1rem;
}
.aimeos .catalog-list-items.type-table .table-media { grid-row: 1 / span 2; }
.aimeos .catalog-list-items.type-table .table-main { grid-column: 2; grid-row: 1; }
.aimeos .catalog-list-items.type-table .price-list { grid-column: 2; grid-row: 2; text-align: left; }
.aimeos .catalog-list-items.type-table .stock-list { grid-column: 2; grid-row: 3; }
.aimeos .catalog-list-items.type-table form.basket { grid-column: 2; grid-row: 4; }
.aimeos .catalog-list-items.type-table .addbasket .input-group { justify-content: flex-start; }
}
/* ============================================================
Tekst zalihe vidljiv i na listama (vendor aimeos.css ga skriva,
ostavlja samo točkicu) — "Zadnji komad!", "Ostala su još samo
2 komada"... iz ext/eto catalog/stock/body.php
============================================================ */
.aimeos .product .stocktext {
display: inline;
font-size: 0.8rem;
vertical-align: middle;
}
.aimeos .product .stockitem.stock-out .stocktext { color: #a00000; }
.aimeos .product .stockitem.stock-low .stocktext { color: #9a6700; font-weight: 600; }
.aimeos .product .stockitem.stock-high .stocktext,
.aimeos .product .stockitem.stock-unlimited .stocktext { color: #1a7f37; }
/* stara (prekrižena) cijena vidljiva i na listama — vendor je skriva;
stil (line-through, crvena, 75%) već postoji u aimeos.css */
.aimeos .product .price-item:first-of-type .original {
display: inline;
}
/* ============================================================
Graf kretanja cijene na detalju artikla (eto.js + /api/cijene)
============================================================ */
.eto-price-history {
margin-top: 0.75rem;
padding: 0.6rem 0.75rem;
border: 1px solid #e3e3e3;
background: #fafafa;
}
.eto-price-history .ph-title {
font-size: 0.78rem;
color: #666;
margin-bottom: 0.3rem;
}
.eto-price-history svg { display: block; width: 100%; height: 48px; }
.eto-price-history .ph-range {
display: flex;
justify-content: space-between;
font-size: 0.72rem;
color: #888;
margin-top: 0.2rem;
}
/* ============================================================
Detalj artikla: opis + karakteristike ispod košarice i
"spremljeno" stanje gumbâ (ext/eto catalog/detail + actions)
============================================================ */
.eto-detail-description,
.eto-detail-characteristics {
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid #e3e3e3;
}
.eto-detail-description h2,
.eto-detail-characteristics h2 {
font-size: 1.05rem;
margin: 0 0 0.75rem;
}
.eto-detail-description .long { font-size: 0.9rem; color: #333; }
.eto-detail-characteristics .eto-attributes {
width: 100%;
border-collapse: collapse;
font-size: 0.88rem;
}
.eto-detail-characteristics .eto-attributes tr { border-bottom: 1px solid #efefef; }
.eto-detail-characteristics .eto-attributes tr:nth-child(odd) { background: #fafafa; }
.eto-detail-characteristics .eto-attributes td { padding: 0.4rem 0.6rem; vertical-align: top; }
.eto-detail-characteristics .eto-attributes td.name { width: 40%; color: #666; }
/* gumb spremljenog artikla: zelen, i blic pri spremanju */
.catalog-detail .catalog-actions .actions-button.saved { color: #1a7f37; }
.catalog-detail .catalog-actions .actions-button.eto-flash { animation: eto-save-flash 0.8s ease; }
@keyframes eto-save-flash {
0% { transform: scale(1); color: inherit; }
35% { transform: scale(1.35); color: #1a7f37; }
100% { transform: scale(1); }
}
/* ============================================================
Watch/favorite gumbi na listama, uz pribadaču
(ext/eto common/partials/save-actions.php + eto.js)
============================================================ */
.catalog-list-items .addbasket .btn-save {
border: 1px solid var(--ai-primary, #000);
display: block;
width: 3rem;
padding: 0.5rem;
text-align: center;
text-decoration: none;
color: var(--ai-primary, #000);
}
.catalog-list-items .addbasket .btn-save:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 1rem;
height: 1rem;
background-color: currentColor;
mask-repeat: no-repeat;
mask-size: 100% 100%;
}
.catalog-list-items .addbasket .btn-watch:before {
mask-image: url("data:image/svg+xml,");
}
.catalog-list-items .addbasket .btn-favorite:before {
mask-image: url("data:image/svg+xml,");
}
.catalog-list-items .addbasket .btn-save:hover {
background-color: var(--ai-primary, #000);
color: #fff;
}
.catalog-list-items .addbasket .btn-save.saved {
background-color: #1a7f37;
border-color: #1a7f37;
color: #fff;
}
.catalog-list-items .addbasket .btn-save.eto-flash { animation: eto-save-flash 0.8s ease; }
/* toast "prijavi se za spremanje" uz watch/favorite gumbe */
.eto-login-toast {
position: absolute;
bottom: calc(100% + 6px);
right: 0;
z-index: 20;
background: #111;
color: #fff;
font-size: 0.78rem;
padding: 0.4rem 0.6rem;
white-space: nowrap;
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.eto-login-toast a { color: #6fdb8f; font-weight: 600; }
/* ============================================================
Blic ikone računa u headeru nakon prijave (session flash
eto_logged_in iz login/Google kontrolera → klasa u base.blade)
============================================================ */
.nav-item.eto-just-logged > .nav-link {
animation: eto-login-blink 0.6s ease 3;
}
@keyframes eto-login-blink {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.25; transform: scale(1.18); color: #1a7f37; }
}
/* prvi red tabličnog pregleda: gornja linija (redovi imaju samo donju,
a zaglavlje s nazivima stupaca je maknuto) */
.aimeos .catalog-list-items.type-table .product:first-child {
border-top: 1px solid #e3e3e3;
}
/* ============================================================
Stablo kategorija u lijevom stupcu (category-tree.blade.php).
Mora biti OVDJE (head CSS), ne u inline bloku iza markupa —
inače se stablo na svakoj navigaciji nacrta rastvoreno pa
sklopi (blic, isti sindrom kao nekad admin sidebar).
============================================================ */
.cat-tree ul { list-style: none; margin: 0; padding: 0; }
.cat-tree ul ul { margin-left: .75rem; border-left: 1px solid #e3e3e3; padding-left: .4rem; }
.cat-tree li { padding: 1px 0; }
.cat-tree .row-item { display: flex; align-items: flex-start; gap: .25rem; }
.cat-tree .twist {
flex: 0 0 1.1rem; width: 1.1rem; height: 1.1rem; line-height: 1rem;
padding: 0; border: 0; background: none; cursor: pointer;
font: inherit; font-weight: 700; color: #666; text-align: center;
}
.cat-tree .twist:hover { color: #000; }
.cat-tree .twist.leaf { visibility: hidden; cursor: default; }
.cat-tree a { color: #333; text-decoration: none; }
.cat-tree a:hover { text-decoration: underline; }
.cat-tree > ul > li > .row-item > a { font-weight: 600; }
.cat-tree li.current > .row-item > a { font-weight: 700; color: #000; }
.cat-tree li[aria-expanded="false"] > ul { display: none; }
.cat-tree-error { color: #a00; font-size: .9rem; }
/* ============================================================
Outfit za naslove, cijene i UI akcente (Inter ostaje za tekst).
Self-hostan iz istog razloga kao Inter (CSP 'self'), ista dva
subseta kao kod Googlea: latin (ASCII) + latin-ext (č ć đ š ž).
============================================================ */
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/fonts/outfit-latin.woff2') format('woff2-variations');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/fonts/outfit-latin-ext.woff2') format('woff2-variations');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
U+A720-A7FF;
}
/* naslovi i istaknuti UI elementi */
body.font-inter h1, body.font-inter h2, body.font-inter h3,
body.font-inter h4, body.font-inter h5, body.font-inter h6,
body.font-inter .catalog-stage-breadcrumb,
body.font-inter .navbar-top .nav-link .name,
body.font-inter .catalog-filter-tree .header-name,
body.font-inter .home-stage .stage-text,
body.font-inter .btn {
font-family: 'Outfit', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
/* cijene: Outfit + tabularne znamenke (poravnanje stupaca) */
body.font-inter .price-item .value,
body.font-inter .price .value,
body.font-inter .alt-price {
font-family: 'Outfit', 'Inter', system-ui, sans-serif;
font-feature-settings: 'tnum' 1;
font-variant-numeric: tabular-nums;
}
/* blic i za pribadaču (isti kao btn-save) */
.catalog-list-items .addbasket .btn-pin.eto-flash { animation: eto-save-flash 0.8s ease; }
/* ============================================================
Newsletter forma u footeru (base.blade.php + eto.js)
============================================================ */
.footer-newsletter { padding: 1.25rem 0; border-top: 1px solid #333; }
.eto-newsletter { max-width: 34rem; margin: 0 auto; text-align: center; }
.eto-newsletter label { display: block; color: #ccc; margin-bottom: 0.6rem; font-size: 0.9rem; }
.eto-newsletter .nl-group { display: flex; gap: 0.5rem; justify-content: center; }
.eto-newsletter input[type="email"] {
flex: 1 1 auto;
max-width: 20rem;
padding: 0.5rem 0.75rem;
border: 1px solid #555;
background: #111;
color: #fff;
}
.eto-newsletter input[type="email"]::placeholder { color: #777; }
.eto-newsletter .btn {
background: #1a7f37;
border: 1px solid #1a7f37;
color: #fff;
padding: 0.5rem 1.25rem;
}
.eto-newsletter .btn:hover { background: #146a2c; }
.eto-newsletter .nl-message { min-height: 1.2rem; margin: 0.5rem 0 0; font-size: 0.85rem; color: #9fdcb0; }
/* ============================================================
Rotirajuća traka brandova na dnu naslovnice (brands-marquee)
============================================================ */
.eto-brands {
overflow: hidden;
border-top: 1px solid #e3e3e3;
border-bottom: 1px solid #e3e3e3;
padding: 1rem 0;
margin: 2rem 0 0;
}
.eto-brands .brands-track {
display: flex;
width: max-content;
animation: eto-brands-scroll 60s linear infinite;
}
.eto-brands:hover .brands-track { animation-play-state: paused; }
.eto-brands .brands-set {
display: flex;
align-items: center;
gap: 3rem;
padding-right: 3rem;
}
.eto-brands .brand-item {
font-family: 'Outfit', 'Inter', sans-serif;
font-size: 1.05rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #9a9a9a;
white-space: nowrap;
}
.eto-brands .brand-item img {
height: 1.6rem;
width: auto;
filter: grayscale(1) opacity(0.65);
transition: filter 0.2s;
}
.eto-brands .brand-item img:hover { filter: none; }
@keyframes eto-brands-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* korisnici koji ne žele animacije */
@media (prefers-reduced-motion: reduce) {
.eto-brands .brands-track { animation: none; flex-wrap: wrap; width: auto; }
.eto-brands .brands-set[aria-hidden] { display: none; }
}
/* ============================================================
Countdown rezervacije u košarici (basket/index.blade.php)
============================================================ */
.eto-reservation {
max-width: 48rem;
margin: 1rem auto 0;
padding: 0.6rem 1rem;
border: 1px solid #d7e6da;
border-left: 4px solid #1a7f37;
background: #f4faf5;
font-size: 0.9rem;
color: #333;
}
.eto-reservation .res-countdown {
color: #1a7f37;
font-family: 'Outfit', 'Inter', sans-serif;
font-variant-numeric: tabular-nums;
}
.eto-reservation.expired {
border-color: #eee0c4;
border-left-color: #9a6700;
background: #fdf8ec;
color: #6b5417;
}
.eto-reservation .res-icon::before {
content: "";
display: inline-block;
width: 0.9rem;
height: 0.9rem;
margin-right: 0.4rem;
vertical-align: -0.1rem;
background-color: #1a7f37;
mask-repeat: no-repeat;
mask-size: 100% 100%;
mask-image: url("data:image/svg+xml,");
}
/* ============================================================
Footer (base.blade.php .eto-footer) — 4 stupca + newsletter +
zakonska linija; tamna podloga kao header
============================================================ */
.eto-footer {
background: #111;
color: #bbb;
margin-top: 3rem;
padding: 2.5rem 0 1.5rem;
font-size: 0.9rem;
}
.eto-footer a { color: #ddd; text-decoration: none; }
.eto-footer a:hover { color: #fff; text-decoration: underline; }
.eto-footer .f-columns {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
gap: 2rem;
padding-bottom: 1.5rem;
}
.eto-footer .f-col h2 {
font-family: 'Outfit', 'Inter', sans-serif;
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #fff;
margin: 0 0 0.9rem;
}
.eto-footer .f-col ul { list-style: none; margin: 0; padding: 0; }
.eto-footer .f-col li { margin-bottom: 0.45rem; }
.eto-footer .f-brand .logo img { height: 2rem; width: auto; }
.eto-footer .f-tagline { color: #999; margin: 0.8rem 0; max-width: 24rem; }
.eto-footer .f-contact { font-style: normal; line-height: 1.6; color: #999; }
.eto-footer .footer-newsletter { border-top: 1px solid #2a2a2a; }
.eto-footer .f-legal-line {
border-top: 1px solid #2a2a2a;
padding-top: 1rem;
text-align: center;
color: #777;
font-size: 0.78rem;
line-height: 1.6;
}
.eto-footer .f-legal-line p { margin: 0 0 0.3rem; }
.eto-footer .f-legal-line a { color: #999; }
.eto-footer .f-copy { color: #666; }
@media (max-width: 991px) {
.eto-footer .f-columns { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px) {
.eto-footer .f-columns { grid-template-columns: 1fr; }
}
/* ============================================================
Profil: catalog/session (pinned + zadnje viđeno) podijeljen u
dva taba — u svakom se vidi samo njegov blok
============================================================ */
.eto-session-pinned .catalog-session-seen,
.eto-session-seen .catalog-session-pinned { display: none; }
/* naslovi komponente su višak — tab ima svoj */
.eto-session-pinned .catalog-session-pinned > .header,
.eto-session-seen .catalog-session-seen > .header { display: none; }
/* ============================================================
Spojeni košarica+checkout (checkout/index.blade.php): sažetak
ne ponavlja popis artikala — njega pokazuje košarica iznad
============================================================ */
.checkout-standard .checkout-standard-summary .common-summary-detail .basket .details {
display: none;
}
/* ============================================================
Instant tooltip (data-tip) — ikone spremanja: srce, oko,
pribadača, usporedba. eto.js seli title → data-tip; ::before
je zauzet glifom ikone pa tooltip ide u ::after (bez strelice).
============================================================ */
[data-tip] { position: relative; }
[data-tip]::after {
content: attr(data-tip);
position: absolute;
bottom: calc(100% + 7px);
left: 50%;
transform: translateX(-50%) translateY(3px);
background: #222;
color: #fff;
font-size: 0.72rem;
font-weight: 400;
line-height: 1.25;
padding: 0.28rem 0.55rem;
border-radius: 4px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.12s ease, transform 0.12s ease;
z-index: 1080;
}
[data-tip]:hover::after,
[data-tip]:focus-visible::after {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
/* na dodirnim ekranima nema hovera — tooltip bi se lijepio nakon tapa */
@media (hover: none) {
[data-tip]::after { display: none; }
}
/* ============================================================
Kartice s VIŠE slika (dodatne slike s neta, eto:extra-images):
vendorov selektor "div.list-column:first-of-type" ne pali jer je
naš .badges div prvi div u kartici, pa su se slike slagale jedna
ISPOD druge. Ovdje: apsolutni stog, prva vidljiva, hover pokazuje
drugu; kotačić (eto.js) lista kroz sve inline stilovima.
============================================================ */
.aimeos .catalog-list-items .product .media-list.multiple {
position: relative;
display: block;
padding-top: calc(100% / var(--ai-product-image-ratio, 1));
overflow: hidden;
}
.aimeos .catalog-list-items .product .media-list.multiple .media-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.2s linear;
background: #fff;
}
.aimeos .catalog-list-items .product .media-list.multiple .media-item:first-of-type { opacity: 1; }
.aimeos .catalog-list-items .product .media-list.multiple .media-item > img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* hover bez kotačića: druga slika (vendor first→0 pravilo ionako pali) */
.aimeos .catalog-list-items .product .media-list.multiple:hover .media-item:nth-of-type(2) { opacity: 1; }
/* Razdvajanje narudžbe u 2 paketa (checkout, miješana košarica) */
.eto-split-box {
border: 1px solid #1a7f37;
border-left-width: 4px;
border-radius: 0.4rem;
background: #f4faf5;
padding: 0.8rem 1rem;
margin: 0.8rem 0;
font-size: 0.9rem;
}
.eto-split-cols { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 0.5rem; }
.eto-split-head { font-weight: 600; }
.eto-split-box ul { margin: 0.25rem 0 0; padding-left: 1.2rem; }
.eto-split-note { margin: 0.6rem 0 0; font-size: 0.82rem; color: #555; }
/* Omnibus: najniža cijena u 30 dana (uz sniženja, detalj artikla) */
.eto-omnibus { font-size: 0.8rem; color: #666; margin: 0.25rem 0 0; }
.eto-omnibus strong { color: #333; }
/* Datum dostave uz "Na zalihi" — stock body ga šalje svugdje,
prikazuje se samo na detalju artikla */
.stockitem .eto-stock-eta { display: none; }
.catalog-detail .stock-list .stockitem .eto-stock-eta {
display: block;
font-size: 0.82rem;
font-weight: 600;
color: #1a7f37;
margin-top: 0.15rem;
}
/* Cijena uz plaćanje po predračunu (barkod), detalj artikla */
.eto-barcode-price {
font-size: 0.85rem;
color: #333;
margin: 0.35rem 0 0;
padding: 0.35rem 0.6rem;
background: #f4faf5;
border-left: 3px solid #1a7f37;
}
.eto-barcode-price strong { color: #1a7f37; font-size: 0.95rem; }
.eto-barcode-note { display: block; font-size: 0.75rem; color: #666; }
/* ============================================================
Detalj: "Prati cijenu" CTA + kutija "Savjet tehničara"
============================================================ */
.eto-watch-cta {
display: inline-block;
margin-top: 0.5rem;
padding: 0.35rem 0.7rem;
border: 1px dashed #1a7f37;
background: none;
color: #1a7f37;
font-size: 0.82rem;
cursor: pointer;
}
.eto-watch-cta:hover { background: #f4faf5; }
.eto-tech-box {
display: flex;
gap: 0.75rem;
margin-top: 1.5rem;
padding: 0.9rem 1rem;
border: 1px solid #d7e6da;
border-left: 4px solid #1a7f37;
background: #f4faf5;
font-size: 0.88rem;
}
.eto-tech-box strong { display: block; margin-bottom: 0.2rem; }
.eto-tech-box p { margin: 0 0 0.4rem; color: #444; }
.eto-tech-box a { color: #1a7f37; font-weight: 600; text-decoration: none; }
.eto-tech-box a:hover { text-decoration: underline; }
.eto-tech-box .tech-icon::before {
content: "";
display: inline-block;
width: 1.4rem;
height: 1.4rem;
background-color: #1a7f37;
mask-repeat: no-repeat;
mask-size: 100% 100%;
mask-image: url("data:image/svg+xml,");
}
/* ============ Promo top-bar (config/promo.php) ============ */
.eto-topbar {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 2.25rem;
padding: .3rem 2.5rem;
background: #14213d;
color: #fff;
text-align: center;
font-size: .85rem;
letter-spacing: .01em;
}
.eto-topbar-track { position: relative; width: 100%; overflow: hidden; }
.eto-topbar-msg {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
transition: opacity .45s ease;
pointer-events: none;
color: #fff;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* track nema visinu jer su poruke absolute — prva je drži u toku */
.eto-topbar-msg.active { position: static; opacity: 1; pointer-events: auto; }
a.eto-topbar-msg:hover { color: #fca311; text-decoration: underline; }
/* X: iznad svega, s punom pozadinom — poruka ne smije ni vizualno ni
klikom doći preko njega */
.eto-topbar-close {
position: absolute;
right: .35rem;
top: 50%;
transform: translateY(-50%);
z-index: 10;
border: 0;
background: #14213d;
color: rgba(255, 255, 255, .75);
font-size: 1.25rem;
line-height: 1;
width: 1.9rem;
height: 1.9rem;
border-radius: 50%;
padding: 0;
cursor: pointer;
}
.eto-topbar-close:hover { color: #fff; background: #1d2d52; }
/* ============ Usporedba artikala (⇆) ============ */
/* gumb na karticama — isti okvir kao btn-watch/favorite */
.catalog-list-items .addbasket .btn-compare:before {
mask-image: url("data:image/svg+xml,");
}
/* gumb na detalju — kao ostale catalog-actions ikone */
.catalog-detail .catalog-actions .actions-button-compare {
display: inline-block;
text-decoration: none;
color: inherit;
}
.catalog-detail .catalog-actions .actions-button-compare:before {
content: "";
display: inline-block;
width: 1.1rem;
height: 1.1rem;
background-color: currentColor;
mask-repeat: no-repeat;
mask-size: 100% 100%;
mask-image: url("data:image/svg+xml,");
}
.catalog-detail .catalog-actions .actions-button-compare.saved { color: #1a7f37; }
/* plutajuća traka dolje (kreira je eto.js kad ima odabranih) */
#eto-compare-bar {
position: fixed;
left: 50%;
bottom: 1rem;
transform: translateX(-50%);
z-index: 1050;
display: flex;
align-items: center;
gap: .25rem;
background: #14213d;
color: #fff;
border-radius: 2rem;
padding: .45rem .6rem .45rem 1.1rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
font-size: .9rem;
}
#eto-compare-bar .eto-compare-go { color: #fff; text-decoration: none; }
#eto-compare-bar .eto-compare-go:hover { color: #fca311; }
#eto-compare-bar .eto-compare-reset {
border: 0;
background: none;
color: rgba(255, 255, 255, .7);
font-size: 1.15rem;
line-height: 1;
padding: .1rem .45rem;
cursor: pointer;
}
#eto-compare-bar .eto-compare-reset:hover { color: #fff; }
/* stranica /usporedba */
.eto-compare { padding: 1rem 2vw 3rem; }
.eto-compare h1 { font-size: 1.4rem; margin: .5rem 0 1.25rem; }
.eto-compare-scroll { overflow-x: auto; }
.eto-compare-table {
border-collapse: collapse;
width: 100%;
min-width: 40rem;
font-size: .88rem;
}
.eto-compare-table th,
.eto-compare-table td {
border: 1px solid #e5e5e5;
padding: .6rem .75rem;
vertical-align: top;
text-align: left;
min-width: 11rem;
}
.eto-compare-table th[scope="row"] {
width: 10rem;
min-width: 8rem;
background: #fafafa;
color: #666;
font-weight: 600;
}
.eto-compare-table tr:nth-child(even) td { background: #fcfcfc; }
.eto-compare-table .row-media td { position: relative; text-align: center; }
.eto-compare-table .row-media img { max-width: 9rem; max-height: 9rem; object-fit: contain; }
.eto-compare-table .row-name a { font-weight: 600; color: inherit; }
.eto-compare-table .compare-code { color: #888; font-size: .8rem; margin-top: .25rem; }
.eto-compare-table .row-price del { color: #999; margin-right: .5rem; }
.eto-compare-table .row-price strong { font-size: 1.05rem; }
.eto-compare-table .row-stock .stock-in { color: #1a7f37; }
.eto-compare-table td.stock-in { color: #1a7f37; }
.eto-compare-table td.stock-out { color: #b02a37; }
.eto-compare-remove {
position: absolute;
top: .3rem;
right: .45rem;
color: #999;
font-size: 1.2rem;
line-height: 1;
text-decoration: none;
}
.eto-compare-remove:hover { color: #b02a37; }
.eto-compare-empty .eto-compare-icon {
display: inline-block;
border: 1px solid #ccc;
padding: 0 .35rem;
border-radius: .25rem;
}
.eto-compare-clear { margin-top: 1rem; }
.eto-compare-clear a { color: #666; }
/* ============ Blog (/blog, /blog/{slug}) ============ */
.eto-blog { padding: 1rem 2vw 3rem; max-width: 75rem; margin: 0 auto; }
.eto-blog h1 { font-size: 1.5rem; margin: .5rem 0 .25rem; }
.eto-blog-intro { color: #666; margin: 0 0 1.5rem; }
.eto-blog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
gap: 1.25rem;
}
.eto-blog-card {
border: 1px solid #e5e5e5;
border-radius: .5rem;
padding: 1rem 1.15rem;
background: #fff;
display: flex;
flex-direction: column;
}
.eto-blog-card > a { color: inherit; text-decoration: none; }
.eto-blog-card img {
width: 100%;
height: 10rem;
object-fit: cover;
border-radius: .35rem;
margin-bottom: .6rem;
}
.eto-blog-card h2 { font-size: 1.05rem; margin: 0 0 .3rem; }
.eto-blog-card time { color: #999; font-size: .78rem; }
.eto-blog-card p { font-size: .88rem; color: #444; flex: 1; }
.eto-blog-more { font-size: .85rem; font-weight: 600; text-decoration: none; }
.eto-blog-pager { display: flex; justify-content: space-between; margin-top: 1.5rem; }
.eto-blog-crumb { font-size: .82rem; color: #999; margin-bottom: .75rem; }
.eto-blog-crumb a { color: #666; text-decoration: none; }
.eto-blog-post time { color: #999; font-size: .85rem; }
.eto-blog-cover {
width: 100%;
max-height: 22rem;
object-fit: cover;
border-radius: .5rem;
margin: 1rem 0;
}
.eto-blog-body { max-width: 46rem; font-size: .95rem; line-height: 1.65; }
.eto-blog-body h2 { font-size: 1.2rem; margin: 1.75rem 0 .6rem; }
.eto-blog-body h3 { font-size: 1.05rem; margin: 1.4rem 0 .5rem; }
.eto-blog-body img { max-width: 100%; border-radius: .4rem; }
.eto-blog-body blockquote {
border-left: 3px solid #fca311;
margin: 1rem 0;
padding: .25rem 0 .25rem 1rem;
color: #555;
}
.eto-blog-body code { background: #f4f5f7; padding: .1rem .3rem; border-radius: .25rem; font-size: .85em; }
.eto-blog-body pre { background: #f4f5f7; padding: .75rem 1rem; border-radius: .4rem; overflow-x: auto; }
.eto-blog-morelist { margin-top: 2.5rem; border-top: 1px solid #eee; padding-top: 1.25rem; }
.eto-blog-morelist h2 { font-size: 1.05rem; }
.eto-blog-morelist ul { list-style: none; padding: 0; }
.eto-blog-morelist li { margin: .4rem 0; }
.eto-blog-morelist time { color: #999; font-size: .78rem; margin-left: .5rem; }
/* ============ Telefon i poslovnica u headeru ============ */
.eto-header-contact {
display: flex;
align-items: center;
gap: 1.1rem;
margin: 0 1rem;
white-space: nowrap;
}
.eto-header-contact a {
display: inline-flex;
align-items: center;
gap: .4rem;
color: rgba(255, 255, 255, .85);
text-decoration: none;
font-size: .88rem;
}
.eto-header-contact a:hover { color: #fca311; }
.eto-header-contact a:before {
content: "";
display: inline-block;
width: 1.05rem;
height: 1.05rem;
flex: 0 0 auto;
background-color: currentColor;
mask-repeat: no-repeat;
mask-size: 100% 100%;
}
.eto-header-contact .ehc-phone:before {
mask-image: url("data:image/svg+xml,");
}
.eto-header-contact .ehc-store:before {
mask-image: url("data:image/svg+xml,");
}
/* uže od 1200px: samo ikone (title i dalje kaže adresu/broj) */
@media (max-width: 1199.98px) {
.eto-header-contact .ehc-num,
.eto-header-contact .ehc-label { display: none; }
.eto-header-contact { gap: .8rem; margin: 0 .5rem; }
.eto-header-contact a:before { width: 1.2rem; height: 1.2rem; }
}
/* Baloo 2 (variable, 400-800) samo za slajder: obli chunky font kao na
AI banneru. Self-host u public/fonts/, latin + latin-ext (č ć đ š ž). */
@font-face {
font-family: 'Baloo 2';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('/fonts/baloo2-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Baloo 2';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('/fonts/baloo2-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ============ Slajder naslovnice: tekst u stilu AI bannera ============
Struktura teksta slajda (mshop_text short):
.s-badge (plava kosa značka) + .s-title (ogromni bijeli naslov,
span.g = zeleni dio u novom retku) + .s-sub (bijeli podnaslov).
Boje uzete s bannera: plava značka #2f6bff, zelena #3fd873. */
.catalog-home .stage-text {
color: #fff;
top: 18%;
}
.catalog-home .stage-text .stage-short { }
.catalog-home .stage-text .stage-short p { margin: 0; }
.catalog-home .stage-text .s-badge {
display: inline-block;
position: relative;
font-family: "Outfit", sans-serif;
color: #fff;
font-size: clamp(.85rem, 1.2vw, 1.15rem);
font-weight: 700;
line-height: 1;
padding: .5em 1.25em;
margin-bottom: .9em;
transform: rotate(-2.5deg);
}
/* ukošena pozadina kao na banneru: paralelogram (skewX), a tekst ravan —
transform na badgeu stvara stacking context pa ::before ostaje iza teksta */
.catalog-home .stage-text .s-badge::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background: linear-gradient(100deg, #2f6bff, #1f4fd8);
transform: skewX(-14deg);
border-radius: .2em;
box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.catalog-home .stage-text .s-title {
font-family: "Outfit", "Inter", sans-serif;
font-size: clamp(2.6rem, 5.8vw, 5.4rem);
font-weight: 900;
line-height: .95;
letter-spacing: -.015em;
color: #fff;
text-shadow: 0 3px 18px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .3);
margin: 0 0 .2em;
}
.catalog-home .stage-text .s-title .g {
display: block;
color: #3fd873;
}
.catalog-home .stage-text .s-sub {
font-family: "Outfit", "Inter", sans-serif;
font-size: clamp(1.05rem, 1.5vw, 1.4rem);
font-weight: 600;
line-height: 1.35;
letter-spacing: .02em;
color: #fff;
text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
max-width: 24ch;
margin-top: .55em !important;
}
/* stari format () da ne ostane neuredan ako se negdje vrati */
.catalog-home .stage-text .stage-short > p:not([class]) {
font-weight: 800;
text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
margin: 0 0 .25rem;
}
.catalog-home .stage-text .btn { display: none; }
@media (max-width: 575.98px) {
.catalog-home .stage-text { top: 10%; }
.catalog-home .stage-text .s-title { font-size: 1.7rem; }
.catalog-home .stage-text .s-sub { font-size: .85rem; max-width: 20ch; }
.catalog-home .stage-text .btn { margin-top: .6rem; }
}
/* Mobitel: vendorov .stage-image min-height 600px zauzme cijeli ekran —
slajd se stisne na razumnu visinu, slika se reže (object-fit: cover) */
@media (max-width: 767.98px) {
.catalog-home .stage-image {
min-height: 0;
height: 78vw;
max-height: 420px;
}
}
/* ============ Narudžbe na profilu: statusna traka + procjena dostave ============ */
.account-history .history-item {
border: 1px solid #e5e5e5;
border-radius: .5rem;
padding: 1rem 1.25rem;
margin-bottom: 1rem;
background: #fff;
}
.account-history .eto-order-meta {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
font-size: .85rem;
color: #666;
margin-bottom: .9rem;
}
.eto-order-steps {
list-style: none;
display: flex;
padding: 0;
margin: 0 0 .75rem;
max-width: 34rem;
}
.eto-order-steps li {
flex: 1;
position: relative;
text-align: center;
font-size: .78rem;
color: #999;
}
.eto-order-steps li .dot {
display: block;
width: 1.1rem;
height: 1.1rem;
margin: 0 auto .3rem;
border-radius: 50%;
background: #e2e4e8;
border: 2px solid #e2e4e8;
position: relative;
z-index: 1;
}
/* spojnica između koraka */
.eto-order-steps li + li:before {
content: "";
position: absolute;
top: .48rem;
left: -50%;
width: 100%;
height: 2px;
background: #e2e4e8;
}
.eto-order-steps li.done { color: #1a7f37; }
.eto-order-steps li.done .dot {
background: #1a7f37;
border-color: #1a7f37;
}
.eto-order-steps li.done .dot:after {
content: "";
position: absolute;
inset: 0;
background: #fff;
mask: url("data:image/svg+xml,") center / 70% no-repeat;
}
.eto-order-steps li.done + li:before { background: #1a7f37; }
.eto-order-steps li.current { color: #14213d; font-weight: 600; }
.eto-order-steps li.current .dot {
background: #fff;
border-color: #fca311;
box-shadow: 0 0 0 3px rgba(252, 163, 17, .25);
}
.eto-order-eta {
display: inline-block;
font-size: .85rem;
font-weight: 600;
color: #14213d;
background: #fff7ea;
border: 1px solid #fca311;
border-radius: .35rem;
padding: .35rem .7rem;
}
.eto-order-eta.done {
color: #1a7f37;
background: #e9f6ee;
border-color: #1a7f37;
}
.eto-order-canceled {
display: inline-block;
font-size: .85rem;
font-weight: 600;
color: #b02a37;
background: #fdecee;
border: 1px solid #b02a37;
border-radius: .35rem;
padding: .35rem .7rem;
}
/* Prazna košarica — ljudska poruka umjesto prazne tablice */
.eto-basket-empty {
text-align: center;
padding: 4rem 1rem 5rem;
}
.eto-basket-empty .empty-title {
font-size: 1.4rem;
font-weight: 700;
margin-bottom: .35rem;
}
.eto-basket-empty .empty-sub {
color: #555;
margin-bottom: 1.5rem;
}
/* Stage opis kategorije (mshop_text short, .header-text na listi) */
.aimeos .catalog-list .header-text .eto-cat-lead {
font-size: 1.05rem;
color: #555;
margin: -.25rem 0 1.25rem;
max-width: 46rem;
}
/* ============================================================
Checkout — "kao da je Apple slagao": jedna stranica, jedan gumb,
plaćanje kao kartice s odabirom, barkod odmah vidljiv.
============================================================ */
/* Manje klikova = manje gumba: koraci i međugumbi su suvišni jer je
sve jedna forma s jednim submitom na dnu. */
.eto-checkout .basket-standard .button-group .btn-action,
.eto-checkout .basket-standard .button-group .btn-back,
.eto-checkout .basket-standard .basket-save,
.eto-checkout .checkout-standard .steps,
.eto-checkout .checkout-standard-address .button-group,
.eto-checkout .checkout-standard-payment .button-group,
.eto-checkout .checkout-standard-summary .btn-back {
display: none !important;
}
/* Načini plaćanja kao odabirne kartice */
.eto-checkout .checkout-standard-payment .item-service {
background: #fff;
border: 1px solid #e2e2e7;
border-radius: 14px;
padding: 1rem 1.25rem;
margin: 0 0 .75rem;
transition: border-color .18s ease, box-shadow .18s ease;
cursor: pointer;
}
.eto-checkout .checkout-standard-payment .item-service:hover {
border-color: #c9c9d1;
}
.eto-checkout .checkout-standard-payment .item-service:has(input.option:checked) {
border-color: #1a7f37;
box-shadow: 0 0 0 3px rgba(26, 127, 55, .12);
}
.eto-checkout .checkout-standard-payment .item-service input.option {
accent-color: #1a7f37;
width: 1.15rem;
height: 1.15rem;
margin-right: .6rem;
}
.eto-checkout .checkout-standard-payment .item-service label {
cursor: pointer;
font-weight: 600;
}
/* Barkod kutija unutar odabrane kartice plaćanja */
.eto-pay-preview {
display: flex;
gap: 1.25rem;
align-items: center;
flex-wrap: wrap;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #eee;
animation: eto-pp-in .25s ease;
}
@keyframes eto-pp-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
.eto-pay-preview .pp-code img {
max-width: 100%;
height: auto;
background: #fff;
border: 1px solid #eee;
border-radius: 8px;
padding: .5rem;
}
.eto-pay-preview .pp-data { flex: 1 1 16rem; min-width: 0; }
.eto-pay-preview .pp-amount {
font-size: 1.35rem;
font-weight: 700;
margin: 0 0 .25rem;
display: flex;
align-items: center;
gap: .6rem;
flex-wrap: wrap;
}
.eto-pay-preview .pp-discount {
font-size: .72rem;
font-weight: 600;
color: #1a7f37;
background: #e7f4ea;
border-radius: 999px;
padding: .2rem .6rem;
white-space: nowrap;
}
.eto-pay-preview .pp-row { color: #555; font-size: .85rem; margin: 0 0 .5rem; overflow-wrap: anywhere; }
.eto-pay-preview .pp-row .mono { font-family: ui-monospace, monospace; }
.eto-pay-preview .pp-hint { color: #777; font-size: .82rem; margin: 0; max-width: 34rem; }
/* Jedan jedini gumb — velik, miran, siguran */
.eto-checkout .checkout-standard-summary .button-group {
margin-top: 1.25rem;
}
.eto-checkout .checkout-standard-summary .btn-action {
display: block;
width: 100%;
max-width: 26rem;
margin-left: auto;
padding: .95rem 2rem;
font-size: 1.05rem;
font-weight: 600;
border-radius: 12px;
transition: background-color .18s ease, transform .12s ease;
}
.eto-checkout .checkout-standard-summary .btn-action:active {
transform: scale(.985);
}
/* Uvjeti kao rečenica uz gumb (klik na gumb = prihvat) */
.eto-checkout .checkout-standard-summary-option-terms h3 { display: none; }
.eto-terms-note {
color: #777;
font-size: .85rem;
line-height: 1.45;
max-width: 26rem;
margin: .9rem 0 0 auto;
text-align: right;
}
.eto-terms-note a { color: inherit; text-decoration: underline; }
/* Glavni izbornik ostaje PROZIRAN (vendorov dizajn: fixed preko sadržaja,
bijeli tekst, puna boja tek na .scroll). Podloga je isprobana i maknuta
na zahtjev — ako se meni opet izgubi nad bijelom stranicom, rješenje ide
preko boje teksta, ne preko pozadine. */
/* ============================================================
Checkout na JEDAN EKRAN: lijevo košarica, desno adresa → barkod →
plaćanje → gumb. Sve suvišno (naslovi koraka, ponovljeni sažetak)
je skriveno, razmaci su stisnuti.
============================================================ */
.eto-co-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: 1.5rem;
align-items: start;
max-width: 1500px;
margin: 0 auto;
}
@media (max-width: 1100px) {
.eto-co-grid { grid-template-columns: 1fr; }
}
/* desni stupac je jedna mirna kartica */
.eto-co-right {
background: #fff;
border: 1px solid #e8e8ee;
border-radius: 16px;
padding: 1.1rem 1.25rem 1.25rem;
box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 28px -20px rgba(16, 24, 40, .25);
}
/* naslovi Aimeos koraka ("address", "Plaćanje", "Details"...) — višak */
.eto-checkout .checkout-standard-address > h1,
.eto-checkout .checkout-standard-payment > h1,
.eto-checkout .checkout-standard-summary > h1,
.eto-checkout .checkout-standard-summary .common-summary-address,
.eto-checkout .checkout-standard-summary .common-summary-service,
.eto-checkout .checkout-standard-summary .common-summary-additional,
.eto-checkout .basket-standard .common-summary-detail > .header {
display: none !important;
}
.eto-checkout .checkout-standard-address fieldset > legend { display: none; }
.eto-checkout .container-xxl { padding-left: 0; padding-right: 0; max-width: none; }
.eto-checkout .section { margin: 0; padding: 0; }
.eto-checkout .checkout-standard > .container-xxl > * + * { margin-top: .9rem; }
/* --- adresa: sitan redak + mali gumb (override address-payment-body) --- */
.eto-addr { margin-bottom: .75rem; }
.eto-addr-line {
display: flex;
align-items: baseline;
gap: .5rem;
padding: .1rem 0 .35rem;
}
.eto-addr-line .al-text {
flex: 1;
min-width: 0;
margin: 0;
font-size: .82rem;
line-height: 1.35;
color: #333;
text-transform: none;
overflow-wrap: anywhere;
}
.eto-addr-line .al-label { color: #6a6a76; }
.eto-addr-line .al-clear {
flex: 0 0 auto;
background: none;
border: 0;
padding: 0;
font-size: .78rem;
color: #9a9aa6;
text-decoration: underline;
cursor: pointer;
}
.eto-addr-line .al-clear:hover { color: #b02a37; }
.eto-addr-line .al-change {
flex: 0 0 auto;
background: none;
border: 0;
padding: 0;
font-size: .78rem;
color: #1a7f37;
text-decoration: underline;
cursor: pointer;
}
.eto-addr-line .al-change:hover { border-color: #1a7f37; color: #1a7f37; }
/* R1: tvrtka i OIB se ne vide dok se sklopka ne upali; ako je adresa
poznata (forma sklopljena), upaljen R1 otvara SAMO ta dva polja. */
.eto-addr:not(.is-r1) .form-item.company,
.eto-addr:not(.is-r1) .form-item.vatid { display: none !important; }
.eto-addr.is-r1:not(.is-open) .eto-addr-form { display: grid !important; }
.eto-addr.is-r1:not(.is-open) .eto-addr-form .form-item:not(.company):not(.vatid) {
display: none !important;
}
.eto-addr .eto-r1 { margin-top: .5rem; }
/* --- sklopke (druga adresa, R1) --- */
.eto-switch {
display: flex;
align-items: center;
gap: .5rem;
font-size: .82rem;
color: #444;
cursor: pointer;
margin: .45rem 0 0;
}
.eto-switch input {
flex: 0 0 auto;
width: 1rem;
height: 1rem;
margin: 0;
accent-color: #1a7f37;
}
.eto-switch em { color: #9a9aa6; font-style: italic; }
/* naslov iznad podataka za dostavu + suvišna napomena o zvjezdicama */
.eto-checkout .checkout-standard-address > .note,
.eto-checkout .checkout-standard-summary > .note { display: none; }
.eto-addr-line .al-empty { color: #9a9aa6; font-style: italic; }
/* --- adresna forma svedena na minimum (eBay-style) ---
Labele su vizualno skrivene (ostaju čitačima ekrana) — placeholder nosi
značenje; polja su u dva stupca pa cijela dostava stane u 4 retka. */
.eto-addr-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .35rem .4rem;
margin-top: .4rem;
}
.eto-addr-form .form-item:not(.hidden) {
display: block !important;
margin: 0 !important;
padding: 0;
}
/* polja koja config drži skrivenima (salutation, država, jezik, fax...)
moraju ostati skrivena — grid ih inače sve otključa */
.eto-addr-form .form-item.hidden { display: none !important; }
/* labela: nevidljiva okom, i dalje pročitana čitačem ekrana */
.eto-addr-form .form-item > label,
.eto-addr-form .form-item > .col-md-5 {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.eto-addr-form .form-item > .col-md-7 {
display: block;
width: auto;
max-width: none;
flex: none;
padding: 0;
}
.eto-addr-form .form-control {
padding: .4rem .55rem;
font-size: .85rem;
border-radius: 8px;
background: #fbfbfc;
border: 1px solid #e4e4ec;
}
.eto-addr-form .form-control:focus {
background: #fff;
border-color: #1a7f37;
box-shadow: 0 0 0 3px rgba(26, 127, 55, .1);
}
.eto-addr-form .form-item.address1 { grid-column: 1 / -1; }
/* --- barkod kompaktnije u stupcu --- */
.eto-co-right .eto-pay-preview {
margin: 0 0 .9rem;
padding: .9rem;
border: 1px solid #e8e8ee;
border-top: 1px solid #e8e8ee;
border-radius: 12px;
background: #fcfcfd;
gap: 1rem;
}
.eto-co-right .eto-pay-preview .pp-code img { width: 190px; padding: .35rem; }
.eto-co-right .eto-pay-preview .pp-amount { font-size: 1.15rem; color: #111; }
.eto-co-right .eto-pay-preview .pp-row { color: #444; }
.eto-co-right .eto-pay-preview { background: #fff; }
.eto-co-right .eto-pay-preview .pp-hint { font-size: .76rem; }
/* --- načini plaćanja: iOS-style grupirana lista, dva sitna retka ---
Struktura je vendorova: .item-service.row > .col-sm-6 > label.description
> input.option + h2 (tema h2 crta VELIKIM SLOVIMA). Zato se gasi h2
tipografija, prazni stupac i ikone. */
.eto-checkout .checkout-standard-payment .note {
font-size: .78rem;
color: #8a8a96;
margin: 0 0 .4rem;
}
.eto-checkout .checkout-standard-payment .item-service {
display: block;
margin: 0;
padding: 0;
background: #fff;
border: 1px solid #e8e8ee;
border-radius: 0;
box-shadow: none;
}
.eto-checkout .checkout-standard-payment .item-service + .item-service { border-top: 0; }
.eto-checkout .checkout-standard-payment .item-service:first-of-type { border-radius: 12px 12px 0 0; }
.eto-checkout .checkout-standard-payment .item-service:last-of-type { border-radius: 0 0 12px 12px; }
/* prazan desni stupac i ikone samo troše prostor */
.eto-checkout .checkout-standard-payment .item-service > .col-sm-6:last-child,
.eto-checkout .checkout-standard-payment .description .icons,
.eto-checkout .checkout-standard-payment .description .text,
.eto-checkout .checkout-standard-payment .item-service .media-list,
.eto-checkout .checkout-standard-payment .item-service .attr-list { display: none !important; }
.eto-checkout .checkout-standard-payment .item-service > .col-sm-6:first-child {
flex: 0 0 100%;
max-width: 100%;
width: 100%;
padding: 0;
}
.eto-checkout .checkout-standard-payment .description {
display: flex !important;
align-items: center;
gap: .6rem;
margin: 0;
padding: .55rem .75rem;
cursor: pointer;
}
.eto-checkout .checkout-standard-payment .description h2 {
font-size: .86rem !important;
font-weight: 500 !important;
line-height: 1.3;
margin: 0 !important;
padding: 0;
text-transform: none !important;
letter-spacing: 0 !important;
color: #222;
}
.eto-checkout .checkout-standard-payment .description input.option {
flex: 0 0 auto;
width: 1rem;
height: 1rem;
margin: 0;
accent-color: #1a7f37;
}
.eto-checkout .checkout-standard-payment .item-service:has(input.option:checked) {
background: #f6fbf7;
border-color: #cfe6d6;
}
.eto-checkout .checkout-standard-payment .item-service:has(input.option:checked) .description h2 {
font-weight: 600 !important;
color: #14682c;
}
/* --- zbroj + gumb --- */
.eto-checkout .checkout-standard-summary .common-summary-detail .basket { font-size: .9rem; }
.eto-checkout .checkout-standard-summary .btn-action { max-width: none; }
.eto-checkout .eto-terms-note { text-align: left; margin: .7rem 0 0; max-width: none; font-size: .78rem; }
/* --- lijevi stupac: ista kartica i tipografija kao desni --- */
.eto-co-left {
background: #fff;
border: 1px solid #e8e8ee;
border-radius: 16px;
padding: 1.1rem 1.25rem 1.25rem;
box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 28px -20px rgba(16, 24, 40, .25);
}
.eto-co-left .basket-standard,
.eto-co-left .basket-standard .container-xxl,
.eto-co-left .common-summary-detail { margin: 0; padding: 0; }
/* jedan naslov, sitan — vendor ga ispiše dvaput */
.eto-co-left .basket-standard > .container-xxl > form > .row.header { margin: 0 0 .5rem; }
.eto-co-left .basket-standard .row.header h2 {
font-size: .68rem !important;
letter-spacing: .05em !important;
color: #9a9aa6;
margin: 0 !important;
padding: 0 !important;
}
.eto-co-left .common-summary-detail > .header,
.eto-co-left .basket-standard .supplier { display: none !important; }
/* zaglavlje tablice */
.eto-co-left .headline {
font-size: .7rem;
color: #9a9aa6;
text-transform: none;
border-bottom: 1px solid #eeeef3;
padding-bottom: .3rem;
background: none;
}
.eto-co-left .headline .action .minibutton { display: none; }
/* redak artikla */
.eto-co-left .product-item {
padding: .6rem 0;
border-bottom: 1px solid #f2f2f6;
font-size: .84rem;
}
.eto-co-left .product-item .product-name {
font-size: .88rem;
font-weight: 600;
line-height: 1.3;
margin: 0 0 .15rem;
}
.eto-co-left .product-item .code,
.eto-co-left .product-item .timeframe {
font-size: .74rem;
color: #8a8a96;
margin: 0;
}
/* vendor daje img.detail max-width 6rem i margin 5% — pretjecati ga mora
jednako specifičan selektor, inače slika prelazi preko naziva */
.eto-co-left .common-summary-detail .image img.detail {
max-width: 56px;
max-height: 56px;
width: auto;
height: auto;
margin-inline-end: 0;
border-radius: 8px;
background: #fff;
}
/* slika i tekst u redu, bez preklapanja (vendor koristi Bootstrap
stupce koji se u uskoj kartici preklope) */
.eto-co-left .product-item > div > .row.g-0 {
display: flex;
align-items: center;
gap: .6rem;
flex-wrap: nowrap;
}
.eto-co-left .product-item .status { display: none; }
.eto-co-left .product-item .image {
flex: 0 0 56px;
width: 56px;
max-width: 56px;
padding: 0;
}
.eto-co-left .product-item .details {
flex: 1 1 auto;
min-width: 0;
width: auto;
max-width: none;
padding: 0;
}
/* količina servisa plaćanja ("1" uz redak popusta) je besmislena */
.eto-co-left .payment .quantity { visibility: hidden; }
.eto-co-left .product-item .price,
.eto-co-left .product-item .unitprice { white-space: nowrap; font-variant-numeric: tabular-nums; }
.eto-co-left .product-item .quantity input {
padding: .25rem .4rem;
font-size: .84rem;
border-radius: 8px;
max-width: 4rem;
}
/* zbrojevi */
.eto-co-left .subtotal,
.eto-co-left .delivery,
.eto-co-left .payment,
.eto-co-left .tax,
.eto-co-left .rebate { font-size: .82rem; color: #555; }
.eto-co-left .total {
font-size: .95rem;
font-weight: 700;
border-top: 1px solid #e8e8ee;
background: none;
}
.eto-co-left .total .col-8,
.eto-co-left .total .col-4 { padding-top: .45rem; }
/* Neuspjelo dodavanje u košaricu (npr. nema zalihe) — poruka na gumbu
umjesto modalnog prozora koji je kupac morao zatvarati. */
.btn-failed {
background: #b02a37 !important;
border-color: #b02a37 !important;
color: #fff !important;
font-size: .82rem;
line-height: 1.2;
white-space: normal;
}
/* ============================================================
Blagajna na mobitelu: vendor slaže sažetak u Bootstrap stupce
(col-8 + col-4 s pod-stupcima) koji se na uskom ekranu preklope —
naziv je išao preko iznosa. Ovdje se svaki redak svodi na
"tekst lijevo, iznos desno".
============================================================ */
@media (max-width: 700px) {
.eto-co-left,
.eto-co-right { padding: .9rem 1rem 1rem; }
/* zaglavlje tablice na mobitelu nema smisla (mora nadjačati pravilo
za .row.g-0 ispod, koje je specifičnije) */
.eto-co-left .common-summary-detail .headline { display: none !important; }
.eto-co-left .common-summary-detail .row.g-0 {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: .4rem;
}
.eto-co-left .common-summary-detail [class*="col-"] {
width: auto;
max-width: 100%;
min-width: 0;
flex: 0 1 auto;
margin-left: 0 !important;
padding: 0;
}
.eto-co-left .common-summary-detail .details {
flex: 1 1 auto;
min-width: 0;
overflow-wrap: anywhere;
}
.eto-co-left .common-summary-detail .price {
flex: 0 0 auto;
margin-left: auto;
text-align: right;
white-space: nowrap;
}
/* jedinična cijena je kod jednog komada isti broj kao iznos */
.eto-co-left .common-summary-detail .unitprice,
.eto-co-left .payment .image,
.eto-co-left .payment .status { display: none; }
.eto-co-left .product-item .quantity input { max-width: 3.2rem; }
.eto-co-left .product-item .product-name { font-size: .84rem; }
/* artikl u dva reda: gore slika i naziv, dolje količina, cijena, koš */
.eto-co-left .product-item {
display: flex;
flex-wrap: wrap;
}
/* slika mora zadržati svoju širinu — opće pravilo za col-* iznad bi je
inače pustilo da se skuplja i tekst joj naleti preko */
.eto-co-left .common-summary-detail .product-item .image {
flex: 0 0 48px;
width: 48px;
}
.eto-co-left .common-summary-detail .product-item .details {
flex: 1 1 auto;
min-width: 0;
}
.eto-co-left .product-item > .col-5,
.eto-co-left .product-item > .col-7 { flex: 1 1 100%; }
.eto-co-left .product-item > .col-7 { margin-top: .3rem; }
.eto-co-left .product-item .order {
justify-content: flex-end;
gap: .75rem;
}
.eto-co-left .product-item .quantity { flex: 0 0 auto; }
/* vendor ispod 575px skriva cijenu artikla (summary.css) — kupac na
mobitelu tako ne vidi koliko što košta; vraćamo je */
.eto-co-left .common-summary-detail .product-item .price {
display: block !important;
flex: 0 0 auto;
margin-left: 0;
font-weight: 600;
}
/* zbrojevi i redak plaćanja smiju prelomiti, iznos ostaje desno */
.eto-co-left .common-summary-detail .payment .row.g-0,
.eto-co-left .common-summary-detail .subtotal .row.g-0,
.eto-co-left .common-summary-detail .delivery .row.g-0,
.eto-co-left .common-summary-detail .rebate .row.g-0,
.eto-co-left .common-summary-detail .tax .row.g-0,
.eto-co-left .common-summary-detail .total .row.g-0 { flex-wrap: wrap; }
.eto-co-left .common-summary-detail .payment .details { flex: 1 1 60%; }
/* košarica i blagajna jedna ispod druge, bez dvostrukog razmaka */
.eto-co-grid { gap: 1rem; }
/* ništa ne smije stršati izvan ekrana */
.eto-checkout { overflow-x: hidden; }
.eto-co-grid,
.eto-co-left,
.eto-co-right,
.eto-co-left .basket-standard,
.eto-co-left .common-summary-detail { max-width: 100%; min-width: 0; }
}
/* ============================================================
Profil i potvrda narudžbe — isti izgled kao blagajna:
zaobljene bijele kartice, meka sjena, sitnija tipografija.
============================================================ */
.account-nav,
.account-panel,
.account-card,
.checkout-confirm .checkout-confirm-basic,
.checkout-confirm .checkout-confirm-detail,
.checkout-confirm .pay-box {
background: #fff;
border: 1px solid #e8e8ee;
border-radius: 16px;
box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 28px -20px rgba(16, 24, 40, .25);
}
.account-nav { overflow: hidden; }
.account-nav a { border-bottom: 1px solid #f2f2f6; font-size: .88rem; }
.account-nav a.active { border-left-color: #1a7f37; background: #f6fbf7; }
.account-panel { padding: 1.1rem 1.25rem 1.25rem; }
.account-panel > h2 {
font-size: .95rem;
letter-spacing: 0;
text-transform: none;
margin-bottom: .6rem;
}
.account-card { padding: .9rem 1rem; }
.account-card .card-label {
font-size: .68rem;
letter-spacing: .05em;
color: #9a9aa6;
}
.account-card .card-value { font-size: 1.45rem; }
.account-empty, .account-note { font-size: .85rem; color: #6a6a76; }
/* potvrda narudžbe */
.checkout-confirm h1 {
font-size: 1.35rem !important;
text-transform: none !important;
letter-spacing: 0 !important;
padding-top: 1.5rem !important;
}
.checkout-confirm .checkout-confirm-intro .note {
font-size: .95rem;
color: #444;
max-width: 46rem;
}
.checkout-confirm .checkout-confirm-basic,
.checkout-confirm .checkout-confirm-detail,
.checkout-confirm .pay-box {
padding: 1.1rem 1.25rem 1.25rem;
margin-bottom: 1rem;
}
.checkout-confirm h2,
.checkout-confirm h3 {
font-size: .95rem !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
.checkout-confirm .attr-list { font-size: .88rem; }
.checkout-confirm .common-summary-detail .headline { font-size: .7rem; color: #9a9aa6; }
.checkout-confirm .common-summary-detail .product-item { font-size: .84rem; }
/* Potvrda narudžbe na mobitelu: IBAN je stršao izvan kartice, a naziv i
vrijednost („Broj narudžbe42") lijepili su se jedno uz drugo. */
@media (max-width: 700px) {
.checkout-confirm .checkout-confirm-basic,
.checkout-confirm .checkout-confirm-detail,
.checkout-confirm .pay-box { padding: .9rem 1rem 1rem; }
.pay-box .pay-data dl {
display: block;
margin: 0;
}
.pay-box .pay-data dt {
font-size: .68rem;
letter-spacing: .04em;
color: #8a8a96;
margin: .5rem 0 0;
}
.pay-box .pay-data dd {
margin: 0;
font-size: .9rem;
overflow-wrap: anywhere;
word-break: break-all;
}
.pay-box .pay-data dd.mono { font-size: .82rem; letter-spacing: .01em; }
.pay-box .pay-code img { max-width: 100%; height: auto; }
/* "Broj narudžbe" / "Status plaćanja" — naziv lijevo, vrijednost desno */
.checkout-confirm .attr-list .form-item {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: .75rem;
padding: .25rem 0;
}
.checkout-confirm .attr-list .name { color: #8a8a96; font-size: .82rem; }
.checkout-confirm .attr-list .value { text-align: right; overflow-wrap: anywhere; }
/* adrese i servisi jedan ispod drugog, bez uskih stupaca */
.checkout-confirm .common-summary-address .item,
.checkout-confirm .common-summary-service .item,
.checkout-confirm .common-summary-additional .item {
flex: 1 1 100%;
max-width: 100%;
margin-bottom: .5rem;
}
.checkout-confirm .common-summary-detail [class*="col-"] {
min-width: 0;
overflow-wrap: anywhere;
}
}
/* Potvrda narudžbe, donji dio na mobitelu: isti raspad sažetka kao u
košarici (Bootstrap stupci), prazne sekcije i slijepljeni zbrojevi. */
@media (max-width: 700px) {
.checkout-confirm .common-summary-detail .row.g-0 {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .4rem;
}
.checkout-confirm .common-summary-detail [class*="col-"] {
width: auto;
max-width: 100%;
min-width: 0;
flex: 0 1 auto;
margin-left: 0 !important;
padding: 0;
}
.checkout-confirm .common-summary-detail .details {
flex: 1 1 60%;
min-width: 0;
}
.checkout-confirm .common-summary-detail .price {
flex: 0 0 auto;
margin-left: auto;
text-align: right;
white-space: nowrap;
}
.checkout-confirm .common-summary-detail .headline,
.checkout-confirm .common-summary-detail .unitprice,
.checkout-confirm .common-summary-detail .supplier { display: none !important; }
/* cijena artikla — vendor je ispod 575px skriva */
.checkout-confirm .common-summary-detail .product-item .price { display: block !important; }
/* "1 članak Ukupno 528,85 €" bez razmaka */
.checkout-confirm .common-summary-detail .total .row.g-0 { gap: .6rem; }
.checkout-confirm .common-summary-detail .total { padding: .4rem 0; }
/* prazne sekcije uklanja eto.js (:empty ne hvata razmake) */
/* artikl: količina i cijena razmaknute, ništa ne strši */
.checkout-confirm .common-summary-detail .product-item .order,
.checkout-confirm .common-summary-detail .payment .row.g-0 {
justify-content: space-between;
gap: .75rem;
}
/* Bootstrap .row ima negativne bočne margine — unutar kartice zbog njih
sadržaj viri izvan desnog ruba */
.checkout-confirm .common-summary-detail,
.checkout-confirm .common-summary-detail .row,
.checkout-confirm .common-summary-detail .basket {
margin-left: 0;
margin-right: 0;
max-width: 100%;
}
/* sadržaj je prelazio rub kartice (širina 100% + očev padding) */
.checkout-confirm .checkout-confirm-detail { overflow: hidden; }
.checkout-confirm .common-summary-detail,
.checkout-confirm .common-summary-detail * {
box-sizing: border-box;
}
/* .common-summary-detail JE Bootstrap .row (bez .g-0) pa ima negativne
bočne margine i time izlazi izvan kartice */
.checkout-confirm .common-summary-detail {
width: 100%;
overflow-x: hidden;
margin-left: 0 !important;
margin-right: 0 !important;
--bs-gutter-x: 0;
}
.checkout-confirm .common-summary-address,
.checkout-confirm .common-summary-service,
.checkout-confirm .common-summary-additional {
margin-left: 0 !important;
margin-right: 0 !important;
--bs-gutter-x: 0;
}
.checkout-confirm .common-summary-detail .details,
.checkout-confirm .common-summary-detail .product-name {
white-space: normal !important;
overflow-wrap: anywhere;
word-break: break-word;
}
/* isti raspored kao u košarici: opis u jednom redu, brojke u drugom */
.checkout-confirm .common-summary-detail .product-item,
.checkout-confirm .common-summary-detail .payment {
display: flex;
flex-wrap: wrap;
padding: .5rem 0;
}
.checkout-confirm .common-summary-detail .product-item > [class*="col-"],
.checkout-confirm .common-summary-detail .payment > [class*="col-"] {
flex: 1 1 100%;
}
.checkout-confirm .common-summary-detail .product-item .order,
.checkout-confirm .common-summary-detail .payment .row.g-0 {
justify-content: flex-end;
gap: .9rem;
margin-top: .2rem;
}
/* količina bez oznake izgleda kao dio cijene — ali ne i u retku zbroja
("1 članak") gdje vendor koristi istu klasu */
.checkout-confirm .common-summary-detail .product-item .quantity::before,
.checkout-confirm .common-summary-detail .payment .quantity::before {
content: "×";
color: #9a9aa6;
margin-right: .15rem;
}
.checkout-confirm .common-summary-detail .total .quantity::before { content: none; }
/* dug naziv servisa plaćanja mora prelomiti, ne stršati */
.checkout-confirm .common-summary-detail .payment .details { flex: 1 1 100%; }
}
/* Jezik se ispisivao kao redak adrese ("Hrvatska / Hrvatski") — zemlja je
dovoljna, jezik kupcu ne znači ništa. */
.checkout-confirm .common-summary-address .item .language,
.checkout-confirm .address .language { display: none; }
/* ============================================================
Mobilna provjera trgovine (2026-08-24)
============================================================ */
/* Naslovnica: tekst slajda je na malom ekranu ulazio POD fiksirani
header (logo i ikone su se čitali preko naslova). Na mobitelu ide
pri dno slajda, gdje ništa ne smeta. */
@media (max-width: 575.98px) {
.catalog-home .stage-text {
top: auto;
bottom: 6%;
transform: none;
}
.catalog-home .stage-text .s-badge { margin-bottom: .5em; }
.catalog-home .stage-text .s-title { font-size: 1.5rem; line-height: 1.15; }
.catalog-home .stage-text .s-sub { font-size: .8rem; }
}
/* Kartice artikala: slika je uzimala gotovo cijeli ekran, pa se po
zaslonu vidio jedan jedini proizvod. */
@media (max-width: 767.98px) {
.aimeos .catalog-list-items .product .media-list,
.aimeos .catalog-list-items .product .media-item {
max-height: 190px;
}
.aimeos .catalog-list-items .product .media-list img,
.aimeos .catalog-list-items .product .media-item img {
max-height: 190px;
width: auto;
margin: 0 auto;
object-fit: contain;
}
.aimeos .catalog-list-items .product { padding-bottom: .75rem; }
.aimeos .catalog-list-items .product .text-list { padding-top: .35rem; }
/* Vendor drži visinu slike omjerom 3/4 preko padding-topa, pa je na
telefonu ispod slike ostajalo pola ekrana praznine. */
.aimeos .list .product div.list-column:first-of-type .media-list,
.aimeos .product-list div.list-column:first-of-type .media-list {
padding-top: 200px !important;
}
/* Značka "-10%" je position:absolute right:0 — bez pozicioniranog
pretka bježala je izvan kartice. */
.aimeos .catalog-list-items .product { position: relative; }
.aimeos .catalog-list-items .product .badges { max-width: 100%; }
.aimeos .catalog-list-items .product .price-item .rebatepercent {
right: .5rem;
top: .5rem;
border-radius: 4px;
font-size: .78rem;
}
}
/* Kategorija na mobitelu: filter (dostupnost + cijelo stablo kategorija +
cijena, dobavljači…) zauzimao je cijeli prvi ekran, pa je kupac morao
skrolati do prvog artikla. Sad je sklopljen iza gumba.
Gumb postoji samo na mobitelu — deklaracija mora biti PRIJE media
queryja, inače ga nadjača i tamo. */
.eto-filter-toggle { display: none; }
@media (max-width: 767.98px) {
.eto-filter-box { display: none; }
.eto-filter-box.eto-filter-open { display: block; margin-bottom: 1rem; }
.eto-filter-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin: .5rem 0 .75rem;
padding: .6rem .9rem;
background: #fff;
border: 1px solid #e8e8ee;
border-radius: 12px;
font-size: .9rem;
font-weight: 600;
color: #333;
cursor: pointer;
}
.eto-filter-toggle::after { content: "▾"; color: #9a9aa6; }
.eto-filter-toggle.is-open::after { content: "▴"; }
}
/* Header na mobitelu: ikona košarice padala je u drugi red i fiksirani
header ju je odsijecao. Poslovnica se skriva (dostupna je u izborniku),
pa u red stanu telefon, korisnik i košarica. */
@media (max-width: 575.98px) {
.navbar-top { flex-wrap: nowrap; }
.navbar-top .eto-header-contact .ehc-store { display: none; }
.navbar-top .eto-header-contact { gap: .5rem; }
.navbar-top .basket-mini { margin-left: .25rem; }
.navbar-top .basket-mini-main { padding: 0; }
}
/* Detalj artikla na mobitelu: galerija drži omjer 3/4 pa je ispod slike
ostajalo pola ekrana praznine. */
@media (max-width: 767.98px) {
.catalog-detail-image .swiffy-slider,
.catalog-detail-image .slider-item-ratio { --swiffy-slider-item-ratio: 1; }
.catalog-detail-image .image-single,
.catalog-detail-image .image-single .media-item {
max-height: 320px;
padding-top: 0 !important;
}
.catalog-detail-image .image-single .media-item img {
max-height: 300px;
object-fit: contain;
}
}
/* Blagajna: uz HUB3 barkod stoji i SEPA QR (strane banke) te uputa o instant
plaćanju — dodano 25.08.2026, isto kao u mailu potvrde narudžbe. */
.eto-pay-preview .pp-code-label {
display: block;
margin-top: .25rem;
font-size: .72rem;
color: #6b7280;
text-align: center;
}
.eto-pay-preview .pp-code-sepa { margin-left: 1rem; }
.eto-pay-preview .pp-instant {
margin: .5rem 0 .35rem;
padding: .45rem .6rem;
background: #fff6da;
border: 1px solid #e6c757;
color: #5c4600;
font-size: .82rem;
line-height: 1.4;
}
@media (max-width: 600px) {
.eto-pay-preview .pp-code-sepa { margin-left: 0; }
}
/* ------------------------------------------------------------------
Naslovnica: H1 i uvodni redak (SEO + „što je ovo uopće", 25.08.2026)
Namjerno tiho: stranica se i dalje otvara slajderom, ovo je jedan
redak konteksta iznad njega.
------------------------------------------------------------------ */
.eto-home-intro {
max-width: 1320px;
margin: 0 auto;
padding: 1.75rem 1rem .5rem;
text-align: center;
}
.eto-home-slogan {
font-size: .78rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
margin: 0 0 .45rem;
/* ista zelena kao badge „Šalje se danas" — slogan i oznaka govore isto */
color: #1a7f37;
}
.eto-home-intro h1 {
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -.01em;
margin: 0 0 .35rem;
color: var(--eto-text, #1a1a1a);
}
.eto-home-intro p {
font-size: .92rem;
line-height: 1.5;
margin: 0 auto;
color: var(--eto-muted, #5b5b5b);
max-width: 62ch;
}
@media (max-width: 767px) {
.eto-home-intro { padding: 1.15rem .9rem .25rem; }
.eto-home-intro h1 { font-size: 1.05rem; }
.eto-home-intro p { font-size: .85rem; }
}
/* ------------------------------------------------------------------
Artikl bez zalihe: umjesto gumba koji ionako ne radi (25.08.2026)
------------------------------------------------------------------ */
.addbasket.eto-unavailable {
background: var(--eto-soft, #f4f5f7);
border: 1px solid var(--eto-line, #e2e4e8);
border-radius: 10px;
padding: .85rem 1rem;
}
.eto-unavailable-title {
font-weight: 700;
margin: 0 0 .2rem;
color: var(--eto-text, #1a1a1a);
}
.eto-unavailable-sub {
margin: 0;
font-size: .88rem;
line-height: 1.45;
color: var(--eto-muted, #5b5b5b);
}
/* --- Kod preporuke u košarici (26.08.2026) -------------------------------
Namjerno tiho: kupac koji nema kod ne smije imati osjećaj da propušta
popust, pa polje ne viče bojom nego stoji kao obična opcija. */
.eto-preporuka-kod {
margin: 1.25rem 0 .5rem;
padding: 1rem 1.1rem;
background: #f7f8f9;
border: 1px solid #e3e6ea;
max-width: 30rem;
}
.eto-preporuka-kod label {
font-weight: 700;
font-size: .95rem;
display: block;
}
.eto-preporuka-kod .pod {
margin: .2rem 0 .7rem;
font-size: .85rem;
color: #5b6472;
}
.eto-preporuka-kod .input-group { display: flex; }
.eto-preporuka-kod input {
flex: 1;
height: 42px;
border: 1px solid #d7dbe0;
padding: 0 .75rem;
font: inherit;
font-size: .95rem;
text-transform: uppercase;
}
.eto-preporuka-kod button {
height: 42px;
padding: 0 1.1rem;
border: 0;
background: #14213d;
color: #fff;
font-weight: 600;
cursor: pointer;
}
.eto-kod-aktivan {
margin-top: .65rem;
font-size: .88rem;
}
.eto-kod-aktivan .kod {
background: #1a7f37;
color: #fff;
padding: .15rem .5rem;
font-weight: 700;
letter-spacing: .03em;
}
.eto-kod-aktivan .makni {
color: #a00000;
margin-left: .4rem;
font-weight: 700;
text-decoration: none;
}
/* Preporuke u „Mojem računu" i na stranici poveznice (26.08.2026) */
.eto-aff-kod {
font-size: 1.6rem;
font-weight: 800;
letter-spacing: .06em;
background: #f0f7f2;
border: 1px dashed #1a7f37;
color: #14213d;
padding: .6rem 1rem;
display: inline-block;
margin: .3rem 0 .8rem;
}
.eto-aff-stanje {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 14px;
margin: 1rem 0;
}
.eto-aff-stanje div { border: 1px solid #e3e6ea; padding: .8rem .9rem; }
.eto-aff-stanje b { display: block; font-size: 1.2rem; font-weight: 800; }
.eto-aff-stanje span { font-size: .8rem; color: #5b6472; }
.account-note.sitno { font-size: .82rem; color: #6b7280; }
.eto-preporuka-stranica { padding: 2.5rem 1rem 4rem; }
.eto-preporuka-stranica .okvir {
max-width: 34rem;
margin: 0 auto;
text-align: center;
border: 1px solid #e3e6ea;
padding: 2rem 1.5rem;
}
.eto-preporuka-stranica .nadnaslov {
font-size: .78rem; font-weight: 700; letter-spacing: .09em;
text-transform: uppercase; color: #1a7f37; margin: 0 0 .4rem;
}
.eto-preporuka-stranica h1 { font-size: 1.5rem; margin: 0 0 .7rem; line-height: 1.2; }
.eto-preporuka-stranica .uvod { color: #5b6472; margin: 0 auto 1.2rem; max-width: 28rem; }
.eto-preporuka-stranica .kod {
font-size: 2rem; font-weight: 800; letter-spacing: .08em;
background: #f0f7f2; border: 1px dashed #1a7f37; color: #14213d;
padding: .7rem 1rem; display: inline-block; margin: 0 0 1.2rem;
}
.eto-preporuka-stranica .sitno { font-size: .82rem; color: #6b7280; margin: 1.1rem auto 0; max-width: 30rem; }
.eto-preporuka-stranica .natrag { display: inline-block; margin-top: 1rem; color: #1a7f37; font-weight: 600; }
/* ---------------------------------------------------------------------------
Mobilni izbornik kategorija (27.08.2026)
Nakon preslagivanja stabla nazivi grana su dulji („Monitori, projektori i
periferija", „Pametni dom, elektronika i hobi"), a vendor drži `cat-link` u
`white-space: nowrap` — pa je tekst bježao izvan panela od 20rem i sjekao se
ispod strelice za podizbornik. Provjereno headless snimkom na 390 px.
Panel se zato na uskim ekranima širi do 86 % zaslona, a naziv se smije
prelomiti u dva retka. Širina, početni položaj i pomak MORAJU koristiti istu
vrijednost, inače panel ostane napola izvan ekrana.
--------------------------------------------------------------------------- */
@media (max-width: 991px) {
.catalog-filter-tree .zeynep,
.catalog-filter-tree .zeynep .submenu {
width: min(20rem, 86vw);
left: calc(-1 * min(20rem, 86vw));
}
.catalog-filter-tree .zeynep.opened,
.catalog-filter-tree .zeynep.opened .submenu.opened {
transform: translateX(min(20rem, 86vw));
}
.catalog-filter-tree .zeynep a.cat-link {
white-space: normal;
}
.catalog-filter-tree .zeynep .cat-name {
display: block;
overflow-wrap: anywhere;
line-height: 1.3;
}
/* strelica podizbornika ne smije pasti ispod teksta kad se naziv prelomi */
.catalog-filter-tree .zeynep .item-links {
align-items: center;
}
}
/* Podignute grane trgovine u prvom panelu mobilnog izbornika (28.08.2026).
Na desktopu se ne prikazuju — ondje „Trgovina" otvara mega izbornik i red
od 20 stavki ne bi stao u traku. */
.eto-mob-grane { display: none; }
@media (max-width: 991px) {
.eto-mob-grane { display: block; }
/* „Trgovina" bi sad bila duplić: njezine su grane iznad.
Selektor namjerno bez `>` — Aimeos zna omotati stavke u dodatni
`list-container`, pa izravni potomak nije zajamčen. */
.catalog-filter-tree .zeynep .cat-item.catcode-int-trgovina { display: none; }
/* tanka crta razdvaja robu od promo linkova (Daily Deal, Outlet…) */
.eto-mob-grane + .cat-item { border-top: 1px solid var(--ai-tertiary, #dee2e6); }
}
/* ---------------------------------------------------------------------------
Mega izbornik „Trgovina" na desktopu (28.08.2026)
---------------------------------------------------------------------------
Kategorija `int-trgovina` ima `css-class: megamenu`, pa Aimeos njezin
podizbornik razvuče preko cijele širine. Vendorov raspored to slaže s
`column-count: 4` i `max-width: 15rem` po stavci, ali bootstrapov `row`
unutar stavke vuče negativne margine i stupce u postocima — stupci se
preklapaju, prvi ispada lijevo od ekrana (provjereno headless snimkom na
1400 px). Zato se `row` ovdje poništava, a boja panela se piše doslovno:
`var(--ai-primary)` je u ovoj temi crna, pa je panel preko plavog stagea
izgledao proziran.
Sve grane i sve podgrane vide se odjednom: jedan pokret miša do robe, bez
lančanih izletnika koji se gase čim miš skrene.
Pravilo se drži PANELA (`> .submenu ...`), ne same stavke „Trgovina" —
inače joj se pojede razmak u traci pa zadnja stavka ispadne iz ekrana.
--------------------------------------------------------------------------- */
@media (min-width: 992px) {
.catalog-filter-tree .megamenu.cat-item.hover > .submenu {
background-color: #14213d;
padding: 1.75rem 1.25rem 2rem;
box-shadow: 0 1rem 2rem rgba(0, 0, 0, .28);
justify-content: center;
}
/* `columns` pakira gusto (visina se raspoređuje sama), dok grid poravnava
retke pa nastane praznina veličine najviše grane. Panel zato NEMA
ograničenu visinu: s njom se stupci prelijevaju udesno, a ne prema dolje
(oboje provjereno snimkom 28.08.2026). */
.catalog-filter-tree .megamenu.cat-item.hover > .submenu .level-2 {
columns: 5;
column-gap: 1.75rem;
width: min(88rem, 95vw);
margin: 0 auto;
display: block;
}
@media (max-width: 1400px) {
.catalog-filter-tree .megamenu.cat-item.hover > .submenu .level-2 { columns: 4; }
}
.catalog-filter-tree .megamenu.cat-item.hover > .submenu .level-2 > .cat-item {
break-inside: avoid;
max-width: none;
margin-bottom: 1.25rem;
}
.catalog-filter-tree .megamenu.cat-item.hover > .submenu .item-links.row {
margin: 0;
display: block;
}
/* Prazan `` (ikona kategorije) gura PRVI redak
udesno, a prelomljeni ostaje uz rub stupca — pa „Optički patch kabeli i /
vodovi" izgleda razlomljeno. Nema ikone, nema spana. */
/* `:empty` ne hvata span koji sadrži HTML komentar (a predložak ga piše),
pa se skriva bezuvjetno — kategorije u ovom katalogu nemaju ikone. */
.catalog-filter-tree .megamenu.cat-item.hover > .submenu .media-list {
display: none;
}
/* `display: block` i na poveznici i na nazivu — da prelomljeni redak počne
točno ispod prvoga, a ne uz rub stupca. */
.catalog-filter-tree .megamenu.cat-item.hover > .submenu .item-links .cat-link {
display: block;
max-width: 100%;
padding: 0;
width: auto;
}
.catalog-filter-tree .megamenu.cat-item.hover > .submenu .item-links .cat-name {
display: block;
}
/* blok naziv donosi i razmak koji vendor računa za inline tekst — retci su
se razmaknuli na 42 px; ovdje se vraćaju na jedan redak teksta */
.catalog-filter-tree .megamenu.cat-item.hover > .submenu .level-3 > .cat-item,
.catalog-filter-tree .megamenu.cat-item.hover > .submenu .level-4 > .cat-item {
margin: 0;
padding: 0;
}
.catalog-filter-tree .megamenu.cat-item.hover > .submenu .level-3 .item-links,
.catalog-filter-tree .megamenu.cat-item.hover > .submenu .level-4 .item-links {
margin: 0;
padding: 0;
}
/* dug naziv se smije prelomiti; bez ovoga prelazi u susjedni stupac */
.catalog-filter-tree .megamenu.cat-item.hover > .submenu .cat-name {
white-space: normal;
overflow-wrap: anywhere;
}
/* strelica „otvori podizbornik" nema što otvarati — djeca su već ispisana */
.catalog-filter-tree .megamenu.cat-item.hover > .submenu .item-links .next,
.catalog-filter-tree .megamenu.cat-item.hover > .submenu .item-links .col-2 {
display: none;
}
.catalog-filter-tree .megamenu.cat-item.hover > .submenu .level-2 > .cat-item > .item-links .cat-name {
font-size: 1rem;
font-weight: 700;
line-height: 1.2;
display: block;
margin-bottom: .35rem;
}
.catalog-filter-tree .megamenu.cat-item.hover > .submenu .level-3 .cat-name {
font-size: .92rem;
line-height: 1.45;
opacity: .88;
}
/* četvrta razina (npr. Bežična mrežna oprema → Routeri, Antene…) mora se
VIDJETI kao podgrana podgrane; bez uvlake izgleda kao da je sestra
(provjereno snimkom 28.08.2026) */
.catalog-filter-tree .megamenu.cat-item.hover > .submenu .level-4 {
padding-inline-start: .9rem;
margin-block-end: .35rem;
border-inline-start: 1px solid rgba(255, 255, 255, .14);
}
.catalog-filter-tree .megamenu.cat-item.hover > .submenu .level-4 .cat-name {
font-size: .84rem;
line-height: 1.35;
opacity: .68;
}
.catalog-filter-tree .megamenu.cat-item.hover > .submenu .level-3 .cat-name:hover {
opacity: 1;
}
/* zaglavlje panela („natrag / naziv / zatvori") je stvar mobilnog klizača */
.catalog-filter-tree .megamenu.cat-item.hover > .submenu > .header,
.catalog-filter-tree .megamenu.cat-item.hover > .submenu .cat-img {
display: none;
}
}
/* ---------------------------------------------------------------------------
Lijevi stupac kategorijske stranice: dva taba + kompaktni blok (28.08.2026)
---------------------------------------------------------------------------
Prije je stablo NESTAJALO ondje gdje postoje filteri, pa se kupac iz
Monitora nije imao čime vratiti u Periferiju. Sad su oboje tu, u dva mala
taba, a odabir pamti eto.js (localStorage). Tab „Filteri" se ne ispisuje ako
kategorija nema filtere po specifikacijama — prazan tab je mrtav klik.
Vizualni jezik je isti kao na blagajni (bijela kartica, 1px #e8e8ee,
radijus, sitni sivi naslovi), da stranica ne izgleda kao dva različita
sajta — samo je ovdje sve za nijansu manje.
--------------------------------------------------------------------------- */
.eto-side {
background: #fff;
border: 1px solid #e8e8ee;
border-radius: 16px;
box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 28px -20px rgba(16, 24, 40, .25);
overflow: hidden;
margin-bottom: 1rem;
}
.eto-side-tabs {
display: flex;
background: #fafafb;
border-bottom: 1px solid #eeeef3;
}
.est-tab {
flex: 1;
border: 0;
background: transparent;
padding: .62rem .5rem;
font-size: .74rem;
letter-spacing: .06em;
text-transform: uppercase;
color: #9a9aa6;
cursor: pointer;
}
.est-tab:hover { color: #444; }
.est-tab.is-active {
color: #111;
background: #fff;
font-weight: 600;
box-shadow: inset 0 -2px 0 #1a7f37;
}
/* jedan tab (kategorija bez filtera) ne treba izgledati kao izbor */
.eto-side-tabs .est-tab:only-child {
cursor: default;
box-shadow: none;
text-align: start;
padding-inline-start: .95rem;
}
.est-pane { display: none; padding: .7rem .85rem .9rem; }
.est-pane.is-active { display: block; }
.est-pane .cat-tree { font-size: .86rem; }
.est-pane .cat-tree > ul > li > .row-item > a { font-weight: 600; }
/* Aimeosova sekcija filtera unutar taba: bez vlastitog okvira i naslova
(„Filter" piše na samom tabu) */
.est-pane .catalog-filter,
.est-pane .section.catalog-filter-attribute {
margin: 0;
padding: 0;
border: 0;
background: none;
}
.est-pane .catalog-filter-attribute .attr-header { display: none; }
/* Filteri u tabu — tema s blagajne, bez suvišnih klikova (28.08.2026)
---------------------------------------------------------------------------
Vendor svakoj stavci daje `margin-bottom: 1rem` i drži svaku skupinu
SKLOPLJENU, pa je do jedne kvačice trebalo dva klika, a jedanaest marki
pisača zauzimalo je pola ekrana. Ovdje su sve skupine otvorene (klik na
naslov ih i dalje sklapa), redak je jedan red teksta, a kvačica i sitni
sivi naslovi preuzeti su s blagajne.
PAZI: klasu `attr-item` nosi i sam koji vendor skriva
(`display:none`). Zato selektor MORA biti `li.attr-item` — inače se skriveno
polje vrati i uz svaki redak stoji prazan kvadratić viška. */
.est-pane .catalog-filter-attribute .attribute-lists li.attr-item {
display: block;
padding: 0;
margin: 0;
border-radius: 8px;
}
.est-pane .catalog-filter-attribute .attribute-lists li.attr-item:hover {
background: #f7f7fa;
}
.est-pane .catalog-filter-attribute .attr-name {
display: flex;
align-items: center;
margin: 0;
padding: .2rem .35rem;
font-size: .84rem;
line-height: 1.25;
color: #222;
cursor: pointer;
}
/* kvačica kao na blagajni: mekani kut, zelena kad je odabrana */
.est-pane .catalog-filter-attribute label::before {
flex: 0 0 auto;
width: .9rem;
height: .9rem;
border: 1px solid #d7d7e0;
border-radius: 5px;
background: #fff;
margin-inline-end: .5rem;
line-height: .85rem;
text-align: center;
font-size: .7rem;
color: transparent;
}
.est-pane .catalog-filter-attribute input.attr-item[type="checkbox"]:checked + label::before {
background: #1a7f37;
border-color: #1a7f37;
color: #fff;
}
.est-pane .catalog-filter-attribute input.attr-item[type="checkbox"]:checked + label {
font-weight: 600;
color: #111;
}
/* prazan (ikone atributa) samo razmiče redak */
.est-pane .catalog-filter-attribute .media-list:empty { display: none; }
.est-pane .catalog-filter-attribute .attr-count {
margin-inline-start: auto;
padding-inline-start: .4rem;
font-size: .72rem;
color: #9a9aa6;
white-space: nowrap;
}
/* vrijednost bez ijednog artikla u trenutnom izboru */
.est-pane .catalog-filter-attribute li.attr-item.disabled { opacity: .45; }
.est-pane .catalog-filter-attribute fieldset.attr-sets { padding: 0 0 .45rem; }
.est-pane .catalog-filter-attribute fieldset.attr-sets + fieldset.attr-sets {
border-top: 1px solid #f1f1f5;
padding-top: .45rem;
}
/* naslov skupine: sitan i siv, isto kao „DOSTUPNOST" i „CIJENA" ispod */
.est-pane .catalog-filter-attribute legend {
margin: 0 0 .15rem;
padding: 0;
font-size: .68rem;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
color: #9a9aa6;
}
.est-pane .catalog-filter-attribute legend::before {
font-size: 70%;
color: #c9c9d4;
margin-inline-end: .15rem;
}
/* SVE skupine su otvorene: do kvačice je jedan klik, ne dva. Klik na naslov
ih i dalje sklapa (vendorov JS piše inline stil, koji pobjeđuje ovo).
Vendor skriva i sam