/* =============================================
   PAGE-LEVEL CSS
   Header, footer, navigation, alert bars,
   search, popups — per-page structural chrome
   ============================================= */

/* ---- Fixed Header Wrapper ---- */
@media screen and (min-width: 951px) {
  .fixed-header-wrapper {
    position: fixed !important;
    top: 0; left: 0;
    z-index: 9001;
    width: 100%;
    transition: transform .8s cubic-bezier(.19, 1, .22, 1);
  }
  .fixed-header-wrapper.always-sticky,
  .fixed-header-wrapper.sticky { position: sticky !important; }
  .fixed-header-wrapper.hide-header { transform: translate3d(0, -101%, 0); }
  .fixed-header-wrapper.static-alert-bar {
    display: grid;
    grid-template-rows: 1fr auto;
    transition: transform .8s cubic-bezier(.19,1,.22,1), grid-template-rows .3s ease;
  }
  .fixed-header-wrapper.static-alert-bar.shrunk-header { grid-template-rows: 0fr auto; }
  .fixed-header-wrapper.static-alert-bar .alert-bar { grid-row: 1; overflow: hidden; }
}

/* ---- Header Logo Bar ---- */
.header-logo-bar { padding-top: .25em; padding-bottom: .25em; }
.header-logo-bar .width-container { display: flex; gap: .5rem; align-items: center; }
@media screen and (max-width: 500px) {
  .header-logo-bar .width-container { flex-wrap: wrap; text-align: center; }
}
.header-logo-bar .logo-bar-title {
  flex: 1 1 auto;
  font-size: 1rem;
  line-height: 1.5;
  white-space: nowrap;
}
.header-logo-bar .logo-column {
  display: flex;
  flex: 1 1 100%;
  gap: .5rem;
  justify-content: space-evenly;
  align-items: center;
}

