@charset "UTF-8";

/* agps.css v3 - last updated: 2026-07-16 */

/* ==========================================================
   agps.css - ActiveGPS.co.uk
   Complete standalone stylesheet - replaces new-styles.css
   Breakpoints: 1050px (tablet), 700px (mobile)
   Colours: #2E3192 blue, #48484C dark grey
   ========================================================== */


/* ----------------------------------------------------------
   RESET / BOX MODEL
   ---------------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px !important;
  color: #424242;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  display: flow-root;
}


/* ----------------------------------------------------------
   TYPOGRAPHY
   ---------------------------------------------------------- */

h1 { font-size: 28px; font-weight: 600; color: #000; font-family: Arial; margin: 10px 0 8px 0; }
h2 { font-size: 22px; font-weight: 500; color: #000; font-family: Arial; margin: 8px 0 6px 0; }
h3 { font-size: 20px; font-weight: 500; color: #000; font-family: Arial; margin: 8px 0 6px 0; }
h4 { font-size: 20px; font-weight: 500; color: #000; font-family: Arial; margin: 8px 0 6px 0; }
h5 { font-size: 20px; font-weight: 500; color: #000; font-family: Arial; margin: 8px 0 6px 0; }
h6 { font-size: 20px; font-weight: 500; color: #000; font-family: Arial; margin: 8px 0 6px 0; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #E0E0E7;
  margin: 1em 0;
  padding: 0;
}


/* ----------------------------------------------------------
   LINKS
   ---------------------------------------------------------- */

a:link    { color: #0099ff; text-decoration: none; }
a:visited { color: #7401DF; text-decoration: none; }
a:hover   { color: #003399; text-decoration: underline; }
a:active  { color: #003399; text-decoration: none; }


/* ----------------------------------------------------------
   STYLE CLASSES (legacy typography helpers)
   ---------------------------------------------------------- */

.style1 {
  font-size: 13px;
  font-weight: 300;
  font-family: Arial;
  margin-top: 0;
  margin-bottom: 0;
}

.style3 {
}

.style8 {
  font-size: 14px;
  font-family: Arial;
  color: #666666;
  margin-top: 0;
  margin-bottom: 0;
}

.style9 {
  font-size: 20px;
  font-weight: 900;
  font-family: Arial;
  margin-top: 0;
  margin-bottom: 0;
}

.style10 {
  font-size: 15px;
  font-family: Arial;
  color: #666666;
  font-weight: 400;
  margin-top: 5px;
  margin-bottom: 0;
}

.style11 {
  font-size: 12px;
  font-family: Arial;
  color: #666666;
  margin-top: 5px;
  margin-bottom: 0;
}

.style13 {
  font-size: 19px;
  font-family: Arial;
  color: black;
  margin-top: 5px;
  margin-bottom: 0;
}

.style16 {
  font-size: 12px;
  font-family: Arial;
  color: red;
  margin-top: 5px;
  margin-bottom: 7px;
}

.style20 {
  font-size: 14px;
  font-family: Arial;
  font-weight: bold;
  color: #ffffff;
  margin-top: 0;
  margin-bottom: 8px;
}

.style22 {
  font-size: 11px;
  font-family: Arial;
  color: #a0a8c0;
  margin-top: 5px;
  margin-bottom: 0;
}


/* ----------------------------------------------------------
   UTILITY
   ---------------------------------------------------------- */

.clear   { clear: both; }
.left    { float: left; }
.right   { float: right; }
.desktop { display: block; }
.mobile  { display: none; }

.picw {
  width: 90%;
  height: auto;
}

.text-center { text-align: center; }


/* ----------------------------------------------------------
   BUY BUTTON
   ---------------------------------------------------------- */

.buybutton {
  font-family: Verdana, Arial, sans-serif;
  display: inline-block;
  background: black;
  border: 0;
  padding: 9px 20px;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

.buybutton:hover {
  text-decoration: none;
  background: grey;
}


/* ----------------------------------------------------------
   TOP STRIP: trust messages + utility links
   ---------------------------------------------------------- */

#agps-topbar {
  float: left;
  width: 100%;
  background: #1F2170;
  font-family: Arial, Helvetica, sans-serif;
}

.agps-topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  min-height: 34px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.agps-topbar-trust,
.agps-topbar-links ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.agps-topbar-trust {
  gap: 24px;
  font-size: 13px;
  font-weight: bold;
}

.agps-topbar-links ul {
  gap: 20px;
  font-size: 13px;
  font-weight: normal;
}

#agps-topbar a:link,
#agps-topbar a:visited {
  color: #fff;
  text-decoration: none;
}

#agps-topbar a:hover,
#agps-topbar a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

#agps-topbar a:focus-visible {
  outline: 2px solid #8FCBF5;
  outline-offset: 2px;
}

.agps-topbar-trust > li {
  display: flex;
  align-items: center;
}

.agps-topbar-trust a {
  display: inline-flex;
  align-items: center;
}

#agps-topbar svg {
  fill: none;
  stroke: #8FCBF5;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  margin-right: 7px;
  flex-shrink: 0;
}

.agps-tb-short {
  display: none;
}

@media (max-width: 1050px) {
  .agps-topbar-inner {
    width: 90%;
  }

  .agps-topbar-trust .agps-tb-since {
    display: none;
  }
}

@media (max-width: 700px) {
  .agps-topbar-inner {
    width: 100%;
    min-height: 34px;
    justify-content: center;
  }

  .agps-topbar-links,
  .agps-tb-delivery svg,
  .agps-tb-long {
    display: none;
  }

  .agps-tb-short {
    display: inline;
  }

  .agps-topbar-trust {
    justify-content: center;
    gap: 8px;
    font-size: 12px;
  }

  .agps-tb-delivery::before {
    content: "\00B7";
    margin-right: 8px;
    font-weight: bold;
    color: #8FCBF5;
  }
}


/* ----------------------------------------------------------
   HEADER / LOGO BAR
   ---------------------------------------------------------- */

#toppage {
  float: left;
  width: 100%;
  background: #2E3192;
  margin: 0 auto;
}

#toppage #content {
  overflow: visible;
  display: block;
}

/* ----------------------------------------------------------
   HEADER ACTIONS: phone + basket (replaces GIF images)
   ---------------------------------------------------------- */

.agps-head-actions {
  float: right;
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 10px;
  font-family: Arial, Helvetica, sans-serif;
}

.agps-head-actions a:link,
.agps-head-actions a:visited {
  color: #fff;
  text-decoration: none;
}

.agps-head-actions a:focus-visible {
  outline: 2px solid #8FCBF5;
  outline-offset: 3px;
}

.agps-head-actions svg {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.agps-head-phone {
  display: flex;
  align-items: center;
  gap: 10px;
}

.agps-head-phone svg {
  stroke: #8FCBF5;
}

.agps-head-phone-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.agps-head-phone-label {
  font-size: 12px;
  color: #BFC3F0;
}

.agps-head-phone-num {
  font-size: 22px;
  font-weight: bold;
}

.agps-head-phone:hover .agps-head-phone-num {
  text-decoration: underline;
}

.agps-head-basket {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 22px;
  box-sizing: border-box;
  font-size: 15px;
  font-weight: bold;
}

.agps-head-basket:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

@media (max-width: 700px) {
  #toppage #content {
    display: flex;
    align-items: center;
    padding: 8px 6px 8px 14px;
    box-sizing: border-box;
  }

  #toppage #content > a:has(img) {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
  }

  #toppage #content > a:has(img) img {
    width: auto;
    max-width: 100%;
    height: 40px;
  }

  .agps-head-actions {
    order: 2;
    float: none;
    margin: 0;
    gap: 0;
  }

  #toppage #navigation {
    order: 3;
    width: auto;
    background: none;
  }

  #agps-hamburger {
    padding: 0;
    width: 44px;
    height: 44px;
  }

  .agps-head-phone,
  .agps-head-basket {
    width: 44px;
    height: 44px;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 0;
  }

  .agps-head-phone svg {
    stroke: #fff;
  }

  .agps-head-actions svg {
    width: 22px;
    height: 22px;
  }

  .agps-head-phone-text,
  .agps-head-basket-text {
    display: none;
  }
}


