:root{
    /* ارتفاع‌ها را اینجا یک‌بار تعریف کنید تا نگهداری آسان شود */
    --main-header-h:   0; /* هدر اصلی سایت در موبایل */
    --overlay-header-h: 56px; /* هدر داخل پنل دسته‌بندی‌ها */
    --bottom-nav-h:     56px; /* ناوبری پایین موبایل */

    /* رنگ‌ها */
    --primary:#ef4056; --border:#e5e5e5;
    --bg-light:#f9f9f9;--text:#111;--muted:#666;
    --w1:150px;
    --w2:250px;
}


* {
    scrollbar-color: #a9a7a7 #ffffff;
}
body {
    background-color: #fff !important;
}
header{
    box-shadow: none;
}
footer {
    border:0;
    margin-top:40px;
}
@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1440px;
    }
}


a:hover {
    color: #256CFA
}
.jump-to-top:hover {
    border-color: #256CFA;
    color: #256CFA;
}

.btn-success.focus, .btn-success:focus{
    box-shadow: none;
}
.breadcrumb_box{
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, #fff 100%);
    margin-top:30px;
    border-top:0;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
    border-color: #00000014;
    border-bottom-width: 2px;
    border-radius: 16px;
}
.search-header input {
    border-radius: 10px;
}
nav.main-menu ul.new-list-menu li.item-list-menu a.list-category{
    color: #757575;
}
nav.main-menu ul.new-list-menu li.item-list-menu a.list-category:hover{
    color: #60a5fa;
}
nav.main-menu ul.new-list-menu li.item-list-menu:hover a.list-category{
    color: #60a5fa;
}
nav.main-menu ul.new-list-menu li.item-list-menu a.list-category::before{
    display: none;
}
nav.main-menu ul.new-list-menu li.item-list-menu::before{
    display: none;
}
nav.main-menu {
    border:0;
}

.box-content .content h1 span {
    color: #0f1729;
    border:0;
    font-size:24px;
}
.middle-bar-footer .footer-links .links-col .head-line {
    color:#256cfa;
    font-weight: 700;
    font-size:16px;
}
.middle-bar-footer .footer-links .links-col ul.links-ul li a{
    color: #0f1729a3;
    font-weight: 500;
}
.middle-bar-footer .footer-links .links-col ul.links-ul li a:hover{
    color: #60a5fa;
}
.shoppingcart {
    color: #9e9e9e;
}
/*.header-left {
    display: flex;
    justify-content: space-between;
}*/
.header-left .mini-cart-header .cart-count {
    background:#60a5fa;
}

.header-left .btn-login{
    border-color: #9e9e9e;
    color: #9e9e9e;
    border-radius:10px;
}
.header-left .login-link {
    color: #9e9e9e;
}

.header-left .btn-login span {
    color: #9e9e9e;
}

.search-header .btn-search{
    background-color: #256cfa;
    color: #fff;
    border-radius: 27px;
    width: 90px;
}
.twitter-typeahead{
    float: left;
}

.btn-category{
    color: #256cfa !important;
}


.products-grid table thead tr th{
/*    background: none !important;*/
    color: #0f1729;
    font-weight: 600;
    text-align: left !important;
    background: linear-gradient(180deg, #F5F3F3 16.35%, #E1E1E1 100%) !important;
    border-radius: 25px;
    vertical-align: middle;
}
table.dataTable > thead .sorting::after, table.dataTable > thead .sorting_asc::after, table.dataTable > thead .sorting_desc::after, table.dataTable > thead .sorting_asc_disabled::after, table.dataTable > thead .sorting_desc_disabled::after,
table.dataTable > thead .sorting::before, table.dataTable > thead .sorting_asc::before, table.dataTable > thead .sorting_desc::before, table.dataTable > thead .sorting_asc_disabled::before, table.dataTable > thead .sorting_desc_disabled::before{
    color: #0f1729;
}

.table-bordered thead td, .table-bordered thead th{
    border:0 !important;
    border-radius: 16px;
}

.products-grid table {
    border-collapse: separate;
    border-spacing: 5px;
}

.table.table-bordered.dataTable tbody td {
    border-color: #0000001F;
    border-radius: 16px;
    border-width: 0 1px 1px 0;
    box-shadow: 8px 20px 70px 0px rgba(0, 0, 0, 0.06);
    padding-top: .75rem;
    padding-bottom: .75rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
table.DTFC_Cloned tr{
    background: none !important;
}
.btn-blue{
    background-color: #256cfa !important;
    color: #fff;
    border-radius: 27px;
}
.btn-blue:hover{
    color:#fff;
}
.btn-outline{
    background: none;
    border:1px #0f172929 solid;
    border-radius: 27px;
}

.apply-filter-row{
    border:0;
    background: none;
}

.filter-box{
    background: none !important;
}

.filter-box > .filter-options > .box{
    box-shadow: 8px 20px 70px 0px #0000000F;
    border-radius: 16px;
    border:1px #0000001F solid;
    border-top: 0;
    border-left: 0;
    background-color: #fff;
    padding: 1.25rem;
    margin: 0px 0.5rem;
}

.filter-box .filter-options .select-filter-box{
    background: none !important;
}

.filter-box .filter-options .select-filter-box .select-filters label, .filter-box .filter-options select option{
    border-radius: 20px;
    border:1px #0000001F solid;
    border-top: 0;
    border-left: 0;
    margin-bottom: .5rem;
    padding: 3px 12px 3px 12px;
}
.filter-box .filter-options .select-filter-box .select-filters {
    padding: 0;
}
.chkfilter {
    border-radius: 32px;
    border:1px #0000001F solid;
    border-top: 0;
    border-left: 0;
}

.filter-box h5{
    font-weight: 600;
    color: #0f1729;
}

.products-grid, .products-grid table{
    border:0;
}

.box-content {
    border:0;
}

.btn-buy{
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
    background-color: #256cfa !important;
}
.btn-green {
    background-color: #256cfa !important;
    border-color: #256cfa;
}
.quantity-cell {
    border-radius: 24px;
}

.pdct-quantity{
    font-weight: 600;
    font-size:14px;
    color: #0f1729;
}
.pdct-price{
    color: #0F1729BD;
}

.menu-category-1 {
    border-radius: 16px;
    background: linear-gradient(294.33deg, #FFFFFF -6.28%, rgba(255, 255, 255, 0.77) 99%);
    backdrop-filter: blur(30px);
    top:50px;
}

.menu-category-2,.menu-category-3{
    background: none;
}
.menu-title-1.active>.menu-link-1{
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.12) 17.49%, #FFFFFF 97.44%);
    border-radius: 24px;
    border: 1px solid;
    border-image-source: linear-gradient(117.35deg, rgba(0, 0, 0, 0) 56.43%, rgba(0, 0, 0, 0.12) 93.69%);
    color: #256CFA !important;
}

.menu-title-2:hover{
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.12) 17.49%, #FFFFFF 97.44%);
    border-radius: 24px;
    border: 1px solid;
    border-image-source: linear-gradient(117.35deg, rgba(0, 0, 0, 0) 56.43%, rgba(0, 0, 0, 0.12) 93.69%);
    color: #256CFA !important;
}
.menu-title-2:hover .menu-link-2{
    color: #256CFA !important;
}

.sidebar-wrapper .box-sidebar {
    box-shadow: 8px 20px 200px 0px rgba(0, 0, 0, 0.08);
    border:0px;
}
.box-content {
    box-shadow: 8px 20px 200px 0px rgba(0, 0, 0, 0.08);
}
.box-header .box-title{
    border-color:#256cfa;
}
ul.profile-menu-items li a.profile-menu-url:hover {
    color: #256cfa !important;
}
.btn-info {
    /*background: linear-gradient(180deg, #20c9ff, #256cfa);*/
    background-color: #60a5fa !important;
}

.profile-stats .table-orders .table tbody td a.order-list-btn, .page-profile .collapse .profile-orders-item a.order-list-btn, #products-list a.order-list-btn {
    background-color: #256cfa;
    padding: 0px 10px;
    height: 35px;
    line-height: 35px;
}

