:root{--bg:#f5f7fa;--card:#fff;--ink:#081522;--muted:#6b7b8d;--navy:#05111f;--navy2:#0a2038;--blue:#08a9ff;--blue2:#1d6fd8;--line:#dfe7ef;--shadow:0 18px 50px rgba(3,18,34,.10)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.container{width:min(1180px,calc(100% - 40px));margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(5,17,31,.94);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.08)}.nav-wrap{height:78px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;color:#fff}.brand-mark{width:44px;height:44px;border:2px solid #fff;border-radius:14px;display:grid;place-items:center;font-weight:900;font-size:22px;color:var(--blue)}.brand strong{display:block;letter-spacing:.12em;font-size:14px}.brand small{display:block;color:#92a6ba;font-size:10px;letter-spacing:.18em;margin-top:3px}.main-nav{display:flex;gap:28px}.main-nav a{color:#dce7f1;font-weight:650;font-size:14px}.main-nav a:hover{color:#fff}.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:24px}
.hero{min-height:680px;position:relative;display:flex;align-items:center;background:radial-gradient(circle at 75% 25%,rgba(8,169,255,.22),transparent 33%),linear-gradient(135deg,#020914,#071d32 52%,#073c61);overflow:hidden}.hero:after{content:"";position:absolute;right:-10%;bottom:-35%;width:650px;height:650px;border:1px solid rgba(255,255,255,.08);border-radius:50%;box-shadow:0 0 0 80px rgba(255,255,255,.025),0 0 0 160px rgba(255,255,255,.015)}.hero-content{position:relative;z-index:2;color:#fff;max-width:900px}.eyebrow{font-size:12px;letter-spacing:.2em;font-weight:800;color:var(--blue);text-transform:uppercase}.hero h1,.page-hero h1{font-size:clamp(48px,8vw,96px);line-height:.94;letter-spacing:-.055em;margin:18px 0;max-width:950px}.hero p,.page-hero p{max-width:700px;font-size:19px;line-height:1.7;color:#b9c8d6}.hero-actions{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;border-radius:14px;border:1px solid transparent;font-weight:800;cursor:pointer}.btn-primary{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;box-shadow:0 12px 30px rgba(8,169,255,.25)}.btn-secondary{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:#fff}
.section{padding:86px 0}.section-dark{background:var(--navy);color:#fff}.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:32px}.section h2{font-size:clamp(34px,4vw,58px);letter-spacing:-.04em;margin:8px 0}.text-link{font-weight:800;color:var(--blue)}
.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.category-card{background:var(--card);padding:26px;border-radius:22px;border:1px solid var(--line);min-height:150px;box-shadow:0 10px 30px rgba(10,30,50,.04);transition:.2s}.category-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.category-icon{display:block;font-size:30px;color:var(--blue);margin-bottom:22px}.category-card strong{display:block;font-size:18px}.category-card small{display:block;color:var(--muted);margin-top:6px}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.product-card{background:#fff;border-radius:22px;padding:14px;color:var(--ink);border:1px solid var(--line)}.product-image{aspect-ratio:1/1;background:#eef3f7;border-radius:16px;overflow:hidden;margin-bottom:16px}.product-image img{width:100%;height:100%;object-fit:cover}.image-placeholder{width:100%;height:100%;display:grid;place-items:center;color:#93a5b7;font-weight:900;letter-spacing:.15em;background:linear-gradient(135deg,#eef3f7,#dfe9f1)}.product-meta{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#74879a;font-weight:800}.product-card h3{font-size:18px;margin:8px 0 14px}.price{font-size:20px;font-weight:900}.price-large{font-size:40px}.old-price{text-decoration:line-through;color:#8a99a8}
.brand-strip{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}.brand-strip a{background:#fff;border:1px solid var(--line);padding:18px 24px;border-radius:16px;font-weight:900}.brand-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.brand-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px}.brand-card strong{display:block;font-size:28px}.brand-card span{display:block;color:var(--blue);margin-top:20px;font-weight:800}
.cta{background:linear-gradient(135deg,var(--navy),var(--navy2));border-radius:32px;padding:50px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:30px}.cta p{color:#aebfd0;max-width:620px}.page-hero{padding:100px 0 70px;background:linear-gradient(135deg,#03101e,#082b49);color:#fff}.page-hero h1{font-size:clamp(46px,7vw,78px)}.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:34px}.chips a{background:#fff;border:1px solid var(--line);padding:10px 14px;border-radius:999px;font-weight:700;font-size:13px}.empty-state{padding:50px;background:#fff;border:1px solid var(--line);border-radius:24px;text-align:center}
.product-detail-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:start}.main-product-img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:28px;background:#edf3f7}.product-detail h1{font-size:clamp(42px,5vw,70px);line-height:1;margin:10px 0 20px}.lead{font-size:18px;line-height:1.7;color:var(--muted)}.availability{margin:20px 0;font-weight:800;color:#13845a}.product-copy{margin-top:30px;padding-top:24px;border-top:1px solid var(--line);line-height:1.8;color:#43566a}
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:24px}.contact-card,.form-card,.admin-panel{background:#fff;border:1px solid var(--line);border-radius:24px;padding:30px}.form-card label,.admin-form label,.login-card label{display:block;font-size:13px;font-weight:800;margin-bottom:16px}input,textarea,select{width:100%;padding:13px 14px;border:1px solid #d7e0e9;border-radius:12px;background:#fff;font:inherit;color:var(--ink);margin-top:7px}.alert{padding:14px 16px;border-radius:12px;margin-bottom:16px}.success{background:#e9f8f1;color:#116244}.error{background:#fff0ef;color:#9d302a}
.site-footer{background:#020b13;color:#aebdcb;padding:60px 0 26px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}.footer-title{color:#fff;font-weight:900;margin-bottom:12px}.footer-bottom{padding-top:30px;margin-top:30px;border-top:1px solid rgba(255,255,255,.08);font-size:13px}.prose{max-width:800px}.prose p{font-size:18px;line-height:1.8;color:#53677b}
.admin-body{background:#eef3f7;min-height:100vh}.admin-sidebar{position:fixed;left:0;top:0;bottom:0;width:250px;background:#05111f;padding:28px 18px;color:#fff}.admin-brand{font-weight:900;letter-spacing:.08em;margin:0 12px 24px}.admin-brand span{color:var(--blue)}.admin-sidebar nav{display:grid;gap:6px}.admin-sidebar a{padding:12px 14px;border-radius:12px;color:#c5d2de}.admin-sidebar a:hover{background:#0d2238;color:#fff}.admin-main{margin-left:250px;padding:36px}.admin-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.admin-top h1{font-size:42px;margin:4px 0}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}.stat-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px}.stat-card span{color:var(--muted);font-size:13px}.stat-card strong{display:block;font-size:42px;margin-top:8px}.admin-panel{margin-bottom:18px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:14px 12px;border-bottom:1px solid #e8eef4;text-align:left;font-size:14px}th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#7a8c9e}.inline-form{display:flex;gap:10px}.inline-form input{margin:0}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.check-row{display:flex;gap:24px;margin:20px 0}.check-row label{display:flex;align-items:center;gap:8px;margin:0}.check-row input{width:auto;margin:0}.admin-login{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 70% 20%,#0f4672,#03101e 55%)}.login-card{width:min(420px,calc(100% - 30px));background:#fff;border-radius:28px;padding:34px;box-shadow:0 25px 70px rgba(0,0,0,.35)}.login-card h1{margin:0}.login-card small{display:block;color:#8493a3;margin-top:18px}
@media(max-width:900px){.main-nav{display:none;position:absolute;top:78px;left:0;right:0;background:#05111f;padding:22px;flex-direction:column}.main-nav.open{display:flex}.menu-toggle{display:block}.category-grid,.product-grid{grid-template-columns:repeat(2,1fr)}.brand-grid{grid-template-columns:1fr 1fr}.product-detail-grid,.contact-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,1fr)}.admin-sidebar{position:relative;width:auto}.admin-main{margin:0;padding:20px}.admin-body{display:block}.admin-sidebar nav{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.container{width:min(100% - 24px,1180px)}.hero{min-height:620px}.hero h1{font-size:52px}.section{padding:62px 0}.category-grid,.product-grid,.brand-grid,.footer-grid,.stats-grid,.form-grid{grid-template-columns:1fr}.section-head,.cta{align-items:flex-start;flex-direction:column}.cta{padding:30px}.admin-top{align-items:flex-start;gap:12px;flex-direction:column}.admin-main{padding:14px}.admin-panel{padding:18px}}

.admin-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
}

.admin-image-item {
    position: relative;
    background: #fff;
    border: 1px solid #dfe7ef;
    border-radius: 18px;
    padding: 8px;
}

.admin-image-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
}

.admin-image-delete {
    position: absolute;
    top: 14px;
    right: 14px;

    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #d92d20;
    color: #fff;

    border-radius: 50%;

    font-size: 22px;
    font-weight: 700;
    line-height: 1;

    box-shadow: 0 5px 15px rgba(0,0,0,.25);
}

.admin-image-delete:hover {
    background: #b42318;
}
.working-hours-list {
    display: grid;
    gap: 10px;
    margin-top: 25px;
}

.working-hours-row {
    display: grid;
    grid-template-columns: 150px 160px 1fr 1fr;
    align-items: center;
    gap: 12px;

    padding: 14px;

    background: #f7f9fb;

    border: 1px solid #e0e7ef;
    border-radius: 16px;
}

.working-day {
    font-size: 14px;
}

.hours-period {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hours-period input {
    margin: 0;
}

.working-hours-row select {
    margin: 0;
}

.admin-help {
    color: #6b7b8d;
    line-height: 1.6;
    max-width: 750px;
}

.shop-status {
    margin-top: 16px;
    padding: 14px 16px;

    border-radius: 14px;

    font-size: 14px;
    font-weight: 700;
}

.shop-on {
    background: #e8f8f0;
    color: #126442;
}

.shop-off {
    background: #f1f4f7;
    color: #637384;
}

.settings-save {
    position: sticky;
    bottom: 20px;

    display: flex;
    justify-content: flex-end;

    padding: 14px;

    background: rgba(238,243,247,.9);

    backdrop-filter: blur(12px);

    border-radius: 18px;
}

@media (max-width: 900px) {

    .working-hours-row {
        grid-template-columns: 1fr;
    }

    .hours-period {
        width: 100%;
    }

    .hours-period input {
        flex: 1;
    }

}

.cart-nav-link{
    display:flex;
    align-items:center;
    gap:7px;
}

.cart-count{
    min-width:22px;
    height:22px;
    padding:0 6px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--blue);
    color:#fff;
    font-size:11px;
    font-weight:900;
}

.cart-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 360px;
    gap:28px;
    align-items:start;
}

.cart-products{
    min-width:0;
}

.cart-item{
    display:grid;
    grid-template-columns:120px minmax(0,1fr) 110px 130px;
    gap:20px;
    align-items:center;
    background:#fff;
    border:1px solid var(--line);
    border-radius:22px;
    padding:16px;
    margin-bottom:14px;
}

.cart-item-image{
    width:120px;
    height:120px;
    border-radius:16px;
    overflow:hidden;
    background:#eef3f7;
}

.cart-item-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.cart-item-info h3{
    margin:6px 0;
    font-size:19px;
}

.cart-sku,
.cart-unit-price{
    color:var(--muted);
    font-size:13px;
    margin-top:5px;
}

.cart-item-quantity label{
    font-size:12px;
    font-weight:800;
    color:var(--muted);
}

.cart-item-quantity input{
    width:80px;
}

.cart-item-total{
    text-align:right;
}

.cart-item-total strong{
    display:block;
    font-size:18px;
}

.cart-remove{
    display:inline-block;
    margin-top:10px;
    color:#b42318;
    font-size:13px;
    font-weight:800;
}

.cart-actions{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-top:20px;
}

.cart-back{
    background:#fff;
    border:1px solid var(--line);
}

.cart-update{
    background:#0b2239;
    color:#fff;
}

.cart-summary{
    position:sticky;
    top:100px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:26px;
    padding:28px;
    box-shadow:var(--shadow);
}

.cart-summary h2{
    font-size:34px;
    margin:7px 0 24px;
}

.cart-summary-row,
.cart-summary-total{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:14px 0;
    border-bottom:1px solid var(--line);
}

.cart-summary-total{
    border-bottom:0;
    padding:22px 0;
    font-size:21px;
}

.free-delivery-note{
    margin-top:16px;
    padding:13px 14px;
    border-radius:13px;
    background:#eef7ff;
    color:#265d88;
    font-size:13px;
    line-height:1.5;
}

.free-delivery-ok{
    background:#e9f8f1;
    color:#126442;
}

.cart-checkout{
    width:100%;
}

.cart-payment-note{
    color:var(--muted);
    font-size:12px;
    line-height:1.55;
    margin:16px 0 0;
}

.product-add-cart{
    display:flex;
    align-items:flex-end;
    gap:12px;
    margin-top:20px;
    flex-wrap:wrap;
}

.product-qty{
    width:100px;
    margin:0;
    font-size:12px;
    font-weight:800;
}

.product-qty input{
    margin-top:7px;
}

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

    .cart-summary{
        position:static;
    }

    .cart-item{
        grid-template-columns:100px minmax(0,1fr);
    }

    .cart-item-image{
        width:100px;
        height:100px;
    }

    .cart-item-quantity,
    .cart-item-total{
        grid-column:2;
        text-align:left;
    }

    .cart-item-quantity input{
        width:100px;
    }
}

@media(max-width:600px){
    .cart-item{
        grid-template-columns:78px minmax(0,1fr);
        gap:14px;
    }

    .cart-item-image{
        width:78px;
        height:78px;
    }

    .cart-actions{
        flex-direction:column;
    }

    .cart-actions .btn{
        width:100%;
    }
}
/* CHECKOUT */
.checkout-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 380px;
    gap:28px;
    align-items:start;
}

.checkout-form{
    display:grid;
    gap:18px;
}

.checkout-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:24px;
    padding:30px;
}

.checkout-card h2{
    margin:7px 0 24px;
    font-size:34px;
}

.payment-option{
    display:flex !important;
    align-items:flex-start;
    gap:14px;
    padding:18px;
    border:1px solid var(--line);
    border-radius:16px;
    margin-bottom:12px !important;
    cursor:pointer;
}

.payment-option input{
    width:auto;
    margin:3px 0 0;
}

.payment-option span{
    display:block;
}

.payment-option strong{
    display:block;
    margin-bottom:5px;
}

.payment-option small{
    display:block;
    color:var(--muted);
    line-height:1.55;
}

.checkout-summary{
    position:sticky;
    top:100px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:26px;
    padding:28px;
    box-shadow:var(--shadow);
}

.checkout-summary h2{
    margin:7px 0 24px;
    font-size:34px;
}

.checkout-products{
    display:grid;
    gap:14px;
    margin-bottom:14px;
}

.checkout-product{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding-bottom:14px;
    border-bottom:1px solid var(--line);
}

.checkout-product > div{
    min-width:0;
}

.checkout-product strong{
    display:block;
}

.checkout-product small{
    display:block;
    margin-top:4px;
    color:var(--muted);
}

.checkout-submit-desktop{
    width:100%;
    margin-top:12px;
}

.checkout-submit-mobile{
    display:none;
}

.checkout-note{
    color:var(--muted);
    font-size:12px;
    line-height:1.55;
    margin:14px 0 0;
}

.order-success-wrap{
    max-width:780px;
}

.order-success-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:28px;
    padding:40px;
    box-shadow:var(--shadow);
}

.order-success-icon{
    width:62px;
    height:62px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#e9f8f1;
    color:#126442;
    font-size:30px;
    font-weight:900;
    margin-bottom:22px;
}

.order-success-card h2{
    font-size:36px;
    margin:0 0 14px;
}

.order-success-card p{
    color:var(--muted);
    line-height:1.7;
}

.order-success-summary{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
    margin:28px 0;
}

.order-success-summary > div{
    background:#f7f9fb;
    border:1px solid var(--line);
    border-radius:16px;
    padding:16px;
}

.order-success-summary span{
    display:block;
    font-size:12px;
    color:var(--muted);
    margin-bottom:6px;
}

.order-success-summary strong{
    display:block;
}

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

    .checkout-summary{
        position:static;
    }

    .checkout-submit-desktop{
        display:none;
    }

    .checkout-submit-mobile{
        display:block;
    }

    .checkout-submit-mobile .btn{
        width:100%;
    }
}

@media(max-width:600px){
    .checkout-card{
        padding:20px;
    }

    .order-success-card{
        padding:24px;
    }

    .order-success-summary{
        grid-template-columns:1fr;
    }
}
/* ADMIN PORUDŽBINE */
.admin-order-filters{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:18px;
}

.admin-order-filters a{
    background:#fff;
    border:1px solid var(--line);
    border-radius:999px;
    padding:9px 13px;
    font-size:12px;
    font-weight:800;
    color:#617487;
}

.admin-order-filters a.active{
    background:#071d32;
    border-color:#071d32;
    color:#fff;
}

.order-status{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:0 10px;
    border-radius:999px;
    background:#eef3f7;
    font-size:11px;
    font-weight:900;
}

.status-new{
    background:#eaf5ff;
    color:#12628e;
}

.status-awaiting_invoice,
.status-awaiting_payment{
    background:#fff5dd;
    color:#8b6415;
}

.status-paid,
.status-confirmed{
    background:#e9f8f1;
    color:#126442;
}

.status-sent{
    background:#eeeaff;
    color:#514097;
}

.status-delivered{
    background:#e8f8f0;
    color:#116244;
}

.status-cancelled{
    background:#fff0ef;
    color:#9d302a;
}

.order-admin-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 350px;
    gap:20px;
    align-items:start;
}

.order-info-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}

