/* MotorFans Design System — Astra + Elementor + XPRO + WPForms + WooCommerce */
:root{
  --mf-accent:#8ec23f; --mf-accent-light:#a7d75b; --mf-accent-glow:rgba(142,194,63,.35);
  --mf-bg:#0a0a0f; --mf-surface:#16161f; --mf-border:rgba(255,255,255,.08);
  --mf-text:#f0f0f5; --mf-text2:#9090a8; --mf-danger:#ff5c5c;
  --mf-font-head:'IBM Plex Sans',sans-serif; --mf-font-body:'DM Sans',sans-serif;
  --mf-radius:12px; --mf-radius-lg:20px; --mf-transition:.3s cubic-bezier(.22,.61,.36,1);
}
/* ---- Body-level dark theme on top of Astra ---- */
body,body.ast-page-builder-template,body.ast-plain-container,body.elementor-page{
  background:var(--mf-bg)!important;color:var(--mf-text)!important;font-family:var(--mf-font-body)!important;
}
body h1,body h2,body h3,body h4,body h5,body h6,.entry-title,.elementor-heading-title{
  font-family:var(--mf-font-head)!important;color:var(--mf-text);letter-spacing:-.01em;line-height:1.15;
}
::selection{background:var(--mf-accent);color:#0a0a0f}
a{color:inherit}

/* Astra content padding reset when Elementor takes over */
.ast-plain-container .entry-content,.ast-page-builder-template .entry-content{padding:0!important;margin:0!important}

/* ---- Elementor button widget → design-system button via css_classes ---- */
.elementor-widget-button.mf-btn .elementor-button,
.mf-btn .elementor-button{
  background:var(--mf-accent);color:#0a0a0f!important;font-family:var(--mf-font-head);font-weight:700;
  padding:14px 28px;border-radius:99px;border:0;letter-spacing:.02em;transition:var(--mf-transition);
  box-shadow:0 6px 24px var(--mf-accent-glow);
}
.mf-btn .elementor-button:hover{background:var(--mf-accent-light)!important;transform:translateY(-2px);box-shadow:0 12px 28px var(--mf-accent-glow)}
.mf-btn-ghost .elementor-button{background:transparent!important;border:1px solid rgba(255,255,255,.18)!important;color:var(--mf-text)!important;box-shadow:none}
.mf-btn-ghost .elementor-button:hover{border-color:var(--mf-accent)!important;color:var(--mf-accent)!important;background:transparent!important}

/* ---- Elementor container utility classes (drop on any Container) ---- */
.e-con.mf-section{padding-block:80px!important}
.e-con.mf-surface{background:var(--mf-surface);border:1px solid var(--mf-border);border-radius:var(--mf-radius-lg)}
.e-con.mf-card{background:var(--mf-surface);border:1px solid var(--mf-border);border-radius:var(--mf-radius-lg);padding:32px}
.e-con.mf-hero{padding-block:70px 90px!important;position:relative;overflow:hidden}
.e-con.mf-hero::before{content:"";position:absolute;top:-15%;right:-8%;width:60vw;height:130%;pointer-events:none;
  background:conic-gradient(from 210deg at 78% 40%,transparent 0deg,rgba(142,194,63,.14) 14deg,rgba(142,194,63,.03) 34deg,transparent 60deg);
  filter:blur(6px);z-index:0}
.e-con.mf-hero > *{position:relative;z-index:1}

/* Elementor icon-box (services / features cards) */
.elementor-widget-icon-box.mf-icon-card .elementor-icon-box-wrapper{
  background:var(--mf-surface);border:1px solid var(--mf-border);border-radius:var(--mf-radius);padding:32px 28px;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.mf-icon-card .elementor-icon-box-wrapper:hover{transform:translateY(-6px);border-color:rgba(142,194,63,.4);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.mf-icon-card .elementor-icon-box-icon{margin-bottom:20px}
.mf-icon-card .elementor-icon{width:52px;height:52px;border-radius:12px;display:grid;place-items:center;
  background:rgba(142,194,63,.12);color:var(--mf-accent);font-size:1.3rem;border:1px solid rgba(142,194,63,.25)}
.mf-icon-card .elementor-icon-box-title{color:var(--mf-text)!important;font-size:1.12rem!important;margin-bottom:10px!important}
.mf-icon-card .elementor-icon-box-description{color:var(--mf-text2)!important;font-size:.94rem;line-height:1.65}

/* Elementor icon-list (footer link cols) */
.elementor-widget-icon-list.mf-flinks .elementor-icon-list-item a{color:var(--mf-text2)!important;transition:var(--mf-transition)}
.mf-flinks .elementor-icon-list-item a:hover{color:var(--mf-accent)!important;padding-left:4px}

/* Elementor accordion → FAQ */
.elementor-widget-accordion.mf-faq .elementor-accordion-item{
  background:var(--mf-surface)!important;border:1px solid var(--mf-border)!important;
  border-radius:var(--mf-radius)!important;margin-bottom:12px;overflow:hidden;
}
.mf-faq .elementor-tab-title{padding:18px 22px!important;font-family:var(--mf-font-head)!important;font-weight:700;
  border:0!important;background:transparent!important;color:var(--mf-text)!important}
.mf-faq .elementor-tab-title.elementor-active{color:var(--mf-accent)!important}
.mf-faq .elementor-tab-content{background:transparent!important;border:0!important;padding:0 22px 20px!important;
  color:var(--mf-text2)!important;font-size:.94rem;line-height:1.7}

/* Text editor widget → muted body copy default */
.elementor-widget-text-editor{color:var(--mf-text2)}

/* Elementor image widget aesthetics */
.elementor-widget-image.mf-cat img{border-radius:var(--mf-radius-lg);border:1px solid var(--mf-border);transition:var(--mf-transition)}
.elementor-widget-image.mf-cat:hover img{border-color:var(--mf-accent);transform:translateY(-6px)}

/* ---- Countdown timer (shortcode output) ---- */
.mf-countdown{display:flex;gap:10px;max-width:360px}
.mf-count-box{flex:1;background:rgba(10,10,15,.55);border:1px solid var(--mf-border);border-radius:12px;text-align:center;padding:14px 6px}
.mf-count-box b{display:block;font-family:var(--mf-font-head);font-weight:800;font-size:1.5rem;color:var(--mf-accent);line-height:1}
.mf-count-box span{font-size:.68rem;color:var(--mf-text2);letter-spacing:.14em;text-transform:uppercase}

/* Feature strip (shortcode output) */
.mf-feature-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:24px 0}
.mf-feature{display:flex;gap:14px;align-items:center;padding:12px;border-radius:var(--mf-radius);background:var(--mf-surface);border:1px solid var(--mf-border)}
.mf-feature i{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;background:rgba(142,194,63,.12);color:var(--mf-accent);font-size:1.05rem}
.mf-feature b{font-family:var(--mf-font-head);font-size:.92rem;color:var(--mf-text);display:block}
.mf-feature span{color:var(--mf-text2);font-size:.78rem}
@media(max-width:1024px){.mf-feature-strip{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.mf-feature-strip{grid-template-columns:1fr 1fr}}

/* Newsletter (shortcode output) */
.mf-newsletter-form{display:flex;flex-wrap:wrap;gap:8px;width:100%;max-width:520px;background:var(--mf-surface);border:1px solid var(--mf-border);border-radius:16px;padding:8px;position:relative;box-sizing:border-box}.mf-newsletter-form input[type=email]{flex:1 1 160px;min-width:140px;background:transparent;border:0;color:var(--mf-text);padding:12px 16px;font-size:.95rem;box-sizing:border-box}.mf-newsletter-form input[type=email]::placeholder{color:var(--mf-text2)}.mf-newsletter-form input[type=email]:focus{outline:none}.mf-newsletter-form .mf-btn-primary{flex:1 1 auto;padding:12px 24px;border-radius:10px;background:var(--mf-accent);color:#0a0a0f;font-weight:700;border:0;cursor:pointer;font-family:var(--mf-font-head);white-space:nowrap;transition:var(--mf-transition)}.mf-newsletter-form .mf-btn-primary:hover{background:var(--mf-accent-light)}.mf-news-msg{flex-basis:100%;padding-top:4px;font-size:.82rem;color:var(--mf-accent);text-align:center;min-height:0}

/* =========================================================
   WPFORMS  →  premium form styling (fixes the contact screenshot)
   ========================================================= */
.wpforms-container{max-width:720px;margin:0 auto}
.wpforms-container form{display:flex;flex-direction:column;gap:18px}
.wpforms-container .wpforms-field{padding:0!important;margin:0!important}
.wpforms-container .wpforms-field-label,
.wpforms-container label.wpforms-field-label{
  display:block;font-family:var(--mf-font-head);font-weight:600;font-size:.85rem;color:var(--mf-text)!important;
  margin-bottom:8px!important;letter-spacing:.02em;
}
.wpforms-required-label{color:var(--mf-danger);margin-left:3px}

/* All inputs same height + rounded + dark; message = taller, resizable */
.wpforms-container .wpforms-field-medium,
.wpforms-container input[type=text],
.wpforms-container input[type=email],
.wpforms-container input[type=tel],
.wpforms-container input[type=url],
.wpforms-container input[type=number],
.wpforms-container input[type=date],
.wpforms-container select,
.wpforms-container textarea{
  width:100%!important;box-sizing:border-box;height:52px;padding:14px 18px;
  background:var(--mf-surface)!important;border:1px solid var(--mf-border)!important;border-radius:12px!important;
  color:var(--mf-text)!important;font-family:var(--mf-font-body);font-size:.95rem;line-height:1.4;
  transition:border-color .25s ease,box-shadow .25s ease;box-shadow:none;
}
.wpforms-container textarea{height:auto;min-height:150px;padding:16px 18px;resize:vertical}
.wpforms-container input::placeholder,.wpforms-container textarea::placeholder{color:var(--mf-text2);opacity:1}
.wpforms-container input:focus,.wpforms-container select:focus,.wpforms-container textarea:focus{
  outline:none!important;border-color:var(--mf-accent)!important;box-shadow:0 0 0 3px rgba(142,194,63,.15)!important;
}
.wpforms-container .wpforms-field.wpforms-has-error input,
.wpforms-container .wpforms-field.wpforms-has-error textarea,
.wpforms-container .wpforms-field.wpforms-has-error select{border-color:var(--mf-danger)!important}
.wpforms-container label.wpforms-error{color:var(--mf-danger);font-size:.8rem;margin-top:5px;display:block}

/* Submit button */
.wpforms-container .wpforms-submit-container{margin-top:8px!important}
.wpforms-container button[type=submit],.wpforms-container .wpforms-submit{
  display:inline-flex!important;align-items:center;justify-content:center;gap:10px;
  padding:16px 34px!important;border-radius:99px!important;border:0!important;cursor:pointer;
  background:var(--mf-accent)!important;color:#0a0a0f!important;font-family:var(--mf-font-head)!important;font-weight:700!important;font-size:.98rem!important;
  box-shadow:0 6px 24px var(--mf-accent-glow);transition:var(--mf-transition);width:auto;
}
.wpforms-container button[type=submit]:hover{background:var(--mf-accent-light)!important;transform:translateY(-2px)}

/* Success confirmation */
div.wpforms-container-full .wpforms-confirmation-container-full{
  background:rgba(142,194,63,.12)!important;border:1px solid rgba(142,194,63,.35)!important;
  border-radius:12px!important;color:var(--mf-text)!important;padding:18px 20px!important;
}

@media(max-width:600px){
  .wpforms-container .wpforms-field-medium,.wpforms-container input,.wpforms-container select{height:48px;padding:12px 15px}
  .wpforms-container button[type=submit]{width:100%!important;padding:14px 24px!important}
}

/* =========================================================
   WOOCOMMERCE  →  cart / checkout / my-account restyle
   ========================================================= */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-notices-wrapper .woocommerce-message{
  background:var(--mf-surface)!important;border:1px solid var(--mf-border)!important;border-left:3px solid var(--mf-accent)!important;
  color:var(--mf-text)!important;border-radius:12px;padding:16px 20px
}
.woocommerce-error{border-left-color:var(--mf-danger)!important}
.woocommerce .button,.woocommerce a.button,.woocommerce button.button,
.woocommerce input.button,.woocommerce #respond input#submit{
  background:var(--mf-accent)!important;color:#0a0a0f!important;font-family:var(--mf-font-head)!important;font-weight:700!important;
  padding:14px 28px!important;border-radius:99px!important;border:0!important;letter-spacing:.02em;box-shadow:0 6px 24px var(--mf-accent-glow);
  transition:var(--mf-transition)
}
.woocommerce .button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover{background:var(--mf-accent-light)!important;transform:translateY(-2px)}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select{
  background:var(--mf-surface)!important;border:1px solid var(--mf-border)!important;color:var(--mf-text)!important;
  border-radius:10px!important;padding:13px 15px!important;font-family:var(--mf-font-body);height:auto
}
.woocommerce form .form-row label{color:var(--mf-text2)!important;font-weight:600;font-size:.82rem;letter-spacing:.04em}
.woocommerce table.shop_table{border:0!important;background:transparent!important}
.woocommerce table.shop_table th{color:var(--mf-text2)!important;background:transparent!important;font-family:var(--mf-font-head);text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;border-bottom:1px solid var(--mf-border)}
.woocommerce table.shop_table td{background:transparent!important;border-bottom:1px solid var(--mf-border)!important;color:var(--mf-text)}
.woocommerce table.shop_table td a{color:var(--mf-text)}.woocommerce table.shop_table td a:hover{color:var(--mf-accent)}
.woocommerce .cart-collaterals .cart_totals,.woocommerce-checkout #order_review,.woocommerce-checkout .col-1,.woocommerce-checkout .col-2{
  background:var(--mf-surface)!important;border:1px solid var(--mf-border)!important;border-radius:var(--mf-radius-lg);padding:28px!important
}
.woocommerce ul.products li.product{
  background:var(--mf-surface)!important;border:1px solid var(--mf-border)!important;border-radius:var(--mf-radius-lg);
  padding:0!important;overflow:hidden;transition:var(--mf-transition)
}
.woocommerce ul.products li.product:hover{transform:translateY(-6px);border-color:rgba(142,194,63,.4)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{color:var(--mf-text)!important;font-family:var(--mf-font-head)!important;padding:16px 22px 4px}
.woocommerce ul.products li.product .price{color:var(--mf-accent)!important;font-family:var(--mf-font-head)!important;font-weight:800;padding:0 22px}
.woocommerce ul.products li.product .price del{color:var(--mf-text2)!important;opacity:1}
.woocommerce ul.products li.product .button{margin:14px 22px 22px}
.woocommerce span.onsale{background:var(--mf-accent)!important;color:#0a0a0f!important;font-family:var(--mf-font-head);border-radius:99px;font-size:.68rem;letter-spacing:.12em;min-height:0;min-width:0;padding:5px 11px;line-height:1}
.woocommerce nav.woocommerce-pagination ul{border:0!important}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{
  background:var(--mf-surface)!important;color:var(--mf-text)!important;border:1px solid var(--mf-border)!important;border-radius:10px;
  min-width:44px;height:44px;display:grid;place-items:center;font-family:var(--mf-font-head);font-weight:600
}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--mf-accent)!important;color:#0a0a0f!important;border-color:var(--mf-accent)!important}

/* My Account (auth) */
.woocommerce-account:not(.logged-in) .woocommerce{max-width:460px;margin:60px auto;background:var(--mf-surface);border:1px solid var(--mf-border);border-radius:24px;padding:46px 42px}
.woocommerce-account .woocommerce-MyAccount-navigation ul{padding:0}
.woocommerce-account .woocommerce-MyAccount-navigation li{list-style:none}
.woocommerce-account .woocommerce-MyAccount-navigation li a{display:block;padding:12px 14px;border-radius:10px;color:var(--mf-text2)!important;font-weight:500;transition:var(--mf-transition)}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{color:#0a0a0f!important;background:var(--mf-accent);font-weight:700}

/* Astra header/footer suppress when XPRO takes over */
body.xpro-has-header .ast-primary-header-bar,body.xpro-has-header header#masthead{display:none!important}
body.xpro-has-footer footer#colophon{display:none!important}

/* ===== Polish patch ===== */
.ast-primary-sidebar,#secondary,.ast-left-sidebar,.ast-right-sidebar{display:none!important}
.ast-container{display:block!important;max-width:none!important;padding:0!important}
.ast-page-builder-template .site-content .content-area{padding:0!important}
body.page-template-elementor_header_footer #masthead,body.page-template-elementor_header_footer #colophon,body.page-template-elementor_header_footer .ast-secondary-header-bar{display:none!important}
a{color:inherit;text-decoration:none;transition:color .2s ease}
a:hover{color:var(--mf-accent)}
.elementor-widget-heading a:hover,.elementor-widget-text-editor a:hover{color:var(--mf-accent-light)}
/* XPRO testimonial dark card */
.xpro-elementor-testimonial,.elementor-widget-xpro-testimonial .xpro-elementor-testimonial-wrapper{background:var(--mf-surface);border:1px solid var(--mf-border);border-radius:var(--mf-radius-lg);padding:30px;transition:var(--mf-transition)}
.elementor-widget-xpro-testimonial:hover .xpro-elementor-testimonial-wrapper{transform:translateY(-6px);border-color:rgba(142,194,63,.4)}
.xpro-elementor-testimonial-name,.xpro-elementor-testimonial-designation,.xpro-elementor-testimonial-description,.xpro-testimonial-name,.xpro-testimonial-designation,.xpro-testimonial-description{color:var(--mf-text)!important}
.xpro-testimonial-description,.xpro-elementor-testimonial-description{color:var(--mf-text2)!important;font-size:.95rem;line-height:1.65}
/* XPRO social icons dark */
.xpro-elementor-social-icon a{background:var(--mf-surface)!important;border-color:var(--mf-border)!important;color:var(--mf-text2)!important}
.xpro-elementor-social-icon a:hover{background:var(--mf-accent)!important;color:#0a0a0f!important;border-color:var(--mf-accent)!important}
/* XPRO menu items dark */
.xpro-elementor-nav-menu li a,.xpro-horizontal-menu li a{color:var(--mf-text2)!important;transition:color .2s ease,background .2s ease;padding:9px 13px!important;border-radius:8px}
.xpro-elementor-nav-menu li a:hover,.xpro-horizontal-menu li a:hover{color:var(--mf-text)!important;background:rgba(255,255,255,.05)}
.xpro-elementor-nav-menu li.current-menu-item>a,.xpro-horizontal-menu li.current-menu-item>a{color:var(--mf-accent)!important}
/* Ensure containers flow full width on mobile */
@media(max-width:767px){
  .e-con{padding-inline:16px!important}
  .mf-feature-strip{grid-template-columns:1fr 1fr!important}
  .elementor-widget-heading .elementor-heading-title{font-size:clamp(1.7rem,7vw,2.4rem)!important}
}
/* Elementor icon-box hover polish */
.mf-icon-card .elementor-icon-box-wrapper{height:100%}
/* Star rating gold for XPRO testimonials */
.xpro-elementor-testimonial-rating i,.xpro-testimonial-rating i{color:#ffc93c!important}
/* Cart badge inside XPRO header cart button */
#mf-cart-btn{position:relative}
/* Elementor button widget with class mf-btn: force accent text color hover parity */
.elementor-widget-button.mf-btn .elementor-button-icon svg,
.elementor-widget-button.mf-btn .elementor-button-content-wrapper{color:inherit}

/* Dark button variant (on light/gradient backgrounds e.g. CTA banners) */
.elementor-widget-button.mf-btn-dark .elementor-button{background:#0a0a0f!important;color:#f0f0f5!important;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.elementor-widget-button.mf-btn-dark .elementor-button:hover{background:#16161f!important;color:#8ec23f!important;transform:translateY(-2px)}
/* About story image: contain nicely in card */
.elementor-widget-image.mf-cat img{width:100%;object-fit:cover}

/* ============ HOME PAGE STRUCTURED BLOCKS (grid-safe) ============ */
/* Hero stats */
.mf-hero-stats{display:flex;gap:44px;flex-wrap:wrap;margin-top:8px}
.mf-hero-stats .mf-stat b{font-family:var(--mf-font-head);font-weight:800;font-size:1.7rem;color:var(--mf-text);display:block;line-height:1.1}
.mf-hero-stats .mf-stat span{color:var(--mf-text2);font-size:.85rem}
@media(max-width:640px){.mf-hero-stats{gap:28px}}

/* Category grid */
.mf-cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;width:100%}
.mf-cat-card{position:relative;border-radius:var(--mf-radius-lg);overflow:hidden;border:1px solid var(--mf-border);background:var(--mf-surface);aspect-ratio:4/3;display:block;transition:var(--mf-transition)}
.mf-cat-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85;transition:transform .55s ease}
.mf-cat-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(6,6,10,.92))}
.mf-cat-card:hover{border-color:rgba(142,194,63,.45);transform:translateY(-6px)}
.mf-cat-card:hover img{transform:scale(1.06)}
.mf-cat-info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px}
.mf-cat-info h3{font-family:var(--mf-font-head);font-weight:700;font-size:1.25rem;color:var(--mf-text);margin:0 0 3px}
.mf-cat-info span{color:var(--mf-text2);font-size:.85rem;display:block;margin-bottom:8px}
.mf-cat-info em{color:var(--mf-accent);font-style:normal;font-weight:600;font-size:.9rem;font-family:var(--mf-font-head)}
.mf-cat-info em i{margin-left:5px;transition:transform .3s ease}
.mf-cat-card:hover .mf-cat-info em i{transform:translateX(4px)}
@media(max-width:1024px){.mf-cat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.mf-cat-grid{grid-template-columns:1fr}}

/* Product grid */
.mf-product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;width:100%}
.mf-product-card{position:relative;background:var(--mf-surface);border:1px solid var(--mf-border);border-radius:var(--mf-radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:var(--mf-transition)}
.mf-product-card:hover{transform:translateY(-6px);border-color:rgba(142,194,63,.4);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.mf-pc-media{aspect-ratio:1;background:radial-gradient(120% 90% at 50% 0%,#20202e,#12121b 70%);display:grid;place-items:center;padding:18px}
.mf-pc-media img{width:100%;height:100%;object-fit:contain}
.mf-pc-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:7px;flex:1}
.mf-pc-cat{color:var(--mf-text2);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-family:var(--mf-font-head)}
.mf-pc-body h3{font-family:var(--mf-font-head);font-weight:700;font-size:1rem;color:var(--mf-text);margin:0;line-height:1.3}
.mf-pc-stars{color:#ffc93c;font-size:.85rem}
.mf-pc-stars span{color:var(--mf-text2);margin-left:5px;font-size:.78rem}
.mf-pc-price{margin-top:auto;color:var(--mf-accent);font-family:var(--mf-font-head);font-weight:800;font-size:1.15rem}
.mf-pc-price del{color:var(--mf-text2);font-weight:400;font-size:.85rem;margin-left:5px}
.mf-pc-badge{position:absolute;top:12px;left:12px;z-index:3;background:var(--mf-accent);color:#0a0a0f;font-family:var(--mf-font-head);font-weight:700;font-size:.66rem;letter-spacing:.1em;padding:5px 10px;border-radius:99px}
.mf-product-card .woocommerce-loop-product__link,.mf-product-card a{text-decoration:none}
@media(max-width:1024px){.mf-product-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.mf-product-grid{grid-template-columns:1fr}}

/* Testimonials */
.mf-testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;width:100%}
.mf-testi-card{background:var(--mf-surface);border:1px solid var(--mf-border);border-radius:var(--mf-radius-lg);padding:30px;transition:var(--mf-transition);display:flex;flex-direction:column;gap:14px}
.mf-testi-card:hover{transform:translateY(-6px);border-color:rgba(142,194,63,.4)}
.mf-testi-stars{color:#ffc93c;font-size:1rem;letter-spacing:2px}
.mf-testi-card p{color:var(--mf-text);font-size:.96rem;line-height:1.7;margin:0;flex:1}
.mf-testi-user{display:flex;align-items:center;gap:12px}
.mf-avatar{width:44px;height:44px;flex:none;border-radius:50%;background:rgba(142,194,63,.15);border:1px solid rgba(142,194,63,.3);color:var(--mf-accent);display:grid;place-items:center;font-family:var(--mf-font-head);font-weight:700;font-size:.9rem}
.mf-testi-user b{display:block;font-family:var(--mf-font-head);color:var(--mf-text);font-size:.95rem}
.mf-testi-user>div span{color:var(--mf-text2);font-size:.82rem}
@media(max-width:900px){.mf-testi-grid{grid-template-columns:1fr}}

/* WooCommerce native [products] fallback grid also uses accent */
.woocommerce ul.products li.product a img{background:radial-gradient(120% 90% at 50% 0%,#20202e,#12121b 70%)}

/* ===== ABOUT PAGE structured blocks ===== */
.mf-values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;width:100%}
.mf-value-card{background:var(--mf-surface);border:1px solid var(--mf-border);border-radius:var(--mf-radius-lg);padding:34px 28px;text-align:center;transition:var(--mf-transition);display:flex;flex-direction:column;align-items:center;gap:14px}
.mf-value-card:hover{transform:translateY(-6px);border-color:rgba(142,194,63,.4);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.mf-value-icon{width:64px;height:64px;border-radius:16px;display:grid;place-items:center;background:rgba(142,194,63,.12);border:1px solid rgba(142,194,63,.25);color:var(--mf-accent);font-size:1.5rem}
.mf-value-card h3{font-family:var(--mf-font-head);font-weight:700;font-size:1.2rem;color:var(--mf-text);margin:0}
.mf-value-card p{color:var(--mf-text2);font-size:.95rem;line-height:1.65;margin:0}
@media(max-width:900px){.mf-values-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}}
/* Stats band */
.mf-stats-band{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;width:100%;background:#101820;border:1px solid rgba(142,194,63,.25);border-radius:var(--mf-radius-lg);padding:44px 30px}
.mf-stat-item{text-align:center}
.mf-stat-item b{display:block;font-family:var(--mf-font-head);font-weight:800;font-size:2.4rem;color:var(--mf-accent);line-height:1.1}
.mf-stat-item span{color:var(--mf-text2);font-size:.9rem;font-family:var(--mf-font-head);font-weight:600}
@media(max-width:767px){.mf-stats-band{grid-template-columns:1fr 1fr;gap:30px 24px}}
/* Fix dark CTA button — ensure text is visible */
.elementor-widget-button.mf-btn-dark .elementor-button{background:#0a0a0f!important;color:#f0f0f5!important}
.elementor-widget-button.mf-btn-dark .elementor-button .elementor-button-text{color:#f0f0f5!important}
.elementor-widget-button.mf-btn-dark .elementor-button:hover{background:#16161f!important;color:#8ec23f!important}
.elementor-widget-button.mf-btn-dark .elementor-button:hover .elementor-button-text{color:#8ec23f!important}

/* About story row — force side-by-side on desktop */
.e-con.mf-story-row{flex-wrap:nowrap!important;align-items:center}
.e-con.mf-story-row > .mf-story-media{width:45%!important;flex:0 0 45%!important}
.e-con.mf-story-row > .mf-story-text{width:55%!important;flex:0 0 55%!important}
@media(max-width:900px){
  .e-con.mf-story-row{flex-wrap:wrap!important}
  .e-con.mf-story-row > .mf-story-media,.e-con.mf-story-row > .mf-story-text{width:100%!important;flex:1 1 100%!important}
}

/* ===== SERVICES PAGE structured blocks ===== */
.mf-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;width:100%}
.mf-svc-card{background:var(--mf-surface);border:1px solid var(--mf-border);border-radius:var(--mf-radius-lg);padding:32px 28px;text-align:center;transition:var(--mf-transition);display:flex;flex-direction:column;align-items:center;gap:14px}
.mf-svc-card:hover{transform:translateY(-6px);border-color:rgba(142,194,63,.4);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.mf-svc-icon{width:60px;height:60px;border-radius:16px;display:grid;place-items:center;background:rgba(142,194,63,.12);border:1px solid rgba(142,194,63,.25);color:var(--mf-accent);font-size:1.4rem}
.mf-svc-card h3{font-family:var(--mf-font-head);font-weight:700;font-size:1.15rem;color:var(--mf-text);margin:0}
.mf-svc-card p{color:var(--mf-text2);font-size:.92rem;line-height:1.6;margin:0}
@media(max-width:1024px){.mf-svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.mf-svc-grid{grid-template-columns:1fr}}
/* Steps grid */
.mf-steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;width:100%}
.mf-step-card{background:var(--mf-surface);border:1px solid var(--mf-border);border-radius:var(--mf-radius-lg);padding:34px 28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;position:relative;transition:var(--mf-transition)}
.mf-step-card:hover{border-color:rgba(142,194,63,.4);transform:translateY(-4px)}
.mf-step-num{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--mf-accent);color:#0a0a0f;font-family:var(--mf-font-head);font-weight:800;font-size:1.4rem}
.mf-step-card h3{font-family:var(--mf-font-head);font-weight:700;font-size:1.12rem;color:var(--mf-text);margin:0}
.mf-step-card p{color:var(--mf-text2);font-size:.92rem;line-height:1.6;margin:0}
@media(max-width:767px){.mf-steps-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto}}

/* Outline-dark button (secondary CTA on green banner) */
.elementor-widget-button.mf-btn-outline-dark .elementor-button{background:transparent!important;color:#0a0a0f!important;border:2px solid rgba(10,10,15,.55)!important}
.elementor-widget-button.mf-btn-outline-dark .elementor-button:hover{background:#0a0a0f!important;color:#8ec23f!important;border-color:#0a0a0f!important}

/* Page-head breadcrumb */
.mf-crumb{color:var(--mf-text2);font-family:'DM Sans',sans-serif;font-size:.95rem;margin:0}
.mf-crumb a{color:var(--mf-text2);text-decoration:none;transition:color .2s ease}
.mf-crumb a:hover{color:var(--mf-accent)}
.mf-crumb span{margin:0 8px;color:var(--mf-text2)}
.mf-crumb .mf-crumb-current{color:var(--mf-text);margin:0}
/* Shop archive page-head (Woo hook) */
.mf-shop-head{border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:34px}
.mf-shop-head .mf-page-head-inner{max-width:1200px;margin:0 auto;padding:50px 20px}
.mf-shop-head h1{font-family:var(--mf-font-head);font-weight:800;font-size:52px;color:var(--mf-text);margin:0 0 10px;line-height:1.1}
.mf-shop-head .mf-page-head-sub{color:var(--mf-text2);font-family:var(--mf-font-body);font-size:19px;margin:0}
@media(max-width:600px){.mf-shop-head h1{font-size:34px}}

/* Registration two-col — force side-by-side on desktop */
.e-con.mf-reg-row{flex-wrap:nowrap!important;align-items:flex-start}
.e-con.mf-reg-row > .mf-reg-info-col{width:38%!important;flex:0 0 38%!important}
.e-con.mf-reg-row > .mf-reg-form-col{width:60%!important;flex:0 0 60%!important}
@media(max-width:900px){
  .e-con.mf-reg-row{flex-wrap:wrap!important}
  .e-con.mf-reg-row > .mf-reg-info-col,.e-con.mf-reg-row > .mf-reg-form-col{width:100%!important;flex:1 1 100%!important}
}

/* Contact two-col — force side-by-side on desktop */
.e-con.mf-contact-row{flex-wrap:nowrap!important;align-items:flex-start}
.e-con.mf-contact-row > .mf-contact-info-col{width:40%!important;flex:0 0 40%!important}
.e-con.mf-contact-row > .mf-contact-form-col{width:58%!important;flex:0 0 58%!important}
@media(max-width:900px){
  .e-con.mf-contact-row{flex-wrap:wrap!important}
  .e-con.mf-contact-row > .mf-contact-info-col,.e-con.mf-contact-row > .mf-contact-form-col{width:100%!important;flex:1 1 100%!important}
}

/* ================= CART PAGE — match original cart.html ================= */
.mf-cart-head{border-bottom:1px solid var(--mf-border);margin-bottom:0}
.mf-cart-head .mf-page-head-inner{max-width:1200px;margin:0 auto;padding:52px 20px 34px}
.mf-cart-head h1{font-family:var(--mf-font-head);font-weight:800;font-size:clamp(1.9rem,3.4vw,2.7rem);color:var(--mf-text);margin:0;line-height:1.1}
.mf-cart-head .mf-cart-count-title{color:var(--mf-text2);font-size:.55em;font-weight:700}

/* Two-column layout: cart table | order summary */
.woocommerce-cart .woocommerce{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:40px;align-items:start;max-width:1200px;margin:0 auto;padding:56px 20px}
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper{grid-column:1/-1}
.woocommerce-cart .woocommerce-cart-form{grid-column:1;margin:0}
.woocommerce-cart .cart-collaterals{grid-column:2;width:100%!important;float:none!important;margin:0}
.woocommerce-cart .cart-collaterals .cart_totals{width:100%!important;float:none!important}

/* Table -> grid rows */
.woocommerce-cart table.shop_table.cart{width:100%;border:0!important;border-collapse:collapse;margin:0;background:transparent}
.woocommerce-cart table.shop_table.cart thead tr,
.woocommerce-cart table.shop_table.cart tbody tr.cart_item{
  display:grid;grid-template-columns:92px minmax(0,1fr) 130px 176px 140px 56px;align-items:center;
}
.woocommerce-cart table.shop_table.cart thead th{
  background:transparent!important;border:0!important;border-bottom:1px solid var(--mf-border)!important;
  text-align:left;font-family:var(--mf-font-head);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mf-text2)!important;padding:0 14px 16px;
}
.woocommerce-cart table.shop_table.cart thead th.product-thumbnail{display:none}
.woocommerce-cart table.shop_table.cart thead th.product-name{grid-column:1/3}
.woocommerce-cart table.shop_table.cart thead th.product-price{order:3}
.woocommerce-cart table.shop_table.cart thead th.product-quantity{order:4}
.woocommerce-cart table.shop_table.cart thead th.product-subtotal{order:5}
.woocommerce-cart table.shop_table.cart thead th.product-remove{order:6}

.woocommerce-cart table.shop_table.cart tbody tr.cart_item{
  background:rgba(255,255,255,.02);border:1px solid var(--mf-border);border-radius:var(--mf-radius-lg);
  margin-top:16px;padding:10px 6px;transition:background .25s ease,border-color .25s ease;
}
.woocommerce-cart table.shop_table.cart tbody tr.cart_item:hover{background:rgba(255,255,255,.045);border-color:rgba(142,194,63,.28)}
.woocommerce-cart table.shop_table.cart tbody td{border:0!important;background:transparent!important;padding:14px;vertical-align:middle}
.woocommerce-cart td.product-thumbnail{order:1;padding:10px 6px 10px 14px!important}
.woocommerce-cart td.product-thumbnail img{width:74px;height:74px;object-fit:contain;border-radius:12px;border:1px solid var(--mf-border);background:radial-gradient(120% 90% at 50% 0%,#20202e,#12121b 70%);padding:6px}
.woocommerce-cart td.product-name{order:2;min-width:0}
.woocommerce-cart td.product-name a{font-family:var(--mf-font-head);font-weight:700;font-size:1.05rem;color:var(--mf-text)!important;line-height:1.3;display:block}
.woocommerce-cart td.product-name a:hover{color:var(--mf-accent)!important}
.woocommerce-cart td.product-name .mf-item-cat{display:block;margin-top:4px;color:var(--mf-text2);font-size:.86rem;font-family:var(--mf-font-body)}
.woocommerce-cart td.product-price{order:3;color:var(--mf-text)!important;font-family:var(--mf-font-head);font-weight:700;font-size:1.02rem}
.woocommerce-cart td.product-quantity{order:4}
.woocommerce-cart td.product-subtotal{order:5;color:var(--mf-text)!important;font-family:var(--mf-font-head);font-weight:800;font-size:1.05rem}
.woocommerce-cart td.product-remove{order:6;text-align:center}
.woocommerce-cart td.product-remove a.remove{
  width:auto!important;height:auto!important;font-size:1.05rem!important;color:var(--mf-text2)!important;
  background:transparent!important;line-height:1;display:inline-block;transition:color .2s ease,transform .2s ease;
}
.woocommerce-cart td.product-remove a.remove:hover{color:var(--mf-danger)!important;background:transparent!important;transform:scale(1.12)}

/* Quantity stepper pill */
.woocommerce-cart .quantity{display:inline-flex!important;align-items:center;border:1px solid var(--mf-border);border-radius:99px;background:var(--mf-surface);overflow:hidden}
.woocommerce-cart .quantity input.qty{
  width:52px!important;text-align:center;background:transparent!important;border:0!important;color:var(--mf-text)!important;
  font-family:var(--mf-font-head);font-weight:700;font-size:1rem;height:42px;-moz-appearance:textfield;box-shadow:none!important;padding:0!important;
}
.woocommerce-cart .quantity input.qty::-webkit-outer-spin-button,
.woocommerce-cart .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.woocommerce-cart .quantity .mf-qty-btn{
  width:38px;height:42px;background:none;border:0;color:var(--mf-text);cursor:pointer;font-size:1.05rem;line-height:1;
  display:grid;place-items:center;transition:color .2s ease,background .2s ease;
}
.woocommerce-cart .quantity .mf-qty-btn:hover{color:var(--mf-accent);background:rgba(142,194,63,.08)}

/* Actions row: hide default update button + coupon (coupon is moved into summary) */
.woocommerce-cart table.shop_table.cart tbody tr.mf-actions-row,
.woocommerce-cart table.shop_table.cart td.actions{display:block;padding:0!important;border:0!important;background:transparent!important}
.woocommerce-cart td.actions button[name="update"]{display:none!important}
.woocommerce-cart td.actions .coupon{display:none}

/* Continue shopping */
.mf-cart-actions{margin-top:24px}
.mf-continue-btn{
  display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:99px;
  background:transparent;border:1px solid rgba(255,255,255,.18);color:var(--mf-text)!important;
  font-family:var(--mf-font-head);font-weight:700;font-size:.95rem;transition:var(--mf-transition);
}
.mf-continue-btn:hover{border-color:var(--mf-accent);color:var(--mf-accent)!important}

/* Order summary card */
.woocommerce-cart .cart_totals{
  position:sticky;top:100px;background:var(--mf-surface);border:1px solid var(--mf-border);
  border-radius:var(--mf-radius-lg);padding:28px;
}
.woocommerce-cart .cart_totals h2{
  font-family:var(--mf-font-head);font-weight:700;font-size:1.2rem;color:var(--mf-text);margin:0 0 20px;
  text-transform:none;letter-spacing:0;
}
.woocommerce-cart .cart_totals table.shop_table{border:0!important;margin:0;background:transparent}
.woocommerce-cart .cart_totals table.shop_table tr{display:flex;justify-content:space-between;align-items:center;border:0}
.woocommerce-cart .cart_totals table.shop_table th{
  background:transparent!important;border:0!important;padding:11px 0!important;color:var(--mf-text2)!important;
  font-family:var(--mf-font-body);font-weight:400;font-size:.95rem;text-transform:none;letter-spacing:0;width:auto;
}
.woocommerce-cart .cart_totals table.shop_table td{
  background:transparent!important;border:0!important;padding:11px 0!important;text-align:right;
  color:var(--mf-text)!important;font-family:var(--mf-font-head);font-weight:700;font-size:.98rem;
}
.woocommerce-cart .cart_totals .mf-discount-row .mf-discount-val{color:var(--mf-accent)!important}
.woocommerce-cart .cart_totals .order-total{border-top:1px solid var(--mf-border)!important;margin-top:10px;padding-top:8px}
.woocommerce-cart .cart_totals .order-total th{font-size:1.05rem;color:var(--mf-text)!important;padding-top:18px!important}
.woocommerce-cart .cart_totals .order-total td,
.woocommerce-cart .cart_totals .order-total td .amount{color:var(--mf-accent)!important;font-size:1.5rem;font-weight:800;padding-top:18px!important}
.woocommerce-cart .cart_totals .woocommerce-shipping-destination,
.woocommerce-cart .cart_totals .shipping-calculator-button{color:var(--mf-text2)!important;font-size:.85rem}

/* Coupon (relocated into the summary card by JS) */
.mf-coupon-slot{display:flex;gap:8px;margin:18px 0}
.mf-coupon-slot .coupon{display:flex!important;gap:8px;width:100%;padding:0;border:0;float:none}
.mf-coupon-slot #coupon_code{
  flex:1;min-width:0;background:rgba(255,255,255,.04)!important;border:1px solid var(--mf-border)!important;
  border-radius:99px!important;padding:12px 18px!important;color:var(--mf-text)!important;font-size:.9rem;height:auto;width:auto!important;
}
.mf-coupon-slot #coupon_code::placeholder{color:var(--mf-text2)}
.mf-coupon-slot #coupon_code:focus{outline:none;border-color:var(--mf-accent)!important;box-shadow:0 0 0 3px rgba(142,194,63,.15)!important}
.mf-coupon-slot button[name="apply_coupon"]{
  background:transparent!important;border:1px solid rgba(255,255,255,.18)!important;color:var(--mf-text)!important;
  padding:12px 22px!important;border-radius:99px!important;font-family:var(--mf-font-head);font-weight:700;font-size:.9rem;
  box-shadow:none!important;transition:var(--mf-transition);white-space:nowrap;
}
.mf-coupon-slot button[name="apply_coupon"]:hover{border-color:var(--mf-accent)!important;color:var(--mf-accent)!important;transform:none}

/* Proceed to checkout */
.woocommerce-cart .wc-proceed-to-checkout{padding:0;margin-top:18px}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{
  display:flex!important;align-items:center;justify-content:center;gap:10px;width:100%;margin:0;
  padding:16px 28px!important;border-radius:99px!important;background:var(--mf-accent)!important;color:#0a0a0f!important;
  font-family:var(--mf-font-head)!important;font-weight:700!important;font-size:1rem!important;
  box-shadow:0 6px 24px var(--mf-accent-glow);transition:var(--mf-transition);
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover{background:var(--mf-accent-light)!important;transform:translateY(-2px)}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button::after{content:"\f061";font-family:"Font Awesome 6 Free";font-weight:900;font-size:.9em}

/* Pay icons + secure note */
.mf-pay-icons{display:flex;gap:12px;justify-content:center;margin-top:18px;color:var(--mf-text2);font-size:1.5rem}
.mf-secure-note{display:flex;gap:8px;justify-content:center;align-items:center;color:var(--mf-text2);font-size:.82rem;margin-top:14px}
.mf-secure-note i{color:var(--mf-accent)}

/* Header cart badge */
#mf-cart-btn{position:relative}
.mf-cart-badge{
  position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:99px;
  background:var(--mf-accent);color:#0a0a0f;font-size:.68rem;font-weight:700;display:grid;place-items:center;
  font-family:var(--mf-font-head);line-height:1;z-index:3;
}

/* Empty cart */
.woocommerce-cart .cart-empty{
  text-align:center;padding:70px 20px 10px;border:1px dashed var(--mf-border);border-radius:var(--mf-radius-lg);
  color:var(--mf-text)!important;font-family:var(--mf-font-head);font-size:1.2rem;background:transparent!important;
}
.woocommerce-cart .return-to-shop{text-align:center;padding-bottom:70px}

/* Responsive */
@media(max-width:1024px){
  .woocommerce-cart .woocommerce{grid-template-columns:1fr;gap:32px}
  .woocommerce-cart .woocommerce-cart-form,.woocommerce-cart .cart-collaterals{grid-column:1}
  .woocommerce-cart .cart_totals{position:static}
}
@media(max-width:767px){
  /* Superseded by the authoritative cart block near the end of this file.
   * The old 84px/44px track widths conflicted with the newer 64px/32px grid,
   * causing cells to overflow their tracks. Only the non-grid rule is kept. */
  .woocommerce-cart table.shop_table.cart thead{display:none}
  .mf-continue-btn{width:100%;justify-content:center}
}

/* ============ CART UI CORRECTIONS ============ */
/* Kill Astra/Woo light backgrounds on table headers + totals heading */
.woocommerce-cart table.shop_table thead,
.woocommerce-cart table.shop_table thead tr,
.woocommerce-cart table.shop_table th,
.woocommerce-cart table.shop_table tfoot,
.woocommerce-cart table.shop_table tfoot tr,
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td,
.woocommerce-cart .cart_totals table.shop_table tr{
  background:transparent!important;background-color:transparent!important;box-shadow:none!important;
}
.woocommerce-cart table.shop_table.cart thead th{color:var(--mf-text2)!important}

.woocommerce-cart .cart-collaterals .cart_totals > h2,
.woocommerce-cart .cart_totals h2{
  background:transparent!important;background-color:transparent!important;color:var(--mf-text)!important;
  padding:0 0 20px 0!important;margin:0!important;border:0!important;
  font-family:var(--mf-font-head)!important;font-weight:700!important;font-size:1.2rem!important;
  text-align:left!important;text-transform:none!important;letter-spacing:0!important;
}

/* Hide the theme page title ("Cart") */
.woocommerce-cart .entry-title,
.woocommerce-cart .page-title,
.woocommerce-cart .ast-archive-title,
.woocommerce-cart header.entry-header,
.woocommerce-cart .ast-single-post-order{display:none!important}

/* Hide the Update cart button — correct name is update_cart */
.woocommerce-cart td.actions button[name="update_cart"],
.woocommerce-cart td.actions input[name="update_cart"],
.woocommerce-cart button[name="update_cart"]{display:none!important}

/* Shipping row: show just the method, drop destination + calculator */
.woocommerce-cart .cart_totals .woocommerce-shipping-methods{list-style:none!important;margin:0!important;padding:0!important;text-align:right}
.woocommerce-cart .cart_totals .woocommerce-shipping-methods li{margin:0!important;padding:0!important;list-style:none!important}
.woocommerce-cart .cart_totals .woocommerce-shipping-methods label{
  color:var(--mf-text)!important;font-family:var(--mf-font-head)!important;font-weight:700!important;
  font-size:.98rem!important;cursor:default;margin:0!important;
}
.woocommerce-cart .cart_totals .woocommerce-shipping-destination,
.woocommerce-cart .cart_totals .shipping-calculator-button,
.woocommerce-cart .cart_totals .shipping-calculator-form,
.woocommerce-cart .cart_totals .woocommerce-shipping-methods input[type="radio"]{display:none!important}

/* Tighten top spacing now the title is gone */
.woocommerce-cart .woocommerce{padding-top:40px!important}
.woocommerce-cart table.shop_table.cart thead th{padding-bottom:14px}

/* Coupon slot spacing inside summary */
.woocommerce-cart .cart_totals .mf-coupon-slot{margin:18px 0 0}

/* ============ SINGLE PRODUCT PAGE — readability fixes ============ */
/* 1) Price in brand green */
.single-product div.product .summary .price,
.single-product div.product .summary .price .amount,
.single-product div.product .summary .price bdi,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product p.price .amount,
.woocommerce div.product span.price .amount{
  color:var(--mf-accent)!important;
  font-family:var(--mf-font-head)!important;font-weight:800!important;
  font-size:1.9rem!important;line-height:1.2;
}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del,
.woocommerce div.product p.price del .amount{
  color:var(--mf-text2)!important;font-size:1.05rem!important;font-weight:400!important;opacity:1;
}
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins{background:transparent!important;text-decoration:none!important;color:var(--mf-accent)!important}

/* Product title + category line */
.single-product div.product .summary .product_title{color:var(--mf-text)!important}
.single-product div.product .summary .posted_in,
.single-product div.product .summary .posted_in a{color:var(--mf-text2)!important}
.single-product div.product .summary .woocommerce-product-details__short-description{color:var(--mf-text2)!important;line-height:1.7}

/* 2) Tabs — visible labels, accent active state */
.woocommerce div.product .woocommerce-tabs ul.tabs{
  border-bottom:1px solid var(--mf-border)!important;padding:0!important;margin:0 0 24px!important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{border:0!important}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent!important;border:0!important;border-radius:0!important;margin:0 26px 0 0!important;padding:0!important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none!important;border:0!important;box-shadow:none!important}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  color:var(--mf-text2)!important;font-family:var(--mf-font-head)!important;font-weight:700!important;
  font-size:1.02rem!important;padding:14px 0!important;display:inline-block;
  border-bottom:2px solid transparent!important;transition:color .2s ease,border-color .2s ease;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover{color:var(--mf-text)!important}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active > a{
  color:var(--mf-accent)!important;border-bottom-color:var(--mf-accent)!important;
}
/* Tab panel body text */
.woocommerce div.product .woocommerce-tabs .panel{
  background:transparent!important;border:0!important;box-shadow:none!important;
  color:var(--mf-text2)!important;line-height:1.75;
}
.woocommerce div.product .woocommerce-tabs .panel h2{
  color:var(--mf-text)!important;font-family:var(--mf-font-head)!important;font-weight:700!important;font-size:1.3rem!important;
}
.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel li{color:var(--mf-text2)!important}

/* 3) Additional information table — readable labels + dark borders */
.woocommerce table.shop_attributes{
  border:1px solid var(--mf-border)!important;border-radius:var(--mf-radius);overflow:hidden;
  background:transparent!important;margin:0;
}
.woocommerce table.shop_attributes tr{background:transparent!important;border:0!important}
.woocommerce table.shop_attributes tr:nth-child(even){background:rgba(255,255,255,.025)!important}
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td{
  border:0!important;border-bottom:1px solid var(--mf-border)!important;
  padding:15px 20px!important;background:transparent!important;font-style:normal!important;
}
.woocommerce table.shop_attributes tr:last-child th,
.woocommerce table.shop_attributes tr:last-child td{border-bottom:0!important}
.woocommerce table.shop_attributes th{
  color:var(--mf-text)!important;font-family:var(--mf-font-head)!important;font-weight:700!important;
  font-size:.94rem!important;width:34%;text-align:left;border-right:1px solid var(--mf-border)!important;
}
.woocommerce table.shop_attributes td,
.woocommerce table.shop_attributes td p{
  color:var(--mf-text2)!important;font-size:.96rem!important;margin:0!important;padding:0!important;
}
@media(max-width:600px){
  .woocommerce table.shop_attributes th{width:44%;font-size:.88rem!important;padding:12px 14px!important}
  .woocommerce table.shop_attributes td{padding:12px 14px!important}
}

/* Reviews tab bits */
.woocommerce #reviews h2,.woocommerce #reviews h3{color:var(--mf-text)!important}
.woocommerce #reviews .comment-text{background:var(--mf-surface)!important;border:1px solid var(--mf-border)!important;border-radius:var(--mf-radius);color:var(--mf-text2)!important}

/* Attributes table — WooCommerce 10 also uses .woocommerce-product-attributes */
table.woocommerce-product-attributes{border:1px solid var(--mf-border)!important;border-radius:var(--mf-radius);overflow:hidden;background:transparent!important;margin:0}
table.woocommerce-product-attributes tr{background:transparent!important;border:0!important}
table.woocommerce-product-attributes tr:nth-child(even){background:rgba(255,255,255,.025)!important}
table.woocommerce-product-attributes th,table.woocommerce-product-attributes td{border:0!important;border-bottom:1px solid var(--mf-border)!important;padding:15px 20px!important;background:transparent!important;font-style:normal!important}
table.woocommerce-product-attributes tr:last-child th,table.woocommerce-product-attributes tr:last-child td{border-bottom:0!important}
table.woocommerce-product-attributes th,table.woocommerce-product-attributes .woocommerce-product-attributes-item__label{color:var(--mf-text)!important;font-family:var(--mf-font-head)!important;font-weight:700!important;font-size:.94rem!important;width:34%;text-align:left;border-right:1px solid var(--mf-border)!important}
table.woocommerce-product-attributes td,table.woocommerce-product-attributes td p,table.woocommerce-product-attributes .woocommerce-product-attributes-item__value,table.woocommerce-product-attributes .woocommerce-product-attributes-item__value p{color:var(--mf-text2)!important;font-size:.96rem!important;margin:0!important;padding:0!important}
@media(max-width:600px){table.woocommerce-product-attributes th{width:44%;font-size:.88rem!important;padding:12px 14px!important}table.woocommerce-product-attributes td{padding:12px 14px!important}}

/* ============ PRODUCT GALLERY + LOOP IMAGE NORMALISATION ============ */
:root{--mf-tile:radial-gradient(120% 90% at 50% 0%,#20202e,#12121b 70%)}

/* ---- Single product gallery ---- */
.woocommerce div.product div.images{margin-bottom:0}
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper{margin:0}

/* Main image tile — fixed square, image contained, never cropped */
.woocommerce div.product div.images .woocommerce-product-gallery__image{
  border:1px solid var(--mf-border);border-radius:var(--mf-radius-lg);overflow:hidden;
  background:var(--mf-tile);
}
.woocommerce div.product div.images .woocommerce-product-gallery__image a,
.woocommerce div.product div.images .woocommerce-product-gallery__image > img{display:block}
.woocommerce div.product div.images .woocommerce-product-gallery__image img{
  width:100%!important;height:100%!important;aspect-ratio:1/1;object-fit:contain;
  padding:26px;box-sizing:border-box;background:transparent;
}

/* When our fallback is active, only the current image shows */
.mf-gallery-ready .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image{display:none}
.mf-gallery-ready .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image.mf-active{display:block}

/* Thumbnail strip — small equal boxes */
.mf-gallery-thumbs{
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px;padding:0;list-style:none;
}
.mf-gallery-thumbs li{margin:0;padding:0;list-style:none}
.mf-gallery-thumbs button{
  display:block;width:100%;padding:0;border:1px solid var(--mf-border);border-radius:12px;overflow:hidden;
  background:var(--mf-tile);cursor:pointer;transition:border-color .2s ease,transform .2s ease;
}
.mf-gallery-thumbs button img{
  display:block;width:100%;height:100%;aspect-ratio:1/1;object-fit:contain;padding:8px;box-sizing:border-box;
}
.mf-gallery-thumbs button:hover{border-color:rgba(142,194,63,.5);transform:translateY(-2px)}
.mf-gallery-thumbs button.mf-active{border-color:var(--mf-accent);box-shadow:0 0 0 2px rgba(142,194,63,.22)}

/* WooCommerce's own flexslider thumbs, if it initialises instead */
.woocommerce div.product div.images .flex-control-thumbs{
  display:grid!important;grid-template-columns:repeat(5,1fr);gap:10px;margin:12px 0 0;padding:0;
}
.woocommerce div.product div.images .flex-control-thumbs li{width:100%!important;margin:0!important;float:none!important}
.woocommerce div.product div.images .flex-control-thumbs img{
  width:100%;aspect-ratio:1/1;object-fit:contain;padding:8px;box-sizing:border-box;
  border:1px solid var(--mf-border);border-radius:12px;background:var(--mf-tile);opacity:1;transition:border-color .2s ease;
}
.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs img:hover{border-color:var(--mf-accent);opacity:1}

@media(max-width:600px){
  .mf-gallery-thumbs,.woocommerce div.product div.images .flex-control-thumbs{grid-template-columns:repeat(4,1fr)}
  .woocommerce div.product div.images .woocommerce-product-gallery__image img{padding:16px}
}

/* ---- Shop / archive loop: equal cards, equal image boxes ---- */
.woocommerce ul.products li.product{display:flex;flex-direction:column;height:100%}
.woocommerce ul.products li.product > a:first-of-type,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{display:flex;flex-direction:column}
.woocommerce ul.products li.product img{
  width:100%!important;height:auto!important;aspect-ratio:1/1;object-fit:contain;
  background:var(--mf-tile);padding:18px;box-sizing:border-box;margin:0 0 4px!important;border-radius:0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  color:var(--mf-text)!important;font-family:var(--mf-font-head)!important;font-weight:700!important;
  font-size:1.02rem!important;padding:14px 22px 6px!important;margin:0!important;line-height:1.35;
}
/* Category label above the title */
.woocommerce ul.products li.product .ast-woo-product-category,
.woocommerce ul.products li.product .ast-shop-product-category,
.woocommerce ul.products li.product .product_cat{
  color:var(--mf-text2)!important;font-family:var(--mf-font-head)!important;font-size:.72rem!important;
  letter-spacing:.12em;text-transform:uppercase;padding:16px 22px 0!important;margin:0!important;display:block;
}
.woocommerce ul.products li.product .price{
  color:var(--mf-accent)!important;font-family:var(--mf-font-head)!important;font-weight:800!important;
  font-size:1.15rem!important;padding:0 22px 4px!important;margin:0!important;display:block;
}
.woocommerce ul.products li.product .price del{color:var(--mf-text2)!important;font-size:.85rem;font-weight:400}
.woocommerce ul.products li.product .price ins{background:transparent!important;text-decoration:none}
/* Push the button to the bottom so every card lines up */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{margin:auto 22px 22px!important;text-align:center}
.woocommerce ul.products li.product .star-rating{margin:0 22px 8px!important;font-size:.8rem}

/* Equal-height grid rows */
/* C2 FIX: product-grid rules consolidated into the single authoritative block
 * further down this file (search "PRODUCT GRID - single source of truth").
 * This earlier duplicate set was superseded by it and has been removed to
 * eliminate the conflicting 600px vs 640px mobile breakpoints. */
.woocommerce ul.products li.product{width:100%!important;margin:0!important;float:none!important;clear:none!important}

/* mf-gallery-order: main image first, thumbnails strictly below */
.woocommerce div.product div.images .woocommerce-product-gallery{display:flex!important;flex-direction:column!important}
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images .flex-viewport{order:1!important;width:100%}
.woocommerce div.product div.images .mf-gallery-thumbs,
.woocommerce div.product div.images .flex-control-thumbs{order:2!important;width:100%}
/* keep thumbs compact so they read as small boxes */
.mf-gallery-thumbs{max-width:100%}
.mf-gallery-thumbs button{max-width:120px}
.woocommerce div.product div.images .flex-control-thumbs img{max-width:120px}

/* mf-gallery-order-fix: .woocommerce-product-gallery IS .images (same element) — target it directly */
.woocommerce div.product .woocommerce-product-gallery{display:flex!important;flex-direction:column!important;position:relative}
.woocommerce div.product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper,
.woocommerce div.product .woocommerce-product-gallery > .flex-viewport{order:1!important;width:100%!important;margin:0!important}
.woocommerce div.product .woocommerce-product-gallery > .flex-control-thumbs,
.woocommerce div.product .woocommerce-product-gallery > .mf-gallery-thumbs,
.woocommerce div.product .woocommerce-product-gallery > ol.flex-control-nav{order:2!important;width:100%!important;margin:12px 0 0!important}
/* zoom trigger pinned to the corner of the main image */
.woocommerce div.product .woocommerce-product-gallery__trigger{position:absolute!important;top:14px!important;right:14px!important;left:auto!important;z-index:5;order:0!important;margin:0!important}
/* thumbnails: compact equal boxes in a row */
.woocommerce div.product .woocommerce-product-gallery > .flex-control-thumbs{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:0!important;list-style:none}
.woocommerce div.product .woocommerce-product-gallery > .flex-control-thumbs li{width:100%!important;margin:0!important;float:none!important;list-style:none}
.woocommerce div.product .woocommerce-product-gallery > .flex-control-thumbs img{width:100%!important;max-width:none!important;aspect-ratio:1/1;object-fit:contain;padding:8px;box-sizing:border-box;border:1px solid var(--mf-border);border-radius:12px;background:var(--mf-tile);opacity:1!important;cursor:pointer}
.woocommerce div.product .woocommerce-product-gallery > .flex-control-thumbs img.flex-active,
.woocommerce div.product .woocommerce-product-gallery > .flex-control-thumbs img:hover{border-color:var(--mf-accent)!important;box-shadow:0 0 0 2px rgba(142,194,63,.22)}
@media(max-width:600px){.woocommerce div.product .woocommerce-product-gallery > .flex-control-thumbs{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ================= SHOP: filter sidebar + toolbar ================= */
.mf-shop-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:40px;align-items:start;max-width:1200px;margin:0 auto;padding:10px 20px 70px}
.mf-shop-main{min-width:0}

/* Sidebar */
.mf-shop-sidebar{position:sticky;top:100px;align-self:start}
.mf-filter-form{display:flex;flex-direction:column;gap:22px}
.mf-filter-box{background:var(--mf-surface);border:1px solid var(--mf-border);border-radius:var(--mf-radius-lg);padding:24px}
.mf-filter-box h4{font-family:var(--mf-font-head);font-size:.86rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:0 0 16px;color:var(--mf-text)}
.mf-filter-box label{display:flex;align-items:center;gap:11px;padding:7px 0;color:var(--mf-text2);font-size:.94rem;cursor:pointer;transition:color .2s ease;margin:0}
.mf-filter-box label:hover{color:var(--mf-text)}
.mf-filter-box input[type=checkbox]{accent-color:var(--mf-accent);width:17px;height:17px;flex:none;cursor:pointer;margin:0}
.mf-price-inputs{display:flex;gap:10px;align-items:center}
.mf-price-inputs span{color:var(--mf-text2)}
.mf-price-inputs input{width:100%;min-width:0;background:rgba(255,255,255,.04);border:1px solid var(--mf-border);border-radius:10px;padding:11px 12px;color:var(--mf-text);font-size:.9rem;font-family:var(--mf-font-body);-moz-appearance:textfield}
.mf-price-inputs input::-webkit-outer-spin-button,.mf-price-inputs input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.mf-price-inputs input::placeholder{color:var(--mf-text2)}
.mf-price-inputs input:focus{outline:none;border-color:var(--mf-accent);box-shadow:0 0 0 3px rgba(142,194,63,.15)}
.mf-filter-actions{display:flex;flex-direction:column;gap:10px}
.mf-filter-apply{padding:13px 20px;border:0;border-radius:99px;background:var(--mf-accent);color:#0a0a0f;font-family:var(--mf-font-head);font-weight:700;font-size:.94rem;cursor:pointer;transition:var(--mf-transition);box-shadow:0 6px 20px var(--mf-accent-glow)}
.mf-filter-apply:hover{background:var(--mf-accent-light);transform:translateY(-2px)}
.mf-filter-clear{display:block;text-align:center;padding:12px 20px;border-radius:99px;border:1px solid rgba(255,255,255,.18);color:var(--mf-text)!important;font-family:var(--mf-font-head);font-weight:700;font-size:.94rem;transition:var(--mf-transition)}
.mf-filter-clear:hover{border-color:var(--mf-accent);color:var(--mf-accent)!important}

/* Toolbar */
.mf-shop-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.mf-result-count{color:var(--mf-text2);font-size:.94rem;font-family:var(--mf-font-body)}
.mf-result-count b{color:var(--mf-text);font-family:var(--mf-font-head);font-weight:700}
.mf-sort-wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mf-search-form{margin:0}
.mf-search-input,.mf-sort-select{background:var(--mf-surface);border:1px solid var(--mf-border);border-radius:10px;padding:12px 14px;color:var(--mf-text);font-size:.92rem;font-family:var(--mf-font-body)}
.mf-search-input{min-width:230px}
.mf-search-input::placeholder{color:var(--mf-text2)}
.mf-search-input:focus,.mf-sort-select:focus{outline:none;border-color:var(--mf-accent);box-shadow:0 0 0 3px rgba(142,194,63,.15)}
.mf-sort-select{cursor:pointer;padding-right:36px;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239090a8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:15px}
.mf-sort-select option{background:var(--mf-surface);color:var(--mf-text)}

/* NEW / HOT badges + category label on loop cards */
.woocommerce ul.products li.product{position:relative}
.mf-badge{position:absolute;top:14px;left:14px;z-index:4;padding:6px 13px;border-radius:99px;font-family:var(--mf-font-head);font-weight:700;font-size:.7rem;letter-spacing:.1em;line-height:1}
.mf-badge-new{background:#5b8def;color:#fff}
.mf-badge-hot{background:#e8734a;color:#fff}
.woocommerce ul.products li.product span.onsale{top:14px!important;left:14px!important;right:auto!important;margin:0!important}
.mf-loop-cat{display:block;color:var(--mf-accent)!important;font-family:var(--mf-font-head);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-bottom:6px}

/* Pagination centred */
.woocommerce nav.woocommerce-pagination{margin-top:44px}
.woocommerce nav.woocommerce-pagination ul{display:flex;justify-content:center;gap:8px}

@media(max-width:1024px){
  .mf-shop-layout{grid-template-columns:1fr;gap:28px}
  .mf-shop-sidebar{position:static}
  .mf-filter-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
  .mf-filter-actions{grid-column:1/-1;flex-direction:row}
  .mf-filter-apply,.mf-filter-clear{flex:1}
}
@media(max-width:600px){
  .mf-shop-toolbar{flex-direction:column;align-items:stretch}
  .mf-sort-wrap{flex-direction:column;align-items:stretch}
  .mf-search-input{min-width:0;width:100%}
  .mf-sort-select{width:100%}
}

/* ================= SHOP CORRECTIONS ================= */
/* 1) Kill white form controls */
.mf-shop-layout input[type="search"],
.mf-shop-layout input[type="number"],
.mf-shop-layout input[type="text"],
.mf-shop-layout select,
.woocommerce .mf-search-input,
.woocommerce .mf-sort-select,
input.mf-search-input,
select.mf-sort-select,
.mf-price-inputs input[type="number"]{
  background:#16161f !important;background-color:#16161f !important;
  border:1px solid rgba(255,255,255,.08) !important;color:#f0f0f5 !important;
  border-radius:10px !important;font-family:'DM Sans',sans-serif !important;
  -webkit-appearance:none;appearance:none;box-shadow:none !important;
}
input.mf-search-input::placeholder,
.mf-price-inputs input::placeholder{color:#9090a8 !important;opacity:1}
input.mf-search-input:focus,
select.mf-sort-select:focus,
.mf-price-inputs input:focus{
  outline:none !important;border-color:#8ec23f !important;box-shadow:0 0 0 3px rgba(142,194,63,.15) !important;
}
select.mf-sort-select{padding-right:38px !important}
select.mf-sort-select option{background:#16161f !important;color:#f0f0f5 !important}
.mf-shop-layout input:-webkit-autofill{
  -webkit-text-fill-color:#f0f0f5 !important;
  -webkit-box-shadow:0 0 0 1000px #16161f inset !important;
}

/* 2) Toolbar alignment */
.mf-shop-toolbar{align-items:center}
.mf-sort-wrap{flex-wrap:nowrap}
.mf-search-input{min-width:220px;padding:12px 15px !important}
.mf-sort-select{min-width:180px;padding:12px 15px !important}

/* 3) PRODUCT GRID - single source of truth ==================================
 * Consolidated in Step 3 (Issue C2). Previously two competing rule sets used
 * different mobile breakpoints (600px and 640px), so products stayed 2-up
 * between 641-767px on phones in landscape.
 *
 * Column counts follow WooCommerce's own `columns-N` class where present, so
 * changing Products > Display > catalog columns is respected instead of being
 * overridden by a hardcoded 3.
 *
 * Selector notes:
 *   .woocommerce ul.products       - product loops inside a WC template
 *   .woocommerce-page ul.products  - loops on WC-flagged pages (shop, archive)
 *   Both are needed: Astra/Elementor apply them inconsistently per template. */

/* ---------- DESKTOP (>=1025px) - unchanged from original design ---------- */
.woocommerce ul.products,
.woocommerce-page ul.products{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:24px !important;margin:0 !important;padding:0 !important;list-style:none !important;
}
/* Honour WooCommerce's declared column count when it differs from 3 */
.woocommerce ul.products.columns-1,
.woocommerce-page ul.products.columns-1{grid-template-columns:1fr !important}
.woocommerce ul.products.columns-2,
.woocommerce-page ul.products.columns-2{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.woocommerce ul.products.columns-4,
.woocommerce-page ul.products.columns-4{grid-template-columns:repeat(4,minmax(0,1fr)) !important}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  width:100% !important;margin:0 !important;float:none !important;clear:none !important;
}
/* Kill WooCommerce's legacy clearfix pseudo-elements (they create phantom
 * grid cells and add a stray row on mobile) */
.woocommerce ul.products::before,.woocommerce ul.products::after,
.woocommerce-page ul.products::before,.woocommerce-page ul.products::after{
  content:none !important;display:none !important;
}

/* ---------- TABLET (<=1024px) - 2 across ---------- */
@media(max-width:1024px){
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .woocommerce ul.products.columns-3,
  .woocommerce-page ul.products.columns-3,
  .woocommerce ul.products.columns-4,
  .woocommerce-page ul.products.columns-4{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:20px !important;
  }
}

/* ---------- MOBILE (<=767px) - 1 across ----------
 * Raised from the old 600/640px so cards get full width across the whole
 * mobile range defined in the brief. */
@media(max-width:767px){
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .woocommerce ul.products.columns-2,
  .woocommerce-page ul.products.columns-2,
  .woocommerce ul.products.columns-3,
  .woocommerce-page ul.products.columns-3,
  .woocommerce ul.products.columns-4,
  .woocommerce-page ul.products.columns-4{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }
  /* Card internals: tighter padding so content isn't lost to whitespace */
  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    padding:14px 18px 4px !important;font-size:1rem !important;
  }
  .woocommerce ul.products li.product .price{padding:0 18px !important}
  .woocommerce ul.products li.product .button{
    margin:12px 18px 18px !important;min-height:44px;
    display:flex;align-items:center;justify-content:center;
  }
  .woocommerce ul.products li.product .star-rating{margin:0 18px 8px !important}
  /* Image padding reduced - 18px was designed for a 3-up desktop card */
  .woocommerce ul.products li.product img{padding:14px !important}
}

/* 4) Remove duplicate grey category line (Astra's) */
.woocommerce ul.products li.product .ast-woo-product-category,
.woocommerce ul.products li.product .ast-shop-product-category,
.woocommerce ul.products li.product .ast-woo-shop-product-category{display:none !important}
.mf-loop-cat{display:block !important;color:#8ec23f !important;font-family:'IBM Plex Sans',sans-serif;
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  margin:0 0 6px !important;padding:16px 22px 0 !important}
.woocommerce ul.products li.product .woocommerce-loop-product__title{padding:0 22px 6px !important}

/* 5) Remove Astra's floating cart icon over the image */
.woocommerce ul.products li.product .ast-on-card-button,
.woocommerce ul.products li.product .ast-quick-view-trigger,
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .ast-on-card-button{display:none !important}

/* 6) Card polish */
.woocommerce ul.products li.product{overflow:hidden;padding-bottom:0 !important}
.woocommerce ul.products li.product .star-rating{margin:0 22px 10px !important}
.woocommerce ul.products li.product .price{padding:0 22px 6px !important}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{margin:auto 22px 22px !important;display:block;text-align:center}

/* ================= SHOP HEAD ALIGNMENT + SELECT FIX ================= */
/* 1) Breadcrumb/title band on the same 1200px column as the grid below */
.mf-shop-head,
.mf-cart-head{width:100% !important;margin-left:0 !important;margin-right:0 !important}
.mf-shop-head .mf-page-head-inner,
.mf-cart-head .mf-page-head-inner{
  max-width:1200px !important;margin:0 auto !important;
  padding-left:20px !important;padding-right:20px !important;
  box-sizing:border-box !important;
}
.mf-shop-head .mf-page-head-inner{padding-top:46px !important;padding-bottom:28px !important}
.mf-shop-layout{
  max-width:1200px !important;margin:0 auto !important;
  padding-left:20px !important;padding-right:20px !important;
  box-sizing:border-box !important;
}
.mf-shop-head{border-bottom:1px solid rgba(255,255,255,.08)}

/* 2) Select text was clipping at the bottom */
select.mf-sort-select{
  height:46px !important;line-height:1.2 !important;
  padding-top:0 !important;padding-bottom:0 !important;
  padding-left:15px !important;padding-right:38px !important;
  vertical-align:middle;display:inline-block;font-size:.92rem !important;
}
input.mf-search-input{
  height:46px !important;line-height:1.2 !important;
  padding-top:0 !important;padding-bottom:0 !important;
  box-sizing:border-box !important;font-size:.92rem !important;
}
.mf-price-inputs input[type=number]{
  height:44px !important;line-height:1.2 !important;
  padding-top:0 !important;padding-bottom:0 !important;box-sizing:border-box !important;
}
.mf-sort-wrap{align-items:center}

/* ===== Shared shop wrapper: head + grid always aligned ===== */
.mf-shop-wrap{max-width:1240px;margin:0 auto;padding:0 20px;box-sizing:border-box}
.mf-shop-wrap .mf-shop-head{border-bottom:1px solid rgba(255,255,255,.08);margin:0 0 34px}
.mf-shop-wrap .mf-shop-head .mf-page-head-inner{max-width:none !important;margin:0 !important;padding:46px 0 28px !important}
.mf-shop-wrap .mf-shop-layout{max-width:none !important;margin:0 !important;padding:0 0 70px !important}

/* hide-theme-breadcrumb: our page-head band supplies the breadcrumb */
.woocommerce-shop .woocommerce-breadcrumb,
.post-type-archive-product .woocommerce-breadcrumb,
.tax-product_cat .woocommerce-breadcrumb,
.woocommerce-shop .ast-breadcrumbs-wrapper,
.post-type-archive-product .ast-breadcrumbs-wrapper,
.woocommerce-shop #ast-breadcrumbs-general,
.post-type-archive-product #ast-breadcrumbs-general{display:none !important}

/* ================= NOTICE ICON FIX ================= */
/* WooCommerce notices carry an absolutely-positioned icon in ::before.
   Our slimmer padding made it land on top of the first word. Remove it. */
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-noreviews::before,
.woocommerce div.product form.cart .woocommerce-info::before,
.woocommerce-page .woocommerce-info::before,
.woocommerce ul.woocommerce-error::before{
  content:none !important;display:none !important;background:none !important;
}
.woocommerce-info,
.woocommerce-message,
.woocommerce-error{
  padding:16px 20px !important;list-style:none !important;
}
.woocommerce-info a,
.woocommerce-message a,
.woocommerce-error a{color:#8ec23f !important;text-decoration:underline}

/* Themed text selection (was browser-default blue) */
::selection{background:rgba(142,194,63,.85);color:#0a0a0f}
::-moz-selection{background:rgba(142,194,63,.85);color:#0a0a0f}

/* ============ HEADER ICON + NEWSLETTER ALIGNMENT ============ */
/* 1) Login + cart buttons: identical square boxes, identical icon size */
#mf-login-btn,
#mf-cart-btn{display:inline-flex !important;align-items:center;justify-content:center}
#mf-login-btn a,
#mf-cart-btn a,
#mf-login-btn .xpro-elementor-button,
#mf-cart-btn .xpro-elementor-button,
#mf-login-btn .elementor-button,
#mf-cart-btn .elementor-button{
  width:44px !important;height:44px !important;
  padding:0 !important;margin:0 !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  border-radius:12px !important;box-sizing:border-box !important;line-height:1 !important;
}
#mf-login-btn i,
#mf-cart-btn i,
#mf-login-btn .xpro-button-icon,
#mf-cart-btn .xpro-button-icon,
#mf-login-btn .elementor-button-icon,
#mf-cart-btn .elementor-button-icon{
  font-size:18px !important;width:18px !important;height:18px !important;
  line-height:1 !important;margin:0 !important;display:inline-flex !important;
  align-items:center !important;justify-content:center !important;
}
#mf-login-btn svg,
#mf-cart-btn svg{width:18px !important;height:18px !important;display:block}
/* hide the empty text span so it can't offset the icon */
#mf-login-btn .xpro-button-text:empty,
#mf-cart-btn .xpro-button-text:empty,
#mf-login-btn .elementor-button-text:empty,
#mf-cart-btn .elementor-button-text:empty{display:none !important}

/* 2) Newsletter: input and button vertically centred, even padding */
.mf-newsletter-form{
  display:flex !important;align-items:center !important;flex-wrap:nowrap !important;
  gap:8px !important;padding:8px !important;border-radius:16px !important;
  box-sizing:border-box !important;
}
.mf-newsletter-form input[type=email]{
  flex:1 1 auto !important;min-width:0 !important;
  height:48px !important;line-height:48px !important;
  padding:0 18px !important;margin:0 !important;
  border:0 !important;background:transparent !important;box-sizing:border-box !important;
}
.mf-newsletter-form .mf-btn-primary{
  flex:0 0 auto !important;
  height:48px !important;line-height:1 !important;
  padding:0 30px !important;margin:0 !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  border-radius:12px !important;box-sizing:border-box !important;white-space:nowrap;
}
.mf-newsletter-form .mf-news-msg{flex-basis:100%;order:3;text-align:center;padding-top:6px}
@media(max-width:520px){
  .mf-newsletter-form{flex-wrap:wrap !important}
  .mf-newsletter-form input[type=email]{flex:1 1 100% !important}
  .mf-newsletter-form .mf-btn-primary{flex:1 1 100% !important}
}

/* ============ NEWSLETTER ROW FIX ============ */
/* The status message was a flex item with flex-basis:100% on a nowrap row,
   so it claimed the trailing space and stopped the input from growing.
   Take it out of the row entirely. */
.mf-newsletter-form{position:relative !important}
.mf-newsletter-form .mf-news-msg{
  position:absolute !important;left:0 !important;right:0 !important;top:100% !important;
  flex:0 0 auto !important;flex-basis:auto !important;width:auto !important;
  padding-top:10px !important;text-align:center;pointer-events:none;
}
.mf-newsletter-form .mf-news-msg:empty{display:none !important}

/* Input fills the row; button sits flush at the right */
.mf-newsletter-form input[type=email]{
  flex:1 1 auto !important;width:auto !important;min-width:0 !important;
}
.mf-newsletter-form .mf-btn-primary{margin-left:auto !important}

/* ============ PRODUCT THUMBS + META FIX ============ */
/* 1) Smaller gallery thumbnails — more columns, tighter boxes */
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs{
  display:grid !important;grid-template-columns:repeat(6,1fr) !important;
  gap:8px !important;margin:12px 0 0 !important;padding:0 !important;list-style:none !important;
}
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li{
  width:100% !important;margin:0 !important;float:none !important;list-style:none !important;
}
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs img{
  width:100% !important;max-width:none !important;aspect-ratio:1/1;object-fit:contain;
  padding:6px;box-sizing:border-box;border:1px solid var(--mf-border);border-radius:10px;
  background:var(--mf-tile);opacity:1 !important;cursor:pointer;transition:border-color .2s ease;
}
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs img:hover{
  border-color:var(--mf-accent) !important;box-shadow:0 0 0 2px rgba(142,194,63,.22);
}
/* our fallback strip too */
.mf-gallery-thumbs{grid-template-columns:repeat(6,1fr) !important;gap:8px !important}
.mf-gallery-thumbs button{max-width:none !important}
@media(max-width:600px){
  .woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs{grid-template-columns:repeat(5,1fr) !important}
  .mf-gallery-thumbs{grid-template-columns:repeat(5,1fr) !important}
}

/* 2) Product meta — category / tags / brand each on its own line */
.woocommerce div.product .product_meta{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--mf-border);padding-top:18px;margin-top:18px}
.woocommerce div.product .product_meta > span{
  display:block !important;margin:0 !important;padding:0 !important;border:0 !important;
  color:var(--mf-text2) !important;font-size:.95rem;
}
.woocommerce div.product .product_meta > span::after{content:none !important}
.woocommerce div.product .product_meta a{color:var(--mf-text) !important;transition:color .2s ease}
.woocommerce div.product .product_meta a:hover{color:var(--mf-accent) !important}
.woocommerce div.product .product_meta .sku_wrapper,
.woocommerce div.product .product_meta .posted_in,
.woocommerce div.product .product_meta .tagged_as{display:block !important}

/* ============ DROPDOWN LABEL VISIBILITY ============ */
/* Shop sort dropdown: selected text + options in white */
select.mf-sort-select,
select.mf-sort-select option,
select.mf-sort-select optgroup{
  color:#ffffff !important;
}
select.mf-sort-select option{background:#16161f !important;color:#ffffff !important}
select.mf-sort-select option:checked,
select.mf-sort-select option:hover{background:#8ec23f !important;color:#0a0a0f !important}

/* WooCommerce ordering select, if it ever renders */
.woocommerce select.orderby,
.woocommerce select.orderby option{color:#ffffff !important;background:#16161f !important}

/* Any other select on shop / product / checkout pages */
.mf-shop-layout select,
.woocommerce div.product select,
.woocommerce form .form-row select,
.woocommerce-page form .form-row select{
  color:#ffffff !important;background:#16161f !important;
}
.mf-shop-layout select option,
.woocommerce div.product select option,
.woocommerce form .form-row select option{
  color:#ffffff !important;background:#16161f !important;
}

/* Field labels above selects */
.woocommerce div.product .variations label,
.woocommerce form .form-row label,
.mf-filter-box h4{color:#ffffff !important}

/* ============ PAGINATION BORDER FIX ============ */
/* Kill the blue link/focus outline WooCommerce/Astra draws around page numbers */
.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul li,
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  border-color:var(--mf-border) !important;
  outline:none !important;box-shadow:none !important;
}
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span:focus{
  outline:none !important;box-shadow:none !important;
}
.woocommerce nav.woocommerce-pagination ul li a{
  background:var(--mf-surface) !important;color:var(--mf-text) !important;
  border:1px solid var(--mf-border) !important;
}
.woocommerce nav.woocommerce-pagination ul li a:hover{
  border-color:var(--mf-accent) !important;color:var(--mf-accent) !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current{
  background:var(--mf-accent) !important;color:#0a0a0f !important;border:1px solid var(--mf-accent) !important;
}
/* Remove focus ring on any WooCommerce link-styled button that shows blue */
.woocommerce a:focus,
.woocommerce button:focus,
.woocommerce .button:focus{outline:none !important}

/* ============ RESPONSIVE POLISH PASS ============ */
/* Tablet (<=1024px) */
@media(max-width:1024px){
  /* Header: keep logo left, hamburger right, tighten padding */
  #mf-site-header{padding-left:16px !important;padding-right:16px !important}
  /* Hero: reduce oversized headings + stack image below copy */
  .e-con.mf-hero{padding-block:50px 60px !important}
  /* Cart: summary already stacks; ensure table cells breathe */
  .woocommerce-cart table.shop_table.cart tbody tr.cart_item{padding:12px 8px}
  /* Product: gallery + summary stack */
  .single-product div.product .woocommerce-product-gallery,
  .single-product div.product .summary{width:100% !important;float:none !important;margin-bottom:24px}
}
/* Mobile (<=767px) */
@media(max-width:767px){
  /* Section vertical rhythm */
  .e-con.mf-section,.mf-shop-wrap{padding-left:16px !important;padding-right:16px !important}
  /* Headings scale down */
  .elementor-widget-heading .elementor-heading-title{font-size:clamp(1.6rem,7vw,2.3rem) !important;line-height:1.15}
  /* Page-head bands */
  .mf-shop-head h1,.mf-cart-head h1,.mf-page-head h1{font-size:clamp(1.8rem,8vw,2.4rem) !important}
  /* Feature strip: 2 across */
  .mf-feature-strip{grid-template-columns:1fr 1fr !important}
  /* Deal/story rows stack cleanly */
  .e-con.mf-hero,.mf-story-row,.mf-reg-row,.mf-contact-row{flex-direction:column !important}
  /* Buttons full width where they were inline pairs */
  .mf-cart-actions .mf-continue-btn{width:100%;justify-content:center}
  /* Product tabs scroll horizontally instead of wrapping */
  .woocommerce div.product .woocommerce-tabs ul.tabs{display:flex;overflow-x:auto;gap:18px;-webkit-overflow-scrolling:touch}
  .woocommerce div.product .woocommerce-tabs ul.tabs li{white-space:nowrap;margin:0 !important}
  /* Attribute table: comfortable padding */
  table.woocommerce-product-attributes th,table.shop_attributes th{width:42% !important}
}
/* Small mobile (<=480px) */
@media(max-width:480px){
  .mf-feature-strip{grid-template-columns:1fr !important}
  /* Cart item: single column stack */
  .woocommerce-cart td.product-thumbnail img{width:64px;height:64px}
  /* Newsletter stacks (already handled) + summary padding */
  .woocommerce-cart .cart_totals{padding:22px}
  /* Hero CTAs stack full width */
  .e-con.mf-hero .elementor-widget-button{width:100%}
  .e-con.mf-hero .elementor-widget-button .elementor-button{width:100%;justify-content:center}
}
/* Prevent any horizontal overflow site-wide on small screens */
@media(max-width:1024px){
  body{overflow-x:clip}
  img:not(.mf-cat-card img):not(.mf-product-card img):not(.woocommerce-product-gallery img):not(ul.products img),video{max-width:100%}
}

/* ============ CAT CARD HEIGHT GUARD ============ */
.mf-cat-grid .mf-cat-card{aspect-ratio:4/3;display:block;position:relative;height:auto}
.mf-cat-card > img{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:cover !important}
.mf-cat-card .mf-cat-info{position:absolute !important;left:0;right:0;bottom:0;z-index:2}
/* Responsive columns for the category grid */
@media(max-width:1024px){.mf-cat-grid{grid-template-columns:repeat(2,1fr) !important}}
@media(max-width:600px){.mf-cat-grid{grid-template-columns:1fr !important}}
/* Product loop images keep their square box height */
.woocommerce ul.products li.product img{height:auto !important;aspect-ratio:1/1;object-fit:contain}

/* ============ CAT CARD MINHEIGHT FALLBACK ============ */
/* aspect-ratio can fail to resolve in the Elementor editor / some grid contexts,
   collapsing the card to 0 height and overlapping the sections below.
   A concrete min-height guarantees the card always reserves space. */
.mf-cat-grid{grid-auto-rows:1fr}
.mf-cat-card{min-height:260px}
@media(max-width:1024px){.mf-cat-card{min-height:240px}}
@media(max-width:600px){.mf-cat-card{min-height:220px}}
/* Ensure the grid section itself can't be overlapped: give it flow spacing */
.mf-cat-grid{position:relative;z-index:1;margin-bottom:8px}

/* ============ EDITABLE CATEGORY CARDS (native Elementor) ============ */
.e-con.mf-cat-grid-el{align-items:stretch}
.e-con.mf-cat-grid-el > .mf-cat-card-el{
  flex:1 1 260px;min-height:260px !important;overflow:hidden;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.e-con.mf-cat-card-el:hover{
  transform:translateY(-6px);
  border-color:rgba(142,194,63,.45) !important;
  box-shadow:0 18px 40px rgba(0,0,0,.4);
}
.mf-cat-card-el .elementor-heading-title{margin:0}
@media(max-width:1024px){.e-con.mf-cat-grid-el > .mf-cat-card-el{flex:1 1 45%}}
@media(max-width:600px){.e-con.mf-cat-grid-el > .mf-cat-card-el{flex:1 1 100%}}

/* ============ NATIVE STATIC SECTIONS (editable) ============ */
/* Hero stats */
.e-con.mf-hero-stats-el{align-items:flex-start}
.e-con.mf-hero-stats-el > .mf-stat-el{flex:0 0 auto}
.mf-stat-el .elementor-heading-title{margin:0;line-height:1.1}
/* Feature strip */
.e-con.mf-feature-strip-el{justify-content:space-between}
.e-con.mf-feature-strip-el > .mf-feature-el{flex:1 1 160px;min-width:150px}
.mf-feature-el .elementor-heading-title{margin:0}
.mf-feature-el .elementor-widget-icon{width:auto}
@media(max-width:1024px){.e-con.mf-feature-strip-el > .mf-feature-el{flex:1 1 30%}}
@media(max-width:600px){.e-con.mf-feature-strip-el > .mf-feature-el{flex:1 1 45%}}
/* Testimonials */
.e-con.mf-testi-grid-el{align-items:stretch}
.e-con.mf-testi-grid-el > .mf-testi-card-el{flex:1 1 300px}
.mf-testi-card-el .elementor-heading-title{margin:0}
@media(max-width:1024px){.e-con.mf-testi-grid-el > .mf-testi-card-el{flex:1 1 45%}}
@media(max-width:600px){.e-con.mf-testi-grid-el > .mf-testi-card-el{flex:1 1 100%}}

/* ============ CAT CARD IMAGE WIDGET LAYOUT ============ */
.e-con.mf-cat-card-el{overflow:hidden;text-align:left}
.mf-cat-card-el .mf-cat-img{width:100%!important;margin:0!important}
.mf-cat-card-el .mf-cat-img img{
  width:100%!important;aspect-ratio:4/3;object-fit:cover;display:block;
  background:radial-gradient(120% 90% at 50% 0%,#20202e,#12121b 70%);
}
.mf-cat-card-el > .elementor-widget-heading,
.mf-cat-card-el > .elementor-widget-text-editor{padding-left:22px!important;padding-right:22px!important}
.mf-cat-card-el > .elementor-widget-heading:nth-of-type(1){padding-top:16px!important}
.mf-cat-card-el .elementor-heading-title{margin:0}

/* ============ HERO STATS ONE LINE ============ */
.e-con.mf-hero-stats-el{flex-wrap:nowrap!important;flex-direction:row!important;align-items:flex-start;gap:36px}
.e-con.mf-hero-stats-el > .mf-stat-el{
  flex:0 0 auto!important;width:auto!important;min-width:0;
}
.mf-stat-el .elementor-heading-title{white-space:nowrap}
/* ---------- MOBILE (<=767px): keep all three stats on one line ----------
 * The previous rule set each stat to flex:0 0 40%. Three items at 40% = 120%,
 * so the third wrapped to a second row, and 40% of a ~350px container is only
 * ~140px, which forced "Happy Customers" to break mid-word.
 *
 * A 3-column grid with minmax(0,1fr) divides the width evenly and lets each
 * cell shrink below its content width without overflowing. */
@media(max-width:767px){
  .e-con.mf-hero-stats-el{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:12px!important;
    width:100%!important;
    align-items:start!important;
    margin-top:20px!important;
  }
  .e-con.mf-hero-stats-el > .mf-stat-el{
    flex:initial!important;
    width:auto!important;
    min-width:0!important;
    gap:2px!important;
  }
  /* Numbers scale down so 50K+ fits a third of the row */
  .mf-stat-el .elementor-heading-title{
    font-size:1.55rem!important;
    line-height:1.15!important;
    white-space:nowrap;
  }
  /* Labels wrap between words only — never mid-word */
  .mf-stat-el .elementor-widget-text-editor,
  .mf-stat-el .elementor-widget-text-editor p{
    font-size:.78rem!important;
    line-height:1.3!important;
    margin:0!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
  }
}
@media(max-width:400px){
  .e-con.mf-hero-stats-el{gap:8px!important}
  .mf-stat-el .elementor-heading-title{font-size:1.32rem!important}
  .mf-stat-el .elementor-widget-text-editor p{font-size:.72rem!important}
}

/* ---------- MOBILE (<=767px): tighten vertical section rhythm ----------
 * Desktop spacing (hero 70/90px, sections 80px) leaves large dead bands on a
 * phone where the viewport is short. Reduced so more content is visible per
 * screen without the layout feeling cramped. Desktop/tablet keep their values. */
@media(max-width:767px){
  .e-con.mf-hero{padding-block:36px 40px!important}
  .e-con.mf-section{padding-block:48px!important}
  /* Gap between the CTA buttons and the stats row */
  .e-con.mf-hero-stats-el{margin-top:20px!important}
}
@media(max-width:400px){
  .e-con.mf-hero{padding-block:28px 32px!important}
  .e-con.mf-section{padding-block:40px!important}
}

/* ============ FEATURE STRIP LAYOUT FIX ============ */
.e-con.mf-feature-el{
  display:flex!important;flex-direction:row!important;align-items:center!important;
  flex-wrap:nowrap!important;gap:12px!important;
}
.mf-feature-el > .elementor-widget-icon{
  flex:0 0 auto!important;width:auto!important;margin:0!important;
}
.mf-feature-el > .elementor-widget-icon .elementor-icon{margin:0}
.mf-feature-el > .e-con,
.mf-feature-el > .elementor-element.e-con{
  flex:1 1 auto!important;width:auto!important;min-width:0!important;
  display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:0!important;
}
.mf-feature-el .elementor-heading-title{margin:0!important;line-height:1.25}
.mf-feature-el .elementor-widget-text-editor,
.mf-feature-el .elementor-widget-text-editor p{margin:0!important;line-height:1.35}

/* ============ ABOUT NATIVE SECTIONS (editable) ============ */
/* Stats band — desktop: 4 across in a flex row */
.e-con.mf-stats-band-el{align-items:flex-start;text-align:center}
.e-con.mf-stats-band-el > .mf-stat-item-el{flex:1 1 auto;min-width:120px}
.mf-stat-item-el .elementor-heading-title{margin:0;line-height:1.1}

/* ---------- TABLET + MOBILE (<=767px): 2x2 grid ----------
 * The band holds FOUR stats (50,000+ / 2 yr / IP67 / 4.9★). The desktop rule
 * gives each item min-width:120px; four of those plus gaps exceed a phone
 * viewport, so the row overflowed and the last two were cut off the right
 * edge instead of wrapping.
 *
 * A 2-column grid puts 50,000+ and 2 yr on the first line, IP67 and 4.9★ on
 * the second. minmax(0,1fr) lets each cell shrink below its content width so
 * nothing can overflow, and min-width is reset to 0 to release the 120px floor. */
@media(max-width:767px){
  .e-con.mf-stats-band-el{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:28px 16px!important;
    width:100%!important;
    max-width:100%!important;
    text-align:center;
    padding-inline:8px!important;
  }
  .e-con.mf-stats-band-el > .mf-stat-item-el{
    flex:initial!important;
    min-width:0!important;
    width:auto!important;
    max-width:100%!important;
    align-items:center!important;
    gap:4px!important;
  }
  /* Numbers: scale to fit half the row without breaking */
  .mf-stat-item-el .elementor-heading-title{
    font-size:1.7rem!important;
    line-height:1.15!important;
    white-space:nowrap;
  }
  /* Labels wrap between words only — never mid-word */
  .mf-stat-item-el .elementor-widget-text-editor,
  .mf-stat-item-el .elementor-widget-text-editor p{
    font-size:.85rem!important;
    line-height:1.35!important;
    margin:0!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
  }
}
@media(max-width:400px){
  .e-con.mf-stats-band-el{gap:22px 12px!important}
  .mf-stat-item-el .elementor-heading-title{font-size:1.45rem!important}
  .mf-stat-item-el .elementor-widget-text-editor p{font-size:.78rem!important}
}
/* Values grid */
.e-con.mf-values-grid-el{align-items:stretch}
.e-con.mf-values-grid-el > .mf-value-card-el{flex:1 1 300px}
.mf-value-card-el .elementor-heading-title{margin:0}
.mf-value-card-el .elementor-widget-icon .elementor-icon{width:56px;height:56px;font-size:24px;display:inline-flex;align-items:center;justify-content:center}
@media(max-width:1024px){.e-con.mf-values-grid-el > .mf-value-card-el{flex:1 1 45%}}
@media(max-width:600px){.e-con.mf-values-grid-el > .mf-value-card-el{flex:1 1 100%}}

/* ============ SEARCH ICON + TOOLBAR CLEANUP ============ */
/* Search box with inline icon button */
.mf-search-form{position:relative;display:flex;align-items:center;margin:0}
.mf-search-form .mf-search-input{
  min-width:240px;padding-right:44px!important;height:46px!important;
}
.mf-search-btn{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border:0;border-radius:8px;background:transparent;cursor:pointer;
  color:#9090a8;display:grid;place-items:center;transition:color .2s ease,background .2s ease;
}
.mf-search-btn:hover{color:#8ec23f;background:rgba(142,194,63,.1)}
.mf-search-btn i{font-size:15px}
/* Toolbar: result count left, search right (sort removed) */
.mf-shop-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.mf-sort-wrap{display:flex;align-items:center;gap:0}
@media(max-width:600px){.mf-search-form .mf-search-input{min-width:0;width:100%}.mf-sort-wrap{width:100%}}

/* ============ SEARCH ICON ALIGN FIX ============ */
.mf-search-form{position:relative;display:inline-flex;align-items:center;width:auto;margin:0}
.mf-search-form .mf-search-input{
  width:260px;height:46px!important;box-sizing:border-box;
  padding:0 46px 0 16px!important;line-height:46px!important;
  border-radius:10px!important;
}
.mf-search-form .mf-search-btn{
  position:absolute!important;right:8px!important;top:50%!important;transform:translateY(-50%)!important;
  width:30px!important;height:30px!important;min-width:0!important;padding:0!important;margin:0!important;
  border:0!important;border-radius:8px!important;background:transparent!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  color:#9090a8!important;cursor:pointer;box-shadow:none!important;
}
.mf-search-form .mf-search-btn:hover{color:#8ec23f!important;background:rgba(142,194,63,.1)!important}
.mf-search-form .mf-search-btn i{font-size:15px!important;line-height:1!important;margin:0!important}
@media(max-width:600px){.mf-search-form,.mf-search-form .mf-search-input{width:100%}}

/* ============ MY ACCOUNT + AUTH STYLING ============ */
/* Page wrapper */
.woocommerce-account .woocommerce{max-width:1200px;margin:0 auto;padding:10px 20px 70px}

/* ---- Logged-in dashboard: sidebar nav + content ---- */
.woocommerce-account .woocommerce-MyAccount-navigation{
  width:26%;float:left;margin-right:4%;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.woocommerce-account .woocommerce-MyAccount-navigation li{margin:0;border:0}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:block;padding:15px 20px;border-radius:12px;background:var(--mf-surface);
  border:1px solid var(--mf-border);color:var(--mf-text2)!important;
  font-family:var(--mf-font-head);font-weight:600;font-size:.98rem;transition:var(--mf-transition);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{
  border-color:rgba(142,194,63,.4);color:var(--mf-text)!important;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
  background:var(--mf-accent);color:#0a0a0f!important;border-color:var(--mf-accent);
}
.woocommerce-account .woocommerce-MyAccount-content{
  width:70%;float:right;color:var(--mf-text2);line-height:1.7;
}
.woocommerce-account .woocommerce-MyAccount-content a{color:var(--mf-accent)!important}
.woocommerce-account .woocommerce-MyAccount-content strong{color:var(--mf-text)}
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3{color:var(--mf-text)!important;font-family:var(--mf-font-head)}
.woocommerce-account .woocommerce-MyAccount-content::after{content:"";display:table;clear:both}
/* Account tables (orders, addresses) */
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account .shop_table{background:var(--mf-surface)!important;border:1px solid var(--mf-border)!important;border-radius:12px;overflow:hidden;color:var(--mf-text2)}
.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account .shop_table th{background:rgba(255,255,255,.03)!important;color:var(--mf-text)!important;border:0!important}
.woocommerce-account .woocommerce-orders-table td,
.woocommerce-account .shop_table td{border-top:1px solid var(--mf-border)!important;background:transparent!important}
.woocommerce-account .woocommerce-Address{background:var(--mf-surface);border:1px solid var(--mf-border);border-radius:12px;padding:22px;color:var(--mf-text2)}
.woocommerce-account address{color:var(--mf-text2);font-style:normal}

/* ---- Login / Register forms: 'Welcome Back' card ---- */
.woocommerce-account:not(.logged-in) .woocommerce{max-width:520px}
.woocommerce form.woocommerce-form-login,
.woocommerce form.woocommerce-form-register,
.woocommerce .u-column1.col-1,
.woocommerce .u-column2.col-2{
  background:var(--mf-surface);border:1px solid var(--mf-border);border-radius:var(--mf-radius-lg);
  padding:38px 34px!important;margin:0 auto;
}
.woocommerce h2{color:var(--mf-text)!important;font-family:var(--mf-font-head)!important;font-weight:800!important;font-size:1.9rem!important;margin-bottom:8px}
.woocommerce .woocommerce-form-login__header p,
.woocommerce form .form-row label{color:var(--mf-text2)}
.woocommerce form .form-row label{font-family:var(--mf-font-head);font-weight:700;font-size:.9rem;margin-bottom:8px;display:block;color:var(--mf-text)}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row input[type=text],
.woocommerce form .form-row input[type=email],
.woocommerce form .form-row input[type=password]{
  width:100%;background:rgba(255,255,255,.04)!important;border:1px solid var(--mf-border)!important;
  border-radius:12px!important;padding:15px 18px!important;color:var(--mf-text)!important;font-size:1rem;
}
.woocommerce form .form-row input:focus{outline:none;border-color:var(--mf-accent)!important;box-shadow:0 0 0 3px rgba(142,194,63,.15)!important}
.woocommerce form .form-row input::placeholder{color:var(--mf-text2)}
.woocommerce-account button.woocommerce-button,
.woocommerce-account button.button,
.woocommerce button.button[name=login],
.woocommerce button.button[name=register]{
  width:100%;background:var(--mf-accent)!important;color:#0a0a0f!important;border:0!important;
  padding:16px 28px!important;border-radius:99px!important;font-family:var(--mf-font-head)!important;
  font-weight:700!important;font-size:1rem!important;cursor:pointer;box-shadow:0 6px 24px var(--mf-accent-glow);
  transition:var(--mf-transition);margin-top:8px;
}
.woocommerce-account button.button:hover{background:var(--mf-accent-light)!important;transform:translateY(-2px)}
.woocommerce-form-login__rememberme{color:var(--mf-text2);font-weight:400!important}
.woocommerce .lost_password a,.woocommerce-LostPassword a{color:var(--mf-accent)!important}

/* Responsive */
@media(max-width:900px){
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content{width:100%;float:none;margin:0 0 24px}
}

/* ============ WELCOME BACK LOGIN CARD ============ */
/* Center a single card, hide the account title band on logged-out view */
.woocommerce-account:not(.logged-in) .woocommerce{
  max-width:560px;margin:0 auto;padding:60px 20px 80px;
}
.woocommerce-account:not(.logged-in) .entry-title,
.woocommerce-account:not(.logged-in) .page-title,
.woocommerce-account:not(.logged-in) .ast-archive-title,
.woocommerce-account:not(.logged-in) .mf-page-head{display:none!important}

/* The card */
.woocommerce-account .woocommerce form.woocommerce-form-login{
  background:var(--mf-surface)!important;border:1px solid var(--mf-border)!important;
  border-radius:24px!important;padding:44px 40px!important;margin:0!important;position:relative;
}
/* Heading block injected by our hook (sits inside the form wrapper visually) */
.mf-auth-head{margin:0 0 28px}
.mf-auth-head h1{
  font-family:var(--mf-font-head);font-weight:800;font-size:2.4rem;color:var(--mf-text);margin:0 0 8px;line-height:1.1;
}
.mf-auth-head p{color:var(--mf-text2);font-size:1.05rem;margin:0}
/* Put the heading inside the card look: move it below the form's top via order isn't needed;
   instead style the wrapper so heading + form read as one card. */
.woocommerce-account:not(.logged-in) .woocommerce > .woocommerce-notices-wrapper{margin-bottom:0}

/* Fields */
.woocommerce-account form.woocommerce-form-login .form-row{margin:0 0 20px;padding:0;width:100%}
.woocommerce-account form.woocommerce-form-login label{
  display:block;color:var(--mf-text)!important;font-family:var(--mf-font-head);font-weight:700;font-size:.92rem;margin-bottom:10px;
}
.woocommerce-account form.woocommerce-form-login input.input-text{
  width:100%!important;background:rgba(255,255,255,.04)!important;border:1px solid var(--mf-border)!important;
  border-radius:14px!important;padding:16px 18px!important;color:var(--mf-text)!important;font-size:1rem;box-sizing:border-box;
}
.woocommerce-account form.woocommerce-form-login input.input-text:focus{
  outline:none;border-color:var(--mf-accent)!important;box-shadow:0 0 0 3px rgba(142,194,63,.18)!important;
}
.woocommerce-account form.woocommerce-form-login input::placeholder{color:var(--mf-text2)}

/* Remember me — subtle */
.woocommerce-account form.woocommerce-form-login .woocommerce-form-login__rememberme{
  display:block;margin:0 0 20px;color:var(--mf-text2);font-size:.9rem;
}
.woocommerce-account form.woocommerce-form-login .woocommerce-form-login__rememberme input{accent-color:var(--mf-accent);margin-right:8px}

/* Log In button — full width green pill */
.woocommerce-account form.woocommerce-form-login button[name=login]{
  width:100%!important;background:var(--mf-accent)!important;color:#0a0a0f!important;border:0!important;
  padding:17px 28px!important;border-radius:99px!important;font-family:var(--mf-font-head)!important;
  font-weight:700!important;font-size:1.05rem!important;cursor:pointer;box-shadow:0 6px 24px var(--mf-accent-glow);
  transition:var(--mf-transition);margin:6px 0 0!important;float:none!important;
}
.woocommerce-account form.woocommerce-form-login button[name=login]:hover{background:var(--mf-accent-light)!important;transform:translateY(-2px)}

/* Lost password + create-account line */
.woocommerce-account form.woocommerce-form-login .lost_password{margin:16px 0 0;text-align:center}
.woocommerce-account form.woocommerce-form-login .lost_password a{color:var(--mf-text2)!important;font-size:.9rem}
.woocommerce-account form.woocommerce-form-login .lost_password a:hover{color:var(--mf-accent)!important}
.mf-auth-alt{text-align:center;margin:22px 0 0;color:var(--mf-text2)}
.mf-auth-alt a{color:var(--mf-accent)!important;font-weight:700}

@media(max-width:600px){
  .woocommerce-account .woocommerce form.woocommerce-form-login{padding:32px 24px!important}
  .mf-auth-head h1{font-size:2rem}
}

/* ============ REGISTER CARD MATCH ============ */
/* Stack the two columns (JS shows one at a time) */
.woocommerce-account:not(.logged-in) .u-columns,
.woocommerce-account:not(.logged-in) .col2-set{display:block!important;width:100%!important}
.woocommerce-account:not(.logged-in) .u-column1,
.woocommerce-account:not(.logged-in) .u-column2{width:100%!important;float:none!important;margin:0!important;padding:0!important}
.woocommerce-account:not(.logged-in) .u-columns .col-1,
.woocommerce-account:not(.logged-in) .u-columns .col-2{max-width:none}
/* Register form = same card as login */
.woocommerce-account .woocommerce form.woocommerce-form-register{
  background:var(--mf-surface)!important;border:1px solid var(--mf-border)!important;
  border-radius:24px!important;padding:44px 40px!important;margin:0!important;
}
.woocommerce-account form.woocommerce-form-register .form-row{margin:0 0 20px;padding:0;width:100%}
.woocommerce-account form.woocommerce-form-register label{display:block;color:var(--mf-text)!important;font-family:var(--mf-font-head);font-weight:700;font-size:.92rem;margin-bottom:10px}
.woocommerce-account form.woocommerce-form-register input.input-text{
  width:100%!important;background:rgba(255,255,255,.04)!important;border:1px solid var(--mf-border)!important;
  border-radius:14px!important;padding:16px 18px!important;color:var(--mf-text)!important;font-size:1rem;box-sizing:border-box;
}
.woocommerce-account form.woocommerce-form-register input.input-text:focus{outline:none;border-color:var(--mf-accent)!important;box-shadow:0 0 0 3px rgba(142,194,63,.18)!important}
.woocommerce-account form.woocommerce-form-register input::placeholder{color:var(--mf-text2)}
.woocommerce-account form.woocommerce-form-register button[name=register]{
  width:100%!important;background:var(--mf-accent)!important;color:#0a0a0f!important;border:0!important;
  padding:17px 28px!important;border-radius:99px!important;font-family:var(--mf-font-head)!important;
  font-weight:700!important;font-size:1.05rem!important;cursor:pointer;box-shadow:0 6px 24px var(--mf-accent-glow);
  transition:var(--mf-transition);margin:6px 0 0!important;float:none!important;
}
.woocommerce-account form.woocommerce-form-register button[name=register]:hover{background:var(--mf-accent-light)!important;transform:translateY(-2px)}
.woocommerce-account form.woocommerce-form-register .woocommerce-privacy-policy-text p{color:var(--mf-text2);font-size:.85rem;margin-top:14px}
.woocommerce-account form.woocommerce-form-register .woocommerce-privacy-policy-text a{color:var(--mf-accent)!important}
.mf-auth-head-register{margin:0 0 28px}

/* ============ LOGIN CARD TIGHTEN ============ */
/* Hide WooCommerce's inner 'Login' <h2> heading (we have Welcome Back above) */
.woocommerce-account form.woocommerce-form-login > h2,
.woocommerce-account .woocommerce > h2,
.woocommerce-account .u-column1 > h2,
.woocommerce-account .woocommerce-form-login-header{display:none!important}

/* Remove the double-card look: the outer wrapper shouldn't also be a card */
.woocommerce-account:not(.logged-in) .woocommerce{
  max-width:460px!important;padding:40px 20px 60px!important;
}
/* Single tighter card */
.woocommerce-account .woocommerce form.woocommerce-form-login,
.woocommerce-account .woocommerce form.woocommerce-form-register{
  padding:34px 30px!important;border-radius:20px!important;
}
/* Tighter heading block */
.mf-auth-head{margin:0 0 22px!important}
.mf-auth-head h1{font-size:1.9rem!important;margin:0 0 6px!important}
.mf-auth-head p{font-size:.95rem!important}

/* Tighter field spacing */
.woocommerce-account form.woocommerce-form-login .form-row,
.woocommerce-account form.woocommerce-form-register .form-row{margin:0 0 16px!important}
.woocommerce-account form.woocommerce-form-login label,
.woocommerce-account form.woocommerce-form-register label{font-size:.85rem!important;margin-bottom:7px!important}
.woocommerce-account form.woocommerce-form-login input.input-text,
.woocommerce-account form.woocommerce-form-register input.input-text{padding:13px 16px!important;border-radius:12px!important;font-size:.95rem!important}

/* Remember me tighter */
.woocommerce-account form.woocommerce-form-login .woocommerce-form-login__rememberme{margin:0 0 16px!important;font-size:.85rem!important}

/* Button tighter */
.woocommerce-account form.woocommerce-form-login button[name=login],
.woocommerce-account form.woocommerce-form-register button[name=register]{padding:14px 24px!important;font-size:1rem!important}

/* Lost password tighter */
.woocommerce-account form.woocommerce-form-login .lost_password{margin:14px 0 0!important;font-size:.85rem}
.mf-auth-alt{margin:18px 0 0!important;font-size:.92rem}

/* Hide the red required asterisks for a cleaner look */
.woocommerce-account form .required,
.woocommerce-account form .optional{display:none!important}

/* ============ LOGIN TOAST POPUP ============ */
.mf-login-toast{
  position:fixed;top:24px;left:50%;transform:translateX(-50%) translateY(-20px);
  display:flex;align-items:center;gap:12px;
  background:var(--mf-surface);border:1px solid rgba(142,194,63,.4);
  border-radius:14px;padding:14px 22px;
  box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 0 1px rgba(142,194,63,.15);
  z-index:99999;opacity:0;pointer-events:none;
  transition:opacity .35s ease,transform .35s ease;
  font-family:var(--mf-font-head);
}
.mf-login-toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}
.mf-login-toast__icon{color:var(--mf-accent);font-size:1.3rem;display:flex}
.mf-login-toast__text{color:var(--mf-text);font-weight:700;font-size:.98rem}
@media(max-width:600px){.mf-login-toast{top:16px;padding:12px 18px;width:calc(100% - 32px);justify-content:center}}

/* ============ SIMPLE DASHBOARD STYLING ============ */
.mf-dash-simple{padding:4px 0}
.mf-dash-hello{color:var(--mf-text)!important;font-family:var(--mf-font-head)!important;font-weight:800!important;font-size:1.6rem!important;margin:0 0 4px!important}
.mf-dash-email{color:var(--mf-text2)!important;font-size:.98rem;margin:0 0 24px!important}
.mf-dash-noorders{background:var(--mf-surface);border:1px solid var(--mf-border);border-radius:16px;padding:40px 30px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.mf-dash-noorders i{font-size:2.2rem;color:var(--mf-text2)}
.mf-dash-noorders p{color:var(--mf-text2);margin:0;font-size:1rem}
.mf-dash-shopbtn{display:inline-block;margin-top:8px;background:var(--mf-accent);color:#0a0a0f!important;font-family:var(--mf-font-head);font-weight:700;padding:12px 26px;border-radius:99px;transition:var(--mf-transition)}
.mf-dash-shopbtn:hover{background:var(--mf-accent-light);transform:translateY(-2px)}
.mf-dash-hasorders{color:var(--mf-text2);font-size:1rem}
.mf-dash-hasorders a{color:var(--mf-accent)!important;font-weight:700}

/* ============ DASHBOARD POLISH FIX ============ */
/* 1) Endpoint/page title ('Orders', 'My Details') must align with the 1200px wrapper, not the far corner */
.woocommerce-account .entry-header,
.woocommerce-account .page-title,
.woocommerce-account .entry-title,
.woocommerce-account .ast-archive-title,
.woocommerce-account header.woocommerce-products-header{
  max-width:1200px!important;margin:0 auto!important;padding:0 20px!important;box-sizing:border-box;
  text-align:left!important;width:100%;
}
.woocommerce-account .entry-title,
.woocommerce-account .page-title{
  font-family:var(--mf-font-head)!important;font-weight:800!important;color:var(--mf-text)!important;
  font-size:2rem!important;margin-bottom:24px!important;
}

/* 2) Fix the empty green button on the 'No order has been made yet' notice */
.woocommerce-account .woocommerce-Message a.button,
.woocommerce-account .woocommerce-message a.button,
.woocommerce-account .woocommerce-info a.button,
.woocommerce-account .woocommerce-notice a.button,
.woocommerce-account .woocommerce-MyAccount-content a.button{
  background:var(--mf-accent)!important;color:#0a0a0f!important;
  font-family:var(--mf-font-head)!important;font-weight:700!important;font-size:.95rem!important;
  padding:12px 26px!important;border-radius:99px!important;border:0!important;
  display:inline-flex!important;align-items:center;justify-content:center;text-decoration:none!important;
  box-shadow:none!important;line-height:1.2!important;white-space:nowrap;min-width:auto;width:auto!important;
}
.woocommerce-account .woocommerce-Message a.button:hover,
.woocommerce-account .woocommerce-MyAccount-content a.button:hover{background:var(--mf-accent-light)!important}

/* Style the 'No order has been made yet' notice to match the theme */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-notice{
  background:var(--mf-surface)!important;border:1px solid var(--mf-border)!important;
  border-left:3px solid var(--mf-accent)!important;border-radius:12px!important;
  color:var(--mf-text)!important;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 24px!important;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message::before,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before{content:none!important;display:none!important}

/* ============ SERVICES NATIVE SECTIONS (editable) ============ */
/* Services grid */
.e-con.mf-svc-grid-el{align-items:stretch}
.e-con.mf-svc-grid-el > .mf-svc-card-el{flex:1 1 300px;transition:transform .25s ease,border-color .25s ease}
.e-con.mf-svc-card-el:hover{transform:translateY(-5px);border-color:rgba(142,194,63,.4)!important}
.mf-svc-card-el .elementor-heading-title{margin:0}
.mf-svc-card-el .elementor-widget-icon .elementor-icon{width:54px;height:54px;font-size:22px;display:inline-flex;align-items:center;justify-content:center}
@media(max-width:1024px){.e-con.mf-svc-grid-el > .mf-svc-card-el{flex:1 1 45%}}
@media(max-width:600px){.e-con.mf-svc-grid-el > .mf-svc-card-el{flex:1 1 100%}}
/* Steps grid */
.e-con.mf-steps-grid-el{align-items:stretch}
.e-con.mf-steps-grid-el > .mf-step-card-el{flex:1 1 260px;text-align:center;position:relative}
.mf-step-card-el .elementor-heading-title{margin:0}
/* the first heading in each step card = the number, render as a green circle */
.mf-step-card-el > .elementor-widget-heading:first-child .elementor-heading-title{
  width:52px;height:52px;border-radius:50%;background:var(--mf-accent);color:#0a0a0f;
  display:flex;align-items:center;justify-content:center;margin:0 auto;
}
@media(max-width:767px){.e-con.mf-steps-grid-el > .mf-step-card-el{flex:1 1 100%;max-width:460px;margin:0 auto}}

/* ============ WPFORMS CONFIRMATION FIX ============ */
/* Success message after form submit was dark-on-dark - make it readable */
.wpforms-confirmation-container,
.wpforms-confirmation-container-full,
div.wpforms-container .wpforms-confirmation-container-full,
div.wpforms-container-full .wpforms-confirmation-container-full{
  background:rgba(142,194,63,.1)!important;
  border:1px solid rgba(142,194,63,.45)!important;
  border-radius:16px!important;
  padding:24px 28px!important;
  color:var(--mf-text)!important;
}
.wpforms-confirmation-container p,
.wpforms-confirmation-container-full p,
.wpforms-confirmation-container-full,
div.wpforms-container .wpforms-confirmation-container-full p{
  color:var(--mf-text)!important;
  font-size:1.02rem!important;
  line-height:1.6!important;
  margin:0!important;
  font-family:var(--mf-font-body)!important;
}
.wpforms-confirmation-container-full a{color:var(--mf-accent)!important;font-weight:700}
/* success icon if WPForms adds one */
.wpforms-confirmation-container-full::before{color:var(--mf-accent)!important}

/* ============ FOOTER ICON SIZE LOCK (WPForms FA conflict) ============ */
/* WPForms injects Font Awesome on AJAX submit which blows up footer icon-list icons.
   Lock the footer icon sizes so nothing can override them. */
#mf-site-footer .elementor-icon-list-icon i,
.mf-site-footer .elementor-icon-list-icon i,
footer .elementor-icon-list-icon i{
  font-size:15px!important;width:16px!important;height:auto!important;line-height:1!important;
  display:inline-flex!important;align-items:center;justify-content:center;
}
#mf-site-footer .elementor-icon-list-icon svg,
.mf-site-footer .elementor-icon-list-icon svg,
footer .elementor-icon-list-icon svg{
  width:15px!important;height:15px!important;max-width:15px!important;max-height:15px!important;
}
/* Social icons in footer */
#mf-site-footer .elementor-social-icon i,
#mf-site-footer .elementor-social-icon svg,
.mf-site-footer .elementor-social-icon i,
.mf-site-footer .elementor-social-icon svg,
footer .elementor-social-icon i,
footer .elementor-social-icon svg{
  font-size:16px!important;width:16px!important;height:16px!important;max-width:16px!important;max-height:16px!important;
}
/* General guard: any FA icon in the footer stays inline-sized, never full-width */
#mf-site-footer i.fa-solid,#mf-site-footer i.fa-brands,#mf-site-footer i.fa-regular,
#mf-site-footer i.fas,#mf-site-footer i.fab,#mf-site-footer i.far,
footer i.fa-solid,footer i.fa-brands,footer i.fas,footer i.fab{
  width:auto!important;height:auto!important;font-size:inherit;display:inline-block;
}
/* WPForms should not restyle icons outside its own container */
.wpforms-container svg{max-width:100%}

/* ============ WPFORMS PLACEHOLDER + DATE FIX ============ */
/* 1) Placeholder text readable grey on both forms */
.wpforms-container input::placeholder,
.wpforms-container textarea::placeholder,
.wpforms-container select::placeholder,
div.wpforms-container-full input::placeholder,
div.wpforms-container-full textarea::placeholder,
.wpforms-field input::placeholder,
.wpforms-field textarea::placeholder{
  color:#9090a8!important;opacity:1!important;
}
/* WebKit + Moz explicit */
.wpforms-container input::-webkit-input-placeholder,
.wpforms-container textarea::-webkit-input-placeholder{color:#9090a8!important;opacity:1!important}
.wpforms-container input::-moz-placeholder,
.wpforms-container textarea::-moz-placeholder{color:#9090a8!important;opacity:1!important}
.wpforms-container input:-ms-input-placeholder,
.wpforms-container textarea:-ms-input-placeholder{color:#9090a8!important}
/* Actual typed text stays light */
.wpforms-container input.wpforms-field-medium,
.wpforms-container input,
.wpforms-container textarea,
.wpforms-container select{color:#f0f0f5!important}

/* 2) Date field separators: the DD/MM/YYYY divider text must be visible */
.wpforms-container .wpforms-field-date-time-date-dropdown-container,
.wpforms-container .wpforms-field-date-time input{color:#f0f0f5!important}
/* If date uses separate DD MM YYYY inputs, show the '/' separators */
.wpforms-container .wpforms-field-date-time .wpforms-datepicker-wrap{color:#9090a8}
.wpforms-container .wpforms-field-row-block{color:#9090a8}
/* Flatpickr / date dropdowns text */
.wpforms-container .flatpickr-input,
.wpforms-container input[type=date],
.wpforms-container input.wpforms-field-date{color:#f0f0f5!important}
.wpforms-container input[type=date]::-webkit-datetime-edit-text,
.wpforms-container input[type=date]::-webkit-datetime-edit-month-field,
.wpforms-container input[type=date]::-webkit-datetime-edit-day-field,
.wpforms-container input[type=date]::-webkit-datetime-edit-year-field{color:#f0f0f5!important}
.wpforms-container input[type=date]::-webkit-datetime-edit-text{color:#9090a8!important;padding:0 2px}
/* Date dropdown selects (DD / MM / YYYY as 3 selects) */
.wpforms-container .wpforms-field-date-time-date-dropdown-container select{color:#f0f0f5!important;background:rgba(255,255,255,.04)!important}
.wpforms-container .wpforms-field-date-time-date-dropdown-container select option{color:#f0f0f5!important;background:#16161f!important}

/* ============ DASH SHOPBTN TEXT FIX ============ */
.mf-dash-noorders .mf-dash-shopbtn,
a.mf-dash-shopbtn{
  color:#0a0a0f!important;font-size:.98rem!important;line-height:1.2!important;
  text-indent:0!important;font-family:var(--mf-font-head)!important;font-weight:700!important;
  display:inline-flex!important;align-items:center;justify-content:center;
  text-decoration:none!important;background:var(--mf-accent)!important;
  padding:13px 30px!important;border-radius:99px!important;min-height:0!important;
  visibility:visible!important;opacity:1!important;white-space:nowrap;
}
.mf-dash-noorders .mf-dash-shopbtn:hover{background:var(--mf-accent-light)!important;color:#0a0a0f!important;transform:translateY(-2px)}
/* make sure the empty-state icon isn't swallowing the button */
.mf-dash-noorders{gap:14px!important}
.mf-dash-noorders i.fa-box-open{font-size:2.2rem!important;width:auto!important;height:auto!important;color:var(--mf-text2)!important;line-height:1!important}

/* SHOPBTN LABEL SPAN — guarantee button text renders */
.mf-dash-shopbtn .mf-dash-shopbtn-label{font-size:15px!important;color:#0a0a0f!important;line-height:1!important;display:inline!important;visibility:visible!important;opacity:1!important;font-family:var(--mf-font-head)!important;font-weight:700!important;text-indent:0!important;}
.mf-dash-boxicon i{font-size:2.2rem!important;color:#9090a8!important;width:auto!important;height:auto!important}

/* ============ HEADER ICON BG (subtle dark) ============ */
/* Account + cart header icons: slightly-visible dark box (lighter than the pure-black header) */
#mf-login-btn a,#mf-cart-btn a,
#mf-login-btn .xpro-elementor-button,#mf-cart-btn .xpro-elementor-button,
#mf-login-btn .elementor-button,#mf-cart-btn .elementor-button,
#mf-login-btn button,#mf-cart-btn button{
  background:#1c1c26!important;background-color:#1c1c26!important;
  border:1px solid rgba(255,255,255,.06)!important;box-shadow:none!important;
  border-radius:12px!important;
}
#mf-login-btn a:hover,#mf-cart-btn a:hover,
#mf-login-btn .elementor-button:hover,#mf-cart-btn .elementor-button:hover{
  background:#26263400!important;background-color:#262634!important;border-color:rgba(142,194,63,.35)!important;
}
#mf-login-btn i,#mf-cart-btn i,
#mf-login-btn svg,#mf-cart-btn svg,
#mf-login-btn .elementor-button-icon,#mf-cart-btn .elementor-button-icon{color:var(--mf-text)!important;fill:var(--mf-text)!important}

/* Account + cart header icons: dark/black rounded box */
#mf-login-btn a,#mf-cart-btn a,
#mf-login-btn .xpro-elementor-button,#mf-cart-btn .xpro-elementor-button,
#mf-login-btn .elementor-button,#mf-cart-btn .elementor-button,
#mf-login-btn button,#mf-cart-btn button{
  background:#0a0a0f!important;background-color:#0a0a0f!important;
  border:1px solid rgba(255,255,255,.08)!important;box-shadow:none!important;
  border-radius:12px!important;
}
#mf-login-btn a:hover,#mf-cart-btn a:hover,
#mf-login-btn .elementor-button:hover,#mf-cart-btn .elementor-button:hover{
  background:#16161f!important;border-color:rgba(142,194,63,.35)!important;
}
#mf-login-btn i,#mf-cart-btn i,
#mf-login-btn svg,#mf-cart-btn svg,
#mf-login-btn .elementor-button-icon,#mf-cart-btn .elementor-button-icon{color:var(--mf-text)!important;fill:var(--mf-text)!important}

/* Remove the grey background box on the account + cart header icons */
#mf-login-btn a,#mf-cart-btn a,
#mf-login-btn .xpro-elementor-button,#mf-cart-btn .xpro-elementor-button,
#mf-login-btn .elementor-button,#mf-cart-btn .elementor-button,
#mf-login-btn button,#mf-cart-btn button{
  background:transparent!important;background-color:transparent!important;
  border:0!important;box-shadow:none!important;
}
#mf-login-btn a:hover,#mf-cart-btn a:hover,
#mf-login-btn .elementor-button:hover,#mf-cart-btn .elementor-button:hover{
  background:rgba(255,255,255,.06)!important;
}
/* keep the icons white/light */
#mf-login-btn i,#mf-cart-btn i,
#mf-login-btn svg,#mf-cart-btn svg,
#mf-login-btn .elementor-button-icon,#mf-cart-btn .elementor-button-icon{color:var(--mf-text)!important;fill:var(--mf-text)!important}

/* ============ HEADER ICON BG BOTH MATCH ============ */
/* Force identical subtle-dark box on BOTH login and cart icons — every possible XPRO element */
#mf-login-btn,#mf-cart-btn,
#mf-login-btn > a,#mf-cart-btn > a,
#mf-login-btn .xpro-button,#mf-cart-btn .xpro-button,
#mf-login-btn .xpro-elementor-button,#mf-cart-btn .xpro-elementor-button,
#mf-login-btn .xpro-btn,#mf-cart-btn .xpro-btn,
#mf-login-btn a.elementor-button,#mf-cart-btn a.elementor-button{
  background:#1c1c26!important;background-color:#1c1c26!important;
  border:1px solid rgba(255,255,255,.06)!important;
  border-radius:12px!important;box-shadow:none!important;
  width:44px!important;height:44px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  padding:0!important;
}
/* the outer wrapper itself must NOT double-box — keep it transparent, box goes on the link */
#mf-login-btn,#mf-cart-btn{background:transparent!important;border:0!important;width:auto!important;height:auto!important;padding:0!important}
#mf-login-btn > a,#mf-cart-btn > a,
#mf-login-btn .xpro-elementor-button,#mf-cart-btn .xpro-elementor-button{background:#1c1c26!important;border:1px solid rgba(255,255,255,.06)!important}
#mf-login-btn:hover > a,#mf-cart-btn:hover > a,
#mf-login-btn > a:hover,#mf-cart-btn > a:hover{background:#262634!important;border-color:rgba(142,194,63,.35)!important}
/* icons stay light */
#mf-login-btn i,#mf-cart-btn i,#mf-login-btn svg,#mf-cart-btn svg{color:var(--mf-text)!important;fill:var(--mf-text)!important}

/* ============ REGISTER VIEW CLEANUP ============ */
/* When the register form is shown (JS toggle), hide the login-side 'Welcome Back' heading
   and WooCommerce's default 'Register' <h2>, leaving only our 'Create Account' block. */

/* Hide WooCommerce's default 'Register' h2 inside the register column */
.woocommerce-account .woocommerce-form-register > h2,
.woocommerce-account .u-column2 > h2,
.woocommerce-account .col-2 > h2{display:none!important}

/* The 'Welcome Back' heading (mf-auth-head, not the register one) belongs to the login view.
   Our JS hides the login column when register is active — make sure that heading is inside
   the login column so it hides with it. It is injected via woocommerce_before_customer_login_form,
   which sits in the login column, so hiding u-column1 hides it too. Reinforce: */
.woocommerce-account .u-column1[style*="display: none"] .mf-auth-head,
.woocommerce-account .u-column1[style*="display:none"] .mf-auth-head{display:none!important}

/* Remove the empty double-card border: the register column wrapper shouldn't also look like a card */
.woocommerce-account .u-column2,
.woocommerce-account .col-2{background:transparent!important;border:0!important;padding:0!important}

/* Our 'Create Account' heading block spacing */
.mf-auth-head-register{margin:0 0 24px!important}
.mf-auth-head-register h1{font-size:1.9rem!important;margin:0 0 6px!important;color:var(--mf-text)!important}
.mf-auth-head-register p{color:var(--mf-text2)!important;font-size:.95rem!important;margin:0!important}

/* ============ REGISTER H2 HIDE FINAL ============ */
/* Hide WooCommerce's default 'Register' and 'Login' h2 headings everywhere in account forms */
.woocommerce-account .u-column1 > h2,
.woocommerce-account .u-column2 > h2,
.woocommerce-account .col-1 > h2,
.woocommerce-account .col-2 > h2,
.woocommerce-account .woocommerce-form-register > h2:first-child,
.woocommerce-account .woocommerce > .u-columns > div > h2{display:none!important}
/* Kill the empty outer card border on the column wrappers */
.woocommerce-account .u-columns .u-column1,
.woocommerce-account .u-columns .u-column2{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important}

/* ============ CHECKOUT PAGE POLISH ============ */
/* Section headings were dark-on-dark */
.woocommerce-checkout h3,
.woocommerce-checkout h3#order_review_heading,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3,
#customer_details h3,
#order_review_heading{
  color:var(--mf-text)!important;font-family:var(--mf-font-head)!important;font-weight:800!important;
  font-size:1.4rem!important;margin:0 0 20px!important;background:transparent!important;
}
/* Remove the stray divider under headings */
.woocommerce-checkout h3::after,
#order_review_heading::after{content:none!important;display:none!important}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper{border:0!important}

/* Order review table text */
.woocommerce-checkout table.shop_table,
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td{
  background:transparent!important;border-color:var(--mf-border)!important;color:var(--mf-text)!important;
}
.woocommerce-checkout table.shop_table thead th{
  color:var(--mf-text2)!important;font-family:var(--mf-font-head)!important;
  font-size:.78rem!important;letter-spacing:.12em;text-transform:uppercase;
  background:transparent!important;border-bottom:1px solid var(--mf-border)!important;
}
.woocommerce-checkout table.shop_table tbody td,
.woocommerce-checkout table.shop_table .product-name{color:var(--mf-text)!important}
.woocommerce-checkout table.shop_table tfoot th,
.woocommerce-checkout table.shop_table tfoot td{
  color:var(--mf-text)!important;background:transparent!important;border-top:1px solid var(--mf-border)!important;
}
/* Shipping row 'Free shipping' was invisible */
.woocommerce-checkout .woocommerce-shipping-totals td,
.woocommerce-checkout .woocommerce-shipping-totals th,
.woocommerce-checkout ul#shipping_method li,
.woocommerce-checkout ul#shipping_method label,
.woocommerce-checkout .woocommerce-shipping-methods label{color:var(--mf-text)!important}
.woocommerce-checkout ul#shipping_method{list-style:none;margin:0;padding:0}
/* Total in accent green */
.woocommerce-checkout .order-total th{color:var(--mf-text)!important;font-size:1.05rem}
.woocommerce-checkout .order-total td,
.woocommerce-checkout .order-total td .amount{color:var(--mf-accent)!important;font-size:1.3rem;font-weight:800}

/* Payment box (Razorpay) */
.woocommerce-checkout #payment,
.woocommerce-checkout .woocommerce-checkout-payment{background:transparent!important;border-radius:0!important}
.woocommerce-checkout #payment ul.payment_methods{
  background:transparent!important;border:0!important;border-top:1px solid var(--mf-border)!important;padding:20px 0 0!important;
}
.woocommerce-checkout #payment ul.payment_methods li,
.woocommerce-checkout #payment ul.payment_methods label,
.woocommerce-checkout #payment .payment_box,
.woocommerce-checkout #payment .payment_box p{color:var(--mf-text)!important;background:transparent!important}
.woocommerce-checkout #payment .payment_box{border:0!important}
.woocommerce-checkout #payment .payment_box::before{content:none!important;display:none!important}
/* Remove the white triangle/arrow above the payment box */
.woocommerce-checkout #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::after{display:none!important;border:0!important;content:none!important}

/* Place order button */
.woocommerce-checkout #place_order,
.woocommerce-checkout button#place_order{
  width:100%!important;background:var(--mf-accent)!important;color:#0a0a0f!important;border:0!important;
  padding:16px 28px!important;border-radius:99px!important;font-family:var(--mf-font-head)!important;
  font-weight:700!important;font-size:1.05rem!important;box-shadow:0 6px 24px var(--mf-accent-glow);
  margin-top:16px!important;
}
.woocommerce-checkout #place_order:hover{background:var(--mf-accent-light)!important;transform:translateY(-2px)}

/* Form fields */
.woocommerce-checkout .form-row label{color:var(--mf-text)!important;font-family:var(--mf-font-head);font-weight:700;font-size:.9rem;margin-bottom:8px;display:block}
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row .select2-selection,
.woocommerce-checkout select{
  background:rgba(255,255,255,.04)!important;border:1px solid var(--mf-border)!important;
  border-radius:12px!important;padding:14px 16px!important;color:var(--mf-text)!important;
}
.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout select:focus{outline:none;border-color:var(--mf-accent)!important;box-shadow:0 0 0 3px rgba(142,194,63,.15)!important}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--mf-text)!important;line-height:1.5}
.woocommerce-checkout .select2-dropdown{background:var(--mf-surface)!important;border-color:var(--mf-border)!important;color:var(--mf-text)!important}
.woocommerce-checkout .select2-results__option{color:var(--mf-text)!important;background:var(--mf-surface)!important}
.woocommerce-checkout .select2-results__option--highlighted{background:var(--mf-accent)!important;color:#0a0a0f!important}

/* Coupon notice */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info{
  background:var(--mf-surface)!important;border:1px solid var(--mf-border)!important;
  border-left:3px solid var(--mf-accent)!important;border-radius:12px!important;color:var(--mf-text)!important;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a{color:var(--mf-accent)!important}

/* Remove stray white borders/lines */
.woocommerce-checkout .col2-set,
.woocommerce-checkout .col-1,
.woocommerce-checkout .col-2{border:0!important;background:transparent!important}

/* ============ PASSWORD METER HIDE + HINT ============ */
/* Remove the weak/strong strength bar and its message entirely */
.woocommerce-password-strength,
.woocommerce-password-hint,
#pass-strength-result,
.woocommerce form .woocommerce-password-strength,
.woocommerce-account .woocommerce-password-strength,
.woocommerce-account .woocommerce-password-hint{display:none!important}

/* Our own simple hint under the password field */
.mf-pw-hint{
  color:var(--mf-text2)!important;font-size:.85rem!important;
  margin:-8px 0 16px!important;line-height:1.5;
}

/* ============ CHECKOUT ACCOUNT BLOCKS ============ */
/* 'Returning customer? Click here to login' reminder */
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info{
  background:var(--mf-surface)!important;border:1px solid var(--mf-border)!important;
  border-left:3px solid var(--mf-accent)!important;border-radius:12px!important;
  color:var(--mf-text)!important;padding:16px 20px!important;
}
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a{color:var(--mf-accent)!important;font-weight:700}
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::before{content:none!important;display:none!important}
/* Inline login form at checkout */
.woocommerce-checkout form.woocommerce-form-login{
  background:var(--mf-surface)!important;border:1px solid var(--mf-border)!important;
  border-radius:16px!important;padding:26px!important;margin:0 0 24px!important;
}
/* Create-account checkbox + password field */
.woocommerce-checkout .woocommerce-account-fields{margin-top:14px}
.woocommerce-checkout .woocommerce-account-fields .create-account{margin-top:12px}
.woocommerce-checkout .woocommerce-form__label-for-checkbox,
.woocommerce-checkout .woocommerce-account-fields label{color:var(--mf-text)!important}
.woocommerce-checkout .woocommerce-form__input-checkbox{accent-color:var(--mf-accent);margin-right:8px}
.woocommerce-checkout .mf-pw-hint{color:var(--mf-text2)!important;font-size:.85rem!important;margin:8px 0 12px!important}

/* ============ CART HEADER LINE + SPACING FIX ============ */
/* 1) Remove the stray broken divider under the column headers.
      It was a per-cell border which renders as disjointed segments in the grid layout. */
.woocommerce-cart table.shop_table.cart thead th{
  border:0 !important;border-bottom:0 !important;box-shadow:none !important;
}
/* single clean divider under the whole header row instead */
.woocommerce-cart table.shop_table.cart thead tr{
  border-bottom:1px solid var(--mf-border) !important;
  padding-bottom:10px;
}

/* 2) Breathing room between the quantity stepper (+) and the subtotal amount */
.woocommerce-cart td.product-quantity{padding-right:26px !important}
.woocommerce-cart td.product-subtotal{padding-left:26px !important}
/* keep the header labels aligned with the new cell padding */
.woocommerce-cart table.shop_table.cart thead th.product-quantity{padding-right:26px !important}
.woocommerce-cart table.shop_table.cart thead th.product-subtotal{padding-left:26px !important}

@media(max-width:767px){
  .woocommerce-cart td.product-quantity{padding-right:0 !important}
  .woocommerce-cart td.product-subtotal{padding-left:0 !important}
}

/* ============ CART TRASH SVG ============ */
.woocommerce-cart td.product-remove a.remove,
.woocommerce-cart td.product-remove a.mf-remove-btn{
  display:inline-flex!important;align-items:center;justify-content:center;
  width:38px!important;height:38px!important;border-radius:10px!important;
  background:transparent!important;color:var(--mf-text2)!important;
  font-size:0!important;line-height:0!important;text-decoration:none!important;
  transition:color .2s ease,background .2s ease;
}
.woocommerce-cart td.product-remove a.remove:hover,
.woocommerce-cart td.product-remove a.mf-remove-btn:hover{
  color:var(--mf-danger)!important;background:rgba(255,92,92,.1)!important;
}
.mf-trash-svg{width:19px!important;height:19px!important;display:block;color:inherit}
.woocommerce-cart td.product-remove a.remove::before,
.woocommerce-cart td.product-remove a.remove::after{content:none!important;display:none!important}

/* ============ ORDER REVIEW BOX FIX ============ */
/* Remove the stray half-box / light border around the 'Your order' heading */
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout h3#order_review_heading{
  border:0!important;background:transparent!important;box-shadow:none!important;
  padding:0 0 16px 0!important;margin:0!important;
}
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order{
  border:0!important;box-shadow:none!important;
}
/* Make the order review a single clean card instead of partial borders */
.woocommerce-checkout #order_review{
  background:var(--mf-surface)!important;
  border:1px solid var(--mf-border)!important;
  border-radius:20px!important;
  padding:26px!important;
}
.woocommerce-checkout #order_review_heading{
  color:var(--mf-text)!important;font-family:var(--mf-font-head)!important;
  font-weight:800!important;font-size:1.35rem!important;
}
/* Kill any leftover pseudo-element borders */
.woocommerce-checkout #order_review::before,
.woocommerce-checkout #order_review::after,
.woocommerce-checkout #order_review_heading::before,
.woocommerce-checkout #order_review_heading::after{content:none!important;display:none!important;border:0!important}
/* Astra sometimes wraps the review in a bordered box */
.woocommerce-checkout .ast-order-review-wrap,
.woocommerce-checkout .ast-checkout-review-order-wrap{border:0!important;background:transparent!important;padding:0!important}

/* ============ ORDER RECEIVED / THANK YOU PAGE ============ */
/* Constrain to a centered column instead of full-bleed */
.woocommerce-order-received .woocommerce,
.woocommerce-order-received .entry-content > .woocommerce,
.woocommerce-checkout .woocommerce-order{
  max-width:1000px!important;margin:0 auto!important;padding:10px 20px 70px!important;box-sizing:border-box;
}

/* Kill the white band behind headings */
.woocommerce-order h2,
.woocommerce-order h3,
.woocommerce-order-details h2,
.woocommerce-customer-details h2,
.woocommerce-column__title,
h2.woocommerce-order-details__title,
h2.woocommerce-column__title{
  background:transparent!important;background-color:transparent!important;
  color:var(--mf-text)!important;font-family:var(--mf-font-head)!important;font-weight:800!important;
  font-size:1.35rem!important;padding:0!important;margin:32px 0 16px!important;border:0!important;
}

/* Thank-you message */
.woocommerce-order .woocommerce-notice--success,
.woocommerce-thankyou-order-received{
  background:transparent!important;border:0!important;color:var(--mf-text)!important;
  font-size:1.05rem;padding:0!important;margin:0 0 24px!important;
}
.woocommerce-order .woocommerce-notice--success::before{content:none!important;display:none!important}

/* Order summary strip (order number / date / email / total / payment) */
.woocommerce-order .woocommerce-order-overview{
  background:var(--mf-surface)!important;border:1px solid var(--mf-border)!important;
  border-radius:16px!important;padding:22px 26px!important;margin:0 0 28px!important;
  display:flex;flex-wrap:wrap;gap:24px;list-style:none;
}
.woocommerce-order .woocommerce-order-overview li{
  border:0!important;color:var(--mf-text2)!important;margin:0!important;padding:0!important;
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;font-family:var(--mf-font-head);
}
.woocommerce-order .woocommerce-order-overview li strong{
  display:block;color:var(--mf-text)!important;font-size:1.05rem;letter-spacing:0;text-transform:none;margin-top:6px;
}

/* Order details table */
.woocommerce-order table.shop_table,
.woocommerce-order table.woocommerce-table--order-details{
  background:var(--mf-surface)!important;border:1px solid var(--mf-border)!important;
  border-radius:16px!important;overflow:hidden;width:100%;border-collapse:collapse;
}
.woocommerce-order table.shop_table th,
.woocommerce-order table.shop_table td{
  background:transparent!important;border:0!important;
  border-bottom:1px solid var(--mf-border)!important;padding:16px 22px!important;color:var(--mf-text)!important;
}
.woocommerce-order table.shop_table thead th{
  color:var(--mf-text2)!important;font-family:var(--mf-font-head)!important;
  font-size:.75rem!important;letter-spacing:.1em;text-transform:uppercase;
}
.woocommerce-order table.shop_table tfoot th{color:var(--mf-text2)!important;font-weight:400!important}
.woocommerce-order table.shop_table tfoot tr:last-child th,
.woocommerce-order table.shop_table tfoot tr:last-child td{border-bottom:0!important}
.woocommerce-order table.shop_table tfoot tr:last-child td,
.woocommerce-order table.shop_table tfoot tr:last-child td .amount{color:var(--mf-accent)!important;font-weight:800;font-size:1.15rem}
.woocommerce-order table.shop_table a{color:var(--mf-text)!important}
.woocommerce-order table.shop_table a:hover{color:var(--mf-accent)!important}

/* Customer / billing address block */
.woocommerce-order .woocommerce-customer-details address{
  background:var(--mf-surface)!important;border:1px solid var(--mf-border)!important;
  border-radius:16px!important;padding:22px 26px!important;color:var(--mf-text2)!important;font-style:normal;
}
.woocommerce-order .woocommerce-customer-details .woocommerce-columns{display:flex;gap:24px;flex-wrap:wrap}

@media(max-width:600px){
  .woocommerce-order .woocommerce-order-overview{flex-direction:column;gap:16px}
  .woocommerce-order table.shop_table th,.woocommerce-order table.shop_table td{padding:12px 16px!important}
}

/* ============ ORDER RECEIVED ALIGN FIX ============ */
/* 1) Page title aligned to the same centered column as the content */
.woocommerce-order-received .entry-header,
.woocommerce-order-received .page-title,
.woocommerce-order-received .entry-title,
.woocommerce-order-received .ast-archive-title,
.woocommerce-checkout .entry-header,
.woocommerce-checkout .entry-title{
  max-width:1000px!important;margin:0 auto!important;padding:0 20px!important;
  box-sizing:border-box!important;width:100%!important;text-align:left!important;
}
.woocommerce-order-received .entry-title,
.woocommerce-checkout .entry-title{
  font-family:var(--mf-font-head)!important;font-weight:800!important;
  color:var(--mf-text)!important;font-size:2rem!important;margin-bottom:20px!important;
}

/* 2) Billing + Shipping addresses side by side */
.woocommerce-order .woocommerce-customer-details .woocommerce-columns--addresses,
.woocommerce-order .woocommerce-columns--2,
.woocommerce-order .col2-set{
  display:grid!important;grid-template-columns:1fr 1fr!important;gap:24px!important;
  width:100%!important;margin:0!important;
}
.woocommerce-order .woocommerce-columns--addresses .col-1,
.woocommerce-order .woocommerce-columns--addresses .col-2,
.woocommerce-order .col2-set .col-1,
.woocommerce-order .col2-set .col-2{
  width:100%!important;float:none!important;margin:0!important;padding:0!important;max-width:none!important;
}
.woocommerce-order .woocommerce-columns--addresses .woocommerce-column__title{margin-top:0!important}
.woocommerce-order .woocommerce-customer-details address{margin:0!important;height:100%;box-sizing:border-box}
/* brighten the address text a little */
.woocommerce-order .woocommerce-customer-details address{color:var(--mf-text)!important;line-height:1.8}
@media(max-width:767px){
  .woocommerce-order .woocommerce-customer-details .woocommerce-columns--addresses,
  .woocommerce-order .col2-set{grid-template-columns:1fr!important}
}

/* ============ ADDRESS ROW FLEX FIX ============ */
/* Force billing + shipping into one row (floats were staggering them) */
.woocommerce-order .woocommerce-customer-details .woocommerce-columns,
.woocommerce-order .woocommerce-customer-details .woocommerce-columns--addresses,
.woocommerce-order .woocommerce-customer-details .col2-set,
.woocommerce-order section.woocommerce-customer-details > .woocommerce-columns{
  display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
  gap:24px!important;align-items:stretch!important;width:100%!important;
  grid-template-columns:none!important;
}
/* Kill the clearfix pseudo-elements that force wrapping */
.woocommerce-order .woocommerce-customer-details .woocommerce-columns::before,
.woocommerce-order .woocommerce-customer-details .woocommerce-columns::after,
.woocommerce-order .woocommerce-customer-details .col2-set::before,
.woocommerce-order .woocommerce-customer-details .col2-set::after{content:none!important;display:none!important}
/* Both columns equal width, no floats */
.woocommerce-order .woocommerce-customer-details .woocommerce-column,
.woocommerce-order .woocommerce-customer-details .col-1,
.woocommerce-order .woocommerce-customer-details .col-2,
.woocommerce-order .woocommerce-customer-details .woocommerce-column--billing-address,
.woocommerce-order .woocommerce-customer-details .woocommerce-column--shipping-address{
  flex:1 1 50%!important;width:50%!important;max-width:50%!important;
  float:none!important;clear:none!important;margin:0!important;padding:0!important;
  display:flex!important;flex-direction:column!important;
}
/* Keep billing first, shipping second */
.woocommerce-order .woocommerce-customer-details .woocommerce-column--billing-address,
.woocommerce-order .woocommerce-customer-details .col-1{order:1!important}
.woocommerce-order .woocommerce-customer-details .woocommerce-column--shipping-address,
.woocommerce-order .woocommerce-customer-details .col-2{order:2!important}
/* Headings aligned at the same height */
.woocommerce-order .woocommerce-customer-details .woocommerce-column__title{
  margin:0 0 14px!important;text-align:left!important;
}
.woocommerce-order .woocommerce-customer-details address{flex:1 1 auto;margin:0!important}
@media(max-width:767px){
  .woocommerce-order .woocommerce-customer-details .woocommerce-columns,
  .woocommerce-order .woocommerce-customer-details .col2-set{flex-wrap:wrap!important}
  .woocommerce-order .woocommerce-customer-details .woocommerce-column,
  .woocommerce-order .woocommerce-customer-details .col-1,
  .woocommerce-order .woocommerce-customer-details .col-2{flex:1 1 100%!important;width:100%!important;max-width:100%!important}
}

/* ============ HEADER TO CONTENT SPACING (max 30px) ============ */
/* Shop + cart page-head bands */
.mf-shop-wrap .mf-shop-head .mf-page-head-inner{padding-top:30px!important;padding-bottom:24px!important}
.mf-shop-head .mf-page-head-inner{padding-top:30px!important}
.mf-cart-head .mf-page-head-inner{padding-top:30px!important;padding-bottom:26px!important}

/* Remove Astra's content-area top padding/margin that adds extra gap under the header */
.ast-container > .ast-row > #primary,
#primary.content-area,
.site-content .ast-container{padding-top:0!important;margin-top:0!important}
.site-content > .ast-container{padding-top:0!important}
.ast-separate-container .site-content > .ast-container,
.ast-separate-container #primary{padding-top:0!important;margin-top:0!important}

/* Elementor first section on every page: cap the top gap */
.elementor-page .elementor > .e-con:first-child,
.elementor > .elementor-section:first-child{margin-top:0!important}

/* WooCommerce archive/single top spacing */
.woocommerce-shop .site-content,
.single-product .site-content,
.woocommerce-cart .site-content,
.woocommerce-checkout .site-content,
.woocommerce-account .site-content{padding-top:0!important}
.single-product div.product{margin-top:0!important}
.woocommerce-account .woocommerce{padding-top:30px!important}
.woocommerce-order-received .woocommerce{padding-top:30px!important}

/* Entry headers (page titles) shouldn't add a big gap either */
.woocommerce-account .entry-header,
.woocommerce-order-received .entry-header,
.woocommerce-checkout .entry-header{padding-top:30px!important;margin-top:0!important}

/* ============ ANCHOR SCROLL OFFSET (sticky header) ============ */
html{scroll-behavior:smooth}
#categories,#deal{scroll-margin-top:110px}
@media(max-width:767px){#categories,#deal{scroll-margin-top:90px}}

/* ============ FLOATING STICKY HEADER ============ */
/* Ensure no ancestor creates a scroll container that would break sticky */
html,body{overflow-x:clip}
.site,.site-content,#page,#content,.ast-container,
.xpro-theme-builder-header,.xpro-header-wrapper{overflow:visible!important}

/* The header itself floats at the top on every page */
#mf-site-header,
.xpro-theme-builder-header #mf-site-header,
.e-con#mf-site-header{
  position:sticky!important;top:0!important;z-index:9999!important;
  background:rgba(10,10,15,.88)!important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .25s ease,box-shadow .25s ease;
  width:100%;
}
/* Slight shadow once the page is scrolled (via body class added by JS) */
body.mf-scrolled #mf-site-header{
  background:rgba(10,10,15,.96)!important;
  box-shadow:0 6px 26px rgba(0,0,0,.45);
}
/* Make sure the wrapper XPRO renders around the header can't clip it */
.xpro-theme-builder-header{position:relative;z-index:9999}

/* ============ STICKY ON OUTER HEADER (correct element) ============ */
/* sticky must sit on the OUTER <header>, which is a child of the tall #page wrapper */
header.xpro-theme-builder-header{
  position:sticky!important;top:0!important;z-index:9999!important;
  background:rgba(10,10,15,.90)!important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .25s ease,box-shadow .25s ease;
  display:block;width:100%;
}
body.mf-scrolled header.xpro-theme-builder-header{
  background:rgba(10,10,15,.97)!important;
  box-shadow:0 6px 26px rgba(0,0,0,.45);
}
/* inner elements should NOT be sticky (that was the bug) and must be transparent */
#mf-site-header,.e-con#mf-site-header{
  position:relative!important;top:auto!important;
  background:transparent!important;backdrop-filter:none!important;
  border-bottom:0!important;box-shadow:none!important;
}
.xpro-theme-builder-header-nav,
.xpro-theme-builder-header .elementor{background:transparent!important}

/* No ancestor may clip or scroll, or sticky silently fails */
#page,.hfeed.site,#content,.site-content{overflow:visible!important}
html,body{overflow-x:clip}

/* ============ STICKY HEADER POLISH ============ */
/* Solid background so scrolling content never bleeds through */
header.xpro-theme-builder-header{
  background:#0a0a0f!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  border-bottom:1px solid rgba(255,255,255,.07)!important;
}
body.mf-scrolled header.xpro-theme-builder-header{
  background:#0a0a0f!important;
  box-shadow:0 4px 20px rgba(0,0,0,.55)!important;
}

/* Offset for the WordPress admin bar (logged-in users) so the header isn't hidden under it */
body.admin-bar header.xpro-theme-builder-header{top:32px!important}
@media screen and (max-width:782px){
  body.admin-bar header.xpro-theme-builder-header{top:46px!important}
}

/* Consistent header height + vertical centering */
header.xpro-theme-builder-header .elementor,
header.xpro-theme-builder-header .xpro-theme-builder-header-nav{background:transparent!important;margin:0!important;padding:0!important}
#mf-site-header{
  padding-top:10px!important;padding-bottom:10px!important;
  margin:0!important;min-height:0!important;
  align-items:center!important;
}
/* Remove any stray gap under the header */
header.xpro-theme-builder-header + *{margin-top:0!important}

/* ============ NAV DROPDOWN SUBMENU ============ */
/* Panel */
#mf-site-header .xpro-menu ul.sub-menu,
#mf-site-header .xpro-menu-container ul.sub-menu,
#mf-site-header ul.sub-menu,
header.xpro-theme-builder-header ul.sub-menu{
  background:#12121b!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:14px!important;
  padding:8px!important;
  min-width:250px;
  box-shadow:0 18px 44px rgba(0,0,0,.55);
  z-index:10000!important;
}
/* Items */
#mf-site-header ul.sub-menu li,
header.xpro-theme-builder-header ul.sub-menu li{
  margin:0!important;border:0!important;width:100%;
}
#mf-site-header ul.sub-menu li a,
header.xpro-theme-builder-header ul.sub-menu li a{
  display:block!important;
  padding:12px 16px!important;
  border-radius:10px!important;
  color:#9090a8!important;
  font-family:var(--mf-font-head)!important;
  font-weight:600!important;
  font-size:.94rem!important;
  letter-spacing:.02em;
  white-space:nowrap;
  transition:background .2s ease,color .2s ease;
  border:0!important;background:transparent!important;
}
#mf-site-header ul.sub-menu li a:hover,
header.xpro-theme-builder-header ul.sub-menu li a:hover{
  background:rgba(142,194,63,.1)!important;
  color:#8ec23f!important;
}
#mf-site-header ul.sub-menu li.current-menu-item > a,
header.xpro-theme-builder-header ul.sub-menu li.current-menu-item > a{color:#8ec23f!important}

/* Dropdown arrow indicator on the parent item */
#mf-site-header .menu-item-has-children > a .xpro-menu-arrow,
#mf-site-header .menu-item-has-children > a .sub-arrow{color:inherit;margin-left:6px;font-size:.75em}

/* Make sure the header can't clip the dropdown */
header.xpro-theme-builder-header,
header.xpro-theme-builder-header .elementor,
#mf-site-header{overflow:visible!important}

/* Mobile: submenu sits inline inside the slide-in panel */
@media(max-width:1024px){
  #mf-site-header ul.sub-menu,
  header.xpro-theme-builder-header ul.sub-menu{
    background:transparent!important;border:0!important;box-shadow:none!important;
    padding:0 0 0 14px!important;min-width:0;border-radius:0!important;
  }
  #mf-site-header ul.sub-menu li a{padding:10px 14px!important;font-size:.9rem!important}
}


/* ============ SCROLL-TO-TOP button (site-wide) ============ */
/* Hide Astra's built-in scroll-to-top (has a blue default that clashes with our green button) */
#ast-scroll-top,
.ast-scroll-top-icon,
.ast-scroll-to-top-right,
.ast-scroll-to-top-left{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}

.mf-scroll-top{
  position:fixed;bottom:28px;right:28px;z-index:9999;
  width:54px;height:54px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--mf-surface,#16161f);
  color:var(--mf-accent,#8ec23f);
  border:2px solid var(--mf-accent,#8ec23f);
  box-shadow:0 6px 20px rgba(0,0,0,.45),0 0 0 0 var(--mf-accent-glow,rgba(142,194,63,.35)),inset 0 0 0 1px rgba(142,194,63,.08);
  cursor:pointer;padding:0;
  opacity:0;pointer-events:none;transform:translateY(12px) scale(.9);
  transition:opacity .28s ease,transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow .28s ease,background .2s ease,border-color .2s ease,color .2s ease;
  -webkit-tap-highlight-color:transparent;overflow:hidden;
}
.mf-scroll-top.is-visible{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.mf-scroll-top:hover{
  background:var(--mf-accent,#8ec23f);
  color:#0a0a0f;
  border-color:var(--mf-accent-light,#a4d956);
  box-shadow:0 10px 32px rgba(0,0,0,.55),0 0 28px var(--mf-accent-glow,rgba(142,194,63,.55));
  transform:translateY(-4px) scale(1.03);
}
.mf-scroll-top:active{transform:translateY(-1px) scale(.98)}
.mf-scroll-top:focus-visible{outline:2px solid var(--mf-accent,#8ec23f);outline-offset:3px}

.mf-scroll-top-icon{
  width:22px;height:22px;display:block;pointer-events:none;
  transition:transform .25s ease;
}
.mf-scroll-top:hover .mf-scroll-top-icon{transform:translateY(-2px)}

/* Screen-reader-only label */
.mf-scroll-top .screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .mf-scroll-top{transition:opacity .2s ease}
  .mf-scroll-top,.mf-scroll-top.is-visible,.mf-scroll-top:hover,.mf-scroll-top:active{transform:none}
  .mf-scroll-top:hover .mf-scroll-top-icon{transform:none}
}
/* Sit above WhatsApp float on mobile */
/* Mobile position is set once in the consolidated block near the end of this
 * file (search "FLOATING BUTTONS - consolidated position"). */
@media(max-width:767px){
  .mf-scroll-top-icon{width:20px;height:20px}
}


/* ============ MOBILE COMPATIBILITY LAYER ============ */
/* Applied 2026-08-06. Scoped to mobile breakpoints only — desktop/tablet unaffected. */

/* --- A2 FIX: Horizontal overflow guard — TABLET + MOBILE ONLY --------------
 * Previously these four rules had NO media query and therefore applied to
 * desktop, violating the "desktop is source of truth" rule. Now scoped to
 * <=1024px so desktop (>=1025px) renders exactly as originally designed.
 *
 * Selector notes:
 *   html,body            — last-resort guard against sideways page scroll
 *   img,video,iframe...  — media never exceeds its container on small screens
 *   table                — tables are the most common overflow source
 *   p,li,td,th,...       — long unbroken strings (URLs, SKUs, emails) wrap
 *                          instead of forcing the layout wide */
@media(max-width:1024px){
  html,body{max-width:100%;overflow-x:hidden}
  img,video,iframe,embed,object,canvas,svg{max-width:100%;height:auto}
  table{max-width:100%}
  p,li,td,th,dd,dt,h1,h2,h3,h4,h5,h6,a{overflow-wrap:break-word;word-wrap:break-word}
}

/* --- M1: iOS Safari input zoom fix -----------------------------------------
 * iOS force-zooms the viewport whenever a focused input has font-size < 16px.
 * Raising these to exactly 16px on mobile stops the zoom entirely.
 * Desktop keeps its original smaller sizing (rules below are mobile-only). */
@media(max-width:767px){
  input[type=text],input[type=email],input[type=tel],input[type=url],
  input[type=number],input[type=password],input[type=search],input[type=date],
  textarea,select,
  .wpforms-container input,.wpforms-container textarea,.wpforms-container select,
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row textarea,
  .woocommerce form .form-row select,
  input.mf-search-input,select.mf-sort-select,
  .mf-newsletter input[type=email]{
    font-size:16px!important;
  }
  /* Keep the visual height consistent now that text is slightly larger */
  input.mf-search-input,select.mf-sort-select{height:48px!important}
}

/* --- M3: iPhone notch / home-indicator safe areas --------------------------
 * env() resolves to 0px on devices without a notch, so this is a no-op there. */
/* --- A2 FIX: scroll-top safe-area — TABLET + MOBILE ONLY -------------------
 * Desktop keeps the button's original 28px offsets untouched. */
@supports(padding:env(safe-area-inset-bottom)){
  @media(max-width:767px){
    /* Floating-button safe-area offsets live in the consolidated block below. */
    /* Sticky header clears the notch in landscape */
    header.xpro-theme-builder-header,#mf-site-header{
      padding-left:calc(16px + env(safe-area-inset-left))!important;
      padding-right:calc(16px + env(safe-area-inset-right))!important;
    }
    /* Footer clears the home indicator */
    #mf-site-footer,footer.xpro-theme-builder-footer{
      padding-bottom:calc(24px + env(safe-area-inset-bottom))!important;
    }
  }
}

/* --- M4: Mobile menu drawer scroll containment -----------------------------
 * Targets the REAL Xpro horizontal-menu classes used by this site.
 * Hamburger activates at tablet and below (responsive_show:tablet), so these
 * rules run at 1024px and under. */
@media(max-width:1024px){
  /* The slide-in drawer panel */
  .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar{
    max-height:100dvh;
    max-height:100vh;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  /* The scrollable UL of menu items */
  .xpro-elementor-horizontal-navbar-nav{
    max-height:calc(100dvh - 90px);
    max-height:calc(100vh - 90px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding-bottom:calc(24px + env(safe-area-inset-bottom))!important;
  }

  /* --- Tap targets: every menu link hits 48px --- */
  .xpro-elementor-horizontal-navbar-nav > li > a.xpro-elementor-nav-link,
  .xpro-elementor-horizontal-navbar-nav > li > a.menu-link,
  .xpro-elementor-horizontal-navbar-nav li a{
    min-height:48px!important;
    display:flex!important;align-items:center!important;
    padding:10px 18px!important;
    font-size:1rem!important;
  }
  /* Hamburger + close buttons — match the 38px account/cart buttons so all
   * three read as one consistent control group.
   * The icon is forced to the light text colour: the theme default rendered
   * it dark grey on the dark header, making it hard to see next to the
   * white account and cart icons. */
  .xpro-elementor-horizontal-menu-toggler,
  .xpro-elementor-horizontal-menu-close{
    min-width:38px!important;min-height:38px!important;
    width:38px!important;height:38px!important;
    display:inline-flex!important;align-items:center;justify-content:center;
    padding:0!important;
    color:var(--mf-text,#f0f0f5)!important;
  }
  /* SVG icons: stroke and fill both follow the light colour */
  .xpro-elementor-horizontal-menu-toggler svg,
  .xpro-elementor-horizontal-menu-close svg{
    width:20px;height:20px;
    color:var(--mf-text,#f0f0f5)!important;
    fill:var(--mf-text,#f0f0f5)!important;
  }
  .xpro-elementor-horizontal-menu-toggler svg path,
  .xpro-elementor-horizontal-menu-toggler svg rect,
  .xpro-elementor-horizontal-menu-toggler svg line,
  .xpro-elementor-horizontal-menu-close svg path,
  .xpro-elementor-horizontal-menu-close svg line{
    fill:var(--mf-text,#f0f0f5)!important;
    stroke:var(--mf-text,#f0f0f5)!important;
  }
  /* Icon-font variants (Xpro may render <i> instead of inline SVG) */
  .xpro-elementor-horizontal-menu-toggler i,
  .xpro-elementor-horizontal-menu-close i,
  .xpro-elementor-horizontal-menu-toggler i::before,
  .xpro-elementor-horizontal-menu-close i::before{
    color:var(--mf-text,#f0f0f5)!important;
    font-size:20px!important;
  }
  /* CSS-drawn hamburger bars (some Xpro builds use spans, not an icon) */
  .xpro-elementor-horizontal-menu-toggler span,
  .xpro-elementor-horizontal-menu-toggler .xpro-toggler-bar,
  .xpro-elementor-horizontal-menu-toggler .hamburger-line{
    background-color:var(--mf-text,#f0f0f5)!important;
  }
  /* Give the toggler the same pill background as the account/cart buttons so
   * all three controls read as one set */
  .xpro-elementor-horizontal-menu-toggler{
    background:#1c1c26!important;
    border:1px solid rgba(255,255,255,.06)!important;
    border-radius:10px!important;
  }
  .xpro-elementor-horizontal-menu-toggler:hover{
    background:#262634!important;
    border-color:rgba(142,194,63,.35)!important;
  }
  /* Close (X) button inside the open drawer.
   * The theme renders it as a light-filled square with a light glyph, so the
   * X was almost invisible. Force a dark pill with a white glyph to match
   * the other header controls. */
  .xpro-elementor-horizontal-menu-close{
    background:#1c1c26!important;
    border:1px solid rgba(255,255,255,.12)!important;
    border-radius:10px!important;
    color:#ffffff!important;
    opacity:1!important;
  }
  .xpro-elementor-horizontal-menu-close:hover{
    background:#262634!important;
    border-color:rgba(142,194,63,.45)!important;
    color:var(--mf-accent,#8ec23f)!important;
  }
  /* Cover every way the X can be rendered: inline SVG, icon font, or text */
  .xpro-elementor-horizontal-menu-close svg,
  .xpro-elementor-horizontal-menu-close i,
  .xpro-elementor-horizontal-menu-close i::before,
  .xpro-elementor-horizontal-menu-close span{
    color:#ffffff!important;
    fill:#ffffff!important;
    opacity:1!important;
  }
  .xpro-elementor-horizontal-menu-close svg path,
  .xpro-elementor-horizontal-menu-close svg line,
  .xpro-elementor-horizontal-menu-close svg rect{
    fill:#ffffff!important;
    stroke:#ffffff!important;
  }
  .xpro-elementor-horizontal-menu-close:hover svg,
  .xpro-elementor-horizontal-menu-close:hover i,
  .xpro-elementor-horizontal-menu-close:hover i::before{
    color:var(--mf-accent,#8ec23f)!important;
    fill:var(--mf-accent,#8ec23f)!important;
  }
  .xpro-elementor-horizontal-menu-close:hover svg path,
  .xpro-elementor-horizontal-menu-close:hover svg line{
    fill:var(--mf-accent,#8ec23f)!important;
    stroke:var(--mf-accent,#8ec23f)!important;
  }

  /* --- Products dropdown expands INLINE, not as a floating panel --- */
  .xpro-elementor-horizontal-navbar-nav .xpro-elementor-dropdown-menu{
    position:static!important;
    float:none!important;
    width:100%!important;min-width:0!important;
    transform:none!important;
    background:transparent!important;
    border:0!important;box-shadow:none!important;
    border-radius:0!important;
    padding:0 0 0 16px!important;margin:0!important;
    border-left:2px solid var(--mf-border)!important;
  }
  .xpro-elementor-horizontal-navbar-nav .xpro-elementor-dropdown-menu li a,
  .xpro-elementor-horizontal-navbar-nav .xpro-elementor-dropdown-item{
    min-height:44px!important;
    display:flex!important;align-items:center!important;
    padding:8px 16px!important;
    font-size:.94rem!important;
    color:var(--mf-text2)!important;
  }
  .xpro-elementor-horizontal-navbar-nav .xpro-elementor-dropdown-item:hover,
  .xpro-elementor-horizontal-navbar-nav .xpro-elementor-dropdown-item:focus{
    color:var(--mf-accent)!important;
  }
  /* Dropdown arrow gets a real tap target */
  .xpro-elementor-horizontal-navbar-nav .xpro-dropdown-menu-toggle,
  .xpro-elementor-horizontal-navbar-nav .dropdown-menu-toggle{
    min-width:44px;min-height:44px;
    display:inline-flex!important;align-items:center;justify-content:center;
  }

  /* Overlay behind the drawer covers the full screen */
  .xpro-elementor-horizontal-menu-overlay{
    position:fixed!important;inset:0!important;
    width:100%!important;height:100%!important;
  }
}

/* --- Header: icons row (account + cart) sits inline, not stair-stepped ----- */
@media(max-width:1024px){
  #mf-site-header > .e-con-inner{
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
  }
  /* Each direct child sits inline. Specific overrides below assign the logo
   * column flex:1 (it absorbs leftover space) and the two button groups
   * flex:0 (fixed width). */
  #mf-site-header > .e-con-inner > .e-con.e-child{
    max-width:none!important;
    align-items:center!important;
    margin:0!important;
  }

  /* Icons container (account + cart).
   * Template sets width:25% and flex_wrap_tablet:wrap, which lets the two
   * buttons wrap onto separate lines and mis-sizes the column. Force a
   * content-sized, non-wrapping row. */
  #mf-site-header > .e-con-inner > .e-con.elementor-element-2fe449f,
  #mf-site-header .elementor-element-2fe449f{
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:8px!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    flex:0 0 auto!important;
    flex-basis:auto!important;
    margin:0!important;padding:0!important;
    position:static!important;
    order:3!important;   /* account + cart sit far RIGHT */
  }
  #mf-site-header .elementor-element-2fe449f > .elementor-widget,
  #mf-site-header #mf-login-btn,
  #mf-site-header #mf-cart-btn{
    width:auto!important;max-width:none!important;
    flex:0 0 auto!important;
    margin:0!important;
  }
  /* Menu container (holds the hamburger).
   * The Elementor template hardcodes width_tablet: 418.25px on this container
   * with flex_justify_content:center. On a <=418px viewport that container is
   * wider than the screen, so the centred hamburger lands on top of the logo.
   * Reset the width and justification so it sits in normal flow.
   * Specificity is raised with #mf-site-header + the .e-con-inner chain so we
   * beat Elementor's generated .elementor-element-1c70cb2 width rule. */
  #mf-site-header > .e-con-inner > .e-con.elementor-element-1c70cb2,
  #mf-site-header .elementor-element-1c70cb2{
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    flex:0 0 auto!important;
    flex-basis:auto!important;
    justify-content:flex-start!important;
    align-items:center!important;
    margin:0!important;padding:0!important;
    position:static!important;
    order:1!important;   /* hamburger sits far LEFT */
  }
  #mf-site-header .elementor-element-1c70cb2 > .elementor-widget{
    width:auto!important;max-width:none!important;
    flex:0 0 auto!important;margin:0!important;
    position:static!important;
  }
  /* The nav-menu widget inside it must not claim a percentage width either */
  #mf-site-header .elementor-element-1c70cb2 .elementor-widget-xpro-nav-menu,
  #mf-site-header .elementor-element-1c70cb2 .xpro-elementor-horizontal-navbar-wrapper{
    width:auto!important;max-width:none!important;
    flex:0 0 auto!important;
    justify-content:flex-end!important;
  }
  /* Icon buttons: compact but comfortably tappable, sized so the whole row
   * always fits. Buttons are fixed; the logo scales to fill what's left. */
  #mf-site-header #mf-login-btn .xpro-elementor-button,
  #mf-site-header #mf-cart-btn .xpro-elementor-button{
    min-width:38px;min-height:38px;
    width:38px;height:38px;
    display:inline-flex!important;align-items:center;justify-content:center;
    padding:0!important;
  }
  #mf-site-header #mf-login-btn .xpro-elementor-button svg,
  #mf-site-header #mf-cart-btn .xpro-elementor-button svg,
  #mf-site-header #mf-login-btn .xpro-elementor-button i,
  #mf-site-header #mf-cart-btn .xpro-elementor-button i{
    width:16px;height:16px;font-size:16px;
  }
  /* Logo column: flexible, but NEVER clipped. The <img> scales down inside
   * it via max-width:100%, so the mark stays fully visible at any width. */
  #mf-site-header > .e-con-inner > .e-con.e-child:first-child{
    flex:1 1 auto!important;
    min-width:0!important;
    overflow:visible!important;
  }
  #mf-site-header .xpro-site-logo,
  #mf-site-header .xpro-site-logo a{
    min-width:0!important;display:block;overflow:visible!important;
  }
  #mf-site-header .xpro-site-logo img{
    max-width:100%!important;
    width:auto!important;height:auto!important;
    object-fit:contain;display:block;
  }
  /* Logo column sits BETWEEN the hamburger and the account/cart pair.
   * flex:1 lets it absorb the leftover space; the inline padding keeps clear
   * air on both sides so the wordmark never touches either button group. */
  #mf-site-header > .e-con-inner > .e-con.e-child:first-child{
    flex:1 1 auto!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    overflow:visible!important;
    margin:0!important;
    padding-left:14px!important;
    padding-right:14px!important;
    justify-content:center!important;
    order:2!important;   /* logo sits in the MIDDLE */
  }
  /* Keep the row inside the viewport without clipping children */
  #mf-site-header > .e-con-inner{
    max-width:100%!important;
    padding-left:14px!important;padding-right:14px!important;
  }
  /* Trim the header's vertical padding so it isn't 3x tall */
  #mf-site-header,#mf-site-header.e-con{
    padding-top:10px!important;padding-bottom:10px!important;
    min-height:0!important;
    max-width:100%!important;
  }
}

/* --- Feature/trust strip: Free Delivery, Returns, Warranty, Support -------
 * Was breaking words character-by-character because the text column was
 * crushed by a desktop icon:text ratio. Fix: 2-up grid on tablet/mobile,
 * 1-up on small phones, with the text column free to expand. */
@media(max-width:1024px){
  .mf-feature-strip-el{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:20px 16px!important;
    width:100%!important;max-width:100%!important;
    align-items:start!important;
  }
  .mf-feature-el{
    display:flex!important;
    flex-direction:row!important;
    align-items:flex-start!important;
    gap:12px!important;
    width:100%!important;max-width:100%!important;
    flex:1 1 auto!important;
    min-width:0!important;
    margin:0!important;
  }
  .mf-feature-el > .elementor-widget-icon{
    flex:0 0 auto!important;
    width:auto!important;max-width:none!important;
    margin:0!important;
  }
  .mf-feature-el .elementor-icon-wrapper,
  .mf-feature-el .elementor-icon{width:auto!important;line-height:1}
  .mf-feature-el .elementor-icon i,
  .mf-feature-el .elementor-icon svg{
    font-size:26px!important;width:26px!important;height:26px!important;
  }
  .mf-feature-el > .e-con.e-child{
    flex:1 1 auto!important;
    width:auto!important;max-width:none!important;
    min-width:0!important;
    margin:0!important;
    display:flex!important;flex-direction:column!important;
    align-items:flex-start!important;
    gap:2px!important;
  }
  .mf-feature-el .elementor-widget-heading,
  .mf-feature-el .elementor-widget-text-editor,
  .mf-feature-el .elementor-widget-tablet__width-initial,
  .mf-feature-el .elementor-widget-mobile__width-initial{
    width:100%!important;max-width:100%!important;
    flex:0 0 auto!important;margin:0!important;
  }
  .mf-feature-el .elementor-heading-title,
  .mf-feature-el p.elementor-heading-title{
    font-size:1rem!important;line-height:1.3!important;
    white-space:normal!important;
    overflow-wrap:normal!important;word-break:normal!important;
    hyphens:none!important;
    margin:0!important;
  }
  .mf-feature-el .elementor-widget-text-editor,
  .mf-feature-el .elementor-widget-text-editor p{
    font-size:.85rem!important;line-height:1.4!important;
    white-space:normal!important;
    overflow-wrap:normal!important;word-break:normal!important;
    margin:0!important;
  }
}
@media(max-width:560px){
  .mf-feature-strip-el{
    grid-template-columns:1fr!important;
    gap:16px!important;
  }
  .mf-feature-el{
    align-items:center!important;
    padding:4px 0!important;
  }
  .mf-feature-el .elementor-heading-title,
  .mf-feature-el p.elementor-heading-title{font-size:1.02rem!important}
}

/* --- Header logo sizing on small screens ----------------------------------
 * Width budget at 360px:
 *   28px inner padding + 3 buttons x 38px = 114 + 2 gaps x 8px = 16
 *   + 20px logo padding-right  ->  178px used, 182px free.
 * Cap at 160px so there is always visible space between the wordmark and
 * the hamburger rather than the logo filling every spare pixel.
 * The <img> also carries max-width:100%, so on narrower screens it scales
 * down proportionally instead of being clipped. */
@media(max-width:767px){
  #mf-site-header .xpro-site-logo img,
  .mf-header .xpro-site-logo img{
    max-width:160px!important;width:auto!important;height:auto!important;
  }
  #mf-site-header > .e-con-inner{gap:8px!important}
  #mf-site-header .elementor-element-2fe449f{gap:8px!important}
}
@media(max-width:400px){
  /* 320-400px: 24 edge padding + 114 buttons + 12 gaps + 20 logo pad = 170 used */
  #mf-site-header .xpro-site-logo img,
  .mf-header .xpro-site-logo img{max-width:132px!important}
  #mf-site-header > .e-con-inner{
    gap:6px!important;padding-left:12px!important;padding-right:12px!important;
  }
  #mf-site-header .elementor-element-2fe449f{gap:6px!important}
  #mf-site-header > .e-con-inner > .e-con.e-child:first-child{
    padding-left:10px!important;
    padding-right:10px!important;
  }
}

/* --- Footer: stack the 5 columns into one -------------------------------
 * Structure: #mf-site-footer > .elementor-element-35e4622 (wrapper)
 *              > 76de0e9 (brand)  > 02982bb (nav)  > f3b8025 (categories)
 *              > fa8857c (legal)  > 37ed375 (contact/social)
 * The columns are nested INSIDE 35e4622, so they must be targeted there. */
@media(max-width:767px){
  #mf-site-footer.e-con,
  #mf-site-footer > .e-con-inner{
    flex-direction:column!important;
    gap:0!important;
  }
  /* The wrapper that holds all 5 columns */
  #mf-site-footer .elementor-element-35e4622{
    display:flex!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    gap:28px!important;
    width:100%!important;max-width:100%!important;
  }
  /* Every column: full width, own row */
  #mf-site-footer .elementor-element-35e4622 > .e-con.e-child,
  #mf-site-footer .elementor-element-76de0e9,
  #mf-site-footer .elementor-element-02982bb,
  #mf-site-footer .elementor-element-f3b8025,
  #mf-site-footer .elementor-element-fa8857c,
  #mf-site-footer .elementor-element-37ed375{
    width:100%!important;max-width:100%!important;
    flex:0 0 auto!important;
    margin:0!important;
    align-items:flex-start!important;
  }
  /* Override Elementor's width-initial classes inside the footer */
  #mf-site-footer .elementor-widget__width-initial,
  #mf-site-footer .elementor-widget-tablet__width-initial,
  #mf-site-footer .elementor-widget-mobile__width-initial{
    width:100%!important;max-width:100%!important;
  }
  /* Brand column: logo sized down, tagline full width */
  #mf-site-footer .xpro-site-logo img{
    max-width:190px!important;width:auto!important;height:auto!important;
  }
  #mf-site-footer .elementor-element-0847add p{
    max-width:100%!important;line-height:1.6!important;
    font-size:.92rem!important;margin:10px 0 0!important;
  }
  /* Kill the stray empty <p><br></p> that adds dead space */
  #mf-site-footer .elementor-widget-text-editor p:empty{display:none!important}

  /* Icon lists: 2-up so the footer isn't endlessly tall */
  #mf-site-footer .elementor-element-02982bb .elementor-icon-list-items,
  #mf-site-footer .elementor-element-f3b8025 .elementor-icon-list-items,
  #mf-site-footer .elementor-element-fa8857c .elementor-icon-list-items{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:2px 12px!important;
    padding:0!important;margin:0!important;
  }
  /* Contact/social list stays single column (longer labels) */
  #mf-site-footer .elementor-element-37ed375 .elementor-icon-list-items{
    display:flex!important;flex-direction:column!important;
    gap:2px!important;padding:0!important;margin:0!important;
  }
  /* List items: comfortable tap targets, no mid-word breaks */
  #mf-site-footer .elementor-icon-list-item{
    min-height:40px!important;
    display:flex!important;align-items:center!important;
    margin:0!important;
  }
  #mf-site-footer .elementor-icon-list-item > a{
    min-height:40px!important;
    display:flex!important;align-items:center!important;
    width:100%;
  }
  #mf-site-footer .elementor-icon-list-text{
    font-size:.9rem!important;line-height:1.35!important;
    overflow-wrap:normal!important;word-break:normal!important;
    hyphens:none!important;
  }
  /* Icons stay small and fixed — never stretch */
  #mf-site-footer .elementor-icon-list-icon{
    flex:0 0 auto!important;
    width:18px!important;margin-right:8px!important;
  }
  #mf-site-footer .elementor-icon-list-icon i,
  #mf-site-footer .elementor-icon-list-icon svg{
    width:14px!important;height:14px!important;font-size:14px!important;
  }
  /* Section headings inside footer columns */
  #mf-site-footer .elementor-widget-heading .elementor-heading-title{
    font-size:1rem!important;margin:0 0 10px!important;
  }
}
/* Very small phones: single-column lists for full label width */
@media(max-width:480px){
  #mf-site-footer .elementor-element-02982bb .elementor-icon-list-items,
  #mf-site-footer .elementor-element-f3b8025 .elementor-icon-list-items,
  #mf-site-footer .elementor-element-fa8857c .elementor-icon-list-items{
    grid-template-columns:1fr!important;
  }
  #mf-site-footer .elementor-element-35e4622{gap:24px!important}
  #mf-site-footer .xpro-site-logo img{max-width:160px!important}
}
@media(max-width:480px){
  #mf-site-footer.e-con,
  #mf-site-footer > .e-con-inner{gap:24px!important;padding-left:16px!important;padding-right:16px!important}
}

/* ============ FOOTER BOTTOM BAR ==========================================
 * The bar previously used ~167 &nbsp; characters inside its spans to fake a
 * 3-column layout. Those were removed from the widget content (Elementor
 * template 118, widget 4b799f7) and replaced with real CSS layout here.
 *
 *   .mf-fbar       - the <p> wrapper
 *   .mf-fbar-item  - each item (copyright / phone / email)
 *
 * No !important needed on the new rules: nothing else styles these classes.
 * ------------------------------------------------------------------------ */

/* ---------- DESKTOP (>=1025px): three items across, evenly spaced ---------- */
#mf-site-footer .mf-fbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  margin:0;
  width:100%;
}
#mf-site-footer .mf-fbar-item{
  color:#999999;
  font-size:.86rem;
  line-height:1.6;
  white-space:nowrap;
}
#mf-site-footer .mf-fbar-item a{
  color:#999999;
  text-decoration:none;
  white-space:nowrap;
}
#mf-site-footer .mf-fbar-item a:hover{
  color:var(--mf-accent,#8ec23f);
}

/* ---------- TABLET (<=1024px): allow wrapping ---------- */
@media(max-width:1024px){
  #mf-site-footer .mf-fbar{
    flex-wrap:wrap;
    gap:8px 20px;
    justify-content:flex-start;
  }
}

/* ---------- MOBILE (<=767px): one item per line, flush left ---------- */
@media(max-width:767px){
  #mf-site-footer .mf-fbar{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    text-align:left;
  }
  #mf-site-footer .mf-fbar-item{
    display:block;
    width:100%;
    text-align:left;
    text-indent:0;
    font-size:.88rem;
    white-space:normal;
  }
  #mf-site-footer .mf-fbar-item a{white-space:nowrap;}

  /* Bottom-bar container spacing (carried over from the previous block) */
  #mf-site-footer .elementor-element-1ad6588{
    width:100%;max-width:100%;
    flex:0 0 auto;
    padding-top:20px;
    margin-top:20px;
    border-top:1px solid var(--mf-border);
  }
  #mf-site-footer .elementor-element-4b799f7,
  #mf-site-footer .elementor-element-4b799f7 .elementor-widget-container{
    width:100%;max-width:100%;
    margin:0;padding:0;
  }

  /* Footer outer padding */
  #mf-site-footer,#mf-site-footer.e-con{
    padding-top:36px!important;
    padding-bottom:28px!important;
    padding-left:20px!important;
    padding-right:20px!important;
  }
}

/* --- A2 FIX: WhatsApp float — TABLET ONLY ---------------------------------
 * Tablet keeps the plugin anchored bottom-right. The MOBILE position for both
 * floating buttons is defined once in the consolidated block further down
 * (search "FLOATING BUTTONS - consolidated position").
 * Desktop (>=1025px) keeps the plugin's own placement. */
@media(min-width:768px) and (max-width:1024px){
  .ht-ctc.ht-ctc-chat,
  .ht-ctc-chat,
  #ht-ctc-chat{
    position:fixed;
    bottom:20px;
    right:20px;
    left:auto;
    top:auto;
    z-index:9998;
  }
}
/* ============ FLOATING BUTTONS - consolidated position ====================
 * Scroll-to-top and WhatsApp sit SIDE BY SIDE in the bottom-right.
 *
 *   [ scroll-top 48px ] 12px gap [ WhatsApp 54px ]   16px from right edge
 *
 * Previously five conflicting rules had accumulated here, some stacking the
 * arrow ABOVE WhatsApp and others using different right offsets - which is
 * why the two floated apart at different heights. This is now the single
 * place their mobile position is defined.
 *
 * Desktop (>=1025px) is untouched: the plugin keeps its own placement and
 * .mf-scroll-top keeps the 28px offsets from its base rule. */
@media(max-width:767px){
  /* Scroll-top: right-most */
  .mf-scroll-top{
    position:fixed!important;
    bottom:19px!important;
    right:16px!important;
    left:auto!important;top:auto!important;
    width:48px!important;height:48px!important;
    z-index:9998!important;
    margin:0!important;
  }

  /* WhatsApp: immediately to the LEFT of the arrow, same baseline.
   * right = 16 (edge) + 48 (arrow) + 12 (gap) = 76px
   * bottom sits 3px lower so the 54px icon centres against the 48px circle. */
  .ht-ctc.ht-ctc-chat,
  .ht-ctc-chat,
  #ht-ctc-chat{
    position:fixed!important;
    bottom:16px!important;
    right:76px!important;
    left:auto!important;
    top:auto!important;
    z-index:9998!important;
    margin:0!important;
  }
  /* Keep the plugin's icon to a predictable 54px so the maths above holds */
  .ht-ctc.ht-ctc-chat .ht-ctc-chat-box,
  #ht-ctc-chat img,
  #ht-ctc-chat svg{max-width:54px!important;max-height:54px!important}
}
@supports(padding:env(safe-area-inset-bottom)){
  @media(max-width:767px){
    .mf-scroll-top{
      bottom:calc(19px + env(safe-area-inset-bottom))!important;
      right:calc(16px + env(safe-area-inset-right))!important;
    }
    .ht-ctc.ht-ctc-chat,
    .ht-ctc-chat,
    #ht-ctc-chat{
      bottom:calc(16px + env(safe-area-inset-bottom))!important;
      right:calc(76px + env(safe-area-inset-right))!important;
    }
  }
}

/* --- M5: Scroll-top icon visual balance ------------------------------------ */
@media(max-width:767px){
  .mf-scroll-top-icon{width:22px;height:22px}
}

/* --- General mobile tap-target floor --------------------------------------
 * Apple HIG / WCAG 2.5.5 recommend 44x44px minimum for interactive elements. */
@media(max-width:767px){
  .mf-share-btn{width:44px;height:44px}
  .woocommerce div.product form.cart .quantity .mf-qty-btn{min-width:44px}
}


/* ============ ORDER PAY page (post-checkout Razorpay handoff) ============ */
/* Scoped only to /checkout/order-pay/{id}/ so main checkout, cart, account are untouched. */

/* Container spacing */
body.woocommerce-order-pay .site-content,
body.woocommerce-order-pay #content{padding-bottom:64px}
body.woocommerce-order-pay .woocommerce{max-width:1100px;margin:0 auto;padding:24px 20px}

/* Page heading ("Checkout") */
body.woocommerce-order-pay h1,
body.woocommerce-order-pay .entry-title,
body.woocommerce-order-pay .page-title{
  font-family:var(--mf-font-head)!important;font-weight:800!important;
  font-size:2.4rem!important;color:var(--mf-text)!important;
  letter-spacing:-.02em;text-align:center;margin:24px 0 32px!important;
}

/* Intro paragraph ("Thank you for your order...") */
body.woocommerce-order-pay .woocommerce > p{
  color:var(--mf-text2)!important;font-size:1rem;line-height:1.6;
  text-align:left;margin:24px 0 24px!important;
}

/* Order details strip (Order # / Date / Total / Payment Method) */
body.woocommerce-order-pay ul.order_details{
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:0;list-style:none!important;
  margin:0 0 32px!important;padding:24px!important;
  background:var(--mf-surface)!important;
  border:1px solid var(--mf-border)!important;
  border-radius:var(--mf-radius-lg)!important;
  box-shadow:none!important;
}
body.woocommerce-order-pay ul.order_details::before,
body.woocommerce-order-pay ul.order_details::after{display:none!important}
body.woocommerce-order-pay ul.order_details li{
  display:flex!important;flex-direction:column;gap:8px;
  padding:0 24px!important;
  border:0!important;
  border-right:1px solid var(--mf-border)!important;
  color:var(--mf-text2)!important;
  font-size:.72rem!important;font-weight:600!important;
  text-transform:uppercase;letter-spacing:.1em;
  margin:0!important;float:none!important;
}
body.woocommerce-order-pay ul.order_details li:first-child{padding-left:0!important}
body.woocommerce-order-pay ul.order_details li:last-child{padding-right:0!important;border-right:0!important}
body.woocommerce-order-pay ul.order_details li strong{
  display:block;color:var(--mf-text)!important;
  font-family:var(--mf-font-head)!important;font-weight:700!important;
  font-size:1.15rem!important;text-transform:none;letter-spacing:0;
  margin-top:2px;
}

/* Payment methods list (only Razorpay renders here) */
body.woocommerce-order-pay ul.wc_payment_methods,
body.woocommerce-order-pay ul.payment_methods{
  list-style:none!important;margin:0 0 24px!important;padding:20px!important;
  background:var(--mf-surface)!important;
  border:1px solid var(--mf-border)!important;
  border-radius:var(--mf-radius-lg)!important;
}
body.woocommerce-order-pay ul.wc_payment_methods li{background:transparent!important;color:var(--mf-text)!important}
body.woocommerce-order-pay ul.wc_payment_methods label{color:var(--mf-text)!important}

/* Pay Now button - matches Add to Cart */
body.woocommerce-order-pay #order_review .button,
body.woocommerce-order-pay #order_review button.button,
body.woocommerce-order-pay #order_review #place_order,
body.woocommerce-order-pay form#order_review button,
body.woocommerce-order-pay .wc-form-pay .button{
  background:var(--mf-accent)!important;color:#0a0a0f!important;
  border:0!important;
  padding:14px 40px!important;border-radius:99px!important;
  font-family:var(--mf-font-head)!important;font-weight:700!important;font-size:1rem!important;
  box-shadow:0 6px 24px var(--mf-accent-glow)!important;
  cursor:pointer;transition:var(--mf-transition)!important;
  text-transform:none!important;letter-spacing:0;
  margin:0 12px 0 0!important;
  height:auto!important;line-height:1.4!important;
}
body.woocommerce-order-pay #order_review .button:hover,
body.woocommerce-order-pay #order_review button.button:hover,
body.woocommerce-order-pay .wc-form-pay .button:hover{
  background:var(--mf-accent-light)!important;transform:translateY(-2px);
  box-shadow:0 8px 28px var(--mf-accent-glow)!important;
}

/* Cancel link - matches Buy Now outlined */
body.woocommerce-order-pay a.wc-order-pay-cancel,
body.woocommerce-order-pay .wc-order-pay-cancel,
body.woocommerce-order-pay a.button.cancel{
  display:inline-flex!important;align-items:center;justify-content:center;
  background:transparent!important;color:var(--mf-text)!important;
  border:2px solid var(--mf-border)!important;
  padding:12px 40px!important;border-radius:99px!important;
  font-family:var(--mf-font-head)!important;font-weight:700!important;font-size:1rem!important;
  text-decoration:none!important;
  transition:var(--mf-transition)!important;
  height:auto!important;line-height:1.4!important;
  margin:0!important;
}
body.woocommerce-order-pay a.wc-order-pay-cancel:hover,
body.woocommerce-order-pay .wc-order-pay-cancel:hover,
body.woocommerce-order-pay a.button.cancel:hover{
  border-color:var(--mf-accent)!important;color:var(--mf-accent)!important;
  transform:translateY(-2px);background:transparent!important;
}

/* Order review table (if visible above payment methods) */
body.woocommerce-order-pay table.shop_table{
  background:var(--mf-surface)!important;
  border:1px solid var(--mf-border)!important;
  border-radius:var(--mf-radius-lg)!important;overflow:hidden;
  color:var(--mf-text)!important;margin:0 0 24px!important;width:100%;
}
body.woocommerce-order-pay table.shop_table th,
body.woocommerce-order-pay table.shop_table td{
  border-color:var(--mf-border)!important;
  padding:14px 20px!important;color:var(--mf-text)!important;
}
body.woocommerce-order-pay table.shop_table thead th{
  background:transparent!important;
  font-family:var(--mf-font-head)!important;font-weight:700!important;
}
/* ============ CART TOTALS (Order Summary) - mobile ========================
 * WooCommerce ships this table with class "shop_table_responsive". Its own
 * stylesheet applies, below 768px:
 *
 *     .shop_table_responsive tr td::before{
 *        content: attr(data-title) ": "; float:left;
 *     }
 *
 * Every <td> carries data-title (Subtotal/Shipping/Discount/Total), so a
 * FLOATED label is injected inside the value cell - on top of the value and
 * duplicating the <th> that is already there. That is the "Shipping/Free
 * shipping" collision. It is a floated pseudo-element, not a flex issue, so
 * no amount of flex sizing can correct it - the pseudo must be removed.
 *
 * Specificity: WooCommerce uses .shop_table_responsive tr td::before (0,1,2).
 * The selectors below are 0,3,3 and therefore win cleanly.
 * ------------------------------------------------------------------------ */
@media(max-width:767px){
  /* 1. Remove the injected data-title labels */
  .woocommerce-cart .cart_totals table.shop_table tr td::before,
  .woocommerce-cart .cart_totals table.shop_table_responsive tr td::before{
    content:none!important;
    display:none!important;
    float:none!important;
  }

  /* 2. Undo WooCommerce responsive block-display on this table */
  .woocommerce-cart .cart_totals table.shop_table,
  .woocommerce-cart .cart_totals table.shop_table_responsive{
    display:table!important;width:100%!important;
    table-layout:auto!important;border:0!important;margin:0!important;
  }
  .woocommerce-cart .cart_totals table.shop_table tbody{display:table-row-group!important}

  /* 3. Each row: label left, value right, single line */
  .woocommerce-cart .cart_totals table.shop_table tr{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    justify-content:space-between!important;
    align-items:baseline!important;
    gap:14px!important;
    width:100%!important;
    padding:9px 0!important;
    border:0!important;
  }
  .woocommerce-cart .cart_totals table.shop_table tr th{
    display:block!important;
    flex:0 0 auto!important;
    width:auto!important;min-width:0!important;
    white-space:nowrap!important;
    text-align:left!important;
    padding:0!important;border:0!important;
  }
  .woocommerce-cart .cart_totals table.shop_table tr td{
    display:block!important;
    flex:1 1 auto!important;
    width:auto!important;min-width:0!important;
    text-align:right!important;
    padding:0!important;border:0!important;
  }

  /* 4. Shipping method: right-aligned, wraps between words only */
  .woocommerce-cart .cart_totals ul.woocommerce-shipping-methods,
  .woocommerce-cart .cart_totals ul.woocommerce-shipping-methods li{
    display:block!important;text-align:right!important;width:100%!important;
    margin:0!important;padding:0!important;list-style:none!important;
  }
  .woocommerce-cart .cart_totals ul.woocommerce-shipping-methods label{
    display:inline!important;float:none!important;
    text-align:right!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
  }

  /* 5. Amounts never break mid-value */
  .woocommerce-cart .cart_totals table.shop_table tr td .amount,
  .woocommerce-cart .cart_totals table.shop_table tr td bdi,
  .woocommerce-cart .cart_totals table.shop_table tr td strong{
    white-space:nowrap!important;
  }
}

/* ============ CART + CHECKOUT MOBILE - authoritative block ================
 * Placed last in the file so it wins the cascade over the earlier cart rules
 * (several of which were re-declaring padding and fighting each other).
 *
 * The overflow cause: the desktop row is a 6-column grid totalling ~594px of
 * FIXED track widths (92 + 1fr + 130 + 176 + 140 + 56). On a 390px phone the
 * fixed tracks alone exceed the viewport, so the card ran off the right edge
 * and the product title, price and quantity stepper were clipped.
 *
 * Fix: a 3-column mobile grid whose tracks are all flexible or small-fixed,
 * with min-width:0 on every cell so content can shrink instead of overflowing.
 *
 * Desktop (>=1025px) is untouched - every rule is inside the media queries. */
@media(max-width:767px){
  /* Page wrapper: remove the desktop 20px side padding doubling up with the
   * card's own padding, and stop the 1200px max-width from being a min. */
  .woocommerce-cart .woocommerce,
  .woocommerce-checkout .woocommerce{
    display:block!important;
    max-width:100%!important;
    width:100%!important;
    padding:24px 14px 40px!important;
    margin:0!important;
    overflow-x:hidden!important;
  }
  .woocommerce-cart .woocommerce-cart-form,
  .woocommerce-cart .cart-collaterals{
    width:100%!important;max-width:100%!important;margin:0 0 24px!important;
  }

  /* Cart table + rows never exceed the viewport */
  .woocommerce-cart table.shop_table.cart{
    width:100%!important;max-width:100%!important;
    table-layout:fixed!important;
    display:block!important;
  }
  .woocommerce-cart table.shop_table.cart tbody{display:block!important;width:100%!important}

  /* Row: 3-column grid. Track 1 is the thumb, track 2 flexes, track 3 is the
   * remove button. minmax(0,1fr) lets the middle track shrink below content. */
  .woocommerce-cart table.shop_table.cart tbody tr.cart_item{
    display:grid!important;
    /* col3 is 'auto' so it sizes to its widest occupant: the remove icon on
     * row 1 and the line total on row 2. The quantity stepper (132px) spans
     * cols 1-2 on row 2, so it can never overflow a 64px track. */
    grid-template-columns:64px minmax(0,1fr) auto!important;
    grid-template-areas:
      "thumb name remove"
      "qty   qty  sub"!important;
    column-gap:12px!important;
    row-gap:10px!important;
    align-items:center!important;
    width:100%!important;max-width:100%!important;
    box-sizing:border-box!important;
    padding:14px!important;
    margin:0 0 12px!important;
  }
  /* Every cell must be allowed to shrink */
  .woocommerce-cart table.shop_table.cart tbody td{
    min-width:0!important;max-width:100%!important;
    padding:0!important;
    box-sizing:border-box!important;
    display:block!important;
  }
  .woocommerce-cart td.product-thumbnail{grid-area:thumb!important}
  .woocommerce-cart td.product-thumbnail img{
    width:64px!important;height:64px!important;object-fit:contain!important;
  }
  .woocommerce-cart td.product-name{grid-area:name!important;min-width:0!important}
  /* Unit price is hidden on mobile: with the quantity stepper right there,
   * the line total below already conveys the amount, and at qty 1 the two
   * values are identical - which read as a duplicated price. Desktop keeps
   * its separate Price and Subtotal columns. */
  /* Specificity note: the generic cell rule above is
   *   .woocommerce-cart table.shop_table.cart tbody td  => 0,3,3
   * so a plain .woocommerce-cart td.product-price (0,2,1) LOSES even with
   * !important. This selector is 0,4,3 and therefore wins. */
  .woocommerce-cart table.shop_table.cart tbody td.product-price{display:none!important}
  /* Title wraps between words instead of being clipped */
  .woocommerce-cart td.product-name a{
    font-size:.95rem!important;line-height:1.3!important;
    white-space:normal!important;
    overflow-wrap:break-word!important;
    word-break:normal!important;
    hyphens:none!important;
  }
  .woocommerce-cart td.product-name .mf-item-cat{font-size:.78rem!important;margin-top:2px!important}
  .woocommerce-cart td.product-quantity{
    grid-area:qty!important;justify-self:start!important;align-self:center!important;
  }
  .woocommerce-cart table.shop_table.cart tbody td.product-subtotal{
    grid-area:sub!important;
    display:block!important;
    text-align:right!important;
    font-size:1rem!important;
    white-space:nowrap!important;
    justify-self:end!important;
    align-self:center!important;
    min-width:max-content!important;
  }
  .woocommerce-cart td.product-remove{grid-area:remove!important;text-align:right!important;justify-self:end!important}

  /* Quantity stepper: compact so it fits beside the subtotal */
  .woocommerce-cart .quantity{
    display:inline-flex!important;
    max-width:132px!important;
    height:40px!important;
  }
  .woocommerce-cart .quantity input.qty{
    width:40px!important;min-width:0!important;
    font-size:16px!important;   /* stops iOS zoom-on-focus */
  }
  .woocommerce-cart .quantity .mf-qty-btn{width:36px!important;min-width:36px!important}

  /* Totals card + checkout button */
  .woocommerce-cart .cart_totals{padding:20px!important;width:100%!important;box-sizing:border-box!important}
  .woocommerce-cart .wc-proceed-to-checkout a.checkout-button{
    width:100%!important;min-height:48px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
  }

  /* ---------- CHECKOUT ---------- */
  .woocommerce-checkout .col2-set,
  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2,
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review,
  .woocommerce-checkout #order_review_heading{
    width:100%!important;max-width:100%!important;float:none!important;
    margin-left:0!important;margin-right:0!important;
    box-sizing:border-box!important;
  }
  /* Form fields full width, 16px to stop iOS zoom */
  .woocommerce-checkout .form-row{
    width:100%!important;float:none!important;
    margin:0 0 14px!important;padding:0!important;
    box-sizing:border-box!important;
  }
  .woocommerce-checkout .form-row input.input-text,
  .woocommerce-checkout .form-row textarea,
  .woocommerce-checkout .form-row select,
  .woocommerce-checkout .select2-container .select2-selection{
    width:100%!important;max-width:100%!important;
    font-size:16px!important;min-height:48px!important;
    box-sizing:border-box!important;
  }
  /* Order review table never overflows */
  .woocommerce-checkout table.shop_table{
    width:100%!important;max-width:100%!important;
    table-layout:fixed!important;
  }
  .woocommerce-checkout table.shop_table th,
  .woocommerce-checkout table.shop_table td{
    padding:12px 10px!important;
    min-width:0!important;
    overflow-wrap:break-word!important;
    word-break:normal!important;
  }
  .woocommerce-checkout table.shop_table td.product-total,
  .woocommerce-checkout table.shop_table tfoot td{
    text-align:right!important;white-space:nowrap!important;
  }
  /* Place order button */
  .woocommerce-checkout #place_order{
    width:100%!important;min-height:52px!important;
    font-size:1rem!important;
  }
}
@media(max-width:400px){
  .woocommerce-cart table.shop_table.cart tbody tr.cart_item{
    grid-template-columns:56px minmax(0,1fr) auto!important;
    column-gap:10px!important;padding:12px!important;
  }
  .woocommerce-cart td.product-thumbnail img{width:56px!important;height:56px!important}
  .woocommerce-cart td.product-name a{font-size:.9rem!important}
  .woocommerce-cart .quantity{max-width:118px!important}
  .woocommerce-cart .quantity .mf-qty-btn{width:32px!important;min-width:32px!important}
}




/* --- Cart: suppress WooCommerce's responsive data-title labels ------------
 * Below 768px WooCommerce's own stylesheet injects a label before each cell
 * via  content: attr(data-title)  on td::before. In our grid layout the
 * subtotal cell only owns the narrow right-hand track, so its "Subtotal:"
 * label was pushed against the edge and clipped.
 *
 * The row is already self-explanatory (thumbnail, title, price, stepper,
 * total), so the injected labels are removed rather than given space. */
@media(max-width:767px){
  .woocommerce-cart table.shop_table.cart tbody td::before,
  .woocommerce-cart table.shop_table.cart td.product-subtotal::before,
  .woocommerce-cart table.shop_table.cart td.product-quantity::before,
  .woocommerce-cart table.shop_table.cart td.product-price::before,
  .woocommerce-cart table.shop_table.cart td.product-name::before{
    content:none!important;
    display:none!important;
  }
  /* Subtotal now owns the full right edge of its row */
  .woocommerce-cart td.product-subtotal{
    text-align:right!important;
    padding-right:0!important;
    overflow:visible!important;
  }
}

/* Mobile stack */
@media(max-width:767px){
  body.woocommerce-order-pay h1,
  body.woocommerce-order-pay .entry-title{font-size:1.8rem!important;margin:16px 0 24px!important}
  body.woocommerce-order-pay ul.order_details{
    grid-template-columns:1fr 1fr!important;gap:20px 16px;padding:20px!important;
  }
  body.woocommerce-order-pay ul.order_details li{
    padding:0!important;border-right:0!important;
  }
  body.woocommerce-order-pay ul.order_details li:nth-child(odd){
    border-right:1px solid var(--mf-border)!important;padding-right:16px!important;
  }
  body.woocommerce-order-pay ul.order_details li strong{font-size:1rem!important}
  body.woocommerce-order-pay #order_review .button,
  body.woocommerce-order-pay .wc-form-pay .button{width:100%;margin:0 0 12px 0!important}
  body.woocommerce-order-pay a.wc-order-pay-cancel{width:100%}
}
@media(max-width:480px){
  body.woocommerce-order-pay ul.order_details{grid-template-columns:1fr!important}
  body.woocommerce-order-pay ul.order_details li{border-right:0!important;padding:0 0 16px!important;border-bottom:1px solid var(--mf-border)!important}
  body.woocommerce-order-pay ul.order_details li:last-child{border-bottom:0!important;padding-bottom:0!important}
}