/**
Theme Name: romancepages
Author: romancepages
Author URI: https://bookshaul.in/
Description: online books store with lots of romance books
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: romancepages
Template: astra
*/











/* --- CSS for Romantic Hero Banner --- */
.hero-banner-romantic {
  background-image: linear-gradient(135deg, #ffe6f0, #fdd0d8); /* Softer, lighter pink gradient */
  color: #8e244d; /* Muted, dusty rose text color */
  text-align: center;
  padding: 150px 30px; /* Increased vertical padding for grandeur */
  border-radius: 15px; /* Soft rounded corners are back - gentler feel */
  position: relative;
  margin-bottom: 40px;
  overflow: hidden; /* Clip background for rounded corners effect */
}

.hero-banner-romantic:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('YOUR_SUBTLE_ROMANTIC_PATTERN_URL.png'); /* Subtle romantic pattern overlay (optional) */
  opacity: 0.15; /* Very subtle pattern opacity */
  pointer-events: none; /* Make sure it doesn't interfere with clicks */
}

.hero-banner-romantic-inner {
  position: relative; /* To position content above the pseudo-element pattern */
  z-index: 1; /* Ensure content is above pattern */
}

.hero-banner-romantic-title {
  font-family: 'Playfair Display', serif; /* Elegant Playfair Display font */
  font-size: 4.5em; /* Slightly larger, more commanding title */
  font-weight: normal; /* Regular font-weight for a lighter touch */
  line-height: 1.1; /* Tighter line height */
  margin-bottom: 15px; /* Reduced spacing below title */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); /* Softer, less intense text shadow */
}

.hero-banner-romantic-subtitle {
  font-family: 'Lora', serif; /* Softer serif font for subtitle */
  font-size: 1.6em; /* Slightly larger subtitle */
  font-weight: 400;
  font-style: italic; /* Italicized subtitle for a touch of romance */
  color: #a54a69; /* Slightly lighter, more muted rose subtitle color */
  margin-bottom: 35px; /* Increased spacing below subtitle */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15); /* Softer text shadow */
}

.hero-banner-romantic-button {
  display: inline-block;
  padding: 16px 35px; /* Slightly larger button */
  background-color: #ffffff; /* White button background */
  color: #b33a6a; /* Deeper, richer rose button text color */
  text-decoration: none;
  font-size: 1.2em;
  font-weight: 600; /* Slightly bolder button text */
  border-radius: 30px; /* More rounded button corners - pill shape */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Refined button shadow */
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease; /* More transition properties */
  border: 2px solid transparent; /* Initially no border */
}

.hero-banner-romantic-button:hover {
  background-color: rgba(255, 255, 255, 0.85); /* Slightly translucent white hover background */
  color: #c94b7b; /* Brighter rose on hover */
  transform: translateY(-2px); /* Slight lift effect on hover */
  border-color: #fdd0d8; /* Light pink border on hover */
}

/* Responsive adjustments for mobile devices (screen width less than 768px) */
@media (max-width: 768px) {
  .hero-banner-romantic {
    padding: 100px 20px; /* Reduced vertical padding on mobile */
    margin-bottom: 30px;
    border-radius: 10px; /* Smaller rounded corners on mobile */
  }
  .hero-banner-romantic-title {
    font-size: 3.2em; /* Smaller title font on mobile */
    margin-bottom: 10px;
  }
  .hero-banner-romantic-subtitle {
    font-size: 1.4em; /* Smaller subtitle font on mobile */
    margin-bottom: 25px;
  }
  .hero-banner-romantic-button {
    padding: 14px 30px; /* Slightly smaller button padding on mobile */
    font-size: 1em; /* Smaller button font on mobile */
    border-radius: 25px; /* Slightly less rounded button corners on mobile */
  }
}
/* --- End of Romantic Hero Banner CSS --- */











/* --- COMBINED SECTION STYLES (Based on Featured Reads) --- */
.product-section { /* Renamed class for reusability */
    padding: 70px 40px;
    text-align: center;
}

.product-section h2 { /* Renamed class for reusability */
    margin-bottom: 40px;
    font-size: 2em;
}

.carousel-grid { /* Renamed class for reusability - for carousel container */
    display: flex;
    overflow-x: auto;
    gap: 25px;
    padding-bottom: 30px;
}

