/*
Theme Name: Maxim Defense – BeTheme Child
Theme URI: https://maximdefense.com/
Description: Child theme for Maxim Defense, built on BeTheme. Ensures custom modifications are preserved during parent theme updates.
Author: CMG
Author URI: https://maximdefense.com/
Template: betheme
Version: 1.4.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: maxim-defense-child
*/

/*
========================================================================
    Maxim Defense – BeTheme Child Theme
========================================================================

    Add custom CSS below this line.
    All parent theme styles are inherited automatically.

========================================================================
*/


/* -------------------------------------------------------------------
   WPCode #267028 — Fixing Scrolling on Particular page(s)
   ------------------------------------------------------------------- */
body {
  overflow-y: auto !important;
}


/* -------------------------------------------------------------------
   WPCode #263092 — Dynamic Viewport height (mobile)
   ------------------------------------------------------------------- */
@media (max-width: 767px){
  html,body{height:auto!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch}
  #Wrapper, #Content, .mfn-main, .content_wrapper{
    height:auto!important; min-height:0!important; overflow:visible!important; transform:none!important; contain:none!important
  }
  [class*="scroll-snap"], [style*="scroll-snap"], .has-scroll-snap{
    scroll-snap-type:none!important; scroll-snap-align:none!important
  }
  [style*="overflow-y: scroll"], [style*="overflow-y: auto"], .scrollable, .overflow-auto, .overflow-scroll{
    overflow-y:visible!important
  }
  @supports (height: 100dvh){
    [style*="height:100vh"], [style*="min-height:100vh"],
    .section.full-screen, .mcb-section.full-screen, .mfn-section-full-screen{
      height:auto!important; min-height:100dvh!important
    }
  }
}


/* =====================================================================
   Elementor vs. BeTheme Conflict Fixes
   =====================================================================
   The homepage (and sitewide header/footer) use Elementor Pro; all
   other pages — including WooCommerce archives, product detail, cart,
   checkout, account, and inner pages — use BeTheme's native Muffin
   Builder.

   Elementor's global frontend CSS injects resets that override two
   BeTheme styles on non-Elementor pages:

     1. text-transform: uppercase  →  reset to "none"
     2. Heading margin-top         →  collapsed

   Verified against production (maximdefense.com) vs. staging
   (maximdstaging.wpenginepowered.com) via DOM inspection on the
   Firearms category page, April 2026.

   All other BeTheme styles (font family, size, weight, color, layout)
   are preserved and render correctly. Fixes below are scoped narrowly
   to avoid side effects on Elementor pages.
   ===================================================================== */


/* -------------------------------------------------------------------
   Fix 1. Product Card Titles — Restore uppercase + top margin
   h4.mfn-woo-product-title sits directly under the product thumbnail.
   Prod: text-transform uppercase, margin-top ~27px. Elementor's reset
   drops both.
   ------------------------------------------------------------------- */
.woocommerce ul.products li.product h4.mfn-woo-product-title,
.woocommerce ul.products li.product h4.mfn-woo-product-title a,
.woocommerce-page ul.products li.product h4.mfn-woo-product-title {
  text-transform: uppercase !important;
}

.woocommerce ul.products li.product h4.mfn-woo-product-title,
.woocommerce-page ul.products li.product h4.mfn-woo-product-title {
  margin-top: 27px !important;
}


/* -------------------------------------------------------------------
   Fix 2. Add-to-Cart / Select Options Button — Restore uppercase
   Buttons on the category listing grid should read "SELECT OPTIONS"
   in uppercase. Elementor's button reset strips text-transform.
   Scope to WooCommerce product buttons only so Elementor homepage
   buttons keep their own casing.
   ------------------------------------------------------------------- */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product button.button,
.woocommerce-page ul.products li.product a.button,
.woocommerce-page ul.products li.product button.button,
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  text-transform: uppercase !important;
}


/* -------------------------------------------------------------------
   Fix 2b. Single Product Page Title — Restore uppercase
   h1.product_title on the single product page. Prod renders "MGS-MOD 1
   SUPPRESSOR" uppercase; Elementor's h1 reset strips text-transform.
   ------------------------------------------------------------------- */
.woocommerce div.product h1.product_title,
.woocommerce div.product .entry-summary h1,
body:not(.elementor-page) .woocommerce h1.product_title {
  text-transform: uppercase !important;
}


/* -------------------------------------------------------------------
   Fix 2c. WooCommerce Tab Panel Headings — Restore uppercase
   "DESCRIPTION", "ADDITIONAL INFORMATION", "REVIEWS" on the single
   product page tab panels. BeTheme renders these uppercase.
   ------------------------------------------------------------------- */
