/* الحاوية الرئيسية */
.books-container { padding: 40px 20px; }
.books-header { text-align: center; margin-bottom: 60px; }
.books-header h1 { font-family: 'Amiri', serif; font-size: 3rem; color: #111; }

/* إعدادات الشبكة: 3 أعمدة للحاسوب */
.books-display-area { flex: 1; }
.books-grid-3-cols { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); /* 3 أعمدة متساوية */
    gap: 40px; /* مسافة واسعة للفخامة */
}

/* بطاقة الكتاب الاحترافية */
.book-item-premium { 
    background: transparent; 
    transition: 0.5s ease;
}

.book-media {
    position: relative;
    aspect-ratio: 2 / 3; /* نسبة غلاف الكتاب القياسية */
    overflow: hidden;
    box-shadow: 15px 15px 30px rgba(0,0,0,0.08);
    background: #fff;
}

.book-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.6s transform;
}

.book-item-premium:hover .book-media img { transform: scale(1.1); }

/* محتوى الكتاب */
.book-content { padding: 20px 0; text-align: center; }
.author-name { color: #c5a059; font-size: 0.85rem; display: block; margin-bottom: 5px; font-weight: 600; }
.book-title { font-family: 'Amiri', serif; font-size: 1.3rem; margin-bottom: 10px; color: #111; height: 3.2em; overflow: hidden; }
.book-price { font-weight: bold; font-size: 1.2rem; color: #222; margin-bottom: 15px; }

/* زر الإضافة للسلة */
.add-to-cart-gold {
    display: block;
    border: 1px solid #111;
    color: #111;
    padding: 12px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: bold;
    transition: 0.3s;
}
.add-to-cart-gold:hover { background: #111; color: #c5a059; }

/* --- التجاوب الذكي (Responsive) --- */

/* للشاشات المتوسطة (تابلت) - تحول لعمودين */
@media (max-width: 1024px) {
    .books-grid-3-cols { grid-template-columns: repeat(2, 1fr); gap: 25px; }
}

/* للجوال - عمودين مع تصغير الخط */
@media (max-width: 768px) {
    .shop-main-layout { flex-direction: column; }
    .books-grid-3-cols { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .book-title { font-size: 1rem; }
}

/* للجوال الصغير جداً - عمود واحد */
@media (max-width: 480px) {
    .books-grid-3-cols { grid-template-columns: 1fr; }
}