/* ================================================================
   MAF Metallerie - Child Theme Styles v2.1
   Inspired by the ArcelorMittal e-steel industrial design language.
   Clean, modern look with orange accent on white/charcoal palette.
   Parent theme: grainfoodmarket (Anvanto)
   ================================================================ */

/* ================================================================
   0. GLOBAL: Remove all grey backgrounds (parent theme overrides)
   ================================================================ */
.footer-container .links ul > li,
#wrapper,
body#checkout #cart-summary-product-list,
body#checkout section.checkout-step,
.card-block,
.card-body,
.page-my-account #content .links a,
.page-addresses .address,
.address-body,
.page-order-detail #order-products.return,
#order-items,
.page-customer-account #content,
.tag-default,
.jumbotron,
.custom-select,
.bootstrap-touchspin .input-group-btn-vertical,
.btn-tertiary,
#blockcart-modal .cart-content,
.product-line-grid,
.table-striped tbody tr:nth-of-type(odd),
#product .tabs .tab-pane,
.product-cover,
.images-container,
.product-thumbs,
.product-flags li.product-flag.new,
.featured-products,
.product-accessories,
.products-selection,
.block-category,
#search_filters,
.dropdown-item,
.dropdown-menu {
  background-color: #fff !important;
}

/* Keep specific semantic backgrounds */
.alert-success { background-color: #E8F5E9 !important; }
.alert-warning { background-color: #FFF8E1 !important; }
.alert-danger { background-color: #FFEBEE !important; }
.alert-info { background-color: #E3F2FD !important; }


/* ----------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ----------------------------------------------------------------
   Color scheme drawn from the e-steel visual identity:
   - Orange/red primary accent for CTAs and active elements
   - Dark charcoal for readable body text
   - Light neutrals for backgrounds and cards
   ---------------------------------------------------------------- */
:root {
  /* -- Primary palette -- */
  --maf-primary:         #E84E0E;   /* e-steel orange  */
  --maf-primary-dark:    #C74009;   /* darkened hover   */
  --maf-primary-light:   #FF6F33;   /* lighter tint     */

  /* -- Neutral palette -- */
  --maf-charcoal:        #333333;   /* body text        */
  --maf-dark:            #1A1A1A;   /* header / footer  */
  --maf-gray-700:        #555555;
  --maf-gray-500:        #888888;
  --maf-gray-300:        #CCCCCC;
  --maf-gray-200:        #E5E5E5;
  --maf-gray-100:        #F2F2F2;
  --maf-white:           #FFFFFF;

  /* -- Semantic -- */
  --maf-success:         #2E8B57;
  --maf-warning:         #E8A317;
  --maf-danger:          #D32F2F;
  --maf-info:            #1976D2;

  /* -- Gradients (breadcrumb bar) -- */
  --maf-gradient-start:  #E84E0E;
  --maf-gradient-end:    #F7A072;

  /* -- Typography -- */
  --maf-font-family:     'Inter', 'Helvetica Neue', Arial, sans-serif;
  --maf-font-heading:    'Space Grotesk', 'Inter', Arial, sans-serif;
  --maf-font-size-base:  14px;
  --maf-line-height:     1.6;

  /* -- Spacing -- */
  --maf-radius-sm:       3px;
  --maf-radius-md:       5px;
  --maf-radius-lg:       8px;
  --maf-radius-pill:     50px;

  /* -- Shadows -- */
  --maf-shadow-sm:       0 1px 3px rgba(0, 0, 0, 0.08);
  --maf-shadow-md:       0 4px 12px rgba(0, 0, 0, 0.10);
  --maf-shadow-lg:       0 8px 24px rgba(0, 0, 0, 0.12);

  /* -- Transitions -- */
  --maf-transition:      all 0.25s ease;
}


/* ----------------------------------------------------------------
   2. GLOBAL RESET & TYPOGRAPHY
   ---------------------------------------------------------------- */
body {
  font-family: var(--maf-font-family);
  font-size: var(--maf-font-size-base);
  line-height: var(--maf-line-height);
  color: var(--maf-charcoal);
  background-color: var(--maf-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--maf-font-heading);
  font-weight: 700;
  color: var(--maf-charcoal);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Heading font on key UI elements */
.btn,
.btn-primary,
.btn-secondary,
.add-to-cart,
.maf-quote-btn,
.maf-slide-title,
.maf-slide-cta,
.maf-cat-title,
.maf-mega-label,
.product-title,
.product-price,
.breadcrumb,
.maf-variant-group-title,
nav.header-nav {
  font-family: var(--maf-font-heading);
}

/* Orange category / section headers (e-steel style) */
h1.h1,
.page-header h1,
#category #content-wrapper h1,
.products-section-title {
  color: var(--maf-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 1.5rem;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--maf-primary);
  margin-bottom: 20px;
}

a {
  color: var(--maf-primary);
  transition: var(--maf-transition);
}

a:hover,
a:focus {
  color: var(--maf-primary-dark);
  text-decoration: none;
}


/* ----------------------------------------------------------------
   3. HEADER
   ----------------------------------------------------------------
   Dark top bar with white text; clean horizontal layout.
   ---------------------------------------------------------------- */
#header {
  background-color: var(--maf-white);
  box-shadow: var(--maf-shadow-sm);
}

/* Top utility nav bar (single dark bar: contact + account) */
#header .header-nav {
  background-color: var(--maf-dark);
  border-bottom: none;
  padding: 5px 0;
  min-height: auto;
}

#header .header-nav,
#header .header-nav a,
#header .header-nav span {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
}

/* Override header-nav white color inside search dropdown */
#header .header-nav .maf-search-dropdown,
#header .header-nav .maf-search-dropdown a,
#header .header-nav .maf-search-dropdown span {
  color: var(--maf-charcoal);
}

#header .header-nav a:hover {
  color: var(--maf-primary);
}

.maf-utility-bar {
  display: flex;
  align-items: center;
}

.maf-utility-left {
  display: flex;
  align-items: center;
}

.maf-utility-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.maf-utility-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.2s;
}

.maf-utility-link:hover {
  color: var(--maf-primary);
}

.maf-utility-link svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.maf-utility-link:hover svg {
  opacity: 1;
}

.maf-top-sep {
  margin: 0 14px;
  opacity: 0.3;
}

/* Search bar in utility bar */
.maf-utility-search {
  display: flex;
  align-items: center;
  justify-content: center;
}

.maf-search-form {
  position: relative;
  width: 100%;
  max-width: 400px;
}

.maf-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

.maf-search-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--maf-radius-pill);
  color: #fff;
  font-family: var(--maf-font-family);
  font-size: 0.8rem;
  padding: 5px 14px 5px 34px;
  outline: none;
  transition: all 0.25s ease;
}

.maf-search-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.maf-search-input:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--maf-primary);
  box-shadow: 0 0 0 2px rgba(232, 78, 14, 0.2);
}

/* Hide default ps_searchbar from displayTop */
#search_widget {
  display: none;
}

/* ── Search autocomplete dropdown ── */
.maf-search-form {
  position: relative;
}

.maf-search-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--maf-white);
  border: 1px solid var(--maf-gray-200);
  border-radius: var(--maf-radius-md);
  box-shadow: var(--maf-shadow-lg);
  margin-top: 6px;
  z-index: 9999;
  max-height: 420px;
  overflow-y: auto;
  min-width: 360px;
}

.maf-search-dropdown.open {
  display: block;
}

.maf-search-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  text-decoration: none !important;
  color: var(--maf-charcoal) !important;
  border-bottom: 1px solid var(--maf-gray-100);
  transition: background 0.15s;
}

.maf-search-item:last-child {
  border-bottom: none;
}

