* {
    box-sizing: border-box;
}


body {

    margin:0;

    font-family:Tahoma, sans-serif;

    background:#080808;

    color:white;

}



/* =====================
        منو
===================== */


nav {

    background:#111;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 30px;

    border-bottom:1px solid #333;

}



nav ul {

    list-style:none;

    display:flex;

    gap:15px;

    padding:0;

    margin:0;

}



nav a {

    background:#b76e79;

    color:white;

    padding:10px 22px;

    border-radius:25px;

    text-decoration:none;

    transition:.3s;

}



nav a:hover {

    background:#e6a6b8;

    transform:scale(1.05);

}




/* =====================
        سبد خرید
===================== */


.cart {

    background:#b76e79;

    padding:10px 20px;

    border-radius:25px;

    cursor:pointer;

}



.cart span {

    background:white;

    color:#b76e79;

    border-radius:50%;

    padding:3px 8px;

}




/* =====================
        هدر
===================== */


header {

    padding:20px;

}



.hero {

    height:350px;

    border-radius:25px;

    background:

    linear-gradient(
    rgba(0,0,0,.6),
    rgba(0,0,0,.8)
    ),

    url("images/banner.png");


    background-size:cover;

    background-position:center;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

}



.hero h1 {

    color:#e6a6b8;

    font-size:40px;

}



.hero p {

    font-size:20px;

}





/* =====================
        جستجو
===================== */


.search {

    text-align:center;

    padding:25px;

}



.search input {

    width:70%;

    max-width:500px;

    padding:15px;

    border-radius:30px;

    border:1px solid #444;

    background:#111;

    color:white;

    font-size:16px;

}





/* =====================
        دسته بندی
===================== */


.categories {

    text-align:center;

    padding:20px;

}



button {

    background:linear-gradient(
    45deg,
    #b76e79,
    #e6a6b8
    );

    color:#111;

    border:none;

    padding:12px 25px;

    margin:5px;

    border-radius:30px;

    cursor:pointer;

    font-weight:bold;

    transition:.3s;

}



button:hover {

    transform:scale(1.05);

}





/* =====================
        محصولات
===================== */


.products {

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:25px;

    padding:30px;

}




.product {

    width:280px;

    background:#151515;

    padding:25px;

    border-radius:25px;

    text-align:center;

    border:1px solid rgba(230,166,184,.25);

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

    transition:.3s;

}



.product:hover {

    transform:translateY(-10px);

}



.product img {

    width:210px;

    height:210px;

    object-fit:cover;

    border-radius:20px;

}



.product h2 {

    color:#e6a6b8;

}



.product p {

    color:#ccc;

    line-height:1.8;

}



.product span {

    display:block;

    margin:15px;

    color:#e6a6b8;

    font-size:22px;

    font-weight:bold;

}






/* =====================
        پاپ آپ
===================== */


.popup {

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.8);

    justify-content:center;

    align-items:center;

    z-index:1000;

}



.popup-box {

    width:400px;

    max-width:90%;

    background:#111;

    padding:40px;

    border-radius:25px;

    text-align:center;

    box-shadow:0 0 30px #b76e79;

    position:relative;

}



.close {

    position:absolute;

    top:10px;

    right:20px;

    font-size:30px;

    cursor:pointer;

    color:#e6a6b8;

}



.content {

    display:none;

}





/* =====================
        جزئیات محصول
===================== */


.product-detail {

    max-width:900px;

    margin:50px auto;

    background:#151515;

    padding:40px;

    border-radius:25px;

    display:flex;

    gap:40px;

    align-items:center;

}



.product-detail img {

    width:350px;

    height:350px;

    object-fit:cover;

    border-radius:25px;

}



.detail-text {

    flex:1;

}



.detail-text h1,

.detail-text h2 {

    color:#e6a6b8;

}



.detail-text p {

    line-height:2;

    color:#ddd;

}






/* =====================
        موبایل
===================== */


