/* ==========================================================================
   1. FIXED: WOOCOMMERCE VARIATION BUTTONS (RESOLVES WHITE RECTANGLES)
   ========================================================================== */
/* Converts the bright white option/attribute boxes into premium dark selector fields */
.variations_form .variable-item:not(.color-variable-item),
.variations_form .variable-item-contents,
.woo-variation-swatches .variable-items-wrapper .variable-item,
.vi-wpvs-variation-wrap .vi-wpvs-option-wrap,
.woocommerce div.product form.cart .variations select {
    background-color: #1a1a24 !important;
    background: #1a1a24 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
}

/* Changes text inside those buttons to bright white so it's perfectly readable */
.variations_form .variable-item:not(.color-variable-item) span,
.woo-variation-swatches .variable-items-wrapper .variable-item-text {
    color: #ffffff !important;
}

/* Gives an electric blue border highlight when an option box is selected or hovered */
.variations_form .variable-item:not(.color-variable-item):hover,
.variations_form .variable-item:not(.color-variable-item).selected {
    border-color: #0066cc !important;
    background-color: #222230 !important;
    box-shadow: 0 0 10px rgba(0, 102, 204, 0.3) !important;
}

/* ==========================================================================
   2. FIXED: STICKY ADD TO CART BOTTOM BAR (KILLS SIDE WHITE BLOCKS)
   ========================================================================== */