.maf-search-item:hover {
  background: var(--maf-gray-100);
  color: var(--maf-primary) !important;
}

.maf-search-thumb {
  width: 50px;
  height: 50px;
  object-fit: contain;
  border-radius: var(--maf-radius-sm);
  background: var(--maf-gray-100);
  flex-shrink: 0;
}

.maf-search-no-img {
  display: block;
}

.maf-search-name {
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--maf-charcoal) !important;
}

.maf-search-empty {
  padding: 16px;
  text-align: center;
  color: var(--maf-gray-500) !important;
  font-size: 0.85rem;
}

/* Fix displayNav2 user icon alignment */
#header .header-nav .user-info .material-icons,
#header .header-nav .blockcart .material-icons {
  font-size: 1rem;
  vertical-align: -2px;
  margin-right: 4px;
}

/* Header middle row (logo, search, cart) */
#header .header-top {
  background-color: var(--maf-white);
  padding: 12px 0;
}

#header .header_middle_line {
  align-items: center;
}

/* Logo area */
#header .header-logo img,
#header .an_logo img {
  max-height: 65px;
  width: auto;
}

/* MAF SVG Logo */
.maf-logo {
  display: block;
  height: 50px;
  width: auto;
}

.maf-logo-h1 {
  margin: 0;
  padding: 0;
  line-height: 1;
  border: none;
}

#_desktop_logo a {
  text-decoration: none;
}

/* Cart icon area */
#header .header-right .cart-preview,
#header .blockcart {
  color: var(--maf-charcoal);
}

#header .header-right .cart-preview .header span.cart-products-count,
#header .blockcart .header span.cart-products-count {
  background-color: var(--maf-primary);
  color: var(--maf-white);
}


/* ----------------------------------------------------------------
   4. MAIN NAVIGATION — MAF Mega Menu (e-steel style)
   ----------------------------------------------------------------
   Full-width dropdown with column layout per subcategory.
   Orange accent on hover, clean industrial look.
   ---------------------------------------------------------------- */

/* --- Wrapper & nav bar --- */
.maf-megamenu-wrapper,
.navigation,
#header .header-top .navigation {
  background-color: var(--maf-white);
  border-top: 1px solid var(--maf-gray-200);
  border-bottom: 1px solid var(--maf-gray-200);
}

.maf-megamenu {
  max-width: 1260px;
  margin: 0 auto;
  position: relative;
}

/* --- Top-level nav items --- */
.maf-mega-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.maf-mega-top {
  position: static;  /* dropdown relative to nav bar, not item */
}

.maf-mega-top-link {
  display: block;
  color: var(--maf-charcoal) !important;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.8px;
  padding: 14px 18px !important;
  text-decoration: none !important;
  position: relative;
  transition: var(--maf-transition);
}

/* Orange underline indicator on hover */
.maf-mega-top-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 3px;
  background-color: var(--maf-primary);
  transition: width 0.3s ease, left 0.3s ease;
  transform: translateX(-50%);
}

.maf-mega-top:hover > .maf-mega-top-link::after,
.maf-mega-top.current > .maf-mega-top-link::after {
  width: 100%;
}

.maf-mega-top:hover > .maf-mega-top-link,
.maf-mega-top.current > .maf-mega-top-link {
  color: var(--maf-primary) !important;
}

/* --- Full-width dropdown panel --- */
.maf-mega-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  background: var(--maf-white);
  border-top: 3px solid var(--maf-primary);
  box-shadow: var(--maf-shadow-lg);
  padding: 24px 32px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.maf-mega-top:hover > .maf-mega-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* --- Inner layout: image + columns --- */
.maf-mega-inner {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  max-width: 1260px;
  margin: 0 auto;
}

/* Category image (e-steel style) */
.maf-mega-img {
  flex: 0 0 160px;
  width: 160px;
  height: 130px;
  overflow: hidden;
  border-radius: var(--maf-radius-md);
}

.maf-mega-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Column layout inside dropdown --- */
.maf-mega-columns {
  display: flex;
  gap: 40px;
  flex: 1;
}

.maf-mega-col {
  min-width: 140px;
  flex: 0 1 auto;
}

/* Sub-category title (orange, bold, uppercase) */
.maf-mega-col-title {
  display: block;
  color: var(--maf-primary) !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--maf-gray-200);
  text-decoration: none !important;
  transition: var(--maf-transition);
}

.maf-mega-col-title:hover {
  color: var(--maf-primary-dark) !important;
}

/* Product / sub-item links */
.maf-mega-sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.maf-mega-sublist li {
  margin-bottom: 6px;
}

.maf-mega-sublink {
  color: var(--maf-charcoal) !important;
  font-weight: 400;
  font-size: 0.85rem;
  text-decoration: none !important;
  transition: var(--maf-transition);
  padding: 2px 0;
  display: inline-block;
}

.maf-mega-sublink:hover {
  color: var(--maf-primary) !important;
  padding-left: 4px;
}

/* --- Legacy selectors for compatibility --- */
#top-menu,
.top-menu {
  display: none;
}

.maf-megamenu-wrapper ~ .menu.js-top-menu {
  display: none;
}

/* Hide the old popover sub-menu style */
.popover.sub-menu {
  display: none !important;
}


/* ----------------------------------------------------------------
   5. SEARCH BAR
   ---------------------------------------------------------------- */
#search_widget form input[type="text"],
#search_widget input[type="text"] {
  border: 2px solid var(--maf-gray-300);
  border-radius: var(--maf-radius-pill);
  padding: 8px 16px;
  font-size: 0.9rem;
  transition: var(--maf-transition);
  background-color: var(--maf-white);
}

#search_widget form input[type="text"]:focus,
#search_widget input[type="text"]:focus {
  border-color: var(--maf-primary);
  box-shadow: 0 0 0 2px rgba(232, 78, 14, 0.15);
  outline: none;
}

#search_widget button,
#search_widget form button {
  background-color: var(--maf-primary);
  border-color: var(--maf-primary);
  color: var(--maf-white);
  border-radius: 0 var(--maf-radius-pill) var(--maf-radius-pill) 0;
  transition: var(--maf-transition);
}

#search_widget button:hover {
  background-color: var(--maf-primary-dark);
  border-color: var(--maf-primary-dark);
}


/* ----------------------------------------------------------------
   6. BREADCRUMB BAR
   ----------------------------------------------------------------
   Orange-to-peach gradient background as seen on e-steel.
   White text on the gradient bar.
   ---------------------------------------------------------------- */
.breadcrumb {
  background: #f8f8f8;
  border-bottom: none;
  padding: 10px 15px;
  margin-bottom: 0;
  border-radius: var(--maf-radius-md);
}

.breadcrumb ol {
  margin-bottom: 0;
}

.breadcrumb li {
  display: inline;
}

.breadcrumb li a,
.breadcrumb li span {
  color: var(--maf-charcoal) !important;
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
}

.breadcrumb li a:hover {
  color: var(--maf-primary) !important;
  text-decoration: underline;
}

/* Separator arrows */
.breadcrumb li::after,
.breadcrumb li + li::before {
  color: var(--maf-gray-500);
}

.breadcrumb li:last-child a,
.breadcrumb li:last-child span {
  color: var(--maf-charcoal) !important;
  font-weight: 600;
}


/* ----------------------------------------------------------------
   7. BUTTONS & CALLS-TO-ACTION
   ----------------------------------------------------------------
   Orange buttons with arrow icons; industrial and bold.
   ---------------------------------------------------------------- */