.woocommerce div.product .woocommerce-tabs h2,
.woocommerce div.product .woocommerce-Tabs-panel h2,
.woocommerce div.product .related h2,
.woocommerce div.product .upsells h2,
.woocommerce div.product .cross-sells h2 {
  text-transform: uppercase !important;
}


/* -------------------------------------------------------------------
   Fix 3. Sidebar Filter Headings — Restore uppercase
   "BARREL LENGTH", "CALIBER", etc. should render uppercase via CSS,
   not via literal text content. Elementor's h3 reset sets text-transform
   to none. Restore on widget/sidebar headings on non-Elementor pages.
   ------------------------------------------------------------------- */
body:not(.elementor-page) .widget-area h2,
body:not(.elementor-page) .widget-area h3,
body:not(.elementor-page) .widget-area .widget-title,
body:not(.elementor-page) aside h2,
body:not(.elementor-page) aside h3,
body:not(.elementor-page) .sidebar h2,
body:not(.elementor-page) .sidebar h3,
body:not(.elementor-page) .berocket_single_filter_widget h3,
body:not(.elementor-page) .widgettitle {
  text-transform: uppercase !important;
  color: rgb(24, 76, 208) !important;
}


/* -------------------------------------------------------------------
   Fix 4. Product Card Button Row — Restore vertical stack
   On prod, .mfn-li-product-row-button is a flex column with two stacked
   children: the Credova financing line above the "SELECT OPTIONS" button.
   Elementor's global flex reset flips the row to flex-direction: row and
   zeroes out the `order` values on children, so both items render
   side-by-side instead of stacked.

   Structure to restore:
     .mfn-li-product-row-button (flex column)
       ├── p.credova-response-amount-*   (order: 1)  ← on top
       └── a.button.add_to_cart_button   (order: 2)  ← below
   ------------------------------------------------------------------- */
.woocommerce ul.products li.product .mfn-li-product-row-button,
.woocommerce-page ul.products li.product .mfn-li-product-row-button {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  align-items: flex-start !important;
  margin-top: auto !important;
}

.woocommerce ul.products li.product .mfn-li-product-row-button > a.button,
.woocommerce ul.products li.product .mfn-li-product-row-button > button.button,
.woocommerce-page ul.products li.product .mfn-li-product-row-button > a.button,
.woocommerce-page ul.products li.product .mfn-li-product-row-button > button.button {
  order: 2 !important;
}

.woocommerce ul.products li.product .mfn-li-product-row-button > p[class*="credova-response-amount"],
.woocommerce-page ul.products li.product .mfn-li-product-row-button > p[class*="credova-response-amount"] {
  order: 1 !important;
}

.woocommerce ul.products li.product .mfn-li-product-row-button > .mfn-wish-button,
.woocommerce-page ul.products li.product .mfn-li-product-row-button > .mfn-wish-button {
  order: 3 !important;
}


/* -------------------------------------------------------------------
   Fix 5. Credova Financing Line — Restore uppercase
   Prod renders "AS LOW AS $188.65/MO WITH credova. LEARN MORE" in
   uppercase. Staging's plugin output is mixed case. Scope tightly to
   the financing paragraph so we don't affect anything else.
   ------------------------------------------------------------------- */
.woocommerce p[class*="credova-response-amount"],
.woocommerce-page p[class*="credova-response-amount"] {
  text-transform: uppercase !important;
  font-size: 11px !important;
}


/* -------------------------------------------------------------------
   Fix 6. WooCommerce Sort/Filter Bar — Restore hidden state
   BeTheme wraps .woocommerce-ordering (and the results count) inside
   .mfn-woo-filters-wrapper.shop-filters and sets it to display:none —
   it replaces this bar with its own MFN filter UI. Elementor's global
   CSS resets display on this wrapper, making it reappear above the
   product grid on non-Elementor archive pages.
   Scope to non-Elementor pages to leave any Elementor shop pages alone.
   ------------------------------------------------------------------- */
body:not(.elementor-page) form.woocommerce-ordering,
body:not(.elementor-page) .mfn-woo-filters-wrapper,
body:not(.elementor-page) .mfn-woo-filters-wrapper.shop-filters {
  display: none !important;
}


/* -------------------------------------------------------------------
   Fix 7. Variation Selector in Product Grid — Hide
   BeTheme uses .mfn-variations-wrapper-loop / .mfn-vr-select (not the
   standard .variations_form) for the mini variation dropdown on archive
   pages. Both sets of selectors are included for forward-compatibility.
   ------------------------------------------------------------------- */