/* Forces Astra's bottom sticky bar and all its side structural columns to remain completely dark */
.ast-sticky-add-to-cart, 
.ast-sticky-add-to-cart-wrap,
.ast-sticky-add-to-cart-container,
.ast-sticky-add-to-cart__content,
div[class*="sticky-add-to-cart"],
.woocommerce div[class*="sticky-button"] {
    background-color: #030213 !important;
    background: #030213 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Clean text colors inside the sticky bar */
.ast-sticky-add-to-cart-title,
.ast-sticky-add-to-cart-price,
div[class*="sticky-add-to-cart"] span,
div[class*="sticky-add-to-cart"] div {
    color: #ffffff !important;
}

/* ==========================================================================
   3. ANTI-FRAGMENTATION & TEXT HIGHLIGHTER RESET
   ========================================================================== */
h1, h2, h3, h4, h5, h6, p, span, a, label,
.elementor-accordion-title a,
.elementor-toggle-title a,
.elementor-heading-title {
    background-color: transparent !important;
    background: transparent !important;
}

.elementor-widget-container, 
.elementor-text-editor,
.elementor-icon-box-wrapper {
    background-color: transparent !important;
    background: transparent !important;
}

/* ==========================================================================
   4. PAGE-BUILDER SECTIONS & ACCORDION OVERRIDES
   ========================================================================== */
html, body, .site, #page, .site-content, #content, 
.entry-content, .ast-separate-container, main, article, 
.content-area, .ast-container, .ast-plain-container, 
.ast-page-builder-template, #primary, .site-main,
.elementor-section, .elementor-section-background, 
.elementor-background-overlay, .wp-block-group, .wp-block-columns {
    background-color: #030213 !important;
    background: #030213 !important;
}

.elementor-container, .elementor-column, .elementor-row, .ast-row, .wp-block-columns__inner {
    background-color: transparent !important;
    background: transparent !important;
}

.elementor-accordion .elementor-accordion-item {
    background-color: #12121a !important;
    background: #12121a !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    margin-bottom: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

.elementor-accordion-title,
.elementor-accordion .elementor-tab-title {
    background-color: #12121a !important;
    background: #12121a !important;
    padding: 18px 24px !important;
    color: #ffffff !important;
}

.elementor-accordion-content,
.elementor-accordion .elementor-tab-content {
    background-color: #12121a !important;
    background: #12121a !important;
    padding: 0 24px 20px 24px !important;
    color: #b3b3b3 !important;
    border-top: none !important;
}

/* ==========================================================================
   5. DROPDOWN / SUBMENU SYSTEM SETTINGS
   ========================================================================== */
.main-header-menu .sub-menu,
.main-header-menu .sub-menu .menu-item,
.ast-builder-menu .sub-menu,
.navigation-accessibility .main-header-menu .sub-menu {
    background-color: #12121a !important;
    background: #12121a !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.main-header-menu .sub-menu .menu-link,
.main-header-menu .sub-menu .menu-item .menu-link,
.ast-builder-menu .sub-menu .menu-item .menu-link {
    color: #ffffff !important;
}

.main-header-menu .sub-menu .menu-link:hover,
.main-header-menu .sub-menu .menu-item:hover > .menu-link {
    color: #0066cc !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
}

/* ==========================================================================
   6. MAGIC LOGO COLOR CONTROLLER (INVERTS BLACK TEXT TO WHITE)
   ========================================================================== */
.custom-logo, 
.site-logo-img img, 
.site-branding img,
header .wp-block-image img {
    filter: invert(1) brightness(1.3) contrast(1.1) !important;
}

/* ==========================================================================
   7. HEADER & CONTENT CORE GEOMETRY
   ========================================================================== */
.site-header, 
.main-header-bar, 
.ast-primary-header-bar, 
.ast-main-header-wrap,
header {
    background-color: #030213 !important;
    background: #030213 !important;
    border-bottom: none !important;
}

h1, h2, h3, h4, h5, h6, p, span, label, .entry-title, .widget-title {
    color: #ffffff !important;
}

.site-content, #content, .main-content-wrap, .ast-container {
    padding-top: 50px !important;
    margin-top: 0 !important;
}

.woocommerce-account .site-content, .woocommerce-shop .site-content {
    padding-top: 60px !important;
}

.main-header-menu .menu-link,
.ast-transparent-header .main-header-menu .menu-item .menu-link {
    color: #ffffff !important;
}
.main-header-menu .menu-link:hover,
.ast-transparent-header .main-header-menu .menu-item .menu-link:hover {
    color: #0066cc !important;
}

/* ==========================================================================
   8. FOOTER CONTAINER CLEANUP
   ========================================================================== */
.site-footer, .site-footer-section, .ast-small-footer, footer, .ast-footer-overlay, #colophon {
    background-color: #030213 !important;
    background: #030213 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* ==========================================================================
   9. INTERFACE ACTIONS & HERO CALLS (PILL GLOW DESIGN)
   ========================================================================== */
.wp-block-button__link.blue-glow-btn,
.ast-button.blue-glow-btn,
.woocommerce #respond input#submit.alt.blue-glow-btn, 
.woocommerce a.button.alt.blue-glow-btn, 
.woocommerce button.button.alt.blue-glow-btn, 
.woocommerce input.button.alt.blue-glow-btn {
    background-color: #0066cc !important;
    color: #ffffff !important;
    border-radius: 99px !important;
    padding: 14px 32px !important;
    font-weight: 600 !important;
    border: none !important;
    box-shadow: 0 4px 25px rgba(0, 102, 204, 0.5) !important;
    transition: all 0.3s ease !important;
}

.wp-block-button__link.blue-glow-btn:hover, .ast-button.blue-glow-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 35px rgba(0, 102, 204, 0.7) !important;
}

.wp-block-button__link.outline-dark-btn, .ast-button.outline-dark-btn {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 99px !important;
    padding: 14px 32px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.wp-block-group.apple-style-card, .ast-container .apple-style-card {
    background-color: #e9ebef !important;
    border-radius: 32px !important;
    padding: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ==========================================================================
   10. WOOCOMMERCE PRODUCT CARDS & STORE INVENTORY
   ========================================================================== */
.woocommerce ul.products li.product, 
.ast-woo-shop-product-inner,
.product-category.product {
    background-color: #12121a !important;
    border-radius: 24px !important;
    padding: 22px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(0, 102, 204, 0.15) !important;
}

.woocommerce ul.products li.product img, .ast-woo-shop-product-inner img {
    border-radius: 18px !important;
    background-color: #1a1a24 !important;
    margin-bottom: 18px !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 6px !important;
}

.woocommerce .star-rating, .woocommerce .star-rating span, .comment-form-rating .stars a {
    color: #0066cc !important;
}

.woocommerce ul.products li.product .price, .woocommerce ul.products li.product .price amount, .woocommerce ul.products li.product .price ins {
    color: #b3b3b3 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

.woocommerce span.onsale, .badge.new {
    background-color: #0066cc !important;
    color: #ffffff !important;
    border-radius: 30px !important;
    padding: 4px 14px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
}

/* ==========================================================================
   11. SYSTEM CHECKOUT & DATA PANELS
   ========================================================================== */
.woocommerce-cart table.cart, 
.woocommerce-checkout #order_review,
.woocommerce-checkout form.checkout_coupon,
.woocommerce-checkout form.login,
.woocommerce-cart .cart_totals,
.woocommerce-checkout .checkout {
    background-color: #12121a !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 16px !important;
    padding: 24px !important;
}

.woocommerce-cart th, .woocommerce-checkout th, .woocommerce-cart td, .woocommerce-checkout td, .woocommerce-cart .cart_totals h2, #order_review_heading, .woocommerce-billing-fields h3 {
	    background-color: #12121a !important;
    color: #ffffff !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.woocommerce input.input-text, .woocommerce textarea, .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple {
    background-color: #1a1a24 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 10px !important;
}

.select2-container--default .select2-results__option[aria-selected], .select2-dropdown {
    background-color: #12121a !important;
    color: #ffffff !important;
}

/* ==========================================================================
   12. DEVICE RESPONSIVE SYSTEM
   ========================================================================== */
@media (max-width: 768px) {
    .site-content, #content, .main-content-wrap { padding-top: 30px !important; }
    .woocommerce ul.products li.product, .ast-woo-shop-product-inner { padding: 14px !important; border-radius: 16px !important; }
    .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h2 { font-size: 16px !important; }
    .woocommerce ul.products li.product img { border-radius: 12px !important; margin-bottom: 10px !important; }
    .variable-item, .swatch-item { padding: 4px 10px !important; font-size: 11px !important; }
    .woocommerce-cart table.cart, .woocommerce-cart .cart_totals, .woocommerce-checkout #order_review, .woocommerce-checkout .checkout { padding: 15px !important; }
    .wp-block-group.apple-style-card { padding: 20px !important; border-radius: 20px !important; }
}
/* ==========================================================================
   FIX: REMOVE TEXT AND HOVER EFFECTS
   ========================================================================== */

/* 1. Base Container - Maintain look without hover interaction */
.product-category, .ast-woo-shop-product-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #12121a !important;
    border-radius: 20px !important;
    padding: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: none !important; /* Remove transition */
    position: relative !important;
}

/* 2. Remove all hover effects */
.product-category:hover, 
.ast-woo-shop-product-inner:hover {
    border-color: rgba(255, 255, 255, 0.05) !important;
    box-shadow: none !important;
    transform: none !important;
}

.product-category:hover img,
.product-category:hover h2, 
.product-category:hover .woocommerce-loop-category__title {
    transform: none !important;
    background-color: transparent !important;
}

/* 4. Ensure images are centered and display correctly */
.product-category img {
    margin: 0 !important;
    max-height: 140px !important;
    width: auto !important;
    object-fit: contain !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 767px) {
    .product-category { padding: 15px !important; }
    .product-category img { max-height: 100px !important; }
}
/* ==========================================================================
   VISIT US SECTION: MAP ROUNDED CORNERS & BUTTON STYLING
   ========================================================================== */

/* 1. Add rounded corners to the Google Map iframe/container */
.elementor-widget-google_maps iframe,
.wp-block-embed-google-maps iframe,
.map-container iframe {
    border-radius: 20px !important;
    overflow: hidden !important;
}

/* 2. Style "Shop Now" as a blue, pill-shaped button */
/* Note: Adjust the selector if this button has a specific class like .elementor-button */
a:contains("SHOP NOW"), 
.shop-now-button {
    display: inline-block !important;
    background-color: #0066cc !important;
    color: #ffffff !important;
    padding: 10px 25px !important;
    border-radius: 50px !important; /* Pill shape */
    text-transform: uppercase !important;
    font-weight: bold !important;
    text-decoration: none !important;
    transition: background-color 0.3s ease !important;
}

/* Hover state for the new button */
a:contains("SHOP NOW"):hover, 
.shop-now-button:hover {
    background-color: #0052a3 !important;
}
/* ==========================================================================
   FIX: BLUE FADED CORNER OVERLAY (VIGNETTE)
   ========================================================================== */

/* Target the Map and Footer Video */
.elementor-widget-google_maps iframe,
.map-container iframe,
footer video, 
.footer-video-container {
    /* The inset shadow creates the blue 'fade' on the corners */
    box-shadow: inset 0 0 60px 20px rgba(0, 102, 204, 0.4) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
}

/* Specific adjustment if your video is in a specific elementor container */
.elementor-widget-video video {
    box-shadow: inset 0 0 60px 20px rgba(0, 102, 204, 0.4) !important;
    border-radius: 20px !important;
}
/* ==========================================================================
   FIX: ENHANCED BLUE FADED CORNER OVERLAY (POPPING EFFECT)
   ========================================================================== */

/* Target the Map and Video with a more intense glow */
.elementor-widget-google_maps iframe,
.map-container iframe,
footer video, 
.footer-video-container,
.elementor-widget-video video {
    /* Increased blur and intensity for more 'pop' */
    box-shadow: inset 0 0 80px 30px rgba(0, 102, 204, 0.6) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
}
/* ==========================================================================
   FIX: HERO SECTION "SHOP NOW" BUTTON TO BLUE PILL
   ========================================================================== */

/* Target the specific button in your hero section */
.elementor-element .elementor-button, 
.hero-section a.elementor-button {
    background-color: #0066cc !important; /* Your brand blue */
    border-radius: 50px !important;       /* Makes it a pill shape */
    padding: 12px 40px !important;        /* Adds space for the pill look */
    color: #ffffff !important;            /* White text */
    border: none !important;
    transition: all 0.3s ease !important;
}

/* Add a subtle hover effect */
.elementor-element .elementor-button:hover {
    background-color: #0052a3 !important; /* Darker blue on hover */
    transform: scale(1.05) !important;    /* Slight lift on hover */
}
/* ==========================================================================
   FIX: INVERT LOGO COLORS
   ========================================================================== */

/* Target the logo image in the footer area */
footer img, 
.footer-logo img {
    filter: invert(1) brightness(1.5) !important;
    transition: filter 0.3s ease !important;
}

/*Model tab color- additional info */
.woocommerce-js div.product .woocommerce-tabs .shop_attributes th

  {
	color: white; !important
}

/* FIX UI */
.astra-cart-drawer-title, .woocommerce-mini-cart__total strong{
	color:white !important;
}

.wc-forward{
	background-color:white !important;
  color: black !important; 
}

.wc-forward:hover{
	background-color:lightgray !important;
  color: black !important; 
}

/* Categories in Shop Page */
/* Category card */
li.product-category > a {
    display: flex !important;
    flex-direction: column;
    align-items: center;
}

/* Category image */
li.product-category > a img {
    display: block;
    margin-bottom: 12px !important;
}

/* Category title */
li.product-category .woocommerce-loop-category__title {
    position: static !important;
    width: 100%;
    margin: 0 !important;
    text-align: center;
}

/* Product count - separate line under title */
li.product-category .woocommerce-loop-category__title .count {
    display: block;
    margin-top: 5px;
    background: none;
	color:lightgray !important;
    font-size: 14px;
    font-weight: 400;
}

.payment_box p{
	color:grey !important;
}