@font-face {
    font-family: yekan;
    font-weight: 100;
    font-display: swap;
    src: url("fonts/yekan.eot"), url("fonts/yekan.woff"), url("fonts/yekan.ttf");
}

@font-face {
    font-family: yekan;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/yekanRegular.eot"), url("fonts/yekanRegular.woff"), url("fonts/yekanRegular.ttf");
}

body {
    background-color: #f5f5f5;
    margin: 0;
    padding: 0;
    direction: rtl;
    font-family: yekan;
}
ش


.col {
    text-align: right;
}

.header {
    background-color: #fff;
    box-shadow: rgba(0,0,0,.04) 0 7px 8px 0;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

.inner-section {
    width: 100%;
    max-width: 1626px; /* Keeping max-width */
    margin: 0 auto;
    padding: 0 15px; /* Add horizontal padding for smaller screens */
    box-sizing: border-box; /* Include padding in the element's total width */
}

.marg-top {
    padding-top: 175px;
}
.marg-top-address{
    padding-top: 35px;
}
.header .main-nav-logo {
    display: block;
    height: 44px;
    width: 110px;
    background-size: contain;
}

.main-nav-logo img {
    width: 130px;
}

.header .search-box {
    border-radius: 5px;
    margin-right: 24px;
    background-color: #f0f0f1;
    height: 44px;
    box-sizing: border-box;
    padding: 4px 10px;
    width: 60%;
    display: flex;
    align-items: center; /* Vertically align items in search box */
}

.icon {
    display: inline-block;
}

.header .search-box input[type=text] {
    height: 36px;
    width: calc(100% - 60px);
    color: #474747;
    font-size: 14px;
    background: transparent;
    border: none;
    outline: none;
    font-family: yekan;
}

.login-btn {
    display: flex;
    align-items: center;
    font-family: yekan;
    font-size: 12px;
}

.separator {
    display: inline-block;
    margin: 0 5px;
    border-right: 1px solid #e0e0e2;
    vertical-align: middle;
    height: 30px;
}


.menu {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap; /* Allow menu items to wrap */
}

    .menu > li:not([class=hover]) {
        color: #616161;
        cursor: pointer;
        padding: 0 10px;
        font-size: 12px;
        line-height: 40px;
        z-index: 4;
    }

    .menu > li.hover {
        position: absolute;
        right: 15px;
        top: 0;
        bottom: 0;
        height: 100%;
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
        width: 0;
        z-index: 3;
        transform: scaleX(1);
    }

        .menu > li.hover > div:before {
            content: "";
            position: absolute;
            width: 100%;
            bottom: 0;
            z-index: 4;
            left: 0;
            right: 0;
            height: 2px;
            background-color: #55868c;
        }

.banner {
    padding: 175px 20px 0 20px;
}

.imag {
    z-index: 1;
    border-radius: 5px;
    aspect-ratio: 16 / 9;
    width: 100%;
}
/* use for header hover */
.un {
    display: inline-block;
    padding-bottom: 2px;
    background-image: linear-gradient(#55868c 0 0);
    background-position: 100% 100%; /*OR bottom left*/
    background-size: 0% 2px;
    background-repeat: no-repeat;
    transition: background-size 0.3s, background-position 0s 0.3s; /*change after the size immediately*/
}

    .un:hover {
        background-position: 0 100%; /*OR bottom right*/
        background-size: 100% 2px;
    }

    .un a {
        text-decoration: none;
        color: #616161;
    }



.col-cat {
    width: 270px;
}

.dropdown-menu {
    right: 12px;
    padding: 0 0 0 0;
}

    .dropdown-menu a .d-flex {
        transition: all 0.5s;
    }

@media only screen and (min-width: 992px) {
    .dropdown-menu {
        width: 900px;
    }

    .dropdown:hover .dropdown-menu {
        display: flex;
    }

    .dropdown-menu.show {
        display: flex;
    }
}
/* ********** */


.de {
    background-color: #bbe1e5;
    text-align: start;
    justify-self: start;
    align-items: start;
    list-style-type: none;
    width: 100%;
}

.ul {
    padding-left: 0;
}

.li {
    list-style-type: none;
    margin: 5px 0;
    padding: 5px 20px 5px 25px;
    font-size: 14px;
}

    .li.active {
        background-color: #ffffff;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
    }

.menu-col {
    width: 100%;
    display: none;
    padding:20px;
}

    .menu-col.active {
        display: flex;
    }

.menu-cat {
    width: 100%;
    font-size: 14px;
    color: #616161;
    text-align: start;
}

.see-all-cats {
    font-size: 14px;
    color: #000;
}

.menu-cat ul {
    padding: 0;
}

    .menu-cat ul li {
        list-style-type: none;
        height: auto;
        line-height: 25px;
    }

        .menu-cat ul li a {
            text-decoration: none;
            color: #616161;
        }

.menu-cat a {
    text-decoration: none;
}

    .menu-cat a:hover {
        color: #6cbd61;
    }

/* ****** */
.swiper {
    width: 100%;
    height: 100%;
}

.slide-f {
    text-align: center;
    font-size: 18px;
    /*background: #fff;*/
    display: flex;
    justify-content: center;
    align-items: center;
}

    .slide-f img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
/* ****** */



/* ********** */
.product-view {
    display: flex;
    flex-wrap: wrap;
    max-width: 1626px;
    background-color: #c6e1ed;
    margin: 0 auto;
    padding: 20px;
    box-shadow: 0 5px 8px -3px rgba(0,0,0,.1);
    border-radius: 5px;
}

.mySwiper-pro {
    max-height: 500px;
    padding: 20px 0;
}

.card {
    width: 100%;
    display: flex;
    padding: 25px 0;
    margin-left: 5px;
    background-color: #fff;
    border-radius: 5px;
    border: none;
    box-shadow: 0 5px 8px -3px rgba(0,0,0,.1);
    font-size: 16px;
}

.card-in {
    margin: auto;
    text-align: center;
}



.a-img {
    display: flex;
    width: 100%;
    height: 200px; /* ارتفاع کانتینر تصویر را 200 پیکسل ثابت می‌کنیم */
    overflow: hidden; /* **این خط را از حالت کامنت خارج کنید** تا محتوای اضافی برش داده شود */
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    position: relative;
}

    /* **این قانون جدید را اضافه کنید** */
    .a-img img {
        width: 100%; /* تصویر عرض کانتینر خود را پر کند */
        height: 100%; /* تصویر ارتفاع کانتینر خود را پر کند */
        object-fit: cover; /* **این مهمترین بخش است:** تصویر را طوری مقیاس‌بندی می‌کند که کانتینر را پر کند، در عین حال نسبت ابعاد را حفظ کرده و قسمت‌های اضافی را برش می‌دهد. */
        display: block; /* برای اطمینان از حذف فضای اضافی احتمالی زیر تصویر */
    }

.card:hover {
    box-shadow: 0 12px 15px -1px rgba(0, 0, 0, .1)
}

.swiper-slide {
    height: auto; /* **مهم:** ارتفاع اسلایدها را auto کنید تا Flexbox عمل کند */
    /* یا اگر می‌خواهید اسلایدر خود ارتفاع ثابتی داشته باشد: */
    /* height: 400px; */ /* مثلاً */
    display: flex; /* **مهم:** اسلاید را فلکس کانتینر کنید */
    align-items: stretch; /* **مهم:** آیتم‌های داخل اسلاید (کارت‌ها) را هم‌ارتفاع می‌کند */
    justify-content: center;
}

.swiper-button {
    background-color: aliceblue;
    width: 30px;
    height: 70px;
    border-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}



/************/

.footer_a {
    /*background-color: #c4dbdd;*/
    background-color: #c6e1ed;
    margin-top: 40px;
}

footer a {
    text-decoration: none;
    color: #000;
}

footer ul {
    list-style-type: none;
    height: auto;
    line-height: 25px;
    padding-right: 5px;
}

footer a img {
    width: 50px;
    height: 50px;
    padding: 5px;
}

.home-email-box {
    border-radius: 5px;
    background-color: #f0f0f1;
}

    .home-email-box input {
        border: none;
        background: none;
        height: 100%;
        width: 100%;
        outline: none;
    }

.foot-col {
    padding: 20px;
}

/************/

.mfot {
    height: 60px;
    background-color: #fff; /* Using a placeholder color, replace with your actual primary color */
    position: fixed;
    z-index: 1000;
    left: 0;
    bottom: 0;
    width: 100%;
    display: none; /* Hidden by default, managed by JS and media queries */
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

    .mfot div a {
        color: #616161;
        font-size: 13px;
        transition: color 0.3s ease;
    }

        .mfot div a:hover {
            color: #bee3f8;
        }

/* Responsive adjustments */

/* For screens smaller than 1025px (e.g., tablets and mobiles) */
@media (max-width: 1024px) {
    

    main {
        padding-top: 20px; /* Adjust main content padding when header is hidden */
    }

    .mfot {
        display: flex; /* Show the bottom mobile footer menu */
    }

    .inner-section {
        min-width: unset; /* Remove minimum width constraint */
    }

    .header .row {
        flex-direction: column; /* Stack header elements vertically */
        padding: 10px 0 !important;
    }

    .header .col {
        width: 100%; /* Full width for columns in header */
        text-align: center !important; /* Center align header content */
        padding-bottom: 10px;
    }

    .header .col-9, .header .col-3 {
        width: 100%; /* Make sure these columns take full width */
        justify-content: center; /* Center logo and search */
    }

    .header .search-box {
        width: 90%; /* Adjust search box width */
        margin: 10px auto; /* Center search box */
        margin-right: auto; /* Override specific right margin */
    }

    .menu {
        display: none; /* Hide the main menu on small screens as it's replaced by mfot */
    }

    .banner {
        padding: 100px 15px 0 15px; /* Adjust banner padding for smaller screens */
    }

        .banner .col-8, .banner .col-4 {
            width: 100%; /* Make banner columns stack vertically */
            margin-bottom: 15px; /* Add space between stacked banner images */
            padding-left: 0;
            padding-right: 0;
        }

    .product-view {
        padding: 15px; /* Adjust product view padding */
    }

    .card {
         /* Remove left margin on cards */
        margin-bottom: 15px; /* Add bottom margin to stack cards */
    }

    .footer_a .row {
        flex-direction: column; /* Stack footer columns vertically */
        text-align: center; /* Center align footer content */
    }

    .footer_a .col-3, .footer_a .col-6 {
        width: 100%; /* Full width for footer columns */
        padding: 10px; /* Adjust padding for footer columns */
    }

    .home-email-box {
        width: 80%; /* Adjust email input width */
        margin: 10px auto; /* Center email input */
        padding: 5px;
    }

        .home-email-box input {
            text-align: center;
        }

    footer form .col-8 {
        flex-direction: column;
        align-items: center;
    }

    footer form .col-2 {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }

    footer form .col-4 {
        width: 100%;
        text-align: center;
        margin-top: 20px;
    }
}

/* For even smaller screens (e.g., mobile phones) */
@media (max-width: 768px) {
    .main-nav-logo img {
        width: 100px; /* Smaller logo for very small screens */
    }

    .header .search-box {
        height: 38px;
        padding: 2px 8px;
    }

        .header .search-box input[type=text] {
            font-size: 13px;
        }

    .mfot div a {
        font-size: 12px;
    }

    .swiper-button {
        width: 25px;
        height: 50px;
    }

    .card .a-img {
        height: 120px; /* Smaller product image height */
    }

    .card-in strong, .card-in small {
        font-size: 14px;
    }
}

/* For very small mobile screens */
@media (max-width: 480px) {
    .header .search-box {
        width: 95%; /* Even wider search box for tiny screens */
    }

    .mfot {
        height: 50px; /* Slightly smaller mobile footer */
    }

        .mfot div a {
            font-size: 11px;
        }

    .banner {
        padding: 100px 10px 0 10px;
    }
}

@media (max-width: 398px){
    .card {
        margin-left: 5px;
    }
}

/* --- Base Styles & Typography --- */


a {
    text-decoration: none;
    color: #000;
    transition: color 0.3s ease; /* Smooth transition for links */
}

    a:hover {
        color: #6cbd61; /* Green hover for general links */
    }

/* .col is already defined above, keeping the last one for consistency.
.col {
    text-align: right;
}
*/

.f-14 {
    font-size: 14px;
}

/* --- Layout Helpers --- */

.flex {
    display: flex;
}

.flex-warp {
    flex-wrap: wrap;
}

.mt {
    margin-top: 10px;
}

.p_20 {
    padding: 20px;
}

.plr {
    padding: 0 15px;
}


/* --- Header Styles --- */



/* --- Product View Section --- */


/* Overlapping rule with .a-img in styleGemini.css.
   Keeping this one as it has more specific image styling (max-width, max-height, object-fit).
   Note: margin-bottom is different (15px here vs 20px in styleGemini.css). This will take precedence.
*/
.a-img {
    display: flex;
    width: 100%;
    height: 200px;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px; /* Space below image */
    position: relative;
    overflow: hidden; /* Ensure image doesn't spill */
}

    .a-img img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain; /* Ensure image fits without cropping */
        transition: transform 0.3s ease;
    }

.card:hover .a-img img {
    transform: scale(1.05); /* Slight zoom on image hover */
}

/* Overlapping rule with .a-pro in styleGemini.css.
   Keeping this one as it has more specific font-size and color.
   Height (4rem) and line-clamp (3) are the same.
*/
.a-pro {
    display: -webkit-box;
    height: 4rem; /* Fixed height for product name */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* Limit to 3 lines */
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px; /* Slightly larger product name font */
    color: #474747;
    margin-bottom: 10px; /* Space below product name */
    padding:5px;
}

.card-in strong {
    font-size: 1.1em; /* Make price stand out more */
    color: #000;
}


/* --- Category Page Specific Styles (from style_cat.css) --- */
aside {
    padding-left: 15px;
    padding-right: 15px;
}

.fcard {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 8px -3px rgba(0, 0, 0, 0.08);
    position: relative;
    margin-bottom: 20px; /* Space between filter cards */
}

.fcard-danger {
    background-color: #f8d7da;
    color: #58151c;
    border-radius: 10px;
    box-shadow: 0 5px 8px -3px rgba(0, 0, 0, .1);
    position: relative;
    margin-bottom: 20px;
}

.fcard-green {
    background-color: #d1e7dd;
    color: #58151c;
    border-radius: 10px;
    box-shadow: 0 5px 8px -3px rgba(0, 0, 0, .1);
    position: relative;
    margin-bottom: 20px;
}

.fcard_header {
    border-bottom: 1px solid #eee; /* Separator for header */
    padding: 15px;
    font-weight: bold;
    color: #333;
    font-size: 16px;
}

.fcard_body {
    padding: 15px; /* Consistent padding */
}

.fcard .checkbox {
    margin: 10px 0;
    display: flex; /* Use flex for better alignment of checkbox and text */
    align-items: center;
    font-size: 14px;
    color: #555;
    cursor: pointer;
}

    .fcard .checkbox input[type="checkbox"] {
        margin-left: 8px; /* Space between checkbox and text for RTL */
        transform: scale(1.2); /* Slightly larger checkbox */
        accent-color: #55868c; /* Custom color for checkbox */
    }

.fcard.p_20 a { /* This class seems redundant given .fcard_body */
    padding: 0 20px;
    font-size: 14px;
    color: #555;
    transition: color 0.3s ease;
}

    .fcard.p_20 a:hover {
        color: #55868c;
    }

.p_gird {
    display: grid; /* Use CSS Grid for product layout */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Responsive grid */
    gap: 20px; /* Space between grid items */
    padding-top: 10px;
    /* Remove old margin properties as grid gap handles spacing */
    margin-right: 0;
    margin-left: 0;
}

.test {
    /* No need for width: calc(100% / 4) with grid */
    padding: 0; /* Padding is handled by grid gap */
    height: auto; /* **مهم:** ارتفاع اسلایدها را auto کنید تا Flexbox عمل کند */
    /* یا اگر می‌خواهید اسلایدر خود ارتفاع ثابتی داشته باشد: */
    /* height: 400px; */ /* مثلاً */
    display: flex; /* **مهم:** اسلاید را فلکس کانتینر کنید */
    align-items: stretch; /* **مهم:** آیتم‌های داخل اسلاید (کارت‌ها) را هم‌ارتفاع می‌کند */
    justify-content: center;
}

/* Pagination */
.je {
    display: flex; /* Use flexbox to center pagination */
    justify-content: center;
    padding: 20px 0; /* Add padding above/below pagination */
}

.nav_num {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px; /* Space between page numbers */
    flex-wrap: wrap;
}

.page_num {
    padding: 8px 15px; /* Adjust padding for pagination items */
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

    .page_num a {
        color: #555;
        font-size: 14px;
    }

    .page_num:hover {
        background-color: #eef;
        border-color: #cdd;
    }

    .page_num a:hover {
        color: #55868c;
    }

/* Table styles (from style_cat.css) - assuming these are for a user account page */
.fcard_body ul {
    padding: 0;
}

.fcard_body li {
    list-style-type: none;
}

.input-account {
    flex: 0 0 50%;
    padding: 0 10px; /* Add padding for spacing in flex-wrap */
    box-sizing: border-box;
}

    .input-account input,
    .input-account select,
    .input-account textarea {
        border: 1px solid #e0e0e2; /* Subtle border for inputs */
        border-radius: 8px; /* Consistent border radius */
        background-color: #f7f7f7; /* Lighter background for inputs */
        padding: 12px; /* More padding for inputs */
        width: 100%;
        margin-top: 10px;
        outline: none;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
        font-family: yekan, sans-serif;
        font-size: 14px;
    }

        .input-account input:focus,
        .input-account select:focus,
        .input-account textarea:focus {
            border-color: #55868c;
            box-shadow: 0 0 0 2px rgba(85, 134, 140, 0.2); /* Focus ring */
        }

    .input-account textarea {
        height: 10rem; /* Slightly taller textarea */
        resize: vertical; /* Allow vertical resizing */
    }

.fcard_body table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 15px;
}

    .fcard_body table th,
    .fcard_body table td {
        padding: 12px; /* More padding for table cells */
        text-align: right; /* Align text to the right for RTL */
        border: 1px solid #eee; /* Add subtle cell borders */
    }

    .fcard_body table tr:nth-child(odd) {
        background-color: #f8f8f8; /* Lighter odd row background */
    }

    .fcard_body table th {
        background-color: #d6e8ea; /* Lighter header background */
        color: #333;
        font-weight: bold;
    }



/* --- Responsive Adjustments (Optional but Recommended) --- */


@media only screen and (max-width: 768px) {

    .fcard_header {
        font-size: 15px;
        padding: 10px;
    }

    .fcard_body {
        padding: 10px;
    }

    .p_gird {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    .card {
        padding: 15px;
    }
    /*
    .a-img {
        height: 150px;
    }
    .a-pro {
        font-size: 14px;
        height: 3.6rem;
    }
    */
    .page_num {
        padding: 6px 12px;
    }
}

@media only screen and (max-width: 480px) {
    .p_gird {
        grid-template-columns: 1fr; /* Single column for very small screens */
    }
}


/* --- Category Page Specific Styles (از style_cat.css) --- */


.proimage {
    width: 30%;
}

.probody {
    width: 70%;
}


/*** slide ****/
.image-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .image-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        padding: 10px;
    }

.swiper-image {
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}

/* .image-slide is already defined above, keeping the last one for consistency. */
.image-slide {
    background-size: cover;
    background-position: center;
}

.mySwiper2-image {
    height: 80%;
    width: 100%;
}

.mySwiper-image {
    height: 20%;
    box-sizing: border-box;
    padding: 10px 0;
}

    .mySwiper-image .image-slide {
        width: 25%;
        height: 100%;
        opacity: 0.4;
    }

    .mySwiper-image .swiper-slide-thumb-active {
        opacity: 1;
    }

/* .image-slide img is already defined above, keeping the last one for consistency. */
.image-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/*** slide ****/

.pro_images {
    padding-top: 20px;
}



.align-item-center {
    align-items: center;
}

.justify-content-between {
    justify-content: space-between;
}

.add {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
}


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.add input[type = "number"] {
    border: none;
    background: 0 0;
    width: 60px !important;
    text-align: center !important;
    min-width: 60px;
    -moz-appearance: textfield;
}

.add button {
    border: none;
}

    .add button img {
        width: 25px;
        height: 25px;
    }

.buy-btn button {
    width: 100%;
    padding: 10px;
    font-size: 12px;
    border: none;
    margin-top: 50px;
    background-color: #c4dbdd;
    border-radius: 5px;
    box-shadow: 0 5px 8px -3px rgba(0, 0, 0, .1);
}

    .buy-btn button:hover {
        box-shadow: 0 8px 10px -3px rgba(0, 0, 0, .1);
    }



.bas {
    width: calc(25%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0px 35px;
    color: #a5a5a5;
}

    .bas.active {
        color: #56868c;
    }

.basket-img img {
    width: 145px;
    height: 145px;
    padding: 15px;
}

.basket-pro {
    width: 100%;
}

.mlr {
    margin: 0 20px;
}

/* Product Page Specific Responsiveness */
@media (max-width: 992px) {
    .product-page-content {
        padding-top: 100px; /* Adjust padding for fixed header on product page */
    }

    .product-details-body {
        flex-direction: column; /* Stack product image and details */
    }

    .proimage,
    .probody {
        width: 100%; /* Full width for both image and details */
    }

    .product-details-section {
        flex-direction: column; /* Stack product specs and purchase info */
    }

    .product-specs,
    .product-purchase-info {
        width: 100%; /* Full width for both specs and purchase info */
        padding: 0 15px; /* Keep horizontal padding */
    }

    .product-quantity-price {
        flex-direction: column; /* Stack quantity and price */
        align-items: center; /* Center them */
    }

    .product-price {
        margin-top: 10px; /* Add space between quantity and price */
    }
}

@media (max-width: 768px) {
    .product-page-content {
        padding-top: 150px; /* More padding for header on smaller screens */
    }
}

@media (max-width: 576px) {
    .product-page-content {
        padding-top: 170px; /* Even more padding for header on very small screens */
    }
}


/* Mobile Category Overlay Styles */
.mobile-category-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 1001; /* Higher than header and mfot */
    display: none; /* Hidden by default */
    flex-direction: column; /* Arrange header and content vertically */
    overflow-y: auto; /* Enable scrolling for long category lists */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

    .mobile-category-overlay.active {
        display: flex; /* Show when active */
    }

.mobile-category-header {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #e0e0e2;
    background-color: #fff;
    position: sticky; /* Keeps header at top during scroll */
    top: 0;
    z-index: 10; /* Ensure header is above content */
}

    .mobile-category-header span {
        font-size: 16px;
        font-weight: bold;
        margin-right: auto; /* Pushes close button to the left */
        color: #333;
    }

.close-mobile-cat-menu {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    color: #616161;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .close-mobile-cat-menu svg {
        width: 24px;
        height: 24px;
    }


.mobile-category-content {
    display: flex;
    flex: 1; /* Allows content to take remaining height */
    overflow: hidden; /* Contains inner scrolling */
}

.mobile-cat-list {
    width: 35%; /* Adjust as needed */
    background-color: #f0f0f1; /* Background for the main category list */
    overflow-y: auto;
    border-left: 1px solid #e0e0e2; /* Separator */
}

    .mobile-cat-list .ul {
        padding: 0; /* Override default ul padding */
    }

    .mobile-cat-list .li {
        padding: 15px 10px;
        font-size: 14px;
        cursor: pointer;
        display: flex;
        align-items: center;
        color: #616161;
        transition: background-color 0.2s ease;
    }

        .mobile-cat-list .li:hover,
        .mobile-cat-list .li.active {
            background-color: #fff; /* Active background */
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
            color: #333;
        }

        .mobile-cat-list .li .icon {
            margin-left: 10px; /* Space between icon and text */
        }

.mobile-cat-detail {
    width: 65%; /* Adjust as needed */
    background-color: #fff;
    overflow-y: auto;
    padding: 15px;
}

    /* Ensure menu-col styles are also applied to mobile-cat-detail's children */
    .mobile-cat-detail .menu-col {
        display: none; /* Hide all by default */
        flex-wrap: wrap; /* Allows sub-categories to wrap */
    }

        .mobile-cat-detail .menu-col.active {
            display: flex; /* Show active one */
        }

    .mobile-cat-detail .menu-cat {
        width: 50%; /* Two columns for sub-categories */
        padding-left: 10px;
        padding-bottom: 15px;
    }

        .mobile-cat-detail .menu-cat ul {
            padding-left: 0;
        }

        .mobile-cat-detail .menu-cat li a {
            font-size: 13px;
        }

    .mobile-cat-detail .see-all-cats {
        font-size: 15px;
        margin-bottom: 8px;
        display: block; /* Make it block to take full width */
    }








.mobile-controls {
    display: none;
    ;
}
/* Responsive Adjustments for 1024px and below */
@media only screen and (max-width: 1023px) {
    /* Hide desktop sort and filter sections */
    aside.col-3,
    .fcard.p_20#ttt {
        display: none;
    }

    /* Show mobile controls */
    .mobile-controls {
        display: flex; /* Arrange dropdowns side-by-side */
        justify-content: space-around; /* Distribute space */
        align-items: flex-start;
        margin-bottom: 20px;
        padding: 0 15px;
        flex-wrap: wrap; /* Allow wrapping if space is tight */
    }

    .sort-dropdown,
    .filter-dropdown {
        position: relative;
        flex: 1; /* Allow them to grow and shrink */
        min-width: 150px; /* Minimum width for dropdowns */
        margin: 5px;
    }

    /* Improved Dropdown Toggle Button */
    .dropdown-toggle {
        background-color: #ffffff; /* Clean white background */
        border: 1px solid #e0e0e0; /* Light gray border */
        padding: 12px 15px; /* More padding */
        width: 100%;
        text-align: right;
        cursor: pointer;
        border-radius: 8px; /* Slightly more rounded corners */
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 15px; /* Slightly larger font */
        color: #333;
        font-weight: 600; /* Bolder text */
        transition: all 0.3s ease; /* Smooth transition for hover/active */
    }

        .dropdown-toggle:hover {
            background-color: #f5f5f5;
            border-color: #c0c0c0;
        }

        .dropdown-toggle.active {
            background-color: #f0f0f0; /* Active state background */
            border-color: #999;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
        }

        .dropdown-toggle .arrow-down {
            border: solid #333;
            border-width: 0 2px 2px 0;
            display: inline-block;
            padding: 4px; /* Larger arrow */
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            transition: transform 0.3s ease;
        }

        .dropdown-toggle.active .arrow-down {
            transform: rotate(-135deg); /* Arrow up when active */
        }

    /* Improved Dropdown Menu */
    .dropdown-menu-mobile {
        display: none; /* Hidden by default */
        position: absolute;
        background-color: #fff;
        min-width: 100%;
        box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.15); /* Stronger shadow */
        z-index: 15; /* Ensure it's above other content */
        border-radius: 8px;
        overflow: hidden;
        margin-top: 8px; /* More space below toggle */
        border: 1px solid #e0e0e0;
        padding: 0; /* Remove initial padding */
    }

        .dropdown-menu-mobile a {
            color: #555;
            padding: 10px 15px; /* More padding for links */
            text-decoration: none;
            display: block;
            text-align: right;
            font-size: 14px;
            transition: background-color 0.2s ease;
        }

            .dropdown-menu-mobile a:hover {
                background-color: #f1f1f1;
            }

    /* Styles for nested filter dropdowns */
    .fcard-mobile {
        border-bottom: 1px solid #eee; /* Separator between filter groups */
    }

        .fcard-mobile:last-child {
            border-bottom: none; /* No border for the last one */
        }

    .fcard_header-mobile {
        font-weight: bold;
        padding: 12px 15px; /* Consistent padding with links */
        color: #333;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #f9f9f9; /* Slightly different background for header */
        transition: background-color 0.2s ease;
    }

        .fcard_header-mobile:hover {
            background-color: #f0f0f0;
        }

        .fcard_header-mobile .arrow-down-small {
            border: solid #555;
            border-width: 0 1.5px 1.5px 0;
            display: inline-block;
            padding: 3px;
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            transition: transform 0.2s ease;
        }

        .fcard_header-mobile.active .arrow-down-small {
            transform: rotate(-135deg);
        }

    .fcard_body-mobile {
        display: none; /* Hidden by default */
        padding: 10px 15px; /* Padding for filter options */
        background-color: #fff; /* White background for content */
    }

        .fcard_body-mobile .checkbox {
            margin: 8px 0; /* More spacing for checkboxes */
            font-size: 14px;
            color: #444;
        }

    /* Ensure .col-9 takes full width when sidebar is hidden */
    .col-9.plr {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }
}
/* New: Hide any potentially conflicting pseudo-element icons */
@media only screen and (max-width: 1023px) {
    /* ... کدهای قبلی برای دراپ‌داون‌ها و فیلترها ... */

    .dropdown-toggle::after,
    .dropdown-toggle::before,
    .fcard_header-mobile::after,
    .fcard_header-mobile::before {
        content: none !important; /* این خط هر محتوایی که از طریق ::before/::after اضافه شده را حذف می‌کند */
        display: none !important; /* اطمینان از عدم نمایش کامل عنصر */
    }

    /* ... بقیه کدهای موجود در این مدیا کوئری ... */
}





/* --- Base Styles for fcard (Desktop Dropdowns) --- */
/* این استایل‌ها برای fcardهای موجود در col-3 در حالت دسکتاپ اعمال می‌شوند */
.fcard-filter .fcard_header {
    font-weight: bold;
    padding: 12px 15px; /* پدینگ ثابت */
    color: #333;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f9f9f9; /* پس‌زمینه کمی متفاوت برای سربرگ */
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #eee; /* اضافه کردن Border برای جداسازی سربرگ از بدنه */
    flex-direction: row-reverse; /* آیکون را بصری به سمت چپ منتقل می‌کند */
}

    .fcard-filter .fcard_header:hover {
        background-color: #f0f0f0;
    }

    .fcard-filter .fcard_header .arrow-down-small { /* آیکون فلش برای سربرگ‌های fcard دسکتاپ */
        border: solid #555;
        border-width: 0 1.5px 1.5px 0;
        display: inline-block;
        padding: 3px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transition: transform 0.2s ease;
    }

    .fcard-filter .fcard_header.active .arrow-down-small { /* چرخش آیکون هنگام فعال بودن */
        transform: rotate(-135deg);
    }

.fcard-filter .fcard_body { /* بدنه fcardها در col-3 */
    display: none; /* به صورت پیش‌فرض (جمع‌شده) در هنگام بارگذاری پنهان می‌شود */
    padding: 10px 15px; /* پدینگ برای گزینه‌های فیلتر */
    background-color: #fff; /* پس‌زمینه سفید برای محتوا */
    border-bottom: 1px solid #eee; /* اضافه کردن Border زیر بدنه */
}

.fcard:last-child .fcard-filter .fcard_body { /* حذف Border پایین برای آخرین fcard */
    border-bottom: none;
}


/* --- Responsive Adjustments --- */






/* فایل styleGemini.css */

/* به صورت پیش فرض دکمه ها و پجینیشن را پنهان کنید */
.swiper-button-next,
.swiper-button-prev,
.swiper-pagination {
    display: none;
}

/* اگر دستگاه دارای قابلیت "fine pointer" (مثلاً ماوس) و "hover" باشد، آن‌ها را نمایش دهید */
@media (pointer: fine) and (hover: hover) {
    .swiper-button-next,
    .swiper-button-prev{
        display: flex; /* یا flex یا هر نوع نمایشی که نیاز دارید */
    }
}
@media (pointer: fine) and (hover: hover) {
    
    .swiper-pagination {
        display: block; /* یا flex یا هر نوع نمایشی که نیاز دارید */
    }
}

/* css/styleGemini.css */

/* css/styleGemini.css */

.swiper-pagination-bullet {
    width: 16px !important; /* افزایش بیشتر پهنا */
    height: 16px !important; /* افزایش بیشتر ارتفاع */
    margin: 0 8px !important; /* افزایش بیشتر فاصله */
    /* مطمئن شوید که رنگ پس زمینه فعال و غیرفعال هم تعریف شده باشند */
    background: #ccc;
    opacity: 0.8;
}

.swiper-pagination-bullet-active {
    background: #007aff !important; /* رنگ گلوله فعال را هم با !important محکم کنید */
    opacity: 1 !important;
}

.swiper-pagination {
    padding: 15px 0 !important; /* افزایش بیشتر padding عمودی برای ناحیه قابل کلیک */
}




.mobile-header {
    display: flex; /* Use flexbox for easy alignment of logo and search */
    justify-content: space-between; /* Puts space between logo and search */
    align-items: center; /* Vertically centers items */
    width: 100%;
    box-sizing: border-box; /* Include padding in width calculation */
}

    /* Adjust logo within mobile-header */
    .mobile-header .main-nav-logo {
        height: 40px; /* Adjust height for mobile */
        width: auto; /* Allow width to scale with height */
        flex-shrink: 0; /* Prevent shrinking if space is tight */
    }

        .mobile-header .main-nav-logo img {
            width: 100px; /* Or a suitable size for mobile */
            height: auto;
        }

    /* Adjust search box within mobile-header */
    .mobile-header .search-box {
        flex-grow: 1; /* Allow search box to take available space */
        margin-right: 15px; /* Space between logo and search box */
        margin-left: 15px; /* Remove any conflicting left margin */
        height: 38px; /* Slightly smaller height for mobile */
        padding: 0 10px; /* Adjust padding inside search box */
    }

        .mobile-header .search-box input[type=text] {
            font-size: 14px; /* Adjust font size */
        }

@media (max-width: 1024px) {
    /* ... (keep previous styles for header, mfot, etc.) ... */
    .marg-top{
        padding-top:100px;
    }
    .marg-top-address{
        padding-top:5px;
    }
    /* Ensure your main banner container takes full width if it's not already responsive */
    .main-banner-container {
        width: 100%;
        margin-bottom: 15px; /* Space below the main banner */
    }

    .main-banner {
        width: 100%;
        height: auto;
        display: block;
    }

    /* Styles for the container of the two small banners */
    .small-banners-container {
        display: flex; /* Use flexbox to place them side-by-side */
        justify-content: space-between; /* Distribute space between them */
        gap: 10px; /* Adds a gap between the banners */
        width: 100%; /* Ensure the container takes full width */
        padding: 0 15px; /* Add some horizontal padding to match overall layout */
        box-sizing: border-box; /* Include padding in the width */
        margin-bottom: 20px; /* Space below these banners if more content follows */
    }

    /* Styles for each individual small banner */
    .small-banner {
        flex: 1; /* Each banner takes equal available space */
        min-width: 0; /* Allows shrinking in very small screens */
        text-align: center; /* Center image if it doesn't fill the banner div */
        /* You might want to add a background or border here */
    }

        .small-banner img {
            width: 100%; /* Make the image fill its container */
            height: auto; /* Maintain aspect ratio */
            display: block; /* Remove extra space below image */
            border-radius: 8px; /* Optional: rounded corners for banners */
        }
}




.mfot div {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.mfot a svg {
    width: 24px; /* Adjust as needed */
    height: 24px; /* Adjust as needed */
    margin-bottom: 2px; /* Small space between icon and text */
    vertical-align: middle; /* Align icon nicely with text */
    fill: #616161;
}

.mfot a {
    display: flex; /* Makes the icon and text align in a column */
    flex-direction: column; /* Stacks icon and text vertically */
    align-items: center; /* Centers items horizontally */
    justify-content: center; /* Centers items vertically within the link area */
    color: #616161; /* Example color, matches existing mfot link color */
    font-size: 13px;
    text-decoration: none;
    transition: color 0.3s ease;
    flex: 1 1 0%
}

.drap {
    position: relative;
}

.drap-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.showDrap {
    display: block;
}

.drap-content div input{
    width: 20%;
    margin:0;
}





/* استایل‌های صفحه لودینگ */
#loading-page {
    position: fixed;  
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;  
    flex-direction: column;  
    justify-content: center;  
    align-items: center; 
    z-index: 9999;  
    color: #333;
    font-size: 1.2em;
}

/* استایل‌های Spinner (دایره چرخان) */
.spinner {
    border: 8px solid #f3f3f3; 
    border-top: 8px solid #3498db;  
    border-radius: 50%;  
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;  
    margin-bottom: 20px;
}

.spinner-sm {
    border: 2px solid #f3f3f3;
    border-top: 2px solid #fff; /* برای دکمه سفید باشه */
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin 1s linear infinite;
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
}
/* تعریف انیمیشن چرخش */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}



