/*
==============================================================================
PAMELA SHOP - PRODUCT CATALOG V2
==============================================================================
این فایل کاملاً با Bootstrap 3.3.4 پروژه سازگار است.
برای جلوگیری از تداخل با CSS قدیمی، تمام کلاس‌های اختصاصی این صفحه با
پیشوند pamela- ساخته شده‌اند.
==============================================================================
*/

/* متغیرهای رنگ و اندازه صفحه فروشگاه. */
.pamela-catalog {
    --pamela-primary: #b84c67; /* رنگ اصلی برند. */
    --pamela-primary-dark: #963c54; /* رنگ تیره‌تر برند. */
    --pamela-text: #2d292b; /* رنگ متن اصلی. */
    --pamela-muted: #7c7478; /* رنگ متن فرعی. */
    --pamela-border: #e8e1e3; /* رنگ خطوط و حاشیه‌ها. */
    --pamela-bg: #faf8f9; /* رنگ زمینه صفحه. */
    --pamela-white: #ffffff; /* رنگ سفید کارت‌ها. */
    --pamela-shadow: 0 7px 24px rgba(45, 41, 43, 0.07); /* سایه کارت‌ها. */
    direction: rtl; /* جهت تمام محتوای فروشگاه را راست‌به‌چپ می‌کنیم. */
    color: var(--pamela-text); /* رنگ پایه متن فروشگاه. */
}

/* فاصله و زمینه اصلی بخش فروشگاه. */
.pamela-catalog {
    padding: 0 0 55px; /* فاصله پایین صفحه فروشگاه. */
}

/* سربرگ فروشگاه را طراحی می‌کنیم. */
.pamela-catalog__hero {
    padding: 35px 0 28px; /* فضای داخلی سربرگ. */
    margin-bottom: 18px; /* فاصله سربرگ از فیلترها. */
}

/* برچسب کوچک بالای عنوان. */
.pamela-catalog__eyebrow {
    display: inline-block; /* اجازه می‌دهد اندازه متن مستقل باشد. */
    color: var(--pamela-primary); /* رنگ برند برای برچسب. */
    font-size: 13px; /* اندازه متن برچسب. */
    font-weight: 700; /* ضخامت متن برچسب. */
    margin-bottom: 8px; /* فاصله برچسب از عنوان. */
}

/* عنوان اصلی فروشگاه. */
.pamela-catalog__title {
    margin: 0; /* حذف فاصله پیش‌فرض عنوان. */
    color: var(--pamela-text); /* رنگ عنوان. */
    font-size: 34px; /* اندازه عنوان دسکتاپ. */
    line-height: 1.4; /* فاصله خطوط عنوان. */
    font-weight: 800; /* ضخامت عنوان. */
}

/* توضیح زیر عنوان. */
.pamela-catalog__description {
    margin: 8px 0 0; /* فاصله بالای توضیح. */
    color: var(--pamela-muted); /* رنگ توضیح. */
    font-size: 14px; /* اندازه توضیح. */
    line-height: 1.9; /* خوانایی توضیح. */
}


/*
------------------------------------------------------------------------------
پنل جستجو و فیلتر
------------------------------------------------------------------------------
*/

/* پنل اصلی فیلتر. */
.pamela-filter-panel {
    background: var(--pamela-white); /* زمینه سفید پنل. */
    border: 1px solid var(--pamela-border); /* حاشیه ظریف پنل. */
    border-radius: 16px; /* گوشه‌های گرد پنل. */
    box-shadow: var(--pamela-shadow); /* سایه نرم پنل. */
    margin-bottom: 18px; /* فاصله پنل از نتایج. */
    overflow: visible; /* اجازه می‌دهیم محتوا بدون بریدگی دیده شود. */
}

/* بدنه فیلتر در دسکتاپ همیشه نمایش داده می‌شود. */
.pamela-filter-body {
    display: block; /* نمایش دائمی فیلتر در دسکتاپ. */
    padding: 20px; /* فضای داخلی پنل. */
}

/* فرم فیلتر را به Grid تبدیل می‌کنیم. */
.pamela-filter-form {
    display: grid; /* استفاده از Grid برای چیدمان فیلترها. */
    grid-template-columns: 2fr 1fr 1fr 1fr; /* چهار بخش اصلی در یک ردیف. */
    gap: 15px; /* فاصله بین فیلدها. */
    align-items: end; /* پایین فیلدها را هم‌راستا می‌کنیم. */
}

/* فیلترهای سریع و دکمه‌ها را در ردیف بعدی قرار می‌دهیم. */
.pamela-check-field {
    grid-column: 1 / 4; /* بخش فیلترهای سریع سه ستون را می‌گیرد. */
}

/* بخش دکمه‌ها در سمت آخر قرار می‌گیرد. */
.pamela-filter-actions {
    display: flex; /* دکمه‌ها کنار هم قرار می‌گیرند. */
    gap: 8px; /* فاصله دکمه‌ها. */
}

/* عنوان هر فیلد فیلتر. */
.pamela-filter-field > label {
    display: block; /* Label را بلوکی می‌کنیم. */
    margin-bottom: 7px; /* فاصله Label از Input. */
    color: var(--pamela-text); /* رنگ Label. */
    font-size: 12px; /* اندازه Label. */
    font-weight: 800; /* ضخامت Label. */
}

/* Input و Selectهای فیلتر. */
.pamela-filter-field .form-control {
    height: 43px; /* ارتفاع یکسان فیلدها. */
    border: 1px solid var(--pamela-border); /* حاشیه فیلد. */
    border-radius: 10px; /* گوشه فیلد. */
    box-shadow: none; /* حذف سایه پیش‌فرض Bootstrap. */
    color: var(--pamela-text); /* رنگ متن فیلد. */
    background: #fff; /* زمینه سفید فیلد. */
    direction: rtl; /* جهت متن فارسی. */
}

/* حالت Focus فیلدها. */
.pamela-filter-field .form-control:focus {
    border-color: rgba(184, 76, 103, 0.55); /* رنگ مرز Focus. */
    box-shadow: 0 0 0 3px rgba(184, 76, 103, 0.09); /* هاله Focus. */
}

/* کادر جستجو. */
.pamela-search-box {
    position: relative; /* مبنای قرارگیری دکمه جستجو. */
}

/* Input جستجو فضای کافی برای دکمه دارد. */
.pamela-search-box .form-control {
    padding-left: 48px; /* فضای سمت چپ برای دکمه جستجو. */
}

/* دکمه جستجو. */
.pamela-search-button {
    position: absolute; /* دکمه را روی Input قرار می‌دهیم. */
    left: 5px; /* فاصله از سمت چپ Input. */
    top: 4px; /* فاصله از بالای Input. */
    width: 35px; /* عرض دکمه. */
    height: 35px; /* ارتفاع دکمه. */
    border: 0; /* حذف حاشیه. */
    border-radius: 8px; /* گرد کردن دکمه. */
    background: var(--pamela-primary); /* رنگ دکمه. */
    color: #fff; /* رنگ آیکون. */
    transition: .2s ease; /* نرم کردن Hover. */
}

/* Hover دکمه جستجو. */
.pamela-search-button:hover {
    background: var(--pamela-primary-dark); /* رنگ تیره هنگام Hover. */
}

/* گزینه‌های فیلتر سریع. */
.pamela-checks {
    display: flex; /* گزینه‌ها کنار هم قرار می‌گیرند. */
    flex-wrap: wrap; /* در صفحه کوچک به خط بعد می‌روند. */
    gap: 8px; /* فاصله گزینه‌ها. */
}

