/* Pisava Inter se nalaga prek <link> v index.php (@import bi blokiral izris). */

/* =====================================================================
   ROFI — premium.css
   Prenova frontenda, 20. 8. 2026.
   Stari style/css.css in style/media.css sta zakomentirana v index.php.

   Kazalo:
     01 Žetoni (barve, tipografija, razmiki)
     02 Reset in osnove
     03 Tipografija
     04 Postavitev
     05 Gumbi
     06 Obrazci
     07 Glava in navigacija
     08 Noga
     09 Domača stran
     10 Katalog (kartica izdelka, mreža, filtri)
     11 Stran izdelka
     12 Košarica (predal)
     13 Toast obvestila
     14 Blagajna (en korak)
     15 Pomožni razredi
     16 Odzivnost
   ===================================================================== */


/* =====================================================================
   01 ŽETONI
   ===================================================================== */
:root {
    /* barve — nevtralna lestvica */
    --ink: #12151a;
    --ink-2: #3d444f;
    --ink-3: #6b7280;
    --ink-4: #9aa1ab;
    --line: #e6e8ec;
    --line-2: #f0f2f5;
    --surface: #ffffff;
    --bg: #fbfbfa;
    --bg-2: #f5f6f7;

    /* znamka */
    --brand: #07a0dc;
    --brand-dark: #0684b8;
    --brand-tint: #eaf7fd;

    /* pomen */
    --ok: #15803d;
    --ok-tint: #eaf6ee;
    --warn: #b45309;
    --err: #c2334d;
    --err-tint: #fdeef1;
    --sale: #c2334d;

    /* tipografija */
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fs-xs: 0.75rem;
    --fs-sm: 0.8125rem;
    --fs-base: 0.9375rem;
    --fs-md: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.375rem;
    --fs-2xl: 1.75rem;
    --fs-3xl: 2.25rem;
    --fs-4xl: 3rem;

    /* razmiki */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;
    --s-9: 96px;

    /* oblika */
    --r-sm: 6px;
    --r: 10px;
    --r-lg: 16px;
    --r-full: 999px;

    --shadow-sm: 0 1px 2px rgba(18, 21, 26, .05);
    --shadow: 0 4px 16px rgba(18, 21, 26, .07);
    --shadow-lg: 0 12px 40px rgba(18, 21, 26, .12);
    --shadow-xl: 0 24px 64px rgba(18, 21, 26, .16);

    --container: 1280px;
    --header-h: 72px;
    --ease: cubic-bezier(.2, .7, .3, 1);
}


/* =====================================================================
   02 RESET IN OSNOVE
   ===================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    max-width: none;
    /* POPRAVEK 20.8.2026: `overflow-x: hidden` na body/html naredi iz telesa
       drsni vsebnik, kar razveljavi `position: sticky` na glavi in povzetku
       naročila. `clip` reže enako, a vsebnika NE ustvari.
       `hidden` ostaja prva vrstica kot nadomestek za starejše brskalnike. */
    overflow-x: hidden;
    overflow-x: clip;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color .18s var(--ease);
}

ul,
ol {
    list-style: none;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    cursor: pointer;
}

table {
    border-collapse: collapse;
    width: 100%;
}

::selection {
    background: var(--brand);
    color: #fff;
}

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}


/* =====================================================================
   03 TIPOGRAFIJA
   ===================================================================== */
h1,
h2,
h3,
h4,
h5 {
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--ink);
}

h1 {
    font-size: var(--fs-3xl);
}

h2 {
    font-size: var(--fs-2xl);
}

h3 {
    font-size: var(--fs-xl);
    letter-spacing: -.01em;
}

h4 {
    font-size: var(--fs-lg);
    letter-spacing: -.01em;
}

h5 {
    font-size: var(--fs-md);
    letter-spacing: 0;
}

p {
    margin: 0 0 var(--s-4);
}

p:last-child {
    margin-bottom: 0;
}

strong,
b {
    font-weight: 600;
}

small {
    font-size: var(--fs-sm);
    color: var(--ink-3);
}

hr {
    height: 1px;
    background: var(--line);
    margin: var(--s-6) 0;
}

/* vsebinska besedila iz CKEditorja */
.content_view,
.tJust {
    line-height: 1.75;
    color: var(--ink-2);
}

.content_view h1,
.content_view h2,
.content_view h3,
.tJust h3 {
    margin: var(--s-6) 0 var(--s-3);
    color: var(--ink);
}

.content_view h1:first-child,
.tJust h3:first-child {
    margin-top: 0;
}

.content_view ul,
.content_view ol,
.tJust ul {
    margin: 0 0 var(--s-4) var(--s-5);
}

.content_view ul li,
.tJust ul li {
    list-style: disc;
    margin-bottom: var(--s-2);
}

.content_view ol li {
    list-style: decimal;
    margin-bottom: var(--s-2);
}

.content_view a,
.tJust a {
    color: var(--brand-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.content_view a:hover {
    color: var(--ink);
}

.content_view table td {
    padding: var(--s-2) var(--s-4) var(--s-2) 0;
    border-bottom: 1px solid var(--line-2);
    vertical-align: top;
}


/* =====================================================================
   04 POSTAVITEV
   ===================================================================== */
.cMarg,
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--s-5);
}

main {
    display: block;
    min-height: 50vh;
}

.content_view {
    max-width: 760px;
    margin: var(--s-7) auto var(--s-8);
    padding-inline: var(--s-5);
}

.section {
    padding-block: var(--s-8);
}

.section-title {
    text-align: center;
    margin-bottom: var(--s-6);
}

.section-title h2,
h1.breaker {
    font-size: var(--fs-2xl);
    letter-spacing: -.025em;
}

h1.breaker {
    text-align: center;
    margin: var(--s-8) 0 var(--s-5);
}

/* Stran 404 — povezave do kategorij so se stikale v en zlepljen odstavek,
   ker .lost-links ni imel sloga. */
.lost-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-2) var(--s-3);
    margin-top: var(--s-5);
}

.lost-links a {
    display: inline-flex;
    align-items: center;
    padding: var(--s-2) var(--s-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-full);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
    transition: border-color .16s var(--ease), color .16s var(--ease);
}

.lost-links a:hover {
    border-color: var(--ink-4);
    color: var(--ink);
}

.lost-links br {
    display: none;
}

/* Naslovi sklopov (h2.breaker: »V naši ponudbi«, »Najbolj popularno«,
   »Poglejte tudi«). Prej brez sloga — <main> je čez celo širino, zato so
   viseli ob levem robu zaslona, mreža pod njimi pa je bila v vsebniku. */
h2.breaker {
    font-size: var(--fs-2xl);
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.2;
    margin: var(--s-8) 0 var(--s-5);
}

/* Poravnaj z mrežo SAMO, kadar naslov ni že v vsebniku (vstopna stran).
   Na strani izdelka je v .cMarg, ki odmike doda sam. */
main > h2.breaker {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--s-5);
}

.sectionTitle {
    text-align: center;
    font-size: var(--fs-2xl);
    font-weight: 600;
    letter-spacing: -.025em;
    margin: var(--s-8) 0 var(--s-6);
}


/* =====================================================================
   05 GUMBI
   ===================================================================== */
.btn,
.a-fromBtn,
.button-min,
.sideBtn,
.next-btn,
.back-btn,
.cupon-btn,
.adToBasket,
input[type=submit],
input[type=button].adToBasket {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    height: 46px;
    padding: 0 var(--s-5);
    border-radius: var(--r-full);
    font-size: var(--fs-base);
    font-weight: 500;
    letter-spacing: -.01em;
    white-space: nowrap;
    cursor: pointer;
    transition: background .18s var(--ease), color .18s var(--ease),
        border-color .18s var(--ease), transform .12s var(--ease), box-shadow .18s var(--ease);
}

.btn:active,
.a-fromBtn:active,
.adToBasket:active {
    transform: translateY(1px);
}

/* primarni — črnilo */
.btn,
.a-fromBtn,
.adToBasket,
.next-btn,
input[type=submit] {
    background: var(--ink);
    color: #fff;
    border: 1px solid var(--ink);
}

.btn:hover,
.a-fromBtn:hover,
.adToBasket:hover,
.next-btn:hover,
input[type=submit]:hover {
    background: #000;
    color: #fff;
    box-shadow: var(--shadow);
}

/* sekundarni — obroba */
.btn-ghost,
.button-min,
.back-btn,
.sideBtn {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
}

.btn-ghost:hover,
.button-min:hover,
.back-btn:hover,
.sideBtn:hover {
    border-color: var(--ink);
    background: var(--surface);
}

/* poudarjeni — znamka */
.btn-brand,
.sideBtn.cta {
    background: var(--brand);
    color: #fff;
    border: 1px solid var(--brand);
}

.btn-brand:hover,
.sideBtn.cta:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
}

.btn-sm {
    height: 38px;
    padding: 0 var(--s-4);
    font-size: var(--fs-sm);
}

.btn-block,
.btn100,
.fullBtn {
    display: flex;
    width: 100%;
}

.btn[disabled],
.btn.is-loading {
    opacity: .55;
    pointer-events: none;
}

.btn.is-loading::after {
    content: "";
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.link-quiet {
    color: var(--ink-3);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: var(--fs-sm);
}

.link-quiet:hover {
    color: var(--ink);
}


/* =====================================================================
   06 OBRAZCI
   ===================================================================== */
.field {
    display: block;
    margin-bottom: var(--s-4);
}

.field > label,
label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ink-2);
    margin-bottom: var(--s-2);
}

.inputF,
.inputF-shipping,
.area-field,
input[type=text],
input[type=email],
input[type=tel],
input[type=password],
input[type=number],
select,
textarea {
    width: 100%;
    height: 46px;
    padding: 0 var(--s-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    font-size: var(--fs-base);
    color: var(--ink);
    transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}

textarea,
.area-field {
    height: auto;
    min-height: 96px;
    padding: var(--s-3) var(--s-4);
    line-height: 1.6;
    resize: vertical;
}

select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--s-4) center;
    padding-right: var(--s-7);
    cursor: pointer;
}

input:hover,
select:hover,
textarea:hover {
    border-color: var(--ink-4);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-tint);
}

input::placeholder,
textarea::placeholder {
    color: var(--ink-4);
}

input[type=checkbox],
input[type=radio] {
    width: 18px;
    height: 18px;
    accent-color: var(--brand);
    cursor: pointer;
    vertical-align: -3px;
}

.check-row {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    margin-bottom: var(--s-3);
}

.check-row label {
    margin: 0;
    font-weight: 400;
    font-size: var(--fs-sm);
    color: var(--ink-2);
    line-height: 1.5;
}

.field-err input,
.field-err select,
input.is-invalid,
select.is-invalid {
    border-color: var(--err);
    box-shadow: 0 0 0 3px var(--err-tint);
}

.err-msg {
    display: block;
    font-size: var(--fs-xs);
    color: var(--err);
    margin-top: var(--s-1);
}

/* POPRAVEK 21.8.2026 — razmik med polji je bil dvojen.
   `.field` ima `margin-bottom: var(--s-4)`, mreža pa še `gap: var(--s-4)`,
   zato je bilo med vrsticami 32 px namesto 16. Znotraj mreže razmik vodi
   samo `gap`; navpično je namenoma manjši od vodoravnega, ker sta stolpca
   ločena že sama po sebi. */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3) var(--s-4);
}

.form-grid .field {
    margin-bottom: 0;
}

.form-grid .field > label {
    margin-bottom: var(--s-1);
}

.form-grid .full {
    grid-column: 1 / -1;
}


/* =====================================================================
   15 POMOŽNI RAZREDI (uporabljeni tudi zgoraj)
   ===================================================================== */
.muted {
    color: var(--ink-3);
}

.light {
    color: var(--ink-3);
    font-size: var(--fs-sm);
}

.center {
    text-align: center;
}

.tJust {
    text-align: left;
}

.stack > * + * {
    margin-top: var(--s-4);
}

.hide {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}


/* =====================================================================
   07 GLAVA IN NAVIGACIJA
   ===================================================================== */
.topLine {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    height: 38px;
    padding-inline: var(--s-5);
    background: var(--ink);
    color: #fff;
    font-size: var(--fs-xs);
    letter-spacing: .01em;
}

.topLine .moto {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    color: rgba(255, 255, 255, .92);
}

.topLine .sIcon {
    width: 16px;
    height: 16px;
    flex: none;
    background: url(../images/_body/delivery.svg) center/contain no-repeat;
    filter: brightness(0) invert(1);
    opacity: .9;
}

.topLine .up {
    display: flex;
    align-items: center;
    gap: var(--s-5);
}

.topLine a {
    color: rgba(255, 255, 255, .85);
}

.topLine a:hover {
    color: #fff;
}

/* akcije v glavi: prijava + košarica */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    flex: none;
    margin-left: auto;
}

.topLine .up {
    display: flex;
    align-items: center;
    gap: var(--s-5);
}

.top-usp {
    color: rgba(255, 255, 255, .62);
}

.lgn-link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    height: 40px;
    padding: 0 var(--s-3);
    border-radius: var(--r-full);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ink-2);
    transition: background .16s var(--ease), color .16s var(--ease);
}

.lgn-link:hover {
    background: var(--bg-2);
    color: var(--ink);
}

.ico-user {
    width: 18px;
    height: 18px;
    flex: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d444f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center/contain no-repeat;
}

.sBag {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 62px;
    height: 40px;
    padding: 0 var(--s-4) 0 38px;
    border-radius: var(--r-full);
    background: var(--ink);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background .16s var(--ease), transform .12s var(--ease);
}

.sBag::before {
    content: "";
    position: absolute;
    left: 14px;
    width: 17px;
    height: 17px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") center/contain no-repeat;
}

.sBag:hover {
    background: #000;
    color: #fff;
}

.sBag.is-bump {
    animation: bump .4s var(--ease);
}

@keyframes bump {
    0%, 100% { transform: scale(1); }
    35%      { transform: scale(1.16); }
}

/* glava predala z menijem */
.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s-5);
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--line);
}

.panel-head .homeImg {
    height: 28px;
    margin: 0;
}

/* glavna glava */
.header {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: var(--s-6);
    min-height: var(--header-h);
    padding-inline: var(--s-5);
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
}

.header .logo img {
    height: 34px;
    width: auto;
}

/* =====================================================================
   Izbira jezika in države (20.8.2026)
   Okno v HTML NE obstaja — zgradi ga scripts_js/prefs.js po nalaganju,
   da izvorna koda strani ostane brez ovire pred vsebino.
   ===================================================================== */
.pref-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--s-5);
    background: rgba(18, 21, 26, .45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.pref-overlay.is-open {
    display: flex;
    animation: prefIn .18s var(--ease);
}

@keyframes prefIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.pref-box {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: var(--s-7) var(--s-6) var(--s-6);
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: 0 24px 60px rgba(18, 21, 26, .28);
    text-align: center;
}

.pref-close {
    position: absolute;
    top: var(--s-3);
    right: var(--s-3);
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--r-full);
    font-size: 22px;
    line-height: 1;
    color: var(--ink-4);
    cursor: pointer;
}

.pref-close:hover {
    background: var(--bg-2);
    color: var(--ink);
}

.pref-title {
    margin: 0 0 var(--s-2);
    font-size: var(--fs-xl);
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.25;
}

.pref-sub {
    margin: 0 0 var(--s-6);
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--ink-3);
}

.pref-field {
    margin-bottom: var(--s-5);
    text-align: left;
}

.pref-label {
    display: block;
    margin-bottom: var(--s-2);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ink-2);
}

.pref-langs {
    display: flex;
    gap: var(--s-2);
}

