/*
	Theme Name: The Red Peach 
	Theme URI: https://www.theredpeach.co.uk
	Description: The Red Peach is a lightweight and minimalist WordPress theme that is based upon Hello Elementor.
	Author: Brian Craker
	Author URI: https://becoms.co.uk/?utm_source=wp-themes
	Version: 1.0.0
	Stable tag: 1.0.0
	Requires at least: 7.0
	Tested up to: 7.2
	Requires PHP: 7.4
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: theredpeach
	Tags: accessibility-ready, flexible-header, custom-colors, custom-menu, custom-logo, featured-images, rtl-language-support, threaded-comments, translation-ready,
*/


.elementor-widget-hfe-basic-posts .hfe-post-title a {text-decoration:none !important;}
/* Container and Layout Base */
.trp-blog-container {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 50px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Category Title Header */
.trp-archive-header {
    text-align: center;
    margin-bottom: 50px;
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: 30px;
}
.trp-archive-title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 2.5rem;
    font-weight: 400;
    color: #2c2c2c;
    margin: 0 0 10px 0;
    letter-spacing: 1px;
}
.trp-archive-desc {
    font-style: italic;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
}

/* Grid Framework */
.trp-post-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

/* Post Cards Style */
.trp-post-card {
    background: #ffffff;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.trp-thumbnail img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    transition: opacity 0.3s ease;
}
.trp-thumbnail a:hover img {
    opacity: 0.9;
}
.trp-card-body {
    padding: 25px 10px;
}
.trp-meta {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #a3a3a3;
    margin-bottom: 12px;
}
.trp-title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.6rem;
    line-height: 1.3;
    font-weight: 400;
    margin: 0 0 15px 0;
}
.trp-title a {
    color: #2c2c2c;
    text-decoration: none;
    transition: color 0.2s ease;
}
.trp-title a:hover {
    color: #e5937d; /* Soft Peach color accent */
}
.trp-excerpt {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #555555;
    margin-bottom: 20px;
}

/* Clean Custom Read Post Link */
.trp-read-more-wrapper {
    margin-top: 15px;
}
.trp-read-more {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #2c2c2c;
    text-decoration: none;
    border-bottom: 1px solid #2c2c2c;
    padding-bottom: 4px;
    transition: all 0.2s ease;
}
.trp-read-more:hover {
    color: #e5937d;
    border-color: #e5937d;
}

/* Sidebar Styling */
.trp-sidebar {
    width: 100%;
}
.trp-widget {
    margin-bottom: 40px;
    padding: 20px;
    background-color: #fafafa;
    border: 1px solid #f2f2f2;
    text-align: center;
}
.trp-widget-title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.2rem;
    font-weight: 400;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Pagination Structure */
.trp-pagination {
    grid-column: 1 / -1;
    text-align: center;
    margin-top: 40px;
    border-top: 1px solid #f2f2f2;
    padding-top: 30px;
}
.trp-pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: 15px;
}
.trp-pagination a, .trp-pagination .current {
    padding: 8px 16px;
    text-decoration: none;
    color: #2c2c2c;
}
.trp-pagination .current {
    font-weight: bold;
    color: #e5937d;
}

/* Responsive Desktop Layout (Screens 1024px and wider) */
@media (min-width: 1024px) {
    .trp-blog-container {
        flex-direction: row;
        align-items: flex-start;
    }
    .trp-main-content {
        flex: 0 0 73%; /* Takes 73% width */
        max-width: 73%;
    }
    .trp-sidebar {
        flex: 0 0 27%; /* Sidebar takes 27% width */
        max-width: 27%;
        position: sticky;
        top: 40px; /* Sticks to screen on scroll */
    }
    .trp-post-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 Column Grid for Desktop Posts */
        gap: 40px 30px;
    }
}
/* Remove the Elementor Header Footer Blocks duplicate page title */
.archive .hfe-page-title {
    display: none !important;
}

section.post-section {
    margin-bottom: 40px;
    padding: 20px;
    background-color: #fef4f8;
    border-left: 5px solid #e986b2;
    border-radius: 6px;
}

.single-post h1 {
    line-height: 1.5;
	font-size: 1.0rem;
    margin-top: 2em;
    text-decoration: none;
}

/* 1. Base Tagline Formatting */
.single-post .wp-block-quote {
    font-family: "Georgia", serif;
    font-size: 1.5rem;
    line-height: 2.1;
    color: #222;
    margin: 1.5rem 0;
    position: relative;
}

/* Fixed: Targets the strong tag inside the quote's internal paragraph */
.single-post .wp-block-quote p strong:first-of-type::before {
    content: "“";
    font-family: "Georgia", serif;
    font-size: 4.5rem; /* Massive drop cap scaling */
    color: #da3748;    /* A vibrant accent color */
    float: left;       /* Causes the text to wrap around the quote */
    line-height: 0.7;  /* Pulls the quote up so it aligns with the top of the text */
    margin-top: 6px;   /* Fine-tunes vertical placement */
    margin-right: 8px; /* Pushes the text away slightly */
}

/* Fixed: Targets the closing quote inside the quote's internal paragraph */
.single-post .wp-block-quote p strong:first-of-type::after {
    content: "”";
    font-size: 2.5rem; /* Kept slightly oversized for impact, but inline */
    color: #da3748;    /* Matches the opening quote color */
    font-family: "Georgia", serif;
    vertical-align: middle;
    margin-left: 4px;
    line-height: 0;
}

/* Safe and precise logo targeting */
.single-post .wp-block-quote .custom-logo-wrapper {
    margin-left: 6px; 
}

.post-tags {margin-bottom:20px;}

.post-nav-links {font-size:1.5rem;
	             font-weight:600;
			     margin:20px 0px;}



/* ==========================================================================
   INTERACTIVE DROPDOWN SEARCH BAR SYSTEM
   ========================================================================== */
.header-search-wrapper {
    position: relative;
}
.search-toggle-btn {
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    padding: 5px;
}

/* Hide the input box container layout dynamically by default */
.header-search-form-container {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #ffffff;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    padding: 10px;
    z-index: 1000;
    min-width: 260px;
    border-radius: 4px;
    margin-top: 10px;
}

/* Active helper class triggered via JS to display input boxes */
.header-search-form-container.is-active {
    display: block !important;
}

/* Native WP input layouts clean styling overrides */
.header-search-form-container .search-form {
    display: flex;
    align-items: center;
    gap: 5px;
}
.header-search-form-container .search-field {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    font-size: 14px;
    outline: none;
    background: #ffffff;
    color: #333333;
}
.header-search-form-container .search-submit {
    background: #000000;
    color: #ffffff;
    border: none;
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
}
.header-search-form-container .search-submit:hover {
    background: #333333;
}
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal;
}
/* ==========================================================================
   MOBILE SEARCH MAGNIFYING GLASS GLASS ICON FIX
   ========================================================================= */
