/*
Theme Name: GSD AXIOM CHILD THEME
Template: axiom
Author: AXIOM Web Development Staff
Author URI: https://axiomad.com
Description: Child Template Theme for AXIOM Produced websites
Version: 1.3.0
Text Domain: AXIOM
*/


/* =========================================================
   0) TOKENS / GLOBALS
   ========================================================= */
:root {
  /* Brand Colors */
  --wp--preset--color--gsd-red: #c4161c;
  --wp--preset--color--graphite: #2a2a2a;
  --wp--preset--color--steel-gray: #6e7073;
  --wp--preset--color--light-industrial-gray: #e6e7e8;
  --wp--preset--color--industrial-navy: #002551;
  --wp--preset--color--machinery-green: #2f6b4f;
  --wp--preset--color--harvest-gold: #d6a73c;
  --wp--preset--color--safety-yellow: #f2b705;
  --wp--preset--color--white: #ffffff;
  --wp--preset--color--black: #000000;
/* Brand Fonts */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Oswald", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --font-tagline: "Oswald", system-ui, sans-serif; /* italic in usage */


  /* Typography – sizing */
  --fs-base: 1rem;       /* 16px */
  --fs-sm: 0.9375rem;    /* 15px */
  --fs-xs: 0.875rem;     /* 14px */
  --fs-h6: 1rem;
  --fs-h5: 1.125rem;
  --fs-h4: 1.25rem;
  --fs-h3: 1.5rem;
  --fs-h2: 1.875rem;
  --fs-h1: 2.25rem;
 
  /* Line heights */
  --lh-body: 1.6;
  --lh-heading: 1;

  /* Radii, shadows, spacing tokens */
 
  --shadow-soft: 0 8px 18px rgba(0, 0, 0, 0.08);

  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3rem;

  /* Anchor offset for sticky header jump-links */
  --anchor-offset: 140px;

  /* Modal z-index (higher than your header 99999) */
  --ax-modal-z: 200000;

  /* Header shrink knobs */
  --ax-logo-max-h: 250px;
  --ax-logo-max-h-scrolled: 150px;
  --ax-logo-header-h: 100px;
  --ax-logo-header-h-scrolled: 100px;
}


/* =========================================================
   2) BASE / LAYOUT DEFAULTS
   ========================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html{
  scroll-behavior: smooth;
  scroll-padding-top: var(--anchor-offset);
  overflow-x: hidden; /* prevent tiny overflows */
}

/* Any element jumped to via #hash */
:target { scroll-margin-top: var(--anchor-offset); }
[id]     { scroll-margin-top: var(--anchor-offset); }
:is(h1,h2,h3,h4,h5,h6)[id]{ scroll-margin-top: var(--anchor-offset); }

body{
  display: block;
  position: relative;
  transition: top 0.8s ease-in-out;
  font-family: var(--font-body);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(15px, 1vw, 18px);
  line-height: 1.5;
  color: #000;
  background-color: #e6e7e8;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
	margin:0;
	padding:0;
	box-sizing: border-box;
	background-image: url(https://test.grainsystemsdistribution.com/wp-content/uploads/2026/01/header-wavy-lines-bg.png);
  background-repeat: no-repeat;
  background-size:100% auto;
  background-position: top center;
	background-attachment:fixed;
}

img{
  max-width: 100%;
  height: auto;
  display: block;
}

figure{ margin-bottom: 0 !important; }

/* =========================================================
   3) TYPOGRAPHY
   ========================================================= */
p{
	font-size: clamp(15px, 1vw, 18px);
  line-height: 1.5;
  margin: 0 0 1em 0;
  padding: 0;
}

H1, H2, H3, H4, H5, H6{
  font-family: var(--font-heading);
  font-weight: 500;
  font-style: normal;
	line-height:1.25;
  margin: 0 ;
	margin-bottom: clamp(20px, 1.5vw, 35px);
  padding: 0;
	color: var(--wp--preset--color--industrial-navy);
}

/* H1 */
h1 { font-size: clamp(24px, 2vw, 45px);
}


/* H2 */
h2 { font-size: clamp(22px, 1.5vw, 35px); }

/* H3 */
h3{
  font-size: clamp(20px, 1.5vw, 32px);

}

/* H4 */
h4{
  font-size: clamp(18px, 1.5vw, 25px);

}

/* H5 */
h5{ font-size: clamp(16px, 1.5vw, 22px); }

/* H6 */
h6{ font-size: clamp(14px, 1.5vw, 18px); }

h1.has-background, h2.has-background, h3.has-background,
h4.has-background, h5.has-background, h6.has-background{
  padding: .5em 1em !important;
}
.has-x-large-font-size{
	font-size:300% !important;
}
.has-large-font-size{
	font-size:250% !important;
}
.has-medium-font-size{
	font-size:200% !important;
}
.has-small-font-size{
	font-size:75% !important;
}
/* Taglines – Lato Italic */
.tagline,
.hero-tagline{
  font-family: var(--font-tagline);
  font-style: italic;
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--harvest-gold);
}



/* =========================================================
   4) LINKS (single authoritative set)
   ========================================================= */
a{
  color: var(--wp--preset--color--gsd-red);
  text-decoration: none; /* matches what you’re using site-wide */
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, opacity .2s ease-in-out;
}
.button:hover,
a:focus,
a:hover{
  color: var(--wp--preset--color--safety-yellow);
  text-decoration: none;
  opacity: .75;
}
a.logout,
.logout,
.gsd-dp-qb-link.logout, .gsd-dp-qb-btn.logout{
	background-color:#000;
}
/* =========================================================
   5) UTILITIES
   ========================================================= */