.signup-form .card {
    box-shadow: 8px 20px 200px 0px rgba(0, 0, 0, 0.08);
}

.dropdown-menu-login {
    box-shadow: 8px 20px 200px 0px rgba(0, 0, 0, 0.08);
}
.blog-item, .home-blog{
    box-shadow: 8px 20px 200px 0px rgba(0, 0, 0, 0.08);
}
.home_page_post .box{
    box-shadow: 8px 20px 200px 0px rgba(0, 0, 0, 0.08);
}

.table-striped tbody tr:nth-of-type(odd) {
    background: none !important;
}

.card-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.card-image {
    height: 72px;
    width: 72px;
    border-radius: 12px;
}

.action-item {
    display: flex;
    align-items: center;
    margin-top: 20px; /* Tailwind's mt-5 = 1.25rem ≈ 20px */
}

.action-item:not(:first-child) {
    margin-top: 8px; /* Tailwind's mt-2 = 0.5rem ≈ 8px */
}

.action-text {
    margin-right: 8px; /* Tailwind's me-2 = 0.5rem ≈ 8px */
    font-size: 12px;
    font-weight: 500;
    color: rgba(15, 23, 41, 0.54); /* #0F17298A in RGBA */
}

.action-button {
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

.action-icon {
    width: 24px; /* Tailwind's w-6 = 1.5rem ≈ 24px */
    height: 24px; /* Tailwind's h-6 = 1.5rem ≈ 24px */
}

/* Specific icon adjustments */
.me {
    margin-right: 8px; /* If you need specific margin for one icon */
}

.products-grid .product-option{
    top: unset;
}

.product-option {
    position: relative;
}

.box-products {
    background: none !important;
    padding:0;
}

.dataTables_length {
    padding: 10px;
}

.DTFC_LeftBodyWrapper{
    background: #fff;
    box-shadow:0 0 6px 4px rgba(0, 0, 0, 0.08);
    margin-right: -20px;
}
.box-shadow{
    box-shadow: 8px 20px 200px 0px rgba(0, 0, 0, 0.08);
}

.col-sidebar {
    border: 0 !important;
}

.blog .card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border: 2px solid;
    border-image-source: linear-gradient(180deg, rgba(255,255,255,0) 0%, #ffffff 100%);
    border-image-slice: 1;
    border-radius: 16px;
    padding: 12px;
    height: 120px;
    box-shadow: 8px 20px 200px 0px #00000014;
    background-color: white;
    margin: auto;
    overflow: hidden;
    margin-bottom: 10px;
}

@media (min-width: 1024px) {
    .blog .card {
        height: 224px;
        padding: 16px;
    }
}

.blog .card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    flex: 1;
    margin-inline-start: 1rem;
}

.blog .title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
    text-align: right;
}

@media (min-width: 1024px) {
    .blog .title {
        font-size: 24px;
    }
}

.blog .description {
    font-size: 13px;
    font-weight: 500;
    color: #0F17298A;
    direction: ltr;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

@media (min-width: 1024px) {
    .blog .description {
        font-size: 14px;
    }
}

.blog .bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.blog .see-more-button {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
    color: #256CFA;
    text-decoration: none;
}

@media (min-width: 1024px) {
    .blog .see-more-button {
        font-size: 16px;
    }
}

.blog .see-more-line {
    width: 27px;
    height: 1px;
    background-color: #256CFA;
    margin-inline-start: 10px;
}

.blog .date {
    font-size: 14px;
    color: #BDBDBD;
    font-weight: 500;
}

.blog .card-image {
    height: 100%;
    width: 104px;
    object-fit: cover;
    border-radius: 10px;
}

@media (min-width: 1024px) {
    .blog .card-image {
        width: 220px;
    }
}

.selected-attr {
    color: #256cfa !important;
}

.dtable-top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
}

.dtable-top .dataTables_length,
.dtable-top .dataTables_paginate {
    margin: 0;
}

.page-link {
    display: flex;                          /* flex */
    height: 36px;                           /* h-[36px] */
    width: 36px;                            /* w-[36px] */
    align-items: center;                    /* items-center */
    justify-content: center;               /* justify-center */
    border-radius: 9999px;                 /* rounded-full */
    border-width: 1px;                     /* border-[1px] */
    border-color: #0F17291F;               /* border-[#0F17291F] */
    font-size: 14px;                        /* text-[14px] */
    font-weight: 500;
    margin-left: 3px;
    margin-right: 3px;
}
.page-item:first-child .page-link {
    width: auto;
    border-radius: 36px;
}
.page-item:last-child .page-link {
    width: auto;
    border-radius: 36px;

}

.dtable-top .dataTables_length label {
    font-size: 0;
    margin: 0;
}

.dtable-top .dataTables_length select {
    font-size: 14px;
    border-radius: 36px;
    height: 36px;
    margin: 0;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    margin-top:0;
}


.options-product .item {
    display: flex;
    align-items: center;
    margin-top: 10px; /* معادل mt-2 تا mt-5 */
}

.options-product .label {
    margin-inline-end: 8px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(15, 23, 41, 0.54); /* #0F17298A در hex */
}

.options-product .fa {
    width: 24px;
    height: 24px;
}

.form-control {
   /* height: 48px;*/
    border:0;
    border-radius: 8px;
    padding-right: 16px;
    padding-left: 16px;
    background: linear-gradient(180deg, rgba(131, 148, 181, 0.02) 0%, rgba(131, 148, 181, 0.08) 100%);
    border-bottom-width: 1px;
    justify-content: space-between;
    border-bottom: 1px solid;
    border-image-source: linear-gradient(90deg, rgba(56, 87, 149, 0) 0%, rgba(56, 87, 149, 0.8) 32%, rgba(56, 87, 149, 0.8) 62.5%, rgba(56, 87, 149, 0) 100%);
}

