/*
Theme Name: Dorika Exclusive Theme
Theme URI: https://dorikaceramics.com
Author: Dorika Studio
Author URI: https://dorikaceramics.com
Description: قالب اختصاصی برند دوریکا 
Version: 1.0.0
Text Domain: dorika
*/

@font-face {
    font-family: 'Vazir';
    src: url("assets/fonts/Vazir.woff") format('woff'),
         url("assets/fonts/Vazir.ttf") format('truetype');
    font-weight: 400; 
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazir';
    src: url("assets/fonts/Vazir-Medium.woff2") format('woff2'),
         url("assets/fonts/Vazir-Medium.woff") format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazir';
    src: url("assets/fonts/Vazir-Bold.woff") format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Arad';
    src: url("assets/fonts/AradVF.woff2") format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family:'IR';
    src: url("assets/fonts/IranNastaliq.ttf") format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


:root {
    --text-color : #303030; 
    --text-color-01 : #17431f;
    --text-color-02 : #4B6352;
    --text-color-03: #98B88D;
    --background-color: #faf9f6;
    --primary-color: #D2E2CD;
    --secondary-color: #1e392a;
    --hover-color: #668862;
    --gray: #fcfbf9;
    --font-size-text: clamp(0.805vw, 13.5px, 0.87vw);
    --font-size-headings: clamp(0.85vw, 15px, 0.95vw);
    --font-size-btn : clamp(0.7vw, 12px, 0.9vw);
    --section-spacing: clamp(135px, 5vh, 140px) 0 clamp(120px, 5vh, 130px) ;
    --header-menus: clamp(0.81vw, 15px, 0.93vw);
} 

/* ==================== RESET & BASE ==================== */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    font-family: 'vazir';
}

html {
    scrollbar-gutter: stable;
    scrollbar-color: #314d1f80 #f1f0ed;
    scrollbar-width: auto;
    height: 100%; /* این کمک میکنه محاسبات ارتفاع دقیق‌تر بشه */
}

body {
    font-family: 'vazir', sans-serif;
    line-height: 1.6;
    direction: rtl;
    text-align: right;
    color: var(--text-color);
    background-color: var(--background-color);
    overflow-x: clip;
    
    /* === منطق اصلی چسبیدن فوتر به پایین (Sticky Footer) === */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}


@media screen and (max-width: 782px) {
    body.admin-bar {
        min-height: calc(100vh - 46px); /* در موبایل ارتفاع ادمین بار وردپرس 46 پیکسله */
    }
}

nav ul, ul, li {
    list-style: none;
}

a {
    text-decoration: none;
    transition: color 0.3s ease;
}

.container {
    margin: 0 auto;
    width: 80%;
}

::selection  {
    background: #d4e0d192;
}

/* ==================== LAYOUT (Content & Footer) ==================== */

/* زنجیره فلکس باکس باید از Body به این Container هم منتقل شود */
#scroll-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* این دستور باعث می‌شود کانتینر تمام فضای خالیِ باقیمانده از body را پر کند */
    width: 100%;
}

main, .site-content {
    flex-grow: 1; /* پر کردن فضای خالیِ داخل scroll-container برای هل دادن فوتر */
    width: 100%;
    /* در صورت نیاز به مدیریت بهتر عناصر داخلیِ main، این دو خط رو هم میتونی از کامنت در بیاری: */
    /* display: flex; */
    /* flex-direction: column; */
}

.site-footer {
    flex-shrink: 0;
    width: 100%;
    margin-top: auto; /* فوتر با قدرت به پایین‌ترین نقطه ممکن چسبانده می‌شود */
}

/* اصلاح تداخل هدر با نوار مدیریت وردپرس (از قبل داشتیم) */
body.admin-bar .header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .header {
        top: 46px;
    }
}



/* ==================== STICKY HEADER LAYOUT ==================== */
header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--background-color) !important; 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    z-index: 1000; 
}

.header-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between; 
    margin: 0 auto;
    height: clamp(68px, 8.9vh, 69px);
    width: 80%; 
    padding: 0; 
    direction: rtl;
    position: relative;
    z-index: 10; 
    background-color: var(--background-color);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 0.5vw;
    flex: 0 0 auto;
}

.sidebar-menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 !important; 
    display: flex;
    align-items: center;
    justify-content: flex-start; 
    z-index: 9999;
    position: relative;
}

.hamburger {
    width: 30px;
    height: clamp(23px, 3.6vh, 25px);
    --color: #383838;
    --thickness: 14px;      
    --spacing: 15px;
}

.hamburger line {
    stroke: var(--color);
    stroke-width: var(--thickness);
    stroke-linecap: round;
    transition: all 0.2s ease;
}

.hamburger .line1 { y: 30px; }
.hamburger .line2 { y: calc(30px + var(--spacing)); }
.hamburger .line3 { y: calc(30px + var(--spacing) * 2); }
.sidebar-menu-toggle:hover .hamburger line {
    stroke: #535353; 
}

.logo img {
    height: clamp(43px, 5.2vh, 50px);
    display: block;
    object-fit: contain;
}

.header-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-menu {
    display: flex;
    gap: 3.8vw;
    align-items: center;
}

.nav-menu a {
    color: var(--text-color-01);
    font-weight: 600;
    font-size: var(--header-menus);
}

.nav-menu a:hover {
    color: var(--hover-color);
}

.nav-menu > li {
    position: relative;
    padding: 35px 0;
}

.sales-link-placeholder a {
    display: flex;
    align-items: center;
    gap: clamp(5px, 0.7vw, 11px); 
    color: #1f1f1f;
    font-weight: 600;
    font-size:  var(--header-menus);
    text-decoration: none;
    transition: color 0.2s ease; 
}

.sales-png-icon {
    width: clamp(18px, 1vw, 18px);
    height: clamp(20px, 2vh, 20px);
    object-fit: contain;
    filter: brightness(0); 
    transition: filter 0.2s ease;
    margin-bottom: 1px;
}

.sales-link-placeholder a:hover {
    color: #303030; 
}

.sales-link-placeholder a:hover .sales-png-icon {
    filter: brightness(0) invert(20%) sepia(0%) saturate(0%) hue-rotate(0deg);
}

.divider {
    margin: 0 0.9vw;
    display: flex;
    align-items: center;
}

.divider span {
    width: 1px;
    height: clamp(12px, 2.6vh, 19px);
    background-color: #c2c2c2;
}

.lang-link {
    font-weight: 700;
    letter-spacing: 0.5px;
    font-size:  var(--header-menus);
    color: var(--text-color-01);
    text-decoration: none;
    transition: color 0.3s ease;
}

.lang-link:hover {
    color: var(--hover-color);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 5px;
}

@media (max-width: 1100px) {
    /* باز شدن کلی محتوا در موبایل و تبلت */
    .container {
        width: 86%;
    }

    .header-inner {
        width: 86%;
    }

    .logo img{
        height: 50px;
    }

    /* مخفی کردن نویگیشن، عاملین فروش، divider و EN */
    .header-center,
    .header-left {
        display: none;
    }

    /* چسباندن همبرگری به راست و لوگو به چپ */
    .header-right {
        width: 100%;
        justify-content: space-between;
    }
    .hamburger {
        width: 40px;
        height: 40px;
    }
}
@media (max-width: 600px) {
    .hamburger {
        width: 32px;
        height: 32px;
    }
}

/*=================DROPDOWN / MEGA MENU==================*/

/* انیمیشن و استایل‌های فلش محصولات در هدر */
.dropdown-trigger {
    display: flex;
    align-items: center;
}

.dropdown-trigger svg {
    width: 0.5vw;
    height: 0.86vh;
    transition: transform 2s cubic-bezier(0.34, 1.56, 0.64, 1); /* انیمیشن فنری */
}

/* هاور روی دراپ داون یا کلیک باعث میشه فلش ۱۸۰ درجه بچرخه */
.dropdown-trigger:hover svg,
.dropdown-trigger.active svg {
    transform: rotate(180deg);
}

.mega-menu {
    position: absolute;
    top: 100%; 
    right: 50%;
    width: 31%;
    max-width: 500px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    border-radius: 0 0 10px 10px;
    border-top: 1px solid #f1f1f1c2; 
    visibility: hidden;
    pointer-events: none;
    transform: translateX(50%) translateY(-100%);
    z-index: -1; 
    transition: transform 0.5s ease-in-out, visibility 0s linear 0.4s;
}

.mega-menu.active {
    visibility: visible;
    pointer-events: auto;
    
    /* افکت کشو: میاد سرجاش */
    transform: translateX(50%) translateY(0);
    
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0s;
}

.mega-menu-inner {
    width: 100%;
}

.mega-menu-columns {
    display: flex;
    align-items: stretch;
    width: 100%;
    direction: rtl;
    min-height: 400px;
}

/* ========== ستون راست (دسته‌بندی‌ها) ========== */
.mega-categories {
    width: 52%;
    padding: 20px 0 30px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 0 0 10px 0;
}

.mega-link {
    font-family: 'Vazir', sans-serif;
    font-size: clamp(0.72vw, 13px, 0.8vw);
    font-weight: 400;
    color: var(--text-color);
    text-decoration: none;
    padding: 12px 13% 12px;
    display: flex;
    align-items: center;
    position: relative; /* مهم برای تعیین جایگاه فلش SVG */
    transition: all 0.3s ease;
}

.mega-link.active {
    font-weight: 400 !important; 
    color: var(--hover-color);
    text-shadow: 0 0 0.5px var(--hover-color);
}

/* آیکون فلش اختصاصی (SVG ضخیم و گرد) */
.mega-link-icon {
    position: absolute;
    right: 78%; /* فلش دقیقاً ۱۵۰ پیکسل سمت راست متن قرار می‌گیرد */
    top: 50%;
    width: 25px;
    height: 25px;
    color: #b9b7b7d8;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* حالت مخفی اولیه */
    opacity: 0;
    transform: translateY(-50%)  scale(0.7);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1.3); 
}

/* نمایش و حرکت آیکون در زمان هاور یا فعال بودن */
.mega-link.active .mega-link-icon {
    opacity: 1;
    
}

/* ========== دیوایدر کامل از بالا تا پایین ========== */
.mega-divider {
    width: 0.5px;
    background: #f1f1f18e; 
    margin: 0; 
}

/* ========== ستون چپ (زیرمنوها) ========== */
.mega-submenus {
    flex: 1; /* به جای عرض ثابت، کل فضای باقیمانده رو پر میکنه تا به دیوایدر بچسبه */
    padding: 25px 0;
    background-color: #fcfbf9fd;
    border-radius: 0 0 0 12px;
}


.sub-menu-content {
    display: none;
    flex-direction: column;
    animation: fadeScale 0.25s ease;
}

.sub-menu-content.active {
    display: flex;
}

