.navbar {
  display: flex;
  align-items: center;
  /* Ensure navbar items are centered vertically */
  margin: 0;
  /* Remove any margin that could affect alignment */
  padding: 0;
  /* Remove any padding that could affect alignment */
}
.navbar-nav {
  display: flex;
  align-items: center;
  /* Ensure nav items are centered vertically */
  padding: 0;
  /* Remove any padding that could affect alignment */
}
.font-license-plate {
  /* Font for license plate */
  font-family: Kenteken;
}
@font-face {
  font-family: 'Kenteken';
  src: url('../../../fonts/Kenteken.ttf') format('truetype');
}
.header-height {
  height: 70px;
}
.header-offset {
  top: 70px !important;
}
.navbar-offset {
  top: 134px !important;
}
.content-offset {
  padding-top: 134px !important;
}
/* General styles for Navbar */
#navbar-container {
  transition: transform 0.3s ease, opacity 0.3s ease;
  position: fixed;
  /* Fixed for sliding behavior */
  left: 0;
  top: 0;
  height: 100%;
  width: 16rem;
  /* Adjust width as needed */
  background-color: #fff;
  z-index: 49;
  overflow-y: auto;
}
/* Navbar is hidden by default on smaller screens */
#navbar-container.collapsed {
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
  /* Prevent interaction when collapsed */
}
/* Navbar is visible */
#navbar-container.expanded {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
/* Overlay for smaller screens */
#navbar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 48;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#navbar-overlay.active {
  display: block;
  opacity: 1;
}
.right-offset {
  padding-right: var(--right-offset, 24rem) !important;
  transition: padding-right 0.3s ease;
}
.left-offset {
  padding-left: var(--left-offset, 16rem) !important;
  transition: padding-left 0.3s ease;
}
#legacy-sale-page a {
  color: #3b82f6;
  /* Tailwind color for blue-500 */
  font-weight: 600;
  /* Tailwind font-semibold */
}
#legacy-sale-page a:hover {
  color: #2563eb;
  /* Tailwind color for blue-600 */
  text-decoration: underline;
}
#cart-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 46;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#cart-overlay.active {
  display: block;
  opacity: 1;
}
#cart-container {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  background-color: white;
  z-index: 47;
  transition: transform 0.3s ease-in-out;
  width: 24rem;
}
/* Navbar is hidden by default on smaller screens */
#cart-container.collapsed {
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  /* Prevent interaction when collapsed */
}
/* Navbar is visible */
#cart-container.expanded {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
.translate-x-full {
  transform: translateX(100%);
}
.translate-x-0 {
  transform: translateX(0);
}
html,
body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}
html {
  background-color: #f1f1f1;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.icon-container .commerce-icon {
  max-width: 100% !important;
  position: absolute;
  top: 25px;
  left: 105px;
  transform: rotate(-25deg);
  -webkit-transform: rotate(-15deg);
}
.depot-status {
  font-weight: 500;
}
.depot-local {
  color: #22C55E;
}
.depot-local-bg {
  background-color: #22C55E;
}
.depot-local-bg:hover {
  background-color: #16A34A;
}
.depot-first-route-non-local {
  color: #10BDDB;
}
.depot-first-route-non-local-bg {
  background-color: #10BDDB;
}
.depot-first-route-non-local-bg:hover {
  background-color: #0EAAC5;
}
.depot-branch {
  color: #ebba25;
}
.depot-branch-bg {
  background-color: #ebba25;
}
.depot-branch-bg:hover {
  background-color: #d1a320;
}
.depot-external {
  color: #ebba25;
}
.depot-external-bg {
  background-color: #ebba25;
}
.depot-external-bg:hover {
  background-color: #d1a320;
}
.depot-unknown {
  color: #F97316;
}
.depot-unknown-bg {
  background-color: #F97316;
}
.depot-unknown-bg:hover {
  background-color: #D75A0A;
  /* custom deep orange */
}
.hide-artlist {
  display: none;
}
.flag {
  display: inline-block;
  position: relative;
  color: #fff;
  line-height: 20px;
  padding: 0 5px;
}
.flag::before {
  content: "";
  position: absolute;
  top: 0;
  right: -10px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid;
}
.flag-A {
  background-color: #33a357;
  /* Green */
}
.flag-A::before {
  border-left-color: #33a357;
}
.flag-B {
  background-color: #79b752;
}
.flag-B::before {
  border-left-color: #79b752;
}
.flag-C {
  background-color: #FFC107;
  /* Amber */
}
.flag-C::before {
  border-left-color: #FFC107;
}
.flag-D {
  background-color: #FF9800;
  /* Orange */
}
.flag-D::before {
  border-left-color: #FF9800;
}
.flag-E {
  background-color: #F44336;
  /* Red */
}
.flag-E::before {
  border-left-color: #F44336;
}
.flag-F {
  background-color: #F44336;
  /* Red */
}
.flag-F::before {
  background-color: #F44336;
  /* Red */
}
.shipping-icon-container {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
}
.shipping-icon {
  color: white;
  font-size: 16px !important;
  line-height: 1;
}
.cart-icon-container {
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-icon {
  color: white;
  font-size: 24px !important;
  line-height: 1;
}
.swiper {
  margin-left: 0px !important;
  margin-right: 0px !important;
}
/* You can place this in your global stylesheet or use Tailwind's config */
.thumbnail-scroll-wrapper {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Firefox */
}
.thumbnail-scroll-wrapper::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari */
}
.thumbnail-scroll-wrapper img {
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}