.form-control:focus {
    border-bottom: 2px solid;
    border-image-source: linear-gradient(90deg, rgba(37, 108, 250, 0) 0%, #256CFA 29%, #256CFA 69.5%, rgba(37, 108, 250, 0) 100%);
    background: linear-gradient(180deg, rgba(240, 245, 255, 0.5) 16.35%, rgba(181, 205, 255, 0.5) 100%);
}

.logout {
    color: #FF5F00 !important;
}

.activeMenu {
    background: rgba(37, 108, 250, 1) !important;
    color:#fff !important;
    border-radius: 12px;
}


.banner-container {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    border-radius: 12px;
    height: 550px;
    background: linear-gradient(180deg, rgba(37,108,250,0.0315) 0%, rgba(37,108,250,0.15) 100%);
    position: relative;
}

.banner-text {
    margin-top: 40px;
    max-width: 344px;
}

.banner-title {
    font-size: 14px;
    font-weight: 600;
    color: #0F1729;
    margin: 0;
    line-height: 2.75rem;
}

.banner-subtitle {
    margin-top: 6px;
    font-size: 10px;
    color: #0F1729;
    line-height: 1.25rem;
}

.button-wrapper {
    width: 100%;
}

.buy-button {
    margin-top: 14px;
    width: 76px;
    height: 32px;
    font-size: 12px;
    font-weight: 600;
    color: white;
    background: linear-gradient(180deg, #20c9ff, #256cfa);
    border: none;
    border-radius: 27px;
    cursor: pointer;
}

.banner-image {
    margin-top: 8px;
    width: 87px;
    height: 192px;
}

.banner-products {
    display: none;
}


.feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 69px 24px;
    width: 100%;
}

@media (min-width: 1024px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
        margin-top:140px;
        margin-bottom: 80px;
    }
}

.feature-box {
    min-height: 384px;
    padding: 24px 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    border-radius: 16px;
    box-shadow: 5px 10px 200px 0px rgba(0, 0, 0, 0.06);
}

.feature-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-inline-start: 24px;
    direction: rtl;
}

.feature-header h2 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    direction: rtl;
}

.feature-header img {
    width: 32px;
    margin-inline-start: 16px;
}

.feature-box ul {
    margin-top: 24px;
    margin-inline: 47px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(15, 23, 41, 0.64);
    direction: ltr;
}

.feature-box ul li {
    margin-bottom: 12px;
    line-height: 1.6;
}


.banner-image-full {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}



/* Large screens (≥1024px) */
@media (min-width: 1024px) {

    .desktop-products {
        display: none;
    }

}


.product-card {
    width: 136px;
    height: 192px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    border-radius: 16px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0px 3px 31px 0px #00000014;
    border-bottom: 2px solid #00000014;
}

.product-card img {
    width: 84px;
    margin-top: 10px;
    margin-bottom: 10px;
}
@media (min-width: 768px) {
    .product-card {
        width: 204px;
        height: 270px;
    }

    .product-card img {
        width: 120px;
    }
}
.newestProducts {
    padding:0;
}
.newestProducts .card-header {
    background: none;
    border:0;
}

.newestProducts .card-header .card-title {
    font-size:16px;
    font-weight: bold;
}

.card-header .more {
    font-size:16px;
    font-weight: 300;
    margin-bottom: 0;
    color:#000;
    line-height: 40px;
}
.card-header .with-nav {
    margin-left: 110px;
}
.newestProducts .widget {
    padding:0;
    width: 100%;
}

.card-header .title-one{
    display: inline-block;
}

.a4 img {
    width: 100%;
}

.main-banner {
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding:0 20px;
    border-radius: 12px;
    height: 550px;
    background: linear-gradient(180deg, rgba(37, 108, 250, 0.0315) 0%, rgba(37, 108, 250, 0.15) 100%);
}

.banner-text {
    max-width: 344px;
    margin-top: 40px;
}

.banner-text h1 {
    font-size: 14px;
    font-weight: 600;
    color: #0F1729;
    margin: 0;
    line-height: 1.6;
}

.banner-text p {
    margin: 6px 0 0;
    font-size: 10px;
    color: #0F1729;
}

.banner-text button {
    margin-top: 14px;
    height: 32px;
    width: 76px;
    border: none;
    border-radius: 27px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(180deg, #20c9ff, #256cfa);
    cursor: pointer;
}

.banner-img {
    margin-top: 8px;
    height: 192px;
    width: 87px;
}

/* Desktop layout */
@media (min-width: 1024px) {
    .main-banner {
        height: 550px;
        padding: 0 47px;
    }

    .banner-text {
        margin-top: 134px;
    }

    .banner-text h1 {
        font-size: 36px;
    }

    .banner-text p {
        margin-top: 17px;
        font-size: 16px;
    }

    .banner-text button {
        margin-top: 39px;
        height: 48px;
        width: 98px;
    }

    .banner-img {
        margin-top: 99px;
        height: 451px;
        width: 214px;
    }

    .desktop-products {
        display: block;
        margin-top: 38px;
    }
}


.product-row {
    display: flex;
    align-items: center;
    padding: 23px 12px;
    border-radius: 12px;
    background: linear-gradient(270deg, #256cfa 0%, rgba(37, 122, 250, 0.07) 100%);
}

.product-circle {
    width: 115px;
    height: 115px;
    border-radius: 50%;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.38), transparent);
    margin-right: 23px;
}

.product-circle img {
    width: 100%;
    border-radius: 50%;
}

.product-info p {
    margin: 0 0 8px;
    color: white;
}

.product-info .name {
    margin-top: 15px;
    font-size: 16px;
}

.product-info .brand {
    font-size: 14px;
}

.buy-button {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: white;
    cursor: pointer;
}

.buy-button-line {
    width: 27px;
    height: 1px;
    background: white;
    margin-left: 10px;
}

