/* Import Classy Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');

/* Apply to Headings (The Classy Look) */
h1, h2, h3, h4, .woocommerce-loop-product__title, .main-navigation a {
    font-family: 'Playfair Display', serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
}

/* Apply to Body Text, Prices, and Buttons (The Simple Look) */
body, p, span, li, .price, .button, input {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 400;
    line-height: 1.6;
    color: #4a0729; /* Using that Deep Plum we discussed for better readability */
}

/* Special Styling for Prices to look Premium */
.price {
    font-weight: 600 !important;
    letter-spacing: 1px;
}


/* --- 1. GLOBAL BOUTIQUE THEME --- */
h1, h2, h3 { 
    color: #880e4f !important; /* Deep Rose Headings */
    font-family: serif; 
}

/* --- 2. THE PROFESSIONAL PRODUCT CARD --- */
.woocommerce ul.products li.product {
    background: #ffffff;
    border: none !important;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0px 10px 30px rgba(219, 112, 147, 0.1); /* Soft Pink Shadow */
    transition: transform 0.4s ease, opacity 0.4s ease;
    
    /* Animation Start State */
    opacity: 0;
    transform: scale(0.9);
}

/* Make the title and price look expensive */
.woocommerce-loop-product__title {
    color: #880e4f !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.price {
    color: #db7093 !important;
    font-weight: 600;
}

/* --- 3. THE ROSE PINK BUTTONS --- */
.woocommerce ul.products li.product .button {
    background-color: #db7093 !important;
    color: #fff !important;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: 0.8rem;
    opacity: 0; /* Hidden until hover */
    transition: opacity 0.3s ease;
}

/* Show button and zoom on hover */
.woocommerce ul.products li.product:hover {
    transform: scale(1.03);
}

.woocommerce ul.products li.product:hover .button {
    opacity: 1;
}

/* --- 4. THE VISIBILITY TRIGGER --- */
.woocommerce ul.products li.product.is-visible {
    opacity: 1;
    transform: scale(1);
}
.stock-warn {
    color: #880e4f; /* Using your brand's Deep Rose instead of bright red for a classier look */
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 8px 0;
    display: block;
}
/* Enhanced Luxury Sale Badge */
.luxury-sale-badge {
    display: block !important; /* Forces it to exist */
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    background: linear-gradient(135deg, #fce4ec 0%, #db7093 50%, #880e4f 100%) !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    padding: 5px 12px !important;
    border-radius: 50px !important;
    z-index: 9999 !important; /* Put it on the very top layer */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
    letter-spacing: 1px !important;
}
/* Compact & Polished Luxury Sale Badge */
.luxury-sale-badge {
    display: inline-block !important; /* Prevents it from stretching full width */
    width: max-content !important;    /* Makes it only as wide as the text */
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    
    /* Richer Gradient for readability */
    background: linear-gradient(135deg, #db7093 0%, #880e4f 100%) !important;
    
    color: #ffffff !important;
    font-size: 9px !important;         /* Slightly smaller for a boutique look */
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    
    /* Makes text pop */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) !important;
    
    /* Padding: Top/Bottom 5px, Left/Right 12px */
    padding: 5px 12px !important; 
    border-radius: 50px !important;
    z-index: 999 !important;
    
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 10px rgba(136, 14, 79, 0.3) !important;
}

/* Hide the theme's default sale text/background without breaking our custom badge */
.woocommerce span.onsale {
    background: transparent !important;
    color: transparent !important;
    box-shadow: none !important;
    font-size: 0 !important;
    border: none !important;
}
/* Force Premium Tonal Palette */
:root {
    --primary-rose: #db7093;
    --deep-plum: #4a0729;
}

/* Link and Button Colors */
a { color: var(--primary-rose); }
a:hover { color: var(--deep-plum); }

.button, button, input[type="submit"] {
    background-color: var(--primary-rose) !important;
    transition: all 0.3s ease !important;
}

.button:hover {
    background-color: var(--deep-plum) !important;
}

/* Page Titles */
h1, h2, h3, h4 {
    color: var(--deep-plum) !important;
    font-weight: 600;
}
/* Smooth Slide & Fade for Off-Canvas Menu */
.off-canvas, .mobile-navigation, #sidr {
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s ease-in-out !important;
    backdrop-filter: blur(10px); /* Adds a premium glass-morphism effect */
    background: rgba(255, 255, 255, 0.95) !important; /* Slightly transparent white */
}
/* Smooth Slide & Fade for Off-Canvas Menu */
.off-canvas, .mobile-navigation, #sidr {
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s ease-in-out !important;
    backdrop-filter: blur(10px); /* Adds a premium glass-morphism effect */
    background: rgba(255, 255, 255, 0.95) !important; /* Slightly transparent white */
}
/* 1. The Backdrop (Glass-morphism) */
.ast-mobile-popup-drawer.active .ast-mobile-popup-overlay {
    background-color: rgba(74, 7, 41, 0.3) !important; /* Deep Plum Tint */
    backdrop-filter: blur(8px) !important;
    transition: all 0.5s ease;
}

