/* أنماط مضمنة من صفحات المرجع + إضافات */

			body {
				background-color: #FFFFFF;
			}
			/* القائمة الجانبية بنفس لون الموقع */
			.drawer-panel {
				background: #FFFFFF !important;
			}

			.drawer-categories li a {
				background: #FFFFFF !important;
			}

				.drawer-categories li a:hover {
					background: #E3EAF1 !important;
				}

			.categories-section,
			.products-section,
			.load-more {
				background: transparent !important;
			}
			/* Ensure banners and promo blocks are pure white to blend images without BG */
			.promo-section,
			.banner-section,
			.home-slider-section {
				background: #FFFFFF !important;
			}
			/* تستخدم عناوين الأقسام ألوان المتغيرات العامة مباشرة */
			/* توحيد لون البطاقات والصناديق مع لون الموقع (بطاقات التصنيفات أصبحت دائرية بدون خلفية) */
			.promo-card {
				background: transparent !important;
				border: 0 !important;
				box-shadow: none !important;
				padding: 0 !important;
				border-radius: 0 !important;
			}

			.category-card {
				background: transparent !important;
			}
			/* توحيد لون خلفية صور البانرات والترويج مع لون الموقع */
			.banner-section img,
			.promo-card img {
				display: block;
				width: 100%;
				height: auto;
				background: transparent !important;
				border: 0 !important;
				box-shadow: none !important;
				border-radius: 0 !important;
			}

			/* ===== Home Flip Card Slider (2 images, front/back) ===== */
			.home-slider-section {
				max-width: 1400px;
				margin: 30px auto 0;
				padding: 0 20px;
			}

				.home-slider-section + .categories-section {
					padding-top: 0 !important;
				}

			.flip-card {
				position: relative;
				width: 100%;
				perspective: 1400px;
				user-select: none;
				-webkit-user-select: none;
				touch-action: pan-y;
			}

			.flip-card-inner {
				position: relative;
				width: 100%;
				transform-style: preserve-3d;
				transition: transform 0.85s cubic-bezier(.55,.05,.25,1);
				will-change: transform;
			}

			.flip-card.flipped .flip-card-inner {
				transform: rotateY(180deg);
			}

			.flip-card-face {
				backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				display: block;
				width: 100%;
				border-radius: 14px;
				overflow: hidden;
				line-height: 0;
				background: #FFFFFF; /* match page background */
				text-decoration: none;
			}

			.flip-card-front {
				position: relative;
			}

			.flip-card-back {
				position: absolute;
				top: 0;
				left: 0;
				transform: rotateY(180deg);
			}

			.flip-card-face img {
				width: 100%;
				height: auto;
				max-height: 220px;
				object-fit: contain;
				display: block;
				background: transparent; /* allow PNGs without BG to blend */
				border-radius: 14px;
				pointer-events: none;
			}

			.flip-card-dots {
				display: flex;
				justify-content: center;
				gap: 7px;
				margin-top: 10px;
			}

				.flip-card-dots button {
					width: 8px;
					height: 8px;
					border-radius: 50%;
					border: 0;
					background: #CFD8E3;
					cursor: pointer;
					padding: 0;
					transition: background .2s, transform .2s;
				}

					.flip-card-dots button.active {
						background: #2F4356;
						transform: scale(1.3);
					}

			@media (max-width: 768px) {
				.home-slider-section {
					padding: 0 12px;
					margin: 24px auto 0;
				}

				.flip-card-face img {
					max-height: 150px;
				}
			}
	


			.mobile-bottom-nav {
				display: none;
			}

			@media (max-width: 991px), (hover: none) and (pointer: coarse) {
				body {
					padding-bottom: 82px;
				}

				.mobile-bottom-nav {
					position: fixed;
					right: 0;
					left: 0;
					bottom: 0;
					display: flex !important;
					align-items: center;
					justify-content: space-around;
					background: #fff;
					border-top: 1px solid #e7ebf0;
					box-shadow: 0 -4px 14px rgba(0, 0, 0, .08);
					padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
					z-index: 9999;
					opacity: 0;
					transform: translateY(120%);
					pointer-events: none;
					transition: transform .25s ease, opacity .2s ease;
				}

				.mobile-bottom-nav.is-visible {
					opacity: 1;
					transform: translateY(0);
					pointer-events: auto;
				}

				.mobile-bottom-nav__item {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					gap: 2px;
					text-decoration: none;
					color: #6c7a89;
					font-size: 11px;
					font-weight: 700;
					position: relative;
				}

				.mobile-bottom-nav__item i {
					font-size: 18px;
				}

				.mobile-bottom-nav__item.is-active {
					color: var(--primary-color);
				}

				.mobile-bottom-nav__badge {
					position: absolute;
					top: -2px;
					right: calc(50% - 18px);
					min-width: 16px;
					height: 16px;
					padding: 0 4px;
					border-radius: 999px;
					background: var(--secondary-color);
					color: #fff;
					font-size: 9px;
					font-weight: 800;
					display: inline-flex;
					align-items: center;
					justify-content: center;
				}
			}

			.site-footer-modern {
				position: relative;
				background: #F6F8FA;
				padding: 44px 0 16px;
				border-top-left-radius: 28px;
				border-top-right-radius: 28px;
				box-shadow: 0 -4px 16px rgba(0,0,0,.04) inset;
				border: 2px solid var(--primary-color);
				border-bottom: 0;
				font-size: 12px;
			}

				.site-footer-modern .sf-container {
					max-width: 980px;
					margin: 0 auto;
					padding: 0 28px;
				}

			@media(min-width: 992px) {
				.site-footer-modern .sf-container {
					padding: 0 22px;
				}
			}

			.sf-top {
				position: absolute;
				left: 50%;
				top: 0;
				transform: translate(-50%, -50%);
			}

			.sf-backtop {
				display: inline-flex;
				align-items: center;
				gap: 8px;
				border: 2px solid var(--primary-color);
				color: #2c3e50;
				background: #fff;
				padding: 4px 12px;
				border-radius: 999px;
				font-weight: 800;
				text-decoration: none;
				box-shadow: 0 4px 14px rgba(61,85,107,.18);
				font-size: 12.5px;
			}

				.sf-backtop i {
					color: var(--primary-color);
				}

			.sf-intro {
				margin: 6px auto 4px;
				color: #2c3e50;
				font-weight: 700;
				line-height: 1.45;
				text-align: center;
				font-size: 12px;
				max-width: 620px;
			}

			.sf-sep {
				border: none;
				border-top: 2.5px dashed #a7cbbb;
				width: 70%;
				max-width: 520px;
				margin: 16px auto;
			}

			.sf-columns {
				display: grid;
				grid-template-columns: 1fr;
				gap: 12px;
			}

			@media(min-width:768px) {
				.sf-columns {
					grid-template-columns: 1.2fr .8fr;
				}
			}

			.sf-title {
				color: var(--primary-color);
				font-weight: 800;
				margin-bottom: 6px;
				font-size: 16px;
			}

			.sf-links {
				list-style: none;
				padding: 0;
				margin: 0;
			}

				.sf-links li {
					margin: 5px 0;
				}

				.sf-links a {
					color: #2c3e50;
					text-decoration: none;
					font-weight: 600;
					font-size: 12px;
				}

					.sf-links a:hover {
						color: #2F4356;
					}

			.sf-contact {
				display: flex;
				gap: 6px;
				align-items: center;
			}

			.sf-btn {
				width: 32px;
				height: 32px;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				border-radius: 10px;
				background: var(--primary-color);
				color: #fff;
				text-decoration: none;
				box-shadow: 0 6px 16px rgba(61,85,107,.35);
				font-size: 14px;
			}

			.sf-payment {
				text-align: center;
			}

			.sf-payment-img {
				width: auto;
				max-width: 60%;
				height: auto;
				border-radius: 14px;
				box-shadow: none;
				background: transparent;
				display: block;
				margin: 0 auto;
			}

			.sf-docs {
				margin-top: 10px;
			}

			.sf-docs-grid {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 8px;
				flex-wrap: wrap;
				direction: ltr;
				max-width: 280px;
				margin: 0 auto;
			}

			.sf-doc-card {
				width: 52px;
				height: 52px;
				border-radius: 9px;
				background: #fff;
				box-shadow: 0 4px 10px rgba(0,0,0,.05);
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				overflow: hidden;
			}

				.sf-doc-card[href] {
					transition: transform .18s ease, box-shadow .18s ease;
				}

					.sf-doc-card[href]:hover {
						transform: translateY(-2px);
						box-shadow: 0 14px 28px rgba(0,0,0,.12);
					}

			.sf-doc-sprite {
				width: 49px;
				height: 49px;
				background-image: url('/theme/images/dd.png');
				background-repeat: no-repeat;
				background-size: 400% auto;
				background-position-y: center;
			}

				.sf-doc-sprite.vat {
					background-position: 0% 50%;
				}

				.sf-doc-sprite.maroof {
					background-position: 33.333% 50%;
				}

				.sf-doc-sprite.ecommerce {
					background-position: 66.666% 50%;
				}

				.sf-doc-sprite.moc {
					background-position: 100% 50%;
				}

			.sf-copy {
				text-align: center;
				color: #4a4f54;
				font-weight: 800;
				margin-top: 6px;
				font-size: 9.5px;
				line-height: 1.35;
			}
	