.sub-menu-content a {
    position: relative;
    font-family: 'Vazir', sans-serif;
    font-size:  clamp(0.7vw, 12px, 0.73vw);
    font-weight: 400;
    color: #616161;
    text-decoration: none;
    padding: 4% 12%;
    transition: all 0.2s ease;
}

/* خط سبز ظریف 2 پیکسلی - تنظیم شده دقیقاً روی دیوایدر */
.sub-menu-content a::after {
    content: "";
    position: absolute;
    right: -1px; /* با این منفی یک، خط دقیقاً میافته روی دیوایدر نیم پیکسلی */
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 0; /* در حالت عادی مخفیه */
    background: #316d3c;
    border-radius: 999px;
    transition: height 0.3s ease;
    z-index: 2; /* برای اطمینان از اینکه زیر دیوایدر نره */
}

/* نمایش خط سبز فقط موقع هاور یا در صورتی که کلاس is-selected باشه */
.sub-menu-content a:hover::after, 
.sub-menu-content a.is-selected::after {
    height: 18px;
}

.sub-menu-content a:hover {
    color: var(--text-color-01);
    font-weight: 500;
    padding-right: 16%;
}

/* افکت محو شدن و زوم ملایم زیرمنوها */
@keyframes fadeScale {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

/* مخفی کردن در حالت موبایل و تبلت (استایل‌های ریسپانسیو) */
@media (max-width: 1024px) {
    .mega-menu {
        display: none !important;
    }
}



/* ======================== SIDEBAR MENU ========================= */
.sidebar-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 22%;
    height: 100vh;
    background: #fff;
    z-index: 2000;
    transition: right 0.45s cubic-bezier(0.77,0,0.18,1);
    box-shadow: -8px 0 48px rgba(22,51,32,0.10);
    border-radius: 20px 0 0 20px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    direction: ltr;
}
.sidebar-menu::-webkit-scrollbar { width: 3px; }
.sidebar-menu::-webkit-scrollbar-thumb { background: #D2E2CD; border-radius: 10px; }
.sidebar-menu.active { right: 0; }


.menu-close {
    background: none;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    color: #aaa;
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    line-height: 1;
    margin-right: auto;
}
.menu-close:hover { color: var(--text-color-01); }

.sidebar-content {
    padding: 10vh 1.4vw 80px 1.7vw;
    flex: 1;
    direction: rtl;
}

.sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.sidebar-list > li > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.4vh 15px;
    color: var(--text-color);
    text-decoration: none;
    font-size: var(--font-size-text);
    font-weight: 500;
    border-bottom: 2px solid rgba(22,51,32,0.07);
    transition: color 0.25s, padding-right 0.25s;
    position: relative;
}

@media (hover: hover) and (pointer: fine) {
    .sidebar-list > li > a:hover {
        color: var(--hover-color);
        border-bottom: 2px solid var(--hover-color);
    }
    .submenu li a:hover {
        color: var(--secondary-color);
        background: rgba(221, 239, 215, 0.564);
        border-radius: 10px; /* اضافه شدن بوردر ردیوس در هاور */
    }
}

.has-submenu .submenu-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(209, 220, 206, 0.5);
    height: 28px;
    width: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 4px;
    transition: background 0.2s;
}
.has-submenu:hover .submenu-arrow,
.has-submenu.open .submenu-arrow { background: #D2E2CD; }
.submenu-arrow svg { transition: transform 0.3s ease; }
.has-submenu.open .submenu-arrow svg { transform: rotate(-90deg); }

.submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                padding 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                margin 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.4s ease;
    will-change: max-height, opacity;
    width: 100%; 
    background: var(--gray);
    padding: 0 10px;
    margin: 0;       
    border-radius: 17px; 
    list-style: none;
    opacity: 0;
}

.has-submenu.open .submenu {
    padding: 10px 10px 15px 10px; 
    margin: 8px 0;  
    opacity: 1;
}


.submenu li a {
    display: block;
    padding: 12px 18px; /* افزایش جزئی پدینگ داخلی آیتم‌ها برای ارتفاع بیشتر */
    color: var(--text-color-02);
    font-size: clamp(0.75vw, 12px, 0.78vw);
    text-decoration: none;
    border-bottom: 1px solid #ffffff;
    transition: all 0.3s ease;
    border-radius: 10px; /* شعاع گردی پایه برای نرمی ترانزیشن هاور */
}
.submenu li:last-child a { border-bottom: none; }

/* ترکیب و بهینه‌سازی دو کلاس تکراری اورلی */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(41, 41, 41, 0.12);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s, visibility 0.35s;
}
.sidebar-overlay.active { opacity: 1; visibility: visible; }

.lang-item-menu { list-style: none; }
.lang-item-menu a {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 16px 12px;
    color: var(--text-color);
    text-decoration: none;
    font-size: clamp(14px, 1.5vw, 15px);
    font-weight: 500;
    border-bottom: 1px solid rgba(22,51,32,0.07);
    transition: color 0.25s, padding-right 0.25s;
}
.lang-item-menu a:hover { color: var(--hover-color);}
.lang-item-menu .lang-icon {
    width: 20px;
    height: 20px;
    color: #bbb;
    transition: color 0.25s, transform 0.3s;
    flex-shrink: 0;
    margin-left: 10px;
}
.lang-item-menu a:hover .lang-icon { color: var(--hover-color); transform: rotate(15deg); }

@media (max-width: 670px) {
    .sidebar-content { padding: 70px 30px;}
    .sidebar-menu { width: 70%; }
    .sidebar-list > li > a { padding: 20px 12px; font-size: clamp(14px, 2vw, 16px); }
    .submenu li a { font-size: clamp(13px, 2vw, 16px); padding: 12px 10px; }
}
@media (min-width: 670.1px) and (max-width: 1200px) {
    .sidebar-content { padding: 80px 30px;}
    .sidebar-menu { width: 38%; }
    .sidebar-list > li > a { padding: 25px 12px; font-size: clamp(14px, 2vw, 16px); }
    .submenu li a { font-size: clamp(12px, 2vw, 14px); }
}

/* مخفی کردن اسکرول‌بار در سایدبار منو با حفظ قابلیت اسکرول */
#sidebarMenu {
    overflow-y: auto; /* اطمینان از اینکه اسکرول همچنان فعاله */
    -ms-overflow-style: none;  /* برای مرورگرهای IE و Edge قدیمی */
    scrollbar-width: none;  /* برای مرورگر فایرفاکس */
}

/* برای مرورگرهای مبتنی بر کروم، سافاری، اج جدید و اپرا */
#sidebarMenu::-webkit-scrollbar {
    display: none; 
}



/* ==================== MAIN BANNER ==================== */
.hero-parallax-wrapper {
    position: relative;
    z-index: 1;
}

.main-banner {
    position: sticky; 
    top: clamp(68px, 8.9vh, 69px);
    width: 100%;
    height: 88vh;
    overflow: hidden;
    background-color: #e7e7e7; 
    z-index: 1;
}

/* استایل پایه برای تمام مدیاهای بنر */
.banner-media,
.desktop-media,
.mobile-media,
.universal-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
}

.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.055); 
    z-index: 2;
}

.banner-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    text-align: center;
    padding: 0 20px;
}

.mobile-media {
    display: none;
}

@media (max-width: 1100px) {
    .main-banner {
        height: 53vh;
        margin-top: -30px;
    }
    
    /* در تبلت و موبایل: دسکتاپ مخفی شود و موبایل نمایش داده شود */
    .desktop-media {
        display: none;
    }
    .mobile-media {
        display: block;
    }
    
    /* اگر تیک اشتراک مدیا خورده باشد، کلاس universal-media مخفی نمی‌شود و همچنان نمایش داده خواهد شد */
    .universal-media {
        display: block; 
    }
}

@media (max-width: 600px) {
    .main-banner {
        height: 70vh;
        margin-top: -40px;
    }
} 

/*=====================curves==================*/

.curve-bottom {
    --curve-h: 63px;
    --curve-w: 60%;  
    
    border-radius: 0; 
    
    -webkit-mask-image: 
        linear-gradient(black, black),
        radial-gradient(ellipse var(--curve-w) 100% at 50% 0%, black 99%, transparent 100%);
    mask-image: 
        linear-gradient(black, black),
        radial-gradient(ellipse var(--curve-w) 100% at 50% 0%, black 99%, transparent 100%);
        
    -webkit-mask-size: 100% calc(100% - var(--curve-h) + 1px), 100% var(--curve-h);
    mask-size: 100% calc(100% - var(--curve-h) + 1px), 100% var(--curve-h);
    
    -webkit-mask-position: top, bottom;
    mask-position: top, bottom;
    
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    color: var(--background-color);
}

.curve-top {
    --curve-h: 63px;  
    --curve-w: 60%;  
    
    border-radius: 0; 
    
    -webkit-mask-image: 
        radial-gradient(ellipse var(--curve-w) 100% at 50% 100%, black 99%, transparent 100%),
        linear-gradient(black, black);
    mask-image: 
        radial-gradient(ellipse var(--curve-w) 100% at 50% 100%, black 99%, transparent 100%),
        linear-gradient(black, black);
        
    -webkit-mask-size: 100% var(--curve-h), 100% calc(100% - var(--curve-h) + 1px);
    mask-size: 100% var(--curve-h), 100% calc(100% - var(--curve-h) + 1px);
    
    -webkit-mask-position: top, bottom;
    mask-position: top, bottom;
    
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    color: var(--background-color);
}

