/*
 * VD Soft Commerce: javni deo (storefront), dizajn sistem R1
 * Jedan statički fajl, bez build koraka. Šabloni ne sadrže sopstvene <style> blokove.
 */

:root{
    --ink:#1b1830;
    --text:#2a2638;
    --muted:#5e5a6b;
    --subtle:#868296;
    --line:#e4e2eb;
    --line-strong:#d3d0de;
    --canvas:#f5f5f8;
    --paper:#ffffff;
    --brand:#5b2fc9;
    --brand-hover:#4a23ad;
    --brand-tint:#f0ebff;
    --brand-tint-2:#e3d9ff;
    --ok:#12703a;
    --ok-tint:#e6f4eb;
    --warn:#8a4b00;
    --warn-tint:#fdf0e0;
    --sale:#bf2339;
    --focus:#5b2fc9;

    --font:'Onest',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

    --fs-xs:12.5px;
    --fs-sm:13.5px;
    --fs-md:15px;
    --fs-lg:17px;
    --fs-xl:21px;
    --fs-2xl:27px;
    --fs-3xl:clamp(28px,3.4vw,40px);

    --r-sm:6px;
    --r-md:10px;
    --r-lg:16px;

    --shadow-pop:0 18px 48px rgba(27,24,48,.16),0 2px 6px rgba(27,24,48,.06);
    --wrap:1240px;
}

*,*::before,*::after{box-sizing:border-box}

[hidden]{display:none !important}

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

body{
    margin:0;
    background:var(--canvas);
    color:var(--text);
    font-family:var(--font);
    font-size:var(--fs-md);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto}

a{color:inherit}

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

h1,h2,h3,h4{color:var(--ink);line-height:1.2;margin:0}

:focus-visible{
    outline:3px solid var(--focus);
    outline-offset:2px;
    border-radius:4px;
}

.container{
    width:min(var(--wrap),calc(100% - 32px));
    margin-inline:auto;
}

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

.vd-skip{
    position:absolute;left:12px;top:-60px;z-index:200;
    padding:10px 16px;border-radius:var(--r-sm);
    background:var(--ink);color:#fff;text-decoration:none;font-weight:600;
}
.vd-skip:focus{top:12px}

.vd-num{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------ dugmad */

.vd-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    min-height:44px;padding:0 18px;
    border:1px solid transparent;border-radius:var(--r-sm);
    background:var(--brand);color:#fff;
    font-size:var(--fs-sm);font-weight:600;text-decoration:none;
    cursor:pointer;
    transition:background-color .15s ease,border-color .15s ease;
}
.vd-btn:hover{background:var(--brand-hover)}
.vd-btn--ghost{background:var(--paper);color:var(--ink);border-color:var(--line-strong)}
.vd-btn--ghost:hover{background:var(--canvas);border-color:var(--subtle)}
.vd-btn--block{width:100%}
.vd-btn--lg{min-height:50px;font-size:var(--fs-md)}

.vd-link{color:var(--brand);text-decoration:none;font-weight:600}
.vd-link:hover{text-decoration:underline}

/* ------------------------------------------------------------------ status */

.vd-stock{
    display:inline-flex;align-items:center;gap:7px;
    font-size:var(--fs-xs);font-weight:600;color:var(--ok);
}
.vd-stock::before{
    content:"";width:8px;height:8px;border-radius:50%;
    background:currentColor;flex:0 0 8px;
}
.vd-stock.is-out{color:var(--warn)}

.vd-chip{
    display:inline-flex;align-items:center;gap:8px;
    padding:6px 12px;border-radius:999px;
    background:var(--ok-tint);color:var(--ok);
    font-size:var(--fs-sm);font-weight:600;
}
.vd-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.vd-chip.is-out{background:var(--warn-tint);color:var(--warn)}

/* ================================================================== HEADER */

