/*-------------------------------------------*\ 
   // GLOBAL
   \*-------------------------------------------*/
   
   
   @import url("https://use.typekit.net/tvd3akk.css");
   @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
   
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 
               'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
   
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Inter', sans-serif;
  font-weight: 700; 
  text-transform: uppercase;
}
   
   .container--homepage h1,
   .container--homepage h2,
   .container--homepage h3,
   .container--homepage h4,
   .container--homepage h5,
   .container--homepage h6 {
       color: #0D0928;
   }
   
   
   /*-------------------------------------------*\ 
   // VARIABLES
   \*-------------------------------------------*/
   
:root {
  /* NEW PALETTE */
  --offwhite: #FBFFED;
  --green: #00AF66;
  --darkgreen: #12221C;

  /* PRIMARY UI COLORS */
  --primary-bg: var(--darkgreen);
  --primary-text: var(--offwhite);

  --secondary-bg: var(--offwhite);
  --secondary-text: var(--darkgreen);

  /* ACCENTS / HOVERS */
  --highlight-text: var(--green);
  --link-text-color: var(--darkgreen);

  /* subtle hover bg (green w/ transparency) */
  --highlight-bg: color-mix(in srgb, var(--green) 18%, transparent);

  /* Megamenu */
  --megamenu-bg: var(--offwhite);
  --megamenu-links: var(--darkgreen);
  --megamenu-title: var(--darkgreen);
  --megamenu-text: var(--darkgreen);

  /* Mobile */
  --mobile-icon: var(--offwhite);
  --mobile-bg: var(--darkgreen);
  --mobile-text: var(--offwhite);
  --mobile-bg-highlight: color-mix(in srgb, var(--green) 25%, var(--darkgreen));

  /* Buttons */
  --button-primary-background-color: var(--green);

  /* Remove red accents */
  --color-grey: var(--green);
  --color-light-grey: var(--green);
  --color-black: var(--darkgreen);
}

   
   
   /*-------------------------------------------*\ 
   // SLIDER
   \*-------------------------------------------*/
   
   .slide img {
       border: 0;
       background: white;
       box-shadow: none;
   }
   
.slider {
  margin-top: 0px !important; 
}
   
   .slide.style-c .slide__image {
       margin-left: 0;
   }
   
   /*-------------------------------------------*\ 
   // SEARCH FORM
   \*-------------------------------------------*/
   
   a#btnSearch {
       position: relative;
       right: 35px;
       color: #002B5C;
   }
   
   .search-box {
       width: fit-content;
       margin-right: 0;
       margin-left: 25px;
       display: inline-flex;
       justify-content: center;
   }
   
   .search-form input {
       background-color: #cdd3d736;
       border-color: #788793;
       border-width: 1px;
   }
   
   /****** START OF MEGA MENU ******/
.header-wrapper {
  background: #12221C !important;
  margin-top: -10px;
  margin-bottom: -10px;
  padding-bottom: 0px !important;
  border-bottom: 0px;
}
   
   header.header--site {
       padding-left: 50px;
       padding-right: 50px;
   }
   
   header.header--site a,
   header.header--site a:link,
   header.header--site a:visited,
   header.header--site a:active,
   header.header--site p {
       color: var(--primary-text);
   }
   
   header.header--site a:hover {
       color: var(--highlight-text) !important;
   }
   
   .top-nav {
       text-align: right;
       padding: 15px 3vw;
       width: 100vw;
   }
   
   .top-nav ul,
   .top-nav li {
       list-style: none;
       color: var(--primary-text);
       display: inline-block;
       padding: 0 2vh;
       font-size: 0.925em;
   }
   
.top-nav a,
.top-nav a:link {
  color: var(--primary-text) !important;
}
   
   .top-nav i {
       color: var(--primary-text) !important;
   }
   
   @media all and (max-width: 769px) {
       .top-nav {
           text-align: center;
       }
   }
   
   /****** LOGO ******/
   .main-logo-space {
       z-index: 99999;
       position: absolute;
       left: 0;
       margin-left: 10vh;
   }
   
   .main-logo-space img {
       max-width: fit-content;
       top: 4px;
       height: 60px;
       position: absolute;
   }
   
   @media all and (max-width:1080px) {
       .main-logo-space {
           margin-left: 1vh;
       }
   }
   
   /****** STICKY LOGO ******/
   .sticky-logo {
       position: absolute;
       top: 0;
       left: 2%;
       visibility: hidden;
   }
   
   .sticky-logo img {
       max-width: fit-content;
       z-index: 99999;
       position: absolute;
       top: 5px;
       height: 70px;
   }
   
   .visible-title {
       visibility: visible;
   }
   
   @media all and (max-width: 769px) {
       .sticky .main-logo-space img {
           max-width: 268px;
           max-width: 180px !important;
           z-index: 99999;
           position: absolute;
           top: 0;
           left: 0;
       }
   }
   
   /******* STICKY MENU ******/
   .fixed-header {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
   }
   
.sticky {
  width: 100%;
  height: 70px;
  z-index: 10;
  background: #12221C !important;
  text-align: right;
  box-shadow: 3px 3px 3px #00000042;
  position: absolute;
}
   
   .sticky li {
       display: inline-block;
   }
   
   .sticky a {
       display: inline-block;
       font-weight: 500;
       font-size: large;
       line-height: 1.9;
       color: #FFFFFF !important;
   }
   
   .sticky .mega-feature a {
       line-height: 0;
   }
   
   /****** MEGA MENU DROPDOWN ******/
   .mega-dropdown {
       background-color: var(--primary-bg);
       position: absolute;
       width: 100%;
       left: 0;
       display: flex;
   }
   
   .mega-feature {
       border: 0;
       width: 250px;
       float: right;
       box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.3);
   }
   
   .mega-feature:hover {
       border-color: var(--highlight-bg);
       background-color: #fff;
       box-shadow: 4px 4px 4px #00000054;
       transition: all .5s ease-out;
   }
   
