/**
 * Rawaei Luxury Glass Theme - Master Stylesheet
 * 
 * Luxury Royal Brown Aesthetic with Frosted Glassmorphism for Product Cards
 * Tailored for Astra Theme, WooCommerce, and Elementor on rawaei.com
 */

/* ==========================================================================
   1. CSS Custom Properties (Theme Design Tokens)
   ========================================================================== */
:root {
    /* Royal Brown Palette */
    --rawaei-brown-espresso: #24140E;
    --rawaei-brown-primary: #341D14;
    --rawaei-brown-rich: #46281C;
    --rawaei-brown-mocha: #5B3525;
    --rawaei-brown-soft: #7D4C37;
    --rawaei-brown-cream: #FAF6F0;
    --rawaei-brown-surface: #F5EFEB;

    /* Luxury Gold & Bronze Accents */
    --rawaei-gold-primary: #C59B53;
    --rawaei-gold-bright: #E4BA6D;
    --rawaei-gold-light: #F3DCAC;
    --rawaei-gold-dark: #A37C39;
    --rawaei-gold-glow: rgba(197, 155, 83, 0.28);

    /* Glassmorphism Specs */
    --rawaei-glass-bg: rgba(255, 255, 255, 0.76);
    --rawaei-glass-bg-hover: rgba(255, 255, 255, 0.92);
    --rawaei-glass-border: rgba(255, 255, 255, 0.85);
    --rawaei-glass-border-hover: rgba(197, 155, 83, 0.45);
    --rawaei-glass-blur: 16px;
    --rawaei-glass-shadow: 0 10px 32px -4px rgba(44, 26, 20, 0.08), 0 4px 12px -2px rgba(44, 26, 20, 0.04);
    --rawaei-glass-shadow-hover: 0 20px 42px -6px rgba(44, 26, 20, 0.16), 0 0 24px rgba(197, 155, 83, 0.22);
    --rawaei-glass-inner-sheen: inset 0 1.5px 1.5px 0 rgba(255, 255, 255, 0.95);

    /* Radii */
    --rawaei-radius-card: 20px;
    --rawaei-radius-inner: 14px;
    --rawaei-radius-btn: 12px;
    --rawaei-radius-pill: 50px;

    /* Astra Variables Override */
    --ast-global-color-0: var(--rawaei-brown-primary);
    --ast-global-color-1: var(--rawaei-brown-rich);
    --ast-global-color-2: var(--rawaei-brown-espresso);
    --ast-global-color-3: var(--rawaei-brown-primary);
    --ast-global-color-4: var(--rawaei-brown-surface);
    --ast-global-color-5: #FFFFFF;
    --ast-global-color-6: var(--rawaei-brown-cream);
    --ast-global-color-7: var(--rawaei-brown-espresso);
    --ast-global-color-8: var(--rawaei-brown-rich);
    --ast-border-color: rgba(70, 40, 28, 0.15);

    /* Bottom Menu Variables Override */
    --wpbottommenu-bgcolor: rgba(36, 20, 14, 0.95);
    --wpbottommenu-cart-count-bgcolor: var(--rawaei-gold-primary);
}

/* Base Body Adjustments */
body {
    background-color: #FAF8F5 !important;
    color: var(--rawaei-brown-rich) !important;
}

/* ==========================================================================
   2. Header Transformation (Deep Royal Brown + Frosted Glass Blur)
   ========================================================================== */
#masthead,
.site-header,
.ast-main-header-wrap,
.ast-primary-header-bar,
.ast-below-header-bar {
    background: linear-gradient(180deg, rgba(36, 20, 14, 0.97) 0%, rgba(48, 27, 19, 0.94) 100%) !important;
    backdrop-filter: blur(var(--rawaei-glass-blur)) saturate(180%) !important;
    -webkit-backdrop-filter: blur(var(--rawaei-glass-blur)) saturate(180%) !important;
    border-bottom: 1px solid rgba(197, 155, 83, 0.22) !important;
    box-shadow: 0 4px 25px rgba(20, 10, 7, 0.28) !important;
    transition: all 0.3s ease;
}

/* Header Links & Navigation */
.main-header-menu .menu-item > a,
.ast-builder-menu .menu-item > a,
.main-header-bar-navigation a,
.site-header a:not(.custom-logo-link) {
    color: #F8F4EE !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px;
    transition: all 0.25s ease-in-out !important;
    position: relative;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Elegant Underline Indicator on Hover & Active */
.main-header-menu .menu-item > a::after,
.ast-builder-menu .menu-item > a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: 0;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, var(--rawaei-gold-bright), var(--rawaei-gold-primary));
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
}