/* ----------------------------------------------------------
   CONTENT WRAPPER
   ---------------------------------------------------------- */

#content {
  margin: auto;
  width: 100%;
  max-width: 1200px;
  padding: 10px 0 0;
}


/* ----------------------------------------------------------
   NAVIGATION CONTAINER
   ---------------------------------------------------------- */

#navigation {
  width: 100%;
  background: #2E3192;
  position: relative;
  display: flex;
  align-items: stretch;
}


/* ----------------------------------------------------------
   DESKTOP DROPDOWN NAV (#agps-nav)
   ---------------------------------------------------------- */

#agps-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  flex: 1;
  width: 100%;
}

#agps-nav > li {
  position: relative;
  flex: 1;
}

#agps-nav > li > a {
  display: block;
  color: white;
  text-decoration: none;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px !important;
  font-weight: bold;
  text-align: center;
  padding: 0 12px;
  line-height: 36px;
  white-space: nowrap;
  background-image: url(../images/navigation/line.gif);
  background-repeat: no-repeat;
  background-position: bottom right;
}

#agps-nav > li > a:hover,
#agps-nav > li:hover > a {
  background-color: #1a1d6e;
  color: white;
  text-decoration: none;
}

/* Dropdown panels */
#agps-nav > li > ul {
  display: none;
  position: absolute;
  top: 36px;
  left: 0;
  min-width: 195px;
  background: #1a1f36;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 9000;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

#agps-nav > li:hover > ul {
  display: block;
}

