/* =========================

شروع برگه محصولات تکی

========================= */

body.single-product{

background:#f5f5f5;

}

.woocommerce div.product {

    margin: 0px 5% !important;

}



.woocommerce div.product div.images img {

    display: block;

    width: auto !important;

    height: auto;



}



.woocommerce-breadcrumb a {

  color: #fff !important;

}



nav.woocommerce-breadcrumb {

    margin: 1% !important;

    padding: 20px !important;

    border-radius: 10px;

    width: 80%;

    color: white !important;

}

.wc-topbar-right-single{

    background-color:var(--primary) !important;

    padding: 0 20px;

    border-radius: 10px;

    width: 50%;

}



@media (max-width: 600px) {

 nav.woocommerce-breadcrumb {

  margin: 5% !important;

  width: none;

}}



h1.product_title.entry-title {

    font-size: 22px;

    margin-top: 60px !important;

}



button.single_add_to_cart_button.button.alt {

    background-color:var (--text-light) !important;

    border-radius: 10px;

}



button.single_add_to_cart_button.button.alt:hover {

    background-color: red;

    border-radius: 10px;

}



.woocommerce .quantity .qty {

    padding: 10px 0px !important;

    border: 0px !important;

    background-color:var(--accent) !important;

    border-radius: 10px !important;

    color: white !important;

}





.single_add_to_cart_button.button.alt {

  font-family: iranyekan;

}



.attribute_value {

  padding-right: 20px !important;

}



.shop_attributes.woocommerce-group-attributes-layout-1 {

  font-family: iranyekan !important;

}



/* استایل‌های کلی برای بخش محصولات مشابه */

.related.products ul.products {

    display: flex;

  flex-wrap: nowrap;

    padding: 0;

    list-style: none;

}



/* استایل برای هر آیتم محصول (کارت) */

.related.products ul.products li.product {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    box-sizing: border-box;

    background-color: #f9f9f9;

    border: 1px solid #e0e0e0;

    border-radius: 8px;

    padding: 15px;

    text-align: center;

    transition: all 0.3s ease;

    position: relative;

}



/* افکت هاور روی کارت */

.related.products ul.products li.product:hover {

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

    transform: translateY(-3px);

}



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

.related.products ul.products li.product img {

    width: 100%;

    height: 240px;

    object-fit: cover;

    border-radius: 4px;

    margin-bottom: 15px;

}



/* استایل عنوان محصول */

.related.products ul.products li.product .woocommerce-loop-product__title {

    font-size: 16px;

    margin-bottom: 10px;

    min-height: 40px;

    overflow: hidden;

    text-overflow: ellipsis;

    color: #333;

   

}



/* استایل قیمت */

.related.products ul.products li.product .price {

    font-size: 1.2em;

    font-weight: bold;

    color: #d32f2f;

    margin-top: auto;

    margin-bottom: 10px;

    display: block;

}



/* استایل دکمه */

.related.products ul.products li.product .button {

    display: inline-block;

    background-color: #4CAF50;

    color: white !important;

    padding: 10px 20px;

    border: none;

    border-radius: 5px;

    text-decoration: none;

    font-size: 1em;

    cursor: pointer;

    transition: background-color 0.3s ease;

    margin: 0 auto;

    max-width: 80%;

    line-height: 1.4;

}



/* افکت هاور روی دکمه */

.related.products ul.products li.product .button:hover {

    background-color: #45a049;

}







@media (max-width: 768px) {

    .related.products ul.products {

        flex-wrap: wrap; /* در موبایل حتماً wrap باشد */

        gap: 10px;

    }

    .related.products ul.products li.product {

        flex: 0 0 100%; /* 1 ستون */

        max-width: 100%;

        padding: 10px;

    }

    .related.products ul.products li.product img {

        height: auto;

        margin-bottom: 10px;

    }

    .related.products ul.products li.product .button {

        padding: 8px 15px;

        font-size: 0.9em;

    }

     .related.products ul.products li.product .woocommerce-loop-product__title {

        font-size: 14px;

        min-height: 30px;

    }

}

/* گالری عکس در همان صفحه */

.woocommerce div.product div.images {

    position: relative;

}



.woocommerce-product-gallery__wrapper {

    position: relative;

}



/* مودال گالری */

.product-gallery-modal {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0,0,0,0.9);

    z-index: 99999;

    justify-content: center;

    align-items: center;

}



.product-gallery-modal.active {

    display: flex !important;

}



.modal-image {

    max-width: 90%;

    max-height: 90%;

    object-fit: contain;

    border-radius: 8px;

}



.modal-close {

    position: absolute;

    top: 20px;

    right: 30px;

    background: #fff;

    color: #000;

    width: 50px;

    height: 50px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;

    cursor: pointer;

    font-weight: bold;

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

    transition: all 0.3s ease;

    z-index: 100000;

}



