.toast{

position:fixed;

bottom:30px;

left:50%;

transform:translateX(-50%) translateY(100px);

background:#111;

color:#fff;

padding:14px 22px;

border-radius:12px;

font-weight:600;

opacity:0;

transition:.3s;

z-index:999999;

}

.toast.show{

opacity:1;

transform:translateX(-50%) translateY(0);

}

.toast.success{

background:#1fa34a;

}

.toast.error{

background:#d62d4c;

}

.toast.info{

background:#111;

}

.shop-banner{
    height:180px;
    padding-top:40px;
    background:linear-gradient(135deg,#cd104d,#8d0934);
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.back-btn{

position:fixed;

top:20px;

left:20px;

z-index:999;

background:rgba(255,255,255,.95);

color:#cd104d;

border:none;

padding:12px 18px;

opacity: 70%;

border-radius:10px;

font-weight:600;

cursor:pointer;

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

transition:.3s;

}

.clear-btn{

background:#cd104d;

color:#fff;

border:none;

padding:10px 18px;

border-radius:8px;

cursor:pointer;

margin-left:10px;

transition:.3s;

}

.clear-btn:hover{

background:#a00d3e;

}

#productCount{

margin-left:20px;

font-weight:600;

color:#666;

}

.no-products{

padding:80px 20px;

text-align:center;

grid-column:1/-1;

}

.no-products h2{

margin:20px 0 10px;

color:#cd104d;

}

.no-products p{

color:#777;

margin-bottom:20px;

}

.back-btn:hover{

background:#cd104d;

color:#fff;

}


.color-list{

display:flex;

gap:8px;

padding:10px 15px;

}

.color-dot{

width:20px;

height:20px;

border-radius:50%;

border:2px solid #ddd;

cursor:pointer;

transition:.3s;

}

/* ===========================
PRODUCT LOADER
=========================== */

.product-loader{

height:470px;

border-radius:16px;

background:linear-gradient(
90deg,
#f5f5f5 25%,
#e9e9e9 50%,
#f5f5f5 75%
);

background-size:300% 100%;

animation:loaderAnimation 1.2s linear infinite;

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

}

@keyframes loaderAnimation{

0%{

background-position:100% 0;

}

100%{

background-position:-100% 0;

}

}

.color-dot.active{

border:3px solid #cd104d;

transform:scale(1.15);

}

html,
body{
    overflow-x:hidden;
}

.shop-banner h1{
   

font-size:42px;

margin-bottom:8px;

    margin-bottom:15px;
}

.shop-banner p{
    font-size:15px;
    opacity:.9;
}

.search-section{
    max-width:1400px;
    margin:40px auto;
    padding:0 20px;
}

.search-section input{
    width:100%;
    padding:16px;
    border:2px solid #eee;
    border-radius:10px;
    font-size:16px;
    transition:.3s;
}

.search-section input:focus{
    outline:none;
    border-color:#cd104d;
    box-shadow:0 0 10px rgba(205,16,77,.2);
}

.shop-container{
    max-width:1400px;
    margin:auto;
    display:grid;
    grid-template-columns:280px 1fr;
    gap:40px;
    padding:20px;
}

/* ===========================
PREMIUM FILTER DROPDOWNS
=========================== */

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

.filter-group h4{

font-size:15px;

font-weight:600;

color:#cd104d;

margin-bottom:10px;

}

.filter-group select{

width:100%;

padding:13px 16px;

border:2px solid #ececec;

border-radius:12px;

background:#fff;

color:#333;

font-size:15px;

font-weight:500;

cursor:pointer;

outline:none;

transition:.3s;

appearance:none;

-webkit-appearance:none;

-moz-appearance:none;

background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23cd104d' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6 6 6-6' stroke='%23cd104d' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

background-repeat:no-repeat;

background-position:right 15px center;

padding-right:45px;

box-shadow:0 4px 12px rgba(0,0,0,.05);

}

.filter-group select:hover{

border-color:#cd104d;

}

.filter-group select:focus{

border-color:#cd104d;

box-shadow:0 0 0 4px rgba(205,16,77,.12);

}

/* FILTER CARD */

.filters{

background:#fff;

padding:25px;

border-radius:18px;

box-shadow:0 12px 30px rgba(0,0,0,.08);

border:1px solid #f1f1f1;

position:sticky;

top:100px;

}

.filters h3{

font-size:22px;

margin-bottom:20px;

color:#cd104d;

font-weight:700;

border-bottom:2px solid #f3f3f3;

padding-bottom:12px;

}

/* CLEAR BUTTON */

.clear-btn{

width:100%;

margin-top:15px;

padding:14px;

background:linear-gradient(135deg,#cd104d,#a80d3e);

color:#fff;

border:none;

border-radius:12px;

font-size:15px;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.clear-btn:hover{

transform:translateY(-2px);

box-shadow:0 8px 20px rgba(205,16,77,.25);

}

/* MOBILE */

@media(max-width:768px){

.filters{

position:static;

padding:18px;

border-radius:14px;

margin-bottom:20px;

}

.filter-group select{

font-size:14px;

padding:12px 14px;

}

}
.shop-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px;
}

.shop-header h2{
    color:#cd104d;
}

.shop-header select{
    padding:12px 15px;
    border:1px solid #ddd;
    border-radius:8px;
    cursor:pointer;
}

.shop-header select:focus{
    outline:none;
    border-color:#cd104d;
}

.products-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
    gap:25px;
}

/* PRODUCT CARD */

.product-card{
    background:#fff;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 6px 20px rgba(0,0,0,.08);
    transition:.3s;
}

.product-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(205,16,77,.18);
}