.vd-topbar{
    background:var(--ink);color:#d9d6e6;
    font-size:var(--fs-xs);
}
.vd-topbar-inner{
    display:flex;align-items:center;justify-content:space-between;gap:20px;
    min-height:36px;
}
.vd-topbar-note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.vd-pages{
    display:flex;align-items:center;gap:4px;
    margin:0;padding:0;list-style:none;
}
.vd-pages-item{position:relative}
.vd-pages a{
    display:block;padding:8px 10px;
    color:#d9d6e6;text-decoration:none;white-space:nowrap;
}
.vd-pages a:hover{color:#fff}
.vd-pages-sub{
    display:none;position:absolute;right:0;top:100%;z-index:90;
    min-width:220px;margin:0;padding:6px;list-style:none;
    border:1px solid var(--line);border-radius:var(--r-md);
    background:var(--paper);box-shadow:var(--shadow-pop);
}
.vd-pages-sub a{color:var(--text);border-radius:var(--r-sm);padding:9px 12px}
.vd-pages-sub a:hover{background:var(--brand-tint);color:var(--brand)}
.vd-pages-item:hover .vd-pages-sub,
.vd-pages-item:focus-within .vd-pages-sub{display:block}

.vd-header{
    position:relative;z-index:60;
    background:var(--paper);
    border-bottom:1px solid var(--line);
}
.vd-header-main{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;gap:32px;
    min-height:84px;
}
.vd-logo{display:flex;align-items:center}
.vd-logo img{display:block;width:auto;height:56px}

.vd-search{
    position:relative;display:flex;
    width:100%;max-width:640px;
}
.vd-search input{
    flex:1;min-width:0;height:48px;
    padding:0 16px 0 44px;
    border:1.5px solid var(--line-strong);border-right:0;
    border-radius:var(--r-sm) 0 0 var(--r-sm);
    background:var(--paper);
    font-size:var(--fs-md);
    outline:0;
}
.vd-search input::placeholder{color:var(--subtle)}
.vd-search input:focus{border-color:var(--brand)}
.vd-search input:focus-visible{outline:0}
.vd-search:focus-within{box-shadow:0 0 0 4px var(--brand-tint);border-radius:var(--r-sm)}
.vd-search-icon{
    position:absolute;left:15px;top:50%;
    width:18px;height:18px;margin-top:-9px;
    color:var(--subtle);pointer-events:none;
}
.vd-search button{
    height:48px;padding:0 22px;
    border:0;border-radius:0 var(--r-sm) var(--r-sm) 0;
    background:var(--brand);color:#fff;
    font-weight:600;cursor:pointer;
}
.vd-search button:hover{background:var(--brand-hover)}

.vd-header-actions{
    display:flex;align-items:center;justify-content:flex-end;gap:22px;
}
.vd-header-contact{
    display:flex;flex-direction:column;
    text-decoration:none;line-height:1.3;
}
.vd-header-contact small{color:var(--muted);font-size:var(--fs-xs)}
.vd-header-contact strong{color:var(--ink);font-size:var(--fs-md);font-weight:700}
.vd-header-cart{
    display:inline-flex;align-items:center;gap:8px;
    text-decoration:none;font-weight:600;color:var(--ink);
}

/* -------------------------------------------------------- navigacija */

.vd-nav{border-top:1px solid var(--line)}
.vd-nav-inner{
    display:flex;align-items:center;gap:6px;
    min-height:52px;
}
.vd-all-button{
    flex:0 0 auto;
    display:inline-flex;align-items:center;gap:10px;
    height:40px;padding:0 16px;
    border:0;border-radius:var(--r-sm);
    background:var(--ink);color:#fff;
    font-weight:600;font-size:var(--fs-sm);
    cursor:pointer;
}
.vd-all-button:hover,
.vd-all-button[aria-expanded="true"]{background:var(--brand)}
.vd-burger{display:inline-grid;gap:3px;width:16px}
.vd-burger i{display:block;height:2px;border-radius:2px;background:currentColor}

.vd-quick{
    display:flex;gap:2px;
    -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent);
    min-width:0;overflow-x:auto;
    margin:0;padding:0 0 0 6px;list-style:none;
    scrollbar-width:none;
}
.vd-quick::-webkit-scrollbar{display:none}
.vd-quick a{
    display:block;padding:10px 11px;border-radius:var(--r-sm);
    color:var(--text);text-decoration:none;white-space:nowrap;
    font-size:var(--fs-sm);font-weight:500;
}
.vd-quick a:hover{background:var(--brand-tint);color:var(--brand)}

/* Mega meni: jedna struktura; desktop = dva panela, mobilni = harmonika */
.vd-mega{
    position:absolute;left:0;right:0;top:100%;
    z-index:70;
}
.vd-mega[hidden]{display:none}
.vd-mega-panel{
    position:relative;
    display:block;
    min-height:460px;
    border:1px solid var(--line);border-radius:0 0 var(--r-lg) var(--r-lg);
    background:var(--paper);
    box-shadow:var(--shadow-pop);
    overflow:hidden;
}
.vd-mega-head{display:none}
.vd-mega-list{
    width:290px;margin:0;padding:10px;list-style:none;
    border-right:1px solid var(--line);
    background:var(--canvas);
    min-height:460px;
}
.vd-mega-root{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    width:100%;padding:10px 12px;
    border:0;border-radius:var(--r-sm);
    background:none;text-align:left;
    color:var(--text);font-size:var(--fs-sm);font-weight:500;
    text-decoration:none;cursor:pointer;
}
.vd-mega-root::after{
    content:"";width:7px;height:7px;flex:0 0 7px;
    border-right:2px solid var(--subtle);border-top:2px solid var(--subtle);
    transform:rotate(45deg);
}
.vd-mega-group.is-active > .vd-mega-root{background:var(--paper);color:var(--brand);font-weight:600}
.vd-mega-group.is-active > .vd-mega-root::after{border-color:var(--brand)}

