/* ================================ WooCommerce My Account - Astra Full width + remove white gaps ================================ */ /* 1) Dark page background */ body.woocommerce-account { background: #000 !important; } /* 2) Remove Astra title/header spacing */ body.woocommerce-account .entry-header, body.woocommerce-account .page-header { display: none !important; margin: 0 !important; padding: 0 !important; } /* 3) Full-width containers */ body.woocommerce-account .site-content > .ast-container, body.woocommerce-account .ast-container, body.woocommerce-account .container, body.woocommerce-account #content, body.woocommerce-account .site-content, body.woocommerce-account #primary, body.woocommerce-account .content-area, body.woocommerce-account .site-main, body.woocommerce-account main#main, body.woocommerce-account article, body.woocommerce-account .entry-content { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; background: transparent !important; } /* 4) Remove extra top/bottom spacing */ body.woocommerce-account .site-content, body.woocommerce-account main#main, body.woocommerce-account .site-main { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* 5) Hide My Account nav and make content full width */ body.woocommerce-account .woocommerce-MyAccount-navigation { display: none !important; } body.woocommerce-account .woocommerce-MyAccount-content { float: none !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; } body.woocommerce-account .woocommerce-MyAccount { width: 100% !important; max-width: 100% !important; } /* 6) Prevent horizontal scroll */ html, body { max-width: 100% !important; overflow-x: hidden !important; } /* ================================ Catalog Button Button widget class: catalog-btn ================================ */ .catalog-btn .elementor-button, .catalog-btn.elementor-button, .catalog-btn a.elementor-button { background: linear-gradient(90deg, #8d35ff 0%, #6d2cff 38%, #3a153f 100%); color: #ffffff !important; border: none; border-radius: 999px 0 999px 0; padding: 16px 32px; min-height: 58px; width: min(72vw, 420px); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700; letter-spacing: 0.2px; text-decoration: none; box-shadow: 0 10px 24px rgba(74, 22, 120, 0.22), inset 0 1px 0 rgba(255,255,255,0.10); transition: background 0.28s ease, box-shadow 0.28s ease, color 0.28s ease, filter 0.28s ease; } .catalog-btn .elementor-button:hover, .catalog-btn.elementor-button:hover, .catalog-btn a.elementor-button:hover { background: linear-gradient(90deg, #b15cff 0%, #8a3dff 38%, #241029 100%); color: #ffffff !important; box-shadow: 0 12px 28px rgba(120, 52, 200, 0.28), 0 0 18px rgba(177, 92, 255, 0.16), inset 0 1px 0 rgba(255,255,255,0.14); filter: brightness(1.03); } .catalog-btn .elementor-button:active, .catalog-btn.elementor-button:active, .catalog-btn a.elementor-button:active { background: linear-gradient(90deg, #7e2ef0 0%, #6024e4 38%, #2d1134 100%); } .catalog-btn .elementor-button:focus, .catalog-btn.elementor-button:focus, .catalog-btn a.elementor-button:focus { outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,0.12), 0 0 0 6px rgba(177, 92, 255, 0.20), 0 10px 24px rgba(74, 22, 120, 0.22); } /* ================================ Mobile Hero Fix Hero container class: mobile-hero Button wrapper container class: hero-btn-wrap ================================ */ @media (max-width: 767px) { .mobile-hero { position: relative; padding-top: 120px; min-height: 820px; overflow: hidden; } .mobile-hero .hero-btn-wrap { position: absolute; left: 0; right: 0; bottom: 24px; /* decrease to move lower, increase to move higher */ width: 100%; display: flex; justify-content: center; align-items: center; margin: 0 !important; padding: 0 !important; z-index: 5; } .mobile-hero .hero-btn-wrap .elementor-widget-container, .mobile-hero .hero-btn-wrap .elementor-button-wrapper { display: flex; justify-content: center; width: 100%; } .mobile-hero .hero-btn-wrap .catalog-btn, .mobile-hero .hero-btn-wrap .elementor-widget-button { width: 100%; display: flex; justify-content: center; margin: 0 !important; } .mobile-hero .hero-btn-wrap .catalog-btn .elementor-button, .mobile-hero .hero-btn-wrap .catalog-btn.elementor-button, .mobile-hero .hero-btn-wrap .catalog-btn a.elementor-button { width: min(72vw, 285px); min-height: 54px; padding: 14px 22px; font-size: 16px; } }.