.megamenu_container{
  position: relative;
  z-index: 9999;

  /* KEY: this becomes the TOP ROW (categories) */
  flex: 1 1 100% !important;
}
   
   .megamenu {
       list-style: none;
       padding: 0;
       position: relative;
       margin: 0;
       z-index: 10;
       font-size: 14px;
       line-height: 1;
   }
   
   .megamenu>li>a {
       font-size: 1.4em;
       text-decoration: none;
       display: block;
       padding: 16px;
   }
   
   .megamenu li {
       transition: all 0.6s ease;
       -webkit-transition: all 0.6s ease;
       -moz-transition: all 0.6s ease;
       -o-transition: all 0.6s ease;
       -ms-transition: all 0.6s ease;
   }
   
   .megamenu li:last-child {
       margin-right: 3vw;
   }
   
   .megamenu .col_3 {
       float: left;
       display: inline;
       position: relative;
       margin-left: 2%;
       width: 29.33%;
   }
   
   .megamenu_container .megamenu>li:hover,
   .megamenu_container .megamenu>li.active {
       background: var(--highlight-bg);
       opacity: 1.0;
       transition: all .5s ease-out;
   }
   
   .megamenu_container .megamenu li.noactive {
       background: none;
       box-shadow: none;
   }
   
   .megamenu h3 {
       color: var(--megamenu-title);
   }
   
   .megamenu p {
       line-height: 1.8;
       margin-top: 10px;
       color: var(--megamenu-text);
   }
   
   .megamenu_container .megamenu>li:hover>a {
       color: var(--highlight-text) !important;
       transition: all .5s ease-out;
   }
   
   .megamenu img {
       height: auto;
       border: none;
   }
   
   .dropdown_fullwidth a {
       color: var(--megamenu-links);
       font-size: 1em;
       padding: 6px 20px;
   }
   
   .dropdown_fullwidth a:hover {
       color: var(--highlight-text);
       background-color: var(--highlight-bg);
       transition: all .5s ease-out;
   }
   
   .dropdown_fullwidth a:hover>p {
       color: var(--highlight-text);
       background-color: var(--highlight-bg);
       transition: all 0.6s ease;
       -webkit-transition: all 0.6s ease;
       -moz-transition: all 0.6s ease;
       -o-transition: all 0.6s ease;
       -ms-transition: all 0.6s ease;
   }
   
   .megamenu_container .megamenu li .dropdown_fullwidth {
       background: var(--megamenu-bg);
       text-align: left;
   }
   
   li.mega-li {
       display: block;
       width: max-content;
   }
   
   ul.list_unstyled {
       display: grid;
       grid-template-rows: repeat(5, min-content);
       grid-auto-flow: column;
       margin-top: 35px;
   }
   
   .col_3_feature a {
       display: block;
       margin-top: 0;
       background-color: var(--megamenu-border);
       color: var(--megamenu-links);
       padding: 0;
   }
   
   .megamenu li .dropdown_fullwidth {
       position: absolute;
       margin: 0;
       left: -9999em;
       top: -9999em;
       display: block;
       zoom: 1;
       z-index: 9998;
       float: left;
       box-shadow: 2px 2px 2px 2px hsl(207deg 45% 15% / 23%);
       width: 110%;
       margin-left: -4%;
       padding: 45px 3%;
   }
   
   /* Showing Drop Down on Mouse Hover */
   .megamenu li:hover .dropdown_container {
       top: 45px;
       left: auto;
   }
   
   .megamenu li:hover .dropdown_fullwidth {
       top: 45px;
       left: -1px;
   }
   
   .megamenu li .dropdown_right {
       right: 0;
   }
   
   .megamenu li:hover .dropdown_right {
       top: 45px;
       left: auto;
       right: 0;
   }
   
   .sticky .megamenu li:hover .dropdown_fullwidth {
       top: 70px;
       left: -1px;
   }
   
   /* MOBILE MENU TOGGLE */
   .mobile-menu,
   .mobile-toggle {
       display: none;
   }
   
   .mobile-toggle .fa-times {
       display: none;
   }
   
   .mobile-toggle.open .fa-bars {
       display: none;
   }
   
   .mobile-toggle.open .fa-times {
       display: inline;
   }
   
   .toggle-mobile {
       display: none;
   }
   
   @media all and (max-width:1080px) {
   
       .top-nav ul,
       .top-nav li {
           list-style: none;
           color: var(--primary-text);
           display: inline-block;
           padding: 1vh 2vh;
           font-size: 0.925em;
           margin-left: 0;
       }
   }
   
   nav.mobile-menu.slide-down.shown {
       display: block !important;
   }
   
   
   .toggle-mobile.active {
       background-color: #0e3658;
       z-index: 9999;
       position: fixed;
       width: 87%;
       padding: 15px;
       margin: 31px 0;
   }
   
   @media all and (min-width: 1080px) {
       .mobile-toggle {
           display: none !important;
       }
   
       .desktop-toggle {
           display: block !important;
       }
   }
   
   @media all and (max-width: 1080px) {
       #mobile-menu-toggle {
           display: block;
           margin-top: 0;
           color: #fff;
           padding-top: 30px;
       }
   }
   
   @media all and (max-width: 1080px) {
       .mobile-toggle {
           display: inline-block !important;
           float: right;
           right: 35px;
           top: 25px;
           position: relative;
           z-index: 999999;
       }
   
       .desktop-toggle {
           display: none !important;
       }
   
       .mobile-menu.active {
           display: block;
           z-index: 999;
           position: absolute;
           width: 105vh;
           margin-top: 18px;
           text-align: center;
       }
   
       .mobile-menu.slide-down {
           transition: max-height 0.3s ease-in-out;
           position: absolute;
           z-index: 2;
           width: 100%;
           top: 34px;
       }
   
       .sticky .mobile-menu a {
           color: white !important;
       }
   
       .fa {
           color: var(--mobile-icon) !important;
       }
   
       .mobile-menu.active li:hover {
           background-color: var(--mobile-bg-highlight);
       }
   
       .mobile-menu.active a {
           color: var(--mobile-text);
       }
   
       .mobile-menu ul {
           background-color: var(--mobile-bg);
           margin: 99px 0% 0;
           text-align: center;
           padding: 15px;
       }
   
       .mobile-menu.active li {
           display: block;
           line-height: 3em;
       }
   
       .mobile-menu.active {
           display: block;
           z-index: 999;
           position: absolute;
           width: 100%;
       }
   }
   
   @media (max-width: 575px) {
       .mobile-menu ul {
           margin: 133px 0% 0;
       }
   
       .main-logo-space img {
           max-width: 200px;
           height: auto;
           top: 10px;
       }
   }
   
   @media all and (max-width: 1080px) {
       .sticky .mobile-toggle {
           float: right;
           position: relative;
           right: 9vw;
           top: 2.5vh;
       }
   }
   
   .mobile-toggle i.fa.fa-bars {
       font-size: 28px;
   }
   
   @media all and (max-width: 1080px) {
       .megamenu img {
           max-width: 96%;
           height: auto;
       }
   }
   
   @media all and (min-width: 480px) and (max-width: 1080px) {
       .megamenu_container .megamenu>li>div>.responsive_halfs {
           width: 42%;
       }
   }
   
   @media all and (min-width: 768px) and (max-width: 1080px) {
       .megamenu_container .megamenu>li {
           margin: 0 8px 0 0;
       }
   
       .megamenu_container .megamenu>li>a {
           padding: 16px 10px;
       }
   }
   
   @media all and (max-width: 1080px) {
       .megamenu_container {
           height: auto;
       }
   
       .megamenu_container .megamenu>li,
       .megamenu_container .megamenu>li:hover {
           float: none;
           width: auto;
           padding-right: 0;
           margin-right: 0;
       }
   
       .megamenu_container .megamenu li:hover .dropdown_fullwidth {
           top: auto;
           left: -1px;
       }
   
       .megamenu_container .megamenu .col_3 {
           width: 92%;
           margin-left: 4%;
           margin-right: 4%;
       }
   }
   
   /* Spacing Fix */
