/* ==========================================================
marja.net — Complete Design System v2
========================================================== */
:root {
--c-brand: #bf0c14;
--c-brand-dark: #98090f;
--c-brand-light: #e8141e;
--c-brand-tint: #fdf0f0;
--c-brand-tint2: #f5d5d6;
--c-ink: #111111;
--c-body: #333333;
--c-muted: #6b7280;
--c-subtle: #9ca3af;
--c-white: #ffffff;
--c-surface: #ffffff;
--c-surface-2: #fafaf9;
--c-surface-3: #f3f2f0;
--c-surface-4: #eae8e5;
--c-border: #e5e3e0;
--c-border-md: #d0ceca;
--c-success: #16a34a;
--c-success-tint: #dcfce7;
--c-warning: #d97706;
--c-warning-tint: #fef3c7;
--c-warning-ink: #8a5707;
--c-error: #dc2626;
--c-error-tint: #fee2e2;
--c-blue: #1a3585;
--c-blue-dark: #0d1e4d;
--c-blue-tint: #e6ecf5;
--c-footer-bg: #0e1e4a;
--c-footer-text: #8aa0c8;
--c-footer-head: #dce6f5;
--c-footer-border:#1c2e68;
--font-body: 'Inter', system-ui, sans-serif;
--font-head: 'Fraunces', Georgia, serif;
--text-xs: 0.6875rem;
--text-sm: 0.8125rem;
--text-base: 0.9375rem;
--text-md: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 2rem;
--text-4xl: 2.75rem;
--fw-light: 300;
--fw-normal: 400;
--fw-medium: 500;
--fw-semi: 600;
--fw-bold: 700;
--lh-tight: 1.2;
--lh-snug: 1.35;
--lh-base: 1.6;
--lh-loose: 1.8;
--sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
--sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem;
--sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem;
--max-w: 1280px;
--nav-h: 50px;
--r-xs: 3px; --r-sm: 6px; --r-md: 10px;
--r-lg: 16px; --r-xl: 22px; --r-full: 9999px;
--sh-xs: 0 1px 2px rgba(0,0,0,.06);
--sh-sm: 0 2px 6px rgba(0,0,0,.08);
--sh-md: 0 4px 14px rgba(0,0,0,.10);
--sh-lg: 0 8px 28px rgba(0,0,0,.13);
--sh-xl: 0 16px 48px rgba(0,0,0,.16);
--sh-brand: 0 6px 20px rgba(191,12,20,.30);
--t-fast: 140ms ease;
--t-base: 240ms ease;
--t-slow: 380ms ease;
}
/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--fw-normal); line-height: var(--lh-base); color: var(--c-body); background: var(--c-white); -webkit-font-smoothing: antialiased; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--c-brand); }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: none; outline: none; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-head); font-weight: var(--fw-medium); line-height: var(--lh-tight); color: var(--c-ink); }
main { min-height: 60vh; }
/* HEADER */
header { position: sticky; top: 0; z-index: 200; background: var(--c-white); box-shadow: var(--sh-sm); }
.main-line { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-6); max-width: var(--max-w); margin-inline: auto; width: 94%; }
.m-search { position: relative; max-width: 320px; }
.m-search input { width: 100%; height: 40px; padding: 0 var(--sp-4) 0 2.8rem !important; border: 1.5px solid var(--c-border); border-radius: var(--r-full) !important; background: var(--c-surface-2); font-size: var(--text-sm); color: var(--c-body); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.m-search input:focus { border-color: var(--c-brand); box-shadow: 0 0 0 3px var(--c-brand-tint); background: var(--c-white); outline: none; }
.m-search input::placeholder { color: var(--c-subtle); }
.m-search::before { content: "\ea9d"; font-family: tabler-icons; position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%); font-size: 1.05rem; color: var(--c-brand); pointer-events: none; }
/* Search suggest dropdown */
#demo_list_id, #mob_suggest_list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 320px; background: var(--c-white); border: 1.5px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-xl); z-index: 300; display: none; max-height: 460px; overflow-y: auto; overflow-x: hidden; padding: var(--sp-2) 0; }
.srch-item { list-style: none; }
.srch-item a { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); text-decoration: none; transition: background var(--t-fast); }
.srch-item a:hover, .srch-item.hovered a { background: var(--c-surface-2); }
/* Category row */
.srch-item--cat a { padding: var(--sp-2) var(--sp-4); }
.srch-cat-icon { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--c-brand-tint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.srch-cat-icon::after { content: "\eb26"; font-family: tabler-icons; font-size: 1.1rem; color: var(--c-brand); line-height: 1; }
.srch-item--cat .srch-name { font-size: var(--text-sm); font-weight: var(--fw-semi); color: var(--c-ink); }
.srch-item--cat .srch-name::before { content: "Kategorija · "; font-size: var(--text-xs); font-weight: var(--fw-normal); color: var(--c-muted); }
/* Section divider */
.srch-divider { list-style: none; padding: var(--sp-2) var(--sp-4) var(--sp-1); font-size: var(--text-xs); font-weight: var(--fw-semi); color: var(--c-muted); text-transform: uppercase; letter-spacing: .07em; border-top: 1px solid var(--c-surface-3); margin-top: var(--sp-1); }
/* Product thumb */
.srch-thumb { width: 52px; height: 68px; flex-shrink: 0; border-radius: var(--r-md); overflow: hidden; background: var(--c-surface-3); }
.srch-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
/* Product body */
.srch-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.srch-name { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--c-ink); line-height: 1.3; }
.srch-cat-name { font-size: var(--text-xs); color: var(--c-muted); }
.srch-price { display: inline-flex; align-items: center; gap: 3px; font-size: var(--text-sm); font-weight: var(--fw-semi); color: var(--c-brand); margin-top: var(--sp-1); }
.srch-price::before { content: "\eb34"; font-family: tabler-icons; font-size: .9rem; font-weight: 400; line-height: 1; }
/* No results */
.srch-empty { list-style: none; padding: var(--sp-6) var(--sp-4); text-align: center; font-size: var(--text-sm); color: var(--c-muted); }
/* Mobile search bar (outside sticky header) */
.mob-search-bar { display: none; background: var(--c-surface-2); border-bottom: 1px solid var(--c-border); padding: var(--sp-3) var(--sp-4); }
.mob-search-inner { position: relative; }
.mob-search-inner input { display: block; width: 100%; height: 50px; padding: 0 var(--sp-5) 0 3rem !important; border: 2px solid var(--c-border) !important; border-radius: var(--r-xl) !important; background: var(--c-white) !important; font-size: var(--text-base); color: var(--c-body); box-sizing: border-box; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.mob-search-inner input:focus { border-color: var(--c-brand); box-shadow: 0 0 0 3px var(--c-brand-tint); outline: none; }
.mob-search-inner input::placeholder { color: var(--c-muted); }
.mob-search-inner::before { content: "\ea9d"; font-family: tabler-icons; position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%); font-size: 1.2rem; color: var(--c-brand); pointer-events: none; }
.logo { display: flex; justify-content: center; align-items: center; }
.logo a { display: flex; }
img.logo { height: auto; }
.logo img { height: 56px; width: auto; object-fit: contain; }
.m-web { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); }
.f-right { display: flex; align-items: center; gap: var(--sp-3); }
.sUser a { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--c-body); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-full); transition: background var(--t-fast), color var(--t-fast); white-space: nowrap; }
.sUser a::before { content: "\ef68"; font-family: tabler-icons; font-size: 1.15rem; }
.sUser a:hover { background: var(--c-surface-3); color: var(--c-brand); }
.sWish { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; color: var(--c-body); border-radius: var(--r-full); transition: background var(--t-fast), color var(--t-fast); text-decoration: none; }
.sWish svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.sWish:hover { background: var(--c-surface-3); color: var(--c-brand); }
.wish-cnt { position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; background: var(--c-brand); color: #fff; font-size: 10px; font-weight: var(--fw-bold); border-radius: var(--r-full); line-height: 1; }
.wish-cnt.is-empty { display: none; }
.sWish.is-hidden { display: none; }
.sWish.is-pop { animation: wish-appear .7s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes wish-appear { 0% { transform: scale(0) rotate(-25deg); opacity: 0; } 55% { transform: scale(1.25) rotate(10deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
.sBag { display: flex; align-items: center; gap: var(--sp-2); font-size: 0; color: var(--c-white); background: var(--c-brand); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-full); cursor: pointer; transition: background var(--t-fast), box-shadow var(--t-fast); white-space: nowrap; text-decoration: none; }
.sBag::before { content: "\f5f8"; font-family: tabler-icons; font-size: 1.2rem; }
.sBag:hover { background: var(--c-brand-dark); box-shadow: var(--sh-brand); color: var(--c-white); }
/* ── Cart toast notification ── */
.cart-toast {
position: fixed;
top: calc(var(--nav-h) + var(--sp-3));
right: var(--sp-5);
width: 300px;
max-width: calc(100vw - 24px);
background: var(--c-white);
border: 1px solid var(--c-border);
border-radius: var(--r-xl);
box-shadow: var(--sh-xl);
z-index: 500;
opacity: 0;
transform: translateY(-12px);
pointer-events: none;
transition: opacity .22s ease, transform .22s ease;
}
/* Pointer triangle aimed at the cart icon in the header.
Horizontal position set by JS via --toast-arrow-right (default near right edge). */
.cart-toast::before {
content: "";
position: absolute;
top: -8px;
right: var(--toast-arrow-right, 24px);
width: 15px;
height: 15px;
background: var(--c-white);
border-left: 1px solid var(--c-border);
border-top: 1px solid var(--c-border);
border-radius: 3px 0 0 0;
transform: rotate(45deg);
}
.cart-toast--in {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.cart-toast-inner {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
}
.cart-toast-icon {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--c-brand-tint);
flex-shrink: 0;
}
.cart-toast-icon::before {
content: "\ea5e";
font-family: tabler-icons;
font-size: 1.1rem;
color: var(--c-brand);
line-height: 1;
}
.cart-toast-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.cart-toast-name {
font-size: var(--text-sm);
font-weight: var(--fw-semi);
color: var(--c-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
.cart-toast-sub {
font-size: var(--text-xs);
color: var(--c-muted);
}
.cart-toast-close, .wish-toast-close {
background: none;
border: none;
color: var(--c-muted);
font-size: 1.2rem;
line-height: 1;
cursor: pointer;
padding: var(--sp-1);
border-radius: var(--r-sm);
flex-shrink: 0;
transition: color var(--t-fast), background var(--t-fast);
}
.cart-toast-close:hover, .wish-toast-close:hover { color: var(--c-ink); background: var(--c-surface-3); }
/* Wishlist toast: heart icon (inline SVG) instead of the cart glyph */
.wish-toast-icon::before { content: none; }
.wish-toast-icon svg { fill: var(--c-brand); }
.wish-toast-name { font-size: var(--text-sm); font-weight: var(--fw-semi); color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.wish-toast.no-name .wish-toast-name { display: none; }
.cart-toast-checkout {
display: block;
background: var(--c-brand);
color: var(--c-white);
text-align: center;
font-size: var(--text-sm);
font-weight: var(--fw-semi);
padding: var(--sp-3) var(--sp-4);
text-decoration: none;
border-radius: 0 0 var(--r-xl) var(--r-xl);
transition: background var(--t-fast);
}
.cart-toast-checkout:hover { background: var(--c-brand-dark); color: var(--c-white); }
.basket_cnt { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; background: var(--c-white); color: var(--c-brand); font-size: 11px; font-weight: var(--fw-bold); border-radius: var(--r-full); line-height: 1; font-size: 11px; }
.basket_cnt.bump { animation: cart-bump .45s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes cart-bump { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1); } }
.responsive-nav { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-md); cursor: pointer; transition: background var(--t-fast); flex-shrink: 0; }
.responsive-nav:hover { background: var(--c-surface-3); }
.responsive-nav img { display: none; }
.responsive-nav::before { content: "\ec42"; font-family: tabler-icons; font-size: 1.5rem; color: var(--c-ink); line-height: 1; }
.start-nav p { margin: 0; line-height: 0; }
/* NAV */
.main-navi { background: var(--c-brand); }
.main-navi > ul, .main-navi ul:first-child { display: flex; align-items: center; justify-content: center; gap: 0; max-width: var(--max-w); margin-inline: auto; width: 94%; list-style: none; }
.main-navi li { position: relative; list-style: none; }
.main-navi li > a { display: flex; align-items: center; padding: 0 var(--sp-5); height: var(--nav-h); font-size: var(--text-md); font-weight: var(--fw-medium); color: rgba(255,255,255,.92); white-space: nowrap; position: relative; transition: color var(--t-fast), background var(--t-fast); }
.main-navi li > a::after { content: ""; position: absolute; bottom: 0; left: var(--sp-5); right: var(--sp-5); height: 2px; background: var(--c-white); opacity: 0; transform: scaleX(0); transition: opacity var(--t-fast), transform var(--t-fast); }
.main-navi li > a:hover, .main-navi li > a.active { color: var(--c-white); background: rgba(0,0,0,.18); }
.main-navi li > a:hover::after, .main-navi li > a.active::after { opacity: 1; transform: scaleX(1); }
.main-navi li > ul { display: none; position: absolute; top: 100%; left: 0; flex-direction: column; justify-content: flex-start; min-width: 200px; background: var(--c-white); border: 1px solid var(--c-border); border-radius: 0 0 var(--r-md) var(--r-md); box-shadow: var(--sh-lg); z-index: 300; padding: var(--sp-2) 0; }
.main-navi li:hover > ul { display: flex; }
.main-navi li > ul li > a { color: var(--c-body); height: auto; padding: var(--sp-3) var(--sp-5); font-weight: var(--fw-normal); background: none; }
.main-navi li > ul li > a::after { display: none; }
.main-navi li > ul li > a:hover { background: var(--c-brand-tint); color: var(--c-brand); }
/* MOBILE PANEL */
/* old panel rules removed — see mobile nav section below */
.homeImg { width: 100px; }
/* NOTICE */
.obvestilo { background: var(--c-ink); color: var(--c-white); text-align: center; padding: var(--sp-3) var(--sp-6); font-size: var(--text-sm); line-height: var(--lh-base); }
.obvestilo h5 { display: inline; font-family: var(--font-body); font-weight: var(--fw-semi); color: var(--c-white); margin-right: var(--sp-2); }
.zapri { display: inline-flex; align-items: center; margin-left: var(--sp-4); padding: 2px var(--sp-3); border: 1px solid rgba(255,255,255,.4); border-radius: var(--r-full); font-size: var(--text-xs); color: rgba(255,255,255,.8); cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast); }
.zapri:hover { border-color: var(--c-white); color: var(--c-white); }
/* HERO SLIDER */
.slider { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); width: 94%; max-width: var(--max-w); margin: var(--sp-6) auto var(--sp-12); height: clamp(400px, 58vh, 660px); }
.slider-item { position: relative; border-radius: var(--r-xl); overflow: hidden; cursor: pointer; background: var(--c-surface-3); background-size: cover; background-position: center top; }
.slider-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.18) 45%, transparent 70%); transition: opacity var(--t-base); }
.slider-item:hover::after { opacity: .85; }
.slider-item a { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; gap: var(--sp-2); padding: var(--sp-6); }
.slider-item a::after { content: "\ea1c"; font-family: tabler-icons; font-size: 1.5rem; color: var(--c-white); line-height: 1; flex-shrink: 0; align-self: flex-end; padding-bottom: .15em; opacity: 0; transform: translateX(-10px); transition: opacity var(--t-base), transform var(--t-base); }
.slider-item:hover a::after { opacity: 1; transform: translateX(0); }
.slider-item h1 { font-family: var(--font-head); font-size: clamp(1.1rem, .7rem + 1.2vw, 1.7rem); font-weight: var(--fw-medium); color: var(--c-white); line-height: var(--lh-snug); letter-spacing: -.01em; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
/* Swipe dots */
.swipe-dots { display: flex; justify-content: center; gap: 7px; margin: var(--sp-5) 0; }
.swipe-dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--c-surface-4); border: 1.5px solid var(--c-border); padding: 0; cursor: pointer; transition: background var(--t-fast), width var(--t-fast), border-color var(--t-fast); }
.swipe-dot.active { width: 22px; background: var(--c-brand); border-color: var(--c-brand); }
/* QUARTERS */
.cetrtine { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--c-surface-3); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); margin-bottom: var(--sp-12); }
.cetrtine > div { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--sp-8) var(--sp-5); border-right: 1px solid var(--c-border); }
.cetrtine > div:last-child { border-right: none; }
.cetrtine img { width: 36px; height: 36px; object-fit: contain; margin-bottom: var(--sp-3); opacity: .7; }
.cetrtine h3 { font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--fw-semi); color: var(--c-ink); margin-bottom: var(--sp-1); }
.cetrtine p { font-size: var(--text-xs); color: var(--c-muted); line-height: var(--lh-base); }
/* FEATURED CARDS */
.featured-content { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); width: 94%; max-width: var(--max-w); margin: 0 auto var(--sp-16); }
.feautred-item { background-color: var(--c-surface) !important; background-image: none !important; border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: var(--sp-8) var(--sp-6) !important; display: grid; grid-template-columns: 52px 1fr; column-gap: var(--sp-4); row-gap: var(--sp-5); align-content: start; color: var(--c-body); box-shadow: var(--sh-xs); transition: transform var(--t-base), box-shadow var(--t-base); }
.feautred-item.black, .feautred-item.red { background-color: var(--c-surface) !important; background-image: none !important; color: var(--c-body) !important; }
.feautred-item:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
/* Icon (col1/row1) + h2 (col2/row1) + div content (col1-2/row2) */
.feautred-item::before { display: block; width: 52px; height: 52px; border-radius: var(--r-lg); background: var(--c-brand-tint); font-family: tabler-icons; font-size: 1.6rem; color: var(--c-brand); line-height: 52px; text-align: center; align-self: center; }
.featured-content > .feautred-item:nth-child(1)::before { content: "\ea4e"; }
.featured-content > .feautred-item:nth-child(2)::before { content: "\eb0e"; }
.featured-content > .feautred-item:nth-child(3)::before { content: "\f508"; }
.featured-content > .feautred-item:nth-child(4)::before { content: "\f6d7"; }
.feautred-item > h2 { align-self: center; margin: 0; }
.feautred-item > div { grid-column: 1 / -1; display: flex; flex-direction: column; }
.feautred-item h2 { font-size: clamp(1.05rem, .85rem + .5vw, 1.25rem); font-weight: var(--fw-semi); letter-spacing: -.01em; margin-bottom: var(--sp-2); color: var(--c-ink); }
.feautred-item p { font-size: var(--text-sm); color: var(--c-muted); line-height: var(--lh-base); flex: 1; }
.feautred-item br { display: none; }
.feautred-item .button { display: inline-flex; align-items: center; gap: var(--sp-2); align-self: flex-start; margin-top: var(--sp-6); padding: .5em 1.3em; font-size: var(--text-sm); font-weight: var(--fw-semi); color: var(--c-brand) !important; border: 1.5px solid var(--c-brand); border-radius: var(--r-full); background: transparent !important; transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
.feautred-item .button::after { content: "\ea19"; font-family: tabler-icons; font-size: .85em; }
.feautred-item .button:hover { background: var(--c-brand) !important; color: var(--c-white) !important; box-shadow: var(--sh-brand); }
/* SECTION HEADING */
.breaker, h1.breaker, h3.breaker { font-family: var(--font-head); font-size: clamp(1.3rem, .9rem + 1.4vw, 2.1rem); font-weight: var(--fw-medium); color: var(--c-ink); letter-spacing: -.03em; margin-bottom: var(--sp-6); text-align: center; }
.cMarg { width: 94%; max-width: var(--max-w); margin-inline: auto;/* padding-top: var(--sp-12); */}
/* PRODUCT GRID */
.product-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); width: 100%; }
.product-item { position: relative; background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--t-base), box-shadow var(--t-base); }
.product-item:hover { box-shadow: var(--sh-lg); }
.product-item-image { position: relative; aspect-ratio: 2/3; overflow: hidden; background: var(--c-surface-3); flex-shrink: 0; }
.product-item-image a { display: block; width: 100%; height: 100%; }
.product-item-image img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform var(--t-slow); }
.product-item-details { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.product-item-details h3 { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--fw-semi); color: var(--c-ink); line-height: var(--lh-snug); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; min-height: calc(var(--lh-snug) * 2em); }
.product-item-details h3 a { color: inherit; }
.product-item-details h3 a:hover { color: var(--c-brand); }
.product-price { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; color: var(--c-brand); font-weight: var(--fw-bold); font-size: var(--text-sm); background: var(--c-brand-tint); border-radius: var(--r-full); padding: var(--sp-1) var(--sp-3); align-self: flex-start; line-height: 1; }
.product-price::before { content: "\eb34"; font-family: tabler-icons; font-size: .95rem; font-weight: 400; line-height: 1; flex-shrink: 0; }
.product-price font, .product-price .old-price, font.old-price { font-size: var(--text-xs); color: var(--c-muted); text-decoration: line-through; font-style: normal; font-family: var(--font-body); font-weight: var(--fw-normal); }
a.button-min { display: inline-flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-2); padding: 0; font-size: var(--text-sm); font-weight: var(--fw-normal); color: var(--c-brand); border: none; background: none; align-self: flex-start; text-transform: capitalize; transition: color var(--t-fast); }
a.button-min::after { content: "\ea1c"; font-family: tabler-icons; font-size: .85em; }
a.button-min:hover { color: var(--c-brand-dark); }
/* ── Product carousel (novo / top): single row, paged by side arrows ── */
.product-carousel { position: relative; }
.product-list.is-carousel {
--pc-per: 4;
--pc-gap: var(--sp-5);
display: flex;
grid-template-columns: none;
gap: var(--pc-gap);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 8px 0;
margin-bottom:35px; /* vertical room for hover lift + shadow; no h-pad so paging math lands exactly */
}
.product-list.is-carousel::-webkit-scrollbar { display: none; }
.product-list.is-carousel > .product-item {
flex: 0 0 calc((100% - (var(--pc-per) - 1) * var(--pc-gap)) / var(--pc-per));
scroll-snap-align: start;
}
.pc-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
width: 48px; height: 52px;
display: flex; align-items: center; justify-content: center;
background: var(--c-white);
border: 1px solid var(--c-border);
color: var(--c-ink);
cursor: pointer;
transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), opacity var(--t-fast);
}
.pc-prev { left: 0; border-radius: 0 var(--r-lg) var(--r-lg) 0; transform-origin: left center; }
.pc-next { right: 0; border-radius: var(--r-lg) 0 0 var(--r-lg); transform-origin: right center; }
.pc-arrow::before { font-family: tabler-icons; font-size: 1.2rem; line-height: 1; }
.pc-prev::before { content: "\ea64"; }
.pc-next::before { content: "\ea65"; }
.pc-arrow:hover:not(:disabled) { background: var(--c-brand); color: var(--c-white); border-color: var(--c-brand); }
.pc-arrow:disabled { opacity: 0; pointer-events: none; } /* hide at the start/end edge */
.product-carousel.pc-static .pc-arrow { display: none; } /* nothing to scroll → no arrows */
/* Attention hint — JS adds .pc-hint when the carousel enters view; plays twice then stops (or on interaction) */
@keyframes pc-attn {
0% { transform: translateY(-50%) scale(1); background: var(--c-white); color: var(--c-ink); }
35% { transform: translateY(-50%) scale(1.3); background: var(--c-brand); color: var(--c-white); }
70% { transform: translateY(-50%) scale(1.3); background: var(--c-brand); color: var(--c-white); }
100% { transform: translateY(-50%) scale(1); background: var(--c-white); color: var(--c-ink); }
}
.pc-arrow.pc-hint { animation: pc-attn .8s ease 2; }
@media (prefers-reduced-motion: reduce) { .pc-arrow.pc-hint { animation: none; } }
@media (max-width: 1280px) { .product-list.is-carousel { --pc-per: 3; } }
@media (max-width: 768px) { .product-list.is-carousel { --pc-per: 2; --pc-gap: var(--sp-3); } .pc-arrow { width: 40px; height: 46px; } }
@media (max-width: 480px) { .product-list.is-carousel { --pc-gap: var(--sp-2); } }
/* Product list — color swatches */
.pi-swatches { display: flex; align-items: center; gap: 4px; padding: 0; background: var(--c-surface-2); }
.pi-sw-track { display: flex; gap: 1px; overflow: hidden; flex: 1; justify-content: flex-start; scroll-behavior: smooth; }
.pi-sw-track.pi-sw-center { justify-content: center; }
.pi-swatch { width: 44px; height: 66px; border-radius: 0; object-fit: cover; cursor: pointer; flex-shrink: 0; }
.pi-swatch-ph { display: inline-block; background: var(--c-surface-4); cursor: pointer; }
.pi-one { display: inline-flex; align-items: center; height: 48px; font-size: var(--text-xs); color: var(--c-muted); padding: 0 var(--sp-3); }
.pi-sw-btn { flex-shrink: 0; width: 20px; height: 48px; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--c-muted); padding: 0; transition: color var(--t-fast); }
.pi-sw-btn::before { font-family: tabler-icons; font-size: 16px; font-weight: 400; line-height: 1; }
.pi-sw-prev::before { content: "\ea64"; }
.pi-sw-next::before { content: "\ea65"; }
.pi-sw-btn:hover { color: var(--c-ink); }
.pi-sw-h { visibility: hidden; pointer-events: none; }
/* BADGES */
.disc { position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 10; pointer-events: none; }
.disc p { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; background: var(--c-brand); color: var(--c-white); font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--fw-bold); border-radius: var(--r-full); line-height: 1; letter-spacing: .02em; box-shadow: var(--sh-sm); }
.status { position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 10; display: inline-flex; align-items: center; padding: 4px 10px; font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--fw-semi); border-radius: var(--r-full); line-height: 1; pointer-events: none; box-shadow: var(--sh-xs); background: var(--c-ink); color: var(--c-white); }
.status.s12, .status.s14 { background: var(--c-success); }
.status.s13 { background: var(--c-warning); }
.discount-value { display: inline-flex; align-items: center; padding: 4px 12px; background: var(--c-brand); color: var(--c-white); font-size: var(--text-sm); font-weight: var(--fw-bold); border-radius: var(--r-full); margin-left: var(--sp-3); }
/* SHOP LIST */
.shopList { width: 94%; max-width: var(--max-w); margin-inline: auto; padding: var(--sp-4) 0 var(--sp-16); }
.shopList__title { text-align: left; margin-top: var(--sp-4); }
.shopBar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-border); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.shopBar__cats { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.shopChip { display: inline-flex; align-items: center; padding: .4em 1.1em; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--c-brand); background: var(--c-brand-tint); border: 1.5px solid var(--c-brand-tint2); border-radius: var(--r-full); cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); white-space: nowrap; }
.shopChip:hover, .shopChip.is-active { background: var(--c-brand); color: var(--c-white); border-color: var(--c-brand); }
/* Category select — mobile only */
.shopBar__sel-wrap { display: none; position: relative; }
.shopBar__sel-wrap::before { content: "\eb26"; font-family: tabler-icons; position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%); font-size: 1rem; color: var(--c-brand); pointer-events: none; z-index: 1; }
.shopBar__sel-wrap::after { content: "\ea61"; font-family: tabler-icons; position: absolute; right: var(--sp-3); top: 50%; transform: translateY(-50%); font-size: .85rem; color: var(--c-muted); pointer-events: none; }
.shopBar__sel { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 42px; padding: 0 2.4rem 0 2.6rem; border: 1.5px solid var(--c-border); border-radius: var(--r-full); font-size: var(--text-sm); font-weight: var(--fw-semi); color: var(--c-body); background: var(--c-white); cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.shopBar__sel:focus { border-color: var(--c-brand); box-shadow: 0 0 0 3px var(--c-brand-tint); outline: none; }
/* Sort + tools */
.shopBar__tools { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.shopCount { font-size: var(--text-sm); color: var(--c-muted); white-space: nowrap; }
.shopSort { position: relative; }
.shopSort select, .sortM { appearance: none; -webkit-appearance: none; height: 38px; padding: 0 2.4rem 0 var(--sp-4); border: 1.5px solid var(--c-border); border-radius: var(--r-full); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--c-body); background: var(--c-white); cursor: pointer; transition: border-color var(--t-fast); }
.shopSort select:focus, .sortM:focus { border-color: var(--c-brand); outline: none; }
.shopSort::after { content: "\ea61"; font-family: tabler-icons; position: absolute; right: var(--sp-3); top: 50%; transform: translateY(-50%); font-size: .85rem; color: var(--c-muted); pointer-events: none; }
/* Mobile: icon + full-width selects, left-aligned */
@media (max-width: 768px) {
.shopBar .shopCount { display: none; }
.shopBar__tools { flex-wrap: wrap; }
.shopBar__tools .shopSort { flex: 1; min-width: 140px; }
.shopBar__tools .shopSort select, .shopBar__tools .sortM { width: 100%; height: 42px; padding-left: 2.6rem; font-weight: var(--fw-semi); }
.shopBar__tools .shopSort::before { content: "\eb5a"; font-family: tabler-icons; position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%); font-size: 1rem; color: var(--c-brand); pointer-events: none; }
.shopBar__tools .shopSort + .shopSort::before { content: "\ea03"; }
}
.cat-desc { font-size: var(--text-sm); color: var(--c-muted); line-height: var(--lh-base); margin-bottom: var(--sp-6); max-width: 720px; }
/* js-cat-desc: collapsible category description */
.js-cat-desc { text-align: center; max-width: 820px; margin-inline: auto; margin-bottom: var(--sp-6); font-size: var(--text-base); }
.js-cat-desc .cat-desc__inner { overflow: hidden; max-height: 3.6em; -webkit-mask-image: linear-gradient(to bottom, black 20%, transparent 100%); mask-image: linear-gradient(to bottom, black 20%, transparent 100%); transition: max-height .45s ease; }
.js-cat-desc.is-open .cat-desc__inner { max-height: 1400px; -webkit-mask-image: none; mask-image: none; }
.cat-desc__toggle { display: block; margin: var(--sp-3) auto 0; background: none; border: 1.5px solid var(--c-border-md); border-radius: var(--r-full); padding: var(--sp-2) var(--sp-5); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--c-brand); cursor: pointer; transition: border-color var(--t-fast); }
.cat-desc__toggle:hover { border-color: var(--c-brand); }
.sorter.leftSection { display: inline-flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.sorter label { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--c-muted); white-space: nowrap; }
/* BREADCRUMBS */
.breadCrumbs, .breadcrumbs, nav.breadcrumbs, .breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-4) 0; font-size: var(--text-xs); color: var(--c-muted); width: 94%; max-width: var(--max-w); margin-inline: auto; }
.breadCrumbs a, .breadcrumbs a, .breadcrumb a { color: var(--c-muted); }
.breadCrumbs a:hover, .breadcrumbs a:hover, .breadcrumb a:hover { color: var(--c-brand); }
.bc-current { color: var(--c-body); font-weight: var(--fw-medium); }
/* PRODUCT DETAIL */
.product-details { width: 94%; max-width: var(--max-w); margin-inline: auto; padding: var(--sp-6) 0 var(--sp-16); display: grid; grid-template-columns: 1fr 460px; grid-template-rows: auto auto 1fr; column-gap: var(--sp-10); row-gap: 0; align-items: start; }
/* title + summary size to content; row 3 (1fr) absorbs the tall image's extra height so the
right column (info / buy card) stays top-aligned instead of being stretched apart. */
.product-details-titlebar { grid-column: 2; display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.product-details-titlebar h1 { text-align: left; margin-bottom: 0; }
.product-details-titlebar-row { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); }
.product-details > .product-details-summary { grid-column: 2; border-bottom: none; padding-bottom: 0; }
.product-details-heading { grid-column: 1; grid-row: 1 / span 3; display: flex; gap: var(--sp-4); align-items: start; width: fit-content; margin-inline: auto; }
.product-details-info { grid-column: 2; }
.product-details-heading { display: flex; gap: var(--sp-4); align-items: start; width: fit-content; margin-inline: auto; }
.product-details-image { width: auto; height: 70vh; aspect-ratio: 2/3; flex-shrink: 0; overflow: hidden; border-radius: var(--r-xl); background: var(--c-surface-3); }
.product-details-image img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.product-details-gallery { display: flex; flex-direction: column; gap: 6px; }
.gallery-track { overflow-y: scroll; overflow-x: hidden; scrollbar-width: none; display: flex; flex-direction: column; gap: 6px; scroll-behavior: smooth; }
.gallery-track::-webkit-scrollbar { display: none; }
.product-details-gallery img { width: 78px; height: 117px; flex-shrink: 0; object-fit: cover; border-radius: var(--r-md); border: 2px solid var(--c-border); cursor: pointer; transition: border-color var(--t-fast); }
.product-details-gallery img:hover { border-color: var(--c-brand); }
.gallery-btn { display: flex; align-items: center; justify-content: center; width: 78px; height: 28px; flex-shrink: 0; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-md); cursor: pointer; color: var(--c-ink); transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.gallery-btn:hover { background: var(--c-brand); color: var(--c-white); border-color: var(--c-brand); }
.gallery-btn::before { font-family: tabler-icons; font-size: 1rem; line-height: 1; }
.gallery-btn-up::before { content: "\ea62"; }
.gallery-btn-down::before { content: "\ea5f"; }
.gallery-btn:disabled { opacity: .25; pointer-events: none; }
/* ── Namig "na voljo je več barv" ────────────────────────────────────
Gumb za naprej je rdeč in čezenj potuje odsev, dokler ga uporabnik
prvič ne klikne (ali sam ne podrsa po galeriji) — takrat JS odstrani
.is-hint in gumb postane običajen. Doda se samo, kadar barve dejansko
presegajo višino slike (glej gallery init v index-cont.php). */
.gallery-btn.is-hint {
position: relative;
overflow: hidden;
background: var(--c-brand);
border-color: var(--c-brand);
color: var(--c-white);
animation: gal-hint-pulse 2.4s ease-in-out infinite;
}
.gallery-btn.is-hint::before { position: relative; z-index: 2; } /* ikona nad odsevom */
.gallery-btn.is-hint::after {
content: "";
position: absolute;
top: 0;
left: -70%;
width: 45%;
height: 100%;
z-index: 1;
background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 100%);
transform: skewX(-18deg);
animation: gal-hint-shine 2.4s ease-in-out infinite;
}
@keyframes gal-hint-shine {
0% { left: -70%; }
50% { left: 125%; }
100% { left: 125%; }
}
@keyframes gal-hint-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(191, 12, 20, .5); }
50% { box-shadow: 0 0 0 7px rgba(191, 12, 20, 0); }
}
/* ob hoverju je namig odveč — uporabnik je gumb že našel */
.gallery-btn.is-hint:hover,
.gallery-btn.is-hint:hover::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
.gallery-btn.is-hint,
.gallery-btn.is-hint::after { animation: none; }
}
.product-details-info h1.breaker { text-align: left; font-size: clamp(1.3rem, .9rem + 1.2vw, 1.9rem); margin-bottom: var(--sp-3); }
.product-details-summary { margin-bottom: var(--sp-5); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--c-border); }
.product-details-summary h4 { font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--fw-normal); color: var(--c-muted); line-height: var(--lh-base); }
.product-buy-card { background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: var(--sp-6); margin-bottom: var(--sp-6); }
.product-delivery { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--c-border); font-size: var(--text-sm); color: var(--c-muted); text-align: center; }
.product-delivery strong { color: var(--c-ink); font-weight: var(--fw-semi); }
.product-details-price { display: inline-flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; padding: var(--sp-2) var(--sp-5) var(--sp-2) var(--sp-4); background: var(--c-brand-tint); border-radius: var(--r-full); flex-wrap: wrap; font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--c-brand); letter-spacing: -.02em; }
.product-details-price::before { content: "\eb34"; font-family: tabler-icons; font-size: 1.3rem; font-weight: 400; letter-spacing: 0; line-height: 1; flex-shrink: 0; }
.product-details-price .old-price, .product-details-price font.old-price { font-size: var(--text-xl); color: var(--c-muted); text-decoration: line-through; font-style: normal; font-weight: var(--fw-normal); letter-spacing: 0; }
.product-details-price .discount-value { font-size: var(--text-sm); letter-spacing: 0; }
.product-options { margin-bottom: var(--sp-5); }
.option { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-3); }
.option label { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--c-body); min-width: 80px; margin-bottom: 0; }
.sOpt { appearance: none; -webkit-appearance: none; flex: 1; height: 42px; padding: 0 2.4rem 0 var(--sp-4); border: 1.5px solid var(--c-border); border-radius: var(--r-md); font-size: var(--text-sm); background-color: var(--c-surface-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; cursor: pointer; transition: border-color var(--t-fast); }
.sOpt:focus { border-color: var(--c-brand); outline: none; }
.form-add > div { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.minus, .add { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1.5px solid var(--c-border); border-radius: var(--r-md); cursor: pointer; background: var(--c-surface-2); transition: background var(--t-fast), border-color var(--t-fast); flex-shrink: 0; }
.minus:hover, .add:hover { background: var(--c-surface-3); border-color: var(--c-border-md); }
.minus img, .add img { width: 18px; height: 18px; }
.product-details-qty { width: 58px; height: 42px; text-align: center; border: 1.5px solid var(--c-border); border-radius: var(--r-md); font-size: var(--text-base); font-weight: var(--fw-semi); background: var(--c-white); }
/* Quantity stepper — same look as the buy sheet (pill with round −/+) */
.qty-stepper { display: inline-flex; align-items: center; gap: var(--sp-1); border: 1.5px solid var(--c-border); border-radius: var(--r-full); padding: var(--sp-1); flex-shrink: 0; background: var(--c-white); }
.qty-stepper .minus, .qty-stepper .add { width: 36px; height: 36px; border: none; border-radius: 50%; background: var(--c-surface-2); }
.qty-stepper .minus:hover, .qty-stepper .add:hover { background: var(--c-surface-3); border-color: transparent; }
.qty-stepper .minus img, .qty-stepper .add img { display: none; }
.qty-stepper .minus::before { content: "\2212"; font-size: var(--text-lg); line-height: 1; color: var(--c-ink); }
.qty-stepper .add::before { content: "+"; font-size: var(--text-lg); line-height: 1; color: var(--c-ink); }
.qty-stepper .product-details-qty { width: 40px; height: auto; border: none; background: transparent; border-radius: 0; padding: 0; }
.adToBasket, .product-details-add-btn { flex: 1; height: 50px; padding: 0 var(--sp-6); background: var(--c-brand); color: var(--c-white); font-size: var(--text-base); font-weight: var(--fw-semi); border: none; border-radius: var(--r-full); cursor: pointer; transition: background var(--t-fast), box-shadow var(--t-fast); display: flex; align-items: center; justify-content: center; gap: var(--sp-2); }
.adToBasket::before, .product-details-add-btn::before { content: "\f5f8"; font-family: tabler-icons; font-size: 1.1em; }
.adToBasket:hover, .product-details-add-btn:hover { background: var(--c-brand-dark); box-shadow: var(--sh-brand); }
/* ── STICKY BUY BAR — odstrani .sticky-buy blok za deaktivacijo ── */
.sticky-buy {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
display: flex; align-items: center; gap: var(--sp-4);
padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom));
background: var(--c-white); border-top: 1px solid var(--c-border);
box-shadow: 0 -4px 16px rgba(0,0,0,.1);
transform: translateY(100%); transition: transform .25s ease;
pointer-events: none;
}
.sticky-buy.is-visible { transform: translateY(0); pointer-events: auto; }
.sticky-back { display: none; }
.sticky-buy-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sticky-buy-title { font-size: var(--text-sm); font-weight: var(--fw-semi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--c-ink); }
.sticky-buy-price { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); background: var(--c-brand-tint); border-radius: var(--r-full); font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--c-brand); line-height: 1; align-self: flex-start; }
.sbi-tag::before { content: "\eb34"; font-family: tabler-icons; font-size: 1rem; font-weight: 400; line-height: 1; }
.sticky-buy-btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: 44px; padding: 0 var(--sp-5); background: var(--c-brand); color: var(--c-white); border: none; border-radius: var(--r-full); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--fw-semi); cursor: pointer; transition: background var(--t-fast); white-space: nowrap; }
.sticky-buy-btn::before { content: "\f5f8"; font-family: tabler-icons; font-size: 1.1em; line-height: 1; }
.sticky-buy-btn:hover { background: var(--c-brand-dark); }
/* Desktop: bar stays full-width; content constrained to the page max-width, centered */
@media (min-width: 769px) {
.sticky-buy { padding-inline: max(var(--sp-6), calc((100% - 500px) / 2)); }
.sticky-buy-title { font-size: var(--text-base); }
}
/* Room at the page bottom so the fixed bar doesn't cover the footer's last rows */
body:has(.sticky-buy) { padding-bottom: 64px; }
/* ── / STICKY BUY BAR ── */
/* ── Buy sheet — mobile size/color picker opened from the sticky bar ── */
.buy-sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); z-index: 600; opacity: 0; transition: opacity .3s ease; }
.buy-sheet-backdrop.is-open { opacity: 1; }
.buy-sheet {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 601;
background: var(--c-white);
border-radius: var(--r-xl) var(--r-xl) 0 0;
padding: var(--sp-5) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
transform: translateY(100%);
transition: transform .42s cubic-bezier(.16, 1, .3, 1), opacity .3s ease;
max-height: 82vh; overflow-y: auto;
box-shadow: 0 -8px 30px rgba(0,0,0,.18);
}
.buy-sheet.is-open { transform: translateY(0); }
@keyframes qs-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.buy-sheet-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.buy-sheet-image { width: 104px; height: 132px; flex-shrink: 0; border-radius: var(--r-md); overflow: hidden; background: var(--c-surface-1); }
.buy-sheet-image img { width: 100%; height: 100%; object-fit: contain; display: block; cursor: default; }
.buy-sheet-headinfo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); min-width: 0; flex: 1; }
.buy-sheet-title { font-size: var(--text-lg); font-weight: var(--fw-bold); color: var(--c-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
.buy-sheet-price { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); background: var(--c-brand-tint); border-radius: var(--r-full); font-size: var(--text-base); font-weight: var(--fw-bold); color: var(--c-brand); line-height: 1; }
.buy-sheet-close { position: absolute; top: var(--sp-4); right: var(--sp-4); background: none; border: none; font-size: 1.7rem; line-height: 1; color: var(--c-muted); cursor: pointer; padding: 0 var(--sp-1); }
.buy-sheet-label { font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--fw-semi); color: var(--c-brand); letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--sp-2); }
/* size-help toggle: "? Pomoč pri izbiri" link aligned right of the Velikost label + collapsible panel */
.buy-sheet-label:has(.bs-sizehelp-btn) { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: -10px; margin-bottom: var(--sp-4); }
.bs-sizehelp-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px var(--sp-3); border: none; border-radius: var(--r-full); background: var(--c-brand-tint); color: var(--c-brand); font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--fw-semi); letter-spacing: 0; text-transform: none; line-height: 1; cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
.bs-sizehelp-btn::before { content: "?"; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border: 1px solid currentColor; border-radius: 50%; font-size: 10px; font-weight: var(--fw-bold); line-height: 1; flex-shrink: 0; }
.bs-sizehelp-btn:hover, .bs-sizehelp-btn.is-open { background: var(--c-brand); color: var(--c-white); }
/* compact panel: smaller sketch, tight spacing, no extra gaps before the warning */
.bs-sizehelp { margin: 0 0 var(--sp-5); padding: 0; border: none; background: none; }
.bs-sizehelp .pomoc { margin-top: 0; font-size: var(--text-xs); }
.bs-sizehelp .pomoc img { max-height: 84px; margin-bottom: var(--sp-2); }
.bs-sizehelp .pomoc table table { margin: 0 0 var(--sp-2); background: var(--c-white); }
.bs-sizehelp .pomoc table table td { padding: 3px var(--sp-2); }
.bs-sizehelp .pomoc > table:has(table) > tbody > tr > td { padding-bottom: var(--sp-2); }
.bs-sizehelp .pomoc > table:has(table) > tbody > tr:last-child > td { padding-bottom: 0; }
.bs-sizehelp .pomoc > table:has(table) > tbody > tr > td[colspan] { padding-top: 0; }
.bs-sizehelp .pomoc br { display: none; } /* drop the line break inside the warning cell */
/* when the sketch is shown up in the image slot, hide its cell in the panel (table only) */
.bs-sizehelp.sketch-top .pomoc td:has(img) { display: none; }
.buy-sheet-image .bs-sketch-top { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--c-white); }
.buy-sheet-image .bs-sketch-top img { width: auto !important; height: auto !important; max-width: 90% !important; max-height: 90% !important; object-fit: contain; }
/* ── Shared option chips (used by the buy sheet AND the inline buy card) ── */
.opt-group { margin-bottom: var(--sp-5); }
.opt-label { font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--fw-semi); color: var(--c-brand); letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--sp-2); }
.opt-select {
width: 100%;
height: 46px;
padding: 0 calc(var(--sp-4) + 22px) 0 var(--sp-4);
border: 1.5px solid var(--c-border);
border-radius: var(--r-lg);
background-color: var(--c-white);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C41E3A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--sp-4) center;
background-size: 18px 18px;
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: var(--fw-medium);
color: var(--c-ink);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.opt-select:hover { border-color: var(--c-border-md); }
.opt-select:focus { outline: none; border-color: var(--c-brand); box-shadow: 0 0 0 3px var(--c-brand-tint); }
.opt-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.opt-chip { min-width: 44px; padding: var(--sp-2) var(--sp-4); border: 1.5px solid var(--c-border); border-radius: var(--r-full); background: var(--c-white); color: var(--c-ink); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--fw-medium); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); }
.opt-chip:hover { border-color: var(--c-brand-tint2); }
.opt-chip.is-active { border-color: var(--c-brand); background: var(--c-brand-tint); color: var(--c-brand); font-weight: var(--fw-semi); }
/* ── Inline chips on the product page replace the native size/color/motiv selects ── */
.product-options .sOpt { display: none; }
.product-options .option:not(.option-area) > label { display: none; }
.product-options .option:not(.option-area):not(.option-motiv) { display: none; }
.product-chips:not(:empty) { margin-bottom: var(--sp-2); }
.product-chips .opt-group:last-child { margin-bottom: var(--sp-4); }
.buy-sheet-qty { display: inline-flex; align-items: center; gap: var(--sp-2); border: 1.5px solid var(--c-border); border-radius: var(--r-full); padding: var(--sp-1); flex-shrink: 0; }
.bsq-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: none; background: var(--c-surface-2); border-radius: 50%; font-size: var(--text-lg); line-height: 1; color: var(--c-ink); cursor: pointer; transition: background var(--t-fast); }
.bsq-btn:hover { background: var(--c-surface-3); }
.bsq-val { min-width: 28px; text-align: center; font-size: var(--text-base); font-weight: var(--fw-semi); color: var(--c-ink); }
.buy-sheet-action { display: flex; align-items: center; gap: var(--sp-3); }
.buy-sheet-add { flex: 1; }
/* Desktop: centered card (not a full-width bottom slab) */
@media (min-width: 769px) {
.buy-sheet {
left: 50%; right: auto;
bottom: var(--sp-6);
width: 420px;
max-width: calc(100vw - 48px);
border-radius: var(--r-xl);
padding-bottom: var(--sp-6);
opacity: 0;
transform: translate(-50%, 26px) scale(.97);
}
.buy-sheet.is-open { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
/* Zoom cursor na glavni sliki */
/* Hover-zoom odstranjen (2026-07) — brez transition/will-change.
Kazalec je pointer, ker klik na sliko odpre lightbox (fancybox). */
.product-details-image img { cursor: pointer; }
/* Toggle pill (krajšanje hlač) */
.krajsaj_div { display: flex; align-items: center; margin-bottom: var(--sp-4); }
input.krajsaj { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.krajsaj + label { display: inline-flex; align-items: center; gap: var(--sp-3); cursor: pointer; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--c-body); padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-2); border: 1.5px solid var(--c-border); border-radius: var(--r-full); background: var(--c-surface-2); transition: border-color var(--t-fast), background var(--t-fast); user-select: none; position: relative; }
.krajsaj + label::before { content: ''; display: inline-block; width: 40px; height: 22px; border-radius: 11px; background: var(--c-surface-4); border: 1.5px solid var(--c-border-md); flex-shrink: 0; transition: background var(--t-fast), border-color var(--t-fast); }
.krajsaj + label::after { content: ''; position: absolute; left: calc(var(--sp-2) + 2px); top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; background: var(--c-white); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left var(--t-fast); }
.krajsaj:checked + label { border-color: var(--c-brand); background: var(--c-brand-tint); color: var(--c-brand); }
.krajsaj:checked + label::before { background: var(--c-brand); border-color: var(--c-brand); }
.krajsaj:checked + label::after { left: calc(var(--sp-2) + 40px - 18px - 2px); }
/* k_info panel — pants-shortening options (opens on "Želim skrajšati hlače") */
.form-add .k_info { display: none; margin-bottom: var(--sp-4); }
.form-add .k_info.k_view { display: block; animation: kinfo-in .22s ease; }
@keyframes kinfo-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.k_info-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.k_info-title { font-size: var(--text-sm); font-weight: var(--fw-semi); color: var(--c-ink); }
.k_info-price { display: inline-flex; align-items: center; padding: 3px var(--sp-3); background: var(--c-brand-tint); color: var(--c-brand); border-radius: var(--r-full); font-size: var(--text-xs); font-weight: var(--fw-bold); white-space: nowrap; }
.k_info-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: nowrap; }
.k_info-row label { font-size: var(--text-sm); color: var(--c-muted); line-height: 1; margin-bottom: 0; }
.k_info-field { display: inline-flex; align-items: center; border: 1.5px solid var(--c-border-md); border-radius: var(--r-md); background: var(--c-white); overflow: hidden; }
.k_info-field .miniField { width: 60px; height: 38px; border: none; border-radius: 0; padding: 0 var(--sp-2); text-align: center; font-size: var(--text-sm); background: transparent; }
.k_info-unit { display: flex; align-items: center; padding: 0 var(--sp-3); font-size: var(--text-sm); color: var(--c-muted); background: var(--c-surface-2); border-left: 1px solid var(--c-border); }
.opombeF { width: 100%; min-height: 80px; padding: var(--sp-3); border: 1.5px solid var(--c-border); border-radius: var(--r-md); resize: vertical; font-size: var(--text-sm); background: var(--c-white); transition: border-color var(--t-fast); box-sizing: border-box; }
.opombeF:focus { border-color: var(--c-brand); outline: none; }
/* Motiv: inline label+select, image preview below */
.option-motiv { flex-wrap: wrap; }
.option-motiv .motiv_img { flex: 0 0 100%; margin-top: var(--sp-2); }
/* Opombe: label above, textarea full width below */
.option-area { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
.option-area label { min-width: auto; }
.product-description-text { margin-top: var(--sp-8); padding-top: var(--sp-8); border-top: 1px solid var(--c-border); font-size: var(--text-sm); color: var(--c-body); line-height: var(--lh-loose); grid-column: 1 / -1; }
.product-description-text h2, .product-description-text h3 { font-family: var(--font-head); margin: var(--sp-5) 0 var(--sp-3); }
.product-description-text p { margin-bottom: var(--sp-3); }
/* ── Size / help tables (.pomoc = product t_alt_content, customer-edited HTML in admin).
We must NOT add classes to the content, so everything is styled via this wrapper.
Layout: usually a borderless OUTER table (sketch image | measurement table) + a warning row;
~12 products use a single flat table. :has() distinguishes the two. ── */
.pomoc { margin-top: var(--sp-6); font-size: var(--text-sm); color: var(--c-body); line-height: var(--lh-normal); }
/* Unify sketch sizes: override the per-image inline width/height, keep aspect ratio, cap the size */
.pomoc img { width: auto !important; height: auto !important; max-width: 140px; max-height: 190px; }
/* Always stack: sketch image on its own row, the measurement table spanning the FULL description
width. The outer layout table + its cells go block-level so nothing is squeezed beside the sketch. */
.pomoc > table:has(table),
.pomoc > table:has(table) > tbody,
.pomoc > table:has(table) > tbody > tr,
.pomoc > table:has(table) > tbody > tr > td { display: block; width: 100%; }
.pomoc > table:has(table) > tbody > tr > td { padding: 0 0 var(--sp-3); }
.pomoc > table:has(table) img { display: block; margin: 0 auto var(--sp-3); } /* sketch centred */
.pomoc table table { display: table; } /* keep the inner measurement table a real grid */
/* data tables = the nested measurement table, or a standalone flat table — full width, rounded.
separate+spacing:0 (not collapse) so border-radius + overflow:hidden actually round the corners;
single hairlines via right/bottom borders on cells (last col/row drop theirs -> table border shows). */
.pomoc table table,
.pomoc > table:not(:has(table)) { border-collapse: separate; border-spacing: 0; width: 100%; margin: 0 0 var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; }
.pomoc table table td,
.pomoc > table:not(:has(table)) td { border-right: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); padding: var(--sp-2) var(--sp-3); text-align: left; }
.pomoc table table td:last-child,
.pomoc > table:not(:has(table)) td:last-child { border-right: none; }
.pomoc table table tr:last-child td,
.pomoc > table:not(:has(table)) tr:last-child td { border-bottom: none; }
/* header row */
.pomoc table table tr:first-child td,
.pomoc > table:not(:has(table)) tr:first-child td { background: var(--c-brand-tint); color: var(--c-brand); font-weight: var(--fw-semi); white-space: nowrap; }
.pomoc table table tr:first-child strong,
.pomoc > table:not(:has(table)) tr:first-child strong { font-weight: var(--fw-semi); }
/* zebra striping for body rows */
.pomoc table table tr:nth-child(2n) td,
.pomoc > table:not(:has(table)) tr:nth-child(2n) td { background: var(--c-surface-2); }
/* warning row (Opozorilo) — colspan cell in the nested layout */
.pomoc > table:has(table) > tbody > tr > td[colspan] { padding: var(--sp-3) 0 0; color: var(--c-muted); font-size: var(--text-xs); }
/* SHOP PAGE */
.shopPage { width: 94%; max-width: var(--max-w); margin-inline: auto; padding: var(--sp-8) 0 var(--sp-16); }
.subMenu { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-12); list-style: none; }
.subMenu a { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-6) var(--sp-4); background: var(--c-surface-2); border: 1.5px solid var(--c-border); border-radius: var(--r-lg); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--c-body); text-align: center; transition: background var(--t-base), border-color var(--t-fast), box-shadow var(--t-fast); }
.subMenu a:hover { background: var(--c-white); border-color: var(--c-brand); color: var(--c-brand); box-shadow: var(--sh-md); }
.subMenu img { width: 80px; height: 80px; object-fit: cover; border-radius: var(--r-md); }
.subSlide { width: 100%; border-radius: var(--r-xl); overflow: hidden; margin-bottom: var(--sp-8); max-height: 260px; }
.subSlide img { width: 100%; height: 100%; object-fit: cover; }
/* EXTRA BLOCKS */
.extra { padding: var(--sp-6) var(--sp-6); text-align: center; border-radius: var(--r-xl); margin: var(--sp-8) 0; }
.extra.black, .extra.blue { background: linear-gradient(135deg, var(--c-blue-dark) 0%, var(--c-blue) 60%, #2a52b0 100%); color: var(--c-white); }
.extra h2 { font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem); color: inherit; }
.extra p { color: rgba(255,255,255,.8); font-size: var(--text-base); margin-top: var(--sp-4); }
/* Linki v extra bloku (v t_content so kot ) — majhni beli gumbki.
Brez tega podedujejo barvo odstavka in so videti kot navadno besedilo. */
.extra a { display: inline-block; margin-top: var(--sp-4); padding: .45em 1.25em;
background: var(--c-white); color: var(--c-blue-dark); border-radius: var(--r-full);
font-size: var(--text-sm); font-weight: var(--fw-semi); line-height: 1.5; text-decoration: none;
transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
.extra a:hover { background: var(--c-blue-tint); color: var(--c-blue-dark); box-shadow: var(--sh-md); }
.row.blackbg { background: var(--c-surface-2); padding: var(--sp-6) 0; margin-bottom: var(--sp-6); }
/* NEWSLETTER */
.eNovice { background: var(--c-white); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); padding: var(--sp-8) var(--sp-6); text-align: center; }
.eNewsForm { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); flex-wrap: nowrap; max-width: 860px; margin-inline: auto; }
.eNewsForm h4 { white-space: nowrap; flex-shrink: 0; font-family: var(--font-head); font-size: var(--text-2xl); font-weight: var(--fw-medium); color: var(--c-blue); letter-spacing: -.02em; margin: 0 var(--sp-2) 0 0; }
input.news_txt { flex: 1 1 auto; min-width: 150px; height: 44px !important; padding: 0 var(--sp-4); border: 1.5px solid var(--c-border); border-radius: var(--r-full) !important; font-size: var(--text-sm); background: var(--c-white); transition: border-color var(--t-fast); }
input.news_txt:focus { border-color: var(--c-blue); outline: none; }
.eNewsForm .news_btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: 44px; box-sizing: border-box; padding: 0 var(--sp-5); background: var(--c-blue); color: var(--c-white); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--fw-semi); border: none; border-radius: var(--r-full) !important; cursor: pointer; transition: background var(--t-fast); white-space: nowrap; }
.eNewsForm .news_btn::before { content: "\ea1e"; font-family: tabler-icons; font-size: 1.05em; line-height: 1; }
.eNewsForm .news_btn:hover { background: var(--c-blue-dark); box-shadow: none; }
.napaka2 { margin-top: var(--sp-4); font-size: var(--text-sm); color: var(--c-success); display: none; }
/* EU LOGOS */
/* Empty basket */
.empty-basket {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--sp-16) var(--sp-6);
max-width: 480px;
margin-inline: auto;
}
.empty-basket-icon {
width: 96px;
height: 96px;
border-radius: 50%;
background: var(--c-surface-3);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--sp-6);
}
.empty-basket-icon::before {
content: "\fb58";
font-family: tabler-icons;
font-size: 3rem;
font-weight: 400;
line-height: 1;
color: var(--c-muted);
}
.empty-basket-title {
font-family: var(--font-head);
font-size: var(--text-2xl);
font-weight: var(--fw-medium);
color: var(--c-ink);
margin: 0 0 var(--sp-3);
}
.empty-basket-sub {
font-size: var(--text-sm);
color: var(--c-muted);
line-height: var(--lh-base);
margin: 0 0 var(--sp-8);
}
.empty-basket-btn {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
background: var(--c-brand);
color: var(--c-white);
border-radius: var(--r-full);
padding: var(--sp-3) var(--sp-8);
font-size: var(--text-sm);
font-weight: var(--fw-semi);
text-decoration: none;
transition: background var(--t-fast), box-shadow var(--t-fast);
}
.empty-basket-btn::before {
content: "\ea1d";
font-family: tabler-icons;
font-size: 1rem;
font-weight: 400;
line-height: 1;
}
.empty-basket-btn:hover { background: var(--c-brand-dark); box-shadow: var(--sh-brand); color: var(--c-white); }
/* Status / info pages (404, order error, …) — shared .thank-you-page wrapper */
.thank-you-page {
max-width: 560px;
margin-inline: auto;
padding: var(--sp-16) var(--sp-6);
text-align: center;
font-size: var(--text-lg);
line-height: 1.6;
color: var(--c-body);
}
.thank-you-page img {
display: block;
width: 130px;
height: auto;
margin: 0 auto var(--sp-6);
}
.thank-you-page b,
.thank-you-page strong { color: var(--c-ink); font-weight: var(--fw-semi); }
.thank-you-page a { color: var(--c-brand); text-decoration: none; }
.thank-you-page a:hover { text-decoration: underline; }
/* 404 — main navigation as pills */
.lost-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--sp-2);
margin-top: var(--sp-8);
}
.lost-links br { display: none; }
.lost-links a {
display: inline-flex;
align-items: center;
padding: var(--sp-2) var(--sp-4);
border: 1px solid var(--c-border);
border-radius: var(--r-full);
font-size: var(--text-sm);
color: var(--c-body);
text-decoration: none;
transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.lost-links a:hover {
border-color: var(--c-brand);
color: var(--c-brand);
background: var(--c-brand-tint);
text-decoration: none;
}
/* FOOTER */
footer { background: var(--c-footer-bg); color: var(--c-footer-text); padding: var(--sp-16) var(--sp-6) var(--sp-8); }
.footer-line { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-8); max-width: var(--max-w); margin-inline: auto; padding-bottom: var(--sp-10); border-bottom: 1px solid var(--c-footer-border); }
.fl { display: flex; flex-direction: column; gap: var(--sp-2); }
.fl h4 { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--fw-semi); color: var(--c-footer-head); letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--sp-3); }
.fl a { font-size: var(--text-sm); color: var(--c-footer-text); line-height: var(--lh-base); transition: color var(--t-fast); }
.fl a:hover { color: var(--c-white); }
/* Nav columns: getNaviId() emits …
— in a flex column each
becomes a
flex item and the column gap doubles around it (huge gaps). Drop the
; let the
flex gap space the links. Scoped to .nMob so the company column's address
stays. */
.fl.nMob br { display: none; }
.fl.nMob a { display: block; }
.fl span { font-size: var(--text-sm); color:var(--c-footer-text); display: inline-block; min-width: 70px; }
/* Working hours — today + popup */
.wh-today { position: relative; }
.wh-today-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.wh-day { font-size: var(--text-xs); color: rgba(154,149,144,.55); min-width: 68px; }
.wh-time { font-size: var(--text-sm); color: var(--c-footer-head); font-weight: var(--fw-semi); }
.wh-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--r-full); border: 1px solid var(--c-footer-border); background: transparent; cursor: pointer; margin-left: var(--sp-1); flex-shrink: 0; transition: border-color var(--t-fast), background var(--t-fast); }
.wh-btn::before { content: "\eac5"; font-family: tabler-icons; font-size: .85rem; color: var(--c-footer-text); line-height: 1; }
.wh-btn:hover { border-color: var(--c-blue); background: var(--c-blue); }
.wh-btn:hover::before { color: var(--c-white); }
.wh-popup { position: absolute; top: calc(100% + 8px); left: 0; background: #0a1638; border: 1px solid var(--c-footer-border); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); z-index: 200; white-space: nowrap; box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.wh-row { display: grid; grid-template-columns: 80px 1fr; gap: var(--sp-2); padding: 3px 0; }
.wh-row span { font-size: var(--text-sm); color:#fff; }
.wh-row strong { font-size: var(--text-sm); color: var(--c-footer-text); font-weight: normal; }
.wh-row--today span { color: var(--c-footer-head); }
.wh-row--today strong { color: var(--c-footer-head); }
/* Navigation row (above contact) */
.min-navi { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 var(--sp-1); padding: var(--sp-5) 0; max-width: var(--max-w); margin-inline: auto; border-bottom: 1px solid var(--c-footer-border); }
.min-navi a { font-size: var(--text-sm); color: var(--c-footer-text); padding: var(--sp-1) var(--sp-3); transition: color var(--t-fast); }
.min-navi a:hover { color: var(--c-white); }
.min-navi a + a { border-left: 1px solid var(--c-footer-border); }
/* Contact info row */
.foot-info { display: flex; align-items: center; justify-content: center; gap: var(--sp-8); flex-wrap: wrap; max-width: var(--max-w); margin: var(--sp-6) auto; padding-bottom: var(--sp-6); border-bottom: 1px solid var(--c-footer-border); }
.foot-info > div { display: flex; align-items: center; gap: var(--sp-2); }
.foot-info > div::before { font-family: tabler-icons; font-size: 1rem; color: var(--c-footer-head); flex-shrink: 0; line-height: 1; }
.fi-phone::before { content: "\eb09"; }
.fi-mail::before { content: "\eae5"; }
.fi-gift::before { content: "\eb68"; }
.fi-pin::before { content: "\eae8"; }
.foot-info a { font-size: var(--text-sm); color: var(--c-footer-text); transition: color var(--t-fast); }
.foot-info a:hover { color: var(--c-white); }
/* Social icons */
.social { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-4) 0; }
.social a { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--c-footer-border); border-radius: var(--r-full); transition: border-color var(--t-fast), background var(--t-fast); }
.social a::before { font-family: tabler-icons; font-size: 1.1rem; color: var(--c-footer-text); line-height: 1; transition: color var(--t-fast); }
.social a:hover { background: var(--c-blue); border-color: var(--c-blue); }
.social a:hover::before { color: var(--c-white); }
.soc-fb::before { content: "\ec1a"; }
.soc-ig::before { content: "\ec20"; }
/* Footer copyright */
.pg-end { text-align: center; padding-top: var(--sp-4); font-size: var(--text-xs); color: var(--c-footer-text); max-width: var(--max-w); margin-inline: auto; line-height: 25px;}
.pg-end p { margin-top: var(--sp-2); }
.pg-end a { color: rgba(154,149,144,.6); transition: color var(--t-fast); }
.pg-end a:hover { color: var(--c-white); }
/* SIDE BASKET */
.overLay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 390; backdrop-filter: blur(2px); }
.basketPanel { position: fixed; top: 0; right: -420px; width: 400px; max-width: 100vw; height: 100%; background: var(--c-white); box-shadow: var(--sh-xl); z-index: 400; transition: right .3s ease; overflow: hidden; }
.basketPanel.basketVis { right: 0; }
.bakset-flex { display: flex; flex-direction: column; height: 100%; padding: var(--sp-6); gap: var(--sp-4); overflow-y: auto; }
.close-side { display: flex; align-items: center; justify-content: center; align-self: flex-end; width: 36px; height: 36px; font-size: 1.4rem; color: var(--c-muted); cursor: pointer; border-radius: var(--r-md); transition: background var(--t-fast), color var(--t-fast); flex-shrink: 0; }
.close-side:hover { background: var(--c-surface-3); color: var(--c-ink); }
.bakset-flex h2 { font-size: var(--text-xl); font-weight: var(--fw-semi); }
.sideBtn { display: flex; align-items: center; justify-content: center; padding: var(--sp-3) var(--sp-6); border-radius: var(--r-md); font-size: var(--text-sm); font-weight: var(--fw-semi); cursor: pointer; transition: background var(--t-fast), color var(--t-fast); text-align: center; }
.sideBtn.cta { background: var(--c-brand); color: var(--c-white); }
.sideBtn.cta:hover { background: var(--c-brand-dark); }
.sideBtn:not(.cta) { background: var(--c-surface-3); color: var(--c-body); }
.sideBtn:not(.cta):hover { background: var(--c-surface-4); }
.appender { flex: 1; overflow-y: auto; }
/* Basket side panel — items */
.side-items { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-border); }
.side-items:last-child { border-bottom: none; }
.side-items > span:first-child { flex-shrink: 0; width: 64px; height: 80px; border-radius: var(--r-md); overflow: hidden; background: var(--c-surface-2); }
.side-items > span:first-child img { width: 100%; height: 100%; object-fit: cover; display: block; }
.side-items > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.side-items h3 { font-size: var(--text-sm); font-weight: var(--fw-semi); color: var(--c-ink); margin: 0; line-height: var(--lh-tight); }
.side-items h5 { font-size: var(--text-xs); font-weight: var(--fw-normal); color: var(--c-muted); margin: 0; }
.side-items strong { font-size: var(--text-sm); font-weight: var(--fw-semi); color: var(--c-brand); margin-top: var(--sp-1); }
.remove-item { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--r-md); cursor: pointer; transition: background var(--t-fast); margin-top: 2px; }
.remove-item:hover { background: var(--c-surface-3); }
.remove-item img { width: 16px; height: 16px; opacity: .45; }
.remove-item:hover img { opacity: .8; }
/* FORMS */
.selfContent { width: 94%; max-width: var(--max-w); margin-inline: auto; padding: var(--sp-8) 0 var(--sp-16); font-size: var(--text-base); line-height: var(--lh-loose); color: var(--c-body); }
.selfContent h1, .selfContent h2, .selfContent h3 { margin: var(--sp-6) 0 var(--sp-3); }
.selfContent p { margin-bottom: var(--sp-4); }
.selfContent ul, .selfContent ol { list-style: disc; padding-left: var(--sp-6); margin-bottom: var(--sp-4); }
.selfContent img { max-width: 100%; height: auto; border-radius: var(--r-md); display: inline-block; }
.selfContent img[align="left"] { float: left; margin: 0 var(--sp-5) var(--sp-4) 0; }
.selfContent img[align="right"] { float: right; margin: 0 0 var(--sp-4) var(--sp-5); }
.selfContent::after { content: ""; display: table; clear: both; }
.selfContent h1 { font-family: var(--font-head); font-size: clamp(1.6rem, 1rem + 2vw, 2.4rem); font-weight: var(--fw-medium); letter-spacing: -.03em; color: var(--c-ink); }
.selfContent h2 { font-family: var(--font-head); font-size: clamp(1.2rem, .8rem + 1.2vw, 1.8rem); font-weight: var(--fw-medium); color: var(--c-ink); }
.selfContent h3 { font-size: var(--text-lg); font-weight: var(--fw-semi); color: var(--c-ink); }
.selfContent a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 3px; }
.selfContent a:hover { color: var(--c-brand-dark); }
label { display: block; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--c-body); margin-bottom: var(--sp-2); }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], textarea { width: 100%; padding: var(--sp-3) var(--sp-4); border: 1.5px solid var(--c-border); border-radius: var(--r-md); font-size: var(--text-sm); font-family: var(--font-body); color: var(--c-body); background: var(--c-white); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="password"]:focus, input[type="number"]:focus, textarea:focus { border-color: var(--c-brand); box-shadow: 0 0 0 3px var(--c-brand-tint); outline: none; }
input[type="submit"], button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; padding: var(--sp-3) var(--sp-8); background: var(--c-brand); color: var(--c-white); font-size: var(--text-base); font-weight: var(--fw-semi); border: none; border-radius: var(--r-full); cursor: pointer; transition: background var(--t-fast), box-shadow var(--t-fast); }
input[type="submit"]:hover, button[type="submit"]:hover { background: var(--c-brand-dark); box-shadow: var(--sh-brand); }
/* MISC */
.f_lang { display: flex; align-items: center; gap: var(--sp-2); }
.f_lang a { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--text-xs); color: var(--c-muted); padding: 3px var(--sp-2); border-radius: var(--r-sm); transition: background var(--t-fast); }
.f_lang a:hover { background: var(--c-surface-3); color: var(--c-body); }
.stock-info { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--c-success); }
.stock-info::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-full); background: currentColor; flex-shrink: 0; }
.stock-info.no-stock { color: var(--c-error); }
.napaka { background: var(--c-error-tint); color: var(--c-error); padding: var(--sp-4); border-radius: var(--r-md); font-size: var(--text-sm); margin: var(--sp-4) 0; }
.selectImg { width: 36px; height: 36px; border-radius: var(--r-full); overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: border-color var(--t-fast); display: inline-block; }
.selectImg:hover { border-color: var(--c-brand); }
.selectImg img { width: 100%; height: 100%; object-fit: cover; }
.motiv_img img { max-width: 120px; border-radius: var(--r-md); border: 2px solid var(--c-border); margin-top: var(--sp-2); }
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-8) 0; }
.pagination a, .pagination span { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1.5px solid var(--c-border); border-radius: var(--r-md); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--c-body); transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.pagination a:hover { background: var(--c-brand-tint); border-color: var(--c-brand); color: var(--c-brand); }
.pagination .current { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-white); }
.fancybox-overlay { z-index: 9000; }
.fancybox-wrap { z-index: 9001; }
/* ----------------------------------------------------------
CATEGORY BANNER (.slide / .slideCont)
getSubSlide() — bg image inlined via style=""
---------------------------------------------------------- */
.slide {
width: 100%;
min-height: 280px;
background-size: cover;
background-position: center;
position: relative;
display: flex;
align-items: flex-end;
margin-bottom: var(--sp-8);
overflow: hidden;
}
.slide::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.15) 50%, transparent 75%);
}
.slideCont {
position: relative;
z-index: 2;
padding: var(--sp-8) var(--sp-8) var(--sp-10);
max-width: var(--max-w);
width: 94%;
margin-inline: auto;
color: #fff;
}
.slideCont h1 {
font-family: var(--font-head);
font-size: clamp(1.6rem, 1rem + 2.5vw, 3rem);
font-weight: var(--fw-medium);
color: var(--c-white);
letter-spacing: -.03em;
line-height: var(--lh-snug);
text-shadow: 0 2px 16px rgba(0,0,0,.4);
margin-bottom: var(--sp-2);
}
.slideCont p,
.slideCont div { color: rgba(255,255,255,.85); font-size: var(--text-base); line-height: var(--lh-base); }
/* ----------------------------------------------------------
CATEGORY GRID (.categories / .category-item)
getSubCats() — bg image inlined, title overlay
---------------------------------------------------------- */
.categories {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--sp-4);
width: 100%;
max-width: var(--max-w);
margin: 0 auto var(--sp-12);
}
.category-item {
position: relative;
aspect-ratio: 2/3;
border-radius: var(--r-lg);
overflow: hidden;
background-size: cover;
background-position: center top;
cursor: pointer;
transition: box-shadow var(--t-base);
}
.category-item::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.68) 0%, rgba(0,0,0,.12) 55%, transparent 75%);
transition: opacity var(--t-base);
}
.category-item:hover { box-shadow: var(--sh-xl); }
.category-item:hover::after { opacity: .8; }
.category-item h3 {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
font-family: var(--font-head);
font-size: clamp(.95rem, .7rem + .8vw, 1.3rem);
font-weight: var(--fw-medium);
color: var(--c-white);
padding: var(--sp-4) var(--sp-4) var(--sp-5);
line-height: var(--lh-snug);
letter-spacing: -.01em;
text-shadow: 0 1px 8px rgba(0,0,0,.5);
transition: padding var(--t-base);
}
.category-item:hover h3 { padding-bottom: var(--sp-6); }
/* ----------------------------------------------------------
CATS-SUB (.cats-sub / .category)
getSubCatsShop() — image + text side by side
---------------------------------------------------------- */
.cats-sub {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--sp-5);
width: 94%;
max-width: var(--max-w);
margin: 0 auto var(--sp-12);
}
.cats-sub .category {
display: flex;
flex-direction: column;
background: var(--c-white);
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
overflow: hidden;
transition: transform var(--t-base), box-shadow var(--t-base);
}
.cats-sub .category:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.cat-img { aspect-ratio: 16/9; overflow: hidden; background: var(--c-surface-3); }
.cat-img a { display: block; width: 100%; height: 100%; }
.cat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.cats-sub .category:hover .cat-img img { transform: scale(1.04); }
.cats-sub .cat-desc { padding: var(--sp-4); }
.cats-sub .cat-desc h3 { font-size: var(--text-base); font-weight: var(--fw-semi); margin-bottom: var(--sp-1); }
.cats-sub .cat-desc h3 a { color: var(--c-ink); }
.cats-sub .cat-desc h3 a:hover { color: var(--c-brand); }
.cats-sub .cat-desc p { font-size: var(--text-sm); color: var(--c-muted); line-height: var(--lh-base); }
/* ----------------------------------------------------------
CONTACT PAGE (.company-contact / .info-card / .vizitka)
---------------------------------------------------------- */
.company-contact {
display: grid;
grid-template-columns: 1.4fr 1fr;
grid-template-rows: auto auto;
gap: var(--sp-8);
padding: var(--sp-8) 0 var(--sp-16);
}
.info-card {
background: var(--c-white);
border: 1px solid var(--c-border);
border-radius: var(--r-xl);
padding: var(--sp-8);
}
/* map card spans full width */
.company-contact .info-card:last-child {
grid-column: 1 / -1;
padding: var(--sp-6) var(--sp-8);
overflow: hidden;
}
.company-contact .info-card:last-child iframe {
display: block;
width: 100%;
height: 340px;
border: 0;
border-radius: var(--r-md);
margin-top: var(--sp-4);
}
/* vizitka — company details */
.vizitka h3 {
font-size: var(--text-base);
font-weight: var(--fw-semi);
color: var(--c-muted);
text-transform: uppercase;
letter-spacing: .06em;
font-size: var(--text-xs);
margin-bottom: var(--sp-5);
}
.vizitka > div {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: var(--sp-1) var(--sp-3);
padding: var(--sp-3) 0;
border-bottom: 1px solid var(--c-border);
font-size: var(--text-sm);
}
.vizitka > div:last-child { border-bottom: none; }
.vizitka > div p:first-child { color: var(--c-muted); }
.vizitka > div p:last-child { color: var(--c-ink); font-weight: var(--fw-medium); }
.vizitka a { color: var(--c-brand); }
/* ----------------------------------------------------------
CONTACT FORM (.form-place)
---------------------------------------------------------- */
.form-place {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-4) var(--sp-5);
margin-top: var(--sp-6);
}
.form-place .full-row { grid-column: 1 / -1; }
.form-place label {
display: block;
font-size: var(--text-sm);
font-weight: var(--fw-medium);
color: var(--c-ink);
margin-bottom: var(--sp-1);
}
.inputF,
.area-field {
width: 100%;
padding: var(--sp-3) var(--sp-4);
border: 1px solid var(--c-border-md);
border-radius: var(--r-md);
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--c-ink);
background: var(--c-white);
transition: border-color var(--t-fast), box-shadow var(--t-fast);
outline: none;
box-sizing: border-box;
}
.inputF:focus,
.area-field:focus {
border-color: var(--c-brand);
box-shadow: 0 0 0 3px var(--c-brand-tint2);
}
.area-field { resize: vertical; min-height: 130px; line-height: var(--lh-base); }
.check-option {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
font-size: var(--text-sm);
color: var(--c-muted);
line-height: var(--lh-base);
}
.check-option input[type="checkbox"] {
flex-shrink: 0;
width: 18px;
height: 18px;
margin-top: 2px;
accent-color: var(--c-brand);
cursor: pointer;
}
.default-form-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 48px;
padding: 0 var(--sp-8);
background: var(--c-brand);
color: var(--c-white);
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: var(--fw-semi);
border: none;
border-radius: var(--r-md);
cursor: pointer;
transition: background var(--t-fast), box-shadow var(--t-fast);
letter-spacing: .02em;
}
.default-form-btn:hover { background: var(--c-brand-dark); box-shadow: var(--sh-brand); }
/* ----------------------------------------------------------
BLOG LIST (.blog-list / .blog-item)
blog_items() output
---------------------------------------------------------- */
.blog-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-6);
width: 94%;
max-width: var(--max-w);
margin: var(--sp-8) auto var(--sp-16);
}
.blog-item {
display: flex;
flex-direction: column;
background: var(--c-white);
border: 1px solid var(--c-border);
border-radius: var(--r-xl);
overflow: hidden;
transition: transform var(--t-base), box-shadow var(--t-base);
}
.blog-item:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.blog-item-image {
position: relative;
aspect-ratio: 16/9;
overflow: hidden;
background: var(--c-surface-3);
flex-shrink: 0;
}
.blog-item-image a { display: block; width: 100%; height: 100%; }
.blog-item-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.blog-item:hover .blog-item-image img { transform: scale(1.04); }
.blog-item-image .overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0);
transition: background var(--t-base);
z-index: 1;
}
.blog-item:hover .blog-item-image .overlay { background: rgba(0,0,0,.08); }
.blog-item-summary {
padding: var(--sp-4) var(--sp-5) var(--sp-2);
flex: 1;
}
.blog-item-summary small {
display: block;
font-size: var(--text-xs);
color: var(--c-muted);
margin-bottom: var(--sp-2);
}
.blog-item-summary h3 {
font-family: var(--font-head);
font-size: var(--text-lg);
font-weight: var(--fw-medium);
line-height: var(--lh-snug);
letter-spacing: -.01em;
color: var(--c-ink);
}
.blog-item-summary h3 a { color: inherit; }
.blog-item-summary h3 a:hover { color: var(--c-brand); }
.blog-item > div:last-child { padding: var(--sp-3) var(--sp-5) var(--sp-5); }
/* ----------------------------------------------------------
BLOG POST (.thirds / .blog_content / .blanks)
blog.php layout
---------------------------------------------------------- */
.thirds {
display: grid;
grid-template-columns: 1fr 300px;
gap: var(--sp-10);
width: 94%;
max-width: var(--max-w);
margin-inline: auto;
padding: var(--sp-6) 0 var(--sp-16);
align-items: start;
}
/* first .blanks is an empty spacer — hide it */
.thirds > .blanks:first-child { display: none; }
.blog_content h1 {
font-family: var(--font-head);
font-size: clamp(1.6rem, 1rem + 2.2vw, 2.6rem);
font-weight: var(--fw-medium);
letter-spacing: -.03em;
color: var(--c-ink);
line-height: var(--lh-snug);
margin-bottom: var(--sp-6);
}
.blog_content { font-size: var(--text-base); line-height: var(--lh-loose); color: var(--c-body); }
.blog_content p { margin-bottom: var(--sp-4); }
.blog_content h2 { font-family: var(--font-head); font-size: 1.5rem; font-weight: var(--fw-medium); color: var(--c-ink); margin: var(--sp-8) 0 var(--sp-3); }
.blog_content h3 { font-size: var(--text-lg); font-weight: var(--fw-semi); color: var(--c-ink); margin: var(--sp-6) 0 var(--sp-3); }
.blog_content ul, .blog_content ol { list-style: disc; padding-left: var(--sp-6); margin-bottom: var(--sp-4); }
.blog_content img { max-width: 100%; height: auto; border-radius: var(--r-md); margin: var(--sp-4) 0; }
.blog_content a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 3px; }
/* back / share buttons */
.back-btn, .share-btn {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
margin-top: var(--sp-6);
padding: var(--sp-2) var(--sp-5);
border: 1px solid var(--c-border-md);
border-radius: var(--r-full);
font-size: var(--text-sm);
color: var(--c-muted);
transition: color var(--t-fast), border-color var(--t-fast);
}
.back-btn:hover, .share-btn:hover { color: var(--c-brand); border-color: var(--c-brand); }
.back-btn::before { content: "\ea19"; font-family: tabler-icons; font-size: 1rem; }
/* ----------------------------------------------------------
BLOG SIDEBAR (.blanks.bRight / .blog-side / .blog-item-side)
blog_items_side() output
---------------------------------------------------------- */
.blanks.bRight { padding-top: var(--sp-1); }
.blanks.bRight > h3 {
font-size: var(--text-sm);
font-weight: var(--fw-semi);
color: var(--c-muted);
text-transform: uppercase;
letter-spacing: .06em;
margin-bottom: var(--sp-4);
}
.blanks.bRight > a { display: block; margin-top: var(--sp-4); font-size: var(--text-sm); color: var(--c-muted); }
.blanks.bRight > a:hover { color: var(--c-brand); }
.blog-side { display: flex; flex-direction: column; gap: var(--sp-4); }
.blog-item-side {
display: grid;
grid-template-columns: 80px 1fr;
gap: var(--sp-3);
align-items: start;
padding: var(--sp-3);
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
transition: box-shadow var(--t-fast);
}
.blog-item-side:hover { box-shadow: var(--sh-sm); }
.side-image { aspect-ratio: 1/1; overflow: hidden; border-radius: var(--r-md); background: var(--c-surface-3); }
.side-image a { display: block; width: 100%; height: 100%; }
.side-image img { width: 100%; height: 100%; object-fit: cover; }
.side-cont small { display: block; font-size: var(--text-xs); color: var(--c-muted); margin-bottom: var(--sp-1); }
.side-cont h3 { font-size: var(--text-sm); font-weight: var(--fw-semi); line-height: var(--lh-snug); }
.side-cont h3 a { color: var(--c-ink); }
.side-cont h3 a:hover { color: var(--c-brand); }
.side-cont .button-min { margin-top: var(--sp-2); font-size: var(--text-xs); padding: 3px 10px; }
/* ----------------------------------------------------------
MOBILE NAV PANEL (.panel / .panelVis)
---------------------------------------------------------- */
body.panel-open { overflow: hidden; }
/* Slide-in drawer — full screen */
.panel {
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100vh;
height: 100dvh;
background: var(--c-white);
box-shadow: -6px 0 32px rgba(0,0,0,.18);
z-index: 999;
overflow: hidden;
transition: transform var(--t-base);
display: flex;
flex-direction: column;
padding: 0;
transform: translateX(110%);
border-top: 4px solid var(--c-brand);
}
.panel.panelVis { transform: translateX(0); }
/* Panel header */
.panel-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-4) var(--sp-5);
border-bottom: 1px solid var(--c-surface-3);
background: var(--c-white);
flex-shrink: 0;
}
.panel-head .homeImg { height: 38px; width: auto; display: block; }
.panel-head > a { display: flex; align-items: center; }
.panel-close {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: var(--r-full);
cursor: pointer;
color: var(--c-white);
background: var(--c-brand);
transition: background var(--t-fast);
border: none;
flex-shrink: 0;
}
.panel-close::before { content: "\eb55"; font-family: tabler-icons; font-size: 1.15rem; line-height: 1; }
.panel-close:hover { background: var(--c-brand-dark); }
/* Nav list — scrollable middle */
.panel ul {
list-style: none;
padding: 0;
margin: 0;
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* top-level li */
.panel > ul > li {
border-bottom: 1px solid var(--c-border);
display: flex;
align-items: center;
}
.panel > ul > li > div:first-child {
flex: 1;
display: flex;
align-items: center;
min-width: 0;
}
.panel > ul > li > div:first-child > a {
flex: 1;
display: block;
padding: var(--sp-4) var(--sp-5);
font-size: var(--text-base);
font-weight: var(--fw-semi);
color: var(--c-ink);
line-height: 1.2;
border-left: 3px solid transparent;
transition: color var(--t-fast), border-color var(--t-fast);
}
.panel > ul > li > div:first-child > a:hover { color: var(--c-brand); border-left-color: var(--c-brand-tint); }
.panel > ul > li > div:first-child > a.act { color: var(--c-brand); border-left-color: var(--c-brand); }
/* Secondary nav items (Podjetje, Blog, Kontakt) */
.panel > ul > li.li-secondary > div:first-child > a {
font-size: var(--text-sm);
font-weight: var(--fw-regular);
color: var(--c-muted);
padding: var(--sp-3) var(--sp-5);
}
.panel > ul > li.li-secondary > div:first-child > a:hover { color: var(--c-brand); border-left-color: transparent; }
/* Section separator before secondary items */
.panel-nav-sep {
list-style: none;
padding: var(--sp-2) var(--sp-5);
font-size: var(--text-xs);
font-weight: var(--fw-semi);
color: var(--c-muted);
text-transform: uppercase;
letter-spacing: .08em;
background: var(--c-surface-2);
border-top: 2px solid var(--c-surface-3);
border-bottom: 1px solid var(--c-border);
}
/* rwdMore — chevron toggle button */
.rwdMore {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
cursor: pointer;
flex-shrink: 0;
border-left: 1px solid var(--c-border);
color: var(--c-muted);
transition: background var(--t-fast), color var(--t-fast);
}
.rwdMore:hover { background: var(--c-surface-3); color: var(--c-brand); }
.rwdMore img { display: none; }
.rwdMore::before { content: "\ea5f"; font-family: tabler-icons; font-size: 1rem; line-height: 1; }
.rwdMore.is-open::before { content: "\ea62"; }
.rwdMore.is-open { color: var(--c-brand); background: var(--c-brand-tint); }
/* subRole — hidden by default */
.subRole {
display: none;
background: var(--c-surface-2);
border-left: 3px solid var(--c-brand);
}
.subRole.shown { display: block; }
.subRole li { border-bottom: 1px solid var(--c-border); }
.subRole li:last-child { border-bottom: none; }
.subRole li a {
display: block;
padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-6);
font-size: var(--text-sm);
color: var(--c-muted);
transition: color var(--t-fast);
}
.subRole li a:hover { color: var(--c-brand); }
/* finRole — deeper level */
.finRole { background: var(--c-surface-3); border-left-color: var(--c-border-md); }
.finRole li a { font-size: var(--text-xs); padding-left: var(--sp-8); }
/* Panel footer — contact + language */
.panel-foot {
flex-shrink: 0;
padding: var(--sp-4) var(--sp-5);
padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--sp-5));
border-top: 1px solid var(--c-border);
background: var(--c-surface-2);
}
.panel-contact {
display: flex;
flex-direction: row;
gap: var(--sp-4);
margin-bottom: var(--sp-4);
}
.panel-contact a {
display: flex;
align-items: center;
gap: var(--sp-2);
font-size: var(--text-sm);
font-weight: var(--fw-medium);
color: var(--c-ink);
transition: color var(--t-fast);
min-width: 0;
}
.panel-contact a:hover { color: var(--c-brand); }
.panel-contact a::before {
font-family: tabler-icons;
font-size: 1.2rem;
color: var(--c-brand);
line-height: 1;
flex-shrink: 0;
}
.panel-contact a[href^="tel"]::before { content: "\eb09"; }
.panel-contact a[href^="mailto"]::before { content: "\eae5"; }
.panel-foot-label {
display: block;
font-size: var(--text-xs);
color: var(--c-muted);
font-weight: var(--fw-semi);
text-transform: uppercase;
letter-spacing: .07em;
margin-bottom: var(--sp-2);
}
.panel-foot .header-select-menu {
width: 100%;
padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--c-border-md);
border-radius: var(--r-md);
font-size: var(--text-sm);
font-family: var(--font-body);
color: var(--c-ink);
background: var(--c-white);
cursor: pointer;
}
/* ── Scroll-to-top ──────────────────────────────────────────────── */
.scroll-top { position: fixed; bottom: var(--sp-6); right: var(--sp-5); z-index: 300; width: 44px; height: 44px; border-radius: 50%; background: var(--c-white); border: 1.5px solid var(--c-border); box-shadow: var(--sh-lg); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(12px); transition: opacity var(--t-base), transform var(--t-base), background var(--t-fast), border-color var(--t-fast); pointer-events: none; font-size: 0; }
.scroll-top::before { content: "\ea1d"; font-family: tabler-icons; font-size: 1.3rem; color: var(--c-ink); line-height: 1; transition: color var(--t-fast); }
.scroll-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.scroll-top:hover { background: var(--c-brand); border-color: var(--c-brand); }
.scroll-top:hover::before { color: var(--c-white); }
body:has(.sticky-buy.is-visible) .scroll-top { bottom: calc(64px + var(--sp-4)); }
/* ── Quick-add button on product cards ─────────────────────────── */
.pi-quick-add { position: absolute; bottom: var(--sp-3); right: var(--sp-3); width: 34px; height: 34px; border-radius: 50%; background: var(--c-brand); border: none; color: var(--c-white); cursor: pointer; font-size: 0; display: flex; align-items: center; justify-content: center; transition: background var(--t-fast), transform var(--t-fast); z-index: 1; box-shadow: var(--sh-md); }
.pi-quick-add::before { content: "\f5f8"; font-family: tabler-icons; font-size: 1rem; line-height: 1; }
.pi-quick-add:hover { background: var(--c-brand-dark); transform: scale(1.1); }
/* ── Wishlist heart ── */
.pi-wish { position: absolute; top: var(--sp-2); right: var(--sp-2); z-index: 3; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--c-ink); cursor: pointer; box-shadow: var(--sh-sm); padding: 0; transition: color var(--t-fast), background var(--t-fast), transform var(--t-fast); }
.pi-wish svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; pointer-events: none; }
.pi-wish:hover { color: var(--c-brand); background: var(--c-white); }
.pi-wish.is-wished { color: var(--c-brand); }
.pi-wish.is-wished svg { fill: currentColor; stroke: currentColor; }
.pi-wish.is-bump { animation: wish-pop .4s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes wish-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
/* Larger heart on the product page (in the titlebar) */
.pi-wish-lg { position: static; flex-shrink: 0; width: 44px; height: 44px; border: 1.5px solid var(--c-border); background: var(--c-white); box-shadow: none; }
.pi-wish-lg svg { width: 24px; height: 24px; }
.pi-wish-lg:hover { border-color: var(--c-brand); }
/* ── Quick-buy sheet ────────────────────────────────────────────── */
.qs-loading { height: 60px; display: flex; align-items: center; justify-content: center; }
.qs-loading::before { content: ''; width: 22px; height: 22px; border: 2px solid var(--c-border); border-top-color: var(--c-brand); border-radius: 50%; animation: qs-spin .7s linear infinite; }
@keyframes qs-spin { to { transform: rotate(360deg); } }
.qs-foot { display: flex; align-items: center; gap: var(--sp-3); padding-top: var(--sp-4); margin-top: var(--sp-2); border-top: 1px solid var(--c-border); }
.qs-foot-add { flex: 1; min-height: 46px; }
/* Add-to-cart feedback: spinner while sending, checkmark on success (sheet + product page) */
.adToBasket.is-loading, .adToBasket.is-done { color: transparent !important; pointer-events: none; position: relative; }
.adToBasket.is-loading::before {
content: "" !important; position: absolute; top: 50%; left: 50%; margin: -9px 0 0 -9px;
width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%;
animation: qs-spin .6s linear infinite;
}
.adToBasket.is-done::before {
content: "\ea5e" !important; position: absolute; top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%);
font-family: tabler-icons; font-size: 1.4em; color: #fff; width: auto; height: auto; border: none; animation: none;
}
.qs-k-info { display: none; margin-bottom: var(--sp-3); }
.qs-k-info.k_view { display: block; animation: kinfo-in .22s ease; }
.opt-group.qs-missing { animation: qs-shake .35s ease; }
@keyframes qs-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.opt-group.qs-missing .opt-chip { border-color: var(--c-brand); }
.opt-group.qs-missing .opt-select { border-color: var(--c-brand); }
/* ── Skeleton loader (shopChip navigacija) ──────────────────────── */
@keyframes skel-shine { from { background-position: -200% 0; } to { background-position: 200% 0; } }
.product-item.skel .product-item-image,
.product-item.skel .pi-swatches,
.skel-line { background: linear-gradient(90deg, var(--c-surface-2) 25%, var(--c-surface-3) 50%, var(--c-surface-2) 75%); background-size: 200% 100%; animation: skel-shine 1.5s ease infinite; border-radius: var(--r-md); }
.product-item.skel .product-item-image { aspect-ratio: 2/3; }
.product-item.skel .pi-swatches { height: 14px; margin: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); }
.product-item.skel .product-item-details { display: flex; flex-direction: column; gap: var(--sp-2); }
.skel-line { height: 14px; margin: 0 var(--sp-3) var(--sp-1); }
.skel-line.skel-short { width: 55%; height: 20px; }
/* ── Vsebinske slike iz oznak {slika} / {seznam} / {galerija} / {gumb} ──
HTML generira returnPostValueWithReplace() v scripts/functions.php.
Slike so surove velikosti (750–1000px) in brez teh pravil niso
niti odzivne niti centrirane. ────────────────────────────────────── */
/* skupna slika v vsebini ({slika:…}); v .userGgallery je class prazen */
.userImage { max-width: 100%; height: auto; border-radius: var(--r-md); box-shadow: var(--sh-sm); }
.imgLeft > a, .imgRight > a, .imgCenter > a { display: inline-block; max-width: 100%; }
/* {slika:koda:center} */
.imgCenter { margin: var(--sp-8) 0; text-align: center; }
/* {slika:koda} (privzeto = levo) in {slika:koda:desno} — besedilo se ovija okoli */
.imgLeft { float: left; max-width: 50%; margin: var(--sp-1) var(--sp-8) var(--sp-4) 0; }
.imgRight { float: right; max-width: 50%; margin: var(--sp-1) 0 var(--sp-4) var(--sp-8); }
/* {slika:koda:cover} — je background-image na praznem divu,
zato NUJNO potrebuje lastno višino, sicer se sesede na 0. */
.imgCover { width: 100%; aspect-ratio: 16 / 7; margin: var(--sp-8) 0; border-radius: var(--r-lg);
background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: var(--sh-sm); }
/* {seznam:koda,koda,…} — mreža slik (otroci so ) */
.userGgallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--sp-4); margin: var(--sp-8) 0; }
.userGgallery a { display: block; overflow: hidden; border-radius: var(--r-md); box-shadow: var(--sh-sm);
transition: transform var(--t-fast), box-shadow var(--t-fast); }
.userGgallery a:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.userGgallery img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* {gumb:naslov:povezava} */
.userBtn { display: inline-block; padding: var(--sp-3) var(--sp-6); border-radius: var(--r-full);
background: var(--c-brand); color: var(--c-white); font-weight: var(--fw-semi); font-size: var(--text-sm);
text-decoration: none; transition: background var(--t-fast); }
.userBtn:hover { background: var(--c-brand-dark); color: var(--c-white); }
/* {galerija:koda} — vodoravni karusel (drsenje / poteg, scroll-snap) */
.carousel { display: flex; align-items: center; gap: var(--sp-3);
overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
margin: var(--sp-8) 0; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.carousel .carouselImg { flex: 0 0 min(100%, 420px); scroll-snap-align: center;
height: auto; border-radius: var(--r-md); box-shadow: var(--sh-sm); }
/* ── Vgnezdeni video v vsebini ──────────────────────────────────────
V t_content so YouTube iframe-i s trdo kodirano width="960", kar na
mobilnem povzroči vodoravni scroll (npr. stran /podjetje). 16/9 se
vsili le videom; ostali okvirji (npr. zemljevid) dobijo le max-width. */
.cMarg iframe, .blog_content iframe, .cat-desc__inner iframe { max-width: 100%; }
.cMarg iframe[src*="youtube"], .cMarg iframe[src*="vimeo"],
.blog_content iframe[src*="youtube"], .blog_content iframe[src*="vimeo"],
.cat-desc__inner iframe[src*="youtube"], .cat-desc__inner iframe[src*="vimeo"] {
display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0;
margin: var(--sp-8) auto; border-radius: var(--r-md); box-shadow: var(--sh-sm); }