.product-box { /* Renamed class for reusability - for product boxes */
    width: 200px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 5px 5px 12px #ddd;
    background-color: white;
    padding-bottom: 15px;
    text-align: left;
    transition: transform 0.3s ease;
    flex: 0 0 auto;
    margin-right: 25px;
}

 .product-box:hover { /* Renamed class for reusability */
    transform: translateY(-5px);
    box-shadow: 6px 6px 15px #ccc;
}

.product-box img { /* Renamed class for reusability */
    border-radius: 10px 10px 0 0;
    margin-bottom: 10px;
}

.product-box h3 { /* Renamed class for reusability */
    font-size: 1.1em;
    margin: 0 15px 8px 15px;
    color: #3a3a3a;
    word-wrap: break-word; /* Allow title to wrap */
}

.product-box p { /* Renamed class for reusability - default style for description/author/price */
    font-size: 0.95em;
    margin: 0 15px 15px 15px;
    color: #6a6a6a;
}

.product-box .genre { /* New class for genre/category text - for coloring */
    font-size: 0.9em; /* Adjust as needed */
    color: #a3526d; /* Example color - you can change this */
    font-style: italic; /* Optional: Italic style like in the image */
    margin-bottom: 0; /* Adjust spacing if needed */
    line-height: 1.3; /* Adjust line height if needed */
}


/* --- BESTSELLERS SECTION SPECIFIC STYLES (if needed - background color example) --- */
.bestsellers-section { /* Section class for Bestsellers */
    background-color: #f9f9f9; /* Example: Unique background for Bestsellers */
}

/* --- NEW RELEASES SECTION SPECIFIC STYLES (if needed - example if you want to adjust grid) --- */
.new-releases-section .carousel-grid { /* Section class for New Releases + carousel grid */
    /* If you want to make New Releases a grid instead of carousel, uncomment below: */
    /* display: grid;
    grid-template_columns: repeat(auto-fit, minmax(200px, 1fr)); /* Example grid layout */
    /* gap: 20px; */
    /* overflow-x: visible; /* Allow grid to expand */
    /* flex-wrap: wrap; /* Allow items to wrap to next line */
}


/* --- MOBILE RESPONSIVENESS (COMBINED FOR ALL SECTIONS) --- */
@media (max-width: 768px) {
    .product-section { /* Mobile styles for the section */
        padding: 30px 5px;
    }

    .product-section h2 { /* Mobile styles for the section heading */
        font-size: 3.6vw;
        margin-bottom: 20px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .carousel-grid { /* Mobile styles for the carousel grid */
        gap: 8px;
        padding-bottom: 10px;
        padding-left: 5px;
        padding-right: 5px;
        justify-content: space-between;
        scrollbar-width: thin;
        scrollbar-color: #fdeff2 #000;
        -webkit-overflow-scrolling: touch;
        display: flex;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        overflow-x: auto;
    }

    .carousel-grid::-webkit-scrollbar { /* Mobile scrollbar styles */
        height: 5px;
        width: 5px;
        background-color: #000;
    }

    .carousel-grid::-webkit-scrollbar-track { /* Mobile scrollbar track styles */
        border-radius: 50px;
        background-color: #000;
    }

    .carousel-grid::-webkit-scrollbar-thumb { /* Mobile scrollbar thumb styles */
        background-color: #fdeff2;
        border-radius: 50px;
        border: 1px solid #000;
    }

    .product-box { /* Mobile styles for product boxes */
        width: 48%;
        max-width: none;
        margin-right: 0;
        margin-bottom: 10px;
        flex: 0 0 auto;
        text-align: left;
        padding-bottom: 2px;
    }

    .product-box img { /* Mobile styles for product box images - INCREASED SIZE BY ~20% */
        max-height: 132px; /* Increased from 110px by 20% */
        width: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .product-box h3 { /* Mobile styles for product box titles */
        font-size: 2.8vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 2px;
        text-align: left;
    }

    .product-box p { /* Mobile styles for product box descriptions */
        font-size: 2.3vw;
        margin-bottom: 5px;
        text-align: left;
    }

    .product-box .genre { /* Mobile styles for genre/category text */
        font-size: 2vw;
        margin-bottom: 2px;
        text-align: left;
    }
}