.curve-top-u {
    /* ۱. ارتفاع رو دقیقا ۴۵ گذاشتم تا با curve-bottom یکی بشه و پازل مچ بشه */
    --curve-h: 63px;
    --curve-w: 60%;  
    border-radius: 0; 
    
    /* ۲. فرمول جادویی حل مشکل: کشیدن سکشن به سمت بالا دقیقاً به اندازه ارتفاع انحنا */
    margin-top: calc(var(--curve-h) * -1);
    
    -webkit-mask-image: 
        radial-gradient(ellipse var(--curve-w) 100% at 50% 0%, transparent 99%, black 100%),
        linear-gradient(black, black);
    mask-image: 
        radial-gradient(ellipse var(--curve-w) 100% at 50% 0%, transparent 99%, black 100%),
        linear-gradient(black, black);
        
    -webkit-mask-size: 100% var(--curve-h), 100% calc(100% - var(--curve-h) + 1px);
    mask-size: 100% var(--curve-h), 100% calc(100% - var(--curve-h) + 1px);
    -webkit-mask-position: top, bottom;
    mask-position: top, bottom;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* =========================================
   CURVES RESPONSIVE (Tablet & Mobile)
========================================= */
@media (max-width: 1100px) {
    .curve-bottom,
    .curve-top,
    .curve-top-u {
        --curve-h: 55px; 
        --curve-w: 60%; 
    }
}

@media (max-width: 600px) {
    .curve-bottom,
    .curve-top,
    .curve-top-u {
        --curve-h: 40px; 
        --curve-w: 60%; 
    }
}

/* ===================Intro Section Styles======================= */
.intro-section {
    width: 100%;
    padding: var(--section-spacing);
    position: relative;
    z-index: 2;
    background-color: var(--background-color);
}

.intro-container {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    align-items: stretch; 
    gap: 5%;
    margin: 0 auto;
}

.intro-text-col {
    display: flex;
    flex-direction: column;
    justify-content: center; 
    padding-top: 3.8vh; 
}


.intro-text-col .intro-title {
    display: flex;
    direction: rtl; /* چون برند فارسی و انگلیسی احتمالا جهت خاصی دارن، با LTR چیدمان حروف رو بهتر کنترل می‌کنیم */
    gap: clamp(4px, 0.3vw, 7px);
    margin: 0 0 clamp(1.2vh, 10px, 1.5vh) 0; /* فاصله از متن پایین */
    align-items: baseline;
    justify-content: flex-start; /* چسبیدن به ابتدای ستون (راست در صفحه فارسی) */
}

.brand-name {
    font-size: clamp(1.1vw, 22px, 1.1vw);
    font-weight: 500;
    color: #23492a;
}

.brand-sub {
    font-size: clamp(1vw, 21px, 1vw);
    font-weight: 500;
    color: var(--text-color-03);
    margin-right: 1px;
}

.intro-img-wrapper {
    width: 33vw;
    height: clamp(11vh, 20vw, 13vw);
    position: relative;
    overflow: hidden; 
    margin-right: auto; 
    margin-left: 0; 
    border-radius: 5px;
    margin-top: 5vh;
}

.intro-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; 
}

.intro-desc {
    font-size: var(--font-size-text);
    line-height: 2.3; 
    color: var(--color);
    text-align: justify; 
    margin: 0;
}

.read-more-bottun {
    margin-right: 2px;
    color: var(--text-color-03);
    font-size: clamp(0.83vw, 13.5px, 0.89vw);
}

.intro-desc .read-more-bottun:hover {
    color: var(--text-color-01);
}



@media (max-width: 1100px) {
    section.intro-section {
        padding: 100px 0 70px;
        margin-top: -40px;
    }
    div.intro-container {
        display: grid;
        grid-template-columns: 1fr 1.46fr;
        gap: 8%;
        align-items: center;
        direction: ltr;
    }
    .intro-text-col { 
        padding-top: 0px;
    }
    h2.intro-title {
        justify-content: flex-start; /* در تبلت همچنان در سمت راست */
        margin-bottom: 0;
    }

    .intro-desc{
        font-size: 14px;
        direction: rtl;

    }
    .brand-name {
        font-size: 21px;
    }
    .brand-sub {
        font-size: 20px;
        margin-right: 1px;
    }

    .intro-img-wrapper {
        height: 300px;
        width: 100%;
        margin-bottom: 3.6vh;
    }
    .read-more-bottun {
        font-size: 14px;
        margin-right: 3px;
    }
}

@media (max-width: 600px) {
    section.intro-section {
        padding: 75px 0 50px !important;
        margin-top: -30px;
    }
    .intro-desc{
        font-size: 14px;
        direction: rtl;
        margin-top: 0px;
    }
    .intro-img-wrapper, .intro-img {
        display: none;
    }
    div.intro-container {
        /* در موبایل گرید تک ستونه می‌شود چون عکس مخفی است */
        grid-template-columns: 1fr;
        gap: 0;
    }
    .intro-text-col { 
        padding-top: 15px; 
    }
    h2.intro-title {
        justify-content: flex-start; /* در موبایل هم به راست می‌چسبد */
        margin-bottom: 10px;
    }
    .brand-name {
        font-size: 20px;
    }
    .brand-sub {
        font-size: 18px;
        margin-top: 0;
        margin-right: 1px;
    }

    a.read-more-bottun {
        font-size: 16px !important;
    }
}


/* ==================== POPULAR PRODUCTS SECTION ==================== */
.popular-products {
    background-color: var(--primary-color);
    position: relative;
    overflow: hidden; 
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: clamp(71vh, 28vw, 73vh)
}

.popular-slider-wrapper {
    position: relative;
    padding: 5vh 0 0 0; 
    width: 100%;
    padding-right: 10vw;
    padding-left: 0;      
    cursor: grab; 
    touch-action: pan-y; 
}
.popular-slider-wrapper:active {
    cursor: grabbing;
}

.popular-slider-track {
    display: flex;
    gap: 30px;
    direction: rtl; 
    overflow-x: auto;
    -ms-overflow-style: none; 
    scrollbar-width: none;  
    /* فعال‌سازی قابلیت اسنپ (چسبندگی) بومی مرورگر */
    scroll-snap-type: x mandatory;
}

.popular-slider-track::-webkit-scrollbar {
    display: none; 
}

.popular-card {
    flex: 0 0 min(calc((75vw - 50px) / 3), clamp(43vh, 30vw, 47vh)); 
    aspect-ratio: 1 / 1; 
    border-radius: 0; 
    overflow: hidden;
    position: relative;
    background-color: #f5f5f5;
    border-radius: 8px;
    /* تعیین نقطه اتصال کارت به لبه */
    scroll-snap-align: start;
}

.popular-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    pointer-events: none; 
}

/* ==================== CARD HOVER OVERLAY ==================== */
.popular-overlay {
    position: absolute;
    bottom: -60px; 
    left: 0;
    width: 100%;
    height: 5vh; 
    background: #f6f4f0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: bottom 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.popular-card:hover .popular-overlay {
    bottom: 0; 
}

.view-product-btn {
    color: var(--text-color);
    font-weight: 400;
    font-size: var(--font-size-btn);
    text-decoration: none;
    position: relative;
    padding: 5px 0;
}


/* ==================== SLIDER CONTROLS ==================== */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.1vw;
    height: 4.4vh;
    background-color: #f6f4f0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.034);
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.slider-btn svg {
    width: 1.9vw;
    height: 2.8vh;
    fill: none;
    stroke: #5E5E5E;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.3s ease;
}

.svg-right {
    margin-right: 3px;
}
.svg-left {
    margin-left: 3px;
}

.slider-btn:hover {
    background-color: #eae7dc;
    transform: translateY(-50%) scale(1.08);
}

.prev-btn { 
    right: calc(6vw - 22.5px); /* قرار گرفتن دقیقاً در وسط فضای 10 درصدی */
} 

.next-btn { 
    left: calc(5vw - 22.5px); 
}

/* اصلاحات استایل کارت‌های پرفروش بعد از تبدیل به تگ لینک */
a.popular-card {
    text-decoration: none !important;
    color: inherit !important;
    outline: none !important;
    -webkit-user-drag: none; /* جلوگیری از کشیده شدن المان‌ها به عنوان فایل در مرورگر */
}

a.popular-card:active,
a.popular-card:focus {
    outline: none;
}


/* ==================== POPULAR PRODUCTS RESPONSIVE ==================== */

/* تبلت: نمایش 2 کارت (حداکثر عرض 1100 پیکسل) */
@media (max-width: 1100px) {
    .popular-products {
        height: auto; /* ارتفاع داینامیک به جای ارتفاع ثابت */
        padding: 50px 0;
    }
    .popular-slider-wrapper {
        padding-right: 8vw; /* فضای راست کمی کمتر می‌شود */
    }
    .popular-card {
        /* محاسبه برای قرارگیری 2 کارت: 84vw (فضای باقی مانده) منهای گپ بینشون */
        flex: 0 0 calc((78vw - 25px) / 2);
        max-height: 40vh; 
    }
    .slider-btn {
        width: 40px;
        height: 40px;
        margin-top: 25px;
    }
    .slider-btn svg {
        width: 25px;
        height: 25px;
    }
    /* تنظیم جایگاه دکمه‌ها در تبلت */
    .prev-btn { right: calc(4vw - 15px); } 
    .next-btn { left: calc(4vw - 15px); }
}

/* موبایل: نمایش 1 کارت (حداکثر عرض 600 پیکسل) */
@media (max-width: 600px) {
    .popular-products {
        padding: 40px 0;
    }
    .popular-slider-wrapper {
        padding-right: 7vw; /* حاشیه کمتر برای موبایل که کارت بزرگتر دیده بشه */
    }
    .popular-slider-track {
        gap: 15px; /* فاصله بین کارت‌ها رو تو موبایل کمی کمتر کردیم */
    }
    .popular-card {
        /* اختصاص دادن 85vw به یک کارت (یه ذره از کارت بعدی هم دیده میشه تا کاربر بفهمه اسلایدره) */
        flex: 0 0 85vw;
        max-height: 50vh; 
    }
    
    /* جمع و جور کردن دکمه‌ها برای صفحه نمایش کوچیک موبایل */
    .slider-btn {
        width: 36px;
        height: 36px;
    }
    .slider-btn svg {
        width: 22px;
        height: 22px;
    }
    .prev-btn { right: 15px; } 
    .next-btn { left: 15px; }
    
    /* بزرگتر کردن دکمه نمایش محصول روی موبایل برای تاچ راحت‌تر */
    .view-product-btn {
        padding: 8px 0;
        font-size: 14px;
    }
}


/* ======================== Product Categories Section ===================== */
.category-showcase-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10.5vh 0 15.2vh;
}

.category-heading {
    color: #1f5128;
    font-size: clamp(1vw, 18px, 1.03vw);
    font-weight: 600;
    text-align: center;
    margin-top: 1vh;
    margin-bottom: 5.5vh;
}


/* کانتینر گرید با عرض متناسب */
.category-grid-container {
  width: 65vw; 
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* ۳ ستون با عرض مساوی در دسکتاپ */
  column-gap: 4.5vh;
  row-gap: 3vh;; 
}

/* استایل کارت‌های دسته‌بندی */
.category-item {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.9vh;
  transition: transform 0.3s ease;
}

/* نگهدارنده عکس */
.category-img-wrapper {
  width: 100%;
  aspect-ratio: 30 / 22; 
  background-color: #F2F2F2; 
  border-radius: 6px; 
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ایجاد لایه اورلی (کدر) روی عکس */
.category-img-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; 
  transition: opacity 0.4s ease; 
  z-index: 1; 
}

/* نمایش اورلی هنگام هاور روی کارت */
.category-item:hover .category-img-wrapper::after {
  opacity: 1;
}

/* تنظیمات عکس داخل کارت */
.category-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  transition: transform 0.5s ease;
}

/* افکت زوم ملایم روی عکس موقع هاور شدن کارت */
.category-item:hover img {
  transform: scale(1.05);
}

/* -----------------------------------------
   بخش متن و فلش زیر عکس
   ----------------------------------------- */
.category-info {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center; /* متن همیشه وسطه */
  position: relative; /* برای اینکه فلش بتونه به لبه چپ بچسبه */
  min-height: 20px;
}

