@charset "UTF-8";

/* -------------------------------- Reset & Base -------------------------------- */
* {
    -webkit-tap-highlight-color: transparent;
}

*:focus,
*:active {
    outline: none !important;
    box-shadow: none !important;
}

a,
button {
    outline: none;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
}

/* -------------------------------- :ROOT (Global Variables) -------------------------------- */
:root {
    /* --- 1. CORE COLOR PALETTE (The Source of Truth) --- */

    /* Brand Colors (Purple Theme) */
    --accent-color: #8b5cf6;       /* Primary Brand Color */
    --purple-dark: #6d28d9;        /* Darker Purple for contrasts */
    --purple-medium: #a78bfa;      /* Medium Purple */
    --purple-light: #ede9fe;       /* Very Light Purple (Backgrounds) */

    /* Functional Colors */
    --red-brand: #ef4444;          /* Unified Red (Error/Sale/Hot) */
    --green-success: #23d160;      /* Unified Green (Success/Price) */
    --green-light: #86efac;        /* Light Green for accents */

    /* Backgrounds & Base */
    --bg-w-color: #F7F7F7;
    --bg-color: #f5f3ff;           /* Main Body Background */
    --white: #ffffff;              /* Pure White */

    /* Text Colors */
    --text-primary: #1e293b;       /* Main Dark Text (Unified) */
    --text-secondary: #64748b;     /* Secondary Gray Text (Unified) */
    --text-secondary2: #7c3aed;    /* Colored Text (Purple) */
    --text-muted: #94a3b8;         /* Muted/Disabled Text */

    /* Glass & Transparencies */
    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(255, 255, 255, 0.9);
    --purple-glass: rgba(139, 92, 246, 0.15);
    --purple-border: rgba(139, 92, 246, 0.25);
    --red-glass: rgba(239, 68, 68, 0.20);
    --red-border: rgba(239, 68, 68, 0.3);

    /* --- 2. SIZING & LAYOUT --- */
    --nav-height: 70px;
    --bottom-nav-height: 75px;
    --radius-lg: 25px;
    --radius-md: 16px;

    /* --- 3. TYPOGRAPHY --- */
    --fs-xs: clamp(10px, 2.8vw, 12px);
    --fs-sm: clamp(12px, 3.2vw, 13px);
    --fs-md: clamp(13px, 3.5vw, 15px);
    --fs-lg: clamp(15px, 4vw, 18px);
    --fs-xl: clamp(18px, 5vw, 24px);

    /* --- 4. TRANSITIONS --- */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* --- 5. COMPONENT MAPPINGS (Unified) --- */

    /* > Main-index-page-Slider */
    --Main-Slider-white: var(--white);
    --Main-Slider-text-dark: var(--text-primary);     /* Mapped to Core */
    --Main-Slider-gray-light: var(--text-secondary);  /* Mapped to Core */

    --Main-Slider-glass-white-05: rgba(255,255,255,0.05);
    --Main-Slider-glass-white-10: rgba(255,255,255,0.1);
    --Main-Slider-glass-white-15: rgba(255,255,255,0.15);
    --Main-Slider-glass-white-20: rgba(255,255,255,0.2);
    --Main-Slider-glass-white-30: rgba(255,255,255,0.3);

    --Main-Slider-shadow-strong: rgba(0,0,0,0.5);
    --Main-Slider-shadow-purple: var(--purple-dark);  /* Mapped to Core */

    /* > Near-main-slider-Slider */

    --bg-pink: #ffeef4;
    --bg-pink2: #F47192;
    --accent-pink: #ef3968;
    --card-radius: clamp(20px, 6cqw, 36px);
    --text-dark: var(--text-primary);                 /* Mapped to Core */

/* ------------------------------- Special-offer START ---------------------------- */

/* > Special Offer Section (Mapped to Core System) */

--Special-offer-items-mobile: 2;
--Special-offer-items-tablet: 3;
--Special-offer-items-desktop: 6;

/* Backgrounds */
--Special-offer-bg-body: var(--bg-color);          /* Main Body Background */
--Special-offer-bg-card: var(--white);             /* Pure White Cards */

/* Text */
--Special-offer-text-dark: var(--text-primary);    /* Unified Main Text */
--Special-offer-text-red: var(--red-brand);        /* Brand Red (Sale/Hot) */

/* Dividers */
--Special-offer-divider: var(--purple-light);      /* Soft Purple Divider */

/* Steps / Progress Background */
--Special-offer-step-1: var(--purple-light);       /* Light Purple */
--Special-offer-step-2: var(--purple-medium);      /* Medium Purple */

/* Theme Accent */
--Special-offer-theme-purple: var(--accent-color); /* Primary Brand Purple */


/* ------------------------------ Main Product - Start ----------------------------- */
/* Main Product (harmonized with your design tokens) */
--main-product-site-bg-purple: var(--purple-light);
--main-product-card-bg: var(--white);
--main-product-text-primary: var(--text-primary);
--main-product-text-secondary: var(--text-muted);

/* رنگ‌های برند و المان‌ها */
--main-product-brand-purple: var(--purple-dark);
--main-product-brand-red: var(--red-brand);
--main-product-price-green: var(--green-success);

/* میزان گردی گوشه‌ها */
--main-product-radius-lg: var(--radius-lg);
--main-product-radius-md: var(--radius-md);

/* سایه‌ها (بازاستفاده از شیشه/پالت بنفش و شادوهای نرم سیستمی) */
--main-product-shadow-beautiful: 0 10px 25px -5px var(--purple-glass), 0 4px 10px -5px rgba(0, 0, 0, 0.04);
--main-product-shadow-hover: 0 20px 35px -5px var(--purple-border), 0 8px 15px -5px rgba(0, 0, 0, 0.05);

/* ------------------------------ Main Product - END ----------------------------- */
/* ------------------------------ bestseller - Start ----------------------------- */

/* Bestseller (harmonized with your design tokens) */
--bestseller-color-primary: var(--accent-color);
--bestseller-color-text-dark: var(--text-primary);
--bestseller-color-text-muted: var(--text-muted);
--bestseller-color-border: var(--Special-offer-divider);
--bestseller-color-bg-body: var(--bg-color);
--bestseller-color-bg-card: var(--white);
--bestseller-color-btn-bg: var(--glass-bg);

/* تنظیمات ابعاد و فاصله‌ها (الهام‌گرفته از متغیرهای سیستم) */
--bestseller-card-height: calc(var(--nav-height) * 1.6);        /* ≈110px when --nav-height:70px */
--bestseller-gap-size: calc(var(--radius-md) + 4px);           /* 16px + 4px = 20px */
--bestseller-border-radius: calc(var(--radius-md) + 4px);      /* 20px */
--bestseller-btn-size: calc(var(--bottom-nav-height) - 20px);  /* 75px - 20px = 55px */

/* سایه‌ها (بازاستفاده از شِدوهای سیستمی در صورت امکان) */
--bestseller-shadow-card: 0 8px 24px var(--Main-Slider-shadow-strong);
--bestseller-shadow-btn: 0 4px 20px rgba(0, 0, 0, 0.15);
--bestseller-shadow-btn-hover: 0 6px 25px rgba(0, 0, 0, 0.2);

/* ------------------------------ General Harmonized Variables ----------------------------- */
    --bg-body: var(--bg-color);
    --bg-card: var(--white);
    --text-main: var(--text-primary);
    --text-sub: var(--text-secondary);
    --accent-blue: var(--accent-color);      /* تبدیل رنگ متفرقه به بنفش برند */
    --accent-yellow: var(--bg-pink2);                /* رنگ زرد رو برای ستاره‌ها و امتیازها نگه داشتم، اگه خواستی میتونی اینم بنفش کنی */
    --border-white: var(--white);
    --shadow-subtle: 0 10px 30px rgba(139, 92, 246, 0.05); /* هماهنگ شده با هاله ملایم بنفش */
    --shadow-card: 0 15px 40px rgba(139, 92, 246, 0.08);   /* هماهنگ شده با هاله ملایم بنفش */
}