#agps-nav > li > ul > li > a {
  display: block;
  color: white;
  text-decoration: none;
  padding: 9px 14px;
  font-size: 13px;
  font-family: Arial, sans-serif;
  border-bottom: 1px solid #4a4a4a;
  white-space: nowrap;
}

#agps-nav > li > ul > li:last-child > a {
  border-bottom: none;
}

#agps-nav > li > ul > li > a:hover {
  background: #1a1d6e;
  color: #a8d8ff;
  text-decoration: none;
}


/* ----------------------------------------------------------
   HAMBURGER BUTTON (hidden on desktop)
   ---------------------------------------------------------- */

#agps-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 14px;
  align-self: center;
  flex-shrink: 0;
  margin-left: auto;
}

#agps-hamburger span {
  display: block;
  width: 24px;
  height: 3px;
  background: white;
  margin: 5px 0;
  border-radius: 2px;
}


/* ----------------------------------------------------------
   PAGE SECTIONS
   ---------------------------------------------------------- */

#topsection {
  float: left;
  width: 100%;
  margin: auto;
  background: white;
}

#toplsection {
  float: left;
  width: 48%;
  max-width: 600px;
}

#toprsection {
  float: left;
  width: 100%;
  min-width: 300px;
}

#pd {
  float: left;
  width: 100%;
}


/* ----------------------------------------------------------
   PAGE BODY - sidebar + main content (flex)
   ---------------------------------------------------------- */

#page-body {
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  clear: both;
  background: white;
}


/* ----------------------------------------------------------
   CATEGORY SIDEBAR
   ---------------------------------------------------------- */

#categorynav {
  width: 210px;
  flex-shrink: 0;
  padding-top: 8px;
}

#cat ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: white;
}

#cat li {
  text-align: left;
  padding: 7px 0 7px 25px;
}

#cat li:last-child {
  border-bottom: none;
}

#cat li a {
  display: block;
  color: #000;
  text-decoration: none;
}

#cat li a.active {
  background-color: white;
  color: black;
  border-bottom: 2px solid #E6E9EA;
  text-align: left;
  padding: 7px 0 15px 0;
  font-weight: 600;
}

#cat li a:hover:not(.active) {
  background-color: white;
  text-decoration: underline;
  color: black;
}


/* ----------------------------------------------------------
   MAIN CONTENT AREA
   ---------------------------------------------------------- */

#main-content {
  flex: 1;
  min-width: 0;
  padding: 0 0 0 10px;
}


/* ----------------------------------------------------------
   PRODUCT TABLE (3 columns on desktop)
   ---------------------------------------------------------- */

.product-table {
  width: 100%;
  border-collapse: collapse;
}

.product-cell {
  width: 33%;
  vertical-align: top;
  padding: 10px;
  background: white;
  text-align: center;
}

.product-cell img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.product-cell p {
  margin-top: 4px;
  margin-bottom: 4px;
}

@media (max-width: 700px) {
  .product-table,
  .product-table tr,
  .product-cell {
    display: block;
    width: 100%;
    text-align: center !important;
  }
}


/* ----------------------------------------------------------
   LEGACY PRODUCT LAYOUT
   (kept for other pages that still use #cat1 / #catimage)
   ---------------------------------------------------------- */

#cat1 {
  float: right;
  width: 80%;
  height: auto;
  margin: 10px 0 10px 10px;
}

/* Inside #main-content, #cat1 is the intro text block - must not float */
#main-content #cat1 {
  float: none;
  width: 100%;
  margin: 0 0 12px;
  overflow: hidden;
}

/* Inside #main-content, remove floats from legacy chart layout divs */
#main-content #chartlargetext {
  float: none;
  width: 100%;
}

#main-content #chartaimage, #main-content .chartaimage,
#content .chartaimage {
  float: left;
  width: 48%;
  margin: 0 1% 1em;
}

#cat2 {
  float: right;
  width: 100%;
  height: auto;
  margin: 10px 0 10px 10px;
}

#catimage {
  float: left;
  width: 30%;
}

#cattext {
  float: left;
  width: 100%;
}

#viewall  { float: left; width: 300px; }
#viewall1 { float: left; width: 300px; }
#viewall2 { float: left; width: 300px; }

#addtobasket {
  float: left;
  width: 100%;
  max-width: 600px;
}


/* ----------------------------------------------------------
   CHART / ACCESSORY LAYOUT IDs (product/accessory pages)
   ---------------------------------------------------------- */

#chartaccess {
  float: none;
  width: 100%;
  height: auto;
  margin: 10px 0;
}

/* ----------------------------------------------------------
   COMPARISON TABLE - SPEC PILLS (dash-cam-comparison.htm)
   ---------------------------------------------------------- */

.compare-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 0 0 1em;
}

.agps-fit-img {
  max-width: 100%;
  height: auto;
}

#chartaccess table.compare-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  margin: 0;
}

#chartaccess table.compare-table th,
#chartaccess table.compare-table td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
  vertical-align: middle;
}

