@font-face {
    font-family: "Shabnam-Bold";
    src: url("../fonts/Shabnam-Bold-P.woff2") format("woff2"),
         url("../fonts/Shabnam-Bold-P.woff2") format("woff");
    font-weight: 600;
    font-style: normal;
    font-feature-settings: "ss01";
    font-variant-numeric: normal;
}

		@font-face {
    font-family: "Gandom";
    src: url("../fonts/Shabnam-Bold-P") format("woff2"),
         url("../fonts/Shabnam-Bold-P") format("woff");

    font-weight: 600;
    font-style: normal;
    font-feature-settings: "ss01";
    font-variant-numeric: normal;
}


:root{
--font-family:Shabnam-Bold;
--fs-badge:12px;
--fs-small:13px;
--fs-label:14px;
--fs-text:15px;
--fs-product:17px;
--fs-quick-title:20px;
--fs-price:22px;
--fs-quick-price:22px;
--fs-title:22px;
--fs-heading:24px;
--fs-brand:26px;
--fs-close:24px;

--radius-sm:12px;
--radius-md:14px;
--radius-lg:15px;
--radius-xl:22px;
--radius-2xl:24px;
--radius-3xl:28px;
--radius-round:30px;

--c-white:#fff;
--c-body:#f6f7fb;
--c-dark:#111827;
--c-text:#1f2937;

--c-muted:#64748b;
--c-muted-2:#6b7280;
--c-muted-3:#475569;
--c-muted-4:#94a3b8;

--c-primary:#2563eb;
--c-primary-hover:#1d4ed8;
--c-primary-light:#dbeafe;
--c-primary-bg:#eff6ff;

--c-secondary:#7c3aed;

--c-success:#059669;
--c-success-btn:#16a34a;
--c-success-hover:#15803d;

--c-danger:#ef4444;

--c-border:#ddd;
--c-border-light:#dbe3ef;
--c-border-card:#eef2f7;

--c-bg:#f8fafc;
--c-bg-light:#f1f5f9;

--overlay:rgba(15,23,42,.45);
--overlay-dark:rgba(15,23,42,.5);

--shadow-header:0 10px 30px rgba(0,0,0,.06);
--shadow-card:0 8px 25px rgba(15,23,42,.06);
--shadow-card-hover:0 25px 60px rgba(15,23,42,.15);
--shadow-modal:-20px 0 50px rgba(0,0,0,.15);
--shadow-primary:0 8px 20px rgba(37,99,235,.25);
--shadow-quick:0 30px 80px rgba(0,0,0,.2);

--gradient:linear-gradient(90deg,var(--site-color),var(--site-color));
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html,
body{
width:100%;
min-height:100%;
}

body{
direction:rtl;
background:var(--c-body);
font-family:var(--font-family);
color:var(--c-text);
}

a{
text-decoration:none;
color:inherit;
}

img{
display:block;
max-width:100%;
}

.container{
width:90%;
max-width:1200px;
margin:auto;
padding:20px;
}

.shop-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:18px 25px;
margin-bottom:25px;
background:var(--c-white);
border:1px solid var(--c-border-card);
border-radius:var(--radius-2xl);
box-shadow:var(--shadow-header);
}

.brand{
min-width:220px;
}

.brand h1{
font-size:var(--fs-brand);
font-weight:900;
color:var(--c-dark);
}

.brand span{
font-size:var(--fs-small);
color:var(--c-muted-2);
}

.search-box{
display:flex;
flex:1;
gap:8px;
max-width:100%;
}

.search-box input{
flex:1;
height:50px;
padding:0 18px;
border:1px solid var(--c-border-light);
border-radius:var(--radius-lg);
background:var(--c-bg);
font-family:var(--font-family);
font-size:var(--fs-text);
}

.search-box input:focus{
outline:none;
border-color:var(--site-color);
background:var(--c-white);
}

.search-box button{
width:55px;
height:50px;
border:none;
border-radius:var(--radius-lg);
background:var(--site-color);
color:var(--c-white);
cursor:pointer;
transition:.3s;
}

.search-box button:hover{
background:var(--site-color-hover);
}

.filter-btn{
height:50px;
padding:0 25px;
border:none;
border-radius:var(--radius-lg);
background:var(--site-color);
color:var(--c-white);
font-family:var(--font-family);
font-size:var(--fs-text);
font-weight:700;
cursor:pointer;
transition:.3s;
}

.filter-btn:hover{
background:var(--site-color-hover);
}

.products-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:18px 22px;
margin-bottom:20px;
background:var(--c-white);
border:1px solid var(--c-border-card);
border-radius:var(--radius-xl);
box-shadow:var(--shadow-card);
}

.products-info span{
display:block;
font-size:var(--fs-small);
color:var(--c-muted);
}

.sort-buttons{
display:flex;
gap:10px;
flex-wrap:wrap;
}

