/*
Theme Name: Loneflex International
Theme URI: https://loneflex.com
Author: IT Autonomous
Author URI: https://loneflex.com
Description: Fully custom WooCommerce theme for Loneflex International, a Houston-based HVAC&R insulation supplier. Built for a premium, technical-industrial storefront presenting the Aerocell Class 0 NBR insulation range.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: loneflex
Tags: e-commerce, custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   1. BRAND VARIABLES
   ========================================================================== */
:root{
  --lf-black: #0D0D0D;
  --lf-black-soft: #1A1A1A;
  --lf-orange-dark: #D95516;
  --lf-orange: #F26522;
  --lf-white: #FFFFFF;
  --lf-charcoal: #3A3A3A;
  --lf-gray: #5F5E5A;
  --lf-gray-light: #B4B2A9;
  --lf-bg-light: #F4F4F4;
  --lf-border: #E5E3DC;

  --lf-font-heading: 'Inter', 'Manrope', Montserrat;
  --lf-font-body: 'Inter', 'Source Sans3;

  --lf-radius: 8px;
  --lf-radius-lg: 14px;
  --lf-container: 1240px;
  --lf-transition: 200ms ease;
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--lf-font-body);
  color: var(--lf-charcoal);
  background: var(--lf-white);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration:none; transition: color var(--lf-transition); }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,h6{
  font-family: var(--lf-font-heading);
  font-weight:600;
  color: var(--lf-black);
  line-height:1.2;
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
}
p{ margin: 0 0 1em; }
button, input, select, textarea{ font-family: inherit; font-size: inherit; }
.screen-reader-text{ position:absolute !important; clip: rect(1px,1px,1px,1px); overflow:hidden; height:1px; width:1px; }

/* ==========================================================================
   3. LAYOUT HELPERS
   ========================================================================== */
.lf-container{
  max-width: var(--lf-container);
  margin: 0 auto;
  padding: 0 24px;
}
.lf-section{ padding: 80px 0; }
.lf-section--tight{ padding: 48px 0; }
.lf-section--dark{ background: var(--lf-black); color: var(--lf-gray-light); }
.lf-section--dark h1, .lf-section--dark h2, .lf-section--dark h3{ color: var(--lf-white); }
.lf-section--light{ background: var(--lf-bg-light); }
.lf-eyebrow{
  display:inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--lf-orange);
  margin-bottom: 14px;
}
.lf-grid{ display:grid; gap: 24px; }
.lf-grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lf-grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lf-grid--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.lf-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 14px 26px;
  border-radius: var(--lf-radius);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  border: 1px solid transparent;
  cursor:pointer;
  transition: all var(--lf-transition);
}
.lf-btn--primary{ background: var(--lf-orange); color: var(--lf-white); }
.lf-btn--primary:hover{ background: var(--lf-orange-dark); color:var(--lf-white); }
.lf-btn--outline-dark{ border-color: rgba(255,255,255,0.3); color: var(--lf-white); background: transparent; }
.lf-btn--outline-dark:hover{ border-color: var(--lf-white); background: rgba(255,255,255,0.06); }
.lf-btn--outline{ border-color: var(--lf-border); color: var(--lf-black); background: transparent; }
.lf-btn--outline:hover{ border-color: var(--lf-charcoal); }
.lf-btn--block{ width:100%; }

/* ==========================================================================
   5. HEADER
   ========================================================================== */
