/* تنظیمات پایه و ریست */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Tahoma', 'Arial', sans-serif; /* فونت فارسی خوانا جایگزین شود */
    background-color: #ffffff;
    color: #333;
    direction: rtl;
    overflow-x: hidden; /* جلوگیری از اسکرول افقی به خاطر موج‌ها */
}

.container {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- دکمه‌های عمومی --- */
.btn-primary {
    background-color: #7b40f2;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(123, 64, 242, 0.3);
    transition: transform 0.2s;
}
.btn-primary:hover { transform: translateY(-2px); }

.btn-text-icon {
    background: none;
    border: none;
    color: #7b40f2;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    white-space: nowrap; /* جلوگیری از شکستن دکمه در خطوط مختلف */
}
.btn-text-icon i {
    font-size: 0.9rem;
    transition: transform 0.2s;
}
.btn-text-icon:hover i { transform: translateX(-4px); }

/* دکمه مشاهده بیشتر در کارت‌های محصول */
.btn-more-details {
    background-color: #f0f0f0;
    color: #7b40f2;
    border: none;
    padding: 8px 15px;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.2s;
    white-space: nowrap; /* جلوگیری از شکستن خط دکمه */
}
.btn-more-details:hover {
    background-color: #e0e0e0;
}


/* --- هدر و فوتر قبلی --- */
#existing-header { background-color: #7b40f2; min-height: 100px; }
#existing-footer { background-color: #e63946; min-height: 150px; }


/* --- Hero Section --- */
.hero-section {
    height: 60vh;
    background: linear-gradient(to bottom, #eaddfd 0%, #ffffff 100%);
}

.hero-grid-container { /* کلاس جدید برای کانتینر Grid */
    display: grid;
    grid-template-columns: 1fr 1fr; /* دو ستون با اندازه مساوی (50/50) */
    gap: 10px; /* فاصله بین دو ستون */
    align-items: center; /* تراز عمودی آیتم‌ها در مرکز */
}

.hero-grid-media { /* استایل‌های ستون تصویر/ویدیو */
    /* نیازی به تعریف width 50% نیست، grid-template-columns آن را هندل می‌کند */
}

.hero-gif {
    width: 100%; /* ویدیو/تصویر کل عرض ستون خود را بگیرد */
    max-height: 600px; /* محدود کردن ارتفاع */
    height: auto; /* حفظ نسبت تصویر */
    display: block; /* حذف فضای اضافی زیر تصویر */
}

.hero-grid-text { /* استایل‌های ستون متن */

    text-align: right;
}
.hero-grid-text h1 {
    font-size: 2.2rem;
    color: #4a2c7a;
    margin-bottom: 15px;
    line-height: 1.3;
}
.hero-grid-text p {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 25px;
}

/* --- Product Section & Cards --- */
.product-section {
    padding: 20px 0 40px;
}
.product-section-offset {
    margin-top: -30px; /* برای همپوشانی با موج بنر بالایی */
}

/* گروه بندی سرتیتر و زیرتیتر با دکمه View All */
.section-header-with-button {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* دکمه و تیترها همتراز با پایین */
    margin-bottom: 25px;
    flex-wrap: wrap; /* برای ریسپانسیو شدن و شکستن خط در موبایل */
    gap: 15px; /* فاصله بین گروه‌های تیتر و دکمه */
}
.section-title-group-inline {
    display: flex;
    flex-direction: column;
    /*align-items: baseline; !* برای همترازی بیس‌لاین متن‌ها *!*/
    gap: 10px; /* فاصله بین دو تیتر */
    flex-wrap: wrap; /* برای ریسپانسیو شدن */
}
.section-title-group-inline .section-subtitle { /* Bestseller, New Arrivals, etc. */
    font-size: 1.1rem; /* کوچکتر از عنوان اصلی */
    color: #777;
    margin-bottom: 0;
    font-weight: normal;
}
.section-title-group-inline .section-title { /* Personalise a Bestseller, etc. */
    font-size: 1.8rem; /* بزرگتر از زیرعنوان */
    color: #4a2c7a;
    margin-bottom: 0;
}


.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 ستون برای ردیف‌های اصلی */
    gap: 20px;
}
.product-grid-margin-top {
    margin-top: 20px; /* فاصله بین ردیف‌های 4 آیتمه */
}

/* چیدمان برای ردیف‌های با 2 آیتم در دو ستون مجزا (ردیف‌های میانی) */
.product-grid-two-single {
    grid-template-columns: repeat(2, 1fr); /* دو ستون برای دو کارت */
}
.product-grid-two-single .product-card-single-col {
    grid-column: span 1; /* هر کارت تکی در یک ستون */
}

.product-card {
    background: transparent; /* بدون کادر پس‌زمینه */
    text-align: right;
    text-decoration: none;
    color: inherit;
    display: block;
}

.card-image-container {
    position: relative;
    border-radius: 15px; /* گوشه‌های گرد برای عکس */
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1); /* سایه برای عکس */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover .card-image-container {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

.card-image-container img {
    width: 100%;
    height: auto;
    display: block;
}

.badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: #ffba00;
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: bold;
    z-index: 2;
}
.badge.new { background-color: #28a745; }
.badge.bestseller { background-color: #ffc107; color: #333;}

.card-content {
    padding: 15px 5px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* برای دکمه مشاهده بیشتر */
}

.book-title {
    font-size: 1.1rem;
    margin-bottom: 6px;
    color: #333;
    font-weight: bold;
}

.book-description {
    font-size: 0.9rem;
    color: #777;
    line-height: 1.4;
    margin-bottom: 10px; /* فاصله از دکمه */
}


/* --- Banners & Wavy Backgrounds --- */

.banner-section {
    padding: 60px 0;
    margin: 50px 0;
    position: relative;
    z-index: 0;
}

.blue-banner { background-color: #4aa3f8; }
.pink-banner { background-color: #ff8fa3; }

.banner-content {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    z-index: 2;
}

.banner-hashed-content {
    width: 100%;
    max-width: 900px;
    height: 180px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.blue-content {
    background-image: url('img/pik1.png');
}

.pink-content {
    background-image: url('path/to/hashed-pink-content.png');
}


/* --- پیاده‌سازی موج‌های کوتاه‌تر، تیز و رو به بالا (نهایی) --- */

/* SVG برای موج‌های رو به بالا (بالای بنرها) */
.wavy-container::before,
.wavy-container-top-only::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 30px; /* ارتفاع موج */
    /* SVG موجی با طول موج کوتاه، تیز و رو به بالا */
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C20,50 30,50 50,30 C70,10 80,10 100,30 L100,0 L0,0 Z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: 200px 100%; /* اندازه برای تکرار موج‌های کوچک و تیز */
    background-repeat: repeat-x;
    z-index: 1;
}

/* SVG برای موج‌های رو به بالا (پایین بنرها) - دقیقا همان موج بالایی */
.wavy-container::after {
    rotate: 180deg;
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 30px; /* ارتفاع موج */
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C20,50 30,50 50,30 C70,10 80,10 100,30 L100,0 L0,0 Z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: 200px 100%; /* اندازه برای تکرار موج‌های کوچک و تیز */
    background-repeat: repeat-x;
    z-index: 1;
}


/* --- بخش ویژگی‌ها (سفید) --- */
.features-section {
    padding: 50px 0;
    margin: 50px 0;
    text-align: center;
}
.features-hashed-content {
    width: 100%;
    max-width: 1000px;
    height: 250px;
    margin: 0 auto;
    background-image: url('path/to/hashed-features-full.png'); /* مسیر عکس ویژگی‌ها */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


/* --- بخش انتهایی (Bottom Section) --- */
.bottom-characters {
    padding: 40px 0;
    text-align: center;
}
.characters-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap; /* برای ریسپانسیو شدن */
}


.character-item {
    position: relative; /* برای قرارگیری متن‌ها روی تصویر */
    width: 300px; /* عرض مناسب برای مستطیل */
    height: 300px; /* ارتفاع مناسب برای مستطیل */
    border-radius: 15px; /* گوشه‌های گرد مستطیل */
    overflow: hidden; /* برای اینکه متن‌ها از کادر بیرون نزنند */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    /*border: 4px solid white; !* برای کادر سفید دور عکس *!*/
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}
.characters-grid img { width: 100%; height: 100%; }

.text-overlay {
    position: absolute;
    left: 0;
    right: 0;
    color: white;
    font-weight: bold;
    text-align: center;
    padding: 2px 5px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5); /* سایه متن برای خوانایی */
    font-size: 0.8rem;
    line-height: 1.2;
}

.top-text-1 {
    top: 10px; /* کمی پایین‌تر از لبه بالایی */
    font-size: 1.2rem;
}

.bottom-text {
    bottom: 50px; /* کمی بالاتر از لبه پایینی */
    background-color: rgba(123, 64, 242, 0.7); /* پس‌زمینه بنفش شفاف */
    border-radius: 5px;
    margin: 0 auto;
    padding: 4px 10px;
    font-size: 0.75rem;
    position: relative;
}


.bottom-purple-banner {
    background-color: #9c27b0;
    padding: 0 0 40px 0;
    margin-top: 60px;
    position: relative;
    z-index: 0;
}

.bottom-banner-content {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
    flex-wrap: wrap; /* برای ریسپانسیو شدن */
}

.bottom-image-container {
    flex: 1;
    margin-top: -80px; /* برای بیرون زدن دختر از کادر */
    text-align: center;
    min-width: 250px; /* حداقل عرض برای حفظ ظاهر در موبایل */
}
.girl-img {
    height: 350px;
    width: 100%;
    display: inline-block;
}

.bottom-hashed-text {
    flex: 1.5;
    padding-right: 20px;
    height: 200px;
    background-image: url('path/to/hashed-purple-text.png'); /* مسیر عکس متن نهایی */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right center;
    min-width: 300px; /* حداقل عرض برای حفظ ظاهر در موبایل */
}


/* --- مدیا کوئری برای ریسپانسیو شدن (موبایل) --- */
@media (max-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr) !important; /* 3 ستون در تبلت */
    }
    .product-grid-two-single {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .product-grid-two-single .product-card-single-col {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .hero-content,
    .bottom-banner-content {
        flex-direction: column;
        text-align: center;
    }

    .hero-text-area-right { padding-top: 20px; }
    .hero-image-area-left { order: -1; }

    .section-header-with-button {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .section-title-group-inline {
        justify-content: center;
        margin-bottom: 10px;
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 ستون در تبلت/موبایل */
    }
    .product-grid-two-single {
        grid-template-columns: repeat(1, 1fr) !important; /* 1 ستون برای تکی‌ها در موبایل */
    }
    .product-grid-two-single .product-card-single-col {
        grid-column: span 1;
    }

    .bottom-image-container { margin-top: 0; margin-bottom: 20px; }
    .bottom-hashed-text { padding-right: 0; height: 150px; background-position: center; }

    /* ارتفاع موج‌ها در موبایل */
    .wavy-container::before, .wavy-container::after, .wavy-container-top-only::before {
        height: 20px; /* ارتفاع موج‌ها در موبایل */
        background-size: 30px 100%; /* تکرار بیشتر موج‌ها */
    }
    .banner-hashed-content { height: 120px; }
    .features-hashed-content { height: 180px; }
    .characters-grid img { width: 120px; height: 80px; } /* کوچکتر شدن تصاویر درجه سنی */
}

@media (max-width: 480px) {
    .product-grid {
        grid-template-columns: 1fr !important; /* 1 ستون در موبایل کوچک */
    }
    .product-grid-two-single {
        grid-template-columns: 1fr !important;
    }
    .hero-text-area-right h1 { font-size: 1.8rem; }
    .bottom-hashed-text { height: 100px; }
    .characters-grid img { width: 100px; height: 70px; } /* باز هم کوچکتر شدن تصاویر درجه سنی */
}