/* هر Checkbox را به شکل Badge قابل انتخاب نمایش می‌دهیم. */
.pamela-check {
    display: inline-flex; /* Checkbox و متن در یک ردیف. */
    align-items: center; /* تراز عمودی. */
    gap: 6px; /* فاصله Checkbox و متن. */
    padding: 8px 11px; /* فضای داخلی گزینه. */
    border: 1px solid var(--pamela-border); /* حاشیه گزینه. */
    border-radius: 20px; /* ظاهر کپسولی. */
    background: #fff; /* زمینه سفید. */
    color: var(--pamela-text); /* رنگ متن. */
    font-size: 12px; /* اندازه متن. */
    font-weight: 600; /* ضخامت متن. */
    cursor: pointer; /* نشانگر قابل کلیک. */
    margin: 0; /* حذف فاصله Bootstrap. */
}

/* Checkbox واقعی را با رنگ برند هماهنگ می‌کنیم. */
.pamela-check input {
    width: 15px; /* عرض Checkbox. */
    height: 15px; /* ارتفاع Checkbox. */
    margin: 0; /* حذف Margin پیش‌فرض. */
    accent-color: var(--pamela-primary); /* رنگ تیک. */
}

/* دکمه‌های فیلتر. */
.pamela-btn {
    display: inline-flex; /* محتوا را Flex می‌کنیم. */
    align-items: center; /* تراز عمودی محتوا. */
    justify-content: center; /* تراز افقی محتوا. */
    min-height: 43px; /* ارتفاع دکمه. */
    padding: 0 16px; /* فضای افقی دکمه. */
    border-radius: 10px; /* گوشه دکمه. */
    text-decoration: none !important; /* حذف خط زیر لینک. */
    font-size: 12px; /* اندازه متن دکمه. */
    font-weight: 800; /* ضخامت متن دکمه. */
    border: 1px solid transparent; /* حاشیه پایه. */
    white-space: nowrap; /* جلوگیری از شکستن متن. */
}

/* دکمه اصلی فیلتر. */
.pamela-btn-primary {
    background: var(--pamela-primary); /* زمینه برند. */
    border-color: var(--pamela-primary); /* حاشیه برند. */
    color: #fff; /* متن سفید. */
}

/* Hover دکمه اصلی. */
.pamela-btn-primary:hover {
    background: var(--pamela-primary-dark); /* زمینه تیره‌تر. */
    border-color: var(--pamela-primary-dark); /* حاشیه تیره‌تر. */
    color: #fff; /* متن همچنان سفید. */
}

/* دکمه پاک کردن. */
.pamela-btn-light {
    background: #f7f5f6; /* زمینه روشن. */
    border-color: var(--pamela-border); /* حاشیه روشن. */
    color: var(--pamela-muted); /* متن خاکستری. */
}

/* Hover دکمه پاک کردن. */
.pamela-btn-light:hover {
    background: #eee9eb; /* زمینه کمی تیره‌تر. */
    color: var(--pamela-text); /* متن تیره‌تر. */
}

/* دکمه موبایل فیلتر. */
.pamela-mobile-filter-toggle {
    display: none; /* در دسکتاپ نیازی به این دکمه نیست. */
    width: 100%; /* تمام عرض پنل. */
    min-height: 48px; /* ارتفاع دکمه. */
    padding: 0 16px; /* فضای داخلی. */
    border: 0; /* حذف حاشیه. */
    background: transparent; /* زمینه شفاف. */
    color: var(--pamela-text); /* رنگ متن. */
    font-size: 13px; /* اندازه متن. */
    font-weight: 800; /* ضخامت متن. */
    text-align: right; /* راست‌چین کردن متن. */
}

/* فلش دکمه موبایل. */
.pamela-filter-arrow {
    float: left; /* فلش در سمت چپ. */
    transition: .2s ease; /* چرخش نرم. */
}


/*
------------------------------------------------------------------------------
نوار نتایج
------------------------------------------------------------------------------
*/

/* نوار اطلاعات نتایج. */
.pamela-result-toolbar {
    display: flex; /* اطلاعات در یک ردیف. */
    align-items: center; /* تراز عمودی. */
    justify-content: space-between; /* دو طرف نوار را جدا می‌کنیم. */
    gap: 12px; /* فاصله بین بخش‌ها. */
    padding: 12px 15px; /* فضای داخلی. */
    margin-bottom: 17px; /* فاصله از محصولات. */
    border: 1px solid var(--pamela-border); /* حاشیه نوار. */
    border-radius: 12px; /* گوشه نوار. */
    background: #fff; /* زمینه سفید. */
}

/* شمارنده نتایج. */
.pamela-result-count {
    display: flex; /* متن و تعداد کنار هم. */
    align-items: baseline; /* هم‌تراز با خط پایه. */
    gap: 8px; /* فاصله دو متن. */
    font-size: 12px; /* اندازه متن. */
}

/* تعداد محصولات. */
.pamela-result-count span {
    color: var(--pamela-muted); /* رنگ تعداد. */
}

/* فیلترهای فعال. */
.pamela-active-filters {
    display: flex; /* Badgeهای فعال کنار هم. */
    flex-wrap: wrap; /* در موبایل به خط بعد می‌روند. */
    gap: 6px; /* فاصله Badgeها. */
}

/* هر Badge فیلتر فعال. */
.pamela-active-filters span {
    padding: 5px 9px; /* فضای داخلی Badge. */
    border-radius: 18px; /* گوشه کپسولی. */
    background: #fff1f4; /* زمینه روشن برند. */
    color: var(--pamela-primary-dark); /* متن برند. */
    font-size: 10px; /* اندازه متن Badge. */
    font-weight: 700; /* ضخامت متن. */
}


/*
------------------------------------------------------------------------------
کارت محصولات
------------------------------------------------------------------------------
*/

/* Grid اصلی محصولات. */
.pamela-product-grid {
    display: grid; /* استفاده از CSS Grid. */
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* چهار کارت در دسکتاپ. */
    gap: 18px; /* فاصله بین کارت‌ها. */
    align-items: stretch; /* ارتفاع کارت‌ها را هم‌تراز می‌کنیم. */
}

/* کارت مستقل محصول. */
.pamela-product-card {
    position: relative; /* مبنای موقعیت داخلی کارت. */
    min-width: 0; /* جلوگیری از بیرون‌زدگی Grid. */
    overflow: hidden; /* جلوگیری از بیرون‌زدگی محتوا. */
    border: 1px solid var(--pamela-border); /* حاشیه کارت. */
    border-radius: 16px; /* گوشه کارت. */
    background: #fff; /* زمینه کارت. */
    box-shadow: var(--pamela-shadow); /* سایه کارت. */
    transition: transform .2s ease, box-shadow .2s ease; /* انیمیشن Hover. */
}

/* Hover کارت محصول. */
.pamela-product-card:hover {
    transform: translateY(-3px); /* حرکت نرم کارت به بالا. */
    box-shadow: 0 14px 35px rgba(45, 41, 43, 0.11); /* سایه Hover. */
}

/* محفظه تصویر محصول. */
.pamela-product-image {
    position: relative; /* مبنای Badgeها. */
    height: 235px; /* ارتفاع ثابت تصویر. */
    overflow: hidden; /* جلوگیری از خروج تصویر. */
    background: #fbf9fa; /* زمینه بسیار روشن تصویر. */
}

/* لینک تصویر تمام فضای تصویر را می‌گیرد. */
.pamela-product-image-link {
    display: block; /* لینک را بلوکی می‌کنیم. */
    width: 100%; /* عرض کامل. */
    height: 100%; /* ارتفاع کامل. */
}