.main-header-menu .menu-item:hover > a::after,
.main-header-menu .menu-item.current-menu-item > a::after,
.ast-builder-menu .menu-item:hover > a::after,
.ast-builder-menu .menu-item.current-menu-item > a::after {
    width: 100%;
}

.main-header-menu .menu-item:hover > a,
.main-header-menu .menu-item.current-menu-item > a,
.ast-builder-menu .menu-item:hover > a,
.ast-builder-menu .menu-item.current-menu-item > a {
    color: var(--rawaei-gold-bright) !important;
    text-shadow: 0 0 12px var(--rawaei-gold-glow);
}

/* Submenu / Dropdowns */
.main-header-menu .sub-menu,
.ast-builder-menu .sub-menu {
    background: linear-gradient(165deg, rgba(36, 20, 14, 0.98) 0%, rgba(48, 27, 19, 0.96) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(197, 155, 83, 0.25) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45) !important;
    padding: 8px 0 !important;
}

.main-header-menu .sub-menu a,
.ast-builder-menu .sub-menu a {
    color: #F1ECE6 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.main-header-menu .sub-menu a:hover,
.ast-builder-menu .sub-menu a:hover {
    background: rgba(197, 155, 83, 0.12) !important;
    color: var(--rawaei-gold-bright) !important;
    padding-right: 20px !important;
}

/* Header Icons (Cart, Search, User) */
.ast-header-woo-cart,
.ast-site-header-cart-data,
.ast-header-woo-cart svg,
.ast-search-icon svg {
    color: var(--rawaei-gold-bright) !important;
    fill: var(--rawaei-gold-bright) !important;
}

.ast-header-woo-cart .ast-woo-header-cart-info-wrap {
    color: #FFFFFF !important;
}

.ast-header-woo-cart .ast-count-text {
    background: linear-gradient(135deg, var(--rawaei-gold-bright), var(--rawaei-gold-dark)) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 2px 8px var(--rawaei-gold-glow) !important;
}

/* Mobile Off-canvas Header Navigation */
.ast-mobile-header-wrap .ast-mobile-header-content {
    background: linear-gradient(180deg, #24140E 0%, #1A0D09 100%) !important;
}

.ast-mobile-menu-trigger-fill .ast-mobile-menu-trigger-minimal {
    border-color: var(--rawaei-gold-primary) !important;
}

.ast-button-wrap .menu-toggle .ast-mobile-svg {
    fill: var(--rawaei-gold-bright) !important;
}

/* ==========================================================================
   3. Glassmorphism Product Cards (كروت المنتجات كأنها زجاجة فاخرة)
   ========================================================================== */
ul.products li.product,
.woocommerce ul.products li.product,
.ast-article-single.product,
.elementor-widget-woocommerce-products ul.products li.product,
.related.products ul.products li.product,
.upsells.products ul.products li.product {
    background: var(--rawaei-glass-bg) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.84) 0%, rgba(255, 255, 255, 0.62) 100%) !important;
    backdrop-filter: blur(var(--rawaei-glass-blur)) saturate(170%) !important;
    -webkit-backdrop-filter: blur(var(--rawaei-glass-blur)) saturate(170%) !important;
    border: 1px solid var(--rawaei-glass-border) !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.98) !important;
    border-radius: var(--rawaei-radius-card) !important;
    box-shadow: var(--rawaei-glass-shadow), var(--rawaei-glass-inner-sheen) !important;
    padding: 18px !important;
    margin-bottom: 28px !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.45s cubic-bezier(0.165, 0.84, 0.44, 1),
                box-shadow 0.45s cubic-bezier(0.165, 0.84, 0.44, 1),
                border-color 0.45s ease,
                background 0.45s ease !important;
    transform: translateZ(0);
}

/* Diagonal Glass Sheen Reflection (Light Reflection Animation on Hover) */
ul.products li.product::before,
.woocommerce ul.products li.product::before,
.ast-article-single.product::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        60deg,
        rgba(255, 255, 255, 0) 30%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0) 70%
    );
    transform: rotate(25deg) translateY(-100%);
    transition: transform 0.8s ease-in-out;
    pointer-events: none;
    z-index: 3;
    opacity: 0.6;
}