.vd-mega-children{
    display:none;
    position:absolute;left:290px;right:0;top:0;bottom:0;
    padding:26px 30px;overflow:auto;
}
.vd-mega-group.is-active > .vd-mega-children{display:block}
.vd-mega-children-head{
    display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line);
}
.vd-mega-children-head h3{font-size:var(--fs-xl)}
.vd-mega-children ul{
    columns:3 200px;column-gap:28px;
    margin:0;padding:0;list-style:none;
}
.vd-mega-children li{break-inside:avoid}
.vd-mega-children li a{
    display:block;padding:7px 0;
    color:var(--text);text-decoration:none;font-size:var(--fs-sm);
}
.vd-mega-children li a:hover{color:var(--brand)}

.vd-scrim{
    position:fixed;inset:0;z-index:55;
    background:rgba(27,24,48,.35);
}
.vd-scrim[hidden]{display:none}

/* ================================================================== MAIN */

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

.vd-page{padding:26px 0 64px}

.vd-breadcrumb{
    display:flex;flex-wrap:wrap;align-items:center;gap:6px;
    margin:0 0 18px;padding:0;list-style:none;
    color:var(--muted);font-size:var(--fs-xs);
}
.vd-breadcrumb li{display:flex;align-items:center;gap:6px;min-width:0}
.vd-breadcrumb li + li::before{content:"/";color:var(--line-strong)}
.vd-breadcrumb a{color:var(--muted);text-decoration:none}
.vd-breadcrumb a:hover{color:var(--brand);text-decoration:underline}
.vd-breadcrumb [aria-current]{
    color:var(--ink);font-weight:500;
    max-width:48ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.vd-section{margin-top:52px}
.vd-section-head{
    display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
    margin-bottom:18px;
}
.vd-section-head h2{font-size:var(--fs-2xl);letter-spacing:-.01em}
.vd-section-head p{margin:6px 0 0;color:var(--muted);font-size:var(--fs-sm)}

/* ------------------------------------------------------------ kartica */

.vd-product-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
}
.vd-grid-3{grid-template-columns:repeat(auto-fill,minmax(205px,1fr))}