@media (max-width: 767px) {
    /* 1. Ensure the search wrapper has enough width profile footprint to render icons */
    .grid-search-wrapper {
        min-width: 45px !important;
        min-height: 45px !important;
        position: relative !important;
    }

    /* 2. Inject an explicit magnifying glass background vector straight into the text input box field */
    #grid-search-input,
    .blog-custom-search-form .blog-search-field {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://w3.org' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z' fill='%23999999'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: left 15px center !important; /* Locks it neatly on the left inner padding rail */
        padding-left: 42px !important; /* Creates clear safe space so typing text doesn't overlap the icon */
        text-indent: 0px !important; /* Overrides old -9999px hidden indents to reveal formatting instantly */
    }

    /* 3. Handle smooth spacing transitions when a mobile user taps inside the field box container */
    .grid-search-wrapper:focus-within #grid-search-input,
    .grid-search-wrapper.has-input #grid-search-input,
    .grid-search-wrapper:focus-within .blog-search-field,
    .grid-search-wrapper.has-input .blog-search-field {
        background-position: left 15px center !important;
        padding-left: 42px !important;
    }
}

/* ==========================================================================
   THE RED PEACH: OVERRIDE GHOST REMOVALS FOR SEARCH ICON
   ========================================================================== */

/* This high-specificity rule targets the icon inside the wrapper and forces it to show */
.responsive-grid-container .grid-search-wrapper,
.responsive-grid-container .grid-search-wrapper::before,
.responsive-grid-container .grid-search-wrapper::after,
.responsive-grid-container #grid-search-input,
.responsive-grid-container .blog-custom-search-form .blog-search-field {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

@media (max-width: 767px) {
    /* Forces your background magnifying glass shape to stay fully visible and readable */
    .grid-search-wrapper::before,
    .grid-search-wrapper::after {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }
    
    /* Ensure the wrapper box framework itself stays unhidden */
    .grid-search-wrapper {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }
}


/* ==========================================================================
   NATIVE CONTENT SINGLE TITLE STYLING
   ========================================================================== */
.page-content .entry-header {
    margin-bottom: 30px; /* Gives nice breathing room before the post content starts */
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
	margin-top: 30px;
}
.page-content h1.entry-title {
    font-size: 32px;
    line-height: 1.2;
    color: #e56b9c;
    margin: 0 0 10px 0;
    font-weight: 700;
}

/* ==========================================================================
   SEARCH QUICK FILTERS ROW BAR STYLING
   ========================================================================== */
.search-type-filter-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 0 auto 35px auto;
    max-width: 800px;
    padding: 0 15px;
    flex-wrap: wrap;
}

.search-type-filter-bar .filter-btn {
    background: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #dddddd !important;
    padding: 10px 22px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    border-radius: 0px !important; /* Elegant minimalist flat box borders architecture */
    opacity: 1 !important;
    visibility: visible !important;
}

/* Active and Hover Selection states matching premium e-commerce sites */
.search-type-filter-bar .filter-btn:hover,
.search-type-filter-bar .filter-btn.active {
    background: #000000 !important;
    color: #ffffff !important;
    border-color: #000000 !important;
}

@media (max-width: 768px) {
    .search-type-filter-bar {
        gap: 8px;
        margin-bottom: 25px;
    }
    .search-type-filter-bar .filter-btn {
        padding: 8px 14px !important;
        font-size: 11px !important;
        flex-grow: 1; /* Automatically balances width rows evenly on tight viewports */
    }
}

/* ==========================================================================
   SEARCH RESULT CONTENT TYPE BADGES
   ========================================================================== */
/* ==========================================================================
   THE RED PEACH STANDALONE SEARCH RESULT TYPE BADGES
   ========================================================================== */

/* 1. CRITICAL CONTEXT FIX: Force the individual card wrapper to act as the 0,0 alignment box */
.responsive-grid-container article.grid-item,
.responsive-grid-container .grid-item,
.grid-item-card {
    position: relative !important; /* This locks child absolute elements inside this specific box */
}

/* 2. Position the labels exactly at 45px from the top-left corner margins */
.responsive-grid-container .search-result-badge {
    display: inline-block !important;
    position: absolute !important;
    top: 45px !important;  /* Positioned 45px down from the top edge of the card box */
    left: 45px !important; /* Positioned 45px inside from the left edge of the card box */
    padding: 5px 12px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    z-index: 99 !important; /* Places it cleanly above any post product imagery layers */
    border-radius: 0px !important; /* Minimalist flat box profile design */
    line-height: 1.2 !important;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.08);
    visibility: visible !important;
    opacity: 1 !important;
}

/* 3. Product Badge Background Styling Matrix (Elegant Rich Black) */
.responsive-grid-container .search-result-badge.badge-product {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: none !important;
}

/* 4. Article/Blog Post Badge Background Styling Matrix (Minimal Soft Cream/Light Slate) */
.responsive-grid-container .search-result-badge.badge-post {
    background-color: #f5f5f5 !important;
    color: #333333 !important;
    border: 1px solid #dcdcdc !important;
}

/* 5. Static Page Badge Background Styling Matrix (Soft Brand Slate Blue Tint) */
.responsive-grid-container .search-result-badge.badge-page {
    background-color: #e6f2fc !important;
    color: #1a73e8 !important;
    border: 1px solid #c2e0fc !important;
}
/* ==========================================================================
   THE RED PEACH: HEADER UTILITIES UTILITY TOGGLE CORRECTION
   ========================================================================== */
/* Force visibility ONLY on the interactive trigger elements, NOT the form container box */
.header-utilities,
.header-utilities .header-search-wrapper,
.header-utilities button.search-toggle-btn,
.header-utilities button.search-toggle-btn svg,
.utility-icon {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}


/*HEADER*/

/* ==========================================================================
   THE RED PEACH: COMPLETE STANDALONE PARENT THEME NAVIGATION ENGINE (PART 1)
   ========================================================================== */

/* 1. GLOBAL CORE HEADER WRAPPERS FRAMEWORK */
.site-header {
    width: 100%;
    background-color: rgb(232, 107, 164) !important; /* Locks brand pink backdrop globally */
    border-bottom: 1px solid #e5e5e5;
    font-family: Roboto, sans-serif;
    position: relative;
    z-index: 999;
}

