/* RESPONSIVE HEADER STYLING */

/* OUTER RESPONSIVE HEADER container */
header {
   display: flex;
   flex-direction: row;
   justify-content: center;
   min-width: inherit;
   /* inherit from body */
   font-size: 14px;
   font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

header a {
   color: #002855;
}

header li a {
   color: #002855;
}

/* ADA compliance */
header ::placeholder {
   /* Chrome, Firefox, Opera, Safari 10.1+ */
   color: #545454;
   opacity: 1;
   /* Firefox */
}

header :-ms-input-placeholder {
   /* Internet Explorer 10-11 */
   color: #545454;
}

header ::-ms-input-placeholder {
   /* Microsoft Edge */
   color: #545454;
}

.box {
   width: 100%;
   max-width: 1280px;
   /* per business (thomopsonas, overriding watersb 100% */
   min-width: inherit;
   /* inherit from body */
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   flex-direction: row;
   align-items: center;
   padding-bottom: 2px;
   position: fixed;
   /* position:-ms-page; /* IE11 "fix" - didn't work */
   top: 0px;
   z-index: 100;
   /* SET a background color here
 * If NO background image, then the background sets off the header from the rest of the body
 * IF Using a background image ...
 * Use a background to block page content bleed-through on scroll due to image opacity
 */
   /* background-color:#F2F2F2; /*  SUBTLE difference from body background */
   /* background-color:#C0E6FD; /*  baby powder blue - very BAMish */
   /* background-color:#C1C2C3; /*  silvery gray - requires #navCartText {color:white} and .my-cart-icon {color:#002855} */
   /* background-color:white;   /*  MATCH the page background if header image in use below */
}

.box {
   color: #002855;
   background: #FFF;
}

.box a:hover,
.box a:focus {
   text-decoration: none;
   outline: none;
}

.box:after {
   content: "";
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   /*
   background-image: url('/images/header/holidays/winter-banner.png');
   background-image: url('/images/header/holidays/easter-banner.jpg');
*/
   background-size: contain;
   /* cover or contain - see https://developer.mozilla.org/en-US/docs/Web/CSS/background-size */
   width: 100%;
   height: 100%;
   opacity: 0.25;
   /* .25 - .50 */
   /* .25 for winter, .40 for easter */
   z-index: -1;
   border-bottom-left-radius: 8px;
   border-bottom-right-radius: 8px;
}

.box i {
   font-size: 28px;
}

/* INNER RESPONSIVE HEADER containers */
.rffh-primary,
.rffh-search {
   display: flex;
   align-items: center;
}

.rffh-secondary,
.rffh-tertiary {
   display: flex;
   justify-content: space-between;
}

.rffh-primary,
.rffh-tertiary,
.rffh-search {
   margin: 5px auto;
}

.rffh-rowbreak {
   display: flex;
   align-items: center;
   margin-left: 10px;
}

/* (desktop default) single row - add space before this header element */
.rffh-search {
   margin-left: 15px;
}

.rffh-remove {
   text-align: center;
   font-size: small;
}

/* container subject to removal per space availability */
.rffh-search {
   flex-grow: 2;
}

/* expand search when space is available */
.rffh-full {
   flex-basis: 100vw;
}

/* expand this element to full width */
.header-violator {
   display: flex;
   flex-basis: 100vw;
   flex-grow: 1;
   height: 30px;
   align-items: center;
   margin-left: -3px;
   margin-bottom: -2px;
   color: #002855;
}

.rffh-primary.header-violator {
   background: #002855;
   margin-top: 0px;
}



/* CATEGORY NAV container */
#category-nav {
   display: none;
   margin-left: 10px;
}

#category-nav>a i {
   display: flex;
   color: #A4A4A4;
}

#category-nav>a:hover,
#category-nav>a:focus,
#category-nav>a:hover i,
#category-nav>a:focus i {
   color: #789BAB;
   outline: none;
   /* background: #000024; */
}

.nav.accordian {
   position: absolute;
   z-index: 101;
   min-width: 150px;
   border-radius: 0px 0px 8px 8px;
   border: solid 1px #757575;
   border-top: 2px solid #FFF;
   left: 0;
   background: #FAFAFA;
   color: #002855;
}

/* header menu container offset for desktop */
.nav.accordian {
   top: 95px;
}

/* Allow dialogs and container which might need it to be vertically scrollable, but remove the scrollbar */
.nav.accordian,
#store-info-container,
.account-container-wrapper,
.ui-dialog {
   overflow-x: hidden;
   overflow-y: auto;
   max-height: calc(100vh - 90px);
   background: #FAFAFA;
   scrollbar-width: none;
}

/* (re-sizeable) BAM! LOGO */
.header-logo {
   display: flex;
   align-items: center;
}


/* DEV / QA host information */
.dev-message {
   line-height: .9em;
   margin-left: 6px;
   color: #f88;
}


/* SET, REVIEW, CHANGE -MY STORE- container */
.my-store,
.set_store {
   display: flex;
   align-items: center;
   /* vertical */
   line-height: 1em;
}

/* hover & focus styling for: Store Finder / Set My Store / Change My Store */
.set_store a:hover,
.set_store a:focus,
.set_store a:hover i,
.set_store a:focus i,
a.store-set:hover,
a.store-set:focus,
#viewSelectedStore:hover,
#viewSelectedStore:focus {
   color: #789BAB;
   outline: none;
}

/* vertical pixel offset for material icons + space between header elements */
.my-store i {
   margin-top: 4px;
}

.setStoreText {
   margin-top: -8px;
   padding-left: 4px;
   font-size: 110%;
}

.store-pickup-info {
   white-space: nowrap;
}

.store-pickup-details {
   display: flex;
   align-items: center;
   white-space: nowrap;
   margin-left: 15px;
}

.store-pickup-details:hover div,
.store-pickup-details:hover span,
.store-pickup-details:focus div,
.store-pickup-details:focus span {
   color: #002855;
}

.store-pickup-name,
.store-pickup-hours {
   font-size: 1.1em;
   color: #4E738A;
}

.store-pickup-hours::before {
   content: '|';
   padding: 0 5px;
   color: #CCC;
   font-weight: bold;
}

/* Show selected store details or change store */
#store-locator2 {
   margin-top: 0px;
   margin-left: 15px;
   position: absolute;
   top: 60px;
   /* header menu container offset for desktop */
   display: flex;
   align-items: center;
   /* h center */
   justify-content: center;
   /* v center */
   z-index: 102;
   /* the battle continues */
}

.store-finder,
#account-nav span,
.my-cart a {
   display: flex;
   align-items: center;
}

.store-finder {
   padding-left: 10px;
}

/* Show help plus links as horizontal list */
.header-help-links {
   direction: rtl;
}

.help-plus {
   display: inline-block;
   text-wrap-mode: nowrap;
}

li.help-plus a {
   color: #626262;
}

/* gray - meets ADA contrast requirement */
.help-plus a:hover,
.help-plus a:focus {
   color: #002855;
}