/* خود تصویر محصول. */
.pamela-product-image img {
    display: block; /* حذف فاصله Inline تصویر. */
    width: 100%; /* عرض کامل محفظه. */
    height: 100%; /* ارتفاع کامل محفظه. */
    object-fit: contain; /* جلوگیری از کشیدگی تصویر. */
    padding: 12px; /* فاصله تصویر از لبه‌ها. */
}

/* حالت بدون تصویر. */
.pamela-product-no-image {
    display: flex; /* چیدمان Flex. */
    align-items: center; /* تراز عمودی. */
    justify-content: center; /* تراز افقی. */
    flex-direction: column; /* آیکون و متن زیر هم. */
    width: 100%; /* عرض کامل. */
    height: 100%; /* ارتفاع کامل. */
    gap: 8px; /* فاصله آیکون و متن. */
    color: #aaa; /* رنگ متن جایگزین. */
    font-size: 12px; /* اندازه متن. */
}

/* ظرف مخصوص تمام Badgeهای یک محصول. */
.pamela-product-badges {
    position: absolute !important; /* Badgeها مستقل از CSS قدیمی باشند. */
    top: 10px !important; /* فاصله از بالای تصویر. */
    right: 10px !important; /* فاصله از راست تصویر. */
    left: auto !important; /* جلوگیری از اثر CSS قدیمی. */
    bottom: auto !important; /* جلوگیری از اثر CSS قدیمی. */
    z-index: 10; /* Badge بالای تصویر باشد. */
    display: flex !important; /* Badgeها را Flex می‌کنیم. */
    flex-direction: column !important; /* Badgeها زیر هم قرار می‌گیرند. */
    align-items: flex-end !important; /* Badgeها از سمت راست تراز می‌شوند. */
    justify-content: flex-start !important; /* از بالا شروع می‌کنیم. */
    gap: 6px !important; /* فاصله واقعی بین Badgeها. */
    width: auto !important; /* عرض فقط به اندازه محتوا. */
    height: auto !important; /* ارتفاع فقط به اندازه محتوا. */
    margin: 0 !important; /* حذف Marginهای قدیمی. */
    padding: 0 !important; /* حذف Paddingهای قدیمی. */
    float: none !important; /* حذف Float قدیمی. */
}

/* هر Badge مستقل محصول. */
.pamela-badge {
    position: static !important; /* دیگر همه Badgeها روی یک نقطه نمی‌افتند. */
    display: block !important; /* هر Badge یک خط مستقل دارد. */
    width: max-content !important; /* عرض فقط به اندازه متن. */
    max-width: 125px; /* جلوگیری از Badge خیلی عریض. */
    padding: 5px 9px !important; /* فضای داخلی Badge. */
    border-radius: 18px !important; /* گوشه کپسولی. */
    box-shadow: 0 3px 10px rgba(0,0,0,.08); /* سایه ظریف. */
    font-size: 10px !important; /* اندازه متن Badge. */
    line-height: 1.3 !important; /* ارتفاع مناسب متن. */
    font-weight: 800 !important; /* ضخامت متن Badge. */
    white-space: nowrap; /* جلوگیری از شکستن متن. */
    text-align: center; /* وسط‌چین کردن متن Badge. */
}

/* رنگ Badge پرفروش. */
.pamela-badge-best {
    background: #fff0dc !important; /* زمینه نارنجی روشن. */
    color: #9b5b00 !important; /* متن نارنجی تیره. */
}

/* رنگ Badge ویژه. */
.pamela-badge-featured {
    background: #fff6d5 !important; /* زمینه طلایی روشن. */
    color: #806400 !important; /* متن طلایی تیره. */
}

/* رنگ Badge جدید. */
.pamela-badge-new {
    background: #e8f6eb !important; /* زمینه سبز روشن. */
    color: #28743a !important; /* متن سبز تیره. */
}

/* رنگ Badge تخفیف. */
.pamela-badge-sale {
    background: #ffe3e8 !important; /* زمینه صورتی روشن. */
    color: #b13c56 !important; /* متن قرمز برند. */
}

/* بدنه اطلاعات محصول. */
.pamela-product-body {
    display: flex; /* برای چیدمان منظم اطلاعات. */
    flex-direction: column; /* اطلاعات زیر هم قرار می‌گیرند. */
    min-width: 0; /* جلوگیری از بیرون‌زدگی متن. */
    padding: 15px; /* فضای داخلی کارت. */
}

/* دسته‌بندی کوچک بالای نام محصول. */
.pamela-product-category {
    display: block; /* دسته‌بندی در خط جدا. */
    margin-bottom: 5px; /* فاصله از نام. */
    color: var(--pamela-primary); /* رنگ برند. */
    font-size: 10px; /* اندازه کوچک دسته. */
    font-weight: 700; /* ضخامت متن. */
}

/* عنوان محصول. */
.pamela-product-title {
    min-height: 44px; /* ارتفاع تقریباً یکسان کارت‌ها. */
    margin: 0 0 8px; /* فاصله از بخش موجودی. */
    font-size: 15px; /* اندازه نام محصول. */
    line-height: 1.7; /* خوانایی نام فارسی. */
    font-weight: 800; /* ضخامت نام محصول. */
}

/* لینک نام محصول. */
.pamela-product-title a {
    color: var(--pamela-text); /* رنگ نام. */
    text-decoration: none; /* حذف زیرخط. */
}

/* Hover نام محصول. */
.pamela-product-title a:hover {
    color: var(--pamela-primary); /* تغییر رنگ به برند. */
}

/* وضعیت موجودی. */
.pamela-product-stock {
    min-height: 23px; /* ارتفاع ثابت وضعیت. */
    margin-bottom: 7px; /* فاصله از قیمت. */
    font-size: 11px; /* اندازه متن موجودی. */
}

/* موجودی عادی. */
.pamela-stock-ok {
    color: #2d8b4a; /* رنگ سبز. */
    font-weight: 700; /* ضخامت متن. */
}

/* موجودی کم. */
.pamela-stock-low {
    color: #a46b00; /* رنگ هشدار. */
    font-weight: 700; /* ضخامت متن. */
}

/* ناموجود. */
.pamela-stock-out {
    color: #c44747; /* رنگ قرمز. */
    font-weight: 700; /* ضخامت متن. */
}

/* بخش قیمت. */
.pamela-product-price {
    min-height: 62px; /* ارتفاع ثابت برای هم‌تراز شدن کارت‌ها. */
}

/* ردیف قیمت قبلی و درصد تخفیف. */
.pamela-price-row {
    display: flex; /* قیمت قبلی و درصد کنار هم. */
    align-items: center; /* تراز عمودی. */
    gap: 7px; /* فاصله بین قیمت و درصد. */
    min-height: 22px; /* ارتفاع ردیف. */
}

/* قیمت قبلی. */
.pamela-price-row del {
    color: #999; /* رنگ خاکستری قیمت قبلی. */
    font-size: 10px; /* اندازه کوچک قیمت قبلی. */
}

/* درصد تخفیف. */
.pamela-discount-percent {
    padding: 2px 6px; /* فضای داخلی درصد. */
    border-radius: 10px; /* ظاهر کپسولی. */
    background: #fff0f3; /* زمینه درصد. */
    color: var(--pamela-primary); /* متن درصد. */
    font-size: 9px; /* اندازه درصد. */
    font-weight: 800; /* ضخامت درصد. */
}

/* قیمت نهایی. */
.pamela-product-price strong {
    display: block; /* قیمت نهایی در خط جدا. */
    margin-top: 2px; /* فاصله از قیمت قبلی. */
    color: var(--pamela-primary-dark); /* رنگ قیمت نهایی. */
    font-size: 18px; /* اندازه قیمت. */
    line-height: 1.5; /* ارتفاع قیمت. */
    font-weight: 900; /* ضخامت قیمت. */
}