.order-info-grid > div{
    padding:14px;
    border-radius:14px;
    background:#f7f9fb;
    border:1px solid var(--line);
}

.order-info-grid span,
.order-admin-payment span{
    display:block;
    color:var(--muted);
    font-size:11px;
    margin-bottom:5px;
}

.order-info-grid strong,
.order-admin-payment strong{
    display:block;
}

.order-admin-note{
    margin-top:18px;
    padding:16px;
    border-radius:14px;
    background:#fff8e8;
    line-height:1.6;
}

.order-admin-note strong{
    display:block;
    margin-bottom:6px;
}

.order-admin-summary{
    position:sticky;
    top:20px;
}

.order-admin-summary h2{
    font-size:25px;
    margin:7px 0 22px;
}

.order-total-row{
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:11px 0;
    border-bottom:1px solid var(--line);
}

.order-total-row.total{
    padding:17px 0;
    font-size:20px;
    border-bottom:0;
}

.order-admin-payment{
    padding:15px;
    margin:5px 0 18px;
    background:#f7f9fb;
    border-radius:14px;
}

.order-status-form label{
    display:block;
    font-size:12px;
    font-weight:800;
}

.order-status-form .btn{
    width:100%;
    margin-top:12px;
}

.order-admin-date{
    margin-top:18px;
    color:var(--muted);
    font-size:11px;
}

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

    .order-admin-summary{
        position:static;
    }
}