/* -- Primary button (add to cart, main CTAs) -- */
.btn-primary,
.add-to-cart,
.btn[data-button-action],
#content .btn-primary {
  background-color: var(--maf-primary) !important;
  border-color: var(--maf-primary) !important;
  color: var(--maf-white) !important;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.8px;
  border-radius: var(--maf-radius-sm);
  padding: 10px 24px;
  transition: var(--maf-transition);
  position: relative;
  overflow: hidden;
}

.btn-primary:hover,
.add-to-cart:hover,
.btn[data-button-action]:hover,
#content .btn-primary:hover {
  background-color: var(--maf-primary-dark) !important;
  border-color: var(--maf-primary-dark) !important;
  color: var(--maf-white) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(232, 78, 14, 0.35);
}

.btn-primary:active,
.add-to-cart:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Arrow icon after CTA buttons (e-steel pattern) */
.add-to-cart .material-icons,
.add-to-cart i {
  margin-left: 6px;
  transition: transform 0.2s ease;
}

.add-to-cart:hover .material-icons,
.add-to-cart:hover i {
  transform: translateX(3px);
}

/* -- Secondary / outline button -- */
.btn-secondary,
.btn-outline-primary {
  background-color: transparent !important;
  border: 2px solid var(--maf-primary) !important;
  color: var(--maf-primary) !important;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: var(--maf-radius-sm);
  transition: var(--maf-transition);
}

.btn-secondary:hover,
.btn-outline-primary:hover {
  background-color: var(--maf-primary) !important;
  color: var(--maf-white) !important;
}

/* -- Tertiary / link button -- */
.btn-tertiary,
a.btn-link {
  color: var(--maf-primary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: var(--maf-transition);
}

.btn-tertiary:hover,
a.btn-link:hover {
  border-bottom-color: var(--maf-primary);
}


/* ----------------------------------------------------------------
   8. PRODUCT LISTING GRID
   ----------------------------------------------------------------
   Clean card-based grid with subtle borders and hover lift.
   ---------------------------------------------------------------- */
#products .products,
.featured-products .products,
.product-accessories .products {
  display: flex;
  flex-wrap: wrap;
}

.product-miniature {
  border: 1px solid var(--maf-gray-200);
  border-radius: var(--maf-radius-md);
  background: var(--maf-white);
  transition: var(--maf-transition);
  overflow: hidden;
  margin-bottom: 20px;
}

.product-miniature:hover {
  box-shadow: var(--maf-shadow-md);
  border-color: var(--maf-gray-300);
  transform: translateY(-3px);
}

/* Product image container */
.product-miniature .thumbnail-container,
.product-miniature .product-thumbnail {
  position: relative;
  overflow: hidden;
  background-color: var(--maf-gray-100);
  border-bottom: 2px solid var(--maf-gray-200);
}

.product-miniature .thumbnail-container img,
.product-miniature .product-thumbnail img {
  transition: transform 0.4s ease;
  display: block;
  width: 100%;
  object-fit: contain;
  aspect-ratio: 4 / 3;
}

.product-miniature:hover .thumbnail-container img,
.product-miniature:hover .product-thumbnail img {
  transform: scale(1.03);
}

/* Product info section below image */
.product-miniature .product-description {
  padding: 16px 16px 18px;
}

.product-miniature .product-title {
  margin-bottom: 6px;
}

.product-miniature .product-title a {
  color: var(--maf-charcoal);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.35;
  text-transform: none;
  transition: var(--maf-transition);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-miniature .product-title a:hover {
  color: var(--maf-primary);
}

/* Product reference in listing - more discreet */
.product-miniature .maf-product-ref {
  font-size: 0.72rem;
  color: var(--maf-gray-500);
  font-weight: 500;
  letter-spacing: 0.3px;
  opacity: 0.75;
}

/* Prices */
.product-miniature .price,
.product-miniature .product-price-and-shipping .price {
  color: var(--maf-primary);
  font-weight: 700;
  font-size: 1.1rem;
}

.product-miniature .regular-price {
  color: var(--maf-gray-500);
  font-size: 0.85rem;
  text-decoration: line-through;
}

/* Discount badge */
.product-miniature .product-flags li.discount,
.product-miniature .product-flag.discount,
.product-miniature .discount-percentage,
.product-miniature .discount-amount {
  background-color: var(--maf-primary);
  color: var(--maf-white);
  font-weight: 700;
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: var(--maf-radius-sm);
}

/* Quick-view & variant links overlay */
.product-miniature .highlighted-informations {
  background-color: rgba(232, 78, 14, 0.95);
  transition: var(--maf-transition);
}

.product-miniature .highlighted-informations a,
.product-miniature .highlighted-informations .quick-view {
  color: var(--maf-white);
}

/* Variant color swatches on product cards */
.product-miniature .variant-links a {
  border: 2px solid var(--maf-gray-300);
  transition: var(--maf-transition);
}

.product-miniature .variant-links a:hover,
.product-miniature .variant-links a.active {
  border-color: var(--maf-primary);
  box-shadow: 0 0 0 1px var(--maf-primary);
}

/* Product flags (new, sale, etc.) */
.product-flags li {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: var(--maf-radius-sm);
  margin-bottom: 4px;
}

.product-flags .new {
  background-color: var(--maf-primary);
  color: var(--maf-white);
}

.product-flags .on-sale {
  background-color: var(--maf-danger);
  color: var(--maf-white);
}

.product-flags .pack {
  background-color: var(--maf-info);
  color: var(--maf-white);
}


/* ----------------------------------------------------------------
   9. PRODUCT DETAIL PAGE
   ---------------------------------------------------------------- */

/* Product title on detail page */
.product-container h1.h1,
#content .h1[itemprop="name"] {
  color: var(--maf-charcoal);
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: none;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 10px;
}

/* Price block */
.product-prices .current-price,
.product-prices .current-price span {
  color: var(--maf-primary);
  font-size: 1.8rem;
  font-weight: 700;
}

.product-prices .tax-shipping-delivery-label {
  color: var(--maf-gray-500);
  font-size: 0.8rem;
}

/* Product reference / SKU */
.product-reference span,
.product-reference .label {
  color: var(--maf-gray-500);
  font-weight: 600;
  font-size: 0.85rem;
}

/* Product availability */
.product-availability .product-available {
  color: var(--maf-success);
  font-weight: 600;
}

.product-availability .product-unavailable,
.product-availability .product-last-items {
  color: var(--maf-warning);
  font-weight: 600;
}

/* Quantity selector */
.product-quantity #quantity_wanted {
  border: 2px solid var(--maf-gray-300);
  border-radius: var(--maf-radius-sm);
  text-align: center;
  font-weight: 600;
  width: 70px;
  height: 44px;
}

.product-quantity .qty .input-group .input-group-btn .btn {
  background-color: var(--maf-white);
  border-color: var(--maf-gray-300);
  color: var(--maf-charcoal);
  transition: var(--maf-transition);
}

.product-quantity .qty .input-group .input-group-btn .btn:hover {
  background-color: var(--maf-primary);
  border-color: var(--maf-primary);
  color: var(--maf-white);
}


/* ----------------------------------------------------------------
   9a. PRODUCT VARIANT CHIP SELECTORS
   ----------------------------------------------------------------
   Pill / chip button style for attribute selectors
   (e-steel uses clickable pills for dimensions, grades, etc.)
   ---------------------------------------------------------------- */
.product-variants {
  margin: 15px 0;
}

.product-variants .product-variants-item {
  margin-bottom: 15px;
}

.product-variants .product-variants-item .control-label {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--maf-charcoal);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

/* Select dropdown styled */
.product-variants select {
  border: 2px solid var(--maf-gray-300);
  border-radius: var(--maf-radius-sm);
  padding: 8px 12px;
  font-size: 0.9rem;
  color: var(--maf-charcoal);
  background-color: var(--maf-white);
  cursor: pointer;
  transition: var(--maf-transition);
  min-width: 200px;
}