hr{
  
  border: 0;
  border-bottom: 1px solid var(--wp--preset--color--harvest-gold) !important;
}

.justify{ text-align: justify; }
.no-margin{ margin: 0 !important; }
.pointer{ cursor: pointer; }

.sticky{
  position: -webkit-sticky;
  position: sticky;
  z-index: 9998;
}

.hide{ display:none; }
.show{ display:block; }
.mobile{ display:none; }
.desktop{ display:inherit; }

li{
  padding: 0;
  line-height: 1.5;
  margin-bottom: 2%;
}

/* =========================================================
   6) BUTTONS (single authoritative set + GF/WP hooks)
   ========================================================= */
.wp-block-buttons{
	gap:10px !important;
}
/* Base button style */
.btn,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.button,
.button a,
.wp-block-button__link{
  border-radius: 10px!important;
  background-color: var(--wp--preset--color--machinery-green);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(17px, .9vw, 20px);
	line-height: 1em !important;
  padding: calc(.35em + 2px) calc(.65em + 2px) calc(.55em + 2px) calc(.65em + 2px) !important;
	height: auto;
	min-height: 40px;
  border: none;
  cursor: pointer;
  text-decoration: none !important;
  transition: color .3s ease-in-out, background-color .3s ease-in-out, transform .12s ease;
}


/* Hover */
.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.button:hover,
.button a:hover,
.wp-block-button__link:hover{
  color: #fff;
}

/* Your specific GF button styling kept */
input.gform_button{
  border-radius: 10px !important;
    background-color: var(--wp--preset--color--machinery-green)!important;
    color: #fff;
    font-family: var(--font-heading) !important;
    font-weight: 600!important;
    font-style: normal;
    font-size: clamp(16px, 1vw, 22px) !important;
    line-height: .9;
    padding: calc(.35em + 2px) calc(1em + 2px) calc(.5em + 2px) calc(1em + 2px) !important;
    border: none;
    cursor: pointer;
    text-decoration: none !important;
    transition: color .3s ease-in-out, background-color .3s ease-in-out, transform .12s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   7) FORMS
   ========================================================= */
input,
select,
textarea{
  font-family: var(--font-body);
  font-size: 16px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(0, 0, 0, 0.12);
  padding: 5px;
}

input:focus,
select:focus,
textarea:focus{
  outline: 2px solid var(--wp--preset--color--harvest-gold);
  outline-offset: 1px;
}
::placeholder{
	font-size:15px;
}
.gform-theme--foundation .gform_fields{
	row-gap: 10px !important;
}
/* =========================================================
   9) YOUR PROJECT CSS (kept as-is below)
   ========================================================= */

/* Headline decor lines */

.gold-lined-heading::after{
  content:"";
  background-image:url(https://test.grainsystemsdistribution.com/wp-content/uploads/2026/01/gold-line-grain-header-decor.png);
  background-position: center right;
  background-repeat:no-repeat;
  background-size:auto 100%;
  display:block;
  height: clamp(15px, 1.5vw, 30px);
	margin-top: 4px;
}
.red-lined-heading::after{
  content: "";
  display: block;
  height: clamp(15px, 1.5vw, 30px);
  background-image: url(https://test.grainsystemsdistribution.com/wp-content/uploads/2026/01/red-line-grain-header-decor.png);
  background-position: center right;
  background-repeat: no-repeat;
  background-size: auto 100%;
	margin-top: 4px;
}


/* =========================================================
   FLOAT CLEARING (kept)
   ========================================================= */
.author-box::before,
.clearfix::before,
.entry::before,
.entry-content::before,
.footer-widgets::before,
.nav-primary::before,
.nav-secondary::before,
.pagination::before,
.site-container::before,
.site-footer::before,
.site-header::before,
.site-inner::before,
.widget::before,
.wrap::before{content:" ";display:table}
.author-box::after,
.clearfix::after,
.entry::after,
.entry-content::after,
.footer-widgets::after,
.nav-primary::after,
.nav-secondary::after,
.pagination::after,
.site-container::after,
.site-footer::after,
.site-header::after,
.site-inner::after,
.widget::after,
.wrap::after{clear:both;content:" ";display:table}
.clearfix{clear:both}

/* =========================================================
   ANIMATIONS (kept)
   ========================================================= */
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@-moz-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@-o-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@-ms-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}

@-webkit-keyframes pulseLarge{
  from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
  50%{-webkit-transform:scale3d(1.50,1.50,1.50);transform:scale3d(1.50,1.50,1.50)}
  to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
@keyframes pulseLarge{
  from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
  50%{-webkit-transform:scale3d(1.50,1.50,1.50);transform:scale3d(1.50,1.50,1.50)}
  to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}

@-webkit-keyframes pulse{
  from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
  50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}
  to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
@keyframes pulse{
  from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
  50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}
  to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
.animate__pulse{
  -webkit-animation-name:pulse;
  animation-name:pulse;
  -webkit-animation-timing-function:ease-in-out;
  animation-timing-function:ease-in-out;
  -webkit-animation-duration:1s;
  animation-duration:1s;
  -webkit-animation-fill-mode:both;
  animation-fill-mode:both;
}

@keyframes slideInUp{
  from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
  to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}
.animate__slideInUp{
  -webkit-animation-name:slideInUp;
  animation-name:slideInUp;
  -webkit-animation-duration:1s;
  animation-duration:1s;
  -webkit-animation-fill-mode:both;
  animation-fill-mode:both;
}

/* =========================================================
   DETAILS / SUMMARY (kept)
   ========================================================= */
details{
  margin:0 0 15px 0;
  background-color: rgba(0, 0, 0, .1);
  border-radius:20px;
  overflow: hidden;
}
summary{
  font-weight: bold;
  color:var(--wp--preset--color--yocum-dark-blue);
  background-color: var(--wp--preset--color--light-blue);
  padding:15px;
  margin:0!important;
  border-radius:20px 20px 0 0;
}
details p{
  margin:0 0 2% 0 !important;
  padding:0 25px;
  line-height: normal;
}
details p:first-of-type{
  margin:10px 0 15px 0 !important;
}
details ul{
  margin:0 0 15px 35px !important;
  padding:0 25px;
  line-height: normal;
}

/* =========================================================
   HEADER / NAV / MODALS / SECTIONS (UNCHANGED FROM YOUR FILE)
   ========================================================= */


/* SET DEFAULT SIZES AND SETTINGS FOR SITE CONTAINER AND MAIN ELEMENT */
#site-header{
  position: sticky !important;
  top: var(--header-top, 0px);
  z-index: 5000!important;
  width: 100%;
  
}
#site-header.is-scrolled {
  background: rgba(255,255,255,0.5) !important;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}