.sort-buttons a{
display:flex;
align-items:center;
justify-content:center;
height:42px;
padding:0 18px;
border-radius:var(--radius-md);
background:var(--c-bg-light);
color:var(--c-muted-3);
font-size:var(--fs-small);
font-weight:700;
transition:.3s;
}

.sort-buttons a:hover{
background:var(--site-color-light);
color:var(--site-color);
}

.sort-buttons a.active{
background:var(--site-color);
color:var(--c-white);
box-shadow:var(--shadow-primary);
}

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

.product{
position:relative;
overflow:hidden;
background:var(--c-white);
border:1px solid var(--c-border-card);
border-radius:var(--radius-3xl);
box-shadow:var(--shadow-card);
transition:.35s;
}

.product:hover{
transform:translateY(-12px);
box-shadow:var(--shadow-card-hover);
}

.product::after{
content:"";
position:absolute;
bottom:0;
right:0;
width:100%;
height:4px;
background:var(--gradient);
transform:scaleX(0);
transition:.4s;
}

.product:hover::after{
transform:scaleX(1);
}

.product-image{
height:330px;
overflow:hidden;
background:var(--c-bg);
}

.product-image img{
width:100%;
height:100%;
object-fit:cover;
transition:.6s;
}

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

.badge{
position:absolute;
top:18px;
right:18px;
z-index:5;
width:55px;
height:55px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
color:var(--c-white);
font-size:var(--fs-badge);
font-weight:900;
}

.badge.special{
background:var(--c-secondary);
}

.badge.discount{
background:var(--c-danger);
}

.product-body{
padding:22px;
}
.product-title{
height:62px;
overflow:hidden;
font-size:var(--fs-product);
font-weight:900;
line-height:1.9;
color:var(--c-dark);
}

.product:hover .product-title{
color:var(--site-color);
}

.price-box{
margin-top:15px;
}

.old-price{
font-size:var(--fs-small);
color:var(--c-muted-4);
text-decoration:line-through;
}

.price{
font-size:var(--fs-price);
font-weight:900;
color:var(--c-success);
}

.price small{
font-size:var(--fs-small);
color:var(--c-muted);
}

.product-action{
display:flex;
gap:10px;
margin-top:20px;
}

.product-action a,
.quick-btn{
flex:1;
height:45px;
display:flex;
align-items:center;
justify-content:center;
border:none;
border-radius:var(--radius-md);
font-size:var(--fs-small);
font-weight:800;
cursor:pointer;
transition:.3s;
}

.product-action a{
background:var(--c-dark);
color:var(--c-white);
}

.product-action a:hover{
background:var(--site-color);
}

.quick-btn{
background:var(--site-color-bg);
color:var(--site-color);
}

.quick-btn:hover{
background:var(--site-color-light);
}

.pagination{
display:flex;
justify-content:center;
gap:8px;
flex-wrap:wrap;
margin:40px 0;
}

.pagination a{
display:flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
background:var(--c-white);
border:1px solid var(--c-border);
border-radius:var(--radius-sm);
}

.pagination .active{
background:var(--site-color);
color:var(--c-white);
}

.filter-overlay{
position:fixed;
inset:0;
background:var(--overlay);
backdrop-filter:blur(5px);
opacity:0;
visibility:hidden;
transition:.3s;
z-index:90;
}

.filter-overlay.active{
opacity:1;
visibility:visible;
}

.filter-modal{
position:fixed;
top:0;
right:-420px;
width:390px;
max-width:90%;
height:100vh;
padding:25px;
overflow-y:auto;
background:var(--c-white);
box-shadow:0 -20px 50px rgba(0,0,0,.15);
transition:.4s;
z-index:100;
}

.filter-modal.active{
right:0;
}

.filter-header{
display:flex;
align-items:center;
justify-content:space-between;
padding-bottom:18px;
margin-bottom:20px;
border-bottom:1px solid var(--c-border-card);
}

.filter-header h3{
font-size:var(--fs-title);
font-weight:900;
}

.close-filter{
width:40px;
height:40px;
border:none;
border-radius:var(--radius-sm);
background:var(--c-bg-light);
font-size:24px;
cursor:pointer;
}

.filter-group{
margin-bottom:20px;
}

.filter-group label{
display:block;
margin-bottom:8px;
font-size:var(--fs-label);
font-weight:700;
}

.filter-group input[type=text],
.filter-group select{
width:100%;
height:45px;
padding:0 12px;
border:1px solid var(--c-border);
border-radius:var(--radius-sm);
font-family:var(--font-family);
}

.check-box label{
display:flex;
align-items:center;
gap:8px;
cursor:pointer;
}

.apply-filter{
width:100%;
height:48px;
border:none;
border-radius:var(--radius-md);
background:var(--site-color);
color:var(--c-white);
font-size:var(--fs-text);
font-family:var(--font-family);
font-weight:700;
cursor:pointer;
}

.quick-overlay{
position:fixed;
inset:0;
background:var(--overlay-dark);
backdrop-filter:blur(5px);
opacity:0;
visibility:hidden;
transition:.3s;
z-index:200;
}