@media(max-width:600px){
    .order-info-grid{
        grid-template-columns:1fr;
    }
}
.admin-sidebar nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.menu-badge {
    min-width: 22px;
    height: 22px;
    padding: 0 7px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    background: #08a9ff;
    color: #fff;

    font-size: 11px;
    font-weight: 900;
}

.brand-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.site-logo {
    display: block;
    width: 190px;
    height: 52px;
    object-fit: contain;
    object-position: left center;
}

@media (max-width: 768px) {
    .site-logo {
        width: 155px;
        height: 46px;
    }
}
/* ================================================================
   HEADER + HOME REFRESH
================================================================ */

.site-header{
    min-height:66px;
}

.nav-wrap{
    height:66px;
}

.brand-logo{
    display:flex;
    align-items:center;
    flex-shrink:0;
}

.site-logo{
    display:block;
    width:185px;
    height:44px;
    object-fit:contain;
    object-position:left center;
}

.main-nav{
    align-items:center;
}

.home-hero{
    min-height:540px;
    padding:70px 0 78px;
}

.home-hero .hero-content{
    max-width:820px;
}

.home-hero h1{
    max-width:900px;
    font-size:clamp(48px,6.2vw,82px);
    line-height:.96;
    margin:16px 0 20px;
}

.home-hero p{
    max-width:690px;
    margin:0;
    font-size:18px;
    line-height:1.65;
}