/* SET DEFAULT SIZES AND SETTINGS FOR HEADERS */
#logo-header {
    position: relative;
    width: 80%;
    max-width: 1800px;
    margin: 0 auto;
    box-sizing: border-box;
    background: transparent;
    z-index: 5001;
    height: min(100px, 150px);
    font-family: var(--font-heading);
    font-size: 20px !important;
    justify-content: space-between !important;
    align-content: stretch;
    align-items: stretch;
}


#logo-header .header-widget {
  flex: 1 1 auto!important;
}
#logo-header a{
	white-space:nowrap;
}
#logo-header-widget-1.header-widget{
	position: relative;
	height:auto ;
	margin:0;
	padding-top:15px;
	max-width: 18% !important;
	flex-basis: 18% !important;
	z-index: 5010;
	transform: scale(1);
}
.site-logo img{
	max-height: 220px;
	width:auto;
}
#logo-header-widget-2.header-widget{
	display: flex;
	justify-content: flex-end;
	text-align: right;
	align-items: center;
	align-content: center;
	align-self: center;
	max-width: 800px;
}
#logo-header-widget-2.header-widget .widget_block{
	max-width:800px;
}
.logo-header-nav .is-layout-flex{
	gap:15px !important;
}
/* BEFORE (scrolled): translateY(20%) */



#logo-header #logo-header-widget-1,
#tag-line-header,
#tag-line-header p {
  transition: opacity .22s ease, transform .22s ease, max-height .22s ease, padding .22s ease;
}

#site-header.is-scrolled #tag-line-header{
  opacity:0;
  max-height:0;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
#site-header.is-scrolled #tag-line-header p{
  opacity:0;
  transform: translateY(-6px);
}

#site-header:focus-within #tag-line-header{
  opacity:1;
  max-height:200px;
}
#tag-line-header {
	position: absolute;

	right: max(10vw, calc((100vw - 1800px) / 2));
	width: min(80vw, 1800px);

	display: flex;
	justify-content: flex-end;
	text-align: right;
	box-sizing: border-box;
}
#tag-line-header .header-widget{
	
	 padding:1em 0;
}
#tag-line-header p{
  margin:0;
  font-size: clamp(20px, 1.5vw, 48px);
  font-family: var(--font-heading);
	line-height: 1;
}

#tag-line-header{
  overflow:hidden;
  max-height:200px;
  opacity:1;
}
#tag-line-header p{
  opacity:1;
  transform: translateY(0);
}


#nav-header{ 
	padding-right:10%;
	padding-left:10%;
	background-color: rgba(0,37,81,1); 
	align-content: center;
	align-items: center;
	position: relative;
	overflow: visible;
}
#nav-header > .widget{
  max-width: 1800px;
  margin-inline: auto;
	margin:0 auto;
	padding: 0;
	height: 60px;
  box-sizing: border-box;
	position: relative;
	overflow: visible;
}
#nav-header a{
	font-family: var(--font-heading) !important;
	font-size: clamp(18px, 1vw, 24px) !important;
}


.top-section{
  padding-top: clamp(72px, 7vw, 140px) !important;
}

@media (prefers-reduced-motion: reduce){
  #site-header,
  #logo-header,
  #tag-line-header,
  #tag-line-header p,
  #logo-header-widget-1,
  #logo-header-widget-1 img{ transition:none !important; }
}

/************************ HEADERS *************************/


/* =========================================================
   KEEP THE REST OF YOUR FILE UNCHANGED
   (Everything below here is your original CSS, preserved.)
   ========================================================= */


.product-categories-section{
  padding-top: clamp(72px, 7vw, 140px) !important;
  background-position: center calc(100% - 80px) !important;
}