#search-zip2 {
   margin-left: 3px;
   padding-left: 5px;
   box-sizing: border-box;
   height: 32px;
   border: 1px solid #d1d2d4;
   color: #000;
   width: 120px;
   text-align: center;
   font-size: 16px;
   /* < 16px cause zoom on mobile safari */
}

/* header menu container offset for store info */
#store-info-container {
   position: absolute;
   padding: 7px;
   text-align: center;
   background: #FAFAFA;
   color: #212121;
   top: 70px;
   margin-left: 15px;
}

#store-info-container>#selectedStoreImageDiv {
   min-width: 130px;
   max-width: 200px;
   padding: 5px;
   margin: auto;
}

#store-info-container>#selectedStoreImageDiv img {
   width: 100%;
}

#store-info-container #selectedStoreImageDiv+div {
   float: none !important;
   margin: auto;
}

.changeStoreButton {
   height: 26px;
   position: relative;
   width: 120px;
   background-color: #002855;
   color: #FAFAFA;
   border-radius: 8px;
   padding: 5px;
   box-sizing: content-box;
   text-align: center;
   border: 1px solid #FAFAFA;
   margin-top: 5px;
   cursor: pointer;
   margin-left: auto;
   margin-right: auto;
}

.changeStoreButton>.changeStoreBtnText {
   display: inline-block;
   height: 100%;
   vertical-align: text-bottom;
   /* text-bottom aligns to middle, middle aligns to bottom */
   font-size: 12px;
}

.changeStoreButton>.changeStoreIcon {
   display: inline-block;
   height: 100%;
   vertical-align: baseline;
}

.changeStoreButton:hover,
.changeStoreButton:focus {
   background: #789BAB;
}

.header-env {
   white-space: nowrap;
}

.header-env {
   padding: 0px 12px;
}

/* Undo base.css global grid overrides for the header ticker Splide instance */
#hvMsg.splide .splide__list {
   display: flex !important;
   grid-auto-columns: unset;
   grid-auto-flow: unset;
}
#hvMsg.splide.is-active .splide__slide {
   display: flex !important;
   justify-content: center;
   align-items: center;
   grid-template-rows: unset;
   grid-gap: unset;
}

/* violator text ticker 2 - 9 */
div[class^="header-ticker"] {
   overflow: hidden;
   -webkit-user-select: none;
   margin: auto;
   padding: 0px 10px;
   /* margin offset animation failed on Mac OS browsers using em, switched to px */
   height: 30px;
}

/* Ensure images beside text, h+v centered */
div[class^="header-ticker"] ul li {
   display: flex;
   align-items: center;
   justify-content: center;
   list-style: none;
   text-align: center;
   margin-bottom: 0px;
   line-height: 1.1em;
   /* margin offset animation failed on Mac OS browsers using em, switched to px */
   height: 30px;
   font-size: 1.1em;
}

div[class^="header-ticker"] ul li {
   color: #002855;
}

div[class^="header-ticker"] ul li img {
   max-height: 30px;
}

div[class^="header-ticker"] ul li a,
div[class^="header-ticker"] ul li {
   color: white;
   font-weight: bold;
   text-decoration: none;
   font-size: 16px;
   -webkit-font-smoothing: antialiased;
   -webkit-user-select: none;
   /* ensure vertical align of img and text within href */
   display: flex;
   align-items: center;
}

div[class^="header-ticker"] ul:hover {
   animation-play-state: paused
}

div[class^="header-ticker"] span:hover+ul {
   animation-play-state: paused
}

#search_help2 {
   background-color: #002855;
   width: 32px;
   height: 32px;
   position: relative;
   display: inline-block;
}




/* (EXPANDABLE) SEARCH (filter)*/
.search-filter {
   align-items: center;
   display: none;
   outline: none;
   /* no outline required for ADA - focus / hover change displayed */
}

.search-wrapper {
   display: flex;
   height: 28px;
   width: inherit;
   background: #FAFAFA;
   border-radius: 8px;
   outline: none;
   /* no outline required for ADA - focus / hover change displayed */
}

.search-wrapper {
   border: none;
   border-radius: 12px;
}

.search-field {
   width: 100%;
   height: 38px;
}

.search-form {
   width: inherit;
}

#query {
   width: inherit;
   font-size: 15px;
   color: #212121;
   text-align: center;
   border: none;
   /* allow filter to merge seamlessly */
   background: #FAFAFA;
   border-radius: 8px;
   outline: none;
   /* no outline required for ADA - focus / hover change displayed */
   padding-left: 10px;
   /* so that placeholder text doesn't shift on focus */
}

#query {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='50px' width='300px'><text x='5%' y='20' fill='gray' font-size='17' font-family='arial'>Enter Title, ISBN or Author</text></svg>");
   background-repeat: no-repeat;
}

/* left align query text when typing, lines up with auto-complete */
#query:focus {
   text-align: left;
   background-image: none;
}

#query:hover,
#query:focus {
   color: #789BAB;
   padding-left: 10px;
   /* separate entered text from product type selector */
   outline: none;
   /* no outline required for ADA - focus / hover change displayed */
}

#query {
   border-radius: 12px;
}

/* Hide the background image placeholder when the search query field is not blank */
#query:not([value=""]) {
   background-image: none;
}

#searchIcon {
   display: flex;
   align-items: center;
   /* z-index: 101; /* displays OVER modals, why was this needed? */
   color: #002855;
   margin-left: -51px;
}

#searchIcon>i {
   font-size: 26px;
   position: absolute;
   cursor: pointer;
   color: #002855;
   border-top-right-radius: 12px;
   border-bottom-right-radius: 12px;
}

#searchIcon>i {
   border-top-right-radius: 12px;
   border-bottom-right-radius: 12px;
   width: 33px;
}

#searchIcon>i:hover,
#searchIcon>i:focus {
   color: #789BAB;
   background: #000024;
}

/* ── Ask Bookie button (beside search) ── */
.ask-bookie-btn {
   display: flex;
   align-items: center;
   gap: 6px;
   background: #00A2E0;
   color: #fff;
   border: 1.5px solid #00A2E0;
   border-radius: 12px;
   padding: 0 14px;
   height: 38px;
   margin-left: 10px;
   cursor: pointer;
   white-space: nowrap;
   font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 0.02em;
   transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
   flex-shrink: 0;
}

.ask-bookie-btn:hover,
.ask-bookie-btn:focus-visible {
   background: #0089BF;
   border-color: #0089BF;
   box-shadow: 0 2px 8px rgba(0, 162, 224, 0.3);
   outline: none;
}

.ask-bookie-btn:active {
   background: #0073a0;
   box-shadow: none;
}

.ask-bookie-btn-icon {
   width: 24px;
   height: 24px;
   border-radius: 50%;
   object-fit: contain;
   flex-shrink: 0;
}

.ask-bookie-btn-label {
   line-height: 1;
}

/* ── Ask Bookie button — banner image variant ── */
.ask-bookie-btn.ask-bookie-btn-banner {
   padding: 0 16px;
   background: #1f4c5a;
   border: 1.5px solid #1f4c5a;
   border-radius: 12px;
   overflow: hidden;
   align-items: center;
   height: 44px;
}

.ask-bookie-btn.ask-bookie-btn-banner:hover,
.ask-bookie-btn.ask-bookie-btn-banner:focus-visible {
   background: #163a45;
   border-color: #163a45;
   box-shadow: 0 2px 8px rgba(31, 76, 90, 0.3);
}

.ask-bookie-btn-banner-img {
   display: block;
   height: 32px;
   width: auto;
}

.ask-bookie-btn-sprite {
   width: 28px;
   height: 28px;
   flex-shrink: 0;
   background-image: url(/images/bookie-sprite-strip.png);
   background-repeat: no-repeat;
   background-size: 168px 28px;
   background-position: 0 0;
   animation: askBookieWalk 9s steps(1, end) 2s infinite;
}

@keyframes askBookieWalk {
   0%      { background-position: 0 0; }
   2.22%   { background-position: -28px 0; }
   4.44%   { background-position: -56px 0; }
   6.67%   { background-position: -84px 0; }
   40%     { background-position: -56px 0; }
   42.22%  { background-position: -28px 0; }
   44.44%  { background-position: 0 0; }
   100%    { background-position: 0 0; }
}

.ask-bookie-btn:hover .ask-bookie-btn-sprite,
.ask-bookie-btn:focus-visible .ask-bookie-btn-sprite {
   animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
   .ask-bookie-btn-sprite { animation: none; }
}

#filter-toggle {
   display: flex;
   align-items: center;
   color: #002855;
   background-color: rgb(0, 0, 0, 0.2);
   border-radius: 12px 0 0 12px;
   height: 38px;
   padding: 0 5px;
   position: absolute;
   left: 138px;
   vertical-align: baseline;
}

#filter-toggle:hover,
#filter-toggle:focus,
#filter-toggle>i:hover,
#filter-toggle>i:focus {
   outline: none;
   /* no outline required for ADA - focus / hover change displayed */
}

#filter {
   font-size: 15px;
   color: #212121;
   margin-left: 5px;
   /* Merge filter selector seamlessly into #query */
   border: none;
   -moz-appearance: none;
   /* for Firefox */
   -webkit-appearance: none;
   /* for Chrome */
   border-right: 1px solid #002855;
   padding-right: 5px;
   /* offset used when entering filter text */
   outline: none;
   /* no outline required for ADA - focus / hover change displayed */
}

/* For IE10 */
#filter::-ms-expand {
   display: none;
}

#filter:hover,
#filter:focus,
#filter>i:hover,
#filter>i:focus {
   color: #789BAB;
}

/* The container must be positioned relative: */
.box.search-expanded .search-filter {
   display: flex;
   margin-left: 35px;
}

.select-selected {
   background-color: DodgerBlue;
}

/* Style the arrow inside the select element: */
.select-selected:after {
   position: absolute;
   content: "";
   top: 12px;
   right: 10px;
   width: 0;
   height: 0;
   border: 6px solid transparent;
   border-color: #fff transparent transparent transparent;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
   border-color: transparent transparent #fff transparent;
   top: 7px;
}

/* style the items (options), including the selected item: */
.select-items div,
.select-selected {
   color: #212121;
   padding: 8px 15px;
   border: 1px solid transparent;
   border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
   cursor: pointer;
}

/* Style items (options): */
.select-items {
   position: absolute;
   background-color: DodgerBlue;
   top: 100%;
   left: 0;
   right: 0;
   z-index: 99;
}

/* Hide the items when the select box is closed: */
.select-hide {
   display: none;
}

.select-items div:hover,
.same-as-selected {
   background-color: rgba(0, 0, 0, 0.1);
}

/* Store Finder */
/* EXCELLENT - more IE6-8 override required via !important */
.store-finder:hover,
.store-finder:focus,
.store-finder>i:hover,
.store-finder>i:focus {
   color: #789BAB !important;
   outline: none;
}


/* MY (CUSTOMER, MEMBER) ACCOUNT, SIGN IN */
#account-nav {
   margin-top: -2px;
   margin-left: 10px;
   cursor: pointer;
   outline: none;
}

#account-nav {
   color: #002855;
   margin: auto 10px;
}

#account-nav span:hover,
#account-nav span:focus,
#account-nav:hover i,
#account-nav:focus i {
   color: #789BAB;
}

/* header menu container offset for desktop */
.account-container-wrapper {
   position: absolute;
   top: 48px;
   right: 10px;
}

.account-container-wrapper {
   top: 115px;
   border-radius: 5px;
}

#account-container {
   white-space: nowrap;
}

#account-container .customer-account a {
   font-size: smaller;
   color: #002855;
   background-color: #FAFAFA;
   margin: -4px -5px 7px -5px;
   padding: 3px;
   max-width: 140px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

#account-container li {
   text-align: right;
}


/* CART (link) + CART ITEM COUNT */
.my-cart {
   display: flex;
   align-items: center;
   margin-right: 10px;
}

.my-cart a {
   outline: none;
}

.my-cart-icon {
   display: flex;
   position: relative;
}

.my-cart-icon {
   color: #002855;
}

.empty-cart {
   display: none;
}

a:hover .cart-icon-label,
a:focus .cart-icon-label,
a:hover .my-cart-icon>i,
a:focus .my-cart-icon>i {
   color: #789BAB;
}

#navCartText {
   top: 20%;
   left: 75%;
   transform: translate(-50%, -50%);
   position: absolute;
   font: 14px Arial, sans-serif;
   min-width: 50%;
   padding: 4px;
}


/* (common) HEADER MENU container definitions */
.header-menu ul {
   list-style: none;
}

.header-menu-container ul li a {
   display: block;
   /* enable hover styling for full container width */
}

.header-menu-container ul li a:hover,
.header-menu-container ul li a:focus {
   color: #789BAB;
   outline: none;
}

.header-menu-container {
   padding: 5px;
   border-radius: 0px 0px 5px 5px;
   position: relative;
   border: solid 1px #757575;
   border-top: solid 1px #FFF;
   display: inherit;
   z-index: 101;
   background: #FAFAFA;
   color: #002855;
}


/* (common - currently unused) AFTER icon definition */
.arrow-down:after {
   font-family: 'Material Icons';
   font-size: 28px;
   content: 'arrow_drop_down';
   vertical-align: text-bottom;
   -webkit-font-feature-settings: 'liga' 1;
   -moz-font-feature-settings: 'liga' 1;
   font-feature-settings: 'liga' 1;
   right: .2em;
   position: relative;
}

/* Styling for the category navigation bar - displayed only for viewports > 700px */
#category-bar {
   display: flex;
   /*  justify-content: space-around; restore if vertical bar padding resolved */
   justify-content: center;
   /* visually resolves category | category padding issue */
   align-items: center;
   /* vertical center */
   background: #FFF;
   max-width: 1280px;
   margin: auto;
}

#category-bar {
   border-top: none;
   width: calc(100vw - 50px);
   margin: 5px auto;
   margin-top: 20px;
}

#category-bar>li {
   margin: 0;
   display: flex;
   align-items: stretch;
   text-decoration: none;
   transition: background 0.15s ease;
}

/* Bold UPPERcase for nav-bar categories */
#category-bar>li a span.category {
   text-transform: uppercase;
   font-weight: bold;
}

/* contains the topics (and links) of a given category */
.category-bar-topic {
   width: calc(100vw - 50px);
   justify-content: space-between;
   /* prevents outer padding on large displays */
   border: 0px #535353 solid;
   /* this grey is the leftmost grey across from #002855 in the chrome color picker */
   border-bottom-width: 15px;
   border-top-width: 2px;
   /* use 5px top border if a lighter border color is chosen */
}

.category-bar-topic li {
   padding: 0px 5px;
   list-style: none;
}

.category-bar-topic li h3 {
   font-weight: bold;
   font-size: 14px;
   margin-top: 10px;
}

.flex-list {
   position: relative;
   overflow: hidden;
}

#category-bar.flex-list {
   overflow: visible;
}

ul.flex-list {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   margin-left: -1px;
}

.flex-list>li:not(:first-child) {
   border-left: 1px solid #ccc;
}

/* header-help-links is an RTL ordered flex-list, so don't prepend border-left for the LAST, not FIRST child */
.header-help-links .flex-list>li {
   border-left: none;
}

.header-help-links .flex-list li:not(:first-child) {
   border-right: 1px solid #ccc;
}

.header-help-links .flex-list {
   justify-content: start;
}

.flex-list li {
   flex-basis: auto;
   margin: 0;
   padding: 0 calc(1em + 5px);
}

/* styling for the topic container each category-bar category */
#category-bar .category-bar-topic {
   /** display: none; /* if CSS-ONLY HIDE each topic until the parent LI receives hover/focus */
   display: flex;
   /* JS version - set base display, hide using the hidden class below */
   background: #FFFFFA;
   max-width: 1280px;
   left: 1vw;
   right: 1vw;
   /* Alternative approach - instead of "full" width ...
     * Left-side topics base off of active catgory, and don't overflow (not true)
     * Adjust rightmost nav-bar topics against the right side of the viewport
     * #category-bar li:nth-last-child(n+5):hover .category-bar-topic { left: 2em; }
     * #category-bar li:nth-last-child(-n+5):hover .category-bar-topic { right: 2em; }
     * requires media handling for widths > 1280px
     */
}

#category-bar .category-bar-topic {
   width: calc(100vw - 50px);
   margin: 0 auto;
}

/* Support delayed display of category-topics on hover using JS via removal of this class after delay */
/* This is messy in that it involves JS, but is a better user experience, and display does not currently (2020)
 * allow for transition handling which would allow this to be solved solely in CSS without involving JS */
#category-bar .category-bar-topic.hidden {
   display: none !important;
}

/* nav links fill full bar height and width for hover highlight */
#category-bar>li>a {
   display: flex;
   align-items: center;
   padding: 8px 0;
   width: 100%;
   transition: background 0.15s ease, color 0.15s ease;
}

/* emphasize the selected category - full background highlight */
#category-bar>li:hover,
#category-bar>li:focus-within,
#category-bar>li.active-parent {
   background: #535353;
}

#category-bar>li:hover>a,
#category-bar>li>a:focus,
#category-bar>li.active-parent>a {
   color: #FFF;
   text-decoration: none;
   outline: none;
}

/* Reveal the topics of the hovered category */
/* FOCUS not supported, topic display worked but not navigation */
/* FOCUS could be supportable if we DROP the JS based delay */
#category-bar .category-bar-topic.active {
   z-index: 99;
   position: fixed;
}

/* Remove monetization icon from category nav-bar/menu item - per business request*/
#category-bar>li>a.info-you-saved:before,
#category-nav>li>a.info-you-saved:before {
   content: '';
}

/* SWAP foreground and background for you-saved class usage in nav-bar */
#category-bar>li:hover>a.info-you-saved:hover:before,
#category-bar>li:hover>a.info-you-saved:hover,
#category-bar>li>a.info-you-saved:focus:before,
#category-bar>li>a.info-you-saved:focus {
   color: #FFF;
   background: #B50000;
}

/* default topic column styling */
#category-bar .topic-column {
   background: #FFF
}

/* "extra / openX ad topic column styling */
#category-bar .topic-column.extra {
   max-width: 250px;
   border-left: #535353 solid 2px
}

#category-bar .topic-column.extra li h3,
#category-bar .topic-column.extra li span {
   display: flex;
   justify-content: center;
   text-align: center;
}

#category-bar .topic-column.extra img {
   margin-top: 10px;
   margin-bottom: 5px;
   max-width: 200px;
}

/* END category-bar navigation
 * ******************************************
 * ******************************************
*/




@viewport {
   width: device-width;
   zoom: 1.0;
}

@-ms-viewport {
   width: device-width;
}

/* ####################################################
 * LARGE DEVICE FORM FACTORs
 * ####################################################
 *
 * SEARCH COLLAPSED
 + --------------------------------------------------------------+
 | [logo][store] [violator] [ .....search.... ] [account] [cart] |
 + --------------------------------------------------------------+
 *
 * SEARCH EXPANDED
 + ------------------------------------------------------------------------+
 | [logo][store] [violator] [ .....search.... ][filter] x [account] [cart] |
 + ------------------------------------------------------------------------+
 *
 *
 */

/* UGLY fix for IE11 position:fixed issue */
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
   header {
      left: 0;
      transition: all .5s;
   }

   header .box {
      left: 0px;
   }

   #searchIcon {
      margin-top: -27px;
   }
}

@media screen and (-ms-high-contrast: active) and (min-width: 1281px),
(-ms-high-contrast: none) and (min-width: 1281px) {
   header .box {
      left: calc((100% - 1280px)/2);
   }
}

@media screen and (-ms-high-contrast: active) and (max-width: 840px),
(-ms-high-contrast: none) and (max-width: 840px) {
   #searchIcon {
      margin-top: -28px;
   }
}

@media (min-width: 1281px) {

   /* keep the category-bar h-centered above 1280px */
   #category-bar .category-bar-topic {
      left: calc((100% - 1280px)/2);
   }

   #category-bar .category-bar-topic {
      right: calc((100% - 1280px)/2);
   }

   /* non-"full" width approach
    * Adjust rightmost nav-bar topics against the right side of the viewport *
    * #category-bar li:nth-last-child(n+5):hover .category-bar-topic { left: calc((100% - 1280px)/2); }
    * #category-bar li:nth-last-child(-n+5):hover .category-bar-topic { right: calc((100% - 1280px)/2); }
    */
}

@media (max-width: 1039px) {
   .box .rffh-remove {
      display: none;
   }

   /* TODO - need a hover styled NON-FULL logo as well, with replacement here */
}

/* >= 800px?  allow header (.box) to expand with the viewport, expand search and violator (if present) */
@media (min-width: 800px) {
   .box:not(.search-expanded) .rffh-remove {
      flex-grow: 1.5;
   }

   .box.search-expanded .rffh-remove {
      flex-grow: 0.5;
   }
}

/* > 950px? adjust search icon for different #query font size */
/*@media (min-width: 950px) { */
@media (min-width: 950px) {
   #logo {
      padding-left: 15px;
   }

   #logo:hover,
   #logo:focus {
      outline: none;
   }
}

/* < 950px? HIDE violator, reduce search text size */
@media (max-width: 949px) {
   #logo {
      padding-left: 7px;
   }

   /* match full-size logo left padding */
}



/* ####################################################
 * NOT a LARGE DEVICE?
 * ####################################################
 * Display the header using 2 rows
 *
 * SEARCH COLLAPSED
 + -----------------------------------+
 | [logo] [ .... search .... ] [cart] |
 | [....store....]          [account] |
 + -----------------------------------+
 *
 * SEARCH EXPANDED
 + -----------------------------------+
 | [ ........search.......][filter] x |
 | [....store....]          [account] |
 + -----------------------------------+
 */

/* *************************************************************** *
 * MEDIUM DEVICE FORM FACTORs - correctly supports up to 849px     *
 *
 * use a 2 row header for devices UP TO 850px
 * expanding the 2nd row filler space for proper element layout */
@media (max-width: 1284px) {
   .box .rffh-secondary {
      order: 1;
   }

   .box .rffh-rowbreak {
      flex-basis: 70%;
      margin-left: 7px;
   }

   /* FORCE wrap, adjust leading space */
   .box .rffh-search {
      flex-grow: 2;
   }

   .box .rffh-filler.rffh-secondary {
      flex-grow: 2;
   }

   /* place the storefinder and help-plus links at bottom */
   .box .rffh-tertiary {
      order: 10;
   }

   /* hide filler after help-plus link */
   .box .rffh-filler.rffh-tertiary {
      display: none;
   }

   /* minimal left offset since not 100% width */
   .nav.accordian,
   #store-locator2 {
      left: 2px;
   }

   .nav.accordian {
      margin-left: 20px;
   }

   /* header menu container offset for two-row header (tablet and smaller) */
   #account-container {
      padding: 0 15px;
   }

   div[class^="header-ticker"] ul li a,
   div[class^="header-ticker"] ul li {
      font-size: 1em;
   }

   /* reduce ticker font size */

   /* SHOW the small-ish viewport category menu icon */
   #category-nav {
      display: initial;
   }

   /* AND ... hide the category navigation bar for smaller viewports */
   #category-bar {
      display: none;
   }

   /* Match icon row padding to search/tertiary 15px gutters */
   .box {
      padding-left: 15px;
      padding-right: 15px;
      box-sizing: border-box;
   }

   /* Hide filler on mobile -- it disrupts the icon row */
   .box > .rffh-filler.rffh-primary {
      display: none;
   }

   /* re-order the header elements for smaller viewports */
   .rh-category-nav {
      order: 1;
      flex: 1;
      display: flex;
      justify-content: flex-start;
   }

   .rh-storefinder {
      order: 2;
      flex: 1;
      display: flex;
      justify-content: flex-start;
   }

   .rh-logo {
      order: 3;
      flex: 0 0 auto;
   }

   .rh-profile {
      order: 4;
      flex: 1;
      display: flex;
      justify-content: flex-end;
   }

   .rh-cart {
      order: 5;
      flex: 1;
      display: flex;
      justify-content: flex-end;
   }

   .rffh-search {
      order: 6;
      flex-basis: 100%;
      margin-left: 0;
      margin-right: 0;
   }

   /* Center the store + help links row */
   .my-store,
   .set-store {
      margin-left: 0;
   }

   .header-help-links {
      margin-right: 0;
   }

   /* And adjust the fixed position header margin offset */
   header {
      height: 130px;
   }

   /* adjust top margin for header menus */
   #store-locator2,
   #store-info-container {
      top: 164px;
   }

   .nav.accordian,
   .account-container-wrapper {
      top: 50px !important;
   }

   #filter-toggle {
      display: none;
   }
}


@media (max-width: 750px) {

   /* larger store name for this viewport size, truncated if needed */
   .store-pickup-info {
      max-width: 72vw;
   }

   /* maximum width at medium font at minimum (340px) width */
   .store-pickup-name {
      white-space: nowrap;
      font-size: large;
      font-size: medium;
      overflow-x: hidden;
      overflow-y: hidden;
      text-overflow: ellipsis;
   }
}

@media (min-width: 701px) {

   /* Adjust the keyframe end-point transition height per # of elements */
   /* margin offset animation failed on Mac OS browsers using em, switched to px */
   @keyframes ticker2st {
      to {
         margin-top: -60px;
      }
   }

   @keyframes ticker3st {
      to {
         margin-top: -90px;
      }
   }

   @keyframes ticker4st {
      to {
         margin-top: -120px;
      }
   }

   @keyframes ticker5st {
      to {
         margin-top: -150px;
      }
   }

   @keyframes ticker6st {
      to {
         margin-top: -180px;
      }
   }

   @keyframes ticker7st {
      to {
         margin-top: -210px;
      }
   }

   @keyframes ticker8st {
      to {
         margin-top: -240px;
      }
   }

   @keyframes ticker9st {
      to {
         margin-top: -270px;
      }
   }

   .account-container-wrapper {
      right: auto;
   }
}

@media (max-width: 700px) {

   /* expand these containers to full-width */
   .header-menu-container {
      border-radius: 0px;
   }

   .nav.accordian,
   #store-info-container,
   .account-container-wrapper {
      width: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      max-height: calc(100vh - 90px);
      /* -90px based on real-world testing */
      right: 0px;
      margin-left: 0;
   }

   /* adjust top margin for header */
   #store-locator2,
   #store-info-container {
      top: 164px;
   }

   .nav.accordian,
   .account-container-wrapper {
      top: 90px;
   }

   /*
   ::-webkit-scrollbar { display: initial; }
   scrollbar-width: initial;
*/

   /* remove left offset for 100% wide store info */
   #store-info-container {
      left: 0;
      margin-left: 0;
   }

   /* hide store finder, sign-in, and cart labels */
   .store-finder span {
      display: none;
   }

   #account-nav span .sign-in {
      display: none;
   }

   .cart-icon-label {
      display: none;
   }

   /* Up to this size, hide optional help-plus links */
   .help-plus.optional {
      display: none;
   }

   /* and increase profile menu font size on SMALL devices */
   #account-container {
      font-size: large;
      padding: 0 15px;
   }

   /* and allow the (authenticated) customer id (email address) to expand up to this media's max-width */
   #account-container .customer-account a {
      max-width: 700px;
   }

   /* Allow 2 line height (35px) for smaller devices */
   /* margin offset animation failed on Mac OS browsers using em, switched to px */
   div[class^="header-ticker"] {
      height: 35px;
      font-size: small;
   }

   div[class^="header-ticker"] ul li {
      height: 35px;
   }

   .header-violator {
      display: flex;
      flex-basis: 100vw;
      height: 35px;
   }

   /* and adjust the keyframe end-point transition height per # of elements */
   @keyframes ticker2st {
      to {
         margin-top: -70px;
      }
   }

   @keyframes ticker3st {
      to {
         margin-top: -105px;
      }
   }

   @keyframes ticker4st {
      to {
         margin-top: -140px;
      }
   }

   @keyframes ticker5st {
      to {
         margin-top: -175px;
      }
   }

   @keyframes ticker6st {
      to {
         margin-top: -210px;
      }
   }

   @keyframes ticker7st {
      to {
         margin-top: -245px;
      }
   }

   @keyframes ticker8st {
      to {
         margin-top: -280px;
      }
   }

   @keyframes ticker9st {
      to {
         margin-top: -315px;
      }
   }

   /* And adjust fixed position header margin offset */
   header.v1 {
      margin-top: calc(90px + 35px);
   }
}


/* *************************************************************** *
 * SMALL(ish) DEVICE FORM FACTORs - correctly supports 340 - 500px *
 *
 * < 500px? Hide logo & cart when search expanded */
@media (max-width: 500px) {

   .box #filter-toggle,
   .box #filter {
      display: none;
   }

   #query:active,
   #query:hover,
   #query:focus,
   #search-zip2:active,
   #search-zip2:hover,
   #search-zip2:focus {
      font-size: 16px !important;
   }

   /* iOS Safari auto-zooms the page when a focused input's font-size is < 16px.
      Because the search takeover is a position:fixed overlay that opens ON that
      same focus, the zoom anchors it to the (now wider) layout viewport and
      shifts it off-screen to the left (clipped back arrow / "RENDING"). The CIO
      widget input is 15px from base.css (!important), so we must both raise it to
      16px AND out-specify base.css. This applies at rest — before focus — so the
      zoom never triggers. (Ask Bookie's input is already ≥16px, which is why it
      never exhibited the shift.) */
   #search-field input.cio-input,
   #search-field input[id^="cio-autocomplete"][id$="-input"] {
      font-size: 16px !important;
   }

   /* Tertiary row: centered, wrapping */
   div.rffh-tertiary.rffh-full {
      flex-direction: column;
      align-items: center;
      padding: 0;
   }

   /* Hide only the optional links (Help, Gift Cards, etc.) -- keep Millionaire's Club + Ask Bookie */
   .header-help-links .flex-list > li.help-plus.optional {
      display: none;
   }

   /* Override RTL so Ask Bookie icon renders naturally */
   .header-help-links {
      direction: ltr;
      width: 100%;
   }

   .header-help-links .flex-list {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 0;
      margin-top: 2px;
      width: 100%;
   }

   /* Tighter padding on mobile, clean separators for LTR */
   .header-help-links .flex-list > li {
      border-right: none !important;
      border-left: none !important;
      padding: 2px 10px;
   }
   .header-help-links .flex-list > li:not(:first-child) {
      border-left: 1px solid #ccc !important;
   }
   .header-help-links .flex-list > li:first-child {
      padding-left: 0;
   }

   .store-pickup-info {
      max-width: 90vw;
   }

   .store-pickup-details {
      margin-left: 0;
   }
}

/* < 449px? reduce search text font size, store info font size and line-height */
@media (max-width: 449px) {
   #viewSelectedStore {
      font-size: smaller;
      line-height: 1.2em;
   }

   .v1 .store-pickup-info {
      max-width: 70vw;
   }

   /* Adjust search-wrapper font size for smaller displays */
   .search-field {
      width: -moz-available;
   }

   .search-wrapper {
      height: 22px;
   }

   #searchIcon>i {
      font-size: 22px;
      margin-left: 5px;
   }

   #query {
      font-size: 14px;
   }

   #query {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='50px' width='120px'><text x='5%' y='15' fill='gray' font-size='15' font-family='arial'>Search ...</text></svg>");
      background-repeat: no-repeat;
   }

   /* Hide env for to make room for any violator messaging */
   .header-env {
      display: none;
   }

}

.tk-fairwater-script,
.tk-fairwater-script>span {
   text-transform: lowercase !important;
   line-height: 0;
   font-size: 18px;
   font-weight: bold;
   color: #244b5a;
}

li:hover>a>span.category>span.tk-fairwater-script,
li:hover>a>span.category>span.tk-fairwater-script>span,
li>a:focus>span.category>span.tk-fairwater-script,
li>a:focus>span.category>span.tk-fairwater-script>span {
   color: white;
   font-weight: 300;
}

.tk-fairwater-script .alt-a {
   -moz-font-feature-settings: "ss16";
   -webkit-font-feature-settings: "ss16";
   font-feature-settings: "ss16";
   text-transform: uppercase !important;
}

.tk-fairwater-script .alt-g {
   -moz-font-feature-settings: "ss04";
   -webkit-font-feature-settings: "ss04";
   font-feature-settings: "ss04";
}

.tk-fairwater-script .alt-h {
   -moz-font-feature-settings: "ss05";
   -webkit-font-feature-settings: "ss05";
   font-feature-settings: "ss05";
}

.cio-submit-btn {
   background-color: #002855;
   color: white;
   padding: 0 14px;
   border-radius: 0 10px 10px 0;
   position: absolute !important;
   right: -1px !important;
   top: -1px !important;
   bottom: -1px !important;
   height: auto;
   display: flex;
   align-items: center;
   justify-content: center;
   border: none;
   cursor: pointer;
   transition: background-color .2s ease, color .2s ease;
}

.cio-submit-btn:hover,
.cio-submit-btn:focus {
   background-color: #003d7a;
   color: #fff;
   outline: none;
}

.cio-clear-btn {
   margin-right: 12px;
   color: #999;
   transition: color .15s;
}

.cio-clear-btn:hover {
   color: #333;
}

/* ── Ask Bookie — desktop: hide mobile element ── */
.ask-bookie-mobile {
   display: none;
}

/* On desktop, li.ask-bookie-mobile is hidden but still the first DOM child,
   so Millionaire's Club renders as the visually-rightmost item in the RTL
   flex-list. Suppress its stray right-edge separator line. */
@media (min-width: 501px) {
   .header-help-links .flex-list li.ask-bookie-mobile + li.help-plus {
      border-right: none;
   }
}

/* ── Ask Bookie button — responsive ── */
@media (max-width: 949px) {
   .ask-bookie-btn-label {
      display: none;
   }
   .ask-bookie-btn {
      padding: 0;
      border-radius: 50%;
      width: 36px;
      height: 36px;
      justify-content: center;
   }
   /* Banner variant: keep wide aspect, don't collapse to a circle */
   .ask-bookie-btn.ask-bookie-btn-banner {
      width: auto;
      border-radius: 8px;
   }
}

