img,object,embed,video{max-width:100%;border:0}.ie6 img{width:100%}
.video-container{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden}
.video-container iframe,.video-container object,.video-container embed{position:absolute;top:0;left:0;width:100%;height:100%}
body {
    font:1em Arial, Helvetica, sans-serif;
}

.gridContainer{  
    max-width: 1500px; /* Set maximum width */
    width: 100%; /* Ensures responsiveness */
    margin: 0 auto; /* Centers the div */
    /* Optional: Adds padding for small screens */
    background-color:#FFF;
}
html, body {
    max-width: 100%;
    overscroll-behavior-x: contain;
    overflow-x: clip; /* blocks scrolling without affecting inside content */
}

/* General Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ===== HEADER STYLES ===== */
#header-all {
  margin-bottom: 10px;
}

#header_top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

#header-left {
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#header-left img {
  display: block;
}

#established {
  font-size: 20px;
  text-align: left;
  margin-bottom: 10px;
  text-indent: 5px;
}

#header-middle {
  width: 35%;
  margin-left: 10%;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#header-right {
  width: 20%;
  display: flex;
  flex-direction: column; /* Stack children vertically */
  align-items: flex-end; /* Aligns text to the right */
  justify-content: center;
  padding-right: 15px;
}

#header_top {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#header-left,
#header-middle,
#header-right {
  flex: 0.75 1 100%;
  max-width: 600px;
  text-align: center;
  margin: 10px 0;
}

/* adjust search, logo, basket sizing */
#header-left img {
  max-width: 60%;
}

#phone {
  font-size: 30px;
  font-weight: bold;
  padding: 10px 0;
}

/* ===== BASKET COUNTER (If used) ===== */
#basket-counter {
  width: 70%;
  background-color: #2872bd;
  padding: 12px 16px;
  font-size: 18px;
  display: inline-block;
  text-align: center;
}

#basket-counter a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

#basket-counter a:hover {
  color: white;
  text-decoration: none;
}

.search-container {
  display: flex;
  width: 100%;
  align-items: center;
}

.search-box {
  display: flex;
  position: relative;
  margin-left: 2%;
  width: 96%;
  padding: 10px;
  border: 2px solid #2872bd;
  background: white;
}

.search-box input {
  width: 90%;
  font-size: 16px;
  padding: 10px;
  border: none;
  outline: none;
  color: #333;
  background: transparent;
}

.search-box button {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  background: none;
  border: none;
  cursor: pointer;
}

.search-box button img {
  width: 20px;
  height: 20px;
}

#mobile-search-box { display: none; }

/* Split background bar */
#split {
  background-color: #2872bd;
  width: 100%;
  height: auto;
  clear: both;
  display: block;
    position: relative;
  z-index: 110;
}

/* ===== MENU BAR ===== */
/* Container */
/* Base menu-bar styles */
#menu-bar {
  width: 100%;
  position: relative;
  z-index:100;
  background-color: transparent;
}
#menu-bar,
.navbar {
  position: relative;
  z-index: 200; /* must be higher than #split and most page content */
}
  #menu-bar, .navbar, .nav-list {
    overflow: visible !important;
  }
.menu-close-li {
  display: none;
}
/* completely remove the empty close‐li on desktop */
.nav-list > .menu-close-li {
  display: none !important;
}
.navbar li a {
  color: white;
  text-decoration: none;
  font-size: 20px;
  display: block;
}

/* Hamburger and toggles hidden by default (desktop and tablet) */
.menu-toggle,
.menu-close,
.submenu-toggle {
  display: none;
}
.menu-toggle span {
  display: block;
  width: 30px;
  height: 3px;
  background: #fff;
  margin: 3px 0;
}
.nav-list {
  list-style: none;
  margin: 0;
  padding:10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  width: 100%;
    max-width:1500px;
      overflow-x: auto;   /* In case the menu is too wide */
    gap:0;
}
/* Remove dots/bullets from all menu lists by default */
.nav-list,
.navbar ul,
.submenu {
  list-style: none;

}