.product-columns {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.product-card {
    width: 190px;
    height: 272px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
}

.gradient-blue-top {
    background: linear-gradient(360deg, #25abf7 0%, rgba(37, 171, 247, 0) 92.46%);
}

.gradient-blue-bottom {
    background: linear-gradient(180deg, #20c9ff 0%, rgba(32, 201, 255, 0) 100%);
}

.product-card .product-info .name {
    font-size: 16px;
}

.product-card .product-info .brand {
    font-size: 14px;
}

.menu-icon{
    fill:#757575;
    width: 25px;
    height: 25px;
    transition:fill .25s;
}

.list-category:hover .menu-icon{
    fill:#60a5fa;
}


.category-section{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;                /* فاصله بین دو ردیف */
    width:100%;
    margin:0 auto;
}

/* هر ردیف از آیکون‌ها */
.category-row{
    display:flex;
    justify-content:center;
    gap:6px;                 /* فاصله بین آیتم‌ها */
    flex-wrap:wrap;          /* برای ریسپانسیو */
}

.category-item{
    flex:1 1 143px;
    max-width:143px;
    padding:0 16px;
    text-align:center;
}

.category-item a{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-decoration:none;
    user-select:none;
    color:inherit;
    transition:color .25s;
}

.category-item img{
    width:100px;
    height:100px;
    object-fit:contain;
    transition:transform .3s;
    border-radius: 50%;
}

.category-item p{
    margin-top:8px;
    font-size:14px;
    font-weight:600;
    text-align:center;
    word-break:break-word;
}

.category-item a:hover img{transform:scale(1.07)}
.category-item a:hover p,
.category-item a:focus p{color:#60a5fa}



.banner-wrapper{
    width:100%;
    margin:0 auto;
    margin-top: 80px;
    margin-bottom: 40px;
}

.banner-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
}

@media (min-width:768px){
    .banner-grid{
        grid-template-columns:repeat(4,1fr);
    }
}

.banner-grid img{
    width:100%;
    border-radius:10px;
}




.banner-wrapper-a2{
    margin:0 auto;
    margin-top: 40px;
    margin-bottom: 40px;
}
.banner-grid-a2{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
}
@media (min-width:768px){
    .banner-grid-a2{
        grid-template-columns:repeat(2,1fr);
    }
}
.banner-grid-a2 img{
    width:100%;
    border-radius:10px;
}

.blog .card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    box-shadow:5px 10px 200px 0px rgba(0, 0, 0, 0.06);
    padding: 4px;
    height: 100%;
    display: flex;
    flex-direction: column;
    max-height: 450px;
}

.blog .card img {
    width: 100%;
    height: 260px;
}

.blog .card-body {
    padding: 16px 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog .title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.blog .desc {
    font-size: 15px;
    font-weight: 500;
    flex-grow: 1;
    overflow: hidden;
    height: 130px;
}
.blog a:hover .desc {
    color: #81858b;
}

.blog-box {
    margin-top:40px;
}


@media(max-width: 767px) {
    .banner-container {
        height: auto;
    }
    .card-header .with-nav {
        margin-left: 0;
    }

    .search-box .btn-search {
        display: none;
    }
    .feature-grid {
        gap: 25px 24px;
    }
    .banner-grid {
        gap:8px;
    }
    .banner-wrapper {
        margin: 20px 0;
    }
    .blog-box {
        margin: 20px 0;
    }
}



.hero-slide {
    padding: 12px 0;
}

.hero-inner {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: 20px;
    height: 200px;                       /* موبایل */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-radius: 12px;
    background: linear-gradient(
            180deg,
            rgba(37, 108, 250, 0.0315) 0%,
            rgba(37, 108, 250, 0.15) 100%
    );
    overflow: hidden;
}

.hero-text {
    margin-top: 40px;
    max-width: 344px;
}

.hero-text h2 {
    font-size: 14px;
    font-weight: 600;
    color: #0f1729;
    line-height: 1.2;
}

.hero-text p {
    font-size: 10px;
    margin-top: 6px;
    color: #0f1729;
}

.btn-primary {
    margin-top: 14px;
    width: 76px;
    height: 32px;
    border: none;
    border-radius: 27px;
    background: linear-gradient(180deg, #20c9ff 0%, #256cfa 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.hero-image {
    width: 87px;
    height: 192px;
    margin-top: 8px;
    object-fit: contain;
}

/* ---------- Product boxes (desktop only) ---------- */
.hero-products {
    display: none;          /* در موبایل مخفی است */
}

/* ----------------- Desktop breakpoint ----------------- */
@media (min-width: 992px) {
    .hero-inner {
        height: 550px;
        padding-inline: 47px;
    }

    .hero-text {
        margin-top: 134px;
    }

    .hero-text h2 {
        font-size: 36px;
    }

    .hero-text p {
        font-size: 16px;
        margin-top: 17px;
    }

    .btn-primary {
        margin-top: 39px;
        width: 98px;
        height: 48px;
        font-size: 14px;
    }

    .hero-image {
        width: 214px;
        height: 451px;
        margin-top: 99px;
    }

    /* نمایش جعبه‌های محصول */
    .hero-products {
        display: flex;
        flex-direction: column;
        gap: 24px;
        margin-top: 38px;
    }

    /* --- تک جعبه افقی (بالا) --- */
    .product-box.horizontal {
        display: flex;
        align-items: center;
        padding: 23px 0;
        width: 365px;
        border-radius: 12px;
        background: linear-gradient(
                270deg,
                #256cfa 0%,
                rgba(37, 122, 250, 0.07) 100%
        );
    }

    .product-photo {
        width: 116px;
        margin-inline: 12px 23px;
        border-radius: 50%;
        background: radial-gradient(
                circle at top,
                rgba(255, 255, 255, 0.38) 0%,
                transparent 100%
        );
        overflow: hidden;
    }

    .product-photo img {
        width: 100%;
        display: block;
    }

    .product-info h3 {
        font-size: 16px;
        color: #fff;
        margin-block: 15px 8px;
    }

    .product-info .brand {
        font-size: 14px;
        color: #fff;
        margin-bottom: 8px;
    }

    .btn-ghost {
        display: flex;
        align-items: center;
        border: none;
        background: transparent;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
    }

    .btn-ghost .line {
        width: 27px;
        height: 1px;
        background: currentColor;
        margin-left: 10px;
    }

    /* --- دو جعبه عمودی سمت راست --- */
    .product-stack {
        display: flex;
        gap: 12px;
    }

    .product-box.vertical {
        width: 169px;
        height: 272px;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: left;
        padding-inline: 12px;
    }

    .product-box.vertical.top {
        background: linear-gradient(
                360deg,
                #25abf7 0%,
                rgba(37, 171, 247, 0) 92.46%
        );
    }

    .product-box.vertical.bottom {
        background: linear-gradient(
                180deg,
                #20c9ff 0%,
                rgba(32, 201, 255, 0) 100%
        );
    }

    .product-box.vertical.top .product-photo,
    .product-box.vertical.bottom .product-photo {
        margin: 0;
    }

    .product-box.vertical.bottom {
        flex-direction: column-reverse; /* تصویر پایین‌تر قرار می‌گیرد */
    }
}

.hero-slide {                    /* در همان style.css اضافه کنید */
    position: relative;
}

.hero-slide .owl-dots {          /* خودِ container دات‌ها */
    position: absolute;
    bottom: 12px;                 /* فاصله از پایین اسلاید */
    left: 16px;                   /* فاصله از چپ اسلاید */
    display: flex;
    gap: 8px;                     /* فاصله بین دایره‌ها */
}

/* مخفی کردن دکمه‌های پیش‌فرض (از تم Owl) که گاهی border دارد */
.hero-slide .owl-dot {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

/* شکل دایره‌ای خودمان */
.hero-slide .owl-dot span {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cfd8e3;          /* رنگ دایرهٔ غیرفعال */
    transition: background .3s ease, transform .3s ease;
}

/* دایرهٔ فعال */
.hero-slide .owl-dot.active span,
.hero-slide .owl-dot:hover span {
    background: #256cfa;          /* رنگ فعال */
    transform: scale(1.2);        /* کمی بزرگ‌تر برای تأکید */
}

/* در حالت دسکتاپ ممکن است بخواهید اندازه را کمی افزایش دهید */
@media (min-width: 992px) {
    .hero-slide .owl-dot span {
        width: 13px;
        height: 13px;
    }
}

/* ============= اُورلی دسته‌بندی‌ها ============= */
#mobile-categories-overlay{
    position:fixed;               /* پنل شناور */
    top:var(--main-header-h);     /* دقیقا زیر هدر اصلی */
    left:0;right:0;bottom:0;
    background:#fff;z-index:9999;
    display:flex;flex-direction:column;
    transform:translateY(100%);   /* ابتدا مخفی زیر صفحه */
    transition:transform .35s cubic-bezier(.4,0,.2,1);
}
#mobile-categories-overlay.open{transform:translateY(0)}
@media (min-width:769px){ #mobile-categories-overlay{display:none} }

/* ============= هدر داخلی پنل ============= */
.overlay-header{
    flex:0 0 var(--overlay-header-h);
    position:sticky;top:0;
    display:flex;align-items:center;gap:12px;
    background:#fff;border-bottom:1px solid var(--border);
    padding:12px;font-weight:700;z-index:10;
    transition: height 0.3s ease;
}
.overlay-header button{
    border:none;background:none;font-size:22px;cursor:pointer
}

.isolated-table {
    font-family: sans-serif;
    direction: ltr;
    position: relative;
}

.isolated-table .table-wrapper {
    position: relative;
}

.isolated-table table {
    border-collapse: separate;
    border-spacing: 5px;
    min-width: max-content;
    font-size: 13px !important;
}

.isolated-table .floating-clone {
    border-collapse: separate !important;
    border-spacing: 5px !important;
}

.isolated-table thead th {
    position: sticky;
    top: 0;
    border: 0;
    padding-top: .75rem;
    padding-bottom: .75rem;
    padding-left: 1rem;
    padding-right: 1rem;
    white-space: nowrap;
    z-index: 3;
    font-weight: 600;
    color: #0f1729;
    text-align: left !important;
    background: linear-gradient(180deg, #F5F3F3 16.35%, #E1E1E1 100%) !important;
    border-radius: 25px;
    vertical-align: middle;
    font-size: 13px;

}

.isolated-table tbody td {
    border-color: #0000001F;
    border-radius: 16px;
    border-width: 0 1px 1px 0;
    box-shadow: 8px 20px 70px 0px rgba(0, 0, 0, 0.06);
    padding-top: .75rem;
    padding-bottom: .75rem;
    padding-left: 1rem;
    padding-right: 1rem;
    min-width: 125px;
    height: 175px;
    text-align: left;
    border: 1px solid #dee2e6;
    vertical-align: top;
    background: #fff;
}

.isolated-table .column-1 { position: sticky; left: 0; z-index: 2; }
.isolated-table .column-2 { position: sticky; z-index: 2; }
.isolated-table .column-3 { position: sticky;z-index: 2; }

.isolated-table .column-2 {
    max-width: 220px;
    width: 220px;
    overflow-wrap: break-word;
    white-space: normal;
    word-break: break-word;
    hyphens: auto;
    vertical-align: top;
    border-width: 0 1px 1px 0;
}

.isolated-table thead .column-1,
.isolated-table thead .column-2,
.isolated-table thead .column-3 {
    z-index: 4; border-width: 0 1px 1px 0 !important;
}

.isolated-table thead th:not(.column-1):not(.column-2):not(.column-3),
.isolated-table tbody td {
    border-left: none;
}
.isolated-table .h-scrollbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 18px;
    overflow-x: auto;
    z-index: 100;
    background: #fafafa;
    border-top: 1px solid #ddd;
    direction: ltr;
}
.isolated-table .track {
    height: 1px;
}

.isolated-table .scroll-inner {
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    direction: ltr;
}
.isolated-table .scroll-inner::-webkit-scrollbar:horizontal {
    display: none;
}
.floating-clone-table th:nth-child(2) {
    width: 220px !important;
}

.floating-clone-table {
    font-size: 13px;
}





.glass-nav{
    position:fixed;
    bottom:12px;              /* فاصلهٔ عمودی از پایین */
    left:12px;                /* فاصلهٔ افقی از چپ */
    right:12px;               /* فاصلهٔ افقی از راست */
    height:64px;              /* در صورت تمایل کمتر/بیشتر کن */
    display:flex;
    justify-content:space-around;
    align-items:center;
    padding:0 4px;

    /* مِه و شفافیت شیشه‌ای */
    background:rgba(255,255,255,0.25);          /* رنگ پایهٔ نیمه‌شفاف */
    backdrop-filter:blur(14px) saturate(180%);
    -webkit-backdrop-filter:blur(14px) saturate(180%); /* سافاری */
    border:1px solid rgba(255,255,255,0.4);

    border-radius:32px;               /* از 18 → 32از 18 → px */
    box-shadow:0 10px 28px rgba(0,0,0,.14);   /* سایهٔ نرم‌تر */
    z-index:1000;
    transition:transform .35s ease, opacity .35s ease;
}
.glass-nav--hidden{
    transform:translateY(120%);  /* کاملاً خارج از دید */
    opacity:0;
    pointer-events:none;         /* جلوگیری از کلیک در حالت پنهان */
}

.mobile-bottom-nav{
    display:none;
}

/* آیتم‌های داخل نوار */
.mobile-bottom-nav a{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:#2e3336;               /* آیکن و متن سفید روی پس‌زمینه نیمه‌شفاف */
    font-size:12px;
    font-weight: 500;
    text-decoration:none;
}

/* آیکن‌ها (Font Awesome Light) */
.mobile-bottom-nav i{
    font-size:20px;
    margin-bottom:4px;
}

/* تغییر رنگ در هاور یا فعال (دلخواه) */
.mobile-bottom-nav a:hover,
.mobile-bottom-nav a:active{
    color:#256cfa;
}

.mobile-bottom-nav .badge{
    position:absolute;
    top:4px;
    right:calc(50% - 10px);
    width:18px;height:18px;
    border-radius:50%;
    background:#ff3b30;
    color:#fff;
    font-size:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
}


@media (max-width:768px){
    .mobile-bottom-nav, .glass-nav{
        display:flex;
    }

    .logo img {
        height: 50px;
    }
}


/* ============= فهرست سه‌سطحی ============= */
.categories{
    flex:1 1 auto;                /* بقیه‌ی ارتفاع پنل */
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    list-style:none
}
/* ---------- سطح ۱ ---------- */
.cat-item{border-bottom:1px solid var(--border)}
.cat-button{
    width:100%;display:flex;justify-content:space-between;align-items:center;
    padding:14px 16px;background:#fff;border:none;font:inherit;cursor:pointer;
    flex-direction: row-reverse;
}
.cat-button:hover{background:var(--bg-light)}
.cat-button img{width:24px;height:24px;margin-left:8px}
.chevron{transition:.25s transform}
/* ---------- سطح ۲ ---------- */
.subcats{overflow:hidden;height:0;will-change:height}
.subcat-item{border-top:1px dashed var(--border)}
.subcat-button{
    width:100%;display:flex;justify-content:space-between;align-items:center;
    padding:12px 32px 12px 16px;background:#fff;border:none;font:inherit;cursor:pointer;
    flex-direction: row-reverse;
}
.subcat-button:hover{background:var(--bg-light)}
/* ---------- سطح ۳ ---------- */
.level3 {
    overflow: hidden;
    height: 0;
    padding-right: 48px;
}
.level3 a{
    display:block;padding:8px 4px;color:var(--muted);text-decoration:none
}
.level3 a:hover{color:var(--primary)}
.subcat-item.cat__expanded--xyz > .level3 {
    height: auto !important;
}
.cat-item.cat__expanded--xyz > .cat-button .chevron,
.subcat-item.cat__expanded--xyz > .subcat-button .chevron {
    transform: rotate(180deg);
}

/*#mobile-categories-overlay .subcats,
#mobile-categories-overlay .level3 {
    display: block;
    max-height: none !important;
    overflow: hidden;
}*/
/*
#mobile-categories-overlay .subcat-item {
    overflow: visible !important;
}

#mobile-categories-overlay .level3 {
    position: relative;
    display: block;
    overflow: hidden; !* برای اینکه محتوای بسته نشتی نداشته باشه *!
    max-height: none !important;
    z-index: 5;        !* مطمئن شو زیر چیزی نیست *!
}*/


/* Product Detail Custom Styles */

.img-thumbnail {
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s ease;
}

.img-thumbnail.active {
    border-color: #007bff;
}

.product-description {
    font-size: 14px;
    color: #666;
}

.spec-box {
    font-size: 14px;
    border-radius: 10px;
    background-color: #f8f9fa;
}

.review-box {
    font-size: 14px;
    background: #fefefe;
    border-radius: 10px;
    border: 1px solid #ddd;
}

.related-product {
    min-width: 140px;
    border-radius: 10px;
    background-color: #fff;
    transition: transform 0.2s ease;
}

.related-product:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}


.product-detail {

}
.product-detail .product-title{
    text-align: end;
    margin-bottom: 22px;
    font-size: 20px;
    font-weight: 700;
    color: #0F1729;
    position: relative;
}


.product-detail .product-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-image: radial-gradient(circle,rgba(0, 0, 0, 0.36) 1.5px, transparent 1.5px);
    background-size: 12px 4px;
    background-repeat: repeat-x;
}

@media (min-width: 1024px) {
    .product-detail .product-title {
        margin-bottom: 1.5rem;
        padding-bottom: 1.5rem;
        font-size: 24px;
        font-weight: 600;
    }
}

.section-title {
    text-align: end;
    font-size: 16px;
    font-weight: 400;
    color: #0F17298A;
}

@media (min-width: 1024px) {
    .section-title {
        font-size: 20px;
    }
}

.detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 36px;
    margin-top: 8px;
    padding: 0 12px;
    border-bottom: 2px solid #00000014;
    border-radius: 16px;
    box-shadow: 8px 20px 200px 0px #00000014;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.12) 17.49%, #ffffff 97.44%);
 /*   border-image-source: linear-gradient(117.35deg, rgba(0, 0, 0, 0) 56.43%, rgba(0, 0, 0, 0.08) 93.69%);*/
}

.detail-row:first-of-type {
    margin-top: 12px;
}

@media (min-width: 1024px) {
    .detail-row {
        height: 40px;
        margin-top: 15px;
    }

    .detail-row:first-of-type {
        margin-top: 24px;
    }
}

.detail-key {
    font-size: 14px;
    font-weight: 500;
    color: #757575;
}
.detail-key a.download{
    color: rgba(37, 108, 250, 1);
}
.detail-value {
    font-size: 14px;
    font-weight: 600;
    color: #0F1729;
}
.product-description {
    gap: 10px;
    border-radius: 16px;
    border-width: 1px;
    padding: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 46.88%, #FFFFFF 100%);
    border: 1px solid;
    border-image-source: linear-gradient(162.37deg, rgba(0, 0, 0, 0) 56.23%, rgba(0, 0, 0, 0.08) 96.59%);
    box-shadow: 8px 20px 100px 0px rgba(0, 0, 0, 0.06);
    margin-top: 15px;

}
.product-order-box .product-box {
    margin-top: 12px;
    padding: 12px;
    border-radius: 16px;
    background: linear-gradient(164.16deg, rgba(255, 255, 255, 0) 2.58%, #FFFFFF 91.4%);
    border: 1px solid;
    border-image-source: linear-gradient(162.37deg, rgba(0, 0, 0, 0) 56.23%, rgba(0, 0, 0, 0.08) 96.59%);
    box-shadow: 8px 20px 250px 0px rgba(0, 0, 0, 0.06);

    /*border-bottom: 2px solid #00000014;
    box-shadow: 8px 20px 200px 0px #00000014;*/
}

@media (min-width: 1024px) {
    .product-order-box .product-box {
        order: 1;
        padding: 20px 32px;
    }
}

.product-order-box .product-stock {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 12px;
    border-bottom: 0.5px solid #0000001F;
    color: #616161;
    flex-direction: row-reverse;
}

@media (min-width: 1024px) {
    .product-order-box .product-stock {
        justify-content: space-between;
        border-bottom-width: 1px;
        border-style: dashed;
    }
}

.product-order-box .stock-amount {
    margin-inline-end: 12px;
    font-size: 16px;
    font-weight: 500;
}

.product-order-box .stock-label {
    font-size: 14px;
    font-weight: 400;
}

.product-order-box .product-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
}

.product-order-box .price {
    font-size: 16px;
    font-weight: 600;
}

.product-order-box .divider {
    width: 1px;
    height: 17.5px;
    background-color: #0F17291F;
}

.product-order-box .circle-btn {
    display: flex;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #0F172914;
    align-items: center;
    justify-content: center;
}

.product-order-box .icon {
    width: 12px;
    height: 12px;
}

.product-order-box .counter {
    width: 87px;
    height: 40px;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    border-bottom: 2px solid #0000003D;
    border-radius: 9px;
    font-size: 16px;
    font-weight: 600;
}

.product-order-box .product-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 16px;
}

@media (min-width: 1024px) {
    .product-order-box .product-actions {
        flex-direction: column;
    }

    .product-order-box .product-actions button:first-child {
        order: 2;
        margin-top: 8px;
        margin-inline-end: 0;
    }

    .product-order-box .product-actions button:last-child {
        order: 1;
    }
}

.product-order-box .save-btn {
    height: 44px;
    width: 100%;
    min-width: 80px;
    border: 1px solid #BBBBBB;
    background: #fff;
    border-radius: 27px;
    display: flex;
    font-size: 14px;
    align-items: center;
    justify-content: center;
    margin-inline-end: 8px;
}

.product-order-box .add-btn {
    display: flex;
    height: 44px;
    width: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 27px;
    font-size: 14px;

    background-color: #256CFA;
    color: white;
}

.product-order-box .add-btn .icon {
    width: 20px;
    margin-inline-start: 8px;
}

.product-order-box .inquiry-info {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px dashed #0000003D;
    font-size: 14px;
    font-weight: 300;
    color: #0F1729;
}

.product-order-box .pricing-title {
    font-size: 16px;
    font-weight: 400;
    color: #0F17298A;
    margin-top: 16px;
}

.product-order-box .price-row {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}

.product-order-box .price-text {
    font-size: 16px;
    font-weight: 400;
}

.product-order-box .price-qty {
    font-size: 16px;
    font-weight: 700;
    color: #256CFA;
}

.product-details {
    padding: 0 16px;
    margin-top:70px
}

.product-details .intro-title {
    text-align: end;
    font-size: 14px;
    font-weight: 400;
    color: #0F17298A;
}

@media (min-width: 1024px) {
    .product-details .intro-title {
        font-size: 20px;
        font-weight: 500;
    }
}

.product-details .intro-text {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 400;
    text-align: right;
    color: #0F1729;
}

@media (min-width: 1024px) {
    .product-details .intro-text {
        margin-top: 48px;
    }
}

.product-details .specs-title {
    text-align: end;
    font-size: 14px;
    font-weight: 400;
    color: #0F17298A;
}

@media (min-width: 1024px) {
    .product-details .specs-title {
        font-size: 20px;
        font-weight: 500;
    }
}

.product-details .specs-grid {
    display: block;
}

@media (min-width: 1024px) {
    .product-details .specs-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(4, auto);
        gap: 0 24px;
    }
}