@media (max-width: 500px) {
   /* Hide the search-row Ask Bookie button */
   .ask-bookie-btn {
      display: none;
   }

   /* Show the mobile Ask Bookie in the tertiary row */
   li.ask-bookie-mobile {
      display: inline-block !important;
   }

   li.ask-bookie-mobile a {
      display: flex;
      align-items: center;
      gap: 5px;
      color: #002855 !important;
      font-weight: 700;
      font-size: inherit;
      text-decoration: none;
      white-space: nowrap;
      line-height: 1;
   }

   li.ask-bookie-mobile .ask-bookie-btn-icon {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      object-fit: contain;
      vertical-align: middle;
   }
}

/* =========================================================================
   Mobile search takeover (≤500px only)
   All takeover rules live in the @media block below; this one global rule
   keeps the shell hidden everywhere by default so it never renders on
   desktop/tablet (where the takeover never activates).
   ========================================================================= */
#mst-shell { display: none; }

@media (max-width: 500px) {

    /* Takeover OPEN: full-viewport overlay. */
    body.search-takeover-open {
        overflow: hidden;
    }

    body.search-takeover-open #mst-shell {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0;
        background: #fafafa;
        z-index: 9999;
    }

    /* Top bar */
    body.search-takeover-open #mst-topbar {
        display: flex;
        align-items: center;
        flex: 0 0 56px;
        background: #fff;
        border-bottom: 1px solid #e6e6e6;
        padding: 0 4px;
    }

    body.search-takeover-open #mst-back,
    body.search-takeover-open #mst-clear {
        background: none;
        border: 0;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    body.search-takeover-open #mst-back .material-icons,
    body.search-takeover-open #mst-clear .material-icons {
        color: #002855;
        font-size: 24px;
    }

    body.search-takeover-open #mst-input-slot {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* When the search-field is moved into the input slot, override its
       default styling so it reads as an inline header input. */
    body.search-takeover-open #mst-input-slot #search-field {
        width: 100%;
    }

    body.search-takeover-open #mst-input-slot #query,
    body.search-takeover-open #mst-input-slot input.cio-input {
        border: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        font-size: 17px !important; /* must beat base.css .cio-input 15px !important, or iOS re-zooms */
        height: 56px;
        padding: 0 4px;
        width: 100%;
        box-shadow: none !important;
    }

    /* Body */
    body.search-takeover-open #mst-body {
        flex: 1 1 auto;
        overflow-y: auto;
        background: #fafafa;
    }

    body.search-takeover-open #mst-empty {
        display: block;
        padding-bottom: 24px;
    }

    /* Hide empty-state and show widget results once user has typed. */
    body.search-takeover-open.search-takeover-has-query #mst-empty {
        display: none;
    }
    body.search-takeover-open:not(.search-takeover-has-query) #mst-shell .cio-results {
        display: none !important;
    }

    /* Empty-state sections */
    body.search-takeover-open .mst-section {
        background: #fff;
        margin-top: 8px;
    }
    body.search-takeover-open .mst-section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: auto; /* override global mobile `header { height:130px }` (header.css:1440) */
        padding: 8px 16px;
        font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        text-transform: uppercase;
        color: #666;
        letter-spacing: 0.4px;
    }
    body.search-takeover-open .mst-clear-link {
        background: none;
        border: 0;
        color: #002855;
        font: 600 13px/1 inherit;
        padding: 4px 0;
        cursor: pointer;
    }
    body.search-takeover-open .mst-row {
        display: flex;
        align-items: center;
        height: 48px;
        padding: 0 4px 0 16px;
        border-top: 1px solid #f0f0f0;
        cursor: pointer;
    }
    body.search-takeover-open .mst-row-icon {
        color: #999;
        font-size: 20px;
        margin-right: 16px;
        flex: 0 0 auto;
    }
    body.search-takeover-open .mst-row-label {
        flex: 1 1 auto;
        font: 15px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body.search-takeover-open .mst-row-fill {
        flex: 0 0 44px;
        height: 44px;
        background: none;
        border: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    body.search-takeover-open .mst-row-fill .material-icons {
        color: #999;
        font-size: 18px;
        transform: rotate(0deg); /* north_west already points up-left */
    }

    body.search-takeover-open .mst-row-placeholder { cursor: default; }
    body.search-takeover-open .mst-shimmer {
        display: block;
        width: 60%;
        height: 14px;
        border-radius: 3px;
        background: linear-gradient(90deg, #ececec 0%, #f6f6f6 50%, #ececec 100%);
        background-size: 200% 100%;
        animation: mst-shimmer 1.2s linear infinite;
        margin-left: 36px; /* line up with row label after icon space */
    }
    @keyframes mst-shimmer {
        0%   { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    body.search-takeover-open .mst-bookie-card {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 12px 16px 8px;
        padding: 16px;
        height: 72px;
        border: 0;
        border-radius: 12px;
        background: linear-gradient(135deg, #002855 0%, #003a7a 100%);
        text-align: left;
        cursor: pointer;
        width: calc(100% - 32px);
    }
    body.search-takeover-open .mst-bookie-logo {
        height: 40px;
        width: auto;
        flex: 0 0 auto;
    }
    body.search-takeover-open .mst-bookie-text {
        display: flex;
        flex-direction: column;
        color: #fff;
    }
    body.search-takeover-open .mst-bookie-title {
        font: 600 17px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    body.search-takeover-open .mst-bookie-sub {
        font: 13px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        opacity: 0.8;
        margin-top: 2px;
    }


    /* Flatten the CioAutocomplete chrome inside the takeover so the input
       reads as a plain field within the top bar (no double border). */
    body.search-takeover-open #mst-input-slot .cio-autocomplete,
    body.search-takeover-open #mst-input-slot .cio-autocomplete-styles,
    body.search-takeover-open #mst-input-slot .cio-form {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        outline: 0 !important;
    }

    /* Use the widget's own clear-X (it sits inside the input). Hide our
       redundant topbar clear button. The widget shows its own clear button
       at all times by default, so scope visibility to the has-query state
       and center it vertically inside the input field. */
    body.search-takeover-open #mst-clear {
        display: none !important;
    }
    body.search-takeover-open .cio-clear-btn {
        display: none !important;
    }
    body.search-takeover-open.search-takeover-has-query .cio-clear-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    /* CioAutocomplete results — break out of #search-field's narrow flex
       column in the top bar and fill the area below the chip row. */
    body.search-takeover-open.search-takeover-has-query #search-field .cio-results {
        position: fixed !important;
        top: 56px !important;         /* topbar height */
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: auto !important;
        max-width: none !important;
        max-height: none !important;
        background: #fff;
        border: 0 !important;
        box-shadow: none !important;
        overflow-y: auto !important;
        z-index: 1;
    }

    body.search-takeover-open .cio-section-name {
        padding: 12px 16px 8px;
        font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        text-transform: uppercase;
        color: #666;
        letter-spacing: 0.4px;
        background: #fff;
    }

    body.search-takeover-open .cio-item {
        display: flex !important;
        align-items: center !important;
        padding: 0 16px !important;
        min-height: 56px !important;
        border-top: 1px solid #f0f0f0;
        background: #fff !important;
    }

    body.search-takeover-open .cio-section-search-suggestions .cio-item .cio-suggestion-text {
        font: 15px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        color: #333;
    }

    /* Products as full-width list rows (cover-left, title-right). Overrides
       base.css's mobile horizontal card-carousel (flex:0 0 140px + overflow-x)
       and its vertical column item layout so products read like the
       suggestion/trending rows rather than a cramped swipe strip. */
    body.search-takeover-open .cio-section-products ul.cio-section-items {
        display: block !important;
        overflow-x: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
    }
    body.search-takeover-open .cio-section-products ul.cio-section-items li {
        flex: none !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
    }
    body.search-takeover-open .cio-section-products .cio-item {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        padding: 8px 16px !important;
        min-height: 76px !important;
    }
    body.search-takeover-open .cio-section-products .cio-item .cio-product-image,
    body.search-takeover-open .cio-section-products .cio-item img {
        width: 48px;
        height: 64px;
        object-fit: contain;
        margin: 0 12px 0 0;
        flex: 0 0 48px;
        border-radius: 2px;
    }
    body.search-takeover-open .cio-section-products .cio-item .cio-product-text {
        font: 15px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        color: #002855;
        flex: 1 1 auto;
        text-align: left;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin: 0;
    }

    body.search-takeover-open .cio-submit-btn {
        display: none !important;
    }

} /* end @media */

/* =========================================================================
   Mobile category-nav drill-down drawer (≤700px only)
   All rules scoped under body.mobile-nav-open; shell hidden by default so it
   never renders on desktop/tablet (where the drawer never activates).
   ========================================================================= */
#mnav-overlay, #mnav-drawer, #mnav-close { display: none; }

@media (max-width: 700px) {
    /* z-index must clear the site header's stacking — the promo "violator" bar
       sits at z-index:9999, so 9998 left the header undimmed. 100000+ covers the
       whole header while staying below true modal dialogs (9999999+). */
    #mnav-overlay {
        display: block; position: fixed; inset: 0;
        background: rgba(0,0,0,.6);
        -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
        opacity: 0; visibility: hidden;
        transition: opacity .25s ease, visibility 0s linear .25s;
        z-index: 100000;
    }
    #mnav-drawer {
        display: flex; position: fixed; top: 0; left: 0; bottom: 0;
        width: 87vw; max-width: 400px; background: #fff;
        box-shadow: 2px 0 12px rgba(0,0,0,.25);
        transform: translateX(-100%); visibility: hidden;
        transition: transform .25s ease, visibility 0s linear .25s;
        z-index: 100001; overflow: hidden;
    }
    #mnav-close {
        display: flex; align-items: center; justify-content: center;
        position: fixed; top: 10px; right: 8px;
        width: 40px; height: 40px; padding: 0;
        background: none; border: 0; cursor: pointer;
        opacity: 0; visibility: hidden;
        transition: opacity .25s ease, visibility 0s linear .25s;
        z-index: 100002;
    }
    #mnav-close .material-icons { color: #fff; font-size: 28px; }

    body.mobile-nav-open #mnav-overlay { opacity: 1; visibility: visible; transition: opacity .25s ease; }
    body.mobile-nav-open #mnav-drawer  { transform: translateX(0); visibility: visible; transition: transform .25s ease; }
    body.mobile-nav-open #mnav-close   { opacity: 1; visibility: visible; transition: opacity .25s ease; }

    /* Panel track: a row of full-drawer-width panels; translateX by depth.
       Slightly longer than the drawer's .25s so the in-place sub-nav slide
       reads as deliberately as the drawer entering from off-screen. */
    #mnav-track { display: flex; width: 100%; height: 100%; transition: transform .35s ease; }
    .mnav-panel { flex: 0 0 100%; display: flex; flex-direction: column; height: 100%; position: relative; }

    /* Sub-panel header (back ‹ + parent title); absent on the top panel. */
    .mnav-panel-header {
        display: flex; align-items: center; gap: 4px;
        flex: 0 0 56px; padding: 0 8px;
        border-bottom: 1px solid #e6e6e6; background: #fff;
    }
    .mnav-back { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; }
    .mnav-back .material-icons { color: #002855; font-size: 22px; }
    .mnav-panel-title { font: 600 17px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #002855; }

    /* Top-level brand bar: BAM logo (left) + account icon (right). */
    .mnav-panel-header--top { justify-content: space-between; padding: 0 12px; }
    .mnav-logo { height: 30px; width: auto; display: block; }
    .mnav-acct {
        width: 44px; height: 44px; padding: 0; flex: 0 0 auto;
        display: flex; align-items: center; justify-content: center;
        background: none; border: 0; cursor: pointer;
        -webkit-appearance: none; appearance: none;
    }
    .mnav-acct .material-icons { color: #002855; font-size: 26px; }

    /* Focus management: open/drill move focus to the drawer/panel CONTAINER
       (tabindex=-1) so no control shows a ring on tap. Keyboard users still get
       a ring on the actual controls via :focus-visible. */
    #mnav-drawer:focus, .mnav-panel:focus { outline: none; }
    #mnav-close:focus:not(:focus-visible),
    .mnav-back:focus:not(:focus-visible),
    .mnav-acct:focus:not(:focus-visible),
    .mnav-row:focus:not(:focus-visible) { outline: none; }

    /* Scrollable list */
    .mnav-list { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; }

    /* Rows. NOTE: parent rows are <button>, so we must zero the user-agent
       button border/appearance/radius — otherwise each parent row renders a
       default button box ("crazy lines"). Leaf rows are <a>. */
    .mnav-row {
        display: flex; align-items: center; justify-content: space-between;
        min-height: 46px; padding: 0 16px;
        margin: 0; border: 0; border-bottom: 1px solid #f0f0f0; border-radius: 0;
        -webkit-appearance: none; appearance: none;
        background: #fff; color: #333; text-decoration: none;
        font: 16px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        text-align: left; cursor: pointer; width: 100%;
        box-sizing: border-box;
    }
    .mnav-row-label { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mnav-row-chevron { color: #999; font-size: 22px; flex: 0 0 auto; }

    /* Top panel rows stretch to help fill the screen, but cap the height so
       they stay compact (a tall screen leaves a little whitespace at the
       bottom — normal drawer behavior). Tune max-height to taste. */
    .mnav-panel--top .mnav-row { flex: 1 0 auto; max-height: 48px; }

    /* "More below" fade cue, toggled by JS via .mnav-has-more on the panel. */
    .mnav-fade {
        position: absolute; left: 0; right: 0; bottom: 0; height: 32px;
        background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
        pointer-events: none; opacity: 0; transition: opacity .15s ease;
    }
    .mnav-has-more .mnav-fade { opacity: 1; }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
    /* Disable the slide/fade ANIMATIONS only — keep the transforms, since the
       drawer slide-in and the panel-track drill-down both rely on transform to
       position elements. Killing the transform (vs. the transition) would leave
       child panels off-screen and break drill-down. */
    #mnav-overlay, #mnav-drawer, #mnav-close, #mnav-track { transition: none !important; }
}