.product-variants select:focus {
  border-color: var(--maf-primary);
  box-shadow: 0 0 0 2px rgba(232, 78, 14, 0.15);
  outline: none;
}

/* Radio-type attribute selectors as pill/chip buttons */
.product-variants ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-variants ul li.input-container {
  margin: 0;
  float: none !important;
}

/* Radio pill chips */
.product-variants .input-container .radio-label {
  display: inline-block;
  padding: 6px 16px;
  border: 2px solid var(--maf-gray-300);
  border-radius: var(--maf-radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--maf-charcoal);
  background-color: var(--maf-white);
  cursor: pointer;
  transition: var(--maf-transition);
  line-height: 1.4;
  text-align: center;
  min-width: 50px;
}

.product-variants .input-container .radio-label:hover {
  border-color: var(--maf-primary);
  color: var(--maf-primary);
}

.product-variants .input-container input.input-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Active/checked state: filled orange chip */
.product-variants .input-container input.input-radio:checked + .radio-label,
.product-variants .input-container.input-container-checked .radio-label {
  background-color: var(--maf-primary);
  border-color: var(--maf-primary);
  color: var(--maf-white);
}

/* Color swatch variants */
.product-variants .input-container .color {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-block;
  border: 2px solid var(--maf-gray-300);
  cursor: pointer;
  transition: var(--maf-transition);
}

.product-variants .input-container .color:hover,
.product-variants .input-container.input-container-checked .color {
  border-color: var(--maf-primary);
  box-shadow: 0 0 0 2px var(--maf-primary);
}

.product-variants .input-container .color.color-white {
  border-color: var(--maf-gray-300);
}


/* ----------------------------------------------------------------
   9b. PRODUCT TABS (Description, Details, etc.)
   ---------------------------------------------------------------- */
.product-container .tabs .nav-tabs,
.tabs .nav-tabs {
  border-bottom: 2px solid var(--maf-gray-200);
}

.tabs .nav-tabs .nav-item .nav-link {
  color: var(--maf-gray-500);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 10px 20px;
  margin-bottom: -2px;
  transition: var(--maf-transition);
}

.tabs .nav-tabs .nav-item .nav-link:hover {
  color: var(--maf-charcoal);
  border-bottom-color: var(--maf-gray-300);
}

.tabs .nav-tabs .nav-item .nav-link.active {
  color: var(--maf-primary);
  border-bottom-color: var(--maf-primary);
  background-color: transparent;
}

.tab-content {
  padding: 20px 0;
}


/* ----------------------------------------------------------------
   10. CATEGORY PAGE & LEFT SIDEBAR
   ---------------------------------------------------------------- */

/* Category header banner area */
#category #content-wrapper .block-category {
  margin-bottom: 20px;
}

#category #content-wrapper .block-category .category-cover {
  border-radius: var(--maf-radius-md);
  overflow: hidden;
}

/* Sidebar filter blocks */
#left-column {
  padding-right: 20px;
}

#left-column .block-categories .category-sub-menu {
  padding: 0;
}

#left-column .block-categories .category-sub-menu li {
  border-bottom: 1px solid var(--maf-gray-200);
}

#left-column .block-categories .category-sub-menu li a {
  color: var(--maf-charcoal);
  font-weight: 500;
  font-size: 0.9rem;
  padding: 8px 0;
  display: block;
  transition: var(--maf-transition);
}

#left-column .block-categories .category-sub-menu li a:hover,
#left-column .block-categories .category-sub-menu li.current a {
  color: var(--maf-primary);
  padding-left: 5px;
}

/* Faceted search filters */
#search_filters .facet .facet-title {
  color: var(--maf-charcoal);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--maf-gray-200);
  padding-bottom: 8px;
  margin-bottom: 10px;
}

#search_filters .facet .facet-label a {
  color: var(--maf-charcoal);
  font-size: 0.85rem;
}

#search_filters .facet .facet-label a:hover {
  color: var(--maf-primary);
}

/* Active filter checkboxes */
#search_filters .facet .custom-checkbox input[type="checkbox"]:checked + span {
  background-color: var(--maf-primary);
  border-color: var(--maf-primary);
}

/* Active filter pills */
#js-active-search-filters {
  margin-bottom: 15px;
}

#js-active-search-filters .filter-block {
  display: inline-block;
  background-color: var(--maf-primary);
  color: var(--maf-white);
  padding: 4px 12px;
  border-radius: var(--maf-radius-pill);
  font-size: 0.8rem;
  font-weight: 600;
  margin: 2px;
}

#js-active-search-filters .filter-block .close {
  color: var(--maf-white);
  opacity: 0.8;
  margin-left: 6px;
}


/* ----------------------------------------------------------------
   11. CATEGORY CARDS (subcategory grid)
   ----------------------------------------------------------------
   Clean bordered cards with centered content.
   ---------------------------------------------------------------- */
.subcategories .subcategory-image {
  border: 1px solid var(--maf-gray-200);
  border-radius: var(--maf-radius-md);
  overflow: hidden;
  transition: var(--maf-transition);
}

.subcategories .subcategory-image:hover {
  box-shadow: var(--maf-shadow-md);
  border-color: var(--maf-primary);
}

.subcategories .subcategory-name a {
  color: var(--maf-charcoal);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  transition: var(--maf-transition);
}

.subcategories .subcategory-name a:hover {
  color: var(--maf-primary);
}


/* ----------------------------------------------------------------
   12. CART & CHECKOUT
   ---------------------------------------------------------------- */
.cart-grid .cart-items .cart-item {
  border-bottom: 1px solid var(--maf-gray-200);
  padding: 15px 0;
}

.cart-grid .cart-summary {
  background-color: var(--maf-white);
  border-radius: var(--maf-radius-md);
  padding: 20px;
}

.cart-grid .cart-summary .cart-summary-line {
  padding: 8px 0;
  border-bottom: 1px solid var(--maf-gray-200);
}

.cart-grid .cart-summary .cart-total .value {
  color: var(--maf-primary);
  font-weight: 700;
  font-size: 1.3rem;
}

/* Checkout button */
.cart-grid .checkout a.btn,
.cart-detailed-actions a.btn {
  background-color: var(--maf-primary) !important;
  border-color: var(--maf-primary) !important;
  color: var(--maf-white) !important;
  width: 100%;
  text-transform: uppercase;
  font-weight: 700;
  padding: 12px;
  border-radius: var(--maf-radius-sm);
}

.cart-grid .checkout a.btn:hover,
.cart-detailed-actions a.btn:hover {
  background-color: var(--maf-primary-dark) !important;
  border-color: var(--maf-primary-dark) !important;
}


/* ----------------------------------------------------------------
   13. FOOTER
   ----------------------------------------------------------------
   Dark charcoal background; clean grid layout with orange accents.
   ---------------------------------------------------------------- */
#footer {
  background-color: var(--maf-dark);
  color: rgba(255, 255, 255, 0.75);
  margin-top: 40px;
}

#footer .footer-container {
  border-top: 4px solid var(--maf-primary);
  padding-top: 40px;
  padding-bottom: 30px;
}

/* Footer headings */
#footer h4,
#footer .h4,
#footer .footer-container .links .title {
  color: var(--maf-white);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.8px;
  margin-bottom: 15px;
}

/* Footer links */
#footer a {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.85rem;
  transition: var(--maf-transition);
}

#footer a:hover {
  color: var(--maf-primary);
  padding-left: 3px;
}

/* Footer list items */
#footer .links ul li {
  padding: 4px 0;
}

