/* HL layout + ATC + footer + home grid — keep under ~15KB FTP */

:root {
  --hl-red: #d71920;
  --hl-line: #e8e8e8;
  --hl-footer-bg: #30343b;
  --hl-footer-text: #f3f4f6;
}

/* ===== Product ATC buttons (legacy outline) — NEVER override shared .hl-pc cards ===== */
body .product-miniature:not(.hl-pc) .product-miniature__add,
body .product-miniature:not(.hl-pc) .product-miniature__add.btn-primary,
body .product-miniature:not(.hl-pc) .product-miniature__add.btn-outline-primary,
body .product-miniature:not(.hl-pc) .product-miniature__add.btn-square-icon,
body .product-miniature:not(.hl-pc) [data-button-action="add-to-cart"].btn-primary,
body .product-miniature:not(.hl-pc) .product-miniature__add[data-button-action="add-to-cart"].btn-primary,
body article.product-miniature:not(.hl-pc) .product-miniature__add,
body#product .product-miniature:not(.hl-pc) .product-miniature__add,
body#product .product-miniature:not(.hl-pc) .product-miniature__add.btn-primary,
body#product .product-miniature:not(.hl-pc) .product-miniature__add[data-button-action="add-to-cart"].btn-primary,
body#product .product-miniature:not(.hl-pc) [data-button-action="add-to-cart"].btn-primary,
body .ps-categoryproducts .product-miniature:not(.hl-pc) .product-miniature__add,
body .ps-viewedproduct .product-miniature:not(.hl-pc) .product-miniature__add,
body .featured-products .product-miniature:not(.hl-pc) .product-miniature__add,
body .module-products .product-miniature:not(.hl-pc) .product-miniature__add,
body .product-accessories .product-miniature:not(.hl-pc) .product-miniature__add {
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  background: #fff !important;
  background-color: #fff !important;
  color: #d71920 !important;
  border: 1.5px solid #d71920 !important;
  border-radius: 6px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  letter-spacing: -0.15px !important;
  padding: 0.35rem 0.4rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  line-height: 1.15 !important;
}

body .product-miniature:not(.hl-pc) .product-miniature__add .material-icons,
body .product-miniature:not(.hl-pc) .product-miniature__add-text,
body .product-miniature:not(.hl-pc) .product-miniature__add.btn-primary .material-icons,
body .product-miniature:not(.hl-pc) .product-miniature__add.btn-primary .product-miniature__add-text,
body#product .product-miniature:not(.hl-pc) .product-miniature__add-text,
body .ps-categoryproducts .product-miniature:not(.hl-pc) .product-miniature__add-text,
body .ps-viewedproduct .product-miniature:not(.hl-pc) .product-miniature__add-text,
body .featured-products .product-miniature:not(.hl-pc) .product-miniature__add-text,
body .product-accessories .product-miniature:not(.hl-pc) .product-miniature__add-text {
  display: inline !important;
  color: #d71920 !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  font-size: inherit !important;
  line-height: 1.15 !important;
  position: static !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  text-indent: 0 !important;
  white-space: nowrap !important;
}

body .product-miniature:not(.hl-pc) .product-miniature__add .material-icons {
  font-size: 15px !important;
}

body .product-miniature:not(.hl-pc) .product-miniature__add:hover,
body .product-miniature:not(.hl-pc) .product-miniature__add.btn-primary:hover,
body .product-miniature:not(.hl-pc) [data-button-action="add-to-cart"].btn-primary:hover {
  background: #d71920 !important;
  background-color: #d71920 !important;
  color: #fff !important;
  border-color: #d71920 !important;
}

body .product-miniature:not(.hl-pc) .product-miniature__add:hover .material-icons,
body .product-miniature:not(.hl-pc) .product-miniature__add:hover .product-miniature__add-text {
  color: #fff !important;
}

/* Logged-in account menu: keep clickable + dropdown above header chrome */
@media (min-width: 768px) {
  #header .header-top {
    overflow: visible !important;
  }
  #header .header-top #_desktop_ps_customersignin,
  #header .header-top .ps-customersignin,
  #header .header-top .ps-customersignin .dropdown {
    position: relative;
    z-index: 1085;
    pointer-events: auto !important;
  }
  #header .header-top #userMenuButton,
  #header .header-top .ps-customersignin .dropdown-toggle {
    cursor: pointer !important;
    pointer-events: auto !important;
  }
}
/* Logged-in account menu: header-top forces light link color — keep dropdown dark-on-white */
#header .header-top .dropdown-menu {
  background: #fff !important;
  background-color: #fff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .14) !important;
  padding: .35rem 0 !important;
  z-index: 1080 !important;
  min-width: 12rem !important;
}
#header .header-top .dropdown-menu .dropdown-item,
#header .header-top .dropdown-menu a.dropdown-item,
#header .header-top .dropdown-menu a {
  color: #18191a !important;
  background: transparent !important;
  background-color: transparent !important;
  font-weight: 600 !important;
  font-size: .9rem !important;
  line-height: 1.35 !important;
  padding: .55rem 1rem !important;
  opacity: 1 !important;
}
#header .header-top .dropdown-menu .dropdown-item:hover,
#header .header-top .dropdown-menu .dropdown-item:focus,
#header .header-top .dropdown-menu a:hover,
#header .header-top .dropdown-menu a:focus {
  color: #d71920 !important;
  background: #f3f4f6 !important;
  background-color: #f3f4f6 !important;
}
#header .header-top .dropdown-menu .dropdown-divider {
  border-top-color: #e5e7eb !important;
  opacity: 1 !important;
}