.nav-list > li {
  padding: 0 10px;
  font-size: 18px;
  flex: 1 1 0;      /* Each menu item can grow/shrink equally */
  text-align: center;
  position: relative;
  display: block;
  border: none !important;
  border-bottom: none !important;
  margin: 0;       /* REMOVE this */
  white-space: nowrap;   /* Prevents wrap */
}
.nav-list > li > a {
  text-decoration: none !important;
  border: none !important;
  border-bottom: none !important;
  background: none !important;
  box-shadow: none !important;
     white-space: nowrap; /* Prevent breaking "Sell/Part-Ex" */
}
.nav-list > li:last-child {
  margin-right: 0;
}
.nav-list > li > a {
  white-space: nowrap; /* Prevent breaking "Sell/Part-Ex" */
}
.submenu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 220px !important;
    background: #f4f4f4 !important;
    z-index: 9999 !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2) !important;
    border: 1px solid rgba(169,163,158,0.2) !important;
    white-space: nowrap !important;
    max-height: none !important;
    overflow: visible !important;
    flex-direction: initial !important;
    text-align: left;
}
/* Submenu links: no underline, except on hover if desired */
.submenu li a {
  text-decoration: none !important;
  border: none !important;
  border-bottom: none !important;
  background: none;
  color: #000;
    padding: 10px;
}
.submenu li a:hover {
  background: #1f5a97;
  color: #fff;
  text-decoration: none !important;
}
.nav-list > li:hover > .submenu {
 display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}
/* Wrapper should behave inline */
.search-toggle-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
}

/* Hide icon on desktop, show search */
.search-icon-only {
  display: none;
}

/* Default: full search bar shown */
.search-box {
  display: flex;
  position: relative;
  width: 100%;
}
/* ===== FOOTER STYLES ===== */
.footer {
  background-color: #2872bd;
  color: white;
  font-family: Arial, sans-serif;
  font-size: 20px;
}

.gridContainer-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1500px;
  margin: auto;
  flex-wrap: nowrap;
  min-height: 300px;
  width: 100%;
  box-sizing: border-box;
}

.footer-left,
.footer-middle,
.footer-right {
  padding: 15px;
    font-size: 18px; /* match opening hours & links */
  line-height: 1.5;
}


.footer-left {
  width: 15%;
  flex: 1;
  min-width: 150px;
    max-width: 220px;
  display: flex;
  flex-direction: column;
}

.footer-middle {
  width: 65%;
  flex: 3;
  min-width: 400px;
    max-width: 700px;
      display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-right {
  width: 20%;
  flex: 1;
  min-width: 250px;
    max-width: 350px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: left;
}

/* Footer links */
.footer a {
  color: white;
  text-decoration: none;
  font-size: 20px;
  display: block;
  padding: 3px 0;
  line-height: 1.4;
}

.footer a:hover {
  color: rgba(0, 0, 0, 0.2);
}

.footer strong {
  font-weight: 800;
  color: white;
  margin-top: 10px;
  margin-bottom: 6px;
  display: inline-block;
}

/* Footer map */
#footer_map {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

#footer_map iframe {
  width: 90%;
  height: 250px;
  display: block;
    max-width: 400px;
  min-width: 250px;
  margin: 0 auto;
    border: 0;
}

/* Footer table */
/* Footer Opening Hours Table */
.footer-right table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px; /* space between heading and table */
}

.footer-right td {
   vertical-align: top;
  font-size: 18px;
}

/* First column (day names) fixed width for alignment */
.footer-right td:first-child {
  width: 110px;
  font-weight: 600;
}
.footer-right .footer_table,
.footer-right .recent-products {
  width: 100%; /* Ensures both stretch equally */
  display: block; /* Ensures consistent box behavior */
  margin-bottom: 10px;
}

.footer-right .recent-products a {
  display: block;
  padding: 3px 0;
  font-size: 18px;
}

/* Social media */
#media {
  margin-top: 20px;
}

#media a {
  display: inline-block;
  margin-right: 10px;
}

#media img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

/* Footer bottom bar */
#footer_container {
    width:98%;
  text-align: center;
  padding: 10px 0;
  background: rgba(0, 0, 0, 0.2);
  margin-top: 10px;
  font-size: 14px;
}