/* Newsletter subscription */
#footer .block_newsletter form input[type="email"] {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--maf-white);
  border-radius: var(--maf-radius-sm) 0 0 var(--maf-radius-sm);
  padding: 10px 14px;
}

#footer .block_newsletter form input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

#footer .block_newsletter form input[type="email"]:focus {
  border-color: var(--maf-primary);
  background-color: rgba(255, 255, 255, 0.12);
}

#footer .block_newsletter form input[type="submit"],
#footer .block_newsletter form .btn {
  background-color: var(--maf-primary);
  border-color: var(--maf-primary);
  color: var(--maf-white);
  border-radius: 0 var(--maf-radius-sm) var(--maf-radius-sm) 0;
  text-transform: uppercase;
  font-weight: 700;
  transition: var(--maf-transition);
}

#footer .block_newsletter form input[type="submit"]:hover,
#footer .block_newsletter form .btn:hover {
  background-color: var(--maf-primary-dark);
  border-color: var(--maf-primary-dark);
}

/* Copyright bar */
.copyright-container {
  background-color: #111111;
  padding: 15px 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}

.copyright-container a {
  color: rgba(255, 255, 255, 0.5);
}

.copyright-container a:hover {
  color: var(--maf-primary);
}


/* ----------------------------------------------------------------
   14. FORMS & INPUTS (account, contact, login)
   ---------------------------------------------------------------- */
.form-control,
input.form-control,
textarea.form-control,
select.form-control {
  border: 1px solid var(--maf-gray-300);
  border-radius: var(--maf-radius-sm);
  padding: 10px 14px;
  font-size: 0.9rem;
  transition: var(--maf-transition);
}

.form-control:focus {
  border-color: var(--maf-primary);
  box-shadow: 0 0 0 2px rgba(232, 78, 14, 0.12);
  outline: none;
}

label,
.form-group label {
  font-weight: 600;
  color: var(--maf-charcoal);
  font-size: 0.85rem;
  margin-bottom: 5px;
}

/* Custom checkbox (e-steel uses orange checkmarks) */
.custom-checkbox input[type="checkbox"]:checked + span {
  background-color: var(--maf-primary);
  border-color: var(--maf-primary);
}

/* Custom radio */
.custom-radio input[type="radio"]:checked + span {
  border-color: var(--maf-primary);
}

.custom-radio input[type="radio"]:checked + span::after {
  background-color: var(--maf-primary);
}


/* ----------------------------------------------------------------
   15. ALERTS & NOTIFICATIONS
   ---------------------------------------------------------------- */
.alert-success {
  background-color: #E8F5E9;
  border-color: var(--maf-success);
  color: #2E7D32;
}

.alert-warning {
  background-color: #FFF8E1;
  border-color: var(--maf-warning);
  color: #F57F17;
}

.alert-danger {
  background-color: #FFEBEE;
  border-color: var(--maf-danger);
  color: #C62828;
}

.alert-info {
  background-color: #E3F2FD;
  border-color: var(--maf-info);
  color: #1565C0;
}


/* ----------------------------------------------------------------
   16. PAGINATION
   ---------------------------------------------------------------- */
.pagination .page-list li {
  margin: 0 2px;
}

.pagination .page-list li a,
.pagination .page-list li span {
  border: 1px solid var(--maf-gray-300);
  border-radius: var(--maf-radius-sm);
  color: var(--maf-charcoal);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 6px 12px;
  transition: var(--maf-transition);
}

.pagination .page-list li a:hover {
  background-color: var(--maf-primary);
  border-color: var(--maf-primary);
  color: var(--maf-white);
}

.pagination .page-list li.current a,
.pagination .page-list li.active a {
  background-color: var(--maf-primary);
  border-color: var(--maf-primary);
  color: var(--maf-white);
}

/* Previous / Next links */
.pagination a.previous,
.pagination a.next {
  color: var(--maf-primary);
  font-weight: 700;
}

.pagination a.previous:hover,
.pagination a.next:hover {
  color: var(--maf-primary-dark);
}


/* ----------------------------------------------------------------
   17. PRODUCT ACCESSORIES / RELATED PRODUCTS
   ---------------------------------------------------------------- */
.product-accessories .product-accessories-title,
.featured-products .products-section-title {
  color: var(--maf-primary);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.1rem;
  border-bottom: 2px solid var(--maf-primary);
  padding-bottom: 10px;
  margin-bottom: 20px;
}


/* ----------------------------------------------------------------
   18. CARDS & PANELS (generic)
   ---------------------------------------------------------------- */
.card {
  border: 1px solid var(--maf-gray-200);
  border-radius: var(--maf-radius-md);
  box-shadow: none;
  transition: var(--maf-transition);
}

.card:hover {
  box-shadow: var(--maf-shadow-sm);
}

.card-block,
.card-body {
  border-radius: var(--maf-radius-md);
}

hr {
  border-top-color: var(--maf-gray-200);
}


/* ----------------------------------------------------------------
   19. WISHLIST (an_wishlist module)
   ---------------------------------------------------------------- */
.wishlist-button-add .material-icons,
.an_wishlist-add-to i {
  color: var(--maf-gray-500);
  transition: var(--maf-transition);
}

.wishlist-button-add:hover .material-icons,
.an_wishlist-add-to:hover i {
  color: var(--maf-primary);
}

.wishlist-button-add.added .material-icons,
.an_wishlist-add-to.added i {
  color: var(--maf-primary);
}


/* ----------------------------------------------------------------
   20. SCROLL-TO-TOP BUTTON
   ---------------------------------------------------------------- */
.an_scrolltop,
.scroll-to-top {
  background-color: var(--maf-primary) !important;
  color: var(--maf-white) !important;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  box-shadow: var(--maf-shadow-md);
  transition: var(--maf-transition);
}

.an_scrolltop:hover,
.scroll-to-top:hover {
  background-color: var(--maf-primary-dark) !important;
  transform: translateY(-3px);
}


/* ----------------------------------------------------------------
   21. STICKY ADD-TO-CART BAR (an_stickyaddtocart)
   ---------------------------------------------------------------- */
.an_stickyaddtocart {
  background-color: var(--maf-white);
  border-top: 2px solid var(--maf-primary);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
}

.an_stickyaddtocart .add-to-cart {
  background-color: var(--maf-primary) !important;
  border-color: var(--maf-primary) !important;
}


/* ----------------------------------------------------------------
   22. MOBILE HEADER & MENU
   ---------------------------------------------------------------- */
#header .header-nav .mobile-header {
  padding: 10px 0;
}

#header .header-nav #menu-icon i {
  color: var(--maf-white);
  font-size: 1.4rem;
}

.amegamenu_mobile-modal {
  background-color: var(--maf-white);
}

.amegamenu_mobile-modal .an_megamenu > li > a {
  color: var(--maf-charcoal) !important;
  font-weight: 600;
  border-bottom: 1px solid var(--maf-gray-200);
  padding: 12px 15px !important;
}

.amegamenu_mobile-modal .an_megamenu > li > a:hover {
  color: var(--maf-primary) !important;
}

/* Mobile filter bar */
.search_filters_mobile-modal {
  background-color: var(--maf-white);
}


/* ----------------------------------------------------------------
   23. RESPONSIVE ADJUSTMENTS
   ---------------------------------------------------------------- */

/* -- Tablets (max-width: 991px) -- */
@media (max-width: 991px) {
  h1.h1,
  .page-header h1,
  .products-section-title {
    font-size: 1.3rem;
  }

  .product-prices .current-price,
  .product-prices .current-price span {
    font-size: 1.5rem;
  }

  .breadcrumb {
    padding: 8px 0;
  }

  .breadcrumb li a,
  .breadcrumb li span {
    font-size: 0.78rem;
  }

  #left-column {
    padding-right: 15px;
  }

  /* Stack nav bar items vertically on tablet */
  .an_megamenu-container .an_megamenu > li > a {
    padding: 10px 12px !important;
    font-size: 0.8rem;
  }
}