.pref-lang {
    flex: 1;
    height: 44px;
    padding: 0 var(--s-3);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--ink-2);
    cursor: pointer;
    transition: border-color .16s var(--ease), background .16s var(--ease), color .16s var(--ease);
}

.pref-lang:hover {
    border-color: var(--ink-4);
    color: var(--ink);
}

.pref-lang.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.pref-box .pref-ok {
    margin-top: var(--s-2);
}

/* med odprtim oknom stran ne drsi */
body.pref-lock {
    overflow: hidden;
}

/* gumb v zgornji vrstici za ponovno odpiranje */
.top-pref {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    cursor: pointer;
}

/* Gumb izriše header.php na vsaki strani, viden pa naj bo šele, ko ga
   prefs.js oživi (odstrani `hidden`). Brez tega pravila ga `display`
   zgoraj prikaže tudi tam, kjer skripta ni naložena — in klik ne naredi
   nič. Prav to se je dogajalo na blagajni do 21.8.2026. */
.top-pref[hidden] {
    display: none;
}

.top-pref:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* oznaka trenutnega jezika ob globusu */
.pref-lang-tag {
    padding: 1px 5px;
    border: 1px solid currentColor;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
    opacity: .85;
}

.ico-globe {
    width: 13px;
    height: 13px;
    flex: none;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a15 15 0 010 18a15 15 0 010-18'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a15 15 0 010 18a15 15 0 010-18'/%3E%3C/svg%3E") center/contain no-repeat;
}

@media (max-width: 620px) {
    .pref-box {
        padding: var(--s-6) var(--s-5) var(--s-5);
    }
}


/* preklop jezika (20.8.2026) */
.lang-switch {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    background: var(--bg-2);
    border-radius: var(--r-full);
}

.lang-switch a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 26px;
    padding: 0 var(--s-2);
    border-radius: var(--r-full);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--ink-3);
    text-decoration: none;
    transition: background .16s var(--ease), color .16s var(--ease);
}

.lang-switch a:hover {
    color: var(--ink);
}

.lang-switch a.is-active {
    background: var(--ink);
    color: #fff;
}

@media (max-width: 620px) {
    .lang-switch a {
        min-width: 26px;
        height: 24px;
        padding: 0 6px;
    }
}

.main-navi {
    flex: 1;
    display: flex;
    justify-content: center;
}

ul.navigation {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin: 0;
    max-width: 100%;
}

/* na ožjih zaslonih raje vodoravni drsnik kot prelom v dve vrstici */
@media (max-width: 1340px) {
    .main-navi {
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .main-navi::-webkit-scrollbar {
        display: none;
    }

    ul.navigation {
        justify-content: flex-start;
    }
}

ul.navigation > li {
    position: relative;
    margin: 0;
    list-style: none;
}

ul.navigation > li > a {
    display: block;
    padding: var(--s-2) 10px;
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: -.005em;
    color: var(--ink-2);
    white-space: nowrap;
}

ul.navigation > li > a:hover {
    color: var(--ink);
    background: var(--bg-2);
}

ul.navigation > li.act > a {
    color: var(--ink);
    font-weight: 600;
}

ul.navigation > li.act > a::after {
    content: "";
    display: block;
    height: 2px;
    margin-top: 3px;
    border-radius: 2px;
    background: var(--brand);
}

/* spustni podmeni */
ul.submenuHover {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, 6px);
    min-width: 210px;
    padding: var(--s-2);
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}

ul.navigation > li:hover ul.submenuHover {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

ul.submenuHover li {
    margin: 0;
    list-style: none;
}

ul.submenuHover a {
    display: block;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    color: var(--ink-2);
}

ul.submenuHover a:hover {
    background: var(--bg-2);
    color: var(--ink);
}

/* mobilni preklopnik */
.responsive-nav {
    display: none;
    cursor: pointer;
    padding: var(--s-2);
}

.responsive-nav img {
    width: 22px;
    height: 22px;
}

.panel {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 90;
    width: min(360px, 86vw);
    padding: var(--s-7) var(--s-5) var(--s-5);
    background: var(--surface);
    box-shadow: var(--shadow-xl);
    transform: translateX(101%);
    transition: transform .28s var(--ease);
    overflow-y: auto;
    /* stolpec (21.8.2026): povezave zgoraj, prijava in jezik na dnu */
    display: flex;
    flex-direction: column;
}

.panel.panelVis {
    transform: translateX(0);
}

.panel ul {
    margin: 0;
}

.panel li {
    list-style: none;
    margin: 0;
    border-bottom: 1px solid var(--line-2);
}

.panel li a {
    display: block;
    padding: var(--s-4) var(--s-1);
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--ink);
}

.panel li a:hover {
    color: var(--brand-dark);
}

.panel .homeImg {
    height: 30px;
    margin-inline: auto;
}

/* prekrivalo za predal in panel */
.overLay {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(18, 21, 26, .42);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .24s var(--ease), visibility .24s;
}

.overLay.is-on {
    opacity: 1;
    visibility: visible;
}

/* drobtinice */
.breadcrumb,
.bread {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    padding-block: var(--s-5) 0;
    font-size: var(--fs-xs);
    color: var(--ink-3);
}

.breadcrumb a:hover,
.bread a:hover {
    color: var(--ink);
}


/* =====================================================================
   08 NOGA
   ===================================================================== */
.footer {
    margin-top: var(--s-9);
    padding: var(--s-8) var(--s-5) var(--s-5);
    background: var(--ink);
    color: rgba(255, 255, 255, .7);
    font-size: var(--fs-sm);
}

.footer > * {
    max-width: var(--container);
    margin-inline: auto;
}

.footer .cInfo {
    color: #fff;
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: -.01em;
    margin-bottom: var(--s-5);
}

.footer .cInfo p {
    font-size: var(--fs-sm);
    font-weight: 400;
    color: rgba(255, 255, 255, .65);
    margin: var(--s-2) 0 0;
}

.footer .fNavi {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-4);
    padding-bottom: var(--s-6);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    line-height: 2;
}

.footer .fNavi a {
    color: rgba(255, 255, 255, .7);
}

.footer .fNavi a:hover {
    color: #fff;
}

.footer .social {
    display: flex;
    gap: var(--s-3);
    padding-block: var(--s-5);
}

.footer .social a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, .08);
    transition: background .18s var(--ease);
}

.footer .social a:hover {
    background: rgba(255, 255, 255, .18);
}

.footer .social img {
    width: 17px;
    height: 17px;
    filter: brightness(0) invert(1);
    opacity: .85;
}

.footer .pgEnd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding-top: var(--s-5);
    border-top: 1px solid rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .45);
}

.footer .pgEnd font {
    font-size: var(--fs-xs) !important;
}

.footer .pgEnd a {
    color: rgba(255, 255, 255, .55);
    font-size: var(--fs-xs) !important;
}

.footer .pgEnd a:hover {
    color: #fff;
}

/* gumb na vrh */
#scroller {
    position: fixed;
    right: var(--s-5);
    bottom: var(--s-5);
    z-index: 70;
    display: none;
    width: 42px;
    height: 42px;
    border-radius: var(--r-full);
    background: var(--surface) url(../images/_body/top.svg) center/16px no-repeat;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    cursor: pointer;
}

#scroller:hover {
    border-color: var(--ink);
}

/* piškotkov trak */
.cookie-info,
#cookieInfo {
    position: fixed;
    left: 50%;
    bottom: var(--s-4);
    transform: translateX(-50%);
    z-index: 75;
    width: min(760px, calc(100% - 32px));
    padding: var(--s-4) var(--s-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-lg);
    font-size: var(--fs-sm);
    color: var(--ink-2);
    text-align: center;
}


/* =====================================================================
   09 DOMAČA STRAN
   ===================================================================== */
/* ODSTRANJENO 20.8.2026: tu je bil star blok `.hero` / `.hero-inner`,
   ki ga nobena predloga ni uporabljala (mrtva koda iz prve prenove).
   Ko je hero slider dobil `class="hero"`, je `display:grid` in
   `.hero img { position:absolute }` iz tega bloka razbil postavitev —
   rezine so se skrčile na širino 0. Dejanska pravila so v razdelku 09b. */

/* pas z zaupanjem */
.trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-5);
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--s-6) var(--s-5);
}

.trust > div,
.quaters > div {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ink-2);
}

.trust img,
.quaters img {
    width: 24px;
    height: 24px;
    flex: none;
}

/* izpostavljene kategorije */
.izpostave,
.cat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--s-4);
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--s-5);
}

.cat-tile {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--bg-2);
}

.cat-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--ease);
}

.cat-tile:hover img {
    transform: scale(1.04);
}

.cat-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(18, 21, 26, .6) 0%, rgba(18, 21, 26, 0) 55%);
}

.cat-tile span {
    position: absolute;
    left: var(--s-4);
    bottom: var(--s-4);
    z-index: 2;
    color: #fff;
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: -.01em;
}


/* =====================================================================
   10 KATALOG
   ===================================================================== */
.catalog-head {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--s-6) var(--s-5) var(--s-5);
    text-align: center;
}

.catalog-head h1 {
    font-size: clamp(1.75rem, 3.5vw, var(--fs-3xl));
    letter-spacing: -.03em;
}

.catalog-head .lead {
    max-width: 620px;
    margin: var(--s-3) auto 0;
    color: var(--ink-3);
}

/* filtri */
/* OPOMBA: ta blok povozi poznejsi razdelek »17.4 filtri« na koncu datoteke.
   Prave vrednosti so tam. */
.filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-2);
    max-width: var(--container);
    margin: 0 auto var(--s-6);
    padding-inline: var(--s-5);
}

.filters .filter a,
.filter-chip {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 var(--s-5);
    border: 1px solid var(--line);
    border-radius: var(--r-full);
    background: var(--surface);
    font-size: var(--fs-sm);
    font-weight: 500;
    white-space: nowrap;
    color: var(--ink-2);
    transition: all .16s var(--ease);
}

.filters .filter a:hover {
    border-color: var(--ink);
    color: var(--ink);
}

.filters .filter.actF a {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

/* mreža izdelkov */
.product-list,
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--s-5);
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--s-5);
}

/* kartica izdelka */
.product-item {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}

.product-item:hover {
    border-color: var(--line);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.product-item-image {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--bg-2);
    overflow: hidden;
}

.product-item-image a {
    display: block;
    height: 100%;
}

.product-item-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--s-4);
    transition: transform .45s var(--ease);
}

.product-item:hover .product-item-image img {
    transform: scale(1.05);
}

/* oznake */
.product-item .akc,
.product-item .status,
.badge {
    position: absolute;
    top: var(--s-3);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 var(--s-3);
    border-radius: var(--r-full);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .01em;
}

.product-item .akc,
.badge-sale {
    right: var(--s-3);
    background: var(--sale);
    color: #fff;
}

.product-item .status,
.badge-status {
    left: var(--s-3);
    background: var(--ink);
    color: #fff;
}

.product-item-details {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--s-2);
    padding: var(--s-4);
}

.product-title-info h3 {
    font-size: var(--fs-base);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.005em;
}

.product-title-info h3 a:hover {
    color: var(--brand-dark);
}

/* šifra je za kupca šum — skrita, ostane za SEO/branje */
.product-title-info small {
    display: none;
}

.product-price {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    margin-top: auto;
    padding-top: var(--s-2);
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.product-price .old,
.product-price s,
.staraCena {
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--ink-4);
    text-decoration: line-through;
}

/* hitro dodajanje na kartici */
.product-item .quick-add {
    display: flex;
    gap: var(--s-2);
    margin-top: var(--s-2);
}

.product-item .quick-add .btn {
    flex: 1;
    height: 40px;
    font-size: var(--fs-sm);
}

.product-item .button-min {
    height: 40px;
    font-size: var(--fs-sm);
    width: 100%;
}

/* prazen rezultat */
.empty-state {
    max-width: 460px;
    margin: var(--s-8) auto;
    text-align: center;
    color: var(--ink-3);
}


/* =====================================================================
   11 STRAN IZDELKA
   ===================================================================== */
.product-show {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: var(--s-8);
    max-width: var(--container);
    margin: var(--s-6) auto 0;
    padding-inline: var(--s-5);
    align-items: start;
}

.showImg {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.showImg > a,
.showImg img {
    display: block;
    width: 100%;
}

.showImg img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    padding: var(--s-6);
}

.showImg .akc,
.showImg .status {
    position: absolute;
    top: var(--s-4);
}

.showImg .akc {
    right: var(--s-4);
    background: var(--sale);
    color: #fff;
    padding: 0 var(--s-3);
    height: 26px;
    display: inline-flex;
    align-items: center;
    border-radius: var(--r-full);
    font-size: var(--fs-xs);
    font-weight: 600;
    z-index: 3;
}

.showImg .status {
    left: var(--s-4);
    background: var(--ink);
    color: #fff;
    padding: 0 var(--s-3);
    height: 26px;
    display: inline-flex;
    align-items: center;
    border-radius: var(--r-full);
    font-size: var(--fs-xs);
    font-weight: 600;
    z-index: 3;
}

/* galerija sličic */
.gallery,
.showImg .gallery {
    display: flex;
    gap: var(--s-2);
    padding: 0 var(--s-4) var(--s-4);
}

.gallery a,
.gallery img {
    width: 64px;
    height: 64px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    object-fit: contain;
    background: var(--surface);
    padding: 4px;
}

.gallery a:hover img {
    border-color: var(--ink);
}

.showDesc {
    padding-top: var(--s-2);
}

.showDesc h1 {
    font-size: clamp(1.5rem, 3vw, var(--fs-2xl));
    letter-spacing: -.03em;
    margin-bottom: var(--s-3);
}

.showDesc > span {
    font-size: var(--fs-sm);
    color: var(--ink-3);
    margin-right: var(--s-1);
}

.showDesc-price {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    margin: var(--s-4) 0;
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-2xl);
    font-weight: 600;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.showDesc-price .staraCena,
.showDesc-price s {
    font-size: var(--fs-lg);
    font-weight: 400;
    color: var(--ink-4);
    text-decoration: line-through;
}

/* izbira velikosti */

/* Stran izdelka izpiše <div class="product-options"><h4>Izberi velikost</h4>…>.
   Ta sklop prej ni imel sloga — h4 je dobil privzeto velikost brskalnika (16 px,
   krepko) in privzete odmike, zato je bil naslov prevelik in sklop stisnjen. */
.product-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    margin: var(--s-5) 0 var(--s-6);
}

.product-options h4 {
    flex: 0 0 100%;
    margin: 0 0 var(--s-1);
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .01em;
    color: var(--ink-3);
}

/* razmik med gumbi vodi mreža (gap), ne več lastni odmiki gumba */
.product-options .choose-option {
    margin: 0;
}

.velikosti,
.size-picker {
    margin-bottom: var(--s-5);
}

.velikosti > label,
.size-picker > label {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ink-2);
    margin-bottom: var(--s-2);
    display: block;
}

.choose-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    height: 42px;
    margin: 0 var(--s-2) var(--s-2) 0;
    padding: 0 var(--s-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ink-2);
    cursor: pointer;
    transition: all .16s var(--ease);
}

.choose-option:hover {
    border-color: var(--ink-4);
    color: var(--ink);
}

.choose-option.actOpt {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

/* količina + dodaj */
.form-add .cFld,
.qty-row {
    display: flex;
    gap: var(--s-3);
    align-items: stretch;
}

.kolFlex,
.qty-stepper {
    display: inline-flex;
    align-items: center;
    height: 46px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-full);
    overflow: hidden;
    flex: none;
}

