/* ══════════════════════════════════════════════════════════════
   FBO EDUCATIONAL — PRODUCT & CATEGORY PAGE RESTYLING
   Paste into Theme Options → CSS Block
   Matches the redesigned header/homepage aesthetic
   ══════════════════════════════════════════════════════════════ */

/* ── CSS VARIABLES ── */
:root {
  --fbo-navy: #1a1040;
  --fbo-indigo: #4f46e5;
  --fbo-indigo-light: #6366f1;
  --fbo-purple: #7c3aed;
  --fbo-violet: #a855f7;
  --fbo-coral: #f43f5e;
  --fbo-gold: #f59e0b;
  --fbo-emerald: #10b981;
  --fbo-sky: #0ea5e9;
  --fbo-cream: #faf8ff;
  --fbo-white: #ffffff;
  --fbo-gray-100: #f1f0f7;
  --fbo-gray-200: #e2e0ee;
  --fbo-gray-400: #9896a8;
  --fbo-gray-600: #5e5c6e;
  --fbo-gray-800: #2d2b3a;
  --fbo-radius: 12px;
  --fbo-shadow-sm: 0 1px 4px rgba(79,70,229,.07);
  --fbo-shadow-md: 0 4px 20px rgba(79,70,229,.10);
  --fbo-shadow-lg: 0 8px 32px rgba(79,70,229,.14);
}


/* ══════════════════════════════════════════════════════════════
   GLOBAL / BODY
   ══════════════════════════════════════════════════════════════ */
body {
  font-family: 'DM Sans', sans-serif !important;
  background: var(--fbo-cream) !important;
  color: var(--fbo-gray-800) !important;
  -webkit-font-smoothing: antialiased !important;
}
a { text-decoration: none !important; }


/* ══════════════════════════════════════════════════════════════
   PAGE CONTENT AREA
   ══════════════════════════════════════════════════════════════ */
.page-content.container,
.page-content {
  background: transparent !important;
  font-family: 'DM Sans', sans-serif !important;
}
.page-content.container {
  max-width: 1320px !important;
  padding: 0 24px !important;
}
.desktop .page-content {
  background: transparent !important;
}


/* ══════════════════════════════════════════════════════════════
   BREADCRUMBS
   ══════════════════════════════════════════════════════════════ */
.breadcrumb {
  background: transparent !important;
  padding: 14px 0 8px !important;
  margin: 0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: .82rem !important;
  border: none !important;
}
.breadcrumb a {
  color: var(--fbo-indigo) !important;
  font-weight: 500 !important;
  transition: color .2s !important;
}
.breadcrumb a:hover {
  color: var(--fbo-purple) !important;
}
.breadcrumb > li + li::before {
  color: var(--fbo-gray-400) !important;
  content: "/" !important;
  padding: 0 8px !important;
}
.breadcrumb > .active {
  color: var(--fbo-gray-600) !important;
}


/* ══════════════════════════════════════════════════════════════
   PAGE TITLE (H1)
   ══════════════════════════════════════════════════════════════ */
h1.catalog-name,
.page-content h1 {
  font-family: 'Fraunces', serif !important;
  font-weight: 700 !important;
  font-size: 1.6rem !important;
  color: var(--fbo-navy) !important;
  background: linear-gradient(135deg, #1a1040, #4f46e5) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin-bottom: 6px !important;
  line-height: 1.3 !important;
}


/* ══════════════════════════════════════════════════════════════
   PRODUCT COUNT & TOOLBAR
   ══════════════════════════════════════════════════════════════ */
.toolbar.industrial_shoppingtool {
  font-family: 'DM Sans', sans-serif !important;
  font-size: .82rem !important;
  color: var(--fbo-gray-600) !important;
  padding: 8px 0 12px !important;
  border: none !important;
  background: transparent !important;
}
.toolbar .productcount {
  font-weight: 600 !important;
  color: var(--fbo-indigo) !important;
}
.toolbar .productcount span {
  color: var(--fbo-indigo) !important;
  font-family: 'Fraunces', serif !important;
  font-size: 1.1rem !important;
}
select.productorderby,
.toolbar select {
  border: 2px solid var(--fbo-gray-200) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: .82rem !important;
  background: var(--fbo-white) !important;
  color: var(--fbo-gray-800) !important;
  cursor: pointer !important;
  transition: border-color .2s !important;
  outline: none !important;
  -webkit-appearance: auto !important;
}
select.productorderby:focus,
.toolbar select:focus {
  border-color: var(--fbo-indigo) !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,.12) !important;
}
/* List / Grid toggle */
.toolbar .listview a,
.toolbar .gridview a,
.toolbar a[class*="view"] {
  color: var(--fbo-gray-400) !important;
  font-weight: 500 !important;
  transition: color .2s !important;
}
.toolbar .listview a:hover,
.toolbar .gridview a:hover,
.toolbar a[class*="view"]:hover {
  color: var(--fbo-indigo) !important;
}


