:root {
            --primary: #d6879e; 
            --primary-dark: #b56c81;
            --bg-light: #fdfaf9; 
            --bg-white: #ffffff;
            --text-main: #1a1516; 
            --text-muted: #857a7d;
            --transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Vazirmatn', sans-serif; scroll-behavior: smooth; }
        body { background-color: var(--bg-light); color: var(--text-main); overflow-x: hidden; line-height: 1.6; }
        a { text-decoration: none; color: inherit; }
        ul { list-style: none; }

        html, body {
        overflow-x: hidden;
        max-width: 100%;
        }

        h1, h2, h3 { font-weight: 800; letter-spacing: -0.5px; }
        .subtitle { font-weight: 300; font-size: 1.1rem; color: var(--text-muted); }
        .section-header { text-align: center; margin-bottom: 80px; }
        .section-header h2 { font-size: 3rem; margin-bottom: 10px; }

        /* Navbar */
        header { position: fixed; top: 0; width: 100%; z-index: 1000; background: rgba(253, 250, 249, 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(214, 135, 158, 0.15); transition: var(--transition); }
        nav { display: flex; justify-content: space-between; align-items: center; padding: 5px 5%; max-width: 1400px; margin: 0 auto; }
        .logo { font-size: 2rem; font-weight: 900; color: var(--text-main); letter-spacing: -1.5px; position: relative; transition: var(--transition); }
        .logo img { width: 160px; height: 67px;}
        /* .logo::after { content: ''; position: absolute; bottom: 8px; right: -8px; width: 8px; height: 8px; background: var(--primary); border-radius: 50%; transition: var(--transition); } */
        .nav-links { display: flex; gap: 30px; margin-right: auto; align-items: center; }
        .nav-links a { font-weight: 400; font-size: 1.05rem; position: relative; padding-bottom: 5px; }
        .nav-links a:not(.user-btn):not(.cart-btn)::after { content: ''; position: absolute; bottom: 0; right: 0; width: 0; height: 2px; background: var(--primary); transition: var(--transition); }
        .nav-links a:not(.user-btn):not(.cart-btn):hover::after { width: 100%; }
        
        .cart-btn { color: var(--primary); font-weight: bold !important; display: flex; align-items: center; gap: 5px; }
        .cart-count-badge { background: var(--primary-dark); color: white; padding: 2px 8px; border-radius: 20px; font-size: 0.8rem; }
        
        .user-btn { display: flex; align-items: center; gap: 8px; color: var(--text-main); transition: var(--transition); }
        .user-btn:hover { color: var(--primary); }
        .user-btn svg { width: 22px; height: 22px; }

        /* Buttons */
        .btn { display: inline-block; padding: 10px 25px; border-radius: 30px; font-size: 1rem; font-weight: 500; cursor: pointer; transition: var(--transition); border: 1px solid transparent; background: transparent; position: relative; overflow: hidden; z-index: 1; }
        .btn-outline { border-color: var(--text-main); color: var(--text-main); }
        .btn-outline:hover { background: var(--text-main); color: var(--bg-white); transform: translateY(-3px); }
        .btn-primary { background: var(--primary); color: var(--bg-white); box-shadow: 0 10px 20px rgba(214, 135, 158, 0.3); }
        .btn-primary:hover { background: var(--primary-dark); transform: translateY(-3px); box-shadow: 0 15px 30px rgba(214, 135, 158, 0.5); }
        .btn-cart-add { margin-top: 15px; width: 100%; font-size: 0.95rem; padding: 8px 15px; }

        /* Hero */
        .hero { 
            min-height: 100vh; 
            display: flex; 
            align-items: center; 
            max-width: 2000px; 
            margin: 20px 0px 0px 0px; 
            padding: 120px 5% 50px; 
            position: relative;
            background-image: url('/static/images/TEPM-23-OPA.png');
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 1600px;
            background-color: rgba(253, 250, 249, 0.95);
            background-blend-mode: multiply;
        }
        .hero-bg-text { position: absolute; top: 20%; right: -5%; font-size: 15vw; font-weight: 900; color: rgba(214, 135, 158, 0.04); z-index: -1; white-space: nowrap; }
        .hero-content { flex: 1; padding-left: 50px; }
        .hero-title { font-size: 4.5rem; line-height: 1.1; margin-bottom: 30px; }
        .hero-title span { color: var(--primary); font-style: italic; font-weight: 300; }
        .hero-desc { font-size: 1.2rem; color: var(--text-muted); margin-bottom: 40px; max-width: 80%; font-weight: 300; }

        /* تنظیم ظرف عکس بدون استفاده از vh */
        .hero-img-wrapper { 
            flex: 1; 
            position: relative; 
            width: 100%;
            aspect-ratio: 4 / 5; /* یک نسبت ابعاد عالی برای عکس‌های پرتره/محصول */
            max-height: 600px; /* حداکثر ارتفاع در دسکتاپ */
        }

        /* اعمال استایل‌های عکس اصلی به اسلایدها */
        .hero-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; 
            border-radius: 20px; /* بازگرداندن گوشه‌های گرد */
            box-shadow: -20px 20px 60px rgba(0,0,0,0.08); /* بازگرداندن سایه */
            opacity: 0;
            transition: opacity 1.5s ease-in-out;
        }

        .hero-slide.active {
            opacity: 1;
            z-index: 1;
        }

        .img-accent { position: absolute; bottom: -30px; right: -30px; width: 200px; height: 200px; background: var(--primary); border-radius: 50%; z-index: -1; filter: blur(50px); opacity: 0.5; }

        /* حالت ریسپانسیو موبایل */
        @media (max-width: 992px) {
            .hero {
                flex-direction: column; /* مطمئن شویم در موبایل زیر هم قرار می‌گیرند */
                padding-top: 100px;
            }
            
            .hero-content {
                padding-left: 0;
                margin-bottom: 40px;
            }

            .hero-img-wrapper {
                aspect-ratio: 1 / 1; /* در موبایل عکس را به صورت مربع و بزرگ (تمام عرض) نمایش می‌دهد */
                max-height: none; /* برداشتن محدودیت ارتفاع در موبایل */
                width: 100%;
            }
        }



        /* Categories */
        .categories { padding: 80px 5%; max-width: 1400px; margin: 0 auto; }
        .category-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
        .category-card { position: relative; border-radius: 15px; overflow: hidden; height: 500px; cursor: pointer; }
        .category-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; }
        .category-card:hover img { transform: scale(1.08); }
        .category-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); display: flex; flex-direction: column; justify-content: flex-end; padding: 40px; color: var(--bg-white); }
        .category-overlay h3 { font-size: 2.5rem; margin-bottom: 10px; transition: var(--transition); }
        .category-overlay a { font-size: 1.1rem; border-bottom: 1px solid rgba(255,255,255,0.5); padding-bottom: 5px; display: inline-block; width: max-content; transition: var(--transition); }
        .category-card:hover .category-overlay h3 { transform: translateY(-10px); color: var(--primary); }
        .category-card:hover .category-overlay a { border-color: var(--primary); color: var(--primary); letter-spacing: 1px; }

        /* Products */
        .products { padding: 120px 5%; max-width: 1400px; margin: 0 auto; }
        .product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }
        .product-card { background: transparent; transition: var(--transition); display: flex; flex-direction: column;}
        
        .product-img-box { position: relative; overflow: hidden; border-radius: 15px; margin-bottom: 20px; aspect-ratio: 3/4; cursor: pointer;}
        .product-img-box img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
        
        .product-img-box::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.3); opacity: 0; transition: var(--transition); }
        .product-hover-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -40%); color: var(--bg-white); font-size: 1.2rem; font-weight: 300; letter-spacing: 2px; opacity: 0; z-index: 2; transition: var(--transition); border: 1px solid var(--bg-white); padding: 10px 20px; backdrop-filter: blur(5px); pointer-events: none;}
        
        .product-card:hover .product-img-box img { transform: scale(1.1); }
        .product-card:hover .product-img-box::after { opacity: 1; }
        .product-card:hover .product-hover-text { opacity: 1; transform: translate(-50%, -50%); }
        .product-card:hover .product-name { color: var(--primary); }

        .product-info { text-align: center; transition: var(--transition); display: flex; flex-direction: column; justify-content: space-between; flex-grow: 1;}
        .product-name { font-size: 1.2rem; font-weight: 700; margin-bottom: 5px; transition: var(--transition); }
        .product-price { font-size: 1.1rem; color: var(--primary); font-weight: 500; }
        
        .view-all-container { text-align: center; margin-top: 60px; }
        .hidden-product { display: none; opacity: 0; transform: translateY(30px); }
        .show-product { display: flex; animation: fadeUpIn 0.6s forwards ease-out; }
        @keyframes fadeUpIn { to { opacity: 1; transform: translateY(0); } }

                .si-section {
            padding: 100px 5%;
            max-width: 1400px;
            margin: 0 auto;
        }
        .si-inner {
            display: grid;
            grid-template-columns: 1.1fr 0.9fr;
            gap: 60px;
            align-items: center;
        }

        /* محتوا */
        .si-content { text-align: right; }
        .si-tag {
            display: inline-block;
            background: rgba(214, 135, 158, 0.12);
            color: var(--primary-dark);
            font-size: 0.9rem;
            font-weight: 700;
            padding: 7px 18px;
            border-radius: 30px;
            margin-bottom: 22px;
        }
        .si-content h2 {
            font-size: 2.8rem;
            line-height: 1.3;
            color: var(--text-main);
            margin-bottom: 20px;
            letter-spacing: -0.5px;
        }
        .si-content p {
            font-size: 1.1rem;
            line-height: 2;
            color: var(--text-muted);
            font-weight: 300;
            margin-bottom: 35px;
            max-width: 90%;
        }

        /* فیچرها */
        .si-features {
            display: flex;
            gap: 40px;
            margin-bottom: 40px;
            flex-wrap: wrap;
        }
        .si-feature { display: flex; flex-direction: column; gap: 4px; }
        .si-feature-num {
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--primary);
            letter-spacing: -0.5px;
        }
        .si-feature-label { font-size: 0.95rem; color: var(--text-muted); font-weight: 300; }

        /* دکمه — هماهنگ با btn-primary پروژه */
        .si-btn {
            display: inline-block;
            padding: 12px 35px;
            border-radius: 30px;
            font-size: 1rem;
            font-weight: 500;
            background: var(--primary);
            color: var(--bg-white);
            box-shadow: 0 10px 20px rgba(214, 135, 158, 0.3);
            transition: var(--transition);
        }
        .si-btn:hover {
            background: var(--primary-dark);
            transform: translateY(-3px);
            box-shadow: 0 15px 30px rgba(214, 135, 158, 0.5);
        }

        /* تصویر */
        .si-visual { position: relative; aspect-ratio: 4 / 3; }
        .si-visual img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 20px;
            box-shadow: -20px 20px 60px rgba(0,0,0,0.08);
            display: block;
        }
        .si-badge {
            position: absolute;
            bottom: 25px;
            left: 25px;
            background: var(--bg-white);
            padding: 14px 20px;
            border-radius: 15px;
            box-shadow: 0 15px 30px rgba(0,0,0,0.12);
            text-align: right;
        }
        .si-badge span { display: block; font-weight: 700; font-size: 1rem; color: var(--text-main); }
        .si-badge small { font-size: 0.85rem; color: var(--primary); }

        /* ریسپانسیو — هماهنگ با بریک‌پوینت 992 پروژه */
        @media (max-width: 992px) {
            .si-inner { grid-template-columns: 1fr; gap: 40px; text-align: center; }
            .si-content { text-align: center; }
            .si-content p { max-width: 100%; margin-left: auto; margin-right: auto; }
            .si-features { justify-content: center; }
            .si-visual { order: -1; }
            .si-content h2 { font-size: 2.2rem; }
        }

        /* Full Shop Catalog Styles (NEW) */
        .shop-catalog { padding: 100px 5%; max-width: 1400px; margin: 0 auto; background: var(--bg-white); border-radius: 30px; box-shadow: 0 10px 40px rgba(0,0,0,0.03); margin-top: 40px; margin-bottom: 40px; }
        .filter-tabs { display: flex; justify-content: center; gap: 15px; margin-bottom: 50px; flex-wrap: wrap; }
        .filter-btn { padding: 10px 25px; border-radius: 30px; font-size: 1rem; font-weight: 500; cursor: pointer; transition: var(--transition); border: 1px solid var(--text-muted); background: transparent; color: var(--text-muted); outline: none; }
        .filter-btn:hover, .filter-btn.active { background: var(--text-main); color: var(--bg-white); border-color: var(--text-main); }
        .catalog-item { transition: var(--transition); }
        .catalog-item.hide { display: none; }
        /* Sub Filter Tabs & Colors */
        .sub-filter-tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 40px; flex-wrap: wrap; transition: var(--transition); }
        .sub-filter-tabs.hide-all { display: none; }
        .sub-filter-btn { padding: 6px 18px; border-radius: 20px; font-size: 0.9rem; cursor: pointer; transition: var(--transition); border: 1px dashed var(--text-muted); background: transparent; color: var(--text-muted); display: none; }
        .sub-filter-btn.show { display: block; }
        .sub-filter-btn:hover, .sub-filter-btn.active { background: #f0f0f0; color: var(--text-main); border-color: var(--text-main); font-weight: bold; }

        .product-colors { display: flex; gap: 5px; margin: 8px 0; }
        .color-dot { width: 16px; height: 16px; border-radius: 50%; display: inline-block; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s; }
        .color-dot:hover { transform: scale(1.2); }

        /* Hide functionality for products */
        .catalog-item.hide { display: none; }
        .product-modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:99999; opacity:0; visibility:hidden; transition:all .3s ease; backdrop-filter:blur(4px); }
        .product-modal-overlay.active { opacity:1; visibility:visible; }
        .product-modal { background:#fff; width:90%; max-width:800px; border-radius:12px; padding:25px; position:relative; box-shadow:0 10px 30px rgba(0,0,0,.2); transform:translateY(-30px); transition:all .3s ease; direction:rtl; }
        .product-modal-overlay.active .product-modal { transform:translateY(0); }
        .close-modal { position:absolute; top:15px; right:20px; font-size:32px; color:#666; cursor:pointer; line-height:1; transition:color .2s ease; }
        .close-modal:hover { color:#ff4757; }
        .modal-content-wrapper { display:flex; gap:30px; margin-top:10px; }
        .modal-img { width:45%; height:400px; object-fit:cover; border-radius:8px; box-shadow:0 4px 10px rgba(0,0,0,.1); }
        .modal-info { width:55%; display:flex; flex-direction:column; justify-content:center; }
        .modal-title { font-size:1.6rem; color:#2f3542; margin-bottom:15px; font-weight:700; }
        .modal-price { font-size:1.3rem; color:#ff4757; margin-bottom:25px; font-weight:bold; }
        .modal-colors { margin-bottom:30px; }
        .color-container { display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; }
        .color-dot { width:35px; height:35px; border-radius:50%; cursor:pointer; border:2px solid #dfe4ea; box-shadow:0 2px 5px rgba(0,0,0,.1); transition:all .2s ease; }
        .color-dot:hover { transform:scale(1.1); }
        .color-dot.selected { border:3px solid #2ed573; transform:scale(1.15); box-shadow:0 4px 8px rgba(46,213,115,.4); }
        .btn-modal-cart { background-color:#2f3542; color:#fff; border:none; padding:15px 25px; font-size:1.1rem; border-radius:8px; cursor:pointer; font-weight:bold; transition:background .3s ease; width:100%; text-align:center; }
        .btn-modal-cart:hover { background-color:#57606f; }
        @media (max-width:768px) { .modal-content-wrapper { flex-direction:column; } .modal-img { width:100%; height:250px; } .modal-info { width:100%; } }


        /* Branches, About, Values, Footer... */
        .branches { padding: 100px 5%; background: var(--bg-white); }
        .branches-inner { max-width: 1400px; margin: 0 auto; }
        .branch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
        .branch-card { background: var(--bg-light); border-radius: 15px; overflow: hidden; box-shadow: 0 15px 30px rgba(0,0,0,0.05); transition: var(--transition); cursor: pointer; }
        .branch-card:hover { transform: translateY(-10px); box-shadow: 0 25px 50px rgba(214, 135, 158, 0.15); }
        .branch-img { width: 100%; height: 350px; object-fit: cover; transition: transform 0.8s ease; }
        .branch-card:hover .branch-img { transform: scale(1.05); }
        .branch-info { padding: 40px; text-align: right; }
        .branch-info h3 { font-size: 1.8rem; margin-bottom: 20px; color: var(--primary-dark); transition: var(--transition); }
        .branch-card:hover .branch-info h3 { color: var(--primary); }
        .branch-info p { margin-bottom: 12px; color: var(--text-muted); font-size: 1.05rem; line-height: 1.8; }
        .branch-info strong { color: var(--text-main); margin-left: 5px; }

        .about { padding: 120px 5%; background: var(--bg-white); }
        .about-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 80px; }
        .about-images { flex: 1; position: relative; cursor: pointer; }
        .img-main { width: 80%; border-radius: 10px; z-index: 2; position: relative; box-shadow: 0 30px 60px rgba(0,0,0,0.1); transition: var(--transition); }
        .img-sec { position: absolute; bottom: -50px; left: 0; width: 50%; border-radius: 10px; z-index: 3; border: 10px solid var(--bg-white); box-shadow: 0 20px 40px rgba(0,0,0,0.1); transition: var(--transition); }
        .about-images:hover .img-main { transform: scale(1.03); filter: brightness(0.9); }
        .about-images:hover .img-sec { transform: scale(1.1) translate(-15px, -15px); box-shadow: 0 30px 60px rgba(214, 135, 158, 0.3); border-color: var(--bg-light); }
        .about-text { flex: 1; }
        .about-text h2 { font-size: 3rem; margin-bottom: 20px; color: var(--text-main); }
        .about-text p { font-size: 1.1rem; color: var(--text-muted); font-weight: 300; margin-bottom: 20px; line-height: 2; }

        .brand-values { padding: 100px 5%; background: var(--bg-light); }
        .values-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; text-align: center; }
        .value-item { transition: var(--transition); padding: 30px; border-radius: 15px; cursor: default; }
        .value-item:hover { transform: translateY(-10px); background: var(--bg-white); box-shadow: 0 20px 40px rgba(0,0,0,0.04); }
        .value-item h4 { font-size: 1.5rem; margin-bottom: 15px; color: var(--text-main); transition: var(--transition); }
        .value-item:hover h4 { color: var(--primary); }
        .value-item p { color: var(--text-muted); font-weight: 300; }
        .value-icon { font-size: 3rem; color: var(--primary); margin-bottom: 20px; transition: var(--transition); display: inline-block; }
        .value-item:hover .value-icon { transform: scale(1.2) rotate(10deg); text-shadow: 0 10px 20px rgba(214, 135, 158, 0.4); }

        footer { background: var(--text-main); color: var(--bg-white); padding: 80px 5% 40px; }
        .footer-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 50px; margin-bottom: 60px; }
        .footer-grid img { width: 220px; height: 150px;}
        .footer-brand h2 { font-size: 2.5rem; color: var(--primary); margin-bottom: 10px; }
        .footer-brand p { color: #a0999a; font-weight: 300; max-width: 300px; line-height: 1.8; }
        .footer-links h4, .footer-contact h4 { font-size: 1.2rem; margin-bottom: 25px; font-weight: 500; color: var(--bg-white); }
        .footer-links ul li, .footer-contact ul li { margin-bottom: 15px; color: #a0999a; font-weight: 300; }
        .footer-links ul li a { color: #a0999a; transition: var(--transition); font-weight: 300; }
        .footer-links ul li a:hover { color: var(--primary); padding-right: 10px; }
        .footer-bottom { max-width: 1200px; margin: 0 auto; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; color: #a0999a; font-size: 0.9rem; font-weight: 300; }
        .footer-bottom span { color: var(--primary); font-weight: 500; }

        .logo:hover { cursor: pointer; text-shadow: 0 4px 15px rgba(214, 135, 158, 0.4); }
        .logo:hover::after { transform: scale(1.8); background: var(--primary-dark); }
        .menu-toggle { display: none; flex-direction: column; gap: 6px; cursor: pointer; z-index: 1001; }
        .menu-toggle span { width: 28px; height: 2px; background-color: var(--text-main); transition: var(--transition); }

        /* Modals & Cart Sidebar (New Styles) */
        .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 2000; opacity: 0; visibility: hidden; transition: var(--transition); backdrop-filter: blur(5px); display: flex; justify-content: center; align-items: center;}
        .modal-overlay.active { opacity: 1; visibility: visible; }
        
        .modal-box { background: var(--bg-white); padding: 40px; border-radius: 20px; width: 90%; max-width: 400px; transform: translateY(30px); transition: var(--transition); box-shadow: 0 20px 50px rgba(0,0,0,0.2); position: relative;}
        .modal-overlay.active .modal-box { transform: translateY(0); }
        .modal-close { position: absolute; top: 15px; right: 15px; cursor: pointer; font-size: 1.5rem; color: var(--text-muted); transition: var(--transition); }
        .modal-close:hover { color: var(--primary); }
        .modal-title { font-size: 1.8rem; margin-bottom: 20px; text-align: center; color: var(--text-main); }
        
        .form-group { margin-bottom: 20px; }
        .form-group label { display: block; margin-bottom: 8px; font-weight: 300; font-size: 0.95rem; }
        .form-group input { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 10px; outline: none; font-family: inherit; transition: var(--transition); }
        .form-group input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(214, 135, 158, 0.1); }
        .form-btn { width: 100%; }
        
        .auth-switch { text-align: center; margin-top: 20px; font-size: 0.9rem; color: var(--text-muted); }
        .auth-switch a { color: var(--primary); font-weight: bold; cursor: pointer; text-decoration: none; transition: var(--transition); }
        .auth-switch a:hover { color: var(--primary-dark); text-decoration: underline; }

        /* Cart Sidebar */
        .cart-sidebar { position: fixed; top: 0; left: -100%; width: 100%; max-width: 400px; height: 100vh; background: var(--bg-white); z-index: 2001; box-shadow: 10px 0 30px rgba(0,0,0,0.1); transition: var(--transition); display: flex; flex-direction: column; }
        .cart-sidebar.active { left: 0; }

        .cart-header {
            padding: 22px 24px;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
        }
        .cart-header h3 { color: #fff; font-size: 1.15rem; margin: 0; display: flex; align-items: center; gap: 8px; }
        .cart-close {
            cursor: pointer;
            font-size: 1.4rem;
            color: #fff;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: rgba(255,255,255,0.18);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
            line-height: 1;
        }
        .cart-close:hover { background: rgba(255,255,255,0.32); transform: rotate(90deg); }

        .cart-items {
            flex: 1;
            overflow-y: auto;
            padding: 18px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            background: var(--bg-light);
        }
        .cart-items::-webkit-scrollbar { width: 6px; }
        .cart-items::-webkit-scrollbar-thumb { background: rgba(214,135,158,0.35); border-radius: 10px; }
        .cart-items::-webkit-scrollbar-track { background: transparent; }

        .cart-item {
            display: flex;
            gap: 14px;
            align-items: flex-start;
            background: var(--bg-white);
            border-radius: 16px;
            padding: 14px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.05);
            border: 1px solid rgba(214,135,158,0.08);
            transition: var(--transition);
        }
        .cart-item:hover { box-shadow: 0 8px 22px rgba(214,135,158,0.15); transform: translateY(-1px); }

        .cart-item-thumb {
            width: 64px;
            height: 64px;
            border-radius: 12px;
            object-fit: cover;
            flex-shrink: 0;
            border: 1px solid rgba(214,135,158,0.12);
        }
        .cart-item-thumb-placeholder {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
            background: var(--bg-light);
        }

        .cart-item-info { flex: 1; min-width: 0; }
        .cart-item-title { font-size: 0.95rem; font-weight: 700; margin-bottom: 6px; color: var(--text-main); line-height: 1.4; }
        .cart-item-price { color: var(--primary-dark); font-size: 0.88rem; font-weight: 700; }

        .cart-item-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }

        .cart-item-qty-stepper {
            display: flex;
            align-items: center;
            gap: 0;
            background: var(--bg-white);
            border: 1.5px solid #e0d8db;
            border-radius: 8px;
            overflow: hidden;
        }
        .cart-item-qty-stepper button {
            background: var(--bg-white);
            border: none;
            width: 30px;
            height: 30px;
            font-size: 1.05rem;
            line-height: 1;
            font-weight: 400;
            color: var(--text-main);
            cursor: pointer;
            font-family: inherit;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .cart-item-qty-stepper button:hover {
            background: var(--bg-light);
            color: var(--primary-dark);
        }
        .cart-item-qty-stepper button:active { background: rgba(214,135,158,0.15); }
        .cart-item-qty-stepper button:disabled {
            opacity: 0.35;
            cursor: not-allowed;
            background: var(--bg-white);
        }
        .cart-item-qty-stepper span {
            min-width: 32px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--text-main);
            background: var(--bg-light);
            border-left: 1.5px solid #e0d8db;
            border-right: 1.5px solid #e0d8db;
        }

        .cart-item-remove {
            color: #dc3545;
            font-size: 0.8rem;
            font-weight: 600;
            cursor: pointer;
            border: none;
            background: rgba(220, 53, 69, 0.08);
            padding: 6px 14px;
            border-radius: 20px;
            transition: var(--transition);
        }
        .cart-item-remove:hover { background: #dc3545; color: #fff; }

        .cart-footer {
            padding: 20px 22px;
            border-top: 1px solid rgba(214,135,158,0.12);
            background: var(--bg-white);
            flex-shrink: 0;
            box-shadow: 0 -6px 20px rgba(0,0,0,0.04);
        }
        .cart-total {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 1.05rem;
            font-weight: 700;
            margin-bottom: 16px;
            padding: 12px 16px;
            background: var(--bg-light);
            border-radius: 12px;
        }
        .cart-total span:last-child { color: var(--primary-dark); font-size: 1.2rem; }

        .empty-cart-msg {
            text-align: center;
            color: var(--text-muted);
            margin-top: 60px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }
        .empty-cart-icon { font-size: 3.2rem; opacity: 0.5; }
        .empty-cart-msg p { font-size: 0.95rem; }

        @media (max-width: 768px) {
            .footer-grid { grid-template-columns: 1fr; text-align: center; gap: 40px; }
            .footer-brand p { margin: 0 auto; }
            .footer-bottom { flex-direction: column; gap: 15px; text-align: center; }
            .footer-links ul li a:hover { padding-right: 0; }
        }

        @media(max-width: 992px) {
            .hero, .about-inner { flex-direction: column; text-align: center; }
            .hero-content { padding-left: 0; margin-bottom: 50px; }
            .hero-desc { max-width: 100%; margin: 0 auto 40px; }
            
            .menu-toggle { display: flex; }
            .nav-links { position: fixed; top: 0; right: -100%; width: 70%; max-width: 350px; height: 100dvh; background: rgba(253, 250, 249, 0.98); backdrop-filter: blur(15px); flex-direction: column; justify-content: center; align-items: center; gap: 20px; transition: 0.5s ease; box-shadow: -10px 0 30px rgba(0,0,0,0.1); }
            .nav-links.active { right: 0; }
            .nav-links a { font-size: 1.3rem; }
            .menu-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
            .menu-toggle.active span:nth-child(2) { opacity: 0; }
            .menu-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

            .hero-title { font-size: 3rem; }
            .img-sec { left: 10%; width: 60%; }
            .category-grid, .branch-grid { grid-template-columns: 1fr; }
            .values-grid { grid-template-columns: 1fr; gap: 40px; }
            
            .desktop-only-text { display: none; }
        }