body {
    background-color: #212121 !important;
    font-family: IranYekan, sans-serif;
}

p {
    font-family: IranYekan, Ebrima, sans-serif;
    color: unset !important;
    font-size: unset !important;
    direction: unset !important;
    line-height: unset !important;
    margin: 0 !important;
}

/* Base Layout */
.hero-section {
    display: flex;
    height: 100vh;
    padding: 100px 24px 24px;
    direction: rtl;
    max-width: 2000px;
    margin-left: auto;
    margin-right: auto;
    min-height: 1000px;
    max-height: 1080px;
}

.hero-image {
    flex: 1;
    background: url('/pro/1.jpg') no-repeat;
    background-size: cover;
    border-radius: 20px;
    background-position-y: top;
}

.hero-content {
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    padding-right: 50px;
    padding-left: 5%;
}

.hero-title {
    font-family: Iranyekan;
    color: white;
    font-size: 30px;
    line-height: 32px;
    text-align: right;
    margin-bottom: 16px;
    border-right: 5px solid rgb(255, 216, 6);
    padding-right: 7px;
}

.hero-subtitle {
    font-family: Iranyekan;
    font-size: 18px;
    font-weight: 400;
    line-height: 36px;
    text-align: right;
    margin-bottom: 8px;
}

.hero-description {
    font-family: Iranyekan;
    color: #CCCCCC;
    font-size: 18px;
    font-weight: 400;
    line-height: 36px;
    text-align: right;
    margin-bottom: 32px;
}

.text-highlight {
    color: rgb(255, 216, 6);
}

.hero-features {
    color: #CCC;
    font-family: 'Peyda', sans-serif !important;
    direction: rtl;
    text-align: right;
    list-style: none;
    padding: 0;
}
.hero-features-svg{
    background-image: url('/pro/milano-features.svg');
    background-size: contain; /* باعث می‌شود کل تصویر درون div جا بگیرد */
    background-repeat: no-repeat; 
    background-position: center; 
    

    width: 192px; 
    height: 54px;

}

.hero-features li {
    position: relative;
    padding-right: 18px;
    margin-bottom: 8px;
}