/* تایتل یا اسم دسته‌بندی */
.category-title {
  font-family: 'Vazir', sans-serif;
  font-size: var(--font-size-text);
  font-weight: 500;
  color: var(--text-color-02);
  margin: 0;
  text-align: center;
  transition: color 0.3s ease;
}

/* تغییر رنگ تایتل موقع هاور */
.category-item:hover .category-title {
  color: var(--secondary-color, #15371A);
}


/* =========================================
   Responsive Design (تبلت و موبایل)
   ========================================= */
@media screen and (max-width: 1100px) {
  .category-showcase-section {
    padding: 80px 0 110px;
  }
  
  .category-grid-container {
    width: 80%; 
    grid-template-columns: repeat(2, 1fr); /* دو ستونه شدن */
    column-gap: 1.5rem;
    row-gap: 1rem;
  }

  /* تنظیمات جدید هدینگ برای تبلت */
  .category-heading {
    width: 85%; /* هم‌عرض کردن با گرید تا دقیقاً بالای کارت‌ها تراز بشه */
    text-align: center;
    font-size: 20px;
    margin-top: 1vh;
    margin-bottom: 3vh;
  }

  .category-title {
    font-size: 0.8rem; 
    margin-top: 8px;
  }
  
  .category-img-wrapper {
    aspect-ratio: 37 / 22; 
    border-radius: 5px;
  }
  
  a.category-item {
    gap: 10px;
  }
}

@media screen and (max-width: 600px) {
  .category-showcase-section {
    padding: 50px 0;
  }
  
  .category-grid-container {
    width: 86%; 
    gap: 1.1rem;
    grid-template-columns: 1fr; /* یک ستونه در موبایل */
  }

  /* تنظیمات جدید هدینگ برای موبایل */
  .category-heading {
    width: 86%; /* هم‌عرض کردن با گرید موبایل */
    text-align: right;
    font-size: 18px; /* تو موبایل یه ذره فونتش رو نسبت به تبلت جمع‌وجورتر کردم */
  }
  
  .category-title {
    font-size: 0.95rem; 
  }
  
  .category-img-wrapper {
    aspect-ratio: 37 / 22; 
    border-radius: 5px;
  }
  
  a.category-item {
    gap: 5px; /* بدون نیاز به !important */
  }
}


/* ==================== PRODUCT INTRO SECTION (Stoneware) ==================== */
.stoneware-section {
    width: 100%;
    color: #ffffff;
    /* اعمال کرو از بالا */
    position: relative;
    z-index: 2;
    background-color: #1a1a1a; 
    min-height: 80vh; 
    display: flex;
    align-items: center; 
    padding: 20px 0;
    overflow: hidden; 
}
.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;        
    height: 100%;       
    object-fit: cover;  
    z-index: -2;
}
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;    
    background: linear-gradient(to left, rgba(90, 90, 90, 0.281) 0%, rgba(248, 248, 248, 0.1) 100%);
    z-index: -1;
}

.stoneware-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10%;
    align-items: center;
    margin-top: 15px;
}


.stoneware-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    order: 1; 
}

.stoneware-media {
    order: 2;
    display: flex;
    justify-content: flex-end;
    width: 32vw;
}

.stoneware-heading {
    font-size: var(--font-size-headings);
    font-weight: 500;
    margin-bottom: 25px;
    color: #ffffff;
}

.stoneware-desc {
    font-size: var(--font-size-text);
    font-weight: 400;
    line-height: 2.2;
    text-align: justify;
    color: #ffffff;
}

.stoneware-media img {
    width: 30vw; 
    aspect-ratio: 8 / 5.1; 
    height: auto;
    object-fit: cover;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    margin-bottom: 4.5vh;
}

/* ==================== PRODUCT INTRO SECTION (Stoneware) ==================== */
.stoneware-section {
    width: 100%;
    color: #ffffff;
    /* اعمال کرو از بالا */
    position: relative;
    z-index: 2;
    background-color: #1a1a1a; 
    min-height: 80vh; 
    display: flex;
    align-items: center; 
    padding: 20px 0;
}
.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;        
    height: 100%;       
    object-fit: cover;  
    z-index: -2;
}
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;    
    background: linear-gradient(to left, rgba(90, 90, 90, 0.281) 0%, rgba(248, 248, 248, 0.1) 100%);
    z-index: -1;
}

.stoneware-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10%;
    align-items: center;
    margin-top: 15px;
}

.stoneware-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    order: 1; 
}

.stoneware-media {
    order: 2;
    display: flex;
    justify-content: flex-end;
    width: 32vw;
}

.stoneware-heading {
    font-size: var(--font-size-headings);
    font-weight: 500;
    margin-bottom: 25px;
    color: #ffffff;
}

.stoneware-desc {
    font-size: var(--font-size-text);
    font-weight: 400;
    line-height: 2.2;
    text-align: justify;
    color: #ffffff;
}

.stoneware-media img {
    width: 30vw; 
    aspect-ratio: 8 / 5.1; 
    height: auto;
    object-fit: cover;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    margin-bottom: 4.5vh;
}


/* ==================== RESPONSIVE: TABLET & MOBILE ==================== */

@media (max-width: 1100px) {
    .video-overlay {
        background: linear-gradient(to bottom, rgba(54, 54, 54, 0.459) 50%, rgba(243, 243, 243, 0.363) 100%);
    }
    
    .stoneware-section {
        min-height: 40vh; /* ارتفاع جمع‌وجور برای تبلت */
    }
    
    .stoneware-grid {
        grid-template-columns: 1fr; /* تبدیل به یک ستون */
        gap: 25px !important;
        padding: 7%;
        margin-top: 35px;
        justify-items: center; /* وسط‌چین کردن کل المان‌ها در محور افقی */
    }
    
    /* با این ترفند متن و عنوان رو مستقل می‌کنیم تا بتونیم ترتیبشون رو روی عکس تنظیم کنیم */
    .stoneware-text {
        display: contents; 
    }
    
    .stoneware-heading {
        order: 1; /* اول عنوان */
        font-size: 18px; 
        margin-bottom: 10px;
        text-align: center;
    }
    
    p.stoneware-desc {
        order: 2; /* دوم توضیحات */
        font-size: 16px; 
        line-height: 2.1;
        text-align: justify;
        width: 90%;
        margin-bottom: 0 !important;
    }

    .stoneware-media {
        order: 3; /* سوم عکس */
        width: 100%;
        justify-content: center;
        padding: 2%;
    }
    
    .stoneware-media img {
        width: 100%;
        max-width: 78%; /* تو تبلت یه حاشیه کوچیک بهش دادم که به لبه‌ها نچسبه */
        aspect-ratio: 5 / 3.5;
        margin-bottom: 0; /* خنثی کردن مارجین پایین که تو دسکتاپ بود */
    }

    /* اگر دکمه (Read More) داخل stoneware-text داری */
    .read-more-btn {
        order: 4; /* چهارم دکمه */
        align-self: center;
        margin-bottom: 10px;
    }
}

@media (max-width: 600px) {
    .stoneware-section {
        height: 90vh;
    }
    
    .video-overlay {
        background: linear-gradient(to bottom, rgba(56, 56, 56, 0.493) 50%, rgba(243, 243, 243, 0.034) 100%);
    }
    
    .stoneware-grid {
        gap: 15px !important;
        padding: 10% 3% !important;
    }

    .stoneware-heading {
        font-size: 15px;
        margin-bottom: 5px;
    }

    .stoneware-desc {
        font-size: 13px;
        line-height: 2.2;
        width: 100%;
        margin-bottom: 0px; 
    }

    .stoneware-media {
        padding: 2%;
    }

    .stoneware-media img {
        max-width: 95%; /* تو موبایل از عرض بیشتری استفاده کنه */
        aspect-ratio: 8 / 7; 
        margin-bottom: 0;
        border-radius: 8px; /* گوشه‌های عکس رو تو موبایل نرم‌تر کردم */
    }

    a.read-more-btn {
        margin: 0 0 0 20px !important;
    }
}


/* =================== Read More Button Styles ======================= */
.read-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 7.2vw;
    height: 3.3vh;
    font-size: 0.75vw;
    text-decoration: none;
    background-color: transparent;
    transition: all 0.2s ease;
    margin-top: 0vh;
    /* این خط جادوی کار ماست: در حالت RTL کانتینر ستونی، عنصر رو به چپ می‌چسبونه */
    align-self: flex-end; 
}

/* دکمه سکشن استون‌ور (تم تاریک روی ویدیو) */
.stoneware-text .read-more-btn {
    border: 1px solid #ffffff;
    color: #ffffff;
    padding-top: clamp(2px, 1vh, 3px);
}
.stoneware-text .read-more-btn:hover {
    background-color: #ffffff;
    color: #57403a;
}

/* ---- تنظیمات قطعی برای انتقال دکمه به زیر عکس (موبایل و تبلت) ---- */
@media (max-width: 1100px) {
    /* گرید اصلی رو به زور تک ستونه می‌کنیم تا تداخلی پیش نیاد */
    .stoneware-section .stoneware-grid.container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        padding: 40px 10px;
    }
    
    /* کانتینر متن رو نامرئی می‌کنیم تا المان‌هاش تو گرید آزاد بشن */
    .stoneware-section .stoneware-text {
        display: contents !important; 
    }
    
    /* ترتیب چیدمان رو از بالا به پایین مشخص می‌کنیم */
    .stoneware-section .stoneware-heading { order: 1 !important; margin-bottom: 10px;}
    .stoneware-section .stoneware-desc { order: 2 !important; margin-bottom: 25px;}
    .stoneware-section .stoneware-media { order: 3 !important; }
    
    /* تنظیمات دکمه: رفتن به زیر عکس و چسبیدن به چپ */
    .stoneware-section .read-more-btn { 
        order: 4 !important; /* دقیقاً میفته بعد از عکس */
        justify-self: end !important; /* در محیط گرید و راست‌چین (RTL)، End یعنی سمت چپ! */
        margin-top: 0px !important; /* فاصله مناسب از عکس */
        margin-left: 30px !important; 
        width: 110px !important;
        height: 30px !important;
        font-size: 14px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0 !important; /* ریست کردن پدینگ‌های اضافی */
    }
}

@media (max-width: 600px) {
    .stoneware-section .read-more-btn {
        width: 120px !important;
    }
    .stoneware-section .stoneware-grid.container {
        padding: 3% !important;
        margin-bottom: 1% !important;
        margin-top: 1% !important;
    }
    .stoneware-section .stoneware-heading {
        font-size: 15px !important;
    }
    .stoneware-section .stoneware-desc {
        font-size: 13px !important;
        line-height: 2.2 !important;
    }
    .stoneware-section .stoneware-media img {
        aspect-ratio: 8 / 7 !important; 
        margin-bottom: 0px !important;
    }
}
/* ======================Your Choice====================== */
.dorika-features-section {
    background-color: var(--secondary-color);
    height: 58vh;
    display: flex;
    align-items: center;
    justify-content: center;
    direction: rtl;
    overflow: hidden;
    
    /* این جادوی کار ماست: سکشن رو یک پیکسل می‌کشیم بالا تا خطای محاسباتی مرورگر (خط سفید) کامل کاور بشه */
    margin-top: -1px; 
    position: relative; 
    z-index: 3;
}