.modal-close:hover {

    background: #ff4444;

    color: white;

    transform: scale(1.1);

}





.product-gallery-modal {

    animation: fadeIn 0.3s ease;

}



@keyframes fadeIn {

    from { opacity: 0; }

    to { opacity: 1; }

}







@media (max-width: 600px) {

.wc-topbar-right-single{

    width:auto;

}}

.woocommerce div.product form.cart{

margin-bottom:10px;

}





.single-product-actions{

    display:flex;

    gap:10px;

  margin-bottom:10px;

    width:100%;

}



.single-product-actions .hover-action-btn{

    flex:1;

    max-width:220px;



    display:flex;

    align-items:center;

    justify-content:center;



    gap:8px;



    padding:12px 15px;



    border:1px solid #ddd;

    border-radius:10px;



    background:#fff;



    cursor:pointer;

}



.single-product-actions svg{

    width:20px;

    height:20px;

}



.single-product-actions span{

    font-size:14px;

    line-height:1.4;

}

/* باکس انتخاب متغیرها */

.woocommerce div.product form.cart .variations select{

    width:50% !important;

    min-width:50% !important;

    height:48px !important;



    border:1px solid #ddd !important;

    border-radius:10px !important;



    padding:0 15px !important;

    background:#fff !important;



    font-family:iranyekan !important;

    font-size:14px !important;

    color:#333 !important;



    box-shadow:none !important;

}



/* جدول ویژگی ها */

.woocommerce div.product form.cart .variations{

    width:100% !important;

    margin-bottom:20px !important;

}



.woocommerce div.product form.cart .variations td{

    padding:8px 0 !important;

}



.woocommerce div.product form.cart .variations td.label{

    font-weight:700;

    font-size:14px;

    padding-bottom:6px !important;

}



/* لینک پاک کردن */

.woocommerce div.product form.cart .reset_variations{

    display:inline-block;

    margin-top:8px;

    color:#ab0000;

    font-size:13px;

    text-decoration:none;

}

@media (max-width: 768px) {

.woocommerce div.product form.cart .variations select{

    width:80% !important;

    min-width:80% !important;}}

.delivery-notice{

    margin:20px 0;

    padding:15px;

    border-right:4px solid #c8a96a;

    background:#fff8ea;

    color:#333;

    border-radius:8px;

    line-height:2;

    font-size:14px;

}



.delivery-notice strong{

    color:#b10000;

} 

/* =========================
استایل اختصاصی گالری ۶ تایی + لایت‌باکس
========================= */
.custom-product-gallery-container {
    width: 100%;
}

.main-image-box {
    width: 100%;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
    margin-bottom: 12px;
}

.main-image-box img {
    width: 100% !important;
    height: auto !important;
    display: block;
    object-fit: cover;
}

.custom-gallery-thumbs {
    display: flex;
    gap: 8px;
    justify-content: flex-start;
}

.thumb-box {
    position: relative;
    width: calc((100% - 40px) / 6);
    aspect-ratio: 1;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: #fff;
}

.thumb-box.active, .thumb-box:hover {
    border-color: #000;
}

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

.thumb-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: bold;
}

/* استایل مودال لایت‌باکس */
.product-gallery-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease;
}

.product-gallery-modal.active {
    display: flex !important;
}

.modal-image {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 30px;
    background: #fff;
    color: #000;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
}

.modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 30px;
    padding: 15px 20px;
    cursor: pointer;
    border-radius: 8px;
    user-select: none;
}

.modal-prev { right: 20px; }
.modal-next { left: 20px; }

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* =========================
استایل گالری محصول (دسکتاپ + موبایل)
========================= */
.custom-product-gallery-container {
    width: 100%;
    margin-bottom: 20px;
}

.main-image-box {
    width: 100%;
    max-width: 600px;
    height: 600px;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
    margin: 0 auto 12px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-image-box img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block;
}

.custom-gallery-thumbs {
    display: flex;
    gap: 8px;
    justify-content: flex-start;
    flex-wrap: wrap; /* جلوگیری از بیرون زدن در صفحات کوچک */
}

.thumb-box {
    position: relative;
    width: calc((100% - 40px) / 6);
    aspect-ratio: 1;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: #fff;
}

.thumb-box.active, .thumb-box:hover {
    border-color: #000;
}

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

/* -------------------------
تنظیمات اختصاصی موبایل
------------------------- */
@media (max-width: 768px) {
    .main-image-box {
        max-width: 100%;
        height: 350px; /* کاهش ارتفاع برای نمایش بهتر در موبایل */
    }

    .thumb-box {
        /* در موبایل بندانگشتی‌ها بزرگتر و خواناتر می‌شوند */
        width: calc((100% - 24px) / 4); 
    }
}