.container#bodyContainer {
  margin-top: 20px !important;  /* try 15–25px */
}
   
   .container--homepage {
       display: block;
   }
   
   .container.container--footer {
       margin: auto;
   }
   
   /* END OF MEGA MENU */
   
   
   .container--homepage {
       grid-template-areas:
           var(--homepage-grid-template-areas,
               "callouts"
               "gridflex"
               "secondary-callouts"
               "content");
   }
   
   
   /* BEGINNING OF FLEXGRID */
   body {
       overflow-x: hidden;
       width: 100%;
   }
   
   .boxed-section {
       background-color: #788793;
       width: 100%;
       padding: 5%;
       background-position: top center;
       background-size: cover;
       text-align: center;
       color: #fff;
       margin-top: 5rem;
       position: relative;
       height: 350px;
   }
   
   .content {
       position: absolute;
       top: 65%;
       left: 50%;
       transform: translate(-50%, -50%);
       color: white;
       text-align: center;
       /* background-color: #fff; */
       border-radius: 20px;
       padding: 0 30px;
   }
   
   .boxed-section:before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       /* background-color: rgba(0, 0, 0, 0.25); */
   }
   
   .boxed-section h2,
   .boxed-section p {
       color: #fff;
       text-transform: uppercase;
       /* text-shadow: 2px 2px 4px rgb(0 0 0); */
       font-weight: 500;
       margin: 15px;
       /* background-color: #fff; */
   }
   
   .boxed-section a {
       padding: 20px;
       display: block;
       margin: 5% auto;
   
   }
   
   @media (max-width: 610px) {
       .boxed-section {
           width: 106%;
           margin-left: -3%;
       }
   }
   
   @media (min-width: 611px) {
       .boxed-section {
           width: 103%;
           margin-left: -2%;
       }
   }
   
   @media (min-width: 1440px) {
       .boxed-section {
           width: 160%;
           margin-left: -30%;
       }
   }
   
   @media (max-width: 1020px) {
       .boxed-section a {
           width: 60%;
       }
   }
   
   /* END OF FLEXGRID */
   
   /*-------------------------------------------*\ 
   // BUTTON HOMEPAGE (WHITE TO GRADIENT HOVER) 
   \*-------------------------------------------*/
   .boxed-section a:hover {
       color: #f96639 !important;
   }
   
   .boxed-section a {
       min-width: 130px;
       color: #fff;
       padding: 15px 20px;
       cursor: pointer;
       transition: all 0.3s ease;
       position: relative;
       display: inline-block;
       outline: none;
       border-radius: 10px;
       z-index: 0;
       background: #fff;
       overflow: hidden;
       color: #0D0928;
       text-transform: uppercase;
       text-align: center;
       background-color: #fff;
       font-weight: bold;
   }
   
   .boxed-section a:hover {
       color: #fff !important;
   
   }
   
   .boxed-section a:hover:after {
       width: 100%;
   }
   
   .boxed-section a:after {
       content: "";
       position: absolute;
       z-index: -1;
       transition: all 0.3s ease;
       left: 0;
       top: 0;
       width: 0;
       height: 100%;
       color: #fff;
       background: linear-gradient(90deg, #002B5C 0%, #0D0928 100%);
   }
   
   /*-------------------------------------------*\ 
   // CATEGORY LANDING PAGE
   \*-------------------------------------------*/
   
   .products.products--grid .product__info * {
       font-weight: 400;
   }
   
   @media screen and (min-width: 1024px) {
       .products.products--grid {
           grid-template: auto / repeat(var(--category-products-per-row-large, 4), 1fr);
       }
   }
   
   .page__title h1 {
       font-weight: bold;
   }
   
   .products.products--grid .product__title {
       font-size: var(--category-product-name-font-size, 1.1em);
       text-align: var(--category-product-name-text-alignment, left);
       min-height: 75px;
   }
   
   .products.products--grid .product__copy p {
       font-weight: 500;
   }
   
   /*-------------------------------------------*\ 
   // STICKY PRODUCT IMAGES
   \*-------------------------------------------*/
   @media all and (min-width:771px) {
       .product-landing .product__images {
           position: sticky;
           top: 30px;
       }
   }
   
   /*-------------------------------------------*\ 
   // PRODUCT LANDING PAGE
   \*-------------------------------------------*/
   @media all and (min-width:771px) {
       .ogrid .product .info {
           display: grid;
           grid-template-columns: 1fr;
           align-items: start;
           align-content: start;
       }
   
       .product-landing .product__info {
           display: grid;
           grid-template: auto auto 1fr/1fr;
           grid-template-areas:
               "options"
               "pricing"
               "details";
       }
   
       .product-landing .product__info>* {
           grid-template: auto auto 1fr/1fr;
           display: grid;
           grid-template-areas:
               "quantity"
               "cost"
               "addtocart";
       }
   
       .product__details {
           grid-area: details;
       }
   
       .product__options.form {
           grid-area: options;
       }
   
       button.button.button--theme--primary.btnCTA.btnAddToCart.noClickOnEnter {
           grid-area: addtocart;
       }
   
       .estimated-cost {
           grid-area: cost;
       }
   
       .product-landing .product__images img {
           display: block;
           width: 100%;
           max-width: 100%;
           float: left;
           display: inline-block;
           padding-right: 20px;
   
       }
   
       .product-landing .product__images .img-wrap {
           position: relative;
           width: 75%;
           float: right;
           box-shadow: var(--shadow-standard);
       }
   
       .product-landing .product__images {
           grid-template-columns: repeat(auto-fit, minmax(1fr, auto));
           display: inline-block;
       }
   
       .product-landing .product__images ul {
           grid-template: auto/repeat(1, 3fr);
       }
   
       .product-landing .product__ordering *:not(.button)+.button {
           margin-top: var(--gutter);
           width: 100%;
           padding: 15px;
       }
   
       .product-landing .estimated-cost .cost {
           display: inline-block;
           float: left;
           font-size: 30px;
           font-weight: 400;
       }
   
       span.estimated-cost-label.upcharge-price-label {
           min-width: fit-content !important;
       }
   
       .estimated-cost-label.unit-price-label {
           display: none;
       }
   
       .estimated-cost-label.cost-label {
           display: none;
       }
   
       .product-landing {
           --product-grid-template: auto / 2.5fr 2fr;
       }
   }
   
   
   
   /*-------------------------------------------*\ 
   // DROPDOWN DETAILS - PRODUCT PAGE
   \*-------------------------------------------*/
   details[open] summary {
       border-bottom: none;
       margin-bottom: 0.5em;
       border-radius: 0;
       font-weight: 600;
   }
   
   details summary {
       cursor: pointer;
       margin: -0.5em -0.5em 0;
       background: var(--details-background-color, #eee);
       padding: 0.5em;
       border-radius: 4px;
   }
   
   details {
       --details-border-color: var(--divider-color, #ddd);
       border: none;
       border-radius: 4px;
       overflow: hidden;
       padding: 0.5em 0.5em 0;
       box-shadow: none;
   }
   
   /*-------------------------------------------*\ 
   // BULK ORDER TOGGLE
   \*-------------------------------------------*/
   
   .toggleWidget input[type=checkbox]:checked~label .track {
       border-color: #5f142c;
   }
   
   .toggleWidget input[type=checkbox]:checked~label .toggle .track .ball {
       transform: translate(8px, -50%);
       background: #5f142c;
   }
   
   
   /*-------------------------------------------*\ 
   // INPUT SELECT FIELDS
   \*-------------------------------------------*/
   input,
   select,
   input[type=text],
   input[type=email],
   input[type=number],
   input[type=password],
   input[type=search],
   textarea {
       border: 2px solid #e3e3e3;
       background: #f0f0f0;
       border-radius: 4px;
       padding: 10px;
   }
   
   input#productQuantity,
   .product__options select {
       border: 1px solid #2c245700;
       background: #d9d9d95e;
   }
   
   label#productQuantityLabel,
   .product__options label {
       text-transform: uppercase;
       font-size: smaller;
       font-weight: 500;
   }
   
   /*-------------------------------------------*\ 
   // CALLOUTS (Hero in records)
   \*-------------------------------------------*/
   
   .homepage__callouts .callout {
       margin: 0;
       position: relative;
       display: block;
       box-shadow: 1px 3px 10px #cfcfcf;
       font-weight: 500;
   }
   
   .homepage__callouts .callout .img-wrap {
       position: relative;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       display: block;
       width: 100%;
       overflow: hidden; /* Important for zoom to stay within bounds */
   }
   
   .homepage__callouts .callout .img-wrap img {
       display: block;
       width: 100%;
       height: auto;
       transition: transform 0.4s ease;
   }
   
   .homepage__callouts .callout .img-wrap:hover img {
       transform: scale(1.05); /* Zoom in slightly on hover */
   }
   
   .homepage__callouts .callout figcaption {
       display: grid;
       position: relative;
       text-align: left;
       top: 0;
       left: 0;
       bottom: 0;
       right: 0;
       align-items: var(--homepage-callout-title-vertical-alignment, start);
       justify-items: var(--homepage-callout-title-horizontal-alignment, start);
       pointer-events: none;
   }
   
   .homepage__callouts .callout figcaption .cta {
       visibility: var(--homepage-callout-title-visibility, hidden);
       padding: var(--half-gutter) var(--gutter);
       background: none;
       border-radius: var(--homepage-callout-title-border-radius, 5px);
       transition: all 150ms ease;
       color: #0D0928;
       font-size: var(--homepage-callout-title-font-size, 1rem);
   }
   
   .homepage__callouts .callout a.img-wrap:hover + figcaption .cta {
       background: none;
       text-decoration: underline;
   }
   
   .homepage__callouts .callout figcaption .cta:hover {
       color: none;
       text-decoration: underline;
   }
   
   
   /*-------------------------------------------*\ 
   // SECONDARY CALLOUTS (Callouts in records)
   \*-------------------------------------------*/
   
   .homepage__secondary-callouts {
       margin-top: 50px;
   }
   
   .homepage__secondary-callouts .callout__subtitle {
       position: relative;
       padding: 0;
       background: none;
       color: black;
       font-size: 14px;
       pointer-events: none;
       /* border-bottom-left-radius: var(--homepage-secondary-callout-subtitle-border-radius, 0); */
       padding-top: 10px;
   }
   
   .homepage__secondary-callouts .callout__title {
       text-align: left;
   }
   
   .homepage__callouts h2 {
       margin-top: 38px;
   }
   
   .callout__title a {
       font-size: 20px;
       font-weight: 500;
   }
   
   .homepage__secondary-callouts .callout__image {
       box-shadow: none;
   }
   
   /*-------------------------------------------*\ 
   // FOOTER
   \*-------------------------------------------*/
   
   
   footer ul {
       margin: 0px;
       padding: 0px;
   }
   
   .footer-section {
       background: #12221C !important;
       position: relative;
       margin-top: 50px;
       color: white;
   }

/* FOOTER TEXT */
.footer-section,
.footer-section p,
.footer-section span,
.footer-section a,
.footer-section li,
.footer-section h1,
.footer-section h2,
.footer-section h3,
.footer-section h4,
.footer-section h5 {
  color: #FBFFED !important;
}

/* FOOTER ICONS */
.footer-section i,
.footer-social-icon i,
.single-cta i {
  color: #FBFFED !important;
}

/* FOOTER DIVIDERS */
.footer-section .footie-container {
  border-bottom: 1px solid rgba(251, 255, 237, 0.25);
}
   
   .footie-container {
       padding: 2em 4em;
       border-bottom: .5px solid #ffffff66;
   }
   
   .footie-top-row {
       text-align: center;
       display: grid;
       grid-row-gap: 25px;
       grid-column-gap: 25px;
       grid-template-areas: 'box1 box2 box3';
   }
   
   @media screen and (max-width: 1080px) {
       .footie-top-row {
           grid-template-areas:
               'box1'
               'box2'
               'box3';
       }
   
       .sticky li {
           display: block;
           color: white;
       }
   }
   
   .footer-cta {
       border-bottom: 1px solid var(--borderLine);
       padding: 10px 0 10px 0;
   }
   
   .single-cta i {
       color: var(--hoverColor) !important;
       font-size: 30px;
       float: left;
       margin-top: 8px;
   }
   
   .single-cta {
       margin-top: 25px;
   }
   
   .cta-text {
       padding-left: 55px;
       text-align: left;
   }
   
   .cta-text h4 {
       color: var(--primaryText);
       font-size: 20px;
       font-weight: 600;
       margin-bottom: 2px;
   }
   
   .cta-text span {
       color: var(--secondaryText);
       font-size: 15px;
       overflow-wrap: anywhere;
   }
   
   .footer-content {
       position: relative;
       z-index: 2;
       margin-top: 50px;
   }
   
   .footer-logo {
       margin-bottom: 30px;
   }
   
   .footer-logo img {
       max-width: 340px;
   }
   
   .footer-text {
       width: 90%;
   }
   
   .footer-text p {
       margin-bottom: 14px;
       font-size: 14px;
       color: var(--secondaryText);
       line-height: 28px;
   }
   
   .footer-social-icon span {
       color: var(--primaryText);
       display: block;
       font-size: 20px;
       font-weight: 700;
       margin: 30px 0 20px;
   }
   
   .footer-social-icon a {
       color: var(--primaryText);
       font-size: 16px;
       margin-right: 15px;
   }
   
   .footer-social-icon i {
       text-align: center;
       border-radius: 50%;
       width: 25% !important;
   }
   
   li.sm-list-item {
       width: 12% !important;
   }
   
   .footie-row {
       display: grid;
       grid-row-gap: 25px;
       grid-column-gap: 25px;
       grid-template-areas: 'col1 col2 col3';
   }
   
   @media screen and (max-width: 1080px) {
       .footie-row {
           grid-template-areas:
               'col1'
               'col2'
               'col3';
       }
   
       .footie-bottom-row {
           display: block !important;
       }
   
       .footer-menu ul {
           float: none !important;
       }
   
       .footer-menu li {
           margin: 10px 20px 5px 0 !important
       }
   }
   
   @media screen and (min-width: 1080px) {
       .footer--infoBox {
           margin-left: 20%;
       }
   
       .footer--column,
       .footer--infoBox {
           width: 27vw;
       }
   
       .footer--infoBox.box2 {
           margin-left: 15%;
       }
   
       .footer--infoBox.box3 {
           margin-left: 5%;
       }
   
   }
   
   header {
       overflow-x: hidden;
       overflow-y: hidden;
       width: 100%;
       box-shadow: 3px 3px 3px #79797942;
   }
   
   .footer-widget-heading h3 {
       color: var(--primaryText);
       font-size: 20px;
       font-weight: 600;
       margin-bottom: 40px;
       position: relative;
   }
   
   .footer-widget-heading h3::before {
       content: "";
       position: absolute;
       left: 0;
       bottom: -15px;
       height: 2px;
       width: 50px;
       background: var(--hoverColor);
   }
   
   .footer-menu ul {
       float: right;
   }
   
   .footer-menu li {
       display: inline-block;
       margin-left: 20px;
   }
   
   .footer-menu li:hover a {
       color: #788793;
   }
   
   .footer-menu li a {
       font-size: 14px;
       color: white;
   }
   
   .footer-widget ul li {
       display: inline-block;
       float: left;
       margin-bottom: 12px;
       width: 50%;
   }
   
   .footer-widget ul li a:hover {
       color: var(--hoverColor);
   }
   
   .footer-widget ul li a {
       color: var(--secondaryText);
       text-transform: capitalize;
   }
   
   .subscribe-form {
       position: relative;
       overflow: hidden;
   }
   
   .subscribe-form input {
       width: 100%;
       padding: 14px 28px;
       background: var(--secondaryBg);
       border: 1px solid var(--secondaryBg);
       color: var(--primaryText);
   }
   
   .subscribe-form button {
       position: absolute;
       right: 0;
       background: var(--hoverColor);
       padding: 13px 20px;
       border: 1px solid var(--hoverColor);
       top: 0;
   }
   
   .subscribe-form button i {
       color: var(--primaryText);
       font-size: 22px;
       transform: rotate(-6deg);
   }
   
   .footie-bottom-row {
       display: grid;
       grid-row-gap: 25px;
       grid-column-gap: 25px;
       grid-template-areas: 'col1 col2';
   }
   
   .copyright-area {
       background: var(--secondaryBg);
   }
   
   .copyright-text p {
       margin: 0;
       font-size: 14px;
       color: var(--secondaryText);
   }
   
   .copyright-text p a {
       color: var(--hoverColor);
   }
   
   .footer-menu .cc-list li {
       width: 30px;
   }
   
   
   /*-------------------------------------------*\ 
   // HOMEPAGE POPUP
   \*-------------------------------------------*/
   
   .popup-container {
       position: fixed;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       width: 800px;
       height: 500px;
       padding: 20px;
       background: #0D0928;
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
       border-radius: 8px;
       text-align: center;
       display: none;
       /* Hidden by default */
       z-index: 999999;
   }
   
   @media screen and (max-width: 600px) {
       .popup-container {
           width: 350px;
       }
   }
   
   .popup-container h2,
   .popup-container p {
       color: white;
   }
   
   .popup-container p {
       font-size: 20px;
   }
   
   .popup-overlay {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(0, 0, 0, 0.4);
       display: none;
       z-index: 999998;
   }
   
   .popup-container button {
       margin-top: 10px;
       padding: 8px 15px;
       border: none;
       background: #5f162c;
       color: white;
       cursor: pointer;
       border-radius: 5px;
   }
   
   .popup-container button:hover {
       background: #3d0e1c;
   }
   
   /* Confetti Canvas */
   canvas#confettiCanvas {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       pointer-events: none;
       /* Prevents interaction issues */
       z-index: 1000000;
       /* Higher than the popup */
   }
   
   /*-------------------------------------------*\ 
   // ODDS AND ENDS
   \*-------------------------------------------*/
   
   table {
       font-size: var(--font-size-m);
   }
   
   table thead th {
       background: #0D0928;
       color: var(--table-header-text-color, white);
   }
   
   button#ShipAddressNew {
       padding: 15px;
       font-size: 18px;
       background-color: #d70036;
       border-color: #d70036;
   }

/* FOOTER BASE */
.footer-section {
  background: #12221C !important;
  color: #FFFFFF !important;
}

/* All footer text + links = white */
.footer-section *,
.footer-section p,
.footer-section span,
.footer-section li,
.footer-section a,
.footer-section h1,
.footer-section h2,
.footer-section h3,
.footer-section h4,
.footer-section h5 {
  color: #FFFFFF !important;
}

/* PHONE + EMAIL ICONS */
.footer-section .single-cta i,
.footer-section .single-cta svg {
  color: #00AF66 !important;
  fill: #00AF66 !important;
  stroke: #00AF66 !important;
}

/* SOCIAL ICONS */
.footer-section .footer-social-icon i,
.footer-section .footer-social-icon svg {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* FOOTER LINK HOVERS */
.footer-section a:hover {
  color: #00AF66 !important;
}

/* ===== CLEAN HEADER BASELINE (START OVER) ===== */

/* Both bars dark green */
.header-wrapper,
.sticky {
  background: #12221C !important;
}

/* Top utility bar: white text/icons */
.top-nav,
.top-nav a,
.top-nav li,
.top-nav i {
  color: #FFFFFF !important;
}

/* Main nav row: white links */
header.header--site a,
header.header--site a:link,
header.header--site a:visited {
  color: #FFFFFF !important;
}

/* LOGO OVERRIDE (CSS-only fallback) */
.main-logo-space img,
.sticky-logo img {
  content: url("https://liftoff-shop.imgix.net/buildops/images/HorizontalLogoWhiteText/H%20Logo%20White%20Text.png") !important;
}

/* REMOVE LIFTOFF IMAGE OVERLAYS / DEBUG TEXT */
.main-logo-space::before,
.main-logo-space::after,
.main-logo-space img::before,
.main-logo-space img::after,
.sticky-logo::before,
.sticky-logo::after,
.sticky-logo img::before,
.sticky-logo img::after {
  content: none !important;
  display: none !important;
}

/* ===== FIX HEADER STACKING + THIN DIVIDER LINE ===== */

/* 1) Stop the lower nav from overlapping the top nav */
.sticky {
  position: relative !important;   /* was absolute */
  height: auto !important;         /* stop forced height squeezing */
  padding: 10px 3vw !important;    /* give it natural height */
  top: auto !important;
  box-shadow: 3px 3px 3px #00000042 !important; /* keep your shadow */
}

/* 2) Keep the top bar normal (no weird collapsing) */
.top-nav {
  padding: 15px 3vw !important;
}

/* 3) The divider line: thin white line BETWEEN bars */
.sticky {
  border-top: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* SEARCH ICON – BRIGHT GREEN */
.search-form i,
.search-box{
  /* KEY: force it onto its OWN ROW always */
  flex: 0 0 100% !important;
  width: 100% !important;

  display: flex !important;
  justify-content: flex-end !important;

  margin: 10px 0 0 0 !important;
  padding: 0 0 6px 0 !important;
}

/* FOOTER LOGO – replace default logo.png */
img[src*="/images/logos/logo.png"] {
  content: url("https://liftoff-shop.imgix.net/buildops/images/HorizontalLogoWhiteText/V%20Logo%20White%20Text.png") !important;
}

/* REDUCE GAP BETWEEN HEADER AND HERO */
.page-hero,
.hero,
.hero-banner,
.collection-hero,
.banner {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ===== HERO / SLIDER ALIGNMENT FIX (full-bleed) ===== */

/* remove the extra gap above the slider */
.slider {
  margin-top: 0 !important; /* was 70px in your file */
}

/* force slider to break out of any centered container */
.slider {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* make sure the image actually fills the slider width */
.slider .slide,
.slider .slide__image,
.slider .slide img {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

/* =========================
   GOLD ACCENTS (NUCLEAR OPTION, STILL TARGETED)
   ========================= */

/* CART: catch link + any icon type inside it (i, svg, img, pseudo) */
header.header--site a[href*="cart"],
header.header--site a[href*="/cart"],
.sticky a[href*="cart"],
.top-nav a[href*="cart"] {
  color: #ffaf0f !important;
}

header.header--site a[href*="cart"] i,
header.header--site a[href*="/cart"] i,
.sticky a[href*="cart"] i,
.top-nav a[href*="cart"] i {
  color: #ffaf0f !important;
}

header.header--site a[href*="cart"] svg,
header.header--site a[href*="cart"] svg * ,
header.header--site a[href*="/cart"] svg,
header.header--site a[href*="/cart"] svg * ,
.sticky a[href*="cart"] svg,
.sticky a[href*="cart"] svg * ,
.top-nav a[href*="cart"] svg,
.top-nav a[href*="cart"] svg * {
  fill: #ffaf0f !important;
  stroke: #ffaf0f !important;
  color: #ffaf0f !important;
}

/* If the cart icon is an IMG, try a filter (works best if it's black/white) */
header.header--site a[href*="cart"] img,
header.header--site a[href*="/cart"] img,
.sticky a[href*="cart"] img,
.top-nav a[href*="cart"] img {
  filter: brightness(0) saturate(100%) invert(77%) sepia(45%) saturate(1732%) hue-rotate(4deg) brightness(103%) contrast(103%) !important;
}

/* DROPDOWN ARROW: common Liftoff patterns */
.megamenu_drop::after,
.megamenu > li > a::after,
.top-nav a.dropdown-toggle::after,
.top-nav .dropdown-toggle::after {
  color: #ffaf0f !important;
  border-top-color: #ffaf0f !important;
}

/* Make ONLY the Log In arrow/icon gold */
.top-nav a.btnGoLogin i.fa-sign-in,
.top-nav li.login-link--mobile a.btnGoLogin i.fa-sign-in {
  color: #ffaf0f !important;
}

/* VERY TOP NAV BAR – background color update */
.top-nav {
  background-color: #40826a !important;
}

/* =========================
   FIX MOBILE NAV (<=1080px)
   ========================= */
@media (max-width: 1080px){

  /* Make the sticky header behave like a real mobile header */
  .sticky{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important;
    min-height: 70px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    padding: 10px 16px !important;
    z-index: 10000 !important;
  }

  /* Keep logo visible + in the flow (not absolute) */
  .main-logo-space{
    position: relative !important;
    left: auto !important;
    margin-left: 0 !important;
    z-index: 10001 !important;
  }

  .main-logo-space img{
    position: relative !important;
    top: 0 !important;
    height: 44px !important;
    max-width: 200px !important;
  }

  /* Hamburger: stop using floats/offsets */
  .mobile-toggle{
    float: none !important;
    right: auto !important;
    top: auto !important;
    position: relative !important;
    z-index: 10002 !important;
  }

  /* Hide desktop menu on mobile */
  .desktop-toggle{
    display: none !important;
  }

  /* Mobile dropdown panel: full width, correct units, no huge margin */
  nav.mobile-menu,
  .mobile-menu{
    position: fixed !important;
    top: 70px !important; /* header height */
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-height: calc(100vh - 70px) !important;
    overflow: auto !important;
    z-index: 9999 !important;
  }

  .mobile-menu ul{
    margin: 0 !important;
    padding: 14px 16px !important;
  }

  /* Ensure "open" states actually show */
  .mobile-menu.active,
  nav.mobile-menu.slide-down.shown{
    display: block !important;
  }
}

/* =========================================
   MOBILE NAV FIX (NO DELETES — OVERRIDES ONLY)
   Paste at very bottom of override.css
========================================= */

/* Keep top utility bar visible on mobile */
@media (max-width: 1080px){
  .top-nav{
    display: block !important;
    position: relative !important;
    z-index: 1005 !important;
  }
}

/* Make the main header behave on mobile */
@media (max-width: 1080px){
  .sticky{
    position: relative !important;
    height: auto !important;
    top: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 16px !important;
    z-index: 1004 !important;
  }

  /* Logo area: don't get clipped/covered */
  .main-logo-space{
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .main-logo-space img{
    max-width: 190px !important;
    height: auto !important;
    display: block !important;
    position: relative !important;
    top: 0 !important;
    margin: 0 !important;
  }

  /* Hamburger: stop the weird offsets */
  .mobile-toggle{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
    float: none !important;
    margin-left: 12px !important;
    z-index: 1010 !important;
  }

  /* Force desktop mega menu OFF on mobile (prevents overlap) */
  .desktop-toggle{
    display: none !important;
  }

  /* MOBILE MENU PANEL: full width, anchored to header */
  .mobile-menu.active,
  .mobile-menu.slide-down{
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;      /* directly under .sticky */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
    z-index: 1009 !important;
  }

  /* Kill the old “push down” spacing */
  .mobile-menu ul{
    margin: 0 !important;      /* overrides the 99px / 133px */
    padding: 14px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  .mobile-menu.active li{
    display: block !important;
    line-height: 2.6em !important;
  }
}

/* =========================================
   FIX: Clean chamfered frame (one method only)
   Paste at VERY BOTTOM of override.css
========================================= */

:root{
  --bo-dark:#12221C;
  --bo-off:#FBFFED;
  --bo-gold:#ffaf0f;
  --bo-stroke:2px;
}

/* === Center Callout Banner === */
.bo-callout{
  background: var(--bo-off);
  padding: 44px 0;
  margin: 28px 0;
}

.bo-callout{
  background: var(--bo-off);
  padding: 44px 0;
  margin: 28px 0;

  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.bo-callout__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 34px;
  align-items: center;
}

/* EXACT chamfer frame using an SVG stroke (no more “almost”) */
.bo-callout__frame{
  padding: 34px 34px;
  min-height: 170px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' preserveAspectRatio='none'%3E%3Cpath d='M6 0 L100 0 L100 54 L94 60 L0 60 L0 6 Z' fill='none' stroke='rgba(18,34,28,0.75)' stroke-width='1.8'/%3E%3C/svg%3E");
}

/* Title inside the frame */
.bo-callout__title{
  margin: 0;
  color: var(--bo-dark);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.05;
  font-size: clamp(26px, 2.4vw, 44px);
}

/* Right side */
.bo-callout__right{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.bo-callout__headline{
  color: var(--bo-dark);
  font-weight: 400;        /* normal weight */
  text-transform: none;   /* optional – remove ALL CAPS */
  letter-spacing: .02em;
  font-size: clamp(14px, 1.4vw, 18px);
}

.bo-callout__btn{
  display:inline-block;
  background: var(--bo-gold);
  color: var(--bo-dark);
  text-decoration:none;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 12px 22px;
  border-radius: 14px;
  border: 2px solid rgba(18,34,28,0.35);
  box-shadow: 0 10px 18px rgba(0,0,0,0.12);
}

.bo-callout__btn:hover{
  filter: brightness(0.95);
}

/* Mobile */
@media (max-width: 820px){
  .bo-callout__inner{
    grid-template-columns: 1fr;
    padding: 0 20px;
    gap: 18px;
  }
  .bo-callout__right{
    justify-content:flex-start;
  }
}

/* ===== BUILDOPS: force dropdown_fullwidth (underscore) to display ===== */
@media (min-width: 1080px){

  /* Prevent the header/nav from clipping the dropdown */
  header, nav.sticky, .megamenu_container, ul.megamenu{
    overflow: visible !important;
  }

  /* Make each top-level menu item the anchor */
  .megamenu_container .megamenu > li{
    position: relative !important;
  }

  /* Hide dropdown by default */
  .megamenu_container .megamenu > li > .dropdown_fullwidth{
    display: none !important;
    position: absolute !important;
    left: 0 !important;
    top: 100% !important;         /* directly under the menu item */
    min-width: 520px;              /* gives it room for columns */
    background: #f6f1e6 !important; /* beige */
    padding: 18px 22px !important;
    z-index: 99999 !important;
    box-sizing: border-box !important;
  }

  /* Show on hover/focus */
  .megamenu_container .megamenu > li:hover > .dropdown_fullwidth,
  .megamenu_container .megamenu > li:focus-within > .dropdown_fullwidth{
    display: block !important;
  }

  /* Clear floats so dropdown has height */
  .megamenu_container .megamenu > li > .dropdown_fullwidth::after{
    content:"";
    display:block;
    clear:both;
  }

  /* Ensure dropdown text is visible (not inheriting white) */
  .megamenu_container .dropdown_fullwidth,
  .megamenu_container .dropdown_fullwidth a,
  .megamenu_container .dropdown_fullwidth li,
  .megamenu_container .dropdown_fullwidth h3{
    color: #1b1b1b !important;
  }
}

/* ===== BUILDOPS Mega Menu layout ===== */
@media (min-width: 1080px){

  /* Make dropdown full-width and centered under the nav */
  nav.sticky { position: relative !important; }

  .megamenu_container .megamenu > li > .dropdown_fullwidth{
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    width: 100vw !important;                 /* full screen width */
    margin-left: calc(50% - 50vw) !important;/* align to viewport */
    border-top: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
  }

  /* Container inside dropdown */
  .megamenu_container .dropdown_fullwidth{
    padding: 22px 0 !important;
  }
  .megamenu_container .dropdown_fullwidth .dropdown_container{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 26px;
    box-sizing: border-box;
  }

  /* Columns */
  .megamenu_container .dropdown_fullwidth .col_3{
    float: left;
    box-sizing: border-box;
  }

  /* Left image column */
  .megamenu_container .dropdown_fullwidth .col_3_feature{
    width: 28%;
    padding-right: 22px;
  }
  .megamenu_container .dropdown_fullwidth .col_3_feature img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
  }

  /* Right content column */
  .megamenu_container .dropdown_fullwidth .col_3:not(.col_3_feature){
    width: 72%;
  }

  /* Subcategory list layout */
  .megamenu_container .dropdown_fullwidth .list_unstyled{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 columns of links */
    gap: 8px 18px;
    margin: 10px 0 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  .megamenu_container .dropdown_fullwidth .mega-li{
    margin: 0 !important;
    padding: 0 !important;
  }
  .megamenu_container .dropdown_fullwidth .mega-li a{
    padding: 6px 8px !important;
    border-radius: 6px;
    text-decoration: none !important;
    display: block !important;
  }
  .megamenu_container .dropdown_fullwidth .mega-li a:hover{
    background: rgba(0,0,0,.06);
  }

  /* Category title */
  .megamenu_container .dropdown_fullwidth h3{
    margin: 0 !important;
    font-size: 18px;
    line-height: 1.2;
  }

  /* Clear floats */
  .megamenu_container .megamenu > li > .dropdown_fullwidth::after{
    content:"";
    display:block;
    clear:both;
  }
}

/* ===== FIX: stop the giant beige dropdown + make layout clean ===== */
@media (min-width: 1080px){

  /* Cancel the full-viewport dropdown behavior */
  .megamenu_container .megamenu > li > .dropdown_fullwidth{
    width: 980px !important;          /* adjust if you want wider/narrower */
    max-width: calc(100vw - 80px) !important;
    margin-left: 0 !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    top: 100% !important;
    padding: 22px 26px !important;
    background: #f6f1e6 !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
    border-top: 1px solid rgba(0,0,0,.08) !important;
  }

  /* Use flex so it doesn’t collapse or go weird */
  .megamenu_container .megamenu > li > .dropdown_fullwidth{
    display: none !important;          /* keep hidden until hover */
  }
  .megamenu_container .megamenu > li:hover > .dropdown_fullwidth,
  .megamenu_container .megamenu > li:focus-within > .dropdown_fullwidth{
    display: flex !important;
    gap: 22px;
    align-items: flex-start;
  }

  /* Left image column */
  .megamenu_container .dropdown_fullwidth .col_3_feature{
    width: 260px !important;
    flex: 0 0 260px;
  }
  .megamenu_container .dropdown_fullwidth .col_3_feature img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 10px;
  }

  /* Hide the description column if it exists (you said not needed) */
  .megamenu_container .dropdown_fullwidth p{
    display: none !important;
  }

  /* Right column should take remaining space */
  .megamenu_container .dropdown_fullwidth .col_3:not(.col_3_feature){
    flex: 1 1 auto;
    width: auto !important;
    float: none !important;
  }

  /* Make subcategory links visible + nice */
  .megamenu_container .dropdown_fullwidth,
  .megamenu_container .dropdown_fullwidth a,
  .megamenu_container .dropdown_fullwidth li,
  .megamenu_container .dropdown_fullwidth h3{
    color: #1b1b1b !important;
  }

  .megamenu_container .dropdown_fullwidth h3{
    margin: 0 0 10px 0 !important;
    font-size: 18px !important;
  }

  .megamenu_container .dropdown_fullwidth .list_unstyled{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
  }

  .megamenu_container .dropdown_fullwidth .mega-li a{
    display: block !important;
    padding: 8px 10px !important;
    border-radius: 8px;
    text-decoration: none !important;
  }

  .megamenu_container .dropdown_fullwidth .mega-li a:hover{
    background: rgba(0,0,0,.07) !important;
  }
}

/* ===== CLEAN MEGA MENU: image + subcategories only ===== */
@media (min-width: 1080px){

  /* Hide the middle column completely */
  .megamenu_container .dropdown_fullwidth .col_3:not(.col_3_feature){
    flex: 1 1 auto !important;
  }

  /* Hide category title + description inside dropdown */
  .megamenu_container .dropdown_fullwidth h3,
  .megamenu_container .dropdown_fullwidth p{
    display: none !important;
  }

  /* Ensure dropdown layout is only image + links */
  .megamenu_container .megamenu > li:hover > .dropdown_fullwidth{
    display: flex !important;
    gap: 26px;
    align-items: flex-start;
  }

  /* Image column (left) */
  .megamenu_container .dropdown_fullwidth .col_3_feature{
    width: 260px !important;
    flex: 0 0 260px !important;
  }

  /* Subcategory list container */
  .megamenu_container .dropdown_fullwidth .list_unstyled{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
    margin-top: 4px;
  }

  /* Subcategory links */
  .megamenu_container .dropdown_fullwidth .mega-li a{
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 15px;
    text-decoration: none;
  }

  .megamenu_container .dropdown_fullwidth .mega-li a:hover{
    background: rgba(0,0,0,.08);
  }
}

/* ===== Remove the middle (description) column entirely ===== */
@media (min-width: 1080px){

  /* Hide ONLY the middle column (the one that contains h3/description) */
  .megamenu_container .dropdown_fullwidth .col_3:nth-of-type(2){
    display: none !important;
  }

  /* Make the 3rd column (links) fill the remaining space */
  .megamenu_container .dropdown_fullwidth .col_3:nth-of-type(3){
    flex: 1 1 auto !important;
    width: auto !important;
    float: none !important;
  }

  /* Keep the dropdown in a clean two-column layout */
  .megamenu_container .megamenu > li:hover > .dropdown_fullwidth,
  .megamenu_container .megamenu > li:focus-within > .dropdown_fullwidth{
    display: flex !important;
    gap: 26px;
    align-items: flex-start;
  }

  /* (Optional) tighten the link list a bit */
  .megamenu_container .dropdown_fullwidth .list_unstyled{
    margin-top: 0 !important;
  }
}

/* ===== Shrink dropdown to content (remove huge empty right space) ===== */
@media (min-width: 1080px){

  /* Make dropdown size to its content instead of full-width */
  .megamenu_container .megamenu > li > .dropdown_fullwidth{
    width: fit-content !important;
    max-width: calc(100vw - 80px) !important;
    padding: 28px 28px !important;
  }

  /* Keep your two-column layout clean */
  .megamenu_container .megamenu > li:hover > .dropdown_fullwidth,
  .megamenu_container .megamenu > li:focus-within > .dropdown_fullwidth{
    display: flex !important;
    gap: 26px;
    align-items: flex-start;
  }

  /* Image column */
  .megamenu_container .dropdown_fullwidth .col_3_feature{
    flex: 0 0 320px !important;
    width: 320px !important;
  }

  /* Links column (3rd col_3) */
  .megamenu_container .dropdown_fullwidth .col_3:nth-of-type(3){
    flex: 0 0 320px !important;
    width: 320px !important;
  }
}

/* ===== Mega menu subcategory text styling ===== */
@media (min-width: 1080px){

  /* Subcategory links */
  .megamenu_container .dropdown_fullwidth .list_unstyled a{
    color: #0a3f2e !important; /* darker BuildOps green */
    font-size: 18px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.2px;
  }

  /* Space them out a bit */
  .megamenu_container .dropdown_fullwidth .list_unstyled li{
    margin-bottom: 12px;
  }

  /* Hover state */
  .megamenu_container .dropdown_fullwidth .list_unstyled a:hover{
    color: #0aa36c !important; /* brighter green on hover */
    text-decoration: none;
  }
}

/* ===== BuildOps Beige (shared) ===== */
:root{
  --bo-beige: #f6f1e6;
}

/* Mega menu background */
:root{
  --megamenu-bg: var(--bo-beige);
}

/* "Workday Essentials" callout/banner background */
.bo-callout{
  background: var(--bo-beige) !important;
}

/* Hide "Shop All" from the desktop mega menu */
@media (min-width: 1080px){
  .megamenu > li:has(> a[href*="shop-all"]),
  .megamenu > li:has(> a[href*="/shopall"]),
  .megamenu > li:has(> a[href*="shop_all"]) {
    display: none !important;
  }
}

/* Workday Essentials: responsive centering */
.bo-callout{
  max-width: 1400px;
  width: calc(100% - 48px);
  margin: 40px auto;
  box-sizing: border-box;
}

/* When the screen shrinks, remove any "stuck" positioning */
@media (max-width: 1080px){
  .bo-callout{
    left: auto !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    position: relative !important;
    float: none !important;
  }
}

/* ===== Workday Essentials Callout (BuildOps colors) ===== */
.bo-callout{
  background: #12221C !important;  /* BuildOps Dark Green */
}

/* Make ALL text in the callout white */
.bo-callout,
.bo-callout *{
  color: #ffffff !important;
}

/* Outline / "shape" around WORKDAY ESSENTIALS = BuildOps Green */
.bo-callout .outlined-box,
.bo-callout .callout-box,
.bo-callout .bo-callout__box,
.bo-callout .bo-callout__outline{
  border-color: #00AF66 !important; /* BuildOps Green */
}

/* If the outline is being drawn with pseudo-elements, catch those too */
.bo-callout .outlined-box::before,
.bo-callout .outlined-box::after,
.bo-callout .callout-box::before,
.bo-callout .callout-box::after{
  border-color: #00AF66 !important;
}

/* =========================================
   FINAL: Collections + Featured Items headings
   Smaller + left + green accent line
   ========================================= */

html body #bodyContainer.container--homepage .homepage__callouts > h2,
html body #bodyContainer.container--homepage .homepage__secondary-callouts > h2{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  width: 100% !important;

  font-size: 22px !important;      /* smaller */
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  color: #12221C !important;        /* dark green */
  margin: 22px 0 14px !important;
  padding: 0 !important;
}

html body #bodyContainer.container--homepage .homepage__callouts > h2::after,
html body #bodyContainer.container--homepage .homepage__secondary-callouts > h2::after{
  content: "" !important;
  flex: 1 1 auto !important;
  height: 3px !important;
  margin-left: 18px !important;
  background: #00AF66 !important;   /* green accent line */
  border-radius: 999px !important;
  opacity: .85 !important;
}

/* Widen ONLY the homepage content (Collections + Featured) */
html body #bodyContainer.container.container--homepage{
  max-width: 1500px !important;                 /* <- make wider */
  width: min(1500px, calc(100% - 48px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Slightly tighter gutters on small screens so it still feels wide */
@media (max-width: 700px){
  html body #bodyContainer.container.container--homepage{
    width: calc(100% - 24px) !important;
  }
}

/* FEATURED ITEMS: cap image area (works for <img> AND background-image tiles) */
.homepage__featured-items .product-image,
.homepage__featured-items .product__image,
.homepage__featured-items .product-image a,
.homepage__featured-items .product__image a,
.homepage__featured-items .product-image .img,
.homepage__featured-items .product__image .img,
.homepage__featured-items .product-image img,
.homepage__featured-items .product__image img,
.homepage__featured-items .product img {
  max-width: 220px !important;
  width: 220px !important;
  height: 220px !important;
  margin: 0 auto !important;
  display: block !important;
}

/* If the “image” is a background-image, keep it contained */
.homepage__featured-items .product-image,
.homepage__featured-items .product__image,
.homepage__featured-items .product-image .img,
.homepage__featured-items .product__image .img {
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Shrink Featured Items callout images */
.homepage__secondary-callouts img,
.homepage__content .product-image img,
.homepage__content .featured-items img {
  max-width: 300px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
}

/* CENTER TITLES UNDER FEATURED ITEMS (Secondary Callouts) */
.homepage__secondary-callouts .callout__title,
.homepage__secondary-callouts .callout__title a {
  text-align: center !important;
  display: block;
  width: 100%;
}

/* MY ACCOUNT ICON (person) */
.top-nav a[href*="account"] i,
.top-nav a[href*="account"] svg,
.top-nav a[href*="account"] svg * {
  color: #ffaf0f !important;
  fill: #ffaf0f !important;
  stroke: #ffaf0f !important;
}

/* DROPDOWN ARROW (Shop / menus) */
.megamenu_drop::after,
.megamenu > li > a::after,
.top-nav .dropdown-toggle::after {
  color: #ffaf0f !important;
  border-top-color: #ffaf0f !important;
}

/* LOG OUT ICON (arrow) – catch Liftoff's actual patterns */
.top-nav a.btnGoLogout i,
.top-nav a.btnGoLogout i::before,
.top-nav a[class*="Logout"] i,
.top-nav a[class*="logout"] i,
.top-nav a[title*="Log Out"] i,
.top-nav a[aria-label*="Log Out"] i {
  color: #ffaf0f !important;
}

/* If the icon is SVG */
.top-nav a.btnGoLogout svg,
.top-nav a.btnGoLogout svg *,
.top-nav a[class*="logout"] svg,
.top-nav a[class*="logout"] svg * {
  fill: #ffaf0f !important;
  stroke: #ffaf0f !important;
  color: #ffaf0f !important;
}

/* If the arrow is a pseudo-element (common) */
.top-nav a.btnGoLogout::after,
.top-nav a[class*="logout"]::after,
.top-nav a[title*="Log Out"]::after,
.top-nav a[aria-label*="Log Out"]::after {
  color: #ffaf0f !important;
  border-top-color: #ffaf0f !important;
}

/* SHOP ALL BUTTON — gold bg + dark green text */
a[href*="shop-all"],
a[href*="/shopall"],
a[href*="shop_all"] {
  background-color: #ffaf0f !important;
  color: #12221C !important; /* dark green */
  font-weight: 700 !important;
}

/* Prevent hover from turning text white */
a[href*="shop-all"]:hover,
a[href*="/shopall"]:hover,
a[href*="shop_all"]:hover {
  background-color: #ffaf0f !important;
  color: #12221C !important;
}

a[href*="shop-all"] {
  border-radius: 999px;
  padding: 10px 18px;
}

/* Restore the "Workday Essentials" chamfer frame by making the stroke visible */
.bo-callout .bo-callout__frame{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' preserveAspectRatio='none'%3E%3Cpath d='M6 0 L100 0 L100 54 L94 60 L0 60 L0 6 Z' fill='none' stroke='%2300AF66' stroke-width='1.8'/%3E%3C/svg%3E") !important;
}

/* REMOVE "View" buttons from category landing tiles */
.categories .category__cta {
  display: none !important;
}

/* TOP CATEGORIES: force single-row layout */
.categories.topcategories {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 1fr !important;
  gap: 48px !important;
  justify-content: center;
}

/* PRODUCT GRID: reduce product title size */
.products.products--grid .product__title h3,
.products.products--grid .product__title a {
  font-size: 0.95rem !important;   /* adjust if needed */
  line-height: 1.3;
}

/* ==========================================================
   HOMEPAGE COLLECTIONS — 300px, ONE ROW, TITLES ALWAYS VISIBLE
   ========================================================== */

/* Force ONE horizontal row */
html body #bodyContainer.container.container--homepage
.homepage__callouts > .callouts{
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 32px !important;
}

/* Each collection tile */
html body #bodyContainer.container.container--homepage
.homepage__callouts > .callouts > figure.callout{
  flex: 0 0 300px !important;
  width: 300px !important;
  max-width: 300px !important;
}

/* Image wrapper */
html body #bodyContainer.container.container--homepage
.homepage__callouts > .callouts > figure.callout > .img-wrap{
  width: 300px !important;
  max-width: 300px !important;
  margin: 0 auto !important;
}

/* Image */
html body #bodyContainer.container.container--homepage
.homepage__callouts > .callouts > figure.callout > .img-wrap > img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* ==========================================================
   CART: restyle red buttons to BuildOps DARK GREEN
   ========================================================== */

#bodyContainer .cart button,
#bodyContainer .cart a.button,
#bodyContainer .cart .btn,
#bodyContainer .cart .btn-danger,
#bodyContainer .cart .button--danger{
  background-color: #12221C !important;   /* dark green */
  border-color: #12221C !important;
  color: #FFFFFF !important;
}

/* Hover state */
#bodyContainer .cart button:hover,
#bodyContainer .cart a.button:hover,
#bodyContainer .cart .btn:hover{
  background-color: #0f1b16 !important;
  border-color: #0f1b16 !important;
  color: #FFFFFF !important;
}

/* ==========================================================
   CHECKOUT: restyle "Add Shipping Address" button
   ========================================================== */

/* Target checkout primary action buttons */
#bodyContainer .checkout button,
#bodyContainer .checkout .btn,
#bodyContainer .checkout .button,
#bodyContainer .checkout .btn-danger,
#bodyContainer .checkout .button--danger{
  background-color: #12221C !important;   /* dark green */
  border-color: #12221C !important;
  color: #FFFFFF !important;
}

/* Hover state */
#bodyContainer .checkout button:hover,
#bodyContainer .checkout .btn:hover,
#bodyContainer .checkout .button:hover{
  background-color: #0f1b16 !important;
  border-color: #0f1b16 !important;
  color: #FFFFFF !important;
}

/* ==========================================================
   CHECKOUT: force the Shipping Address EDIT control to show
   (covers Liftoff variations + icon-only buttons)
   ========================================================== */

/* 1) Style ANY "edit" control inside the Shipping Address block */
#bodyContainer .checkout *[class*="shipping"] *[class*="edit"],
#bodyContainer .checkout *[class*="address"]  *[class*="edit"],
#bodyContainer .checkout *[data-action*="edit"],
#bodyContainer .checkout a[href*="edit"],
#bodyContainer .checkout button[name*="edit"]{
  color: #fff !important;
  background: #12221C !important;
  border: 1px solid #12221C !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
}

/* 2) If it’s icon-only / empty, force visible label text */
#bodyContainer .checkout *[class*="shipping"] *[class*="edit"]::after,
#bodyContainer .checkout *[class*="address"]  *[class*="edit"]::after,
#bodyContainer .checkout *[data-action*="edit"]::after{
  content: "Edit" !important;
  color: #fff !important;
}

/* 3) If Liftoff hides the text span inside, unhide it */
#bodyContainer .checkout *[class*="shipping"] *[class*="edit"] * ,
#bodyContainer .checkout *[class*="address"]  *[class*="edit"] * {
  color: #fff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ==========================================================
   CHECKOUT: Show EDIT labels for empty header buttons
   ========================================================== */

/* Style the empty edit buttons */
#bodyContainer .container--checkout .checkout button.btnEditBillingAddress,
#bodyContainer .container--checkout .checkout button.btnEditShippingAddress,
#bodyContainer .container--checkout .checkout button.btnEditShippingMethod,
#bodyContainer .container--checkout .checkout button[class^="btnEdit"],
#bodyContainer .container--checkout .checkout button[class*="btnEdit"]{
  background: #12221C !important;
  border: 1px solid #12221C !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
  cursor: pointer !important;
}

/* Inject visible text */
#bodyContainer .container--checkout .checkout button.btnEditBillingAddress::before,
#bodyContainer .container--checkout .checkout button.btnEditShippingAddress::before,
#bodyContainer .container--checkout .checkout button.btnEditShippingMethod::before,
#bodyContainer .container--checkout .checkout button[class^="btnEdit"]::before,
#bodyContainer .container--checkout .checkout button[class*="btnEdit"]::before{
  content: "Edit" !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

/* ==========================================================
   CHECKOUT: Make ALL btnEdit* buttons white (works w/ your DOM)
   ========================================================== */

/* direct, high-specificity targeting */
html body #bodyContainer .checkout__content button.btnEditBillingAddress,
html body #bodyContainer .checkout__content button.btnEditShippingAddress,
html body #bodyContainer .checkout__content button.btnEditShippingMethod,
html body #bodyContainer .checkout__content button[class^="btnEdit"],
html body #bodyContainer .checkout__content button[class*="btnEdit"]{
  background-color: #ffffff !important;
  border: 1px solid #12221C !important;
  color: #12221C !important;
  padding: 6px 12px !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
}