#chartaccess table.compare-table thead th {
  background: #f0f4f8;
  vertical-align: bottom;
  min-width: 130px;
}

#chartaccess table.compare-table thead th img {
  display: block;
  width: 120px;
  height: 120px;
  margin: 0 auto 6px;
}

#chartaccess table.compare-table thead th a {
  text-decoration: none;
  color: #1a1a1a;
  font-weight: bold;
}

#chartaccess table.compare-table tbody th {
  background: #f7f7f7;
  text-align: left;
  font-weight: bold;
  white-space: nowrap;
  width: 150px;
}

#chartaccess table.compare-table thead th:first-child,
#chartaccess table.compare-table tbody th {
  position: sticky;
  left: 0;
  z-index: 2;
}

#chartaccess table.compare-table thead th:first-child {
  z-index: 3;
}

.spec-yes,
.spec-optional,
.spec-no {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: bold;
  color: #000000;
}

.spec-yes      { background: #3ADF00; }
.spec-optional { background: #E8A33D; }
.spec-no       { background: #FF0000; }

.spec-value {
  color: #333333;
}

/* Category card grids */
#chartbsection,
.chartbsection {
  grid-template-columns: repeat(3, 1fr);
}

#chartbsection.two-col,
.chartbsection.two-col {
  grid-template-columns: repeat(2, 1fr);
}

#chartbsection.four-col,
.chartbsection.four-col {
  grid-template-columns: repeat(4, 1fr);
}

#chartaimage, .chartaimage {
  float: left;
  width: 400px;
  height: auto;
  margin: 0;
}

#chartbimage {
  float: left;
  width: 160px;
  height: 340px;
  margin: 0;
  padding: 0 8px;
}

#chartbsection:not([style]) {
  float: left;
  width: 850px;
  height: auto;
  margin: 0;
  padding: 0 8px;
}

#chartbsection, .chartbsection {
  clear: both;
}

#chartlargeimage {
  float: left;
  width: 800px;
  height: auto;
  margin: 0;
}

#chartlargetext {
  float: left;
  width: 800px;
  height: auto;
  margin: 0;
}

#accessorytop {
  float: left;
  width: 80%;
  height: auto;
  margin: 10px 0 10px 10px;
}

.accessorymain {
  float: right;
  width: 850px;
  height: auto;
  margin: 10px;
}

.accessoryleft {
  float: left;
  width: 160px;
  height: 180px;
  margin: 10px;
  border: 2px solid #f1f1f1;
}

.accessoryright {
  float: left;
  width: 400px;
  height: 180px;
  margin: 10px;
  border: 2px solid #f1f1f1;
}

.accessorybasket {
  float: left;
  width: 200px;
  height: auto;
  margin: 10px;
}


/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */

/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */

#div1f {
  background-color: #2E3192;
  padding: 36px 0 0 0;
  margin-top: 20px;
  clear: both;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 0 24px 28px 24px;
}

.footer-col-head {
  font-size: 11px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 12px 0;
}

.footlink {
  font-size: 13px;
  font-family: Arial, sans-serif;
  line-height: 22px;
}

.footlink ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footlink li {
  padding: 0;
}

#div1f .footlink ul li a,
#div1f .footlink ul li a:link,
#div1f .footlink ul li a:visited {
  color: #c8cfe0;
  text-decoration: none;
}

#div1f .footlink ul li a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.footer-tel-label {
  font-size: 11px;
  font-family: Arial, sans-serif;
  color: #b8bde8;
  margin: 0 0 4px 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.footer-tel {
  font-size: 20px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  color: #4fa3e0;
  margin: 0 0 4px 0;
}

.footer-tel a {
  color: #4fa3e0;
  text-decoration: none;
}

.footer-tel a:hover {
  color: #ffffff;
}

.footer-hours {
  font-size: 12px;
  font-family: Arial, sans-serif;
  color: #b8bde8;
  margin: 0 0 16px 0;
}

.footer-social {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #3d44a8;
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
  transition: border-color 0.2s, color 0.2s;
}

.footer-social a:hover {
  border-color: #ffffff;
  color: #ffffff;
}

.footer-divider {
  border: none;
  border-top: 1px solid #3d44a8;
  margin: 0 24px;
}

.footer-bottom {
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-trust {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  min-width: 220px;
}

.footer-trust-item {
  font-size: 12px;
  font-family: Arial, sans-serif;
  color: #c8cfe0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.footer-trust-badge {
  background: #3d44a8;
  color: #a0a8c0;
  font-size: 9px;
  font-family: Arial, sans-serif;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-copyright {
  width: 100%;
  border-top: 1px solid #3d44a8;
  padding: 14px 24px 16px 24px;
  font-size: 11px;
  font-family: Arial, sans-serif;
  color: #b8bde8;
  text-align: center;
}

.footer-mobile-bottom {
  display: none;
}

#div2f {
  background: transparent;
}

#div3f {
  background: transparent;
}