/* ===== Category page ===== */
/* Category page grid: 2 per row, use existing product-card */
    .category-page .products-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 16px;
        overflow: visible;
        padding: 0 12px;
    }

    .category-page .product-card {
        min-width: 0;
        width: 100%;
    }
    @media (max-width: 560px)

    {
        .category-page .products-grid {
            grid-template-columns: repeat(2, minmax(0,1fr));
            gap: 10px;
            padding: 0 8px;
        }
    }
    /* Toolbar and pagination */
    .category-page .products-section-header h2 {
        font-size: 22px;
        font-weight: 600;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .category-toolbar {
        max-width: 1100px;
        margin: 0 auto 8px;
        padding: 0 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .toolbar-form {
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .toolbar-form label {
            color: #2D3436;
            font-weight: 700;
            font-size: 14px;
        }

        .toolbar-form select {
            background: #F8FAFB;
            border: 1px solid #E7EBF0;
            border-radius: 10px;
            height: 34px;
            padding: 0 10px;
            font-weight: 600;
            color: #2D3436;
        }

    .result-count {
        color: #7f8c8d;
        font-size: 13px;
    }

    .pagination-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin: 12px 0 0;
    }

        .pagination-nav .page-btn, .pagination-nav .page-num {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 34px;
            height: 32px;
            padding: 0 10px;
            background: #fff;
            border: 1px solid #E7EBF0;
            color: #2D3436;
            border-radius: 10px;
            text-decoration: none;
            font-size: 13px;
        }

            .pagination-nav .page-num.active {
                border-color: var(--primary-color);
                box-shadow: 0 0 0 2px rgba(46,125,50,0.08) inset;
                font-weight: 700;
            }

        .pagination-nav .disabled {
            pointer-events: none;
            opacity: 0.5;
        }


/* ===== Info pages ===== */
.info-page {
        max-width: 980px;
        margin: 20px auto 32px;
        padding: 0 14px;
    }

    .info-hero {
        background: linear-gradient(135deg,#8BC53F 0%,#5BBF80 100%);
        color: #fff;
        border-radius: 18px;
        padding: 16px 16px;
        box-shadow: 0 12px 28px rgba(126,182,147,.20);
        margin-bottom: 14px;
    }

        .info-hero h1 {
            font-size: 22px;
            margin: 0 0 6px;
            font-weight: 900;
        }

        .info-hero p {
            font-size: 13px;
            color: rgba(255,255,255,.92);
            max-width: 640px;
            line-height: 1.6;
        }

    .info-section {
        background: #fff;
        border: 1px solid #E8EEF2;
        border-radius: 16px;
        padding: 14px 14px;
        box-shadow: 0 8px 22px rgba(0,0,0,.04);
    }

        .info-section h2 {
            font-size: 18px;
            color: #1E8449;
            margin: 0 0 10px;
            font-weight: 800;
        }

    .info-content p, .info-content li {
        color: #2D3436;
        font-size: 13.5px;
        line-height: 1.9;
    }

    .info-content ul {
        padding-right: 18px;
        margin: 0 0 10px;
    }

    .info-content li {
        margin-bottom: 8px;
    }
    @media (max-width: 768px) {
        .info-hero h1 {
            font-size: 20px;
        }

        .info-section {
            padding: 12px;
        }
    }

/* ===== إضافات متجر الضمان ===== */
.whatsapp-btn.is-raised { bottom: 96px; }
.cart2-row { display:flex; align-items:center; gap:10px; }
.pagination-nav { flex-wrap: wrap; margin-bottom: 10px; }
.old-price { text-decoration: line-through; color:#95a5a6; font-size:12px; margin-inline-start:6px; }
.info-page .continue-btn { display:inline-block; }
.header-icons .header-icon.active-fav i { color:#e74c3c; }
.search-results .grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
@media (min-width: 768px) { .search-results .grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }