/*-------------------------------------------*\ 
   // GLOBAL
   \*-------------------------------------------*/
   
   
   @import url("https://use.typekit.net/tvd3akk.css");
   @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');
   
   /* Default font for all body text */
   body {
       font-family: 'Plus Jakarta Sans', sans-serif;
   }

/* ===== Jakarta Sans polish for nav + dropdown ===== */
.sticky a,
.megamenu > li > a,
.dropdown_fullwidth,
.dropdown_fullwidth a{
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.megamenu > li > a{
  font-weight: 600 !important;
  letter-spacing: .01em;
}

.dropdown_fullwidth .mega-li a{
  font-weight: 500 !important;
}
   
   /* Custom font for headlines */
   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
       font-family: 'supria-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 {
/* LOGO SIZES */
       --logo-height: 100px;           /* Standard Desktop size */
       --logo-height-sticky: 60px;    /* Size when scrolling */
       --logo-height-mobile: 180px;   /* Width for mobile screens */

       /* EXISTING VARIABLES BELOW */
       --homepage-callout-col-count: 4;       
--homepage-callout-col-count: 4;
       --slide-style-a-column-widths-tablet: 1fr;
       --slide-style-a-column-widths-large: 1fr;
       --homepage-secondary-callout-col-count: 4;
       --shadow-standard: 0px 0px 3px hsl(0, 0%, 65%);
       --color-info: hsl(0deg 0% 90.2%);
       --color-info-dark: hsl(211.58deg 31.15% 11.96%);
       --container-max-width: 80%;
       --category-products-per-row-large: 4;
       --categories-per-row-medium: 4;
       --color-success: hsl(340.8deg 65.22% 22.55% / 28%);
       --color-success-dark: hsl(340.8deg 65.22% 22.55%);
       --category-product-name-font-size: 1.1em;
       --homepage-callout-title-horizontal-alignment: left;
       --color-negative-dark: #5f162c;
       --button-primary-background-color: #002B5C;
       --color-grey: #E61914;
       --highlight-text: #E61914;
       --color-black: #0D0928;
       --link-text-color: #0D0928;
       --color-light-grey: #E61914;
   
       /* TOP NAVIGATION BAR COLORS */
       --primary-bg: #0D0928;
       --primary-text: #fff;
       /* MAIN MENU COLORS */
       --secondary-bg: #fff;
       --secondary-text: #0D0928;
       /* HIGHLIGHT/HOVER COLORS */
       --highlight-bg: #79859330;
       /* MEGAMENU DROPDOWN COLORS */
       --megamenu-bg: #fff;
       --megamenu-links: #0D0928;
       --megamenu-title: #0D0928;
       --megamenu-text: #0D0928;
       /* MOBILE COLORS */
       --mobile-icon: #0D0928;
       --mobile-bg: #0D0928;
       --mobile-text: #fff;
       --mobile-bg-highlight: #422254;
   }
   
   
   /*-------------------------------------------*\ 
   // SLIDER
   \*-------------------------------------------*/
   
   .slide img {
       border: 0;
       background: white;
       box-shadow: none;
   }
   
   .slider {
       margin-top: 70px;
   }
   
   .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: #061c30;
       margin-top: 5px;
       margin-bottom: 5px;
       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: 80px;
       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: 50px;
   }
   
   .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: var(--secondary-bg) !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: var(--secondary-text);
   }
   
   .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 {
       transition: all 0.2s ease;
       position: relative;
       z-index: 9999;
   }
   
   .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;
   }
   
  
   /* Showing Drop Down on Mouse Hover */
   .megamenu li:hover .dropdown_container {
       top: 45px;
       left: auto;
   }
  
   
   .megamenu li .dropdown_right {
       right: 0;
   }
   
   .megamenu li:hover .dropdown_right {
       top: 45px;
       left: auto;
       right: 0;
   }
   
  
   /* 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: 80px;
       min-height: 400px;
   }
   
   .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: var(--primary-bg);
       position: relative;
       margin-top: 50px;
       color: white;
      align-self: end;
   }
   
   .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: 300px;
   }
   
   .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;
   }

/* Swaps the footer logo to the Main No Background version */
.footer--infoBox.box1 .logo-space img {
    content: url("https://liftoff-shop.imgix.net/instructure/images/Images/Main%20Logo%20No%20Background.png?t=1772560814273") !important;
    width: 100% !important;
    max-width: 180px !important; /* Adjust this to make the logo larger or smaller */
    height: auto !important;
    display: block;
}

.footer--infoBox.box1 .logo-space p {
    width: auto !important;
}

/* Target the specific top-bar link for About Us */
.secondary-menu li a[href*="about-us"],
.secondary-menu li a[href*="About-Us"],
#header .secondary-menu li:nth-child(4) {
    display: none !important;
}

/* Ensure dropdown can appear above everything */
header,
nav.sticky,
.megamenu_container {
  overflow: visible !important;
}

/* Hide by default (you already do this, keeping for clarity) */
.megamenu li .dropdown_fullwidth {
  position: absolute;
  left: -9999em;
  top: -9999em;
  z-index: 99999;
}

/* SHOW dropdown on hover (THIS is the missing selector match) */
.megamenu li:hover > .dropdown_fullwidth {
  top: 45px;
  left: -1px;
}

/* Sticky bar version */
.sticky .megamenu li:hover > .dropdown_fullwidth {
  top: 70px;
  left: -1px;
}

/* Optional: keep parent li from “shrinking” hover area */
.megamenu > li {
  position: relative;
}

/* Fix: homepage body starts under sticky header (inline style was forcing margin-top:0) */
#bodyContainer {
  margin-top: 120px !important;  /* adjust this number until it’s perfect */
}

@media (max-width: 1080px) {
  #bodyContainer {
    margin-top: 150px !important;
  }
}

/* =========================================
   INSTRUCTURE MEGA MENU (DESKTOP)
   - keeps image column
   - removes middle title/description column
   - centers dropdown under the parent item
   - prevents running off screen
   ========================================= */
@media (min-width: 1080px){

  /* anchor dropdown to each top-level <li> */
  .megamenu_container .megamenu > li{
    position: relative !important;
  }

  /* default: hidden */
  .megamenu_container .megamenu > li > .dropdown_fullwidth{
    display: none !important;
    position: absolute !important;
    top: calc(100% + 10px) !important;

    /* CENTER it under the menu item */
    left: 50% !important;
    transform: translateX(-50%) !important;

    /* sizing so it never runs off-screen */
    width: 900px !important;               /* adjust if needed */
    max-width: calc(100vw - 40px) !important;

    padding: 22px 26px !important;
    background: #fff !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.18) !important;
    z-index: 99999 !important;
  }

  /* show on hover/focus */
  .megamenu_container .megamenu > li:hover > .dropdown_fullwidth,
  .megamenu_container .megamenu > li:focus-within > .dropdown_fullwidth{
    display: flex !important;
    gap: 26px !important;
    align-items: flex-start !important;
  }

  /* LEFT IMAGE COLUMN (keep it) */
  .megamenu_container .dropdown_fullwidth .col_3_feature{
    flex: 0 0 260px !important;
    width: 260px !important;
  }

  .megamenu_container .dropdown_fullwidth .col_3_feature img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 12px !important;
  }

  /* REMOVE MIDDLE COLUMN (APPAREL title/description) */
  .megamenu_container .dropdown_fullwidth .col_3:nth-of-type(2){
    display: none !important;
  }

  /* LINKS COLUMN fills remaining space */
  .megamenu_container .dropdown_fullwidth .col_3:nth-of-type(3){
    flex: 1 1 auto !important;
    width: auto !important;
    float: none !important;
  }

  /* make the list a clean grid */
  .megamenu_container .dropdown_fullwidth .list_unstyled{
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 18px !important;
  }

  /* subcategory link styling */
  .megamenu_container .dropdown_fullwidth .mega-li a{
    display: block !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    text-decoration: none !important;

    color: var(--megamenu-links, #0D0928) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
  }

  .megamenu_container .dropdown_fullwidth .mega-li a:hover{
    background: var(--highlight-bg, rgba(121,133,147,.18)) !important;
    color: var(--highlight-text, #E61914) !important;
  }
}

/* ===== Dropdown image: slightly smaller + cleaner ===== */
@media (min-width: 1080px){
  .megamenu_container .dropdown_fullwidth .col_3_feature{
    flex: 0 0 230px !important;  /* was 260 */
    width: 230px !important;
  }

  .megamenu_container .dropdown_fullwidth .col_3_feature img{
    border-radius: 14px !important;
  }
}

/* =====================================
   HOME: pull COLLECTIONS closer to banner
   ===================================== */

/* Reduce space AFTER the slider */
.slider{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Reduce space BEFORE the Collections section */
.homepage__callouts{
  margin-top: 10px !important;   /* was effectively larger */
  padding-top: 0 !important;
}

/* Reduce the actual "COLLECTIONS" title spacing */
.homepage__callouts h2{
  margin-top: 10px !important;   /* you currently have 38px */
  margin-bottom: 12px !important;
}

/* Mobile tuning (usually needs a bit more breathing room) */
@media (max-width: 768px){
  .homepage__callouts{
    margin-top: 6px !important;
  }
  .homepage__callouts h2{
    margin-top: 6px !important;
    margin-bottom: 10px !important;
  }
}

/* =========================================
   HOME: pull COLLECTIONS up closer to slider
   ========================================= */

/* Reduce space above the Collections block */
#bodyContainer.container--homepage .homepage__callouts{
  margin-top: -80px !important; 
  padding-top: 0 !important;
}

/* Tighten the Collections title spacing */
#bodyContainer.container--homepage .homepage__callouts h2{
  margin-top: 0 !important;
  margin-bottom: 14px !important;
}

/* Mobile: use a smaller pull so it doesn't overlap */
@media (max-width: 1080px){
  #bodyContainer.container--homepage .homepage__callouts{
    margin-top: -20px !important;
  }
}

/* SHOP ALL HERO */

.shopall-hero{
  background:#061E2C;
  padding:60px 20px;   /* reduced height */
  text-align:center;
}

.shopall-inner{
  max-width:900px;
  margin:auto;
}

.shopall-hero h2{
  color:white;
  font-size:42px;
  font-weight:800;
  letter-spacing:-0.02em;
  margin-bottom:12px;
}

.shopall-hero p{
  color:white;
  font-size:18px;
  opacity:.9;
  margin-bottom:22px;
}

/* BUTTON */
.shopall-btn{
  display:inline-block;
  padding:12px 28px;
  border-radius:40px;
  border:2px solid white;
  color:white !important;          /* forces white text */
  font-weight:600;
  text-decoration:none;
  transition:all .2s ease;
}

.shopall-btn:hover{
  background:white;
  color:#061E2C !important;
}

.shopall-hero{
  background:#061E2C;
  height:300px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  margin-top:40px;   /* pushes it down below categories */
}

/* Force footer contact icons to Instructure red */
.footer-section .single-cta i.fa,
.footer-section .single-cta i.fas,
.footer-section .single-cta i.far,
.footer-section .single-cta i{
  color: #E72429 !important;
}

/* If Font Awesome is coming through as a pseudo-element */
.footer-section .single-cta i.fa:before,
.footer-section .single-cta i.fas:before,
.footer-section .single-cta i.far:before{
  color: #E72429 !important;
}

/* If the icons are SVGs */
.footer-section .single-cta svg{
  fill: #E72429 !important;
  stroke: #E72429 !important;
}

/* Collections section background panel */

.homepage__callouts{
  background:#f5f6f8;        /* very light gray */
  padding:60px 40px;
  margin-top:40px;
  border-radius:12px;
}

/* ===== SHOP ALL HERO - responsive (no mobile overlap) ===== */

.shopall-hero{
  background:#061E2C;
  min-height:300px;              /* desktop feel */
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;             /* safety padding */
  margin-top:40px;
}

/* Make sure inner content can't push weirdly */
.shopall-inner{
  width:100%;
  max-width:900px;
  margin:0 auto;
}

/* Mobile: let it grow naturally */
@media (max-width: 768px){
  .shopall-hero{
    min-height:0;                /* remove fixed height behavior */
    height:auto;                 /* important */
    display:block;               /* no flex stacking oddities */
    padding:36px 18px 44px;
    margin-top:24px;
  }

  /* Add space AFTER the banner so Featured Items never crowds it */
  .shopall-hero{
    margin-bottom:24px;
  }
}

/* ===========================
   PRODUCT GRID -> CARD TILES
   (category pages / search results)
   =========================== */

/* Add breathing room in the grid */
.products,
.product-grid,
.productGrid,
.product-list,
.search-results .products{
  gap: 22px; /* only applies if container is grid/flex */
}

/* Target common product tile wrappers */
.product,
.product-card,
.product-tile,
.product-item,
.products .item,
.product-grid .item,
.productGrid__item,
.product-listing .item{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}

/* Hover polish */
.product:hover,
.product-card:hover,
.product-tile:hover,
.product-item:hover,
.products .item:hover,
.product-grid .item:hover,
.productGrid__item:hover,
.product-listing .item:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
}

/* Ensure inner padding looks intentional */
.product .details,
.product-card .details,
.product-tile .details,
.product-item .details,
.products .item .details,
.product-grid .item .details,
.productGrid__item .details,
.product-listing .item .details{
  padding: 18px 18px 16px;
}

/* Keep every product image area the same height */
.products.products--grid .product__image {
  height: 300px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.products.products--grid .product__image .img-wrap {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.products.products--grid .product__image .img-wrap a {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.products.products--grid .product__image img {
  display: block !important;
  width: auto !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 300px !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}

/* Button alignment (keeps "View" from floating weird) */
.product .button,
.product-card .button,
.product-tile .button,
.product-item .button,
.products .item .button,
.product-grid .item .button,
.productGrid__item .button,
.product-listing .item .button{
  border-radius: 12px;
}

/* PRODUCT CARD SIZE */

.product,
.product-item,
.products .item,
.product-grid .item,
.productGrid__item{
  background:#fff;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  padding:22px;

  width:100%;
  max-width:420px;
  margin:0 auto;

  box-sizing:border-box;
}

/* PRODUCT CARD VIEW BUTTON */

.products .button,
.products .btn,
.products a.button{
  background:#082B4C !important;   /* dark Instructure navy */
  border:none;
  color:white !important;
  border-radius:8px;
  padding:12px 28px;
  font-weight:600;
  transition:all .2s ease;
}

/* Hover state */
.products .button:hover,
.products .btn:hover,
.products a.button:hover{
  background:#0F4C81 !important;   /* lighter blue hover */
}

/* Hide subcategory view buttons */
.category .button,
.subcategory .button,
.category-list .button,
.category-grid .button,
.category-page .button{
  display:none !important;
}

/* Subcategory layout cleanup */

.category-grid,
.subcategory-grid{
  gap:40px;
  margin-top:40px;
}

.category-grid .item,
.subcategory-grid .item{
  padding-bottom:10px;
}

/* Make subcategory titles interactive */

.category-grid a,
.subcategory a{
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#0B2F5B;
  text-decoration:none;
  transition:all .15s ease;
}

.category-grid a:hover,
.subcategory a:hover{
  color:#0F4C81;
}

/* ===========================
   CHILD CATEGORY GRID CLEANUP
   =========================== */

/* 1) Kill the "View" buttons (common Liftoff patterns) */
a.button,
a.btn,
.button,
.btn,
.category a.button,
.category .button,
.subcategory a.button,
.subcategory .button,
.categories a.button,
.categories .button,
.category-grid a.button,
.category-grid .button{
  display:none !important;
}

/* 2) Normalize the child category grid spacing */
.categories,
.category-grid,
.subcategory-grid,
.category-list{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px !important;
  align-items: stretch !important;
  margin: 36px auto 10px !important;
}

/* 3) Make each child category look intentional (card) */
.categories > *,
.category-grid > *,
.subcategory-grid > *,
.category-list > *{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:16px;
  padding:22px 18px;
  text-align:center;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

/* Hover effect on the whole card */
.categories > *:hover,
.category-grid > *:hover,
.subcategory-grid > *:hover,
.category-list > *:hover{
  transform: translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.10);
  border-color: rgba(8,43,76,.35);
}

/* 4) Make the child category title/link feel clickable */
.categories a,
.category-grid a,
.subcategory-grid a,
.category-list a{
  display:inline-block;
  color:#082B4C !important;        /* dark Instructure navy */
  text-decoration:none !important;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  line-height:1.2;
  padding:6px 8px;
  border-radius:10px;
  transition:background .15s ease, color .15s ease;
}

.categories a:hover,
.category-grid a:hover,
.subcategory-grid a:hover,
.category-list a:hover{
  background: rgba(15,76,129,.08); /* light hover */
  color:#0F4C81 !important;        /* lighter blue hover */
}

/* 5) Mobile: stack nicely */
@media (max-width: 768px){
  .categories,
  .category-grid,
  .subcategory-grid,
  .category-list{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-top: 22px !important;
  }
}

/* Reduce space between page title and category cards */
.page-title,
h1.page-title,
.category-title{
  margin-bottom: 18px !important;
}

/* Tighten category card spacing */
.categories > *,
.category-grid > *,
.subcategory-grid > *,
.category-list > *{
  padding: 18px 16px !important;
  min-height: auto !important;
}

/* Remove extra bottom space inside the card */
.categories a,
.category-grid a,
.subcategory-grid a,
.category-list a{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Pull the whole grid slightly closer to the title */
.categories,
.category-grid,
.subcategory-grid,
.category-list{
  margin-top: 14px !important;
}

/* --- Tighten space under the page title --- */
.page-title,
h1.page-title,
h1 {
  margin-bottom: 8px !important;
  padding-bottom: 0 !important;
}

/* Pull category grid closer to title */
.categories,
.category-grid,
.subcategory-grid {
  margin-top: 6px !important;
}

/* --- Remove forced height on category cards --- */
.categories > *,
.category-grid > *,
.subcategory-grid > * {
  height: auto !important;
  min-height: 0 !important;
  padding: 16px 16px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Remove extra spacing around the text inside cards */
.categories a,
.category-grid a,
.subcategory-grid a {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2;
}

/* Reduce space under the page title (APPAREL) */
.page-title,
h1.page-title,
h1 {
  margin-bottom: 4px !important;
  padding-bottom: 0 !important;
}

/* Remove extra spacing from the container holding the title */
.category-header,
.collection-header,
.page-header {
  margin-bottom: 4px !important;
  padding-bottom: 0 !important;
}

/* Pull the subcategory cards closer */
.categories,
.category-grid,
.subcategory-grid {
  margin-top: 0 !important;
}

h1 { margin-bottom: 0 !important; }
.categories { margin-top: -4px !important; }

/* ===========================
   MEGA MENU HOVER FIX
   Keep dropdown open so you can click subcategories
   =========================== */

/* Make sure parents don't clip the dropdown */
nav.sticky,
.desktop-toggle,
.megamenu_container,
ul.megamenu{
  overflow: visible !important;
}

/* Anchor the dropdown to the LI and remove any “gap” */
ul.megamenu > li{
  position: relative;
}

/* Default hidden state */
ul.megamenu > li > .dropdown_fullwidth{
  display: block;                 /* keep in flow for hover logic */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 100%;                      /* directly under the tab */
  margin-top: 0 !important;       /* kills gap */
  z-index: 9999;
}

/* Show when hovering the LI (this is the key) */
ul.megamenu > li:hover > .dropdown_fullwidth{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Optional: give a tiny “hover bridge” so it never flickers */
ul.megamenu > li > .dropdown_fullwidth::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-12px;
  height:12px;
}

/* =========================================
   RESTORE "Starting at $X.XX" ON PRODUCT CARDS
   ========================================= */

/* Scope to product listing tiles */
.products .item [class*="price"],
.products .item [class*="Price"],
.products .item [class*="starting"],
.products .item [class*="Starting"],
.products .item .price,
.products .item .product-price,
.products .item .starting-at,
.products .item .money,
.products .item .amount{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;

  color: #082B4C !important;      /* Instructure navy */
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  margin: 8px 0 10px !important;
}

/* If a parent wrapper is hiding the entire meta area */
.products .item [class*="meta"],
.products .item [class*="details"],
.products .item [class*="info"],
.products .item .details,
.products .item .info{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
}

/* Keep the button below the price */
.products .item a.button,
.products .item .button{
  margin-top: 6px !important;
}

/* ===========================
   RESTORE ADD TO CART BUTTONS
   (overrides earlier "hide button" rules)
   =========================== */

a.button,
.button,
a.btn,
.btn,
input.button,
button.button,
button.btn{
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Instructure red for all "negative" actions */
:root{
  --color-negative-dark: #E72429;
  --color-negative: #E72429;
}

/* Optional hover/active polish (if theme uses these vars) */
:root{
  --color-negative-hover: #c41f24;
  --color-negative-light: #ffebee;
}

/* =================================
   Required field color override
   ================================= */

:root{
  --validation-required-color: #082B4C; /* Instructure dark blue */
}


/* =================================
   LOGIN PAGE
   ================================= */

.login {
        background: none;
}

/* Holiday banner width fix */
.shopall-hero.holiday-banner {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0 !important;
  background: none !important;
  min-height: 0 !important;
  height: auto !important;
}

.shopall-hero.holiday-banner a,
.shopall-hero.holiday-banner img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
}

/* FIX ERROR / OUT OF STOCK TEXT */
.alert--error,
.flash--error {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* In case the message is wrapped inside another element */
.alert--error *,
.flash--error * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* =========================================
   BULK ORDERING - OVERRIDE NORMAL CARD WIDTH
   ========================================= */

#bulkOrderingView .ogrid__products .product {
  max-width: none !important;
  width: 100% !important;
  margin: 0 0 24px 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Make the bulk-order container use the available width */
#bulkOrderingView .ogrid__products {
  width: 100% !important;
  max-width: none !important;
}

/* Let the ordering table span the card */
#bulkOrderingView .product .ordering {
  width: 100% !important;
  max-width: none !important;
  overflow-x: auto !important;
}

#bulkOrderingView table.table--ogrid {
  width: 100% !important;
}

/* Keep mega-menu product image square */
.megamenu_container .dropdown_fullwidth .col_3_feature img {
  border-radius: 0 !important;
}

/* =========================================
   MEGA MENU - KEEP DROPDOWN ON SCREEN
   ========================================= */

@media (min-width: 1080px) {

  .megamenu_container .megamenu > li > .dropdown_fullwidth {
    width: min(900px, calc(100vw - 60px)) !important;
    max-width: calc(100vw - 60px) !important;

    left: auto !important;
    right: 0 !important;
    transform: none !important;
  }

}


/* HOLIDAY FORM */
.fBoIsd {
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-evenly;
}

#fsSection0 > span > div > p:nth-child(1) > span:nth-child(1) {
   font-family: 'Plus Jakarta Sans', sans-serif !important;
}

#fsSection0 > span > div > p:nth-child(2) > span {
   font-family: 'Plus Jakarta Sans', sans-serif !important;
} 

#fsSection0 > span > div > p:nth-child(3) > span {
   font-family: 'Plus Jakarta Sans', sans-serif !important;
}

#fsSection0 > span > div > p:nth-child(4) > span {
   font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* BANNER */
.banner {
   width: 100%;
   margin: 0 auto;
   padding: 3px;
   text-align: center;
   font-weight: bold;
   color: white;
   font-size: 16px;
   background-color: #e31a20;
}

/* =========================================
   INSTRUCTURE LOGIN PAGE - TWO COLUMN
   ========================================= */

@media (min-width: 900px) {

/* Red guest message under LOG IN */
#loginForm h1::after {
  content: "Guests login below or click the Register button to sign up for an account";

  display: block;
  width: 100%;
  margin: 12px auto 28px;
  padding: 10px 14px;

  background: #E72429;
  color: #ffffff;

  border-radius: 6px;
  box-shadow: 0 3px 8px rgba(0,0,0,.15);

  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  text-transform: none;

  box-sizing: border-box;
}


/* Divider between guest login + employee SSO */
.login__box::after {
  content: "";
  position: absolute;

top: 70px;
bottom: 55px;
left: 590px;

  width: 1px;
  background: #0D0928;
}

/* Show top login/register tabs on desktop layout */
.login__box > .swap-pane,
.login__box .swap-pane {
  display: block !important;
  position: absolute !important;
  top: 12px !important;
  left: 385px !important;
  z-index: 5 !important;
  margin: 0 !important;
}

/* Hide the duplicate Log In tab */
.login__box .swap-pane > *:first-child {
  display: none !important;
}


/* Hide center divider while the Register form is open */
.login__box:has(#registerForm[style*="display: block"])::after {
  display: none !important;
}

.form-area {
  width: 1100px !important;
  max-width: calc(100vw - 80px) !important;
  margin: 0 auto !important;
}

.login__box {
  position: relative !important;
  width: 1100px !important;
  max-width: calc(100vw - 80px) !important;
  margin: 0 auto !important;
}

#loginForm {
   position: static !important;
  width: 500px !important;
  max-width: 500px !important;
  min-height: 470px !important;

  margin: 0 !important;
  padding: 40px !important;

  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.08) !important;

  box-sizing: border-box !important;
}

  /* Keep guest login side a normal usable width */
  #loginForm h1,
  #loginForm .datum,
  #loginForm p {
    width: 100% !important;
    max-width: 430px !important;
    box-sizing: border-box !important;
  }

  #loginForm .datum input {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Employee SSO image */
 #loginForm .flash.flash--information {
  position: absolute !important;
  top: 15px !important;
  right: 20px !important;

  width: 440px !important;
  height: 440px !important;

  padding: 0 !important;
  margin: 0 !important;

  background-color: transparent !important;
  background-image: url("https://liftoff-shop.imgix.net/instructure/images/Images/SSO%20Login.jpg?t=1792070285074") !important;
  background-size: 440px 440px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;

  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  font-size: 0 !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;

  cursor: pointer !important;
}

  #loginForm .flash.flash--information:hover {
    opacity: .92 !important;
    transform: none !important;
  }
}