/* ══════════════════════════════════════════════════════════════
   SIDEBAR — CATEGORY MENU
   ══════════════════════════════════════════════════════════════ */
.categoryfiltermenu_container {
  font-family: 'DM Sans', sans-serif !important;
}
.categoryfiltermenu_container .shop-categories,
.categoryfiltermenu_container .sidebar-menu,
.categoryfiltermenu_container ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.categoryfiltermenu_container a {
  display: block !important;
  padding: 9px 14px !important;
  font-size: .84rem !important;
  font-weight: 500 !important;
  color: var(--fbo-gray-800) !important;
  border-radius: 8px !important;
  transition: all .2s !important;
  border: none !important;
}
.categoryfiltermenu_container a:hover {
  background: rgba(79,70,229,.06) !important;
  color: var(--fbo-indigo) !important;
  padding-left: 18px !important;
}
.categoryfiltermenu_container a.active,
.categoryfiltermenu_container .active > a {
  background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
  color: #fff !important;
  font-weight: 600 !important;
}


/* ══════════════════════════════════════════════════════════════
   SIDEBAR — SEARCH & FILTER PANEL
   ══════════════════════════════════════════════════════════════ */
.filters_container,
.shop-filters.filterswrapper {
  font-family: 'DM Sans', sans-serif !important;
}
/* Filter title "SEARCH & FILTER" */
.shop-filters .filter-title {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
  color: #fff !important;
  padding: 12px 16px !important;
  border-radius: var(--fbo-radius) var(--fbo-radius) 0 0 !important;
  font-weight: 700 !important;
  font-size: .85rem !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  border: none !important;
}
.shop-filters .filter-title span {
  color: #fff !important;
}
.shop-filters .arrow-down {
  display: none !important;
}

/* "Search Within" input */
.search-with-in .search input,
.searchpills input {
  border: 2px solid var(--fbo-gray-200) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: .82rem !important;
  background: var(--fbo-white) !important;
  transition: border-color .2s !important;
  outline: none !important;
  width: 100% !important;
}
.search-with-in .search input:focus,
.searchpills input:focus {
  border-color: var(--fbo-indigo) !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,.12) !important;
}

/* Filter sections (BARREL COLOUR, BRAND, etc.) */
.filter-section {
  border: none !important;
  border-bottom: 1px solid var(--fbo-gray-200) !important;
  margin: 0 !important;
  padding: 0 !important;
}
.filter-section-header {
  padding: 12px 14px !important;
  cursor: pointer !important;
  transition: background .2s !important;
}
.filter-section-header:hover {
  background: rgba(79,70,229,.04) !important;
}
.filter-section-header h5 {
  font-family: 'DM Sans', sans-serif !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  color: var(--fbo-gray-800) !important;
  margin: 0 !important;
}
/* Override old blue/cyan filter header backgrounds */
.filter-section-header,
.panel-heading,
.panel-default > .panel-heading {
  background: transparent !important;
  border: none !important;
}
.showhide-indicator {
  color: var(--fbo-indigo) !important;
}