.product-category-tiles .wp-block-image{
  margin:0 0 10px 0 !important;
  border-radius:20px;
  overflow:hidden;
  position:relative;
  display:block !important;
  line-height:0;
  isolation:isolate;
  -webkit-mask-image:-webkit-radial-gradient(white, black);
  clip-path:inset(0 round 20px);
}
.product-category-tiles .wp-block-image a,
.product-category-tiles .wp-block-image picture,
.product-category-tiles .wp-block-image img{
  display:block !important;
  width:100%;
  margin:0 !important;
  border-radius:inherit;
}
.product-category-tiles .wp-block-image img{
  height:auto;
  object-fit:cover;
}
.product-category-tiles .wp-block-image figcaption{
  position:absolute;
  display:flex;
	flex-flow: column;
  align-items:center;
  justify-content:center;
  bottom:0;
  width:100%;
  height:auto;
	min-height: 25%;
  margin:0;
  padding:10px;
  color:#fff;
  background-color:rgba(47,107,79,0.90);
  pointer-events:none;
	font-family: var(--font-heading);
  font-size: clamp(16px, 1.25vw, 30px);
  line-height:1.1;
  text-transform: none;
	font-weight: 500;
}
.product-category-tiles .wp-block-image figcaption h3{
 
  color:#fff;
  font-family: var(--font-heading);
  font-size: clamp(18px, 1.25vw, 40px);
  line-height:1.1;
  text-transform: uppercase;
  font-weight: 500;
	margin:0 0 5px 0;
}
.product-category-tiles .wp-block-image figcaption p{
  
  color:#fff;
  font-family: var(--font-heading);
  font-size: clamp(18px, 1.25vw, 18px);
  line-height:1.1;
  text-transform: none;
  font-weight: normal;
	margin:0;
}
/* Hover + keyboard focus */
.product-categories-section .wp-block-image:hover,
.product-categories-section .wp-block-image:focus-within{
  opacity: .8 !important;
}

/* Promotions section */
.promotions-section{
  --clip: polygon(15% 0%, 100% 0, 100% 100%, 0% 100%);
  --border-w: 3px;

  position: relative;
  clip-path: var(--clip);
  -webkit-clip-path: var(--clip);

  display:flex;
  align-items:center;

  background-image:
    url(https://test.grainsystemsdistribution.com/wp-content/uploads/2026/01/promotions-white-wavy-lines-vertical.png),
    linear-gradient(111deg, rgba(196,22,28,1) 0%, rgba(147,16,21,1) 100%) !important;
  background-repeat:no-repeat;
  background-size:cover;
  color:#fff;
  height:100% !important;
}
.promotions-section .gb-block-layout-column-inner{
  position:relative;
  z-index:1;
  width:60%;
  margin:0 auto;
}
.promotions-section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:#fff;
  clip-path: polygon(15% 0%, calc(15% + var(--border-w)) 0%, var(--border-w) 100%, 0% 100%);
  -webkit-clip-path: polygon(15% 0%, calc(15% + var(--border-w)) 0%, var(--border-w) 100%, 0% 100%);
}
/* Why Choose icon grid */
/* Why Choose Icons - force responsive grid */
.wp-block-group.why-choose-icons,
.wp-block-group.why-choose-icons.is-layout-grid,
.wp-block-group.why-choose-icons.wp-block-group-is-layout-grid {
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
	gap: 24px !important;
	align-items: start !important;
}

.wp-block-group.why-choose-icons > .wp-block-group {
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
}

