/* INVENTORY GRID STYLES - REBUILT NORMALLY - NO VOIDS */

.stock-grid {
    display: grid;
    /* Forced exactly three columns on desktop as instructed */
    grid-template-columns: repeat(3, 1fr); 
    gap: 15px;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
    /* Ensure the grid fills the landing-wrap parent */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.stock-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #222;
    padding: 35px;
    text-decoration: none;
    transition: 0.2s ease-in-out;
    /* ORIGINAL HEIGHT & CENTERING LOGIC */
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.stock-card:hover {
    border-color: var(--brand);
    background: rgba(201, 162, 77, 0.02);
    transform: translateY(-5px);
}

.stock-card h3 {
    color: var(--brand);
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.stock-card p {
    color: #888;
    font-size: 0.85rem;
    line-height: 1.4;
    font-weight: 400;
}

.stock-card::after {
    content: '→';
    position: absolute;
    right: 30px;
    bottom: 30px;
    color: var(--brand);
    font-weight: 900;
    opacity: 0;
    transition: 0.3s;
}

.stock-card:hover::after {
    opacity: 1;
    right: 20px;
}

/* --- MODAL STYLES EXTRACTED FROM HEADER --- */

div[id^="modal-"] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Primitive transparency as requested */
    background: rgba(17, 17, 17, 0.15); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9999;
    overflow-y: auto;
}

div[id^="modal-"]:target {
    display: block !important;
}

/* Modal Helper Classes to replace inline styles */
.zg-modal-wrapper { display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100%; }
.zg-modal-table { width: 92%; margin: auto; border-collapse: collapse; border: 0; }
.zg-modal-header-l { width: 30%; vertical-align: top; }
.zg-modal-header-r { width: 70%; text-align: right; }
.zg-modal-close { text-decoration: none; font-size: 1.5rem; color: #C9A24D; }
.zg-modal-close-white { text-decoration: none; font-size: 2.5rem; color: #ffffff; }
.zg-modal-title { font-size: clamp(1.5rem, 5vw, 3rem); margin: 0; color: #ffffff; }
.zg-modal-subtitle { font-size: clamp(1.2rem, 4vw, 2.5rem); margin: 0; color: #C9A24D; }
.zg-modal-subtitle-gap { margin: 0 0 30px 0; }
.zg-modal-flex { display: flex; align-items: flex-start; width: 100%; }
.zg-modal-flex-gap { gap: 60px; }
.zg-modal-col-30 { width: 30%; }
.zg-modal-col-70 { width: 70%; }
.zg-modal-img { width: 100%; height: auto; display: block; }
.zg-modal-p { font-size: 1rem; line-height: 1.6; color: #ffffff; margin: 0 0 30px 0; }
.zg-modal-p-alt { font-size: 1rem; line-height: 1.4; color: #ffffff; padding-left: 10px; margin: 0; }
.zg-modal-footer { text-align: right; padding-top: 30px; gap: 30px;}
.zg-modal-btn { padding: 10px; }

@media (max-width: 768px) {
    div[id^="modal-"] td {
        display: block !important;
        width: 90% !important;
        margin: 0 auto !important;
        text-align: left !important;
        padding: 10px 0 !important;
    }
    .zg-modal-flex {
        display: block !important;
        width: 100% !important;
    }
    .zg-modal-col-30, .zg-modal-col-70 {
        width: 100% !important;
        padding: 0 !important;
        margin-bottom: 10px;
    }
    }

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