/* ============================================================
   XSPACE SHOP — INDUSTRIAL / TOMA
   ============================================================ */

:root{
    --xs-shop-blue:#07346b;
    --xs-shop-blue-dark:#032653;
    --xs-shop-text:#102a4c;
    --xs-shop-muted:#64748b;
    --xs-shop-border:#d8e0ea;
    --xs-shop-bg:#f6f8fb;
    --xs-shop-surface:#ffffff;
}

/* PAGE */

.ps-shop-page,
.ps-product-page{
    background:var(--xs-shop-bg);
    color:var(--xs-shop-text);
    padding:34px 0 70px;
    font-family:inherit;
}

.ps-shop-shell{
    width:min(1280px,calc(100% - 40px));
    margin:0 auto;

    display:grid;
    grid-template-columns:270px minmax(0,1fr);
    gap:30px;
    align-items:start;
}

/* SIDEBAR */

.ps-shop-sidebar{
    background:#fff;
    border:1px solid var(--xs-shop-border);
    border-radius:4px;
    padding:22px;

    position:sticky;
    top:120px;
}

.ps-filter-heading{
    padding-bottom:16px;
    margin-bottom:18px;
    border-bottom:2px solid var(--xs-shop-blue);
}

.ps-filter-heading span{
    display:block;
    color:var(--xs-shop-blue);
    font-size:18px;
    font-weight:800;
    text-transform:uppercase;
}

.ps-filter-heading small{
    display:block;
    margin-top:5px;
    color:var(--xs-shop-muted);
    font-size:12px;
}

.ps-filter-field{
    margin-bottom:16px;
}

.ps-filter-field label{
    display:block;
    margin-bottom:6px;
    color:var(--xs-shop-text);
    font-size:12px;
    font-weight:800;
}

.ps-filter-field input,
.ps-filter-field select{
    width:100%;
    height:44px;
    padding:0 12px;

    border:1px solid #cbd5e1;
    border-radius:3px;

    background:#fff;
    color:var(--xs-shop-text);

    font:inherit;
    font-size:13px;

    outline:none;
}

.ps-filter-field input:focus,
.ps-filter-field select:focus{
    border-color:var(--xs-shop-blue);
}

.ps-price-fields{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}

.ps-filter-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    margin-top:20px;
}

.ps-filter-actions button,
.ps-filter-actions a{
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:3px;
    text-decoration:none;

    font-size:13px;
    font-weight:800;
}

.ps-filter-actions button{
    border:0;
    background:var(--xs-shop-blue);
    color:#fff;
    cursor:pointer;
}

.ps-filter-actions a{
    border:1px solid var(--xs-shop-border);
    background:#fff;
    color:var(--xs-shop-blue);
}

/* CONTENT */

.ps-shop-content{
    min-width:0;
}

.ps-shop-header{
    margin-bottom:22px;
    padding-bottom:16px;

    border-bottom:1px solid var(--xs-shop-border);
}

.ps-shop-kicker{
    display:block;
    margin-bottom:5px;

    color:var(--xs-shop-blue);
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.ps-shop-header h1{
    margin:0;
    color:var(--xs-shop-blue);
    font-size:30px;
    line-height:1.15;
    font-weight:800;
    text-transform:uppercase;
}

.ps-shop-header p{
    margin:7px 0 0;
    color:var(--xs-shop-muted);
    font-size:13px;
}

/* CATEGORIES */

.ps-category-browser{
    margin:0 0 24px !important;
    padding:16px;

    background:#fff;
    border:1px solid var(--xs-shop-border);
    border-radius:4px;
}

.ps-main-category-row{
    gap:8px !important;
}

.ps-main-category-button,
.ps-main-category-all,
.ps-subcategory-row a{
    min-height:38px !important;
    padding:8px 13px !important;

    border:1px solid var(--xs-shop-border) !important;
    border-radius:3px !important;

    background:#fff !important;
    color:var(--xs-shop-text) !important;

    font-size:12px !important;
    font-weight:700 !important;
}

.ps-main-category-button:hover,
.ps-main-category-button.active,
.ps-main-category-all:hover,
.ps-main-category-all.active,
.ps-subcategory-row a:hover,
.ps-subcategory-row a.active{
    background:var(--xs-shop-blue) !important;
    border-color:var(--xs-shop-blue) !important;
    color:#fff !important;
}

/* PRODUCT GRID */

.ps-products-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
}

/* PRODUCT CARD */

.ps-product-card{
    display:flex;
    min-width:0;
    flex-direction:column;

    background:#fff;
    border:1px solid var(--xs-shop-border);
    border-radius:4px;

    overflow:hidden;

    transition:.15s ease;
}

.ps-product-card:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(15,23,42,.08);
}

.ps-product-image{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    aspect-ratio:1 / 1;

    background:#fff;
    border-bottom:1px solid #e9eef4;

    overflow:hidden;
}