/* 2. BRAND ANNOUNCEMENT BAR CONTROL */
.announcement-bar {
    background-color: rgb(232, 107, 164) !important; 
    color: #ffffff !important;
    text-align: center;
    padding: 8px 15px;
    font-size: 13px;
    letter-spacing: 0.5px;
}
.announcement-bar p {
    margin: 0;
}

/* 3. CORE DRAWER INTERACTION SHIELD
   Completely hides the mobile slide overlay drawer from desktop and inline layouts by default */
/*.peach-custom-nav-drawer-overlay {
    display: none;
    position: fixed !important;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4) !important;
    z-index: 9999999 !important;
}
.peach-custom-nav-drawer-overlay.peach-drawer-active {
    display: block !important;
}
/* Target the standard WordPress custom logo link */
.custom-logo-link img {
  opacity: 1;
  transition: opacity 0.25s ease-in-out;
}

/* Subtle fade effect on hover */
.custom-logo-link intention-hover,
.custom-logo-link:hover img {
  opacity: 0.75;
}
/*    .header-branding img.custom-logo {
		padding:5px;
		background-color:#fff;
		border-radius:8px;
		border: 1.0px outset #bbb;
    }
/* ==========================================================================
   4. DESKTOP MEDIA VIEWPORT ENGINE (Breakpoint: Edge-Aligned at 992px and up)
   ========================================================================== */