.home-hero .hero-actions{
    margin-top:28px;
}

.home-categories{
    padding-top:74px;
}

.section-intro{
    max-width:680px;
    margin:12px 0 0;
    color:var(--muted);
    font-size:16px;
    line-height:1.65;
}

.category-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

.category-card{
    position:relative;
    display:flex;
    align-items:center;
    gap:16px;
    min-height:112px;
    padding:20px 48px 20px 20px;
}

.category-icon{
    width:48px;
    height:48px;
    flex:0 0 48px;
    display:grid;
    place-items:center;
    margin:0;
    border-radius:15px;
    background:linear-gradient(145deg,#eaf7ff,#f5fbff);
    color:var(--blue);
    border:1px solid #d8edf9;
}

.category-icon svg{
    width:25px;
    height:25px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.category-content{
    min-width:0;
}

.category-content strong{
    display:block;
    font-size:17px;
    line-height:1.2;
}

.category-content small{
    display:block;
    margin-top:5px;
    color:var(--muted);
    font-size:12px;
}

.category-arrow{
    position:absolute;
    right:18px;
    top:50%;
    transform:translateY(-50%);
    font-size:18px;
    color:#9aabba;
    transition:.2s ease;
}

.category-card:hover .category-arrow{
    right:14px;
    color:var(--blue);
}

.home-brands{
    padding-bottom:48px;
}

.section-head.compact{
    margin-bottom:22px;
}

.home-cta-section{
    padding-top:28px;
}

@media(max-width:1050px){

    .site-logo{
        width:165px;
        height:42px;
    }

    .main-nav{
        gap:20px;
    }

    .category-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media(max-width:900px){

    .site-header{
        min-height:64px;
    }

    .nav-wrap{
        height:64px;
    }

    .site-logo{
        width:155px;
        height:40px;
    }

    .main-nav{
        top:64px;
    }

    .home-hero{
        min-height:500px;
        padding:58px 0 66px;
    }

    .category-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:600px){

    .site-logo{
        width:142px;
        height:38px;
    }

    .home-hero{
        min-height:auto;
        padding:52px 0 58px;
    }

    .home-hero h1{
        font-size:46px;
    }

    .home-hero p{
        font-size:16px;
    }

    .home-categories{
        padding-top:54px;
    }

    .category-grid{
        grid-template-columns:1fr;
        gap:10px;
    }

    .category-card{
        min-height:92px;
        padding:16px 44px 16px 16px;
    }

    .category-icon{
        width:44px;
        height:44px;
        flex-basis:44px;
        border-radius:13px;
    }

    .category-icon svg{
        width:23px;
        height:23px;
    }
}
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.footer-credit {
    color: #7f91a3;
    font-size: 12px;
}

.footer-credit a {
    color: #ffffff;
    font-weight: 800;
    transition: .2s;
}

.footer-credit a:hover {
    color: var(--blue);
}

@media (max-width: 600px) {
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}
.cart-nav-link {
    position: relative;
    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    color: #fff;
    background: rgba(255,255,255,.06);

    transition: .2s ease;
}

.cart-nav-link:hover {
    background: rgba(255,255,255,.12);
    color: var(--blue);
}

.cart-icon {
    width: 22px;
    height: 22px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cart-count {
    position: absolute;
    top: -5px;
    right: -5px;

    min-width: 20px;
    height: 20px;
    padding: 0 5px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--blue);
    color: #fff;

    border: 2px solid #05111f;
    border-radius: 999px;

    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}
/* ================================================================
   PRAVNE STRANICE + FOOTER LINKOVI
================================================================ */

.footer-legal{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    padding-top:24px;
    margin-top:28px;
    border-top:1px solid rgba(255,255,255,.08);
}

.footer-legal a{
    color:#8fa2b4;
    font-size:12px;
    transition:.2s ease;
}

.footer-legal a:hover{
    color:#fff;
}

.legal-hero{
    padding:78px 0 56px;
}

.legal-hero h1{
    max-width:850px;
}

.legal-section{
    padding-top:60px;
}

.legal-layout{
    display:grid;
    grid-template-columns:240px minmax(0,1fr);
    gap:28px;
    align-items:start;
}

.legal-nav{
    position:sticky;
    top:90px;
    display:grid;
    gap:5px;
    padding:18px;
    border:1px solid var(--line);
    border-radius:20px;
    background:#fff;
}

.legal-nav strong{
    padding:6px 9px 12px;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--muted);
}

.legal-nav a{
    padding:10px 11px;
    border-radius:10px;
    color:#526779;
    font-size:13px;
    font-weight:700;
}

.legal-nav a:hover,
.legal-nav a.active{
    background:#eef7ff;
    color:#087dbb;
}

.legal-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:26px;
    padding:38px;
}

.legal-content{
    max-width:900px;
}

.legal-content h2{
    margin:36px 0 12px;
    font-size:25px;
    letter-spacing:-.025em;
}

.legal-content h2:first-child{
    margin-top:0;
}

.legal-content p{
    margin:0 0 16px;
    color:#526779;
    font-size:15px;
    line-height:1.8;
}

.legal-content a{
    color:#087dbb;
    font-weight:700;
}

.legal-contact-box,
.legal-highlight,
.legal-note{
    margin:18px 0 22px;
    padding:18px 20px;
    border-radius:15px;
    background:#f5f8fb;
    border:1px solid #e5ebf1;
    color:#43586b;
    line-height:1.7;
}

.legal-highlight strong{
    display:block;
    margin-bottom:7px;
    color:#102030;
}

.legal-highlight p{
    margin:0;
}

.legal-note{
    font-size:14px;
}

@media(max-width:900px){

    .legal-layout{
        grid-template-columns:1fr;
    }

    .legal-nav{
        position:static;
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .legal-nav strong{
        grid-column:1 / -1;
    }
}

@media(max-width:600px){

    .footer-legal{
        gap:10px 16px;
    }

    .legal-hero{
        padding:58px 0 42px;
    }

    .legal-card{
        padding:22px;
        border-radius:20px;
    }

    .legal-nav{
        grid-template-columns:1fr;
    }

    .legal-nav strong{
        grid-column:auto;
    }
}
.contact-social-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:5px;
    color:var(--blue);
    font-weight:800;
}

.contact-map-button{
    margin-top:6px;
}

.contact-map-section{
    padding-top:0;
}

.contact-map-wrap{
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:26px;
    background:#fff;
    box-shadow:var(--shadow);
}

.contact-map-wrap iframe{
    display:block;
    width:100%;
    min-height:420px;
}

@media(max-width:600px){
    .contact-map-wrap iframe{
        min-height:330px;
        height:330px;
    }
}
/* ================================================================
   HERO SA OPREMOM
================================================================ */

.home-hero{
    position:relative;
    overflow:hidden;
    min-height:540px;
    padding:70px 0 64px;
}

.hero-layout{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(0, 1.08fr) minmax(420px, .92fr);
    gap:28px;
    align-items:center;
}

.home-hero .hero-content{
    position:relative;
    z-index:3;
    max-width:820px;
}

.home-hero h1{
    max-width:900px;
    font-size:clamp(48px,6.1vw,82px);
    line-height:.96;
    margin:16px 0 20px;
}

.home-hero p{
    max-width:690px;
    margin:0;
    font-size:18px;
    line-height:1.65;
}

.home-hero .hero-actions{
    margin-top:28px;
}

.hero-visual{
    position:relative;
    align-self:end;
    min-height:430px;
    display:flex;
    align-items:flex-end;
    justify-content:flex-end;
    pointer-events:none;
}

.hero-visual::before{
    content:"";
    position:absolute;
    width:430px;
    height:430px;
    right:-40px;
    bottom:0;
    border-radius:50%;
    background:radial-gradient(
        circle,
        rgba(24,168,255,.16) 0%,
        rgba(24,168,255,.08) 35%,
        rgba(24,168,255,0) 72%
    );
    filter:blur(2px);
}

.hero-gear-image{
    position:relative;
    z-index:2;
    display:block;
    width:min(660px, 46vw);
    max-width:none;
    height:auto;
    margin-right:-28px;
    margin-bottom:-8px;
    object-fit:contain;
    filter:drop-shadow(0 30px 50px rgba(0,0,0,.34));
}

@media(max-width:1180px){

    .hero-layout{
        grid-template-columns:minmax(0,1fr) 430px;
        gap:10px;
    }

    .hero-gear-image{
        width:520px;
        margin-right:-55px;
    }
}

@media(max-width:980px){

    .home-hero{
        min-height:auto;
        padding:58px 0 0;
    }

    .hero-layout{
        grid-template-columns:1fr;
        gap:10px;
    }

    .home-hero .hero-content{
        max-width:760px;
    }

    .hero-visual{
        min-height:300px;
        margin-top:8px;
        justify-content:center;
    }

    .hero-gear-image{
        width:min(620px, 82vw);
        margin:0 auto -12px;
    }

    .hero-visual::before{
        width:520px;
        height:300px;
        right:50%;
        transform:translateX(50%);
        bottom:-10px;
    }
}

@media(max-width:600px){

    .home-hero{
        padding:48px 0 0;
    }

    .home-hero h1{
        font-size:44px;
    }

    .home-hero p{
        font-size:16px;
    }

    .hero-visual{
        min-height:230px;
        margin-top:14px;
    }

    .hero-gear-image{
        width:112vw;
        max-width:560px;
        margin:0 -6vw -8px auto;
    }

    .hero-visual::before{
        width:360px;
        height:220px;
    }
}

/* ================================================================
   FULL WIDTH HERO - SLIKA SE ZADAJE IZ INDEX.PHP
================================================================ */

.home-hero{
    position:relative;
    overflow:hidden;
    min-height:560px;
    padding:82px 0 84px;

    background-image:
        linear-gradient(
            90deg,
            rgba(1,8,17,.97) 0%,
            rgba(1,8,17,.92) 28%,
            rgba(1,8,17,.72) 48%,
            rgba(1,8,17,.34) 72%,
            rgba(1,8,17,.16) 100%
        ),
        var(--hero-image);

    background-size:cover;
    background-position:center right;
    background-repeat:no-repeat;
}

.home-hero::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(
        180deg,
        rgba(0,0,0,.10) 0%,
        rgba(0,0,0,.02) 45%,
        rgba(0,0,0,.18) 100%
    );
}