.kolFlex .add,
.kolFlex .minus,
.qty-stepper button {
    display: grid;
    place-items: center;
    width: 42px;
    height: 100%;
    cursor: pointer;
    color: var(--ink-2);
    font-size: var(--fs-lg);
    line-height: 1;
    transition: background .16s var(--ease);
    user-select: none;
}

.kolFlex .add:hover,
.kolFlex .minus:hover,
.qty-stepper button:hover {
    background: var(--bg-2);
    color: var(--ink);
}

.kolFlex img {
    width: 11px;
    opacity: .6;
}

/* v izvornem HTML je "add" (gor) pred "minus" (dol) — vizualno obrnemo */
.kolFlex {
    flex-direction: row-reverse;
}

.product-qty,
.qty-stepper input {
    width: 46px;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: center;
    font-size: var(--fs-base);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.product-qty:focus {
    box-shadow: none;
}

.form-add .cFld > div:last-child {
    flex: 1;
}

.adToBasket {
    width: 100%;
}

/* zaloga */
.no-stock {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin-top: var(--s-4);
    padding: var(--s-1) var(--s-3);
    border-radius: var(--r-full);
    background: var(--err-tint);
    color: var(--err);
    font-size: var(--fs-sm);
    font-weight: 500;
}

.no-stock.on-stock {
    background: var(--ok-tint);
    color: var(--ok);
}

.showDesc .tJust {
    margin-top: var(--s-6);
    padding-top: var(--s-5);
    border-top: 1px solid var(--line);
}

/* Vrstica zaloge + rok dobave: prej sta se stiskali v isto višino brez zraka. */
.showDesc .no-stock + span,
.showDesc .no-stock ~ span {
    margin-left: var(--s-3);
}

.showDesc form + div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-3);
    margin-top: var(--s-4);
}

.showDesc form + div .no-stock {
    margin-top: 0;
}

/* Prednosti na strani izdelka stojijo v ožjem stolpcu (~530 px). Štirje
   stolpci so tam pomenili ~120 px na postavko in besedilo v treh vrsticah,
   zato jih tu prelomimo v 2 × 2 in odstranimo odmike, ki veljajo za
   celoštranski pas na vstopni strani. */
.showDesc .benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-4) var(--s-5);
    max-width: none;
    margin: var(--s-6) 0 0;
    padding: var(--s-5) 0 0;
    border-top: 1px solid var(--line);
    border-bottom: 0;
}


/* =====================================================================
   12 KOŠARICA — stranski predal
   ===================================================================== */
.basketPanel {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 95;
    display: flex;
    flex-direction: column;
    width: min(420px, 92vw);
    background: var(--surface);
    box-shadow: var(--shadow-xl);
    transform: translateX(101%);
    transition: transform .3s var(--ease);
}

.basketPanel.basketVis {
    transform: translateX(0);
}

.bakset-flex {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.basket-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-5);
    border-bottom: 1px solid var(--line);
}

.basket-head h3 {
    font-size: var(--fs-lg);
}

.close-side {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--r-full);
    font-size: 22px;
    line-height: 1;
    color: var(--ink-3);
    cursor: pointer;
    transition: background .16s var(--ease), color .16s var(--ease);
}

.close-side:hover {
    background: var(--bg-2);
    color: var(--ink);
}

.appender {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--s-4) var(--s-5);
}

.side-items {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: var(--s-3);
    align-items: center;
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--line-2);
}

.side-items:last-child {
    border-bottom: 0;
}

.side-items img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    background: var(--bg-2);
    border-radius: var(--r-sm);
    padding: var(--s-1);
}

.side-items h3 {
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.35;
}

.side-items h5 {
    font-size: var(--fs-xs);
    font-weight: 400;
    color: var(--ink-3);
    margin-top: 2px;
}

.side-items strong {
    display: block;
    margin-top: var(--s-1);
    font-size: var(--fs-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.side-items .remove-item {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--r-full);
    cursor: pointer;
    color: var(--ink-4);
    transition: background .16s var(--ease), color .16s var(--ease);
}

.side-items .remove-item:hover {
    background: var(--err-tint);
    color: var(--err);
}

.side-items .remove-item img {
    width: 13px;
    height: 13px;
    background: none;
    padding: 0;
}

.basket-foot {
    padding: var(--s-5);
    border-top: 1px solid var(--line);
    background: var(--bg);
}

.basket-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--s-4);
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.basket-total span:first-child {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ink-3);
    letter-spacing: 0;
}

.basket-foot .sideBtn {
    width: 100%;
}

.basket-foot .sideBtn + .sideBtn {
    margin-top: var(--s-2);
}

.basket-empty {
    display: grid;
    place-items: center;
    gap: var(--s-3);
    height: 100%;
    text-align: center;
    color: var(--ink-3);
    font-size: var(--fs-sm);
}


/* =====================================================================
   13 TOAST OBVESTILA
   ===================================================================== */
/* SPREMEMBA 20.8.2026: toast je bil zgoraj DESNO in se je prekrival z ikono
   košarice. Zdaj je sredinsko zgoraj, animacija pa gre navzdol (prej z desne —
   pri sredinski postavitvi bi se translateX tepel s centriranjem). */
.toast-wrap {
    position: fixed;
    top: calc(var(--header-h) + 46px);
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    z-index: 120;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    width: min(400px, calc(100vw - 32px));
    pointer-events: none;
}

.toast {
    display: flex;
    /* 21.8.2026: sredinska poravnava — naslov je bil pri enovrstičnem
       obvestilu nekaj pik višje od središča ikone in gumba za zapiranje */
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    width: 100%;
    opacity: 0;
    transform: translateY(-12px) scale(.98);
    transition: opacity .26s var(--ease), transform .26s var(--ease);
}

.toast.is-in {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.toast.is-out {
    opacity: 0;
    transform: translateY(-12px) scale(.98);
}

.toast-ico {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: var(--r-full);
    background: var(--ok-tint);
    color: var(--ok);
    font-size: 15px;
    font-weight: 700;
}

.toast--err .toast-ico {
    background: var(--err-tint);
    color: var(--err);
}

.toast-body {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: -.005em;
}

.toast-text {
    font-size: var(--fs-xs);
    color: var(--ink-3);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.toast-thumb {
    width: 40px;
    height: 40px;
    flex: none;
    object-fit: contain;
    background: var(--bg-2);
    border-radius: var(--r-sm);
    padding: 2px;
}

.toast-close {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: var(--r-full);
    color: var(--ink-4);
    font-size: 15px;
    line-height: 1;
}

.toast-close:hover {
    background: var(--bg-2);
    color: var(--ink);
}


/* =====================================================================
   14 BLAGAJNA — en korak
   ===================================================================== */
.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
    gap: var(--s-7);
    align-items: start;
    max-width: var(--container);
    margin: var(--s-6) auto var(--s-9);
    padding-inline: var(--s-5);
}

.checkout-head {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
    flex-wrap: wrap;
    margin-bottom: var(--s-2);
}

.checkout-head h1 {
    font-size: var(--fs-2xl);
    letter-spacing: -.03em;
}

.co-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--s-5);
    margin-bottom: var(--s-4);
}

.co-card > h2,
.co-title {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: -.01em;
    margin-bottom: var(--s-4);
}

.co-step {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: var(--r-full);
    background: var(--ink);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 600;
}

/* izdelki v blagajni */
.co-line {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: var(--s-4);
    align-items: center;
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--line-2);
}

.co-line:first-of-type {
    padding-top: 0;
}

.co-line:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
}

.co-line img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    background: var(--bg-2);
    border-radius: var(--r-sm);
    padding: var(--s-1);
}

.co-line-name {
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.4;
}

.co-line-meta {
    font-size: var(--fs-xs);
    color: var(--ink-3);
    margin-top: 2px;
}

.co-line-right {
    display: flex;
    align-items: center;
    gap: var(--s-4);
}

.co-line-price {
    min-width: 84px;
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* možnosti dostave in plačila kot kartice */
.opt-list {
    display: grid;
    gap: var(--s-2);
}

.opt {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    cursor: pointer;
    transition: border-color .16s var(--ease), background .16s var(--ease);
}

.opt:hover {
    border-color: var(--ink-4);
}

.opt input[type=radio] {
    flex: none;
}

.opt.is-active {
    border-color: var(--ink);
    background: var(--bg-2);
}

.opt.is-disabled {
    opacity: .45;
    pointer-events: none;
}

.opt-main {
    flex: 1;
    min-width: 0;
}

.opt-name {
    display: block;
    font-size: var(--fs-base);
    font-weight: 500;
}

.opt-sub {
    display: block;
    font-size: var(--fs-xs);
    color: var(--ink-3);
    margin-top: 2px;
    line-height: 1.4;
}

.opt-price {
    font-size: var(--fs-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* povzetek — lepljiv */
.co-summary {
    position: sticky;
    top: calc(var(--header-h) + var(--s-4));
}

.summary,
.full-summary {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--s-5);
}

.summary > div,
.sum-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-2) 0;
    font-size: var(--fs-sm);
    color: var(--ink-2);
}

.summary > div p {
    margin: 0;
}

.summary > div p:last-child,
.sum-row span:last-child {
    font-weight: 500;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.summary > div:last-child,
.sum-row.total {
    margin-top: var(--s-3);
    padding-top: var(--s-4);
    border-top: 1px solid var(--line);
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ink);
}

.summary > div:last-child p {
    font-weight: 600;
    font-size: var(--fs-lg);
}

.sum-row.is-free span:last-child {
    color: var(--ok);
}

.co-summary .btn {
    width: 100%;
    height: 52px;
    margin-top: var(--s-4);
    font-size: var(--fs-md);
    font-weight: 600;
}

.co-note {
    margin-top: var(--s-3);
    font-size: var(--fs-xs);
    color: var(--ink-3);
    text-align: center;
}

/* koda za popust */
.cupon-row {
    display: flex;
    gap: var(--s-2);
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px solid var(--line-2);
}

.cupon-row input {
    flex: 1;
    height: 42px;
}

.cupon-btn {
    height: 42px;
    flex: none;
}

/* stanje med osveževanjem */
.is-recalc {
    opacity: .5;
    transition: opacity .2s var(--ease);
    pointer-events: none;
}

/* zahvalna stran */
.thank-you-page {
    max-width: 560px;
    margin: var(--s-9) auto;
    padding-inline: var(--s-5);
    text-align: center;
}

.thank-you-page img {
    width: 84px;
    margin: 0 auto var(--s-5);
}

/* prijava / registracija na blagajni */
.login-wrap {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--s-5);
}

.login-split {
    display: grid;
    gap: var(--s-4);
}


/* =====================================================================
   16 ODZIVNOST
   ===================================================================== */
@media (max-width: 1080px) {
    .product-show {
        grid-template-columns: 1fr;
        gap: var(--s-6);
    }

    .checkout {
        grid-template-columns: 1fr;
        gap: var(--s-5);
    }

    .co-summary {
        position: static;
    }
}

@media (max-width: 900px) {
    :root {
        --header-h: 64px;
    }

    .main-navi {
        display: none;
    }

    .responsive-nav {
        display: block;
        margin-left: auto;
    }

    .header {
        gap: var(--s-4);
    }

    .trust {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s-4);
    }

    .product-list,
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: var(--s-4);
    }
}

@media (max-width: 620px) {
    :root {
        --s-9: 64px;
        --s-8: 48px;
    }

    .topLine {
        height: 34px;
        padding-inline: var(--s-4);
        font-size: 11px;
    }

    .topLine .moto {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .topLine .up {
        gap: var(--s-3);
    }

    .cMarg,
    .container,
    .product-list,
    .products-grid,
    .checkout,
    .catalog-head,
    .filters,
    .product-show,
    .content_view,
    .login-wrap {
        padding-inline: var(--s-4);
    }

    .header {
        padding-inline: var(--s-4);
    }

    .header .logo img {
        height: 28px;
    }

    h1 {
        font-size: var(--fs-2xl);
    }

    .product-list,
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s-3);
    }

    .product-item-details {
        padding: var(--s-3);
    }

    .product-title-info h3 {
        font-size: var(--fs-sm);
    }

    .product-price {
        font-size: var(--fs-md);
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    /* 21.8.2026: slika v svojem stolpcu (čez vse vrstice), NAZIV pa sega
       do konca kartice — cena mu ne krade širine, ker stoji šele v vrstici
       s količino in »Briši«. Srednji <div> se razpusti z display:contents,
       da lahko njegove otroke postavimo po mreži. */
    .co-line {
        grid-template-columns: 56px 1fr auto;
        gap: var(--s-2) var(--s-3);
    }

    .co-line > div:not(.co-line-right) {
        display: contents;
    }

    .co-line img,
    .co-line .side-noimg {
        grid-column: 1;
        grid-row: 1 / span 3;
        align-self: start;
        width: 56px;
        height: 56px;
    }

    .co-line .co-line-name {
        grid-column: 2 / -1;
        grid-row: 1;
    }

    .co-line .co-line-meta {
        grid-column: 2 / -1;
        grid-row: 2;
        margin: 0;
    }

    .co-line .side-qty {
        grid-column: 2;
        grid-row: 3;
        align-self: center;
        margin-top: 0;
    }

    .co-line-right {
        grid-column: 3;
        grid-row: 3;
        align-self: center;
        padding-bottom: 0;
    }

    /* Na telefonu toasta NE prikazujemo (20.8.2026, na vašo željo) —
       na majhnem zaslonu je bil bolj v napoto kot v pomoč.
       Izjema so SPOROČILA O NAPAKI: če bi skrili še ta, bi npr. »Najprej
       izberite velikost« ostalo brez vidnega odziva. */
    .toast:not(.toast--err) {
        display: none;
    }

    .footer .pgEnd {
        justify-content: center;
        text-align: center;
    }

    .trust {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* =====================================================================
   12b KOŠARICA — dodatki prenove
   ===================================================================== */
body.no-scroll {
    overflow: hidden;
}

/* pas do brezplačne poštnine */
.free-ship-bar {
    padding: var(--s-3) var(--s-5);
    background: var(--brand-tint);
    border-bottom: 1px solid var(--line-2);
}

.free-ship-bar[hidden] {
    display: none;
}

.free-ship-txt {
    font-size: var(--fs-xs);
    color: var(--ink-2);
    margin-bottom: var(--s-2);
}

.free-ship-txt strong {
    color: var(--ink);
}

.free-ship-track {
    height: 4px;
    border-radius: var(--r-full);
    background: rgba(7, 160, 220, .22);
    overflow: hidden;
}

.free-ship-track span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: var(--r-full);
    background: var(--brand);
    transition: width .45s var(--ease);
}

.free-ship-bar.is-free {
    background: var(--ok-tint);
}

.free-ship-bar.is-free .free-ship-track {
    background: rgba(21, 128, 61, .2);
}

.free-ship-bar.is-free .free-ship-track span {
    width: 100% !important;
    background: var(--ok);
}

/* količina v vrstici predala */
.side-qty {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-top: var(--s-2);
}

.side-qty button {
    width: 26px;
    height: 26px;
    flex: none;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink-2);
    font-size: var(--fs-sm);
    line-height: 1;
    transition: border-color .16s var(--ease), background .16s var(--ease);
}

.side-qty button:hover {
    border-color: var(--ink);
    background: var(--bg-2);
    color: var(--ink);
}