/* 2. The Menu Slide (The "Glide" Effect) */
.ast-mobile-popup-drawer .ast-mobile-popup-inner {
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    background: #ffffff !important;
    border-radius: 20px 0 0 20px; /* Rounds the corners for a softer look */
}
/* Create the Elegant Thin-Line Icon */
.ast-mobile-menu-trigger-minimal .ast-icon svg {
    display: none !important; /* Hide the default chunky icon */
}

.ast-mobile-menu-trigger-minimal .ast-button-wrap {
    position: relative;
    width: 25px;
    height: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Designing the 2-line Minimalist Look */
.ast-mobile-menu-trigger-minimal .ast-button-wrap::before,
.ast-mobile-menu-trigger-minimal .ast-button-wrap::after {
    content: "";
    width: 100%;
    height: 1px; /* Very thin line */
    background-color: #4a0729; /* Using your Deep Plum color */
    display: block;
    transition: all 0.3s ease;
}

/* Making the bottom line slightly shorter (Very Boutique Style) */
.ast-mobile-menu-trigger-minimal .ast-button-wrap::after {
    width: 70%; 
    align-self: flex-end;
}
/* Animation when menu is open */
.ast-mobile-popup-drawer.active .ast-mobile-menu-trigger-minimal .ast-button-wrap::before {
    transform: translateY(8px) rotate(45deg);
}

.ast-mobile-popup-drawer.active .ast-mobile-menu-trigger-minimal .ast-button-wrap::after {
    width: 100%;
    transform: translateY(-9px) rotate(-45deg);
}
/* Fix Footer Heading Color */
.site-footer .widget-title {
    color: #FFFFFF !important;
}

/* Fix Footer Text/Link Color */
.site-footer a, .site-footer p {
    color: #FFFFFF !important;
}

/* 1. Make the Mobile Menu text visible and elegant */
.ast-mobile-popup-content .main-header-menu .menu-item a {
    color: #333333 !important; /* Dark grey/black for readability */
    font-family: 'Playfair Display', serif; /* Elegant serif font */
    font-size: 19px !important;
    text-transform: capitalize;
    padding: 18px 0 !important;
    border-bottom: 1px solid #f2f2f2; /* Thin separator line */
}

/* 2. Style the "All Categories" heading */
.ast-mobile-popup-content .wp-block-group h2, 
.ast-mobile-popup-content .menu-item-heading {
    color: #d14a61 !important; /* Your Logo Pink */
    font-weight: bold;
    letter-spacing: 1px;
}

/* 3. Fix the 'X' Close button area */
.ast-mobile-popup-drawer.active .menu-toggle-close {
    background-color: #d14a61 !important; /* Pink background for the X */
    color: #ffffff !important;
    top: 20px;
    right: 20px;
}

/* 4. Center the Social Icons at the bottom */
.ast-mobile-popup-content .ast-header-social-wrap {
    justify-content: center;
    margin-top: 30px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

/* Remove the dark background from the top of the mobile menu */
.mega-menu-all-categories {
    background: transparent !important;
}

/* Style the headings (Women's, Men's, etc.) to match your pink logo */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item > h4.mega-block-title {
    color: #d14a61 !important; 
    font-size: 16px;
    margin-top: 15px;
}

/* 1. THE RESET: Kill the pink boxes for good */
.ast-header-break-point .ast-mobile-menu-buttons .ast-menu-toggle,
.ast-header-break-point .main-header-bar-navigation .main-header-menu .menu-item .ast-menu-toggle,
.ast-mobile-popup-drawer .menu-toggle-close {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #444 !important; /* Elegant dark grey instead of harsh black */
}

/* 2. THE BACKGROUND: Soft boutique feel */
.ast-mobile-popup-drawer.active .ast-mobile-popup-inner {
    background-color: #ffffff !important; /* Keeping it crisp white, or use #fafafa for off-white */
}

/* 3. THE TEXT: Luxury Serif style */
.ast-header-break-point .main-header-menu .menu-item a {
    text-align: left !important;
    padding-left: 25px !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    font-family: serif !important; /* Modern browsers will default to a clean serif */
    font-size: 15px !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: #333 !important;
    border-bottom: 1px solid #f2f2f2 !important; /* Very light divider */
}

/* 4. THE ICONS: Make the X and Arrows slim */
.ast-mobile-popup-drawer .menu-toggle-close .ast-icon svg,
.ast-header-break-point .main-header-menu .menu-item .ast-menu-toggle .ast-icon svg {
    fill: #666 !important;
    width: 14px !important; /* Slimmer icons look more expensive */
}
/* --- THE ULTIMATE ASTRA PINK-KILLER & BOUTIQUE STYLE --- */

/* 1. FORCE REMOVE PINK: Targets every possible layer of the toggle and X */
.ast-mobile-popup-drawer .menu-toggle-close,
.ast-mobile-popup-drawer .menu-toggle-close .ast-button-wrap,
.ast-mobile-popup-drawer .ast-mobile-popup-inner .menu-toggle-close,
.ast-header-break-point .ast-mobile-menu-buttons .ast-menu-toggle {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* 2. STYLE THE X ICON: Dark, slim, and elegant */
.ast-mobile-popup-drawer .menu-toggle-close .ast-icon svg {
    fill: #333 !important; 
    width: 18px !important;
    height: 18px !important;
}

/* 3. MENU WIDTH: Professional 60% drawer width */
.ast-mobile-popup-drawer.active .ast-mobile-popup-inner {
    max-width: 60% !important; /* Slightly narrower for a high-end feel */
    margin-left: auto !important; 
    background-color: #ffffff !important;
    box-shadow: -15px 0 45px rgba(0,0,0,0.06) !important;
}

/* 4. TYPOGRAPHY: Luxury Boutique Spacing */
.ast-header-break-point .main-header-menu .menu-item a {
    text-align: left !important;
    padding: 20px 25px !important;
    font-family: serif !important; 
    font-size: 14px !important; 
    text-transform: uppercase !important;
    letter-spacing: 2.5px !important;
    color: #1a1a1a !important;
    border-bottom: 1px solid #f8f8f8 !important;
}

/* 5. ARROW RESET: Remove pink from the dropdown chevrons */
.ast-header-break-point .main-header-bar-navigation .main-header-menu .menu-item .ast-menu-toggle {
    background: transparent !important;
    color: #333 !important;
    border: none !important;
}
/* --- FIXING THE SEARCH BAR PINK BOX --- */

/* 1. Remove the pink background from the search button */
.ast-mobile-popup-inner .ast-search-menu-header-1 .search-submit,
.ast-mobile-popup-inner .ast-header-search .search-submit {
    background-color: transparent !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 10px !important;
}

/* 2. Style the search icon (magnifying glass) */
.ast-mobile-popup-inner .ast-search-menu-header-1 .search-submit .ast-icon svg,
.ast-mobile-popup-inner .ast-header-search .ast-icon svg {
    fill: #333 !important; /* Dark grey/black icon */
    width: 18px !important;
    height: 18px !important;
}

/* 3. Refine the search input box (The Underline Look) */
.ast-mobile-popup-inner .ast-search-menu-header-1 .search-form,
.ast-mobile-popup-inner .ast-header-search .search-form {
    border-bottom: 1px solid #222 !important; /* Elegant underline */
    margin: 10px 25px 20px 25px !important;
    display: flex !important;
    align-items: center !important;
}

.ast-mobile-popup-inner .ast-search-menu-header-1 .search-field,
.ast-mobile-popup-inner .ast-header-search .search-field {
    border: none !important;
    background: transparent !important;
    font-family: serif !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-size: 13px !important;
    padding: 10px 0 !important;
}

/* --- FIXING THE SEARCH BAR PINK BOX --- */

/* 1. Remove the pink background from the search button */
.ast-mobile-popup-inner .ast-search-menu-header-1 .search-submit,
.ast-mobile-popup-inner .ast-header-search .search-submit {
    background-color: transparent !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 10px !important;
}

/* 2. Style the search icon (magnifying glass) */
.ast-mobile-popup-inner .ast-search-menu-header-1 .search-submit .ast-icon svg,
.ast-mobile-popup-inner .ast-header-search .ast-icon svg {
    fill: #333 !important; /* Dark grey/black icon */
    width: 18px !important;
    height: 18px !important;
}

/* 3. Refine the search input box (The Underline Look) */
.ast-mobile-popup-inner .ast-search-menu-header-1 .search-form,
.ast-mobile-popup-inner .ast-header-search .search-form {
    border-bottom: 1px solid #222 !important; /* Elegant underline */
    margin: 10px 25px 20px 25px !important;
    display: flex !important;
    align-items: center !important;
}

.ast-mobile-popup-inner .ast-search-menu-header-1 .search-field,
.ast-mobile-popup-inner .ast-header-search .search-field {
    border: none !important;
    background: transparent !important;
    font-family: serif !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-size: 13px !important;
    padding: 10px 0 !important;
}