ul.products li.product:hover::before,
.woocommerce ul.products li.product:hover::before,
.ast-article-single.product:hover::before {
    transform: rotate(25deg) translateY(100%);
}

/* Glass Product Card Hover State */
ul.products li.product:hover,
.woocommerce ul.products li.product:hover,
.ast-article-single.product:hover {
    transform: translateY(-8px) scale(1.015) !important;
    background: var(--rawaei-glass-bg-hover) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.82) 100%) !important;
    border-color: var(--rawaei-glass-border-hover) !important;
    box-shadow: var(--rawaei-glass-shadow-hover), var(--rawaei-glass-inner-sheen) !important;
}

/* Clean White Stage for Product Image (Perfect Harmony with White Backgrounds) */
.astra-shop-thumbnail-wrap,
.woocommerce-loop-product__link {
    position: relative !important;
    display: block !important;
    background: #FFFFFF !important;
    border-radius: var(--rawaei-radius-inner) !important;
    padding: 12px !important;
    box-shadow: 0 4px 18px rgba(44, 26, 20, 0.05) !important;
    border: 1px solid rgba(240, 235, 230, 0.8) !important;
    overflow: hidden !important;
    transition: all 0.4s ease !important;
}

ul.products li.product:hover .astra-shop-thumbnail-wrap {
    box-shadow: 0 8px 24px rgba(44, 26, 20, 0.09) !important;
    border-color: rgba(197, 155, 83, 0.35) !important;
}

/* Product Image Smooth Zoom */
.astra-shop-thumbnail-wrap img,
.woocommerce-loop-product__link img {
    border-radius: calc(var(--rawaei-radius-inner) - 4px) !important;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    display: block !important;
    margin: 0 auto !important;
}

ul.products li.product:hover .astra-shop-thumbnail-wrap img {
    transform: scale(1.06) !important;
}

/* ==========================================================================
   Sale / Discount Badge - Custom Image (special-offer.png)
   ========================================================================== */
.woocommerce span.onsale,
.astra-shop-thumbnail-wrap .onsale,
.ast-onsale-card,
ul.products li.product .onsale,
.single-product .onsale,
.elementor-widget-woocommerce-products .onsale {
    background: transparent url('https://rawaei.com/wp-content/uploads/2025/03/special-offer.png') no-repeat center center !important;
    background-size: contain !important;
    color: transparent !important; /* Hide text like 'تخفيضات!' */
    font-size: 0 !important;
    line-height: 0 !important;
    text-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important;
    min-height: 70px !important;
    max-width: 70px !important;
    max-height: 70px !important;
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 10 !important;
    display: block !important;
    overflow: hidden !important;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25)) !important;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

ul.products li.product:hover .onsale,
.woocommerce span.onsale:hover {
    transform: scale(1.1) rotate(-4deg) !important;
}

/* If an <img> tag is rendered inside .onsale */
.woocommerce span.onsale img,
.astra-shop-thumbnail-wrap .onsale img,
.rawaei-sale-badge-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Product Content & Summary */
.astra-shop-summary-wrap {
    padding-top: 14px !important;
    text-align: center !important;
}

/* Product Title */
.woocommerce-loop-product__title,
.ast-loop-product__link .woocommerce-loop-product__title {
    color: var(--rawaei-brown-espresso) !important;
    font-family: 'Noto Kufi Arabic', sans-serif !important;
    font-size: 1.08rem !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    margin: 10px 0 6px 0 !important;
    transition: color 0.3s ease !important;
}

ul.products li.product:hover .woocommerce-loop-product__title {
    color: var(--rawaei-brown-rich) !important;
}

/* Price Styling */
ul.products li.product .price,
.woocommerce ul.products li.product .price {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: var(--rawaei-gold-dark) !important;
    margin-top: 4px !important;
    display: block !important;
}