/* force icon to dark green (in case it’s a pseudo-element / child span) */
html body #bodyContainer .checkout__content button[class^="btnEdit"]::before,
html body #bodyContainer .checkout__content button[class*="btnEdit"]::before,
html body #bodyContainer .checkout__content button[class^="btnEdit"] *,
html body #bodyContainer .checkout__content button[class*="btnEdit"] *{
  color: #12221C !important;
}

/* ==========================================================
   CHECKOUT: Make ALL btnEdit* buttons white (every section)
   ========================================================== */

/* Covers shipping address + shipping method + billing + others */
html body #bodyContainer .checkout__content button[class^="btnEdit"],
html body #bodyContainer .checkout__content button[class*="btnEdit"],
html body #bodyContainer .checkout-panes button[class^="btnEdit"],
html body #bodyContainer .checkout-panes button[class*="btnEdit"],
html body #bodyContainer .checkoutPane button[class^="btnEdit"],
html body #bodyContainer .checkoutPane button[class*="btnEdit"],
html body #bodyContainer #checkout button[class^="btnEdit"],
html body #bodyContainer #checkout button[class*="btnEdit"],
html body #bodyContainer [class*="checkout"] button[class^="btnEdit"],
html body #bodyContainer [class*="checkout"] button[class*="btnEdit"]{
  background-color: #ffffff !important;
  border: 1px solid #12221C !important;
  color: #12221C !important;
  padding: 6px 12px !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
}