.wp-block-group.why-choose-icons .wp-block-group__inner-container {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.wp-block-group.why-choose-icons .wp-block-image,
.wp-block-group.why-choose-icons figure {
	margin: 0 auto 12px !important;
}

.wp-block-group.why-choose-icons img {
	width: 100% !important;
	max-width: 105px !important;
	height: auto !important;
	margin: 0 auto !important;
}

.wp-block-group.why-choose-icons h3 {
	margin: 0 !important;
	font-size: clamp(15px, 2vw, 20px) !important;
	line-height: 1.2 !important;
}



/* 2 across */
@media (max-width: 600px) {
	.wp-block-group.why-choose-icons,
	.wp-block-group.why-choose-icons.is-layout-grid,
	.wp-block-group.why-choose-icons.wp-block-group-is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 24px 16px !important;
	}

	.wp-block-group.why-choose-icons img {
		max-width: 88px !important;
	}

	.wp-block-group.why-choose-icons h3 {
		font-size: 15px !important;
	}
}
.gsd-dealer-promo-section{
}
.gsd-dealer-image-section .gb-block-layout-column-inner{
	    position: relative;
    overflow: hidden;
    z-index: 0;
    height: 100%;
-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) var(--ax-mask-fade), rgba(0, 0, 0, 1) 100%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) var(--ax-mask-fade), rgba(0, 0, 0, 1) 100%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.gsd-dealer-promo-image img{
position: absolute;
    inset: 0;
	opacity: .5;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  object-position: left bottom;

  transform: scale(1.5);           /* 1.1–1.4 is typical */
  transform-origin: center bottom; /* scale from bottom */
}
.gsd-dealer-image-section .gb-block-layout-column-inner{
  --ax-mask-fade: 35%; /* <-- define it here or elsewhere */

  position: relative;
  overflow: hidden;
  z-index: 0;

  /* give the element real paint area if height isn't defined by layout */
  min-height: 320px; /* adjust or remove if parent already controls height */

  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) var(--ax-mask-fade, 35%),
    rgba(0,0,0,1) 100%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) var(--ax-mask-fade, 35%),
    rgba(0,0,0,1) 100%
  );

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Max Mega Menu search placeholder */
.mega-search input::placeholder,
.mega-search input::-webkit-input-placeholder,
.mega-search input::-moz-placeholder,
.mega-search input:-ms-input-placeholder,
.mega-search input::-ms-input-placeholder{
  color:#fff !important;
  opacity:1;
}
.mega-search input.mega-search-placeholder{ color:#fff !important; }
.mega-search input[type="text"],
.mega-search input[type="search"]{ color:#fff !important; }

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce){
  #alerts-banner,
  #logo-header,
  #logo-header-widget-1 .widget_media_image,
  #logo-header-widget-1 img{ transition:none !important; }
}

/* =========================
   NAVIGATION MENUS
   ========================= */
#nav_menu-2{ align-items:flex-end; text-align:right; }
.num1{ border-right: solid 3px #666666; padding: 0 20px; }
#mobile-menu{ display:none; }

@keyframes animateNavMenuOpen{
  0%{ right:-100vw; opacity:0; }
  100%{ right:0; opacity:1; }
}
@keyframes animateNavMenuClosed{
  0%{ right:0; opacity:1; }
  100%{ right:-100vw; opacity:0; }
}

/************************ FEATURED IMAGE *************************/
.featured-image{ width:100%; max-width:100vw; height:auto; }
.featured-image img{
  width:100%;
  max-width:100vw;
  height:auto;
  object-fit: cover;
  object-position: center center;
}

.wp-block-post-title{ font-size: clamp(18px, 1.4vw, 28px); margin:0 0 10px 0 !important; }
.wp-block-post-excerpt{ margin-top:0 !important; }

.blog-list-item{ column-gap:20px!important; }
.blog-list-item .wp-block-post-featured-image{
  display:block;
  width:15%!important;
  flex-basis:15% !important;
}
.blog-list-item .wp-block-post-featured-image img{
  border-radius:50%;
  width:100% !important;
}
.blog-list-item .post-content{ width:85% !important; }

/************************ PAGE TITLE *************************/
.page-title{
  padding:20px 0;
display:none;
}

/************************ BREADCRUMBS *************************/
.breadcrumbs{
  padding: 8px 15px;
  margin-bottom:20px;
  list-style:none;
  background-color:#f5f5f5;
  border-radius:4px;
  display:none;
}
.breadcrumbs a{ color:#428bca; text-decoration:none; }
.breadcrumbs a:hover{ color:#ff0000; text-decoration:none; }

/************************ INNER CONTENT *************************/
.inner-content{ margin:0 auto; padding:0; }



/************************ CUSTOM SITE CSS *************************/
.full-height{ height:100%; }
.full-height .gb-block-layout-column-inner{ height:100%; }



.rounded-corners{ border-radius:25px; }
.rounded-corners img{ border-radius:25px; }
.rounded-corners .gb-block-layout-column-inner{ border-radius:25px; }

.two-column{ column-count:2; column-gap:5%; }

.wp-block-group.has-background{ padding:15px !important; }

/* Lists — custom image bullet */
.decorated-list{
  margin: 20px 0;
  padding: 0;
  list-style: none; /* remove default bullets */
}

.decorated-list li{
  font-family: var(--font-heading);
  font-size: clamp(18px, 1.25vw, 26px);
	font-weight: 500;
  line-height: 100%;
  position: relative;

  /* space for the bullet image */
  padding-left: 1.5em;
	margin-top:20px!important;
  margin-bottom: 20px!important;
}
.decorated-list li span{
  font-family: var(--font-body);
  font-size: clamp(16px, 1vw, 18px);
	font-weight: normal;
  line-height: 1;
  position: relative;
	color:#2a2a2a;
}
.decorated-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
	transform: translateY(-50%);
  
  /* ✅ DROP YOUR IMAGE URL HERE */
  background-image: url("https://test.grainsystemsdistribution.com/wp-content/uploads/2026/01/gold-grain-left.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  /* bullet size */
  width: 1.1em;
  height: 1.1em;

  /* keeps it from shrinking weirdly */
  display: inline-block;
}


/* Accordion script helpers */
.open{ display:block; }
.closed{ display:none; }

h3.wp-block-accordion-heading{
	padding:0 !important;
}
.wp-block-accordion-panel {
	padding:25px;
	margin: 0;
}
/************************ PORTAL *************************/

/* Optional: page section wrapper if you have one */
.gsd-dp-login{
  max-width: 560px;
  margin: 0 auto 20px auto;
  padding: 25px;

  background: var(--wp--preset--color--white);
  border-radius: 15px;
  box-shadow:
    0 10px 30px rgba(13, 47, 82, 0.10),
    0 2px 8px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
}
.dealer-login-form-row{
	display:flex;
	flex-flow: row wrap;
	justify-content: space-between;
	gap:10px;
	margin-bottom:5px;
}

/* Form spacing + typography */
#gsd-dealer-loginform p{
  margin: 0 0 14px;
}

#gsd-dealer-loginform label{
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--wp--preset--color--industrial-navy);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

/* Inputs */
#gsd-dealer-loginform input[type="text"],
#gsd-dealer-loginform input[type="password"],
#gsd-dealer-loginform input[type="email"]{
  width: 100%;
  height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--wp--preset--color--steel-gray);
  background: #fff;
  color: var(--wp--preset--color--industrial-navy);
  box-shadow: 0 1px 0 rgba(13, 47, 82, 0.04);
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

/* Focus ring (modern but not neon) */
#gsd-dealer-loginform input[type="text"]:focus,
#gsd-dealer-loginform input[type="password"]:focus,
#gsd-dealer-loginform input[type="email"]:focus{
  outline: none;
  border-color: rgba(13, 47, 82, 0.55);
  box-shadow:
    0 0 0 4px rgba(13, 47, 82, 0.14),
    0 1px 0 rgba(13, 47, 82, 0.04);
}