.footer_label {
  margin-top: 20px;
  margin-bottom: 10px;
  line-height: 1.6;
}

.footer a,
.footer_label a,
.footer-right .recent-products a {
  display: block;
  font-size: 18px;
  color: white;
  text-decoration: none;
  padding: 2px 0;
  line-height: 1.5;
}


/* Match heading style in all columns */
.footer strong {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 6px;
  display: block;
}

/* Align table font size with links */
.footer-right table td {
  font-size: 18px;
  padding: 4px 6px;
  line-height: 1.5;
}


.footer-left > *,
.footer-middle > *,
.footer-right > * {
  margin-bottom: 12px;
  line-height: 1.5;
}

.footer-left strong,
.footer-middle strong,
.footer-right strong {
  display: block;
  margin-bottom: 6px;
}

.footer_label {
  margin-top: 12px;
  margin-bottom: 12px;
  line-height: 1.5;
}

.footer_label a,
.footer-right .recent-products a {
  padding: 2px 0;
  line-height: 1.4;
}
 

/* ===== TABLET (700px–950px) ===== */
@media only screen and (min-width: 481px) and (max-width: 769px) {
  #header_top {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  #header-left,
  #header-middle,
  #header-right {
    flex: 0.75 1 100%;
    max-width: 600px;
    text-align: center;
    margin: 10px 0;
  }
  /* adjust search, logo, basket sizing */
  #header-left img {
    max-width: 60%;
  }
  #phone {
    font-size: 30px;
      text-decoration: none;
  }
  #basket-counter {
    padding: 12px 16px;
    font-size: 18px;
  }

.navbar li a {
  color: white;
  text-decoration: none;
  font-size: 20px;
  display: block;
}

/* Hamburger and toggles hidden by default (desktop and tablet) */
.menu-toggle,
.menu-close,
.submenu-toggle {
  display: none;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 7px 0 7px 0;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  position: static;
  background: transparent;
  width: 100%;
}
/* Remove dots/bullets from all menu lists by default */
.nav-list,
.navbar ul,
.submenu {
  list-style: none;

}
.nav-list > li {
  padding: 0 4px;
  font-size: 15px;
flex: 0 0 auto;  /* Do NOT allow them to grow or shrink */
min-width: 0;
  text-align: left;
  position: relative;
  display: block;
     border: none !important;
  border-bottom: none !important;
    margin-right: 5px;
}
.nav-list > li > a {
    font-size: 15px !important;
  text-decoration: none !important;
  border: none !important;
  border-bottom: none !important;
  background: none !important;
  box-shadow: none !important;
     white-space: nowrap; /* Prevent breaking "Sell/Part-Ex" */
}
.nav-list > li:last-child {
  margin-right: 0;
}
.nav-list > li > a {
  white-space: nowrap; /* Prevent breaking "Sell/Part-Ex" */
}
    
     /* Fix for .menu-item-with-toggle > a */
  .menu-item-with-toggle > a {
    font-size: 15px !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    color: white !important;
    box-shadow: none !important;
    white-space: nowrap;
    padding: 4px 4px !important;
    display: block;
  }
  /* Optional: Align the arrow visually with text */
  .submenu-toggle {
    font-size: 15px !important;
    margin-left: 2px;
    color: white !important;
    background: none !important;
    border: none !important;
    padding: 0 2px;
    vertical-align: middle;
  }
.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s;
  background: #f4f4f4;
  border: 1px solid rgba(169,163,158,0.2);
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  white-space: nowrap;
  z-index: 10;
}
/* Submenu links: no underline, except on hover if desired */
.submenu li a {
  text-decoration: none !important;
  border: none !important;
  border-bottom: none !important;
  background: none;
  color: #000;
    padding: 10px;
}
.submenu li a:hover {
  background: #1f5a97;
  color: #fff;
  text-decoration: none !important;
}
.nav-list > li:hover > .submenu {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
/* Wrapper should behave inline */
.search-toggle-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
}

/* Hide icon on desktop, show search */
.search-icon-only {
  display: none;
}