.loader-card::after {
    content: '';
    width: calc(100% - 30px);
    height: calc(100% - 15px);
    top: 15px;
    left: 15px;
    position: absolute;
    background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5) 50%, transparent 100%), linear-gradient(#DDD 100%, transparent 0);
    background-repeat: no-repeat;
    background-position: -185px 0, center 0, center 115px, center 142px;
    box-sizing: border-box;
    animation: animloader 1s linear infinite;
}

@keyframes animloader {
    to {
        background-position: 185px 0, center 0, center 115px, center 142px;
    }
}


h1{
    font-size: 1.5rem;
    font-weight: bold;
}
h2{
    font-size: 1rem;
}






/* کانتینر اصلی لودینگ اسکلتی */
.skeleton-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* یا هر استایلی که برای لیست محصولاتتان دارید */
    gap: 15px; /* فاصله‌ی بین کارت‌ها */
}

/* کارت لودینگ اسکلتی */
.skeleton-card {
    /* تنها استایلی که نیاز دارید position: relative است تا انیمیشن shimmer کار کند */
    position: relative;
    overflow: hidden;
}

/* Placeholder برای تصویر، مشابه کلاس .a-img */
.skeleton-a-img {
    width: 100%;
    height: 200px;
    background-color: #cfcfcf; /* رنگ خاکستری برای placeholder */
    margin-bottom: 20px;
    position: relative;
    border-radius: 5px;
}

