/* Products Page Styles - Refactored based on Moreno Reference */

/* -------------------------------------------
   Base Grid System (Manual Grid from Reference)
------------------------------------------- */
.products-page__container {
    max-width: 1200px !important;
    /* Narrower content area */
}

.products-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -20px;
    /* Increased gutter compensation */
    margin-bottom: 50px;
}

.product-card-wrapper {
    width: 25%;
    /* Default: 4 Columns */
    padding: 0 10px;
    /* Increased Gutter (Gap) */
    margin-bottom: 60px;
    /* Increased vertical spacing */
    box-sizing: border-box;
}

/* 3 Column Modifier (for specific categories like Makam) */
.products-grid--3-col .product-card-wrapper {
    width: 33.333%;
}

/* Responsive Grid */
@media (max-width: 1200px) {
    .product-card-wrapper {
        width: 33.333%;
    }

    .products-grid--3-col .product-card-wrapper {
        width: 50%;
    }
}

@media (max-width: 992px) {
    .product-card-wrapper {
        width: 50%;
    }
}

@media (max-width: 576px) {
    .product-card-wrapper {
        width: 100%;
    }

    .products-grid--3-col .product-card-wrapper {
        width: 100%;
    }
}


/* -------------------------------------------
   Product Card (Listing Item)
------------------------------------------- */
.product-item-card {
    position: relative;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.product-item-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
    flex-grow: 1;
}

/* Image Wrapper */
.product-item-card__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    overflow: hidden;
    margin-bottom: 10px;
    /* Increased space between image and title */
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

/* The Image Itself */
.product-item-card__image img {
    max-width: 100%;
    /* Slightly reduced to feel smaller/more whitespace */
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.6s ease;
    will-change: transform;
}

/* Hover Effects */
.product-item-card:hover .product-item-card__image img {
    transform: scale(1.05);
    /* Subtle zoom */
}


/* -------------------------------------------
   Category Card (Sub-Categories)
------------------------------------------- */
.category-card .product-item-card__image {
    aspect-ratio: 4 / 5;
    background-color: #f7f7f7;
}

/* Main Category Grid (products/index) */
.main-categories-grid .category-card .product-item-card__image {
    aspect-ratio: 2 / 2;
    /* Wider landscape for top-level categories */
}

.main-categories-grid .category-card .product-item-card__image img {
    object-fit: coveradm;
    /* Add some padding for contained logos */
}


/* Sub-Category/Product Grid (categories/show) - COVER for rich imagery */
/* Default behavior for non-main grids */
.category-card .product-item-card__image {
    aspect-ratio: 4 / 5;
    /* Taller portrait for sub-categories */
}

.category-card .product-item-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: 100%;
    /* Reset override */
    max-height: 100%;
    padding: 0;
}

/* -------------------------------------------
   Specific Category Overrides (Makam, Sofas, etc.)
------------------------------------------- */

/* Wide Items (like Sofas/Makam) - use 3 cols and wider aspect ratio */
/* Renamed class to match blade logic if needed or ensure logic uses this */
.products-grid--3-col .product-item-card__image {
    aspect-ratio: 3 / 2;
}

.products-grid--3-col .product-item-card__image img {
    object-fit: cover;
}


/* -------------------------------------------
   Typography & Info
------------------------------------------- */
.product-item-card__title {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    /* Updated to 22px */
    font-weight: 500;
    /* Updated to 500 (Medium) */
    color: #333;
    /* Softer black */
    text-transform: lowercase;
    /* Enforce lowercase globally */
    letter-spacing: 0.3px;
    margin-top: 10px;
    /* Slightly increased spacing */
}


/* -------------------------------------------
   Header / Breadcrumb Styles (Retained)
------------------------------------------- */
.products-header {
    background-image: url('/assets/images/header-bg.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 63px 0;
    text-align: center;
    margin-bottom: 60px;
}

.products-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.products-header__title {
    font-family: 'Poppins', sans-serif;
    font-size: 42px;
    font-weight: 500;
    color: #fff;
    margin: 0;
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.products-header .container {
    position: relative;
    z-index: 2;
}

/* Breadcrumbs */
.products-breadcrumbs {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    position: relative;
    z-index: 2;
}

.products-breadcrumbs a {
    color: #fff;
    text-decoration: none;
    transition: opacity 0.2s;
}

.products-breadcrumbs a:hover {
    opacity: 0.8;
}

.products-breadcrumbs .sep {
    margin: 0 10px;
    color: rgba(255, 255, 255, 0.6);
}