/* ====== Basic Setup ====== */
body {
    margin: 0;
    font-family: sans-serif;
}

.bookshelf-container {
    width: 100%;
    padding: 5px 0;
	xxxbackground: linear-gradient(
		180deg,
		rgba(255, 255, 255, 1) 0.6%,
		rgba(43, 82, 151, 0.7) 25%,
		rgba(87, 199, 133, 1) 89%
	  );
	xxxbackground: linear-gradient(
	  0deg,
	  rgba(255, 255, 255, 1) -57.4%,
	  rgba(43, 82, 151, 0.7) 14%,
	  rgba(87, 199, 133, 1) 88%
	  );
}

/* ====== MOBILE-FIRST STYLES (Default) ====== */
/* By default, columns are stacked vertically */
.shelf-items {
    /* No flexbox here by default */
}

.shelf-column {
    /* Each column has its own shelf background on mobile */
    background-image: url('https://zget.me/a/shelf/woodshelf3000x95.jpg');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% 50px;
    
    display: flex; /* Still use flex to center the book-group inside */
    justify-content: center;
    
    /* Add space between stacked columns */
    margin-bottom: 20px;
}

/* ====== Book & Image Styling ====== */
.book-group {
    display: flex;
    align-items: flex-end; 
    gap: 1px; 
    padding-bottom: 25px; 
    flex-wrap: nowrap; 
}

.product-link {
    display: flex;
    align-items: flex-end; 
    gap: 1px;              
}

.product-image {
    width: auto;
    xxxbox-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}

.bookend {
    width: auto;
}

/* NEW container for the main product image and caption */
.product-image-container {
  /* This is now the positioning reference for the caption */
  position: relative; 
  /* This ensures it doesn't create extra space in the flex row */
  line-height: 0;
}

/* Remove the wrapper we tried before */
.product-with-caption {
    /* This rule is no longer needed and can be deleted */
}

/* UPDATED styling for the caption box */
.product-caption {
    background-color: #eec22b;
    border: 1px solid #e0e0e0;
    XXXborder-radius: 4px;
    padding: 7px 15px 7px;
    font-size: 12px;
    color: #333;
    text-align: center;
    xxxbox-shadow: 0 1px 3px rgba(0,0,0,0.1);

    /* --- NEW POSITIONING LOGIC --- */
    position: absolute;
    /* Position it relative to the bottom of the image container */
    top: 100%; 
    /* The 50px space you wanted */
    margin-top: 7px; 
    /* Center it horizontally */
    left: 50%;
    transform: translateX(-50%);
    /* Set a width */
    width: 60%;
}

/* ====== DESKTOP STYLES (for screens 769px and wider) ====== */
@media (min-width: 1000px) {
    /* On desktop, turn it into a flex container */
    .shelf-items {
        display: flex;
        justify-content: center;

        /* Add the single, continuous shelf background ONLY on desktop */
        background-image: url('https://zget.me/a/shelf/woodshelf3000x95.jpg');
        background-repeat: repeat-x;
        background-position: bottom center;
        background-size: 100% 50px;
    }

    .shelf-column {
        flex: 1 1 300px; /* Let columns grow and shrink again */
        margin-bottom: 0; /* Remove the mobile margin */
        
        /* Remove the individual shelf background on desktop */
        background-image: none;
    }
}