/*

*/


/* ==========================================================================
   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;
}

/* ==========================================================================
   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 */
}

/* 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: 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;
    }


/* ==========================================================================
   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);
    }


/* ==========================================================================
   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 */
}