.ps-product-image img{
    display:block;
    width:100%;
    height:100%;

    padding:14px;
    object-fit:contain;
}

.ps-product-placeholder{
    width:100%;
    height:100%;

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

    color:#94a3b8;
    font-size:13px;
    font-weight:700;
}

.ps-product-body{
    display:flex;
    flex:1;
    flex-direction:column;

    padding:15px;
}

.ps-product-title{
    color:var(--xs-shop-text);
    text-decoration:none;

    font-size:14px;
    line-height:1.35;
    font-weight:800;
}

.ps-product-sku{
    margin-top:7px;

    color:var(--xs-shop-muted);
    font-size:11px;
}

.ps-product-bottom{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:10px;

    margin-top:auto;
    padding-top:16px;
}

.ps-product-price{
    color:var(--xs-shop-blue);
    font-size:15px;
    font-weight:900;
}

.ps-add-cart{
    min-height:36px;
    padding:0 11px;

    border:0;
    border-radius:3px;

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

    font-size:11px;
    font-weight:800;

    cursor:pointer;
}

/* EMPTY */

.ps-shop-empty{
    padding:30px;

    background:#fff;
    border:1px solid var(--xs-shop-border);
    border-radius:4px;

    text-align:center;
}

/* PAGINATION */

.ps-custom-pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    margin-top:28px;
}

.ps-page-number,
.ps-page-arrow{
    min-width:38px;
    height:38px;

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

    border:1px solid var(--xs-shop-border);
    border-radius:3px;

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

    text-decoration:none;
    font-size:12px;
    font-weight:800;
}

.ps-page-number.active{
    background:var(--xs-shop-blue);
    border-color:var(--xs-shop-blue);
    color:#fff;
}

.ps-page-arrow.disabled{
    opacity:.35;
}

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */

.ps-product-detail{
    width:min(1180px,calc(100% - 40px));
    margin:0 auto;

    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:42px;

    padding:30px;

    background:#fff;
    border:1px solid var(--xs-shop-border);
    border-radius:4px;
}

.ps-detail-image{
    min-width:0;

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

    background:#f8fafc;
    border:1px solid #e2e8f0;
}

.ps-detail-image img{
    display:block;
    width:100%;
    max-height:620px;

    padding:24px;
    object-fit:contain;
}

.ps-detail-content h1{
    margin:12px 0 10px;

    color:var(--xs-shop-blue);
    font-size:30px;
    line-height:1.2;
    font-weight:800;
}

.ps-back-shop{
    color:var(--xs-shop-blue);
    font-size:12px;
    font-weight:800;
    text-decoration:none;
}

.ps-detail-sku{
    color:var(--xs-shop-muted);
    font-size:12px;
}

.ps-detail-price{
    margin:20px 0;

    color:var(--xs-shop-blue);
    font-size:24px;
    font-weight:900;
}

.ps-detail-excerpt{
    color:#475569;
    font-size:14px;
    line-height:1.7;
}

.ps-detail-cart{
    display:flex;
    gap:12px;
    align-items:flex-end;

    margin:24px 0;
    padding:18px;

    background:#f8fafc;
    border:1px solid #e2e8f0;
}

.ps-detail-cart label{
    display:grid;
    gap:5px;

    font-size:12px;
    font-weight:800;
}

.ps-detail-cart input{
    width:90px;
    height:42px;

    border:1px solid #cbd5e1;
    border-radius:3px;

    padding:0 10px;
}

.ps-detail-cart button{
    height:42px;
    padding:0 18px;

    border:0;
    border-radius:3px;

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

    font-weight:800;
    cursor:pointer;
}

.ps-detail-description{
    margin-top:28px;
    padding-top:22px;

    border-top:1px solid var(--xs-shop-border);

    color:#334155;
    line-height:1.75;
}

.ps-detail-description h2,
.ps-related-products h2{
    color:var(--xs-shop-blue);
    font-size:18px;
    font-weight:800;
    text-transform:uppercase;
}

.ps-related-products{
    width:min(1180px,calc(100% - 40px));
    margin:34px auto 0;
}

/* RESPONSIVE */

@media(max-width:1100px){
    .ps-products-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

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

    .ps-shop-sidebar{
        position:static;
    }

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

    .ps-product-detail{
        grid-template-columns:1fr;
    }
}

@media(max-width:600px){
    .ps-shop-page,
    .ps-product-page{
        padding:22px 0 80px;
    }

    .ps-shop-shell,
    .ps-product-detail,
    .ps-related-products{
        width:min(100% - 24px,1280px);
    }

    .ps-products-grid{
        grid-template-columns:1fr;
    }

    .ps-product-detail{
        padding:18px;
        gap:22px;
    }

    .ps-detail-content h1{
        font-size:24px;
    }
}

/* SHOP — razmak ispod glavnog headera */
.ps-shop-page,
.ps-product-page{
    padding-top:60px !important;
}