/* -- Mobile (max-width: 767px) -- */
@media (max-width: 767px) {
  body {
    font-size: 13px;
  }

  h1.h1,
  .page-header h1,
  .products-section-title {
    font-size: 1.15rem;
    margin-bottom: 15px;
    padding-bottom: 8px;
  }

  /* Breadcrumb compact on mobile */
  .breadcrumb {
    padding: 6px 0;
  }

  .breadcrumb li a,
  .breadcrumb li span {
    font-size: 0.72rem;
  }

  /* Product cards: 2-column on mobile */
  .product-miniature {
    margin-bottom: 12px;
  }

  .product-miniature .product-description {
    padding: 8px 10px 12px;
  }

  .product-miniature .product-title a {
    font-size: 0.82rem;
  }

  .product-miniature .price {
    font-size: 1rem;
  }

  /* Product detail adjustments */
  .product-prices .current-price,
  .product-prices .current-price span {
    font-size: 1.4rem;
  }

  /* Variant chips stack nicely */
  .product-variants ul {
    gap: 6px;
  }

  .product-variants .input-container .radio-label {
    padding: 5px 12px;
    font-size: 0.8rem;
  }

  /* Tabs become scrollable on mobile */
  .tabs .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tabs .nav-tabs .nav-item .nav-link {
    padding: 8px 14px;
    font-size: 0.8rem;
    white-space: nowrap;
  }

  /* Footer adjustments */
  #footer .footer-container {
    padding-top: 25px;
  }

  #footer a {
    font-size: 0.82rem;
  }

  /* Buttons full width on mobile */
  .add-to-cart,
  .btn-primary {
    width: 100%;
    text-align: center;
  }
}

/* -- Small mobile (max-width: 479px) -- */
@media (max-width: 479px) {
  .product-variants .input-container .radio-label {
    padding: 4px 10px;
    font-size: 0.75rem;
    min-width: 40px;
  }

  .product-miniature .product-title a {
    font-size: 0.78rem;
  }

  .product-prices .current-price,
  .product-prices .current-price span {
    font-size: 1.2rem;
  }
}


/* ----------------------------------------------------------------
   24. UTILITY CLASSES
   ---------------------------------------------------------------- */
.text-primary {
  color: var(--maf-primary) !important;
}

.bg-primary {
  background-color: var(--maf-primary) !important;
}

.border-primary {
  border-color: var(--maf-primary) !important;
}

/* Industrial divider line */
.maf-divider {
  height: 3px;
  background: linear-gradient(90deg, var(--maf-primary), transparent);
  border: none;
  margin: 20px 0;
}

/* Section spacing helper */
.maf-section {
  padding: 40px 0;
}

@media (max-width: 767px) {
  .maf-section {
    padding: 25px 0;
  }
}


/* ----------------------------------------------------------------
   25. PRINT STYLES
   ---------------------------------------------------------------- */
@media print {
  #header,
  #footer,
  .breadcrumb,
  .an_scrolltop,
  .an_stickyaddtocart {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  .product-prices .current-price,
  .product-prices .current-price span {
    color: #000;
  }
}

/* ================================================================
   26. MAF HERO BANNER
   ================================================================ */
.maf-hero {
  background: linear-gradient(135deg, var(--maf-dark) 0%, #2a2a2a 100%);
  padding: 60px 20px;
  text-align: center;
  color: var(--maf-white);
  margin-bottom: 0;
}

.maf-hero h1 {
  color: var(--maf-white);
  font-size: 2.5rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
  border-bottom: none;
  padding-bottom: 0;
}

.maf-hero-tagline {
  font-size: 1.2rem;
  color: var(--maf-primary);
  font-weight: 600;
  margin-bottom: 5px;
}

.maf-hero-subtitle {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.7);
}

/* ================================================================
   27. CATEGORY CARDS GRID (Homepage)
   ================================================================ */
.maf-section {
  padding: 40px 20px;
}

.maf-section-title {
  text-align: center;
  color: var(--maf-charcoal);
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 30px;
  position: relative;
}

.maf-section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--maf-primary);
  margin: 10px auto 0;
}

.maf-category-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.maf-category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 15px 20px;
  border: 1px solid var(--maf-gray-200);
  border-top: 3px solid var(--maf-primary);
  border-radius: var(--maf-radius-md);
  background: var(--maf-white);
  text-decoration: none;
  transition: var(--maf-transition);
  text-align: center;
}

.maf-category-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--maf-shadow-lg);
  border-color: var(--maf-primary);
  text-decoration: none;
}

.maf-category-card .maf-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 15px;
}

.maf-category-card .maf-icon svg {
  width: 100%;
  height: 100%;
}

.maf-category-card h3 {
  color: var(--maf-charcoal);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 8px;
}

.maf-category-card:hover h3 {
  color: var(--maf-primary);
}

.maf-card-arrow {
  color: var(--maf-primary);
  font-size: 1.2rem;
  font-weight: 700;
  transition: transform 0.2s ease;
}

.maf-category-card:hover .maf-card-arrow {
  transform: translateX(5px);
}

/* ================================================================
   28. SVG PLACEHOLDERS (Products without images)
   ================================================================ */
.maf-svg-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--maf-gray-100);
  border: 1px dashed var(--maf-gray-300);
  border-radius: var(--maf-radius-md);
  min-height: 200px;
  padding: 20px;
}

.maf-svg-placeholder svg {
  width: 80px;
  height: 80px;
  opacity: 0.5;
}

.product-cover .maf-svg-placeholder {
  min-height: 400px;
}

.product-cover .maf-svg-placeholder svg {
  width: 120px;
  height: 120px;
}

/* ================================================================
   29. VARIANT GROUPS (Configurator sections)
   ================================================================ */
.maf-variant-group {
  border: 1px solid var(--maf-gray-200);
  border-radius: var(--maf-radius-md);
  margin-bottom: 15px;
  overflow: hidden;
}

.maf-variant-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--maf-white);
  padding: 10px 15px;
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--maf-charcoal);
  cursor: pointer;
  border-bottom: 1px solid var(--maf-gray-200);
}

.maf-variant-summary {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--maf-primary);
  margin-left: 10px;
  flex: 1;
  text-align: right;
  margin-right: 10px;
  text-transform: none;
}

.maf-variant-toggle {
  background: none;
  border: none;
  color: var(--maf-gray-500);
  cursor: pointer;
  font-size: 0.7rem;
  padding: 0 5px;
  transition: transform 0.2s ease;
}

.maf-variant-options {
  padding: 15px;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  max-height: 2000px;
  opacity: 1;
}

.maf-variant-group.collapsed .maf-variant-options {
  max-height: 0;
  opacity: 0;
  padding: 0 15px;
  overflow: hidden;
}

.maf-variant-group.collapsed .maf-variant-toggle {
  transform: rotate(-90deg);
}

/* ================================================================
   30. QUOTE BUTTON
   ================================================================ */
.maf-quote-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 2px solid var(--maf-primary) !important;
  color: var(--maf-primary) !important;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  padding: 10px 20px;
  border-radius: var(--maf-radius-sm);
  transition: var(--maf-transition);
  margin-top: 15px;
  text-decoration: none;
}

.maf-quote-btn:hover {
  background: var(--maf-primary) !important;
  color: var(--maf-white) !important;
  text-decoration: none;
}

