/* 2026-01-21 MarkC Change PAGEID values to 18265 for the new ProductBrowser page. */
/* Default font is Lato */
.ecwid div, .ecwid span, .ecwid a, .ecwid p, .ecwid h1 {
  font-family: Lato !important;
}

.lato {
  font-family: Lato !important;
}

h3 {
  font-family: Lato !important;
}

.notice {
  border: 2px solid #CBE6EA;
  background-color: #CBE6EA !important;
  padding: 5px !important;
  text-align: center;
}

/*Align 'Refine by' and 'Sort by' buttons left 2025-03*/
/* removed PAGEID 5-18-26 */
/*MarkC 2026-04-05 try adding .ec-text-muted  */
.ec-size .ec-store .grid__sort.ec-text-muted {
  text-align: left;
  padding-top: 10px;
}

/*Align the filters panel to the left 2025-03*/
html#ecwid_html body .ec-size .ec-store .ec-filters--inline.ec-filters--right {
  float: left !important;
  order: 0 !important;
  padding-right: 32px !important;
  padding-left: 0 !important;
}

/* Grabbed it all */
.horizontal-menu-container.horizontal-desktop .horizontal-menu-subParent {
  background-color: #efefef;
}

.horizontal-menu-container.horizontal-desktop nav.horizontal-menu {
  border-radius: 0 !important;
}

/*Display product description before product attributes 2024-11*/
.product-details-module__content {
  display: flex;
  flex-direction: column-reverse;
  row-gap: 30px;
}

/*Button color*/
.ec-size .ec-store .form-control--primary .form-control__button {
  background-color: #06566A;
}

/*Button color on hover*/
.ec-size .ec-store .form-control--primary .form-control__button:hover {
  background: #3babba;
}

/*Text color*/
.ec-size .ec-store .form-control--primary .form-control__button {
  color: white;
}

/*Text color on hover*/
.ec-size .ec-store .form-control--primary .form-control__button:hover {
  color: white;
}

.ecwid a {
  font-size: 19px;
  font-weight: bold;
}

/* Change hover link colors in horiz menu widget */
.horizontal-menu-item--hover > a {
  background: #0C566A !important;
}

.horizontal-menu-item > a {
  color: #005D71 !important;
}

.horizontal-menu-item--hover > a {
  color: white !important;
}

html#ecwid_html body .horizontal-menu-container.horizontal-mobile .horizontal-menu-button {
  color: white;
}

/* Style store header page titles */
.ec-size .ec-store h1 {
  font-weight: normal;
  color: #005D71 !important;
  font-size: 18px;
}

/* checkout - Bold Shopping bag */
.ec-cart__sidebar-inner h1.page-title__name {
  font-weight: 600 !important;
}

/* Hide Category Grid */
.ec-size .ec-store .grid__categories {
  display: none;
}

/* Style Horizontal Widget Menu */
html#ecwid_html body
.horizontal-menu-container.horizontal-desktop nav.horizontal-menu {
  padding: 5px 10px;
  border: none;
  background: #0C566A;
  font-size: 22px;
  font-weight: normal;
}

html#ecwid_html body .horizontal-menu-container.horizontal-desktop horizontal-menu-subParent {
  background-color: #0C566A;
  font-size: 22px;
  font-weight: normal;
}

/* Want above on both pages  */
html#ecwid_html body
.horizontal-menu-container.horizontal-desktop nav.horizontal-menu {
  padding: 5px 10px;
  border: none;
  background: #0C566A;
  font-size: 22px;
  font-weight: normal;
}

html#ecwid_html body .horizontal-menu-container.horizontal-desktop horizontal-menu-subParent {
  background-color: #0C566A;
  font-size: 22px;
  font-weight: normal;
}

html#ecwid_html body .ecwid a {
  font-size: 22px;
  font-weight: normal;
}

/*Modify the Menu button on mobile*/
.horizontal-menu-container.horizontal-mobile {
  /*MarkC 2026-05-01 test; Try value from RStore;  background-color: #0C566A; */
  background-color: #0C566A;
  font-size: 22px;
  font-weight: normal;
}

.horizontal-menu-container.horizontal-mobile .horizontal-menu-button-text {
  font-size: 26px;
  font-weight: 600;
  color: white;
  /* Diane add; */
}

/* Diane add */
.horizontal-menu-container.horizontal-mobile .horizontal-menu-button {
  display: block;
  color: white;
  cursor: pointer;
}

.horizontal-menu-container.horizontal-mobile .horizontal-menu-button svg {
  width: 25px;
  height: 19px;
}

