/* 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;
   }

   /* 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;
   }
}