.home-hero .container{
    position:relative;
    z-index:2;
}

.home-hero .hero-content{
    max-width:790px;
}

.home-hero .eyebrow{
    color:#19adff;
}

.home-hero h1{
    max-width:790px;
    margin:16px 0 22px;
    font-size:clamp(50px,6vw,84px);
    line-height:.96;
    color:#fff;
    text-shadow:0 3px 30px rgba(0,0,0,.28);
}

.home-hero p{
    max-width:670px;
    margin:0;
    color:rgba(255,255,255,.78);
    font-size:18px;
    line-height:1.65;
    text-shadow:0 2px 18px rgba(0,0,0,.25);
}

.home-hero .hero-actions{
    margin-top:30px;
}

.home-hero .btn-secondary{
    color:#fff;
    border-color:rgba(255,255,255,.26);
    background:rgba(8,28,45,.55);
    backdrop-filter:blur(6px);
}

@media(max-width:980px){
    .home-hero{
        min-height:520px;
        padding:68px 0 72px;
        background-position:62% center;
    }
}

@media(max-width:700px){
    .home-hero{
        min-height:520px;
        padding:58px 0 64px;
        background-position:70% center;
    }

    .home-hero h1{
        font-size:46px;
    }

    .home-hero p{
        font-size:16px;
    }
}

