:root {
  --cassiopeia-color-primary: #0059B8;
  --cassiopeia-color-link: #30638d;
  --link-color: #30638d;
  --link-color-rgb: 48, 99, 141;
  --cassiopeia-color-hover: #0059B8;
  --link-hover-color: #0059B8;
  --link-hover-color-rgb: 149, 75, 86;
}

.default_cart_module_text {
  color: #ffFFFF;
}

h1, .h1 {
  color: #ff6600;
}

/* On the home page, set the background colour of the header to transparent and make it fixed */
.ishome .container-header {
  background-color: transparent;
  color: #ffFFFF;
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  transition: all 0.5s;
}

/* Set the background colour of the header on regular pages and when the page has scrolled */
.container-header,
.container-header.scrolled {
  background-color: #0059B8;
  background-image: unset;
}

/* Remove the margin from the module containing the logo */
.mod-custom p {
  margin: 0;
}

/* Set the large banner to take up the full height of the viewport */
.container-banner .banner-overlay {
  height: 100vh;
}

/* Move back to top button from right to left */
.back-to-top-link {
  z-index: 10000;
  color: var(--cassiopeia-color-primary, #112855);
  pointer-events: all;
  background-color: var(--white, #fff);
  border: 1px solid var(--cassiopeia-color-primary, #112855);
  opacity: 0;
  inset-inline-end: 1rem;
  border-radius: .25rem;
  padding: .5em;
  transition: opacity .2s ease-in;
  position: fixed;
  right: 200px; /* Adjust this value to your preference */
}

.back-to-top-link.visible {
  opacity: 1;
}

.back-to-top-link:hover, .back-to-top-link:focus {
  color: var(--white, #fff);
  background-color: var(--cassiopeia-color-hover);
  border-color: var(--white, #fff);
}

/* The Modal (minor tweaks) - most of the CSS exists in Cassiopeia template */
.modal {
  top: 50%;                             /* Centre vertically on screen */
  left: 50%;                            /* Centre horizontally on screen */
  width: auto;
  height: auto;
  overflow: auto;                       /* Enable scroll if needed */
  transform: translate(-50%, -50%);     /* Position the modal in centre of screen */
}

.modal-header {
  border: none;
  display: inline;
}

.modal-body {
  padding: 2px 16px;
}

/* The Close Button (minor tweaks) */
.close {
  float: inline-end;
  margin: 10px -23px 0;
  padding: 3px 4.2px;
  line-height: 0.8em;
  transform: translate(-50%, -50%);
}

.close:hover, .close:focus {
  text-decoration: none;
  cursor: pointer;
  background-color: #dfdfdf;
  border-radius: 10px;
}

/* Draw the fullscreen icon with inline SVG (no PNG files required) */
.leaflet-control-fullscreen a {
  background: no-repeat center/18px 18px
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='%23000' d='M9 3H3v6h2V5h4V3zm12 0h-6v2h4v4h2V3zM3 21h6v-2H5v-4H3v6zm18-6h-2v4h-4v2h6v-6z'/>\
</svg>");
}

@media (prefers-color-scheme: dark) {
  .leaflet-control-fullscreen a {
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='%23fff' d='M9 3H3v6h2V5h4V3zm12 0h-6v2h4v4h2V3zM3 21h6v-2H5v-4H3v6zm18-6h-2v4h-4v2h6v-6z'/>\
</svg>");
  }
}

/* Bulletproof Ice Pop Grid Styling */
.ice-pop-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important; /* Always 4 across on desktop */
  gap: 20px !important;
  text-align: center !important;
}

@media (max-width: 1024px) {
  .ice-pop-grid {
    grid-template-columns: repeat(2, 1fr) !important; /* 2 across on tablets */
  }
}

@media (max-width: 600px) {
  .ice-pop-grid {
    grid-template-columns: 1fr !important; /* 1 across on phones */
  }
}

.ice-pop-grid .product {
  border: 1px solid #ddd !important;
  border-radius: 10px !important;
  padding: 10px !important;
  background: #fff !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

.ice-pop-grid .product img {
  height: 125px !important;
  width: auto !important;
  display: block !important;
  margin: 0 auto 10px auto !important;
}

.ice-pop-grid .product-title {
  font-weight: bold !important;
  font-size: 1.1rem !important;
  margin-bottom: 5px !important;
}

.ice-pop-grid .product-title a {
  text-decoration: none !important;
  color: inherit !important;
}

.ice-pop-grid .product-title a:hover {
  color: #e67e22 !important;
}

.ice-pop-grid .add-to-cart {
  margin-top: 10px !important;
}

/* ====== MOBILE STYLES (max-width: 768px) ====== */
@media (max-width: 768px) {
  /* .ishome .container-header, — only required if using the full screen image on the home page */
  .container-header {
      position: fixed !important;
      top: auto;
      bottom: 0;
      width: 100%;
      padding: 0;
      background-color: #0059B8;
      background-image: unset;
  }

  .navbar-collapse {
      position: fixed;
      bottom: 60px;
      left: 0;
      padding-left: 15px;
      padding-right: 15px;
      padding-bottom: 15px;
      width: 100%;
      background: #0059B8;
      height: auto;
      overflow: auto;
  }

  .navbar-collapse.collapsing {
    height: auto;
    transition: left 0.3s ease;
    left: -100%;
  }

  .navbar-collapse.show {
    left: 0;
    transition: left 0.3s ease-in;
  }

  .navbar-toggler {
    position: fixed;
    bottom: 20px;
    z-index: 9999;
    display: block;
    width: 70px;
    height: 70px;
    background-color: #0059B8;
    border: 4px solid #ffff00 !important;
    border-radius: 40px;
    right: 10px;
  }

  .container-header img {
    max-width: 75%;
  }
}
/* Click-to-Load Map widget - replaces ZHOSMMap component */
.click-to-load-map { max-width: 100%; margin: 0; padding: 0; }
.ctlm-address { margin-bottom: 10px; font-size: 15px; line-height: 1.5; }
.ctlm-placeholder {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 20px;
  text-align: center;
  background: #f7f7f7;
}
.ctlm-note { font-size: 13px; color: #666; margin: 8px 0 14px; }
.ctlm-button {
  background: #0059B8;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}
.ctlm-button:hover { background: #003d80; }
.ctlm-frame-container iframe {
  width: 100%;
  height: 300px;
  border: 0;
  border-radius: 6px;
}

/* JBCookies modal scroll fix - Bootstrap modal has no built-in
   scroll for tall content, so the Save button can end up hidden
   below the viewport. This forces the body to scroll internally
   while keeping the modal itself capped to the visible screen height. */
.modal-dialog {
  max-height: calc(98vh - 3.5rem);
}
.modal-content {
  max-height: calc(98vh - 3.5rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.modal-body {
  overflow-y: auto;
}