/* Filter options (checkboxes and labels) */
.filter-options {
  padding: 4px 14px 10px !important;
}
.filter-options div,
.filter-options label {
  font-family: 'DM Sans', sans-serif !important;
  font-size: .82rem !important;
  color: var(--fbo-gray-600) !important;
  padding: 3px 0 !important;
  cursor: pointer !important;
  transition: color .2s !important;
}
.filter-options div:hover,
.filter-options label:hover {
  color: var(--fbo-indigo) !important;
}
.more-options a {
  color: var(--fbo-indigo) !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
}

/* Panel group (alternative filter structure) */
.panel-group.product-panel {
  border: 1px solid var(--fbo-gray-200) !important;
  border-radius: var(--fbo-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--fbo-shadow-sm) !important;
}
.panel-group.product-panel .panel {
  border: none !important;
  border-bottom: 1px solid var(--fbo-gray-200) !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.panel-group.product-panel .panel:last-child {
  border-bottom: none !important;
}
.panel-group.product-panel .panel-heading {
  background: transparent !important;
  padding: 12px 14px !important;
}
.panel-group.product-panel .panel-title {
  font-family: 'DM Sans', sans-serif !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  color: var(--fbo-gray-800) !important;
}
.panel-group.product-panel .panel-title a {
  color: var(--fbo-gray-800) !important;
}
.panel-group.product-panel .panel-body {
  padding: 8px 14px 14px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: .82rem !important;
}


/* ══════════════════════════════════════════════════════════════
   SIDEBAR WRAPPER — Unified look
   ══════════════════════════════════════════════════════════════ */
.shop-filters.filterswrapper {
  background: var(--fbo-white) !important;
  border: 1px solid var(--fbo-gray-200) !important;
  border-radius: var(--fbo-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--fbo-shadow-sm) !important;
}


/* ══════════════════════════════════════════════════════════════
   PRODUCT CARDS — The Big Transformation
   ══════════════════════════════════════════════════════════════ */
.tileparent {
  padding: 6px !important;
}
.tileparent .tile {
  background: var(--fbo-white) !important;
  border: 1px solid var(--fbo-gray-200) !important;
  border-radius: var(--fbo-radius) !important;
  padding: 12px !important;
  transition: box-shadow .2s, transform .15s, border-color .2s !important;
  position: relative !important;
  overflow: hidden !important;
  height: 100% !important;
}
/* Top gradient line on hover */
.tileparent .tile::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #4f46e5, #7c3aed, #a855f7) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform .3s ease !important;
  z-index: 2 !important;
}
.tileparent .tile:hover::before {
  transform: scaleX(1) !important;
}
.tileparent .tile:hover {
  box-shadow: var(--fbo-shadow-md) !important;
  transform: translateY(-3px) !important;
  border-color: rgba(79,70,229,.2) !important;
}