#div4f {
  background: transparent;
}

#div5f {
  background: transparent;
}

#sitemap {
  width: 100%;
  float: left;
  margin: 0 auto;
  padding: 15px;
  color: black;
}

#sitemap3 {
  width: 280px;
  float: left;
  margin: 0 auto;
  padding: 15px;
  color: black;
}


/* ----------------------------------------------------------
   MOBILE SLIDE PANEL
   ---------------------------------------------------------- */

/* Overlay */
#agps-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
}

#agps-overlay.panel-open {
  display: block;
}

/* Panel container */
#agps-mobile-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100%;
  background: #2E3192;
  z-index: 300;
  overflow: hidden;
  transform: translateX(-100%);
  transition: transform 0.28s ease;
}

#agps-mobile-panel.panel-open {
  transform: translateX(0);
}

/* Bullet / box-model override protection */
#agps-mobile-panel *,
.panel-sub * {
  box-sizing: border-box;
}

#agps-mobile-panel ul,
.panel-sub ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#agps-mobile-panel li,
.panel-sub li {
  list-style: none !important;
}

/* Force white on ALL links inside panel — overrides global a:link/a:visited */
#agps-mobile-panel a,
#agps-mobile-panel a:link,
#agps-mobile-panel a:visited,
#agps-mobile-panel a:hover,
#agps-mobile-panel a:active,
.panel-sub a,
.panel-sub a:link,
.panel-sub a:visited,
.panel-sub a:hover,
.panel-sub a:active {
  color: white !important;
  text-decoration: none !important;
}

/* Panel header */
.panel-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 13px 16px !important;
  background: #1e2278 !important;
  border-bottom: 1px solid #3d43a8 !important;
  color: white !important;
}

.panel-header span {
  color: white !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: bold !important;
}

.panel-logo {
  color: white !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: bold !important;
  font-size: 16px !important;
  text-decoration: none !important;
}

.panel-logo:visited,
.panel-logo:hover {
  color: white !important;
  text-decoration: none !important;
}

.panel-close {
  background: none !important;
  border: none !important;
  color: white !important;
  font-size: 26px !important;
  cursor: pointer;
  padding: 0 !important;
  line-height: 1;
}

/* Primary nav list — covers both panel-nav and panel-main */
.panel-nav,
.panel-main {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-y: auto;
  max-height: calc(100% - 52px);
}

.panel-nav > li,
.panel-main > li {
  display: flex !important;
  list-style: none !important;
  align-items: stretch;
  border-bottom: 1px solid #3d43a8;
  padding: 0 !important;
  margin: 0 !important;
}

/* panel-item is flex wrapper used in panel-main pages */
.panel-item {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
}

/* Links — panel-nav direct child */
.panel-nav > li > a {
  flex: 1 !important;
  display: block !important;
  padding: 14px 4px 14px 16px !important;
  color: white !important;
  text-decoration: none !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
}

/* Links — panel-main via panel-item wrapper */
.panel-item > a {
  flex: 1 !important;
  display: block !important;
  padding: 14px 4px 14px 16px !important;
  color: white !important;
  text-decoration: none !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
}

.panel-nav > li > a:link,
.panel-nav > li > a:visited,
.panel-item > a:link,
.panel-item > a:visited {
  color: white !important;
  text-decoration: none !important;
}

.panel-nav > li > a:hover,
.panel-item > a:hover {
  background: #1e2278 !important;
  color: white !important;
  text-decoration: none !important;
}

/* Arrow button */
.panel-arrow {
  background: none !important;
  border: none !important;
  border-left: 1px solid #3d43a8 !important;
  color: white !important;
  font-size: 20px !important;
  cursor: pointer;
  padding: 0 16px !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
}

.panel-arrow:hover {
  background: #1e2278 !important;
}

/* Sub-panels */
.panel-sub {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #2E3192;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  overflow-y: auto;
}

.panel-sub.sub-open {
  transform: translateX(0);
}

/* Sub-panel header */
.sub-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  background: #1e2278;
  border-bottom: 1px solid #3d43a8;
}

.sub-back {
  background: none;
  border: none;
  color: white;
  font-size: 22px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}

.sub-header span {
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: bold;
}

/* Sub-panel links */
.panel-sub ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.panel-sub ul li {
  list-style: none !important;
  border-bottom: 1px solid #3d43a8;
}

.panel-sub ul li a {
  display: block !important;
  padding: 13px 16px !important;
  color: white !important;
  text-decoration: none !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
}

.panel-sub ul li a:visited {
  color: white !important;
}

.panel-sub ul li a:hover {
  background: #1e2278 !important;
  color: white !important;
  text-decoration: none !important;
}


/* ----------------------------------------------------------
   COOKIE CONSENT - compact left-side tab
   ---------------------------------------------------------- */