/* واحد تومان. */
.pamela-product-price small {
    color: var(--pamela-muted); /* رنگ واحد پول. */
    font-size: 10px; /* اندازه واحد پول. */
    font-weight: 600; /* ضخامت واحد پول. */
}

/* دکمه‌های محصول. */
.pamela-product-actions {
    display: grid; /* چیدمان دو دکمه. */
    grid-template-columns: .8fr 1.5fr; /* مشاهده کوچک‌تر، سبد بزرگ‌تر. */
    gap: 7px; /* فاصله دکمه‌ها. */
    margin-top: 8px; /* فاصله از قیمت. */
}

/* فرم افزودن به سبد فضای کامل می‌گیرد. */
.pamela-product-actions form {
    margin: 0; /* حذف فاصله فرم. */
}

/* دکمه مشاهده. */
.pamela-product-view,
.pamela-product-cart {
    display: flex; /* Flex برای تراز متن و آیکون. */
    align-items: center; /* تراز عمودی. */
    justify-content: center; /* تراز افقی. */
    width: 100%; /* عرض کامل ستون. */
    min-height: 39px; /* ارتفاع دکمه. */
    padding: 0 8px; /* فضای افقی دکمه. */
    border-radius: 9px; /* گوشه دکمه. */
    font-size: 10px; /* اندازه متن دکمه. */
    font-weight: 800; /* ضخامت متن دکمه. */
    text-decoration: none !important; /* حذف زیرخط. */
    cursor: pointer; /* نشانگر کلیک. */
}

/* دکمه مشاهده. */
.pamela-product-view {
    border: 1px solid var(--pamela-border); /* حاشیه مشاهده. */
    background: #fff; /* زمینه سفید. */
    color: var(--pamela-text); /* رنگ متن. */
}

/* Hover مشاهده. */
.pamela-product-view:hover {
    border-color: rgba(184,76,103,.4); /* حاشیه برند. */
    color: var(--pamela-primary); /* متن برند. */
}

/* دکمه سبد. */
.pamela-product-cart {
    border: 1px solid var(--pamela-primary); /* حاشیه برند. */
    background: var(--pamela-primary); /* زمینه برند. */
    color: #fff; /* متن سفید. */
}

/* Hover سبد. */
.pamela-product-cart:hover {
    border-color: var(--pamela-primary-dark); /* حاشیه تیره‌تر. */
    background: var(--pamela-primary-dark); /* زمینه تیره‌تر. */
}

/* دکمه سبد برای محصول ناموجود. */
.pamela-product-cart-disabled {
    opacity: .55; /* کاهش شفافیت. */
    cursor: not-allowed; /* نشانگر غیرقابل کلیک. */
}

/* لینک نظرات. */
.pamela-product-reviews {
    display: inline-flex; /* آیکون و متن کنار هم. */
    align-items: center; /* تراز عمودی. */
    justify-content: center; /* تراز افقی. */
    gap: 5px; /* فاصله آیکون و متن. */
    margin-top: 8px; /* فاصله از دکمه‌ها. */
    color: var(--pamela-muted); /* رنگ خاکستری. */
    font-size: 10px; /* اندازه کوچک. */
    text-decoration: none !important; /* حذف زیرخط. */
}

/* Hover نظرات. */
.pamela-product-reviews:hover {
    color: var(--pamela-primary); /* رنگ برند. */
}


/*
------------------------------------------------------------------------------
صفحه‌بندی
------------------------------------------------------------------------------
*/

/* محفظه Pagination. */
.pamela-pagination {
    margin-top: 28px; /* فاصله از محصولات. */
    text-align: center; /* وسط‌چین کردن Pagination. */
}

/* لیست Pagination. */
.pamela-pagination .pagination {
    display: inline-flex; /* شماره‌ها کنار هم. */
    direction: rtl; /* جهت راست‌به‌چپ. */
    margin: 0; /* حذف Margin پیش‌فرض. */
}

/* لینک و شماره Pagination. */
.pamela-pagination .pagination li a,
.pamela-pagination .pagination li span {
    display: flex; /* وسط‌چین کردن شماره. */
    align-items: center; /* تراز عمودی. */
    justify-content: center; /* تراز افقی. */
    min-width: 38px; /* عرض شماره. */
    height: 38px; /* ارتفاع شماره. */
    margin: 0 2px; /* فاصله شماره‌ها. */
    border: 1px solid var(--pamela-border); /* حاشیه شماره. */
    border-radius: 8px; /* گوشه شماره. */
    background: #fff; /* زمینه سفید. */
    color: var(--pamela-text); /* رنگ شماره. */
    text-decoration: none; /* حذف زیرخط. */
    font-size: 11px; /* اندازه شماره. */
}

/* شماره صفحه فعال. */
.pamela-pagination .pagination li.active span {
    background: var(--pamela-primary); /* زمینه فعال. */
    border-color: var(--pamela-primary); /* حاشیه فعال. */
    color: #fff; /* متن سفید. */
}


/*
------------------------------------------------------------------------------
حالت بدون نتیجه
------------------------------------------------------------------------------
*/

/* جعبه بدون نتیجه. */
.pamela-empty {
    padding: 60px 20px; /* فضای داخلی. */
    border: 1px dashed #ddd; /* حاشیه خط‌چین. */
    border-radius: 16px; /* گوشه‌های گرد. */
    background: #fff; /* زمینه سفید. */
    text-align: center; /* وسط‌چین کردن متن. */
}

/* آیکون بدون نتیجه. */
.pamela-empty__icon {
    margin-bottom: 12px; /* فاصله از عنوان. */
    color: var(--pamela-primary); /* رنگ آیکون. */
    font-size: 38px; /* اندازه آیکون. */
}

/* عنوان بدون نتیجه. */
.pamela-empty h2 {
    margin: 0 0 8px; /* فاصله عنوان. */
    font-size: 22px; /* اندازه عنوان. */
}

/* متن بدون نتیجه. */
.pamela-empty p {
    margin: 0 0 18px; /* فاصله از دکمه. */
    color: var(--pamela-muted); /* رنگ متن. */
}


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

/* در صفحه‌های متوسط چهار ستون را به سه ستون تبدیل می‌کنیم. */
@media (max-width: 1199px) {
    .pamela-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)); /* سه کارت در ردیف. */
    }

    .pamela-filter-form {
        grid-template-columns: 1.6fr 1fr 1fr; /* سه ستون برای فیلتر. */
    }

    .pamela-check-field {
        grid-column: 1 / 3; /* فیلتر سریع دو ستون می‌گیرد. */
    }
}

/* در تبلت فیلترها و محصولات را ساده‌تر می‌کنیم. */
@media (max-width: 991px) {
    .pamela-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* دو ستون فیلتر. */
    }

    .pamela-check-field {
        grid-column: 1 / -1; /* فیلتر سریع کل عرض را می‌گیرد. */
    }

    .pamela-filter-actions {
        grid-column: 1 / -1; /* دکمه‌ها کل عرض را می‌گیرند. */
    }

    .pamela-mobile-filter-toggle {
        display: block; /* دکمه فیلتر در موبایل نمایش داده می‌شود. */
    }

    .pamela-filter-body {
        display: none; /* فیلتر در موبایل ابتدا بسته است. */
        padding: 0 16px 16px; /* فضای داخلی بدنه بازشده. */
    }

    .pamela-filter-body.is-open {
        display: block; /* هنگام کلیک فیلتر را باز می‌کنیم. */
    }
}