.hero-features li::before {
    content: "";
    width: 8px;
    height: 8px;
    background: rgb(255, 216, 6);
    border-radius: 50%;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.action-btn {
    padding: 8px;
    width: 160px;
    font-size: 14px;
    background-color: #D4D4D4;
    color: #262626;
    height: 40px;
    font-family: IranYekan;
    border-radius: 30px;
    box-shadow: 0 3px 6px #0000003d;
    margin-top: 32px;
    border: none;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    text-align:center;
}

.action-btn:hover {
    background-color: rgb(255, 216, 6);
    color: black;
}

/* Support Section */
.support-section {
    display: flex;
    direction: rtl;
    padding: 0 12px;
    max-width: 2000px;
    margin: 0 auto;
}

.support-box {
    display: flex;
    height: auto;
    width: 100%;
}

.support-conditions { flex: 4; }
.support-warranty { flex: 1; }
.support-installers { flex: 1; }

.support-inner {
    background-color: #363634;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 12px;
    flex-direction: column;
    direction: rtl;
    padding: 32px;
    width: 100%;
}

.support-title {
    font-size: 18px !important;
    font-weight: 700;
    color: white !important;
    font-family: IranYekan;
    width: 100%;
    margin-bottom: 12px !important;
}

.support-list {
    width: 100%;
    list-style-position: inside;
}

.support-list li {
    color: #D1D1D1;
    font-size: 14px;
    font-weight: 500;
    width: 100%;
    font-family: IranYekan;
    text-align: right;
}

.support-list li:first-child {
    margin-bottom: 16px;
}

.support-inner p {
    font-size: 14px !important;
    color: #D1D1D1 !important;
    white-space: nowrap;
    font-family: IranYekan;
    text-align: center;
}

/* Products Layout */
.products-container {
    direction: rtl;
    display: flex;
    flex-direction: column;
    max-width: unset !important;
    margin: 12px !important;
}

.product-row {
    display: flex;
}

.row-three-cols .product-col {
    flex-basis: 33.33333%;
    max-width: 33.33333%;
    padding: 0;
}

.row-two-cols .product-col {
    flex-basis: 50%;
    max-width: 50%;
    padding: 0;
}

.stacked-col {
    display: flex;
    flex-direction: column;
}

/* Cards */
.product-card {
    border-radius: 20px;
    box-shadow: 0 4px 6px #111;
    overflow: hidden;
    display: flex;
    margin: 12px;
    position: relative;
}

.product-card img {
    width: 100%;
    height: 100%;
}

/* Positions / Layouts */
.product-details {
    position: absolute;
    display: flex;
    flex-direction: column;
}

.layout-standard { top: 25%; right: 6%; align-items: flex-start; }
.layout-top-right-offset { top: 12%; right: 10%; }
.layout-top-left { top: 12%; left: 10%; }
.layout-top-right-inner { top: 15%; right: 7%; }
.layout-top-right { top: 15%; right: 15%; }
.layout-center-left { top: 12%; left: 26%; }
.layout-towel-venice { top: 15%; right: 21%; }
.layout-towel-superlux { top: 15%; left: 20%; }
.layout-milano-offset{top: 59%; left: 47%; }
.layout-decorative-offset{top: 10%; right: 6%; }
.layout-t-venice-offset{top: 10%; left: 7%; }

.layout-ltr { direction: ltr !important; }

/* Text & Details */
.product-title {
    color: #cecece;
    font-size: 2.1vw;
    font-family: Beirot;
    margin: 0 0 12px;
    border-right: 5px solid rgb(255, 216, 6);
    padding-right: 7px;
    text-align: right;
}
.product-title.text-darkk{
	border-color: #0b0b0b;
}
.layout-towel-superlux .product-title{
   border:none;
    border-left: 5px solid rgb(255, 216, 6);
    padding-left: 7px;
}
.layout-standard .product-title { font-size: 1.9vw; }
.layout-top-right-offset .product-title { font-size: 1.8vw; }
.layout-top-right-inner .product-title { font-size: 1.4vw; }
.layout-towel-superlux .product-title { font-size: 1.6vw; }
.layout-top-right .product-title { font-size: 1.7vw; }

.product-specs {
    font-size: 14px;
    color: #cecece;
    margin: 0 0 12px;
    display: flex;
    flex-wrap: nowrap;
}

.product-colors {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px;
    font-family: IranYekan;
    color: #cecece;
}

.color-dot {
    width: 16px;
    height: 16px;
    border-radius: 20px;
    margin: 6px;
    box-shadow: -2px 2px 4px #1e1e1e;
}
.bg-black { background-color: black; }
.bg-white { background-color: white; }
.bg-gray { background-color: #5b5b5b; }

.text-darkk { color: #0b0b0b !important; }

.padding-x { padding: 0 8px; color:rgb(255, 216, 6) !important;}

.text-darkk .padding-x {color: #0b0b0b !important; }
/* Buttons */
.product-link {
    margin-top: 24px;
    display: flex;
}
.btn-outline {
    font-family: IranYekan;
    padding: 0 16px;
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    border-radius: 30px;
    font-weight: 500;
    border: 1px solid #ffcc01;
    background-color: transparent;
    color: white;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}
.btn-outline:hover {
    background-color: white;
    color: black;
    border-color: white;
}
.btn-darkk {
    border: 1px solid black !important;
    color: black !important;
}
.btn-darkk:hover {
    background-color: rgb(46, 46, 46) !important;
    border: 1px solid rgb(46, 46, 46) !important;
    color: white !important;
}

/* Device Visibility */
.img-mobile, .mobile-only { display: none; }
.desktop-only { display: flex; } /* specifically for .merged-card which overrides display */


/* Media Queries */
@media only screen and (min-width: 2000px) {
    .products-container {
        max-width: 2000px !important;
        margin: 12px auto !important;
    }
    .product-title {
        font-size: 42px !important;
    }
}

@media only screen and (max-width: 1500px) {
    .btn-outline { font-size: 12px; height: 30px; }
    .product-specs, .product-colors { font-size: 13px; }
    .layout-standard { top: 22%; }
}

@media only screen and (max-width: 1300px) {
    .product-specs, .product-colors { font-size: 12px; }
    .layout-standard { top: 20%; }
    .layout-top-right, .layout-center-left { top: 12%; }
}

@media only screen and (max-width: 1200px) {
    .hero-section {
        flex-direction: column;
        max-height: unset;
        height: auto;
    }
    .hero-content {
        background-color: #363634;
        padding: 32px;
        border-radius: 0 0 20px 20px;
    }
    .hero-image {
        min-height: 600px;
        border-radius: 20px 20px 0 0;
    }
    .hero-title { font-size: 25px; }
    .hero-description, .hero-subtitle { font-size: 16px; line-height: 32px; }
    
    .row-three-cols { flex-wrap: wrap; }
    .row-three-cols > div:nth-child(1) { flex-basis: 50%; max-width: 50%; order: 1; }
    .row-three-cols > div:nth-child(2) { flex-basis: 100%; max-width: 100%; order: 3; }
    .row-three-cols > div:nth-child(3) { flex-basis: 50%; max-width: 50%; order: 2; }
    
    .stacked-col { flex-direction: row; }
    .stacked-col > div { max-width: 50%; flex-basis: 50%; }

    .desktop-only { display: none !important; }
    .mobile-only { display: block; }
    .row-mixed { display: flex; }
    .row-mixed .product-col { flex-basis: 50%; max-width: 50%; }

    .layout-towel-superlux { top: 3%; left: unset; right: 8%; }
    .layout-towel-venice { top: 3%; right: unset; left: 8%; }
    .product-link { margin-top: 8px; }

    .img-mobile { display: block; }
    .img-desktop { display: none; }
}

@media only screen and (max-width: 1024px) {
    .row-three-cols .product-col { flex-basis: 100% !important; max-width: 100% !important; }
    .stacked-col { flex-direction: column; }
    .stacked-col > div { flex-basis: 100%; max-width: 100%; }

    .support-section { flex-wrap: wrap; }
    .support-conditions { flex: 0 0 100%; max-width: 100%; }
    .support-warranty, .support-installers { max-width: 100%; }
    .support-inner{margin:5px 0;}
    .product-title{font-size:30px !important;}
}

@media only screen and (max-width: 900px) {
    .row-two-cols { flex-direction: column; }
    .row-two-cols .product-col { flex-basis: 100%; max-width: 100%; }
    
    .img-mobile { display: none; }
    .img-desktop { display: block; }
}
@media only screen and (max-width: 768px) {
    .hero-title { font-size: 20px; line-height: unset; }
    .hero-section { max-width: 600px; padding: 76px 12px 16px; min-height: auto; height: auto;}
    .products-container { max-width: 600px !important; margin: 0 auto !important; }
    
    /* یک ستونه کردن تمام ردیف ها */
    .row-three-cols, .row-mixed, .row-two-cols { display: flex; flex-direction: column; }
    .product-col { flex-basis: 100% !important; max-width: 100% !important; }
    
    /* استانداردسازی ظاهر تمامی کارت های محصول برای موبایل */
    .product-card {
        display: flex;
        flex-direction: column;
        height: auto;
        background-color: #363634; /* پس زمینه تیره برای بخش توضیحات */
    }
    
    .product-card img {
        height: auto;
        object-fit: cover;
    }
    
    /* خارج کردن توضیحات از حالت شناور و قرار دادن در پایین عکس */
    .product-details {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        padding: 20px 15px;
        align-items: flex-start !important;
        direction: rtl !important;
    }

    .product-title {
        font-size: 22px !important;
        color: #cecece !important;
        border-right: 5px solid rgb(255, 216, 6) !important;
        border-left: none !important;
        padding-right: 7px !important;
        padding-left: 0 !important;
    }

    .product-specs, .product-colors {
        color: #cecece !important;
        font-size: 14px !important;
    }

    /* اصلاح رنگ دکمه ها برای خوانایی روی پس زمینه تیره */
    .btn-outline {
        border-color: #ffcc01 !important;
        color: white !important;
    }
    
    .btn-outline:hover {
        background-color: white !important;
        color: black !important;
    }
    .text-darkk .padding-x{
    	color:rgb(255, 216, 6) !important
    }
}

@media only screen and (max-width: 768px) {
    .hero-title { font-size: 20px; line-height: unset; }
    .hero-section { max-width: 600px; padding: 76px 12px 16px; }
    .products-container { max-width: 600px !important; margin: 0 auto !important; }
    .row-three-cols, .row-mixed, .row-tw