/* Placeholder برای متن، مشابه کلاس .a-pro */
.skeleton-a-pro {
    display: flex;
    flex-direction: column;
    padding: 0 15px;
}

.skeleton-text-line {
    width: 100%;
    height: 18px;
    background-color: #cfcfcf;
    border-radius: 4px;
    margin-bottom: 8px;
}

    .skeleton-text-line.short {
        width: 60%;
        height: 18px;
    }

/* انیمیشن shimmer */
.skeleton-card::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: -150px;
    height: 100%;
    width: 150px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        left: -150px;
    }

    100% {
        left: 100%;
    }
}





.discount-badge {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #B30000;
    color: #fff;
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    z-index: 10;
    margin: 10px;
}

.price-container {
    padding: 5px;
    display: flex;
    flex-direction: column; /* چیدمان عمودی */
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.old-price {
    font-size: 14px;
    color: #595959;
    text-decoration: line-through;
    margin-bottom: 5px; /* فاصله از قیمت جدید */
}

.new-price {
    font-size: 18px;
    font-weight: bold;
    color: #005C0B;
}



.brand-slider-container .swiper-brand {
    width: 100%;
    height: auto; /* ارتفاع می‌تواند خودکار باشد */
    padding-bottom: 30px; /* فضای خالی برای نمایش pagination */
}

.brand-slider-container .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .brand-slider-container .swiper-slide img {
        max-width: 100%;
        height: auto;
    }

.brand-slider-container .swiper-slide img {
    max-width: 120px; /* حداکثر عرض عکس را 120 پیکسل تنظیم می‌کند */
    max-height: 72px; /* حداکثر ارتفاع عکس را 60 پیکسل تنظیم می‌کند */
    object-fit: contain; /* نسبت ابعاد عکس را حفظ می‌کند */
}

.brand-slider-container .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.probrand a img {
    width: 60px;
    height: 60px;
}




/* استایل‌دهی به بخش اصلی (Section) */
.intro {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 30px;
    margin: 20px auto;
    position: relative;
}
.fcard_body section::after {
    content: ''; /* الزامی برای نمایش شبه‌عنصر */
    position: absolute; /* موقعیت مطلق نسبت به عنصر والد (section) */
    bottom: 0; /* قرارگیری در پایین عنصر والد */
    left: 0;
    width: 100%; /* عرض خط به اندازه والد */
    height: 2px; /* ضخامت خط */
    background-color: #e0e0e0; /* رنگ خط */

}
/* استایل‌دهی به عنوان */
    .intro strong {
        display: block;
        font-size: 1.8rem;
        font-weight: 700;
        color: #333;
        margin-bottom: 25px;
        text-align: right;
    }

/* استایل‌دهی به کانتینر فلکس */
.intro-body {
    display: flex;
    flex-direction: row; /* در صفحات بزرگ، محتوا کنار هم قرار می‌گیرد */
    gap: 30px;
    
    align-items: flex-start;
}
    .intro-body .image{
        width: 25%;
    }
    .intro-body .par {
        width: 75%;
    }
    /* ریسپانسیو کردن تصویر */
    .intro-body img {
        max-width: 100%;
        height: auto;
        display: block;
        border-radius: 8px;

    }

    /* استایل‌دهی به محتوای متنی */
    .intro-body p {
        font-size: 1rem;
        line-height: 1.6;
        color: #555;
        text-align: justify;
    }

/* Media Query برای صفحات کوچک (مثلاً موبایل) */
@media (max-width: 1024px) {
    .intro-body {
        flex-direction: column; /* در صفحات کوچک، محتوا زیر هم قرار می‌گیرد */
        gap: 20px;
    }
        .intro-body .image {
            width: 100%;
        }

        .intro-body .par {
            width: 100%;
        }
        

    .intro strong {
        font-size: 1.5rem;
    }
    
    .intro {
        padding: 20px;
    }
}

.buy-btn {
    display: block;
    width: 100%;
    padding: 10px;
    font-size: 12px;
    border: none;
    background-color: #c4dbdd;
    border-radius: 5px;
    box-shadow: 0 5px 8px -3px rgba(0, 0, 0, .1);
    text-align: center;
}


.responsive-banner {
    width: 100%;
    height: 45px;
    display: block; /* برای حذف فاصله اضافی زیر تصویر */
    object-fit: cover;
}

/* --- */
/* استایل برای صفحه نمایش‌های کوچکتر از 1024 پیکسل */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}
/* استایل اصلی برای اسکلت بنر */
.banner-skeleton {
    width: 100%;
    height: 45px; /* این ارتفاع را با اندازه بنر خود تنظیم کنید */
    background: #f0f0f0; /* رنگ زمینه خاکستری روشن */
    position: relative;
    overflow: hidden;
}

    /* اضافه کردن انیمیشن به اسکلت */
    .banner-skeleton::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
        animation: shimmer 1.5s infinite linear;
    }