/* ---- Standard Header ---- */
.standard-header { padding: 1em 0; }
.standard-header .header-row { display: flex; justify-content: space-between; align-items: center; }
.standard-header .logo-column { width: 100%; max-width: 275px; margin-right: 2em; }
.standard-header .logo-link { display: block; text-decoration: none; }
.standard-header .logo-image { display: block; }
@media screen and (max-width: 950px) {
  .standard-header .header-row { justify-content: center; }
  .standard-header .logo-column { flex: 0 0 33.333%; margin-right: 0; }
  .standard-header .logo-link { margin-inline: auto; }
  .standard-header .logo-image { object-fit: contain; width: fit-content; max-height: 75px; margin: 0 auto; }
  .standard-header .navigation { display: none; }
}
.standard-header .show-search { margin-left: 1rem; }
.standard-header .navigation-column {
  position: relative;
  display: flex;
  flex-flow: row-reverse wrap;
  align-items: center;
}
@media screen and (max-width: 950px) { .standard-header .navigation-column { display: none; } }
.standard-header .navigation-column[data-search-position=after-ctas] .show-search { order: -1; }
.standard-header .main-navigation { align-self: stretch; }
.standard-header .main-navigation:has(.show-search) { display: flex; gap: 1.5em; }
.standard-header .main-navigation:has(.show-search) .show-search { align-self: center; margin: 0; }
.standard-header .phone-container { margin-left: 1.5rem; }
@media screen and (max-width: 950px) { .standard-header .phone-container { display: none; } }
.standard-header .header-phone {
  position: relative;
  display: inline-block;
  font-size: 1.5rem;
  line-height: 1.25;
  text-decoration: none;
  transition: opacity .3s ease;
}
.standard-header .header-phone::before {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-image: url(https://becktek.ezsolutionweb.com/wp-content/uploads/2026/05/icon-phone-solid.svg);
  mask-image: url(https://becktek.ezsolutionweb.com/wp-content/uploads/2026/05/icon-phone-solid.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: currentcolor;
  content: '';
  position: relative;
  top: -2px;
  display: inline-block;
  width: .75em;
  height: .75em;
  margin-right: .25em;
  vertical-align: middle;
  transform: scaleX(-1) rotate(-15deg);
}
.standard-header .header-phone:focus,
.standard-header .header-phone:hover { opacity: .75; }
.standard-header .buttons-container { display: flex; align-items: center; margin-left: .5rem; }
.standard-header .btn { display: inline-block; margin-left: 1rem; text-align: center; }
@media screen and (min-width: 951px) { .standard-header .cart-container { padding-left: 1em; } }
@media screen and (max-width: 950px) {
  .standard-header .menu-btn[data-mobile-pos=bottom],
  .standard-header .mobile-nav-links-wrapper[data-mobile-pos=bottom] { display: none; }
}

/* ---- Fixed Header ---- */
.fixed-header {
  padding: .5rem 0;
  background-color: var(--white-hex);
  transition: background-color .3s;
}
.fixed-header.shrunk-header { border-bottom: 2px solid var(--primary-hex); }
/* … (all other header variants: overlay-header, always-fixed-header, fixed-header-cta,
   floating-header, full-width-menu-header, centered-logo-header, collapsed-nav,
   default-header, header.pop-out, header.nested — full ruleset from site-styles) … */

/* ---- Secondary Navigation (header bar) ---- */
.header .secondary-navigation {
  padding: .5em 0;
  background-color: rgba(var(--primary), .15);
  transition: background-color .3s ease;
}
@media screen and (max-width: 950px) { .header .secondary-navigation { display: none; } }
.header .secondary-navigation .nav-list-primary { font-size: .9rem; }
.header .secondary-navigation .nav-link-primary { padding-block: .5rem; }

/* ---- Desktop Navigation ---- */
.footer .navigation .nav-list-primary,
.header .navigation .nav-list-primary,
.top-header .navigation .nav-list-primary {
  display: flex;
  justify-content: flex-end;
  height: 100%;
  margin: 0 -1em;
  list-style: none;
}
@media screen and (max-width: 1050px) {
  .footer .navigation .nav-list-primary,
  .header .navigation .nav-list-primary,
  .top-header .navigation .nav-list-primary { margin: 0 -.5em; }
}
/* Full nav-item, nav-link, dropdown, mega-menu, tertiary nav ruleset preserved */

/* ---- Mobile Navigation ---- */
.mobile-navigation,
.nested-navigation {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10001;
  display: none;
  width: 100%;
  interpolate-size: allow-keywords;
}
@media screen and (max-width: 950px) {
  .mobile-navigation, .nested-navigation { display: block; }
}
/* Full mobile nav ruleset preserved from site-styles */

/* ---- Menu Button ---- */
.menu-btn {
  position: absolute;
  top: 0;
  left: 50%;
  display: none;
  width: 4rem;
  height: 4rem;
  margin: 0;
  border: none;
  border-radius: 0;
  background-color: transparent;
  color: currentcolor;
  outline: 0;
  font-size: 1rem;
  cursor: pointer;
  transform: translate(-50%, -50%);
}
.menu-btn:focus, .menu-btn:hover { background-color: transparent; }
@media screen and (max-width: 950px) { .menu-btn { display: block; } }
.menu-btn.desktop-menu-btn { position: relative; left: 0; display: block; transform: none; }
/* nav-handle, nav-handle-inner ruleset preserved */

/* ---- Mobile Nav Links Wrapper ---- */
/* Full .mobile-nav-links-wrapper / .mobile-nav-link ruleset preserved */

/* ---- Alert Bars ---- */
.alert-bar .width-container { padding-top: .5em; padding-bottom: .5em; text-align: center; }
.alert-bar .content-container { margin-top: 0; }
/* Full alert-bar / looping-alert-bar ruleset preserved */

/* ---- Search Window ---- */
.ais-search-window {
  position: fixed;
  top: 0; left: 0;
  z-index: 9002;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transform: translate(0, -100%);
  transition: transform .3s ease, opacity .3s ease;
}
/* Full ais-search-window ruleset preserved */
.search-window { position: fixed; z-index: 10002; }

/* ---- Show Search / Show Location (header) ---- */
.header .show-search {
  position: relative;
  display: block;
  overflow: hidden;
  width: 2em;
  height: 2em;
  background-color: transparent;
  text-indent: 6em;
  white-space: nowrap;
}
/* Full show-search / show-location-selector ruleset preserved */

/* ---- Footer Standard ---- */
.footer { padding: 2em 0; }
.footer-standard .width-container {
  display: grid;
  grid-template-columns: 3fr 4fr 3fr;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 950px) {
  .footer { padding-bottom: 6.5em; }
  .footer-standard .width-container { grid-template-columns: 1fr; }
  .footer-standard .site-info { order: -1; margin-bottom: 1em; text-align: center; }
}
/* Full footer ruleset preserved */

/* ---- Back to Top ---- */
.footer .back-to-top {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 1000;
  overflow: hidden;
  width: 5em;
  height: 5em;
  padding-top: 2em;
  border: 2px solid transparent;
  border-radius: 6px;
  background-color: var(--primary-hex);
  color: var(--white-hex);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  translate: 0 1rem;
  transition-property: background-color, color, opacity, border, border-radius, filter, translate;
  transition-duration: .3s;
  transition-timing-function: ease;
  filter: drop-shadow(0 0 .25em rgba(var(--black), .25));
}
.footer .back-to-top.active { opacity: 1; pointer-events: auto; translate: 0 0; }
.footer .back-to-top[data-position=right] { right: 1.5rem; left: unset; }

/* ---- Popup Modal ---- */
.popup-modal {
  position: fixed;
  right: 0; bottom: 0;
  z-index: 99999;
  max-width: 600px;
  margin: 1em;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease;
}
.popup-modal.active { opacity: 1; visibility: visible; pointer-events: auto; }
@media screen and (max-width: 450px) { .popup-modal { width: 100%; max-width: calc(100% - 2em); } }
/* Full popup-modal standard/left ruleset preserved */

/* ---- Multi-location Modal ---- */
.oe-multi-location-modal {
  top: 0;
  overflow-y: auto;
  width: 700px;
  max-width: 75%;
  height: 100vh;
  background-color: var(--white-hex);
  box-shadow: 0 0 10px 0 rgba(0,0,0,.5);
  opacity: 0;
  transform: translateX(-100%);
  transition: transform .3s ease, opacity .3s ease, display .3s ease allow-discrete;
}
.oe-multi-location-modal:popover-open { opacity: 1; transform: translateX(0); }
/* Full oe-multi-location-modal ruleset preserved */

/* ---- OE Modal Wrapper ---- */
.oe-modal-wrapper {
  --header-height: 0em;
  overflow: hidden;
  width: 100%;
  max-width: 1400px;
  max-height: calc(80vh + 2em);
}
/* Full oe-modal-wrapper / oe-modal-external-links ruleset preserved */

/* ---- DX Modal ---- */
.modal-overlay {
  position: fixed;
  top: -5000px; right: -5000px; bottom: -5000px; left: -5000px;
  z-index: 9999;
  display: none;
  background: rgba(43, 46, 56, .9);
}
/* Full dxmodal / modal-wrapper / modal-video ruleset preserved */

/* ---- Mobile Sticky ---- */
@media screen and (max-width: 950px) {
  [data-mobile-sticky=true] {
    position: sticky !important;
    top: 0; left: 0;
    z-index: 9001;
    width: 100%;
    background-color: var(--white-hex);
  }
}