.quick-overlay.active{
opacity:1;
visibility:visible;
}

.quick-modal{
position:fixed;
top:50%;
left:50%;
width:700px;
max-width:95%;
padding:30px;
background:var(--c-white);
border-radius:var(--radius-round);
box-shadow:var(--shadow-quick);
transform:translate(-50%,-45%);
opacity:0;
visibility:hidden;
transition:.35s;
z-index:201;
}

.quick-modal.active{
transform:translate(-50%,-50%);
opacity:1;
visibility:visible;
}

.quick-close{
position:absolute;
top:15px;
left:15px;
width:40px;
height:40px;
border:none;
border-radius:50%;
background:var(--c-bg-light);
font-size:var(--fs-close);
cursor:pointer;
}

.quick-box{
display:flex;
gap:30px;
}

.quick-gallery{
width:48%;
min-width:0;
}

.quick-main-image{
position:relative;
height:340px;
overflow:hidden;
background:var(--c-bg);
border-radius:var(--radius-xl);
}

.quick-main-image img{
width:100%;
height:100%;
object-fit:cover;
transition:.25s;
}

.quick-badge{
display:inline-flex;
align-items:center;
padding:6px 13px;
border-radius:20px;
font-size:12px;
font-weight:800;
color:var(--c-white);
}

.quick-badge-overlay{
position:absolute;
top:14px;
right:14px;
z-index:4;
}

.quick-special{
background:var(--c-secondary);
}

.quick-discount{
background:var(--c-danger);
}

.quick-info{
flex:1;
min-width:0;
padding-top:10px;
}

.quick-info h2{
margin:15px 0;
font-size:var(--fs-quick-title);
font-weight:600;
line-height:1.8;
color:var(--c-dark);
}

.quick-description{
margin:15px 0;
font-size:var(--fs-label);
line-height:2;
color:var(--c-muted);
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
text-overflow:ellipsis;
}

.quick-old{
margin-top:12px;
font-size:var(--fs-label);
color:var(--c-muted-4);
text-decoration:line-through;
}

.quick-price{
margin-top:5px;
font-size:var(--fs-quick-price);
font-weight:900;
color:var(--c-success);
}

.quick-price span{
font-size:var(--fs-small);
color:var(--c-muted);
}

.quick-stock{
display:inline-flex;
padding:7px 13px;
margin-top:14px;
border-radius:20px;
font-size:12px;
font-weight:800;
}

.quick-stock-ok{
background:#dcfce7;
color:#15803d;
}

.quick-stock-no{
background:#fee2e2;
color:#dc2626;
}

.quick-thumbs{
display:flex;
gap:9px;
margin-top:12px;
padding:3px;
overflow-x:auto;
}

.quick-thumb{
width:68px;
height:68px;
min-width:68px;
padding:0;
border:2px solid transparent;
border-radius:12px;
overflow:hidden;
background:var(--c-bg);
cursor:pointer;
}

.quick-thumb.active{
border-color:var(--site-color);
}

.quick-thumb img{
width:100%;
height:100%;
object-fit:cover;
}

.quick-gallery-arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
width:38px;
height:38px;
border:none;
border-radius:50%;
cursor:pointer;
z-index:3;
}

.quick-gallery-prev{
right:12px;
}

.quick-gallery-next{
left:12px;
}

.quick-actions{
display:flex;
align-items:center;
gap:12px;
margin-top:30px;
}

.quick-cart-form,
.quick-detail{
flex:1;
}

.quick-buy,
.quick-detail{
height:48px;
display:flex;
align-items:center;
justify-content:center;
border:none;
border-radius:var(--radius-md);
font-weight:800;
transition:.3s;
}

.quick-buy{
width:100%;
background:var(--c-success-btn);
color:var(--c-white);
cursor:pointer;
}

.quick-buy:hover{
background:var(--c-success-hover);
transform:translateY(-2px);
}

.quick-buy-disabled{
background:var(--c-muted-4)!important;
cursor:not-allowed!important;
}

.quick-detail{
background:var(--site-color);
color:var(--c-white);
}

.quick-detail:hover{
background:var(--site-color-hover);
}

.quick-error{
padding:40px;
text-align:center;
font-weight:700;
color:#dc2626;
}

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

@media(max-width:800px){
.shop-header{
flex-wrap:wrap;
}

.brand{
width:100%;
text-align:center;
}

.search-box{
width:100%;
max-width:100%;
}

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

@media(max-width:700px){
.products-header{
flex-direction:column;
align-items:stretch;
}

.sort-buttons{
width:100%;
}

.sort-buttons a{
flex:1;
}

.quick-box{
flex-direction:column;
}

.quick-gallery{
width:100%;
}

.quick-main-image{
height:280px;
}

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

@media(max-width:500px){
.container{
padding:12px;
}

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

.filter-modal{
width:100%;
right:-100%;
}

.quick-main-image{
height:240px;
}

.quick-thumb{
width:58px;
height:58px;
min-width:58px;
}
}