/* Container for the custom checkbox */
.checkbox {
    display: block;
    position: relative;
    padding-right: 25px; /* فضا برای چک‌باکس */
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 14px;
    user-select: none; /* از انتخاب متن جلوگیری می‌کند */
    direction: rtl; /* جهت راست به چپ */
    text-align: right;
    padding-right: 35px; /* فاصله متن از چک‌باکس */
}

    /* پنهان کردن چک‌باکس پیش‌فرض مرورگر */
    .checkbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

/* ساخت یک چک‌مارک سفارشی با استفاده از span */
.checkmark {
    position: absolute;
    top: 0;
    right: 0;
    height: 20px;
    width: 20px;
    background-color: #eee; /* رنگ پس‌زمینه در حالت عادی */
    border: 1px solid #ccc;
    border-radius: 4px; /* گوشه‌های گرد */
    transition: all 0.3s ease; /* انیمیشن برای تغییرات */
}

/* رنگ پس‌زمینه هنگام هاور کردن روی چک‌باکس */
.checkbox:hover input ~ .checkmark {
    background-color: #ccc;
}

/* رنگ پس‌زمینه زمانی که چک‌باکس انتخاب می‌شود */
.checkbox input:checked ~ .checkmark {
    background-color: #007bff; /* رنگ آبی برای چک‌باکس فعال */
    border-color: #007bff;
}