/* Remember me row */
#gsd-dealer-loginform .login-remember{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  color: var(--wp--preset--color--steel-gray);
  font-size: 0.95rem;
}

#gsd-dealer-loginform .login-remember label{
  margin: 0;
  font-weight: 600;
  color: var(--wp--preset--color--steel-gray);
}

/* Checkbox modern sizing */
#gsd-dealer-loginform input[type="checkbox"]{
  width: 18px;
  height: 18px;
  border-radius: 4px;
  accent-color: var(--wp--preset--color--industrial-navy);
}

/* Submit row */
#gsd-dealer-loginform .login-submit{
  margin-top: 16px;
}

/* Links under form (if you output “forgot password”, etc.) */
#gsd-dealer-loginform a{
  color: var(--wp--preset--color--industrial-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

#gsd-dealer-loginform a:hover{
  color: var(--wp--preset--color--industrial-navy-2);
}

/* Error / notice styling (works if you print messages near the form) */
.gsd-dp-login-error,
#gsd-dealer-loginform .message,
#gsd-dealer-loginform .error{
  background: rgba(197, 48, 48, 0.08);
  border: 1px solid rgba(197, 48, 48, 0.25);
  color: #7a1b1b;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 0 14px;
  font-weight: 600;
}

/* Small screens */
@media (max-width: 480px){
  #gsd-dealer-loginform{
    border-radius: 14px;
    padding: 16px;
  }
}
/************************ FOOTERS *************************/
#site-footer{
  border-top:2px solid #fff;
  position:relative;
  display:block;
  color:#fff;
	font-size:16px;
  width:100%;
  z-index:5;
  background-image:
    url(https://test.grainsystemsdistribution.com/wp-content/uploads/2026/01/footer-wavy-lines-bg.png),
    linear-gradient(180deg, rgba(110,112,115,1.00) 0%, rgba(42,42,42,1.00) 100%);
  background-repeat:no-repeat;
  background-size:cover;
}
#site-footer h2{ font-size: clamp(22px, 1vw, 24px);
	margin-bottom:15px; }
#main-footer .red-lined-heading h2{
	font-size: clamp(22px, 2vw, 32px);
}
.red-lined-heading .is-layout-flex{
	gap:2%!important;
}
#main-footer{
  max-width:1800px;
	display: flex;
  margin:0 auto;
  padding:4em 5% 2em 5%;
	flex-flow: row nowrap;
  justify-content:flex-start !important;
  align-content:center!important;
  align-items:center!important;
  gap:5rem !important;
}
#main-footer-widget-1{ width:45%; flex-basis:45%; }
#main-footer-widget-2{ width:45%; flex-basis:45%; }


#main-footer .wp-block-table td,
#main-footer .wp-block-table th{ border:none; }
.contact-info-table thead{ display:none; }

.footer h2{
  color:#fff;
  margin:0;
  font-size: clamp(24px, 1.8vw, 30px);
	line-height: 1;
}
.footer a{
  color:#fff !important;
  text-decoration: underline;
}

#main-footer ul.menu{
  margin:0;
  padding:0;
}
#main-footer ul.menu li{
  list-style:none;
  margin:0;
  padding:0;
  line-height: normal;
}
#main-footer ul.menu li a{
  display:block;
  word-wrap: normal;
  min-width:130px;
  padding:.5em 0;
}

.footer-contact-info table{
  table-layout:auto !important;
  border-collapse: collapse;
  border:none;
  width:auto;
}
.footer-contact-info td{
  width:auto;
  padding:5px;
  border:none;
  vertical-align: top;
}

#main-footer-widget-1 .footer-logo img{ max-width:300px; }

#footer-search{
  max-width:600px;
  margin:0 auto;
  padding:2em 5%;
}
.wp-block-search{
	display:flex;
	flex-flow:row nowrap;
	justify-content: center;
	align-content: center;
	align-items:center;
	gap:10px;
}
.wp-block-search__button.has-icon{
  background-color:#2f6b4f;
  border:2px solid #fff;
  
  font-size:18px;
}
.wp-block-search__button-inside .wp-block-search__inside-wrapper{
  align-items:center;
  align-content:center;
  background-color:rgba(255, 255, 255, .9);
  border:2px solid #fff;
  border-radius:15px;
}
.wp-block-search__input::placeholder{ opacity:1; }
.wp-block-search__input{
    background-color:rgba(255, 255, 255, .9);
  color:#fff;
  
}

#secondary-footer{
  max-width:1800px;
  margin:0 auto;
  padding:2em 5% 5em 5%;
  display:flex;
  flex-flow: row wrap !important;
  justify-content: space-between;
}
#secondary-footer p{ font-size:16px; }

#secondary-footer ul.menu{
  list-style:none;
  margin:0;
  padding:0;
  text-align:right;
  display:flex !important;
  flex-flow: row wrap;
  justify-content:flex-end;
}
#secondary-footer ul.menu li{
  list-style:none;
  margin:0;
  padding:0;
  text-align:center;
  border-right:2px solid #fff;
}
#secondary-footer ul.menu li:last-of-type{ border-right:none; }
#secondary-footer ul.menu li a{
	font-size:16px;
  display:block;
  min-width:0 !important;
  margin:0;
  padding:2px 12px !important;
  text-align:center;
  text-decoration: underline;
}
/* =========================================================
   Dealer Locator Search Bar
   ========================================================= */
