… */
.breadCrumbs {
margin: var(--s-5) 0 var(--s-4);
}
.breadCrumbs ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-1) 0;
margin: 0;
padding: 0;
list-style: none;
font-size: var(--fs-xs);
color: var(--ink-3);
}
.breadCrumbs li {
display: inline-flex;
align-items: center;
margin: 0;
list-style: none;
}
.breadCrumbs li + li::before {
content: "";
width: 5px;
height: 5px;
margin: 0 var(--s-2);
border-top: 1.4px solid var(--ink-4);
border-right: 1.4px solid var(--ink-4);
transform: rotate(45deg);
flex: none;
}
.breadCrumbs a {
color: var(--ink-3);
padding: 2px 0;
}
.breadCrumbs a:hover {
color: var(--ink);
text-decoration: underline;
text-underline-offset: 3px;
}
.breadCrumbs [aria-current="page"] {
color: var(--ink);
font-weight: 500;
max-width: 46ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* --- 17.4 filtri ----------------------------------------------------- */
/* SPREMEMBA 20.8.2026: čipi so bili stisnjeni skupaj in tesno pod naslovom —
zdaj imajo več zraka (večji razmik, višji čipi, večji odmik od naslova). */
.filters {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--s-3);
margin: var(--s-5) auto var(--s-8);
}
.filters .filter {
display: inline-flex;
}
.filters .filter a,
.filter-chip {
display: inline-flex;
align-items: center;
gap: var(--s-2);
height: 42px;
padding: 0 var(--s-5);
border: 1px solid var(--line);
border-radius: var(--r-full);
background: var(--surface);
font-size: var(--fs-sm);
font-weight: 500;
color: var(--ink-2);
white-space: nowrap;
box-shadow: var(--shadow-sm);
transition: border-color .16s var(--ease), color .16s var(--ease),
background .16s var(--ease), transform .12s var(--ease), box-shadow .16s var(--ease);
}
.filters .filter a:hover {
border-color: var(--ink-4);
color: var(--ink);
transform: translateY(-1px);
box-shadow: var(--shadow);
}
.filters .filter.actF a {
background: var(--ink);
border-color: var(--ink);
color: #fff;
box-shadow: var(--shadow);
}
/* kljukica ob aktivnem filtru */
.filters .filter.actF a::before {
content: "";
width: 13px;
height: 13px;
flex: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* "Vse" — ponastavitev filtra */
.filters .filter-all a {
background: transparent;
border-style: dashed;
box-shadow: none;
}
.filters .filter-all a:hover {
border-style: solid;
}
/* --- 17.5 galerija na strani izdelka (product-details-gallery) -------- */
.product-details-gallery {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
padding: 0 var(--s-4) var(--s-4);
}
.product-details-gallery a,
.product-details-gallery .gal-vthumb {
display: block;
width: 72px;
height: 72px;
border: 1px solid var(--line);
border-radius: var(--r-sm);
overflow: hidden;
background: var(--surface);
cursor: pointer;
transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.product-details-gallery a:hover,
.product-details-gallery .gal-vthumb:hover {
border-color: var(--ink);
}
/* izbrana sličica (hover-galerija, 25.8.2026) */
.product-details-gallery .is-sel {
border-color: var(--brand);
box-shadow: 0 0 0 1px var(--brand);
}
.product-details-gallery img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 4px;
mix-blend-mode: multiply;
}
/* 25.8.2026: prva sličica NI več skrita — trak je izbirnik hover-galerije
in vsebuje vse slike (productsScripts.php zdaj vrne vse, ne od druge dalje). */
/* video sličica v traku */
.product-details-gallery .gal-vthumb {
position: relative;
padding: 0;
background: #000;
}
.product-details-gallery .gal-vthumb img {
width: 100%;
height: 100%;
object-fit: cover;
padding: 0;
mix-blend-mode: normal;
opacity: .85;
}
.gal-vplay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 24px;
height: 24px;
border-radius: var(--r-full);
background: var(--brand);
}
.gal-vplay::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-35%, -50%);
border-style: solid;
border-width: 5px 0 5px 8px;
border-color: transparent transparent transparent #fff;
}
/* =====================================================================
18 FILTRI NA TELEFONU — poteg (20.8.2026)
Mora biti NA KONCU datoteke: razdelek »17.4 filtri« je brez media
poizvedbe in stoji za starim blokom @media (max-width: 620px), zato ga je
ta povozil — čipi so se na telefonu lomili v tri vrstice namesto da bi se
listali. Media poizvedba ne poveča specificnosti, zato odloca vrstni red.
Poteg opravi brskalnik sam (overflow-x + scroll-snap), JS ni potreben.
===================================================================== */
@media (max-width: 720px) {
.filters {
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
margin-block: var(--s-4) var(--s-6);
/* cipi se lahko dotaknejo roba zaslona, a nista odrezana prvi in zadnji */
margin-inline: calc(-1 * var(--s-4));
padding-inline: var(--s-4);
padding-block: 3px;
}
.filters::-webkit-scrollbar {
display: none;
}
.filters .filter {
flex: 0 0 auto;
scroll-snap-align: start;
}
}
/* =====================================================================
19 NAKUPNI GUMBI V MODRI (21.8.2026)
Na željo naročnika so gumbi nakupne poti v barvi znamke (--brand),
ne v črnilu: »V košarico« v seznamu in na strani izdelka, ikona
košarice v glavi ter »Oddaj naročilo« na blagajni (v povzetku in v
mobilni vrstici — oba imata razred .co-submit).
Gumb »Na blagajno« v predalu košarice je bil moder že prej
(.btn-brand v sideBasket.php), zato je nakupna pot zdaj enotna.
Ostali gumbi ostajajo črni — obrazci, prijava, »Vnesi podatke«,
popup. Če bi bilo modro vse, modra ne bi več pomenila »nakup«.
Blok mora stati NA KONCU datoteke: primarna pravila v razdelku 05
imajo enako specifičnost, zato odloča vrstni red (isto opozorilo
kot pri razdelku 18).
===================================================================== */
.adToBasket,
input[type=button].adToBasket,
.product-item .quick-add-btn,
.co-submit {
background: var(--brand);
border-color: var(--brand);
color: #fff;
}
.adToBasket:hover,
input[type=button].adToBasket:hover,
.product-item .quick-add-btn:hover,
.co-submit:hover {
background: var(--brand-dark);
border-color: var(--brand-dark);
color: #fff;
box-shadow: var(--shadow);
}
/* ikona košarice v glavi (tudi mobilna, .basketReveal.sBag) */
.sBag {
background: var(--brand);
}
.sBag:hover {
background: var(--brand-dark);
color: #fff;
}
/* =====================================================================
20 MOBILNE DODELAVE (21.8.2026)
Mora stati NA KONCU datoteke — popravlja pravila iz razdelkov 07, 16
in 17, ki imajo enako specifičnost, zato odloča vrstni red (ista
omejitev kot pri razdelkih 18 in 19).
===================================================================== */
/* --- 20.1 Izbira jezika v vrhnjem traku ------------------------------
NAPAKA: razdelek 17 je pod 900 px skril VSE `.top-usp` — tudi gumb za
jezik in državo, ki ta razred deli. Na telefonu torej ni bilo nobene
poti do drugega jezika. Besedili (dostava, vračilo) ostaneta skriti,
gumb pa ne. */
@media (max-width: 900px) {
.top-usp.top-pref {
display: inline-flex;
}
/* moto levo, gumb desno — ne več na sredino */
.topLine {
justify-content: space-between;
gap: var(--s-3);
}
}
@media (max-width: 620px) {
/* ime države zavzame preveč; ostaneta globus in oznaka jezika */
.top-pref [data-pref="country"] {
display: none;
}
}
/* --- 20.2 Mobilni meni ----------------------------------------------- */
/* glava menija: logo in × poravnana, ločnica pod njima */
.panel {
padding-top: 0;
}
.panel-head {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 64px;
margin: 0 calc(-1 * var(--s-5)) var(--s-2);
padding: 0 var(--s-5);
border-bottom: 1px solid var(--line-2);
flex: none;
}
.panel-head .close-side {
font-size: 26px;
line-height: 1;
color: var(--ink-3);
cursor: pointer;
padding: var(--s-2);
margin-right: calc(-1 * var(--s-2));
}
.panel-head .close-side:hover {
color: var(--ink);
}
/* povezave: večja tarča za prst in puščica ob desnem robu */
.panel ul {
flex: 1 1 auto;
}
.panel li:last-child {
border-bottom: 0;
}
.panel li > div {
position: relative;
}
.panel li a {
padding-block: 14px;
}
.panel li > div > a::after {
content: "";
position: absolute;
right: var(--s-1);
top: 50%;
width: 8px;
height: 8px;
border-right: 1.6px solid var(--ink-4, #b9bec7);
border-top: 1.6px solid var(--ink-4, #b9bec7);
transform: translateY(-50%) rotate(45deg);
}
/* podkategorije (rwdMore) puščico rišejo same — tam vodilne ne rabimo.
(Trenutno navigacija podkategorij nima; pravilo je obramba za naprej.) */
.panel li > div:has(+ .rwdMore) > a::after {
content: none;
}
/* noga: prijava in izbira jezika */
.panel-foot {
flex: none;
margin: var(--s-4) calc(-1 * var(--s-5)) calc(-1 * var(--s-5));
padding: var(--s-3) var(--s-5) calc(var(--s-4) + env(safe-area-inset-bottom));
background: var(--bg-2);
border-top: 1px solid var(--line-2);
}
.panel-foot-link {
display: flex;
align-items: center;
gap: var(--s-3);
width: 100%;
padding: var(--s-3) var(--s-1);
border: 0;
background: none;
font-family: inherit;
font-size: var(--fs-base);
font-weight: 500;
color: var(--ink);
text-align: left;
cursor: pointer;
}
.panel-foot-link:hover {
color: var(--brand-dark);
}
.panel-foot-link .ico-globe {
width: 17px;
height: 17px;
}
.panel-foot-link[hidden] {
display: none;
}
/* --- 20.3 Piškotkovni trak nad mobilno vrstico blagajne --------------
Vrstica z zneskom in gumbom (z-index 85) je trak (z-index 75) na
blagajni prekrila. Trak se dvigne nad njo; višini sledita odmikom
telesa, ki ju nastavljata co-bar-on/co-bar-tall. */
@media (max-width: 1080px) {
/* trak je #cookieInfo — ID prebije razredni selektor, zato mora biti tu */
body.co-bar-on .simple-modal,
body.co-bar-on #cookieInfo {
bottom: 96px;
}
body.co-bar-on.co-bar-tall .simple-modal,
body.co-bar-on.co-bar-tall #cookieInfo {
bottom: 130px;
}
}
/* --- 20.4 Stran izdelka: zaloga in rok dobave ------------------------ */
.delivery-note {
display: inline-flex;
align-items: baseline;
gap: var(--s-1);
font-size: var(--fs-sm);
color: var(--ink-2);
white-space: nowrap;
}
.delivery-note b {
font-weight: 500;
color: var(--ink-3);
}
/* --- 20.5 Ikona menija (21.8.2026) -----------------------------------
Prej sliki v s privzetimi odmiki — od tod čudna poravnava. Zdaj so
tri črtice narisane s CSS; ob odprtem meniju se zlijejo v ×. */
.responsive-nav {
padding: 0;
border: 0;
background: none;
}
@media (max-width: 900px) {
.responsive-nav {
display: grid;
place-items: center;
width: 44px;
height: 44px;
margin-left: auto;
border-radius: var(--r-full);
cursor: pointer;
transition: background .16s var(--ease);
}
.responsive-nav:hover {
background: var(--bg-2);
}
}
.nav-ico {
position: relative;
display: block;
width: 22px;
height: 2px;
border-radius: 2px;
background: var(--ink);
transition: background .18s var(--ease);
}
.nav-ico::before,
.nav-ico::after {
content: "";
position: absolute;
left: 0;
width: 22px;
height: 2px;
border-radius: 2px;
background: var(--ink);
transition: transform .22s var(--ease);
}
.nav-ico::before { top: -7px; }
.nav-ico::after { top: 7px; }
.start-nav.is-open .nav-ico {
background: transparent;
}
.start-nav.is-open .nav-ico::before {
transform: translateY(7px) rotate(45deg);
}
.start-nav.is-open .nav-ico::after {
transform: translateY(-7px) rotate(-45deg);
}
/* --- 20.6 Pogoji poslovanja v sklopu 2 (21.8.2026) ------------------- */
.co-terms {
margin-top: var(--s-4);
}
.co-terms input.is-invalid {
outline: 2px solid var(--err);
outline-offset: 1px;
}
.co-terms input.is-invalid + label {
color: var(--err);
}
/* --- 20.7 Zložen povzetek naročnika (21.8.2026) ----------------------
Zelena kljukica pove, da je korak opravljen; gumb za popravek je tih,
s svinčnikom, in OSTANE v isti vrstici tudi na telefonu (prejšnje
pravilo pri 420 px ga je lomilo v svojo vrstico). */
.co-buyer-done {
flex-wrap: nowrap;
align-items: center;
}
/* besedilo zapolni sredino — kljukica levo, gumb desno */
.co-buyer-done-txt {
flex: 1 1 auto;
}
/* e-naslov naj se ne lomi sredi besede — na ozkem zaslonu gre v svojo
vrstico cel (prejšnji overflow-wrap:anywhere ga je rezal poljubno) */
.co-buyer-done-txt span {
overflow-wrap: break-word;
}
.co-done-ico {
flex: none;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--ok);
position: relative;
}
.co-done-ico::after {
content: "";
position: absolute;
inset: 0;
background: #fff;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}
.co-edit-btn {
flex: none;
display: inline-flex;
align-items: center;
gap: var(--s-2);
height: 34px;
padding: 0 var(--s-3);
border: 1px solid var(--line);
border-radius: var(--r-full);
background: var(--surface);
font-family: inherit;
font-size: var(--fs-xs);
font-weight: 500;
color: var(--ink-2);
white-space: nowrap;
cursor: pointer;
transition: border-color .16s var(--ease), color .16s var(--ease), background .16s var(--ease);
}
.co-edit-btn:hover {
border-color: var(--ink);
color: var(--ink);
background: var(--bg-2);
}
.ico-pencil {
flex: none;
width: 12px;
height: 12px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* Na telefonu gumb obdrži samo svinčnik — besedilo bi sicer e-naslov
stisnilo v lomljenje sredi besede. Napis ostane v DOM (bralniki). */
@media (max-width: 480px) {
.co-edit-btn {
font-size: 0;
gap: 0;
width: 34px;
padding: 0;
justify-content: center;
}
.co-edit-btn .ico-pencil {
width: 14px;
height: 14px;
}
}
/* Potrditveni polji v obrazcu (podjetje, pogoji): razmik vodi SAMO mreža,
da sta vrstici enakomerno pod poljem za telefon — ločnico pred gumbom
nariše že .co-buyer-actions. */
#coBuyer .check-row {
margin-bottom: 0;
align-items: center;
}
.co-terms {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
/* --- 20.8 Vrstica se umakne pravemu gumbu (21.8.2026) ----------------
Ko je kartica z gumbom »Oddaj naročilo« na zaslonu, fiksna vrstica
zdrsne dol, gumb v kartici pa se pokaže (checkout.js, body.co-bar-off).
V zaklenjenem stanju vrstica ostane — nosi namig. */
@media (max-width: 1080px) {
.co-mobilebar {
transition: transform .25s var(--ease);
}
body.co-bar-off .co-mobilebar {
transform: translateY(110%);
}
body.co-bar-off .co-extra #coSubmit {
display: flex;
}
}
/* --- 20.9 »Briši« kot ikona v kotu kartice (21.8.2026) ---------------
Namesto podčrtane besede ob količini je koš, pripet v desni zgornji
kot vrstice. Napis ostane v DOM (bralniki zaslona), skrije ga font-size:0. */
.co-line {
position: relative;
}
.co-line .co-remove {
position: absolute;
top: var(--s-4);
right: 0;
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
font-size: 0;
color: var(--ink-3);
cursor: pointer;
transition: background .16s var(--ease), color .16s var(--ease);
}
.co-line:first-of-type .co-remove {
top: 0;
}
.co-line .co-remove::before {
content: "";
width: 15px;
height: 15px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.co-line .co-remove:hover {
background: var(--err-tint);
color: var(--err);
}
/* naziv naj se ne podvleče pod koš */
.co-line .co-line-name {
padding-right: 34px;
}
/* =====================================================================
21 KONTAKTNA STRAN (21.8.2026)
Obrazec v kartici levo, kontaktni podatki in podatki podjetja desno.
Vir podatkov je tabela `company` (Admin → Podatki podjetja) — glej
sites/kontakt.php.
===================================================================== */
.contact-page {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--s-5) var(--s-8);
}
.contact-head {
padding: var(--s-6) 0 var(--s-6);
}
.contact-head .lead {
max-width: 560px;
margin-top: var(--s-3);
color: var(--ink-3);
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 360px;
gap: var(--s-5);
align-items: start;
}
.contact-card {
padding: var(--s-6);
}
.contact-card-title {
font-size: var(--fs-lg);
letter-spacing: -.015em;
margin-bottom: var(--s-5);
}
.contact-card .form-actions {
margin-top: var(--s-5);
padding-top: var(--s-5);
border-top: 1px solid var(--line-2);
}
.contact-card .form-actions .btn {
min-width: 220px;
}
/* stolpec s podatki */
.contact-aside {
display: flex;
flex-direction: column;
gap: var(--s-5);
/* na široki mizi naj sledi drsenju, kot povzetek na blagajni */
position: sticky;
top: calc(var(--header-h) + var(--s-5));
}
.contact-row {
display: flex;
align-items: center;
gap: var(--s-3);
padding: var(--s-3) 0;
border-bottom: 1px solid var(--line-2);
color: var(--ink);
font-weight: 500;
}
.contact-row:last-of-type {
border-bottom: 0;
}
a.contact-row:hover {
color: var(--brand-dark);
}
.contact-ico {
flex: none;
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--brand-tint);
}
.contact-ico::after {
content: "";
width: 16px;
height: 16px;
background: var(--brand-dark);
}
.contact-ico-phone::after {
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.contact-ico-mail::after {
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E") center/contain no-repeat;
}
.contact-ico-pin::after {
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
}
.contact-note {
margin-top: var(--s-4);
padding: var(--s-3) var(--s-4);
border-radius: var(--r-sm);
background: var(--ok-tint);
color: var(--ok);
font-size: var(--fs-sm);
font-weight: 500;
}
.contact-social {
display: flex;
gap: var(--s-3);
margin-top: var(--s-4);
}
.contact-social a {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
/* ikoni sta beli (kot v nogi), zato temna podlaga */
background: var(--ink);
transition: background .16s var(--ease), transform .12s var(--ease);
}
.contact-social a:hover {
background: var(--brand);
transform: translateY(-1px);
}
.contact-social img {
width: 18px;
height: 18px;
}
/* podatki podjetja — drobni tisk, brez kartice, da ne tekmuje s kontakti */
/* ⚠️ 25.8.2026: brez `padding` — `.contact-legal` je zdaj kartica (`.contact-card`)
in je ta vrstica prevladala nad njenim notranjim robom (kartica je bila stisnjena
ob rob). Videz kartice ureja razdelek 21.1. */
.contact-legal {
font-size: var(--fs-sm);
color: var(--ink-3);
}
.contact-legal h3 {
font-size: var(--fs-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--ink-3);
margin-bottom: var(--s-3);
}
.contact-legal-name {
color: var(--ink-2);
line-height: 1.6;
margin-bottom: var(--s-3);
}
.contact-legal dl {
margin: 0;
}
.contact-legal dl > div {
display: flex;
justify-content: space-between;
gap: var(--s-4);
padding: var(--s-1) 0;
}
.contact-legal dt {
color: var(--ink-4, #8a919c);
}
.contact-legal dd {
margin: 0;
font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
.contact-grid {
grid-template-columns: 1fr;
}
.contact-aside {
position: static;
}
}
@media (max-width: 620px) {
.contact-page {
padding-inline: var(--s-4);
}
.contact-card {
padding: var(--s-5);
}
.contact-card .form-actions .btn {
width: 100%;
min-width: 0;
}
}
/* =====================================================================
21.1 KONTAKTNA STRAN — prenova 25.8.2026 (Tobaccostuff)
PRED: naslov + uvod, obrazec levo, ozek stolpec kontaktnih vrstic desno
(postavitev iz ROFI). PO: tri ploščice na vrhu, obrazec s podatki
podjetja ob strani in zemljevid lokacije na dnu.
===================================================================== */
.contact-eyebrow {
display: block;
margin-bottom: var(--s-2);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--brand-dark);
}
.contact-head h1::after {
content: "";
display: block;
width: 44px;
height: 3px;
margin-top: var(--s-4);
border-radius: var(--r-sm);
background: var(--brand);
}
/* ---------- ploščice s kontaktom ---------- */
.contact-tiles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-4);
margin-bottom: var(--s-5);
}
.contact-tile {
display: flex;
align-items: center;
gap: var(--s-4);
padding: var(--s-4) var(--s-5);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
color: var(--ink);
transition: border-color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease);
}
.contact-tile:hover {
border-color: var(--brand);
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
color: var(--ink);
}
/* ikone ploščic so bordo (ne oranžne kot v vrsticah prej) */
.contact-tile .contact-ico {
width: 42px;
height: 42px;
border-radius: var(--r);
background: var(--brand-deep);
}
.contact-tile .contact-ico::after {
width: 19px;
height: 19px;
background: #fff;
}
.contact-tile-txt {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.contact-tile-l {
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-4);
}
.contact-tile strong {
font-size: var(--fs-base);
line-height: 1.35;
overflow-wrap: anywhere;
}
/* ---------- obvestilo o odzivnem času (zdaj nad obrazcem) ---------- */
.contact-card .contact-note {
margin: 0 0 var(--s-5);
padding: var(--s-3) var(--s-4);
background: var(--brand-tint);
border-left: 3px solid var(--brand);
border-radius: var(--r);
color: var(--ink-2);
font-size: var(--fs-sm);
font-weight: 500;
}
/* ---------- kartica s podatki podjetja ---------- */
/* PRED (25.8.2026): gol odstavek z nazivom in vrstice dt/dd brez ločnic —
kartica je bila videti nedokončana. PO: naziv z ikono v svoji vrstici,
podatki v vrsticah s tankimi ločnicami in poravnanimi vrednostmi. */
/* ⚠️ Brez `padding` — element je hkrati `.contact-card` in bi ga ta pravila
(nižje v datoteki) povozila na 0, zato bi se besedilo dotikalo robov. */
.contact-legal {
font-size: var(--fs-sm);
color: var(--ink-3);
}
.contact-firm {
display: flex;
align-items: flex-start;
gap: var(--s-4);
padding-bottom: var(--s-5);
margin-bottom: var(--s-3);
border-bottom: 1px solid var(--line-2);
}
.contact-firm .contact-ico {
width: 38px;
height: 38px;
border-radius: var(--r);
background: var(--brand-tint);
}
.contact-firm .contact-ico::after {
width: 18px;
height: 18px;
background: var(--brand-deep);
}
.contact-ico-firm::after {
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v16M14 10h4a1 1 0 0 1 1 1v10'/%3E%3Cpath d='M8 8h3M8 12h3M8 16h3'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v16M14 10h4a1 1 0 0 1 1 1v10'/%3E%3Cpath d='M8 8h3M8 12h3M8 16h3'/%3E%3C/svg%3E") center/contain no-repeat;
}
.contact-firm-txt {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
line-height: 1.5;
}
.contact-firm-txt strong {
font-size: var(--fs-base);
color: var(--ink);
}
.contact-legal dl {
margin: 0;
}
.contact-legal dl > div {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--s-4);
/* 25.8.2026: več zraka — vrstice so bile videti natlačene */
padding: var(--s-4) 0;
border-bottom: 1px solid var(--line-2);
}
.contact-legal dl > div:last-child {
padding-bottom: 0;
border-bottom: 0;
}
/* Oznake so mirne (mala začetnica, navadna teža) — verzalke v krepki pisavi
so kartico delale glasno in natlačeno. */
.contact-legal dt {
flex: none;
font-size: var(--fs-sm);
font-weight: 400;
color: var(--ink-4);
}
.contact-legal dd {
margin: 0;
text-align: right;
font-variant-numeric: tabular-nums;
font-weight: 500;
color: var(--ink);
overflow-wrap: anywhere;
}
/* družabna omrežja pod podatki — ločena s črto */
.contact-legal .contact-social {
margin-top: var(--s-4);
padding-top: var(--s-4);
border-top: 1px solid var(--line-2);
}
/* ---------- veleprodaja (25.8.2026) ---------- */
.contact-b2b {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--s-5);
margin-top: var(--s-6);
padding: clamp(var(--s-5), 4vw, var(--s-6));
background: var(--brand-deep);
border-radius: var(--r-lg);
color: #fff;
}
.contact-b2b-copy {
max-width: 640px;
}
.contact-b2b h2 {
margin: 0 0 var(--s-2);
font-size: var(--fs-xl);
letter-spacing: -.02em;
color: #fff;
}
.contact-b2b p {
margin: 0;
line-height: 1.6;
color: rgba(255, 255, 255, .82);
}
@media (max-width: 620px) {
.contact-b2b .btn {
width: 100%;
}
}
/* ---------- zemljevid ---------- */
.contact-map {
margin-top: var(--s-6);
}
.contact-map-head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--s-3);
margin-bottom: var(--s-4);
}
.contact-map-head h2 {
margin: 0;
font-size: var(--fs-xl);
letter-spacing: -.02em;
}
.contact-map-head .btn-ghost {
border-color: var(--brand);
color: var(--brand-dark);
}
.contact-map-head .btn-ghost:hover {
background: var(--brand-tint);
border-color: var(--brand-dark);
}
/* Razmerje 21:9 na namizju, na telefonu višji izsek — zemljevid v ozkem
pasu ni berljiv. Vdelava je Googlova (brez ključa API), zato `loading=lazy`:
naloži se šele, ko kupec pridrsa do nje. */
.contact-map-frame {
position: relative;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--r-lg);
background: var(--bg-2);
aspect-ratio: 21 / 9;
}
.contact-map-frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
@media (max-width: 900px) {
.contact-tiles {
grid-template-columns: 1fr;
}
.contact-map-frame {
aspect-ratio: 4 / 3;
}
}
/* --- 21.x Obvestilo o preklicanem plačilu (Stripe Checkout, 21.8.2026) ---
Stoji ZNOTRAJ mreže .checkout, zato mora čez oba stolpca — sicer zasede
prvo celico in porine vsebino v desni stolpec. */
.co-cancel-note {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: var(--s-3);
padding: var(--s-3) var(--s-4);
border: 1px solid rgba(180, 83, 9, .25);
border-radius: var(--r-sm);
background: #fdf3e7;
color: #b45309;
font-size: var(--fs-sm);
font-weight: 500;
}
.co-cancel-note::before {
content: "";
flex: none;
width: 15px;
height: 15px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* --- 21.y Koda popusta na blagajni (21.8.2026) ----------------------- */
.co-cupon { margin-bottom: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line-2); }
.co-cupon-form { display: flex; gap: var(--s-2); }
.co-cupon-form input { flex: 1 1 auto; min-width: 0; }
.co-cupon-form .btn-ghost { flex: none; height: 46px; padding: 0 var(--s-4); border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; }
.co-cupon .err-msg { margin-top: var(--s-2); }
.co-cupon-ok { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-sm); background: var(--ok-tint); }
.co-cupon-tick { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ok); position: relative; }
.co-cupon-tick::after { content: ""; position: absolute; inset: 0; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M20 6 9 17l-5-5%27/%3E%3C/svg%3E") center/11px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M20 6 9 17l-5-5%27/%3E%3C/svg%3E") center/11px no-repeat; }
.co-cupon-txt { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); line-height: 1.4; }
.co-cupon-txt strong { display: block; color: var(--ok); }
.co-cupon-txt span { color: var(--ink-2); letter-spacing: .04em; }
.co-cupon-remove { flex: none; width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; color: var(--ink-3); font-size: 17px; line-height: 1; cursor: pointer; }
.co-cupon-remove:hover { background: rgba(0,0,0,.06); color: var(--ink); }
.co-cupon-gifts { margin-top: var(--s-3); }
.co-cupon-gifts-title { font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--s-2); }
.co-cupon-gift { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: var(--s-2); font-size: var(--fs-sm); cursor: pointer; }
.co-cupon-gift.is-active { border-color: var(--ok); background: var(--ok-tint); }
.co-cupon-gift-name { flex: 1 1 auto; min-width: 0; }
.co-cupon-gift-free { flex: none; color: var(--ok); font-weight: 600; }
/* prečrtana cena kosa ob kuponu (21.8.2026) */
.co-line-old { display: block; font-size: var(--fs-xs); color: var(--ink-4, #9aa1ab); text-decoration: line-through; font-weight: 400; }
.sum-discount span:first-child { max-width: 60%; }
/* Zrak med košem in ceno v vrstici (21.8.2026): cena v desnem stolpcu se
poravna pod ikono z odmikom, ne več tik ob njej. Na telefonu ima cena
svoje mesto v vrstici s količino, zato tam ostane po starem. */
@media (min-width: 621px) {
.co-line-right { align-self: start; padding-top: 40px; padding-bottom: 0; }
}
/* ==========================================================================
22. OBVESTILNE STRANI — 404, prazna košarica, zahvalna sporočila (21.8.2026)
Markup: sites/404.php, sites/ui.php, sites/checkout.php (empty_basket).
Kartica nadgradi osnovni .thank-you-page iz razdelka zgoraj.
========================================================================== */
.thank-you-page {
max-width: 640px;
margin: var(--s-8) auto;
padding: var(--s-7) var(--s-6);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
color: var(--ink-2);
line-height: 1.65;
}
/* duhec na zahvalnih straneh — v mehkem krogu barve znamke */
.thank-you-page > img {
width: 96px;
height: 96px;
object-fit: contain;
padding: 24px;
background: var(--brand-tint);
border-radius: 50%;
margin: 0 auto var(--s-5);
}
.thank-you-page h1 {
font-size: var(--fs-2xl);
font-weight: 700;
color: var(--ink);
line-height: 1.25;
margin: 0 0 var(--s-4);
}
.thank-you-page p {
margin: 0 0 var(--s-3);
}
.thank-you-page a:not([class]) {
color: var(--brand-dark);
font-weight: 500;
}
/* vrstica z gumbi pod sporočilom */
.notice-actions {
display: flex;
flex-wrap: wrap;
gap: var(--s-3);
justify-content: center;
margin-top: var(--s-6);
}
/* 404 — velika tipografska koda v barvi znamke */
.notice-code {
font-size: clamp(72px, 16vw, 128px);
font-weight: 800;
line-height: 1;
letter-spacing: -0.04em;
background: linear-gradient(135deg, var(--brand), var(--brand-dark));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: var(--s-4);
}
.notice-404 .lost-links {
margin-top: var(--s-6);
padding-top: var(--s-6);
border-top: 1px solid var(--line-2);
}
/* prazna košarica — ikona v krogu (inline SVG namesto duhca) */
.notice-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 96px;
height: 96px;
background: var(--brand-tint);
color: var(--brand-dark);
border-radius: 50%;
margin-bottom: var(--s-5);
}
/* mreža kategorij pod kartico prazne košarice — čez polno širino */
.notice-cats {
max-width: var(--container);
margin: var(--s-6) auto var(--s-8);
padding-inline: var(--s-5);
}
@media (max-width: 640px) {
.thank-you-page {
margin: var(--s-5) var(--s-4);
padding: var(--s-6) var(--s-4);
}
.thank-you-page > img,
.notice-icon {
width: 76px;
height: 76px;
}
.thank-you-page > img {
padding: 18px;
}
.thank-you-page h1 {
font-size: var(--fs-xl);
}
.notice-actions .btn {
width: 100%;
justify-content: center;
}
}
/* =====================================================================
23 NOGA — prenova 22.8.2026
Razdelek mora ostati NA KONCU datoteke: pravila spodaj popravljajo
razdelek 08, ki ima enako specifičnost, zato odloča vrstni red — isto
opozorilo kot pri razdelkih 18–20.
===================================================================== */
/* SPREMEMBA 25.8.2026 (Tobaccostuff): topel skoraj-črn ton (temnejši od
pasu kategorij v glavi), oranžna vrhnja črta kot podpis znamke. */
.footer {
margin-top: var(--s-9);
padding: 0 var(--s-5) var(--s-5);
background: #191411;
border-top: 3px solid var(--brand);
color: rgba(255, 255, 255, .62);
font-size: var(--fs-sm);
line-height: 1.65;
}
/* ---------- 23.1 pas prednosti ---------- */
/* SPREMEMBA 25.8.2026 (3. krog): prednosti kot KARTICE, ne gola vrsta
ikona + besedilo (ta je bila enaka ROFI). */
.foot-usp {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-4);
padding: var(--s-7) 0 var(--s-6);
border-bottom: 1px solid rgba(255, 255, 255, .1);
}
/* kadar država nima praga ali roka dobave, sta postavki dve ali tri —
auto-fit poskrbi, da se preostale enakomerno razporedijo */
.foot-usp:has(> :nth-child(3):last-child) {
grid-template-columns: repeat(3, 1fr);
}
.foot-usp-item {
display: flex;
align-items: flex-start;
gap: var(--s-3);
padding: var(--s-4);
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .08);
border-radius: var(--r-lg);
}
/* SPREMEMBA 25.8.2026: oglate oranžno tonirane ploščice namesto sivih krogov */
.foot-usp-ico {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: var(--r);
background: rgba(240, 128, 0, .14);
color: var(--brand);
}
.foot-usp-ico svg {
width: 21px;
height: 21px;
}
.foot-usp-txt {
display: block;
min-width: 0;
}
.foot-usp-txt strong {
display: block;
color: #fff;
font-size: var(--fs-base);
font-weight: 600;
letter-spacing: -.01em;
line-height: 1.35;
}
.foot-usp-txt span {
display: block;
margin-top: 2px;
color: rgba(255, 255, 255, .5);
font-size: var(--fs-xs);
line-height: 1.5;
}
/* ---------- 23.2 stolpci ---------- */
.foot-main {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
gap: var(--s-6);
padding: var(--s-7) 0;
border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.foot-brand .foot-logo {
display: inline-block;
}
.foot-brand .foot-logo img {
width: 150px;
height: auto;
}
.foot-opis {
margin: var(--s-4) 0 0;
max-width: 34ch;
color: rgba(255, 255, 255, .55);
font-size: var(--fs-sm);
}
/* SPREMEMBA 25.8.2026 (3. krog): naslov spet bel, znamko nosi oranžna
črtica pred njim. */
.foot-col h3 {
display: flex;
align-items: center;
gap: var(--s-2);
margin: 0 0 var(--s-4);
color: #fff;
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.foot-col h3::before {
content: "";
flex: none;
width: 16px;
height: 2px;
border-radius: var(--r-full);
background: var(--brand);
}
/* getExtNavigation() izpiše gole ; stolpec iz njih naredi CSS,
zato funkcije ni bilo treba spreminjati */
.foot-links {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--s-2);
}
.foot-links a {
position: relative;
color: rgba(255, 255, 255, .62);
transition: color .16s var(--ease);
}
.foot-links a::after {
content: "";
position: absolute;
left: 0;
right: 100%;
bottom: -2px;
height: 1px;
background: currentColor;
transition: right .22s var(--ease);
}
.foot-links a:hover {
color: var(--brand);
}
.foot-links a:hover::after {
right: 0;
}
.foot-naslov {
margin: var(--s-4) 0 0;
color: rgba(255, 255, 255, .45);
font-size: var(--fs-xs);
line-height: 1.7;
}
.footer .social {
gap: var(--s-2);
padding-block: var(--s-5) 0;
}
.footer .social a {
width: 36px;
height: 36px;
}
/* ---------- 23.3 podpisni pas (25.8.2026, 3. krog) ----------
Bordo trak čez VSO širino strani (izniči padding .footer in omejitev
`.footer > *` na širino vsebine) — zrcali bordo vrhnji trak. V njem so
podpis, plačilne ikone in avtorstvo; ločeni vrstici .foot-pay + .pgEnd
iz prejšnje različice sta odstranjeni iz predloge. */
.foot-bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-3) var(--s-5);
max-width: none;
margin: var(--s-6) calc(-1 * var(--s-5)) calc(-1 * var(--s-5));
padding: var(--s-4) var(--s-5);
background: var(--brand-deep);
color: rgba(255, 255, 255, .75);
font-size: var(--fs-xs);
}
.foot-bottom .foot-pay {
display: flex;
align-items: center;
margin-left: auto;
}
.foot-bottom .foot-madeby {
color: rgba(255, 255, 255, .6);
}
.foot-bottom .foot-madeby:hover {
color: #fff;
}
.pay-list {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
margin: 0;
padding: 0;
list-style: none;
}
.pay-chip {
display: grid;
place-items: center;
width: 52px;
height: 34px;
padding: 0 var(--s-1);
border-radius: var(--r-sm);
background: #fff;
box-shadow: 0 1px 0 rgba(0, 0, 0, .3);
}
.pay-chip svg {
width: 100%;
height: 20px;
display: block;
}
/* Apple Pay, Google Pay in PayPal so širši — v znaku je še beseda.
Razred namesto :nth-child, ker je PayPal pogojen (3.9.2026) in bi se
številke ob vsakem novem znaku premaknile. */
.pay-chip-wide {
width: 62px;
}
/* predračun in povzetje sta risana s črto, ne barvna znaka */
.pay-chip-line {
color: var(--ink-2);
}
/* ---------- 23.4 podpis ---------- */
.footer .pgEnd {
padding-top: var(--s-5);
border-top: 0;
color: rgba(255, 255, 255, .38);
}
.foot-legal {
font-size: var(--fs-xs);
}
/* ---------- 23.5 odzivnost ---------- */
@media (max-width: 1080px) {
/* trije stolpci in znamka čez vse tri — pri dveh bi Kontakt ostal sam v
tretji vrstici in poleg njega bi zijala prazna celica */
.foot-main {
grid-template-columns: repeat(3, 1fr);
gap: var(--s-6) var(--s-5);
}
.foot-brand {
grid-column: 1 / -1;
}
.foot-opis {
max-width: 52ch;
}
}
@media (max-width: 860px) {
.foot-usp {
grid-template-columns: 1fr 1fr;
gap: var(--s-5);
padding: var(--s-6) 0;
}
.foot-usp:has(> :nth-child(3):last-child) {
grid-template-columns: 1fr 1fr;
}
.foot-main {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 560px) {
.footer {
padding-inline: var(--s-4);
}
.foot-usp {
grid-template-columns: 1fr;
gap: var(--s-4);
}
.foot-usp:has(> :nth-child(3):last-child) {
grid-template-columns: 1fr;
}
.foot-usp-ico {
width: 36px;
height: 36px;
}
.foot-usp-ico svg {
width: 18px;
height: 18px;
}
.foot-main {
grid-template-columns: 1fr;
gap: var(--s-6);
padding: var(--s-6) 0;
}
.foot-opis {
max-width: none;
}
.foot-pay {
flex-direction: column;
align-items: flex-start;
gap: var(--s-3);
}
.footer .pgEnd {
flex-direction: column;
align-items: flex-start;
gap: var(--s-2);
}
}
/* =====================================================================
24 VSTOPNA STRAN — izpostavljeni sekciji in kategorije v eni vrsti
(22.8.2026)
Razdelek mora ostati NA KONCU datoteke: pravila za .categories
popravljajo razdelek 09b z enako specifičnostjo, zato odloča vrstni red.
===================================================================== */
/* ---------- 24.1 izpostavljeni sekciji ---------- */
/* 25.8.2026: izpostavi sta PAS ČEZ VSO ŠIRINO z isto toplo podlago kot
hero (--grad-warm). Podlago nosi .features, vsebina pa ostane omejena na
--container prek .feature — zato je padding-inline preseljen navznoter. */
.features {
max-width: none;
margin: var(--s-9) 0 0;
padding-block: var(--s-8);
background: var(--grad-warm);
display: grid;
gap: var(--s-8);
}
.feature {
max-width: var(--container);
width: 100%;
margin-inline: auto;
padding-inline: var(--s-5);
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: var(--s-7);
}
/* vsaka druga sekcija zamenja stolpca — slika gre na desno */
.feature-alt .feature-media {
order: 2;
}
.feature-media {
border-radius: var(--r-lg);
overflow: hidden;
/* brez lastne podlage — mix-blend-mode: multiply zlije belo ozadje
fotografije s toplim pasom (prej: var(--bg-2)) */
background: transparent;
line-height: 0;
}
.feature-media img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
transition: transform .6s var(--ease);
}
.feature:hover .feature-media img {
transform: scale(1.03);
}
.feature-eyebrow {
display: inline-block;
margin-bottom: var(--s-3);
padding: 5px 10px;
border-radius: var(--r-full);
background: var(--brand-tint);
color: var(--brand-dark);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: .07em;
text-transform: uppercase;
}
.feature-title {
margin: 0 0 var(--s-4);
font-size: var(--fs-2xl);
font-weight: 650;
letter-spacing: -.02em;
line-height: 1.2;
}
.feature-text {
color: var(--ink-2);
font-size: var(--fs-base);
line-height: 1.7;
}
.feature-text p {
margin: 0 0 var(--s-4);
}
/* seznam prednosti — kljukica namesto pike, da sekcija bere kot argument */
.feature-text ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: var(--s-2);
}
.feature-text li {
position: relative;
padding-left: 28px;
color: var(--ink-2);
}
.feature-text li::before {
content: "";
position: absolute;
left: 0;
top: .45em;
width: 16px;
height: 16px;
border-radius: var(--r-full);
background: var(--brand-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23c05e00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8.4 2.6 2.6L12 5.6'/%3E%3C/svg%3E") center/11px no-repeat;
}
.feature-btn {
margin-top: var(--s-5);
}
/* ---------- 24.2 kategorije v eni vrsti ---------- */
.cat-rail {
position: relative;
max-width: var(--container);
margin-inline: auto;
}
/* Mreža → vodoravni drsnik. scroll-snap poskrbi za poteg na telefonu
brez ene same vrstice JS. */
.categories {
--cat-per: 5;
display: flex;
grid-template-columns: none;
gap: var(--s-4);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
padding-inline: var(--s-5);
padding-bottom: var(--s-1);
}
.categories::-webkit-scrollbar {
display: none;
}
.category-item {
flex: 0 0 calc((100% - (var(--cat-per) - 1) * var(--s-4)) / var(--cat-per));
scroll-snap-align: start;
}
/* puščici — samo na namizju; na dotik se lista s potegom.
Skripta ju odkrije šele, ko je kaj za listati (shop.js). */
.cat-nav {
position: absolute;
top: calc(50% - 20px);
z-index: 3;
display: grid;
place-items: center;
width: 40px;
height: 40px;
border: 1px solid var(--line);
border-radius: var(--r-full);
background: var(--surface);
box-shadow: var(--shadow);
cursor: pointer;
transition: border-color .16s var(--ease), opacity .16s var(--ease);
}
.cat-nav[hidden] {
display: none;
}
.cat-nav::before {
content: "";
width: 9px;
height: 9px;
border-right: 2px solid var(--ink);
border-bottom: 2px solid var(--ink);
}
.cat-prev {
left: 4px;
}
.cat-prev::before {
transform: rotate(135deg);
margin-left: 3px;
}
.cat-next {
right: 4px;
}
.cat-next::before {
transform: rotate(-45deg);
margin-right: 3px;
}
.cat-nav:hover {
border-color: var(--ink);
}
.cat-nav:disabled {
opacity: .35;
cursor: default;
border-color: var(--line);
}
/* ---------- 24.3 odzivnost ---------- */
@media (max-width: 1200px) {
.categories {
--cat-per: 4;
}
}
@media (max-width: 980px) {
.feature {
grid-template-columns: 1fr;
gap: var(--s-5);
}
/* v enem stolpcu je slika vedno prva — zamenjava stolpcev nima smisla */
.feature-alt .feature-media {
order: 0;
}
.feature-media img {
aspect-ratio: 16 / 10;
}
.categories {
--cat-per: 3;
}
.cat-nav {
display: none;
}
}
@media (max-width: 620px) {
.features {
margin-top: var(--s-8);
gap: var(--s-7);
padding-block: var(--s-7);
}
.feature {
padding-inline: var(--s-4);
}
.feature-title {
font-size: var(--fs-xl);
}
/* pogled na 1,5 kartice pove, da se da potegniti naprej */
.categories {
--cat-per: 1.5;
gap: var(--s-3);
padding-inline: var(--s-4);
}
.category-item {
flex-basis: calc((100% - .5 * var(--s-3)) / 1.5);
}
}
/* =====================================================================
25 ISKANJE, ORODNA VRSTICA SEZNAMA, STRANIČENJE, TABELA VELIKOSTI
(22.8.2026)
Razdelek mora ostati NA KONCU datoteke — pravila za `.categories` in
`.product-options` popravljajo starejša z enako specifičnostjo.
===================================================================== */
/* ---------- 25.1 iskanje: ikona v glavi + prekrivno okno ---------- */
/* V glavi je samo ikona — polje je prej stiskalo navigacijo in odrezalo
logotip. Ikona je prava povezava na `iskanje`, JS jo prestreže. */
/* SPREMEMBA 25.8.2026 (Tobaccostuff, 3. krog): iskanje kot obrobljen okrogel
gumb z odebeljenim povečevalnim steklom in piko v sredini (prej gola ikona). */
.hdr-search-open {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border: 1px solid var(--line);
border-radius: var(--r-full);
background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23241f1a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='9' r='5.5'/%3E%3Ccircle cx='9' cy='9' r='.6' fill='%23241f1a'/%3E%3Cpath d='m13.4 13.4 3.8 3.8'/%3E%3C/svg%3E") center/18px no-repeat;
transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.hdr-search-open:hover {
border-color: var(--brand);
background-color: var(--brand-tint);
}
/* prekrivno okno */
.search-overlay {
position: fixed;
inset: 0;
z-index: 120;
}
.search-overlay[hidden] { display: none; }
.so-back {
position: absolute;
inset: 0;
background: rgba(10, 14, 20, .62);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.so-win {
position: relative;
width: min(680px, calc(100% - 32px));
margin: clamp(64px, 14vh, 160px) auto 0;
}
.so-form {
position: relative;
display: flex;
}
.so-form input {
width: 100%;
height: 60px;
padding: 0 60px 0 22px;
border: 0;
border-radius: var(--r-lg);
background: var(--surface);
box-shadow: var(--shadow-xl);
font-size: var(--fs-lg);
color: var(--ink);
}
.so-form input:focus { outline: none; }
.so-go {
position: absolute;
right: 10px;
top: 10px;
width: 40px;
height: 40px;
border: 0;
border-radius: var(--r-full);
background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='9' r='6'/%3E%3Cpath d='m13.5 13.5 3.5 3.5'/%3E%3C/svg%3E") center/18px no-repeat;
cursor: pointer;
}
.so-go:hover { background-color: var(--brand-dark); }
/* predlogi pod poljem */
.hdr-sugg {
margin-top: var(--s-3);
max-height: min(52vh, 420px);
overflow-y: auto;
background: var(--surface);
border-radius: var(--r);
box-shadow: var(--shadow-xl);
}
.hdr-sugg[hidden] { display: none; }
.sugg-item {
display: grid;
grid-template-columns: 48px minmax(0, 1fr) auto;
align-items: center;
gap: var(--s-3);
padding: 10px 14px;
border-bottom: 1px solid var(--line-2);
color: var(--ink);
font-size: var(--fs-sm);
}
.sugg-item:hover { background: var(--bg-2); }
.sugg-img {
display: block;
width: 48px;
height: 48px;
border-radius: var(--r-sm);
overflow: hidden;
background: var(--bg-2);
}
.sugg-img img {
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: multiply;
}
.sugg-t {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.35;
}
.sugg-c {
font-weight: 600;
white-space: nowrap;
}
.sugg-all {
display: block;
padding: 11px 14px;
text-align: center;
font-size: var(--fs-sm);
font-weight: 600;
color: var(--brand-dark);
}
.sugg-all:hover { background: var(--brand-tint); }
/* ---------- 25.2 stran z zadetki ---------- */
.search-page {
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--s-5);
}
.search-page-form {
display: flex;
gap: var(--s-3);
max-width: 560px;
margin-bottom: var(--s-4);
}
.search-page-form input {
flex: 1;
height: 46px;
padding: 0 16px;
border: 1px solid var(--line);
border-radius: var(--r);
font-size: var(--fs-base);
}
.search-page-form input:focus { outline: none; border-color: var(--ink); }
.search-count {
margin: 0 0 var(--s-5);
color: var(--ink-3);
font-size: var(--fs-sm);
}
.search-empty {
margin: 0 0 var(--s-6);
padding: var(--s-5);
background: var(--bg-2);
border-radius: var(--r);
color: var(--ink-2);
}
/* ---------- 25.3 orodna vrstica seznama: spustna menija ---------- */
.list-tools {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--s-3) var(--s-4);
max-width: var(--container);
margin: 0 auto var(--s-4);
padding: 0 var(--s-5);
}
.lt-drops {
display: flex;
flex-wrap: wrap;
gap: var(--s-3);
}
/* / — meni deluje tudi brez JavaScripta */
.lt-drop {
position: relative;
}
.lt-drop > summary {
display: flex;
align-items: baseline;
gap: 8px;
height: 40px;
padding: 0 38px 0 16px;
border: 1px solid var(--line);
border-radius: var(--r-full);
background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 15px center no-repeat;
font-size: var(--fs-sm);
line-height: 38px;
cursor: pointer;
list-style: none;
white-space: nowrap;
transition: border-color .15s var(--ease);
}
.lt-drop > summary::-webkit-details-marker { display: none; }
.lt-drop > summary:hover { border-color: var(--ink); }
.lt-drop[open] > summary {
border-color: var(--ink);
background-color: var(--bg-2);
}
.lt-drop-l {
color: var(--ink-4);
font-size: var(--fs-xs);
letter-spacing: .05em;
text-transform: uppercase;
}
.lt-drop-v {
color: var(--ink);
font-weight: 600;
}
.lt-menu {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 50;
min-width: 190px;
max-height: 320px;
overflow-y: auto;
padding: 6px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r);
box-shadow: var(--shadow-lg);
}
.lt-menu-wide { min-width: 230px; }
.lt-opt {
display: block;
padding: 9px 12px;
border-radius: var(--r-sm);
font-size: var(--fs-sm);
color: var(--ink-2);
white-space: nowrap;
}
.lt-opt:hover { background: var(--bg-2); color: var(--ink); }
.lt-opt.is-on {
background: var(--ink);
color: #fff;
font-weight: 600;
}
.lt-count {
font-size: var(--fs-sm);
color: var(--ink-3);
white-space: nowrap;
}
.list-empty {
max-width: var(--container);
margin: 0 auto;
padding: var(--s-7) var(--s-5);
text-align: center;
color: var(--ink-3);
}
/* ---------- 25.4 straničenje ---------- */
.pager {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: var(--s-2);
max-width: var(--container);
margin: var(--s-6) auto 0;
padding-inline: var(--s-5);
}
.pager-nums {
display: flex;
gap: var(--s-1);
}
.pager-btn,
.pager-num {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 38px;
padding: 0 14px;
border: 1px solid var(--line);
border-radius: var(--r-full);
background: var(--surface);
font-size: var(--fs-sm);
color: var(--ink-2);
}
.pager-num { padding: 0; }
.pager-btn:hover,
.pager-num:hover { border-color: var(--ink); color: var(--ink); }
.pager-num.is-on {
background: var(--ink);
border-color: var(--ink);
color: #fff;
}
.pager-dots {
display: inline-flex;
align-items: center;
padding: 0 4px;
color: var(--ink-4);
}
/* ---------- 25.5 tabela velikosti ---------- */
.po-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s-3);
flex-wrap: wrap;
}
.po-head h4 { margin: 0; }
.size-help-open {
padding: 0;
border: 0;
background: none;
color: var(--brand-dark);
font-size: var(--fs-sm);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
.size-help-open:hover { color: var(--ink); }
.size-help {
position: fixed;
inset: 0;
z-index: 120;
}
.size-help[hidden] { display: none; }
.size-help-back {
position: absolute;
inset: 0;
background: rgba(12, 16, 22, .5);
}
.size-help-win {
position: relative;
width: min(440px, calc(100% - 32px));
max-height: calc(100vh - 64px);
overflow-y: auto;
margin: 48px auto;
padding: var(--s-6);
background: var(--surface);
border-radius: var(--r-lg);
box-shadow: var(--shadow-xl);
}
.size-help-win h3 {
margin: 0 0 var(--s-3);
font-size: var(--fs-xl);
}
.size-help-win p {
margin: 0 0 var(--s-5);
color: var(--ink-2);
font-size: var(--fs-sm);
line-height: 1.65;
}
.size-help-x {
position: absolute;
top: 12px;
right: 12px;
width: 30px;
height: 30px;
border: 1px solid var(--line);
border-radius: var(--r-full);
background: var(--surface);
color: var(--ink-3);
font-size: 19px;
line-height: 1;
cursor: pointer;
}
.size-help-x:hover { border-color: var(--ink); color: var(--ink); }
.size-table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-sm);
}
.size-table th {
padding: 0 0 8px;
border-bottom: 1px solid var(--line);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--ink-4);
text-align: left;
}
.size-table td {
padding: 10px 0;
border-bottom: 1px solid var(--line-2);
color: var(--ink);
}
.size-table tr:last-child td { border-bottom: 0; }
/* ---------- 25.6 odzivnost ---------- */
/* Glava je z ikono namesto polja spet štirielementna, zato posebnih pravil
za prelom vrstice (razdelek 25.7, odstranjen 22.8.2026) ni več treba. */
@media (max-width: 620px) {
.list-tools {
gap: var(--s-3);
padding-inline: var(--s-4);
}
/* Meni se odpre pod celo širino, da so možnosti dosegljive s palcem. */
.lt-drops { flex: 1 1 100%; }
.lt-drop { flex: 1 1 0; }
.lt-drop > summary { padding-right: 34px; }
.lt-menu {
left: 0;
right: 0;
min-width: 0;
}
.lt-count { flex: 1 1 100%; }
.so-win {
width: calc(100% - 24px);
margin-top: 96px; /* pod glavo, da polje ne sede čeznjo */
}
.so-form input { height: 54px; font-size: var(--fs-base); }
.so-go { top: 7px; }
.search-page { padding-inline: var(--s-4); }
.search-page-form { flex-direction: column; }
}
/* =====================================================================
26 POTRDITVENA POLJA IN IZBIRNI GUMBI — enoten videz, 23.8.2026
Prej je bila vsaka skupina drugačna: sistemska kljukica z `accent-color`
pri soglasjih, sistemski radio v karticah za dostavo in plačilo, isti
sistemski radio pa tudi pri izbiri »prijava / nakup kot gost«. Videz se
je razlikoval med brskalniki in med sklopi.
Zdaj so trije vzorci, vsi z **ohranjenim sistemskim poljem** (skrito, a
še vedno v obrazcu, z istim `name`, `id` in `value` — zato se ni bilo
treba dotakniti nobene skripte niti obdelave na strežniku):
.pill-group izbira med kratkimi možnostmi (pilule)
.switch-row samostojni da/ne (pill stikalo)
.check-row soglasje z daljšim besedilom (isto stikalo, riše ga oznaka)
.opt kartica z nazivom, opisom in ceno (pilula z lučko)
Polja NE skrivamo z `display:none` — tak element izpade iz zaporedja
tipkovnice in ga bralnik zaslona preskoči. Ostane na mestu, prosojen in
brez velikosti, zato je še vedno dosegljiv s tabulatorjem; obroč ob
fokusu nariše soseda oznaka (`:focus-visible + label`).
===================================================================== */
.pill-group input[type="radio"],
.pill-group input[type="checkbox"],
.switch-row input[type="checkbox"],
.check-row input[type="checkbox"],
.check-option input[type="checkbox"],
.opt input[type="radio"],
.co-cupon-gift input[type="radio"] {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
opacity: 0;
pointer-events: none;
}
/* ---------- 26.1 pilule (izbira med možnostmi) ---------- */
.pill-group {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
}
.pill-group label {
display: inline-flex;
align-items: center;
gap: var(--s-2);
margin: 0 !important;
padding: 10px 18px;
border: 1px solid var(--line);
border-radius: var(--r-full);
background: var(--surface);
font-size: var(--fs-base);
font-weight: 500 !important;
color: var(--ink-2);
line-height: 1.2;
cursor: pointer;
user-select: none;
transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.pill-group label:hover {
border-color: var(--ink-4);
color: var(--ink);
}
.pill-group input:checked + label {
background: var(--ink);
border-color: var(--ink);
color: #fff;
}
.pill-group input:focus-visible + label {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
/* ---------- 26.2 pill stikalo (samostojni da/ne) ---------- */
.switch-row {
display: flex;
margin-bottom: var(--s-3);
}
.switch-row label {
display: inline-flex;
align-items: center;
gap: var(--s-3);
margin: 0 !important;
font-size: var(--fs-sm);
font-weight: 400 !important;
color: var(--ink-2);
line-height: 1.5;
cursor: pointer;
user-select: none;
}
.sw {
flex: none;
position: relative;
width: 42px;
height: 24px;
border-radius: var(--r-full);
background: #d7dbe0;
transition: background .18s var(--ease);
}
.sw::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
border-radius: var(--r-full);
background: #fff;
box-shadow: 0 1px 3px rgba(18, 21, 26, .28);
transition: transform .18s var(--ease);
}
.switch-row input:checked + label .sw {
background: var(--brand);
}
.switch-row input:checked + label .sw::after {
transform: translateX(18px);
}
.switch-row input:focus-visible + label .sw {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
.switch-row label:hover .sw {
background: #c6ccd3;
}
.switch-row input:checked + label:hover .sw {
background: var(--brand-dark);
}
/* ---------- 26.3 soglasja (pogoji, GDPR) ---------- */
/* POPRAVEK 23.8.2026: soglasji sta bili edini kontroli, ki sta ostali
kvadratni kljukici, in sta v obrazcu izstopali — tik nad njima je stikalo
za »Račun želim na podjetje«. Zdaj je vzorec isti kot pri `.switch-row`,
le da ga tu nariše kar oznaka (`::before` = zaslonka, `::after` = gumbek),
ker predloge s soglasji nimajo `` in jih zato ni bilo
treba spreminjati — tudi tistih v starem nakupnem toku ne. */
.check-row,
.check-option {
display: flex;
align-items: flex-start;
gap: 0;
}
.check-row label,
.check-option label {
position: relative;
display: block;
margin: 0 !important;
padding-left: 54px;
min-height: 24px;
font-size: var(--fs-sm);
font-weight: 400 !important;
color: var(--ink-2);
line-height: 1.5;
cursor: pointer;
}
/* zaslonka */
.check-row label::before,
.check-option label::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 42px;
height: 24px;
border-radius: var(--r-full);
background: #d7dbe0;
transition: background .18s var(--ease);
}
/* gumbek */
.check-row label::after,
.check-option label::after {
content: "";
position: absolute;
left: 3px;
top: 3px;
width: 18px;
height: 18px;
border-radius: var(--r-full);
background: #fff;
box-shadow: 0 1px 3px rgba(18, 21, 26, .28);
transition: transform .18s var(--ease);
}
.check-row label:hover::before,
.check-option label:hover::before {
background: #c6ccd3;
}
.check-row input:checked + label::before,
.check-option input:checked + label::before {
background: var(--brand);
}
.check-row input:checked + label:hover::before,
.check-option input:checked + label:hover::before {
background: var(--brand-dark);
}
.check-row input:checked + label::after,
.check-option input:checked + label::after {
transform: translateX(18px);
}
.check-row input:focus-visible + label::before,
.check-option input:focus-visible + label::before {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
/* ---------- 26.4 kartice možnosti (dostava, plačilo, darilo) ---------- */
/* Kartica ostane kartica (naziv, opis, cena se v pilulo ne stlačijo), a je
pilulaste oblike in ima svojo lučko namesto sistemskega radia. */
.opt,
.co-cupon-gift {
border-radius: var(--r-full);
padding-left: 46px;
position: relative;
}
.opt::before,
.co-cupon-gift::before {
content: "";
position: absolute;
left: 18px;
top: 50%;
width: 20px;
height: 20px;
margin-top: -10px;
border: 1px solid var(--line);
border-radius: var(--r-full);
background: var(--surface);
transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.opt:hover::before,
.co-cupon-gift:hover::before {
border-color: var(--ink-4);
}
.opt.is-active::before,
.co-cupon-gift.is-active::before {
border-color: var(--brand);
border-width: 6px;
box-shadow: 0 0 0 1px var(--brand);
}
.opt.is-active {
border-color: var(--brand);
background: var(--brand-tint);
}
/* Kartica brez izbirnega gumba (edino ponujeno darilo) lučke ne kaže.
Razred doda `cupon.php`; `:has()` bi bil krajši, a ga starejši brskalniki
ne poznajo in bi ostal prazen krogec. */
.co-cupon-gift-solo {
padding-left: var(--s-4);
}
.co-cupon-gift-solo::before {
display: none;
}
@media (max-width: 520px) {
.opt,
.co-cupon-gift {
border-radius: var(--r-lg);
}
}
/* =====================================================================
27 STRAN »O NAS« — Tobaccostuff, prenovljeno 25.8.2026
PRED (podedovano iz ROFI): temen fotografski hero z belim besedilom,
sivi števci, zgodba s sliko levo, ogljeno črn zaključni pas.
PO: topel gradientni hero s slikanim izdelkom (kot vstopna stran),
BORDO pas števcev, zgodba z besedilom levo in sliko desno, kartice
obljub v --brand-tint z bordo ikonami in bordo zaključni pas.
Stran teče znotraj `.cMarg`, zato pasovi NISO čez vso širino okna —
so zaobljene ploskve v širini vsebine. (Vstopna stran ima full-bleed;
tu bi to zahtevalo 100vw in s tem vodoravni preliv ob drsniku.)
===================================================================== */
/* ---------- 27.1 hero ---------- */
.ab-hero {
margin: 0 0 var(--s-7);
padding: clamp(var(--s-5), 4vw, var(--s-7));
background: var(--grad-warm);
border: 1px solid var(--line);
border-radius: var(--r-lg);
overflow: hidden;
}
.ab-hero-in {
display: grid;
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
align-items: center;
gap: clamp(var(--s-5), 4vw, var(--s-7));
}
.ab-hero-copy {
max-width: 620px;
color: var(--ink);
}
.ab-eyebrow {
display: block;
margin-bottom: var(--s-3);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--brand-dark);
}
.ab-hero-copy h1 {
margin: 0 0 var(--s-4);
font-size: clamp(var(--fs-2xl), 4.4vw, var(--fs-4xl));
line-height: 1.08;
letter-spacing: -.02em;
color: var(--ink);
}
.ab-lead {
margin: 0 0 var(--s-5);
font-size: var(--fs-lg);
line-height: 1.6;
color: var(--ink-2);
}
.ab-hero-btns {
display: flex;
flex-wrap: wrap;
gap: var(--s-3);
}
/* Na topli podlagi je drugi gumb obrobljen v barvi znamke (prej bela
različica za temen hero — ta je bila 24.8.2026 vir napake na blagajni). */
.ab-hero-btns .btn-ghost {
background: transparent;
border: 1px solid var(--brand);
color: var(--brand-dark);
}
.ab-hero-btns .btn-ghost:hover {
background: var(--brand-tint);
border-color: var(--brand-dark);
color: var(--brand-dark);
}
/* fotografija izdelka: vsebovana, belo ozadje se zlije s podlago */
.ab-hero-media img {
display: block;
width: 100%;
max-height: 380px;
object-fit: contain;
mix-blend-mode: multiply;
}
/* ---------- 27.2 števci (bordo pas) ---------- */
.ab-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-4);
margin: 0 0 var(--s-8);
padding: clamp(var(--s-5), 3vw, var(--s-6));
background: var(--brand-deep);
border-radius: var(--r-lg);
color: #fff;
}
.ab-stat {
position: relative;
text-align: center;
padding-inline: var(--s-3);
}
/* tanka ločnica med števci (ne pred prvim) */
.ab-stat + .ab-stat::before {
content: "";
position: absolute;
left: 0;
top: 10%;
height: 80%;
border-left: 1px solid rgba(255, 255, 255, .18);
}
.ab-stat-n {
display: block;
font-family: var(--font-head);
font-size: clamp(var(--fs-2xl), 3.4vw, var(--fs-3xl));
font-weight: 700;
line-height: 1.1;
color: #fff;
}
.ab-stat-l {
display: block;
margin-top: var(--s-2);
font-size: var(--fs-sm);
line-height: 1.4;
color: rgba(255, 255, 255, .78);
}
/* ---------- 27.3 zgodba ---------- */
.ab-story {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
align-items: center;
gap: clamp(var(--s-5), 5vw, var(--s-8));
margin: 0 0 var(--s-8);
}
.ab-story-media img {
display: block;
width: 100%;
max-height: 420px;
object-fit: contain;
mix-blend-mode: multiply;
}
.ab-story-copy {
min-width: 0;
}
.ab-story-text {
color: var(--ink-2);
line-height: 1.75;
}
.ab-story-text p {
margin: 0 0 var(--s-4);
}
.ab-story-text strong {
color: var(--ink);
}
.ab-story-text ul {
margin: var(--s-4) 0 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
}
/* povezave iz vsebine kot pilule */
.ab-story-text li a {
display: inline-flex;
align-items: center;
padding: 7px 14px;
border: 1px solid var(--line);
border-radius: var(--r-full);
background: var(--surface);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--ink-2);
}
.ab-story-text li a:hover {
border-color: var(--brand);
background: var(--brand-tint);
color: var(--brand-dark);
}
/* poudarjena misel — bordo rob, kot povzetek na strani izdelka */
.ab-quote {
margin: var(--s-5) 0 0;
padding: var(--s-4) var(--s-5);
background: var(--brand-tint);
border-left: 3px solid var(--brand-deep);
border-radius: var(--r);
font-family: var(--font-head);
font-size: var(--fs-md);
font-weight: 600;
line-height: 1.5;
color: var(--ink);
}
/* ---------- 27.4 obljube in ponudba ---------- */
.ab-values,
.ab-offer {
margin: 0 0 var(--s-8);
}
/* naslov sekcije levo poravnan z oranžno črtico (ne sredinsko kot prej) */
.ab-sec-head {
margin-bottom: var(--s-5);
}
.ab-h2 {
margin: 0;
font-size: clamp(var(--fs-xl), 3vw, var(--fs-2xl));
letter-spacing: -.02em;
}
.ab-h2::after {
content: "";
display: block;
width: 44px;
height: 3px;
margin-top: var(--s-3);
border-radius: var(--r-sm);
background: var(--brand);
}
.ab-sub {
max-width: 620px;
margin: var(--s-3) 0 0;
color: var(--ink-3);
line-height: 1.6;
}
.ab-value-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: var(--s-4);
}
.ab-value {
padding: var(--s-5);
background: var(--brand-tint);
border: 1px solid rgba(92, 16, 8, .10);
border-radius: var(--r-lg);
}
.ab-value-ico {
display: grid;
place-items: center;
width: 42px;
height: 42px;
margin-bottom: var(--s-4);
border-radius: var(--r);
background: var(--brand-deep);
color: #fff;
}
.ab-value-ico svg {
width: 21px;
height: 21px;
}
.ab-value h3 {
margin: 0 0 var(--s-2);
font-size: var(--fs-md);
line-height: 1.3;
}
.ab-value p,
.ab-value-txt {
margin: 0;
font-size: var(--fs-sm);
line-height: 1.65;
color: var(--ink-2);
}
/* Vsebina kartice pride iz urejevalnika, zato je lahko v — zadnji odmik
odrežemo, da so kartice enako visoke. */
.ab-value-txt p {
margin: 0 0 var(--s-2);
}
.ab-value-txt p:last-child {
margin-bottom: 0;
}
/* Vrsta kategorij ima svoje odmike z vstopne strani; tu jih ne podvajamo. */
.ab-offer .cat-rail {
margin-top: var(--s-5);
}
/* ---------- 27.5 klic k dejanju ---------- */
.ab-cta {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
align-items: center;
gap: clamp(var(--s-5), 4vw, var(--s-7));
margin: 0 0 var(--s-8);
padding: clamp(var(--s-6), 5vw, var(--s-7)) clamp(var(--s-5), 4vw, var(--s-7));
background: var(--brand-deep);
border-radius: var(--r-lg);
color: #fff;
}
.ab-cta h2 {
margin: 0 0 var(--s-3);
font-size: clamp(var(--fs-xl), 3vw, var(--fs-2xl));
letter-spacing: -.02em;
color: #fff;
}
.ab-cta p {
margin: 0 0 var(--s-5);
color: rgba(255, 255, 255, .80);
line-height: 1.6;
}
/* podatki podjetja v beli kartici na bordo podlagi */
.ab-cta-firma {
display: flex;
flex-direction: column;
gap: 4px;
padding: var(--s-5);
background: var(--surface);
border-radius: var(--r);
font-size: var(--fs-sm);
color: var(--ink-3);
line-height: 1.6;
}
.ab-firma-l {
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--brand-dark);
}
.ab-cta-firma strong {
color: var(--ink);
font-size: var(--fs-base);
}
.ab-cta-firma a {
color: var(--ink-2);
}
.ab-cta-firma a:hover {
color: var(--brand-dark);
text-decoration: underline;
}
/* ---------- 27.6 odzivnost ---------- */
@media (max-width: 900px) {
.ab-hero-in {
grid-template-columns: 1fr;
}
/* na telefonu slika pod besedilom, a nižja */
.ab-hero-media img {
max-height: 260px;
}
.ab-stats {
grid-template-columns: repeat(2, 1fr);
gap: var(--s-5);
}
/* pri dveh stolpcih ločnica pred tretjim števcem odpade */
.ab-stat:nth-child(odd)::before {
display: none;
}
.ab-story {
grid-template-columns: 1fr;
}
.ab-story-media img {
max-height: 300px;
}
.ab-cta {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.ab-stats {
grid-template-columns: 1fr;
text-align: left;
}
.ab-stat {
display: flex;
align-items: baseline;
gap: var(--s-3);
text-align: left;
padding-inline: 0;
}
.ab-stat + .ab-stat::before {
display: none;
}
.ab-stat + .ab-stat {
padding-top: var(--s-4);
border-top: 1px solid rgba(255, 255, 255, .18);
}
.ab-stat-l {
margin-top: 0;
}
.ab-hero-btns .btn {
flex: 1 1 100%;
text-align: center;
}
}
/* =====================================================================
28 STRAN ZNAMKE (25.8.2026) — Powermatic in Dark Horse
Predstavitev znamke + seznam njenih izdelkov. Namen je SEO, zato je
besedilo odprto (brez harmonike) in v berljivi širini.
===================================================================== */
.brand-head {
margin: 0 0 var(--s-6);
padding: clamp(var(--s-5), 4vw, var(--s-7));
background: var(--grad-warm);
border: 1px solid var(--line);
border-radius: var(--r-lg);
}
/* kadar je pod stranjo naložena slika, gre besedilo levo, slika desno */
.brand-head.has-img {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
align-items: center;
gap: clamp(var(--s-5), 4vw, var(--s-7));
}
.brand-head-media img {
display: block;
width: 100%;
max-height: 260px;
object-fit: contain;
mix-blend-mode: multiply;
}
.brand-eyebrow {
display: block;
margin-bottom: var(--s-3);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--brand-dark);
}
.brand-head h1 {
margin: 0;
font-size: clamp(var(--fs-2xl), 4vw, var(--fs-4xl));
line-height: 1.1;
letter-spacing: -.02em;
}
.brand-lead {
max-width: 720px;
margin: var(--s-4) 0 0;
font-size: var(--fs-lg);
line-height: 1.6;
color: var(--ink-2);
}
/* LOGOTIP ZNAMKE (25.8.2026): logotipi so v svojih barvah (Powermatic rdeč,
Dark Horse črno-rdeč), zato stoji na beli ploščici — na topli podlagi bi se
izgubil. Datoteka: images/brands/.svg|png|webp|jpg. */
.brand-logo-plate {
display: grid;
place-items: center;
padding: var(--s-5);
min-height: 150px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
}
.brand-logo-plate .brand-logo {
width: auto;
max-width: 100%;
max-height: 110px;
object-fit: contain;
mix-blend-mode: normal;
}
/* ---------- besedilo znamke ---------- */
.brand-text {
max-width: 820px;
margin: 0 0 var(--s-8);
color: var(--ink-2);
line-height: 1.75;
}
/* uvodni odstavek iz »Dodatne vsebine → Vsebina« (25.8.2026) */
.brand-intro {
margin: 0 0 var(--s-5);
padding: var(--s-4) var(--s-5);
background: var(--brand-tint);
border-left: 3px solid var(--brand);
border-radius: var(--r);
color: var(--ink-2);
}
.brand-intro p:last-child {
margin-bottom: 0;
}
.brand-text h2 {
margin: var(--s-6) 0 var(--s-3);
font-size: var(--fs-xl);
letter-spacing: -.02em;
color: var(--ink);
}
.brand-text h2:first-child {
margin-top: 0;
}
.brand-text p {
margin: 0 0 var(--s-4);
}
.brand-text strong {
color: var(--ink);
}
/* seznami dobijo iste oranžne kljukice kot opis izdelka (razdelek 11) */
/* ---------- seznam izdelkov znamke ---------- */
.brand-sec-head {
display: flex;
align-items: center;
gap: var(--s-3);
margin-bottom: var(--s-5);
}
.brand-sec-head h2 {
margin: 0;
font-size: clamp(var(--fs-xl), 3vw, var(--fs-2xl));
letter-spacing: -.02em;
}
.brand-sec-head h2::after {
content: "";
display: block;
width: 44px;
height: 3px;
margin-top: var(--s-3);
border-radius: var(--r-sm);
background: var(--brand);
}
/* število izdelkov v bordo pilulici */
.brand-count {
align-self: flex-start;
padding: 2px 10px;
border-radius: var(--r-full);
background: var(--brand-deep);
color: #fff;
font-size: var(--fs-xs);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.brand-products {
margin-bottom: var(--s-8);
}
/* znamka na strani izdelka je zdaj povezava na to stran */
a.prod-brand:hover {
background: var(--brand-deep-2);
color: #fff;
}
@media (max-width: 900px) {
.brand-head.has-img {
grid-template-columns: 1fr;
}
.brand-head-media img {
max-height: 200px;
}
}
/* =====================================================================
29 ZALOGA IN PREDVIDENA DOSTAVA NA IZDELKU (25.8.2026)
PRED: vrstici »✔ Na zalogi« in »Rok dobave: 3-7 delovnih dni«.
PO: sklop s tremi vrsticami — dejansko število kosov, konkretna datuma
dostave in odrez za današnjo odpremo — ter droben pripis o oceni.
===================================================================== */
.prod-avail {
/* ⚠️ `display: block` je nujen: sklop stoji na mestu, kjer starejše pravilo
(za prejšnji `.no-stock`) postavi `display:flex; flex-wrap:wrap` — brez
tega sta se zaloga in odprema znašli v isti vrstici. */
display: block;
margin-top: var(--s-5);
padding: var(--s-4) var(--s-5);
background: var(--bg-2);
border: 1px solid var(--line-2);
border-radius: var(--r);
}
.pa-row {
display: flex;
align-items: flex-start;
gap: var(--s-3);
padding: var(--s-2) 0;
font-size: var(--fs-base);
line-height: 1.5;
color: var(--ink-2);
}
.pa-row strong {
color: var(--ink);
font-weight: 600;
}
/* ZALOGA V PILULI (25.8.2026): stanje zaloge je poudarek, zato stoji v
pilulici — zelena, kadar je izdelek na zalogi, rdečkasta, kadar ni.
`inline-flex` poskrbi, da se pilula prilega besedilu in ne razteza čez
ves sklop (`.pa-row` je sicer blokovni flex). */
.pa-stock,
.pa-out {
display: inline-flex;
align-items: center;
gap: var(--s-2);
padding: 6px 12px;
margin-bottom: var(--s-2);
border-radius: var(--r-full);
font-size: var(--fs-sm);
font-weight: 700;
line-height: 1.3;
}
.pa-stock {
background: var(--ok-tint);
color: var(--ok);
}
.pa-out {
background: var(--err-tint);
color: var(--err);
}
/* v pilulici je ikona manjša in poravnana z besedilom */
.pa-stock .pa-ico,
.pa-out .pa-ico {
width: 15px;
height: 15px;
margin-top: 0;
}
.pa-cutoff {
font-size: var(--fs-sm);
color: var(--ink-3);
}
/* ikone so maske v barvi besedila (isti vzorec kot .contact-ico) */
.pa-ico {
flex: none;
width: 18px;
height: 18px;
margin-top: 2px;
background: currentColor;
}
.pa-ico-ok {
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pa-ico-no {
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pa-ico-truck {
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3z'/%3E%3Cpath d='M14 9h4l3 3v4h-7z'/%3E%3Ccircle cx='7' cy='18' r='1.8'/%3E%3Ccircle cx='17.5' cy='18' r='1.8'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3z'/%3E%3Cpath d='M14 9h4l3 3v4h-7z'/%3E%3Ccircle cx='7' cy='18' r='1.8'/%3E%3Ccircle cx='17.5' cy='18' r='1.8'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pa-ico-clock {
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* droben pripis, da so datumi ocena */
.pa-note {
/* 25.8.2026: manjši zgornji razmik — pripis je bil preveč odmaknjen */
margin: var(--s-3) 0 0;
padding-top: var(--s-2);
border-top: 1px solid var(--line-2);
font-size: var(--fs-xs);
line-height: 1.5;
color: var(--ink-4);
}
/* =====================================================================
30. ODJAVA OD OBVESTIL (26.8.2026)
Stran /odjava?t=… — povezavo nosi noga vsake mailing kampanje.
===================================================================== */
.unsub {
display: flex;
justify-content: center;
padding: var(--s-6) var(--s-3) var(--s-7);
}
.unsub-card {
width: 100%;
max-width: 520px;
padding: var(--s-6) var(--s-5);
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r);
box-shadow: var(--sh-1);
text-align: center;
}
.unsub-ico {
width: 46px;
height: 46px;
margin-bottom: var(--s-3);
color: var(--brand);
}
.unsub-ico.is-ok { color: #15803d; }
.unsub-ico.is-err { color: var(--brand-deep); }
.unsub-card h1 {
margin: 0 0 var(--s-2);
font-family: var(--font-head);
font-size: 1.5rem;
}
.unsub-card p {
margin: 0 0 var(--s-4);
color: var(--ink-2);
line-height: 1.65;
}
.unsub-back {
display: block;
margin-top: var(--s-3);
color: var(--ink-3);
font-size: .9rem;
}
.unsub-back:hover { color: var(--brand); }
/* =====================================================================
31 MOBILNI VIDEZ (26.8.2026)
Zahteva: »Vse kar je v karticah naj bo 100vw. Da nimam dvojnih paddingov
in marginov na telefonu ob robu zaslona.«
Kako: vsebnik strani (`.cMarg`, `.contact-page`, `.checkout` …) obdrži svoj
odmik — od njega živijo naslovi, drobtinice in besedilo. KARTICE ta odmik
izničijo z negativnim robom in sežejo do roba zaslona; za zamik besedila
poskrbi njihov lastni notranji odmik. Tako ni dvojnega roba.
Odmik vsebnika je pod 620 px `--s-4` (16 px) — zbran je v `--mob-pad`,
da je vrednost na enem mestu.
===================================================================== */
@media (max-width: 620px) {
:root { --mob-pad: var(--s-4); }
/* --- posamezne kartice do roba zaslona --- */
/* ⚠️ `.contact-tile` in `.prod-perk` NISTA tu — sta otroka mreže, ki odmik
izniči sama; z lastnim negativnim robom bi ga izničila dvakrat in
vsebina bi se prilepila na rob zaslona. */
.co-card,
.contact-card,
.contact-map,
.contact-b2b,
.prod-avail,
.prod-ask,
.rev-form-box,
.rev-item,
.prod-legal,
.gal-video-box,
.showDesc details {
margin-inline: calc(var(--mob-pad) * -1);
/* Notranji odmik poenotimo z odmikom strani: kartica sicer sega do roba
zaslona, njena vsebina pa mora ostati enako zamaknjena kot besedilo
nad njo — sicer se zdi, da je »prilepljena« na rob. */
padding-inline: var(--mob-pad);
border-radius: 0;
border-left: 0;
border-right: 0;
}
/* --- mreže kartic: odmik izniči mreža, kartice ostanejo cele --- */
/* ⚠️ `.features` (izpostave) NI tu: podlaga sekcije je že čez vso širino,
negativni rob bi samo potisnil BESEDILO čez levi rob zaslona. */
.contact-tiles,
.prod-perks,
.hp-perks,
.cMarg > .product-list,
.cMarg > .products-grid {
margin-inline: calc(var(--mob-pad) * -1);
}
/* enoten odmik besedila v izpostavah in vrsticah vstopne strani */
.feature,
.hp-row {
padding-inline: var(--mob-pad);
}
/* Prednosti: mreža ima privzeto 24 px odmika, zato so se kartice ustavile
8 px pred robom (24 − 16). Odmik poenotimo z odmikom strani: kartica se
tako začne točno na robu zaslona, njen lastni odmik pa besedilo zamakne
enako kot drugod. (Z `padding: 0` bi kartica segala 16 px ČEZ rob in
besedilo bi se zaletelo v rob.) */
.hp-perks { padding-inline: var(--mob-pad); }
/* Vodoravna trakova (izdelki kategorije, kategorije) do roba zaslona.
Kartice imajo svoj notranji odmik, zato besedilo ostane berljivo. */
.hp-row-list,
.categories {
margin-inline: calc(var(--mob-pad) * -1);
padding-inline: 0;
}
.hp-row-list .product-item:first-child,
.categories .category-item:first-child {
scroll-margin-left: 0;
}
.contact-tiles > *,
.prod-perks > *,
.hp-perks > * {
padding-inline: var(--mob-pad);
border-radius: 0;
border-left: 0;
border-right: 0;
}
/* --- seznam izdelkov: dve koloni od roba do roba --- */
.cMarg > .product-list,
.cMarg > .products-grid {
gap: 1px;
background: var(--line); /* razmik med karticami je videti kot tanka črta */
}
.product-item {
border-radius: 0;
border: 0;
}
/* Stopnjevalnik količine na kartici odpade: pri dveh kolonah je gumb
»V košarico« sicer odrezan (»košaric«). Količino kupec uredi v košarici. */
.product-item .qa-qty { display: none; }
.product-item .qa-row { gap: 0; }
.product-item .quick-add-btn {
width: 100%;
justify-content: center;
}
/* --- galerija in opis na strani izdelka --- */
.product-show > .showImg,
.showImg {
margin-inline: calc(var(--mob-pad) * -1);
border-radius: 0;
}
/* --- stran izdelka: en sam odmik namesto treh -----------------------
`.cMarg` (16) + `.product-show` (24) + `.showDesc` sta se seštevali,
zato so kartice ležale 32 px od roba in negativni rob jih je pripeljal
le do 16 px. Notranja ovoja zato na telefonu odmika ne dodajata —
edini odmik da `.cMarg`, kartice pa ga izničijo. */
.product-show {
position: static; /* da ne reže lepljive vrstice */
padding-inline: 0;
}
.showDesc,
.showImg {
padding-inline: 0;
}
.showImg img { padding: var(--s-5); }
/* --- HERO: slika in besedilo eno pod drugim -----------------------
PRED: besedilo je bilo absolutno čez sliko (na namizju levo, kjer je
gradient prazen). Na telefonu je 34-odstotni levi odmik slike odpadel
premalo prostora, zato je naslov ležal ČEZ strojček in bil neberljiv.
PO: rezina je navpična — slika zgoraj (v celoti vidna), besedilo pod
njo na topli podlagi. Nič se ne prekriva. */
.hero-slide {
display: flex;
flex-direction: column;
background: var(--grad-warm);
}
.hero .hero-media img,
.hero .hero-slide .hero-img {
height: 240px;
padding: var(--s-4) var(--s-4) 0;
object-position: center;
}
.hero-copy {
position: static;
transform: none;
max-width: none;
padding: var(--s-4) var(--mob-pad) var(--s-6);
text-align: left;
}
.hero-title {
font-size: 1.65rem;
line-height: 1.15;
}
.hero-text p {
font-size: .95rem;
line-height: 1.5;
}
.hero-btn {
width: 100%;
justify-content: center;
}
/* pikice pod vsebino, ne čez sliko */
.hero-dots {
position: static;
transform: none;
justify-content: center;
padding-bottom: var(--s-4);
}
.hero-dot { background: rgba(36, 31, 26, .22); }
.hero-dot.is-active { background: var(--brand); }
}
/* ---------------------------------------------------------------------
31.1 LEPLJIVA VRSTICA ZA NAKUP (samo telefon)
Pokaže se, ko pravi gumb »V košarico« zdrsne iz vidnega polja.
--------------------------------------------------------------------- */
.buybar {
display: none;
}
@media (max-width: 620px) {
.buybar {
display: block;
position: fixed;
left: 0;
right: 0;
bottom: 0;
/* nad gumbom »na vrh« (#scroller, z 70), a pod prekrivalom menija (80) */
z-index: 75;
padding: 10px var(--s-4) calc(10px + env(safe-area-inset-bottom, 0px));
/* NEPROSOJNO: pri rgba + backdrop-filter je skozi vrstico presevala
vsebina pod njo (npr. okrogla puščica harmonike v opisu). */
background: var(--surface);
border-top: 1px solid var(--line);
box-shadow: 0 -6px 20px rgba(36, 31, 26, .1);
/* skrita, dokler je pravi gumb viden — brez skoka postavitve */
transform: translateY(110%);
opacity: 0;
pointer-events: none;
transition: transform .22s var(--ease), opacity .22s var(--ease);
}
.buybar.is-on {
transform: none;
opacity: 1;
pointer-events: auto;
}
.buybar-in {
display: flex;
align-items: center;
gap: var(--s-3);
}
.buybar-txt {
flex: 1;
min-width: 0;
line-height: 1.25;
}
.buybar-name {
display: block;
font-size: .74rem;
color: var(--ink-3);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.buybar-price {
display: block;
font-size: 1.05rem;
font-weight: 700;
color: var(--ink);
}
.buybar-btn {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
font-size: .95rem;
}
.buybar-btn svg { width: 18px; height: 18px; }
/* gumb »na vrh« in piškotkov trak se umakneta nad lepljivo vrstico */
body.has-buybar #scroller { bottom: calc(var(--s-5) + 62px); }
body.has-buybar .cookie-info,
body.has-buybar #cookieInfo { bottom: calc(var(--s-4) + 62px); }
}
/* ---------------------------------------------------------------------
31.2 KAZALNIK POMIKA pri vodoravnih trakovih (26.8.2026)
Na telefonu ni puščic, zato brez znaka ni videti, da se da potegniti
naprej. Črta pod trakom: širina obarvanega dela = kolikšen del traku je
viden, njegov položaj = kje smo. Element doda shop.js, samo kadar je
trak dejansko širši od zaslona.
--------------------------------------------------------------------- */
.rail-ind { display: none; }
@media (max-width: 620px) {
.rail-ind {
display: block;
height: 3px;
margin: var(--s-3) var(--mob-pad) 0;
background: var(--line);
border-radius: var(--r-full);
overflow: hidden;
}
.rail-ind span {
display: block;
height: 100%;
min-width: 18px;
background: var(--brand);
border-radius: var(--r-full);
}
}
/* =====================================================================
HERO — DVOSTOLPIČNA POSTAVITEV KOT PRI IZPOSTAVAH (27.8.2026)
PRED: besedilo je bilo absolutno položeno ČEZ sliko, slika pa je imela
34 % levega odmika, da izdelek ni bil pod besedilom. Posledica: velik
prazen prostor med besedilom in izdelkom, slika pa optično majhna.
PO: rezina je mreža — besedilo levo, slika desno, tako kot v izpostavah
(.feature). Slika dobi širši stolpec in polno višino, razmik je en sam
(gap), topla podlaga pa se preseli na .hero, da teče čez vso širino.
Velja samo od 901 px navzgor; na telefonu ostane navpična postavitev
(slika zgoraj, besedilo pod njo).
===================================================================== */
@media (min-width: 901px) {
.hero {
background: var(--grad-warm);
}
.hero-slide {
display: grid;
grid-template-columns: 1fr 1.2fr; /* slika je večja od besedila */
align-items: center;
gap: var(--s-5);
/* ⚠️ rezina MORA ostati čez vso širino (`min-width:100%` zaradi
drsnika), zato vsebine ne omejimo z max-width, ampak s stranskim
odmikom: na širokih zaslonih se poravna s preostalo vsebino strani. */
padding-block: var(--s-6);
padding-inline: max(var(--s-5), calc((100% - var(--container)) / 2));
}
/* podlago nosi .hero, zato je stolpec s sliko prozoren (kot .feature-media).
V HTML je slika PRED besedilom (zaradi mobilne postavitve), zato jo tu
prestavimo v drugi stolpec — besedilo levo, slika desno, kot pri
prvi izpostavi. */
.hero .hero-media {
background: transparent;
border-radius: var(--r-lg);
overflow: hidden;
order: 2;
}
.hero-copy {
order: 1;
}
.hero .hero-media img,
.hero .hero-slide .hero-img {
width: 100%;
height: clamp(380px, 42vw, 560px);
object-fit: contain;
object-position: center;
padding: 0; /* prej 4% 4% 4% 34% */
}
/* besedilo ni več prekrivno */
.hero-copy {
position: static;
transform: none;
width: auto;
max-width: none;
padding-inline: 0;
}
.hero-title {
max-width: 18ch;
}
}
/* =====================================================================
32 PRIJAVA Z GOOGLOM (27.8.2026)
Gumb izriše Googlova knjižnica; naše je le ločilo, širina in napaka.
===================================================================== */
.g-login {
margin-top: var(--s-4);
}
.g-login-sep {
display: flex;
align-items: center;
gap: var(--s-3);
margin-bottom: var(--s-3);
color: var(--ink-3);
font-size: .85rem;
}
.g-login-sep::before,
.g-login-sep::after {
content: "";
flex: 1;
height: 1px;
background: var(--line);
}
/* Googlov gumb je iframe s fiksno širino — sredinsko poravnamo ovoj */
.g-login-btn {
display: flex;
justify-content: center;
}
.g-login-err {
margin: var(--s-3) 0 0;
color: var(--brand-deep);
font-size: .9rem;
text-align: center;
}
/* =====================================================================
36 POLJE ZA TELEFON (2.9.2026)
---------------------------------------------------------------------
Klicna predpona stoji V polju kot nespremenljiva oznaka, da je kupec ne
more izbrisati; vnosno polje obdrži svoj videz iz obrazca, ki ga vsebuje
(blagajna, `inputF` v računu, kontaktni obrazec), zato tu spreminjamo
samo notranji odmik — tega izmeri in nastavi `scripts_js/tel.js`, ker so
predpone različno dolge (+1 … +386).
===================================================================== */
.tel-field {
position: relative;
display: block;
width: 100%;
/* Razmiki so tu, ker jih potrebujeta OBA — CSS za ločnico in
`scripts_js/tel.js` za notranji odmik polja. JS ju prebere iz
izračunanega sloga, da števili nista zapisani na dveh mestih.
Prej je bila ločnica 4 px za predpono, besedilo pa samo 2 px za
ločnico — polje je bilo natlačeno. */
--tel-gap-pre: 10px; /* predpona -> ločnica */
--tel-gap-post: 13px; /* ločnica -> vpisana številka */
}
.tel-pre {
position: absolute;
top: 50%;
left: 12px; /* JS popravi na dejanski odmik polja */
transform: translateY(-50%);
z-index: 2;
color: var(--ink-2);
font-size: inherit;
font-weight: 500;
font-variant-numeric: tabular-nums;
letter-spacing: .01em;
white-space: nowrap;
pointer-events: none; /* klik gre skozi v polje */
user-select: none;
transition: color .15s var(--ease);
}
.tel-field .tel-input {
width: 100%;
letter-spacing: .02em;
}
/* ločnica med predpono in vpisanim delom — nizka črtica, poravnana na
sredino besedila, ne čez vso višino polja */
.tel-pre::after {
content: "";
position: absolute;
right: calc(var(--tel-gap-pre) * -1);
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 1.5em;
background: var(--line);
}
/* ob fokusu naj se predpona ne zdi izklopljena (ločnica ostane enaka —
svetlejša bi ob poudarjenem polju izginila) */
.tel-field:focus-within .tel-pre { color: var(--ink); }
/* stanje: prekratka ali predolga številka */
.tel-field.is-bad .tel-input {
border-color: var(--err);
background: #fdf6f7;
}
.tel-field.is-ok .tel-input {
border-color: var(--ok);
}
/* barva predpone naj sledi stanju, da je oznaka del polja, ne nalepka */
.tel-field.is-bad .tel-pre { color: var(--err); }
.tel-field.is-ok .tel-pre { color: var(--ink-2); }