/* در موبایل کوچک دو کارت در ردیف قرار می‌گیرند. */
@media (max-width: 767px) {
    .pamela-catalog__hero {
        padding: 25px 0 20px; /* سربرگ موبایل را فشرده‌تر می‌کنیم. */
    }

    .pamela-catalog__title {
        font-size: 27px; /* عنوان موبایل. */
    }

    .pamela-filter-form {
        grid-template-columns: 1fr; /* تمام فیلترها یک ستونه. */
    }

    .pamela-check-field,
    .pamela-filter-actions {
        grid-column: auto; /* بازگرداندن Grid موبایل. */
    }

    .pamela-filter-actions {
        flex-direction: column; /* دکمه‌ها زیر هم. */
    }

    .pamela-result-toolbar {
        flex-direction: column; /* نوار نتایج عمودی. */
        align-items: flex-start; /* تراز از سمت راست. */
    }

    .pamela-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* دو کارت در ردیف موبایل. */
        gap: 11px; /* فاصله کمتر کارت‌ها. */
    }

    .pamela-product-image {
        height: 190px; /* تصویر کوتاه‌تر در موبایل. */
    }

    .pamela-product-body {
        padding: 11px; /* فضای داخلی کمتر. */
    }

    .pamela-product-title {
        min-height: 42px; /* ارتفاع عنوان موبایل. */
        font-size: 13px; /* اندازه عنوان موبایل. */
    }

    .pamela-product-price strong {
        font-size: 16px; /* قیمت موبایل. */
    }

    .pamela-product-actions {
        grid-template-columns: 1fr; /* دکمه‌ها زیر هم. */
    }
}

/* در گوشی خیلی کوچک یک کارت در ردیف قرار می‌گیرد. */
@media (max-width: 430px) {
    .pamela-product-grid {
        grid-template-columns: 1fr; /* یک کارت در ردیف. */
    }

    .pamela-product-image {
        height: 230px; /* تصویر بزرگ‌تر در کارت تک‌ستونه. */
    }
}


/* =========================================================
   Pamela Shop - Inline Wishlist beside product title
   ========================================================= */
.pamela-product-title-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-height:50px;
}
.pamela-product-title-row .pamela-product-title{
    flex:1;
    min-width:0;
    margin-bottom:0;
}
.pamela-wishlist-inline-form{
    flex:0 0 auto;
    margin:0;
}
.pamela-wishlist-inline-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    padding:0;
    border:1px solid #eadfe3;
    border-radius:50%;
    background:#fff;
    color:#9a8f94;
    font-size:21px;
    line-height:1;
    cursor:pointer;
    transition:transform .18s ease, color .18s ease, background .18s ease, border-color .18s ease;
}
.pamela-wishlist-inline-button:hover{
    transform:translateY(-1px) scale(1.04);
    color:#c7385c;
    border-color:#f0b8c5;
    background:#fff5f7;
}
.pamela-wishlist-inline-button.is-active{
    color:#c7385c;
    border-color:#f0b8c5;
    background:#fff0f3;
}

/* =========================================================
   PAMELA SHOP PRODUCT CARD v3
   کارت واحد برای صفحه اصلی، فروشگاه و مجموعه‌های محصول
   ========================================================= */

