/* Basic Reset & Defaults */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px; /* Establish a base font size */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4; /* LIGHT: Light gray background */
    color: #333333; /* LIGHT: Dark text */
    min-height: 100vh;
    -webkit-text-size-adjust: 100%; /* Prevent font scaling on iOS */
    text-size-adjust: 100%;
}

img {
    max-width: 100%;
    height: auto;
    display: block; /* Prevents bottom space */
}

a {
    color: #007bff; /* LIGHT: Standard blue for links */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: #0056b3; /* LIGHT: Darker blue on hover */
}

/* === Index Page Specific Layout === */
.container {
    display: flex;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

/* Sidebar Styles (Used on Index Page) */
.sidebar {
    width: 250px;
    background-color: #e9ecef; /* LIGHT: Very light gray sidebar */
    padding: 20px;
    border-right: 1px solid #dee2e6; /* LIGHT: Light border */
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: width 0.3s ease; /* Smooth transition for potential future toggle */
}

.sidebar .logo {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 25px;
    color: #212529; /* LIGHT: Dark logo text */
    text-align: center;
}

.sidebar .search-container {
    margin-bottom: 20px;
}

.sidebar .search-container form {
    display: flex;
}

/* Sidebar Search Input (Smaller) */
.sidebar .search-container input[type="search"] {
    flex-grow: 1;
    padding: 3px 6px;
    border: 1px solid #ced4da; /* LIGHT: Light gray border */
    border-radius: 3px 0 0 3px;
    background-color: #ffffff; /* LIGHT: White background */
    color: #495057; /* LIGHT: Dark text */
    font-size: 0.75em;
    height: auto;
}
.sidebar .search-container input[type="search"]::placeholder { color: #6c757d; } /* LIGHT: Mid-gray placeholder */
.sidebar .search-container button {
    padding: 3px 8px;
    border: 1px solid #ced4da;
    border-left: none;
    background-color: #f8f9fa; /* LIGHT: Very light button */
    color: #343a40; /* LIGHT: Dark text */
    cursor: pointer;
    border-radius: 0 3px 3px 0;
    font-size: 0.75em;
    height: auto;
    line-height: normal;
}
.sidebar .search-container button:hover { background-color: #e2e6ea; } /* LIGHT: Slightly darker on hover */

.sidebar .navigation ul { list-style: none; }
.sidebar .navigation li { margin-bottom: 10px; }
.sidebar .navigation a {
    display: block;
    padding: 8px 10px;
    border-radius: 4px;
    /* LIGHT: Bright blue for sidebar links */
    color: #0066cc; /* A brighter, more vibrant blue */
    font-weight: 500; /* Slightly bolder for better visibility */
    transition: background-color 0.2s ease, color 0.2s ease; /* Added color transition */
    font-size: 0.95em;
}
.sidebar .navigation a:hover {
    background-color: #d0e0ff; /* LIGHT: Very light blue hover background */
    color: #004c99; /* LIGHT: Darker blue on hover */
    text-decoration: none;
}
.sidebar .sidebar-footer {
    margin-top: auto;
    padding-top: 20px;
    font-size: 0.8em;
    color: #6c757d; /* LIGHT: Mid-gray footer text */
    text-align: center;
    border-top: 1px solid #dee2e6; /* LIGHT: Light border */
}

/* Main Content (Index Page) */
.main-content {
    flex-grow: 1;
    padding: 30px;
    overflow-y: auto; /* Important for layout */
}
.main-content header {
    margin-bottom: 30px;
    border-bottom: 1px solid #dee2e6; /* LIGHT: Light border */
    padding-bottom: 20px;
}
.main-content h1 {
    font-size: 2.2em;
    margin-bottom: 10px;
    color: #212529; /* LIGHT: Dark text */
}
.main-content header p {
    font-size: 1.1em;
    color: #495057; /* LIGHT: Mid-dark gray */
}

/* Product Grid (Index Page Static Content) */
.product-grid { padding-top: 20px; overflow: hidden; /* Contains floats */}
.product-grid p[name="zazzle-affiliate-helper"] {
     /* This container holds the floated items and the link below */
     margin: 0 -10px; /* Counteract child margin if children have margin: 10px */
     padding-bottom: 1px; /* Ensure container wraps floats for margin/padding */
     overflow: hidden; /* Alternative/additional clearfix */
}
.product-grid p[style*="float:left"] {
     border: 1px solid #dee2e6; /* LIGHT: Light border */
     background-color: #ffffff; /* LIGHT: White background for items */
     border-radius: 4px;
     text-align: center;
     transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
     box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* LIGHT: Subtle shadow */
}
.product-grid p[style*="float:left"]:hover {
     transform: translateY(-3px);
     box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* LIGHT: Slightly stronger shadow */
}
.product-grid p[style*="float:left"] a { display: block; color: #333333; font-size: 0.9em; padding: 5px; height: 100%; } /* LIGHT: Dark text */
.product-grid p[style*="float:left"] a:hover { color: #0056b3; } /* LIGHT: Link hover color */
.product-grid p[style*="float:left"] img { margin: 0 auto 5px auto; }
.product-grid p[style*="float:left"] b { display: block; line-height: 1.3; font-size: 0.9em; color: #212529; } /* LIGHT: Darker text for bold */

p[name="zazzle-affiliate-helper"] > a { /* "Powered by" link, if re-added */
    font-size: 0.8em;
    color: #6c757d; /* LIGHT: Mid-gray */
    text-align: center;
    display: block; /* Make it block for centering */
    margin-top: 20px;
    clear: both; /* Ensure it appears below floats */
}
p[name="zazzle-affiliate-helper"] > a:hover { color: #495057; } /* LIGHT: Darker gray on hover */


/* === Search Results Page Specific Styles (search.html) === */

.search-page-container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 15px; /* Default padding */
}

.search-page-container h1 {
    text-align: center;
    margin-bottom: 25px;
    color: #212529; /* LIGHT: Dark text */
    font-size: 1.8em;
}
.search-page-container h1 a { color: inherit; text-decoration: none; }
.search-page-container h1 a:hover { text-decoration: none; }

/* Back to Home Button Styles (Used on Search & About pages) */
.back-to-home-container {
    text-align: center;
    margin-bottom: 20px;
}

.button-link-styled {
    display: inline-block;
    padding: 8px 15px;
    background-color: #6c757d; /* LIGHT: Secondary button color */
    color: white !important;
    border: 1px solid #6c757d;
    border-radius: 4px;
    text-decoration: none !important;
    font-size: 0.95rem;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.button-link-styled:hover {
    background-color: #545b62; /* LIGHT: Darker secondary on hover */
    border-color: #545b62;
    color: white !important;
    text-decoration: none !important;
}

/* Search Form on search.html */
#zazzle-search-form {
    display: flex;
    margin-bottom: 20px;
    flex-wrap: wrap; /* Allow wrapping by default */
    gap: 10px; /* Space between items when wrapped */
}
#zazzle-search-input {
    flex: 1 1 300px; /* Grow, shrink, base width */
    padding: 10px 12px; /* More touch-friendly padding */
    border: 1px solid #ced4da; /* LIGHT: Light border */
    border-radius: 4px;
    background-color: #ffffff; /* LIGHT: White background */
    color: #495057; /* LIGHT: Dark text */
    font-size: 1rem;
}
#zazzle-search-form button[type="submit"] {
    padding: 10px 18px;
    border: 1px solid #007bff; /* LIGHT: Match primary button border */
    background-color: #007bff; /* LIGHT: Primary button color */
    color: #ffffff; /* LIGHT: White text on button */
    cursor: pointer;
    border-radius: 4px;
    font-size: 1rem;
    flex-shrink: 0;
}
#zazzle-search-form button[type="submit"]:hover { background-color: #0056b3; border-color: #0056b3; } /* LIGHT: Darker on hover */

/* Lucky Button */
#lucky-btn {
    padding: 10px 18px; /* Match search button size */
    cursor: pointer;
    background-color: #6c757d; /* LIGHT: Secondary button color */
    color: white;
    border: 1px solid #6c757d; /* LIGHT: Match background */
    border-radius: 4px;
    font-size: 1rem;
    white-space: nowrap;
    flex-shrink: 0;
}
#lucky-btn:hover { background-color: #545b62; border-color: #545b62; } /* LIGHT: Darker secondary */

/* === Social Share Button Styling === */
.social-share-buttons {
    text-align: center;
    padding: 15px 0 25px 0;
    margin-bottom: 25px;
    color: #495057; /* Text color for "Share this..." */
}

/* Styles for TEXT social share links (e.g., on search.html - default within .social-share-buttons) */
.social-share-buttons a {
   display: inline-block;
   margin: 5px 8px;
   color: #007bff !important; /* Default link color */
   text-decoration: underline !important;
   font-size: 0.9em;
   transition: color 0.2s ease;
}
.social-share-buttons a:hover {
    color: #0056b3 !important; /* Darker link color on hover */
}

/* Styles for BUTTON social share links (e.g., on index.html homepage header) */
/* Highly specific selector for homepage share buttons */
body .main-content > header .social-share-buttons.homepage-shares a.share-button-styled {
    text-decoration: none !important;
    padding: 8px 15px;
    border-radius: 4px;
    color: white !important; /* Text color for buttons */
    font-size: 0.9em;
    font-weight: 500;
    transition: opacity 0.2s ease, background-color 0.2s ease;
    margin: 5px; /* Ensure some spacing */
    display: inline-block; /* Make them behave like buttons */
    border: none; /* Ensure no default link border interferes */
}

.homepage-shares a.share-button-styled.twitter { background-color: #1DA1F2; }
.homepage-shares a.share-button-styled.facebook { background-color: #1877F2; }
.homepage-shares a.share-button-styled.bluesky { background-color: #1184ff; }

.homepage-shares a.share-button-styled:hover {
    opacity: 0.85;
    color: white !important;
    text-decoration: none !important;
}

/* Adjustments for the homepage share buttons container in the header specifically */
.main-content > header .social-share-buttons.homepage-shares {
    margin-top: 20px;
    padding-bottom: 0;
    border-bottom: none; /* Remove border that might be general for .social-share-buttons */
}


#loading-message, #error-message {
    text-align: center;
    padding: 20px 10px; /* Adjusted padding */
    font-size: 1.1em;
    margin: 15px 0;
}
#error-message { color: #dc3545; font-weight: bold; } /* LIGHT: Standard error red */
#loading-message { color: #6c757d; } /* LIGHT: Mid-gray */

/* --- Styles for API Response Content --- */
.result-summary {
    text-align: center;
    margin: 20px 0 10px 0;
    font-style: italic;
    color: #6c757d; /* LIGHT: Mid-gray */
    font-size: 0.9em;
}
.amazon-search-link, .zazzle-more-link {
     text-align: center;
     margin: 15px 0;
     padding: 10px;
     background-color: #e9ecef; /* LIGHT: Very light gray */
     border-radius: 4px;
}
.amazon-search-link a, .zazzle-more-link a {
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    padding: 8px 12px; /* Increased padding */
    transition: background-color 0.2s ease, color 0.2s ease;
}
.zazzle-more-link a {
     background-color: #28a745; /* LIGHT: Green for Zazzle more */
     color: white !important;
     border-radius: 3px;
}
.zazzle-more-link a:hover {
     background-color: #218838; /* LIGHT: Darker green */
     color: white !important;
     text-decoration: none !important;
}
.amazon-search-link a { color: #007bff !important; } /* LIGHT: Blue link */
.amazon-search-link a:hover {
     color: #0056b3 !important; /* LIGHT: Darker blue */
     text-decoration: underline !important;
}

/* Zazzle Results Grid */
.zazzle-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px; /* Default gap */
    padding: 20px 0;
}
.zazzle-product {
    border: 1px solid #dee2e6; /* LIGHT: Light border */
    background-color: #ffffff; /* LIGHT: White background */
    border-radius: 4px;
    text-align: center;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08); /* LIGHT: Softer shadow */
}
.zazzle-product:hover {
     transform: translateY(-4px);
     box-shadow: 0 6px 12px rgba(0,0,0,0.1); /* LIGHT: Slightly stronger shadow */
}
.zazzle-product a { /* Main link wrapper */
    text-decoration: none !important;
    color: #333333; /* LIGHT: Dark text */
    display: block;
    margin-bottom: 10px;
}
.zazzle-product a:hover { color: #0056b3; } /* LIGHT: Link hover */

.zazzle-product img { /* Product image */
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
    border-radius: 3px;
     aspect-ratio: 1 / 1;
     object-fit: contain;
     background-color: #f8f9fa; /* LIGHT: Very light bg for images */
}
.zazzle-product p { /* Product title */
    font-size: 0.9em;
    line-height: 1.3;
    margin: 0;
    word-wrap: break-word; /* Ensure long words break */
    overflow-wrap: break-word; /* Modern alternative */
    flex-grow: 1;
    color: #212529; /* LIGHT: Dark text for title */
}
.share-icons {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid #e9ecef; /* LIGHT: Lighter border */
}
.share-icons a {
    display: inline-block;
    margin: 0 6px;
    line-height: 0;
    opacity: 0.8; /* LIGHT: Slightly more visible by default */
    transition: opacity 0.2s ease;
}
.share-icons a:hover { opacity: 1; }
.share-icons img {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-bottom: 0;
}

/* === Content Page General Styles (e.g., About Us) === */
.page-container {
    max-width: 900px; /* Adjust for comfortable reading width */
    margin: 0 auto;
    padding: 20px 15px 40px 15px; /* Add more bottom padding */
}

.page-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #dee2e6; /* LIGHT: Light border */
}

.page-header h1 {
    font-size: 2em; /* Adjust as needed */
    color: #212529; /* LIGHT: Dark text */
    margin-bottom: 15px;
}
.page-header h1 a { color: inherit; }
.page-header h1 a:hover { text-decoration: none; }

.content-section {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #ffffff; /* White background for content sections */
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.content-section h2 {
    font-size: 1.6em;
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.content-section h3 {
    font-size: 1.3em;
    color: #444;
    margin-top: 25px;
    margin-bottom: 15px;
}
.content-section h4 {
    font-size: 1.1em;
    color: #555;
    margin-bottom: 8px;
}

.content-section p {
    line-height: 1.7;
    margin-bottom: 15px;
    color: #495057;
}

.content-section strong {
    color: #212529;
}

.content-section code {
    background-color: #e9ecef;
    padding: 2px 5px;
    border-radius: 3px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 0.9em;
    color: #c0392b; /* A reddish color for code */
}

.faq-item {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #eee;
}
.faq-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.page-footer {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #dee2e6;
    font-size: 0.9em;
    color: #6c757d;
}

/* Scroll-to-Top Buttons (General Styling) */
#scrollToTopBtn,
#indexScrollToTopBtn,
#pageScrollToTopBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: rgba(0, 0, 0, 0.5); /* LIGHT: Darker semi-transparent button */
    color: white;
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    font-size: 24px;
    line-height: 45px;
    text-align: center;
    cursor: pointer;
    display: none; /* Hidden by default */
    z-index: 1000;
    transition: opacity 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: scale(0); /* Start hidden and scaled down */
}
#scrollToTopBtn.show,
#indexScrollToTopBtn.show,
#pageScrollToTopBtn.show {
     display: block;
     opacity: 0.7;
     transform: scale(1); /* Scale up when shown */
}
#scrollToTopBtn:hover,
#indexScrollToTopBtn:hover,
#pageScrollToTopBtn:hover {
     opacity: 1;
     background-color: rgba(0, 0, 0, 0.7); /* LIGHT: Even darker on hover */
}
#indexScrollToTopBtn { z-index: 999; } /* Specific z-index if needed */
#pageScrollToTopBtn { z-index: 998; }


/* Accessibility */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* === Responsive Design - Tablet and Smaller (<= 768px) === */
@media (max-width: 768px) {
    html { font-size: 15px; }

    .container { flex-direction: column; }
    .sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #dee2e6;
        height: auto;
        padding: 15px;
    }
     .sidebar .navigation ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px 10px;
    }
     .sidebar .navigation li { margin-bottom: 5px; }
     .sidebar .navigation a { padding: 6px 10px; }

    .main-content { padding: 20px 15px; }
    .main-content h1 { font-size: 1.8em; }
    .main-content header p { font-size: 1em; }

    .product-grid p[style*="float:left"] {
        width: calc(50% - 20px);
    }

    .search-page-container, .page-container { padding: 0 10px; } /* Apply to both */
    .search-page-container h1, .page-header h1 { font-size: 1.6em; } /* Apply to both */

    #zazzle-search-form { gap: 8px; }
    #zazzle-search-input { font-size: 0.95rem; padding: 9px 10px; }
    #zazzle-search-form button[type="submit"],
    #lucky-btn { font-size: 0.95rem; padding: 9px 15px; }

    .zazzle-results {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 10px;
    }
    .zazzle-product p { font-size: 0.85em; }

    .content-section { padding: 15px; } /* For About page */
}


/* === Responsive Design - Mobile Phones (<= 480px) === */
@media (max-width: 480px) {
    html { font-size: 14px; }

    .sidebar { padding: 10px; }
    .sidebar .logo { font-size: 1.3em; margin-bottom: 15px;}
    .sidebar .navigation ul { gap: 3px 5px; }
    .sidebar .navigation a { padding: 5px 8px; font-size: 0.9em; }

    .main-content { padding: 15px 10px; }
    .main-content h1 { font-size: 1.5em; }
    .main-content header p { font-size: 0.95em; }

    .product-grid p[style*="float:left"] {
         width: calc(100% - 20px);
         float: none !important;
         margin-left: 10px !important;
         margin-right: 10px !important;
         margin-bottom: 15px !important;
    }
     .product-grid p[name="zazzle-affiliate-helper"] > br[style*="clear:both"] {
        display: none;
    }
     p[name="zazzle-affiliate-helper"] > a {
        margin-top: 10px;
     }

    .search-page-container h1, .page-header h1 { font-size: 1.4em; } /* Apply to both */
    #zazzle-search-input { flex-basis: 100%; }
    #zazzle-search-form button[type="submit"] { flex-basis: calc(55% - 5px); }
    #lucky-btn { flex-basis: calc(45% - 5px); }

    /* Styling for ALL social share links on small screens to stack */
    .social-share-buttons a,
    .homepage-shares .share-button-styled {
        padding: 8px 12px; /* Consistent padding */
        font-size: 0.85em; /* Consistent font size */
        margin: 5px 0; /* Only vertical margin for stacking */
        display: block; /* Make them full width and stack */
    }
    .social-share-buttons a:last-child,
    .homepage-shares .share-button-styled:last-child {
        margin-bottom: 0; /* Remove bottom margin from the last button in the stack */
    }


    .zazzle-results {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 8px;
    }
    .zazzle-product { padding: 8px; }
    .zazzle-product p { font-size: 0.8em; }
    .share-icons img { width: 16px; height: 16px; }

    .amazon-search-link a, .zazzle-more-link a { font-size: 0.85em; padding: 6px 10px;}

    #scrollToTopBtn, #indexScrollToTopBtn, #pageScrollToTopBtn { /* Target all scroll buttons */
        width: 40px; height: 40px; line-height: 40px; font-size: 20px; bottom: 15px; right: 15px;
    }

    .content-section h2 { font-size: 1.3em; } /* For About page */
    .content-section h3 { font-size: 1.1em; }
    .content-section h4 { font-size: 1em; }
}