.product-details .spec-item {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 36px;
    padding: 0 12px;
    border-bottom: 2px solid #00000014;
    border-radius: 16px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.12) 17.49%, #fff 97.44%);
    box-shadow: 8px 20px 200px 0px #00000014;
}

@media (min-width: 1024px) {
    .product-details .spec-item {
        height: 40px;
    }
}

.product-details .spec-label {
    font-size: 14px;
    font-weight: 500;
    color: #757575;
}

.product-details .spec-value {
    font-size: 14px;
    font-weight: 600;
    color: #0F1729;
}

.title-with-line {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    margin-top: 24px;
    flex-direction: row-reverse;
}

.title-with-line::before {
    content: "";
    flex-grow: 1;
    height: 1px;
    margin-right: 16px;
    background: repeating-linear-gradient(
            to left,
            rgba(0, 0, 0, 0.2),
            rgba(0, 0, 0, 0.2) 4px,
            transparent 4px,
            transparent 8px
    );
}


.title-with-line-2 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    margin-top: 24px;
    flex-direction: row-reverse;
}

.title-with-line-2::before {
    content: "";
    flex-grow: 1;
    height: 1px;
    margin-right: 16px;
    margin-left:115px;
    background: repeating-linear-gradient(
            to left,
            rgba(0, 0, 0, 0.2),
            rgba(0, 0, 0, 0.2) 4px,
            transparent 4px,
            transparent 8px
    );
}