.cc-window {
  position: fixed !important;
  bottom: 20px !important;
  left: 20px !important;
  top: auto !important;
  right: auto !important;
  width: 280px !important;
  max-width: 280px !important;
  border-radius: 6px !important;
  padding: 16px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  background: #2E3192 !important;
  border: 1px solid #1a1d6e !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  z-index: 9999 !important;
}

.cc-message {
  display: block !important;
  margin-bottom: 12px !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-family: Arial, Helvetica, sans-serif !important;
  line-height: 1.5 !important;
}

.cc-compliance {
  width: 100% !important;
  display: flex !important;
  justify-content: flex-start !important;
}

.cc-btn {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 7px 18px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-block !important;
}

.cc-dismiss {
  background: #009900 !important;
  color: #ffffff !important;
  border: none !important;
}

.cc-dismiss:hover {
  background: #007700 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

.cc-link {
  color: #adb8ff !important;
  text-decoration: underline !important;
  font-size: 11px !important;
}

.cc-link:hover {
  color: #ffffff !important;
}


/* ==========================================================
   BREAKPOINT: TABLET (max-width: 1050px)
   ========================================================== */

@media (max-width: 1050px) {

  #content {
    width: 90%;
    padding: 10px 0 0;
  }

  #agps-nav > li > a {
    padding: 0 8px;
    font-size: 12px;
  }

  /* Sidebar stays visible but slightly narrower */
  #categorynav {
    width: 190px;
  }

  #cat ul {
    width: 180px;
  }

  /* Legacy layout */
  #cat1 {
    float: left;
    width: 330px;
  }

  #catimage {
    float: left;
    width: 330px;
  }

  #chartaccess {
    width: 100%;
    margin: 10px 0;
  }

  #chartaimage, .chartaimage    { width: 350px; }
  #chartbsection  { width: 100%; }
  #chartlargeimage { display: none; }
  #chartlargetext  { width: 100%; }
  #accessorytop    { width: 100%; }

  .accessorymain {
    float: left;
    width: 340px;
    height: 400px;
  }

  .accessoryright  { width: 340px; }
  .accessoryleft   { margin: 0; }
  .accessorybasket { width: 160px; margin: 0 0 0 15px; }

  #sitemap3 { width: 270px; }

}


/* ==========================================================
   BREAKPOINT: MOBILE (max-width: 700px)
   ========================================================== */

@media (max-width: 700px) {

  #content {
    width: 100%;
    padding: 0;
  }

  /* Hide desktop nav, show hamburger */
  #agps-nav       { display: none; }
  #agps-hamburger { display: block; }

  /* Hide sidebar on mobile */
  #categorynav { display: none !important; }

  /* Padding for breadcrumb and H1; prevent content touching screen edges on new-styles.css pages */
  #topsection  { padding: 0 12px !important; }
  #toprsection { padding: 0 12px !important; }
  #cat2        { padding: 0 12px !important; }

  /* Remove side padding from main content */
  #main-content { padding: 0 8px; }

  #page-body {
    display: block;
  }

  /* Product grid: single column */
  .product-grid,
  #chartbsection,
  .chartbsection,
  #chartbsection.two-col,
  .chartbsection.two-col,
  #chartbsection.four-col,
  .chartbsection.four-col {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  #toplsection { float: left; width: 100%; }

  /* Legacy product layout */
  #cat1    { float: left; width: 100%; margin: 10px 0 10px 10px; padding: 0 12px !important; }
  #catimage { float: left; width: 100%; }
  #cattext  { float: left; width: 100%; }

  /* Chart / accessory pages */
  #chartaccess    { width: auto; margin: 10px 0; padding: 0 12px; }
  #chartaimage, .chartaimage    { width: 100%; }
  #chartlargetext { width: 100%; }

  /* Comparison table: feature-major stacking on mobile */
  #chartaccess table.compare-table,
  #chartaccess table.compare-table thead,
  #chartaccess table.compare-table tbody,
  #chartaccess table.compare-table th,
  #chartaccess table.compare-table td,
  #chartaccess table.compare-table tr {
    display: block;
    width: 100%;
  }

  #chartaccess table.compare-table thead {
    display: none;
  }

  #chartaccess table.compare-table tbody tr {
    border: 1px solid #ccc;
    margin: 0 0 12px;
  }

  #chartaccess table.compare-table tbody th {
    position: static;
    text-align: left;
    padding: 8px;
    border: none;
    border-bottom: 1px solid #ccc;
  }

  #chartaccess table.compare-table tbody td {
    text-align: right;
    padding: 6px 8px;
    border: none;
    border-bottom: 1px solid #eee;
  }

  #chartaccess table.compare-table tbody td:last-child {
    border-bottom: none;
  }

  #chartaccess table.compare-table tbody td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-align: left;
    padding-right: 8px;
  }

  .accessorymain   { float: left; width: 310px; height: 360px; margin: 10px 0; }
  .accessoryright  { width: 300px; height: auto; margin: 10px 0; }
  .accessoryleft   { width: 160px; height: 180px; margin: 0; }
  .accessorybasket { width: 140px; height: auto; margin: 0; }

  /* Desktop/mobile visibility helpers */
  .desktop { display: none; }
  .mobile  { display: inline; width: 300px; }

  /* Footer — 2 column grid on mobile */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 20px 16px 20px 16px;
  }

  .footer-grid > div:nth-child(2),
  .footer-grid > div:nth-child(4) {
    display: none;
  }

  .footer-mobile-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 16px 0 16px;
    gap: 16px;
  }

  #sitemap3 { width: 300px; }

  /* Image helpers */
  #productimage img,
  #gallery_01 img {
    border: 1px solid #e8e8e6;
  }

  .picw {
    max-width: 100%;
    height: auto;
  }

  /* Float images in body copy stack on mobile */
  img[align="left"],
  img[align="right"] {
    float: none !important;
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto 12px !important;
  }

  /* Cookie consent centred on mobile */
  .cc-window {
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    bottom: 16px !important;
    width: 88% !important;
    max-width: 340px !important;
  }

}