.side-qty .qty-val {
    width: 38px;
    height: 26px;
    padding: 0;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: var(--fs-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.side-qty strong {
    margin: 0 0 0 auto;
    font-size: var(--fs-sm);
}

.side-noimg {
    width: 64px;
    height: 64px;
    border-radius: var(--r-sm);
    background: var(--bg-2);
}

/* toast pod glavo, ko ni vrhnjega traku */
@media (min-width: 621px) {
    .toast-wrap {
        top: calc(var(--header-h) + 52px);
    }
}


/* =====================================================================
   09b DOMAČA STRAN — dejanski razredi iz homePageScripts / productsScripts
   ===================================================================== */

/* =====================================================================
   HERO SLIDER — prenovljen 20.8.2026
   Slike so BREZ vpisanega besedila; naslov, opis in gumb pridejo iz baze
   in se izrišejo čez sliko. Na telefonu se rezine listajo s potegom.
   ===================================================================== */
.hero {
    position: relative;
    max-width: 1920px;
    margin-inline: auto;
    background: var(--bg-2);
    overflow: hidden;
}

/* Vodoravni drsnik s scroll-snap: poteg na telefonu deluje BREZ JS,
   ker ga opravi brskalnik sam — JS doda samo pikice, puščice in samodejno
   listanje. Če JS ne bi deloval, slider še vedno deluje. */
.hero-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.hero-track::-webkit-scrollbar {
    display: none;
}

.hero-slide {
    position: relative;
    flex: 0 0 100%;
    min-width: 100%;
    scroll-snap-align: center;
}

.hero-media {
    position: relative;
    line-height: 0;
}

.hero-media img,
.hero-slide .hero-img {
    width: 100%;
    height: clamp(340px, 52vw, 620px);
    object-fit: cover;
}

/* Temna prevleka samo toliko, da je besedilo berljivo na katerikoli sliki.
   Gradient je z leve, ker je besedilo levo poravnano. */
.hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(10, 14, 20, .68) 0%,
        rgba(10, 14, 20, .42) 42%,
        rgba(10, 14, 20, .06) 72%,
        rgba(10, 14, 20, 0) 100%);
}

.hero-copy {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: var(--container);
    padding-inline: var(--s-6);
    color: #fff;
    pointer-events: none;
}

.hero-copy > * {
    pointer-events: auto;
}

.hero-title {
    margin: 0 0 var(--s-3);
    max-width: 16ch;
    font-size: clamp(2rem, 5.2vw, 3.5rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.03em;
    color: #fff;
    text-wrap: balance;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}

.hero-text {
    max-width: 46ch;
    margin-bottom: var(--s-5);
    font-size: clamp(1rem, 1.6vw, var(--fs-lg));
    line-height: 1.5;
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 1px 16px rgba(0, 0, 0, .35);
}

.hero-text p {
    margin: 0;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 var(--s-7);
    background: #fff;
    border: 1px solid #fff;
    border-radius: var(--r-full);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink);
    transition: background .16s var(--ease), color .16s var(--ease), transform .16s var(--ease);
}

.hero-btn:hover {
    background: transparent;
    color: #fff;
    transform: translateY(-1px);
}

/* --- krmila (samo pri več rezinah) --- */
.hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, .9);
    border: 0;
    border-radius: var(--r-full);
    cursor: pointer;
    opacity: 0;
    transition: opacity .18s var(--ease), background .16s var(--ease);
}

.hero:hover .hero-nav,
.hero-nav:focus-visible {
    opacity: 1;
}

.hero-nav:hover {
    background: #fff;
}

.hero-nav::before {
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
}

.hero-prev {
    left: var(--s-5);
}

.hero-prev::before {
    transform: rotate(135deg);
    margin-left: 3px;
}

.hero-next {
    right: var(--s-5);
}

.hero-next::before {
    transform: rotate(-45deg);
    margin-right: 3px;
}

.hero-dots {
    position: absolute;
    left: 50%;
    bottom: var(--s-5);
    transform: translateX(-50%);
    display: flex;
    gap: var(--s-2);
}

.hero-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    background: rgba(255, 255, 255, .45);
    border: 0;
    border-radius: var(--r-full);
    cursor: pointer;
    transition: width .2s var(--ease), background .2s var(--ease);
}

.hero-dot.is-active {
    width: 26px;
    background: #fff;
}

@media (max-width: 900px) {
    .hero-copy {
        padding-inline: var(--s-5);
    }

    /* na dotik puščice nimajo smisla — tam se lista s potegom */
    .hero-nav {
        display: none;
    }
}

@media (max-width: 620px) {
    .hero-media::after {
        /* na ozkem zaslonu besedilo pokriva večji del slike,
           zato prevleka od spodaj namesto z leve */
        background: linear-gradient(180deg,
            rgba(10, 14, 20, .15) 0%,
            rgba(10, 14, 20, .45) 45%,
            rgba(10, 14, 20, .78) 100%);
    }

    .hero-copy {
        top: auto;
        bottom: 0;
        transform: translateX(-50%);
        padding-block: var(--s-6) var(--s-8);
    }

    .hero-title {
        max-width: none;
    }

    .hero-btn {
        height: 46px;
        padding-inline: var(--s-5);
    }

    .hero-dots {
        bottom: var(--s-3);
    }
}

/* kdor ima izklopljene animacije, ne dobi samodejnega listanja (glej hero.js) */
@media (prefers-reduced-motion: reduce) {
    .hero-track {
        scroll-behavior: auto;
    }
}

/* prednosti / zaupanje */
.benefits {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-5);
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--s-6) var(--s-5);
    border-bottom: 1px solid var(--line);
}

.benefit {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-width: 0;
}

.benefit img {
    width: 26px;
    height: 26px;
    flex: none;
    object-fit: contain;
}

.benefit h3 {
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0;
    color: var(--ink-2);
}

/* ploščice kategorij */
.categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--s-4);
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--s-5);
}

.category-item {
    position: relative;
    display: block;
    border-radius: var(--r-lg);
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-2);
}

.cat-item-img {
    aspect-ratio: 4 / 5;
    background-size: cover;
    background-position: center;
    transition: transform .5s var(--ease);
}

.category-item:hover .cat-item-img {
    transform: scale(1.05);
}

.category-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(18, 21, 26, .68) 0%, rgba(18, 21, 26, .05) 58%);
    pointer-events: none;
}

.category-item h3 {
    position: absolute;
    left: var(--s-4);
    right: var(--s-4);
    bottom: var(--s-4);
    z-index: 2;
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: -.01em;
    color: #fff;
}

.category-item h3 a {
    color: #fff;
}


/* =====================================================================
   10b KATALOG — dejanski razredi za oznake in stare cene
   ===================================================================== */
.product-item .disc,
.showImg .disc {
    position: absolute;
    top: var(--s-3);
    right: var(--s-3);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 var(--s-3);
    border-radius: var(--r-full);
    background: var(--sale);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .01em;
}

.product-item .disc p,
.showImg .disc p {
    margin: 0;
}

.product-item .status,
.product-item .statusMain,
.showImg .status,
.showImg .statusMain {
    position: absolute;
    top: var(--s-3);
    left: var(--s-3);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 var(--s-3);
    border-radius: var(--r-full);
    background: var(--ink);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 600;
}

/* barvna ločnica po tipu statusa (12 Novo, 13 Odprodaja, 14 Priporočamo) */
.s13 {
    background: var(--sale) !important;
}

.s14 {
    background: var(--brand) !important;
}

.old-price {
    font-size: var(--fs-sm) !important;
    font-weight: 400;
    color: var(--ink-4);
    text-decoration: line-through;
}

.showDesc-price .old-price {
    font-size: var(--fs-lg) !important;
}

/* .disc na strani izdelka mora biti nad sliko */
.showImg .disc,
.showImg .status,
.showImg .statusMain {
    top: var(--s-4);
}

.showImg .disc {
    right: var(--s-4);
}

.showImg .status,
.showImg .statusMain {
    left: var(--s-4);
}


/* =====================================================================
   08b PIŠKOTKI — dejanski razredi (plugins/jqCookie1)
   ===================================================================== */
.simple-modal {
    position: fixed;
    left: 50%;
    bottom: var(--s-4);
    transform: translateX(-50%);
    z-index: 75;
    width: min(720px, calc(100% - 32px));
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-lg);
}

.simple-modal-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--s-2) var(--s-3);
    padding: var(--s-4) var(--s-5);
    font-size: var(--fs-sm);
    color: var(--ink-2);
    text-align: center;
}

.cookieLink {
    color: var(--ink);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cookieLink:hover {
    color: var(--brand-dark);
}

@media (max-width: 900px) {
    .benefits {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s-4);
    }
}

@media (max-width: 620px) {
    .benefits {
        grid-template-columns: 1fr 1fr;
        padding-inline: var(--s-4);
        gap: var(--s-3);
    }

    .benefit h3 {
        font-size: var(--fs-xs);
    }

    .categories {
        grid-template-columns: 1fr 1fr;
        gap: var(--s-3);
        padding-inline: var(--s-4);
    }

    .category-item h3 {
        font-size: var(--fs-sm);
        left: var(--s-3);
        right: var(--s-3);
        bottom: var(--s-3);
    }
}

.simple-modal-body p {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--ink-2);
    text-align: center;
}


/* =====================================================================
   14b BLAGAJNA v3 — dodatki
   ===================================================================== */
.co-main {
    min-width: 0;
}

.co-hint {
    margin: calc(-1 * var(--s-2)) 0 var(--s-4);
    font-size: var(--fs-sm);
    color: var(--ink-3);
}

/* ---------------------------------------------------------------------
   Prijava na blagajni (20.8.2026)
   Privzeto je nakup kot gost, zato je panel zaprt in vizualno tih —
   ne sme tekmovati z obrazcem za goste pod njim.
   --------------------------------------------------------------------- */
.co-login {
    margin: calc(-1 * var(--s-2)) 0 var(--s-4);
}

.co-login-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-3);
    padding: var(--s-3) var(--s-4);
    background: var(--bg-2);
    border-radius: var(--r);
}

.co-login-q {
    font-size: var(--fs-sm);
    color: var(--ink-2);
}

.co-login-toggle {
    margin-left: auto;
    padding: 0;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.co-login-toggle:hover {
    color: var(--brand);
}

/* puščica pove, da se panel razpre */
.co-login-toggle::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: var(--s-2);
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .18s var(--ease);
}

.co-login-toggle[aria-expanded="true"]::after {
    transform: translateY(1px) rotate(-135deg);
}

.co-login-box {
    padding: var(--s-4);
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 var(--r) var(--r);
}

.co-login-box[hidden] {
    display: none;
}

.co-login-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-3) var(--s-4);
    margin-top: var(--s-4);
}

.co-login-actions .btn {
    min-width: 180px;
}

.co-login-box .err-msg {
    margin-top: var(--s-3);
}

@media (max-width: 520px) {
    .co-login-actions .btn {
        width: 100%;
        min-width: 0;
    }
}

/* ---------------------------------------------------------------------
   Zložen sklop »Podatki o naročniku« (21.8.2026)
   Ko so podatki izpolnjeni, obrazec ni več potreben — ostane vrstica z
   imenom in kontaktom ter gumb za popravek. Stanje vodi checkout.js z
   razredom `is-done`.
   --------------------------------------------------------------------- */
.co-buyer-done {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-3) var(--s-4);
    background: var(--bg-2);
    border-radius: var(--r);
}

.co-buyer.is-done .co-buyer-done {
    display: flex;
}

.co-buyer.is-done > .co-login,
.co-buyer.is-done > #coBuyer,
.co-buyer.is-done > .co-buyer-actions {
    display: none;
}

.co-buyer.is-done .co-title {
    margin-bottom: var(--s-3);
}

.co-buyer-done-txt {
    min-width: 0;
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.co-buyer-done-txt strong {
    display: block;
    color: var(--ink);
    font-weight: 600;
}

.co-buyer-done-txt span {
    display: block;
    color: var(--ink-3);
    overflow-wrap: anywhere;
}

.co-buyer-done .btn-sm {
    flex: none;
}

/* Na ozkem zaslonu se gumb prelomi v svojo vrstico, a ostane majhen in
   poravnan desno — ne raztegne se čez celo kartico. */
@media (max-width: 420px) {
    .co-buyer-done {
        flex-wrap: wrap;
    }

    .co-buyer-done .btn-sm {
        margin-left: auto;
    }
}

/* ---------------------------------------------------------------------
   Gumb »Vnesi podatke« (21.8.2026)
   Vidni zaključek sklopa 2. Loči se od polj s črto zgoraj, da je jasno,
   da zaključuje sklop in ni še eno polje obrazca.
   --------------------------------------------------------------------- */
.co-buyer-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-3);
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px solid var(--line);
}

.co-buyer-actions .btn {
    min-width: 220px;
}

.co-buyer-actions .err-msg[hidden] {
    display: none;
}

@media (max-width: 520px) {
    .co-buyer-actions .btn {
        width: 100%;
        min-width: 0;
    }
}

/* ---------------------------------------------------------------------
   Naslov za dostavo (21.8.2026)
   Privzeto je enak naslovu naročnika — to mora biti razvidno na prvi
   pogled, zato je izpisan v predogledu, ne skrit za praznim potrditvenim
   poljem. Ločen naslov je izbira, ki se odpre pod njim.
   --------------------------------------------------------------------- */
.co-ship-addr {
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px solid var(--line-2);
}

.co-ship-head {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: var(--s-3);
}

.co-ship-same {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    margin-bottom: var(--s-3);
    background: var(--bg-2);
    border-radius: var(--r);
}

.co-ship-same[hidden] {
    display: none;
}

/* kljukica je narisana s CSS — brez dodatne slike */
.co-ship-tick {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border-radius: var(--r-full);
    background: var(--ok);
    position: relative;
}

.co-ship-tick::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 4px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 1.8px 1.8px 0;
    transform: rotate(45deg);
}