/*Center the horizontal menu on desktop*/
.horizontal-menu-container.horizontal-desktop .horizontal-menu-parent {
  display: flex;
  justify-content: center;
  float: none;
}

/*Add disclaimer under Add to Bag button*/
.details-product-purchase__add-buttons::after {
  content: '(Items in bag are not reserved)';
  font-size: 14px;
  color: #939393;
}

/*Hide Recommended in Sort By dropdown menu*/
#ec-products-sort > option:nth-child(1) {
  display: none;
}

/*MarkC 2026-04-16 Change 'Search by phrase' text in ProductBrowser area to 'Filter by keyword'. Hopefully clearer for users */
/* Did this with Ecwid Edit Store Labels functionality. No need for to try to use CSS */
/* Hide bottom sort by */
.ec-filter--sortby {
  display: none;
}

/*Hide price modifiers for product options*/
.option-surcharge.ec-text-muted {
  display: none;
}

/* change the X in the cart; 2026-01 */
.ec-size .ec-store .ec-cart-item__control-inner svg {
  opacity: 1.5;
  color: black;
  width: 15px;
  height: 15px;
  border-radius: 10px;
}

.ec-size .ec-store .ec-cart-item__control-inner svg g {
  stroke-width: 2px;
}

/* remove search from default footer */
a.ec-link.ec-link--muted.link--icon-top.footer__link--all-products {
  display: none;
}

/* remove default footer */
.ec-size .ec-store .ec-footer__row {
  display: none !important;
}

/*category menu background color*/
#my-categories-111532501 :is(.horizontal-menu-parent, .horizontal-menu-subParent) {
  background-color: #0C566A;
}

/* fixing the gray shadow */
#my-categories-111532501 :is(.horizontal-menu) {
  background-color: #0C566A;
}

/*category menu font color */
.horizontal-menu-item > a {
  color: white !important;
}

/*category menu background color on hover*/
.horizontal-menu-item--hover > a {
  background-color: #0C566A !important;
}

/* format search box */
/*  Input box styles */
input.ecwid-search-widget__input[type="text"] {
  color: #000000;
  /* change font color in search field */
  border: solid 1px black;
  /* change border color */
  border-radius: 25px;
}

/* "Search" button styles */
button.ecwid-search-widget__btn {
  width: 30px;
  /* change width as needed*/
  height: 30px;
  /* change height as needed*/
}

input::placeholder {
  font-family: "Lato";
}

/* Product Page */
html#ecwid_html body .ec-size .ec-store .form-control--primary .form-control__button {
  background-color: #0C7D93;
  font-family: "Lato";
}

/* Checkout */
.form-control__button-text {
  font-family: "Lato";
}

.form-control form-control--button form-control--large form-control--primary form-control--flexible form-control--animated form-control--done ec-cart__button ec-cart__button--checkout {
  background-color: #0C7D93;
}

/* Checkout font */
.page-title__name, .ec-header-h1 {
  font-family: Lato !important;
}

/* moving the favorites icon */
.ec-size .ec-store .ec-store__content-wrapper,
.ec-size .ec-store .ec-store__content-wrapper > div {
  display: flex;
  flex-direction: column;
}

.ec-size .ec-store .ec-footer {
  order: -1;
}

/* change arrow appearance on product detail page */
.ec-size .ec-store .product-details__top-active-navigation .product-details__navigation--arrow-left {
  fill: black !important;
}

.ec-size .ec-store .product-details__top-active-navigation .product-details__navigation--arrow-right {
  fill: black !important;
}

.ec-size .ec-store .product-details__top-active-navigation .product-details__navigation--arrow-left svg {
  height: 12px;
}

.ec-size .ec-store .product-details__top-active-navigation .product-details__navigation--arrow-right svg {
  height: 12px;
}

.horizontal-menu-container.horizontal-desktop nav.horizontal-menu {
  border: none;
}

/* Diane added after Mark pulled the CSS for the real store */
/* Darken magnifying glass on top bar */
.ecwid-search-widget__btn .ecwid-search-widget-icon {
  fill: black;
}

/* Darken magnifying glass on side bar */
.ec-filter__items-inner .svg-icon path {
  fill: black;
}

/* larger font and larger search bar */
input.ecwid-search-widget__input::placeholder {
  font-size: 14pt;
}

input.ecwid-search-widget__input[type="text"] {
  width: 400px;
  /* change this number to your preferred width */
}

.ecwid-search-widget {
  max-width: 400px;
}
