/* css/shop-styles.css */

/*
   The .shop-page element itself:
   Your main site's CSS (e.g., styles.css) might already define a max-width,
   centering (margin: auto), and padding for main content areas.
   If it does (e.g., through a class like .main-content that you wrap around
   <main class="shop-page">), then you might not need the styles below for .shop-page.
   If .shop-page is the outermost content container for this page (after header/before footer),
   uncomment and adjust these as needed to match your site's layout.
*/


.shop-page-content-wrapper {
    /* This div is now the single child of <main>, so <main> will center it. */
    /* We need to define its width and internal padding. */
    width: 100%; /* Take up most of the centered area, similar to .text-window-container */
    max-width: auto; /* Or your desired max content width for the shop */
    padding: 20px;
    /* margin: 40px auto;  -- The 'auto' for horizontal centering is NOT needed
                              because <main> is already centering this block.
                              You only need top/bottom margins. */
    margin-top: 70px; /* Adjust this to clear your fixed header.
                         Your .slideshow-container has margin-top: 70px,
                         so this is likely the correct value. */
    margin-bottom: 40px; /* Space before the footer */
    background-color: #2a2a2a; /* Or whatever background you want for the shop content block */
    border-radius: 8px;     /* Optional, for consistency */
    /* By default, children of this div (h2, p, .framing-options-grid) will stack vertically */
}

/* The rest of the styles for h2, .shop-intro, .framing-options-grid etc.,
   will be relative to this .shop-page-wrapper */

.shop-page-wrapper h2 {
    text-align: center;
    font-size: 2.2em;
    margin-top: 0; /* h2 is now inside the padded wrapper */
    margin-bottom: 20px;
    color: #fff;
}

.shop-page-wrapper .shop-intro { /* Note: added .shop-page-wrapper to be specific */
    text-align: center;
    font-size: 1.1em;
    color: #ccc;
    max-width: 800px;
    margin: 0 auto 40px auto;
}

.shop-page-wrapper .framing-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.framing-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid */
    gap: 30px; /* Space between items */
    margin-top: 30px;
}

.frame-option-item {
    background-color: #282828; /* Slightly lighter than body for card effect */
    border: 1px solid #444;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column; /* Align content vertically */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.frame-option-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.frame-option-item img {
    width: 100%;
    height: 200px; /* Fixed height for images */
    object-fit: cover; /* Crop images to fit, maintaining aspect ratio */
    border-radius: 6px;
    margin-bottom: 15px;
    border: 1px solid #555;
}

.frame-option-item h3 {
    font-size: 1.6em;
    color: #fff;
    margin-top: 0;
    margin-bottom: 10px;
}

.frame-option-item p {
    font-size: 1em;
    color: #bbb;
    margin-bottom: 10px;
    flex-grow: 1; /* Allows paragraphs to take available space, pushing button down */
}

.frame-option-item p.features {
    font-size: 0.9em;
    color: #aaa;
    margin-top: auto; /* Pushes feature list and button towards bottom if content is short */
    padding-top: 10px;
    border-top: 1px dashed #555;
}
.frame-option-item p.features strong {
    color: #ccc;
}


.btn-quote {
    display: inline-block;
    background-color: #007bff; /* A standard blue for buttons */
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    margin-top: 15px; /* Space above the button */
    transition: background-color 0.3s ease;
    align-self: flex-start; /* Align button to the start of the flex container (left) */
}

.btn-quote:hover {
    background-color: #0056b3;
    color: #fff;
    text-decoration: none;
}

.shop-intro {
    text-align: center;
    font-size: 1.1em;
    color: #ccc;
    max-width: 800px;
    margin: 0 auto 40px auto;
    margin-top:70px auto;
}
.shop-intro a {
    color: #6cb7f5; /* A slightly brighter blue for links in content */
}
.shop-intro a:hover {
    color: #8ec9f7;
    text-decoration: underline;
}