/* ساخت چک‌مارک واقعی (شکل تیک) با استفاده از ::after */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* نمایش چک‌مارک زمانی که input انتخاب می‌شود */
.checkbox input:checked ~ .checkmark:after {
    display: block;
}

/* استایل برای چک‌مارک (شکل تیک) */
.checkbox .checkmark:after {
    left: 6px; /* موقعیت افقی */
    top: 2px; /* موقعیت عمودی */
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg); /* چرخش برای ایجاد شکل تیک */
}



.footer_a footer {
    padding: 20px 0;
}

/* Ensure Bootstrap row and column classes are used effectively */
.footer_a .row {
    display: flex; /* Bootstrap's .row already uses flex, but explicit for clarity */
    flex-wrap: wrap;
    justify-content: space-between;
    /* Removed gap from .row to let Bootstrap's column padding manage spacing */
}

/* General styling for content within columns */
.footer_a .col-md-3,
.footer_a .col-md-6,
.footer_a .col-sm-6,
.footer_a .col-12 {
    padding: 15px; /* Add consistent padding to Bootstrap columns */
    box-sizing: border-box;
}

.footer_a p {
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
    font-size: 1.1em; /* Default font size for titles */
}

/* Specific style for the long address paragraph to reduce its font size */
.footer_a .address-text {
    font-size: 0.9em; /* Smaller font size for the address */
    line-height: 1.5; /* Improve readability */
    font-weight: normal; /* Address doesn't need to be bold */
    word-wrap: break-word; /* Ensure long words break */
}