/* ===== REGISTER VIEW CLEANUP ===== */

/* When REGISTER is active, hide the duplicate top Register tab */
.login__box:has(.swap-trigger.current[data-target="registerFieldset"])
.swap-trigger[data-target="registerFieldset"] {
  display: none !important;
}

/* When REGISTER is active, remove the center divider */
.login__box:has(.swap-trigger.current[data-target="registerFieldset"])::after {
  display: none !important;
}

/* Hide Bulk Orders category card only */
.categories .category:has(.category__title a[href="/bulk-orders"]) {
  display: none !important;
}

/* CHECKOUT */
#appliedBudgetBalance {
  display: none;
}

/* MY ACCOUNT PAGE */
/* hide Budget Code Allotments tab */
li[data-nav-tag="budgets"] {
  display: none !important;
}

/* ===== FEATURED ITEM CARDS ===== */

.homepage__secondary-callouts .callouts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  align-items: stretch;
}

.homepage__secondary-callouts .callout {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  overflow: hidden;
  padding: 22px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.homepage__secondary-callouts .callout__image {
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.homepage__secondary-callouts .callout__image a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.homepage__secondary-callouts .callout__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.homepage__secondary-callouts .callout__title {
  width: 100%;
  margin-top: 18px;
  text-align: center;
}

.homepage__secondary-callouts .callout__title a {
  display: block;
  width: 100%;
  text-align: center;
  color: #061c30 !important;
  text-decoration: none !important;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 500;
}

@media (max-width: 900px) {
  .homepage__secondary-callouts .callouts {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 550px) {
  .homepage__secondary-callouts .callouts {
    grid-template-columns: 1fr;
  }
}

/* ===== INSTRUCTURE SENTENCE-CASE HEADINGS ===== */

/* Homepage: Collections + Featured Items */
.homepage__callouts > h2,
.homepage__secondary-callouts > h2 {
  text-transform: none !important;
}

/* Category pages: Drinkware, Tech, Apparel, Office, etc. */
.page__title h1 {
  text-transform: none !important;
}

/* ===== HIDE TOP EMPLOYEE BANNER ===== */
.header-wrapper > .banner {
  display: none !important;
}

/* ===== HOMEPAGE BANNER VISIBILITY ===== */
.holiday-banner--internal {
  display: none;
}

.holiday-banner--external {
  display: block;
}

/* ===== HIDE GLOBAL PAGE EMPLOYEE BANNER ===== */
#bodyContainer > .banner {
  display: none !important;
}