/* Product Image Area */
.tileparent .tile .imgthumbnail,
.tileparent .tile .text-center {
  background: linear-gradient(135deg, #f5f3ff, #eff6ff) !important;
  border-radius: 8px !important;
  padding: 8px !important;
  margin-bottom: 10px !important;
}
.tileparent .tile .imgthumbnail img {
  mix-blend-mode: multiply !important;
}

/* Brand Label */
.tileparent .tile .brand-label,
.tileparent .tile .brand-label a {
  font-family: 'DM Sans', sans-serif !important;
  font-size: .7rem !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  color: var(--fbo-gray-400) !important;
  margin-bottom: 3px !important;
}

/* Product Name */
.tileparent .tile .product-name,
.tileparent .tile .product-name a {
  font-family: 'DM Sans', sans-serif !important;
  font-size: .84rem !important;
  font-weight: 500 !important;
  color: var(--fbo-gray-800) !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  transition: color .2s !important;
}
.tileparent .tile .product-name a:hover {
  color: var(--fbo-indigo) !important;
}

/* Product SKU / Product Code */
.tileparent .tile .product-sku {
  font-family: 'DM Sans', sans-serif !important;
  font-size: .72rem !important;
  color: var(--fbo-gray-400) !important;
}
.tileparent .tile .product-category {
  font-family: 'DM Sans', sans-serif !important;
  font-size: .72rem !important;
  color: var(--fbo-gray-400) !important;
}
.tileparent .tile .product-category a {
  color: var(--fbo-gray-400) !important;
}

/* Price */
.tileparent .tile .price-label,
.tileparent .tile .price-label .price {
  font-family: 'Fraunces', serif !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  color: var(--fbo-indigo) !important;
}
/* Old / was price */
.tileparent .tile .price-label .was-price,
.tileparent .tile .price-label del {
  font-family: 'DM Sans', sans-serif !important;
  font-size: .78rem !important;
  color: var(--fbo-gray-400) !important;
  text-decoration: line-through !important;
}
/* Sale / special price */
.tileparent .tile .price-label .special-price,
.tileparent .tile .price-label .sale-price {
  color: var(--fbo-coral) !important;
}

/* UOM / Pack info */
.tileparent .tile .uom,
.tileparent .tile .uomblock,
.tileparent .tile .uomvalue {
  font-family: 'DM Sans', sans-serif !important;
  font-size: .72rem !important;
  color: var(--fbo-gray-400) !important;
}

/* Quantity Input */
.tileparent .tile .inputquantity,
.tileparent .tile .qty-list {
  border: 2px solid var(--fbo-gray-200) !important;
  border-radius: 8px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: .85rem !important;
  text-align: center !important;
  width: 48px !important;
  padding: 6px 4px !important;
  background: var(--fbo-white) !important;
  transition: border-color .2s !important;
  outline: none !important;
}
.tileparent .tile .inputquantity:focus {
  border-color: var(--fbo-indigo) !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,.12) !important;
}

/* ADD TO BASKET Button */
.btn-add-to-cart,
.btn.btn-primary.btn-add-to-cart {
  background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
  border: none !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: .76rem !important;
  font-weight: 600 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  padding: 8px 16px !important;
  cursor: pointer !important;
  transition: transform .15s, box-shadow .15s, opacity .15s !important;
  box-shadow: 0 2px 8px rgba(79,70,229,.25) !important;
}
.btn-add-to-cart:hover,
.btn.btn-primary.btn-add-to-cart:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(79,70,229,.35) !important;
  opacity: .92 !important;
  background: linear-gradient(135deg, #4338ca, #6d28d9) !important;
  color: #fff !important;
}
.btn-add-to-cart:active {
  transform: translateY(0) !important;
}

/* ADD TO QUICK LIST Button */
.st-quicklist .btn,
button[class*="quicklist"],
.btn-quicklist,
.buttons.group .btn-default {
  background: var(--fbo-white) !important;
  border: 2px solid var(--fbo-gray-200) !important;
  border-radius: 8px !important;
  color: var(--fbo-gray-600) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: .72rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
  padding: 6px 12px !important;
  cursor: pointer !important;
  transition: all .2s !important;
  width: 100% !important;
}
.st-quicklist .btn:hover,
.buttons.group .btn-default:hover {
  border-color: var(--fbo-indigo) !important;
  color: var(--fbo-indigo) !important;
  background: rgba(79,70,229,.04) !important;
}

/* Compare checkbox */
.product-compare-action {
  font-family: 'DM Sans', sans-serif !important;
  font-size: .75rem !important;
  color: var(--fbo-gray-400) !important;
}
.product-compare-action:hover {
  color: var(--fbo-gray-600) !important;
}

/* Buttons group container */
.tile .buttons.group {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
  margin-top: 8px !important;
}


/* ══════════════════════════════════════════════════════════════
   RIBBON / BADGES (Best Seller, New, etc.)
   ══════════════════════════════════════════════════════════════ */
