/* product-grid-styles.css */

/* FORCE REMOVE ALL GAPS */
.fusion-post-cards-1 .fusion-grid.fusion-grid-4 {
    gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
}

/* Add padding and spacing on the item level */
.gopa-product-item {
    margin: 0 !important;
    padding: 30px 15px !important;
    position: relative;
}

/* Wrapper contains just the content - no padding, no border */
.gopa-product-item .fusion-column-wrapper {
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* START: PUSH ITEMS TO BOTTOM */
/* Make cards equal height and align buttons to bottom */
.fusion-grid-posts-cards {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important; /* Make all cards same height */
}

.gopa-product-item {
    display: flex !important;
}

.gopa-product-item .fusion-column-wrapper {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

/* Make the product-specs area flexible to push buttons down */
.gopa-product-item .product-specs {
    flex: 1 0 auto !important;
    margin-bottom: 16px !important;
}

/* Keep buttons at the bottom - target the div containing View Details */
.gopa-product-item .fusion-column-wrapper > div:nth-last-child(2) {
    margin-top: auto !important;
}

/*END*/

/* Create centered vertical line using pseudo-element */
/* Desktop only: vertical lines for 4-column layout */
@media (min-width: 1025px) {
    .gopa-product-item:not(:nth-child(4n)):not(:last-child)::after {
        content: "";
        position: absolute;
        right: 0;
        top: 30px;
        bottom: 30px;
        width: 1px;
        background-color: #ebefed;
        transform: translateX(0.5px);
    }
}

/* Separator line */
.gopa-row-separator {
    width: 100% !important;
    height: 1px;
    background-color: #ebefed;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border: none !important;
    flex-basis: 100% !important;
}

/* Responsive: 2 columns */
@media (max-width: 1024px) {
    /* HIDE the HTML separator divs on tablet */
    .gopa-row-separator {
        display: none !important;
    }

    /* Vertical lines between columns (items 1, 3, 5, etc.) */
    .gopa-product-item:nth-of-type(odd):not(:last-of-type)::after {
        content: "";
        position: absolute;
        right: 0;
        top: 25px;
        bottom: 25px;
        width: 1px;
        background-color: #ebefed;
        transform: translateX(0.5px);
    }

    /* Horizontal lines after complete rows (every 2nd item) */
    .gopa-product-item:nth-of-type(2n):not(:last-of-type)::before {
        content: "";
        position: absolute;
        left: -100%;
        right: 0;
        bottom: 0;
        height: 1px;
        background-color: #ebefed;
    }

    .gopa-product-item {
        padding: 25px 12px !important;
    }
}

/* Responsive: 1 column */
@media (max-width: 640px) {
    .gopa-product-item::after {
        display: none !important;
    }

    /* Hide horizontal lines on mobile */
    .gopa-product-item::before {
        display: none !important;
    }

    .gopa-product-item {
        padding: 20px 10px !important;
    }

    /* Make product image full width on mobile */
    .gopa-product-item .fusion-image-element,
    .gopa-product-item .gopa-product-image,
    .gopa-product-item .fusion-imageframe,
    .gopa-product-item img {
        width: 100% !important;
        max-width: 100% !important;
    }
}