@media (min-width: 992px) {
    /* Instantly force collapse mobile layouts elements on wide desktop widths */
    .peach-mobile-controls-row, 
    .peach-custom-nav-drawer-overlay,
    .peach-custom-drawer-inner-box { 
        display: none !important; 
    }

    /* BREAKTHROUGH RESET: Overrides Hello Elementor's 800px constraint to span wide open */
    .site-header .header-inner,
    .header-main-container .header-inner,
    .header-inner {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 1200px !important; /* Math-centers your 1200px site content grid bounds */
        margin: 0 auto !important;
        padding: 5px 15px !important;
        box-sizing: border-box !important;
        background: transparent !important;
    }

    /* Central Desktop Menu Navigation Box Wrapper */
    .header-navigation {
        display: flex !important;
        align-items: center !important;
        flex: 1 1 auto !important;
        margin: 0 30px !important;
        width: auto !important;
    }

    /* Forces nested implicit WordPress container wrappers to map fully inline */
    .header-navigation div,
    .header-navigation .peach-desktop-menu-wrap,
    .header-navigation ul,
    .main-menu {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* DESKTOP LOGO SCALE LIMITATION CONFIGURATION */
    .header-branding {
        max-width: 240px;
        flex: 0 0 auto;
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
    }
    .header-branding a.custom-logo-link {
        display: inline-block !important;
        width: auto !important;
    }
    .header-branding img.custom-logo {
        display: block !important;
        max-width: 200px !important; /* Shrinks the massive SVG beautifully */
        height: auto !important;
        object-fit: contain !important;
    }

    /* Desktop list item links text alignment styling elements */
    .header-navigation li {
        position: relative !important;
        margin: 0 16px !important;
        display: inline-block !important;
        white-space: nowrap !important;
    }
    .header-navigation li a {
        color: #ffffff !important; /* Premium clean white text color on desktop rows */
        text-decoration: none !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        padding: 10px 0 !important;
        transition: color 0.2s ease;
    }
    .header-navigation li a:hover {
        color: #000000 !important; /* Contrast rich black hover states accent */
    }

    /* DESKTOP DROPDOWN ACCORDIONS MOUSE OVER TRIPS */
    .header-navigation ul.sub-menu {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        background: #ffffff !important;
        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1) !important;
        padding: 15px !important;
        min-width: 220px !important;
        z-index: 999 !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    .header-navigation li:hover > ul.sub-menu {
        display: flex !important;
    }
    .header-navigation ul.sub-menu li {
        width: 100% !important;
        margin: 0 !important;
    }
    .header-navigation ul.sub-menu a {
        color: #666666 !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        padding: 5px 0 !important;
    }
    .header-navigation ul.sub-menu a:hover {
        color: #000000 !important;
    }

    /* Keep Search Toggles and Shopping Cart Icons locked on the far right content rail */
    .header-utilities {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 20px;
        flex: 0 0 auto;
    }
    .utility-icon {
        color: #ffffff !important;
    }
    .utility-icon:hover {
        color: #000000 !important;
    }
    .cart-count {
        position: absolute; top: -8px; right: -10px;
        background: #ffffff !important; color: #000000 !important;
        font-size: 10px; font-weight: bold; border-radius: 50%;
        padding: 2px 6px; line-height: 1;
    }
    
    body.peach-lock-scrolling {
        overflow: auto !important;
    }
}
/* ==========================================================================
   5. MOBILE MEDIA BREAKPOINT ENGINE (Breakpoint: Locked Seamlessly at 991px and down)
   ========================================================================== */
@media (max-width: 991px) {
    /* Collapse the desktop links and menu blocks entirely on smaller device display bounds */
    .header-navigation { 
        display: none !important; 
    }

    /* ==========================================================================
       THE RED PEACH: FULL-WIDTH SCREEN BREAKTHROUGH OVERRIDE 
       Overrides theme.css 500px and 600px constraints to smash the white gaps!
       ========================================================================== */
    .site-header .header-inner, 
    .header-main-container .header-inner,
    .header-main-container,
    .header-inner {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        
        /* Forces the container wide open flush against the device margins */
        width: 100% !important;
        max-width: 100% !important; 
        min-height: 50px !important;
        padding: 0px 8px 0px 2px !important; !important;
        background: transparent !important; /* Blends flawlessly into the global pink site-header */
        box-sizing: border-box !important;
    }

    /* ... Keep the rest of your Part 2 mobile CSS rules (Lanes 1, 2, 3, etc.) exactly as they are ... */


    /* MOBILE LANE 1: Hamburger Menu Trigger (Snapped tight to the far left margin wall) */
    .peach-mobile-controls-row {
        flex: 1 !important; /* Symmetric balance matches column 3 to hold logo in dead center */
        display: flex !important;
        justify-content: flex-start !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    button.peach-custom-hamburger-open {
        background: transparent !important; border: none !important;
        width: 30px; height: 22px;
        display: flex; flex-direction: column; justify-content: space-between;
        padding: 0; box-shadow: none; margin: 0 !important;
    }
    button.peach-custom-hamburger-open .hamburger-bar-line {
        display: block; width: 100%; height: 3px; 
        background-color: #ffffff !important; /* White minimalist lines to stand out beautifully on pink */
    }

    /* MOBILE LANE 2: Brand Logo (Mathematically center-locked in the middle space) */
    .header-branding {
        flex: 0 0 auto !important;
        max-width: 200px !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
@media (max-width: 991px) {
    .header-branding img.custom-logo {
        display: block !important;
        max-width: 100% !important;
        height: 100% !important;
        padding-bottom: 2px;
    }
}

    /* MOBILE LANE 3: Right Utility Icons (Snapped tight to the far right margin wall) */
    .header-utilities {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 16px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .header-utilities .utility-icon, .header-utilities .cart-contents, .header-utilities svg {
        display: inline-flex !important; align-items: center !important; justify-content: center; 
        color: #ffffff !important; /* White utilities text mapping brand styling parameters */
    }
    .header-utilities .cart-contents { 
        position: relative !important; text-decoration: none !important; 
    }
    .header-utilities .cart-count {
        position: absolute !important; top: -6px; right: -8px;
        font-size: 10px; font-weight: 600; line-height: 1; 
        color: #000000 !important; background: #ffffff !important;
        padding: 1px 4px; border-radius: 50%;
    }

    /* Safe search dropdown form drawer positioning below the main banner line track */
    .header-search-form-container {
        position: absolute !important; top: 100% !important; right: 20px !important;
        width: 280px; background: #ffffff !important; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); z-index: 999999;
    }

    /* ==========================================================================
       6. MOBILE CUSTOM SLIDING DRAWER MENU NAVIGATION ACCORDION LINKS
       ========================================================================== */
    .peach-custom-drawer-inner-box {
        position: absolute; top: 0; right: -300px;
        width: 300px; height: 100%; background: #ffffff !important;
        padding: 60px 25px 80px 25px; box-sizing: border-box;
        transition: right 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); overflow-y: auto;
    }
    .peach-custom-nav-drawer-overlay.peach-drawer-active .peach-custom-drawer-inner-box {
        right: 0 !important;
    }
    button.peach-custom-hamburger-close {
        position: absolute; top: 15px; right: 20px;
        background: transparent !important; border: none !important;
        font-size: 32px; color: #000000 !important; cursor: pointer; line-height: 1; padding: 5px;
    }
}
/* ==========================================================================
   THE RED PEACH: HIGH-SPECIFICITY OVERRIDE SHIELD FOR HELLO ELEMENTOR
   Staples the mobile header to 100% full width and smashes the side gaps
   ========================================================================== */
@media (max-width: 991px) {
    /* We match their exact multi-class selector string to override their specificity score */
    .page-header .entry-title, 
    .site-footer .footer-inner, 
    .site-footer:not(.dynamic-footer), 
    body:not([class*=elementor-page-]) .site-header .header-inner, 
    .site-header:not(.dynamic-header) .header-inner,
    .site-header .header-inner,
    body:not([class*=elementor-page-]) .site-main {
        max-width: 100% !important; /* Completely shatters the 500px and 600px width locks */
        width: 100% !important;
        background: transparent !important;
    }
}
/* ==========================================================================
   THE RED PEACH: BULLETPROOF TABLET REINFORCEMENT OVERRIDE
   Matches Hello Elementor's exact body negation logic to smash the side gaps
   ========================================================================== */
@media (max-width: 991px) {
    /* FIXED: Added body.search-results layout triggers to bypass search grid page clashes */
    body:not([class*=elementor-page-]) .site-header .header-inner,
    body:not([class*=elementor-page-]) .header-main-container .header-inner,
    body.search-results .site-header .header-inner,
    body.search-results .header-inner,
    .site-header.header-full-width .header-inner,
    .header-inner {
        max-width: 100% !important; /* Forces the header wide open flush against display edges */
        width: 100% !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    .site-header, 
    .header-main-container {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   THE RED PEACH: SEARCH RESULTS PAGE FULL-HEIGHT MARGIN OVERRIDE SHIELD
   ========================================================================== */

/* 1. Smash full-height page body constraints across all desktop, tablet, and mobile views */
body.search-results,
body.search-results #page,
body.search-results .site,
body.search-results .site-header,
body.search-results .header-main-container {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 2. SPECIFIC INNER HEADER BREAKTHROUGH: Strips side gaps forcing the pink bar edge-to-edge */
body.search-results .site-header .header-inner,
body.search-results .header-main-container .header-inner,
body.search-results .header-inner {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

/* 3. DESKTOP MAX-WIDTH RESTORATION: While the pink header background must run 100% wide, 
   we keep your inner text menu links safely aligned with your core content grids on wide viewports */
@media (min-width: 992px) {
    body.search-results .site-header .header-inner,
    body.search-results .header-main-container .header-inner {
        max-width: 1200px !important; /* Math-centers your desktop links track bounds beautifully */
        margin: 0 auto !important;
    }
}

/* ==========================================================================
   THE RED PEACH: USER-AGENT EXTENSION CLICK BREAKTHROUGH OVERRIDE
   ========================================================================== */
.search-toggle-btn,
button.search-toggle-btn,
.utility-icon {
    pointer-events: auto !important; /* Forces the browser to pass clicks through to JavaScript */
    cursor: pointer !important;
    display: inline-flex !important;
}
/* ==========================================================================
   THE RED PEACH: UNIVERSAL DROPDOWN SEARCH VISIBILITY FIX
   ========================================================================== */

/* 1. Global Reset Hidden State - Keeps the form tucked away until clicked */
.header-search-form-container {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    width: 300px !important;
    background-color: #ffffff !important;
    padding: 15px !important;
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15) !important;
    border-radius: 4px !important;
    border: 1px solid #e5e5e5 !important;
    z-index: 999999 !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

/* 2. THE VISIBILITY ENGINE: Forces the tray wide open when your JS injects the active class */
.header-search-form-container.active,
.header-search-wrapper.open .header-search-form-container {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 3. Style the internal form text fields to display with beautiful clarity */
.header-search-form-container .search-form {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.header-search-form-container .search-form label {
    flex: 1 !important;
    margin: 0 !important;
}

.header-search-form-container .search-field {
    width: 100% !important;
    height: 40px !important;
    padding: 8px 12px !important;
    border: 1px solid #cccccc !important;
    border-radius: 4px !important;
    background-color: #ffffff !important;
    color: #333333 !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
}

.header-search-form-container .search-submit {
    height: 40px !important;
    padding: 0 16px !important;
    background-color: #000000 !important; /* Premium branding contrast black submit button */
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease;
}

.header-search-form-container .search-submit:hover {
    background-color: rgb(232, 107, 164) !important; /* Brand peachy pink hover pop accent */
}

/* Screen reader text alignment safeguard */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}




/* ==========================================================================
   THE RED PEACH: SEARCH ARCHIVE CONTENT MARGIN SEPARATION FIX
   ========================================================================== */

/* 1. Reset root canvas wrappers to keep the header full-width */
body.search-results {
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. ISOLATE MAIN CONTENT BODY: Forces your search results loop to sit 
   inside a beautifully proportioned, centered layout box */
.search-results-content-wrap,
.archive-content-wrap,
.generic-archive-page-layout .archive-content-wrap {
    width: 100% !important;
    max-width: 1200px !important; /* Locks body text/grids to your core layout width */
    margin: 40px auto !important; /* Centers the content box and creates premium vertical breathing room */
    padding: 0 20px !important;  /* Guards cards from touching screen borders on mobile devices */
    box-sizing: border-box !important;
}

/* Clean post card header title spacing */
.page-header-archive-title {
    margin-bottom: 30px !important;
    text-align: left;
}
.page-header-archive-title h1 {
    font-size: 24px;
    font-weight: 700;
    color: #000000;
}


/* FOOTER */
/* ==========================================================================
   THE RED PEACH: STANDALONE PRODUCTION FOOTER PALETTE
   ========================================================================== */
.trp-live-footer {
    background-color: #e56b9c !important; /* The beautiful brand signature pink */
    padding: 70px 40px 60px 40px !important;
    font-family: 'Montserrat', sans-serif !important;
    color: #ffffff !important;
    overflow: hidden;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
}

.trp-footer-wrap {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr 1.3fr; /* 3-column split mapping exactly to your clip */
    gap: 60px;
    align-items: start;
}

/* --- Brand Typography & Bio --- */
.trp-foot-logo-box {
    max-width: 180px;
    margin-bottom: 25px;
}

.trp-foot-logo {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.trp-foot-bio {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    margin: 0 0 25px 0 !important;
    text-align: left;
}

/* --- Social Icons Block --- */
.trp-foot-socials {
    display: flex;
    gap: 25px;
    margin-bottom: 35px;
    justify-content: flex-start;
}

.trp-foot-socials a {
    color: #ffffff !important;
    width: 20px;
    height: 20px;
    display: inline-block;
    transition: opacity 0.2s ease;
}

.trp-foot-socials a:hover {
    opacity: 0.8;
}

.trp-foot-socials svg {
    width: 100%;
    height: 100%;
}

.trp-foot-copy {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin: 0 !important;
    text-align: left;
}

/* --- Center Layout / Contact Form Content --- */
.trp-foot-col {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.trp-foot-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 15px 0 !important;
    text-transform: none !important;
    letter-spacing: 0px !important;
}

.trp-title-margin {
    margin-top: 35px !important;
}

.trp-foot-address {
    font-size: 13.5px !important;
    line-height: 1.7 !important;
    color: #ffffff !important;
    margin: 0 !important;
    font-weight: 500 !important;
}

.trp-foot-email {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    word-break: break-all;
}

/* --- Framed Newsletter Container --- */
.trp-newsletter-frame {
    border: 1px solid rgba(255, 255, 255, 0.7) !important; /* Outer white trace outline line */
    padding: 30px;
    border-radius: 0px !important;
    margin-top: 5px;
}

.trp-input-label {
    display: block;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    margin-bottom: 10px !important;
}

.trp-email-field {
    width: 100% !important;
    background-color: #ffffff !important;
    border: none !important;
    outline: none !important;
    border-radius: 30px !important; /* Smooth pill-shaped field inside your clip */
    padding: 14px 20px !important;
    font-size: 13px !important;
    color: #333333 !important;
    margin-bottom: 20px !important;
    box-sizing: border-box !important;
}

.trp-email-field::placeholder {
    color: #999999 !important;
}

/* --- Pill Shape Submit Button --- */
.trp-submit-pill {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: none !important;
    outline: none !important;
    border-radius: 30px !important;
    padding: 12px 30px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease;
}

.trp-submit-pill:hover {
    background-color: #1a1a1a !important;
}

/* --- Responsive Layout Breaks for Mobile Phones --- */
@media (max-width: 991px) {
    .trp-footer-wrap {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    .trp-foot-news {
        grid-column: span 2;
    }
}

@media (max-width: 767px) {
    .trp-live-footer {
        padding: 50px 25px 45px 25px !important;
    }
    .trp-footer-wrap {
        grid-template-columns: 1fr;
        gap: 45px;
    }
    .trp-foot-news {
        grid-column: span 1;
    }
    .trp-newsletter-frame {
        padding: 20px;
    }
}

/* ==========================================================================
   THE RED PEACH: STANDALONE POST TAG PILLS TYPOGRAPHY
   ========================================================================== */
.theredpeach-post-tags-wrapper { margin: 30px 0px}

.theredpeach-post-tags-wrapper a {
    display: inline-block !important;
    background-color: #f5f5f5 !important;
    color: #333333 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 6px 16px !important;
    margin: 4px 6px 4px 0 !important;
    border-radius: 20px !important; /* Smooth pill-shaped links matching your style filters */
    text-decoration: none !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

.theredpeach-post-tags-wrapper a:hover {
    background-color: #e56b9c !important; /* Changes to your brand signature pink on hover */
    color: #ffffff !important;
}
/* ==========================================================================
   THE RED PEACH: DESKTOP HEADER FLUSH RIGHT & SUBMENU PROTECTION (PART 1)
   ========================================================================== */
@media (min-width: 992px) {
    /* 1. Force the master row container to push elements strictly to the outer bounds */
    .header-inner,
    .site-header .header-inner,
    .header-main-container .header-inner {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important; /* Forces Logo Left, Utilities Flush Right */
        width: 100% !important;
        max-width: 1200px !important; /* Centers your header content bounds cleanly */
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    /* 2. THE SPACER DRIVER: Force the navigation block to take up the fluid middle space */
    .header-navigation {
        display: flex !important;
        align-items: center !important;
        flex: 1 1 auto !important; /* Dynamically expands to fill available center space */
        margin: 0 40px !important; /* Elegant breathing room layout separation */
        width: auto !important;
    }

    /* Ensure deep implicit WordPress container wrappers span fully inline */
    .header-navigation div,
    .header-navigation .peach-desktop-menu-wrap,
    .header-navigation ul,
    .main-menu {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important; /* Keeps page names loading neatly near the logo */
        width: 100% !important;
    }

    /* 3. FLUSH RIGHT MARGIN LOCK: Rigid anchor for your search button and shopping cart icons */
    .header-utilities {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex: 0 0 auto !important; /* Strictly forbids the icons box from squishing or sliding left */
        margin-left: auto !important; /* Double-lock guarantees it snaps tight to the right margin wall */
    }
}
/* ==========================================================================
   THE RED PEACH: DESKTOP SUBMENU BOX CONTAINMENT (PART 2)
   ========================================================================== */
@media (min-width: 992px) {
    /* 1. Establish an absolute hover coordinate boundary tracking point for each link item */
    .header-navigation ul.main-menu > li,
    .header-navigation ul.menu-main-menu-1 > li,
    .header-navigation ul > li {
        position: relative !important;
    }

    /* 2. ABSOLUTE SUBMENU ALIGNMENT ENGINE:
       Forces nested link lists to stack vertically on their own floating plane */
    .header-navigation ul.sub-menu,
    .header-navigation ul.main-menu ul.sub-menu,
    .header-navigation ul ul.sub-menu {
        display: none !important;
        position: absolute !important;
        top: 100% !important; /* Pulls the drop tray down flush right below the text bar */
        left: 0 !important;   /* Anchors the box square with the parent menu word margin */
        background-color: #ffffff !important; /* Premium rich white block backdrop */
        box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12) !important; /* Soft depth layers */
        padding: 15px 20px !important;
        
        /* THE CRITICAL WIDTH CORE: Reserves ample space so links never squeeze or wrap */
        min-width: 260px !important; 
        max-width: 320px !important;
        width: max-content !important; /* Dynamically sizes to fit your longest menu string titles */
        
        z-index: 99999 !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        list-style: none !important;
        margin: 0 !important;
        border-radius: 4px !important;
        box-sizing: border-box !important;
    }

    /* 3. Re-activate the dropdown list block smoothly into view on mouse-over hover steps */
    .header-navigation ul.main-menu li:hover > ul.sub-menu,
    .header-navigation ul li:hover > ul.sub-menu {
        display: flex !important; 
    }

    /* 4. INDIVIDUAL NESTED DROPDOWN LINK CARDS: Strips parent formatting crunches */
    .header-navigation ul.sub-menu li {
        width: 100% !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    .header-navigation ul.sub-menu li a {
        display: block !important;
        width: 100% !important;
        padding: 6px 0 !important;
        color: #555555 !important; /* High contrast soft-grey legible text profiles */
        font-size: 14px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        text-transform: none !important; /* Overrides uppercase style leaks */
        
        /* NO-OVERFLOW SECURE MATRIX */
        white-space: normal !important; /* Allows super-long text names to flow safely into a clean 2nd line if needed */
        word-break: normal !important;
        line-height: 1.4 !important;
        transition: color 0.2s ease !important;
    }

    /* Hover pops accent indicator highlighting nested links items */
    .header-navigation ul.sub-menu li a:hover {
        color: rgb(232, 107, 164) !important; /* Signature brand peachy pink pop focus */
        background: transparent !important;
    }
}
/* ==========================================================================
   THE RED PEACH: PARENT TRACK CONTAINER WIDTH EXPANSION
   Forces the structural layout rows wide open on wide viewport screens
   ========================================================================== */
@media (min-width: 992px) {
    /* 1. MASTER ROW STRETCH: Forces all outer wrapper tags to occupy 100% full screen width */
    .site-header,
    .header-main-container,
    .site-header .header-main-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    /* 2. INNER RAIL CENTERING: Forces the inner row shell to fill its parent container 
       and expand cleanly up to your master 1200px site content grid boundary limit */
    .header-inner,
    .site-header .header-inner,
    .header-main-container .header-inner {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important; /* Forces Logo Left, Utilities Flush Right */
        flex-wrap: nowrap !important;
        
        width: 100% !important;
        max-width: 1200px !important; /* Math-centers your elements nicely matching your content */
        margin: 0 auto !important; /* Automatically balances margins to center the layout box */
        padding: 5px 24px !important;
        box-sizing: border-box !important;
		        min-height: 60px;
    }

    /* 3. CENTER SPACER: Drives your navigation link menu links inline */
    .header-navigation {
        display: flex !important;
        align-items: center !important;
        flex: 1 1 auto !important; /* Fills all available middle space to drive icons right */
        margin: 0 40px !important;
        width: auto !important;
    }

    /* 4. FLUSH RIGHT LOCK: Rigid anchor for your search button and shopping cart icons */
    .header-utilities {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex: 0 0 auto !important; /* Strictly forbids the icons box from squishing or sliding left */
        margin-left: auto !important; /* Double-lock guarantees it snaps tight to the right margin wall */
    }
}
/* ==========================================================================
   THE RED PEACH: RESPON_SIVE LAYOUT BALANCE ENGINE
   ========================================================================== */

/* 1. CONTENT MARGIN RESTORATION
   Applies clean horizontal content margins to your main block loops on all sub-pages */
.site-main-full-width-fluid {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Localizes text tracking boundaries inside your main page template layers */
.site-main-full-width-fluid .entry-content,
.site-main-full-width-fluid .page-content,
.site-main-full-width-fluid article,
.site-main-full-width-fluid .post-content-wrap {
    max-width: 1200px !important; /* Locks text readability to your core grid width */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important; /* Restores beautiful, clean content side margins */
    padding-right: 24px !important;
    box-sizing: border-box !important;
}

/* Breakout layout protection exception: Keeps your massive Elementor full-width homepage sections wide open */
.site-main-full-width-fluid [data-elementor-type="wp-page"] .elementor-section-stretched,
.site-main-full-width-fluid .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 100% !important;
}
/* ==========================================================================
   THE RED PEACH: TABLET SHOP CONTENT MARGIN RECOVERY PRO-SHIELD
   Locks a beautiful side padding buffer across the 576px to 991px zone
   ========================================================================== */
@media (min-width: 576px) and (max-width: 991px) {
    /* Targets your core main content elements, blog archives, and WooCommerce shop wrappers */
    body .site-main,
    body .site-main-full-width-fluid,
    body.archive .site-main,
    body.woocommerce-page .site-main,
    .search-results-content-wrap,
    .archive-content-wrap {
        width: 100% !important;
        max-width: 100% !important;
        /* Restores your professional layout margins, overriding theme.css inline padding cuts */
        padding-left: 24px !important;
        padding-right: 24px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

     body .site-main-full-width-fluid
{
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
   /* Keeps individual inner product grid frames cleanly separated from your screen bounds */
    .site-main > .elementor,
    .site-main > .entry-content,
    .woocommerce-products-header,
    .products.columns-3 {
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
/* ==========================================================================
   THE RED PEACH: GLOBAL ARCHIVE & BLOG DESKTOP MARGIN ENFORCER
   Forces text loops and post grids to honor your site content boundaries
   ========================================================================== */
@media (min-width: 992px) {
    /* We match their exact multi-class selector string to override their specificity score */
    body:not([class*=elementor-page-]) .site-main,
    body:not([class*=elementor-page-]) .generic-archive-layout,
    body.archive .site-main,
    body.blog .site-main,
    .generic-archive-layout,
    .archive-content-wrap {
        width: 100% !important;
        max-width: 1200px !important; /* Math-centers your grid bounds matching your content headers */
        margin-left: auto !important;
        margin-right: auto !important;
   /*     margin-top: 40px !important; /* Generates a professional spacing margin under your pink header */
        margin-bottom: 60px !important;
        padding-left: 24px !important; /* Establishes perfect side breathing room on wide monitors */
        padding-right: 24px !important;
        box-sizing: border-box !important;
        display: block !important;
    }
    
    /* Ensure internal loop components fill the 1200px column boundary cleanly */
    .generic-archive-layout .post-grid,
    .generic-archive-layout .responsive-grid-container {
        width: 100% !important;
        max-width: 100% !important;
    }
}
/* ==========================================================================
   THE RED PEACH: PREMIUM DRIFT-FREE SHOPPING BASKET BADGE
   ========================================================================== */
.header-utilities .cart-contents {
    position: relative !important;
    display: inline-flex !important;
}

.header-utilities .cart-count.sub-badge-count-track {
    position: absolute !important;
    top: -6px !important;    /* Pins the pill badge cleanly to the top-right corner of the icon */
    right: -10px !important;
    background-color: #000000 !important; /* Premium rich black badge fill */
    color: #ffffff !important;           /* High contrast crisp white number text */
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    border-radius: 50% !important;        /* Keeps the counter badge perfectly circular */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    z-index: 10 !important;
}
/* ==========================================================================
   THE RED PEACH: RESPON_SIVE LAYOUT BALANCE GRID ENGINE
   ========================================================================== */
@media (min-width: 992px) {
    /* 1. Rigidly pin the custom header bar track to the top of the browser view window */
    .site-header,
    body:not([class*=elementor-page-]) .site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 999999 !important;
        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.08) !important;
    }

    /* ==========================================================================
       DYNAMIC MARGIN HANDOFF MODULE
       ========================================================================== */

    /* CONDITION A: DEFAULT PAGES & SEARCH RESULTS
       Automatically applies a secure top margin padding buffer so standard text 
       and article lists are never cut off by the fixed navigation bar. */
    .site-main-full-width-fluid,
    .search-results-page-layout,
    .generic-archive-layout,
    body:not(.page-template-template-flush-top) .site-main {
        margin-top: 60px !important; /* Footprint calculation total matching your bars thickness */
        box-sizing: border-box !important;
    }

    /* CONDITION B: SPECIAL FLUSH TOP PAGES
       The exact millisecond the 'Full Width (Flush Top)' template activates, this rule 
       neutralizes the spacing buffer, pulling your hero images cleanly under the bar line. */
    .site-main-flush-top,
    body.page-template-template-flush-top .site-main {
        margin-top: 60px !important; /* Sets a tight 50px clearance so hero images run completely flush right */
        margin-left:0px;
		margin-right:0px;
		padding:0px;
		padding-inline-start:0px;
		padding-inline-end:0px;
	}
}

/* ==========================================================================
   THE RED PEACH: NOSCRIPT FALLBACK PAGINATION STYLING
   ========================================================================== */
.theredpeach-fallback-pagination-track .page-numbers {
    display: inline-block !important;
    padding: 8px 16px !important;
    margin: 0 4px !important;
    background-color: #f5f5f5 !important;
    color: #333333 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    font-family: 'Montserrat', sans-serif !important;
}

.theredpeach-fallback-pagination-track .page-numbers.current {
    background-color: #000000 !important; /* Premium rich black highlight matching your theme bars */
    color: #ffffff !important;
}

.theredpeach-fallback-pagination-track .page-numbers:hover:not(.current) {
    background-color: #e56b9c !important; /* Smooth signature brand pink pop focus color on hover step */
    color: #ffffff !important;
}
/* ==========================================================================
   1. Base Core & Mobile Layout (Default: Under 600px Screen Width)
   ========================================================================== */
.full-width-hero {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    height: 100vw; /* Perfect square container matching your image crop */
    max-height: 450px; /* Caps the height on taller smartphones */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #ffffff;
	margin-bottom:20px;
}

.hero-background-image, 
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-background-image picture,
.hero-background-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    background: rgba(0, 0, 0, 0.4); /* Subtle dark layer so white text pops */
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 0 20px;
    max-width: 900px;
}

.full-width-hero .entry-title {
    color: #ffffff;
    font-size: 1.8rem;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   2. Desktop & Tablet Styles (600px Screen Width and Up)
   ========================================================================== */
@media (min-width: 600px) {
    
    /* CASE A: If the post HAS a suitable wide banner asset */
    .has-desktop-banner.full-width-hero {
        height: 450px; /* Switch from square to widescreen banner layout */
    }
    
    .has-desktop-banner .entry-title {
        font-size: clamp(2.2rem, 4vw, 3.5rem);
    }

    /* CASE B: If the post ONLY has a legacy square asset (Reverts to standard text) */
    .no-desktop-banner.full-width-hero {
        position: static;
        width: auto;
        margin: 2rem 0;
        height: auto;
        color: #333333;
        display: block;
    }
    
    .no-desktop-banner .hero-overlay,
    .no-desktop-banner .hero-background-image {
        display: none; /* Safely strips out empty backgrounds and overlay blocks */
    }
    
    .no-desktop-banner .hero-content {
        text-align: left;
        padding: 0;
        max-width: 100%;
    }
    
    .no-desktop-banner .entry-title {
        color: #333333; /* Resets text back to dark standard theme styling */
        text-shadow: none;
        font-size: clamp(2.2rem, 4vw, 3.5rem);
    }
}

/* ==========================================================================
   3. Pure Text Post Fallback (No Featured Image Whatsoever)
   ========================================================================== */
.standard-text-header {
    margin: 2rem 0;
}

.standard-text-header .entry-title {
    color: #333333;
    font-size: clamp(1.8rem, 4vw, 3.5rem);
    margin: 0;
}

/* ==========================================================================
   Ultra-Slow, Calm On-Load Animations
   ========================================================================== */

/* 1. Target the text container inside the hero */
.full-width-hero .hero-content {
    /* Duration increased to 2.8s for half the speed */
    animation: elegantFadeInUp 2.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.6s; /* Holds the start for a peaceful pause */
    opacity: 0;
    will-change: transform, opacity;
}

/* 2. Target the title specifically to preserve the staggered depth */
.full-width-hero .entry-title {
    /* Duration increased to 2.8s for half the speed */
    animation: elegantLetterReveal 2.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.9s; /* Follows softly behind the main container */
    opacity: 0;
}

/* 3. The dark overlay dims quietly in the background */
.full-width-hero .hero-overlay {
    /* Duration increased to 3.2s for an exceptionally gentle blend */
    animation: gentleOverlayFade 3.2s ease forwards;
    animation-delay: 0.2s; 
    opacity: 0;
}

/* ==========================================================================
   Animation Keyframes (The Movement Logic)
   ========================================================================== */

/* ==========================================================================
   Updated Keyframes with Scaled Mobile Travel Distance
   ========================================================================== */

/* The Container: Uses 'vh' (viewport height) instead of fixed pixels */
@keyframes elegantFadeInUp {
    0% {
        opacity: 0;
        /* Using 4vh means the text travel distance automatically scales 
           proportional to the height of the phone or desktop screen */
        transform: translateY(4vh); 
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* The Title: A subtle final cushioning layer */
@keyframes elegantLetterReveal {
    0% {
        opacity: 0;
        transform: translateY(1.5vh);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* The Overlay: Fluid, quiet fade into view */
@keyframes gentleOverlayFade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.4;
    }
}



/* ==========================================================================
   THE RED PEACH: PREMIUM HIGH-PERFORMANCE MOBILE ELASTIC STICKY FILTERS
   ========================================================================== */
/*@media (max-width: 991px) {
    /* 1. Base style setup for category buttons row container */
/*    .category-filters {
        position: static;
        width: 100% !important;
        background-color: #transparent !important;
        z-index: 99999 !important;
        transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; /* Smooth glide translation animation */
/*        box-sizing: border-box !important;
    }

    /* 2. THE HIDDEN STATE (SCROLLING DOWN)
       Slides the filter bar upward completely beneath your pink fixed header layout */
/*    .category-filters.elastic-sticky-hidden {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        transform: translateY(-100%) !important; 
        box-shadow: none !important;
        padding: 12px 16px !important;
    }

    /* 3. THE REAPPEAR STICKY STATE (SCROLLING UP)
       Snaps the pills into view directly below your fixed header row */
/*    .category-filters.elastic-sticky-visible {
        position: fixed !important;
        top: 60px !important; /* FIXED COORDINATES: Sits flush below the header bar margin line */
/*        left: 0 !important;
        transform: translateY(0) !important;
        padding: 12px 16px !important;
        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.05) !important; /* Minimal drop shadow layer anchor */
       /* border-bottom: 1px solid #f5f5f5 !important;*/
    }
}
/* ==========================================================================
   THE RED PEACH: COORDINATED DUAL-ELASTIC MOBILE NAVIGATION STICKY INDEX
   PRODUCTION COMPLIANT: Clean CSS cascade ruleset with no structural bloat
   ========================================================================== */
@media (max-width: 991px) {
    
    /* 1. BASE LOAD STATE: Standard fluid positioning at the top of the page canvas */
    .site-header {
        position: static;
        width: 100%;
        z-index: 999999;
        transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        box-sizing: border-box;
    }

    /* 2. MAIN HEADER: SCROLLING DOWN STATE
       The active state class naturally overrides static positioning via the cascade layout rules */
    .site-header.header-sticky-hidden {
        position: fixed;
        top: 0;
        left: 0;
        transform: translateY(-100%);
        box-shadow: none;
    }

    /* 3. MAIN HEADER: SCROLLING UP STATE
       Snaps the navigation bar cleanly back to the top window frame */
    .site-header.header-sticky-visible {
        position: fixed;
        top: 0;
        left: 0;
        transform: translateY(0);
        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.05);
    }

    /* 4. CATEGORY FILTERS SECURE SYNC POSITION:
       Maintains structural clearance, sitting flush right below your header bar footprint */
    .category-filters.elastic-sticky-visible {
        position: fixed;
        top: 60px; /* Precise clearance matching your brand header bar height */
        left: 0;
        transform: translateY(0);
    }
}

/* ==========================================================================
   THE RED PEACH: COMPLIANT PURE MOBILE NAVIGATION ACCORDION ENGINE
   Clean tree selectors establish native styling authority with 0% important clutter.
   ========================================================================== */

.peach-custom-mobile-navigation-menu ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    width: 100%;
}

.peach-custom-mobile-navigation-menu li { 
    border-bottom: 1px solid #f5f5f5; 
    width: 100%;
    display: block;
    position: relative;
}

/* Full-width flex layout block distribution ensures robust 55px click bounding box target zones */
.peach-custom-mobile-navigation-menu li a {
    display: flex; 
    align-items: center; 
    justify-content: space-between; /* Automatically pushes the drop caret to the far right edge! */
    width: 100%;
    color: #000000; 
    text-decoration: none; 
    font-size: 15px; 
    font-weight: 500;
    padding: 14px 0; 
    box-sizing: border-box;
}

/* The structural far-right 55px wide touch target zone */
.peach-custom-mobile-navigation-menu .menu-item-has-children > a .dropdown-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 55px; /* Matches your JavaScript calculation physics exactly */
    height: 100%;
    min-height: 24px;
    font-size: 10px;
    color: #777777;
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    user-select: none;
    pointer-events: auto;
}

/* Premium caret rotation tracking animation trigger on menu expand */
.peach-custom-mobile-navigation-menu li.peach-submenu-expanded > a .dropdown-icon {
    transform: rotate(180deg);
}

/* THE ACCORDION CONTROLLER: Clean values let your JavaScript modify style rules freely */
.peach-custom-mobile-navigation-menu .sub-menu {
    max-height: 0; 
    opacity: 0; 
    overflow: hidden; 
    padding-left: 20px; /* Indents child menu paths cleanly below parent text rows */
    transition: max-height 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s ease;
    box-sizing: border-box;
    width: 100%;
}

/* Lifts the styling limits on expansion pass to give your script complete height control */
.peach-custom-mobile-navigation-menu li.peach-submenu-expanded > .sub-menu {
    max-height: none; /* Safely clears the max-height value so JS inline styles rule supreme */
    opacity: 1; 
    padding-bottom: 12px;
}

.peach-custom-mobile-navigation-menu .sub-menu li { 
    border-bottom: none; 
}

.peach-custom-mobile-navigation-menu .sub-menu li a { 
    padding: 10px 0; 
    font-size: 14px; 
    color: #555555; 
    justify-content: flex-start; /* Sub-links don't require far-right edge distributions */
}