.ribbon {
  font-family: 'DM Sans', sans-serif !important;
  font-size: .65rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  padding: 4px 12px !important;
  border-radius: 0 0 8px 0 !important;
  z-index: 3 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.1) !important;
}
/* Override inline background colors for our palette */
.ribbon[style*="background-color:#FF8C05"],
.ribbon[style*="background-color: #FF8C05"] {
  background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
  color: #1a1040 !important;
}
/* NEW ribbon */
.ribbon[style*="background-color:#008000"],
.ribbon[style*="background-color: #008000"],
.ribbon[style*="background-color:#00ff00"],
.ribbon[style*="background-color: #00FF00"] {
  background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
  color: #fff !important;
}
/* Sale / Clearance ribbon */
.ribbon[style*="background-color:#FF0000"],
.ribbon[style*="background-color: #FF0000"],
.ribbon[style*="background-color:#ff0000"],
.ribbon[style*="background-color: #ff0000"] {
  background: linear-gradient(135deg, #f43f5e, #fb7185) !important;
  color: #fff !important;
}

/* Badges wrapper */
.badges-wrapper {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 3 !important;
}


/* ══════════════════════════════════════════════════════════════
   SUBCATEGORY TILES (Category listing pages)
   ══════════════════════════════════════════════════════════════ */
.subcategorieslist_container .tileparent .tile,
.page-content.twocolumnsleft .tileparent .tile {
  text-align: center !important;
}
.subcategorieslist_container .tile .product-name,
.subcategorieslist_container .tile .product-name a {
  font-size: .88rem !important;
  font-weight: 600 !important;
  -webkit-line-clamp: 3 !important;
}


/* ══════════════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════════════ */
.pagination {
  display: flex !important;
  gap: 4px !important;
  justify-content: center !important;
  padding: 20px 0 !important;
  font-family: 'DM Sans', sans-serif !important;
}
.pagination li a,
.pagination li span {
  border: 1px solid var(--fbo-gray-200) !important;
  border-radius: 8px !important;
  padding: 7px 13px !important;
  font-size: .82rem !important;
  font-weight: 500 !important;
  color: var(--fbo-gray-600) !important;
  background: var(--fbo-white) !important;
  transition: all .2s !important;
}
.pagination li a:hover {
  border-color: var(--fbo-indigo) !important;
  color: var(--fbo-indigo) !important;
  background: rgba(79,70,229,.04) !important;
}
.pagination .active a,
.pagination .active span {
  background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(79,70,229,.3) !important;
}
.pagination .disabled a,
.pagination .disabled span {
  color: var(--fbo-gray-400) !important;
  background: var(--fbo-gray-100) !important;
  cursor: not-allowed !important;
}


/* ══════════════════════════════════════════════════════════════
   PRODUCT DETAIL PAGE
   ══════════════════════════════════════════════════════════════ */
/* Product image */
.main-image {
  border-radius: var(--fbo-radius) !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #f5f3ff, #eff6ff) !important;
  border: 1px solid var(--fbo-gray-200) !important;
}
.main-image img {
  mix-blend-mode: multiply !important;
}

/* Product brand on detail page */
.product-brand {
  font-family: 'DM Sans', sans-serif !important;
  font-size: .78rem !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  color: var(--fbo-gray-400) !important;
  margin-bottom: 4px !important;
}

/* Product detail price area */
.page-content .footer-wrapper-price,
.page-content .footer-wrapper-price .price-label {
  font-family: 'Fraunces', serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--fbo-indigo) !important;
}
.page-content .footer-wrapper-price .uom {
  font-family: 'DM Sans', sans-serif !important;
  font-size: .82rem !important;
  color: var(--fbo-gray-600) !important;
}

/* Product detail qty +/- buttons */
.page-content .qty-input-group .btn,
.page-content .quantity-selector .btn {
  border-radius: 8px !important;
  border: 2px solid var(--fbo-gray-200) !important;
  background: var(--fbo-white) !important;
  color: var(--fbo-gray-600) !important;
  font-weight: 700 !important;
  width: 34px !important;
  height: 34px !important;
  transition: all .2s !important;
}
.page-content .qty-input-group .btn:hover {
  border-color: var(--fbo-indigo) !important;
  color: var(--fbo-indigo) !important;
}

/* Description section */
.description {
  font-family: 'DM Sans', sans-serif !important;
  font-size: .88rem !important;
  line-height: 1.7 !important;
  color: var(--fbo-gray-800) !important;
}
.description h2,
.description h3 {
  font-family: 'Fraunces', serif !important;
  font-weight: 600 !important;
  color: var(--fbo-navy) !important;
  margin-bottom: 8px !important;
}
.description ul {
  padding-left: 20px !important;
}
.description li {
  margin-bottom: 4px !important;
}