/* Make sure the icon is dark green too */
html body #bodyContainer [class*="checkout"] button[class^="btnEdit"]::before,
html body #bodyContainer [class*="checkout"] button[class*="btnEdit"]::before,
html body #bodyContainer [class*="checkout"] button[class^="btnEdit"] *,
html body #bodyContainer [class*="checkout"] button[class*="btnEdit"] *{
  color: #12221C !important;
}

/* Catch the "GoTo" step buttons too (if used for Shipping Method) */
html body #bodyContainer [class*="checkout"] button[class^="btnGoTo"],
html body #bodyContainer [class*="checkout"] button[class*="btnGoTo"]{
  background-color: #ffffff !important;
  border: 1px solid #12221C !important;
  color: #12221C !important;
}

/* ==========================================================
   CHECKOUT: Make the Shipping Address + Shipping Method edit blocks WHITE
   (these are "btnGoTo..." buttons, not "btnEdit..." buttons)
   ========================================================== */

html body #bodyContainer [class*="checkout"] button[class^="btnGoTo"],
html body #bodyContainer [class*="checkout"] button[class*="btnGoTo"],
html body #bodyContainer [class*="checkout"] button.btnGoToShippingDetails,
html body #bodyContainer [class*="checkout"] button.btnGoToShippingMethod{
  background-color: #ffffff !important;
  border: 1px solid #12221C !important;
  color: #12221C !important;
  padding: 6px 12px !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
}