/* ===== Desktop header layout (content width owned by hl-site-layout.css) ===== */
@media (min-width: 768px) {
  /* Kill Bootstrap row negative margins that make menu wider than banner */
  .header-bottom__row.row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    --bs-gutter-x: 0 !important;
    column-gap: 32px !important;
    row-gap: .55rem !important;
  }

  .header-bottom__logo {
    order: 1 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #_desktop_ps_searchbar {
    order: 2 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #_desktop_ps_searchbar .ps-searchbar,
  #ps_searchbar.ps-searchbar,
  #_desktop_ps_searchbar .ps-searchbar__form,
  #_desktop_ps_searchbar .ps-searchbar__input {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .ps-mainmenu--desktop {
    order: 10 !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: .4rem 0 0 !important;
    padding: 0 !important;
  }

  .header .ps-mainmenu__desktop,
  .ps-mainmenu--desktop .ps-mainmenu__desktop {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }
}

@media (min-width: 1200px) {
  /* Keep -1px flush with nav 1px border (do not reset to 0) */
  .ps-mainmenu__desktop .hl-mega.js-sub-menu,
  .ps-mainmenu__desktop .submenu.hl-mega {
    left: -1px !important;
    right: -1px !important;
    width: auto !important;
  }

  .hl-mega__container.container,
  .hl-mega__container {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: var(--hl-menu-pad-x, 20px) !important;
    padding-right: var(--hl-menu-pad-x, 20px) !important;
  }
}

/* Homepage product grids: see hl-home-products.css */