/* Default: full search bar shown */
.search-box {
  display: flex;
  position: relative;
  width: 100%;
}


 .gridContainer-footer {
    flex-wrap: wrap !important;
  }
  .footer-left, .footer-middle {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    min-width: 240px;
    box-sizing: border-box;
  }
  .footer-right {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-top: 20px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  .footer-right .footer_table,
  .footer-right .recent-products {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  .footer-right > #media {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    margin: 20px auto 0 !important;
  }
  .footer-right > #media a {
    margin: 0 8px !important;
  }
  #footer_map iframe {
    max-width: 100% !important;
    min-width: 200px !important;
    width: 95% !important;
  }
}



/* ===== MOBILE (320px–480px) ===== */
@media only screen and (min-width: 320px) and (max-width: 480px) {
 /* when the hamburger is clicked */
  .navbar.open .nav-list {
    display: flex !important;        /* you already have this */
    position: fixed !important;      /* override the static */
    top: 0 !important;               /* pin to top of viewport */
    left: 0 !important;              /* pin to left */
    width: 100% !important;          /* full width */
    height: 100vh !important;        /* full height */
    z-index: 10002 !important;       /* above header (#split is 110, menu-bar is 200) */
    overflow-y: auto !important;     /* scroll if it's long */
    background: #fff !important;     /* or whatever overlay bg you like */
  }
    /* Hamburger visible */
  .menu-toggle {
    display: flex !important;
    flex-direction: column;
    cursor: pointer;
    z-index: 10001;
       background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 5px !important;
  margin: 0 !important;
  }
    /* Aligns menu item left, arrow right, all in one row */
  .menu-item-with-toggle {
 display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100%;
    padding: 14px 0 14px 16px;
    box-sizing: border-box;
    background: none;
  }
   .menu-item-with-toggle > a {
  flex: 1 1 auto;
    text-align: left;
    color: #222 !important;
    text-decoration: none !important;
    font-size: 22px !important;
    white-space: nowrap;
    background: none;
  } 

.menu-close-li {
  display: flex !important;
  justify-content: flex-end !important;   /* aligns button right */
  align-items: center !important;
  border-bottom: none !important;
  background: none !important;
  padding: 0 !important;
    flex: 0 0 auto !important;
    height: 44px !important;
}
      .nav-list > .menu-close-li {
    display: flex !important;
  }

.menu-close {
  display: block !important;
  position: static !important;
  margin: 8px 16px 8px 0 !important;
  font-size: 32px !important;
  color: #222 !important;
  background: none !important;
  border: none !important;
  width: 44px !important;
  height: 44px !important;
  text-align: center !important;
  line-height: 44px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  border-radius: 50% !important;
}
  .submenu-toggle {
   display: inline-block !important;
    font-size: 22px;
    color: #222 !important;
    background: none !important;
    border: none !important;
    margin-left: 12px;
    cursor: pointer;
    align-self: center;
    position: static !important;
    width: 32px;
    height: 32px;
    text-align: center;
    padding: 0;
  }
  /* Mobile menu overlay */
  .nav-list {
display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    position: static !important;   /* <--- THIS IS KEY! */
    background: #fff !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.05); /* optional */
    border-bottom: 1px solid #eee; /* optional */
  }
    /* Items WITHOUT dropdowns */
  .nav-list > li:not(.has-submenu) > a {
    display: block;
    padding: 14px 0 14px 16px;
    font-size: 22px !important;
    color: #222 !important;
    text-align: left;
    text-decoration: none !important;
    white-space: nowrap;
    background: none;
  }
  .navbar.open .nav-list {
    display: flex !important;
   }
   /* For standard direct <a> links: */
  .navbar.open .nav-list > li > a {
    color: #222 !important;
  }
     .nav-list > li:not(.has-submenu) .submenu-toggle { display: none !important; }
    
  /* For <a> inside a .menu-item-with-toggle: */
  .navbar.open .nav-list > li > .menu-item-with-toggle > a {
    color: #222 !important;
  }
  /* For submenu toggles: */
  .navbar.open .submenu-toggle {
    color: #222 !important;
  }
  /* For single (non-dropdown) items, make them look the same */
  .nav-list > li > a:not(:only-child) {
    display: block;
    padding: 14px 0 14px 6px;
    font-size: 22px !important;
    color: #222 !important;
    text-align: left;
    text-decoration: none !important;
    white-space: nowrap;
    background: none;
  }  
    
 .nav-list > li:not(.menu-close-li) {
    display: block !important;
    text-align: left !important;
    position: relative !important;
    padding: 0 !important;
    border-bottom: 1px solid #ddd !important;
    background: none !important;
       flex: 0 0 auto !important;
  height: auto !important;
  }
/* Hide normal arrow when open, show cross */
.menu-item-with-toggle .submenu-toggle {
  /* Default: arrow */
  font-size: 22px;
  color: #222;
  background: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  position: relative;
  padding: 0;
  margin-left: 12px;
  transition: color 0.2s;
}


.has-submenu.open .menu-item-with-toggle .submenu-toggle::before {
   content: "×";
  font-size: 22px;
  color: #222;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: right;
  line-height: 32px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
}
/* Hide the › text when open */
.has-submenu.open .menu-item-with-toggle .submenu-toggle {
  /* Hide the button's original › character */
      color: #222 !important;
  color: transparent !important;
     position: fixed !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 10003 !important;
}


     /* Ensure arrow is visible and clickable */
  .menu-item-with-toggle > .submenu-toggle {
    pointer-events: auto;
  }
     /* Fix arrow alignment for touch */
  .submenu-toggle:active,
  .submenu-toggle:focus {
    outline: 2px solid #2872bd;
    background: #f0f4fa;
  }
     /* Submenu links: dark, full width, no underline */
  .submenu li a {
    color: #222 !important;
    font-size: 18px !important;
    padding: 10px 0;
    display: block;
    text-decoration: none !important;
    background: none;
  }
     .submenu li a:hover {
    background: #f0f4fa;
    color: #2872bd !important;
  }
 /* make the submenu fill the viewport when its parent has .open */
  .has-submenu.open .submenu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    padding-top: 60px;           /* if you need to clear your header */
    background: #fff !important;
    z-index: 10002 !important;   /* above everything else */
    display: flex !important;
    flex-direction: column;
    overflow-y: auto !important;
  }

  /* reuse the same toggle button (which turns into "×" when open)
     and pin it into the upper right of the overlay */
   .navbar.open .nav-list .submenu {
    display: none !important;
  }
  /* 2) full-screen overlay for the one under the open <li> */
  .navbar.open .has-submenu.open > .submenu {
   display: block          !important;
    position: fixed         !important;
    top: 0                  !important;
    left: 0                 !important;
    width: 100%             !important;
    height: 100vh           !important;
    margin: 0               !important;
    padding-top: 60px       !important;
    background: #fff        !important;
    z-index: 10002          !important;
    overflow-y: auto        !important;
    white-space: normal     !important; /* reset any global overrides */
  }
      /* 2) make each submenu item fill width and look like your mobile nav links */
  .navbar.open .has-submenu.open > .submenu li {
     display: block          !important;
    list-style: none        !important;
    border-bottom: 1px solid #ddd !important; /* divider */
  }
  .navbar.open .has-submenu.open > .submenu li + li {
    border-top: 1px solid #ddd!important; /* subtle divider */
  }
  .navbar.open .has-submenu.open > .submenu li a {
   display: block          !important;
    width: 100%             !important;
    padding: 14px 16px      !important; /* same as main nav */
    font-size: 22px         !important;
    color: #222             !important;
    text-decoration: none   !important;
    white-space: nowrap     !important; /* prevent "All Digital Pianos" splitting */
    overflow: hidden        !important;
    text-overflow: ellipsis !important;
  }

  /* 3) pin the "×" toggle */
  .navbar.open
  .has-submenu.open
  .submenu-toggle {
 position: fixed         !important;
    top: 16px               !important;
    right: 16px             !important;
    z-index: 10003          !important;
    color: transparent !important;       /* this makes the "›" invisible */
    font-size: 0     !important;         /* collapse any leftover text space */
  }
     /* Inject and style a big "×" */
  .navbar.open .has-submenu.open .submenu-toggle::before {
    content: "×"           !important;
    font-size: 22px        !important;  /* match your other icons/text */
    color: #222            !important;
    position: static       !important;  /* let it flow normally in your fixed corner */
    line-height: 1         !important;
    text-indent: 0         !important;
  }

    
 #header_top {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 5px 10px;
  }