.lf-header{
  position: sticky;
  top:0;
  z-index: 999;
  background: var(--lf-black);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.lf-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
}
.lf-logo{ display:flex; align-items:center; gap:10px; font-family: var(--lf-font-heading); font-weight:700; font-size:18px; color:var(--lf-white); letter-spacing:0.5px; }
.lf-logo img{ height:34px; width:auto; }
.lf-logo .lf-logo__mark{
  width:32px; height:32px; border-radius:6px; background: var(--lf-orange);
  color:var(--lf-black); display:flex; align-items:center; justify-content:center; font-weight:800;
}
.lf-nav{ display:flex; align-items:center; gap:28px; }
.lf-nav a{ color: var(--lf-gray-light); font-size:14px; font-weight:500; }
.lf-nav a:hover, .lf-nav a.current-menu-item-link{ color: var(--lf-white); }
.lf-header__actions{ display:flex; align-items:center; gap:12px; }
.lf-icon-btn{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius: var(--lf-radius);
  border:1px solid rgba(255,255,255,0.15); color: var(--lf-white); position:relative;
}
.lf-icon-btn:hover{ border-color: rgba(255,255,255,0.4); }
.lf-cart-count{
  position:absolute; top:-6px; right:-6px; background: var(--lf-orange); color:#fff;
  font-size:10px; font-weight:700; width:17px; height:17px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.lf-nav-toggle{ display:none; background:none; border:none; color:#fff; font-size:24px; cursor:pointer; }

@media (max-width: 900px){
  .lf-nav{
    position: fixed; top:64px; left:0; right:0; bottom:0;
    background: var(--lf-black); flex-direction:column; align-items:flex-start;
    padding: 24px; gap:18px; transform: translateX(-100%); transition: transform var(--lf-transition);
  }
  .lf-nav.is-open{ transform: translateX(0); }
  .lf-nav-toggle{ display:block; }
  .lf-grid--2, .lf-grid--3, .lf-grid--4{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .lf-grid--2, .lf-grid--3, .lf-grid--4{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   6. HERO
   ========================================================================== */
.lf-hero{
  position:relative;
  min-height: 560px;
  display:flex;
  align-items:center;
  background: var(--lf-black);
  color: var(--lf-white);
  overflow:hidden;
}
.lf-hero__bg{
  position:absolute; inset:0;
  background-size: cover; background-position: center;
  opacity: 0.55;
}
.lf-hero__overlay{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(13,13,13,0.96) 15%, rgba(13,13,13,0.55) 60%, rgba(13,13,13,0.25) 100%);
}
.lf-hero__content{ position:relative; max-width: 560px; }
.lf-hero h1{ font-size: 42px; color:var(--lf-white); margin-bottom:20px; }
.lf-hero p{ font-size:16px; color: var(--lf-gray-light); margin-bottom: 28px; max-width: 460px; }
.lf-hero__actions{ display:flex; gap:14px; flex-wrap:wrap; }

@media (max-width:700px){
  .lf-hero{ min-height:460px; }
  .lf-hero h1{ font-size:30px; }
}

/* ==========================================================================
   7. CATEGORY / APPLICATION CARDS
   ========================================================================== */
.lf-app-card{
  background: var(--lf-white);
  border: 1px solid var(--lf-border);
  border-radius: var(--lf-radius-lg);
  padding: 28px 22px;
  text-align:center;
  transition: transform var(--lf-transition), box-shadow var(--lf-transition);
}
.lf-app-card:hover{ transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,0.06); }
.lf-app-card__icon{
  width:52px; height:52px; margin: 0 auto 16px; border-radius:50%;
  background: rgba(228,41,46,0.08); color: var(--lf-orange);
  display:flex; align-items:center; justify-content:center; font-size:22px;
}
.lf-app-card h3{ font-size:16px; margin-bottom:6px; }
.lf-app-card p{ font-size:13px; color: var(--lf-gray); margin:0; }

/* ==========================================================================
   8. PRODUCT CARDS (WooCommerce loop)
   ========================================================================== */
ul.products{ display:grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:24px; list-style:none; margin:0; padding:0; }
ul.products li.product{
  background: var(--lf-white);
  border: 1px solid var(--lf-border);
  border-radius: var(--lf-radius-lg);
  overflow:hidden;
  transition: box-shadow var(--lf-transition), transform var(--lf-transition);
  position:relative;
  list-style:none;
  width:100% !important;
  float:none !important;
  margin:0 !important;
  min-width:0;
  box-sizing:border-box;
}
ul.products li.product:hover{ box-shadow: 0 16px 32px rgba(0,0,0,0.07); transform: translateY(-3px); }
ul.products li.product a.woocommerce-LoopProduct-link{ display:block; text-decoration:none; color:inherit; }
ul.products li.product img{ width:100%; aspect-ratio: 4/3; object-fit: cover; background: var(--lf-black-soft); }
ul.products li.product .lf-card-body{ padding: 16px 18px 20px; }
ul.products li.product h2, ul.products li.product h3{ font-size:15px; margin:0 0 6px; color: var(--lf-black); }
ul.products li.product .price{ font-size:15px; font-weight:700; color: var(--lf-orange); }
ul.products li.product .price ins{ text-decoration:none; }
ul.products li.product .button{
  display:inline-block; margin-top:12px; font-size:12px; font-weight:600;
  border:1px solid var(--lf-border); border-radius: var(--lf-radius); padding:8px 14px;
}
ul.products li.product .button:hover{ background: var(--lf-black); color:#fff; border-color: var(--lf-black); }
.lf-sku-tag{
  display:inline-block; font-size:11px; font-weight:600; color: var(--lf-gray);
  background: var(--lf-bg-light); padding:3px 8px; border-radius:4px; margin-bottom:8px;
}
@media (max-width:1100px){ ul.products{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width:800px){ ul.products{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width:520px){ ul.products{ grid-template-columns: 1fr; } }

/* ==========================================================================
   9. SINGLE PRODUCT
   ========================================================================== */
.lf-product{ padding: 56px 0 80px; }
.lf-product__grid{ display:grid; grid-template-columns: 1fr 1fr; gap:56px; align-items:flex-start; }
.lf-product__gallery img{ border-radius: var(--lf-radius-lg); background: var(--lf-black-soft); aspect-ratio: 1/1; object-fit:cover; }
.lf-product__summary .lf-sku-tag{ margin-bottom:14px; }
.lf-product__summary h1{ font-size:28px; margin-bottom:10px; }
.lf-product__summary .price{ font-size:24px; font-weight:700; color: var(--lf-orange); margin-bottom: 20px; display:block; }
.lf-spec-table{ width:100%; border-collapse:collapse; margin: 28px 0; font-size:14px; }
.lf-spec-table th, .lf-spec-table td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--lf-border); }
.lf-spec-table th{ width:45%; color: var(--lf-gray); font-weight:500; }
.lf-spec-table td{ font-weight:600; color: var(--lf-black); }
.lf-cert-inline{ display:flex; flex-wrap:wrap; gap:10px; margin: 20px 0; }
.lf-cert-inline span{
  font-size:11px; font-weight:600; color: var(--lf-charcoal); background: var(--lf-bg-light);
  padding:6px 10px; border-radius:6px; display:flex; align-items:center; gap:6px;
}
.lf-quote-btn{ margin-top:10px; }
.lf-add-to-cart-row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.lf-spec-heading{ font-size:18px; margin: 28px 0 4px; }

@media (max-width:900px){ .lf-product__grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   10. CERTIFICATION STRIP
   ========================================================================== */
.lf-cert-strip{ background: var(--lf-black); padding: 26px 0; }
.lf-cert-strip__inner{ display:flex; justify-content:space-around; flex-wrap:wrap; gap:20px; }
.lf-cert-strip__item{ display:flex; align-items:center; gap:8px; font-size:12px; color: var(--lf-gray-light); font-weight:500; }
.lf-cert-strip__item i{ color: var(--lf-orange); font-size:18px; }

/* ==========================================================================
   11. VALUES / ABOUT CARDS
   ========================================================================== */
.lf-value-card{ padding:24px; border-left:3px solid var(--lf-orange); background: var(--lf-bg-light); border-radius: 0 var(--lf-radius) var(--lf-radius) 0; }
.lf-value-card h3{ font-size:16px; margin-bottom:8px; }
.lf-value-card p{ font-size:13px; color: var(--lf-gray); margin:0; }

/* ==========================================================================
   12. FOOTER
   ========================================================================== */
.lf-footer{ background: var(--lf-black); color: var(--lf-gray-light); padding: 56px 0 24px; }
.lf-footer__grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.lf-footer h4{ color: var(--lf-white); font-size:14px; margin-bottom:16px; }
.lf-footer ul li{ margin-bottom:10px; font-size:13px; }
.lf-footer ul li a:hover{ color: var(--lf-white); }
.lf-footer__bottom{ border-top:1px solid rgba(255,255,255,0.08); padding-top:20px; display:flex; justify-content:space-between; font-size:12px; color:var(--lf-gray); flex-wrap:wrap; gap:10px; }
@media (max-width:800px){ .lf-footer__grid{ grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   13. FORMS (contact / quote)
   ========================================================================== */
.lf-form{ display:grid; gap:16px; max-width:560px; }
.lf-form label{ font-size:13px; font-weight:600; color: var(--lf-charcoal); margin-bottom:6px; display:block; }
.lf-form input, .lf-form select, .lf-form textarea{
  width:100%; padding:12px 14px; border:1px solid var(--lf-border); border-radius: var(--lf-radius);
  background: var(--lf-white);
}
.lf-form input:focus, .lf-form select:focus, .lf-form textarea:focus{ outline:none; border-color: var(--lf-orange); }
.lf-form textarea{ min-height:120px; resize:vertical; }
.lf-form-success{ background: rgba(99,153,34,0.1); color:#3B6D11; padding:14px 16px; border-radius: var(--lf-radius); font-size:14px; }
.lf-form-error{ background: rgba(226,75,74,0.08); color:#A32D2D; padding:14px 16px; border-radius: var(--lf-radius); font-size:14px; }

/* ==========================================================================
   14. FAQ ACCORDION
   ========================================================================== */
.lf-faq-item{ border-bottom:1px solid var(--lf-border); }
.lf-faq-item__q{ padding:20px 0; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:600; }
.lf-faq-item__a{ display:none; padding: 0 0 20px; color: var(--lf-gray); font-size:14px; }
.lf-faq-item.is-open .lf-faq-item__a{ display:block; }
.lf-faq-item.is-open .lf-faq-item__q i{ transform: rotate(180deg); }

/* ==========================================================================
   18. WOOCOMMERCE OVERRIDES / MISC
   ========================================================================== */
.lf-hero-slider{ position:relative; min-height:560px; }
.lf-hero-slide{ position:absolute; inset:0; opacity:0; pointer-events:none; transition: opacity 700ms ease; }
.lf-hero-slide.is-active{ position:relative; opacity:1; pointer-events:auto; }
.lf-hero-dots{ position:absolute; bottom:24px; left:0; right:0; display:flex; justify-content:center; gap:10px; z-index:5; }
.lf-hero-dots button{
  width:10px; height:10px; border-radius:50%; border:1px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.15); cursor:pointer; padding:0; transition: background var(--lf-transition), transform var(--lf-transition);
}
.lf-hero-dots button.is-active{ background: var(--lf-orange); border-color: var(--lf-orange); transform: scale(1.15); }

@media (max-width:700px){ .lf-hero-slider{ min-height:460px; } }

/* ==========================================================================
   17. SCROLL-IN ANIMATIONS
   ========================================================================== */
.lf-animate{ opacity:0; transform: translateY(24px); transition: opacity 650ms ease, transform 650ms ease; will-change: opacity, transform; }
.lf-animate.lf-in-view{ opacity:1; transform:none; }
.lf-delay-1{ transition-delay: 120ms; }
/*
Theme Name: Loneflex International
Theme URI: https://loneflex.com
Author: IT Autonomous
Author URI: https://loneflex.com
Description: Fully custom WooCommerce theme for Loneflex International, a Houston-based HVAC&R insulation supplier. Built for a premium, technical-industrial storefront presenting the Aerocell Class 0 NBR insulation range.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: loneflex
Tags: e-commerce, custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   1. BRAND VARIABLES
   ========================================================================== */
:root{
  --lf-black: #0D0D0D;
  --lf-black-soft: #1A1A1A;
  --lf-orange-dark: #D95516;
  --lf-orange: #F26522;
  --lf-white: #FFFFFF;
  --lf-charcoal: #3A3A3A;
  --lf-gray: #5F5E5A;
  --lf-gray-light: #B4B2A9;
  --lf-bg-light: #F4F4F4;
  --lf-border: #E5E3DC;

  --lf-font-heading: 'Inter', 'Manrope', Montserrat;
  --lf-font-body: 'Inter', 'Source Sans3;

  --lf-radius: 8px;
  --lf-radius-lg: 14px;
  --lf-container: 1240px;
  --lf-transition: 200ms ease;
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--lf-font-body);
  color: var(--lf-charcoal);
  background: var(--lf-white);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration:none; transition: color var(--lf-transition); }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,h6{
  font-family: var(--lf-font-heading);
  font-weight:600;
  color: var(--lf-black);
  line-height:1.2;
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
}
p{ margin: 0 0 1em; }
button, input, select, textarea{ font-family: inherit; font-size: inherit; }
.screen-reader-text{ position:absolute !important; clip: rect(1px,1px,1px,1px); overflow:hidden; height:1px; width:1px; }

/* ==========================================================================
   3. LAYOUT HELPERS
   ========================================================================== */
.lf-container{
  max-width: var(--lf-container);
  margin: 0 auto;
  padding: 0 24px;
}
.lf-section{ padding: 80px 0; }
.lf-section--tight{ padding: 48px 0; }
.lf-section--dark{ background: var(--lf-black); color: var(--lf-gray-light); }
.lf-section--dark h1, .lf-section--dark h2, .lf-section--dark h3{ color: var(--lf-white); }
.lf-section--light{ background: var(--lf-bg-light); }
.lf-eyebrow{
  display:inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--lf-orange);
  margin-bottom: 14px;
}
.lf-grid{ display:grid; gap: 24px; }
.lf-grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lf-grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lf-grid--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.lf-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 14px 26px;
  border-radius: var(--lf-radius);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  border: 1px solid transparent;
  cursor:pointer;
  transition: all var(--lf-transition);
}
.lf-btn--primary{ background: var(--lf-orange); color: var(--lf-white); }
.lf-btn--primary:hover{ background: var(--lf-orange-dark); color:var(--lf-white); }
.lf-btn--outline-dark{ border-color: rgba(255,255,255,0.3); color: var(--lf-white); background: transparent; }
.lf-btn--outline-dark:hover{ border-color: var(--lf-white); background: rgba(255,255,255,0.06); }
.lf-btn--outline{ border-color: var(--lf-border); color: var(--lf-black); background: transparent; }
.lf-btn--outline:hover{ border-color: var(--lf-charcoal); }
.lf-btn--block{ width:100%; }

/* ==========================================================================
   5. HEADER
   ========================================================================== */
.lf-header{
  position: sticky;
  top:0;
  z-index: 999;
  background: var(--lf-black);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.lf-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
}
.lf-logo{ display:flex; align-items:center; gap:10px; font-family: var(--lf-font-heading); font-weight:700; font-size:18px; color:var(--lf-white); letter-spacing:0.5px; }
.lf-logo img{ height:34px; width:auto; }
.lf-logo .lf-logo__mark{
  width:32px; height:32px; border-radius:6px; background: var(--lf-orange);
  color:var(--lf-black); display:flex; align-items:center; justify-content:center; font-weight:800;
}
.lf-nav{ display:flex; align-items:center; gap:28px; }
.lf-nav a{ color: var(--lf-gray-light); font-size:14px; font-weight:500; }
.lf-nav a:hover, .lf-nav a.current-menu-item-link{ color: var(--lf-white); }
.lf-header__actions{ display:flex; align-items:center; gap:12px; }
.lf-icon-btn{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius: var(--lf-radius);
  border:1px solid rgba(255,255,255,0.15); color: var(--lf-white); position:relative;
}
.lf-icon-btn:hover{ border-color: rgba(255,255,255,0.4); }
.lf-cart-count{
  position:absolute; top:-6px; right:-6px; background: var(--lf-orange); color:#fff;
  font-size:10px; font-weight:700; width:17px; height:17px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.lf-nav-toggle{ display:none; background:none; border:none; color:#fff; font-size:24px; cursor:pointer; }

@media (max-width: 900px){
  .lf-nav{
    position: fixed; top:64px; left:0; right:0; bottom:0;
    background: var(--lf-black); flex-direction:column; align-items:flex-start;
    padding: 24px; gap:18px; transform: translateX(-100%); transition: transform var(--lf-transition);
  }
  .lf-nav.is-open{ transform: translateX(0); }
  .lf-nav-toggle{ display:block; }
  .lf-grid--2, .lf-grid--3, .lf-grid--4{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .lf-grid--2, .lf-grid--3, .lf-grid--4{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   6. HERO
   ========================================================================== */
.lf-hero{
  position:relative;
  min-height: 560px;
  display:flex;
  align-items:center;
  background: var(--lf-black);
  color: var(--lf-white);
  overflow:hidden;
}
.lf-hero__bg{
  position:absolute; inset:0;
  background-size: cover; background-position: center;
  opacity: 0.55;
}
.lf-hero__overlay{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(13,13,13,0.96) 15%, rgba(13,13,13,0.55) 60%, rgba(13,13,13,0.25) 100%);
}
.lf-hero__content{ position:relative; max-width: 560px; }
.lf-hero h1{ font-size: 42px; color:var(--lf-white); margin-bottom:20px; }
.lf-hero p{ font-size:16px; color: var(--lf-gray-light); margin-bottom: 28px; max-width: 460px; }
.lf-hero__actions{ display:flex; gap:14px; flex-wrap:wrap; }

@media (max-width:700px){
  .lf-hero{ min-height:460px; }
  .lf-hero h1{ font-size:30px; }
}

/* ==========================================================================
   7. CATEGORY / APPLICATION CARDS
   ========================================================================== */
.lf-app-card{
  background: var(--lf-white);
  border: 1px solid var(--lf-border);
  border-radius: var(--lf-radius-lg);
  padding: 28px 22px;
  text-align:center;
  transition: transform var(--lf-transition), box-shadow var(--lf-transition);
}
.lf-app-card:hover{ transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,0.06); }
.lf-app-card__icon{
  width:52px; height:52px; margin: 0 auto 16px; border-radius:50%;
  background: rgba(228,41,46,0.08); color: var(--lf-orange);
  display:flex; align-items:center; justify-content:center; font-size:22px;
}
.lf-app-card h3{ font-size:16px; margin-bottom:6px; }
.lf-app-card p{ font-size:13px; color: var(--lf-gray); margin:0; }

/* ==========================================================================
   8. PRODUCT CARDS (WooCommerce loop)
   ========================================================================== */
ul.products{ display:grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:24px; list-style:none; margin:0; padding:0; }
ul.products li.product{
  background: var(--lf-white);
  border: 1px solid var(--lf-border);
  border-radius: var(--lf-radius-lg);
  overflow:hidden;
  transition: box-shadow var(--lf-transition), transform var(--lf-transition);
  position:relative;
  list-style:none;
  width:100% !important;
  float:none !important;
  margin:0 !important;
  min-width:0;
  box-sizing:border-box;
}
ul.products li.product:hover{ box-shadow: 0 16px 32px rgba(0,0,0,0.07); transform: translateY(-3px); }
ul.products li.product a.woocommerce-LoopProduct-link{ display:block; text-decoration:none; color:inherit; }
ul.products li.product img{ width:100%; aspect-ratio: 4/3; object-fit: cover; background: var(--lf-black-soft); }
ul.products li.product .lf-card-body{ padding: 16px 18px 20px; }
ul.products li.product h2, ul.products li.product h3{ font-size:15px; margin:0 0 6px; color: var(--lf-black); }
ul.products li.product .price{ font-size:15px; font-weight:700; color: var(--lf-orange); }
ul.products li.product .price ins{ text-decoration:none; }
ul.products li.product .button{
  display:inline-block; margin-top:12px; font-size:12px; font-weight:600;
  border:1px solid var(--lf-border); border-radius: var(--lf-radius); padding:8px 14px;
}
ul.products li.product .button:hover{ background: var(--lf-black); color:#fff; border-color: var(--lf-black); }
.lf-sku-tag{
  display:inline-block; font-size:11px; font-weight:600; color: var(--lf-gray);
  background: var(--lf-bg-light); padding:3px 8px; border-radius:4px; margin-bottom:8px;
}
@media (max-width:1100px){ ul.products{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width:800px){ ul.products{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width:520px){ ul.products{ grid-template-columns: 1fr; } }

/* ==========================================================================
   9. SINGLE PRODUCT
   ========================================================================== */
.lf-product{ padding: 56px 0 80px; }
.lf-product__grid{ display:grid; grid-template-columns: 1fr 1fr; gap:56px; align-items:flex-start; }
.lf-product__gallery img{ border-radius: var(--lf-radius-lg); background: var(--lf-black-soft); aspect-ratio: 1/1; object-fit:cover; }
.lf-product__summary .lf-sku-tag{ margin-bottom:14px; }
.lf-product__summary h1{ font-size:28px; margin-bottom:10px; }
.lf-product__summary .price{ font-size:24px; font-weight:700; color: var(--lf-orange); margin-bottom: 20px; display:block; }
.lf-spec-table{ width:100%; border-collapse:collapse; margin: 28px 0; font-size:14px; }
.lf-spec-table th, .lf-spec-table td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--lf-border); }
.lf-spec-table th{ width:45%; color: var(--lf-gray); font-weight:500; }
.lf-spec-table td{ font-weight:600; color: var(--lf-black); }
.lf-cert-inline{ display:flex; flex-wrap:wrap; gap:10px; margin: 20px 0; }
.lf-cert-inline span{
  font-size:11px; font-weight:600; color: var(--lf-charcoal); background: var(--lf-bg-light);
  padding:6px 10px; border-radius:6px; display:flex; align-items:center; gap:6px;
}
.lf-quote-btn{ margin-top:10px; }
.lf-add-to-cart-row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.lf-spec-heading{ font-size:18px; margin: 28px 0 4px; }

@media (max-width:900px){ .lf-product__grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   10. CERTIFICATION STRIP
   ========================================================================== */
.lf-cert-strip{ background: var(--lf-black); padding: 26px 0; }
.lf-cert-strip__inner{ display:flex; justify-content:space-around; flex-wrap:wrap; gap:20px; }
.lf-cert-strip__item{ display:flex; align-items:center; gap:8px; font-size:12px; color: var(--lf-gray-light); font-weight:500; }
.lf-cert-strip__item i{ color: var(--lf-orange); font-size:18px; }

/* ==========================================================================
   11. VALUES / ABOUT CARDS
   ========================================================================== */
.lf-value-card{ padding:24px; border-left:3px solid var(--lf-orange); background: var(--lf-bg-light); border-radius: 0 var(--lf-radius) var(--lf-radius) 0; }
.lf-value-card h3{ font-size:16px; margin-bottom:8px; }
.lf-value-card p{ font-size:13px; color: var(--lf-gray); margin:0; }

/* ==========================================================================
   12. FOOTER
   ========================================================================== */
.lf-footer{ background: var(--lf-black); color: var(--lf-gray-light); padding: 56px 0 24px; }
.lf-footer__grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.lf-footer h4{ color: var(--lf-white); font-size:14px; margin-bottom:16px; }
.lf-footer ul li{ margin-bottom:10px; font-size:13px; }
.lf-footer ul li a:hover{ color: var(--lf-white); }
.lf-footer__bottom{ border-top:1px solid rgba(255,255,255,0.08); padding-top:20px; display:flex; justify-content:space-between; font-size:12px; color:var(--lf-gray); flex-wrap:wrap; gap:10px; }
@media (max-width:800px){ .lf-footer__grid{ grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   13. FORMS (contact / quote)
   ========================================================================== */
.lf-form{ display:grid; gap:16px; max-width:560px; }
.lf-form label{ font-size:13px; font-weight:600; color: var(--lf-charcoal); margin-bottom:6px; display:block; }
.lf-form input, .lf-form select, .lf-form textarea{
  width:100%; padding:12px 14px; border:1px solid var(--lf-border); border-radius: var(--lf-radius);
  background: var(--lf-white);
}
.lf-form input:focus, .lf-form select:focus, .lf-form textarea:focus{ outline:none; border-color: var(--lf-orange); }
.lf-form textarea{ min-height:120px; resize:vertical; }
.lf-form-success{ background: rgba(99,153,34,0.1); color:#3B6D11; padding:14px 16px; border-radius: var(--lf-radius); font-size:14px; }
.lf-form-error{ background: rgba(226,75,74,0.08); color:#A32D2D; padding:14px 16px; border-radius: var(--lf-radius); font-size:14px; }

/* ==========================================================================
   14. FAQ ACCORDION
   ========================================================================== */
.lf-faq-item{ border-bottom:1px solid var(--lf-border); }
.lf-faq-item__q{ padding:20px 0; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:600; }
.lf-faq-item__a{ display:none; padding: 0 0 20px; color: var(--lf-gray); font-size:14px; }
.lf-faq-item.is-open .lf-faq-item__a{ display:block; }
.lf-faq-item.is-open .lf-faq-item__q i{ transform: rotate(180deg); }

/* ==========================================================================
   18. WOOCOMMERCE OVERRIDES / MISC
   ========================================================================== */
.lf-hero-slider{ position:relative; min-height:560px; }
.lf-hero-slide{ position:absolute; inset:0; opacity:0; pointer-events:none; transition: opacity 700ms ease; }
.lf-hero-slide.is-active{ position:relative; opacity:1; pointer-events:auto; }
.lf-hero-dots{ position:absolute; bottom:24px; left:0; right:0; display:flex; justify-content:center; gap:10px; z-index:5; }
.lf-hero-dots button{
  width:10px; height:10px; border-radius:50%; border:1px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.15); cursor:pointer; padding:0; transition: background var(--lf-transition), transform var(--lf-transition);
}
.lf-hero-dots button.is-active{ background: var(--lf-orange); border-color: var(--lf-orange); transform: scale(1.15); }

@media (max-width:700px){ .lf-hero-slider{ min-height:460px; } }

/* ==========================================================================
   17. SCROLL-IN ANIMATIONS
   ========================================================================== */
.lf-animate{ opacity:0; transform: translateY(24px); transition: opacity 650ms ease, transform 650ms ease; will-change: opacity, transform; }
.lf-animate.lf-in-view{ opacity:1; transform:none; }
.lf-delay-1{ transition-delay: 120ms; }
/*
Theme Name: Loneflex International
Theme URI: https://loneflex.com
Author: IT Autonomous
Author URI: https://loneflex.com
Description: Fully custom WooCommerce theme for Loneflex International, a Houston-based HVAC&R insulation supplier. Built for a premium, technical-industrial storefront presenting the Aerocell Class 0 NBR insulation range.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: loneflex
Tags: e-commerce, custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   1. BRAND VARIABLES
   ========================================================================== */
:root{
  --lf-black: #0D0D0D;
  --lf-black-soft: #1A1A1A;
  --lf-orange-dark: #D95516;
  --lf-orange: #F26522;
  --lf-white: #FFFFFF;
  --lf-charcoal: #3A3A3A;
  --lf-gray: #5F5E5A;
  --lf-gray-light: #B4B2A9;
  --lf-bg-light: #F4F4F4;
  --lf-border: #E5E3DC;

  --lf-font-heading: 'Inter', 'Manrope', Montserrat;
  --lf-font-body: 'Inter', 'Source Sans3;

  --lf-radius: 8px;
  --lf-radius-lg: 14px;
  --lf-container: 1240px;
  --lf-transition: 200ms ease;
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--lf-font-body);
  color: var(--lf-charcoal);
  background: var(--lf-white);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration:none; transition: color var(--lf-transition); }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,h6{
  font-family: var(--lf-font-heading);
  font-weight:600;
  color: var(--lf-black);
  line-height:1.2;
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
}
p{ margin: 0 0 1em; }
button, input, select, textarea{ font-family: inherit; font-size: inherit; }
.screen-reader-text{ position:absolute !important; clip: rect(1px,1px,1px,1px); overflow:hidden; height:1px; width:1px; }

/* ==========================================================================
   3. LAYOUT HELPERS
   ========================================================================== */
.lf-container{
  max-width: var(--lf-container);
  margin: 0 auto;
  padding: 0 24px;
}
.lf-section{ padding: 80px 0; }
.lf-section--tight{ padding: 48px 0; }
.lf-section--dark{ background: var(--lf-black); color: var(--lf-gray-light); }
.lf-section--dark h1, .lf-section--dark h2, .lf-section--dark h3{ color: var(--lf-white); }
.lf-section--light{ background: var(--lf-bg-light); }
.lf-eyebrow{
  display:inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--lf-orange);
  margin-bottom: 14px;
}
.lf-grid{ display:grid; gap: 24px; }
.lf-grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lf-grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lf-grid--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.lf-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 14px 26px;
  border-radius: var(--lf-radius);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  border: 1px solid transparent;
  cursor:pointer;
  transition: all var(--lf-transition);
}
.lf-btn--primary{ background: var(--lf-orange); color: var(--lf-white); }
.lf-btn--primary:hover{ background: var(--lf-orange-dark); color:var(--lf-white); }
.lf-btn--outline-dark{ border-color: rgba(255,255,255,0.3); color: var(--lf-white); background: transparent; }
.lf-btn--outline-dark:hover{ border-color: var(--lf-white); background: rgba(255,255,255,0.06); }
.lf-btn--outline{ border-color: var(--lf-border); color: var(--lf-black); background: transparent; }
.lf-btn--outline:hover{ border-color: var(--lf-charcoal); }
.lf-btn--block{ width:100%; }

/* ==========================================================================
   5. HEADER
   ========================================================================== */
.lf-header{
  position: sticky;
  top:0;
  z-index: 999;
  background: var(--lf-black);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.lf-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
}
.lf-logo{ display:flex; align-items:center; gap:10px; font-family: var(--lf-font-heading); font-weight:700; font-size:18px; color:var(--lf-white); letter-spacing:0.5px; }
.lf-logo img{ height:34px; width:auto; }
.lf-logo .lf-logo__mark{
  width:32px; height:32px; border-radius:6px; background: var(--lf-orange);
  color:var(--lf-black); display:flex; align-items:center; justify-content:center; font-weight:800;
}
.lf-nav{ display:flex; align-items:center; gap:28px; }
.lf-nav a{ color: var(--lf-gray-light); font-size:14px; font-weight:500; }
.lf-nav a:hover, .lf-nav a.current-menu-item-link{ color: var(--lf-white); }
.lf-header__actions{ display:flex; align-items:center; gap:12px; }
.lf-icon-btn{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius: var(--lf-radius);
  border:1px solid rgba(255,255,255,0.15); color: var(--lf-white); position:relative;
}
.lf-icon-btn:hover{ border-color: rgba(255,255,255,0.4); }
.lf-cart-count{
  position:absolute; top:-6px; right:-6px; background: var(--lf-orange); color:#fff;
  font-size:10px; font-weight:700; width:17px; height:17px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.lf-nav-toggle{ display:none; background:none; border:none; color:#fff; font-size:24px; cursor:pointer; }

@media (max-width: 900px){
  .lf-nav{
    position: fixed; top:64px; left:0; right:0; bottom:0;
    background: var(--lf-black); flex-direction:column; align-items:flex-start;
    padding: 24px; gap:18px; transform: translateX(-100%); transition: transform var(--lf-transition);
  }
  .lf-nav.is-open{ transform: translateX(0); }
  .lf-nav-toggle{ display:block; }
  .lf-grid--2, .lf-grid--3, .lf-grid--4{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .lf-grid--2, .lf-grid--3, .lf-grid--4{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   6. HERO
   ========================================================================== */
.lf-hero{
  position:relative;
  min-height: 560px;
  display:flex;
  align-items:center;
  background: var(--lf-black);
  color: var(--lf-white);
  overflow:hidden;
}
.lf-hero__bg{
  position:absolute; inset:0;
  background-size: cover; background-position: center;
  opacity: 0.55;
}
.lf-hero__overlay{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(13,13,13,0.96) 15%, rgba(13,13,13,0.55) 60%, rgba(13,13,13,0.25) 100%);
}
.lf-hero__content{ position:relative; max-width: 560px; }
.lf-hero h1{ font-size: 42px; color:var(--lf-white); margin-bottom:20px; }
.lf-hero p{ font-size:16px; color: var(--lf-gray-light); margin-bottom: 28px; max-width: 460px; }
.lf-hero__actions{ display:flex; gap:14px; flex-wrap:wrap; }

@media (max-width:700px){
  .lf-hero{ min-height:460px; }
  .lf-hero h1{ font-size:30px; }
}

/* ==========================================================================
   7. CATEGORY / APPLICATION CARDS
   ========================================================================== */
.lf-app-card{
  background: var(--lf-white);
  border: 1px solid var(--lf-border);
  border-radius: var(--lf-radius-lg);
  padding: 28px 22px;
  text-align:center;
  transition: transform var(--lf-transition), box-shadow var(--lf-transition);
}
.lf-app-card:hover{ transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,0.06); }
.lf-app-card__icon{
  width:52px; height:52px; margin: 0 auto 16px; border-radius:50%;
  background: rgba(228,41,46,0.08); color: var(--lf-orange);
  display:flex; align-items:center; justify-content:center; font-size:22px;
}
.lf-app-card h3{ font-size:16px; margin-bottom:6px; }
.lf-app-card p{ font-size:13px; color: var(--lf-gray); margin:0; }

/* ==========================================================================
   8. PRODUCT CARDS (WooCommerce loop)
   ========================================================================== */
ul.products{ display:grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:24px; list-style:none; margin:0; padding:0; }
ul.products li.product{
  background: var(--lf-white);
  border: 1px solid var(--lf-border);
  border-radius: var(--lf-radius-lg);
  overflow:hidden;
  transition: box-shadow var(--lf-transition), transform var(--lf-transition);
  position:relative;
  list-style:none;
  width:100% !important;
  float:none !important;
  margin:0 !important;
  min-width:0;
  box-sizing:border-box;
}
ul.products li.product:hover{ box-shadow: 0 16px 32px rgba(0,0,0,0.07); transform: translateY(-3px); }
ul.products li.product a.woocommerce-LoopProduct-link{ display:block; text-decoration:none; color:inherit; }
ul.products li.product img{ width:100%; aspect-ratio: 4/3; object-fit: cover; background: var(--lf-black-soft); }
ul.products li.product .lf-card-body{ padding: 16px 18px 20px; }
ul.products li.product h2, ul.products li.product h3{ font-size:15px; margin:0 0 6px; color: var(--lf-black); }
ul.products li.product .price{ font-size:15px; font-weight:700; color: var(--lf-orange); }
ul.products li.product .price ins{ text-decoration:none; }
ul.products li.product .button{
  display:inline-block; margin-top:12px; font-size:12px; font-weight:600;
  border:1px solid var(--lf-border); border-radius: var(--lf-radius); padding:8px 14px;
}
ul.products li.product .button:hover{ background: var(--lf-black); color:#fff; border-color: var(--lf-black); }
.lf-sku-tag{
  display:inline-block; font-size:11px; font-weight:600; color: var(--lf-gray);
  background: var(--lf-bg-light); padding:3px 8px; border-radius:4px; margin-bottom:8px;
}
@media (max-width:1100px){ ul.products{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width:800px){ ul.products{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width:520px){ ul.products{ grid-template-columns: 1fr; } }

/* ==========================================================================
   9. SINGLE PRODUCT
   ========================================================================== */
.lf-product{ padding: 56px 0 80px; }
.lf-product__grid{ display:grid; grid-template-columns: 1fr 1fr; gap:56px; align-items:flex-start; }
.lf-product__gallery img{ border-radius: var(--lf-radius-lg); background: var(--lf-black-soft); aspect-ratio: 1/1; object-fit:cover; }
.lf-product__summary .lf-sku-tag{ margin-bottom:14px; }
.lf-product__summary h1{ font-size:28px; margin-bottom:10px; }
.lf-product__summary .price{ font-size:24px; font-weight:700; color: var(--lf-orange); margin-bottom: 20px; display:block; }
.lf-spec-table{ width:100%; border-collapse:collapse; margin: 28px 0; font-size:14px; }
.lf-spec-table th, .lf-spec-table td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--lf-border); }
.lf-spec-table th{ width:45%; color: var(--lf-gray); font-weight:500; }
.lf-spec-table td{ font-weight:600; color: var(--lf-black); }
.lf-cert-inline{ display:flex; flex-wrap:wrap; gap:10px; margin: 20px 0; }
.lf-cert-inline span{
  font-size:11px; font-weight:600; color: var(--lf-charcoal); background: var(--lf-bg-light);
  padding:6px 10px; border-radius:6px; display:flex; align-items:center; gap:6px;
}
.lf-quote-btn{ margin-top:10px; }
.lf-add-to-cart-row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.lf-spec-heading{ font-size:18px; margin: 28px 0 4px; }

@media (max-width:900px){ .lf-product__grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   10. CERTIFICATION STRIP
   ========================================================================== */
.lf-cert-strip{ background: var(--lf-black); padding: 26px 0; }
.lf-cert-strip__inner{ display:flex; justify-content:space-around; flex-wrap:wrap; gap:20px; }
.lf-cert-strip__item{ display:flex; align-items:center; gap:8px; font-size:12px; color: var(--lf-gray-light); font-weight:500; }
.lf-cert-strip__item i{ color: var(--lf-orange); font-size:18px; }

/* ==========================================================================
   11. VALUES / ABOUT CARDS
   ========================================================================== */
.lf-value-card{ padding:24px; border-left:3px solid var(--lf-orange); background: var(--lf-bg-light); border-radius: 0 var(--lf-radius) var(--lf-radius) 0; }
.lf-value-card h3{ font-size:16px; margin-bottom:8px; }
.lf-value-card p{ font-size:13px; color: var(--lf-gray); margin:0; }

/* ==========================================================================
   12. FOOTER
   ========================================================================== */
.lf-footer{ background: var(--lf-black); color: var(--lf-gray-light); padding: 56px 0 24px; }
.lf-footer__grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.lf-footer h4{ color: var(--lf-white); font-size:14px; margin-bottom:16px; }
.lf-footer ul li{ margin-bottom:10px; font-size:13px; }
.lf-footer ul li a:hover{ color: var(--lf-white); }
.lf-footer__bottom{ border-top:1px solid rgba(255,255,255,0.08); padding-top:20px; display:flex; justify-content:space-between; font-size:12px; color:var(--lf-gray); flex-wrap:wrap; gap:10px; }
@media (max-width:800px){ .lf-footer__grid{ grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   13. FORMS (contact / quote)
   ========================================================================== */
.lf-form{ display:grid; gap:16px; max-width:560px; }
.lf-form label{ font-size:13px; font-weight:600; color: var(--lf-charcoal); margin-bottom:6px; display:block; }
.lf-form input, .lf-form select, .lf-form textarea{
  width:100%; padding:12px 14px; border:1px solid var(--lf-border); border-radius: var(--lf-radius);
  background: var(--lf-white);
}
.lf-form input:focus, .lf-form select:focus, .lf-form textarea:focus{ outline:none; border-color: var(--lf-orange); }
.lf-form textarea{ min-height:120px; resize:vertical; }
.lf-form-success{ background: rgba(99,153,34,0.1); color:#3B6D11; padding:14px 16px; border-radius: var(--lf-radius); font-size:14px; }
.lf-form-error{ background: rgba(226,75,74,0.08); color:#A32D2D; padding:14px 16px; border-radius: var(--lf-radius); font-size:14px; }

/* ==========================================================================
   14. FAQ ACCORDION
   ========================================================================== */
.lf-faq-item{ border-bottom:1px solid var(--lf-border); }
.lf-faq-item__q{ padding:20px 0; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:600; }
.lf-faq-item__a{ display:none; padding: 0 0 20px; color: var(--lf-gray); font-size:14px; }
.lf-faq-item.is-open .lf-faq-item__a{ display:block; }
.lf-faq-item.is-open .lf-faq-item__q i{ transform: rotate(180deg); }

/* ==========================================================================
   18. WOOCOMMERCE OVERRIDES / MISC
   ========================================================================== */
.lf-hero-slider{ position:relative; min-height:560px; }
.lf-hero-slide{ position:absolute; inset:0; opacity:0; pointer-events:none; transition: opacity 700ms ease; }
.lf-hero-slide.is-active{ position:relative; opacity:1; pointer-events:auto; }
.lf-hero-dots{ position:absolute; bottom:24px; left:0; right:0; display:flex; justify-content:center; gap:10px; z-index:5; }
.lf-hero-dots button{
  width:10px; height:10px; border-radius:50%; border:1px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.15); cursor:pointer; padding:0; transition: background var(--lf-transition), transform var(--lf-transition);
}
.lf-hero-dots button.is-active{ background: var(--lf-orange); border-color: var(--lf-orange); transform: scale(1.15); }

@media (max-width:700px){ .lf-hero-slider{ min-height:460px; } }

/* ==========================================================================
   17. SCROLL-IN ANIMATIONS
   ========================================================================== */
.lf-animate{ opacity:0; transform: translateY(24px); transition: opacity 650ms ease, transform 650ms ease; will-change: opacity, transform; }
.lf-animate.lf-in-view{ opacity:1; transform:none; }
.lf-delay-1{ transition-delay: 120ms; }
.lf-delay-2{ transition-delay: 240ms; }

body.lf-anim-fade .lf-animate{ transform:none; }
body.lf-animations-off .lf-animate,
body.lf-anim-none .lf-animate{ opacity:1 !important; transform:none !important; transition:none !important; }

@media (prefers-reduced-motion: reduce){
  .lf-animate{ opacity:1 !important; transform:none !important; transition:none !important; }
  .lf-hero-slide{ transition:none !important; }
}
.woocommerce-message, .woocommerce-info{ border-top-color: var(--lf-orange) !important; }
.woocommerce-message::before, .woocommerce-info::before{ color: var(--lf-orange) !important; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
  background: var(--lf-orange); color:#fff; border-radius: var(--lf-radius); border:none; font-weight:600;
}
.woocommerce a.button:hover, .woocommerce button.button:hover{ background: var(--lf-orange-dark); color:#fff; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a{ padding:10px 0; display:block; color: var(--lf-charcoal); }
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a{ color: var(--lf-orange); font-weight:600; }
.lf-delay-2{ transition-delay: 240ms; }

body.lf-anim-fade .lf-animate{ transform:none; }
body.lf-animations-off .lf-animate,
body.lf-anim-none .lf-animate{ opacity:1 !important; transform:none !important; transition:none !important; }

@media (prefers-reduced-motion: reduce){
  .lf-animate{ opacity:1 !important; transform:none !important; transition:none !important; }
  .lf-hero-slide{ transition:none !important; }
}
.woocommerce-message, .woocommerce-info{ border-top-color: var(--lf-orange) !important; }
.woocommerce-message::before, .woocommerce-info::before{ color: var(--lf-orange) !important; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
  background: var(--lf-orange); color:#fff; border-radius: var(--lf-radius); border:none; font-weight:600;
}
.woocommerce a.button:hover, .woocommerce button.button:hover{ background: var(--lf-orange-dark); color:#fff; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a{ padding:10px 0; display:block; color: var(--lf-charcoal); }
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a{ color: var(--lf-orange); font-weight:600; }
.lf-delay-2{ transition-delay: 240ms; }

body.lf-anim-fade .lf-animate{ transform:none; }
body.lf-animations-off .lf-animate,
body.lf-anim-none .lf-animate{ opacity:1 !important; transform:none !important; transition:none !important; }

@media (prefers-reduced-motion: reduce){
  .lf-animate{ opacity:1 !important; transform:none !important; transition:none !important; }
  .lf-hero-slide{ transition:none !important; }
}
.woocommerce-message, .woocommerce-info{ border-top-color: var(--lf-orange) !important; }
.woocommerce-message::before, .woocommerce-info::before{ color: var(--lf-orange) !important; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
  background: var(--lf-orange); color:#fff; border-radius: var(--lf-radius); border:none; font-weight:600;
}
.woocommerce a.button:hover, .woocommerce button.button:hover{ background: var(--lf-orange-dark); color:#fff; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a{ padding:10px 0; display:block; color: var(--lf-charcoal); }
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a{ color: var(--lf-orange); font-weight:600; }

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--lf-font-body);
  color: var(--lf-charcoal);
  background: var(--lf-white);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration:none; transition: color var(--lf-transition); }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,h6{
  font-family: var(--lf-font-heading);
  font-weight:600;
  color: var(--lf-black);
  line-height:1.2;
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
}
p{ margin: 0 0 1em; }
button, input, select, textarea{ font-family: inherit; font-size: inherit; }
.screen-reader-text{ position:absolute !important; clip: rect(1px,1px,1px,1px); overflow:hidden; height:1px; width:1px; }

/* ==========================================================================
   3. LAYOUT HELPERS
   ========================================================================== */
.lf-container{
  max-width: var(--lf-container);
  margin: 0 auto;
  padding: 0 24px;
}
.lf-section{ padding: 80px 0; }
.lf-section--tight{ padding: 48px 0; }
.lf-section--dark{ background: var(--lf-black); color: var(--lf-gray-light); }
.lf-section--dark h1, .lf-section--dark h2, .lf-section--dark h3{ color: var(--lf-white); }
.lf-section--light{ background: var(--lf-bg-light); }
.lf-eyebrow{
  display:inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--lf-orange);
  margin-bottom: 14px;
}
.lf-grid{ display:grid; gap: 24px; }
.lf-grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lf-grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lf-grid--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.lf-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 14px 26px;
  border-radius: var(--lf-radius);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  border: 1px solid transparent;
  cursor:pointer;
  transition: all var(--lf-transition);
}
.lf-btn--primary{ background: var(--lf-orange); color: var(--lf-white); }
.lf-btn--primary:hover{ background: var(--lf-orange-dark); color:var(--lf-white); }
.lf-btn--outline-dark{ border-color: rgba(255,255,255,0.3); color: var(--lf-white); background: transparent; }
.lf-btn--outline-dark:hover{ border-color: var(--lf-white); background: rgba(255,255,255,0.06); }
.lf-btn--outline{ border-color: var(--lf-border); color: var(--lf-black); background: transparent; }
.lf-btn--outline:hover{ border-color: var(--lf-charcoal); }
.lf-btn--block{ width:100%; }

/* ==========================================================================
   5. HEADER
   ========================================================================== */
.lf-header{
  position: sticky;
  top:0;
  z-index: 999;
  background: var(--lf-black);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.lf-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
}
.lf-logo{ display:flex; align-items:center; gap:10px; font-family: var(--lf-font-heading); font-weight:700; font-size:18px; color:var(--lf-white); letter-spacing:0.5px; }
.lf-logo img{ height:34px; width:auto; }
.lf-logo .lf-logo__mark{
  width:32px; height:32px; border-radius:6px; background: var(--lf-orange);
  color:var(--lf-black); display:flex; align-items:center; justify-content:center; font-weight:800;
}
.lf-nav{ display:flex; align-items:center; gap:28px; }
.lf-nav a{ color: var(--lf-gray-light); font-size:14px; font-weight:500; }
.lf-nav a:hover, .lf-nav a.current-menu-item-link{ color: var(--lf-white); }
.lf-header__actions{ display:flex; align-items:center; gap:12px; }
.lf-icon-btn{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius: var(--lf-radius);
  border:1px solid rgba(255,255,255,0.15); color: var(--lf-white); position:relative;
}
.lf-icon-btn:hover{ border-color: rgba(255,255,255,0.4); }
.lf-cart-count{
  position:absolute; top:-6px; right:-6px; background: var(--lf-orange); color:#fff;
  font-size:10px; font-weight:700; width:17px; height:17px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.lf-nav-toggle{ display:none; background:none; border:none; color:#fff; font-size:24px; cursor:pointer; }

@media (max-width: 900px){
  .lf-nav{
    position: fixed; top:64px; left:0; right:0; bottom:0;
    background: var(--lf-black); flex-direction:column; align-items:flex-start;
    padding: 24px; gap:18px; transform: translateX(-100%); transition: transform var(--lf-transition);
  }
  .lf-nav.is-open{ transform: translateX(0); }
  .lf-nav-toggle{ display:block; }
  .lf-grid--2, .lf-grid--3, .lf-grid--4{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .lf-grid--2, .lf-grid--3, .lf-grid--4{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   6. HERO
   ========================================================================== */
.lf-hero{
  position:relative;
  min-height: 560px;
  display:flex;
  align-items:center;
  background: var(--lf-black);
  color: var(--lf-white);
  overflow:hidden;
}
.lf-hero__bg{
  position:absolute; inset:0;
  background-size: cover; background-position: center;
  opacity: 0.55;
}
.lf-hero__overlay{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(13,13,13,0.96) 15%, rgba(13,13,13,0.55) 60%, rgba(13,13,13,0.25) 100%);
}
.lf-hero__content{ position:relative; max-width: 560px; }
.lf-hero h1{ font-size: 42px; color:var(--lf-white); margin-bottom:20px; }
.lf-hero p{ font-size:16px; color: var(--lf-gray-light); margin-bottom: 28px; max-width: 460px; }
.lf-hero__actions{ display:flex; gap:14px; flex-wrap:wrap; }

@media (max-width:700px){
  .lf-hero{ min-height:460px; }
  .lf-hero h1{ font-size:30px; }
}

/* ==========================================================================
   7. CATEGORY / APPLICATION CARDS
   ========================================================================== */
.lf-app-card{
  background: var(--lf-white);
  border: 1px solid var(--lf-border);
  border-radius: var(--lf-radius-lg);
  padding: 28px 22px;
  text-align:center;
  transition: transform var(--lf-transition), box-shadow var(--lf-transition);
}
.lf-app-card:hover{ transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,0.06); }
.lf-app-card__icon{
  width:52px; height:52px; margin: 0 auto 16px; border-radius:50%;
  background: rgba(228,41,46,0.08); color: var(--lf-orange);
  display:flex; align-items:center; justify-content:center; font-size:22px;
}
.lf-app-card h3{ font-size:16px; margin-bottom:6px; }
.lf-app-card p{ font-size:13px; color: var(--lf-gray); margin:0; }

/* ==========================================================================
   8. PRODUCT CARDS (WooCommerce loop)
   ========================================================================== */
ul.products{ display:grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:24px; list-style:none; margin:0; padding:0; }
ul.products li.product{
  background: var(--lf-white);
  border: 1px solid var(--lf-border);
  border-radius: var(--lf-radius-lg);
  overflow:hidden;
  transition: box-shadow var(--lf-transition), transform var(--lf-transition);
  position:relative;
  list-style:none;
  width:100% !important;
  float:none !important;
  margin:0 !important;
  min-width:0;
  box-sizing:border-box;
}
ul.products li.product:hover{ box-shadow: 0 16px 32px rgba(0,0,0,0.07); transform: translateY(-3px); }
ul.products li.product a.woocommerce-LoopProduct-link{ display:block; text-decoration:none; color:inherit; }
ul.products li.product img{ width:100%; aspect-ratio: 4/3; object-fit: cover; background: var(--lf-black-soft); }
ul.products li.product .lf-card-body{ padding: 16px 18px 20px; }
ul.products li.product h2, ul.products li.product h3{ font-size:15px; margin:0 0 6px; color: var(--lf-black); }
ul.products li.product .price{ font-size:15px; font-weight:700; color: var(--lf-orange); }
ul.products li.product .price ins{ text-decoration:none; }
ul.products li.product .button{
  display:inline-block; margin-top:12px; font-size:12px; font-weight:600;
  border:1px solid var(--lf-border); border-radius: var(--lf-radius); padding:8px 14px;
}
ul.products li.product .button:hover{ background: var(--lf-black); color:#fff; border-color: var(--lf-black); }
.lf-sku-tag{
  display:inline-block; font-size:11px; font-weight:600; color: var(--lf-gray);
  background: var(--lf-bg-light); padding:3px 8px; border-radius:4px; margin-bottom:8px;
}
@media (max-width:1100px){ ul.products{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width:800px){ ul.products{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width:520px){ ul.products{ grid-template-columns: 1fr; } }

/* ==========================================================================
   9. SINGLE PRODUCT
   ========================================================================== */
.lf-product{ padding: 56px 0 80px; }
.lf-product__grid{ display:grid; grid-template-columns: 1fr 1fr; gap:56px; align-items:flex-start; }
.lf-product__gallery img{ border-radius: var(--lf-radius-lg); background: var(--lf-black-soft); aspect-ratio: 1/1; object-fit:cover; }
.lf-product__summary .lf-sku-tag{ margin-bottom:14px; }
.lf-product__summary h1{ font-size:28px; margin-bottom:10px; }
.lf-product__summary .price{ font-size:24px; font-weight:700; color: var(--lf-orange); margin-bottom: 20px; display:block; }
.lf-spec-table{ width:100%; border-collapse:collapse; margin: 28px 0; font-size:14px; }
.lf-spec-table th, .lf-spec-table td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--lf-border); }
.lf-spec-table th{ width:45%; color: var(--lf-gray); font-weight:500; }
.lf-spec-table td{ font-weight:600; color: var(--lf-black); }
.lf-cert-inline{ display:flex; flex-wrap:wrap; gap:10px; margin: 20px 0; }
.lf-cert-inline span{
  font-size:11px; font-weight:600; color: var(--lf-charcoal); background: var(--lf-bg-light);
  padding:6px 10px; border-radius:6px; display:flex; align-items:center; gap:6px;
}
.lf-quote-btn{ margin-top:10px; }
.lf-add-to-cart-row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.lf-spec-heading{ font-size:18px; margin: 28px 0 4px; }

@media (max-width:900px){ .lf-product__grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   10. CERTIFICATION STRIP
   ========================================================================== */
.lf-cert-strip{ background: var(--lf-black); padding: 26px 0; }
.lf-cert-strip__inner{ display:flex; justify-content:space-around; flex-wrap:wrap; gap:20px; }
.lf-cert-strip__item{ display:flex; align-items:center; gap:8px; font-size:12px; color: var(--lf-gray-light); font-weight:500; }
.lf-cert-strip__item i{ color: var(--lf-orange); font-size:18px; }

/* ==========================================================================
   11. VALUES / ABOUT CARDS
   ========================================================================== */
.lf-value-card{ padding:24px; border-left:3px solid var(--lf-orange); background: var(--lf-bg-light); border-radius: 0 var(--lf-radius) var(--lf-radius) 0; }
.lf-value-card h3{ font-size:16px; margin-bottom:8px; }
.lf-value-card p{ font-size:13px; color: var(--lf-gray); margin:0; }

/* ==========================================================================
   12. FOOTER
   ========================================================================== */
.lf-footer{ background: var(--lf-black); color: var(--lf-gray-light); padding: 56px 0 24px; }
.lf-footer__grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.lf-footer h4{ color: var(--lf-white); font-size:14px; margin-bottom:16px; }
.lf-footer ul li{ margin-bottom:10px; font-size:13px; }
.lf-footer ul li a:hover{ color: var(--lf-white); }
.lf-footer__bottom{ border-top:1px solid rgba(255,255,255,0.08); padding-top:20px; display:flex; justify-content:space-between; font-size:12px; color:var(--lf-gray); flex-wrap:wrap; gap:10px; }
@media (max-width:800px){ .lf-footer__grid{ grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   13. FORMS (contact / quote)
   ========================================================================== */
.lf-form{ display:grid; gap:16px; max-width:560px; }
.lf-form label{ font-size:13px; font-weight:600; color: var(--lf-charcoal); margin-bottom:6px; display:block; }
.lf-form input, .lf-form select, .lf-form textarea{
  width:100%; padding:12px 14px; border:1px solid var(--lf-border); border-radius: var(--lf-radius);
  background: var(--lf-white);
}
.lf-form input:focus, .lf-form select:focus, .lf-form textarea:focus{ outline:none; border-color: var(--lf-orange); }
.lf-form textarea{ min-height:120px; resize:vertical; }
.lf-form-success{ background: rgba(99,153,34,0.1); color:#3B6D11; padding:14px 16px; border-radius: var(--lf-radius); font-size:14px; }
.lf-form-error{ background: rgba(226,75,74,0.08); color:#A32D2D; padding:14px 16px; border-radius: var(--lf-radius); font-size:14px; }

/* ==========================================================================
   14. FAQ ACCORDION
   ========================================================================== */
.lf-faq-item{ border-bottom:1px solid var(--lf-border); }
.lf-faq-item__q{ padding:20px 0; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:600; }
.lf-faq-item__a{ display:none; padding: 0 0 20px; color: var(--lf-gray); font-size:14px; }
.lf-faq-item.is-open .lf-faq-item__a{ display:block; }
.lf-faq-item.is-open .lf-faq-item__q i{ transform: rotate(180deg); }

/* ==========================================================================
   18. WOOCOMMERCE OVERRIDES / MISC
   ========================================================================== */
.lf-hero-slider{ position:relative; min-height:560px; }
.lf-hero-slide{ position:absolute; inset:0; opacity:0; pointer-events:none; transition: opacity 700ms ease; }
.lf-hero-slide.is-active{ position:relative; opacity:1; pointer-events:auto; }
.lf-hero-dots{ position:absolute; bottom:24px; left:0; right:0; display:flex; justify-content:center; gap:10px; z-index:5; }
.lf-hero-dots button{
  width:10px; height:10px; border-radius:50%; border:1px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.15); cursor:pointer; padding:0; transition: background var(--lf-transition), transform var(--lf-transition);
}
.lf-hero-dots button.is-active{ background: var(--lf-orange); border-color: var(--lf-orange); transform: scale(1.15); }

@media (max-width:700px){ .lf-hero-slider{ min-height:460px; } }

/* ==========================================================================
   17. SCROLL-IN ANIMATIONS
   ========================================================================== */
.lf-animate{ opacity:0; transform: translateY(24px); transition: opacity 650ms ease, transform 650ms ease; will-change: opacity, transform; }
.lf-animate.lf-in-view{ opacity:1; transform:none; }
.lf-delay-1{ transition-delay: 120ms; }
.lf-delay-2{ transition-delay: 240ms; }

body.lf-anim-fade .lf-animate{ transform:none; }
body.lf-animations-off .lf-animate,
body.lf-anim-none .lf-animate{ opacity:1 !important; transform:none !important; transition:none !important; }

@media (prefers-reduced-motion: reduce){
  .lf-animate{ opacity:1 !important; transform:none !important; transition:none !important; }
  .lf-hero-slide{ transition:none !important; }
}
.woocommerce-message, .woocommerce-info{ border-top-color: var(--lf-orange) !important; }
.woocommerce-message::before, .woocommerce-info::before{ color: var(--lf-orange) !important; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
  background: var(--lf-orange); color:#fff; border-radius: var(--lf-radius); border:none; font-weight:600;
}
.woocommerce a.button:hover, .woocommerce button.button:hover{ background: var(--lf-orange-dark); color:#fff; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a{ padding:10px 0; display:block; color: var(--lf-charcoal); }
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a{ color: var(--lf-orange); font-weight:600; }


/* ==========================================================================
   LONEFLEX DESIGN POLISH — SEPTEMBER 2026
   ========================================================================== */

/* Keep the global type system clear: Sora for display, Inter for reading. */
body,
p,
input,
textarea,
select,
label,
.woocommerce-result-count,
.woocommerce-ordering,
.lf-form,
.lf-form__note {
  font-family: 'Inter', Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.elementor-location-header,
button,
.lf-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  font-family: 'Sora', Arial, sans-serif;
}

/* Make the header reliable from first paint and keep navigation on-brand. */
.elementor-location-header .elementor-element-d21ff8a {
  background-color: #0D0D0D !important;
}

.elementor-location-header .current-menu-item > a,
.elementor-location-header .current_page_item > a,
.elementor-location-header .active > a {
  color: #F26522 !important;
}

.elementor-location-header a:hover,
.elementor-location-header a:focus-visible {
  color: #F26522 !important;
}

/* WooCommerce adds clearfix pseudo-elements that occupy grid cells. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none !important;
  display: none !important;
}

/* Keep product cards aligned and easy to scan. */
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.woocommerce ul.products li.product .lf-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.woocommerce ul.products li.product .lf-card-body > .woocommerce-LoopProduct-link {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  display: -webkit-box;
  min-height: 4.05em;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.woocommerce ul.products li.product .price {
  margin-top: auto;
  color: #F26522 !important;
  font-weight: 700;
}

.woocommerce ul.products li.product .price del {
  color: #77736B !important;
  opacity: .8;
}

.woocommerce ul.products li.product .price ins {
  color: #F26522 !important;
  text-decoration: none;
}

.woocommerce span.onsale {
  min-width: 52px;
  min-height: 52px;
  padding: 0;
  background: #F26522 !important;
  color: #FFFFFF !important;
  font-family: 'Sora', Arial, sans-serif;
  font-size: 13px;
  line-height: 52px;
}

.woocommerce .woocommerce-ordering select {
  min-height: 44px;
  padding: 0 42px 0 14px;
  border: 1px solid #D8D6CF;
  border-radius: 8px;
  background-color: #FFFFFF;
  color: #202020;
  font-size: 15px;
}

/* Standardise primary actions and improve keyboard visibility. */
.lf-btn--primary,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  border: 1px solid #F26522 !important;
  background: #F26522 !important;
  color: #FFFFFF !important;
}

.lf-btn--primary:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  border-color: #D95516 !important;
  background: #D95516 !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(242, 101, 34, .38);
  outline-offset: 3px;
}

/* Improve form legibility. */
.lf-form label {
  color: #202020;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
}

.lf-form input,
.lf-form textarea,
.lf-form select {
  min-height: 48px;
  font-size: 16px;
}

/* Responsive product grid. */
@media (max-width: 900px) {
  .woocommerce ul.products.columns-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .woocommerce ul.products.columns-4 {
    grid-template-columns: 1fr;
  }

  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    min-height: 0;
  }
}


/* Ensure Elementor page copy follows the approved reading font. */
body p,
body input,
body textarea,
body select,
body label,
body .woocommerce-result-count,
body .woocommerce-ordering {
  font-family: 'Inter', Arial, sans-serif !important;
}