/* ===== Mobile / tablet header =====
   Row1: [☰] [LOGO] ........ [user] [cart]
   Row2: [======== full-width search ========]
*/
@media (max-width: 991.98px) {
  .ps-mainmenu--desktop {
    display: flex !important;
    align-items: center !important;
    order: 0 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .ps-mainmenu__desktop {
    display: none !important;
  }

  .ps-mainmenu__mobile-toggle,
  .menu-toggle {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #18191a !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
  }

  /* CSS bars — Material Icons font can fail → empty glyph */
  .menu-toggle .material-icons {
    display: block !important;
    position: relative !important;
    width: 22px !important;
    height: 16px !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    overflow: visible !important;
  }

  .menu-toggle .material-icons::before {
    content: "" !important;
    display: block !important;
    width: 22px !important;
    height: 2.5px !important;
    margin-top: 6.75px !important;
    background: #18191a !important;
    border-radius: 1px !important;
    box-shadow: 0 -7px 0 #18191a, 0 7px 0 #18191a !important;
  }

  #mobileMenu,
  .ps-mainmenu--mobile.offcanvas {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 767.98px) {
  body#index .header-top,
  body .header-top {
    display: none !important;
  }

  /* Soften dark --header-footer-line (#3a3b3c) used by #header border-bottom */
  body #header {
    --header-footer-line: #e5e7eb;
  }

  body .header-bottom {
    padding: .4rem 0 .4rem !important;
  }

  body .header-bottom .container-md,
  body .header-bottom .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body .header-bottom__row,
  body .header-bottom__row.row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    column-gap: .35rem !important;
    row-gap: .45rem !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    --bs-gutter-x: 0 !important;
  }

  /* Row1: ☰ | LOGO | search | account | cart */
  body .header-bottom__logo {
    order: 1 !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
  }

  body .header-bottom__logo .logo,
  body .header-bottom__logo img.logo {
    max-height: 36px !important;
    max-width: 140px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
  }

  body .header-bottom__logo .navbar-brand {
    min-height: 0 !important;
    max-width: 140px !important;
  }

  body .ps-mainmenu--desktop {
    order: 0 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin-right: .15rem !important;
  }

  body #_mobile_hl_search_toggle {
    order: 2 !important;
    flex: 0 0 auto !important;
    margin: 0 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
  }

  body #_mobile_ps_customersignin {
    order: 3 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  body #_mobile_ps_shoppingcart {
    order: 4 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Shared mobile icon cluster: equal size, centered, same hit area */
  body #_mobile_hl_search_toggle .header-block,
  body #_mobile_ps_customersignin .header-block,
  body #_mobile_ps_shoppingcart .header-block {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 44px !important;
  }

  body #_mobile_hl_search_toggle .header-block__action-btn,
  body #_mobile_ps_customersignin .header-block__action-btn,
  body #_mobile_ps_shoppingcart .header-block__action-btn {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    margin: 0 1px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #f3f4f6 !important;
    background-color: #f3f4f6 !important;
    color: #18191a !important;
    box-shadow: none !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    vertical-align: middle !important;
  }

  body #_mobile_hl_search_toggle .header-block__icon,
  body #_mobile_ps_customersignin .header-block__icon,
  body #_mobile_ps_shoppingcart .header-block__icon,
  body #_mobile_hl_search_toggle .material-icons,
  body #_mobile_ps_customersignin .material-icons,
  body #_mobile_ps_shoppingcart .material-icons {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    font-size: 24px !important;
    line-height: 1 !important;
    color: #18191a !important;
    margin: 0 !important;
    flex: 0 0 24px !important;
  }

  body #_mobile_ps_shoppingcart .header-block__badge {
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    background: #d71920 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html.hl-search-open body #_mobile_hl_search_toggle .header-block__action-btn {
    background: #fee2e2 !important;
    background-color: #fee2e2 !important;
    color: #d71920 !important;
  }

  html.hl-search-open body #_mobile_hl_search_toggle .header-block__icon,
  html.hl-search-open body #_mobile_hl_search_toggle .material-icons {
    color: #d71920 !important;
  }

  /* Legacy canvas toggle stays hidden — HL icon replaces it */
  body .ps-searchbar--mobile,
  body .ps-searchbar--mobile.d-flex,
  body .ps-searchbar--mobile.d-md-none,
  body #header [data-bs-target="#searchCanvas"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body #_desktop_ps_searchbar {
    display: none !important;
  }

  /* Collapsed by default — frees a full search row */
  body #hl-mobile-search-slot,
  body .hl-mobile-search-slot {
    display: none !important;
    order: 20 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html.hl-search-open body #hl-mobile-search-slot,
  html.hl-search-open body .hl-mobile-search-slot,
  body #hl-mobile-search-slot.is-open,
  body .hl-mobile-search-slot.is-open {
    display: block !important;
    margin: .35rem 0 0 !important;
  }

  /* theme.css sets .ps-searchbar { margin-block: 0.5rem } — zero in mobile slot */
  body #hl-mobile-search-slot .ps-searchbar,
  body .hl-mobile-search-slot .ps-searchbar {
    margin-block: 0;
    margin-top: 0;
    margin-bottom: 0;
    min-width: 0;
  }

  body #hl-mobile-search-slot .ps-searchbar,
  body #hl-mobile-search-slot .ps-searchbar__form,
  body #hl-mobile-search-slot .ps-searchbar__input {
    width: 100% !important;
    max-width: none !important;
  }

  body #hl-mobile-search-slot .ps-searchbar__input {
    min-height: 44px !important;
  }

  /* Let fast-search panel paint below the field (header overflow used to clip it) */
  body #header,
  body #header.header,
  body #header .header-bottom,
  body #header .header-bottom__row,
  body #hl-mobile-search-slot,
  body #hl-mobile-search-slot .ps-searchbar {
    overflow: visible !important;
    max-height: none !important;
  }

  body #hl-mobile-search-slot .ps-searchbar,
  body #hl-mobile-search-slot .hl-fast-search-host {
    position: relative !important;
    z-index: 40 !important;
  }

  body #fd-fast-results {
    z-index: 2147483000 !important;
  }
}

/* Fast-search panel: body portal + fixed (JS sets top/left).
   Do NOT use top:100% here — on body that = bottom of the page. */
body > #fd-fast-results,
body > .hl-fast-search-results {
  position: fixed !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 2147483000 !important;
}

/* ===== Footer: light text on dark bg + readable mobile menus ===== */
#footer,
footer.footer,
.footer {
  background: var(--hl-footer-bg) !important;
  color: var(--hl-footer-text) !important;
}

#footer,
#footer p,
#footer span,
#footer li,
#footer h3,
#footer h4,
#footer .footer-block__title,
#footer .footer-block__title button,
#footer .accordion-button,
#footer .text-muted,
#footer .text-body-secondary,
#footer .text-body,
#footer .collapse,
footer.footer p,
footer.footer span {
  color: var(--hl-footer-text) !important;
}

/* Link colors live in hl-footer.css (muted + HL red hover) */
#footer a,
#footer .cms-page-link,
#footer .account-link,
footer.footer a {
  color: rgba(243, 244, 246, 0.72) !important;
}

#footer a:hover,
#footer .cms-page-link:hover,
#footer .account-link:hover,
footer.footer a:hover {
  color: var(--hl-red, #d71920) !important;
}

#footer .footer-block__title,
#footer .accordion-button {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

#footer .accordion-button::after,
#footer .footer-block__title .material-icons {
  color: var(--hl-footer-text) !important;
  filter: none !important;
}

/* Identity form: lighter hint in new-password label */
.hl-field-hint {
  color: #9ca3af;
  font-weight: 400;
}