@media(max-width:520px){
    .home-hero{
        min-height:500px;
        padding:50px 0 56px;
        background-position:73% center;
    }

    .home-hero h1{
        font-size:41px;
    }
}
.error-page{
    min-height:62vh;
    display:flex;
    align-items:center;
}
.error-404{
    max-width:760px;
    margin:30px auto;
    text-align:center;
}
.error-404 h1{
    margin:12px 0 14px;
    font-size:clamp(42px,6vw,72px);
    line-height:1;
}
.error-404 p{
    margin:0 auto 28px;
    max-width:560px;
}
.error-404 .hero-actions{
    justify-content:center;
}
/* ================================================================
   VELIČINE KAO KOCKICE
================================================================ */

.product-size-picker{
    margin:18px 0 8px;
}

.product-size-label{
    margin-bottom:10px;
    font-weight:800;
    color:#102030;
}

.product-size-options{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.size-option{
    position:relative;
    cursor:pointer;
}

.size-option input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.size-option span{
    min-width:52px;
    height:48px;
    padding:0 14px;
    border:1px solid #d8e0e8;
    border-radius:12px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    color:#102030;
    transition:.18s ease;
    box-shadow:0 2px 8px rgba(0,0,0,.02);
}

.size-option:hover span{
    border-color:#149fe8;
}

.size-option input:checked + span{
    background:#109fe8;
    border-color:#109fe8;
    color:#fff;
    box-shadow:0 8px 18px rgba(16,159,232,.22);
}

.size-option.disabled{
    cursor:not-allowed;
}

.size-option.disabled span{
    opacity:.38;
    text-decoration:line-through;
    background:#f3f5f7;
}


/* ================================================================
   PREPORUČENI PROIZVODI - 4 U REDU
================================================================ */

.product-recommendations{
    padding-top:10px;
    padding-bottom:38px;
}

.product-recommendations .section-head{
    margin-bottom:16px;
}

.product-recommendations .section-head h2{
    margin:4px 0 0;
    font-size:clamp(24px,2.6vw,32px);
}

.recommend-slider-wrap{
    position:relative;
}

.recommend-slider{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:calc((100% - 48px) / 4);
    gap:16px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    padding:2px 0 8px;
}

.recommend-slider::-webkit-scrollbar{
    display:none;
}

.recommend-card{
    scroll-snap-align:start;
    background:#fff;
    border:1px solid #e3e9ef;
    border-radius:16px;
    overflow:hidden;
    min-width:0;
    transition:transform .18s ease, box-shadow .18s ease;
}

.recommend-card:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 26px rgba(0,0,0,.06);
}