#header-left {
  flex: 0 0 auto !important;
  max-width: 33% !important;
  padding-left: 2px !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: center !important;
}

#header-left img {
  max-width: 150px !important; /* was 70-75 before */
  height: auto !important;
}

#established {
    display:none;
  font-size: 13px !important;  /* was 12 */
  padding-left: 2px;
  margin-top: 4px;
  color: #444;
}
    

#header-middle {
  flex: 0 0 auto !important;
  width: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 6px !important;
}


#header-right {
  flex: 0 0 auto !important;
  max-width: 33% !important;
  padding-right: 10px !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-end !important;
  justify-content: center !important;
  text-align: right !important;
}

#phone {
  font-size: 20px !important;
  font-weight: normal !important;
  line-height: 1.2;
  margin-bottom: 4px;
  white-space: nowrap;
}

#basket-counter {
  font-size: 13px !important;
  padding: 6px 10px !important;
  background-color: #2872bd;
  color: white;
  white-space: nowrap;
  width: auto !important;
  text-align: center;
}

.search-icon-only {
  display: inline-block !important;
  cursor: pointer;
  padding: 4px;
}

.search-icon-only img {
  width: 22px !important;
  height: 22px !important;
  display: block;
}

  /* Mobile: full-width dropdown with side gutters */