.co-ship-same-txt {
    min-width: 0;
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.co-ship-same-txt strong {
    display: block;
    color: var(--ink);
    font-weight: 600;
}

.co-ship-preview {
    display: block;
    color: var(--ink-3);
}

.co-shipfields {
    margin-top: var(--s-3);
}

.co-shipfields[hidden],
.co-company[hidden] {
    display: none;
}

/* ---------------------------------------------------------------------
   Zaklenjena sklopa »Dostava« in »Plačilo« (21.8.2026)
   Vidna sta šele, ko so podatki o naročniku izpolnjeni ali je kupec
   prijavljen. Zaklep vodi checkout.js z razredom `is-locked`.
   --------------------------------------------------------------------- */
.co-lock-note {
    display: none;
    width: 100%;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    background: var(--bg-2);
    border: 1px dashed var(--line);
    border-radius: var(--r);
    font-family: inherit;
    font-size: var(--fs-sm);
    color: var(--ink-3);
    text-align: left;
    cursor: pointer;
}

/* ključavnica kot vgrajen SVG — brez dodatne zahteve na strežnik */
.co-lock-note::before {
    content: "";
    flex: none;
    width: 15px;
    height: 15px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 16 16' fill='none' stroke='%239ca3af' stroke-width='1.5'%3E%3Crect x='3' y='7' width='10' height='7' rx='1.5'/%3E%3Cpath d='M5.5 7V5a2.5 2.5 0 015 0v2'/%3E%3C/svg%3E") no-repeat center / contain;
}

.co-lock-note:hover {
    color: var(--ink-2);
    border-color: var(--ink-4);
}

.co-lockable.is-locked .co-lock-note {
    display: flex;
}

.co-lockable.is-locked .co-lock-body {
    display: none;
}

.co-lockable.is-locked .co-step {
    background: var(--ink-4);
}

.co-lockable.is-locked .co-title {
    color: var(--ink-3);
    margin-bottom: var(--s-3);
}

/* ---------------------------------------------------------------------
   Mobilna vrstica s skupnim zneskom in gumbom (21.8.2026)
   Pod 1080 px povzetek ni več lepljiv (razdelek 16), zato znesek in gumb
   prevzame fiksna vrstica na dnu okna.
   --------------------------------------------------------------------- */
.co-mobilebar {
    display: none;
}

@media (max-width: 1080px) {
    /* PREDELANO 21.8.2026: namig ni več stisnjen ob znesek — je svoja
       vrstica čez celo širino nad zneskom in gumbom. */
    .co-mobilebar {
        display: flex;
        flex-direction: column;
        gap: var(--s-3);
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 85;
        padding: var(--s-3) var(--s-4);
        padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom));
        background: var(--surface);
        border-top: 1px solid var(--line);
        box-shadow: 0 -6px 24px rgba(0, 0, 0, .08);
    }

    .co-mobilebar-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--s-4);
    }

    .co-mobilebar-sum {
        display: flex;
        flex-direction: column;
        min-width: 0;
        line-height: 1.3;
    }

    .co-mobilebar-sum > span {
        font-size: var(--fs-xs);
        color: var(--ink-3);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Namig čez celo širino — gumb, ki odpelje na manjkajoči korak.
       Rahlo obarvana podlaga s ključavnico, da ne izgleda kot napaka. */
    .co-mobilebar .co-bar-hint {
        display: none;
        align-items: center;
        justify-content: center;
        gap: var(--s-2);
        width: 100%;
        padding: var(--s-2) var(--s-3);
        border: 0;
        border-radius: var(--r-sm);
        background: var(--brand-tint);
        color: var(--ink-2);
        font-family: inherit;
        font-size: var(--fs-xs);
        font-weight: 500;
        line-height: 1.4;
        text-align: center;
        cursor: pointer;
    }

    .co-mobilebar .co-bar-hint::before {
        content: "";
        flex: none;
        width: 12px;
        height: 12px;
        background: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center/contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center/contain no-repeat;
    }

    .co-mobilebar.is-locked .co-bar-hint {
        display: inline-flex;
    }

    .co-mobilebar-sum strong {
        font-size: var(--fs-lg);
        font-weight: 600;
        letter-spacing: -.02em;
        font-variant-numeric: tabular-nums;
    }

    .co-mobilebar .btn {
        flex: none;
        height: 48px;
        padding-inline: var(--s-5);
        font-weight: 600;
    }

    /* prostor, da vrstica ne prekrije noge strani */
    body.co-bar-on {
        padding-bottom: 84px;
    }

    /* z namigom (zaklenjeno stanje) je vrstica za eno vrstico višja */
    body.co-bar-on.co-bar-tall {
        padding-bottom: 120px;
    }

    /* gumb v povzetku bi bil podvojen — na dnu ga prevzame vrstica */
    .co-extra #coSubmit {
        display: none;
    }

    .co-extra .co-note {
        margin-top: var(--s-4);
    }
}

@media (max-width: 420px) {
    .co-mobilebar .btn {
        padding-inline: var(--s-4);
        font-size: var(--fs-sm);
    }
}

.co-extra {
    margin-top: var(--s-4);
}

.co-extra .check-row {
    margin-bottom: var(--s-3);
}

.co-err {
    margin-top: var(--s-3);
    text-align: center;
}

.co-err[hidden] {
    display: none;
}

.co-line .side-qty .link-quiet {
    margin-left: var(--s-2);
}

.sum-tax span {
    color: var(--ink-3) !important;
    font-weight: 400 !important;
    font-size: var(--fs-xs);
}

/* radio v možnostih naj bo klikljiv po celi kartici */
.opt {
    user-select: none;
}

.opt.is-disabled .opt-name::after {
    content: " — ni na voljo";
    font-size: var(--fs-xs);
    color: var(--ink-4);
}

/* velikosti na kartici izdelka */
.product-sizes {
    font-size: var(--fs-xs);
    color: var(--ink-3);
    letter-spacing: .01em;
}


/* =====================================================================
   16b ODZIVNOST — popravki po testiranju na 414 px
   ===================================================================== */
html {
    /* glej opombo pri `body` — `clip` ne razbije `position: sticky` */
    overflow-x: hidden;
    overflow-x: clip;
}

/* .cMarg je pogosto zunanji ovoj, notranji bloki naj ne dodajajo še svojega odmika */
.cMarg > .filters,
.cMarg > .product-list,
.cMarg > .products-grid,
.cMarg > .catalog-head {
    padding-inline: 0;
}

@media (max-width: 900px) {
    /* dodatna sporočila v vrhnjem traku na ozkih zaslonih niso potrebna */
    .top-usp {
        display: none;
    }

    .topLine {
        justify-content: center;
    }

    .topLine .moto {
        min-width: 0;
    }
}

@media (max-width: 620px) {
    .breadCrumbs {
        font-size: var(--fs-xs);
        color: var(--ink-3);
    }

    .filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        scrollbar-width: none;
        -ms-overflow-style: none;
        margin-inline: calc(-1 * var(--s-4));
        padding-inline: var(--s-4);
    }

    .filters::-webkit-scrollbar {
        display: none;
    }

    .filters .filter {
        flex: none;
    }
}


/* =====================================================================
   17 DOPOLNITVE 20.8.2026
   (izbira velikosti na kartici, slike brez belega ozadja,
    drobtinice, prenovljeni filtri)
   ===================================================================== */

/* --- 17.1 slike izdelkov brez belega okvirja -------------------------
   Fotografije izdelkov so posnete na beli podlagi. mix-blend-mode:multiply
   belino "zlije" s podlago kartice, zato bel kvadrat izgine, izdelek pa
   ostane nedotaknjen. Deluje na vseh sodobnih brskalnikih. */
.product-item-image {
    background: var(--bg-2);
}

.product-item-image img {
    mix-blend-mode: multiply;
    padding: var(--s-3);
}

.showImg {
    background: var(--bg-2);
}

.showImg img {
    mix-blend-mode: multiply;
}

.side-items img,
.co-line img,
.toast-thumb {
    mix-blend-mode: multiply;
}

/* --- 17.2 izbira velikosti na kartici -------------------------------- */
.size-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1);
    margin-top: var(--s-1);
}

.size-chip {
    min-width: 52px;
    height: 30px;
    padding: 0 var(--s-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    transition: border-color .14s var(--ease), background .14s var(--ease), color .14s var(--ease);
}

.size-chip:hover {
    border-color: var(--ink-4);
    color: var(--ink);
}

.size-chip.is-sel {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

/* opozorilo, ko kupec pritisne "v košarico" brez izbrane velikosti */
.product-item.needs-size .size-row {
    animation: shake .4s var(--ease);
}

.product-item.needs-size .size-chip {
    border-color: var(--err);
    color: var(--err);
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}

.product-item .quick-add-btn {
    width: 100%;
    height: 40px;
    margin-top: var(--s-1);
    font-size: var(--fs-sm);
}

.out-of-stock {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 var(--s-3);
    border-radius: var(--r-full);
    background: var(--bg-2);
    color: var(--ink-3);
    font-size: var(--fs-xs);
    font-weight: 500;
}

/* --- 17.3 drobtinice -------------------------------------------------
   Nova oznaka: <nav class="breadCrumbs"><ol><li>…  */
.breadCrumbs {
    margin: var(--s-5) 0 var(--s-4);
}

.breadCrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-1) 0;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-xs);
    color: var(--ink-3);
}

.breadCrumbs li {
    display: inline-flex;
    align-items: center;
    margin: 0;
    list-style: none;
}

.breadCrumbs li + li::before {
    content: "";
    width: 5px;
    height: 5px;
    margin: 0 var(--s-2);
    border-top: 1.4px solid var(--ink-4);
    border-right: 1.4px solid var(--ink-4);
    transform: rotate(45deg);
    flex: none;
}

.breadCrumbs a {
    color: var(--ink-3);
    padding: 2px 0;
}

.breadCrumbs a:hover {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.breadCrumbs [aria-current="page"] {
    color: var(--ink);
    font-weight: 500;
    max-width: 46ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- 17.4 filtri ----------------------------------------------------- */
/* SPREMEMBA 20.8.2026: čipi so bili stisnjeni skupaj in tesno pod naslovom —
   zdaj imajo več zraka (večji razmik, višji čipi, večji odmik od naslova). */
.filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--s-3);
    margin: var(--s-5) auto var(--s-8);
}

.filters .filter {
    display: inline-flex;
}

.filters .filter a,
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    height: 42px;
    padding: 0 var(--s-5);
    border: 1px solid var(--line);
    border-radius: var(--r-full);
    background: var(--surface);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ink-2);
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
    transition: border-color .16s var(--ease), color .16s var(--ease),
                background .16s var(--ease), transform .12s var(--ease), box-shadow .16s var(--ease);
}

.filters .filter a:hover {
    border-color: var(--ink-4);
    color: var(--ink);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.filters .filter.actF a {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    box-shadow: var(--shadow);
}

/* kljukica ob aktivnem filtru */
.filters .filter.actF a::before {
    content: "";
    width: 13px;
    height: 13px;
    flex: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* "Vse" — ponastavitev filtra */
.filters .filter-all a {
    background: transparent;
    border-style: dashed;
    box-shadow: none;
}

.filters .filter-all a:hover {
    border-style: solid;
}

/* --- 17.5 galerija na strani izdelka (product-details-gallery) -------- */
.product-details-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    padding: 0 var(--s-4) var(--s-4);
}

.product-details-gallery a {
    display: block;
    width: 72px;
    height: 72px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--surface);
    transition: border-color .16s var(--ease);
}

.product-details-gallery a:hover {
    border-color: var(--ink);
}

.product-details-gallery img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    mix-blend-mode: multiply;
}

/* prva sličica je hkrati glavna slika — skrijemo jo iz galerije */
.showImg > .product-details-gallery a:first-child {
    display: none;
}


/* =====================================================================
   18 FILTRI NA TELEFONU — poteg (20.8.2026)

   Mora biti NA KONCU datoteke: razdelek »17.4 filtri« je brez media
   poizvedbe in stoji za starim blokom @media (max-width: 620px), zato ga je
   ta povozil — čipi so se na telefonu lomili v tri vrstice namesto da bi se
   listali. Media poizvedba ne poveča specificnosti, zato odloca vrstni red.

   Poteg opravi brskalnik sam (overflow-x + scroll-snap), JS ni potreben.
   ===================================================================== */
@media (max-width: 720px) {
    .filters {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        margin-block: var(--s-4) var(--s-6);
        /* cipi se lahko dotaknejo roba zaslona, a nista odrezana prvi in zadnji */
        margin-inline: calc(-1 * var(--s-4));
        padding-inline: var(--s-4);
        padding-block: 3px;
    }

    .filters::-webkit-scrollbar {
        display: none;
    }

    .filters .filter {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
}

/* =====================================================================
   19 NAKUPNI GUMBI V MODRI (21.8.2026)

   Na željo naročnika so gumbi nakupne poti v barvi znamke (--brand),
   ne v črnilu: »V košarico« v seznamu in na strani izdelka, ikona
   košarice v glavi ter »Oddaj naročilo« na blagajni (v povzetku in v
   mobilni vrstici — oba imata razred .co-submit).

   Gumb »Na blagajno« v predalu košarice je bil moder že prej
   (.btn-brand v sideBasket.php), zato je nakupna pot zdaj enotna.

   Ostali gumbi ostajajo črni — obrazci, prijava, »Vnesi podatke«,
   popup. Če bi bilo modro vse, modra ne bi več pomenila »nakup«.

   Blok mora stati NA KONCU datoteke: primarna pravila v razdelku 05
   imajo enako specifičnost, zato odloča vrstni red (isto opozorilo
   kot pri razdelku 18).
   ===================================================================== */
.adToBasket,
input[type=button].adToBasket,
.product-item .quick-add-btn,
.co-submit {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.adToBasket:hover,
input[type=button].adToBasket:hover,
.product-item .quick-add-btn:hover,
.co-submit:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
    box-shadow: var(--shadow);
}

/* ikona košarice v glavi (tudi mobilna, .basketReveal.sBag) */
.sBag {
    background: var(--brand);
}

.sBag:hover {
    background: var(--brand-dark);
    color: #fff;
}

/* =====================================================================
   20 MOBILNE DODELAVE (21.8.2026)

   Mora stati NA KONCU datoteke — popravlja pravila iz razdelkov 07, 16
   in 17, ki imajo enako specifičnost, zato odloča vrstni red (ista
   omejitev kot pri razdelkih 18 in 19).
   ===================================================================== */

/* --- 20.1 Izbira jezika v vrhnjem traku ------------------------------
   NAPAKA: razdelek 17 je pod 900 px skril VSE `.top-usp` — tudi gumb za
   jezik in državo, ki ta razred deli. Na telefonu torej ni bilo nobene
   poti do drugega jezika. Besedili (dostava, vračilo) ostaneta skriti,
   gumb pa ne. */
@media (max-width: 900px) {
    .top-usp.top-pref {
        display: inline-flex;
    }

    /* moto levo, gumb desno — ne več na sredino */
    .topLine {
        justify-content: space-between;
        gap: var(--s-3);
    }
}

@media (max-width: 620px) {
    /* ime države zavzame preveč; ostaneta globus in oznaka jezika */
    .top-pref [data-pref="country"] {
        display: none;
    }
}

/* --- 20.2 Mobilni meni ----------------------------------------------- */

/* glava menija: logo in × poravnana, ločnica pod njima */
.panel {
    padding-top: 0;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    margin: 0 calc(-1 * var(--s-5)) var(--s-2);
    padding: 0 var(--s-5);
    border-bottom: 1px solid var(--line-2);
    flex: none;
}

.panel-head .close-side {
    font-size: 26px;
    line-height: 1;
    color: var(--ink-3);
    cursor: pointer;
    padding: var(--s-2);
    margin-right: calc(-1 * var(--s-2));
}

.panel-head .close-side:hover {
    color: var(--ink);
}

/* povezave: večja tarča za prst in puščica ob desnem robu */
.panel ul {
    flex: 1 1 auto;
}

.panel li:last-child {
    border-bottom: 0;
}

.panel li > div {
    position: relative;
}

.panel li a {
    padding-block: 14px;
}

.panel li > div > a::after {
    content: "";
    position: absolute;
    right: var(--s-1);
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 1.6px solid var(--ink-4, #b9bec7);
    border-top: 1.6px solid var(--ink-4, #b9bec7);
    transform: translateY(-50%) rotate(45deg);
}

/* podkategorije (rwdMore) puščico rišejo same — tam vodilne ne rabimo.
   (Trenutno navigacija podkategorij nima; pravilo je obramba za naprej.) */
.panel li > div:has(+ .rwdMore) > a::after {
    content: none;
}

/* noga: prijava in izbira jezika */
.panel-foot {
    flex: none;
    margin: var(--s-4) calc(-1 * var(--s-5)) calc(-1 * var(--s-5));
    padding: var(--s-3) var(--s-5) calc(var(--s-4) + env(safe-area-inset-bottom));
    background: var(--bg-2);
    border-top: 1px solid var(--line-2);
}

.panel-foot-link {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    padding: var(--s-3) var(--s-1);
    border: 0;
    background: none;
    font-family: inherit;
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

.panel-foot-link:hover {
    color: var(--brand-dark);
}

.panel-foot-link .ico-globe {
    width: 17px;
    height: 17px;
}

.panel-foot-link[hidden] {
    display: none;
}

/* --- 20.3 Piškotkovni trak nad mobilno vrstico blagajne --------------
   Vrstica z zneskom in gumbom (z-index 85) je trak (z-index 75) na
   blagajni prekrila. Trak se dvigne nad njo; višini sledita odmikom
   telesa, ki ju nastavljata co-bar-on/co-bar-tall. */
@media (max-width: 1080px) {
    /* trak je #cookieInfo — ID prebije razredni selektor, zato mora biti tu */
    body.co-bar-on .simple-modal,
    body.co-bar-on #cookieInfo {
        bottom: 96px;
    }

    body.co-bar-on.co-bar-tall .simple-modal,
    body.co-bar-on.co-bar-tall #cookieInfo {
        bottom: 130px;
    }
}

/* --- 20.4 Stran izdelka: zaloga in rok dobave ------------------------ */
.delivery-note {
    display: inline-flex;
    align-items: baseline;
    gap: var(--s-1);
    font-size: var(--fs-sm);
    color: var(--ink-2);
    white-space: nowrap;
}

.delivery-note b {
    font-weight: 500;
    color: var(--ink-3);
}

/* --- 20.5 Ikona menija (21.8.2026) -----------------------------------
   Prej sliki v <p> s privzetimi odmiki — od tod čudna poravnava. Zdaj so
   tri črtice narisane s CSS; ob odprtem meniju se zlijejo v ×. */
.responsive-nav {
    padding: 0;
    border: 0;
    background: none;
}

@media (max-width: 900px) {
    .responsive-nav {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        margin-left: auto;
        border-radius: var(--r-full);
        cursor: pointer;
        transition: background .16s var(--ease);
    }

    .responsive-nav:hover {
        background: var(--bg-2);
    }
}

.nav-ico {
    position: relative;
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transition: background .18s var(--ease);
}

.nav-ico::before,
.nav-ico::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform .22s var(--ease);
}

.nav-ico::before { top: -7px; }
.nav-ico::after  { top: 7px; }

.start-nav.is-open .nav-ico {
    background: transparent;
}

.start-nav.is-open .nav-ico::before {
    transform: translateY(7px) rotate(45deg);
}

.start-nav.is-open .nav-ico::after {
    transform: translateY(-7px) rotate(-45deg);
}

/* --- 20.6 Pogoji poslovanja v sklopu 2 (21.8.2026) ------------------- */
.co-terms {
    margin-top: var(--s-4);
}

.co-terms input.is-invalid {
    outline: 2px solid var(--err);
    outline-offset: 1px;
}

.co-terms input.is-invalid + label {
    color: var(--err);
}

/* --- 20.7 Zložen povzetek naročnika (21.8.2026) ----------------------
   Zelena kljukica pove, da je korak opravljen; gumb za popravek je tih,
   s svinčnikom, in OSTANE v isti vrstici tudi na telefonu (prejšnje
   pravilo pri 420 px ga je lomilo v svojo vrstico). */
.co-buyer-done {
    flex-wrap: nowrap;
    align-items: center;
}

/* besedilo zapolni sredino — kljukica levo, gumb desno */
.co-buyer-done-txt {
    flex: 1 1 auto;
}

/* e-naslov naj se ne lomi sredi besede — na ozkem zaslonu gre v svojo
   vrstico cel (prejšnji overflow-wrap:anywhere ga je rezal poljubno) */
.co-buyer-done-txt span {
    overflow-wrap: break-word;
}

.co-done-ico {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ok);
    position: relative;
}