.title-with-line .intro-title,
.title-with-line .specs-title,
.title-with-line-2 .specs-title
{
    font-size: 14px;
    font-weight: 400;
    color: #0F17298A;
}

@media (min-width: 1024px) {
    .title-with-line .intro-title,
    .title-with-line .specs-title,
    .title-with-line-2 .specs-title
    {
        font-size: 20px;
        font-weight: 500;
    }
}

.gallery-items .owl-item img {
    border-bottom: 2px solid #00000014;
    border-radius: 16px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.12) 17.49%, #fff 97.44%);
    box-shadow: 8px 20px 200px 0px #00000014;
}

.comments-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 32px;
}

.comment-box {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.12) 17.49%, #ffffff 97.44%);
    border-bottom: 2px solid #00000014;
    border-radius: 16px;
    box-shadow: 8px 20px 200px 0px #00000014;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 120px;
}

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

.comment-name {
    font-size: 14px;
    font-weight: 600;
    color: #0F1729;
}

.comment-date {
    font-size: 12px;
    font-weight: 400;
    color: #757575;
}

.comment-body {
    font-size: 14px;
    font-weight: 400;
    color: #0F1729;
    line-height: 1.6;
}

/* ریسپانسیو برای موبایل */
@media (max-width: 1024px) {
    .comments-section {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .comments-section {
        grid-template-columns: 1fr;
    }
}

.comment-form {
    max-width: 100%;
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.comment-form .form-row {
    display: flex;
    flex-direction: column;
}

.comment-form .form-input,
.comment-form .form-textarea {
    border-bottom: 2px solid #00000014;
    border-radius: 16px;
    box-shadow: 8px 20px 200px 0px #00000014;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 400;
    color: #0F1729;
    resize: vertical;
    min-height: 40px;
    background: linear-gradient(270deg, rgba(15, 23, 41, 0.04) 5.77%, rgba(15, 23, 41, 0) 93.16%);
}

.comment-form .form-textarea {
    min-height: 100px;
    line-height: 1.6;
}

.comment-form .form-submit {
    background-color: #256CFA;
    color: white;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 24px;
    border: none;
    border-radius: 27px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.comment-form .form-submit:hover {
    background-color: #1e56c6;
}

/* ریسپانسیو موبایل */
@media (max-width: 768px) {
    .comment-form {
        gap: 12px;
    }

    .comment-form .form-input,
    .comment-form .form-textarea {
        font-size: 13px;
        padding: 10px 14px;
    }

    .comment-form .form-submit {
        width: 100%;
        text-align: center;
    }
}


.article-box {
    display: flex;
    flex-direction: row;
    background: linear-gradient(90deg, rgba(255,255,255,0.12) 17.49%, #ffffff 97.44%);
    border-bottom: 2px solid #00000014;
    border-radius: 16px;
    box-shadow: 8px 20px 200px 0px #00000014;
    padding: 16px;
    gap: 16px;
    margin-bottom: 24px;
}

.article-thumbnail {
    flex: 0 0 25%;
}

.article-thumbnail img {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
    max-height: 160px;
}

.article-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.article-title {
    font-size: 18px;
    font-weight: 600;
    color: #0F1729;
    margin: 0 0 8px;
}

.article-summary {
    font-size: 14px;
    font-weight: 400;
    color: #0F17298A;
    line-height: 1.7;
    margin: 0 0 12px;
    overflow: hidden;
    height: 120px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.article-meta {
    text-align: left;
}

.article-date {
    font-size: 13px;
    color: #757575;
}

@media (max-width: 768px) {
    .article-box {
        flex-direction: column;

    }

    .article-thumbnail {
        flex: none;
    }

    .article-thumbnail img {
        max-height: 200px;
        width: 100%;
    }

    .article-title {
        font-size: 16px;
    }

    .article-summary {
        font-size: 13px;
        height: auto;
       /* min-height: 280px;*/
    }
}


.sidebar-blog {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* بخش عنوان‌ها */
.sidebar-title {
    font-size: 18px;
    font-weight: 600;
    color: #0F1729;
    margin-bottom: 12px;
}

/* لیست دسته‌بندی‌ها */
.sidebar-category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-category-list li {
    margin-bottom: 8px;
}

.sidebar-category-list a {
    text-decoration: none;
    color: #256CFA;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s;
}

.sidebar-category-list a:hover {
    color: #1e56c6;
}

/* مقالات محبوب */
.popular-article-box {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 12px;
    background: linear-gradient(90deg, rgba(255,255,255,0.12) 17.49%, #ffffff 97.44%);
    border-bottom: 2px solid #00000014;
    border-radius: 16px;
    box-shadow: 8px 20px 200px 0px #00000014;
    padding: 12px;
    margin-bottom: 16px;
}

.popular-thumbnail {
    flex: 0 0 60px;
}

.popular-thumbnail img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 12px;
}

.popular-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.popular-title {
    font-size: 14px;
    font-weight: 600;
    color: #0F1729;
    margin-bottom: 4px;
}

.popular-date {
    font-size: 12px;
    color: #757575;
}

/* ریسپانسیو موبایل */
@media (max-width: 768px) {
    .sidebar-blog {
        gap: 24px;
    }

    .sidebar-title {
        font-size: 16px;
    }

    .popular-article-box {
        flex-direction: column;
        align-items: flex-start;
    }

    .popular-thumbnail img {
        width: 100%;
        height: auto;
        border-radius: 12px;
    }

    .popular-content {
        align-items: flex-start;
        margin-top: 8px;
    }
}


.article-detail {
    display: flex;
    flex-direction: column;
    gap: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: linear-gradient(90deg, rgba(255,255,255,0.12) 17.49%, #ffffff 97.44%);
    border-bottom: 2px solid #00000014;
    border-radius: 16px;
    box-shadow: 8px 20px 200px 0px #00000014;
    padding: 24px;
}

.article-image img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    object-fit: cover;
    max-height: 400px;
}

.article-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.article-title a {
    font-weight: 700;
    color: #0F1729;
}

.article-date {
    font-size: 14px;
    color: #757575;
}

.article-summary {
    font-weight: 400;
    line-height: 1.7;
}

.article-content {
    font-size: 15px;
    font-weight: 400;
    color: #0F1729;
    line-height: 1.8;
}

/* بخش نظرات */
.article-comments {
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.comments-title {
    font-size: 20px;
    font-weight: 600;
    color: #0F1729;
    text-align: right;
}

/* فرم ثبت نظر (قبلاً طراحی شده - قابل استفاده از قبل) */
.comment-form { /* ...همان استایل قبلی */ }
.form-row { /* ... */ }
.form-input, .form-textarea { /* ... */ }
.form-submit { /* ... */ }

/* لیست نظرات (همان استایل قبلی) */
.comments-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.comment-box {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.12) 17.49%, #ffffff 97.44%);
    border-bottom: 2px solid #00000014;
    border-radius: 16px;
    box-shadow: 8px 20px 200px 0px #00000014;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 120px;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.comment-name {
    font-size: 14px;
    font-weight: 600;
    color: #0F1729;
}

.comment-date {
    font-size: 12px;
    color: #757575;
}

.comment-body {
    font-size: 14px;
    font-weight: 400;
    color: #0F1729;
    line-height: 1.6;
}

/* ریسپانسیو موبایل */
@media (max-width: 768px) {
    .article-title {
        font-size: 20px;
    }

    .article-summary {
        font-size: 14px;
    }

    .article-content {
        font-size: 14px;
    }

    .comments-section {
        grid-template-columns: 1fr;
    }
}


.breadcrumb-box {
    background: linear-gradient(90deg, rgba(255,255,255,0.12) 17.49%, #ffffff 97.44%);
    border-bottom: 2px solid #00000014;
    border-radius: 16px;
    box-shadow: 8px 20px 200px 0px #00000014;
    padding: 12px 24px;
    margin-bottom: 24px;
}

.breadcrumb {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #0F1729;
}

.breadcrumb li {
    display: flex;
    align-items: center;
}

.breadcrumb li a {
    color: #256CFA;
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb li a:hover {
    color: #1e56c6;
}

.breadcrumb li::after {
    content: "›";
    color: #bbb;
    margin: 0 8px;
}

.breadcrumb li:last-child::after {
    content: none;
}

.breadcrumb .current {
    font-weight: 600;
    color: #0F1729;
}

@media (max-width: 768px) {
    .breadcrumb-box {
        padding: 12px 16px;
    }

    .breadcrumb {
        font-size: 13px;
        gap: 6px;
        flex-wrap: wrap;
    }
}

.detail-key .brand {
    height: 18px;
    margin-left: 20px;
}

.pdct-order .btn-buy{
    height:35px;
}
.quantity-cell-table {
    border: 1px #0000001F solid;
    background: #fff;
    border-top-left-radius: 24px;
    border-bottom-left-radius: 24px;
    width: 75px !important;
}

.brand_tag {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 999px;
    background: linear-gradient(to right, #ffffff, #e0f0ff, #c7e2ff);
    color: #0472bb;
    font-size: 13px;
    min-width: 100px;
    margin-bottom: 15px;
}

.btn-option {
    background: none;
}
.btn-option i{
    font-size:16px;
    margin-right: 10px;
    color: #0F1729BD;
}
.btn-option span {
    font-size:13px;
    color: #0F17298A
}
.product-list-option {
    margin-top: 20px;
}