.vd-card{
    position:relative;
    display:flex;flex-direction:column;
    border:1px solid var(--line);border-radius:var(--r-md);
    background:var(--paper);
    transition:border-color .15s ease;
}
.vd-card:hover{border-color:var(--brand-tint-2)}
.vd-card:focus-within{border-color:var(--brand)}
/* I1: okvir slike je uvek isti kvadrat; slika bilo kog oblika se smanjuje unutar njega i ne može da ga raširi */
.vd-card-media{
    --media-pad:22px;
    position:relative;display:block;
    aspect-ratio:1/1;overflow:hidden;
    border-radius:var(--r-md) var(--r-md) 0 0;
    background:var(--paper);
}
.vd-card-media img{
    position:absolute;left:var(--media-pad);top:var(--media-pad);
    width:calc(100% - 2 * var(--media-pad));height:calc(100% - 2 * var(--media-pad));
    max-width:none;object-fit:scale-down;object-position:center;   /* veću sliku smanji, manju ne razvlači (ne muti) */
}
.vd-noimg{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
    width:100%;height:100%;
    border-radius:var(--r-sm);background:var(--canvas);
    color:var(--subtle);font-size:var(--fs-xs);text-align:center;
}
.vd-noimg svg{width:36px;height:36px;opacity:.7}
.vd-card-body{
    display:flex;flex-direction:column;flex:1;
    padding:14px 16px 16px;
    border-top:1px solid var(--line);
}
.vd-card-brand{
    min-height:20px;margin-bottom:4px;
    color:var(--muted);font-size:var(--fs-xs);font-weight:500;
}
.vd-card-title{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
    overflow:hidden;min-height:calc(1.4em * 3);overflow-wrap:anywhere;
    color:var(--ink);text-decoration:none;
    font-size:var(--fs-sm);font-weight:500;line-height:1.4;
}
.vd-card-title::after{content:"";position:absolute;inset:0;z-index:1}
.vd-card-title:hover{color:var(--brand)}
.vd-card-title:focus-visible{outline:0}
.vd-card-foot{margin-top:auto;padding-top:14px}
.vd-card-price{
    display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;
    margin-top:6px;
}
.vd-card-price strong{
    color:var(--ink);font-size:var(--fs-lg);font-weight:700;letter-spacing:-.01em;
    font-variant-numeric:tabular-nums;
}
.vd-card-price s{color:var(--subtle);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.vd-card-badge{
    position:absolute;left:12px;top:12px;z-index:2;
    padding:3px 8px;border-radius:var(--r-sm);
    background:var(--sale);color:#fff;font-size:var(--fs-xs);font-weight:700;
    font-variant-numeric:tabular-nums;
}

/* ================================================================== HOME */

.vd-hero{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    align-items:center;gap:40px;
    min-height:380px;
    padding:48px 56px;
    border-radius:var(--r-lg);
    background:var(--ink);color:#fff;
    overflow:hidden;
    position:relative;
}
.vd-hero::before{
    content:"";position:absolute;right:-140px;top:-160px;
    width:560px;height:560px;border-radius:50%;
    background:radial-gradient(closest-side,rgba(123,82,240,.55),rgba(123,82,240,0));
    pointer-events:none;
}
.vd-hero[hidden]{display:none}
.vd-hero-copy{position:relative;z-index:1}
.vd-hero h1,.vd-hero h2{
    max-width:16ch;margin:0 0 16px;
    color:#fff;font-size:var(--fs-3xl);font-weight:700;letter-spacing:-.025em;line-height:1.08;
}
.vd-hero p{max-width:46ch;margin:0 0 26px;color:#cfcae0;font-size:var(--fs-lg);line-height:1.6}
.vd-hero .vd-btn{background:#fff;color:var(--ink)}
.vd-hero .vd-btn:hover{background:var(--brand-tint)}
.vd-hero-media{
    position:relative;z-index:1;
    display:flex;align-items:center;justify-content:center;
    min-height:280px;
}
.vd-hero-media img{max-height:320px;width:auto;object-fit:contain;border-radius:var(--r-md)}
.vd-hero-dots{display:flex;gap:8px;justify-content:center;margin-top:14px}
.vd-hero-dots button{
    width:10px;height:10px;padding:0;border:0;border-radius:999px;
    background:var(--line-strong);cursor:pointer;
}
.vd-hero-dots button[aria-current="true"]{width:28px;background:var(--brand)}

.vd-facts{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    margin-top:16px;
    border:1px solid var(--line);border-radius:var(--r-md);
    background:var(--paper);
}
.vd-fact{padding:18px 22px}
.vd-fact + .vd-fact{border-left:1px solid var(--line)}
.vd-fact strong{display:block;color:var(--ink);font-size:var(--fs-md);font-weight:600}
.vd-fact span{color:var(--muted);font-size:var(--fs-sm)}

/* Indeks kategorija: kompaktne pločice sa slikom */
.vd-cat-grid{
    display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px;
}
.vd-cat{
    display:flex;flex-direction:column;align-items:center;gap:10px;
    padding:16px 10px 14px;
    border:1px solid var(--line);border-radius:var(--r-md);
    background:var(--paper);
    color:var(--ink);text-decoration:none;text-align:center;
    transition:border-color .15s ease;
}
.vd-cat:hover{border-color:var(--brand)}
.vd-cat-img{
    display:flex;align-items:center;justify-content:center;
    width:76px;height:76px;
}
.vd-cat-img img{width:100%;height:100%;object-fit:contain}
.vd-cat-name{font-size:var(--fs-xs);font-weight:600;line-height:1.3}

.vd-brands{
    display:flex;gap:10px;overflow-x:auto;
    margin:0;padding:0 0 6px;list-style:none;
    scroll-snap-type:x proximity;
}
.vd-brands li{scroll-snap-align:start;flex:0 0 auto}
.vd-brand{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    width:150px;height:84px;padding:10px;text-decoration:none;
    border:1px solid var(--line);border-radius:var(--r-md);
    background:var(--paper);
}
.vd-brand img{max-width:110px;max-height:34px;width:auto;height:auto;object-fit:contain}
.vd-brand-name{font-weight:700;color:var(--ink);font-size:var(--fs-sm);white-space:nowrap}
.vd-brand small{color:var(--muted);font-size:var(--fs-xs)}
/* stara klasa iz admin logo patcha */
.vd-brand-logo{display:block;max-width:110px;max-height:34px;width:auto;height:auto;object-fit:contain;margin:auto}

/* ================================================================== KATEGORIJA */

.vd-listing-head{
    display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
    margin-bottom:20px;
}
.vd-listing-head h1{font-size:var(--fs-2xl);letter-spacing:-.015em}
.vd-listing-head p{margin:6px 0 0;color:var(--muted);font-size:var(--fs-sm)}

.vd-subcats{
    display:flex;flex-wrap:wrap;gap:8px;
    margin:0 0 26px;padding:0;list-style:none;
}
.vd-subcat{
    display:flex;align-items:center;gap:10px;
    min-height:48px;padding:6px 14px 6px 6px;
    border:1px solid var(--line);border-radius:var(--r-md);
    background:var(--paper);
    color:var(--ink);text-decoration:none;
    font-size:var(--fs-sm);font-weight:500;
}
.vd-subcat:hover{border-color:var(--brand);color:var(--brand)}
.vd-subcat-img{
    display:flex;align-items:center;justify-content:center;
    width:36px;height:36px;border-radius:var(--r-sm);background:var(--canvas);
}
.vd-subcat-img img{width:30px;height:30px;object-fit:contain}
.vd-subcat.no-img{padding-left:14px}

.vd-listing{
    display:grid;grid-template-columns:264px minmax(0,1fr);gap:24px;
    align-items:start;
}

.vd-filters{
    position:sticky;top:16px;
    border:1px solid var(--line);border-radius:var(--r-md);
    background:var(--paper);
}
.vd-filters > summary{
    display:none;
    list-style:none;cursor:pointer;
}
.vd-filters > summary::-webkit-details-marker{display:none}
.vd-filters-body{padding:20px}
.vd-filters h2{font-size:var(--fs-lg);margin-bottom:18px}
.vd-field{margin-bottom:18px}
.vd-field > label,
.vd-field > .vd-field-label{
    display:block;margin-bottom:7px;
    color:var(--ink);font-size:var(--fs-sm);font-weight:600;
}
.vd-input,
.vd-select{
    width:100%;height:44px;padding:0 12px;
    border:1px solid var(--line-strong);border-radius:var(--r-sm);
    background:var(--paper);
    font-size:var(--fs-sm);
}
.vd-input:focus,.vd-select:focus{border-color:var(--brand);outline:0;box-shadow:0 0 0 3px var(--brand-tint)}
.vd-fieldset{border:0;margin:0 0 18px;padding:0;min-width:0}
.vd-price-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vd-filters-reset{
    display:block;margin-top:12px;
    color:var(--muted);font-size:var(--fs-sm);text-align:center;
}

.vd-toolbar{
    display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
    margin-bottom:16px;
}
.vd-toolbar-count{color:var(--muted);font-size:var(--fs-sm)}
.vd-toolbar-count strong{color:var(--ink)}
.vd-sort{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);color:var(--muted)}
.vd-sort .vd-select{width:auto;min-width:200px}

.vd-active-filters{
    display:flex;flex-wrap:wrap;gap:8px;
    margin:0 0 16px;padding:0;list-style:none;
}
.vd-active-filters a{
    display:inline-flex;align-items:center;gap:8px;
    padding:6px 10px 6px 12px;border-radius:999px;
    background:var(--brand-tint);color:var(--brand);
    font-size:var(--fs-xs);font-weight:600;text-decoration:none;
}
.vd-active-filters a::after{content:"×";font-size:16px;line-height:1}
.vd-active-filters a:hover{background:var(--brand-tint-2)}

.vd-empty{
    grid-column:1/-1;
    padding:44px 24px;
    border:1px dashed var(--line-strong);border-radius:var(--r-md);
    background:var(--paper);
    text-align:center;
}
.vd-empty h2{font-size:var(--fs-xl);margin-bottom:8px}
.vd-empty p{max-width:52ch;margin:0 auto 18px;color:var(--muted)}
.vd-empty-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none}
.vd-empty-links a{
    display:block;padding:8px 14px;border:1px solid var(--line);border-radius:999px;
    color:var(--text);text-decoration:none;font-size:var(--fs-sm);background:var(--paper);
}
.vd-empty-links a:hover{border-color:var(--brand);color:var(--brand)}

/* ------------------------------------------------------------ filteri (F1) */

.vd-facet{border:0;margin:0;padding:16px 0;min-width:0;border-top:1px solid var(--line)}
.vd-facet legend{
    float:left;width:100%;margin:0 0 10px;padding:0;
    color:var(--ink);font-size:var(--fs-sm);font-weight:600;
}
.vd-facet legend + *{clear:both}
.vd-facet-hint{margin:6px 0 0;color:var(--subtle);font-size:var(--fs-xs)}
.vd-checks{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.vd-check{
    display:flex;align-items:center;gap:10px;
    padding:6px 6px;margin:0 -6px;border-radius:var(--r-sm);
    font-size:var(--fs-sm);color:var(--text);cursor:pointer;
}
.vd-check:hover{background:var(--canvas)}
.vd-check input,.vd-toggle input{
    flex:0 0 18px;width:18px;height:18px;margin:0;
    accent-color:var(--brand);cursor:pointer;
}
.vd-check-label{flex:1;min-width:0;overflow-wrap:anywhere}
.vd-count{
    margin-left:auto;color:var(--subtle);font-size:var(--fs-xs);
    font-variant-numeric:tabular-nums;
}
.vd-check.is-empty{color:var(--subtle);cursor:default}
.vd-check.is-empty:hover{background:none}
.vd-check input:checked + .vd-check-label{color:var(--ink);font-weight:600}
.vd-toggle{
    display:flex;align-items:center;gap:10px;
    margin:0 0 4px;padding:12px 14px;
    border:1px solid var(--line);border-radius:var(--r-md);background:var(--ok-tint);
    font-size:var(--fs-sm);font-weight:600;color:var(--ok);cursor:pointer;
}
.vd-toggle input{accent-color:var(--ok)}
.vd-more{margin-top:4px}
.vd-more > summary{
    display:inline-block;padding:6px 0;
    color:var(--brand);font-size:var(--fs-sm);font-weight:600;cursor:pointer;list-style:none;
}
.vd-more > summary::-webkit-details-marker{display:none}
.vd-more[open] > summary{display:none}
.vd-filters-body .vd-btn{margin-top:16px}
.vd-active-filters a.vd-chip-clear{background:none;color:var(--muted);text-decoration:underline}
.vd-active-filters a.vd-chip-clear::after{content:none}

/* ------------------------------------------------------------ paginacija */

.vd-pagination{
    display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
    margin-top:28px;
}
.vd-pagination-info{color:var(--muted);font-size:var(--fs-sm)}
.vd-pagination-info strong{color:var(--ink);font-weight:600}
.vd-pagination-links{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.vd-pg{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:42px;height:42px;padding:0 12px;
    border:1px solid var(--line);border-radius:var(--r-sm);
    background:var(--paper);
    color:var(--text);text-decoration:none;font-size:var(--fs-sm);font-weight:500;
    font-variant-numeric:tabular-nums;
}
a.vd-pg:hover{border-color:var(--brand);color:var(--brand)}
.vd-pg[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:#fff}
.vd-pg.is-disabled{color:var(--line-strong);background:transparent}
.vd-pg.is-gap{border-color:transparent;background:transparent;min-width:24px;padding:0}

/* ================================================================== PROIZVOD */

.vdp-main{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);
    gap:32px;align-items:start;
}

.vdp-gallery{
    border:1px solid var(--line);border-radius:var(--r-lg);
    background:var(--paper);
    padding:20px;
}
.vdp-stage{
    position:relative;display:block;overflow:hidden;
    aspect-ratio:4/3;max-height:520px;width:100%;
}
.vdp-stage img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:scale-down}
.vdp-stage .vd-noimg{min-height:280px}
.vdp-thumbs{
    display:flex;gap:10px;overflow-x:auto;
    margin:16px 0 0;padding:2px;list-style:none;
}
.vdp-thumb{
    flex:0 0 72px;width:72px;height:72px;padding:6px;
    border:1.5px solid var(--line);border-radius:var(--r-sm);
    background:var(--paper);cursor:pointer;
}
.vdp-thumb[aria-pressed="true"]{border-color:var(--brand)}
.vdp-thumb img{width:100%;height:100%;object-fit:contain}

.vdp-buy{
    position:sticky;top:16px;
    padding:28px;
    border:1px solid var(--line);border-radius:var(--r-lg);
    background:var(--paper);
}
.vdp-brand{color:var(--muted);font-size:var(--fs-sm);font-weight:500}
.vdp-title{
    margin:6px 0 16px;overflow-wrap:anywhere;
    font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.015em;line-height:1.22;
}
.vdp-codes{
    display:flex;flex-wrap:wrap;gap:6px 18px;
    margin:0 0 20px;padding:0 0 18px;
    border-bottom:1px solid var(--line);
    color:var(--muted);font-size:var(--fs-xs);
}
.vdp-codes div{display:flex;gap:5px}
.vdp-codes dt{font-weight:500}
.vdp-codes dd{margin:0;color:var(--text);font-variant-numeric:tabular-nums;user-select:all}

.vdp-price-block{margin-top:20px}
.vdp-price{
    display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;
}
.vdp-price strong{
    color:var(--ink);font-size:36px;font-weight:700;letter-spacing:-.02em;line-height:1.1;
    font-variant-numeric:tabular-nums;
}
.vdp-price s{color:var(--subtle);font-size:var(--fs-md);font-variant-numeric:tabular-nums}
.vdp-saving{margin-top:6px;color:var(--sale);font-size:var(--fs-sm);font-weight:600}
.vdp-tax{margin-top:6px;color:var(--muted);font-size:var(--fs-xs)}

.vdp-cart-row{display:grid;grid-template-columns:96px 1fr;gap:10px;margin-top:22px}
.vdp-qty{
    width:100%;height:50px;text-align:center;
    border:1px solid var(--line-strong);border-radius:var(--r-sm);
    font-size:var(--fs-md);font-weight:600;
}
.vdp-order{
    margin-top:22px;padding:16px 18px;
    border-radius:var(--r-md);background:var(--brand-tint);
}
.vdp-order strong{display:block;color:var(--ink);margin-bottom:4px}
.vdp-order p{margin:0 0 10px;color:var(--muted);font-size:var(--fs-sm)}
.vdp-order-links{display:flex;flex-wrap:wrap;gap:8px 18px}

.vdp-assure{
    margin:22px 0 0;padding:18px 0 0;list-style:none;
    border-top:1px solid var(--line);
    display:grid;gap:12px;
}
.vdp-assure li{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-sm)}
.vdp-assure svg{flex:0 0 20px;width:20px;height:20px;color:var(--brand);margin-top:1px}
.vdp-assure strong{display:block;color:var(--ink);font-weight:600}
.vdp-assure span{color:var(--muted)}
.vdp-assure a{color:var(--brand)}

/* Sadržaj proizvoda (opis / specifikacije / deklaracija) */
.vd-product-content{
    margin-top:40px;
    border:1px solid var(--line);border-radius:var(--r-lg);
    background:var(--paper);
    overflow:hidden;
}
.vd-content-tabs{
    display:flex;gap:4px;overflow-x:auto;
    padding:0 20px;border-bottom:1px solid var(--line);
}
.vd-tab-button{
    flex:0 0 auto;
    display:inline-flex;align-items:center;gap:8px;
    min-height:58px;padding:0 16px;
    border:0;border-bottom:3px solid transparent;
    background:none;color:var(--muted);
    font-size:var(--fs-md);font-weight:600;cursor:pointer;
}
.vd-tab-button:hover{color:var(--ink)}
.vd-tab-button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--brand)}
.vd-tab-count{
    padding:1px 8px;border-radius:999px;background:var(--canvas);
    color:var(--muted);font-size:var(--fs-xs);font-variant-numeric:tabular-nums;
}
.vd-tab-panel{padding:30px 32px 34px}
.vd-tab-panel[hidden]{display:none}

