/* ==== GRID / LIST VIEW TOGGLE STYLES ==== */

/* Grid Mode: two per row */
.products.grid-view .game-product {
    flex: 0 0 50%;
    max-width: 50%;
}

/* List Mode: full width */
.products.list-view .game-product {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid #444; /* optional divider */
    padding: 5px 10px;
}

/* Hide everything except the title in list view */
.products.list-view .game-product img,
.products.list-view .game-product .product-desc,
.products.list-view .game-product footer,
.products.list-view .game-product .product-pricing,
.products.list-view .game-product ul,
.products.list-view .game-product .qty {
    display: none !important;
}

/* Keep only title visible */
.products.list-view .game-product header {
    display: block !important;
    padding: 0;
    margin: 0;
}

.products.list-view .game-product header span {
    display: inline-block !important;
    font-size: 1.2em;
    font-weight: bold;
    padding: 8px 0;
}

/* Override Bootstrap col-md-6 in list view */
.products.list-view .game-product[class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* Hide list view cards until explicitly toggled */
.list-card {
    display: none !important;
}

/* Show grid cards normally */
.grid-card {
    display: block !important;
}

/* Hide grid cards in list mode */
.products.list-view .grid-card {
    display: none !important;
}

/* Hide list cards in grid mode */
.products.grid-view .list-card {
    display: none !important;
}

/* Clickable list titles */
.list-title-link {
    display: block;
    width: 100%;
    padding: 8px 0;
    font-size: 1.2em;
    font-weight: bold;
}

/* === MOBILE FIXES === */
@media (max-width: 768px) {
    /* Grid mode: single column */
    .products.grid-view .game-product {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* List mode: still one column, clean display */
    .products.list-view .list-card {
        display: block !important;
        width: 100%;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Hide extra elements in mobile list view */
    .products.list-view .list-card img,
    .products.list-view .list-card .product-desc,
    .products.list-view .list-card footer,
    .products.list-view .list-card .product-pricing,
    .products.list-view .list-card ul,
    .products.list-view .list-card .qty {
        display: none !important;
    }

    /* Mobile list titles */
    .products.list-view .list-card header span,
    .list-title-link {
        font-size: 1.1rem !important;
        font-weight: bold;
        padding: 8px 0;
    }
}
/* Safe hide class that can override !important layout */
.grid-card.hidden,
.list-card.hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: hidden !important;
}