/* =========================================
   VISUAL REFINEMENTS (Stickers, Layout, Fixes)
   ========================================= */

/* 1. HERO STICKER (Central Focus) */
.hero-branding-sticker {
    max-width: 90% !important;
    width: 650px !important;
    /* Increased from 500px for Desktop Presence */
    margin: 0 auto 30px !important;
    transform: rotate(-2deg) !important;
    opacity: 1 !important;
    display: block !important;
    position: relative !important;
    z-index: 10 !important;
}

@media (max-width: 768px) {
    .hero-branding-sticker {
        width: auto !important;
    }
}

/* Default State for Mobile Title (Hidden on Desktop) */
.mobile-shop-title {
    display: none !important;
}

/* 2. SUBTLE DECORATIVE STICKERS */
.floating-sticker {
    opacity: 0.3 !important;
    /* Fade them out */
    transform: scale(0.8) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* 3. LAYOUT & SPACING */
.hero-section {
    padding-top: 80px !important;
    /* Reduce top padding */
    padding-bottom: 20px !important;
    /* Reduce gap to content */
    min-height: auto !important;
    /* Allow it to shrink if content is small */
}

/* Reduce spacing between Header and Shop/Hero */
.fomo-header {
    padding: 10px 0 !important;
}

/* 4. REMOVE WHITE BOX (Catalog/Grid) */
/* Targeted at common WooCommerce wrappers that might have outlines or backgrounds */
.woocommerce-page .site-content,
.woocommerce-page .content-area,
.woocommerce-page .site-main,
.woocommerce-page .entry-content,
div.product,
.woocommerce ul.products {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* If there is a specific white container element from the theme */
.elementor-section,
.elementor-column,
.elementor-container,
.store-grid-wrapper {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* 5. SEAMLESS HERO TRANSITION */
.hero-section.shop-hero {
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: none !important;
    padding-bottom: 60px !important;
    /* Increased for better separation */
    margin-bottom: -40px !important;
    /* Pull grid up slightly to overlap smoothly */
    min-height: 250px !important;
    /* Ensure enough height for the sticker */
    /* Removed mask-image as it creates a visible 'cut' line on some backgrounds */
}

/* 6. FLOATING STICKERS IN SHOP AREA - CLEANUP
   (Reverted to Hero on User Request. Keeping block empty or removed) 
*/