.co-done-ico::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}

.co-edit-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    height: 34px;
    padding: 0 var(--s-3);
    border: 1px solid var(--line);
    border-radius: var(--r-full);
    background: var(--surface);
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--ink-2);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .16s var(--ease), color .16s var(--ease), background .16s var(--ease);
}

.co-edit-btn:hover {
    border-color: var(--ink);
    color: var(--ink);
    background: var(--bg-2);
}

.ico-pencil {
    flex: none;
    width: 12px;
    height: 12px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Na telefonu gumb obdrži samo svinčnik — besedilo bi sicer e-naslov
   stisnilo v lomljenje sredi besede. Napis ostane v DOM (bralniki). */
@media (max-width: 480px) {
    .co-edit-btn {
        font-size: 0;
        gap: 0;
        width: 34px;
        padding: 0;
        justify-content: center;
    }

    .co-edit-btn .ico-pencil {
        width: 14px;
        height: 14px;
    }
}

/* Potrditveni polji v obrazcu (podjetje, pogoji): razmik vodi SAMO mreža,
   da sta vrstici enakomerno pod poljem za telefon — ločnico pred gumbom
   nariše že .co-buyer-actions. */
#coBuyer .check-row {
    margin-bottom: 0;
    align-items: center;
}

.co-terms {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* --- 20.8 Vrstica se umakne pravemu gumbu (21.8.2026) ----------------
   Ko je kartica z gumbom »Oddaj naročilo« na zaslonu, fiksna vrstica
   zdrsne dol, gumb v kartici pa se pokaže (checkout.js, body.co-bar-off).
   V zaklenjenem stanju vrstica ostane — nosi namig. */
@media (max-width: 1080px) {
    .co-mobilebar {
        transition: transform .25s var(--ease);
    }

    body.co-bar-off .co-mobilebar {
        transform: translateY(110%);
    }

    body.co-bar-off .co-extra #coSubmit {
        display: flex;
    }
}

/* --- 20.9 »Briši« kot ikona v kotu kartice (21.8.2026) ---------------
   Namesto podčrtane besede ob količini je koš, pripet v desni zgornji
   kot vrstice. Napis ostane v DOM (bralniki zaslona), skrije ga font-size:0. */
.co-line {
    position: relative;
}

.co-line .co-remove {
    position: absolute;
    top: var(--s-4);
    right: 0;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 0;
    color: var(--ink-3);
    cursor: pointer;
    transition: background .16s var(--ease), color .16s var(--ease);
}

.co-line:first-of-type .co-remove {
    top: 0;
}

.co-line .co-remove::before {
    content: "";
    width: 15px;
    height: 15px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E") center/contain no-repeat;
}

.co-line .co-remove:hover {
    background: var(--err-tint);
    color: var(--err);
}

/* naziv naj se ne podvleče pod koš */
.co-line .co-line-name {
    padding-right: 34px;
}

/* =====================================================================
   21 KONTAKTNA STRAN (21.8.2026)

   Obrazec v kartici levo, kontaktni podatki in podatki podjetja desno.
   Vir podatkov je tabela `company` (Admin → Podatki podjetja) — glej
   sites/kontakt.php.
   ===================================================================== */
.contact-page {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--s-5) var(--s-8);
}

.contact-head {
    padding: var(--s-6) 0 var(--s-6);
}

.contact-head .lead {
    max-width: 560px;
    margin-top: var(--s-3);
    color: var(--ink-3);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--s-5);
    align-items: start;
}

.contact-card {
    padding: var(--s-6);
}

.contact-card-title {
    font-size: var(--fs-lg);
    letter-spacing: -.015em;
    margin-bottom: var(--s-5);
}

.contact-card .form-actions {
    margin-top: var(--s-5);
    padding-top: var(--s-5);
    border-top: 1px solid var(--line-2);
}

.contact-card .form-actions .btn {
    min-width: 220px;
}

/* stolpec s podatki */
.contact-aside {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
    /* na široki mizi naj sledi drsenju, kot povzetek na blagajni */
    position: sticky;
    top: calc(var(--header-h) + var(--s-5));
}

.contact-row {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--line-2);
    color: var(--ink);
    font-weight: 500;
}

.contact-row:last-of-type {
    border-bottom: 0;
}

a.contact-row:hover {
    color: var(--brand-dark);
}

.contact-ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand-tint);
}

.contact-ico::after {
    content: "";
    width: 16px;
    height: 16px;
    background: var(--brand-dark);
}

.contact-ico-phone::after {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.contact-ico-mail::after {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E") center/contain no-repeat;
}

.contact-ico-pin::after {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
}

.contact-note {
    margin-top: var(--s-4);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-sm);
    background: var(--ok-tint);
    color: var(--ok);
    font-size: var(--fs-sm);
    font-weight: 500;
}

.contact-social {
    display: flex;
    gap: var(--s-3);
    margin-top: var(--s-4);
}

.contact-social a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* ikoni sta beli (kot v nogi), zato temna podlaga */
    background: var(--ink);
    transition: background .16s var(--ease), transform .12s var(--ease);
}

.contact-social a:hover {
    background: var(--brand);
    transform: translateY(-1px);
}

.contact-social img {
    width: 18px;
    height: 18px;
}

/* podatki podjetja — drobni tisk, brez kartice, da ne tekmuje s kontakti */
.contact-legal {
    padding: 0 var(--s-2);
    font-size: var(--fs-sm);
    color: var(--ink-3);
}

.contact-legal h3 {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-3);
    margin-bottom: var(--s-3);
}

.contact-legal-name {
    color: var(--ink-2);
    line-height: 1.6;
    margin-bottom: var(--s-3);
}

.contact-legal dl {
    margin: 0;
}

.contact-legal dl > div {
    display: flex;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-1) 0;
}

.contact-legal dt {
    color: var(--ink-4, #8a919c);
}

.contact-legal dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-aside {
        position: static;
    }
}

@media (max-width: 620px) {
    .contact-page {
        padding-inline: var(--s-4);
    }

    .contact-card {
        padding: var(--s-5) var(--s-4);
    }

    .contact-card .form-actions .btn {
        width: 100%;
        min-width: 0;
    }
}

/* --- 21.x Obvestilo o preklicanem plačilu (Stripe Checkout, 21.8.2026) ---
   Stoji ZNOTRAJ mreže .checkout, zato mora čez oba stolpca — sicer zasede
   prvo celico in porine vsebino v desni stolpec. */
.co-cancel-note {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border: 1px solid rgba(180, 83, 9, .25);
    border-radius: var(--r-sm);
    background: #fdf3e7;
    color: #b45309;
    font-size: var(--fs-sm);
    font-weight: 500;
}

.co-cancel-note::before {
    content: "";
    flex: none;
    width: 15px;
    height: 15px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* --- 21.y Koda popusta na blagajni (21.8.2026) ----------------------- */
.co-cupon { margin-bottom: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line-2); }
.co-cupon-form { display: flex; gap: var(--s-2); }
.co-cupon-form input { flex: 1 1 auto; min-width: 0; }
.co-cupon-form .btn-ghost { flex: none; height: 46px; padding: 0 var(--s-4); border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; }
.co-cupon .err-msg { margin-top: var(--s-2); }
.co-cupon-ok { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-sm); background: var(--ok-tint); }
.co-cupon-tick { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ok); position: relative; }
.co-cupon-tick::after { content: ""; position: absolute; inset: 0; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M20 6 9 17l-5-5%27/%3E%3C/svg%3E") center/11px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M20 6 9 17l-5-5%27/%3E%3C/svg%3E") center/11px no-repeat; }
.co-cupon-txt { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); line-height: 1.4; }
.co-cupon-txt strong { display: block; color: var(--ok); }
.co-cupon-txt span { color: var(--ink-2); letter-spacing: .04em; }
.co-cupon-remove { flex: none; width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; color: var(--ink-3); font-size: 17px; line-height: 1; cursor: pointer; }
.co-cupon-remove:hover { background: rgba(0,0,0,.06); color: var(--ink); }
.co-cupon-gifts { margin-top: var(--s-3); }
.co-cupon-gifts-title { font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--s-2); }
.co-cupon-gift { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: var(--s-2); font-size: var(--fs-sm); cursor: pointer; }
.co-cupon-gift.is-active { border-color: var(--ok); background: var(--ok-tint); }
.co-cupon-gift-name { flex: 1 1 auto; min-width: 0; }
.co-cupon-gift-free { flex: none; color: var(--ok); font-weight: 600; }

/* prečrtana cena kosa ob kuponu (21.8.2026) */
.co-line-old { display: block; font-size: var(--fs-xs); color: var(--ink-4, #9aa1ab); text-decoration: line-through; font-weight: 400; }
.sum-discount span:first-child { max-width: 60%; }

/* Zrak med košem in ceno v vrstici (21.8.2026): cena v desnem stolpcu se
   poravna pod ikono z odmikom, ne več tik ob njej. Na telefonu ima cena
   svoje mesto v vrstici s količino, zato tam ostane po starem. */
@media (min-width: 621px) {
    .co-line-right { align-self: start; padding-top: 40px; padding-bottom: 0; }
}

/* ==========================================================================
   22. OBVESTILNE STRANI — 404, prazna košarica, zahvalna sporočila (21.8.2026)
   Markup: sites/404.php, sites/ui.php, sites/checkout.php (empty_basket).
   Kartica nadgradi osnovni .thank-you-page iz razdelka zgoraj.
   ========================================================================== */

.thank-you-page {
    max-width: 640px;
    margin: var(--s-8) auto;
    padding: var(--s-7) var(--s-6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    color: var(--ink-2);
    line-height: 1.65;
}

/* duhec na zahvalnih straneh — v mehkem krogu barve znamke */
.thank-you-page > img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    padding: 24px;
    background: var(--brand-tint);
    border-radius: 50%;
    margin: 0 auto var(--s-5);
}

.thank-you-page h1 {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.25;
    margin: 0 0 var(--s-4);
}

.thank-you-page p {
    margin: 0 0 var(--s-3);
}

.thank-you-page a:not([class]) {
    color: var(--brand-dark);
    font-weight: 500;
}

/* vrstica z gumbi pod sporočilom */
.notice-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    justify-content: center;
    margin-top: var(--s-6);
}

/* 404 — velika tipografska koda v barvi znamke */
.notice-code {
    font-size: clamp(72px, 16vw, 128px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: var(--s-4);
}

.notice-404 .lost-links {
    margin-top: var(--s-6);
    padding-top: var(--s-6);
    border-top: 1px solid var(--line-2);
}

/* prazna košarica — ikona v krogu (inline SVG namesto duhca) */
.notice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    background: var(--brand-tint);
    color: var(--brand-dark);
    border-radius: 50%;
    margin-bottom: var(--s-5);
}

/* mreža kategorij pod kartico prazne košarice — čez polno širino */
.notice-cats {
    max-width: var(--container);
    margin: var(--s-6) auto var(--s-8);
    padding-inline: var(--s-5);
}

@media (max-width: 640px) {
    .thank-you-page {
        margin: var(--s-5) var(--s-4);
        padding: var(--s-6) var(--s-4);
    }

    .thank-you-page > img,
    .notice-icon {
        width: 76px;
        height: 76px;
    }

    .thank-you-page > img {
        padding: 18px;
    }

    .thank-you-page h1 {
        font-size: var(--fs-xl);
    }

    .notice-actions .btn {
        width: 100%;
        justify-content: center;
    }
}


/* =====================================================================
   23 NOGA — prenova 22.8.2026

   Razdelek mora ostati NA KONCU datoteke: pravila spodaj popravljajo
   razdelek 08, ki ima enako specifičnost, zato odloča vrstni red — isto
   opozorilo kot pri razdelkih 18–20.
   ===================================================================== */

.footer {
    margin-top: var(--s-9);
    padding: 0 var(--s-5) var(--s-5);
    background: var(--ink);
    color: rgba(255, 255, 255, .62);
    font-size: var(--fs-sm);
    line-height: 1.65;
}

/* ---------- 23.1 pas prednosti ---------- */

.foot-usp {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-5) var(--s-6);
    padding: var(--s-7) 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

/* kadar država nima praga ali roka dobave, sta postavki dve ali tri —
   auto-fit poskrbi, da se preostale enakomerno razporedijo */
.foot-usp:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, 1fr);
}

.foot-usp-item {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
}

.foot-usp-ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, .07);
    color: var(--brand);
}

.foot-usp-ico svg {
    width: 21px;
    height: 21px;
}

.foot-usp-txt {
    display: block;
    min-width: 0;
}

.foot-usp-txt strong {
    display: block;
    color: #fff;
    font-size: var(--fs-base);
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.35;
}

.foot-usp-txt span {
    display: block;
    margin-top: 2px;
    color: rgba(255, 255, 255, .5);
    font-size: var(--fs-xs);
    line-height: 1.5;
}

/* ---------- 23.2 stolpci ---------- */

.foot-main {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: var(--s-6);
    padding: var(--s-7) 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.foot-brand .foot-logo {
    display: inline-block;
}

.foot-brand .foot-logo img {
    width: 122px;
    height: auto;
    /* logotip je dvobarven (#373435 + #13A3DD) — temni del bi na črnini
       izginil, zato ga v nogi izrišemo v beli */
    filter: brightness(0) invert(1);
}

.foot-opis {
    margin: var(--s-4) 0 0;
    max-width: 34ch;
    color: rgba(255, 255, 255, .55);
    font-size: var(--fs-sm);
}

.foot-col h3 {
    margin: 0 0 var(--s-4);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

/* getExtNavigation() izpiše gole <a>; stolpec iz njih naredi CSS,
   zato funkcije ni bilo treba spreminjati */
.foot-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
}

.foot-links a {
    position: relative;
    color: rgba(255, 255, 255, .62);
    transition: color .16s var(--ease);
}

.foot-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -2px;
    height: 1px;
    background: currentColor;
    transition: right .22s var(--ease);
}

.foot-links a:hover {
    color: #fff;
}

.foot-links a:hover::after {
    right: 0;
}

.foot-naslov {
    margin: var(--s-4) 0 0;
    color: rgba(255, 255, 255, .45);
    font-size: var(--fs-xs);
    line-height: 1.7;
}

.footer .social {
    gap: var(--s-2);
    padding-block: var(--s-5) 0;
}

.footer .social a {
    width: 36px;
    height: 36px;
}

/* ---------- 23.3 načini plačila ---------- */

.foot-pay {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3) var(--s-5);
    padding: var(--s-5) 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.foot-pay-label {
    color: rgba(255, 255, 255, .45);
    font-size: var(--fs-xs);
    letter-spacing: .07em;
    text-transform: uppercase;
}

.pay-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pay-chip {
    display: grid;
    place-items: center;
    width: 52px;
    height: 34px;
    padding: 0 var(--s-1);
    border-radius: var(--r-sm);
    background: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .3);
}

.pay-chip svg {
    width: 100%;
    height: 20px;
    display: block;
}

/* Apple Pay in Google Pay sta širša — v znaku je še beseda »Pay« */
.pay-chip:nth-child(4),
.pay-chip:nth-child(5) {
    width: 62px;
}

/* predračun in povzetje sta risana s črto, ne barvna znaka */
.pay-chip-line {
    color: var(--ink-2);
}

/* ---------- 23.4 podpis ---------- */

.footer .pgEnd {
    padding-top: var(--s-5);
    border-top: 0;
    color: rgba(255, 255, 255, .38);
}

.foot-legal {
    font-size: var(--fs-xs);
}

/* ---------- 23.5 odzivnost ---------- */

@media (max-width: 1080px) {
    /* trije stolpci in znamka čez vse tri — pri dveh bi Kontakt ostal sam v
       tretji vrstici in poleg njega bi zijala prazna celica */
    .foot-main {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--s-6) var(--s-5);
    }

    .foot-brand {
        grid-column: 1 / -1;
    }

    .foot-opis {
        max-width: 52ch;
    }
}

@media (max-width: 860px) {
    .foot-usp {
        grid-template-columns: 1fr 1fr;
        gap: var(--s-5);
        padding: var(--s-6) 0;
    }

    .foot-usp:has(> :nth-child(3):last-child) {
        grid-template-columns: 1fr 1fr;
    }

    .foot-main {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .footer {
        padding-inline: var(--s-4);
    }

    .foot-usp {
        grid-template-columns: 1fr;
        gap: var(--s-4);
    }

    .foot-usp:has(> :nth-child(3):last-child) {
        grid-template-columns: 1fr;
    }

    .foot-usp-ico {
        width: 36px;
        height: 36px;
    }

    .foot-usp-ico svg {
        width: 18px;
        height: 18px;
    }

    .foot-main {
        grid-template-columns: 1fr;
        gap: var(--s-6);
        padding: var(--s-6) 0;
    }

    .foot-opis {
        max-width: none;
    }

    .foot-pay {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--s-3);
    }

    .footer .pgEnd {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--s-2);
    }
}


/* =====================================================================
   24 VSTOPNA STRAN — izpostavljeni sekciji in kategorije v eni vrsti
   (22.8.2026)

   Razdelek mora ostati NA KONCU datoteke: pravila za .categories
   popravljajo razdelek 09b z enako specifičnostjo, zato odloča vrstni red.
   ===================================================================== */

/* ---------- 24.1 izpostavljeni sekciji ---------- */

.features {
    max-width: var(--container);
    margin: var(--s-9) auto 0;
    padding-inline: var(--s-5);
    display: grid;
    gap: var(--s-8);
}

.feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--s-7);
}

/* vsaka druga sekcija zamenja stolpca — slika gre na desno */
.feature-alt .feature-media {
    order: 2;
}

.feature-media {
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--bg-2);
    line-height: 0;
}

.feature-media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .6s var(--ease);
}

.feature:hover .feature-media img {
    transform: scale(1.03);
}

.feature-eyebrow {
    display: inline-block;
    margin-bottom: var(--s-3);
    padding: 5px 10px;
    border-radius: var(--r-full);
    background: var(--brand-tint);
    color: var(--brand-dark);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.feature-title {
    margin: 0 0 var(--s-4);
    font-size: var(--fs-2xl);
    font-weight: 650;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.feature-text {
    color: var(--ink-2);
    font-size: var(--fs-base);
    line-height: 1.7;
}

.feature-text p {
    margin: 0 0 var(--s-4);
}

/* seznam prednosti — kljukica namesto pike, da sekcija bere kot argument */
.feature-text ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--s-2);
}

.feature-text li {
    position: relative;
    padding-left: 28px;
    color: var(--ink-2);
}

.feature-text li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .45em;
    width: 16px;
    height: 16px;
    border-radius: var(--r-full);
    background: var(--brand-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230684b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8.4 2.6 2.6L12 5.6'/%3E%3C/svg%3E") center/11px no-repeat;
}

.feature-btn {
    margin-top: var(--s-5);
}

/* ---------- 24.2 kategorije v eni vrsti ---------- */

.cat-rail {
    position: relative;
    max-width: var(--container);
    margin-inline: auto;
}

/* Mreža → vodoravni drsnik. scroll-snap poskrbi za poteg na telefonu
   brez ene same vrstice JS. */
.categories {
    --cat-per: 5;
    display: flex;
    grid-template-columns: none;
    gap: var(--s-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-inline: var(--s-5);
    padding-bottom: var(--s-1);
}

.categories::-webkit-scrollbar {
    display: none;
}

.category-item {
    flex: 0 0 calc((100% - (var(--cat-per) - 1) * var(--s-4)) / var(--cat-per));
    scroll-snap-align: start;
}

/* puščici — samo na namizju; na dotik se lista s potegom.
   Skripta ju odkrije šele, ko je kaj za listati (shop.js). */
.cat-nav {
    position: absolute;
    top: calc(50% - 20px);
    z-index: 3;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: var(--r-full);
    background: var(--surface);
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: border-color .16s var(--ease), opacity .16s var(--ease);
}

.cat-nav[hidden] {
    display: none;
}

.cat-nav::before {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
}

.cat-prev {
    left: 4px;
}

.cat-prev::before {
    transform: rotate(135deg);
    margin-left: 3px;
}

.cat-next {
    right: 4px;
}

.cat-next::before {
    transform: rotate(-45deg);
    margin-right: 3px;
}

.cat-nav:hover {
    border-color: var(--ink);
}

.cat-nav:disabled {
    opacity: .35;
    cursor: default;
    border-color: var(--line);
}

/* ---------- 24.3 odzivnost ---------- */

@media (max-width: 1200px) {
    .categories {
        --cat-per: 4;
    }
}

@media (max-width: 980px) {
    .feature {
        grid-template-columns: 1fr;
        gap: var(--s-5);
    }

    /* v enem stolpcu je slika vedno prva — zamenjava stolpcev nima smisla */
    .feature-alt .feature-media {
        order: 0;
    }

    .feature-media img {
        aspect-ratio: 16 / 10;
    }

    .categories {
        --cat-per: 3;
    }

    .cat-nav {
        display: none;
    }
}

@media (max-width: 620px) {
    .features {
        margin-top: var(--s-8);
        gap: var(--s-7);
        padding-inline: var(--s-4);
    }

    .feature-title {
        font-size: var(--fs-xl);
    }

    /* pogled na 1,5 kartice pove, da se da potegniti naprej */
    .categories {
        --cat-per: 1.5;
        gap: var(--s-3);
        padding-inline: var(--s-4);
    }

    .category-item {
        flex-basis: calc((100% - .5 * var(--s-3)) / 1.5);
    }
}


/* =====================================================================
   25 ISKANJE, ORODNA VRSTICA SEZNAMA, STRANIČENJE, TABELA VELIKOSTI
   (22.8.2026)

   Razdelek mora ostati NA KONCU datoteke — pravila za `.categories` in
   `.product-options` popravljajo starejša z enako specifičnostjo.
   ===================================================================== */

/* ---------- 25.1 iskanje: ikona v glavi + prekrivno okno ---------- */

/* V glavi je samo ikona — polje je prej stiskalo navigacijo in odrezalo
   logotip. Ikona je prava povezava na `iskanje`, JS jo prestreže. */
.hdr-search-open {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--r-full);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2312151a' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='9' cy='9' r='6'/%3E%3Cpath d='m13.5 13.5 3.5 3.5'/%3E%3C/svg%3E") center/19px no-repeat;
    transition: background-color .15s var(--ease);
}

.hdr-search-open:hover { background-color: var(--bg-2); }

/* prekrivno okno */
.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 120;
}

.search-overlay[hidden] { display: none; }

.so-back {
    position: absolute;
    inset: 0;
    background: rgba(10, 14, 20, .62);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.so-win {
    position: relative;
    width: min(680px, calc(100% - 32px));
    margin: clamp(64px, 14vh, 160px) auto 0;
}

.so-form {
    position: relative;
    display: flex;
}

.so-form input {
    width: 100%;
    height: 60px;
    padding: 0 60px 0 22px;
    border: 0;
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-xl);
    font-size: var(--fs-lg);
    color: var(--ink);
}

.so-form input:focus { outline: none; }

.so-go {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--r-full);
    background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='9' r='6'/%3E%3Cpath d='m13.5 13.5 3.5 3.5'/%3E%3C/svg%3E") center/18px no-repeat;
    cursor: pointer;
}

.so-go:hover { background-color: var(--brand-dark); }

/* predlogi pod poljem */
.hdr-sugg {
    margin-top: var(--s-3);
    max-height: min(52vh, 420px);
    overflow-y: auto;
    background: var(--surface);
    border-radius: var(--r);
    box-shadow: var(--shadow-xl);
}

.hdr-sugg[hidden] { display: none; }

.sugg-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-3);
    padding: 10px 14px;
    border-bottom: 1px solid var(--line-2);
    color: var(--ink);
    font-size: var(--fs-sm);
}

.sugg-item:hover { background: var(--bg-2); }

.sugg-img {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--bg-2);
}

.sugg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
}

.sugg-t {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.35;
}

.sugg-c {
    font-weight: 600;
    white-space: nowrap;
}

.sugg-all {
    display: block;
    padding: 11px 14px;
    text-align: center;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--brand-dark);
}

.sugg-all:hover { background: var(--brand-tint); }

/* ---------- 25.2 stran z zadetki ---------- */

.search-page {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--s-5);
}

.search-page-form {
    display: flex;
    gap: var(--s-3);
    max-width: 560px;
    margin-bottom: var(--s-4);
}

.search-page-form input {
    flex: 1;
    height: 46px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    font-size: var(--fs-base);
}

.search-page-form input:focus { outline: none; border-color: var(--ink); }

.search-count {
    margin: 0 0 var(--s-5);
    color: var(--ink-3);
    font-size: var(--fs-sm);
}

.search-empty {
    margin: 0 0 var(--s-6);
    padding: var(--s-5);
    background: var(--bg-2);
    border-radius: var(--r);
    color: var(--ink-2);
}

/* ---------- 25.3 orodna vrstica seznama: spustna menija ---------- */

.list-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3) var(--s-4);
    max-width: var(--container);
    margin: 0 auto var(--s-4);
    padding: 0 var(--s-5);
}

.lt-drops {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
}

/* <details>/<summary> — meni deluje tudi brez JavaScripta */
.lt-drop {
    position: relative;
}

.lt-drop > summary {
    display: flex;
    align-items: baseline;
    gap: 8px;
    height: 40px;
    padding: 0 38px 0 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-full);
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 15px center no-repeat;
    font-size: var(--fs-sm);
    line-height: 38px;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
    transition: border-color .15s var(--ease);
}

.lt-drop > summary::-webkit-details-marker { display: none; }

.lt-drop > summary:hover { border-color: var(--ink); }

.lt-drop[open] > summary {
    border-color: var(--ink);
    background-color: var(--bg-2);
}

.lt-drop-l {
    color: var(--ink-4);
    font-size: var(--fs-xs);
    letter-spacing: .05em;
    text-transform: uppercase;
}

.lt-drop-v {
    color: var(--ink);
    font-weight: 600;
}

.lt-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;
    min-width: 190px;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-lg);
}

.lt-menu-wide { min-width: 230px; }

.lt-opt {
    display: block;
    padding: 9px 12px;
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    color: var(--ink-2);
    white-space: nowrap;
}

.lt-opt:hover { background: var(--bg-2); color: var(--ink); }

.lt-opt.is-on {
    background: var(--ink);
    color: #fff;
    font-weight: 600;
}

.lt-count {
    font-size: var(--fs-sm);
    color: var(--ink-3);
    white-space: nowrap;
}

.list-empty {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--s-7) var(--s-5);
    text-align: center;
    color: var(--ink-3);
}

/* ---------- 25.4 straničenje ---------- */

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--s-2);
    max-width: var(--container);
    margin: var(--s-6) auto 0;
    padding-inline: var(--s-5);
}

.pager-nums {
    display: flex;
    gap: var(--s-1);
}

.pager-btn,
.pager-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-full);
    background: var(--surface);
    font-size: var(--fs-sm);
    color: var(--ink-2);
}

.pager-num { padding: 0; }

.pager-btn:hover,
.pager-num:hover { border-color: var(--ink); color: var(--ink); }

.pager-num.is-on {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.pager-dots {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    color: var(--ink-4);
}

/* ---------- 25.5 tabela velikosti ---------- */

.po-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    flex-wrap: wrap;
}

.po-head h4 { margin: 0; }

.size-help-open {
    padding: 0;
    border: 0;
    background: none;
    color: var(--brand-dark);
    font-size: var(--fs-sm);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.size-help-open:hover { color: var(--ink); }

.size-help {
    position: fixed;
    inset: 0;
    z-index: 120;
}

.size-help[hidden] { display: none; }

.size-help-back {
    position: absolute;
    inset: 0;
    background: rgba(12, 16, 22, .5);
}

.size-help-win {
    position: relative;
    width: min(440px, calc(100% - 32px));
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    margin: 48px auto;
    padding: var(--s-6);
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xl);
}

.size-help-win h3 {
    margin: 0 0 var(--s-3);
    font-size: var(--fs-xl);
}

.size-help-win p {
    margin: 0 0 var(--s-5);
    color: var(--ink-2);
    font-size: var(--fs-sm);
    line-height: 1.65;
}

.size-help-x {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border: 1px solid var(--line);
    border-radius: var(--r-full);
    background: var(--surface);
    color: var(--ink-3);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}

