/* Global reset and variables */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /*
     * Colour palette extracted from the provided logo
     *
     * The primary colour is a deep maroon taken directly from the
     * lettering.  Secondary colours follow the soft splash of the
     * illustration: pink, peach, light yellow, lavender and blue.
     * A very pale off‑white is used for backgrounds and cards to
     * maintain high readability.  These variables are used
     * throughout the site to ensure consistency – please avoid
     * introducing new colours elsewhere.
     */
    --primary-color: #852d38;          /* deep maroon for headings, buttons, highlights */
    --secondary-pink: #f5c5d9;         /* soft pink */
    --secondary-peach: #e8beba;        /* peach/orange */
    --secondary-yellow: #fae6be;       /* light yellow */
    --secondary-lavender: #c5bed3;     /* lavender/purple */
    --secondary-blue: #c5dbe9;         /* light blue */
    --text-color: #91444b;             /* muted maroon for body copy */
    --light-text: #ffffff;             /* white for text on dark backgrounds */
    --background-color: #fdf7fa;       /* very light pastel for page background */
    --card-bg: #ffffff;                /* white cards for contrast */
    --max-width: 1200px;
    --border-radius: 6px;
    --transition: all 0.3s ease;
    /* Multi‑colour gradient used in hero sections and highlights */
    --brand-gradient: linear-gradient(90deg,
        var(--secondary-pink) 0%,
        var(--secondary-peach) 25%,
        var(--secondary-yellow) 50%,
        var(--secondary-lavender) 75%,
        var(--secondary-blue) 100%
    );
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Open Sans', sans-serif;
    color: var(--text-color);
    /* apply the pastel background colour across the entire page */
    background-color: var(--background-color);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    color: var(--primary-color);
    line-height: 1.2;
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;
}

/* Navigation bar */
.navbar {
    background: transparent;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 100;
}
.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
}
.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

/* Display icon inside logo links */
.logo i {
    margin-right: 0.35rem;
    /* highlight the icon with the lightest tone from the palette */
    color: var(--secondary-yellow);
    font-size: 1.25rem;
}
.nav-links {
    display: flex;
    gap: 1rem;
}
.nav-links a {
    padding: 0.5rem 0.75rem;
    color: var(--text-color);
    border-radius: var(--border-radius);
    transition: var(--transition);
}
.nav-links a:hover,
.nav-links a.active {
    /* on hover or active state, softly highlight with a pastel accent */
    background-color: var(--secondary-pink);
    color: var(--primary-color);
}
.cart-icon {
    position: relative;
}
.cart-icon i {
    font-size: 1.2rem;
}
#cart-count {
    background-color: var(--secondary-peach);
    color: var(--primary-color);
    border-radius: 50%;
    padding: 0.1rem 0.4rem;
    font-size: 0.75rem;
    position: absolute;
    top: -8px;
    right: -10px;
}
.menu-toggle {
    display: none;
    font-size: 1.25rem;
    cursor: pointer;
}
.menu-toggle.open i {
    transform: rotate(90deg);
}

/* Hero section */
.hero {
    position: relative;
    height: 90vh;
    overflow: hidden;
}
.hero-slider img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.hero-slider img.active {
    opacity: 1;
}
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /*
     * Replace the dark overlay with a soft multi‑colour gradient.  Each stop
     * corresponds to a shade from the logo palette.  The alpha values
     * maintain readability by subtly tinting the underlying hero images.
     */
    background: linear-gradient(90deg,
        rgba(245, 197, 217, 0.85) 0%,
        rgba(232, 190, 186, 0.85) 25%,
        rgba(250, 230, 190, 0.85) 50%,
        rgba(197, 190, 211, 0.85) 75%,
        rgba(197, 219, 233, 0.85) 100%
    );
    text-align: center;
    padding: 0 1rem;
}
.hero-title {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}
.hero-subtitle {
    font-size: 1.25rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    border-radius: var(--border-radius);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    text-align: center;
}
.btn-primary {
    background-color: var(--primary-color);
    color: var(--light-text);
}
.btn-primary:hover {
    /* darken slightly on hover */
    background-color: #6f2435;
}
.btn-secondary {
    background-color: var(--secondary-peach);
    color: var(--primary-color);
}
.btn-secondary:hover {
    background-color: var(--secondary-pink);
    color: var(--primary-color);
}

/* Icons inside buttons should have a small margin to separate them from the label */
.btn i {
    margin-right: 0.4rem;
}