.footer_a a {
    display: block;
    color: #10471A;
    text-decoration: none;
    margin-bottom: 5px;
    transition: color 0.3s ease;
}

    .footer_a a:hover {
        color: #0056b3;
    }

    /* Specific styling for the phone number link */
    .footer_a a[href^="tel:"] {
        font-weight: bold;
        color: #10471A; /* Green color for phone number */
    }

        .footer_a a[href^="tel:"]:hover {
            color: #10471A;
        }

/* Newsletter Form Layout */
.footer_a form {
    display: flex; /* Use flexbox for horizontal alignment */
    flex-wrap: wrap; /* Allow items to wrap if space is limited */
    align-items: flex-end; /* Align items at the bottom */
}

.footer_a label {
    flex-basis: 100%; /* Label takes full width */
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
}

.footer_a input[type="email"] {
    flex-grow: 1; /* Allows input to take up available space */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
    min-width: 150px; /* Ensure input has a minimum width */
    box-sizing: border-box;
    margin-bottom: 0; /* Remove default margin-bottom to align with button */
}

.footer_a button[type="submit"] {
    padding: 10px 15px;
    background-color: #003680;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
    white-space: nowrap; /* Prevent button text from wrapping */
    margin-left: 10px; /* Space between input and button */
}

    .footer_a button[type="submit"]:hover {
        background-color: #0056b3;
    }