.product-card img{
    width:100%;
    height:340px;
    object-fit:cover;
    display:block;
}

.product-card h3{
    padding:15px 15px 8px;
    color:#222;
    font-size:19px;
}

.product-card p{
    padding:0 15px;
    color:#666;
}

.price{
    padding:15px;
    display:flex;
    align-items:center;
    gap:10px;
}

.price span{
    color:#cd104d;
    font-size:22px;
    font-weight:700;
}

.price del{
    color:#999;
    font-size:15px;
}

/* ==========================================
TABLET
========================================== */

@media (max-width:992px){

.shop-container{

grid-template-columns:240px 1fr;

gap:20px;

padding:20px;

}

.shop-banner{

height:160px;

}

.shop-banner h1{

font-size:38px;

}

.shop-banner p{

font-size:15px;

}

.products-grid{

grid-template-columns:repeat(2,1fr);

gap:20px;

}

.product-card img{

height:280px;

}

.shop-header{

gap:15px;

flex-wrap:wrap;

}

.shop-header select{

min-width:220px;

}

}

/* ==========================================
TABLET
========================================== */

@media (max-width:992px){

.shop-container{

grid-template-columns:240px 1fr;

gap:20px;

padding:20px;

}

.shop-banner{

height:160px;

}

.shop-banner h1{

font-size:38px;

}

.shop-banner p{

font-size:15px;

}

.products-grid{

grid-template-columns:repeat(2,1fr);

gap:20px;

}

.product-card img{

height:280px;

}

.shop-header{

gap:15px;

flex-wrap:wrap;

}

.shop-header select{

min-width:220px;

}

}

/* ==========================================
MOBILE
========================================== */

@media (max-width:768px){

.shop-banner{

height:130px;

padding:20px;

}

.shop-banner h1{

font-size:28px;

margin-bottom:6px;

}

.shop-banner p{

font-size:13px;

}

.back-btn{

top:12px;

left:12px;

padding:9px 14px;

font-size:13px;

}

.search-section{

margin:18px auto;

padding:0 15px;

}

.search-section input{

padding:14px;

font-size:14px;

}

.shop-container{

display:flex;

flex-direction:column;

padding:15px;

gap:20px;

}

.filters{

width:100%;

padding:18px;

position:static;

border-radius:16px;

}

.filters h3{

font-size:20px;

margin-bottom:15px;

}

.filter-group{

margin-bottom:15px;

}

.filter-group h4{

font-size:14px;

margin-bottom:8px;

}

.filter-group select{

padding:12px;

font-size:14px;

}

.shop-products{

width:100%;

}

.shop-header{

display:flex;

flex-direction:column;

align-items:stretch;

gap:12px;

margin-bottom:20px;

}

.shop-header h2{

font-size:24px;

text-align:center;

}

.shop-header select{

width:100%;

}

.clear-btn{

width:100%;

margin:0;

}

#productCount{

display:block;

margin:8px 0 0;

text-align:center;

}

.products-grid{

grid-template-columns:repeat(2,1fr);

gap:14px;

}

.product-card{

border-radius:14px;

}

.product-card img{

height:200px;

}

.product-card h3{

font-size:15px;

padding:10px;

min-height:48px;

}

.color-list{

padding:0 10px 10px;

justify-content:center;

}

.color-dot{

width:18px;

height:18px;

}

.price{

padding:10px;

display:flex;

flex-direction:column;

align-items:flex-start;

gap:4px;

}

.price span{

font-size:18px;

}

.price del{

font-size:13px;

}

}

/* ==========================================
SMALL MOBILE
========================================== */

@media (max-width:480px){

.shop-banner{

height:110px;

}

.shop-banner h1{

font-size:22px;

}

.shop-banner p{

display:none;

}

.search-section{

padding:0 10px;

}

.shop-container{

padding:10px;

}

.filters{

padding:15px;

}

.products-grid{

grid-template-columns:repeat(2,1fr);

gap:10px;

}

.product-card{

border-radius:12px;

}

.product-card img{

height:165px;

}

.product-card h3{

font-size:14px;

padding:8px;

}

.color-list{

gap:6px;

padding:0 8px 8px;

}

.color-dot{

width:16px;

height:16px;

}

.price{

padding:8px;

}

.price span{

font-size:16px;

}

.price del{

font-size:12px;

}

.shop-header h2{

font-size:20px;

}

.shop-header select{

font-size:13px;

padding:10px;

}

.filter-group select{

font-size:13px;

padding:10px;

}

.clear-btn{

padding:12px;

font-size:14px;

}

.back-btn{

padding:8px 12px;

font-size:12px;

}

}

/* ==========================================
VERY SMALL DEVICES
========================================== */

@media (max-width:360px){

.products-grid{

grid-template-columns:1fr;

}

.product-card img{

height:250px;

}

.shop-banner h1{

font-size:20px;

}

}