.dorika-container {
    width: 70%;
    margin: auto;
}

/* سیستم گرید برای چیدمان کارت ها */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 20%; 
    margin-bottom: 60px;
}

/* استایل هر کارت */
.feature-card {
    display: flex;
    flex-direction: column;
    /* با توجه به RTL بودن سکشن، flex-start باعث میشه تمام المان‌های داخل کارت (عکس و متن) راست‌چین بشن */
    align-items: flex-start; 
}

/* قاب عکس - راست‌چین شده */
.feature-image-wrapper {
    width: 42%; 
    aspect-ratio: 1 / 1; 
    /* مارجین چپ رو auto می‌ذاریم و راست رو صفر تا عکس به سمت راست هل داده بشه */
    margin: 15px 0 15px auto; 
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* تنظیمات خود عکس داخل قاب */
.feature-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain; 
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15)); 
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}

.feature-image-wrapper .exep {
    width: 85%;
    height: 85%;
}

/* تیتر اصلی هر ویژگی - راست چین */
.feature-title {
    font-family: 'Vazir', sans-serif;
    font-size: clamp(12px, 1.7vw, 14px);
    font-weight: 500;
    margin: 0 0 clamp(8px, 1vh, 12px) 0;
    color: #ffffff;
    line-height: 1.4;
    width: 100%; 
    text-align: right;
}

/* متن و توضیحات زیر هر ویژگی - راست چین */
.feature-subtitle {
    font-family: 'Vazir', sans-serif;
    font-size: clamp(11px, 1vw, 12px);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.75); 
    line-height: 2;
    margin: 0;
    width: 105%; 
    text-align: right;
}


/* ==================== TABLET RESPONSIVE (Max 1100px) ==================== */
@media (max-width: 1100px) {
    .dorika-features-section {
        /* ارتفاع ثابت رو برمیداریم تا محتوا بیرون نزنه و به جاش پدینگ میدیم */
        height: auto; 
        padding: 80px 0; 
    }
    .dorika-container {
        width: 80%; /* تو تبلت کانتینر رو یکم بازتر میکنیم تا جا برای ۳ ستون باشه */
    }
    .features-grid {
        /* گپ ۱۸ درصدی برای تبلت زیاده، کمش میکنیم تا کارت‌ها فضای بیشتری برای نفس کشیدن داشته باشن */
        gap: 20%; 
        margin-bottom: 20px;
    }
    .feature-title {
        margin-bottom: 5px;
        width: 125%;
        text-align: justify;
    }
    .feature-image-wrapper {
        width: 50%; /* آیکون‌ها رو نسبت به ستونِ لاغرتر شده، یکم برجسته‌تر میکنیم */
    }
    .feature-subtitle {
        text-align: justify;
    }
}

/* ==================== MOBILE RESPONSIVE (Max 768px) ==================== */
@media (max-width: 768px) {
    .dorika-features-section {
        padding: 70px 0; 
    }
    .dorika-container {
        width: 92%; 
    }
    .features-grid {
        grid-template-columns: 1fr; 
        gap: 50px; 
        margin-bottom: 10px;
    }

    .feature-card {
        width: 75%;
        margin: auto;
        align-items: center; /* 👈 این کلید حل مشکل بود! محتویات داخل کارت رو دقیقاً تو محور افقی وسط‌چین می‌کنه */
    }
    .feature-image-wrapper {
        width: 25%;
        margin: 0 auto 15px auto; /* 👈 مارجین پایین اضافه کردم که عکس به تیتر نچسبه */
    }

    .feature-title {
        font-size: 15px; 
        margin: 10px auto 7px auto;
        text-align: center !important;
        width: 100%;
    }
    .feature-subtitle {
        font-size: 11px;
        width: 100%; 
        margin: 0 auto; 
        line-height: 2.2; 
        text-align: center !important;
    }
}


/* ==================== FOOTER SECTION ==================== */
.site-footer {
    background-color: var(--primary-color);
    width: 100%;
    padding: 40px 0 20px 0;
    position: relative;
    z-index: 90; 
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 2.6fr 0.5fr; 
    gap: 6%;
    align-items: flex-start;
}

/* --- Footer Left (Socials) --- */
.footer-socials {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-end; 
    order: 3; 
    margin-top: 50px;
}

.social-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    background-color: #ffffff;
    color: var(--secondary-color);
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.social-icon img {
    width: 22px;
    height: 22px;
    object-fit: contain; /* این خط باعث میشه عکس‌ها دفرمه نشن */
    margin-left: 1px;
}

.social-icon .instagram {
    width: 24px;
    height: 24px;
}

.social-icon img {
    width: 23px;
    height: 22.5px;
    object-fit: contain;
    margin-left: 1px;
    transition: all 0.3s ease; /* این خط رو اضافه کن تا تغییر رنگ یکهو تو ذوق نزنه */
}

/* افکت تغییر رنگ عکس در حالت هاور */
.social-icon:hover img {
    /* این فیلتر عکس رو ابتدا کاملا سیاه (brightness 0) و بعد کاملا سفید (invert 1) میکنه */
    filter: brightness(0) invert(1);
}


.social-icon:hover {
    background-color: var(--secondary-color);
    color: #ffffff;
    transform: translateX(5px);
}

/* --- Footer Middle (Links & Info) --- */
.footer-middle {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 0 20px;
    order: 2;
    margin-top: 40px;
    margin-right: 40px;
}

.footer-links {
    display: flex;
    gap: 6.2vw;
    align-items: center;
    padding-bottom: 12px;
}

.footer-links a {
    color: var(--secondary-color);
    font-weight: 700;
    font-size: var(--header-menus);
    position: relative; 
    text-decoration: none; 
    display: inline-block; 
    transition: color 0.3s ease;
    
}

.footer-links a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1.5px;
    bottom: -9px; 
    right: 0;
    background-color: var(--text-color-01); 
    transform: scaleX(0); 
    transform-origin: right; 
}

.footer-links a:hover {
    color: var(--text-color-01r);
}

.footer-links a:hover::after {
    transform: scaleX(1); 
    transition: transform 0.2s ease-out;
}

.footer-contact-info {
    display: flex;
    flex-direction: column;
    gap: 25px;
    width: 100%;
}

.info-row {
    display: flex;
    justify-content: flex-start;
    gap: 14%;
    font-size: 0.75vw;
    color: var(--text-color-02);
    text-align: right;
}

.info-row.align-top {
    align-items: flex-start;
}

.info-label {
    min-width: 70px;
    font-weight: 500;
}

span.info-value {
    text-align: right;
    direction: ltr;
    display: inline-block;
}

/* --- Footer Right (Form) --- */
.footer-right {
    order: 1;
    padding: 0;
}

.contact-form-card {
    background-color: #fcfbf9fd;
    padding: 35px 35px;
    box-shadow: 2px -1px 4px rgba(61, 61, 61, 0.056);
    display: flex;
    flex-direction: column;
    text-align: right;
    margin-top: -85px; 
    position: relative;
    z-index: 99;
    border-radius: 5px;
    width: 90%;
    min-height: 350px;
    max-width: 340px;
    border: 1px solid #d1d1d14b;
}

/* === FORM ALERT (جدید) === */
.form-alert {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 15px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    max-height: 50px;
    overflow: hidden;
    box-sizing: border-box;
}

.form-alert.hidden {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    border: none;
}

.form-alert.success {
    background-color: #d2e2cd; /* سبز پاستلی - هم‌خانواده --primary-color */
    color: var(--secondary-color);
    border: 1px solid #c2d4bc;
}

.form-alert.error {
    background-color: #fde8e8; /* قرمز پاستلی کمرنگ */
    color: #9b1c1c;
    border: 1px solid #f8b4b4;
}
/* ======================== */

.contact-form-card h3 {
    font-size: var(--font-size-text);
    color: var(--text-color-01);
    margin-bottom: 20px;
}

.form-subtitle {
    font-size: 13px;
    color: #888;
    margin-bottom: 20px;
}

.input-group {
    margin-bottom: 20px;
    cursor: text; 
}

.input-group input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #dcdcdc;
    padding: 10px 0;
    font-family: 'vazir';
    font-size: 12px;
    outline: none;
    transition: border-color 0.3s ease;
    background: transparent;
}

.input-group input::placeholder {
    font-size: 12px;
    color: #888888c1;
    font-family: 'vazir';
}
.input-group:hover input {
    border-bottom-color: var(--secondary-color);
}

.input-group input:focus {
    border-bottom-color: var(--secondary-color);
}

.input-group input .placeholder {
    color: #727272b0;
}

.submit-btn {
    background-color: var(--secondary-color);
    color: #ffffff;
    border: none;
    padding: 7px 20px;
    width: 100px;
    font-family: 'vazir';
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
    float: left; 
    margin-top: 20px;
}

.submit-btn:hover {
    background-color: var(--hover-color);
}

/* --- Footer Bottom (Copyright) --- */
.footer-bottom {
    text-align: center;
    padding-top: 15px;
    margin-top: 20px;
    font-size: 10px;
    color: var(--text-color-03);
    border-top: 1px solid rgba(0,0,0,0.05);
    width: 100%;
    display: flex;
    justify-content: center;
    direction: ltr; 
}

/* =========================================
   💻 Footer Responsive Styles (Tablet)
   ========================================= */