/* ══════════════════════════════════════════════════════════════
   PRODUCT DETAIL — Right sidebar (price/buy box)
   ══════════════════════════════════════════════════════════════ */
.cart-sidebar,
.page-content.twocolumnsright .col-lg-3,
.page-content.twocolumnsright .col-md-3 {
  font-family: 'DM Sans', sans-serif !important;
}

/* Style the buy box container */
.tile .footer-wrapper-price {
  background: var(--fbo-white) !important;
  border: 1px solid var(--fbo-gray-200) !important;
  border-radius: var(--fbo-radius) !important;
  padding: 20px !important;
  box-shadow: var(--fbo-shadow-sm) !important;
}


/* ══════════════════════════════════════════════════════════════
   QUICK VIEW BUTTON (on product image hover)
   ══════════════════════════════════════════════════════════════ */
.divquickview .btn {
  background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
  border: none !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  transition: transform .15s, box-shadow .15s !important;
}
.divquickview .btn:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 4px 12px rgba(79,70,229,.3) !important;
}
.divquickview .btn .fa {
  margin-right: 4px !important;
}


/* ══════════════════════════════════════════════════════════════
   ECO SCORES BADGE
   ══════════════════════════════════════════════════════════════ */
ecoscores-rank {
  font-family: 'DM Sans', sans-serif !important;
}


/* ══════════════════════════════════════════════════════════════
   FORMS & INPUTS (Global)
   ══════════════════════════════════════════════════════════════ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea,
select,
.form-control {
  border: 2px solid var(--fbo-gray-200) !important;
  border-radius: 8px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: .85rem !important;
  padding: 8px 12px !important;
  background: var(--fbo-white) !important;
  color: var(--fbo-gray-800) !important;
  transition: border-color .2s, box-shadow .2s !important;
  outline: none !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
.form-control:focus {
  border-color: var(--fbo-indigo) !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,.12) !important;
}


/* ══════════════════════════════════════════════════════════════
   BUTTONS (Global)
   ══════════════════════════════════════════════════════════════ */
.btn-primary {
  background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
  border: none !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  transition: transform .15s, box-shadow .15s !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, #4338ca, #6d28d9) !important;
  box-shadow: 0 4px 16px rgba(79,70,229,.3) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}
.btn-default {
  background: var(--fbo-white) !important;
  border: 2px solid var(--fbo-gray-200) !important;
  border-radius: 8px !important;
  color: var(--fbo-gray-600) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  transition: all .2s !important;
}
.btn-default:hover {
  border-color: var(--fbo-indigo) !important;
  color: var(--fbo-indigo) !important;
}


/* ══════════════════════════════════════════════════════════════
   LIVE INVENTORY / STOCK INDICATORS
   ══════════════════════════════════════════════════════════════ */
.live-inventory-v2-shipping {
  font-size: .72rem !important;
  font-family: 'DM Sans', sans-serif !important;
}
.live-inventory-v2-wrapper {
  font-family: 'DM Sans', sans-serif !important;
}


/* ══════════════════════════════════════════════════════════════
   FOOTER OVERRIDES (match redesigned footer)
   ══════════════════════════════════════════════════════════════ */