.vd-description-intro{max-width:72ch;color:var(--text);font-size:16px;line-height:1.75}
.vd-description-intro p{margin:0 0 14px}

.vd-highlight-grid{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;
    margin:22px 0 0;padding:0;list-style:none;
    max-width:980px;
}
.vd-highlight{
    display:grid;grid-template-columns:20px 1fr;gap:12px;
    padding:13px 0;border-top:1px solid var(--line);
}
.vd-highlight svg{width:18px;height:18px;margin-top:2px;color:var(--ok)}
.vd-highlight strong{display:block;color:var(--ink);font-weight:600;font-size:var(--fs-sm)}
.vd-highlight span{color:var(--muted);font-size:var(--fs-sm);white-space:pre-line}

.vd-spec-group + .vd-spec-group{margin-top:28px}
.vd-spec-group h3{font-size:var(--fs-lg);margin-bottom:10px}
.vd-spec-table{width:100%;max-width:980px;border-collapse:collapse}
.vd-spec-table th,
.vd-spec-table td{
    padding:12px 14px;
    border-bottom:1px solid var(--line);
    text-align:left;vertical-align:top;
    font-size:var(--fs-sm);line-height:1.55;
}
.vd-spec-table tr:first-child th,
.vd-spec-table tr:first-child td{border-top:1px solid var(--line)}
.vd-spec-table th{width:34%;color:var(--muted);font-weight:500;background:var(--canvas)}
.vd-spec-table td{color:var(--ink);white-space:pre-line}
.vd-spec-bullet{color:var(--brand)}