@media (max-width: 1024px) and (min-width: 601px) {
    .footer-grid {
        display: flex; 
        flex-direction: row; 
        justify-content: space-between; 
        align-items: flex-start;
        width: 80%;
        margin: 0 auto;
        padding: 40px 0;
        gap: 30px;
    }

    .footer-right {
        display: none !important;
    }

    .footer-middle {
        order: 1; 
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0;
        align-items: flex-start;
        text-align: right;
        flex: 1; 
        gap: 40px; 
        min-width: 0;
    }

    .footer-links {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start !important; 
        gap: 16% !important; 
        padding: 0;
        margin: 0;
        width: 100%;
        border-bottom: none;
        direction: rtl;
    }
    
    .footer-links a {
        font-size: 16px;
    }

    .footer-contact-info {
        display: flex;
        flex-direction: column; 
        align-items: flex-start;
        gap: 20px; 
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .info-row {
        display: flex;
        flex-direction: row; 
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 90px; 
        width: 100%;
        font-size: 15px;
    }

    .info-label {
        flex-shrink: 0;
        min-width: 60px; 
        text-align: right;
    }

    .info-value {
        flex: 1;
        min-width: 180px;
        word-break: break-word;
        text-align: right;
    }

    .info-address {
        flex: 1;
        min-width: 180px;
        word-break: break-word;
        text-align: right;
        text-align: justify;
        font-size: 14px;
    }

    .footer-socials {
        order: 2; 
        display: flex;
        margin: 0;
        flex-direction: column; 
        align-items: flex-end;
        gap: 15px;
        width: auto; 
        flex-shrink: 0;
    }
    
    .footer-bottom {
        padding-top: 20px;
        margin-top: 20px;
    }
}

/* =========================================
   📱 Footer Responsive Styles (Mobile)
   ========================================= */
@media (max-width: 600px) {
    .site-footer {
        padding: 20px 0;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 0;
        width: 80%;
        margin: 0 auto;
    }

    .footer-socials {
        order: 1;
        flex-direction: row;
        justify-content: center;
        margin-top: 8px;
        width: 100%;
        gap: 18px;
        padding-bottom: 22px;
        border-bottom: none;
        position: relative;
    }

    .footer-socials::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: calc(-50vw + 50%);
        width: 100vw;
        height: 1px;
        background-color:  rgba(22, 51, 32, 0.068);
    }

    .social-icon {
        width: 39px;
        height: 39px;
    }

    
    .social-icon img {
        width: 19px;
        height: 19px;
    }

    .social-icon .instagram {
        width: 20px;
        height: 20px;
    }

    .footer-middle {
        order: 2;
        margin: 0 auto !important;
        padding: 0;
        gap: 25px;
    }

    div.footer-links {
        display: flex;
        justify-content: space-between; /* کلید اصلی: پخش کردن لینک‌ها در کل عرض */
        align-items: center;
        width: 100%;
        margin: 0;
        margin-bottom: 5px;
        padding: 0 0; /* یه پدینگ کوچیک به دو طرف دادم که نچسبن به لبه‌های گوشی */
        gap: 0; /* gap رو صفر کردیم چون space-between خودش فاصله‌ها رو تنظیم می‌کنه */
        position: relative; /* برای اون خط پایینی که ::after داره */
    }

    div.footer-links::after {
        content: '';
        position: absolute;
        bottom: -20px;
        left: calc(-50vw + 50%);
        width: 100vw;
        height: 1px;
    }

    .footer-links a {
        font-size: 14px;
    }

    .footer-contact-info {
        gap: 25px;
        padding-bottom: 25px;
        border-bottom: none;
        position: relative;
    }

    .footer-contact-info::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: calc(-50vw + 50%);
        width: 100vw;
        height: 1px;
        background-color: rgba(22, 51, 32, 0.068);
    }

    .info-row {
        display: flex;
        justify-content: flex-start;
        align-items: right;
        gap: 20px;
        font-size: 12px;
    }

    .info-label {
        min-width: 80px;
        text-align: right;
    }

    span.info-value {
        text-align: right;
        direction: ltr;
        flex: 1;
    }

    .info-address {
        direction: rtl;
        flex: 1;
        text-align: justify;
        line-height: 2;
        font-size: 11px;
    }

    .footer-right {
        display: none !important; 
    }

    .footer-bottom {
        padding-top: 25px 0;
        margin-top: 8px;
        border-top: none; 
    }
}
 
/*===========================================*/

@media (max-width: 900px) {
  /* --- Intro Section --- */
  .intro-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .intro-media-col {
    order: -1; /* تصویر بالا بیاد، اختیاری */
  }

  /* --- Categories Grid --- */
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .category-card {
    padding: 15px 20px;
  }

  .category-image {
    margin-left: 0;
  }

  /* --- Stoneware Section --- */
  .stoneware-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .stoneware-media img {
    width: 100%;
  }

  /* --- Footer --- */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }

  .footer-socials {
    justify-content: center;
  }

  div.footer-middle {
    margin-right: 0;
    padding: 0;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

    div.footer-links {
    margin: 0;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between; /* اینجا هم از هم باز بشن */
    padding: 0 2%; /* درصد دادم که تو تبلت متناسب باز بشه */
  }

  .footer-contact-info {
    width: 98%;
  }

  .info-row {
    flex-wrap: wrap;
    justify-content: right;
  }

  .info-value {
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
  }

  .contact-form-card {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }

  /* --- Nav (فقط برای اطمینان اگر جایی دیده بشه) --- */
  .nav-menu {
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .categories-grid {
    grid-template-columns: 1fr; /* در موبایل خیلی کوچک، تک ستون */
  }
}

/* ==========================================
   Form Alert Notifications - RTL Fixed
   ========================================== */
.dorika-alert {
    display: none;
    font-size: 11px;
    padding: 6px 15px;
    border-radius: 25px;
    text-align: center;
    width: fit-content;
    margin-right: 0 !important; /* اجبار به تراز راست در فارسی */
    margin-left: auto !important;
    margin-bottom: 10px;
    margin-top: 5px;
    animation: fadeInAlert 0.4s ease forwards;
    direction: rtl;
}

.dorika-alert.is-visible {
    display: block;
}

.alert-success {
    background-color: rgba(199, 230, 200, 0.4);
    color: #437345;
    border: 1px solid #579259;
}

.alert-error {
    background-color: rgba(244, 67, 54, 0.1);
    color: #c62828;
    border: 1px solid #f44336;
}

@keyframes fadeInAlert {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===================================
 *  Single Product - Gallery Thumbnails Fix (Responsive & Square)
 * =================================== */
.sp-thumbnails {
    max-height: 550px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 12px;
    
    /* عرض کانتینر رو ریسپانسیو می‌کنیم */
    width: 15%; 
    min-width: 70px; /* نذاریم از این کوچیک‌تر بشه */
    max-width: 95px; /* نذاریم از این بزرگ‌تر بشه */
}

.sp-thumb-item {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.3s ease;
    flex-shrink: 0;
    
    /* جادوی مربعِ ریسپانسیو */
    width: 100%; 
    aspect-ratio: 1 / 1; /* همیشه نسبت 1 به 1 (مربع) رو حفظ میکنه */
    height: auto; /* ارتفاع دیگه ثابت نیست و بر اساس عرض محاسبه میشه */
}

.sp-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
    /* این دو خط باعث میشن مرورگر با استفاده از کارت گرافیک عکس رو نرم و بدون دندانه رندر کنه */
    transform: translateZ(0); 
    backface-visibility: hidden;
}


.sp-thumb-item.active {
    border-color: var(--secondary-color);
}

/* اسکرول‌بار */
.sp-thumbnails::-webkit-scrollbar {
    width: 4px;
}
.sp-thumbnails::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
.sp-thumbnails::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}
.sp-thumbnails::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}


/* ==========================================================================
   LTR Support (English Version) - Global & Intro Section
   ========================================================================== */
@font-face {
    font-family: 'Montserrat';
    src: url(assets/fonts/NunitoSans-Bold.woff);
    font-weight: 700; 
    font-display: swap;
}

@font-face {
    font-family: 'public sans';
    src: url(assets/fonts/PublicSans-Regular.ttf);
    font-weight: 500; 
    font-display: swap;
}

@font-face {
    font-family: 'public sans';
    src: url(assets/fonts/PublicSans-Medium.ttf);
    font-weight: 600; 
    font-display: swap;
}

@font-face {
    font-family: 'public sans';
    src: url(assets/fonts/PublicSans-SemiBold.ttf);
    font-weight: 700; 
    font-display: swap;
}

@font-face {
    font-family: 'public sans';
    src: url(assets/fonts/PublicSans-Bold.ttf);
    font-weight: 800; 
    font-display: swap;
}

html:lang(en) * {
    font-family: 'public sans';
}

html:lang(en),
html[dir="ltr"] {
    overflow-x: hidden;
    width: 100%;
}

html:lang(en) body,
html[dir="ltr"] body {
    direction: ltr !important;
    text-align: left;
    overflow-x: hidden;
    width: 100%;
}

/* ==========================================================================
   LTR Support (English Version) - Header, Mega Menu & Sidebar
   ========================================================================== */

/* ۱. جابجایی جایگاه چپ و راست در هدر اصلی */
html:lang(en) .header-inner {
    direction: ltr; /* این یک خط به طور خودکار جای لوگو/همبرگری و زبان/عاملین فروش رو عوض میکنه! */
}

/* اصلاح جهت دکمه عاملین فروش و آیکون */
html:lang(en) .sales-link-placeholder a {
    direction: ltr;
}

/* ۲. تنظیمات مگا منو (Mega Menu) */
html:lang(en) .mega-menu-columns {
    direction: ltr;
}

html:lang(en) .mega-categories {
    border-radius: 0 0 0 10px; /* قرینه کردن گردی لبه */
}

html:lang(en) .mega-submenus {
    border-radius: 0 0 12px 0; /* قرینه کردن گردی لبه */
}

/* جابجایی فلش مگامنو به سمت راستِ متنِ چپ‌چین شده */
html:lang(en) .mega-link-icon {
    right: 10%; /* فاصله فلش از سمت راست کادر */
    left: auto;
    transform: translateY(-50%) scale(0.7) scaleX(-1); /* هم فلش رو برعکس میکنه هم سایز رو حفظ میکنه */
}

/* خط سبز ظریف که زیرمنوها رو جدا میکرد */
html:lang(en) .sub-menu-content a::after {
    right: auto;
    left: -1px; /* خط سبز از راست میاد سمت چپ */
}

html:lang(en) .sub-menu-content a {
    text-align: left;
}

html:lang(en) .sub-menu-content a:hover {
    padding-right: 12%;
    padding-left: 16%; 
}

html:lang(en) .sidebar-menu {
    right: auto;
    left: -100%; 
    border-radius: 0 20px 20px 0;
    box-shadow: 8px 0 48px rgba(22,51,32,0.10); 
    transition: left 0.4s ease-in-out; 
}

html:lang(en) .sidebar-menu.active {
    left: 0;
    right: auto;
}

html:lang(en) .sidebar-content {
    direction: ltr;
    padding: 10vh 1.7vw 80px 1.4vw; 
}

html:lang(en) .sidebar-list > li > a {
    text-align: left;
}

html:lang(en) .submenu li a {
    text-align: left;
}

/* دکمه بستن (ضربدر) رو میبریم سمت راست */
html:lang(en) .menu-close {
    margin-right: 0;
    margin-left: auto;
}

/* تنظیم جهت فلش‌های کشویی سایدبار */
html:lang(en) .has-submenu .submenu-arrow {
    margin-right: 0;
    margin-left: 4px;
}

/* برای LTR وقتی باز میشه، فلش به سمت پایین بچرخه (تطبیق زاویه) */
html:lang(en) .has-submenu.open .submenu-arrow svg {
    transform: rotate(0deg); 
}