.gsd-dealer-locator{
		width:100%;
		min-width:0;
	}

	.gsd-dealer-locator__visible-label{
		display:block;
		margin:0;
		font-family:var(--font-button);
		font-weight:600;
		font-size:clamp(18px, 1.1vw, 24px);
		line-height:1.2;
	}

	.gsd-dealer-locator__helper{
		margin:0;
		font-size:14px;
		line-height:1.4;
		color:#444;
	}

	.gsd-dealer-locator-fields{
		display:flex;
		flex-flow:row nowrap;
		align-items:center;
		align-content:center;
		gap:5px;
		width:100%;
		min-width:0;
	}

	.gsd-dealer-locator-fields > *{
		min-width:0;
	}

	.gsd-dealer-locator__label-link{
		flex:0 0 auto;
		white-space:nowrap;
		color:inherit;
		text-decoration:none;
		font-family:var(--font-button);
		font-weight:600;
		font-style:normal;
		font-size:clamp(16px, 1vw, 22px);
		line-height:1.2;
	}

	.gsd-dealer-locator__label-link:hover,
	.gsd-dealer-locator__label-link:focus{
		text-decoration:underline;
	}

	.gsd-dealer-locator__search-wrap{
		flex:1 1 auto;
		min-width:0;
		width:auto;
	}

	.gsd-dealer-locator input[type="search"]{
		width:100%;
		min-width:0;
		padding:10px 12px;
		margin:0;
		border-radius:10px;
		border:1px solid #6E7073;
		font-family:var(--font-button);
		font-weight:500;
		font-size:15px;
		height:42px;
	}

	.gsd-dealer-locator__submit{
		flex:0 0 auto;
		display:inline-flex;
		align-items:center;
		justify-content:center;
		background-color:var(--wp--preset--color--machinery-green);
		color:#fff;
		margin:0;
		border-radius:10px !important;
		border:1px solid #6E7073;
		cursor:pointer;
		padding:10px !important;
		font-family:var(--font-button);
		font-weight:600;
		font-size:16px;
		height:42px;
		width: 42px;
		line-height:1;
		white-space:nowrap;
	}

	.gsd-dealer-locator__submit img{
		width:18px;
		height:18px;
		display:block;
	}

	@media (max-width: 1200px){
		.gsd-dealer-locator__label-link{
			font-size:16px;
		}
	}

	@media (max-width: 782px){
		

		.gsd-dealer-locator input[type="search"],
		.gsd-dealer-locator__submit{
			height:44px;
		}
	}
/* =========================================================
   RESPONSIVE HEADER, HOME HERO SPACING + MOBILE LAYOUT
   ========================================================= */

@media only screen and (max-width: 1680px){
  

  #logo-header-widget-1.header-widget .widget_media_image{
    margin-top:0;
  }

  #logo-header-widget-2.header-widget{
    flex:1 1 auto;
    width:auto;
  }
}

@media (max-width: 1280px){
	
  :root{
    --gsd-mobile-header-bg:rgba(255,255,255,.92);
  }

  #site-header{
    position:sticky !important;
    top:0 !important;
    z-index:99999 !important;
    width:100%;
    background:transparent !important;
    isolation:isolate;
  }

  #site-header.is-scrolled{
    background:transparent !important;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  #logo-header{
    position:relative;
    width:100%;
    max-width:none;
    height:auto;
    padding:12px 20px !important;
    z-index:1 !important;
    background:var(--gsd-mobile-header-bg);
	  justify-content: flex-end !important;
  }
#mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle img{
    max-height:120px;
    width:auto;
  }
  #logo-header-widget-1{
    display:none !important;
  }

  #logo-header-widget-2.header-widget{
    width:auto;
    padding:0 !important;
    display:flex;
    justify-content:flex-end;
    align-items:center;
	  align-content: center;
  }

  #logo-header-widget-2.header-widget .widget_block{
    width:100%;
    max-width:none;
  }

  #logo-header .logo-header-nav{
    display:flex !important;
    flex-flow:row nowrap !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap:12px !important;
    width:auto;
  }

  .gsd-find-header{
    flex:1 1 420px;
    max-width:520px;
  }

  .gsd-dealer-locator-fields{
    display:grid !important;
    grid-template-columns:auto minmax(180px, 1fr) 44px;
    gap:6px;
    align-items:center;
  }

  .gsd-dealer-locator__submit{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    padding:10px !important;
  }

  .gsd-dealer-locator__submit img{
    width:18px !important;
    height:18px !important;
    max-width:18px !important;
    max-height:18px !important;
    object-fit:contain;
  }

  #nav-header{
    position:relative;
    z-index:3;
    height:50px;
    padding:0 20px;
    overflow:visible;
  }

  #nav-header > .widget{
    height:50px;
    overflow:visible;
  }

  #mega-menu-wrap-max_mega_menu_1,
  #mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle,
  #mega-menu-wrap-max_mega_menu_1 .mega-toggle-blocks-left,
  #mega-menu-wrap-max_mega_menu_1 .mega-toggle-block-1,
  #mega-menu-wrap-max_mega_menu_1 .mega-menu-logo{
    overflow:visible !important;
  }

  #mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle{
    height:50px !important;
    line-height:50px !important;
    align-items:center;
  }

 

  #mega-menu-wrap-max_mega_menu_1 .mega-toggle-blocks-right{
    align-items:center;
  }

  #site-header a.wp-block-button__link{
    margin:0 !important;
    margin-block-start:0 !important;
    white-space:nowrap;
  }

  .top-section,
  .product-categories-section{
    padding-top:clamp(64px, 6vw, 105px) !important;
  }
}