/* ============================================================
   CONTACT FORM STYLES
   Used by: contact-activegps.php, contactconfirmation.php
   ============================================================ */

/* Form wrapper */
.update-form {
  margin: 20px 0 24px;
}

/* Section headings within the form (e.g. "Your details", "Your message") */
.form-section-title {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: bold;
  color: #2E3192;
  margin: 20px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #2E3192;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Individual field wrapper */
.form-group {
  margin-bottom: 14px;
}

/* Labels */
.form-group label {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 4px;
}

/* Hint text below a label */
.field-hint {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #666666;
  margin-bottom: 5px;
}

/* Text inputs and select */
.form-group input[type="text"],
.form-group select {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #333333;
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 3px;
  padding: 6px 8px;
  width: 100%;
  max-width: 480px;
  box-sizing: border-box;
}

.form-group input[type="text"]:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #2E3192;
  outline: none;
  box-shadow: 0 0 0 2px rgba(46, 49, 146, 0.15);
}

/* Textarea */
.form-group textarea {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #333333;
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 3px;
  padding: 6px 8px;
  width: 100%;
  max-width: 560px;
  box-sizing: border-box;
  resize: vertical;
}

/* Submit button */
.submit-btn {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  background-color: #009900;
  border: none;
  border-radius: 3px;
  padding: 10px 28px;
  cursor: pointer;
  margin-top: 6px;
}

.submit-btn:hover {
  background-color: #007700;
}

/* Responsive: full-width inputs on narrow screens */
@media (max-width: 600px) {
  .form-group input[type="text"],
  .form-group select,
  .form-group textarea {
    max-width: 100%;
  }
}

/* ----------------------------------------------------------
   MAP CHOICE CALLOUT (City Navigator vs TOPO)
   ---------------------------------------------------------- */

.map-choice-callout {
  background: #f0f4ff;
  border-left: 4px solid #2E3192;
  border-radius: 4px;
  padding: 14px 18px;
  margin: 0 0 24px 0;
}
.map-choice-callout p {
  margin: 0;
}
.map-choice-callout p + p {
  margin-top: 10px;
}
.map-choice-callout a {
  font-weight: bold;
}

/* ----------------------------------------------------------
   MOBILE OVERFLOW FIXES (pass 2)
   ---------------------------------------------------------- */

@media (max-width: 700px) {
  #main-content #chartaimage, #main-content .chartaimage,
  #content .chartaimage {
    float: none;
    width: auto;
    margin: 0 0 1em;
  }

  #chartbsection,
  #chartbsection:not([style]) {
    display: grid;
    gap: 12px;
    float: none;
    width: auto;
    padding: 0;
  }

  /* Two columns only for the small-tile grids; other #chartbsection grids keep the single column from the 700px block above */
  #chartbsection.four-col,
  #chartbsection:not([style]) {
    grid-template-columns: 1fr 1fr;
  }

  #chartbsection #chartbimage {
    float: none;
    width: auto;
    height: auto;
    padding: 0;
  }

  #cat1 {
    margin-left: 0;
  }

  textarea {
    max-width: 100%;
    box-sizing: border-box;
  }
}


/* ==========================================================
   agps9.css additions (19th October 2026)
   Stock status badges, buy box, add-to-basket button, sticky
   mobile header, cookie revoke tab. Everything above this line
   is agps8.css unchanged. .buybutton is kept for now and is
   removed at the next stylesheet version.
   ========================================================== */

/* ----------------------------------------------------------
   STOCK STATUS BADGES
   ---------------------------------------------------------- */

.stock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  border: 1px solid;
  font: bold 13px/1.4 Arial, sans-serif;
  white-space: nowrap;
}

.stock svg { flex: 0 0 auto; }

