/* ===============================
   Base
=============================== */
 body {
   font-family: "Cairo", sans-serif;
   background: #f6f7fb;
 }

 /* ===============================
   Filter Box
=============================== */
 .filter-box {
   position: sticky;
   top: 70px;
   z-index: 300;
   background: #fff;
   border-radius: 14px;
   padding: 18px 22px;
   margin: 20px;
   box-shadow: 0 8px 25px rgba(0, 0, 0, .08);
 }

 .filter-row {
   display: grid;
   grid-template-columns: 1.5fr 1fr 1fr;
   gap: 16px;
 }

 .filter-item label {
   font-size: 13px;
   color: #666;
   margin-bottom: 6px;
   display: block;
 }

 .filter-item input,
 .filter-item select {
   width: 100%;
   padding: 10px 12px;
   border-radius: 8px;
   border: 1px solid #ddd;
   font-size: 14px;
   background: #f9fafb;
 }

 /* ===============================
   Products Grid
=============================== */
 .products-wrapper {
   margin: 20px
 }

 .grid {
   display: grid;
   gap: 18px;
   grid-template-columns: repeat(5, 1fr);
 }

 @media (max-width:1200px) {
   .grid {
     grid-template-columns: repeat(3, 1fr)
   }
 }

 @media (max-width:900px) {
   .grid {
     grid-template-columns: repeat(2, 1fr)
   }
 }

 @media (max-width:600px) {
   .grid {
     grid-template-columns: 1fr
   }
 }

 /* ===============================
   Card
=============================== */
 .card {
   background: #fff;
   border-radius: 18px;
   padding: 14px;
   text-align: center;
   display: flex;
   flex-direction: column;
   border: 1px solid #e5e7eb;
   box-shadow: 0 10px 26px rgba(0, 0, 0, .08);
 }

 .card:hover {
   transform: translateY(-4px);
   box-shadow: 0 16px 36px rgba(0, 0, 0, .12);
 }

 /* ===============================
   Image
=============================== */
 .card img {
   width: 100%;
   height: 170px;
   object-fit: contain;
   border-radius: 14px;
   margin-bottom: 14px;
   background: #fff;
 }

 /* ===============================
   Texts
=============================== */
 .card .name {
   font-size: 15px;
   font-weight: 800;
 }

 .card .sku {
   font-size: 12px;
   font-weight: 600;
   color: #64748b;
 }

 /* ===============================
   Original Price (Visible)
=============================== */
 .card .price {
   margin-top: 6px;
   font-size: 13px;
   font-weight: 700;
   color: #475569;
 }

 /* ===============================
   Quantity
=============================== */
 .card .qty {
   align-self: center;
   margin: 8px 0;
   padding: 5px 14px;
   border-radius: 999px;
   font-size: 12px;
   font-weight: 900;
   background: #eefdf4;
   color: #166534;
 }

 .img-box {
   height: 160px;
   background: #f8fafc;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 14px;
   overflow: hidden;
 }

 .img-box img {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
 }

 /* ===============================
   Final Price (Hero)
=============================== */
 .price-chip {
   margin: 10px auto 8px;
   padding: 12px 22px;
   border-radius: 999px;
   background: linear-gradient(135deg, #ecfdf5, #d1fae5);
   color: #064e3b;
   font-size: 18px;
   font-weight: 900;
   box-shadow: 0 12px 28px rgba(34, 197, 94, .35);
 }

 .price-chip .total {
   font-size: 19px;
 }

 /* ===============================
   Selects (RAM / SSD)
=============================== */
 .card select {
   height: 42px;
   margin-top: 6px;
   padding: 0 38px 0 14px;
   border-radius: 12px;
   border: 1px solid #d1d5db;
   font-size: 13px;
   font-weight: 700;
   background: #fff;
   cursor: pointer;
   appearance: none;
   background-image:
     linear-gradient(45deg, transparent 50%, #22c55e 50%),
     linear-gradient(135deg, #22c55e 50%, transparent 50%);
   background-position:
     calc(100% - 22px) 18px,
     calc(100% - 16px) 18px;
   background-size: 6px 6px;
   background-repeat: no-repeat;
 }

 .card select:hover {
   border-color: #22c55e;
   background: #f9fafb;
 }

 .card select:focus {
   border-color: #22c55e;
   box-shadow: 0 0 0 2px rgba(34, 197, 94, .15);
 }

 /* ===============================
   Buy Button
=============================== */
 .buy {
   margin-top: 10px;
   padding: 10px;
   border-radius: 14px;
   background: linear-gradient(135deg, #22c55e, #16a34a);
   color: #fff;
   font-size: 13px;
   font-weight: 800;
   text-decoration: none;
   box-shadow: 0 6px 16px rgba(34, 197, 94, .4);
 }

 /* ===============================
   POS MODE
=============================== */
 .pos-mode .buy {
   font-size: 14px;
   padding: 11px;
 }

 /* =====================================================
   BIG IMAGE FOR PRODUCTS WITHOUT OPTIONS
===================================================== */

 /* كارت مفيهوش أي مواصفات */
 .card:not(:has(select)) {
   padding-top: 18px;
 }

 /* كبّر الصورة */
 .card:not(:has(select)) img {
   height: 230px;
   /* كانت 170 */
   object-fit: contain;
   margin-bottom: 18px;
 }

 /* الاسم أقرب للصورة */
 .card:not(:has(select)) .name {
   margin-top: 4px;
 }

 /* السعر يبقى قريب من الصورة */
 .card:not(:has(select)) .price {
   margin-top: 8px;
   font-size: 14px;
 }

 /* زر البيع يقرب */
 .card:not(:has(select)) .buy {
   margin-top: 8px;
 }

 /* تحسين إحساس الكارت */
 .card:not(:has(select)) {
   box-shadow: 0 14px 34px rgba(0, 0, 0, .12);
 }

 /* =====================================================
   SHOW PRICE FOR NON-LAP PRODUCTS (RAM / SSD)
===================================================== */

 /* المنتجات اللي مفيهاش مواصفات */
 .card:not(:has(select)) .price {
   margin: 12px auto 8px;
   padding: 12px 22px;
   border-radius: 999px;
   background: linear-gradient(135deg, #ecfdf5, #d1fae5);
   color: #064e3b;
   font-size: 18px;
   font-weight: 900;
   display: inline-block;
   box-shadow: 0 12px 28px rgba(34, 197, 94, .35);
 }

 /* نخلي السعر هو العنصر البصري الأساسي */
 .card:not(:has(select)) .price {
   order: 3;
 }

 /* زر البيع ييجي بعد السعر */
 .card:not(:has(select)) .buy {
   order: 4;
   margin-top: 8px;
 }

 /* =====================================================
   ADD "جنيه" FOR NON-LAP PRODUCTS (RAM / SSD)
===================================================== */

 /* المنتجات اللي مفيهاش مواصفات */
 .card:not(:has(select)) .price::after {
   content: " جنيه";
   font-size: 13px;
   font-weight: 700;
   margin-right: 4px;
   color: #065f46;
 }

 /* ===============================
   Modern Buy Button
=============================== */
 .buy.modern,
 .buy {
   margin-top: 12px;
   padding: 12px 14px;
   border-radius: 14px;
   border: none;
   background:
     linear-gradient(135deg, #22c55e, #16a34a);
   color: #fff;
   font-size: 14px;
   font-weight: 900;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   box-shadow: 0 10px 22px rgba(34, 197, 94, .45);
   transition: .25s ease;
 }

 .buy:hover {
   transform: translateY(-2px) scale(1.02);
   box-shadow: 0 18px 40px rgba(34, 197, 94, .6);
 }

 .buy:active {
   transform: scale(.96);
 }