.size-help-x:hover { border-color: var(--ink); color: var(--ink); }

.size-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.size-table th {
    padding: 0 0 8px;
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-4);
    text-align: left;
}

.size-table td {
    padding: 10px 0;
    border-bottom: 1px solid var(--line-2);
    color: var(--ink);
}

.size-table tr:last-child td { border-bottom: 0; }

/* ---------- 25.6 odzivnost ---------- */

/* Glava je z ikono namesto polja spet štirielementna, zato posebnih pravil
   za prelom vrstice (razdelek 25.7, odstranjen 22.8.2026) ni več treba. */

@media (max-width: 620px) {
    .list-tools {
        gap: var(--s-3);
        padding-inline: var(--s-4);
    }

    /* Meni se odpre pod celo širino, da so možnosti dosegljive s palcem. */
    .lt-drops { flex: 1 1 100%; }

    .lt-drop { flex: 1 1 0; }

    .lt-drop > summary { padding-right: 34px; }

    .lt-menu {
        left: 0;
        right: 0;
        min-width: 0;
    }

    .lt-count { flex: 1 1 100%; }

    .so-win {
        width: calc(100% - 24px);
        margin-top: 96px;   /* pod glavo, da polje ne sede čeznjo */
    }

    .so-form input { height: 54px; font-size: var(--fs-base); }

    .so-go { top: 7px; }

    .search-page { padding-inline: var(--s-4); }

    .search-page-form { flex-direction: column; }
}

/* =====================================================================
   26 POTRDITVENA POLJA IN IZBIRNI GUMBI — enoten videz, 23.8.2026

   Prej je bila vsaka skupina drugačna: sistemska kljukica z `accent-color`
   pri soglasjih, sistemski radio v karticah za dostavo in plačilo, isti
   sistemski radio pa tudi pri izbiri »prijava / nakup kot gost«. Videz se
   je razlikoval med brskalniki in med sklopi.

   Zdaj so trije vzorci, vsi z **ohranjenim sistemskim poljem** (skrito, a
   še vedno v obrazcu, z istim `name`, `id` in `value` — zato se ni bilo
   treba dotakniti nobene skripte niti obdelave na strežniku):

     .pill-group   izbira med kratkimi možnostmi (pilule)
     .switch-row   samostojni da/ne (pill stikalo)
     .check-row    soglasje z daljšim besedilom (isto stikalo, riše ga oznaka)
     .opt          kartica z nazivom, opisom in ceno (pilula z lučko)

   Polja NE skrivamo z `display:none` — tak element izpade iz zaporedja
   tipkovnice in ga bralnik zaslona preskoči. Ostane na mestu, prosojen in
   brez velikosti, zato je še vedno dosegljiv s tabulatorjem; obroč ob
   fokusu nariše soseda oznaka (`:focus-visible + label`).
   ===================================================================== */

.pill-group input[type="radio"],
.pill-group input[type="checkbox"],
.switch-row input[type="checkbox"],
.check-row input[type="checkbox"],
.check-option input[type="checkbox"],
.opt input[type="radio"],
.co-cupon-gift input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

/* ---------- 26.1 pilule (izbira med možnostmi) ---------- */

.pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

.pill-group label {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin: 0 !important;
    padding: 10px 18px;
    border: 1px solid var(--line);
    border-radius: var(--r-full);
    background: var(--surface);
    font-size: var(--fs-base);
    font-weight: 500 !important;
    color: var(--ink-2);
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}

.pill-group label:hover {
    border-color: var(--ink-4);
    color: var(--ink);
}

.pill-group input:checked + label {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.pill-group input:focus-visible + label {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ---------- 26.2 pill stikalo (samostojni da/ne) ---------- */

.switch-row {
    display: flex;
    margin-bottom: var(--s-3);
}

.switch-row label {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    margin: 0 !important;
    font-size: var(--fs-sm);
    font-weight: 400 !important;
    color: var(--ink-2);
    line-height: 1.5;
    cursor: pointer;
    user-select: none;
}

.sw {
    flex: none;
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: var(--r-full);
    background: #d7dbe0;
    transition: background .18s var(--ease);
}

.sw::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: var(--r-full);
    background: #fff;
    box-shadow: 0 1px 3px rgba(18, 21, 26, .28);
    transition: transform .18s var(--ease);
}

.switch-row input:checked + label .sw {
    background: var(--brand);
}

.switch-row input:checked + label .sw::after {
    transform: translateX(18px);
}

.switch-row input:focus-visible + label .sw {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.switch-row label:hover .sw {
    background: #c6ccd3;
}

.switch-row input:checked + label:hover .sw {
    background: var(--brand-dark);
}

/* ---------- 26.3 soglasja (pogoji, GDPR) ---------- */

/* POPRAVEK 23.8.2026: soglasji sta bili edini kontroli, ki sta ostali
   kvadratni kljukici, in sta v obrazcu izstopali — tik nad njima je stikalo
   za »Račun želim na podjetje«. Zdaj je vzorec isti kot pri `.switch-row`,
   le da ga tu nariše kar oznaka (`::before` = zaslonka, `::after` = gumbek),
   ker predloge s soglasji nimajo `<span class="sw">` in jih zato ni bilo
   treba spreminjati — tudi tistih v starem nakupnem toku ne. */

.check-row,
.check-option {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.check-row label,
.check-option label {
    position: relative;
    display: block;
    margin: 0 !important;
    padding-left: 54px;
    min-height: 24px;
    font-size: var(--fs-sm);
    font-weight: 400 !important;
    color: var(--ink-2);
    line-height: 1.5;
    cursor: pointer;
}

/* zaslonka */
.check-row label::before,
.check-option label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 42px;
    height: 24px;
    border-radius: var(--r-full);
    background: #d7dbe0;
    transition: background .18s var(--ease);
}

/* gumbek */
.check-row label::after,
.check-option label::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 18px;
    height: 18px;
    border-radius: var(--r-full);
    background: #fff;
    box-shadow: 0 1px 3px rgba(18, 21, 26, .28);
    transition: transform .18s var(--ease);
}

.check-row label:hover::before,
.check-option label:hover::before {
    background: #c6ccd3;
}

.check-row input:checked + label::before,
.check-option input:checked + label::before {
    background: var(--brand);
}

.check-row input:checked + label:hover::before,
.check-option input:checked + label:hover::before {
    background: var(--brand-dark);
}

.check-row input:checked + label::after,
.check-option input:checked + label::after {
    transform: translateX(18px);
}

.check-row input:focus-visible + label::before,
.check-option input:focus-visible + label::before {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ---------- 26.4 kartice možnosti (dostava, plačilo, darilo) ---------- */

/* Kartica ostane kartica (naziv, opis, cena se v pilulo ne stlačijo), a je
   pilulaste oblike in ima svojo lučko namesto sistemskega radia. */
.opt,
.co-cupon-gift {
    border-radius: var(--r-full);
    padding-left: 46px;
    position: relative;
}

.opt::before,
.co-cupon-gift::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    border: 1px solid var(--line);
    border-radius: var(--r-full);
    background: var(--surface);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}

.opt:hover::before,
.co-cupon-gift:hover::before {
    border-color: var(--ink-4);
}

.opt.is-active::before,
.co-cupon-gift.is-active::before {
    border-color: var(--brand);
    border-width: 6px;
    box-shadow: 0 0 0 1px var(--brand);
}

.opt.is-active {
    border-color: var(--brand);
    background: var(--brand-tint);
}

/* Kartica brez izbirnega gumba (edino ponujeno darilo) lučke ne kaže.
   Razred doda `cupon.php`; `:has()` bi bil krajši, a ga starejši brskalniki
   ne poznajo in bi ostal prazen krogec. */
.co-cupon-gift-solo {
    padding-left: var(--s-4);
}

.co-cupon-gift-solo::before {
    display: none;
}

@media (max-width: 520px) {
    .opt,
    .co-cupon-gift {
        border-radius: var(--r-lg);
    }
}

/* =====================================================================
   27 STRAN »O NAS« — 23.8.2026

   Predstavitvena stran je bila ena besedilna kolona v širini vsebine, enaka
   kot pogoji poslovanja. Tu je razporeditev v pasove: hero, števci, zgodba,
   obljube, ponudba in klic k dejanju.

   Slike so navadne datoteke v `images/about/` (ne gredo skozi modul za
   nalaganje), zato pomanjšav nimajo — hero je 1800 px in ima `fetchpriority`,
   ostali dve sta `loading="lazy"`.
   ===================================================================== */

.ab-hero {
    position: relative;
    max-width: var(--container);
    margin: 0 auto var(--s-7);
    border-radius: var(--r-xl);
    overflow: hidden;
    isolation: isolate;
}

.ab-hero-media {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.ab-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Preliv, ne enakomerna zatemnitev: fotografija ostane vidna na desni,
   besedilo na levi pa ima ves potreben kontrast. */
.ab-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, rgba(10, 14, 20, .86) 0%, rgba(10, 14, 20, .72) 42%, rgba(10, 14, 20, .28) 100%);
}

.ab-hero-copy {
    max-width: 620px;
    padding: clamp(var(--s-6), 7vw, var(--s-9)) clamp(var(--s-5), 5vw, var(--s-8));
    color: #fff;
}

.ab-eyebrow {
    display: block;
    margin-bottom: var(--s-3);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand);
}

.ab-hero-copy h1 {
    margin: 0 0 var(--s-4);
    font-size: clamp(var(--fs-2xl), 5vw, var(--fs-4xl));
    line-height: 1.08;
    letter-spacing: -.02em;
    color: #fff;
}

.ab-lead {
    margin: 0 0 var(--s-5);
    font-size: var(--fs-lg);
    line-height: 1.6;
    color: rgba(255, 255, 255, .88);
}

.ab-hero-btns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
}

/* POPRAVEK 24.8.2026: bela različica SAMO za temni hero na strani O nas —
   globalni .btn-ghost je gumb za kodo kupona na blagajni naredil nevidnega
   (bel na beli podlagi). */
.ab-hero-btns .btn-ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .55);
    color: #fff;
}

.ab-hero-btns .btn-ghost:hover {
    background: rgba(255, 255, 255, .12);
    border-color: #fff;
    color: #fff;
}

/* ---------- 27.1 števci ---------- */

.ab-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-4);
    max-width: var(--container);
    margin: 0 auto var(--s-8);
    padding: 0 var(--s-5);
}

.ab-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--s-5) var(--s-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    text-align: center;
}

.ab-stat-n {
    font-size: clamp(var(--fs-2xl), 3.4vw, var(--fs-3xl));
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.ab-stat-l {
    font-size: var(--fs-sm);
    color: var(--ink-3);
    line-height: 1.35;
}

/* ---------- 27.2 zgodba ---------- */

.ab-story {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: clamp(var(--s-5), 5vw, var(--s-8));
    max-width: var(--container);
    margin: 0 auto var(--s-8);
    padding: 0 var(--s-5);
}

.ab-story-media img {
    width: 100%;
    height: 100%;
    max-height: 560px;
    object-fit: cover;
    border-radius: var(--r-lg);
}

.ab-story-copy {
    min-width: 0;
}

.ab-story-text {
    font-size: var(--fs-md);
    line-height: 1.75;
    color: var(--ink-2);
}

.ab-story-text strong {
    color: var(--ink);
}

.ab-story-text ul {
    margin: var(--s-4) 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

/* Povezave na kategorije iz besedila so pilule — v tekočem besedilu so bile
   navaden seznam s pikami. */
.ab-story-text li a {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-full);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ink);
    transition: border-color .15s var(--ease), background .15s var(--ease);
}

.ab-story-text li a:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.ab-quote {
    margin: var(--s-5) 0 0;
    padding: var(--s-4) 0 var(--s-4) var(--s-5);
    border-left: 3px solid var(--brand);
    font-size: var(--fs-lg);
    font-weight: 500;
    line-height: 1.5;
    color: var(--ink);
}

/* ---------- 27.3 obljube ---------- */

.ab-values,
.ab-offer {
    max-width: var(--container);
    margin: 0 auto var(--s-8);
    padding: 0 var(--s-5);
}

.ab-h2 {
    margin: 0 0 var(--s-2);
    font-size: clamp(var(--fs-xl), 3vw, var(--fs-2xl));
    letter-spacing: -.02em;
    text-align: center;
}

.ab-sub {
    max-width: 620px;
    margin: 0 auto var(--s-5);
    text-align: center;
    color: var(--ink-3);
    line-height: 1.6;
}

.ab-value-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--s-4);
    margin-top: var(--s-5);
}

.ab-value {
    padding: var(--s-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.ab-value-ico {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: var(--s-4);
    border-radius: var(--r-full);
    background: var(--brand-tint);
    color: var(--brand-dark);
}

.ab-value-ico svg {
    width: 21px;
    height: 21px;
}

.ab-value h3 {
    margin: 0 0 var(--s-2);
    font-size: var(--fs-md);
    line-height: 1.3;
}

.ab-value p,
.ab-value-txt {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.65;
    color: var(--ink-3);
}

/* Vsebina kartice pride iz urejevalnika, zato je lahko v <p> — zadnji odmik
   odrežemo, da so kartice enako visoke. */
.ab-value-txt p {
    margin: 0 0 var(--s-2);
}

.ab-value-txt p:last-child {
    margin-bottom: 0;
}

/* ---------- 27.4 ponudba in klic k dejanju ---------- */

/* Vrsta kategorij ima svoje odmike z vstopne strani; tu jih ne podvajamo. */
.ab-offer .cat-rail {
    margin-top: var(--s-5);
}

.ab-cta {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: clamp(var(--s-5), 4vw, var(--s-7));
    max-width: var(--container);
    margin: 0 auto var(--s-8);
    padding: clamp(var(--s-6), 5vw, var(--s-7)) clamp(var(--s-5), 4vw, var(--s-7));
    background: var(--ink);
    border-radius: var(--r-xl);
    color: #fff;
}

.ab-cta h2 {
    margin: 0 0 var(--s-3);
    font-size: clamp(var(--fs-xl), 3vw, var(--fs-2xl));
    letter-spacing: -.02em;
    color: #fff;
}

.ab-cta p {
    margin: 0 0 var(--s-5);
    color: rgba(255, 255, 255, .78);
    line-height: 1.6;
}

.ab-cta-firma {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: clamp(var(--s-5), 4vw, var(--s-7));
    border-left: 1px solid rgba(255, 255, 255, .16);
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, .72);
    line-height: 1.6;
}

.ab-cta-firma strong {
    color: #fff;
    font-size: var(--fs-base);
}

.ab-cta-firma a {
    color: rgba(255, 255, 255, .72);
}

.ab-cta-firma a:hover {
    color: #fff;
    text-decoration: underline;
}

/* ---------- 27.5 odzivnost ---------- */

@media (max-width: 900px) {
    .ab-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .ab-story {
        grid-template-columns: 1fr;
    }

    .ab-story-media img {
        max-height: 320px;
    }

    .ab-cta {
        grid-template-columns: 1fr;
    }

    .ab-cta-firma {
        padding: var(--s-5) 0 0;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .16);
    }
}

@media (max-width: 560px) {
    .ab-hero {
        border-radius: var(--r-lg);
    }

    /* Na telefonu je fotografija nad besedilom, ne pod njim — sicer je pod
       prelivom videti samo temna ploskev. */
    .ab-hero-media {
        position: relative;
        height: 220px;
    }

    .ab-hero::after {
        background: linear-gradient(180deg, rgba(10, 14, 20, .35) 0%, rgba(10, 14, 20, .92) 45%);
    }

    .ab-hero-btns .btn {
        flex: 1 1 100%;
        text-align: center;
    }
}