/* آیکون تغییر زبان در سایدبار */
html:lang(en) .lang-item-menu .lang-icon {
    margin-left: 0;
    margin-right: 10px;
}


html:lang(en) .nav-menu { direction: ltr;}
html:lang(en) .dropdown-trigger { gap: 5px;}

html:lang(en) .nav-menu a {
    font-size: clamp(0.85vw, 16px, 1vw);
    font-weight: 700;
}

html:lang(en) .sales-link-placeholder a {
    font-weight: 700;
    font-size: clamp(0.85vw, 16px, 1vw);
}

html:lang(en) .lang-link {
    font-weight: 800;
    font-size: clamp(0.7vw, 14px, 0.9vw);
    margin-bottom: 3px !important;
}

html:lang(en) .header-left { gap:5px;}

html:lang(en) .header-right { gap: 15px; }

html:lang(en) a.dropdown-trigger { direction: rtl; gap: 6px; }

html:lang(en) a.dropdown-trigger svg { margin: 0 !important;}

html:lang(en) .divider {margin: 0 0.4vw;}

html:lang(en) .lang-item-menu span { font-family: 'Vazir'!important; font-weight: 400; }

html:lang(en) .submenu-arrow svg { transform: scaleX(-1);}
html:lang(en) .has-submenu.open .submenu-arrow svg { transform: rotate(-90deg); }

html:lang(en) span.mega-link-text { font-size: clamp(0.8vw, 14px, 0.88vw); padding-left: 10px;}
html:lang(en) .mega-submenus a { font-size: clamp(0.72vw, 13px, 0.79vw); }

html:lang(en) .sidebar-content a {
    font-size: clamp(0.87vw, 14px, 0.88vw);
    font-weight: 600;
    padding-left: 20px;
}

@media (max-width: 1100px) {
    html:lang(en) .sidebar-content { padding: 90px 25px ;}
    html:lang(en) .sidebar-content a {
        font-size: 18px;
        padding-left: 25px;
    }
}

@media (max-width: 600px) {
    html:lang(en) .sidebar-content a {font-size: clamp(15px, 1.05vw, 17px); padding-right: 5px; } 
    html:lang(en) .sidebar-content { padding: 90px 20px ;}}

/* ۲. کانتینر معرفی */
html:lang(en) .intro-container,
html[dir="ltr"] .intro-container {
    direction: ltr !important;
}

html:lang(en) div.intro-text-col {padding-top: 35px !important;}

html:lang(en) .intro-text-col .intro-title,
html[dir="ltr"] .intro-text-col .intro-title {
    direction: ltr !important; 
    justify-content: flex-start;
    
}

html:lang(en) .brand-name {
    font-size: clamp(1.25vw, 19px, 1.3vw);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1px;
    color: var(--secondary-color);
    text-transform: uppercase;
    font-family: 'Montserrat';
}

html:lang(en) .brand-sub {
    font-size: clamp(1vw, 18px, 1.1vw);
    font-weight: 600;
}

html:lang(en) .intro-img-wrapper,
html[dir="ltr"] .intro-img-wrapper {
    margin-left: auto;  
    margin-right: 0;
    margin-top: 60px;
}

html:lang(en) .intro-img,
html[dir="ltr"] .intro-img {
    transform: scaleX(-1);
}

/* ۵. تنظیمات متن توضیحات */
html:lang(en) .intro-desc,
html[dir="ltr"] .intro-desc {
    text-align: justify; 
    direction: ltr !important; 
}

html:lang(en) p.intro-desc {
    font-size: clamp(0.83vw, 14px, 0.9vw);
    font-weight: 500;
}

/* ۶. اصلاح دکمه بیشتر بخوانید */
html:lang(en) .read-more-bottun,
html[dir="ltr"] .read-more-bottun {
    margin-left: 2px; 
    margin-right: 0;
}

/* ۷. اصلاحات رسپانسیو (تبلت و موبایل) */
@media (max-width: 1100px) {
    html:lang(en) div.intro-container,
    html[dir="ltr"] div.intro-container {
        direction: ltr !important; 
    }
    
    html:lang(en) .intro-desc,
    html[dir="ltr"] .intro-desc {
        direction: ltr !important; 
        text-align: left; 
    }
    
    html:lang(en) h2.intro-title,
    html[dir="ltr"] h2.intro-title,
    html:lang(en) .intro-title,
    html[dir="ltr"] .intro-title {
        justify-content: flex-start; 
    }
    html:lang(en) .brand-name {
        font-size: 21px;
        text-transform: uppercase;
    }
    html:lang(en) .brand-sub {
    font-size: 18px;
    margin-left: 2px;
    }
    html:lang(en) p.intro-desc {
    font-size: 14px;
    text-align: justify;
    }
}

@media (max-width: 600px) {
    html:lang(en) div.intro-text-col {padding: 25px 0 10px !important;}
    html:lang(en) .intro-desc,
    html[dir="ltr"] .intro-desc {
        direction: ltr !important;
        text-align: left;
    }
    
    html:lang(en) h2.intro-title,
    html[dir="ltr"] h2.intro-title,
    html:lang(en) .intro-title,
    html[dir="ltr"] .intro-title {
        justify-content: flex-start; 
    }
    html:lang(en) .brand-name {
    font-size: 21px;
    text-transform: uppercase;
    }

    html:lang(en)  .brand-sub {
    font-size: 18px;
    padding-left: 1px;
    }

    html:lang(en) p.intro-desc {
    font-size: 15px;
    font-weight: 500;
    text-align: justify;
    }
}

/* ==========================================================================
   LTR Support (English Version) - Popular Products Section
   ========================================================================== */
html:lang(en) .view-product-btn,
html[dir="ltr"] .view-product-btn {
    font-weight: 600;
    font-size: clamp(0.7vw, 13px, 0.8vw);
    letter-spacing: 0.5px;
    text-transform: capitalize; /* بزرگ کردن حرف اول برای زیبایی انگلیسی */
}

@media (max-width: 1100px) { html:lang(en) .view-product-btn {font-size: 15px;} html:lang(en) .popular-overlay { height: 4vh;}}
@media (max-width: 600px) { html:lang(en) .view-product-btn {font-size: 13px;} }


/* ======================== Product Categories Section ===================== */ 
html:lang(en) .category-heading {
    font-size: clamp(1.1vw, 19px, 1.2vw);
    font-weight: 700;
}

html:lang(en) .category-title {
  font-size:clamp(0.8vw, 14px, 0.88vw);
  font-weight: 600;
}

@media (max-width: 1100px) {
    html:lang(en) .category-heading {font-size: 18px;} 
    html:lang(en) .category-title { font-size: 18px; }
}
@media (max-width: 600px) {
    html:lang(en) .category-heading {font-size: 18px; text-align: left !important;} 
    html:lang(en) .category-title { font-size: 16px; }
}

/* ======================== Stoneware Intro Section (English) ===================== */ 

html:lang(en) p.stoneware-desc {
    font-size: clamp(13px, 0.8vw, 15px);
    font-weight: 500;
    margin-bottom: 20px;
    direction: ltr;
    text-align: left;
}

html:lang(en) a.read-more-btn {
    padding-bottom: 1.8px;
    font-size: clamp(11px, 0.8vw, 11px);
    font-weight: 600;
}

@media (max-width: 1100px) {
    html:lang(en) p.stoneware-desc {
        font-size: 15px !important;
        text-align: justify;
    } 
    html:lang(en) .stoneware-grid.container {
        padding-bottom: 20px !important;
    }
}

@media (max-width: 600px) { 
    /* مشکل اصلی: ارتفاع ثابت باعث بیرون‌زدگی می‌شد. به حالت داینامیک تبدیلش می‌کنیم */
    html:lang(en) .stoneware-section { 
        height: auto !important; 
        min-height: 90vh;
        padding-bottom: 0px; /* برای اینکه پایین عکس و دکمه نچسبه به لبه کادر */
    } 
    
    html:lang(en) a.read-more-btn { 
        padding-top: 2px !important; 
        font-size: 12px !important;
        margin: 15px auto 0 auto !important; /* دکمه رو دقیقاً میاره زیر عکس و وسط‌چین می‌کنه */
        align-self: center; /* چون گرید هست، این مطمئن میشه که دکمه میفته وسط */
    } 
    
    html:lang(en) p.stoneware-desc {
        font-size: 14px !important;
        text-align: justify;
        margin-bottom: 10px !important;
    }
}


/* ====================== English (LTR) Features Section ====================== */

html:lang(en) .dorika-features-section {
    direction: ltr;
    padding: 50px 20px;
    height: clamp(58vh, 500px, 63vh);
}

html:lang(en) .features-grid {
    margin: 0 auto 70px;
    margin-left: clamp(1px, 1vw, 10px);
    gap: 20%;
    width: 100%;
}

html:lang(en) .feature-image-wrapper {
    width: 36%;
    margin: 15px auto 15px 0; 
}


html:lang(en) .feature-card { 
    width: 120%; /* عامل اصلی بیرون‌زدگی! برای دسکتاپ نگهش داشتیم */
}

html:lang(en) .feature-title {
    font-size: clamp(14px, 1.9vw, 14px);
    font-weight: 600;
    text-align: left; 
}

html:lang(en) .feature-subtitle {
    font-size: clamp(12px, 1.1vw, 12px);
    text-align: left;
    direction: ltr;
    width: 100%;
}

html:lang(en) .stoneware-media img,
html[dir="ltr"] .stoneware-media img {
    transform: scaleX(-1);
}

/* ==================== TABLET ENGLISH ==================== */
@media (max-width: 1100px) {
    html:lang(en) .dorika-features-section { height: 35vh;}
    html:lang(en) .dorika-container { margin: 0;}
    html:lang(en) .features-grid {
        gap: 20%; /* فاصله رو متعادل‌تر می‌کنیم */
        width: 100%;
        margin: 0 0 10px 0;
        padding: 0;
    }

    html:lang(en) .feature-card { 
        width: 120%; /* تو تبلت ۱۲۰ درصد زیاده، برش می‌گردونیم روی کادر اصلی */
    }

    html:lang(en) .feature-title {
        text-align: left;
        width: 120%;
        font-size: 13px;
    }
    html:lang(en) .feature-subtitle {font-size: 14px;}
    html:lang(en) .feature-image-wrapper {width: 40%;}
}