@media(max-width:700px){


nav {

    flex-direction:column;

    gap:20px;

}


.hero {

    height:250px;

}



.hero h1 {

    font-size:28px;

}



.search input {

    width:90%;

}



.product {

    width:90%;

}



.product-detail {

    flex-direction:column;

    margin:20px;

    padding:20px;

}



.product-detail img {

    width:250px;

    height:250px;

}


}

/* =========================
   افکت لوکس کارت محصولات
========================= */

.product {

    border: 1px solid rgba(230,166,184,0.35);

    box-shadow:
    0 0 20px rgba(183,110,121,0.25),
    inset 0 0 20px rgba(255,255,255,0.03);

    backdrop-filter: blur(10px);

}



.product:hover {

    transform: translateY(-12px) scale(1.03);

    border-color:#e6a6b8;

    box-shadow:

    0 0 35px rgba(230,166,184,0.7),

    0 15px 50px rgba(0,0,0,0.8);

}





/* =========================
   افکت دور عکس محصولات
========================= */


.product img {

    border:2px solid rgba(230,166,184,0.35);

    box-shadow:

    0 0 20px rgba(230,166,184,0.4);

    transition:.4s;

}



.product:hover img {

    transform:scale(1.05);

    box-shadow:

    0 0 35px rgba(230,166,184,0.8);

}





/* =========================
   دکمه های لوکس
========================= */


button {


    border:1px solid rgba(255,255,255,0.3);

    box-shadow:

    0 0 15px rgba(230,166,184,0.4);


}



button:hover {


    background:

    linear-gradient(
    45deg,
    #e6a6b8,
    #fff
    );


    color:#111;


    box-shadow:

    0 0 35px rgba(230,166,184,0.9);


}






/* =========================
   سبد خرید و منو
========================= */


.cart {


    box-shadow:

    0 0 20px rgba(230,166,184,0.5);


}



nav a {


    box-shadow:

    0 0 15px rgba(183,110,121,0.5);


}



nav a:hover {


    box-shadow:

    0 0 30px rgba(230,166,184,0.8);


}

/* =========================
   رنگ صورتی پررنگ تر
========================= */


body {
    background:#070707;
}


/* رنگ اصلی */
nav a,
.cart,
button {

    background:
    linear-gradient(
    45deg,
    #c2185b,
    #ff4081
    );

}



/* نوشته های صورتی */

.product h2,
.product span,
.detail-text h1,
.detail-text h2,
.hero h1 {

    color:#ff6fa3;

}



/* هاله صورتی قوی تر */

.product {

    border-color:rgba(255,64,129,0.45);

    box-shadow:

    0 0 25px rgba(255,64,129,0.35),

    inset 0 0 20px rgba(255,64,129,0.08);

}



.product:hover {

    box-shadow:

    0 0 45px rgba(255,64,129,0.8),

    0 20px 60px rgba(0,0,0,.8);

}



/* عکس محصولات */

.product img {

    border-color:#ff4081;

    box-shadow:

    0 0 25px rgba(255,64,129,.7);

}



/* دکمه ها */

button:hover {

    background:

    linear-gradient(
    45deg,
    #ff4081,
    #ff80ab
    );

    box-shadow:

    0 0 40px rgba(255,64,129,.9);

}



/* منو */

nav a:hover,
.cart:hover {

    background:

    linear-gradient(
    45deg,
    #ff4081,
    #f50057
    );

    box-shadow:

    0 0 35px rgba(255,64,129,.8);

}

/* =========================
   Luxury Gold Theme
========================= */


body {

    background:#050505;

    color:#fff;

}



/* =========================
   Product Detail Gray Card
========================= */


.product-detail {

    background:#2b2b2b;

    border:1px solid #555;

    box-shadow:

    0 0 30px rgba(0,0,0,.6);

}



.detail-text {

    background:#333;

    padding:30px;

    border-radius:20px;

    border:1px solid #666;

}



.detail-text h1,
.detail-text h2 {

    color:#e0e0e0;

}



.detail-text h3 {

    color:#ccc;

}



.detail-text p {

    color:#ddd;

}



/* عکس محصول */

.product-detail img {

    border:2px solid #777;

    box-shadow:

    0 0 25px rgba(255,255,255,.15);

}