.gallery-grid {
            display: grid;
            grid-template-columns: repeat(3, 300px);
            gap: 30px;
            justify-content: center;
            margin: 0;
        }

        .gallery-item .track-visit {
            /* display: flex; completely messes up the borders of the image after it was added to a wrapper*/

/* SEE IF THIS FIXES THE VERTICAL ALIGNMENT OF HORIZONTAL ITEMS */
            align-items: center; 
            justify-content: center;            
            background-color: #000000;
            border: 3px solid #000000; /* #ffd700;  /* yellow this is the grid border */
            /* overflow: hidden; /* this caused the bottom border to be cut off */
            position: relative;    /* CRITICAL: Pins the badge inside this box boundary */
            height: 375px;         /* Move the fixed height to the link/container */ 
            width: 100%;           /* Ensures it takes up the full grid column width */
            
        }

        .gallery-item:hover {
            transform: scale(1.02);
            box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
            border-color: #000000;
        }
        .gallery-item a {
            display: block;
            text-align: center;    /* this centers vertical image */            
            text-decoration: none;
        }

        /* ===== IMAGE WRAPPER (Shrinks to image size) ===== */
        .image-wrapper {
            position: relative;      /* Anchors the badge */
            display: inline-block;   /* Shrinks to image width */
            max-width: 100%;
        }
        
        /* this is the horizontal image values */
        .image-wrapper img {
            display: block;
           /* width: auto;            Let the image keep its natural aspect ratio */
            width 100%
            height: 375px;
            max-width: 100%;
            object-fit: contain;
            background-color: #000000;
            border: 3px solid #000000; /*#00ff00; /* lime green horizontal border */
        }
        
        /* Visited: red border (MUST come after the default rule) */   
        /* works for both vertical and horizontal */     
        .gallery-item .track-visit.visited .image-wrapper img {
            border: 3px solid #cc3300;
        }        

        /* Badge positioned relative to the wrapper */
        .image-wrapper .sold-badge,
        .image-wrapper .nfs-badge {
           /* display: none;
            position: absolute;
            bottom: 8px;
            right: 8px;
            background-color: #cc3300;
            color: #ffffff;
            font-family: 'Lato', sans-serif;
            font-size: 11px;
            font-weight: bold;
            padding: 3px 10px;
            border-radius: 3px;
            letter-spacing: 1px;
            text-transform: uppercase;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
            z-index: 2;
            pointer-events: none; */
            
            position: absolute;
            bottom: 10px; 
            right: 10px;
            font-family: 'Lato', sans-serif;
            font-size: 11px;
            font-weight: bold;
            padding: 3px 10px;
            border-radius: 3px;
            letter-spacing: 1px;
            text-transform: uppercase;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
            z-index: 10;
        }

        /* visibility is on the item level due to legacy code */
        /*
         * NOTE: Badge visibility is tied to the .gallery-item container
         * (because that's where the 'sold'/'nfs' classes live).
         * Badge positioning is tied to .image-wrapper (the positioning anchor).
         *
         * FUTURE REFACTOR: If you ever move the 'sold'/'nfs' classes to
         * .image-wrapper in the HTML, you can eliminate all .gallery-item
         * references below and simplify these rules.
         */
        .gallery-item .sold-badge,
        .gallery-item .nfs-badge {
            display: none;  /* Hidden by default */
        }
        /* this is the vertical imagess--most sculpture */
        .gallery-item img.vertical {
            height: 365px; /* just a little smaller than the HTML specification of 375px */
            object-fit: cover;
/*            width: auto;      /* Collapses the invisible wide box down to the picture's true width */
/*            /* justify-content: center; */
/*            align-self: center;         */
/*            justify-self: center; */
            display: block;
            border: 3px solid #000000; /*#87ceeb; /* skyblue vertical border */
            background-color: #000000;
        }
        
        .gallery-item.sold .sold-badge {
            display: block;  /* Show SOLD badge */
        }
        
        .gallery-item.nfs .nfs-badge {
            display: block;  /* Show NFS badge */
        }
        
        .image-wrapper .sold-badge {
            background-color: #cc3300;
            color: #ffffff;
        }
        
        .image-wrapper .nfs-badge {
            background-color: #666666;
            color: #ffffff;
        }



        .pagination {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 2px 0;
            width: 100%;
            max-width: 930px;
            margin: 0 auto;
        }
        .pagination .prev,
        .pagination .next {
            width: 52px;
        }
        .pagination a {
            display: inline-block;
            transition: transform 0.2s ease;
        }
        .pagination a:hover {
            transform: scale(1.1);
        }
        .pagination a.disabled {
            opacity: 0.3;
            pointer-events: none;
            cursor: default;
        }
        .pagination img {
            display: block;
            width: 52px;
            height: auto;
        }