.footer.group,
.footer {
  background: linear-gradient(180deg, #1a1040 0%, #0f0a26 100%) !important;
  color: rgba(255,255,255,.7) !important;
  font-family: 'DM Sans', sans-serif !important;
}
.footer a {
  color: rgba(255,255,255,.55) !important;
  transition: color .2s !important;
}
.footer a:hover {
  color: #fbbf24 !important;
}
.footer h4,
.footer .footer-heading {
  color: #fff !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
}
.copyright_container {
  border-top: 1px solid rgba(255,255,255,.1) !important;
  font-size: .72rem !important;
  color: rgba(255,255,255,.35) !important;
  font-family: 'DM Sans', sans-serif !important;
}


/* ══════════════════════════════════════════════════════════════
   HEADER OVERRIDES (backup — in case header widget not loaded)
   ══════════════════════════════════════════════════════════════ */
.header-full {
  font-family: 'DM Sans', sans-serif !important;
}


/* ══════════════════════════════════════════════════════════════
   MODAL DIALOGS (Login, Quick Order, etc.)
   ══════════════════════════════════════════════════════════════ */
.modal-content {
  border-radius: var(--fbo-radius) !important;
  border: none !important;
  box-shadow: var(--fbo-shadow-lg) !important;
  font-family: 'DM Sans', sans-serif !important;
}
.modal-header {
  background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
  color: #fff !important;
  border-radius: var(--fbo-radius) var(--fbo-radius) 0 0 !important;
  border: none !important;
  padding: 16px 20px !important;
}
.modal-header .close {
  color: #fff !important;
  opacity: .8 !important;
  text-shadow: none !important;
}
.modal-header .modal-title {
  font-family: 'Fraunces', serif !important;
  font-weight: 600 !important;
}
.modal-body {
  padding: 20px !important;
  font-family: 'DM Sans', sans-serif !important;
}
.modal-footer {
  border-top: 1px solid var(--fbo-gray-200) !important;
  padding: 14px 20px !important;
}


/* ══════════════════════════════════════════════════════════════
   ALERTS & NOTIFICATIONS
   ══════════════════════════════════════════════════════════════ */
.alert {
  border-radius: 8px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: .85rem !important;
  border: none !important;
}
.alert-success {
  background: #d1fae5 !important;
  color: #065f46 !important;
}
.alert-info {
  background: #e0e7ff !important;
  color: #3730a3 !important;
}
.alert-warning {
  background: #fef3c7 !important;
  color: #92400e !important;
}
.alert-danger {
  background: #fee2e2 !important;
  color: #991b1b !important;
}


/* ══════════════════════════════════════════════════════════════
   SHOPPING TOOLS (Quick Order bar)
   ══════════════════════════════════════════════════════════════ */
.shopping-tools-wrapper {
  font-family: 'DM Sans', sans-serif !important;
}
.shopping-tools-wrapper .btn {
  border-radius: 8px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: .78rem !important;
}


/* ══════════════════════════════════════════════════════════════
   SEARCH RESULTS PAGE
   ══════════════════════════════════════════════════════════════ */
.search-results-container,
.search-results {
  font-family: 'DM Sans', sans-serif !important;
}


/* ══════════════════════════════════════════════════════════════
   CART PAGE
   ══════════════════════════════════════════════════════════════ */
.cart-container,
.cart-table,
.cart-summary {
  font-family: 'DM Sans', sans-serif !important;
}
.cart-table th {
  background: var(--fbo-gray-100) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: .75rem !important;
  letter-spacing: .03em !important;
  color: var(--fbo-gray-600) !important;
}
.cart-table td {
  border-bottom: 1px solid var(--fbo-gray-200) !important;
  padding: 12px !important;
}


/* ══════════════════════════════════════════════════════════════
   SKELETON LOADING STATES
   ══════════════════════════════════════════════════════════════ */
.skeleton-container {
  border-radius: var(--fbo-radius) !important;
  overflow: hidden !important;
}


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .tileparent {
    padding: 4px !important;
  }
}

@media (max-width: 768px) {
  .page-content.container {
    padding: 0 16px !important;
  }
  .tileparent {
    padding: 4px !important;
  }
  h1.catalog-name,
  .page-content h1 {
    font-size: 1.3rem !important;
  }
}

@media (max-width: 480px) {
  .tileparent .tile {
    padding: 8px !important;
  }
  .tileparent .tile .product-name,
  .tileparent .tile .product-name a {
    font-size: .78rem !important;
  }
  .tileparent .tile .price-label,
  .tileparent .tile .price-label .price {
    font-size: .95rem !important;
  }
  .btn-add-to-cart {
    padding: 6px 10px !important;
    font-size: .7rem !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   SMOOTH SCROLLING
   ══════════════════════════════════════════════════════════════ */
html {
  scroll-behavior: smooth !important;
}