.woocommerce ul.products li.product .mfn-variations-wrapper-loop,
.woocommerce ul.products li.product .mfn-vr-select,
.woocommerce ul.products li.product .variations_form,
.woocommerce ul.products li.product .variations,
.woocommerce-page ul.products li.product .mfn-variations-wrapper-loop,
.woocommerce-page ul.products li.product .mfn-vr-select,
.woocommerce-page ul.products li.product .variations_form,
.woocommerce-page ul.products li.product .variations {
  display: none !important;
}


/* -------------------------------------------------------------------
   Fix 8. Product Grid Price — Restore size, weight, and color
   Elementor's global color palette and typography variables can bleed
   into .price on non-Elementor archive pages, inflating font-size and
   washing out the color. Prod values: 18px, 400, #20247 (dark navy).
   Scope to the product grid only to avoid the single-product page.
   ------------------------------------------------------------------- */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .woocommerce-Price-amount,
.woocommerce ul.products li.product .price .woocommerce-Price-amount bdi,
.woocommerce-page ul.products li.product .price,
.woocommerce-page ul.products li.product .price .woocommerce-Price-amount,
.woocommerce-page ul.products li.product .price .woocommerce-Price-amount bdi {
  font-size: 18px !important;
  font-weight: 400 !important;
  color: rgb(32, 36, 72) !important;
}


/* -------------------------------------------------------------------
   Fix 9. Product Card — border-box padding, flex column, position relative
   border-box keeps columns 3-up. flex column + position:relative enable
   button bottom-alignment (Fix 4) and wish button overlay (Fix 14).
   ------------------------------------------------------------------- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  box-sizing: border-box !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
}


/* -------------------------------------------------------------------
   Fix 11. Star Rating — Restore blue color
   Elementor global color palette overrides the BeTheme .themecolor rule
   that sets .star-rating span to the brand dark navy.
   ------------------------------------------------------------------- */
.woocommerce .star-rating span,
.woocommerce .star-rating span::before {
  color: rgb(32, 36, 72) !important;
}


/* -------------------------------------------------------------------
   Fix 12. Image Overlay (image_links) — Hide entirely
   The hover overlay (quickview etc.) is removed. The wish button (heart)
   is handled independently via Fix 14 below.
   ------------------------------------------------------------------- */
.woocommerce ul.products li.product .image_links,
.woocommerce-page ul.products li.product .image_links {
  display: none !important;
}


/* -------------------------------------------------------------------
   Fix 14. Wish Button (heart) — Always visible, top-right of card
   Positioned absolute relative to li.product (position:relative via Fix 9).
   ------------------------------------------------------------------- */
.woocommerce ul.products li.product .mfn-wish-button,
.woocommerce-page ul.products li.product .mfn-wish-button {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  z-index: 3 !important;
}


/* -------------------------------------------------------------------
   Fix 13. Price Filter Slider — Restore blue
   Covers both jQuery UI (.ui-slider) and Ion Range Slider (.irs--flat).
   ------------------------------------------------------------------- */
.widget_price_filter .ui-slider .ui-slider-range {
  background: rgb(24, 76, 208) !important;
}
.widget_price_filter .ui-slider .ui-slider-handle {
  background: rgb(24, 76, 208) !important;
  border-color: rgb(24, 76, 208) !important;
}
.irs--flat .irs-bar,
.irs--flat .irs-bar--edge {
  background-color: rgb(24, 76, 208) !important;
}
.irs--flat .irs-handle > i:first-child {
  background-color: rgb(24, 76, 208) !important;
}
.irs--flat .irs-from,
.irs--flat .irs-to,
.irs--flat .irs-single {
  background-color: rgb(24, 76, 208) !important;
  color: #fff !important;
}
.irs--flat .irs-from::before,
.irs--flat .irs-to::before,
.irs--flat .irs-single::before {
  border-top-color: rgb(24, 76, 208) !important;
}


/* -------------------------------------------------------------------
   Fix 10. Product Image Wrapper — Fixed height + object-fit: contain
   Prod: .image_wrapper is 260px tall, overflow hidden. Image uses
   contain so it scales to width and sits within the fixed container.
   Staging has no fixed height, image stretches with object-fit: fill.
   ------------------------------------------------------------------- */
.woocommerce ul.products li.product .image_frame.product-loop-thumb,
.woocommerce ul.products li.product .image_wrapper,
.woocommerce-page ul.products li.product .image_frame.product-loop-thumb,
.woocommerce-page ul.products li.product .image_wrapper {
  height: 260px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.woocommerce ul.products li.product .image_wrapper img,
.woocommerce-page ul.products li.product .image_wrapper img {
  object-fit: contain !important;
  width: 100% !important;
  height: auto !important;
  max-height: 100% !important;
}