/* Features section */
.features {
    padding: 3rem 0;
    /* soft gradient backdrop for the features section */
    background: linear-gradient(90deg,
        var(--secondary-peach) 0%,
        var(--secondary-yellow) 50%,
        var(--secondary-lavender) 100%
    );
}
.section-title {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2rem;
}
.feature-grid {
    /* Use a responsive CSS grid instead of a flexbox.  Auto‑fit will
     * create as many columns as will fit in the container with a minimum
     * width for each card.  This ensures that on large screens all
     * feature cards align neatly on a single row, while on smaller
     * devices they gracefully wrap to two or one per row. */
    display: grid;
    gap: 2rem;
    /* Force exactly two cards per row on larger screens.  Using repeat(2, 1fr) ensures the grid
       always divides into two equal columns.  Cards will wrap to the next row after two items. */
    grid-template-columns: repeat(2, 1fr);
    /* Each row should be equal height, so cards align evenly top-to-bottom. */
    grid-auto-rows: 1fr;
}
.feature-card {
    /* align card background with the page – pure white for clarity */
    background-color: var(--card-bg);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    /* Allow the card to fill its grid cell.  Remove the fixed max‑width
     * so that cards expand equally within the responsive grid layout. */
    width: 100%;
    max-width: unset;
    text-align: center;
    padding-bottom: 1rem;
    display: flex;
    flex-direction: column;
}
.feature-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.feature-card h3 {
    margin: 1rem 0 0.5rem;
    font-size: 1.4rem;
}
.feature-card p {
    padding: 0 1rem;
    flex-grow: 1;
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

/* About preview */
.about-preview {
    padding: 3rem 0;
}
.about-preview-container {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}
.about-preview-image img {
    width: 100%;
    max-width: 500px;
    border-radius: var(--border-radius);
    object-fit: cover;
}
.about-preview-text {
    flex: 1;
    min-width: 300px;
}
.about-preview-text p {
    margin-bottom: 1.5rem;
}

/* Footer */
.footer {
    /* Deep maroon footer to anchor the page */
    background-color: var(--primary-color);
    color: var(--light-text);
    padding: 2rem 0;
    margin-top: 2rem;
}
.footer-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between;
}
.footer-section h3 {
    margin-bottom: 0.5rem;
    color: var(--light-text);
}

/* Footer text and links adopt the secondary tone for readability */
.footer-section p,
.footer-section a {
    color: var(--secondary-yellow);
    font-size: 0.9rem;
}
.footer-section ul {
    list-style: none;
}
.footer-section ul li {
    margin-bottom: 0.5rem;
}
.social-links {
    display: flex;
    gap: 0.5rem;
}
.social-links a {
    /* Icons use a pastel tone against the dark footer */
    color: var(--secondary-yellow);
    font-size: 1.2rem;
    transition: var(--transition);
}
.social-links a:hover {
    /* On hover, lighten slightly with another pastel */
    color: var(--secondary-pink);
}
.footer-bottom {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--secondary-yellow);
}

/*
 * Fix social media icons in the footer
 *
 * Without explicit sizing, the brand icons can appear slightly oval when
 * rendered inside the footer due to inherited line-height and text
 * metrics.  By turning the anchor into a flex container and giving it
 * equal width and height plus a full border-radius, the icon sits
 * centrally inside a perfect circle.  This makes all icons uniform and
 * prevents any stretching or squashing.  The line-height reset on the
 * <i> element removes additional vertical padding that could distort the
 * aspect ratio.
 */
.footer .social-links a {
    /* Simplify social icons: remove fixed sizing and circular backgrounds */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    border-radius: 0;
}
.footer .social-links a i {
    line-height: 1;
}