.search-box {
  display: none;
  position: fixed;
     background: white;
  border-top: 2px solid #2872bd;
  z-index: 999;
 }

.search-box.active {
  display: block;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
  .search-box form {
    width: 100%;
    display: flex;
    justify-content: center;
    }

  .search-box input {
    width: 75%;
    padding: 4px;
    font-size: 16px;
border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;  /* if you also want a clear background */
  }

  .search-box button {
    background: none;
    border: none;
    cursor: pointer;
  }

  .search-box button img {
    width: 20px;
    height: 20px;
  }
/* Full-width search bar dropdown under entire header */
#mobile-search-box {
   display: none;
  position: relative;    /* no longer fixed */
  width: 96%;
  background: white;
  border-bottom: 2px solid #2872bd;
  box-sizing: border-box;
    margin-bottom: 5px;

}

#mobile-search-box.active {
 display: block;
  justify-content: center;
  align-items: center;
}

#mobile-search-box input {
  width: 80%;
  padding: 8px;
  font-size: 16px;
}

#mobile-search-box button {
  background: none;
  border: none;
  cursor: pointer;
}

#mobile-search-box button img {
  width: 20px;
  height: 20px;
}

  /* Footer sections stack vertically */
  .gridContainer-footer {
    flex-direction: column !important;
    align-items: center !important;
  }

  .footer-left,
  .footer-middle,
  .footer-right {
    width: 100% !important;
    text-align: left !important;
  }
  .footer-left {
    align-self: stretch !important;  /* takes full width despite the parent's centering */
    width: 100% !important;
  }  

  #footer_map iframe {
    display: block;
    margin: 0 auto !important;
    width: 90% !important;
  }

  .footer-right {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-top: 20px !important;
    flex-wrap: wrap !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .footer-right .footer_table,
  .footer-right .recent-products {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 10px !important;
  }

  .footer-right > #media {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin: 20px auto 0 !important;
  }

  .footer-right > #media a {
    margin: 0 8px !important;
  }

  .footer-right table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    margin-bottom: 10px;
  }

  .footer-right table td {
    padding: 4px 6px !important;
    vertical-align: top !important;
  }
    /* Center the Visit Keysound block on mobile */
.footer-middle {
  text-align: center !important;
  align-items: center !important;  /* if it's a flex container */
}
}