/* Force any icon/pseudo icon to dark green */
html body #bodyContainer [class*="checkout"] button[class^="btnGoTo"]::before,
html body #bodyContainer [class*="checkout"] button[class*="btnGoTo"]::before,
html body #bodyContainer [class*="checkout"] button[class^="btnGoTo"] *,
html body #bodyContainer [class*="checkout"] button[class*="btnGoTo"] *{
  color: #12221C !important;
}

/* ==========================================================
   CHECKOUT: Shipping Address Edit — show pencil icon, hide text
   Target ONLY: .btnGoToShippingDetails
   ========================================================== */

#bodyContainer button.btnGoToShippingDetails{
  width: 46px !important;
  min-width: 46px !important;
  height: 28px !important;
  padding: 0 !important;

  background: #12221C !important;
  border: 1px solid #12221C !important;
  border-radius: 4px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  overflow: hidden !important;
  white-space: nowrap !important;

  /* hide the raw "Edit" text without breaking icon */
  color: transparent !important;
  font-size: 0 !important;
}

/* Force the Font Awesome pencil to appear */
#bodyContainer button.btnGoToShippingDetails i.fa,
#bodyContainer button.btnGoToShippingDetails i.fa-edit{
  display: inline-block !important;
  font-size: 13px !important;
  color: #ffffff !important;
  line-height: 1 !important;
}