/* Social Media Icons */
.footer_a .social-icons,
.footer_a .permission-images {
    display: flex; /* Arrange icons/images side-by-side */
    gap: 10px; /* Space between icons/images */
    margin-top: 10px; /* Space from the paragraph above */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

    .footer_a .social-icons svg {
        height: 30px;
        width: 30px;
        vertical-align: middle;
    }

    .footer_a .permission-images img {
        width: 120px;
        height: 120px;
        border: 1px solid #10471A;
        border-radius: 4px;
        padding: 5px;
        box-sizing: border-box;
    }

/* Responsive adjustments for extremely small screens if necessary */
@media (max-width: 480px) {
    .footer_a form {
        flex-direction: column; /* Stack input and button vertically */
        align-items: stretch; /* Stretch items to full width */
    }

    .footer_a input[type="email"] {
        margin-right: 0;
        margin-bottom: 10px; /* Add space when stacked */
    }

    .footer_a button[type="submit"] {
        margin-left: 0; /* Remove margin when stacked */
    }
}






.page_num {
    /* این خط مهم است: نشانگر ماوس را تغییر می‌دهد */
    cursor: pointer;
    /* برای تجربه کاربری بهتر (مثل لینک‌های واقعی) */
    transition: color 0.2s, text-decoration 0.2s;
}

.card-details{
    padding-top: 5px;
}
    .card-details h2 {
        font-weight: bold;
    }

.swiper-product-card {
    max-width: 259.333px;
}
.swiper-banner {
    max-width: 1040px;
}

@media (max-width: 400px){
    .swiper-product-card {
        max-width: 155px;
    }

    .swiper-banner {
        max-width: 350px;
    }
    .a-pro{
        padding:6px;
    }
}

.toggle-password {
    position: absolute;
    left: 10px; /* موقعیت افقی آیکون */
    top: 70%; /* وسط قرار گرفتن عمودی */
    transform: translateY(-50%); /* تنظیم دقیق برای وسط */
    cursor: pointer;
    color: #666;
    font-size: 20px;
    user-select: none;
    display: none; /* برای جلوگیری از انتخاب متن آیکون */
}

    .toggle-password:hover {
        color: #333;
    }




.toast-container {
    position: fixed;
    bottom: 50px; /* پایین صفحه */
    left: 20px; /* گوشه چپ */
    z-index: 1100;
    font-family: 'Vazir', 'Arial', sans-serif; /* فونت زیباتر، فرض بر استفاده از فونت Vazir */
}

.toast {
    display: flex;
    align-items: center;
    background-color: #333;
    color: white;
    padding: 12px 20px;
    margin-bottom: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translateX(-20px); /* انیمیشن ورود از چپ */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    direction: rtl;
    min-width: 250px;
    max-width: 350px;
}

    .toast.success {
        background-color: #28a745;
    }

    .toast.error {
        background-color: #dc3545;
    }

    .toast.show {
        opacity: 1;
        transform: translateX(0);
    }

    .toast .icon {
        margin-left: 10px;
        flex-shrink: 0;
    }

    .toast .message {
        flex-grow: 1;
    }

    .toast a {
        color: #e0e0e0;
        background-color: rgba(255, 255, 255, 0.2);
        padding: 4px 8px;
        border-radius: 4px;
        text-decoration: none;
        margin-right: 10px;
        transition: background-color 0.2s;
    }

        .toast a:hover {
            background-color: rgba(255, 255, 255, 0.3);
            color: #fff;
        }

.pro-h2{
    font-weight:bold;
    font-size:1.5rem;
}

#main-content{
    min-height:600px;
}