.recommend-card a{
    display:block;
    color:inherit;
    text-decoration:none;
    padding:10px;
}

.recommend-image{
    aspect-ratio:1 / .78;
    border-radius:12px;
    overflow:hidden;
    background:#f7f8fa;
    margin-bottom:10px;
}

.recommend-image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}

.recommend-card .product-meta{
    font-size:11px;
    margin-bottom:4px;
}

.recommend-card h3{
    margin:4px 0 8px;
    font-size:14px;
    line-height:1.28;
}

.recommend-price{
    display:flex;
    align-items:center;
    gap:7px;
    flex-wrap:wrap;
}

.recommend-card .price{
    font-size:15px;
}

.recommend-card .old-price{
    font-size:11px;
}

.recommend-arrow{
    position:absolute;
    z-index:3;
    top:50%;
    transform:translateY(-50%);
    width:34px;
    height:34px;
    border:1px solid #dce3e9;
    border-radius:50%;
    background:#fff;
    box-shadow:0 6px 16px rgba(0,0,0,.08);
    cursor:pointer;
    font-size:22px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
}

.recommend-prev{
    left:-16px;
}

.recommend-next{
    right:-16px;
}

@media(max-width:1000px){
    .recommend-slider{
        grid-auto-columns:calc((100% - 32px) / 3);
    }
}

@media(max-width:760px){
    .recommend-slider{
        grid-auto-columns:calc((100% - 16px) / 2);
    }

    .recommend-arrow{
        display:none;
    }
}

@media(max-width:520px){
    .product-recommendations{
        padding-bottom:30px;
    }

    .recommend-slider{
        grid-auto-columns:78%;
    }

    .size-option span{
        min-width:48px;
        height:44px;
        padding:0 12px;
    }
}
/* PRODUCT PAGE — veličine i preporuke; isti stilovi su i inline u proizvod.php */
.dsb-size-list{display:flex;flex-wrap:wrap;gap:9px}
.dsb-recommend-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}