/* ==========================================================
   QUICK FIX: Make header categories smaller to fit beside logo
   (DESKTOP + TABLET only) — does NOT touch hero/slider
   ========================================================== */

@media (min-width: 1081px){

  /* 1) Give the logo less real estate */
  .main-logo-space{
    margin-left: 18px !important;     /* was 10vh */
  }

  .main-logo-space img{
    height: 44px !important;          /* was 60px */
    top: 10px !important;
  }

  /* 2) Pull the nav a bit closer to the logo */
  header.header--site{
    padding-left: 20px !important;    /* was 50px */
    padding-right: 20px !important;
  }

  /* 3) Shrink the category links (this is the big one) */
  .megamenu > li > a{
    font-size: 16px !important;       /* replaces 1.4em */
    padding: 10px 10px !important;    /* replaces 16px */
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  /* Optional: reduce spacing at the end */
  .megamenu li:last-child{
    margin-right: 0 !important;
  }
}

/* Tablet: shrink even more so it still fits */
@media (min-width: 769px) and (max-width: 1080px){

  .main-logo-space{
    margin-left: 12px !important;
  }

  .main-logo-space img{
    height: 40px !important;
    top: 10px !important;
  }

  .megamenu > li > a{
    font-size: 14px !important;
    padding: 8px 8px !important;
  }
}

.sticky {
  width: 100%;
  z-index: 10;
  background: #12221C !important;
  box-shadow: 3px 3px 3px #00000042;

  /* KEY: make it a wrapping layout */
  position: relative !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;

  /* Give space for the absolute logo on the left */
  padding: 12px 3vw 10px calc(3vw + 120px) !important;

  overflow-x: hidden !important;
}

.search-box svg,
.search-box i,
.search-box button svg {
  fill: #19b36a !important;   /* BuildOps green */
  color: #19b36a !important;
}

/* =========================================
   FIX: Mobile menu opens but gets CLIPPED by header overflow
   Paste at VERY BOTTOM
========================================= */
@media (max-width: 1080px){

  /* Your CSS currently hides overflow on header – that clips the dropdown */
  header,
  header.header--site,
  .header-wrapper,
  nav.sticky,
  .sticky{
    overflow: visible !important;
  }

  /* Make sure the sticky row is the anchor for the dropdown */
  .sticky{
    position: relative !important;
    z-index: 10000 !important;
  }

  /* Force the menu panel to sit under the sticky header */
  nav.mobile-menu,
  .mobile-menu{
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
  }

  /* Background/spacing so it's obvious when it opens */
  nav.mobile-menu ul,
  .mobile-menu ul{
    margin: 0 !important;
    padding: 14px 16px !important;
    background: #12221C !important;
  }
}

/* =========================================
   DESKTOP RESET: prevent mobile-menu state
   from sticking after hamburger toggle
========================================= */
@media (min-width: 1081px){

  /* Hide any mobile drawer / overlay menu */
  .mobile-menu,
  .mobileNav,
  .nav-mobile,
  .menu-mobile,
  .mobile-nav,
  .hamburger-menu,
  .offcanvas,
  .drawer,
  .side-drawer {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: none !important;
  }

  /* Force the "categories/top nav" back to normal desktop layout */
  .category-nav,
  .categories-nav,
  .categoryNav,
  .nav-categories,
  .main-nav,
  .nav-links,
  .header-nav,
  nav ul {
    position: relative !important;
    transform: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  /* If the platform adds an "open" class, kill its effects on desktop */
  body.menu-open,
  body.nav-open,
  body.mobile-nav-open,
  body.drawer-open {
    overflow: visible !important;
  }

/* =========================================
   1) Mobile Header Bar Fix
   ========================================= */
@media (max-width: 900px) {

  /* Kill the desktop mega-menu row on mobile */
  nav.sticky .desktop-toggle.wrapper {
    display: none !important;
  }

  /* Let the sticky nav auto-size (no forced tall height) */
  nav.sticky,
  nav.sticky .megamenu_container {
    height: auto !important;
    min-height: 0 !important;
  }

  /* Make the mobile header area a normal height */
  nav.sticky {
    padding: 10px 16px !important;
  }

  /* Put the hamburger in a predictable spot (right side) */
  nav.sticky .mobile-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
    width: 44px;
  }

  /* Keep your logo from being tiny / floating weird */
  header .main-logo-space img {
    max-height: 44px !important;
    width: auto !important;
  }
}

/* ==========================================================
   Desktop Alignment
   ========================================================== */

@media (min-width: 901px){

  /* Make the sticky row a flex row (does NOT change logo absolute rules) */
  html body nav.sticky,
  html body .sticky{
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  /* Push the NAV GROUP (whatever wrapper Liftoff uses) to the RIGHT */
  html body nav.sticky .desktop-toggle,
  html body nav.sticky .desktop-toggle.wrapper,
  html body nav.sticky .megamenu_container,
  html body .sticky .desktop-toggle,
  html body .sticky .desktop-toggle.wrapper,
  html body .sticky .megamenu_container{
    margin-left: auto !important;
  }

  /* Keep categories in one row */
  html body nav.sticky ul.megamenu,
  html body .sticky

/* =========================================
   CLEANER PRODUCT GRID (Category + Search)
   Smaller images + more spacing + card layout
   Paste at VERY BOTTOM of override.css
========================================= */

/* 1) Give the grid more breathing room */
html body .products.products--grid{
  gap: 28px !important;              /* space between tiles */
  row-gap: 34px !important;
}

/* 2) Make each product tile feel like a clean card */
html body .products.products--grid .product{
  padding: 18px 18px 16px !important;
  border: 1px solid rgba(18,34,28,0.12) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.06) !important;
}

/* Optional: nicer hover */
html body .products.products--grid .product:hover{
  transform: translateY(-2px);
  transition: 150ms ease;
  box-shadow: 0 12px 24px rgba(0,0,0,0.10) !important;
}

/* 3) Cap the image area so pics aren’t massive */
html body .products.products--grid .product__image,
html body .products.products--grid .product-image,
html body .products.products--grid .img-wrap{
  height: 210px !important;          /* <- adjust 180–240 */
  max-height: 210px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-bottom: 14px !important;
}

/* 4) Make images fit nicely inside that box */
html body .products.products--grid .product__image img,
html body .products.products--grid .product-image img,
html body .products.products--grid .img-wrap img{
  max-height: 190px !important;      /* keeps it contained */
  width: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* 5) Title + info spacing */
html body .products.products--grid .product__title{
  min-height: 52px !important;       /* stops jumpy tiles */
  margin: 6px 0 10px !important;
}

html body .products.products--grid .product__title h3,
html body .products.products--grid .product__title a{
  font-size: 0.95rem !important;
  line-height: 1.25 !important;
  letter-spacing: 0.02em !important;
}

/* 6) Price row + button spacing (so it’s not cramped) */
html body .products.products--grid .product__pricing,
html body .products.products--grid .product__copy{
  margin-top: 10px !important;
}

html body .products.products--grid .product .button,
html body .products.products--grid .product a.button,
html body .products.products--grid .product button{
  margin-top: 12px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
}

/* 7) Tighten the grid count only on big screens if needed */
@media (min-width: 1200px){
  html body .products.products--grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* 3 across */
  }
}

/* On smaller screens, keep it roomy */
@media (max-width: 768px){
  html body .products.products--grid{
    gap: 18px !important;
    row-gap: 22px !important;
  }

  html body .products.products--grid .product__image,
  html body .products.products--grid .product-image,
  html body .products.products--grid .img-wrap{
    height: 180px !important;
    max-height: 180px !important;
  }
}

.bo-callout__btn {
  display: none !important;
}