/* Shop page */
.shop-page {
    padding: 2rem 0 3rem;
    min-height: 80vh;
}
.page-title {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 2rem;
}
.filters {
    text-align: center;
    margin-bottom: 1.5rem;
}
.filter-btn {
    background-color: var(--secondary-pink);
    color: var(--primary-color);
    border: 1px solid var(--secondary-peach);
    padding: 0.4rem 0.8rem;
    margin: 0.2rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 0.9rem;
    transition: var(--transition);
}
.filter-btn:hover {
    background-color: var(--secondary-peach);
    color: var(--primary-color);
}
.filter-btn.active {
    background-color: var(--secondary-peach);
    color: var(--primary-color);
}
.product-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.product-card {
    /* align product card background with a clean white card */
    background-color: var(--card-bg);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.2s ease;
}
.product-card:hover {
    transform: translateY(-4px);
}
.product-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}
.product-details {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.product-name {
    font-size: 1.2rem;
    margin-bottom: 0.25rem;
    color: var(--accent-color);
}
.product-price {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.product-description {
    font-size: 0.9rem;
    color: #666;
    flex-grow: 1;
    margin-bottom: 0.8rem;
}
.product-card .btn {
    align-self: flex-start;
}

/* About page */
.about-page {
    padding: 2rem 0 3rem;
    min-height: 80vh;
}
.about-content p {
    margin-bottom: 1rem;
    font-size: 1rem;
}
.about-gallery {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}
.about-gallery img {
    flex: 1 1 calc(33.333% - 1rem);
    width: 100%;
    max-width: 350px;
    border-radius: var(--border-radius);
    object-fit: cover;
}

/* Contact page */
.contact-page {
    padding: 2rem 0 3rem;
    min-height: 80vh;
}
.contact-content {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}
.contact-form-container,
.contact-info {
    flex: 1;
    min-width: 300px;
}
.contact-description {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 2rem;
    font-size: 1rem;
}
.contact-form .form-group {
    margin-bottom: 1rem;
}
.contact-form label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 600;
}
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    font-size: 0.95rem;
}
.contact-form textarea {
    resize: vertical;
}
.form-success {
    color: green;
    margin-top: 0.5rem;
}
.contact-info h2, .contact-info h3 {
    margin-bottom: 0.5rem;
    color: var(--accent-color);
}
.contact-info p {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

/* Cart page */
.cart-page {
    padding: 2rem 0 3rem;
    min-height: 80vh;
}
.cart-container {
    margin-bottom: 2rem;
}
.cart-item-row {
    display: grid;
    grid-template-columns: 80px 1fr auto auto auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #f0f0f0;
}
.cart-item-image img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--border-radius);
}
.cart-item-info h3 {
    font-size: 1rem;
    margin-bottom: 0.3rem;
    color: var(--accent-color);
}
.cart-item-info p {
    font-size: 0.9rem;
    color: #555;
}
.cart-item-quantity {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.qty-btn {
    background-color: var(--secondary-color);
    border: 1px solid var(--primary-color);
    padding: 0.2rem 0.4rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 0.8rem;
    transition: var(--transition);
}
.qty-btn:hover {
    background-color: var(--primary-color);
    color: #fff;
}
.qty {
    min-width: 20px;
    text-align: center;
    font-size: 1rem;
}
.cart-item-subtotal {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--accent-color);
}
.remove-btn {
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 1rem;
    transition: var(--transition);
}
.remove-btn:hover {
    color: var(--primary-color);
}
.cart-total {
    text-align: right;
}
.checkout-note {
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.5rem;
}
.empty-cart {
    text-align: center;
    font-size: 1rem;
    padding: 2rem 0;
}

/* Responsive design */
@media (max-width: 768px) {
    .nav-links {
        position: absolute;
        top: 60px;
        right: 0;
        background-color: #FDF7F9;
        width: 200px;
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem;
        border: 1px solid #f0f0f0;
        display: none;
    }
    .nav-links.open {
        display: flex;
    }
    .menu-toggle {
        display: block;
        margin-left: 1rem;
    }
    .feature-grid {
        /* Stack the cards in a single column on small viewports when using the
         * grid layout.  justify‑items: stretch ensures each card spans the full
         * available width of its column. */
        grid-template-columns: 1fr;
        justify-items: stretch;
    }
    .about-preview-container {
        flex-direction: column;
    }
    .cart-item-row {
        grid-template-columns: 60px 1fr auto;
        grid-template-areas:
            'img info remove'
            'img quantity subtotal';
    }
    .cart-item-image { grid-area: img; }
    .cart-item-info { grid-area: info; }
    .cart-item-quantity { grid-area: quantity; margin-top: 0.5rem; }
    .cart-item-subtotal { grid-area: subtotal; }
    .cart-item-remove { grid-area: remove; }
}
.floating-blob {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
  animation: floatEffect 6s infinite ease-in-out;
}

/* Positioning Example */
.dessert-blob {
  top: 10%;
  right: -5%;
  width: 150px;
}

@keyframes floatEffect {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

/* ==========================================================================
   Social icon overrides
   ==========================================================================
   The original design wrapped social media icons in circular pastel
   backgrounds.  To satisfy the requirement to show simple icons without
   any coloured circles or shadows, we remove the background, fixed
   sizing and border-radius.  Using !important ensures these rules win
   over earlier inline and embedded styles across all pages.  The icons
   still inherit their font size and colour from existing definitions.
*/
.social-links a {
  /*
   * Remove any coloured circle, border or box shadow around social icons.  Some
   * pages in this site defined a fixed size, border, or drop shadow on the
   * anchors wrapping the FontAwesome icons.  To ensure plain icons without
   * circular backgrounds, we override those properties globally using
   * !important.  We also keep the anchors flexible so they size themselves
   * according to content rather than a fixed square.
   */
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.social-links a:hover {
  background: none !important;
}

/*
 * Remove decorative backdrop behind social icons in the footer
 *
 * Several pages include a ::before pseudo‑element on the footer that
 * draws a pastel circular gradient behind the social media icons.  The
 * user requested that these white/transparent shades be removed so
 * that only the simple icons remain.  Overriding the pseudo‑element
 * globally ensures that no coloured circles appear behind the icons
 * on any page, regardless of inline styles defined in individual
 * templates.  By disabling the ::before element entirely and
 * clearing its background, we avoid having to edit each page's
 * embedded CSS individually.
 */
.footer::before {
  display: none !important;
  background: none !important;
}