@media (max-width: 900px){
  .wp-container-core-group-is-layout-17124a9a{
    flex-wrap:wrap !important;
  }

  .top-section,
  .product-categories-section{
    padding-top:clamp(62px, 8vw, 95px) !important;
  }

  #mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle img{
    max-height:76px !important;
    transform:translateY(-8px) !important;
  }

  .product-category-tiles.gb-layout-columns-5 > .gb-layout-column-wrap.gb-is-responsive-column{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(30%, 1fr)) !important;
    gap:10px !important;
    grid-template-areas:
      "col1 col2 col3"
      "col4 col5 col6" !important;
  }

  .gb-layout-columns-2 > .gb-layout-column-wrap{
    -ms-grid-columns:1fr;
    grid-template-columns:1fr;
    grid-template-areas:"col1" "col2";
  }

  .product-category-tiles .gb-block-layout-column{
    width:auto !important;
    max-width:none !important;
    flex:initial !important;
  }

  .product-category-tiles .gb-block-layout-column-inner{
    height:100%;
  }

  .product-category-tiles figure.wp-block-image{
    margin:0;
  }

  .product-category-tiles figure.wp-block-image img{
    width:100%;
    height:auto;
    display:block;
  }

  .product-category-tiles figcaption{
    margin-top:8px;
  }

  .promotions-section{
    --clip:polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%);
    --border-w:3px;
    position:relative;
    clip-path:none;
    -webkit-clip-path:none;
    display:flex;
    align-items:center;
    background-image:
      url(https://test.grainsystemsdistribution.com/wp-content/uploads/2026/01/promotions-white-wavy-lines-vertical.png),
      linear-gradient(90deg, rgba(196,22,28,1) 0%, rgba(147,16,21,1) 100%) !important;
    background-repeat:no-repeat;
    background-size:cover;
    color:#fff;
    min-height:auto;
    padding:5%;
  }

  .promotions-section .gb-block-layout-column-inner{
    position:relative;
    z-index:1;
    width:100%;
    margin:0 auto;
  }

  .promotions-section::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:#fff;
    clip-path:polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%);
    -webkit-clip-path:polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%);
    display:block;
  }
}

@media (max-width: 782px){
  #tag-line-header{
    display:none !important;
  }
}

@media (max-width: 600px){
  #logo-header{
    padding:10px !important;
  }

  #logo-header .widget .widget_block,
  #logo-header .wp-block-group{
    gap:5px !important;
    height:auto;
  }

  #logo-header .logo-header-nav{
    justify-content:center !important;
    text-align:center;
	  flex-wrap: wrap !important;
    gap:10px !important;
  }

  .gsd-find-header{
    flex:1 1 100%;
    max-width:100%;
  }

  .gsd-dealer-locator-fields{
    grid-template-columns:auto minmax(0, 1fr) 44px;
  }

  #logo-header-widget-2 .wp-block-group:not(.logo-header-nav){
    justify-content:center !important;
	  flex-wrap: nowrap!important;
    width:100%;
  }
#site-header a.wp-block-button__link {
        margin: 0 !important;
        margin-block-start: 0 !important;
        white-space: nowrap;
	font-size:15px !important;
    }
  #mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle img{
    max-height:78px !important;
    transform:translateY(-6px) !important;
  }

  .top-section,
  .product-categories-section{
    padding-top:clamp(58px, 12vw, 88px) !important;
  }

  #main-footer{
    padding:4em 10% 2em;
    flex-flow:column;
    justify-content:flex-start !important;
    align-content:center !important;
    align-items:center !important;
    gap:0 !important;
  }

  #main-footer-widget-1,
  #main-footer-widget-2{
    width:100%;
    flex-basis:100%;
  }

  #main-footer .gb-layout-columns-3 > .gb-layout-column-wrap.gb-is-responsive-column{
    -ms-grid-columns:2fr;
    grid-template-columns:repeat(2, minmax(45%, 1fr)) !important;
    grid-template-areas:
      "col1 col2"
      "col3 col4" !important;
  }

  #secondary-footer{
    max-width:1800px;
    margin:0 auto;
    padding:2em 5% 10em;
    display:flex;
    flex-flow:column !important;
    justify-content:center;
    text-align:center;
    align-content:center;
    align-items:center;
  }

  #secondary-footer ul.menu{
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
    display:flex !important;
    flex-flow:row wrap;
    justify-content:center;
  }

  .product-category-tiles.gb-layout-columns-5 > .gb-layout-column-wrap.gb-is-responsive-column{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(30%, 1fr)) !important;
    gap:10px !important;
    grid-template-areas:
      "col1 col2"
      "col3 col4"
      "col5 col6" !important;
  }
}

@media (max-width: 430px){
  .top-section,
  .product-categories-section{
    padding-top:clamp(54px, 13vw, 78px) !important;
  }

  #mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle img{
    max-height:76px !important;
    transform:translateY(-5px) !important;
  }
}