/* -------------------------------- Category Section -------------------------------- */
.panizl-category-container {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;

    /* Component Specific Dimensions */
    --panizl-gap: 8px;
    --panizl-card-radius: 23px;
    --panizl-pill-radius: 14px;
    --panizl-curve-size: 13px;
    --panizl-visible-count: 3.3;
}

/* -------------------------------- Offer Wrapper Section --- START-------------------------------- */
.Panizl-offer-wrapper {

    /* --- Variable Mapping (Unified with Root) --- */

    /* Colors (Referencing Root Variables) */
    --Panizl-offer-bg-main: var(--purple-light);      /* Mapped to #ede9fe */
    --Panizl-offer-bg-card: var(--white);
    --Panizl-offer-white: var(--white);

    --Panizl-offer-text-title: var(--text-primary);   /* Mapped to #1e293b */
    --Panizl-offer-text-gray: var(--text-secondary);  /* Mapped to #64748b */
    --Panizl-offer-text-muted: var(--text-muted);     /* Mapped to #94a3b8 */

    --Panizl-offer-accent-red: var(--red-brand);      /* Mapped to #ef4444 */
    --Panizl-offer-accent-green: var(--green-success);/* Mapped to #23d160 */
    --Panizl-offer-accent-green-light: var(--green-light);

    /* Shadows & Glass */
    --Panizl-offer-shadow-card: rgba(0, 0, 0, 0.08);
    --Panizl-offer-shadow-red: var(--red-border);

    --Panizl-offer-glass-border: rgba(255, 255, 255, 0.6);
    --Panizl-offer-glass-bg-15: rgba(255, 255, 255, 0.15);
    --Panizl-offer-glass-bg-20: rgba(255, 255, 255, 0.2);
    --Panizl-offer-glass-bg-35: rgba(255, 255, 255, 0.35);

    /* Layout Dimensions (Specific to this component) */
    --Panizl-offer-gap: 8px;
    --Panizl-offer-card-sm-height: 240px;
    --Panizl-offer-card-md-height: 265px;
    --Panizl-offer-radius: 17px;
    --Panizl-offer-count: 2.3;

    /* --- Base Styles --- */
    border-radius: 40px;
    padding: 10px 0;
    max-width: 1350px;
    direction: rtl;
}
/* --- Responsive Layout Settings --- */
@media (min-width: 480px) {
    .Panizl-offer-wrapper {
        --Panizl-offer-count: 3.2;
    }
}

@media (min-width: 768px) {
    .Panizl-offer-wrapper {
        --Panizl-offer-count: 5.3;
    }
}

@media (min-width: 1024px) {
    .Panizl-offer-wrapper {
        --Panizl-offer-count: 6.5;
        --Panizl-offer-gap: 12px;
    }
}
/* -------------------------------- Offer Wrapper Section --- END-------------------------------- */