ul.products li.product .price ins,
ul.products li.product .price .amount {
    color: var(--rawaei-brown-primary) !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

ul.products li.product .price del,
ul.products li.product .price del .amount {
    color: #8E7A71 !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    opacity: 0.85 !important;
    margin-left: 6px !important;
}

.woocommerce-Price-currencySymbol {
    color: var(--rawaei-gold-dark) !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
}

/* Add To Cart Button (Luxury Rich Brown with Gold Accent) */
ul.products li.product .button,
ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .button {
    background: linear-gradient(135deg, var(--rawaei-brown-rich) 0%, var(--rawaei-brown-espresso) 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(197, 155, 83, 0.35) !important;
    border-radius: var(--rawaei-radius-btn) !important;
    font-family: 'Noto Kufi Arabic', sans-serif !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    padding: 10px 22px !important;
    margin-top: 10px !important;
    display: inline-block !important;
    box-shadow: 0 6px 18px rgba(44, 26, 20, 0.22) !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    position: relative;
    overflow: hidden;
}

ul.products li.product .button:hover,
ul.products li.product .add_to_cart_button:hover,
.woocommerce ul.products li.product .button:hover {
    background: linear-gradient(135deg, var(--rawaei-gold-bright) 0%, var(--rawaei-gold-dark) 100%) !important;
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 8px 24px rgba(197, 155, 83, 0.45) !important;
    transform: translateY(-2px) !important;
}

/* ==========================================================================
   4. Footer Transformation (Deep Royal Brown + Gold Dividers & Accents)
   ========================================================================== */
#colophon.site-footer,
.site-footer,
.site-primary-footer-wrap,
.site-below-footer-wrap {
    background: linear-gradient(180deg, #24140E 0%, #150B07 100%) !important;
    color: #DFD5CD !important;
    border-top: 2px solid rgba(197, 155, 83, 0.32) !important;
    position: relative;
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: radial-gradient(circle, var(--rawaei-gold-bright) 0%, rgba(197, 155, 83, 0) 80%);
}

/* Footer Widget Titles */
.site-footer .widget-title,
.site-footer h1, .site-footer h2, .site-footer h3, 
.site-footer h4, .site-footer h5, .site-footer h6 {
    color: var(--rawaei-gold-light) !important;
    font-family: 'Noto Kufi Arabic', sans-serif !important;
    font-size: 1.18rem !important;
    font-weight: 700 !important;
    margin-bottom: 16px !important;
    position: relative;
    padding-bottom: 8px;
}

.site-footer .widget-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 38px;
    height: 2px;
    background: var(--rawaei-gold-primary);
    border-radius: 2px;
}

/* Footer Links */
.site-footer a {
    color: #D2C6BC !important;
    transition: all 0.25s ease !important;
}

.site-footer a:hover {
    color: var(--rawaei-gold-bright) !important;
    padding-right: 6px;
    text-shadow: 0 0 10px var(--rawaei-gold-glow);
}

/* Social Icons in Footer */
.ast-footer-social-wrap .ast-builder-social-element,
.site-footer .footer-social-inner-wrap a {
    background: rgba(197, 155, 83, 0.12) !important;
    border: 1px solid rgba(197, 155, 83, 0.3) !important;
    border-radius: 50% !important;
    padding: 8px !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.ast-footer-social-wrap .ast-builder-social-element:hover,
.site-footer .footer-social-inner-wrap a:hover {
    background: var(--rawaei-gold-primary) !important;
    border-color: #FFFFFF !important;
    box-shadow: 0 0 18px var(--rawaei-gold-bright) !important;
    transform: translateY(-3px) scale(1.08) !important;
}

.ast-footer-social-wrap svg,
.site-footer .footer-social-inner-wrap svg {
    fill: #F5EFEB !important;
}

.ast-footer-social-wrap .ast-builder-social-element:hover svg,
.site-footer .footer-social-inner-wrap a:hover svg {
    fill: #FFFFFF !important;
}

/* Footer Bottom Bar / Copyright */
.ast-footer-copyright,
.site-below-footer-wrap {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #A99B91 !important;
    font-size: 0.9rem !important;
}

/* ==========================================================================
   5. Mobile Bottom Menu Upgrade (#wp-bottom-menu)
   ========================================================================== */
#wp-bottom-menu,
.wp-bottom-menu {
    background: rgba(36, 20, 14, 0.95) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border-top: 1px solid rgba(197, 155, 83, 0.3) !important;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.35) !important;
}

.wp-bottom-menu-item {
    color: #CFC4B8 !important;
    transition: color 0.25s ease !important;
}

.wp-bottom-menu-item .wp-bottom-menu-item-icons {
    color: #D6CBC0 !important;
    transition: transform 0.25s ease, color 0.25s ease !important;
}

.wp-bottom-menu-item.active,
.wp-bottom-menu-item:hover {
    color: var(--rawaei-gold-bright) !important;
}

.wp-bottom-menu-item.active .wp-bottom-menu-item-icons,
.wp-bottom-menu-item:hover .wp-bottom-menu-item-icons {
    color: var(--rawaei-gold-bright) !important;
    transform: translateY(-2px) scale(1.1);
}

.wp-bottom-menu-cart-count {
    background: linear-gradient(135deg, var(--rawaei-gold-bright), var(--rawaei-gold-dark)) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    border: 1px solid #FFFFFF !important;
    box-shadow: 0 2px 6px var(--rawaei-gold-glow) !important;
}

/* ==========================================================================
   6. Elementor Widgets & Homepage Styling
   ========================================================================== */
.elementor-heading-title {
    color: var(--rawaei-brown-espresso) !important;
    font-family: 'Noto Kufi Arabic', sans-serif !important;
    font-weight: 700 !important;
}

/* Elementor Buttons (e.g. "تسوق الآن" / "عروض خاصة") */
.elementor-button,
.elementor-button-link {
    background: linear-gradient(135deg, var(--rawaei-brown-rich) 0%, var(--rawaei-brown-espresso) 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(197, 155, 83, 0.4) !important;
    border-radius: var(--rawaei-radius-btn) !important;
    box-shadow: 0 6px 20px rgba(44, 26, 20, 0.2) !important;
    font-family: 'Noto Kufi Arabic', sans-serif !important;
    font-weight: 700 !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.elementor-button:hover,
.elementor-button-link:hover {
    background: linear-gradient(135deg, var(--rawaei-gold-bright) 0%, var(--rawaei-gold-dark) 100%) !important;
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 8px 26px rgba(197, 155, 83, 0.42) !important;
    transform: translateY(-2px) !important;
}

/* Swiper Slider Arrows */
.elementor-swiper-button {
    background: rgba(36, 20, 14, 0.85) !important;
    color: var(--rawaei-gold-bright) !important;
    border: 1px solid rgba(197, 155, 83, 0.35) !important;
    border-radius: 50% !important;
    backdrop-filter: blur(8px) !important;
    transition: all 0.3s ease !important;
}

.elementor-swiper-button:hover {
    background: var(--rawaei-gold-primary) !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 16px var(--rawaei-gold-glow) !important;
}

/* ==========================================================================
   7. Single Product Page Enhancements
   ========================================================================== */
.single-product div.product {
    padding-top: 20px;
}

/* Product Gallery Frame */
.woocommerce-product-gallery {
    background: #FFFFFF !important;
    border-radius: var(--rawaei-radius-card) !important;
    padding: 18px !important;
    box-shadow: var(--rawaei-glass-shadow) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
}

/* Product Title on Single Page */
.product_title.entry-title {
    color: var(--rawaei-brown-espresso) !important;
    font-weight: 800 !important;
    font-size: 1.85rem !important;
    line-height: 1.35 !important;
}

/* Single Page Price */
.single-product div.product p.price,
.single-product div.product span.price {
    color: var(--rawaei-gold-dark) !important;
    font-size: 1.65rem !important;
    font-weight: 800 !important;
}

/* Quantity Input */
.woocommerce .quantity .qty {
    background: #FFFFFF !important;
    border: 1.5px solid rgba(70, 40, 28, 0.2) !important;
    border-radius: 10px !important;
    color: var(--rawaei-brown-espresso) !important;
    font-weight: 700 !important;
    padding: 8px 12px !important;
}

.woocommerce .quantity .qty:focus {
    border-color: var(--rawaei-gold-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--rawaei-gold-glow) !important;
}

/* Single Add to Cart Button */
.single_add_to_cart_button.button {
    background: linear-gradient(135deg, var(--rawaei-brown-rich) 0%, var(--rawaei-brown-espresso) 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(197, 155, 83, 0.4) !important;
    border-radius: var(--rawaei-radius-btn) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    padding: 14px 34px !important;
    box-shadow: 0 8px 24px rgba(44, 26, 20, 0.25) !important;
    transition: all 0.3s ease !important;
}

.single_add_to_cart_button.button:hover {
    background: linear-gradient(135deg, var(--rawaei-gold-bright) 0%, var(--rawaei-gold-dark) 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 10px 30px rgba(197, 155, 83, 0.45) !important;
    transform: translateY(-3px) !important;
}

/* Product Tabs */
.woocommerce-tabs ul.tabs {
    border-bottom: 2px solid rgba(197, 155, 83, 0.2) !important;
}

.woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}

.woocommerce-tabs ul.tabs li a {
    color: var(--rawaei-brown-mocha) !important;
    font-weight: 700 !important;
    padding: 12px 24px !important;
    transition: all 0.25s ease !important;
}

.woocommerce-tabs ul.tabs li.active a {
    color: var(--rawaei-gold-dark) !important;
    border-bottom: 3px solid var(--rawaei-gold-primary) !important;
}

.woocommerce-Tabs-panel {
    background: #FFFFFF !important;
    border-radius: 0 0 var(--rawaei-radius-card) var(--rawaei-radius-card) !important;
    padding: 24px !important;
    box-shadow: 0 6px 20px rgba(44, 26, 20, 0.04) !important;
    border: 1px solid rgba(240, 235, 230, 0.8) !important;
}

/* Variation Swatches */
.cfvsw-swatches-container .cfvsw-swatch-inner {
    border-color: rgba(70, 40, 28, 0.25) !important;
}

.cfvsw-swatches-container .cfvsw-selected-swatch .cfvsw-swatch-inner {
    border-color: var(--rawaei-gold-primary) !important;
    box-shadow: 0 0 0 2px var(--rawaei-gold-glow) !important;
}

/* ==========================================================================
   8. Cart & Checkout Pages
   ========================================================================== */
.woocommerce-cart .cart-collaterals,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-billing-fields {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85)) !important;
    backdrop-filter: blur(12px) !important;
    border-radius: var(--rawaei-radius-card) !important;
    padding: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: var(--rawaei-glass-shadow) !important;
}

.woocommerce-checkout #order_review_heading,
.woocommerce-cart .cart-collaterals h2 {
    color: var(--rawaei-brown-espresso) !important;
    font-weight: 700 !important;
    border-bottom: 1.5px solid rgba(197, 155, 83, 0.25) !important;
    padding-bottom: 10px !important;
}

.woocommerce-cart table.cart,
.woocommerce table.shop_table {
    border-radius: 14px !important;
    overflow: hidden !important;
    border: 1px solid rgba(70, 40, 28, 0.1) !important;
}

.woocommerce table.shop_table th {
    background: var(--rawaei-brown-espresso) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

/* General Checkout Button */
.wc-proceed-to-checkout .checkout-button,
#place_order {
    background: linear-gradient(135deg, var(--rawaei-gold-bright) 0%, var(--rawaei-gold-dark) 100%) !important;
    color: #FFFFFF !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    border-radius: var(--rawaei-radius-btn) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 8px 24px rgba(197, 155, 83, 0.4) !important;
    padding: 14px 28px !important;
    transition: all 0.3s ease !important;
}

.wc-proceed-to-checkout .checkout-button:hover,
#place_order:hover {
    background: linear-gradient(135deg, var(--rawaei-brown-rich) 0%, var(--rawaei-brown-espresso) 100%) !important;
    box-shadow: 0 10px 28px rgba(44, 26, 20, 0.35) !important;
    transform: translateY(-2px) !important;
}

/* ==========================================================================
   9. Global Scrollbar & Selection Styling
   ========================================================================== */
::selection {
    background-color: var(--rawaei-gold-primary) !important;
    color: #FFFFFF !important;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #F0EAE4;
}

::-webkit-scrollbar-thumb {
    background: var(--rawaei-brown-soft);
    border-radius: 5px;
    border: 2px solid #F0EAE4;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--rawaei-gold-primary);
}

/* ==========================================================================
   10. Mobile & Tablet Single-Card Layout (كارت واحد كبير بعرض الشاشة في الموبايل والتابلت)
   ========================================================================== */
@media (max-width: 991px), (max-width: 921px), (max-width: 768px), (max-width: 544px) {
    /* 1. Force Single Column on ALL shop / archive / home product lists */
    body.woocommerce ul.products,
    body.woocommerce-page ul.products,
    body.woocommerce-shop ul.products,
    .ast-container .woocommerce ul.products,
    .ast-container .woocommerce-page ul.products,
    .ast-container .woocommerce ul.products:not(.elementor-grid),
    .woocommerce-page ul.products:not(.elementor-grid),
    .woocommerce.mobile-columns-2 ul.products:not(.elementor-grid),
    .woocommerce-page.mobile-columns-2 ul.products:not(.elementor-grid),
    .woocommerce.mobile-columns-1 ul.products,
    .woocommerce-page.mobile-columns-1 ul.products,
    .woocommerce.tablet-columns-3 ul.products:not(.elementor-grid),
    .woocommerce-page.tablet-columns-3 ul.products:not(.elementor-grid),
    .woocommerce.tablet-columns-1 ul.products,
    .woocommerce[class*="columns-"] ul.products,
    .woocommerce-page[class*="columns-"] ul.products,
    .elementor-widget-woocommerce-products ul.products,
    .elementor-products-grid ul.products,
    .elementor-grid,
    .latest-sale-products ul.products,
    ul.products.columns-4,
    ul.products.columns-3,
    ul.products.columns-2,
    ul.products.columns-1,
    ul.products {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-columns: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 30px auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        row-gap: 32px !important;
        column-gap: 0 !important;
        box-sizing: border-box !important;
    }

    /* 2. Product Card: Spans 100% full width, large and prominent */
    body.woocommerce ul.products li.product,
    body.woocommerce-page ul.products li.product,
    body.woocommerce-shop ul.products li.product,
    .ast-container .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product,
    .ast-article-single.product,
    .ast-grid-common-col.product,
    .ast-article-post.product,
    .ast-grid-common-col,
    .elementor-widget-woocommerce-products ul.products li.product,
    .elementor-products-grid ul.products li.product,
    .elementor-grid .product,
    ul.products li.product {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        grid-column: 1 / -1 !important;
        flex: 0 0 100% !important;
        float: none !important;
        clear: both !important;
        margin: 0 0 32px 0 !important;
        box-sizing: border-box !important;
        padding: 16px !important;
        border-radius: 24px !important;
    }

    /* 3. Product Image Container - Spans Full Width of the Card */
    .astra-shop-thumbnail-wrap,
    .woocommerce-loop-product__link,
    ul.products li.product .astra-shop-thumbnail-wrap {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        padding: 0 !important;
        margin: 0 0 16px 0 !important;
        border-radius: 18px !important;
        background: #FFFFFF !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        border: 1px solid rgba(235, 230, 224, 0.9) !important;
        box-shadow: 0 4px 16px rgba(44, 26, 20, 0.05) !important;
    }

    /* 4. Product Image - Huge, Spans 100% Width of the Card */
    .astra-shop-thumbnail-wrap img,
    .woocommerce-loop-product__link img,
    ul.products li.product img {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        height: auto !important;
        min-height: 320px !important;
        max-height: 480px !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 auto !important;
        border-radius: 18px !important;
        transform: none !important;
    }

    /* 5. Product Title - Big, bold, clear and centered */
    .woocommerce-loop-product__title,
    .ast-loop-product__link .woocommerce-loop-product__title {
        font-size: 1.35rem !important;
        font-weight: 800 !important;
        line-height: 1.45 !important;
        margin: 14px 0 10px 0 !important;
        padding: 0 6px !important;
        color: var(--rawaei-brown-espresso) !important;
    }

    /* 6. Price - Large and clear */
    ul.products li.product .price,
    .woocommerce ul.products li.product .price {
        font-size: 1.45rem !important;
        margin: 10px 0 18px 0 !important;
    }

    ul.products li.product .price ins,
    ul.products li.product .price .amount {
        font-size: 1.45rem !important;
        font-weight: 800 !important;
    }

    ul.products li.product .price del,
    ul.products li.product .price del .amount {
        font-size: 1.1rem !important;
    }

    /* 7. Action Button - Full width and easy touch */
    ul.products li.product .button,
    ul.products li.product .add_to_cart_button,
    .woocommerce ul.products li.product .button {
        width: 100% !important;
        padding: 16px 20px !important;
        font-size: 1.15rem !important;
        font-weight: 800 !important;
        border-radius: 14px !important;
        display: block !important;
        text-align: center !important;
        margin-top: 10px !important;
    }

    /* 8. Sale Badge on Mobile */
    .woocommerce span.onsale,
    .astra-shop-thumbnail-wrap .onsale,
    ul.products li.product .onsale {
        width: 75px !important;
        height: 75px !important;
        min-width: 75px !important;
        min-height: 75px !important;
        top: 14px !important;
        right: 14px !important;
        z-index: 10 !important;
    }
}