.vd-empty-content{
    padding:28px;border:1px dashed var(--line-strong);border-radius:var(--r-md);
    color:var(--muted);text-align:center;
}

.vdp-related{margin-top:52px}

/* ================================================================== PRETRAGA / 404 */

.vd-search-hero{margin-bottom:22px}
.vd-search-hero h1{font-size:var(--fs-2xl)}
.vd-search-hero p{margin:6px 0 0;color:var(--muted)}

.vd-error{
    max-width:640px;margin:20px auto 0;padding:48px 32px;
    border:1px solid var(--line);border-radius:var(--r-lg);
    background:var(--paper);text-align:center;
}
.vd-error-code{color:var(--brand);font-size:var(--fs-sm);font-weight:700}
.vd-error h1{font-size:var(--fs-2xl);margin:8px 0 10px}
.vd-error p{color:var(--muted);margin:0 0 22px}
.vd-error .vd-search{margin:0 auto 22px}

/* ================================================================== FOOTER */

.vd-footer{
    margin-top:72px;
    background:var(--ink);color:#c9c5d8;
    font-size:var(--fs-sm);
}
.vd-footer-grid{
    display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;
    padding:52px 0 40px;
}
.vd-footer h2{color:#fff;font-size:var(--fs-md);font-weight:600;margin-bottom:14px}
.vd-footer p{margin:0 0 10px;line-height:1.65}
.vd-footer ul{margin:0;padding:0;list-style:none}
.vd-footer li{margin-bottom:8px}
.vd-footer a{color:#c9c5d8;text-decoration:none}
.vd-footer a:hover{color:#fff;text-decoration:underline}
.vd-footer-contact{font-style:normal}
.vd-footer-contact a{color:#fff}
.vd-footer-bottom{
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
    padding:18px 0 22px;border-top:1px solid rgba(255,255,255,.1);
    color:#9893ab;font-size:var(--fs-xs);
}

/* ================================================================== RESPONSIVE */

@media (max-width:1180px){
    .vd-cat-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
}

@media (max-width:1024px){
    .vd-header-main{gap:20px}
    .vd-header-contact{display:none}
    .vd-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .vd-listing{grid-template-columns:1fr}
    .vd-filters{position:static}
    .vd-filters > summary{
        display:flex;align-items:center;justify-content:space-between;
        min-height:50px;padding:0 18px;font-weight:600;color:var(--ink);
    }
    .vd-filters > summary::after{
        content:"";width:8px;height:8px;
        border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
        transform:rotate(45deg);margin-top:-4px;
    }
    .vd-filters[open] > summary{border-bottom:1px solid var(--line)}
    .vd-filters[open] > summary::after{transform:rotate(-135deg);margin-top:4px}
    .vd-filters h2{display:none}
    .vdp-main{grid-template-columns:minmax(0,1fr)}
    .vdp-buy{position:static}
    .vd-hero{grid-template-columns:1fr;padding:36px 32px;gap:20px}
    .vd-hero-media{min-height:0}
    .vd-hero-media img{max-height:220px}
}

/* Mobilni meni: panel postaje fioka preko celog ekrana */
@media (max-width:900px){
    .vd-mega{position:fixed;inset:0;z-index:80}
    .vd-mega-panel{
        position:absolute;inset:0 auto 0 0;
        width:min(420px,100%);min-height:0;
        border:0;border-radius:0;
        overflow-y:auto;overscroll-behavior:contain;
    }
    .vd-mega-head{
        position:sticky;top:0;z-index:2;
        display:flex;align-items:center;justify-content:space-between;
        min-height:58px;padding:0 10px 0 18px;
        border-bottom:1px solid var(--line);background:var(--paper);
    }
    .vd-mega-head strong{font-size:var(--fs-lg);color:var(--ink)}
    .vd-mega-close{
        width:44px;height:44px;border:0;border-radius:var(--r-sm);
        background:none;font-size:26px;line-height:1;cursor:pointer;
    }
    .vd-mega-list{width:auto;min-height:0;border:0;background:var(--paper);padding:6px 10px 30px}
    .vd-mega-group{border-bottom:1px solid var(--line)}
    .vd-mega-root{padding:14px 8px;font-size:var(--fs-md)}
    .vd-mega-root::after{transform:rotate(135deg);transition:transform .15s ease}
    .vd-mega-group.is-active > .vd-mega-root{background:none}
    .vd-mega-group.is-active > .vd-mega-root::after{transform:rotate(-45deg)}
    .vd-mega-children{position:static;padding:0 8px 14px}
    .vd-mega-children-head{border:0;margin:0 0 4px;padding:0}
    .vd-mega-children-head h3{display:none}
    .vd-mega-children ul{columns:1}
    .vd-mega-children li a{padding:9px 0;font-size:var(--fs-md)}
    body.vd-menu-open{overflow:hidden}
}

@media (max-width:760px){
    .vd-topbar-note{display:none}
    .vd-topbar-inner{justify-content:flex-start;overflow-x:auto}
    .vd-pages-sub{display:none !important}
    .vd-header-main{
        grid-template-columns:1fr auto;gap:12px;
        padding:12px 0;min-height:0;
    }
    .vd-logo img{height:44px}
    .vd-search{grid-column:1/-1;grid-row:2;max-width:none}
    .vd-search button{padding:0 16px}
    .vd-nav-inner{min-height:50px}
    .vd-product-grid,.vd-grid-3{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .vd-card-media{--media-pad:14px}
    .vd-card-body{padding:12px}
    .vd-cat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
    .vd-cat{padding:12px 6px}
    .vd-cat-img{width:56px;height:56px}
    .vd-facts{grid-template-columns:1fr}
    .vd-fact{padding:12px 16px}
    .vd-fact span{display:none}
    .vd-hero-media img{max-height:150px}
    .vd-fact + .vd-fact{border-left:0;border-top:1px solid var(--line)}
    .vd-section{margin-top:40px}
    .vd-section-head h2,.vd-listing-head h1,.vd-search-hero h1{font-size:var(--fs-xl)}
    .vd-hero{padding:28px 22px;border-radius:var(--r-md)}
    .vd-hero p{font-size:var(--fs-md)}
    .vd-subcats{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding:0 16px 4px}
    .vd-subcat{flex:0 0 auto}
    .vd-sort{width:100%}
    .vd-sort .vd-select{flex:1;min-width:0}
    .vdp-gallery{padding:12px}
    .vdp-buy{padding:20px}
    .vdp-title{font-size:var(--fs-xl)}
    .vdp-price strong{font-size:30px}
    .vd-content-tabs{padding:0 8px}
    .vd-tab-button{min-height:52px;padding:0 10px;font-size:var(--fs-sm)}
    .vd-tab-panel{padding:22px 18px}
    .vd-highlight-grid{grid-template-columns:1fr}
    .vd-spec-table th,.vd-spec-table td{display:block;width:auto;border:0}
    .vd-spec-table th{padding:10px 12px 2px;background:none}
    .vd-spec-table td{padding:0 12px 10px;border-bottom:1px solid var(--line)}
    .vd-spec-table tr:first-child th{border-top:1px solid var(--line)}
    .vd-spec-table tr:first-child td{border-top:0}
    .vd-footer-grid{grid-template-columns:1fr;gap:30px;padding:40px 0 28px}
    .vd-pagination{justify-content:center}
    .vd-pagination-info{width:100%;text-align:center}
}

@media (max-width:380px){
    .vd-product-grid,.vd-grid-3{grid-template-columns:1fr}
}

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

@media print{
    .vd-topbar,.vd-nav,.vd-search,.vd-footer,.vdp-thumbs,.vd-content-tabs{display:none !important}
    .vd-tab-panel[hidden]{display:block !important}
    body{background:#fff}
}
.vd-filters-body.is-loading{opacity:.55;pointer-events:none}