.maf-quote-btn .material-icons {
  font-size: 1.1rem;
}

/* ================================================================
   31. PRODUCT REFERENCE
   ================================================================ */
.maf-product-ref {
  font-size: 0.8rem;
  color: var(--maf-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin-bottom: 10px;
}

/* (Section 32 removed — top bar merged into header-nav utility bar) */

/* ================================================================
   33. FOOTER GRID
   ================================================================ */
.maf-footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  padding: 40px 0 30px;
}

.maf-footer-col h4 {
  color: var(--maf-white);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.8px;
  margin-bottom: 15px;
}

.maf-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.maf-footer-col ul li {
  padding: 4px 0;
  color: rgba(255,255,255,0.65);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.maf-footer-col ul li .material-icons {
  font-size: 0.9rem;
  color: var(--maf-primary);
}

.maf-footer-col ul li a {
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: var(--maf-transition);
}

.maf-footer-col ul li a:hover {
  color: var(--maf-primary);
  padding-left: 3px;
}

.maf-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 20px;
  margin-top: 10px;
  text-align: center;
}

.maf-footer-payments {
  margin-bottom: 12px;
}

.maf-footer-payments {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.maf-pay-icon {
  opacity: 0.85;
  transition: opacity 0.2s;
}

.maf-pay-icon:hover {
  opacity: 1;
}

.maf-copyright {
  color: rgba(255,255,255,0.4);
  font-size: 0.8rem;
  margin: 0;
}

/* ================================================================
   34. CATEGORY HEADER BANNER
   ================================================================ */
.maf-category-header {
  background: linear-gradient(135deg, var(--maf-gradient-start), var(--maf-gradient-end));
  border-radius: var(--maf-radius-md);
  padding: 30px;
  margin-bottom: 25px;
  color: var(--maf-white);
}

.maf-category-header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
}

.maf-category-header .h1,
.maf-category-header h1 {
  color: var(--maf-white);
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
  font-size: 1.6rem;
}

.maf-category-description {
  margin-top: 10px;
  font-size: 0.9rem;
  opacity: 0.9;
}

.maf-category-icon svg {
  flex-shrink: 0;
}

/* ================================================================
   35. SUBCATEGORY CARDS
   ================================================================ */
.maf-subcategories {
  margin-bottom: 30px;
}

.maf-subcategory-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.maf-subcategory-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 25px 15px;
  border: 1px solid var(--maf-gray-200);
  border-radius: var(--maf-radius-md);
  text-decoration: none;
  transition: var(--maf-transition);
  text-align: center;
  background: var(--maf-white);
}

.maf-subcategory-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--maf-shadow-md);
  border-color: var(--maf-primary);
  text-decoration: none;
}

.maf-subcategory-icon {
  margin-bottom: 12px;
}

.maf-subcategory-card h3 {
  color: var(--maf-charcoal);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}

.maf-subcategory-card:hover h3 {
  color: var(--maf-primary);
}

.maf-subcategory-desc {
  font-size: 0.8rem;
  color: var(--maf-gray-500);
  margin-top: 6px;
  margin-bottom: 0;
}

/* Scrollable variant pills */
ul.maf-scrollable {
  overflow-x: auto;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

/* ================================================================
   36. RESPONSIVE - NEW COMPONENTS
   ================================================================ */
@media (max-width: 991px) {
  .maf-category-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .maf-footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .maf-hero h1 {
    font-size: 2rem;
  }

  .maf-category-header-inner {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 767px) {
  .maf-category-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .maf-subcategory-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .maf-footer-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .maf-hero {
    padding: 40px 15px;
  }

  .maf-hero h1 {
    font-size: 1.6rem;
    letter-spacing: 1px;
  }

  .maf-hero-tagline {
    font-size: 1rem;
  }

  .maf-utility-left {
    display: none;
  }

  .maf-category-header {
    padding: 20px;
  }

  .product-cover .maf-svg-placeholder {
    min-height: 250px;
  }

  .maf-quote-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 479px) {
  .maf-category-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .maf-category-card {
    flex-direction: row;
    padding: 15px;
    gap: 15px;
    text-align: left;
  }

  .maf-category-card .maf-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .maf-category-card h3 {
    margin: 0;
  }

  .maf-card-arrow {
    margin-left: auto;
  }
}

/* ================================================================
   37. MAF SLIDER (Category carousel)
   ================================================================ */
.maf-slider .carousel-item {
  min-height: 320px;
}

.maf-slide-link {
  display: block;
  text-decoration: none !important;
  color: var(--maf-white) !important;
  min-height: 320px;
}

.maf-slide-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  min-height: 320px;
  padding: 40px 60px;
  max-width: 900px;
  margin: 0 auto;
}

.maf-slide-icon {
  flex-shrink: 0;
  opacity: 0.9;
}

.maf-slide-icon svg {
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}

.maf-slide-link,
.maf-slide-link:hover {
  color: #fff !important;
  text-decoration: none;
}

.maf-slide-text {
  text-align: left;
}

.maf-slide-title,
.maf-slide-link .maf-slide-title,
.maf-slider a h2.maf-slide-title {
  color: #fff !important;
  font-size: 2.4rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.maf-slide-desc,
.maf-slide-link .maf-slide-desc {
  color: rgba(255,255,255,0.85) !important;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 20px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.maf-slide-desc p {
  margin: 0;
}

.maf-slide-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--maf-primary);
  color: var(--maf-white);
  padding: 10px 24px;
  border-radius: var(--maf-radius-sm);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: var(--maf-transition);
}

.maf-slide-cta .material-icons {
  font-size: 1rem;
  transition: transform 0.2s ease;
}

.maf-slide-link:hover .maf-slide-cta {
  background: var(--maf-primary-dark);
}

.maf-slide-link:hover .maf-slide-cta .material-icons {
  transform: translateX(4px);
}

/* Slider indicators */
.maf-slider .carousel-indicators li {
  background-color: rgba(255,255,255,0.4);
  border: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 4px;
}

.maf-slider .carousel-indicators li.active {
  background-color: var(--maf-primary);
}

/* Slider controls */
.maf-slider .carousel-control {
  opacity: 0.6;
}

.maf-slider .carousel-control:hover {
  opacity: 1;
}

@media (max-width: 767px) {
  .maf-slider .carousel-item {
    min-height: 260px;
  }

  .maf-slide-link {
    min-height: 260px;
  }

  .maf-slide-inner {
    flex-direction: column;
    text-align: center;
    padding: 30px 20px;
    gap: 20px;
    min-height: 260px;
  }

  .maf-slide-text {
    text-align: center;
  }

  .maf-slide-title {
    font-size: 1.6rem;
  }

  .maf-slide-desc {
    font-size: 0.9rem;
  }

  .maf-slide-icon svg {
    width: 60px;
    height: 60px;
  }
}


/* ================================================================
   38. MOBILE OFF-CANVAS MENU
   ================================================================ */

/* Force-hide desktop mega-menu on mobile */
@media (max-width: 767px) {
  .maf-megamenu-wrapper {
    display: none !important;
  }
}

/* Hide mobile top menu when still in header area (before JS moves it to off-canvas) */
.header-top-right #_mobile_top_menu,
.header-top #_mobile_top_menu {
  display: none !important;
}

/* Show it when inside the off-canvas panel */
.maf-mobile-nav #_mobile_top_menu {
  display: block !important;
}

/* Hide header-top content on mobile (logo is hidden-sm-down, shrink displayTop area) */
@media (max-width: 767px) {
  .header-top {
    padding: 0 !important;
    min-height: 0 !important;
  }
  .header-top .header-top-right {
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Prevent parent theme (grainfoodmarket) toggleMobileMenu() from hiding page content.
     The parent theme hides #wrapper/#footer/#notifications when #mobile_top_menu_wrapper
     is jQuery-visible, but our off-canvas uses display:flex + transform instead. */
  #wrapper,
  #footer,
  #notifications {
    display: block !important;
  }
}

