/* =========================================================================
vege-dobro — sodobni dizajn sloj (Faza 1: temelj, glava, noga, navigacija)
Nalaga se ZA css.css/media.css, zato prevlada. Uporablja nove `vd-` razrede.
Topel & organski značaj: zelena znamka, zemeljski toni, mehke sence.
========================================================================= */
:root {
/* Znamka — zelena */
--vd-green: #5f9f42;
--vd-green-600: #4c8849;
--vd-green-700: #3c6d3a;
--vd-green-100: #eef5e8;
--vd-green-050: #f5f9f1;
/* Poudarek — topla oranžna */
--vd-accent: #f2922e;
--vd-accent-600: #e07d16;
--vd-accent-100: #fdefdd;
/* Nevtralni zemeljski toni */
--vd-bg: #faf8f3;
--vd-surface: #ffffff;
--vd-surface-2: #f6f3ec;
--vd-border: #e7e2d6;
--vd-border-strong:#d8d2c3;
--vd-ink: #2b2a25;
--vd-ink-soft: #5c584e;
--vd-muted: #918b7d;
/* Stanja */
--vd-ok: #4c8849;
--vd-danger: #c0442f;
/* Oblika */
--vd-radius: 16px;
--vd-radius-sm: 10px;
--vd-radius-pill: 999px;
--vd-shadow-sm: 0 1px 2px rgba(43, 42, 37, 0.06);
--vd-shadow: 0 6px 20px -8px rgba(43, 42, 37, 0.18), 0 2px 6px -3px rgba(43, 42, 37, 0.10);
--vd-shadow-lg: 0 24px 50px -16px rgba(43, 42, 37, 0.28);
--vd-container: 1280px;
--vd-header-h: 84px;
/* Podlaga za fotografije izdelkov — opazno topla kremna, da se belo ozadje slike
prek mix-blend-mode:multiply jasno zlije vanjo (ne izgleda več belo). */
--vd-photo-bg: #efe7d3;
--vd-font: 'Cabin Condensed', system-ui, -apple-system, 'Segoe UI', sans-serif;
--vd-font-head: 'Fraunces', Georgia, serif;
}
/* .marg je imel overflow:hidden, kar lomi position:sticky za vse potomce.
flow-root ohrani zajem plavajočih otrok (kot prej), a brez rezanja → sticky dela. */
.marg { overflow: visible !important; display: flow-root; }
/* ---------- Osnovni pripomočki ---------- */
.vd-container {
width: 100%;
max-width: none; /* ozadje/okvir 100vw; vsebino odmakne padding */
margin: 0 auto;
padding: 0 clamp(16px, 3vw, 40px);
box-sizing: border-box;
}
.vd-only-desktop { display: initial; }
.vd-only-mobile { display: none; }
/* Skrij staro navigacijsko drobovje, ki ga nadomeščamo (če se pojavi) */
.vd-header *, .vd-footer * { box-sizing: border-box; }
/* =========================================================================
GLAVA
========================================================================= */
.vd-header {
position: relative;
z-index: 200;
background: var(--vd-surface);
font-family: var(--vd-font);
}
/* Zgornja vrstica: moto | telefon, socialni, račun */
.vd-topbar {
background: linear-gradient(90deg, var(--vd-green-700) 0%, var(--vd-green-600) 58%, var(--vd-green) 100%);
color: #fff;
font-size: 13.5px;
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .10);
}
.vd-topbar a { color: #fff; text-decoration: none; }
.vd-topbar a:hover { color: #fff; opacity: .82; }
.vd-topbar-in {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; min-height: 46px;
}
.vd-topbar-moto {
font-weight: 600; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 8px;
}
.vd-topbar-moto::before { content: "🌿"; font-size: 14px; }
/* Levi del vrhnje vrstice: moto + spustni meni »Vege&Dobro« (rubrike O podjetju) */
.vd-topbar-left { display: inline-flex; align-items: center; gap: 18px; min-width: 0; }
.vd-topbar-about { position: relative; }
.vd-about-trigger {
display: inline-flex; align-items: center; gap: 5px;
background: rgba(255, 255, 255, .14); border: 0; border-radius: var(--vd-radius-pill);
color: #fff; font: inherit; font-weight: 700; cursor: pointer; padding: 5px 13px;
transition: background .15s;
}
.vd-about-trigger:hover, .vd-topbar-about.is-open .vd-about-trigger { background: rgba(255, 255, 255, .24); }
.vd-about-caret { width: 13px; height: 13px; display: block; transition: transform .2s ease; }
.vd-topbar-about.is-open .vd-about-caret { transform: rotate(180deg); }
.vd-about-menu {
position: absolute; top: calc(100% + 10px); left: 0; z-index: 320;
min-width: 210px; background: var(--vd-surface); border: 1px solid var(--vd-border);
border-radius: var(--vd-radius); box-shadow: var(--vd-shadow-lg); padding: 8px;
display: none; flex-direction: column; gap: 2px;
}
.vd-about-menu::before {
content: ""; position: absolute; top: -6px; left: 22px; width: 11px; height: 11px;
background: var(--vd-surface); border-left: 1px solid var(--vd-border); border-top: 1px solid var(--vd-border);
transform: rotate(45deg);
}
.vd-topbar-about.is-open .vd-about-menu { display: flex; animation: vd-about-in .16s ease; }
.vd-about-menu a {
color: var(--vd-ink) !important; text-decoration: none; font-weight: 600; font-size: 14px;
padding: 9px 12px; border-radius: 9px; opacity: 1 !important; white-space: nowrap; line-height: 1.2;
}
.vd-about-menu a:hover { background: var(--vd-green-050); color: var(--vd-green-700) !important; }
@keyframes vd-about-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.vd-topbar-right { display: flex; align-items: center; gap: 20px; }
.vd-topbar-contact { display: inline-flex; align-items: center; gap: 20px; }
.vd-top-phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.vd-top-phone svg { width: 16px; height: 16px; display: block; }
.vd-socials { display: inline-flex; align-items: center; gap: 14px; }
.vd-socials a { display: inline-flex; color: #fff; transition: opacity .15s; }
.vd-socials a:hover { opacity: .75; }
.vd-socials svg { width: 19px; height: 19px; display: block; }
/* Telefon in račun kot subtilni stekleni tabletki (desktop + mobilnik) */
.vd-top-phone, .vd-account {
border-radius: var(--vd-radius-pill); background: rgba(255, 255, 255, .14);
padding: 6px 15px; transition: background .15s;
}
.vd-top-phone:hover, .vd-account:hover { background: rgba(255, 255, 255, .22); }
.vd-account { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
a.vd-account { text-decoration: none; cursor: pointer; } /* cela tabletka je povezava */
.vd-account-me { display: inline-flex; align-items: center; gap: 8px; }
.vd-account a { font-weight: 600; }
.vd-account a:hover { opacity: 1; }
.vd-account .sep { opacity: .4; }
.vd-account .vd-ico-user { width: 17px; height: 17px; display: block; opacity: .9; }
/* Glavna vrstica: logo | iskanje | košarica + burger */
.vd-header-main {
display: flex; align-items: center; gap: clamp(16px, 3vw, 36px);
min-height: var(--vd-header-h);
}
.vd-logo { flex: none; display: inline-flex; align-items: center; }
.vd-logo img { height: 62px; width: auto; display: block; }
.vd-search {
flex: 1 1 auto; position: relative; max-width: 380px;
}
.vd-search-input {
width: 100%; height: 48px; margin: 0 !important; float: none !important; box-sizing: border-box;
border: 1.5px solid var(--vd-border-strong);
background: var(--vd-surface-2); border-radius: var(--vd-radius-pill);
padding: 0 20px 0 48px; font-family: var(--vd-font); font-size: 16px; color: var(--vd-ink);
outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
.vd-search-ico {
position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
width: 20px; height: 20px; color: var(--vd-muted); pointer-events: none; z-index: 2;
}
.vd-search-ico svg { width: 100%; height: 100%; display: block; }
.vd-search:focus-within .vd-search-ico { color: var(--vd-green); }
.vd-search-input::placeholder { color: var(--vd-muted); }
.vd-search-input:focus {
border-color: var(--vd-green);
background: var(--vd-surface);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--vd-green) 16%, transparent);
}
/* Rezultati našeptavalnika (premagamo legacy suggest-search.css) */
.vd-search #demo_list_id {
position: absolute; left: 0; right: 0; top: calc(100% + 10px); width: auto !important;
background: var(--vd-surface); border: 1px solid var(--vd-border);
border-radius: var(--vd-radius); box-shadow: var(--vd-shadow-lg);
list-style: none; margin: 0 !important; padding: 8px; z-index: 60;
max-height: min(70vh, 480px); overflow-y: auto; overflow-x: hidden; font-size: inherit;
display: flex; flex-direction: column; gap: 2px;
}
.vd-search #demo_list_id:empty { display: none; }
.vd-search #demo_list_id li,
.vd-search #demo_list_id li.search_item {
list-style: none !important; margin: 0 !important; padding: 0 !important;
border: none !important; background: transparent !important; line-height: normal; cursor: pointer;
}
.vd-search #demo_list_id .search_item > a {
display: flex; align-items: center; gap: 12px; padding: 8px 10px;
border-radius: 12px; text-decoration: none; color: var(--vd-ink); transition: background .15s;
}
.vd-search #demo_list_id .search_img {
float: none !important; flex: none; width: 54px !important; height: 54px; padding: 0 !important;
background: var(--vd-photo-bg) !important; border-radius: 10px; display: grid; place-items: center; overflow: hidden;
}
.vd-search #demo_list_id .search_img img {
max-width: 100% !important; max-height: 100% !important; width: auto; height: auto;
mix-blend-mode: multiply;
}
.vd-search #demo_list_id .item_content {
float: none !important; display: flex !important; flex-direction: column; gap: 1px;
margin: 0 !important; padding: 0 !important; font-family: var(--vd-font) !important;
font-size: 14.5px !important; line-height: 1.35 !important; overflow: hidden; min-width: 0;
}
.vd-search #demo_list_id .item_content_do { color: var(--vd-ink) !important; font-weight: 600; }
.vd-search #demo_list_id .item_content_do br { display: none; }
.vd-search #demo_list_id .modFont {
display: block; color: var(--vd-green-700) !important; font-size: 14px !important;
font-weight: 700 !important; line-height: 1.3 !important; margin-top: 2px;
}
.vd-search #demo_list_id .search_item.hovered > a,
.vd-search #demo_list_id .search_item > a:hover { background: var(--vd-green-050); }
.vd-search #demo_list_id .all_result {
display: block; padding: 16px 12px; text-align: center;
color: var(--vd-muted); font-size: 14px; font-family: var(--vd-font);
}
.vd-search #demo_list_id .clear_fix { display: none !important; }
.vd-header-actions { flex: none; display: flex; align-items: center; gap: 10px; margin-left: auto; }
/* Gumb-ikona (npr. preklop iskalnika na mobilniku) — enak videz kot burger */
.vd-icon-btn {
display: none; width: 46px; height: 46px; flex: none; cursor: pointer;
align-items: center; justify-content: center;
border: 1.5px solid var(--vd-border-strong); background: var(--vd-surface);
border-radius: 14px; color: var(--vd-ink); transition: border-color .18s, color .18s, background .18s;
}
.vd-icon-btn:hover { border-color: var(--vd-green); color: var(--vd-green-700); }
.vd-icon-btn svg { width: 22px; height: 22px; display: block; }
/* Hitri gumb (prodajna mesta, kontakt) — ikona + napis, viden na namizju */
.vd-icon-btn.vd-quick {
display: inline-flex; width: auto; gap: 8px; padding: 0 16px; border-radius: var(--vd-radius-pill);
font-family: var(--vd-font); font-size: 14px; font-weight: 600; color: var(--vd-ink); text-decoration: none; white-space: nowrap;
}
.vd-icon-btn.vd-quick:hover { color: var(--vd-green-700); }
.vd-icon-btn.vd-quick svg { fill: currentColor; flex: none; }
/* Ožja namizja: napis skrijemo, ostane ikona (da glava ne prekipi) */
@media (max-width: 1040px) {
.vd-icon-btn.vd-quick { width: 46px; padding: 0; gap: 0; }
.vd-icon-btn.vd-quick .vd-quick-txt { display: none; }
}
.vd-icon-btn .vd-ico-close { display: none; }
.vd-search-toggle.is-open { border-color: var(--vd-green); color: var(--vd-green-700); background: var(--vd-green-050); }
.vd-search-toggle.is-open .vd-ico-search { display: none; }
.vd-search-toggle.is-open .vd-ico-close { display: block; }
.vd-cart {
display: inline-flex; align-items: center; gap: 12px;
background: var(--vd-green); color: #fff; text-decoration: none;
border-radius: var(--vd-radius-pill); padding: 9px 20px 9px 16px;
box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--vd-green) 60%, transparent);
transition: transform .12s ease, background .15s;
overflow: visible; /* da značka s številom ni odrezana */
}
.vd-cart, .vd-cart:hover, .vd-cart:focus { color: #fff; }
.vd-cart:hover { background: var(--vd-green-600); transform: translateY(-1px); }
.vd-cart-ico { position: relative; width: 26px; height: 26px; display: grid; place-items: center; }
.vd-cart-ico svg { width: 24px; height: 24px; }
.vd-cart-badge {
position: absolute; top: -8px; right: -10px; min-width: 19px; height: 19px; padding: 0 5px;
border-radius: 999px; background: var(--vd-accent); color: #fff;
font-size: 11.5px; font-weight: 700; line-height: 19px; text-align: center;
box-shadow: 0 0 0 2px var(--vd-green); box-sizing: border-box;
}
.vd-cart-txt { display: flex; flex-direction: column; line-height: 1.05; }
.vd-cart-sum { font-size: 18px; font-weight: 700; }
.vd-cart-kos { font-size: 12px; opacity: .9; }
.vd-burger {
display: none; width: 46px; height: 46px; border: 1.5px solid var(--vd-border-strong);
background: var(--vd-surface); border-radius: var(--vd-radius-sm); cursor: pointer;
padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.vd-burger span { width: 22px; height: 2px; background: var(--vd-ink); border-radius: 2px; transition: .2s; }
/* Namizna navigacija (uporabi obstoječi izpis mainMenu → ul.mainUl) — lepljiva ob drsenju */
.vd-nav {
position: sticky; top: 0; z-index: 190;
background: var(--vd-surface); border-top: 1px solid var(--vd-border); border-bottom: 1px solid var(--vd-border);
transition: box-shadow .2s ease;
}
.vd-nav.is-stuck { box-shadow: var(--vd-shadow); }
.vd-nav .mainUl {
display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
gap: 2px; height: auto !important; overflow: visible !important;
padding: 4px 0 !important; margin: 0 !important; font-weight: 600; font-size: 15.5px;
}
.vd-nav .mainUl li { display: inline-flex !important; }
.vd-nav .mainUl li a {
display: inline-block; padding: 12px 16px !important; margin: 0 !important;
color: var(--vd-ink); text-decoration: none; border-radius: var(--vd-radius-pill);
transition: background .15s, color .15s; background: transparent !important;
line-height: 1.1;
}
.vd-nav .mainUl li a:hover { background: var(--vd-green-100) !important; color: var(--vd-green-700) !important; }
.vd-nav .mainUl li.act a { background: var(--vd-green) !important; color: #fff !important; }
/* =========================================================================
MOBILNI PREDAL (drawer)
========================================================================= */
/* Fiksni ovoj z overflow:hidden obreže izven-zaslonski predal (brez vodoravnega scrolla),
ne da bi vplival na position:sticky (sticky elementi niso znotraj ovoja). */
/* Zaprt ovoj = display:none (nič layouta → nič vodoravnega scrolla). Prikaz vodi vd-ui.js. */
.vd-offcanvas { display: none; position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 300; }
.vd-scrim {
position: absolute; inset: 0; background: rgba(28, 26, 20, .55);
-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
opacity: 0; visibility: hidden; transition: opacity .3s;
}
.vd-scrim.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.vd-drawer {
position: absolute; top: 0; right: 0; height: 100%;
width: min(90vw, 400px); background: var(--vd-surface); z-index: 2;
transform: translateX(100%); transition: transform .34s cubic-bezier(.33, 1, .68, 1);
box-shadow: -24px 0 60px -20px rgba(30, 28, 22, .42); display: flex; flex-direction: column;
font-family: var(--vd-font);
}
.vd-drawer.is-open { transform: translateX(0); pointer-events: auto; }
.vd-drawer-head {
display: flex; align-items: center; justify-content: space-between; flex: none;
padding: 20px 22px; color: #fff;
background: linear-gradient(135deg, var(--vd-green), var(--vd-green-700));
}
.vd-drawer-head b { font-family: var(--vd-font-head); font-size: 21px; font-weight: 600; letter-spacing: .01em; }
.vd-drawer-quick { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.vd-drawer-quick a {
display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 13px;
border-radius: var(--vd-radius-pill); background: rgba(255,255,255,.18);
color: #fff; text-decoration: none; font-size: 13px; font-weight: 600; white-space: nowrap;
transition: background .18s, transform .15s;
}
.vd-drawer-quick a:hover { background: rgba(255,255,255,.32); color: #fff; transform: translateY(-1px); }
.vd-drawer-quick svg { width: 19px; height: 19px; display: block; flex: none; }
.vd-drawer-close {
width: 42px; height: 42px; border: none; background: rgba(255,255,255,.18); color: #fff;
border-radius: 12px; font-size: 24px; line-height: 1; cursor: pointer; display: grid; place-items: center;
transition: background .18s, transform .25s;
}
.vd-drawer-close:hover { background: rgba(255,255,255,.32); transform: rotate(90deg); }
.vd-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 10px 0 24px; -webkit-overflow-scrolling: touch; }
.vd-drawer-menu, .vd-drawer-menu ul { list-style: none !important; margin: 0; padding: 0; }
.vd-drawer-menu li {
list-style: none !important; position: relative; margin: 0; padding: 0;
border-bottom: 1px solid color-mix(in srgb, var(--vd-border) 65%, transparent); background-image: none !important;
}
.vd-drawer-menu > li:last-of-type { border-bottom: none; }
.vd-drawer-menu li a {
display: block; padding: 16px 58px 16px 24px; color: var(--vd-ink);
text-decoration: none; font-size: 15.5px; font-weight: 600; letter-spacing: .01em;
position: relative; transition: color .18s, background .18s, padding-left .18s;
}
.vd-drawer-menu li a::before {
content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 3px;
background: var(--vd-green); border-radius: 0 3px 3px 0; transform: scaleY(0); transition: transform .2s;
}
.vd-drawer-menu li a:hover { background: var(--vd-green-050); color: var(--vd-green-700); padding-left: 28px; }
.vd-drawer-menu li a:hover::before { transform: scaleY(1); }
/* Gnezdeni podmeniji (subRole) — z !important premagamo legacy media.css (text-align:right, siva barva) */
.vd-drawer-menu .subRole {
display: none; float: none !important; text-align: left !important; width: auto !important;
background: var(--vd-green-050);
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--vd-green) 16%, transparent),
inset 0 -1px 0 color-mix(in srgb, var(--vd-green) 16%, transparent);
}
.vd-drawer-menu .subRole.is-open { display: block; animation: vd-sub-in .22s ease; }
@keyframes vd-sub-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.vd-drawer-menu .subRole li { border-bottom: 1px solid color-mix(in srgb, var(--vd-green) 12%, transparent); }
.vd-drawer-menu .subRole li:last-child { border-bottom: none; }
.vd-drawer-menu .subRole a {
display: block; text-align: left !important;
padding: 13px 24px 13px 42px !important; border-bottom: none !important;
font-weight: 500; font-size: 14.5px; color: var(--vd-green-700) !important; position: relative;
}
.vd-drawer-menu .subRole a::before { content: none; }
.vd-drawer-menu .subRole a::after {
content: "›"; position: absolute; left: 25px; top: 50%; transform: translateY(-50%);
color: color-mix(in srgb, var(--vd-green) 55%, transparent); font-size: 15px; font-weight: 700;
}
.vd-drawer-menu .subRole a:hover {
background: color-mix(in srgb, var(--vd-green) 12%, transparent); padding-left: 46px !important;
}
/* Gumb za razpiranje podmenija → čist chevron (skrijemo legacy sličice) */
.vd-drawer-menu .rwdMore {
position: absolute; top: 3px; right: 6px; width: 50px; height: 50px;
display: grid; place-items: center; cursor: pointer; z-index: 2; padding: 0 !important;
}
.vd-drawer-menu .rwdMore img { display: none !important; }
.vd-drawer-menu .rwdMore::after {
content: ""; width: 9px; height: 9px; margin-top: -3px;
border-right: 2px solid var(--vd-muted); border-bottom: 2px solid var(--vd-muted);
transform: rotate(45deg); transition: transform .24s, border-color .18s;
}
.vd-drawer-menu .rwdMore.is-open::after { transform: rotate(-135deg); margin-top: 3px; border-color: var(--vd-green-700); }
.vd-drawer-foot { border-top: 1px solid var(--vd-border); padding: 18px 22px; display: grid; gap: 12px; flex: none; background: var(--vd-surface-2); }
.vd-drawer-foot .vd-btn { justify-content: center; }
.vd-drawer-user {
display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
background: var(--vd-surface); border: 1px solid var(--vd-border); color: var(--vd-ink);
font-weight: 700; text-decoration: none; transition: border-color .18s, box-shadow .18s;
}
.vd-drawer-user:hover { border-color: color-mix(in srgb, var(--vd-green) 45%, var(--vd-border)); box-shadow: var(--vd-shadow); }
.vd-drawer-user .vd-drawer-avatar {
width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center;
background: var(--vd-green-100); color: var(--vd-green-700);
}
.vd-drawer-user .vd-drawer-avatar svg { width: 22px; height: 22px; }
.vd-drawer-user .vd-drawer-uinfo { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.vd-drawer-user .vd-drawer-uinfo small { font-weight: 500; font-size: 12px; color: var(--vd-muted); }
.vd-drawer-foot .vd-logout {
display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px;
border-radius: var(--vd-radius-pill); border: 1px solid var(--vd-border); background: transparent;
color: var(--vd-ink-soft); text-decoration: none; font-weight: 600; font-size: 14px; transition: border-color .18s, color .18s;
}
.vd-drawer-foot .vd-logout svg { width: 17px; height: 17px; }
.vd-drawer-foot .vd-logout:hover { border-color: var(--vd-danger); color: var(--vd-danger); }
.vd-drawer-foot .vd-reg { text-align: center; color: var(--vd-ink-soft); text-decoration: none; font-weight: 600; font-size: 14px; }
.vd-drawer-foot .vd-reg:hover { color: var(--vd-green-700); }
/* =========================================================================
GUMBI (deljeni sistem)
========================================================================= */
.vd-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: var(--vd-font); font-size: 16px; font-weight: 700; line-height: 1;
padding: 14px 24px; border-radius: var(--vd-radius-pill); border: 1.5px solid transparent;
cursor: pointer; text-decoration: none; transition: transform .12s, background .15s, border-color .15s;
}
.vd-btn:hover { transform: translateY(-1px); }
.vd-btn-primary, .vd-btn-primary:hover, .vd-btn-primary:focus { color: #fff; }
.vd-btn-primary { background: var(--vd-green); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--vd-green) 60%, transparent); }
.vd-btn-primary:hover { background: var(--vd-green-600); }
.vd-btn-accent { background: var(--vd-accent); color: #fff; box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--vd-accent) 55%, transparent); }
.vd-btn-accent:hover { background: var(--vd-accent-600); }
.vd-btn-ghost { background: var(--vd-surface); color: var(--vd-ink); border-color: var(--vd-border-strong); }
.vd-btn-ghost:hover { border-color: var(--vd-green); color: var(--vd-green-700); }
/* =========================================================================
NOGA
========================================================================= */
.vd-footer { clear: both; font-family: var(--vd-font); color: var(--vd-ink-soft); margin-top: 60px; }
#mc_embed_signup form{
padding: 0 !important;
}
/* ---- Pas prednosti: čist "trust bar" brez starih skic ---- */
.vd-adv { background: var(--vd-green-050); border-top: 1px solid var(--vd-border); border-bottom: 1px solid var(--vd-border); }
.vd-adv .ads {
float: none !important; width: auto !important; background: none !important;
padding: 34px 0 !important; margin: 0 !important;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
}
.prednost {
float: none !important; width: auto !important; height: auto !important; margin: 0 !important;
display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
color: var(--vd-ink-soft); font-size: 14px; line-height: 1.45;
}
.prednost img { display: none !important; } /* skrijemo stare oranžne skice */
.prednost-ico {
width: 60px; height: 60px; margin-bottom: 10px; border-radius: 50%;
background: linear-gradient(145deg, var(--vd-green), var(--vd-green-700)); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 6px 16px -6px rgba(76,136,73,.55);
}
.prednost-ico svg { width: 30px; height: 30px; display: block; }
.prednost h5, .prednost h5.amatic {
font-family: var(--vd-font-head) !important; font-weight: 600 !important; font-size: 19px !important;
color: var(--vd-ink) !important; margin: 0 !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.15 !important;
}
/* ---- Glavna noga: premium, temno zelena, 4-stolpčna ---- */
.vd-footer-main { background: #26382b; color: rgba(255,255,255,.72); padding: 60px 0 0; }
.vd-footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.5fr; gap: 40px; align-items: start; }
.vd-footer a { color: rgba(255,255,255,.74); text-decoration: none; transition: color .15s; }
.vd-footer a:hover { color: #fff; }
/* Znamka + kontakt + socialni */
.vd-foot-brand { max-width: 330px; }
.vd-foot-logo {
display: inline-block; max-width: 172px; background: #fff; padding: 12px 16px;
border-radius: var(--vd-radius); box-shadow: var(--vd-shadow);
}
/* Ekološki certifikat na koncu stolpca »O podjetju« (bela kartica za kontrast na temni nogi) */
.vd-foot-cert {
display: inline-flex; margin-top: 20px; background: #fff; padding: 10px;
border-radius: 14px; box-shadow: var(--vd-shadow); transition: transform .15s ease, box-shadow .15s ease;
}
.vd-foot-cert img { width: 66px; height: auto; display: block; }
.vd-foot-cert:hover { transform: translateY(-2px); box-shadow: var(--vd-shadow-lg); }
.vd-foot-company { margin: 20px 0 20px; line-height: 1.7; font-size: 15px; color: rgba(255,255,255,.7); }
.vd-foot-company strong { color: #fff; font-weight: 700; }
.vd-foot-contact { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 12px; }
.vd-foot-contact li { list-style: none; display: flex; align-items: center; gap: 12px; background-image: none; padding: 0; }
.vd-foot-contact li svg {
width: 36px; height: 36px; flex: none; padding: 8px; box-sizing: border-box;
border-radius: 50%; background: rgba(255,255,255,.1); color: #a9d18e;
}
.vd-foot-contact li a { color: rgba(255,255,255,.9); font-weight: 600; }
.vd-foot-social { display: flex; gap: 10px; }
.vd-foot-social a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; transition: background .15s, transform .12s; }
.vd-foot-social a:hover { background: var(--vd-green); transform: translateY(-2px); color: #fff; }
.vd-foot-social svg { width: 18px; height: 18px; }
/* Skupine povezav (ločeno po glavni kategoriji) */
.vd-foot-col h4, .vd-footer .vd-foot-title {
font-family: var(--vd-font); font-size: 13px; text-transform: uppercase; letter-spacing: .1em;
color: #a9d18e; font-weight: 700; margin: 4px 0 16px;
}
.vd-foot-links { display: flex; flex-direction: column; }
.vd-foot-links a { display: block; padding: 8px 0; font-size: 15px; border-bottom: 1px solid rgba(255,255,255,.08); }
.vd-foot-links a:last-child { border-bottom: none; }
/* E-novice — poenoteno z ostalimi stolpci */
.vd-foot-news .eNovice { color: rgba(255,255,255,.72); font-size: 14.5px; line-height: 1.6; }
/* Naslov "Prijava na E-novice" (h6) v enakem slogu kot naslovi stolpcev */
.vd-foot-news .eNovice h6 {
font-family: var(--vd-font) !important; font-size: 13px !important; text-transform: uppercase !important;
letter-spacing: .1em !important; color: #a9d18e !important; font-weight: 700 !important;
margin: 4px 0 16px !important; line-height: 1.3 !important;
}
/* Odstrani odmike MailChimp ovojev, da je input poravnan z besedilom */
.vd-footer #mc_embed_signup,
.vd-footer #mc_embed_signup_scroll,
.vd-footer #mc_embed_signup .mc-field-group,
.vd-footer .nForm {
background: transparent !important; border: 0 !important; margin: 0 !important; padding: 0 !important;
width: 100% !important; font-family: var(--vd-font) !important; color: rgba(255,255,255,.72) !important;
}
.vd-footer .eNovice .email, .vd-footer #mce-EMAIL {
display: block; width: 100% !important; height: 50px; box-sizing: border-box; margin: 16px 0 12px !important;
border: 1px solid rgba(255,255,255,.22) !important; background: rgba(255,255,255,.08) !important;
color: #fff !important; border-radius: var(--vd-radius-sm) !important; padding: 0 18px !important; font-size: 15px; outline: none;
}
.vd-footer .eNovice .email::placeholder, .vd-footer #mce-EMAIL::placeholder { color: rgba(255,255,255,.5); }
.vd-footer .eNovice .clear { width: 100% !important; float: none !important; }
.vd-footer .eNovice .button, .vd-footer #mc-embedded-subscribe {
display: block; width: 100% !important; height: 50px !important; border: none !important; cursor: pointer;
background: var(--vd-green) !important; color: #fff !important; border-radius: var(--vd-radius-sm) !important;
padding: 0 !important; margin: 0 !important; font-family: var(--vd-font) !important; font-size: 16px; font-weight: 700;
transition: background .15s; float: none !important;
}
.vd-footer .eNovice .button:hover, .vd-footer #mc-embedded-subscribe:hover { background: var(--vd-green-600) !important; }
/* Spodnja vrstica — znotraj temne noge */
.vd-foot-bottom {
margin-top: 50px; border-top: 1px solid rgba(255,255,255,.12); padding: 22px 0 28px;
display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
font-size: 13px; color: rgba(255,255,255,.5);
}
.vd-foot-bottom a { color: rgba(255,255,255,.72); }
.vd-foot-bottom a:hover { color: #fff; }
/* =========================================================================
IZPIS IZDELKA (Faza 2)
========================================================================= */
.vd-product { clear: both; font-family: var(--vd-font); color: var(--vd-ink); max-width: var(--vd-container); margin: 0 auto; padding: 8px 0 20px; }
/* Nujno: brez border-box padding kartic razširi vsebino čez starša → vodoravni scroll na mobilniku */
.vd-product, .vd-product * { box-sizing: border-box; }
.vd-product-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
/* Galerija */
.vd-gallery { position: sticky; top: calc(var(--vd-header-h) + 20px); }
.vd-gallery-main {
position: relative; background: var(--vd-photo-bg); border: 1px solid var(--vd-border);
border-radius: var(--vd-radius); overflow: hidden; padding: 24px;
display: grid; place-items: center; min-height: 320px;
}
/* Podlaga mora biti na NEPOSREDNEM starševskem elementu slike (a), da multiply zlije belino. */
.vd-gallery-main a, .vd-gallery-main > img { background: var(--vd-photo-bg); }
.vd-gallery-main a { display: grid; place-items: center; width: 100%; }
.vd-gallery-main img { max-width: 100%; height: auto; display: block; mix-blend-mode: multiply; }
.vd-badges { position: absolute; top: 14px; left: 14px; display: flex; gap: 8px; z-index: 2; }
.vd-badges .tagH {
display: inline-block !important; float: none !important; width: auto !important; height: auto !important; margin: 0 !important;
padding: 6px 13px !important; border-radius: var(--vd-radius-pill) !important; font-size: 12px !important; font-weight: 700 !important;
color: #fff !important; letter-spacing: .04em !important; line-height: 1.25 !important; background-image: none !important;
}
.vd-badges .hNovo { background: var(--vd-green) !important; }
.vd-badges .hHit { background: var(--vd-accent) !important; }
.vd-gallery-thumbs { margin-top: 14px; }
.vd-gallery-thumbs .ostaleSlike { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; float: none !important; text-align: center; }
.vd-gallery-thumbs a {
display: grid; place-items: center; width: 76px; height: 76px; border: none; border-radius: var(--vd-radius-sm);
overflow: hidden; background: var(--vd-photo-bg); padding: 8px; box-sizing: border-box; cursor: pointer;
opacity: .6; transition: opacity .15s, box-shadow .15s;
}
.vd-gallery-thumbs a:hover { opacity: 1; }
.vd-gallery-thumbs a.is-active { opacity: 1; box-shadow: 0 5px 14px -5px rgba(30, 28, 22, .35); }
.vd-gallery-thumbs img {
width: 100% !important; height: 100% !important; object-fit: contain; display: block;
mix-blend-mode: multiply; border: none !important; padding: 0 !important; margin: 0 !important;
}
/* Nakupni panel */
.vd-buybox { display: flex; flex-direction: column; gap: 18px; }
.vd-product-title { font-family: var(--vd-font-head); font-weight: 600; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; margin: 4px 0 0; color: var(--vd-ink); letter-spacing: -.01em; }
.vd-stock { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; align-self: flex-start; padding: 6px 14px; border-radius: var(--vd-radius-pill); }
.vd-stock-dot { width: 9px; height: 9px; border-radius: 50%; }
.vd-stock.is-in { background: var(--vd-green-100); color: var(--vd-green-700); }
.vd-stock.is-in .vd-stock-dot { background: var(--vd-green); }
.vd-stock.is-out { background: #fbecea; color: var(--vd-danger); }
.vd-stock.is-out .vd-stock-dot { background: var(--vd-danger); }
.vd-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.vd-meta li { list-style: none; background: var(--vd-surface-2); border: 1px solid var(--vd-border); border-radius: var(--vd-radius-sm); padding: 8px 14px; display: flex; flex-direction: column; line-height: 1.25; background-image: none; }
.vd-meta li span { font-size: 12px; color: var(--vd-muted); text-transform: uppercase; letter-spacing: .04em; }
.vd-meta li b { font-size: 15px; color: var(--vd-ink); }
/* Variante + cena + dodajanje — premium nakupni panel */
.vd-variants { display: flex; flex-direction: column; gap: 12px; }
.vd-variant {
background: linear-gradient(180deg, var(--vd-surface), var(--vd-surface-2));
border: 1px solid var(--vd-border); border-radius: var(--vd-radius);
padding: 15px 17px; box-shadow: var(--vd-shadow-sm);
}
.vd-variant form { margin: 0; }
.vd-price-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.vd-variant-label {
display: inline-flex; align-items: center; gap: 7px; flex: none;
background: var(--vd-green-050); color: var(--vd-green-700);
border: 1px solid color-mix(in srgb, var(--vd-green) 22%, var(--vd-border));
font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
padding: 6px 11px; border-radius: var(--vd-radius-pill); white-space: nowrap;
}
.vd-variant-label svg { width: 15px; height: 15px; flex: none; color: var(--vd-green); }
.vd-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.vd-price-old { color: var(--vd-muted); text-decoration: line-through; font-size: 16px; font-weight: 600; }
.vd-price-now { color: var(--vd-green-700); font-size: clamp(27px, 4vw, 34px); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.vd-save { background: var(--vd-accent); color: #fff; font-weight: 700; font-size: 12px; padding: 3px 9px; border-radius: var(--vd-radius-pill); align-self: center; box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--vd-accent) 55%, transparent); }
/* Gumb "Izberi …" — premagamo legacy .izberi (float, podčrtaj, margin-hover skok) */
.vd-choose-btn {
display: inline-flex; align-items: center; gap: 8px; float: none !important;
margin: 4px 0 0 !important; cursor: pointer; text-decoration: none !important;
background: var(--vd-green-100); color: var(--vd-green-700); font-weight: 700; font-size: 14.5px;
padding: 10px 18px; border-radius: var(--vd-radius-pill); border: 1px solid transparent;
transition: background .15s, border-color .15s;
}
.vd-choose-btn:hover {
float: none !important; margin: 4px 0 0 !important; text-decoration: none !important;
background: color-mix(in srgb, var(--vd-green) 18%, var(--vd-surface));
border-color: color-mix(in srgb, var(--vd-green) 30%, transparent);
}
.vd-choose-btn::before {
content: ""; width: 16px; height: 16px; flex: none;
background: currentColor; -webkit-mask: center / contain no-repeat url('data:image/svg+xml;utf8,');
mask: center / contain no-repeat url('data:image/svg+xml;utf8,');
}
.vd-choose-btn.hid { display: none; }
.vd-choose-btn.vis { display: inline-flex; }
/* Panel z izbiro sort (opcije) — premagamo legacy .opcs/.opcsTr/.minInput (sivi pasovi, float) */
.vd-options { display: none; margin-top: 14px; padding: 6px 16px; background: var(--vd-surface); border: 1px solid var(--vd-border); border-radius: var(--vd-radius); }
.vd-options-hint { margin: 12px 0 6px; font-size: 13.5px; font-weight: 600; color: var(--vd-ink-soft); }
.vd-options .vd-option-row {
display: flex !important; align-items: center; justify-content: space-between; gap: 12px;
float: none !important; width: auto !important; background: transparent !important;
padding: 10px 0 !important; border: none !important; border-top: 1px solid var(--vd-border) !important;
}
.vd-options .vd-option-row:first-of-type { border-top: none !important; }
.vd-options .vd-option-row span {
float: none !important; width: auto !important; margin: 0 !important;
font-size: 14.5px; font-weight: 600; color: var(--vd-ink);
}
.vd-options .vd-qty-mini {
float: none !important; width: 68px !important; height: 40px !important; text-align: center;
border: 1.5px solid var(--vd-border-strong) !important; border-radius: 12px !important;
font-family: var(--vd-font); font-size: 15px; font-weight: 700; color: var(--vd-ink);
background: var(--vd-surface); outline: none; transition: border-color .15s, box-shadow .15s;
}
.vd-options .vd-qty-mini:focus { border-color: var(--vd-green) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--vd-green) 16%, transparent); }
.vd-addrow { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--vd-border); flex-wrap: wrap; }
.vd-addrow.clearSet { display: none; }
.vd-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--vd-border-strong); border-radius: var(--vd-radius-pill); overflow: hidden; background: var(--vd-surface); flex: none; }
.vd-qty-btn { width: 34px; height: 42px; border: none; background: transparent; font-size: 18px; line-height: 1; cursor: pointer; color: var(--vd-ink); transition: background .13s, color .13s; }
.vd-qty-btn:hover { background: var(--vd-surface-2); color: var(--vd-green-700); }
.vd-qty-input { width: 42px; height: 42px; border: none; text-align: center; font-family: var(--vd-font); font-size: 15px; font-weight: 700; outline: none; -moz-appearance: textfield; background: transparent; color: var(--vd-ink); }
.vd-qty-input::-webkit-outer-spin-button, .vd-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vd-add-btn {
flex: 1 1 auto; min-width: 160px; height: 46px !important; border: none !important; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
color: #fff !important; font-family: var(--vd-font); font-size: 14.5px; font-weight: 700; letter-spacing: .01em;
background: var(--vd-accent) !important;
background-image: linear-gradient(180deg, color-mix(in srgb, var(--vd-accent) 88%, #fff), var(--vd-accent-600)) !important;
border-radius: var(--vd-radius-pill) !important; padding: 0 20px !important; float: none !important; margin: 0 !important; width: auto !important;
box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--vd-accent) 70%, transparent);
transition: transform .12s, box-shadow .15s, filter .15s;
}
.vd-add-btn svg { width: 18px; height: 18px; flex: none; }
.vd-add-btn:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 20px 38px -12px color-mix(in srgb, var(--vd-accent) 78%, transparent); }
.vd-add-btn:active { transform: translateY(0); }
.vd-short-desc { color: var(--vd-ink-soft); line-height: 1.65; font-size: 16px; }
.vd-short-desc p { margin: 0 0 10px; }
.vd-share { margin-top: 4px; }
.vd-product-extra { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--vd-border); display: flex; flex-direction: column; gap: 16px; }
.vd-tags h5 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--vd-green-700); }
.vd-tags .tagSearch {
display: inline-block; margin: 0 7px 7px 0; padding: 6px 13px; line-height: 1.3;
background: var(--vd-surface-2); border: 1px solid var(--vd-border); border-radius: var(--vd-radius-pill);
font-size: 13.5px; cursor: pointer; color: var(--vd-ink-soft);
transition: background .15s, border-color .15s, color .15s;
}
/* Enak padding/font/margin tudi ob hoverju — premagamo legacy .tags a:hover (ki skrči oznako) */
.vd-tags .tagSearch:hover {
background: var(--vd-green); border-color: var(--vd-green); color: #fff;
padding: 6px 13px; font-size: 13.5px; margin: 0 7px 7px 0;
}
.vd-back { margin-top: 0; text-align: center; }
.vd-back .btnBack {
gap: 9px; padding: 12px 26px; font-size: 15px; font-weight: 600;
color: var(--vd-green-700); background: var(--vd-green-050); border-color: transparent; box-shadow: none;
}
.vd-back .btnBack:hover {
background: var(--vd-green-100); color: var(--vd-green-700); border-color: transparent; transform: none;
}
@media (max-width: 860px) {
.vd-product-grid { grid-template-columns: 1fr; gap: 24px; }
.vd-gallery { position: static; top: auto; }
.vd-product-extra { grid-template-columns: 1fr; }
}
/* =========================================================================
SEZNAM IZDELKOV / PONUDBA (Faza 3)
========================================================================= */
/* Naslov kategorije */
.vsebina h1 {
font-family: var(--vd-font-head) !important; font-weight: 600 !important;
font-size: clamp(30px, 4.5vw, 46px) !important; line-height: 1.08 !important;
color: var(--vd-ink) !important; letter-spacing: -.01em !important; margin: 6px 0 22px !important;
}
/* Razvrščevalna vrstica — sredinsko, brez obrob */
.vd-toolbar {
clear: both;
display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
margin: 0 0 24px; padding: 4px 0; font-family: var(--vd-font);
}
.vd-toolbar-lbl { font-weight: 700; color: var(--vd-ink-soft); margin-right: 6px; font-size: 14px; }
.vd-sort, .vd-sort-reset {
display: inline-flex; align-items: center; text-decoration: none; cursor: pointer;
padding: 8px 16px; border-radius: var(--vd-radius-pill); font-size: 14.5px; font-weight: 600;
color: var(--vd-ink-soft); background: var(--vd-surface-2); border: 1px solid var(--vd-border); transition: .15s;
}
.vd-sort:hover { border-color: var(--vd-green); color: var(--vd-green-700); }
.vd-sort.is-active { background: var(--vd-green); color: #fff; border-color: var(--vd-green); }
.vd-sort-reset { background: transparent; border-color: transparent; color: var(--vd-muted); }
.vd-sort-reset:hover { color: var(--vd-danger); }
/* Mreža izdelkov */
.vd-grid {
clear: both;
display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: clamp(14px, 2vw, 24px); margin: 0 0 20px;
}
.vd-grid-related { margin-top: 8px; }
/* Kartica: slika sega do robov (kremno ozadje rob-do-roba), padding le v telesu spodaj */
.vd-cards .izdelek {
position: relative; float: none !important; width: auto !important; height: auto !important; margin: 0 !important;
background: var(--vd-surface); border: 1px solid var(--vd-border); border-radius: var(--vd-radius);
padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; text-align: left;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s;
}
.vd-cards .izdelek:hover { transform: translateY(-3px); box-shadow: var(--vd-shadow); border-color: var(--vd-border-strong); }
.vd-cards .izdelek .productImg {
float: none !important; width: auto !important; height: auto !important; margin: 0 !important;
background: var(--vd-photo-bg); overflow: hidden; aspect-ratio: 1 / 1; display: block; padding: 0 !important; box-sizing: border-box;
}
/* podlaga na neposrednem starševskem elementu (a) — nujno za multiply; padding zamakne izdelek od roba */
.vd-cards .izdelek .productImg a {
display: grid; place-items: center; width: 100%; height: 100%;
background: var(--vd-photo-bg); padding: 16px; box-sizing: border-box;
}
.vd-cards .izdelek .productImg img { width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: multiply; }
/* Telo z besedilom: levo poravnano, padding poudarjen spodaj */
.vd-card-body { display: flex; flex-direction: column; flex: 1 1 auto; text-align: left; padding: 12px 14px 14px; gap: 5px; }
.vd-cards .izdelek h3 {
float: none !important; width: auto !important; margin: 0 !important; text-align: left;
font-family: var(--vd-font); font-size: 16.5px; line-height: 1.25; font-weight: 700;
}
.vd-cards .izdelek h3 a { color: var(--vd-ink); text-decoration: none; }
.vd-cards .izdelek h3 a:hover { color: var(--vd-green-700); }
.vd-cards .izdelek span {
float: none !important; width: auto !important; height: auto !important; padding: 0 !important; box-sizing: border-box; text-align: left;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
color: var(--vd-muted); font-size: 13.5px; line-height: 1.4; margin: 0;
}
.vd-card-foot { margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.vd-cards .izdelek .price {
float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important;
background-image: none !important; text-align: left; font-size: 22px; font-weight: 800;
color: var(--vd-green-700); font-family: var(--vd-font);
}
/* Hitro dodajanje v košarico na kartici — kompaktno v eni vrstici, gumb = ikona */
.vd-card-add { display: flex; align-items: stretch; gap: 7px; margin: 0; }
.vd-qty-sm { flex: 0 0 auto; }
.vd-qty-sm .vd-qty-btn { width: 30px; height: 34px; font-size: 16px; }
.vd-qty-sm .vd-qty-input { width: 32px; height: 34px; font-size: 15px; }
.vd-card-addbtn {
flex: 1 1 auto; min-width: 50px; min-height: 34px; border: none; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
background: var(--vd-green); color: #fff; border-radius: var(--vd-radius-pill); padding: 0;
box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--vd-green) 60%, transparent);
transition: background .15s, transform .12s, box-shadow .15s;
}
.vd-card-addbtn svg { width: 22px; height: 22px; }
.vd-card-addbtn:hover { background: var(--vd-green-600); transform: translateY(-2px); box-shadow: 0 10px 20px -6px color-mix(in srgb, var(--vd-green) 65%, transparent); }
.vd-card-addbtn:active { transform: translateY(0); }
/* Stanje kartice: več možnosti (izbira variante na strani izdelka) */
.vd-card-choose {
display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 44px; box-sizing: border-box;
padding: 0 16px; border-radius: var(--vd-radius-pill); text-decoration: none; font-weight: 700; font-size: 14px;
background: var(--vd-green-050); color: var(--vd-green-700); border: 1px solid color-mix(in srgb, var(--vd-green) 28%, transparent);
transition: background .15s, border-color .15s;
}
.vd-card-choose:hover { background: var(--vd-green-100); color: var(--vd-green-700); border-color: var(--vd-green); }
.vd-card-choose svg { width: 16px; height: 16px; flex: none; }
/* Stanje kartice: brez zaloge */
.vd-card-oos {
display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 44px; box-sizing: border-box;
padding: 0 14px; border-radius: var(--vd-radius-pill); font-weight: 600; font-size: 13px;
background: var(--vd-surface-2); color: var(--vd-muted); border: 1px dashed var(--vd-border-strong);
}
.vd-card-oos svg { width: 17px; height: 17px; flex: none; }
/* Značke na kartici — v celoti prevozimo star diagonalni "trak" (rotacija/velikost) */
.vd-cards .izdelek .tag {
position: absolute !important; top: 12px !important; left: 12px !important; right: auto !important; bottom: auto !important;
width: auto !important; height: auto !important; z-index: 3; float: none !important; text-align: left !important;
background: none !important; background-image: none !important; margin: 0 !important;
}
.vd-cards .izdelek .tag .tagOpt {
display: inline-block !important; float: none !important; width: auto !important; margin: 0 !important;
padding: 5px 12px !important; border-radius: var(--vd-radius-pill) !important; color: #fff !important;
font-size: 12px !important; font-weight: 700 !important; letter-spacing: .03em !important; line-height: 1.25 !important;
text-align: center !important; background-image: none !important;
transform: none !important; -webkit-transform: none !important; -moz-transform: none !important; -o-transform: none !important;
writing-mode: horizontal-tb !important;
}
.vd-cards .izdelek .tAkcija, .vd-cards .izdelek .tNovo, .vd-cards .izdelek .tHit { background: none !important; background-image: none !important; }
.vd-cards .izdelek .tAkcija .tagOpt { background: var(--vd-accent) !important; }
.vd-cards .izdelek .tNovo .tagOpt { background: var(--vd-green) !important; }
.vd-cards .izdelek .tHit .tagOpt { background: #d9542e !important; }
/* Kategorijske ploščice (izberiKategorijo / scrollPonudba) */
.katItem, .katItemSub, .katItemFull {
float: none !important; width: auto !important; height: auto !important; margin: 0 !important; cursor: pointer;
background: var(--vd-surface); border: 1px solid var(--vd-border); border-radius: var(--vd-radius);
padding: 18px; text-align: center; transition: transform .16s, box-shadow .16s, border-color .16s;
}
.katItem:hover, .katItemSub:hover, .katItemFull:hover { transform: translateY(-3px); box-shadow: var(--vd-shadow); border-color: var(--vd-border-strong); }
.katItem h3, .katItemSub h3, .katItemFull h3 { margin: 0 0 12px; font-family: var(--vd-font-head); font-weight: 600; font-size: 22px; }
.katItem h3 a, .katItemSub h3 a, .katItemFull h3 a { color: var(--vd-ink); text-decoration: none; }
.katItem:hover h3 a, .katItemFull:hover h3 a { color: var(--vd-green-700); }
.katItem .katImg, .katItemSub .katImg, .katItemFull .katImg { display: grid; place-items: center; }
/* podlaga na neposrednem starševskem elementu slike, da multiply zlije belino */
.katItem .katImg p, .katItemSub .katImg p, .katItem .katImg a, .katItemSub .katImg a, .katItemFull .katImg a { margin: 0; background: var(--vd-photo-bg); border-radius: var(--vd-radius-sm); display: inline-block; }
.katItem img, .katItemSub img, .katItemFull img { max-width: 100%; height: auto; border-radius: var(--vd-radius-sm); mix-blend-mode: multiply; }
/* Mrežni ovoj za kategorije, kadar jih izpisuje več zaporedoma */
.vsebina > .katItem, .vsebina > .katItemFull { display: inline-block; vertical-align: top; }
.infoNoProd {
background: var(--vd-green-050); border: 1px solid var(--vd-border); border-radius: var(--vd-radius);
padding: 32px; text-align: center; color: var(--vd-ink-soft); line-height: 1.6;
}
.infoNoProd h2 { font-family: var(--vd-font-head); color: var(--vd-ink); margin: 0 0 10px; }
@media (max-width: 620px) {
.vd-adv .ads { grid-template-columns: 1fr !important; gap: 16px; }
.vd-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.vd-cards .izdelek h3 { font-size: 15.5px; }
.vd-cards .izdelek .price { font-size: 18px; }
.vd-card-body { padding: 10px 12px 12px; }
.vd-cards .izdelek .productImg a { padding: 12px; }
.vd-toolbar-lbl { width: 100%; text-align: center; margin-bottom: 4px; }
/* dodajanje ostane v eni vrstici; na ozkih karticah le nekoliko ožji števec */
.vd-qty-sm .vd-qty-btn { width: 28px; }
.vd-qty-sm .vd-qty-input { width: 30px; }
.vd-card-addbtn svg { width: 20px; height: 20px; }
}
/* =========================================================================
DRSNIK IZDELKOV (domača: Novo / Hit)
========================================================================= */
.vd-showcase { clear: both; margin: 0 0 46px; font-family: var(--vd-font); }
.vd-showcase-related { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--vd-border); }
.vd-showcase-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.vd-showcase-title { font-family: var(--vd-font-head); font-weight: 600; font-size: clamp(24px, 3.5vw, 34px); color: var(--vd-ink); margin: 0; letter-spacing: -.01em; }
.vd-carousel-nav { display: flex; gap: 8px; flex: none; }
.vd-carousel-arrow {
width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--vd-border-strong);
background: var(--vd-surface); color: var(--vd-ink); font-size: 0; line-height: 0; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s, color .15s, background .15s, opacity .15s;
}
/* Puščica narisana z robom (zanesljivo sredinsko poravnana; glyph ‹ › je optično zamaknjen) */
.vd-carousel-arrow::before {
content: ""; display: block; width: 9px; height: 9px;
border-style: solid; border-color: currentColor; border-width: 2.5px 2.5px 0 0;
}
.vd-carousel-arrow[data-dir="-1"]::before { transform: rotate(-135deg); margin-left: 3px; }
.vd-carousel-arrow[data-dir="1"]::before { transform: rotate(45deg); margin-right: 3px; }
.vd-carousel-arrow:hover { border-color: var(--vd-green); color: var(--vd-green-700); background: var(--vd-green-050); }
.vd-carousel-arrow[disabled] { opacity: .3; cursor: default; }
.vd-carousel { position: relative; }
.vd-carousel-track {
display: flex; gap: clamp(14px, 2vw, 22px); overflow-x: auto; scroll-snap-type: x mandatory;
scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding: 4px 2px 8px; scrollbar-width: none;
}
.vd-carousel-track::-webkit-scrollbar { display: none; }
.vd-carousel-track .izdelek { flex: 0 0 240px; scroll-snap-align: start; }
.vd-carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.vd-carousel-dot { width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; background: var(--vd-border-strong); cursor: pointer; transition: background .18s, transform .18s; }
.vd-carousel-dot.is-active { background: var(--vd-green); transform: scale(1.35); }
/* Kartice kategorij ("Naša celotna ponudba") */
.vd-cat-card { text-decoration: none; }
.vd-cat-card .productImg { position: relative; }
/* Slika kategorije nima notranjega — centriramo neposredno v .productImg (višja specifičnost od osnove) */
.vd-cards .izdelek.vd-cat-card .productImg { display: grid !important; place-items: center; padding: 18px !important; }
.vd-cards .izdelek.vd-cat-card .productImg img { width: 100%; height: 100%; object-fit: contain; }
/* Pilula in CTA imata višjo specifičnost, da premagata .vd-cards .izdelek span (muted, line-clamp, padding:0!) */
.vd-cards .izdelek.vd-cat-card .productImg .vd-cat-count {
position: absolute; top: 14px; left: 14px; z-index: 3; display: inline-block !important;
-webkit-line-clamp: none; line-clamp: none; overflow: visible !important; text-align: center;
background: var(--vd-green); color: #fff !important; font-weight: 700 !important; font-size: 14.5px !important; line-height: 1 !important; white-space: nowrap;
padding: 8px 15px !important; border-radius: var(--vd-radius-pill);
box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--vd-green) 60%, transparent);
}
.vd-cat-card .vd-card-body { align-items: center; text-align: center; gap: 6px; }
.vd-cat-card h3 { margin: 0; font-size: 17px; }
.vd-cat-card h3, .vd-cat-card:hover h3 { color: var(--vd-ink); }
.vd-cat-card .vd-cat-more { color: var(--vd-green-700) !important; font-weight: 700; font-size: 13.5px; text-align: center; }
.vd-cat-card:hover .vd-cat-more { text-decoration: underline; }
@media (max-width: 900px) { .vd-carousel-track .izdelek { flex: 0 0 46%; } }
@media (max-width: 620px) {
.vd-carousel-nav { display: none; } /* na mobilniku swipe */
.vd-carousel-track .izdelek { flex: 0 0 74%; }
.vd-showcase { margin-bottom: 34px; }
}
/* =========================================================================
RECEPTI / BLOG — kartice člankov (domača + seznami zavihkov)
========================================================================= */
.vd-articles {
clear: both; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: clamp(16px, 2vw, 26px); margin: 0; /* poln izkoristek širine, poravnano z naslovom (brez centriranja) */
}
/* Domača stran: recepti/blog enako široki kot hero/cta (poln .marg); 4 kartice napolnijo vrsto. */
.rec .vd-articles, .blog .vd-articles {
max-width: none;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.fourth {
float: none !important; width: auto !important; height: auto !important;
border: 1px solid var(--vd-border) !important; background: var(--vd-surface) !important;
border-radius: var(--vd-radius); overflow: hidden; display: flex; flex-direction: column; text-align: left;
box-shadow: var(--vd-shadow-sm); transition: transform .16s ease, box-shadow .16s ease, border-color .16s;
}
.fourth:hover { transform: translateY(-3px); box-shadow: var(--vd-shadow); border-color: var(--vd-border-strong); }
.fourth > a:first-child { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--vd-surface-2); }
.fourth > a:first-child img { width: 100% !important; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.fourth:hover > a:first-child img { transform: scale(1.05); }
/* Recept: naslov pod sliko */
.recs h3 { margin: 0 !important; padding: 15px 16px 17px !important; height: auto !important; overflow: visible !important; text-align: left !important; font-family: var(--vd-font-head); font-weight: 600 !important; font-size: 18px !important; line-height: 1.25 !important; }
.recs a { color: var(--vd-ink) !important; text-decoration: none !important; }
.recs h3 a:hover { color: var(--vd-green-700) !important; }
/* Blog: naslov + povzetek */
.blogs { background: var(--vd-surface) !important; color: var(--vd-ink) !important; }
.blogs span { float: none !important; width: auto !important; height: auto !important; overflow: visible !important; padding: 15px 16px 17px !important; display: block; color: var(--vd-ink-soft); font-size: 14.5px; line-height: 1.55; }
.blogs span h3 { margin: 0 0 8px !important; padding: 0 !important; height: auto !important; overflow: visible !important; font-family: var(--vd-font-head); font-weight: 600 !important; font-size: 18px !important; line-height: 1.25 !important; }
.blogs a { color: var(--vd-ink) !important; text-decoration: none !important; }
.blogs h3 a:hover { color: var(--vd-green-700) !important; }
/* Domača: sekciji Recepti / Blog — mehki premium pas z barvo znamke */
.rec, .blog {
float: none !important; width: auto !important; color: var(--vd-ink) !important; text-align: center !important;
max-width: none; margin: 0 0 46px !important;
padding: clamp(28px, 4vw, 46px) clamp(16px, 3vw, 34px) !important;
border-radius: var(--vd-radius); font-size: 16px !important; line-height: 1.5;
box-sizing: border-box; display: flow-root; /* BFC: zameji clear v mreži, da ne počisti straninih floatov */
}
.rec { background: var(--vd-green-050) !important; border: 1px solid var(--vd-border) !important; }
.blog { background: var(--vd-accent-100) !important; border: 1px solid color-mix(in srgb, var(--vd-accent) 22%, var(--vd-border)) !important; }
.rec h2, .blog h2 { font-family: var(--vd-font-head) !important; font-weight: 600 !important; font-size: clamp(26px, 4vw, 36px) !important; line-height: 1.1 !important; margin: 0 0 8px !important; padding: 0 !important; }
.rec h2 a { color: var(--vd-green-700) !important; text-decoration: none !important; }
.blog h2 a { color: var(--vd-accent-600) !important; text-decoration: none !important; }
.rec > .sto, .blog > .sto { margin-top: 26px !important; }
/* Domača: obarvana panoja (Recepti/Blog) se stikata s sosednjimi sekcijami — brez belega razmaka
(imata svoj padding in ozadje). Zato pobrišemo razmak panojev in spodnji rob sosednjih sekcij. */
.rec.vd-artsec, .blog.vd-artsec { margin: 0 !important; }
.vd-home-flush > .vd-cta, .vd-home-flush > .vd-hero { margin-bottom: 0 !important; }
.splitDiv { border-top: 1px solid var(--vd-border) !important; margin-top: 40px !important; padding-top: 34px !important; }
/* Naslov sekcije "Preberi tudi ..." pod člankom — namesto ogromnega oranžnega h6 */
.vsebina .splitDiv .vd-more-title {
margin: 0 0 24px;
font-family: var(--vd-font-head);
font-weight: 600;
font-size: clamp(24px, 3vw, 32px);
line-height: 1.15;
letter-spacing: -.01em;
color: var(--vd-ink);
}
.vsebina .splitDiv .vd-more-title::after {
content: ""; display: block; width: 46px; height: 3px; margin-top: 10px;
background: var(--vd-accent); border-radius: var(--vd-radius-pill);
}
/* Gumb "nazaj" pod člankom (isti vzorec kot pri izdelku) potrebuje zrak nad sabo */
.vsebina .vd-back.sto { margin-top: 34px; }
@media (max-width: 620px) {
.vd-articles { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.recs h3, .blogs span h3 { font-size: 16px !important; }
.recs h3 { padding: 12px 12px 14px !important; }
.blogs span { padding: 12px 12px 14px !important; }
}
/* Domača: Recepti / Blog kot swipe carousel (6 kartic, drsenje) */
.vd-artsec .vd-carousel { position: relative; }
.vd-artsec .vd-articles { /* prebij mrežo → vodoravni drsnik */
display: flex !important; grid-template-columns: none !important;
overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
-webkit-overflow-scrolling: touch; scrollbar-width: none; text-align: left;
gap: clamp(14px, 2vw, 22px); padding: 4px 2px 8px;
}
.vd-artsec .vd-articles::-webkit-scrollbar { display: none; }
.vd-artsec .vd-articles .fourth { flex: 0 0 clamp(250px, 30%, 300px); scroll-snap-align: start; }
.vd-artsec-foot { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 20px !important; }
.vd-artsec-foot .vd-carousel-dots { margin-top: 0; }
.vd-articles-all {
display: inline-flex; align-items: center; gap: 8px;
padding: 11px 26px; border-radius: var(--vd-radius-pill);
font-weight: 700; font-size: 14.5px; text-decoration: none !important; cursor: pointer;
background: var(--vd-green); color: #fff !important; border: 0; transition: background .15s;
}
.vd-articles-all:hover { background: var(--vd-green-600); }
.blog .vd-articles-all { background: var(--vd-accent); }
.blog .vd-articles-all:hover { background: var(--vd-accent-600); }
@media (max-width: 900px) { .vd-artsec .vd-articles .fourth { flex: 0 0 62%; } }
@media (max-width: 620px) { .vd-artsec .vd-articles .fourth { flex: 0 0 80%; } }
/* =========================================================================
TOAST OBVESTILA (npr. dodano v košarico)
========================================================================= */
.vd-toasts {
position: fixed; top: var(--vd-toast-top, 92px); left: 50%; right: auto; transform: translateX(-50%); z-index: 500;
display: flex; flex-direction: column; align-items: center; gap: 12px;
width: min(420px, calc(100vw - 28px)); pointer-events: none;
}
.vd-toast {
position: relative; overflow: hidden; pointer-events: auto; font-family: var(--vd-font); width: 100%;
background: var(--vd-surface); border: 1px solid var(--vd-border); border-radius: var(--vd-radius);
box-shadow: var(--vd-shadow-lg); display: flex; align-items: flex-start; gap: 12px; padding: 14px 12px 16px 14px;
transform: translateY(-18px); opacity: 0; transition: transform .32s cubic-bezier(.34,1.2,.5,1), opacity .3s;
}
.vd-toast.is-in { transform: translateY(0); opacity: 1; }
.vd-toast.is-out { transform: translateY(-18px); opacity: 0; }
.vd-toast-ico { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; }
.vd-toast-ico svg { width: 22px; height: 22px; }
.vd-toast-success .vd-toast-ico { background: var(--vd-green-100); color: var(--vd-green-700); }
.vd-toast-error .vd-toast-ico { background: #fbecea; color: var(--vd-danger); }
.vd-toast-thumb { flex: none; width: 48px; height: 48px; border-radius: 10px; overflow: hidden; background: var(--vd-photo-bg); display: grid; place-items: center; padding: 4px; box-sizing: border-box; }
.vd-toast-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.vd-toast-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vd-toast-body strong { font-size: 15.5px; color: var(--vd-ink); font-weight: 700; }
.vd-toast-body span { font-size: 14px; color: var(--vd-ink-soft); line-height: 1.4; }
.vd-toast-action {
margin-top: 9px; align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
background: var(--vd-green); color: #fff; text-decoration: none; font-weight: 700; font-size: 13.5px;
padding: 8px 15px; border-radius: var(--vd-radius-pill); transition: background .15s, transform .12s;
}
.vd-toast-action, .vd-toast-action:hover, .vd-toast-action:focus { color: #fff; }
.vd-toast-body .vd-toast-action span { color: #fff; }
.vd-toast-action:hover { background: var(--vd-green-600); transform: translateY(-1px); }
.vd-toast-action svg { width: 16px; height: 16px; }
.vd-toast-close { flex: none; border: none; background: transparent; color: var(--vd-muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 4px; margin: -2px -2px 0 0; }
.vd-toast-close:hover { color: var(--vd-ink); }
.vd-toast-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left; animation: vd-toast-shrink linear forwards; }
.vd-toast:hover .vd-toast-bar { animation-play-state: paused; }
.vd-toast-success .vd-toast-bar { background: var(--vd-green); }
.vd-toast-error .vd-toast-bar { background: var(--vd-danger); }
@keyframes vd-toast-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 620px) { .vd-toasts { width: calc(100vw - 24px); } }
/* =========================================================================
ENOSTRANSKI CHECKOUT (Faza 4)
========================================================================= */
.vd-checkout { clear: both; font-family: var(--vd-font); color: var(--vd-ink); max-width: var(--vd-container); margin: 0 auto; padding: 4px 0 30px; }
.vd-co-h1 { font-family: var(--vd-font-head) !important; font-weight: 600 !important; font-size: clamp(28px, 4vw, 40px) !important; color: var(--vd-ink) !important; margin: 0 0 24px !important; }
.vd-checkout-grid { display: grid; grid-template-columns: 1fr 380px; gap: clamp(20px, 3vw, 34px); align-items: start; }
.vd-checkout-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.vd-co-card { background: var(--vd-surface); border: 1px solid var(--vd-border); border-radius: var(--vd-radius); padding: clamp(18px, 2.5vw, 26px); box-shadow: var(--vd-shadow-sm); }
.vd-co-step { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.vd-co-num { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--vd-green); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.vd-co-step h2 { margin: 0; font-family: var(--vd-font-head); font-weight: 600; font-size: 21px; color: var(--vd-ink); }
.vd-co-login, .vd-co-edit { margin-left: auto; font-size: 14px; color: var(--vd-green-700); font-weight: 600; text-decoration: none; }
.vd-co-login:hover, .vd-co-edit:hover { text-decoration: underline; }
/* Postavke košarice */
.vd-co-items { display: flex; flex-direction: column; }
.vd-co-item { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--vd-border); }
.vd-co-item:first-child { padding-top: 0; }
.vd-co-thumb { flex: none; width: 66px; height: 66px; border-radius: var(--vd-radius-sm); overflow: hidden; background: var(--vd-photo-bg); display: grid; place-items: center; padding: 6px; box-sizing: border-box; }
.vd-co-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.vd-co-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vd-co-name { font-weight: 700; color: var(--vd-ink); text-decoration: none; font-size: 15.5px; line-height: 1.25; }
.vd-co-name:hover { color: var(--vd-green-700); }
.vd-co-sifra { font-size: 12.5px; color: var(--vd-muted); }
.vd-co-price-kos { font-size: 13px; color: var(--vd-ink-soft); }
.vd-co-controls { flex: none; display: flex; align-items: center; gap: 14px; }
.vd-co-price-vrs { font-weight: 800; color: var(--vd-green-700); font-size: 16px; min-width: 78px; text-align: right; }
.vd-co-gift { font-weight: 700; color: var(--vd-accent-600); }
.vd-co-remove { color: var(--vd-muted); display: inline-flex; padding: 6px; border-radius: 8px; transition: .15s; }
.vd-co-remove svg { width: 18px; height: 18px; }
.vd-co-remove:hover { color: var(--vd-danger); background: #fbecea; }
/* Koda popusta (popustForm) */
.vd-co-promo { margin-top: 16px; }
.vd-co-promo .blagPopust { float: none !important; width: auto !important; }
.vd-co-promo .kodaForm form { display: flex; gap: 8px; }
.vd-co-promo .codePop { flex: 1 1 auto; height: 44px; border: 1.5px solid var(--vd-border-strong); border-radius: var(--vd-radius-pill); padding: 0 18px; font-family: var(--vd-font); font-size: 15px; background: var(--vd-surface-2); outline: none; }
.vd-co-promo .codePop:focus { border-color: var(--vd-green); }
.vd-co-promo .popBtn { flex: none; height: 44px; border: none; cursor: pointer; background: var(--vd-ink); color: #fff; border-radius: var(--vd-radius-pill); padding: 0 22px; font-weight: 700; font-family: var(--vd-font); }
.vd-co-promo .popBtn:hover { background: var(--vd-green-700); }
/* Obrazec */
.vd-field { display: flex; flex-direction: column; }
.vd-field input, .vd-field select, .vd-field textarea, .vd-co-notes textarea {
width: 100%; box-sizing: border-box; height: 48px; border: 1.5px solid var(--vd-border-strong);
border-radius: var(--vd-radius-sm); padding: 0 16px; font-family: var(--vd-font); font-size: 15px;
background: var(--vd-surface-2); color: var(--vd-ink); outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
.vd-field input:focus, .vd-field select:focus, .vd-co-notes textarea:focus { border-color: var(--vd-green); background: var(--vd-surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vd-green) 15%, transparent); }
.vd-co-form { display: flex; flex-direction: column; gap: 12px; }
.vd-co-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vd-co-pravna { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vd-co-pravna[hidden] { display: none; } /* atribut hidden mora prevladati nad display:grid */
.vd-co-radio { display: flex; gap: 20px; margin-bottom: 4px; font-weight: 600; }
.vd-co-radio label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
/* Enoten segmentni preklopnik (Fizična / Pravna oseba) — blagajna + registracija */
.vd-segment {
display: inline-flex !important; gap: 0 !important; margin: 0 0 4px; padding: 4px; box-sizing: border-box; max-width: 100%;
background: var(--vd-surface-2); border: 1.5px solid var(--vd-border-strong); border-radius: var(--vd-radius-pill);
}
.vd-segment .vd-seg {
position: relative; margin: 0 !important; padding: 0 !important; float: none !important; width: auto !important;
display: block; cursor: pointer; border: none !important; background: none !important;
}
.vd-segment .vd-seg input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.vd-segment .vd-seg span {
display: block; padding: 9px 22px; border-radius: var(--vd-radius-pill); text-align: center; white-space: nowrap;
font-family: var(--vd-font); font-weight: 700; font-size: 14px; color: var(--vd-ink-soft);
transition: background .15s, color .15s;
}
.vd-segment .vd-seg input:checked + span { background: var(--vd-green); color: #fff; box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--vd-green) 55%, transparent); }
.vd-segment .vd-seg input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--vd-green) 25%, transparent); }
@media (max-width: 480px) { .vd-segment { display: flex !important; } .vd-segment .vd-seg { flex: 1 1 50%; } }
.vd-co-saved { background: var(--vd-surface-2); border: 1px solid var(--vd-border); border-radius: var(--vd-radius-sm); padding: 16px; line-height: 1.6; position: relative; }
.vd-co-saved .vd-co-edit { position: absolute; top: 14px; right: 16px; margin: 0; }
/* Radio "kartice" (dostava / plačilo) */
.vd-co-options { display: flex; flex-direction: column; gap: 10px; }
.vd-co-opt { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--vd-border-strong); border-radius: var(--vd-radius-sm); cursor: pointer; transition: border-color .15s, background .15s; }
.vd-co-opt:hover { border-color: var(--vd-green); }
.vd-co-opt input { flex: none; width: 18px; height: 18px; accent-color: var(--vd-green); }
.vd-co-opt-body { display: flex; flex-direction: column; gap: 2px; }
.vd-co-opt-body strong { font-size: 15.5px; color: var(--vd-ink); }
.vd-co-opt-body span { font-size: 13px; color: var(--vd-muted); }
.vd-co-opt:has(input:checked) { border-color: var(--vd-green); background: var(--vd-green-050); }
.vd-co-opt.is-hidden { display: none; }
.vd-co-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.4; color: var(--vd-ink-soft); cursor: pointer; }
.vd-co-check input { flex: none; width: 17px; height: 17px; margin-top: 1px; accent-color: var(--vd-green); }
.vd-co-check a { color: var(--vd-green-700); }
/* Lep custom checkbox (dostava na drug naslov, soglasja) */
.vd-co-switch { display: inline-flex; align-items: flex-start; gap: 11px; cursor: pointer; font-weight: 600; font-size: 14.5px; color: var(--vd-ink-soft); user-select: none; }
.vd-co-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.vd-co-switch-box {
flex: none; width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--vd-border-strong);
background: var(--vd-surface); display: grid; place-items: center; transition: background .14s, border-color .14s;
}
.vd-co-switch-box::after {
content: ""; width: 12px; height: 12px; transform: scale(0); transition: transform .14s;
background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.vd-co-switch:has(input:checked) { color: var(--vd-ink); }
.vd-co-switch:has(input:checked) .vd-co-switch-box { background: var(--vd-green); border-color: var(--vd-green); }
.vd-co-switch:has(input:checked) .vd-co-switch-box::after { transform: scale(1); }
.vd-co-switch input:focus-visible + .vd-co-switch-box { box-shadow: 0 0 0 3px color-mix(in srgb, var(--vd-green) 25%, transparent); }
/* Soglasja (GDPR / pogoji) — pill preklopnik (toggle) */
.vd-co-switch-sm { font-size: 13px; font-weight: 500; line-height: 1.4; align-items: center; gap: 12px; }
.vd-co-switch-sm .vd-co-switch-box {
width: 42px; height: 24px; border-radius: 999px; display: block; place-items: initial; position: relative;
border: 1.5px solid var(--vd-border-strong); background: var(--vd-surface-2);
transition: background .18s, border-color .18s;
}
.vd-co-switch-sm .vd-co-switch-box::after {
content: ""; position: absolute; top: 50%; left: 3px; transform: translateY(-50%);
width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.28);
transition: left .18s;
}
.vd-co-switch-sm:has(input:checked) .vd-co-switch-box { background: var(--vd-green); border-color: var(--vd-green); }
.vd-co-switch-sm:has(input:checked) .vd-co-switch-box::after { left: 21px; transform: translateY(-50%); }
.vd-co-switch-sm a { color: var(--vd-green-700); }
/* Naslov dostave (viden le pri dostavi po pošti) + večji vnos */
.vd-co-addr { margin-top: 18px; }
.vd-co-textarea {
width: 100%; box-sizing: border-box; min-height: 88px; height: auto; padding: 12px 16px;
border: 1.5px solid var(--vd-border-strong); border-radius: var(--vd-radius-sm);
font-family: var(--vd-font); font-size: 15px; line-height: 1.55; background: var(--vd-surface-2); color: var(--vd-ink);
outline: none; resize: vertical; transition: border-color .15s, box-shadow .15s, background .15s;
}
.vd-co-textarea:focus { border-color: var(--vd-green); background: var(--vd-surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vd-green) 15%, transparent); }
.vd-co-addr .vd-co-textarea { margin-top: 14px; }
/* Kartica opombe */
.vd-co-notes-label { display: block; font-family: var(--vd-font-head); font-weight: 600; font-size: 18px; color: var(--vd-ink); margin-bottom: 12px; }
.vd-co-notes-label span { color: var(--vd-muted); font-weight: 400; font-size: 14px; font-family: var(--vd-font); }
/* Namig ob gumbu za oddajo — pove, kaj še manjka */
.vd-co-gate { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin: 4px 0 12px; border-radius: 12px; font-weight: 600; font-size: 13.5px; line-height: 1.35;
background: var(--vd-accent-100); border: 1px solid color-mix(in srgb, var(--vd-accent) 34%, transparent); color: color-mix(in srgb, var(--vd-accent) 42%, var(--vd-ink)); }
.vd-co-gate[hidden] { display: none; }
.vd-co-gate svg { width: 19px; height: 19px; flex: none; color: var(--vd-accent-600); }
/* Povzetek (lepljiv) */
.vd-checkout-summary { position: sticky; top: calc(var(--vd-header-h) + 16px); }
.vd-co-sum { background: var(--vd-surface); border: 1px solid var(--vd-border); border-radius: var(--vd-radius); padding: 22px; box-shadow: var(--vd-shadow); }
.vd-co-sum-title { font-family: var(--vd-font-head); font-weight: 600; font-size: 20px; margin: 0 0 16px; }
.vd-co-sum-rows { display: flex; flex-direction: column; gap: 10px; }
.vd-co-sum-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; color: var(--vd-ink-soft); }
.vd-co-sum-row span:last-child { font-weight: 600; color: var(--vd-ink); }
.vd-co-sum-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 16px 0 4px; padding-top: 16px; border-top: 1px solid var(--vd-border); font-weight: 800; }
.vd-co-sum-total span:first-child { font-size: 16px; }
.vd-co-sum-total span:last-child { font-size: 26px; color: var(--vd-green-700); letter-spacing: -.01em; }
.vd-co-consent { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
.vd-co-submit {
width: 100%; height: 56px; border: none; cursor: pointer; gap: 10px;
background: var(--vd-accent) !important;
background-image: linear-gradient(180deg, color-mix(in srgb, var(--vd-accent) 88%, #fff), var(--vd-accent-600)) !important;
color: #fff !important; font-size: 17px; font-weight: 700; border-radius: var(--vd-radius-pill);
box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--vd-accent) 70%, transparent); transition: transform .12s, box-shadow .15s, filter .15s;
}
.vd-co-submit svg { width: 22px; height: 22px; }
.vd-co-submit:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 20px 38px -12px color-mix(in srgb, var(--vd-accent) 78%, transparent); }
.vd-co-submit[disabled] { opacity: .6; cursor: default; transform: none; filter: none; }
.vd-co-secure { text-align: center; font-size: 12.5px; color: var(--vd-muted); margin: 12px 0 0; }
.vd-co-empty { text-align: center; padding: 48px 20px 8px; }
.vd-co-empty-ico {
width: 88px; height: 88px; margin: 0 auto 18px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(145deg, var(--vd-green), var(--vd-green-700)); color: #fff;
box-shadow: 0 12px 26px -12px rgba(76,136,73,.6);
}
.vd-co-empty-ico svg { width: 42px; height: 42px; display: block; }
.vd-co-empty p { font-size: 19px; color: var(--vd-ink); margin: 0 0 8px; font-weight: 600; }
.vd-co-empty-sub { font-size: 15px; color: var(--vd-muted); font-weight: 400; }
@media (max-width: 900px) {
.vd-checkout-grid { grid-template-columns: 1fr; }
.vd-checkout-summary { position: static; order: 2; }
}
@media (max-width: 560px) {
.vd-co-2, .vd-co-pravna { grid-template-columns: 1fr; }
.vd-co-item { flex-wrap: wrap; }
.vd-co-controls { width: 100%; justify-content: space-between; }
}
/* =========================================================================
DROBTINE (breadcrumb) — čiste, brez obrob
========================================================================= */
.breadcrumb {
clear: both; float: none !important; width: auto !important; height: auto !important;
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
background: none !important; border: none !important; border-radius: 0 !important;
padding: 0 !important; margin: 22px 0 22px !important;
font-family: var(--vd-font); font-size: 13.5px; line-height: 1.5; color: var(--vd-muted);
}
.breadcrumb a {
background: none !important; background-image: none !important; padding: 0 !important; margin: 0 !important;
color: var(--vd-ink-soft) !important; text-decoration: none; line-height: 1.5 !important; border: none !important;
}
.breadcrumb a:hover { color: var(--vd-green-700) !important; }
.breadcrumb > * + *::before { content: "›"; color: var(--vd-border-strong); margin-right: 6px; font-weight: 600; }
.breadcrumb .crumb-current { color: var(--vd-ink); font-weight: 600; }
/* =========================================================================
UPORABNIŠKE STRANI (prijava / registracija)
========================================================================= */
.vd-auth { clear: both; max-width: 500px; margin: 24px auto 64px; padding: 0 16px; font-family: var(--vd-font); }
.vd-auth-wide { max-width: 720px; }
.vd-auth-card { background: var(--vd-surface); border: 1px solid var(--vd-border); border-radius: var(--vd-radius); box-shadow: var(--vd-shadow); padding: clamp(24px, 4vw, 36px); box-sizing: border-box; }
.vd-auth-title { font-family: var(--vd-font-head); font-weight: 600; font-size: clamp(24px, 4vw, 30px); margin: 0 0 8px; color: var(--vd-ink); text-align: center; }
.vd-auth-intro { color: var(--vd-ink-soft); font-size: 14.5px; line-height: 1.55; margin: 0 0 22px; text-align: center; }
/* PRIJAVA_INFO vsebuje lasten — ostiliramo ga kot naslov + tekst */
.vd-auth-head { text-align: center; margin: 0 0 22px; color: var(--vd-ink-soft); font-size: 14.5px; line-height: 1.55; }
.vd-auth-head h1, .vd-auth-head h2, .vd-auth-head h3 { font-family: var(--vd-font-head); font-weight: 600; font-size: clamp(24px, 4vw, 30px); margin: 0 0 10px; color: var(--vd-ink); line-height: 1.15; }
.vd-auth-form { display: flex; flex-direction: column; gap: 14px; }
.vd-auth .inputF, .vd-auth select {
width: 100%; height: 50px; box-sizing: border-box; margin: 0 !important; float: none !important;
border: 1.5px solid var(--vd-border-strong); background: var(--vd-surface-2); border-radius: var(--vd-radius-sm);
padding: 0 16px; font-family: var(--vd-font); font-size: 15.5px; color: var(--vd-ink); outline: none;
transition: border-color .15s, box-shadow .15s, background .15s;
}
.vd-auth .inputF:focus, .vd-auth select:focus {
border-color: var(--vd-green); background: var(--vd-surface);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--vd-green) 15%, transparent);
}
.vd-auth .inputF::placeholder { color: var(--vd-muted); }
.vd-auth .inputF[readonly] { background: color-mix(in srgb, var(--vd-border) 45%, var(--vd-surface-2)); color: var(--vd-ink-soft); cursor: not-allowed; }
.vd-auth .inputF[readonly]:focus { border-color: var(--vd-border-strong); box-shadow: none; }
.vd-auth .sendBtn {
width: 100%; height: 52px; border: none !important; cursor: pointer; border-radius: var(--vd-radius-pill);
background: var(--vd-green) !important; color: #fff !important; font-family: var(--vd-font); font-size: 16px; font-weight: 700;
margin: 4px 0 0 !important; transition: background .15s, transform .12s, box-shadow .15s;
box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--vd-green) 55%, transparent);
}
.vd-auth .sendBtn:hover { background: var(--vd-green-600) !important; transform: translateY(-1px); }
.vd-auth .sendBtn.sendBtn-ghost {
background: var(--vd-green-050) !important; color: var(--vd-green-700) !important; box-shadow: none;
border: 1px solid color-mix(in srgb, var(--vd-green) 22%, var(--vd-border)) !important;
}
.vd-auth .sendBtn.sendBtn-ghost:hover { background: var(--vd-green-100) !important; }
.vd-auth-status { display: none; }
.vd-auth-forgot { margin-top: 20px; border-top: 1px solid var(--vd-border); padding-top: 16px; }
.vd-auth-forgot summary { cursor: pointer; font-weight: 700; color: var(--vd-green-700); font-size: 14px; list-style: none; }
.vd-auth-forgot summary::-webkit-details-marker { display: none; }
.vd-auth-forgot summary::before { content: "🔑"; margin-right: 7px; }
.vd-auth-forgot[open] summary { margin-bottom: 12px; }
.vd-auth-forgot .vd-auth-intro { text-align: left; margin-bottom: 14px; }
.vd-auth-forgot-info h1, .vd-auth-forgot-info h2, .vd-auth-forgot-info h3 { font-family: var(--vd-font); font-size: 15px; font-weight: 700; margin: 0 0 6px; color: var(--vd-ink); }
.vd-auth-alt { text-align: center; margin-top: 22px; }
.vd-auth-alt h3 { font-family: var(--vd-font-head); font-weight: 600; font-size: 18px; margin: 0 0 6px; color: var(--vd-ink); }
.vd-auth-alt p { color: var(--vd-ink-soft); font-size: 14px; line-height: 1.5; margin: 0 0 14px; }
/* Registracija — 2-stolpčni obrazec (premagamo legacy float .l50/.r50) */
.vd-auth-form-grid { display: flex; flex-direction: row !important; flex-wrap: wrap; gap: 14px; align-items: start; }
.vd-auth-form-grid > .l50, .vd-auth-form-grid > .r50 {
flex: 1 1 calc(50% - 7px); min-width: 210px; float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box;
}
.vd-auth-form-grid > .sto, .vd-auth-form-grid > .pravnaInfo, .vd-auth-form-grid > .inputPlace {
flex: 1 1 100%; width: 100% !important; float: none !important; margin: 0 !important; box-sizing: border-box;
}
.vd-auth-form-grid .pravnaInfo { display: flex; flex-wrap: wrap; gap: 14px; padding: 0 !important; }
.vd-auth-form-grid .pravnaInfo .l50, .vd-auth-form-grid .pravnaInfo .r50 { flex: 1 1 calc(50% - 7px); min-width: 210px; float: none !important; width: auto !important; margin: 0 !important; }
.vd-auth-form-grid .inputPlace { display: flex; gap: 22px; align-items: center; }
.vd-auth-form-grid .inputPlace > div { float: none !important; margin: 0 !important; }
.vd-auth-form-grid label { font-size: 14px; color: var(--vd-ink-soft); }
.vd-auth-form-grid .sto[style*="font-size"] label { font-size: 12.5px; }
.vd-auth-form-grid .userInfoDiv { flex: 1 1 100%; }
/* =========================================================================
ODZIVNOST
========================================================================= */
@media (max-width: 1024px) {
.vd-footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
.vd-foot-brand { grid-column: 1 / -1; max-width: none; }
.vd-foot-news { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
:root { --vd-header-h: 70px; }
/* Ob scrollanju ostane pripeta samo glavna vrstica; top vrstica (telefon/socials/račun) zdrsi izven zaslona.
Dosežemo z negativnim top v višini top vrstice (--vd-topbar-h nastavi vd-ui.js). */
.vd-header { position: sticky; top: calc(-1 * var(--vd-topbar-h, 42px)); }
.vd-header.is-scrolled { box-shadow: 0 8px 24px -14px rgba(30, 28, 22, .35); }
.vd-nav { display: none; } /* namizni meni skrijemo; uporabimo predal */
.vd-adv .ads { grid-template-columns: repeat(2, 1fr) !important; gap: 20px; }
.prednost h5, .prednost h5.amatic { overflow-wrap: anywhere; }
.vd-burger { display: inline-flex; }
.vd-search-toggle { display: inline-flex; } /* preklop iskalnika ob košarici */
.vd-icon-btn.vd-quick { display: none; } /* na mobilnem sta hitri ikoni v predalu */
.vd-topbar-moto { display: none; }
.vd-topbar-about { display: inline-flex; } /* meni Vege&Dobro prikazan tudi na mobilniku */
.vd-account .vd-acc-full { display: none; } /* skrajšan račun na mobilniku */
.vd-logo img { height: 50px; }
.vd-cart-txt { display: none; } /* na mobilniku le ikona košarice */
.vd-cart { padding: 10px; }
/* Vrhnja vrstica na mobilniku: levo Vege&Dobro + telefon, desno samo Prijava.
Tabletke so nekoliko ožje, da se vse tri postavijo v eno vrsto. */
.vd-topbar-in { min-height: 46px; }
.vd-topbar-left { gap: 8px; min-width: 0; }
.vd-topbar-right { gap: 8px; }
.vd-topbar-contact { gap: 8px; }
.vd-about-trigger { padding: 5px 11px; font-size: 13px; gap: 3px; }
.vd-about-caret { width: 11px; height: 11px; }
.vd-top-phone {
gap: 6px; font-size: 13px; font-weight: 700;
background: rgba(255, 255, 255, .16); padding: 5px 11px;
}
.vd-top-phone svg { width: 15px; height: 15px; }
.vd-top-phone .vd-top-phone-txt { display: inline; } /* številka vidna tudi na mobilniku */
.vd-account {
gap: 6px; background: rgba(255, 255, 255, .16);
padding: 5px 11px; border-radius: var(--vd-radius-pill); font-size: 13px;
}
.vd-account a::after { display: none; }
/* Iskalnik je skrit; ob kliku se prikaže kot plavajoče okno nad zatemnjenim ozadjem
(position: fixed, ~15% od vrha) — glava se ob tem ne premakne. */
.vd-search { display: none; }
.vd-search-scrim { display: none; }
.vd-header.vd-search-open .vd-search-scrim {
display: block; position: fixed; inset: 0; z-index: 400;
background: rgba(24, 22, 16, .5);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
animation: vd-scrim-in .2s ease;
}
.vd-header.vd-search-open .vd-search {
display: block; position: fixed; z-index: 402;
top: 15%; left: 50%; transform: translateX(-50%);
width: min(92vw, 560px); max-width: none; margin: 0; padding: 0;
animation: vd-searchpop-in .24s cubic-bezier(.2, .7, .3, 1);
}
.vd-header.vd-search-open .vd-search-input {
height: 54px; background: var(--vd-surface); border-color: var(--vd-surface);
box-shadow: 0 18px 50px -16px rgba(0, 0, 0, .5);
}
}
@keyframes vd-search-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes vd-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes vd-searchpop-in { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 640px) {
.vd-header-main { gap: 12px; }
.vd-footer-grid { grid-template-columns: 1fr; gap: 28px; }
.vd-foot-bottom { justify-content: center; text-align: center; }
}
/* Prednosti (trust bar) manjše na telefonih */
@media (max-width: 620px) {
.vd-adv .ads { padding: 22px 0 !important; gap: 14px !important; }
.prednost-ico { width: 46px; height: 46px; margin-bottom: 6px; box-shadow: 0 5px 12px -6px rgba(76,136,73,.55); }
.prednost-ico svg { width: 22px; height: 22px; }
.prednost h5, .prednost h5.amatic { font-size: 15px !important; }
.prednost { font-size: 12.5px; line-height: 1.35; gap: 2px; }
}
/* ============================================================================
KONTAKTNA STRAN (premium)
============================================================================ */
.vd-contact { max-width: 1100px; margin: 0 auto; padding: 8px 0 40px; }
.vd-contact-hero { text-align: center; max-width: 720px; margin: 0 auto 36px; }
.vd-contact-kicker {
display: inline-block; font-family: var(--vd-font); text-transform: uppercase;
letter-spacing: .18em; font-size: 13px; font-weight: 700; color: var(--vd-green-600);
background: var(--vd-green-100); padding: 5px 14px; border-radius: var(--vd-radius-pill); margin-bottom: 14px;
}
.vd-contact-hero h1 {
font-family: var(--vd-font-head); color: var(--vd-ink);
font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08; margin: 0 0 12px;
}
.vd-contact-lead { color: var(--vd-ink-soft); font-size: 17px; line-height: 1.6; margin: 0; }
.vd-contact-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 26px; align-items: start; }
/* --- Info kartice (levo) --- */
.vd-contact-aside { display: flex; flex-direction: column; gap: 12px; }
.vd-info-card {
display: flex; align-items: center; gap: 14px; text-decoration: none;
background: var(--vd-surface); border: 1px solid var(--vd-border);
border-radius: var(--vd-radius); padding: 16px 18px; box-shadow: var(--vd-shadow-sm);
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
a.vd-info-card:hover { transform: translateY(-2px); box-shadow: var(--vd-shadow); border-color: var(--vd-green); }
.vd-info-ic {
flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--vd-green-100); color: var(--vd-green-700);
}
.vd-info-ic svg { width: 24px; height: 24px; }
.vd-info-card--static .vd-info-ic { background: var(--vd-accent-100); color: var(--vd-accent-600); }
.vd-info-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vd-info-label { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--vd-muted); font-weight: 700; }
.vd-info-val { color: var(--vd-ink); font-size: 15.5px; line-height: 1.4; }
.vd-info-val strong { color: var(--vd-ink); }
.vd-contact-eco {
display: flex; align-items: center; gap: 10px; margin-top: 2px;
background: var(--vd-green-050); border: 1px dashed var(--vd-border-strong);
border-radius: var(--vd-radius-sm); padding: 12px 16px;
color: var(--vd-ink-soft); font-size: 13.5px; line-height: 1.4;
}
.vd-contact-eco svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--vd-green-600); }
.vd-contact-social { display: flex; gap: 10px; margin-top: 4px; }
.vd-contact-social a {
width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
background: var(--vd-surface-2); color: var(--vd-ink-soft); border: 1px solid var(--vd-border);
transition: background .16s, color .16s, transform .16s;
}
.vd-contact-social a:hover { background: var(--vd-green); color: #fff; transform: translateY(-2px); border-color: var(--vd-green); }
.vd-contact-social svg { width: 20px; height: 20px; }
/* --- Obrazec (desno) --- */
.vd-contact-form-card {
background: var(--vd-surface); border: 1px solid var(--vd-border);
border-radius: var(--vd-radius); padding: 30px; box-shadow: var(--vd-shadow);
}
.vd-contact-form-card h2 { font-family: var(--vd-font-head); color: var(--vd-ink); font-size: 26px; margin: 0 0 4px; }
.vd-contact-form-sub { color: var(--vd-muted); margin: 0 0 22px; font-size: 15px; }
.vd-contact-form-card #fKontakt { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vd-contact-form-card .l50,
.vd-contact-form-card .r50 { width: auto; margin: 0; float: none; }
.vd-contact-form-card .sto { grid-column: 1 / -1; width: 100%; margin: 0; }
.vd-contact-form-card .inputF,
.vd-contact-form-card .areaF {
width: 100%; box-sizing: border-box; padding: 13px 15px; margin: 0;
border: 1px solid var(--vd-border-strong); border-radius: var(--vd-radius-sm);
background: var(--vd-surface); color: var(--vd-ink); font-family: var(--vd-font); font-size: 15px;
transition: border-color .15s, box-shadow .15s;
}
.vd-contact-form-card .inputF::placeholder,
.vd-contact-form-card .areaF::placeholder { color: var(--vd-muted); }
.vd-contact-form-card .inputF:focus,
.vd-contact-form-card .areaF:focus {
outline: none; border-color: var(--vd-green); box-shadow: 0 0 0 3px var(--vd-green-100);
}
.vd-contact-form-card .areaF { min-height: 148px; resize: vertical; margin-bottom: 4px; }
.vd-contact-form-card .sto label { color: var(--vd-ink-soft); font-size: 12.5px; line-height: 1.5; }
.vd-contact-form-card .sto input[type="checkbox"] { accent-color: var(--vd-green); margin-right: 6px; }
.vd-contact-form-card .sendBtn {
-webkit-appearance: none; appearance: none; cursor: pointer; border: 0; width: 100%; box-sizing: border-box; display: block;
border-radius: var(--vd-radius-pill); background: var(--vd-green); color: #fff;
font-family: var(--vd-font); font-weight: 700; letter-spacing: .03em; text-indent: .03em; text-transform: uppercase; text-align: center;
padding: 15px 30px; font-size: 14.5px; box-shadow: var(--vd-shadow);
transition: background .15s, transform .06s;
}
.vd-contact-form-card .sendBtn:hover { background: var(--vd-green-600); }
.vd-contact-form-card .sendBtn:active { transform: translateY(1px); }
.vd-contact-form-card .napaka { color: var(--vd-danger); font-size: 14px; margin-top: 6px; display: none; }
/* --- Zemljevid --- */
.vd-contact-map {
margin-top: 32px; border-radius: var(--vd-radius); overflow: hidden;
border: 1px solid var(--vd-border); box-shadow: var(--vd-shadow); line-height: 0;
}
.vd-contact-map iframe { display: block; width: 100%; }
@media (max-width: 860px) {
.vd-contact-grid { grid-template-columns: 1fr; gap: 20px; }
.vd-contact-form-card { padding: 24px; }
}
@media (max-width: 520px) {
.vd-contact-form-card #fKontakt { grid-template-columns: 1fr; }
.vd-contact-form-card { padding: 20px; }
.vd-contact-map iframe { height: 340px; }
}
/* ============================================================================
PRODAJNA MESTA (premium)
============================================================================ */
.vd-pm { max-width: 1100px; margin: 0 auto; padding: 8px 0 40px; }
.vd-pm-hero { text-align: center; max-width: 760px; margin: 0 auto 28px; }
.vd-pm-hero h1 {
font-family: var(--vd-font-head); color: var(--vd-ink);
font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08; margin: 12px 0;
}
.vd-pm-map {
height: 460px; border-radius: var(--vd-radius); overflow: hidden;
border: 1px solid var(--vd-border); box-shadow: var(--vd-shadow);
margin-bottom: 36px; position: relative; z-index: 0;
}
.vd-pm-map .leaflet-container { font-family: var(--vd-font); }
.vd-pm-city { margin-bottom: 22px; }
.vd-pm-city-head {
width: 100%; text-align: left; cursor: pointer; background: none; border: 0;
border-bottom: 2px solid var(--vd-green-100); margin: 0 0 14px; padding: 0 0 10px;
display: flex; align-items: center; gap: 10px; color: var(--vd-ink);
font-family: var(--vd-font-head); font-size: 24px;
}
.vd-pm-city-head:hover .vd-pm-city-name { color: var(--vd-green-600); }
.vd-pm-caret { width: 22px; height: 22px; margin-left: auto; color: var(--vd-muted); transition: transform .18s ease; flex: 0 0 auto; }
.vd-pm-city.is-collapsed .vd-pm-caret { transform: rotate(-90deg); }
.vd-pm-city.is-collapsed .vd-pm-grid { display: none; }
.vd-pm-count {
font-family: var(--vd-font); font-size: 13px; font-weight: 700;
background: var(--vd-green-100); color: var(--vd-green-700);
border-radius: var(--vd-radius-pill); padding: 2px 11px;
}
.vd-pm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.vd-pm-card {
background: var(--vd-surface); border: 1px solid var(--vd-border);
border-radius: var(--vd-radius); padding: 18px 20px; box-shadow: var(--vd-shadow-sm);
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.vd-pm-card:hover { transform: translateY(-2px); box-shadow: var(--vd-shadow); border-color: var(--vd-green); }
.vd-pm-card h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.25; color: var(--vd-ink); font-family: var(--vd-font); font-weight: 700; }
.vd-pm-addr, .vd-pm-note {
display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 0;
color: var(--vd-ink-soft); font-size: 14px; line-height: 1.45;
}
.vd-pm-addr svg, .vd-pm-note svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; color: var(--vd-green-600); }
.vd-pm-note { color: var(--vd-muted); font-size: 13px; }
.vd-pm-note svg { color: var(--vd-accent-600); }
@media (max-width: 520px) {
.vd-pm-map { height: 340px; }
.vd-pm-grid { grid-template-columns: 1fr; }
}
/* Klikabilni naziv prodajnega mesta */
.vd-pm-card h3 a { color: var(--vd-ink); text-decoration: none; transition: color .15s; }
.vd-pm-card h3 a:hover { color: var(--vd-green-600); }
.vd-pm-ext { width: 12px; height: 12px; opacity: .5; display: inline-block; vertical-align: middle; margin-left: 5px; }
.vd-pm-card h3 a:hover .vd-pm-ext { opacity: 1; }
/* Vrsta prodajnega mesta (trgovina / restavracija) */
.vd-pm-pin { background: none; border: 0; }
.vd-pm-pin svg { filter: drop-shadow(0 2px 3px rgba(43,42,37,.35)); }
.vd-pm-legend { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin: -20px 0 30px; }
.vd-pm-leg { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--vd-ink-soft); font-weight: 600; }
.vd-pm-leg i { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; }
.vd-pm-leg--trg i { background: var(--vd-green); }
.vd-pm-leg--res i { background: var(--vd-accent); }
.vd-pm-card { position: relative; }
.vd-pm-card h3 { padding-right: 84px; }
.vd-pm-type {
position: absolute; top: 14px; right: 14px;
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
padding: 3px 9px; border-radius: var(--vd-radius-pill); line-height: 1.4;
}
.vd-pm-type--trg { background: var(--vd-green-100); color: var(--vd-green-700); }
.vd-pm-type--res { background: var(--vd-accent-100); color: var(--vd-accent-600); }
.vd-pm-card--res:hover { border-color: var(--vd-accent); }
/* ---------- Accordion (kontaktna stran: Veleprodaja) ---------- */
.vd-accordion { margin-bottom: 32px; border: 1px solid var(--vd-border); border-radius: var(--vd-radius); background: var(--vd-surface); box-shadow: var(--vd-shadow-sm); overflow: hidden; }
.vd-accordion-head {
width: 100%; text-align: left; cursor: pointer; background: none; border: 0;
padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
font-family: var(--vd-font-head); font-size: 23px; color: var(--vd-ink);
}
.vd-accordion-head:hover { color: var(--vd-green-600); }
.vd-accordion-caret { width: 24px; height: 24px; color: var(--vd-muted); transition: transform .18s ease; flex: 0 0 auto; }
.vd-accordion.is-collapsed .vd-accordion-caret { transform: rotate(-90deg); }
.vd-accordion-body { padding: 4px 24px 24px; color: var(--vd-ink-soft); line-height: 1.6; }
.vd-accordion.is-collapsed .vd-accordion-body { display: none; }
/* Ukroti velike inline pisave iz CMS-a znotraj accordiona */
.vd-accordion-body h2, .vd-accordion-body h2 span { font-size: 24px !important; color: var(--vd-ink); margin: 0 0 6px; }
.vd-accordion-body h3, .vd-accordion-body h3 span { font-size: 18px !important; color: var(--vd-ink); margin: 0 0 10px; }
.vd-accordion-body span[style*="font-size:20px"] { font-size: 16px !important; }
.vd-accordion-body span[style*="font-size:18px"] { font-size: 15px !important; }
/* ============================================================================
HERO SLIDER (vstopna stran) — premium, tekst prek slike (brez rezanja)
============================================================================ */
.vd-hero { position: relative; border-radius: var(--vd-radius); overflow: hidden; box-shadow: var(--vd-shadow); margin-bottom: 26px; background: var(--vd-surface-2); }
.vd-hero-viewport { overflow: hidden; }
.vd-hero-track { display: flex; will-change: transform; transition: transform .55s cubic-bezier(.4,.0,.2,1); }
.vd-hero-slide {
position: relative; flex: 0 0 100%; min-width: 100%;
height: clamp(360px, 42vw, 540px);
background-size: cover; background-position: center; background-repeat: no-repeat;
}
.vd-hero-slide--nobg { background: linear-gradient(120deg, var(--vd-green-700), var(--vd-green) 60%, var(--vd-accent)); }
.vd-hero-scrim {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(0deg, rgba(20,22,18,.70) 0%, rgba(20,22,18,.32) 34%, rgba(20,22,18,.02) 62%);
}
.vd-hero-inner {
position: absolute; inset: 0; z-index: 2; display: flex;
align-items: flex-end; justify-content: center; text-align: center;
padding: clamp(20px, 5vw, 56px) clamp(20px, 5vw, 56px) clamp(52px, 7vw, 82px);
}
.vd-hero-content { max-width: 760px; margin: 0 auto; color: #fff; }
.vd-hero-linkall { color: #fff; text-decoration: none; display: block; }
.vd-hero-title {
font-family: var(--vd-font-head); font-weight: 700;
font-size: clamp(28px, 4.6vw, 54px); line-height: 1.05; margin: 0 0 12px;
color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.vd-hero-sub { font-size: clamp(15px, 1.8vw, 20px); line-height: 1.5; color: rgba(255,255,255,.92); text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.vd-hero-sub p { margin: 0 0 6px; }
.vd-hero-btn {
display: inline-block; margin-top: 20px; text-decoration: none;
background: var(--vd-accent); color: #fff; font-weight: 700; letter-spacing: .01em;
padding: 13px 28px; border-radius: var(--vd-radius-pill); box-shadow: var(--vd-shadow);
transition: background .15s, transform .06s;
}
.vd-hero-btn:hover { background: var(--vd-accent-600); color: #fff; }
.vd-hero-btn:active { transform: translateY(1px); }
.vd-hero-linkall:hover { color: #fff; }
/* Puščice */
.vd-hero-arrow {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
background: rgba(255,255,255,.85); color: var(--vd-ink);
display: grid; place-items: center; box-shadow: var(--vd-shadow);
transition: background .15s, transform .15s; -webkit-tap-highlight-color: transparent;
}
.vd-hero-arrow:hover { background: #fff; }
.vd-hero-prev { left: 16px; }
.vd-hero-next { right: 16px; }
.vd-hero-prev::before, .vd-hero-next::before {
content: ""; width: 11px; height: 11px; border-top: 2.5px solid currentColor; border-right: 2.5px solid currentColor;
}
.vd-hero-prev::before { transform: rotate(-135deg); margin-left: 4px; }
.vd-hero-next::before { transform: rotate(45deg); margin-right: 4px; }
/* Pike */
.vd-hero-dots { position: absolute; z-index: 3; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 9px; }
.vd-hero-dot { width: 10px; height: 10px; border-radius: 50%; border: 0; cursor: pointer; padding: 0; background: rgba(255,255,255,.5); transition: background .15s, transform .15s; }
.vd-hero-dot:hover { background: rgba(255,255,255,.8); }
.vd-hero-dot.is-active { background: #fff; transform: scale(1.25); }
@media (max-width: 640px) {
.vd-hero-slide { height: 430px; }
.vd-hero-inner { align-items: flex-end; padding: 20px 18px 42px; }
.vd-hero-scrim { background: linear-gradient(0deg, rgba(20,22,18,.72) 8%, rgba(20,22,18,.25) 55%, rgba(20,22,18,.15)); }
.vd-hero-content { max-width: none; }
.vd-hero-arrow { display: none; } /* na mobilnem swipe */
}
/* ============================================================================
CTA poziv (vstopna stran → prodajna mesta)
============================================================================ */
.vd-cta, .vd-cta *, .vd-hero, .vd-hero * { box-sizing: border-box; } /* padding znotraj širine (width:100% gumb ne prekipi) */
.vd-cta-text { min-width: 0; }
.vd-cta {
position: relative; overflow: hidden; border-radius: var(--vd-radius); margin: 6px 0 26px;
background: linear-gradient(120deg, var(--vd-green-700), var(--vd-green) 70%);
background-size: cover; background-position: center; box-shadow: var(--vd-shadow);
}
.vd-cta-scrim { display: none; }
.vd-cta--img .vd-cta-scrim { display: block; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(20,40,20,.78), rgba(20,40,20,.45)); }
.vd-cta-inner {
position: relative; z-index: 2;
display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
padding: clamp(24px, 4vw, 44px) clamp(22px, 4vw, 52px);
}
.vd-cta-text { flex: 1 1 340px; color: #fff; }
.vd-cta-title { font-family: var(--vd-font-head); font-weight: 700; font-size: clamp(24px, 3vw, 36px); line-height: 1.1; margin: 0 0 8px; color: #fff; }
.vd-cta-sub { font-size: clamp(15px, 1.6vw, 18px); line-height: 1.5; color: rgba(255,255,255,.92); max-width: 640px; }
.vd-cta-sub p { margin: 0; }
.vd-cta-btn {
flex: 0 0 auto; display: inline-block; text-decoration: none;
background: var(--vd-accent); color: #fff; font-weight: 700;
padding: 14px 30px; border-radius: var(--vd-radius-pill); box-shadow: var(--vd-shadow);
transition: transform .06s, background .15s, color .15s;
}
.vd-cta-btn:hover, .vd-cta-btn:focus { background: var(--vd-accent-600); color: #fff; }
.vd-cta-btn:active { transform: translateY(1px); }
@media (max-width: 560px) {
.vd-cta-inner { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 18px; }
.vd-cta-text { flex: 0 0 auto; } /* v stolpcu naj ne raztegne višine (340px je bila osnova višine) */
.vd-cta-btn { width: 100%; text-align: center; }
}
/* ============================================================================
100vw za okvirje/ozadja; golo besedilo dobi rob (.marg = polna širina brez roba)
============================================================================ */
/* Besedilo notranjih strani (drobtine, naslov, članek, statične strani) dobi rob. */
.vsebina { padding-left: clamp(16px, 3vw, 40px); padding-right: clamp(16px, 3vw, 40px); box-sizing: border-box; }
/* Seznami (kartice/okvirji) se raztegnejo na polno širino kljub robu .vsebina. */
.vsebina > .vd-grid, .vsebina > .vd-articles {
margin-left: calc(-1 * clamp(16px, 3vw, 40px));
margin-right: calc(-1 * clamp(16px, 3vw, 40px));
}
/* Naslov drsnika (besedilo) dobi rob; kartice v drsniku ostanejo 100vw. */
.vd-showcase-head { padding-left: clamp(16px, 3vw, 40px); padding-right: clamp(16px, 3vw, 40px); }
/* Pasovi/kartice na vstopni strani so 100vw brez zaokrožitve (edge-to-edge). */
.vd-hero, .vd-cta, .rec, .blog { border-radius: 0; }
/* ============================================================================
CHECKOUT: premaknjeno soglasje, mobilna lepljiva vrstica, kartice 100vw (mobilno)
============================================================================ */
.vd-co-terms { margin-top: 16px; }
.vd-co-mobilebar { display: none; }
@media (max-width: 900px) {
.vd-co-mobilebar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
display: flex; flex-direction: column; gap: 9px;
background: var(--vd-surface); border-top: 1px solid var(--vd-border);
box-shadow: 0 -8px 24px -10px rgba(30,28,22,.28);
padding: 10px clamp(14px, 4vw, 22px);
padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
.vd-co-mobilebar.is-athome { display: none; } /* skrije se, ko je pravi gumb viden */
.vd-co-mb-row { display: flex; align-items: center; gap: 14px; }
.vd-co-mb-total { display: flex; flex-direction: column; line-height: 1.05; flex: 0 0 auto; }
.vd-co-mb-total span { font-size: 11.5px; color: var(--vd-muted); text-transform: uppercase; letter-spacing: .04em; }
.vd-co-mb-total strong { font-size: 19px; color: var(--vd-ink); font-weight: 700; }
.vd-co-mb-btn {
flex: 1 1 auto; margin: 0 !important; justify-content: center;
background: var(--vd-accent); color: #fff; border: 0; padding: 13px 20px;
border-radius: var(--vd-radius-pill); font-weight: 700; font-size: 15px;
}
.vd-co-mb-btn[disabled] { opacity: .55; }
.vd-checkout { padding-bottom: 84px !important; } /* prostor za fiksno vrstico */
}
/* Kartice checkout so na mobilnem 100vw; naslov ostane z robom. */
@media (max-width: 620px) {
.vd-checkout { margin-left: calc(-1 * clamp(16px, 3vw, 40px)); margin-right: calc(-1 * clamp(16px, 3vw, 40px)); }
.vd-co-h1 { padding-left: clamp(16px, 3vw, 40px) !important; padding-right: clamp(16px, 3vw, 40px) !important; }
.vd-co-card { border-radius: 0; }
}
/* Gost: gumb »Vnesi podatke« + oznaka manjkajočega polja + obvestilo v mobilni vrstici */
.vd-co-enter {
width: 100%; margin-top: 16px; justify-content: center;
background: var(--vd-green); color: #fff; border: 0; padding: 13px 24px;
border-radius: var(--vd-radius-pill); font-weight: 700; font-size: 15px; cursor: pointer;
}
.vd-co-enter:hover { background: var(--vd-green-600); }
.vd-co-form .is-invalid {
border-color: var(--vd-danger) !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--vd-danger) 14%, transparent) !important;
}
.vd-co-mb-msg {
width: 100%; box-sizing: border-box;
display: flex; align-items: center; gap: 8px;
padding: 9px 12px; border-radius: 12px;
background: var(--vd-accent-100);
border: 1px solid color-mix(in srgb, var(--vd-accent) 34%, transparent);
color: color-mix(in srgb, var(--vd-accent) 42%, var(--vd-ink));
font-size: 12.5px; line-height: 1.3; font-weight: 600;
}
.vd-co-mb-msg[hidden] { display: none; }
/* ---------- Opis nad izdelki kategorije ---------- */
/* Seznami v opisu se izpišejo kot vodoravni pill-i. */
.vd-cat-desc ol {
list-style: none; margin: 16px 0 14px; padding: 0;
display: flex; flex-wrap: wrap; gap: 8px;
}
.vd-cat-desc ol li {
display: inline-flex; align-items: center;
padding: 6px 14px; border-radius: var(--vd-radius-pill);
background: var(--vd-green-100); color: var(--vd-green-700);
border: 1px solid color-mix(in srgb, var(--vd-green) 22%, transparent);
font-size: 13.5px; font-weight: 600; line-height: 1.2;
}
.vd-cat-desc ol li::marker { content: none; }
/* »Prikaži vse« gumb — diskreten, viden le na mobilnem, ko besedilo presega 2 vrstici. */
.vd-cat-more {
display: none; margin-top: 6px;
background: none; border: 0; padding: 0;
color: var(--vd-green-700); font-weight: 600; font-size: 13px;
text-decoration: underline; cursor: pointer;
}
@media (max-width: 720px) {
.vd-cat-desc.is-collapsed .vd-cat-desc-inner {
max-height: 3.1em; overflow: hidden;
-webkit-mask-image: linear-gradient(#000 55%, transparent);
mask-image: linear-gradient(#000 55%, transparent);
}
.vd-cat-more { display: inline-block; }
}
.vd-co-mb-msg::before {
content: ""; flex: 0 0 auto; width: 16px; height: 16px; background: var(--vd-accent-600);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%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'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* =========================================================================
EKOLOŠKI CERTIFIKAT — premium predstavitev (vsebina iz baze, id 206)
========================================================================= */
.vd-cert { display: flex; flex-direction: column; gap: clamp(22px, 3vw, 34px); color: var(--vd-ink); text-align: left; }
.vd-cert-hero {
display: grid; grid-template-columns: 1fr auto; gap: clamp(20px, 4vw, 48px); align-items: center;
background: linear-gradient(135deg, var(--vd-green-050), var(--vd-surface));
border: 1px solid var(--vd-border); border-radius: var(--vd-radius); padding: clamp(24px, 4vw, 44px);
}
.vd-cert-eyebrow {
display: inline-block; font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
color: var(--vd-green-700); margin-bottom: 10px;
}
.vd-cert-title { font-family: var(--vd-font-head); font-weight: 600; font-size: clamp(28px, 5vw, 40px); line-height: 1.1; margin: 0 0 14px; color: var(--vd-ink); }
.vd-cert-lead { font-size: clamp(15px, 1.6vw, 17px); line-height: 1.65; color: var(--vd-ink-soft); margin: 0 0 20px; max-width: 62ch; }
.vd-cert-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.vd-cert-badge {
display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--vd-green-700);
background: var(--vd-green-100); border: 1px solid color-mix(in srgb, var(--vd-green) 22%, transparent);
padding: 6px 13px; border-radius: var(--vd-radius-pill);
}
.vd-cert-seal { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: none; }
.vd-cert-seal img { width: clamp(150px, 20vw, 200px); height: auto; display: block; }
.vd-cert-seal-code { font-weight: 700; font-size: 13px; letter-spacing: .12em; color: var(--vd-green-700); }
.vd-cert-facts {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
background: var(--vd-border); border: 1px solid var(--vd-border); border-radius: var(--vd-radius); overflow: hidden;
}
.vd-cert-fact { background: var(--vd-surface); padding: 18px 20px; display: flex; flex-direction: column; gap: 5px; }
.vd-cert-fact span { font-size: 12.5px; color: var(--vd-muted); text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }
.vd-cert-fact strong { font-size: 16px; color: var(--vd-ink); font-weight: 700; }
.vd-cert-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(16px, 2.5vw, 26px); }
.vd-cert-block { background: var(--vd-surface); border: 1px solid var(--vd-border); border-radius: var(--vd-radius); padding: clamp(20px, 3vw, 28px); }
.vd-cert-block h3 { font-family: var(--vd-font-head); font-weight: 600; font-size: 20px; margin: 0 0 14px; color: var(--vd-ink); }
.vd-cert-block p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--vd-ink-soft); }
.vd-cert-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.vd-cert-list li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.5; color: var(--vd-ink-soft); list-style: none; list-style-image: none; }
.vd-cert-list li::before {
content: ""; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%;
background: var(--vd-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.vd-cert-doc {
display: grid; grid-template-columns: 1fr auto; gap: clamp(20px, 4vw, 40px); align-items: center;
background: var(--vd-surface-2); border: 1px solid var(--vd-border); border-radius: var(--vd-radius); padding: clamp(22px, 3vw, 34px);
}
.vd-cert-doc-info h3 { font-family: var(--vd-font-head); font-weight: 600; font-size: 22px; margin: 0 0 8px; color: var(--vd-ink); }
.vd-cert-doc-info p { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--vd-ink-soft); max-width: 46ch; }
.vd-cert-doc-btn {
display: inline-flex; align-items: center; gap: 8px; background: var(--vd-green); color: #fff !important;
font-weight: 700; font-size: 15px; text-decoration: none; padding: 12px 24px; border-radius: var(--vd-radius-pill); transition: background .15s;
}
.vd-cert-doc-btn:hover { background: var(--vd-green-600); }
.vd-cert-doc-thumb { flex: none; display: block; line-height: 0; border-radius: 10px; overflow: hidden; box-shadow: var(--vd-shadow); border: 1px solid var(--vd-border); transition: transform .15s, box-shadow .15s; }
.vd-cert-doc-thumb img { width: 210px; height: auto; display: block; }
.vd-cert-doc-thumb:hover { transform: translateY(-3px); box-shadow: var(--vd-shadow-lg); }
@media (max-width: 760px) {
.vd-cert-hero { grid-template-columns: 1fr; text-align: center; }
.vd-cert-hero-text { order: 2; }
.vd-cert-seal { order: 1; }
.vd-cert-lead { margin-left: auto; margin-right: auto; }
.vd-cert-badges { justify-content: center; }
.vd-cert-facts { grid-template-columns: repeat(2, 1fr); }
.vd-cert-doc { grid-template-columns: 1fr; text-align: center; }
.vd-cert-doc-thumb { margin: 0 auto; }
.vd-cert-doc-info p { margin-left: auto; margin-right: auto; }
}
@media (max-width: 460px) {
.vd-cert-facts { grid-template-columns: 1fr; }
}
/* =========================================================================
404 — stran ne obstaja (premium)
========================================================================= */
.vd-404 { display: flex; flex-direction: column; gap: clamp(24px, 4vw, 44px); }
.vd-404-hero {
text-align: center; padding: clamp(30px, 5vw, 60px) clamp(18px, 3vw, 44px);
background: linear-gradient(135deg, var(--vd-green-050), var(--vd-surface));
border: 1px solid var(--vd-border); border-radius: var(--vd-radius);
}
.vd-404-code {
font-family: var(--vd-font-head); font-weight: 600; line-height: .95; letter-spacing: -.02em;
font-size: clamp(80px, 18vw, 156px); margin-bottom: 6px;
background: linear-gradient(135deg, var(--vd-green), var(--vd-accent));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.vd-404-title { font-family: var(--vd-font-head); font-weight: 600; font-size: clamp(24px, 4vw, 34px); color: var(--vd-ink); margin: 0 0 12px; line-height: 1.15; }
.vd-404-text { max-width: 52ch; margin: 0 auto 26px; font-size: clamp(15px, 1.6vw, 17px); line-height: 1.6; color: var(--vd-ink-soft); }
.vd-404-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.vd-404-home {
display: inline-flex; align-items: center; gap: 9px; background: var(--vd-green); color: #fff !important;
font-weight: 700; font-size: 15px; text-decoration: none; padding: 13px 28px;
border-radius: var(--vd-radius-pill); transition: background .15s, transform .15s;
}
.vd-404-home:hover { background: var(--vd-green-600); transform: translateY(-1px); }
.vd-404-home svg { display: block; }
.vd-404-cats { margin-top: 4px; }