/* ==================== MOBILE ENGLISH ==================== */
@media (max-width: 768px) {
    html:lang(en) .dorika-features-section { height: 97vh;  padding: 5%;}
    html:lang(en) .features-grid {
        margin: 0 auto ; /* مارجین چپ دسکتاپ رو کاملاً خنثی می‌کنیم تا گرید دقیقاً بیاد وسط */
        gap: 40px; 
    }

    html:lang(en) .feature-card {
        width: 90%; /* جلوی بیرون‌زدگی از سکشن گرفته شد */
        margin: 0 auto; /* کارت رو وسط سکشن می‌ندازیم */
        align-items: center; /* چون کارت flex هست، این دستور عکس و متن رو محور افقی دقیق وسط‌چین می‌کنه */
    }

    html:lang(en) .feature-image-wrapper {
        width: 25%; /* سایز آیکون رو جمع‌وجور می‌کنیم مثل استایل بیس */
        margin: 0 auto 15px auto; /* عکس رو هُل می‌دیم به وسط (override کردن اون margin دسکتاپ) */
    }

    html:lang(en) .feature-title {
        font-size: 15px;
        text-align: center;
        width: 100%;
    }
    html:lang(en) .feature-subtitle {
        font-size: 13px;
        text-align: center;
        width: 100%;
    }
}

/* ==========================================================================
   LTR Support (English Version) - Footer Section
   ========================================================================== */

/* ۱. تنظیمات کلی کانتینر فوتر و چپ‌چین کردن فرم و اطلاعات */
html:lang(en) .footer-grid,
html[dir="ltr"] .footer-grid {
    direction: ltr !important;
    display: grid;
    grid-template-columns: 1.5fr 2.6fr 0.5fr; 
    gap: 6%;
}

html:lang(en) .footer-socials,
html[dir="ltr"] .footer-socials {
    align-items: flex-end;
}

/* ۲. اصلاح فاصله‌ها و افکت‌های آیکون‌های شبکه‌های اجتماعی */
html:lang(en) .social-icon,
html[dir="ltr"] .social-icon {
    margin-left: 0;
    margin-right: 1px;
}

html:lang(en) .social-icon:hover,
html[dir="ltr"] .social-icon:hover {
    transform: translateX(-5px); /* برعکس کردن جهت حرکت هاور برای LTR */
}


/* ۳. اصلاح مارجین بخش میانی (لینک‌ها و اطلاعات تماس) */
html:lang(en) .footer-middle,
html[dir="ltr"] .footer-middle {
    margin-right: 0;
    margin-left: 40px;
}

/* ۴. اصلاح انیمیشن خط زیر لینک‌های فوتر */
html:lang(en) .footer-links a::after,
html[dir="ltr"] .footer-links a::after {
    right: auto;
    left: 0;
    transform-origin: left;
}

html:lang(en) .footer-links a  {font-size: 0.85vw;}

/* ۵. چپ‌چین کردن متن‌های اطلاعات تماس و آدرس */
html:lang(en) .info-row,
html[dir="ltr"] .info-row,
html:lang(en) .info-label,
html[dir="ltr"] .info-label,
html:lang(en) span.info-value,
html[dir="ltr"] span.info-value {
    text-align: left;
    direction: ltr;
}

html:lang(en) .info-row {
    gap: 18.4%;
    font-size: 0.68vw;
}

/* ۶. چپ‌چین کردن فرم تماس و دکمه ارسال */
html:lang(en) .contact-form-card,
html[dir="ltr"] .contact-form-card {
    text-align: left;
    direction: ltr;
}

html:lang(en) .contact-form-card { padding: 40px;}

html:lang(en) .submit-btn,
html[dir="ltr"] .submit-btn {
    float: right; 
}

/* ==========================================================================
   LTR Support (English Version) - Footer Responsive (Tablet & Mobile)
   ========================================================================== */

/* --- تنظیمات دقیق تبلت انگلیسی (مشابه نسخه فارسی) --- */
@media (max-width: 1024px) and (min-width: 601px) {
    html:lang(en) .footer-grid,
    html[dir="ltr"] .footer-grid {
        display: flex !important;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    /* چپ‌چین کردن ستون میانی و قرار دادن در سمت چپ (order: 1) */
    html:lang(en) .footer-middle,
    html[dir="ltr"] .footer-middle {
        margin-left: 0;
        text-align: left;
        align-items: flex-start;
        order: 1; 
    }

    /* شبکه‌های اجتماعی در سمت راست قرار بگیرند (order: 2) */
    html:lang(en) .footer-socials,
    html[dir="ltr"] .footer-socials {
        align-items: flex-end;
        margin-top: 0;
        order: 2;
    }

    html:lang(en) .footer-links,
    html[dir="ltr"] .footer-links {
        direction: ltr !important;
        justify-content: flex-start !important;
    }

    /* چپ‌چین کردن متن اطلاعات تماس */
    html:lang(en) .info-label,
    html[dir="ltr"] .info-label,
    html:lang(en) span.info-value,
    html[dir="ltr"] span.info-value,
    html:lang(en) .info-address,
    html[dir="ltr"] .info-address {
        text-align: left;
        direction: ltr;
    }

    html:lang(en) div.footer-contact-info { width: 99%;}
    html:lang(en) a.info-value {text-align: left;}
    html:lang(en) .footer-links a {font-size: 17px;}
    html:lang(en) .footer-links { padding: 0 !important;}
    html:lang(en) .info-row {font-size: 15px; gap: 18%; justify-content: flex-start;}
    html:lang(en) span.info-address {font-size: 15px; text-align: left;}
}

/* --- تنظیمات دقیق موبایل انگلیسی --- */
@media (max-width: 600px) {
    html:lang(en) .footer-grid,
    html[dir="ltr"] .footer-grid {
        display: grid !important;
        grid-template-columns: 1fr;
        width: 80%;
        margin: 0 auto;
        gap: 25px;
        text-align: left;
    }

    /* وسط‌چین کردن شبکه‌های اجتماعی دقیقاً مثل نسخه فارسی موبایل */
    html:lang(en) .footer-socials,
    html[dir="ltr"] .footer-socials {
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-left: 0;
    }

    html:lang(en) div.footer-middle,
    html[dir="ltr"] div.footer-middle {
        align-items: stretch; /* باز شدن عرض کامل برای لینک‌ها */
        margin-left: 0;
    }

    html:lang(en) div.footer-links,
    html[dir="ltr"] div.footer-links {
        justify-content: space-between;
        padding: 0;
        direction: ltr !important;
    }
    
    html:lang(en) .info-label,
    html[dir="ltr"] .info-label,
    html:lang(en) span.info-value,
    html[dir="ltr"] span.info-value,
    html:lang(en) .info-address,
    html[dir="ltr"] .info-address {
        text-align: left;
        direction: ltr;
    }

    html:lang(en) .info-row,
    html[dir="ltr"] .info-row {
        justify-content: flex-start;
    }

    html:lang(en) .footer-links a { font-size: 14px; }
    html:lang(en) .info-row { font-size: 12px; gap: 9%; }
    html:lang(en) span.info-address { font-size: 11px; }

    /* دکمه ارسال فرم تماس در موبایل انگلیسی */
    html:lang(en) .submit-btn,
    html[dir="ltr"] .submit-btn {
        float: none;
        width: 100%;
    }
}


/* ==========================================================================
   404 Page (Custom Design)
   ========================================================================== */
.page-404-main {
    padding: 0 !important; /* حذف پدینگ پیش‌فرض برای چسبیدن کامل بخش‌ها به هم */
}

.error-404-section {
    position: relative;
    width: 100%;
    min-height: 76vh;
    background-color: #f8f8f2;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
}

/* انحنای سبز تیره در پس‌زمینه */
.error-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 55%;
    background-color: #1e392a; 
    z-index: -1;
}

.dorika-404-container {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* تنظیمات متن انگلیسی */
.error-404-text-wrapper {
    width: 100%;
    text-align: left;
    direction: ltr; 
    margin-top: 0px; 
    padding-left: 22%; 
    font-family: 'public sans';
}

.error-404-small {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    color: #2e2e2e;
    margin-bottom: 0px;
    letter-spacing: 0.5px;
    font-family: 'public sans';
}

.error-404-title {
    font-family: 'public sans';
    font-size: clamp(1rem, 2vw, 1.3rem);
    font-weight: 800;
    color: #1e392a;
    margin: 0;
}

/* استایل‌های غول‌پیکر عدد 404 */
.error-404-number-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

.error-404-number {
    font-family: 'public sans';
    font-size: clamp(290px, 28vw, 300px); /* سایز واکنش‌گرای تنظیم شده توسط خودت */
    font-weight: 900;
    line-height: 0.8;
    color: #d1e1cc; /* رنگ پر کردن سبز روشن */
    
    /* خط دور (Stroke) ظریف‌تر و نازک‌تر شد */
    -webkit-text-stroke: min(0.4vw, 5px) #274937;
    
    /* تکنیک سایه‌های متوالی برای ایجاد افکت اکستروژن (سه بعدی توپر) */
    text-shadow:
        1px 1px 0 #1e392a, 2px 2px 0 #1e392a, 3px 3px 0 #1e392a, 4px 4px 0 #1e392a, 5px 5px 0 #1e392a,
        6px 6px 0 #1e392a, 7px 7px 0 #1e392a, 8px 8px 0 #1e392a, 9px 9px 0 #1e392a, 10px 10px 0 #1e392a,
        11px 11px 0 #1e392a, 12px 12px 0 #1e392a, 13px 13px 0 #1e392a, 14px 14px 0 #1e392a, 15px 15px 0 #1e392a,
        16px 16px 0 #1e392a, 17px 17px 0 #1e392a, 18px 18px 0 #1e392a, 19px 19px 0 #1e392a, 20px 20px 0 #1e392a;
    margin: 0;
    padding: 30px 30px 20px; /* پدینگ شخصی‌سازی شده شما */
}

/* دکمه بازگشت */
.error-404-action {
    margin-top: 6vh;
    z-index: 3;
}

.dorika-btn-back {
    display: inline-block;
    background-color: #d1e1cc;
    color: #1e392a;
    padding: 8px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.dorika-btn-back:hover {
    background-color: #f8f8f2;
    color: #1e392a;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* واکنش‌گرایی برای موبایل */
@media (max-width: 768px) {
    .error-404-section {
        min-height: 60vh;
    }
    .error-404-text-wrapper {
        margin-bottom: -2vh;
        padding-left: 0;
        text-align: center;
    }
    /* در موبایل ضخامت سه بعدی کمتر میشه تا تمیزتر بمونه */
    .error-404-number {
        font-size: 150px;
        -webkit-text-stroke: 4px #1e392a;
        text-shadow:
            1px 1px 0 #1e392a, 2px 2px 0 #1e392a, 3px 3px 0 #1e392a, 4px 4px 0 #1e392a, 5px 5px 0 #1e392a,
            6px 6px 0 #1e392a, 7px 7px 0 #1e392a, 8px 8px 0 #1e392a, 9px 9px 0 #1e392a, 10px 10px 0 #1e392a;
    }
    .error-404-action {
        margin-top: 3vh;
    }
}

/* ==========================================================================
   SMOOTH SCROLL ENGINE (E-FRAMER STYLE)
   ========================================================================== */
html {
    scroll-behavior: auto !important; /* جلوگیری از تداخل انیمیشن مرورگر با اسکریپت */
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: smooth !important;
    }
}