/* Overlay */
.maf-mobile-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
}

.maf-mobile-overlay.open {
  display: block;
}

/* Off-canvas panel — !important overrides PS JS inline style="display:none" */
.maf-mobile-menu {
  position: fixed !important;
  top: 0;
  left: 0;
  bottom: 0;
  width: 85vw;
  max-width: 320px;
  background: var(--maf-dark) !important;
  z-index: 9999;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex !important;
  flex-direction: column;
}

.maf-mobile-menu.open {
  transform: translateX(0);
}

/* Hide on desktop */
@media (min-width: 768px) {
  .maf-mobile-menu,
  .maf-mobile-overlay {
    display: none !important;
  }
}

/* Prevent body scroll when menu is open */
body.maf-menu-open {
  overflow: hidden;
}

/* Menu header (logo + close) */
.maf-mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.maf-mobile-menu-logo svg {
  display: block;
}

.maf-mobile-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 2rem;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  transition: color 0.2s;
}

.maf-mobile-close:hover {
  color: var(--maf-primary);
}

/* Mobile search bar inside off-canvas */
.maf-mobile-search {
  padding: 15px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.maf-mobile-search-form {
  max-width: none;
}

.maf-mobile-search-input {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
}

.maf-mobile-search-input::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
}

.maf-mobile-search .maf-search-dropdown {
  min-width: auto;
  left: 0;
  right: 0;
}

/* Mobile nav (category tree) */
.maf-mobile-nav {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0;
}

/* ── Restyle the megamenu inside the off-canvas (PS swaps it here) ── */

/* Vertical stacking for the nav list */
.maf-mobile-menu .maf-megamenu {
  width: 100%;
}

.maf-mobile-menu .maf-mega-nav {
  flex-direction: column !important;
  align-items: stretch !important;
}

/* Top-level links: full-width, white text */
.maf-mobile-menu .maf-mega-top {
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.maf-mobile-menu .maf-mega-top-link {
  color: rgba(255, 255, 255, 0.9) !important;
  padding: 14px 20px !important;
  font-size: 0.9rem;
}

.maf-mobile-menu .maf-mega-top-link::after {
  display: none;
}

.maf-mobile-menu .maf-mega-top-link:hover,
.maf-mobile-menu .maf-mega-top:hover > .maf-mega-top-link {
  color: var(--maf-primary) !important;
  background: rgba(255, 255, 255, 0.05);
}

/* Dropdown: static, hidden by default, toggle on click */
.maf-mobile-menu .maf-mega-dropdown {
  position: static !important;
  opacity: 1 !important;
  visibility: hidden;
  max-height: 0;
  overflow: hidden;
  transform: none !important;
  transition: max-height 0.3s ease, visibility 0s 0.3s;
  padding: 0 !important;
  border-top: none;
  box-shadow: none;
  background: rgba(0, 0, 0, 0.2) !important;
}

.maf-mobile-menu .maf-mega-top.mobile-open > .maf-mega-dropdown {
  visibility: visible;
  max-height: 1000px;
  transition: max-height 0.4s ease, visibility 0s;
  padding: 10px 0 !important;
}

/* Disable hover-open on mobile, use click instead */
.maf-mobile-menu .maf-mega-top:hover > .maf-mega-dropdown {
  visibility: hidden;
  max-height: 0;
  opacity: 1;
}

.maf-mobile-menu .maf-mega-top.mobile-open:hover > .maf-mega-dropdown {
  visibility: visible;
  max-height: 1000px;
}

/* Inner layout: stack columns vertically */
.maf-mobile-menu .maf-mega-inner {
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.maf-mobile-menu .maf-mega-img {
  display: none;
}

.maf-mobile-menu .maf-mega-columns {
  flex-direction: column;
  gap: 0;
}

.maf-mobile-menu .maf-mega-col {
  min-width: 0;
  padding: 0;
}

.maf-mobile-menu .maf-mega-col-title {
  color: var(--maf-primary) !important;
  font-size: 0.82rem;
  padding: 10px 30px !important;
  margin-bottom: 0;
  border-bottom: none;
  display: block;
}

.maf-mobile-menu .maf-mega-sublist li {
  margin-bottom: 0;
}

.maf-mobile-menu .maf-mega-sublink {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.8rem;
  padding: 8px 40px !important;
  display: block;
}

.maf-mobile-menu .maf-mega-sublink:hover {
  color: var(--maf-primary) !important;
  padding-left: 44px !important;
}

/* Also handle PS mobile menu if it appears instead */
.maf-mobile-menu .top-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block !important;
}

.maf-mobile-menu .top-menu > li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.maf-mobile-menu .top-menu .dropdown-item {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 12px 20px !important;
  background: none !important;
}

.maf-mobile-menu .top-menu .dropdown-item:hover {
  color: var(--maf-primary) !important;
}

/* Mobile utility links at bottom */
.maf-mobile-links {
  padding: 15px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: auto;
  flex-shrink: 0;
}

.maf-mobile-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 8px 0;
  text-decoration: none !important;
  transition: color 0.2s;
}

.maf-mobile-link:hover {
  color: var(--maf-primary) !important;
}

.maf-mobile-link svg {
  flex-shrink: 0;
  opacity: 0.7;
}

/* Mobile logo in header bar — PS JS moves the desktop .maf-logo here */
#_mobile_logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

#_mobile_logo a {
  text-decoration: none;
  display: inline-block;
}

/* Resize the desktop logo when PS moves it to mobile container */
#_mobile_logo .maf-logo {
  height: 30px;
  width: auto;
}

/* Make "MAF" text white on the dark mobile header (desktop SVG has dark fill) */
#_mobile_logo .maf-logo text:first-of-type {
  fill: #FFFFFF;
}

/* Hide the decorative grey line in mobile logo */
#_mobile_logo .maf-logo rect:last-of-type {
  display: none;
}

/* Also keep mobile-specific logo class if used in off-canvas */
.maf-logo-mobile {
  display: block;
  height: 30px;
  width: auto;
}

/* Mobile hamburger icon */
@media (max-width: 767px) {
  #menu-icon {
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
  }

  #menu-icon i.material-icons {
    display: none !important;
  }

  #menu-icon svg {
    display: block;
  }
}


/* ================================================================
   39. MOBILE SEARCH DROPDOWN FIX
   ================================================================ */
@media (max-width: 767px) {
  .maf-search-dropdown {
    min-width: auto;
    width: 100%;
  }
}


/* ================================================================
   40. HOMEPAGE CUSTOM TEXT RESPONSIVE
   ================================================================ */
@media (max-width: 767px) {
  /* ps_customtext icon blocks layout */
  #custom-text .row,
  .custom-text-block .row,
  [id*="custom-text"] .row {
    flex-direction: column;
  }

  #custom-text [class*="col-"],
  .custom-text-block [class*="col-"],
  [id*="custom-text"] [class*="col-"] {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    margin-bottom: 15px;
  }

  /* Override inline grid-template-columns:repeat(3,1fr) from ps_customtext */
  #custom-text [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* CTA block: stack vertically on mobile */
  #custom-text [style*="linear-gradient"] {
    flex-direction: column !important;
    text-align: center !important;
    padding: 25px 20px !important;
  }

  /* Prevent horizontal overflow on mobile */
  body {
    overflow-x: hidden;
  }

  #wrapper,
  #header,
  #footer,
  .container {
    overflow-x: hidden;
  }
}