@font-face {
    font-family: "Noto Sans Arabic";
    src: url("../fonts/NotoSansArabic-Regular.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Noto Sans Arabic";
    src: url("../fonts/NotoSansArabic-SemiBold.ttf") format("truetype");
    font-weight: 600 900;
    font-display: swap;
}

.pamela-product-card {
    border:1px solid #eceef2 !important;
    border-radius:22px !important;
    background:#fff !important;
    box-shadow:0 12px 34px rgba(24,28,35,.055) !important;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
    font-family:"Noto Sans Arabic",Tahoma,Arial,sans-serif !important;
}
.pamela-product-card:hover {
    transform:translateY(-5px) !important;
    border-color:rgba(227,27,63,.16) !important;
    box-shadow:0 20px 45px rgba(24,28,35,.10) !important;
}
.pamela-product-image {
    height:auto !important;
    aspect-ratio:1 / 1 !important;
    background:linear-gradient(145deg,#fafbfc,#f5f7f9) !important;
    border-bottom:1px solid #f0f1f3;
}
.pamela-product-image-link { height:100% !important; }
.pamela-product-image img {
    width:100% !important; height:100% !important;
    object-fit:contain !important;
    padding:14px !important;
    transition:transform .35s ease, filter .35s ease;
}
.pamela-product-card:hover .pamela-product-image img { transform:scale(1.035); filter:saturate(1.03); }
.pamela-product-badges { top:12px !important; right:12px !important; }
.pamela-badge { font-size:9px !important; padding:5px 8px !important; border:1px solid rgba(255,255,255,.6); }
.pamela-wishlist-float {
    position:absolute !important; left:12px !important; top:12px !important; right:auto !important;
    z-index:12; width:36px; height:36px; display:grid; place-items:center;
    border:1px solid rgba(227,27,63,.13); border-radius:50%; background:rgba(255,255,255,.94);
    color:#d54a69 !important; box-shadow:0 7px 18px rgba(20,20,20,.08);
}
.pamela-wishlist-float button { border:0; background:transparent; color:inherit; font-size:20px; line-height:1; cursor:pointer; }
.pamela-product-body { padding:17px 16px 15px !important; }
.pamela-product-meta {
    display:flex; align-items:center; gap:9px; min-height:21px; margin-bottom:7px;
    color:#b24a63; font-size:10px; font-weight:800;
}
.pamela-product-meta span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pamela-product-brand { color:#727780; position:relative; padding-right:10px; }
.pamela-product-brand::before { content:""; position:absolute; right:0; top:50%; width:4px; height:4px; transform:translateY(-50%); border-radius:50%; background:#d7d9dd; }
.pamela-product-title {
    min-height:49px !important; margin:0 !important; font-size:15px !important; line-height:1.8 !important;
    font-weight:900 !important; text-align:right;
}
.pamela-product-title a { color:#22252a !important; }
.pamela-product-divider {
    height:1px; margin:11px 0 10px; position:relative; background:linear-gradient(90deg,transparent,#e7e8eb 18%,#e7e8eb 82%,transparent);
}
.pamela-product-stock { min-height:24px !important; margin-bottom:5px !important; font-size:10px !important; text-align:right; }
.pamela-stock-ok { color:#23845a !important; }
.pamela-stock-low { color:#b67812 !important; }
.pamela-stock-out { color:#a84b5c !important; }
.pamela-product-stock i { margin-left:4px; font-size:10px; }
.pamela-product-price { min-height:66px !important; text-align:right; }
.pamela-price-row { justify-content:flex-start !important; min-height:21px; }
.pamela-price-row del { color:#9b9fa5 !important; font-size:9px !important; }
.pamela-discount-percent { background:#fff0f3 !important; color:#d53e5d !important; }
.pamela-product-price strong {
    margin-top:4px !important; color:#c52f50 !important; font-size:20px !important; font-weight:1000 !important;
}
.pamela-product-price small { color:#747981 !important; font-size:9px !important; }
.pamela-cart-row { display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px; align-items:stretch; margin-top:4px; }
.pamela-add-cart-form { min-width:0; margin:0 !important; }
.pamela-quantity-control {
    display:flex; align-items:center; justify-content:center; min-width:90px; height:43px;
    border:1px solid #e7e8ec; border-radius:12px; background:#fbfcfd; overflow:hidden;
}
.pamela-qty-btn {
    width:29px; height:100%; border:0; background:transparent; color:#c73353; font-size:19px; font-weight:900; cursor:pointer;
}
.pamela-qty-btn:hover:not(:disabled) { background:#fff0f3; }
.pamela-qty-btn:disabled { opacity:.35; cursor:not-allowed; }
.pamela-qty-value { min-width:27px; text-align:center; color:#2e3238; font-size:12px; font-weight:900; }
.pamela-product-cart {
    min-height:43px !important; border-radius:12px !important; border:0 !important;
    background:linear-gradient(135deg,#d93f60,#e85a78) !important;
    box-shadow:0 9px 20px rgba(217,63,96,.17); font-size:10px !important;
}
.pamela-product-cart:hover { background:linear-gradient(135deg,#c82f51,#dd4b6a) !important; }
.pamela-product-cart i { margin-left:5px; }
.pamela-product-bottom-links { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:9px; }
.pamela-product-view, .pamela-product-reviews {
    min-height:36px; display:flex !important; align-items:center; justify-content:center; gap:5px;
    margin:0 !important; border:1px solid #e9eaed; border-radius:10px; background:#fff;
    color:#4c5259 !important; font-size:9px !important; font-weight:800;
}
.pamela-product-view:hover, .pamela-product-reviews:hover { border-color:#e3a3b2; color:#c83352 !important; background:#fff8fa; }

@media (max-width: 1050px) {
    .pamela-product-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}
@media (max-width: 820px) {
    .pamela-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
    .pamela-product-body { padding:14px 12px 12px !important; }
    .pamela-product-title { font-size:13px !important; }
    .pamela-product-price strong { font-size:18px !important; }
    .pamela-quantity-control { min-width:82px; }
}
@media (max-width: 520px) {
    .pamela-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:9px !important; }
    .pamela-product-card { border-radius:17px !important; }
    .pamela-product-image img { padding:9px !important; }
    .pamela-product-badges { top:8px !important; right:8px !important; gap:4px !important; }
    .pamela-badge { font-size:7px !important; padding:4px 6px !important; }
    .pamela-wishlist-float { left:8px !important; top:8px !important; width:31px; height:31px; }
    .pamela-wishlist-float button { font-size:17px; }
    .pamela-product-body { padding:12px 10px 10px !important; }
    .pamela-product-meta { gap:6px; font-size:8px; }
    .pamela-product-brand { padding-right:7px; }
    .pamela-product-title { min-height:45px !important; font-size:11px !important; line-height:1.75 !important; }
    .pamela-product-divider { margin:8px 0; }
    .pamela-product-stock { font-size:8px !important; min-height:20px !important; }
    .pamela-product-price { min-height:57px !important; }
    .pamela-price-row del { font-size:7px !important; }
    .pamela-product-price strong { font-size:15px !important; }
    .pamela-product-price small { font-size:7px !important; }
    .pamela-cart-row { grid-template-columns:1fr; gap:6px; }
    .pamela-quantity-control { width:100%; height:37px; min-width:0; }
    .pamela-qty-btn { width:33%; }
    .pamela-product-cart { min-height:38px !important; font-size:8px !important; }
    .pamela-product-bottom-links { gap:5px; margin-top:7px; }
    .pamela-product-view, .pamela-product-reviews { min-height:33px; font-size:7.5px !important; }
}
@media (max-width: 360px) {
    .pamela-product-grid { grid-template-columns:1fr !important; }
    .pamela-product-image { aspect-ratio:1/1 !important; }
}

/* Pamela Shop v3.4.8 — compact product card */
.pamela-product-bottom-links { display:none !important; }
.pamela-product-card .pamela-product-body { padding-bottom:18px; }
.pamela-cart-row { align-items:center; }
.pamela-quantity-control { flex:0 0 auto; }
.pamela-add-cart-form { flex:1 1 auto; min-width:0; }
.pamela-product-cart { width:100%; min-width:0; }
@media(max-width:650px) {
    .pamela-product-card .pamela-product-body { padding-bottom:14px; }
    .pamela-cart-row { gap:7px; }
    .pamela-quantity-control { min-width:84px; }
}


/* ============================================================
   PAMELA SHOP v3.4.9 — COMPACT PRODUCT CARD
   ============================================================ */
.pamela-product-card { border-radius:18px !important; }
.pamela-product-image {
    height:205px !important;
    background:
        radial-gradient(circle at 50% 40%, rgba(255,255,255,.98), transparent 58%),
        linear-gradient(145deg,#fbfbfd,#f6f7f9) !important;
}
.pamela-product-image img { padding:10px !important; transition:transform .28s ease, filter .28s ease; }
.pamela-product-card:hover .pamela-product-image img { transform:scale(1.045); filter:saturate(1.045) contrast(1.01); }
.pamela-product-body { padding:12px 13px 12px !important; }
.pamela-product-meta { min-height:18px !important; margin-bottom:4px !important; font-size:9px !important; gap:8px !important; }
.pamela-product-title { min-height:40px !important; font-size:14px !important; line-height:1.7 !important; }
.pamela-product-divider { margin:7px 0 7px !important; }
.pamela-product-stock { min-height:20px !important; margin-bottom:2px !important; }
.pamela-product-price { min-height:54px !important; }
.pamela-product-price strong { font-size:18px !important; margin-top:2px !important; }
.pamela-cart-row { margin-top:2px !important; gap:6px !important; }
.pamela-quantity-control { min-width:76px !important; height:39px !important; border-radius:11px !important; }
.pamela-qty-btn { width:25px !important; font-size:17px !important; }
.pamela-qty-value { min-width:23px !important; font-size:11px !important; }
.pamela-product-cart { min-height:39px !important; border-radius:11px !important; font-size:9px !important; }

.pamela-wishlist-float {
    left:10px !important; top:10px !important;
    width:38px !important; height:38px !important;
    display:grid !important; place-items:center !important;
    border:1px solid rgba(220,66,103,.15) !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.88) !important;
    color:#d44868 !important;
    box-shadow:0 8px 22px rgba(45,35,40,.11), inset 0 1px 0 rgba(255,255,255,.9) !important;
    backdrop-filter:blur(8px);
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.pamela-wishlist-float:hover {
    transform:translateY(-2px) scale(1.06);
    background:#fff !important;
    box-shadow:0 12px 26px rgba(212,72,104,.18), 0 0 0 4px rgba(212,72,104,.06) !important;
}
.pamela-wishlist-float button,
.pamela-wishlist-float svg { width:21px !important; height:21px !important; }
.pamela-wishlist-float svg { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease, fill .2s ease; }
.pamela-wishlist-float:hover svg { transform:scale(1.08); }
.pamela-wishlist-float.is-active svg { fill:#df4164; stroke:#df4164; }
@media(max-width:820px){ .pamela-product-image { height:180px !important; } }
@media(max-width:560px){
    .pamela-product-image { height:160px !important; }
    .pamela-product-body { padding:10px 9px 9px !important; }
    .pamela-product-meta { font-size:8px !important; }
    .pamela-product-title { min-height:38px !important; font-size:11px !important; line-height:1.65 !important; }
    .pamela-product-divider { margin:6px 0 !important; }
    .pamela-product-stock { min-height:18px !important; font-size:8px !important; }
    .pamela-product-price { min-height:48px !important; }
    .pamela-product-price strong { font-size:15px !important; }
    .pamela-cart-row { grid-template-columns:72px minmax(0,1fr) !important; }
    .pamela-quantity-control { width:72px !important; min-width:72px !important; height:36px !important; }
    .pamela-product-cart { min-height:36px !important; font-size:8px !important; }
    .pamela-wishlist-float { width:34px !important; height:34px !important; left:8px !important; top:8px !important; }
    .pamela-wishlist-float button,.pamela-wishlist-float svg { width:19px !important; height:19px !important; }
}
@media(max-width:380px){
    .pamela-product-grid { gap:8px !important; }
    .pamela-product-image { height:150px !important; }
    .pamela-product-title { font-size:10px !important; }
    .pamela-product-price strong { font-size:14px !important; }
    .pamela-cart-row { grid-template-columns:66px minmax(0,1fr) !important; }
    .pamela-quantity-control { width:66px !important; min-width:66px !important; }
}


/* ============================================================
   Pamela Shop v3.5.0 — Wishlist SVG reliability + compact card
   ============================================================ */
.pamela-wishlist-float .pamela-heart-icon{
    width:21px !important;
    height:21px !important;
    fill:none !important;
    stroke:#d44767 !important;
    stroke-width:1.8 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
}
.pamela-wishlist-inline-button.is-active .pamela-heart-icon{
    fill:#e14b6b !important;
    stroke:#e14b6b !important;
}
.pamela-wishlist-float .pamela-wishlist-inline-button{
    display:grid !important;
    place-items:center !important;
    width:100% !important;
    height:100% !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
}
@media(max-width:600px){
    .pamela-wishlist-float{width:38px !important;height:38px !important;left:10px !important;top:10px !important;}
}


/* ============================================================
   Pamela Shop v3.5.1 — Product media frame cleanup
   ============================================================ */
.pamela-product-image{
    background:#f7f8f9 !important;
}
.pamela-product-image img{
    padding:0 !important;
    object-fit:cover !important;
    object-position:center !important;
    transform:scale(1.07);
    transform-origin:center;
}
.pamela-product-card:hover .pamela-product-image img{
    transform:scale(1.10);
}

/* ============================================================
   PAMELA SHOP v3.5.2 — PRODUCT CARD IMAGE + COMPACT POLISH
   ============================================================ */
.pamela-product-card {
    width:100%;
    box-sizing:border-box;
}
.pamela-product-image {
    width:100% !important;
    aspect-ratio:1 / 1 !important;
    height:auto !important;
    padding:0 !important;
    margin:0 !important;
    border-bottom:1px solid #f0f1f3 !important;
    background:#fff !important;
}
.pamela-product-image-link {
    display:block !important;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    padding:0 !important;
}
.pamela-product-image img {
    display:block !important;
    width:100% !important;
    height:100% !important;
    padding:0 !important;
    margin:0 !important;
    object-fit:contain !important;
    object-position:center !important;
    background:#fff !important;
}
.pamela-product-body {
    padding:13px 14px 12px !important;
}
.pamela-product-meta { margin-bottom:4px !important; }
.pamela-product-title {
    min-height:42px !important;
    line-height:1.65 !important;
    margin-bottom:0 !important;
}
.pamela-product-divider { margin:7px 0 7px !important; }
.pamela-product-stock { min-height:21px !important; margin-bottom:3px !important; }
.pamela-product-price { min-height:54px !important; }
.pamela-product-price strong { margin-top:1px !important; }
.pamela-cart-row { margin-top:2px !important; }
.pamela-quantity-control { height:40px !important; min-width:86px !important; }
.pamela-product-cart { min-height:40px !important; }

/* ============================================================
   NEW PRODUCTS CAROUSEL — preserve the original card proportions
   ============================================================ */
.pamela-home .ph-product-carousel {
    position:relative !important;
    display:block !important;
    padding:0 48px !important;
}
.pamela-home .ph-product-carousel__viewport {
    width:100% !important;
    box-sizing:border-box !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    padding:4px 2px 18px !important;
}
.pamela-home .ph-product-carousel__track {
    display:flex !important;
    align-items:stretch !important;
    gap:18px !important;
    width:max-content !important;
}
.pamela-home .ph-product-carousel .ph-product-item {
    flex:0 0 calc((min(100vw - 120px, 1200px) - 54px) / 4) !important;
    width:calc((min(100vw - 120px, 1200px) - 54px) / 4) !important;
    min-width:0 !important;
    display:flex !important;
}
.pamela-home .ph-product-carousel .ph-product-item .pamela-product-card {
    width:100% !important;
}
.pamela-home .ph-product-carousel__btn {
    position:absolute !important;
    top:50% !important;
    z-index:20 !important;
    transform:translateY(-50%) !important;
    width:40px !important;
    height:40px !important;
}
.pamela-home .ph-product-carousel__btn--prev { left:0 !important; }
.pamela-home .ph-product-carousel__btn--next { right:0 !important; }
.pamela-home .ph-product-carousel__btn:hover:not(:disabled) {
    transform:translateY(-50%) scale(1.04) !important;
}

@media (max-width:1050px) {
    .pamela-home .ph-product-carousel .ph-product-item {
        flex-basis:calc((min(100vw - 100px, 900px) - 36px) / 3) !important;
        width:calc((min(100vw - 100px, 900px) - 36px) / 3) !important;
    }
}
@media (max-width:760px) {
    .pamela-home .ph-product-carousel {
        padding:0 38px !important;
    }
    .pamela-home .ph-product-carousel__track { gap:12px !important; }
    .pamela-home .ph-product-carousel .ph-product-item {
        flex-basis:calc((100vw - 100px) / 2) !important;
        width:calc((100vw - 100px) / 2) !important;
    }
    .pamela-home .ph-product-carousel__btn {
        width:34px !important;
        height:34px !important;
    }
}
@media (max-width:430px) {
    .pamela-home .ph-product-carousel {
        padding:0 30px !important;
    }
    .pamela-home .ph-product-carousel .ph-product-item {
        flex-basis:calc(100vw - 76px) !important;
        width:calc(100vw - 76px) !important;
    }
    .pamela-home .ph-product-carousel__btn {
        width:30px !important;
        height:30px !important;
        font-size:13px !important;
    }
}

/* ============================================================
   PAMELA SHOP — ALL PRODUCTS HERO / SHOP DISCOVERY
   فقط مربوط به صفحه محصولات است؛ پنل جستجو و فیلتر موجود دست‌نخورده مانده.
   ============================================================ */
.pamela-shop-hero{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);
    align-items:stretch;
    gap:26px;
    min-height:365px;
    margin:28px 0 18px;
    padding:42px 44px;
    overflow:hidden;
    border:1px solid rgba(184,76,103,.14);
    border-radius:28px;
    background:
        radial-gradient(circle at 8% 18%,rgba(255,255,255,.95),transparent 31%),
        linear-gradient(135deg,#fff 0%,#fff7f8 52%,#f8edf0 100%);
    box-shadow:0 18px 50px rgba(45,41,43,.08);
    direction:rtl;
}
.pamela-shop-hero::before{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    left:-110px;
    bottom:-150px;
    border-radius:50%;
    background:rgba(184,76,103,.08);
}
.pamela-shop-hero::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:7px;
    height:100%;
    background:linear-gradient(180deg,#b84c67,#d96a84);
}
.pamela-shop-hero__content{
    position:relative;
    z-index:3;
    display:flex;
    flex-direction:column;
    justify-content:center;
    max-width:700px;
}
.pamela-shop-hero__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    width:max-content;
    margin-bottom:13px;
    padding:7px 12px;
    border:1px solid rgba(184,76,103,.16);
    border-radius:999px;
    background:rgba(255,255,255,.78);
    color:#a13f59;
    font-size:12px;
    font-weight:800;
}
.pamela-shop-hero__eyebrow i{font-size:13px;}
.pamela-shop-hero__title{
    margin:0;
    max-width:650px;
    color:#252124;
    font-size:clamp(30px,3.3vw,48px);
    line-height:1.38;
    font-weight:900;
    letter-spacing:-.4px;
}
.pamela-shop-hero__description{
    max-width:650px;
    margin:13px 0 0;
    color:#6e666a;
    font-size:14px;
    line-height:2;
}
.pamela-shop-hero__actions{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:22px;
}
.pamela-shop-hero__primary,
.pamela-shop-hero__secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    padding:0 17px;
    border-radius:12px;
    text-decoration:none !important;
    font-size:12px;
    font-weight:800;
    transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.pamela-shop-hero__primary{
    background:#b84c67;
    color:#fff !important;
    box-shadow:0 9px 20px rgba(184,76,103,.22);
}
.pamela-shop-hero__primary:hover{
    background:#963c54;
    color:#fff !important;
    transform:translateY(-2px);
}
.pamela-shop-hero__secondary{
    border:1px solid rgba(184,76,103,.18);
    background:#fff;
    color:#963c54 !important;
}
.pamela-shop-hero__secondary:hover{
    background:#fff5f7;
    color:#963c54 !important;
    transform:translateY(-2px);
}
.pamela-shop-hero__trust{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    margin-top:20px;
    color:#7b7276;
    font-size:11px;
    font-weight:700;
}
.pamela-shop-hero__trust span{display:inline-flex;align-items:center;gap:6px;}
.pamela-shop-hero__trust i{color:#b84c67;}
.pamela-shop-hero__visual{
    position:relative;
    min-height:275px;
    direction:ltr;
}
.pamela-shop-hero__orb{
    position:absolute;
    border-radius:50%;
    filter:blur(.2px);
}
.pamela-shop-hero__orb--one{
    width:230px;height:230px;
    top:10px;left:50%;
    transform:translateX(-50%);
    background:rgba(184,76,103,.10);
}
.pamela-shop-hero__orb--two{
    width:110px;height:110px;
    right:7%;bottom:3%;
    background:rgba(184,76,103,.08);
}
.pamela-shop-hero__card--main{
    position:absolute;
    top:50%;left:50%;
    z-index:3;
    display:flex;
    align-items:center;
    gap:14px;
    min-width:245px;
    padding:20px 22px;
    transform:translate(-50%,-50%) rotate(-3deg);
    border:1px solid rgba(255,255,255,.72);
    border-radius:20px;
    background:rgba(255,255,255,.90);
    box-shadow:0 22px 48px rgba(45,41,43,.13);
    backdrop-filter:blur(10px);
}
.pamela-shop-hero__bag{
    display:grid;
    place-items:center;
    width:60px;height:60px;
    border-radius:16px;
    background:linear-gradient(145deg,#b84c67,#963c54);
    color:#fff;
    font-size:27px;
    box-shadow:0 10px 22px rgba(184,76,103,.22);
}
.pamela-shop-hero__card--main strong,
.pamela-shop-hero__card--main span{display:block;line-height:1.15;}
.pamela-shop-hero__card--main strong{color:#282326;font-size:24px;letter-spacing:3px;}
.pamela-shop-hero__card--main span{margin-top:5px;color:#b84c67;font-size:11px;letter-spacing:4px;font-weight:800;}
.pamela-shop-hero__mini-card{
    position:absolute;
    z-index:4;
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    border:1px solid rgba(184,76,103,.12);
    border-radius:12px;
    background:rgba(255,255,255,.93);
    color:#4d464a;
    box-shadow:0 12px 28px rgba(45,41,43,.09);
    font-size:10px;
    font-weight:800;
}
.pamela-shop-hero__mini-card i{color:#b84c67;}
.pamela-shop-hero__mini-card--top{top:13%;right:4%;transform:rotate(3deg);}
.pamela-shop-hero__mini-card--bottom{bottom:9%;left:3%;transform:rotate(-4deg);}

.pamela-shop-quick-links{
    display:flex;
    align-items:center;
    gap:18px;
    margin:0 0 18px;
    padding:12px 14px;
    border:1px solid #eee5e7;
    border-radius:16px;
    background:#fff;
    box-shadow:0 7px 22px rgba(45,41,43,.045);
    direction:rtl;
}
.pamela-shop-quick-links__heading{
    flex:0 0 auto;
    min-width:132px;
    padding-left:13px;
    border-left:1px solid #eee5e7;
}
.pamela-shop-quick-links__heading span{display:block;color:#2d292b;font-size:12px;font-weight:900;}
.pamela-shop-quick-links__heading small{display:block;margin-top:4px;color:#8a8185;font-size:9px;}
.pamela-shop-quick-links__items{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:8px;
    width:100%;
}
.pamela-shop-quick-link{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:42px;
    padding:6px 8px;
    border:1px solid #f0e8ea;
    border-radius:11px;
    background:#fff;
    color:#4d464a !important;
    text-decoration:none !important;
    font-size:10px;
    font-weight:800;
    transition:.18s ease;
}
.pamela-shop-quick-link:hover{
    border-color:rgba(184,76,103,.24);
    background:#fff7f8;
    color:#963c54 !important;
    transform:translateY(-1px);
}
.pamela-shop-quick-link__icon{
    display:grid;
    place-items:center;
    width:27px;height:27px;
    flex:0 0 27px;
    border-radius:8px;
    background:#fff0f3;
    color:#b84c67;
}

@media (max-width:900px){
    .pamela-shop-hero{
        grid-template-columns:1fr;
        min-height:0;
        padding:32px 28px 25px;
    }
    .pamela-shop-hero__content{max-width:none;}
    .pamela-shop-hero__visual{min-height:220px;max-width:520px;width:100%;margin:0 auto;}
    .pamela-shop-quick-links{display:block;padding:12px;}
    .pamela-shop-quick-links__heading{border-left:0;border-bottom:1px solid #eee5e7;padding:0 0 10px;margin-bottom:10px;}
}
@media (max-width:640px){
    .pamela-shop-hero{margin-top:16px;padding:25px 18px 20px;border-radius:20px;}
    .pamela-shop-hero__title{font-size:28px;line-height:1.5;}
    .pamela-shop-hero__description{font-size:12px;line-height:1.95;}
    .pamela-shop-hero__actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
    .pamela-shop-hero__primary,.pamela-shop-hero__secondary{min-height:43px;padding:0 9px;font-size:10px;}
    .pamela-shop-hero__trust{gap:8px 12px;margin-top:15px;font-size:9px;}
    .pamela-shop-hero__visual{min-height:185px;}
    .pamela-shop-hero__orb--one{width:165px;height:165px;}
    .pamela-shop-hero__card--main{min-width:205px;padding:14px 16px;gap:10px;}
    .pamela-shop-hero__bag{width:48px;height:48px;font-size:21px;border-radius:13px;}
    .pamela-shop-hero__card--main strong{font-size:19px;letter-spacing:2px;}
    .pamela-shop-hero__card--main span{font-size:9px;letter-spacing:3px;}
    .pamela-shop-hero__mini-card{padding:8px 9px;font-size:8px;}
    .pamela-shop-hero__mini-card--top{right:0;top:5%;}
    .pamela-shop-hero__mini-card--bottom{left:0;bottom:5%;}
    .pamela-shop-quick-links__items{grid-template-columns:repeat(2,minmax(0,1fr));}
    .pamela-shop-quick-link:last-child{grid-column:1 / -1;}
}
@media (max-width:390px){
    .pamela-shop-hero{padding-left:14px;padding-right:14px;}
    .pamela-shop-hero__title{font-size:25px;}
    .pamela-shop-hero__visual{min-height:165px;}
    .pamela-shop-hero__card--main{min-width:185px;}
    .pamela-shop-hero__mini-card{font-size:7px;}
}