.star {
    font-size: 28px;
    cursor: pointer;
    color: lightgray;
    transition: color 0.3s, transform 0.2s;
}

    .star:hover {
        transform: scale(1.2);
    }

    .star.selected {
        color: gold;
        text-shadow: 0 0 5px rgba(255, 215, 0, 0.7);
    }

#commentForm {
    max-width: 500px;
    padding: 20px;
    border-radius: 12px;
    background: #f9f9f9;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    margin-top: 20px;
}

    #commentForm input,
    #commentForm textarea,
    #commentForm button,
    #commentForm select {
        width: 100%;
        margin-top: 8px;
        padding: 10px;
        border-radius: 8px;
        border: 1px solid #ccc;
    }

    #commentForm button {
        background: #28a745;
        color: white;
        font-weight: bold;
        transition: background 0.3s;
    }

        #commentForm button:hover {
            background: #218838;
        }

#toggleBtn {
    font-weight: bold;
    border-radius: 8px;
    padding: 6px 16px;
    color: #000;
    border: none;
}

#toggleIcon {
    margin-right: 5px;
    font-size: 14px;
}


/* فقط برای موبایل */
/*@media (max-width: 768px) {
    #proAddBar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        padding: 10px 15px;
        border-top: 1px solid #ddd;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
        z-index: 1000;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }

        #proAddBar .price {
            font-size: 16px;
            font-weight: bold;
            color: #222;
            white-space: nowrap;
        }

        #proAddBar button {
            flex: 1;
            border-radius: 8px;
        }
}*/

.content-wrapper-art {
    max-height: 250px; /* فقط مثلا 3 خط */
    overflow: hidden;
    position: relative;
    transition: max-height 0.5s ease;
}

/* افکت محو شدن پایین */
    .content-wrapper-art::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 80px; /* بلندتر شد (قبلا 40 یا 50px بود) */
        pointer-events: none;
        background: linear-gradient( to bottom, rgba(255, 255, 255, 0), /* شفاف کامل بالا */
        rgba(255, 255, 255, 0.85), /* وسط کمی سفید */
        #ffffff /* پایین کامل سفید */
        );
        z-index: 1;
    }

/* وقتی باز میشه افکت محو حذف بشه */
    .content-wrapper-art.expanded::after {
        display: none;
    }

.show-more-art {
    display: block; /* تبدیل به بلاک */
    margin: 10px auto; /* بالا/پایین ۱۰px و چپ/راست auto */
    padding: 8px 14px;
    color: #000;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    z-index: 2; /* بالاتر از افکت محو */
}







.p-grid-art {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}

.card-art {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform .3s ease, box-shadow .3s ease;
}

    .card-art:hover {
        transform: translateY(-8px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    }

.card-img-art {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.card-details-art {
    padding: 15px;
    text-align: center;
}

.card-title-art {
    font-size: 18px;
    margin-bottom: 12px;
    color: #222;
}

.btn-read-art {
    display: inline-block;
    padding: 8px 16px;
    background: #004FA3;
    color: #fff;
    border-radius: 25px;
    text-decoration: none;
    font-size: 14px;
    transition: background .3s ease;
}

    .btn-read-art:hover {
        background: #0056b3;
    }





.article-hero {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    border-radius: 15px;
    margin-bottom: 25px;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* کاور واقعی */
    transition: transform 1s ease;
}

.article-hero:hover .hero-image {
    transform: scale(1.08);
}

.hero-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 40px 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
    color: #fff;
    text-align: center;
}

.hero-title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.hero-category {
    font-size: 1rem;
    opacity: 0.85;
}
/* تصویر کاور */
.cover-image-wrapper {
    overflow: hidden;
    border-radius: 15px;
    margin-bottom: 25px;
}

.cover-image {
    width: 100%;
    height: auto;
    display: block;
}

/* عنوان مقاله */
.article-title {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
    color: #222;
}

/* اطلاعات نویسنده و تاریخ */
.article-meta {
    text-align: center;
    font-style: italic;
    color: #555;
    margin-bottom: 20px;
}

/* متن مقاله */
.article-content p {
    line-height: 1.8;
    font-size: 1.05rem;
    margin-bottom: 1rem;
    color: #333;
    text-align: justify;
}

/* تصاویر داخل محتوا */
.article-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px auto;
    border-radius: 10px;
    transition: transform .3s ease, box-shadow .3s ease;
}

    

/* لینک‌ها داخل مقاله */
.article-content a {
    color: #007bff;
    text-decoration: none;
}

    .article-content a:hover {
        text-decoration: underline;
    }

/* بلاک‌کوت فارسی */
.article-content blockquote {
    border-right: 4px solid #007bff; /* سمت راست برای متن فارسی */
    padding-right: 20px;
    margin: 20px 0;
    font-style: italic;
    color: #555;
    background: #f9f9f9;
    border-radius: 8px;
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

    /* بلاک‌کوت وقتی در viewport */
    .article-content blockquote.visible {
        opacity: 1;
        transform: translateY(0);
    }

/* ریسپانسیو */
@media (max-width: 768px) {
    .fcard_body {
        padding: 20px;
    }
    .article-hero{
        height:250px;
    }
    .article-title {
        font-size: 1.5rem;
    }

    .article-content blockquote {
        padding-right: 15px;
    }
}