.stock-in      { background: #EAF3DE; color: #27500A; border-color: #97C459; }
.stock-low     { background: #FAEEDA; color: #633806; border-color: #EF9F27; }
.stock-out     { background: #FCEBEB; color: #791F1F; border-color: #F09595; }
.stock-pre     { background: #E6F1FB; color: #0C447C; border-color: #85B7EB; }
.stock-special { background: #EEEDFE; color: #3C3489; border-color: #AFA9EC; }
.stock-disc    { background: #F1EFE8; color: #444441; border-color: #B4B2A9; }

/* ----------------------------------------------------------
   BUY BOX (price, badge, quantity, Add to basket)
   ---------------------------------------------------------- */

.buybox {
  clear: both;
  width: 100%;
  max-width: 600px;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid #c9cce6;
  border-radius: 8px;
  background: #fff;
}

.buybox-title {
  margin: 0 0 8px;
  font: 900 18px/1.3 Arial, sans-serif;
}

.buybox-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 12px;
}

.buybox-price {
  font: 900 22px/1.2 Arial, sans-serif;
  color: #1a1d6e;
}

.buybox-note {
  flex-basis: 100%;
  margin: 0 0 12px;
  font: 12px/1.4 Arial, sans-serif;
  color: #666;
}

.buybox-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.buybox-form label {
  font: bold 14px Arial, sans-serif;
}

.buybox-qty {
  width: 64px;
  min-height: 44px;
  padding: 8px 4px 8px 8px;
  font: 16px Arial, sans-serif;
  text-align: center;
  border: 1px solid #8a8fb8;
  border-radius: 6px;
}

.buybox-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 24px;
  font: bold 16px Arial, sans-serif;
  color: #fff;
  background: #2E3192;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.buybox-btn svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.buybox-btn:hover { background: #1a1d6e; }

.buybox-btn:focus-visible,
.buybox-qty:focus-visible {
  outline: 3px solid #1a1d6e;
  outline-offset: 2px;
}

/* ----------------------------------------------------------
   MOBILE (700px): buy box, sticky header
   ---------------------------------------------------------- */

@media (max-width: 700px) {
  .buybox-form { flex-direction: row; }
  .buybox-qty  { width: 72px; }
  .buybox-btn  { width: 100%; }

  /* agps8.css sets html, body to height: 100%, so the body box ends after
     one screen and would release the sticky header. */
  html, body { height: auto; }

  /* Pin the logo row only. #toppage holds the logo, phone, basket and
     hamburger; #agps-topbar sits outside it and scrolls away. Pinned
     height is 63px at 375px wide, matched by scroll-padding-top. */
  html { scroll-padding-top: 63px; }

  #toppage {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid #1a1d6e;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  }
}

/* Compact button for add-to-basket forms that sit on one line inside
   accessories lists (no buy box). Stays its natural width on mobile. */
.buybox-btn.buybox-btn-inline {
  min-height: 44px;
  padding: 8px 10px;
  gap: 6px;
  font-size: 14px;
  white-space: nowrap;
}

.buybox-btn.buybox-btn-inline svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 700px) {
  .buybox-btn.buybox-btn-inline { width: auto; }
}

/* ----------------------------------------------------------
   MOBILE (700px): centre the main product image and thumbnails
   ---------------------------------------------------------- */

@media (max-width: 700px) {
  #productimage { text-align: center; }

  #productimage img.picw {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  #gallery_01 { text-align: center; }
}

/* ==========================================================
   agps11.css additions (24th October 2026)
   Cookie banner header and link line.
   agps12.css (25th October 2026): the floating "Cookie settings"
   tab is removed: cookieconsent forces it on for the opt-in type, so consent4.js deletes the element and .cc-revoke is hidden here as a fallback.
   Cookie settings now live in a button on cookies-activegps.htm.
   Everything above this block is agps10.css unchanged, minus the
   .cc-revoke rule.
   ========================================================== */

.cc-header {
  display: block !important;
  margin-bottom: 6px !important;
  color: #ffffff !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

.cc-message {
  font-size: 14px !important;
}

.cc-link {
  display: block !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  opacity: 1 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

.cookie-settings-btn {
  display: inline-block;
  min-height: 44px;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background: #009900;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}

.cookie-settings-btn:hover {
  background: #007700;
}

.cookie-settings-btn:focus-visible {
  outline: 3px solid #1a1d6e;
  outline-offset: 2px;
}

.cookie-settings-btn[hidden] {
  display: none;
}

.cc-revoke {
  display: none !important;
}


/* ==========================================================
   Footer additions (26th October 2026)
   Footer links that are hidden at 700px and below in the
   Customer service column (Privacy policy, Cookies) are repeated
   in the ActiveGPS column for mobile only.
   This file is agps-site.css, the permanent site stylesheet: edit it in place.
   It is agps12.css plus this block. Revalidation is handled by web.config.
   ========================================================== */

.footer-grid .footer-mobile-only {
  display: none;
}

@media (max-width: 700px) {
  .footer-grid .footer-mobile-only {
    display: list-item;
  }
}