/* stylelint-disable no-descending-specificity */
/* stylelint-disable no-duplicate-selectors */
html {
  background-color: var(--material-themesyslightsurface);
  color-scheme: dark light;
  /*background-color: black;*/
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
  padding: 0;
}

body {
  background-color: var(--material-themesyslightsurface);
}

.hidden {
  display: none;
}

.captcha-container {
  /* Added for inline display */
  align-items: center;
  /* Adds space between items */
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  /* Centers items horizontally */
  gap: 10px;
  /* Aligns items vertically */
  justify-content: center;
  padding: 20px;
}

.captcha-image {
  border: 1px solid #ddd;
  border-radius: 4px;
  /* Adjust size as needed */
  height: auto;
  max-width: 100px;
}

#captcha-input {
  border: 1px solid #ddd;
  border-radius: 4px;
  /* Adjust width as needed */
  padding: 10px;
  width: 125px;
}

/* Style for the refresh button */
#captcha-refresh {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.refresh-icon {
  /* Adjust as needed */
  cursor: pointer;
  height: 24px;
  width: 24px;
  /* Adjust as needed */
}

#captcha-submit {
  background-color: #007bff;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  padding: 10px 20px;
}

#captcha-submit:hover {
  background-color: #0056b3;
}

.modal {
  align-items: center;
  background-color: var(--material-themesyslightsurface-container-highest-half);
  display: none;
  height: 100%;
  justify-content: center;
  left: 0;
  margin-top: 5px;
  position: fixed;
  top: 0;
  width: 95vw;
  z-index: 10000;
}

.modal-content {
  background-color: var(--material-themesyslightsurface);
  border-radius: 5px;
  font-family: var(--material-body-display-medium-font-family);
  max-height: 80vh;
  max-width: 600px;
  /* Adjust the value as needed */
  overflow-y: auto;
  /* Only vertical scrolling */
  padding: 40px;
  padding-bottom: 30px;
  /* Extra padding at the bottom */
  position: relative;
  width: 100%;
}

.modal-header {
  align-items: center;
  /* Changed this from flex-end to center for vertical alignment */
  display: flex;
  justify-content: space-between;
  /* Added this line */
}

.img-close {
  cursor: pointer;
  /* Added to imply it's clickable */
}

/* Additional styling to position the close image to the top-right corner of the modal */
.modal-content .img-close {
  /* Adjust as needed */
  height: 24px;
  position: absolute;
  /* Adjust as needed */
  right: 10px;
  /* Changed to absolute positioning */
  top: 10px;
  /* Adjust as needed */
  width: 24px;
  /* Adjust as needed */
}

.modal-content h2 {
  color: var(--material-themesyslighton-surface);
  font-family: var(--material-theme-body-large-font-family);
  font-size: var(--material-theme-body-large-font-size);
  font-style: var(--material-theme-body-large-font-style);
  font-weight: var(--material-theme-body-large-font-weight);
  letter-spacing: var(--material-theme-body-large-letter-spacing);
  line-height: var(--material-theme-body-large-line-height);
}

.modal-content p {
  color: var(--material-themesyslighton-surface);
  font-family: var(--material-theme-body-large-font-family);
  font-size: var(--material-theme-body-large-font-size);
  font-style: var(--material-theme-body-large-font-style);
  font-weight: var(--material-theme-body-large-font-weight);
  letter-spacing: var(--material-theme-body-large-letter-spacing);
  line-height: var(--material-theme-body-large-line-height);
}

.modal-content form {
  display: grid;
  grid-gap: 10px;
  margin-top: 20px;
}

.modal-content input[type="text"],
.modal-content input[type="email"],
.modal-content input[type="tel"],
select {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
}

.modal-content input[type="checkbox"] {
  margin-right: 5px;
}

.modal-content button[type="submit-main"] {
  border: none;
  border-radius: 4px;
  color: var(--material-themesyslightonprimary);
  cursor: pointer;
  padding: 10px 20px;
}

.admin-page-container {
  background-color: var(--material-themesyslightsurface);	
}

button[type="submit-main"]:hover {
  background-color: var(--material-themesyslightsecondary);
}

/* Active state styles */
.feedback-button.active {
  background-color: var(--material-themesyslightprimary);
  /* Darker blue to indicate active state */
}

/* Inactive state styles */
.feedback-button.inactive {
  background-color: #ccc;
  /* Gray color to indicate inactive state */
  cursor: not-allowed;
  /* Change cursor to indicate the button is disabled */
}

.modal-content .checkbox {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
}

.modal-content .checkbox a {
  text-decoration: none;
}

.modal-content .checkbox a:hover {
  text-decoration: underline;
}

.modal-content label {
  color: var(--material-themesyslighton-surface);
  display: block;
  font-family: var(--material-theme-body-medium-font-family);
  font-size: var(--material-theme-body-medium-font-size);
  font-style: var(--material-theme-body-medium-font-style);
  font-weight: var(--material-theme-body-medium-font-weight);
  letter-spacing: var(--material-theme-body-medium-letter-spacing);
  line-height: var(--material-theme-body-medium-line-height);
  margin-top: 15px;
}

label.checkbox {
  margin-top: 10px;
}

#contact-us {
  /* displays or hides contact us */
  display: none;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-left: .5em;
  margin-top: 0px;
}

#welcome {
  /* displays or hides welcome */
  display: none;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-left: .5em;
  margin-top: 0px;
}

.main-splash-container {
  /* displays or hides splash landing page */
  background-color: var(--material-themesyslightsurface);
  display: flex;
}

.splash-flex {
  align-self: center;
  background-color: var(--material-themesyslightsurface);
  width: 100vw;
}

.splash-flex[data-type="admin"] {
  display: flex;
  /* This will create 5em spacing between flex items */
  flex-wrap: wrap;
  gap: 5em;
  /* Optional, if you want to allow the items to wrap */
}

.category-container#splash {
  align-self: center;
  background-color: var(--material-themesyslightsurface);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-left: 0px;
  margin-top: 100px;
  width: 98vw;
}

.category-container {
  align-self: center;
  background-color: var(--material-themesyslightsurface);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-left: 0px;
  margin-top: 10px;
  width: 98vw;
}

.splash-flex-container {
  align-items: flex-start;
  align-self: center;
  background-color: var(--material-themesyslightsurface);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-height: 600px;
}

.splash-flex-container[data-type="admin"] {
  align-items: center;
  align-self: center;
  background-color: var(--material-themesyslightsurface);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-height: none;
}

.splash-flex-container[data-type="admin"]#insights {
  align-items: center;
}

.splash-flex-container[data-type="admin-short"] {
  align-items: center;
  align-self: center;
  background-color: var(--material-themesyslightsurface);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-height: none;
}

#splashBox {
  gap: 3px;
  margin-left: 20px;
  margin-right: 20px;
  min-height: 150px;
  min-width: 100px;
  width: 100%;
}

.category-hero,
.sub-category {
  cursor: pointer;
  position: relative;
  /* Set position context for absolute positioning of children */
  text-align: center;
  /* Center the text horizontally */
}

.category-hero {
  /* Center image horizontally */
  align-items: flex-start;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  /* Center image vertically */
  gap: 3px;
  /* Set the height of the container */
  /* Hide parts of the image that do not fit */
  height: 600px;
  /* Use flexbox to center the image */
  justify-content: center;
  /* Set the width of the container */
  margin-right: 20px;
  overflow: hidden;
}

#splashBoxhero {
  min-height: 150px;
  width: 100%;
}

.category-hero h1,
.category-hero h2,
.category-hero h3,
.category-hero h4,
.category-hero h5 {
  /* Adjust the positioning to the exact center */
  /* Ensure the h1 is above the image */
  /*color: var(--material-themesyslighton-primary);*/
  color: white;
  cursor: pointer;
  font-family: 'Abril Fatface', serif;
  font-size: 9rem;
  font-weight: 900;
  /* Center the h1 element vertically */
  left: 50%;
  line-height: 1.0;
  position: absolute;
  /* Position the h1 element absolutely within its parent */
  top: 75%;
  /* Center the h1 element horizontally */
  transform: translate(-50%, -50%);
  /* Use your existing color */
  z-index: 2;
}

.category-hero[data-type="display-board-wide"] {
  background-color: var(--material-themesyslightsurface);
  min-height: 300px;
  min-width: 1000px;
}

.category-hero[data-type="display-board"] {
  background-color: var(--material-themesyslightsurface);
  min-height: 600px;
  min-width: 400px;
}

.category-hero[data-type="display-board"] h1,
.category-hero[data-type="display-board-wide"] h1 {
  /* Adjust the positioning to the exact center */
  /* Ensure the h1 is above the image */
  /*color: var(--material-themesyslighton-primary);*/
  border-bottom: none;
  color: var(--material-themesyslighton-surface);
  font-family: 'Abril Fatface', serif;
  font-size: 6rem;
  font-weight: 900;
  /* Center the h1 element vertically */
  line-height: 1.0;
  /* Position the h1 element absolutely within its parent */
  top: 50%;
}

.category-hero[data-type="display-board"] h2,
.category-hero[data-type="display-board-wide"] h2 {
  /* existing styles */
  border-bottom: none;
  color: var(--material-themesyslighton-surface);
  cursor: pointer;
  font-family: 'Abril Fatface', serif;
  font-size: 3.5rem;
  font-weight: 600;
  /* Center the h1 element vertically */
  line-height: 1.0;
  /* Creates a white underline */
  padding-bottom: 2px;
  top: 50%;
  /* Optional: Adjusts spacing between text and underline */
}

.category-hero[data-type="display-board"] h3,
.category-hero[data-type="display-board-wide"] h3 {
  /* existing styles */
  border-bottom: none;
  color: var(--material-themesyslighton-surface);
  cursor: pointer;
  font-family: 'Roboto', serif;
  font-size: 3rem;
  font-weight: 600;
  /* Center the h1 element vertically */
  /* Creates a white underline */
  padding-bottom: 2px;
  top: 80%;
  /* Optional: Adjusts spacing between text and underline */
}

.category-hero[data-type="display-board"] h2 {
  /* existing styles */
  color: var(--material-themesyslighton-surface);
  cursor: pointer;
  font-family: 'Abril Fatface', serif;
  font-size: 3.5rem;
  font-weight: 600;
  /* Center the h1 element vertically */
  line-height: 1.0;
  /* Creates a white underline */
  padding-bottom: 2px;
  top: 50%;
  /* Optional: Adjusts spacing between text and underline */
}

.category-hero[data-type="display-board"] h3 {
  /* existing styles */
  color: var(--material-themesyslighton-surface);
  cursor: pointer;
  font-family: 'Roboto', serif;
  font-size: 3rem;
  font-weight: 600;
  /* Center the h1 element vertically */
  line-height: 1.0;
  /* Creates a white underline */
  padding-bottom: 2px;
  top: 80%;
  /* Optional: Adjusts spacing between text and underline */
}

.category-hero h1 {
  /* Adjust the positioning to the exact center */
  /* Ensure the h1 is above the image */
  /*color: var(--material-themesyslighton-primary);*/
  color: white;
  font-family: 'Abril Fatface', serif;
  font-size: 6rem;
  font-weight: 900;
  /* Center the h1 element vertically */
  line-height: 1.0;
  /* Position the h1 element absolutely within its parent */
  top: 75%;
}

.category-hero h2 {
  /* existing styles */
  border-bottom: 1px solid white;
  cursor: pointer;
  font-family: var(--material-theme-title-large-font-family);
  font-size: 1.5rem;
  font-weight: 200;
  /* Center the h1 element vertically */
  line-height: 1.0;
  /* Creates a white underline */
  padding-bottom: 2px;
  top: 90%;
  /* Optional: Adjusts spacing between text and underline */
}

.category-hero h3 {
  /* existing styles */
  border-bottom: 1px solid white;
  cursor: pointer;
  font-family: var(--material-theme-title-large-font-family);
  font-size: 1.5rem;
  font-weight: 200;
  /* Center the h1 element vertically */
  line-height: 1.0;
  /* Creates a white underline */
  padding-bottom: 2px;
  top: 85%;
  /* Optional: Adjusts spacing between text and underline */
}

.category-hero[data-type="double"] h1 {
  top: 68%;
}

.category-hero[data-type="triple"] h1 {
  top: 48%;
}

.sub-category h1,
.sub-category h2,
.sub-category h3,
.sub-category h4,
.sub-category h5 {
  /* Adjust the positioning to the exact center */
  /* Ensure the h1 is above the image */
  color: white;
  font-family: 'Abril Fatface', serif;
  /* Center the h1 element vertically */
  left: 50%;
  position: absolute;
  /* Position the h1 element absolutely within its parent */
  /* Center the h1 element horizontally */
  transform: translate(-50%, -50%);
  width: 90%;
  /* Use your existing color */
  z-index: 2;
}

.sub-category h1 {
  /* Adjust the positioning to the exact center */
  /* Ensure the h1 is above the image */
  color: white;
  font-family: 'Staatliches', serif;
  font-size: 3rem;
  font-weight: 500;
  /* Position the h1 element absolutely within its parent */
  top: 50%;
}

.sub-category h2 {
  /* existing styles */
  border-bottom: none;
  cursor: pointer;
  font-family: var(--material-theme-title-large-font-family);
  font-size: 1rem;
  font-weight: 400;
  /* Center the h1 element vertically */
  line-height: 1.0;
  /* Creates a white underline */
  padding-bottom: 2px;
  top: 15%;
  /* Optional: Adjusts spacing between text and underline */
}

.sub-category[data-type="admin"] h2 {
  border-bottom: none;
  cursor: pointer;
  font-family: var(--material-theme-title-large-font-family);
  font-size: 1rem;
  font-weight: 400;
  /* Center the h1 element vertically */
  line-height: 1.0;
  /* Creates a white underline */
  padding-bottom: 2px;
  top: 50%;
  /* Optional: Adjusts spacing between text and underline */
}

.sub-category[data-type="admin"] h4 {
  font-size: 2.5rem;
  font-weight: 700;
  top: 50%;
}

.sub-category h3 {
  /* existing styles */
  cursor: pointer;
  font-family: var(--material-theme-title-large-font-family);
  font-size: 1.5rem;
  font-weight: 200;
  /* Center the h1 element vertically */
  line-height: 1.0;
  /* Creates a white underline */
  padding-bottom: 2px;
  top: 15%;
  /* Optional: Adjusts spacing between text and underline */
}

.sub-category h4 {
  /* existing styles */
  color: black;
  cursor: pointer;
  font-family: 'Abril Fatface', serif;
  font-size: 3rem;
  font-weight: 500;
  /* Center the h1 element vertically */
  line-height: 1.0;
  /* Creates a white underline */
  padding-bottom: 2px;
  top: 75%;
  /* Optional: Adjusts spacing between text and underline */
}

.sub-category h5 {
  /* existing styles */
  color: black;
  cursor: pointer;
  font-family: var(--material-theme-title-large-font-family);
  font-size: 1rem;
  font-weight: 400;
  /* Center the h1 element vertically */
  line-height: 1.0;
  /* Creates a white underline */
  padding-bottom: 2px;
  top: 50%;
  /* Optional: Adjusts spacing between text and underline */
}

#link h1 {
  cursor: pointer;
  display: block;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.sub-category[data-type="double"] h1 {
  top: 68%;
}

.sub-category[data-type="triple"] h1 {
  top: 55%;
}

.category-hero img {
  /* Ensure the image covers the container */
  height: 100%;
  /* Maintain aspect ratio */
  object-fit: cover;
  /* Cover the area without distorting the image */
  width: auto;
  /* Ensure the image is positioned correctly within the container */
  z-index: 1;
  /* Ensure the image stays behind the text */
}

.splash-container {
  /*display: grid;*/
  display: grid;
  grid-auto-flow: row dense;
  grid-gap: 10px;
  grid-template-columns: 1fr;
  height: 600px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  max-width: 500px;
  overflow-y: auto;
  z-index: 5;
}

.splash-container[data-type="admin"] {
  align-content: space-between;
  /*display: grid;*/
  display: grid;
  grid-auto-flow: row dense;
  grid-gap: 10px;
  grid-template-columns: 1fr;
  height: 1000px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  max-width: 500px;
  overflow-y: auto;
  z-index: 5;
}

.splash-container[data-type="admin-short"] {
  align-content: space-between;
  /*display: grid;*/
  display: grid;
  grid-auto-flow: row dense;
  grid-gap: 10px;
  grid-template-columns: 1fr;
  height: 700px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  max-width: 500px;
  overflow-y: auto;
  z-index: 5;
}

.splash-container .sub-category {
  /* Center image horizontally */
  align-items: center;
  border-radius: 10px;
  display: flex;
  /* Center image vertically */
  gap: 10px;
  height: 194px;
  /* Use flexbox to center the image */
  justify-content: center;
  /* Hide parts of the image that do not fit */
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  /* Set the width of the container */
  overflow: hidden;
  /* Set the height of the container */
  width: 288px;
}

.splash-container .sub-category[data-type="admin"] {
  /* Center image horizontally */
  align-items: center;
  border-radius: 10px;
  display: flex;
  /* Center image vertically */
  gap: 10px;
  height: 225px;
  /* Use flexbox to center the image */
  justify-content: center;
  /* Hide parts of the image that do not fit */
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  /* Set the width of the container */
  overflow: hidden;
  /* Set the height of the container */
  width: 288px;
}

.splash-container .sub-category img {
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

.pages {
  background-color: var(--material-themesyslightsurface);
  color: var(--material-themesyslighton-surface-variant);
  display: none;
  font-family: var(--material-theme-body-large-font-family);
  font-size: var(--material-theme-body-large-font-size);
  font-style: var(--material-theme-body-large-font-style);
  font-weight: var(--material-theme-body-large-font-weight);
  letter-spacing: var(--material-theme-body-large-letter-spacing);
  line-height: var(--material-theme-body-large-line-height);
  margin-top: 150px;
  padding: 0;
}

.section #beta {
  background: var(--material-themesyslightsurface-variant);
  color: var(--material-themesyslighton-surface-variant);
  margin-bottom: 20px;
  margin-left: 75px;
  margin-right: 75px;
  margin-top: 20px;
  /* Adjust the value as needed */
}

.section #beta p {
  margin: 20px;
  text-align: justify;
}

.section {
  background: var(--material-themesyslightsurface);
  margin-bottom: 20px;
  margin-left: 75px;
  margin-right: 75px;
  margin-top: 20px;
  /* Adjust the value as needed */
}

.section p {
  margin: 20px;
  text-align: justify;
}

.section h1 {
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.5;
}

.section h2 {
  color: var(--material-themesyslightprimary);
  font-size: 1.5rem;
  margin-left: 10px;
}

.link-text {
  color: purple;
}

/* Styles for unordered lists within the section */
.section ul {
  list-style-type: disc;
  /* Style of bullet points */
  padding-left: 40px;
  /* Indentation for the list */
}

/* Styles for list items within the section */
.section li {
  margin-bottom: 10px;
  /* Spacing between list items */
}

.pages .sub-page .section table {
  /* Full width of the section */
  border-collapse: collapse;
  /* Add some space above the table */
  margin-bottom: 20px;
  /* Collapse borders */
  margin-top: 20px;
  width: 100%;
  /* Add some space below the table */
}

.pages .sub-page .section th,
.pages .sub-page .section td {
  border: 1px solid #ddd;
  /* Light grey border */
  padding: 8px;
  /* Padding for table cells */
  text-align: left;
  /* Align text to the left */
}

.pages .sub-page .section th {
  background-color: #f2f2f2;
  /* Light grey background for headers */
  color: #333;
  /* Dark grey text for headers */
}

/* Zebra striping for rows */
.pages .sub-page .section tr:nth-child(even) {
  background-color: #f9f9f9;
}

.pages .sub-page .section tr:hover {
  background-color: #f1f1f1;
  /* Slightly darker row highlight on hover */
}

.pages .sub-page .section th {
  font-weight: bold;
  /* Make header text bold */
}

.menu.visible {
  display: block;
  /* Only display when 'visible' class is added */
}

.menu {
  Left: 0px;
  align-items: flex-start;
  display: none;
  position: fixed;
  top: 0px;
  width: 400px;
  z-index: 1599;
  /* ensure this is a high value */
}

.menu .side-sheet {
  align-items: flex-start;
  background-color: var(--material-themesyslightsurface);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  margin-right: -10px;
  min-width: 320px;
  padding: 0px 0px 24px;
  position: relative;
  width: 320px;
}

.menu .header {
  align-items: flex-start;
  align-self: stretch;
  background-color: transparent;
  display: flex;
  flex: 0 0 auto;
  padding: 12px 12px 16px 24px;
  position: relative;
  width: 100%;
}

.menu .content {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-grow: 1;
  padding: 12px 0px 0px;
  position: relative;
}

.menu .headline-text {
  color: var(--material-themesyslighton-surface-variant);
  flex: 1;
  font-family: var(--material-theme-body-large-font-family);
  font-size: var(--material-theme-body-large-font-size);
  font-style: var(--material-theme-body-large-font-style);
  font-weight: var(--material-theme-body-large-font-weight);
  letter-spacing: var(--material-theme-body-large-letter-spacing);
  line-height: var(--material-theme-body-large-line-height);
  margin-top: -1px;
  position: relative;
}

.menu .close-affordance {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 48px;
  justify-content: center;
  position: relative;
  width: 48px;
}

.menu .container {
  align-items: center;
  border-radius: 100px;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 10px;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.menu .state-layer {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 10px;
  justify-content: center;
  padding: 8px;
  position: relative;
}

.menu .img {
  height: 24px;
  position: relative;
  width: 24px;
}

.menu .content-wrapper {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  position: relative;
  width: 100%;
}

.menu .frame-wrapper {
  align-items: flex-start;
  /* Add scroll for vertical content */
  align-self: stretch;
  display: flex;
  flex-direction: column;
  max-height: 500px;
  /* Set a max height */
  overflow-y: auto;
  position: relative;
  width: 100%;
}

.menu .list-item {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  min-height: 56px;
  position: relative;
  width: 100%;
}

.menu .state-layer-overlay {
  height: 56px;
  left: 0;
  min-width: 320px;
  position: absolute;
  top: 0;
}

.menu .div {
  align-items: center;
  align-self: stretch;
  display: flex;
  gap: 16px;
  height: 56px;
  padding: 8px 24px 8px 16px;
  position: relative;
  width: 100%;
}

.menu .content-2 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  position: relative;
}

.menu .headline {
  align-self: stretch;
  color: var(--material-themesyslighton-surface-variant);
  font-family: var(--material-theme-body-large-font-family);
  font-size: var(--material-theme-body-large-font-size);
  font-style: var(--material-theme-body-large-font-style);
  font-weight: var(--material-theme-body-large-font-weight);
  letter-spacing: var(--material-theme-body-large-letter-spacing);
  line-height: var(--material-theme-body-large-line-height);
  position: relative;
}

.menu .state-layer-2 {
  align-items: center;
  align-self: stretch;
  display: flex;
  gap: 16px;
  height: 56px;
  justify-content: center;
  padding: 8px 24px 8px 16px;
  position: relative;
  width: 100%;
}

.menu .leading-element {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  position: relative;
}

.menu .trailing-element {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 10px;
  position: relative;
}

.menu .list-item-2 {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  margin-bottom: -56px;
  min-height: 56px;
  position: relative;
  width: 100%;
}

.top-bar-full {
  align-items: center;
  background-color: var(--material-themesyslightsurface-variant);
  display: flex;
  flex-direction: column;
  height: 50px;
  left: 0;
  position: fixed;
  top: 0;
  /* Ensure it's above other content */
  transition: transform 0.3s ease-in-out;
  width: 100%;
  z-index: 1000;
  /* Other styles remain the same */
}

.top-bar-full .app-bar-large {
  align-items: center;
  align-self: stretch;
  background-color: var(--material-themesyslightsurface-variant);
  display: flex;
  gap: 1px;
  height: 50px;
  padding: 8px 4px;
  position: relative;
  width: 100%;
}

.filter-frame .filter {
    position: absolute;
    top:5px;
    right:15px;
    display: flex;
    z-index: 500;
    height:70px;
    width:auto;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth animation */
}

.filter-frame .filter:active {
    transform: scale(0.95); /* Shrinks slightly when clicked */
}

.top-bar-full .hamburger {
  cursor: pointer;
  height: 36px;
  margin-left: -4px;
  margin-top: 10px;
  position: relative;
  width: 36px;
}

.tree-location {
  left: 40px;
  position: absolute;
  top: 0px;
  white-space: nowrap;
  width: 100%;
  /* Keep text in a single line */
}

.tree-location .header {
  width: 90%;
}

.tree-location .container-wrapper {
  display: flex;
}

.tree-location .breadcrumb {
  overflow: hidden;
  padding-right: 10px;
  white-space: nowrap;
  /* Ensure this is appropriate for its parent container */
}

.tree-location .breadcrumb-item {
  /* Remove underline from links */
  color: inherit;
  color: var(--material-themesyslighton-surface);
  flex-shrink: 0;
  /* Add some padding around the text for better readability */
  font-family: var(--material-theme-body-medium-font-family);
  font-size: var(--material-theme-body-medium-font-size);
  font-style: var(--material-theme-body-medium-font-style);
  font-weight: var(--material-theme-body-medium-font-weight);
  letter-spacing: var(--material-theme-body-medium-letter-spacing);
  line-height: var(--material-theme-body-medium-line-height);
  /* Ensures overflow is hidden at item level */
  max-width: 100%;
  /* Prevents the item from shrinking, can be adjusted */
  overflow: hidden;
  /* Use the color from parent element */
  padding: 0 5px;
  text-decoration: none;
  /* Ensure it respects the container's width */
}

.breadcrumb-divider {
  padding: 0 5px;
  /* Add padding to match the links */
}

.top-bar-full .header {
  align-items: center;
  align-self: stretch;
  background-color: var(--material-themesyslightsurface-variant);
  border-radius: 28px 28px 0px 0px;
  display: flex;
  gap: 4px;
  height: 40px;
  margin-bottom: -1px;
  padding: 5px 0px;
  position: relative;
}

.top-bar-full .container-wrapper {
  align-items: flex-end;
  display: flex;
  /* This will align items to the right, you can change it to 'space-between' or 'flex-start' for different spacing */
  gap: 10px;
  height: 48px;
  /* Align items to the bottom */
  justify-content: flex-end;
  position: relative;
  width: 100%;
}

.top-bar-full .container-wrapper .item {
  align-items: last baseline;
  color: var(--material-themesyslighton-surface);
  display: flex;
  font-family: var(--material-theme-body-medium-font-family);
  font-size: var(--material-theme-body-medium-font-size);
  font-style: var(--material-theme-body-medium-font-style);
  font-weight: var(--material-theme-body-medium-font-weight);
  /* Full width of the parent */
  height: 100%;
  /* This will vertically center the text in the .item container */
  justify-content: left;
  letter-spacing: var(--material-theme-body-medium-letter-spacing);
  line-height: var(--material-theme-body-medium-line-height);
  /* This will horizontally center the text in the .item container */
  padding: 3px;
  width: 100%;
}

.top-bar-full .img {
  height: 24px;
  position: relative;
  width: 24px;
}

.top-bar-full .content {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  position: relative;
}

.top-bar-full .input-text {
  align-items: center;
  display: inline-flex;
  gap: 1px;
  height: 24px;
  padding: 10px 0px;
  position: relative;
}

.top-bar-full .div {
  background: transparent;
  border: none;
  color: var(--material-themesyslighton-surface-variant);
  font-family: var(--material-theme-body-large-font-family);
  font-size: var(--material-theme-body-large-font-size);
  font-style: var(--material-theme-body-large-font-style);
  font-weight: var(--material-theme-body-large-font-weight);
  letter-spacing: var(--material-theme-body-large-letter-spacing);
  line-height: var(--material-theme-body-large-line-height);
  margin-bottom: -9px;
  margin-top: -11px;
  padding: 0;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.top-bar-full .caret {
  height: 17px;
  margin-bottom: -6.5px;
  margin-right: -0.5px;
  margin-top: -6.5px;
  position: relative;
  width: 1px;
}

.top-bar-full .horizontal-full {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: flex-end;
  margin-bottom: -2px;
  position: relative;
  width: 100%;
}

.top-bar-full .divider {
  align-self: stretch;
  height: 1px;
  object-fit: cover;
  position: relative;
  width: 100%;
}

.top-bar-full .list {
  align-self: stretch;
  flex: 0 0 auto;
  margin-bottom: -74px;
  position: relative;
  width: 100%;
}

.top-bar-full .trailing-icon-frame {
  align-items: baseline;
  align-self: flex-end;
  cursor: pointer;
  display: flex;
  flex: 1;
  flex-grow: 1;
  height: 50px;
  /* Make it a flex container */
  justify-content: center;
  max-width: 100%;
  position: relative;
  /* Align its children (the .trailing-icon div) to the end */
}

.top-bar-full .trailing-icon {
  align-items: center;
  display: inline-flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  padding: 20px 10px;
  position: relative;
}

.top-bar-full .tokuhn-logo {
  cursor: pointer;
  height: 33.45px;
  margin-bottom: -0.5px;
  margin-left: -0.5px;
  margin-right: -0.5px;
  margin-top: -0.5px;
  position: relative;
  width: 112.97px;
}

#openModalBeta {
  cursor: pointer;
  margin-bottom: -10px;
  margin-left: -0.5px;
  margin-right: -0.5px;
  margin-top: -0.5px;
}

.top-bar-full .trailing-icon .beta-logo {
  cursor: pointer;
  height: 33.45px;
  position: relative;
  width: 112.97px;
}

.top-bar-full .trailing-icon .beta-logo-tiny {
  cursor: pointer;
  height: 33.45px;
  left: 55px;
  position: absolute;
  top: 5px;
  transform: scale(50%);
  width: 112.97px;
}

.top-bar-full .navbar {
  align-items: center;
  align-self: stretch;
  background-color: var(--material-themesyslightsurface-variant);
  cursor: pointer;
  display: flex;
  height: 40px;
  /* Changed from flex-start to center to align items vertically */
  justify-content: center;
  margin-left: 0px;
  /* Added to center items horizontally */
  position: relative;
  width: 100%;
}

.top-bar-full .navbar .item {
  color: var(--material-themesyslighton-surface);
  font-family: var(--material-theme-title-medium-font-family);
  font-size: var(--material-theme-title-medium-font-size);
  font-style: var(--material-theme-title-medium-font-style);
  font-weight: var(--material-theme-title-medium-font-weight);
  height: 40px;
  letter-spacing: var(--material-theme-title-medium-letter-spacing);
  line-height: var(--material-theme-title-medium-line-height);
  margin-top: 25px;
  padding: 0px 12px;
  position: relative;
  text-align: center;
}

.filter-mobile-visual {
  align-items: center;
  /*position: relative;*/
  background-color: var(--material-themesyslightsurface);
  display: none;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  position: relative;
  top: 5px;
  width: 100%;
  z-index: 100;
}

.filter-mobile-visual .divider {
  align-self: stretch;
  height: 1px;
  object-fit: cover;
  position: relative;
  width: 100%;
}

.filter-mobile-visual .img {
  align-self: stretch;
  height: 1px;
  margin-bottom: -1px;
  object-fit: cover;
  position: relative;
  width: 100%;
}

.filter-mobile-visual .close-affordance {
  height: 24px;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 24px;
}

.filter-mobile-visual .close-affordance .img {
  height: 100%;
  width: 100%;
}

.filter-mobile-visual .filters {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 100px;
  position: relative;
}

.filter-mobile-visual .multi-control-category {
  align-items: flex-start;
  background-color: var(--material-themesyslightsurface);
  display: none;
  flex-direction: column;
  gap: 10px;
  position: relative;
  width: 220px;
}

.filter-mobile-visual .caret.rotated {
  transform: rotate(90deg);
  /* Rotate the caret */
}

.filter-mobile-visual .caret {
  height: 24px;
  position: relative;
  transition: transform 0.3s ease;
  width: 24px;
  /* Smooth transition for rotation */
}

.filter-mobile-visual .multi-control-category .caret {
  margin-right: 25px;
}

.filter-mobile-visual .multi-control {
  align-items: flex-start;
  background-color: var(--material-themesyslightsurface);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

.filter-mobile-visual .control-frame {
  align-items: center;
  align-self: stretch;
  display: flex;
  gap: 5px;
  height: 48px;
  justify-content: center;
  position: relative;
  width: 100%;
}

.filter-mobile-visual .item-frame {
  align-items: center;
  display: flex;
  flex: 1;
  flex-grow: 1;
  gap: 10px;
  height: 48px;
  padding: 5px;
  position: relative;
}

.filter-mobile-visual .text-wrapper {
  color: var(--material-themesyslighton-surface);
  font-family: var(--material-theme-body-large-font-family);
  font-size: var(--material-theme-body-large-font-size);
  font-style: var(--material-theme-body-large-font-style);
  font-weight: var(--material-theme-body-large-font-weight);
  height: 28px;
  letter-spacing: var(--material-theme-body-large-letter-spacing);
  line-height: var(--material-theme-body-large-line-height);
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
}

/* This class will be added or removed with JavaScript */
.hidden-dialog,
.hidden-dialog * {
  opacity: 0;
  transform: scale(0.95);
  transition: visibility 0s 0.1s, opacity 0.1s linear, transform 0.1s linear;
  visibility: hidden;
}

.hidden-dialog {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* ... */
.no-scroll {
  left: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  /* Optional based on layout, might cause shifts */
  width: 100%;
}

.color-fill.visible .color-fill.visible {
  display: block;
  /* or 'flex' or whatever display type it should be */
}

.color-fill {
  background-color: var(--material-themesyslightsurface-variant);
  display: block;
  overflow: visible;
  position: relative;
  /* Changed from none to block */
  /* Other properties */
  /* Adjusted to 0px for sticking to the top */
  z-index: 100;
}

/* Initial state: visible */
.filter-dialog,
.filter-dialog {
  align-items: flex-start;
  background-color: var(--material-themesyslightsurface);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

.filter-dialog .filter-frame {
  /* mobile*/
  /*flex-direction: column; desktop*/
  /*overflow-y: auto;*/
  /*max-height: 600px; to enable scrolling on mobile */
  align-items: flex-start;
  align-self: stretch;
  background-color: var(--material-themesyslightbackground);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 10px;
  position: relative;
  /*width: 100%;*/
}

.radio-sort {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  margin-top: 35px;
  position: relative;
  width: 100%;
}

.radio-sort .radio-container {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  min-height: 56px;
  position: relative;
  width: 100%;
}

.radio-sort .state-layer-overlay {
  height: 56px;
  left: 0;
  position: absolute;
  top: 0;
  width: 220px;
}

.radio-sort .state-layer {
  align-items: center;
  align-self: stretch;
  display: flex;
  height: 56px;
  padding: 0px 24px 8px 16px;
  position: relative;
  width: 100%;
}

.radio-sort .content {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  position: relative;
}

.radio-sort .headline {
  align-self: stretch;
  color: var(--material-themesyslighton-surface);
  font-family: var(--material-theme-body-large-font-family);
  font-size: var(--material-theme-body-large-font-size);
  font-style: var(--material-theme-body-large-font-style);
  font-weight: var(--material-theme-body-large-font-weight);
  letter-spacing: var(--material-theme-body-large-letter-spacing);
  line-height: var(--material-theme-body-large-line-height);
  position: relative;
}

.radio-sort .trailing-element {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 10px;
  position: relative;
}

.radio-sort .radio-buttons {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 24px;
  justify-content: center;
  position: relative;
  width: 24px;
}

.filter-dialog .radio-buttons .container,
.filter-dialog .radio-buttons .container {
  align-items: center;
  border-radius: 100px;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.filter-dialog .radio-buttons .icon-wrapper {
  align-items: center;
  /*background-color: var(--material-themesyslightshadow);*/
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  position: relative;
}

.radio-sort .icon {
  height: 24px;
  position: relative;
  width: 24px;
}

.filter-dialog .filter-bar {
  /* Prevent content from wrapping to the next line */
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 1;
  flex-grow: 1;
  flex-wrap: nowrap;
  gap: 0px 0px;
  /*Desktop */
  /*flex-direction: column;  mobile*/
  /* Add these styles for horizontal scrolling */
  overflow-x: auto;
  position: relative;
  /* Enable horizontal scrolling */
  white-space: nowrap;
  width: 100%;
  /* margin-bottom: 135px; for mobile*/
}

.filter-bar .price-range {
  align-items: flex-end;
  border-width: 3px;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: 15px;
  margin-top: 12px;
  max-width: 250px;
  padding-right: 15px;
  position: relative;
}

.assistive-chip-wrapper {
  display: flex;
  gap: 5px;
  justify-content: space-between;
  padding-right: 20px;
  width: 100%;
  /* Ensure it fills the parent width */
}

.from-wrapper,
.to-wrapper {
  /* Optional: Align items within the wrappers */
  align-items: center;
  display: flex;
  gap: 5px;
  margin-right: 0px;
  /* Center items vertically */
}

.filter-bar .assistive-chip {
  align-items: center;
  background-color: var(--material-themesyslightsurface-variant);
  border-radius: 5px;
  display: flex;
  height: 30px;
  max-width: 50px;
  overflow: hidden;
  position: relative;
}

.filter-bar .merchant-chi-wrapper {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  height: 32px;
  justify-content: center;
  padding: 6px;
  position: relative;
}

.filter-dialog .chi-headline {
  color: var(--material-themesyslighton-surface);
  font-family: var(--material-theme-body-large-font-family);
  font-size: var(--material-theme-body-large-font-size);
  font-style: var(--material-theme-body-large-font-style);
  font-weight: var(--material-theme-body-large-font-weight);
  letter-spacing: var(--material-theme-body-large-letter-spacing);
  line-height: var(--material-theme-body-large-line-height);
}

.input[type="number"]::placeholder {
  color: var(--material-themesyslighton-primary);
  /* Placeholder text color */
  /* Additional placeholder styles (if needed) */
}

.filter-bar .input {
  align-self: stretch;
  font-family: var(--material-theme-body-large-font-family);
  font-size: var(--material-theme-body-large-font-size);
  font-style: var(--material-theme-body-large-font-style);
  font-weight: var(--material-theme-body-large-font-weight);
  letter-spacing: var(--material-theme-body-large-letter-spacing);
  line-height: var(--material-theme-body-large-line-height);
  max-width: 40px;
  position: relative;
}

.input[type="number"] {
  /* Remove focus outline */
  /* Hide spinner arrows */
  -webkit-appearance: none;
  /* For WebKit browsers like Chrome and Safari */
  -moz-appearance: textfield;
  /* For Mozilla browsers like Firefox */
  appearance: none;
  /* Standard syntax; should be included for broad compatibility */
  background-color: transparent;
  /* Make background transparent */
  border: none;
  color: var(--material-themesyslighton-primary);
  outline: none;
  text-align: right;
  /* Right justify the text */
}

/* For WebKit browsers like Chrome, Safari */
.input[type="number"]::-webkit-inner-spin-button,
.input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.filter-bar .scroll-container.visible {
  display: block;
  /* or 'flex', 'grid', etc., depending on your layout */
}

.filter-bar .scroll-container {
  /* Ensures that the content does not exceed the element's width */
  box-sizing: border-box;
  /*max-height: 250px;*/
  cursor: pointer;
  display: none;
  margin-bottom: 5px;
  margin-top: 5px;
  /* overflow-y: auto;*/
  min-height: 75px;
  /* Prevent horizontal scrolling */
  overflow-x: hidden;
  /* Optional: Handle overflow in the Y-axis, e.g., with a scrollbar or hidden */
  overflow-y: auto;
  /* Adjust or remove if not using absolute positioning */
  width: 100%;
  z-index: 1;
  /* or 'hidden' if you want to hide the vertical overflow */
}

.select-buttons {
  display: none;
}

.filter-button-container {
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
  padding-top: 20px;
  width: 100%;
}

.filter-dialog .list-dark {
  align-items: flex-start;
  background-color: var(--material-themesyslightbackground);
  display: flex;
  flex: 1;
  flex-direction: column;
  max-width:300px;
  padding: 0px 10px;
  width: 100%;
}

.filter-dialog .list-item-top {
  cursor: pointer;
  min-height: 56px;
  position: relative;
  top: 0;
  width: 100%;
  z-index: 2;
}

.filter-dialog .list-item-top .headline {
  align-self: stretch;
  color: var(--material-themesyslighton-surface);
  font-family: var(--material-theme-body-large-font-family);
  font-size: var(--material-theme-body-large-font-size);
  font-style: var(--material-theme-body-large-font-style);
  font-weight: var(--material-theme-label-large-font-weight);
  letter-spacing: var(--material-theme-body-large-letter-spacing);
  line-height: var(--material-theme-body-large-line-height);
  position: relative;
}

.select-all {
  align-items: center;
  display: flex;
  gap: 7px;
  justify-content: end;
}

.select-all .selection-container {
  align-items: center;
  background-color: var(--material-themesyslightprimarytenth);
  border-radius: 5px;
  display: flex;
  max-height: 42px;
  width: 100px;
}

.filter-dialog .selection-container .content {
  display: flex;
  justify-content: center;
  margin: 5px;
}

.selection-container .headline {
  align-items: center;
  display: flex;
  justify-content: center;
}

.filter-dialog .list-item {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  height: 56px;
  justify-content: center;
  position: relative;
  width: 100%;
}

.filter-dialog .state-layer-overlay {
  left: 0;
  min-height: 5px;
  min-width: 255px;
  position: absolute;
  top: 0;
}

.filter-dialog .state-layer {
  align-items: center;
  align-self: stretch;
  display: flex;
  gap: 16px;
  justify-content: center;
  min-height: 56px;
  padding: 8px 24px 8px 16px;
  position: relative;
  width: 100%;
}

.filter-dialog .content {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  position: relative;
}

.filter-dialog .headline {
  align-self: stretch;
  color: var(--material-themesyslighton-surface);
  font-family: var(--material-theme-body-large-font-family);
  font-size: var(--material-theme-body-large-font-size);
  font-style: var(--material-theme-body-large-font-style);
  font-weight: var(--material-theme-body-large-font-weight);
  letter-spacing: var(--material-theme-body-large-letter-spacing);
  line-height: var(--material-theme-body-large-line-height);
  position: relative;
}

.filter-dialog .img-wrapper {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  /* set the height of the wrapper */
  gap: 10px;
  /* set the width of the wrapper */
  height: 24px;
  /* changed from flex-start to center the image vertically */
  justify-content: center;
  overflow: hidden;
  position: relative;
  /* center the image horizontally */
  width: 24px;
  /* add this to clip the content if it overflows */
}

.list-item-top .caret.rotated {
  transform: rotate(90deg);
  /* Rotate the caret */
}

.list-item-top .caret {
  /* make the image fill the wrapper */
  height: 100%;
  /* make the image fill the wrapper */
  object-fit: cover;
  /* add this to maintain aspect ratio (or 'contain' to fit without clipping) */
  position: relative;
  width: 100%;
}

.filter-dialog .trailing-element {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 10px;
  position: relative;
}

.filter-dialog .checkboxes-dark {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 24px;
  justify-content: center;
  position: relative;
  width: 24px;
}

.filter-dialog .div {
  align-items: center;
  border-radius: 100px;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  margin-bottom: -8px;
  margin-left: -8px;
  margin-right: -8px;
  margin-top: -8px;
  overflow: hidden;
  padding: 7px;
  position: relative;
}

.filter-dialog .container {
  /*background-color: var(--material-themesyslightprimary);*/
  border-radius: 2px;
  height: 18px;
  position: relative;
  width: 18px;
}

.filter-dialog .checkboxes-dark .container {
  background-color: var(--material-themesyslightprimaryfull);
  border-radius: 2px;
  height: 18px;
  position: relative;
  width: 18px;
}

.filter-dialog .container-price-category-container {
  background-color: var(--material-themesyslightprimaryfull);
  border-radius: 2px;
  height: 18px;
  position: relative;
  width: 18px;
}

.filter-dialog .icon-wrapper {
  align-items: center;
  border-radius: 2px;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 10px;
  height: 18px;
  justify-content: center;
  padding: 8px;
  position: relative;
  width: 18px;
}

.filter-dialog .icons-check-small {
  height: 24px;
  left: 8px;
  position: absolute;
  top: 8px;
  width: 24px;
}

.filter-dialog .state-layer-2 {
  align-items: center;
  align-self: stretch;
  display: flex;
  gap: 16px;
  height: 56px;
  padding: 8px 24px 8px 16px;
  position: relative;
  width: 100%;
}

.filter-dialog .leading-element {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.filter-dialog .thumbnail {
  height: 56px;
  object-fit: cover;
  position: relative;
  width: 56px;
}

.filter-dialog .button-container {
  /* Align items to the right */
  align-items: center;
  display: flex;
  /* If you want to vertically center the button in the container */
  flex-direction: row;
  justify-content: flex-end;
  width: 100%;
}

#apply-btn {
  background-color: var(--material-themesyslightprimary);
  border: none;
  border-radius: 10px;
  box-sizing: border-box;
  color: var(--material-themesyslighton-primary);
  cursor: pointer;
  font-family: var(--material-theme-label-medium-font-family);
  font-size: var(--material-theme-title-medium-font-size);
  font-style: var(--material-theme-label-medium-font-style);
  font-weight: var(--material-theme-label-medium-font-weight);
  height: 34px;
  letter-spacing: var(--material-theme-label-medium-letter-spacing);
  line-height: var(--material-theme-label-medium-line-height);
  min-width: 100px;
  overflow: hidden;
  padding-left: 16px;
  padding-right: 16px;
  /* Additional styles as needed */
}

.filter-dialog .label-text-wrapper {
  align-items: center;
  align-self: center;
  display: flex;
  flex: 1;
  flex-grow: 1;
  gap: 20px;
  justify-content: center;
  padding: 10px 80px;
  position: relative;
  width: 100%;
}

.filter-dialog .label-text {
  color: var(--material-themesyslighton-primary);
  font-family: var(--material-theme-label-medium-font-family);
  font-size: var(--material-theme-title-medium-font-size);
  font-style: var(--material-theme-label-medium-font-style);
  font-weight: var(--material-theme-label-medium-font-weight);
  letter-spacing: var(--material-theme-label-medium-letter-spacing);
  line-height: var(--material-theme-label-medium-line-height);
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.categories-container {
  align-items: center;
  background-color: var(--material-themesyslightsurface-variant);
  display: none;
  justify-content: space-between;
  /* Adjusts items vertically */
}

.breadcrumb-categories {
  background-color: var(--material-themesyslightsurface-variant);
  border-radius: 0 5px 5px 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin-top: 95px;
  padding: 10px;
  /* Top-right, bottom-right, bottom-left, top-left */
}

.mini-bread-card {
  background-color: var(--material-themesyslightsurface-variant);
  border-radius: 5px;
  cursor: pointer;
  flex: 0 0 auto;
  /* Adjust the width as needed */
  height: 60px;
  /* Adjust the height as needed */
  position: relative;
  /* Prevents the items from growing or shrinking */
  width: 100px;
}

.mini-bread-card .carousel {
  align-items: center;
  /* Adjust if needed */
  border-radius: 5px;
  display: flex;
  /* Adjust the width as needed */
  height: 60px;
  position: relative;
  width: 100%;
  /* Prevents the items from growing or shrinking */
  width: 100px;
  /* Adjust the height as needed */
}

.breadcrumb-categories .cat-image {
  align-items: left;
  background-position: center;
  /* Adjust if needed */
  background-size: cover;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  /* Adjust if needed */
  height: 100%;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.mini-bread-card .label {
  align-items: center;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  /* Center align horizontally */
  justify-content: flex-start;
  padding: 0px 0px;
  /* Keep content aligned to the top */
  position: absolute;
  /* Keeps the label at the bottom */
  width: 100%;
}

.mini-bread-card-back .label {
  align-items: center;
  bottom: 4%;
  display: flex;
  flex-direction: column;
  /* Center align horizontally */
  justify-content: flex-start;
  padding: 25px 0px;
  /* Keep content aligned to the top */
  position: absolute;
  /* Keeps the label at the bottom */
  width: 100%;
}

.mini-bread-card-back .state-layer-cat {
  align-items: center;
  /* Ensure full width */
  background-color: var(--material-themesyslightsurface-variant);
  display: flex;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  /* Center the content horizontally */
  width: 100%;
}

.mini-bread-card-back .cat-text {
  align-items: center;
  color: var(--material-themesyslighton-surface);
  display: flex;
  font-family: var(--material-theme-title-medium-font-family);
  font-size: var(--material-theme-title-medium-font-size);
  font-style: var(--material-theme-title-medium-font-style);
  font-weight: var(--material-theme-title-medium-font-weight);
  justify-content: center;
  letter-spacing: var(--material-theme-title-medium-letter-spacing);
  line-height: var(--material-theme-title-medium-line-height);
  text-align: center;
}

.mini-bread-card .state-layer-cat {
  align-items: center;
  /* Ensure full width */
  background-color: var(--material-themesyslightsurface-fifty);
  display: flex;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  /* Center the content horizontally */
  width: 100%;
}

.mini-bread-card .cat-text {
  align-items: center;
  color: var(--material-themesyslighton-surface);
  display: flex;
  font-family: var(--material-theme-title-medium-font-family);
  font-size: var(--material-theme-title-medium-font-size);
  font-style: var(--material-theme-title-medium-font-style);
  font-weight: var(--material-theme-title-medium-font-weight);
  justify-content: center;
  letter-spacing: var(--material-theme-title-medium-letter-spacing);
  line-height: var(--material-theme-title-medium-line-height);
  text-align: center;
}

.mini-categories {
  display: flex;
  flex-wrap: nowrap;
  /* Adjust the width as needed */
  gap: 20px;
  margin-top: 95px;
  /* Prevents wrapping of items */
  overflow-x: auto;
  padding: 10px;
  /* Enables horizontal scrolling */
  width: 100%;
}

.mini-cat-card {
  background-color: var(--material-themesyslightsurface);
  border-radius: 5px;
  cursor: pointer;
  flex: 0 0 auto;
  /* Adjust the width as needed */
  height: 100px;
  /* Adjust the height as needed */
  position: relative;
  /* Prevents the items from growing or shrinking */
  width: 150px;
}

.mini-cat-card-back {
  background-color: var(--material-themesyslightsurface-variant);
  border-radius: 5px;
  flex: 0 0 auto;
  /* Adjust the width as needed */
  height: 80px;
  /* Adjust the height as needed */
  position: relative;
  /* Prevents the items from growing or shrinking */
  width: 150px;
}

.carousel {
  align-items: center;
  /* Adjust if needed */
  border-radius: 5px;
  display: flex;
  /* Adjust the width as needed */
  height: 100px;
  position: relative;
  width: 100%;
  /* Prevents the items from growing or shrinking */
  width: 150px;
  /* Adjust the height as needed */
}

.mini-categories .cat-image {
  align-items: left;
  background-position: center;
  /* Adjust if needed */
  background-size: cover;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  /* Adjust if needed */
  height: 100%;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.mini-cat-card .label {
  align-items: center;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  /* Center align horizontally */
  justify-content: flex-start;
  padding: 0px 0px;
  /* Keep content aligned to the top */
  position: absolute;
  /* Keeps the label at the bottom */
  width: 100%;
}

.mini-cat-card-back .label {
  align-items: center;
  bottom: 4%;
  display: flex;
  flex-direction: column;
  /* Center align horizontally */
  justify-content: flex-start;
  padding: 25px 0px;
  /* Keep content aligned to the top */
  position: absolute;
  /* Keeps the label at the bottom */
  width: 100%;
}

.mini-cat-card-back .state-layer-cat {
  align-items: center;
  /* Ensure full width */
  background-color: var(--material-themesyslightsurface-variant);
  display: flex;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  /* Center the content horizontally */
  width: 100%;
}

.mini-cat-card-back .cat-text {
  align-items: center;
  color: var(--material-themesyslighton-surface);
  display: flex;
  font-family: var(--material-theme-title-medium-font-family);
  font-size: var(--material-theme-title-medium-font-size);
  font-style: var(--material-theme-title-medium-font-style);
  font-weight: var(--material-theme-title-medium-font-weight);
  justify-content: center;
  letter-spacing: var(--material-theme-title-medium-letter-spacing);
  line-height: var(--material-theme-title-medium-line-height);
  text-align: center;
}

.mini-cat-card .state-layer-cat {
  align-items: center;
  background-color: var(--material-themesyslightsurface-fifty);
  display: flex;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  /* Center the content horizontally */
  width: 100%;
}

.cat-text {
  align-items: center;
  color: var(--material-themesyslighton-surface);
  display: flex;
  font-family: var(--material-theme-title-medium-font-family);
  font-size: var(--material-theme-title-medium-font-size);
  font-style: var(--material-theme-title-medium-font-style);
  font-weight: var(--material-theme-title-medium-font-weight);
  justify-content: center;
  letter-spacing: var(--material-theme-title-medium-letter-spacing);
  line-height: var(--material-theme-title-medium-line-height);
  text-align: center;
}

.side-sheet-product-card::-webkit-scrollbar,
.side-sheet-product-card *::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}

.product-side-sheet.visible,
.product-side-sheet.visible {
  background-color: var(--material-themesyslightsurface);
  display: block;
  min-height: 1000px;
  /* or visibility: visible; */
  /* Add transitions or animations if needed */
  min-width: 340px;
  overflow: auto;
  z-index: 10000;
}

.product-side-sheet {
  background-color: var(--material-themesyslightsurface);
  display: none;
  flex-direction: column;
  height: 100%;
  left: 0;
  max-width: 340px;
  overflow: auto;
  position: fixed;
  /* Fixed to the viewport */
  top: 0;
  width: 100%;
}

.product-side-sheet-state-layer {
  overflow: auto;
}

.product-side-sheet-state-layer .img {
  left: 290px;
  position: absolute;
  top: 50px;
}

.product-side-sheet-card-placeholder {
  margin-left: 20px;
  margin-top: 5px;
  max-height: 750px;
  max-width: 400px;
  overflow-y: auto;
  padding-bottom: 0px;
  width: 320px;
}

.product-side-sheet .product-info {
  align-items: flex-start;
  background-color: var(--material-themesyslightsurface-fifty);
  display: flex;
  flex-wrap: wrap;
  gap: 0px 0px;
  left: 0px;
  max-width: 275px;
  padding: 25px;
  position: absolute;
  top: 0px;
}

.product-side-sheet .product-content {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-grow: 1;
  gap: 16px;
  padding: 0px 16px 0px 0px;
  position: relative;
  z-index: 500;
}

.product-side-sheet .product-text {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 4px;
  position: relative;
}

.product-side-sheet .text-wrapper {
  align-self: stretch;
  color: var(--material-themesyslighton-surface);
  font-family: var(--material-theme-title-medium-font-family);
  font-size: var(--material-theme-title-medium-font-size);
  font-style: var(--material-theme-title-medium-font-style);
  font-weight: var(--material-theme-title-medium-font-weight);
  letter-spacing: var(--material-theme-title-medium-letter-spacing);
  line-height: var(--material-theme-title-medium-line-height);
  margin-bottom: -5px;
  margin-top: -1px;
  position: relative;
}

/* Container for the merchant button */
.merchant-button-container {
  margin-top: 125px;
  padding: 25px;
  text-align: left;
  /* Adds some space around the button */
}

/* Style for the merchant button */
.merchant-button {
  /* Makes the button flex container */
  align-items: center;
  background-color: var(--material-themesyslightprimary);
  /* White text */
  border: none;
  /* Padding inside the button */
  border-radius: 5px;
  /* Blue background */
  color: var(--material-themesyslightbackground);
  /* Font size */
  cursor: pointer;
  /* Cursor changes to pointer to indicate it's clickable */
  display: inline-flex;
  /* Rounded corners */
  font-family: var(--material-theme-title-medium-font-family);
  font-size: var(--material-theme-title-medium-font-size);
  font-style: var(--material-theme-title-medium-font-style);
  font-weight: var(--material-theme-title-medium-font-weight);
  /* Aligns items (icon and text) vertically */
  justify-content: center;
  letter-spacing: var(--material-theme-title-medium-letter-spacing);
  line-height: var(--material-theme-title-medium-line-height);
  /* No border */
  padding: 10px 20px;
  /* Centers items horizontally */
}

/* Style for the icon inside the button */
.redirect-icon {
  /* Width of the icon */
  height: 20px;
  /* Height of the icon */
  margin-right: 10px;
  width: 20px;
  /* Space between the icon and the text */
}

/* Style for the text inside the button */
.buy-on-merchant-name {
  font-weight: bold;
  /* Makes the text bold */
}

.side-sheet-product-card {
  align-items: flex-start;
  align-self: center;
  background-color: var(--material-themesyslightsurface);
  border-radius: 15px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  margin-left: 5px;
  margin-top: 5px;
  max-width: 300px;
  min-height: 1700px;
  overflow: hidden;
  position: relative;
}

.side-sheet-product-card .top-container {
  align-items: flex-start;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 150%;
  position: relative;
  width: 100%;
}

.side-sheet-product-card .top-container .content-wrapper {
  height: 120%;
  left: 0;
  position: absolute;
  top: 30px;
  width: 100%;
}

.side-sheet-product-card .top-container .product-info {
  align-items: flex-start;
  background-color: var(--material-themesyslightsurface-fifty);
  display: none;
  flex-wrap: wrap;
  gap: 0px 0px;
  left: 0px;
  padding: 5px;
  position: absolute;
  top: 0px;
  width: 100%;
}

.side-sheet-product-card .product-content {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-grow: 1;
  gap: 16px;
  padding: 0px 16px 0px 0px;
  position: relative;
  z-index: 500;
}

.side-sheet-product-card .product-text {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 4px;
  position: relative;
}

.side-sheet-product-card .text-wrapper {
  align-self: stretch;
  color: var(--material-themesyslighton-surface);
  font-family: var(--material-theme-title-medium-font-family);
  font-size: var(--material-theme-title-medium-font-size);
  font-style: var(--material-theme-title-medium-font-style);
  font-weight: var(--material-theme-title-medium-font-weight);
  letter-spacing: var(--material-theme-title-medium-letter-spacing);
  line-height: var(--material-theme-title-medium-line-height);
  margin-top: -1px;
  position: relative;
}

.side-sheet-product-card .top-container .content-wrapper .product-info .icons {
  align-items: flex-start;
  display: inline-flex;
  gap: 20px;
  position: absolute;
  /* Set position to absolute */
  right: 10px;
  /* Anchor to the right with 10px offset */
  top: 10px;
  /* Anchor to the top with 10px offset */
}

.side-sheet-product-card .compare {
  display: none;
  height: 24px;
  position: relative;
  width: 24px;
}

.side-sheet-product-card .favorite {
  display: none;
  height: 24px;
  position: relative;
  width: 24px;
}

.side-sheet-product-card .bookmark {
  display: none;
  height: 24px;
  position: relative;
  width: 24px;
}

.side-sheet-product-card .share {
  display: none;
  height: 24px;
  position: relative;
  width: 24px;
}

/* Basic styles for the swiper container */
.side-sheet-product-card .product-image-container {
  height: 100%;
  overflow: hidden;
  /* Adjust the height as needed */
  position: relative;
  width: 100%;
}

.side-sheet-product-card .photo-advance {
  align-items: center;
  /* 10px padding on both sides */
  display: flex;
  justify-content: space-between;
  left: 0;
  /* Fill the entire width of the container */
  padding: 0 10px;
  position: absolute;
  top: 50%;
  /* Start from the very left edge */
  transform: translateY(-50%);
  width: 100%;
  /* This will space out the child elements */
}

.side-sheet-product-card .photo-advance .handle-prev,
.side-sheet-product-card .photo-advance .handle-next {
  /* Center the content horizontally */
  align-items: center;
  display: flex;
  height: 30px;
  /* Enables flex properties for centering the content */
  justify-content: center;
  /* Center the content vertically */
  width: 30px;
}

.side-sheet-product-card .handle-container {
  height: 28px;
  margin-left: -4px;
  position: relative;
  width: 28px;
}

.side-sheet-product-card .img {
  height: 28px;
  margin-right: -4px;
  position: relative;
  width: 28px;
}

.side-sheet-product-card .linear-progress {
  background-color: var(--material-themesyslightsurface-container-highest-half);
  bottom: 27%;
  /* Full width of the container or as required */
  /* additional styling as needed */
  height: 4px;
  /* Adjust as needed for vertical positioning */
  left: 50%;
  position: absolute;
  /* Centers the progress bar horizontally */
  transform: translate(-50%, -50%);
  /* Ensures exact centering */
  width: 80%;
}

.side-sheet-product-card .linear-progress .progress-bar {
  background-color: var(--material-themesyslightprimary);
  height: 4px;
  width: 30px;
}

.side-sheet-product-card .product-bottom {
  /* or column, depending on your design */
  align-items: center;
  display: flex;
  flex-direction: row;
  /* or another value to align items vertically */
  justify-content: space-between;
  /* or another value to align items horizontally */
  margin-top: 20px;
}

.side-sheet-product-card .sheet-product-details .headline {
  align-items: flex-start;
  align-self: flex-start;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  margin-bottom: 20px;
  padding: 0px 0px;
  position: relative;
}

.side-sheet-product-card .sheet-product-details .headline .case-title {
  color: var(--material-themesyslighton-surface);
  display: flex;
  font-family: var(--material-theme-body-large-font-family);
  font-size: var(--material-theme-body-large-font-size);
  font-style: var(--material-theme-body-large-font-style);
  font-weight: var(--material-theme-body-large-font-weight);
  letter-spacing: var(--material-theme-body-large-letter-spacing);
  line-height: var(--material-theme-body-large-line-height);
  position: relative;
}

.side-sheet-product-card .sheet-product-details .headline .case-one-line {
  color: var(--material-themesyslighton-surface);
  display: none;
  font-family: var(--material-theme-body-large-font-family);
  font-size: var(--material-theme-body-large-font-size);
  font-style: var(--material-theme-body-large-font-style);
  font-weight: var(--material-theme-body-large-font-weight);
  letter-spacing: var(--material-theme-body-large-letter-spacing);
  line-height: var(--material-theme-body-large-line-height);
  position: relative;
  width: 320px;
}

.side-sheet-product-card .sheet-product-details {
  align-items: center;
  align-self: stretch;
  display: flex;
  /* You may adjust the left position as needed */
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 0px;
  justify-content: flex-end;
  /* Add this line to anchor it to the bottom */
  left: 0;
  position: absolute;
  /* Change this line to position: absolute; */
  top: 455;
  width: 100%;
}

.side-sheet-product-card .product-description {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 6px;
  overflow: scroll;
  padding: 4px 0px;
  position: relative;
  width: 100%;
}

.side-sheet-product-card .product-description-wrapper {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  /* Change flex direction to column */
  flex: 0 0 auto;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 0px 1px;
  margin-bottom: 0px;
  position: relative;
  width: 100%;
}

.side-sheet-product-card .p {
  align-self: stretch;
  color: var(--material-themesyslighton-surface-variant);
  display: block;
  /* Changed from -webkit-box */
  flex: 1;
  font-family: var(--material-theme-body-small-font-family);
  font-size: var(--material-theme-body-small-font-size);
  font-style: var(--material-theme-body-small-font-style);
  font-weight: var(--material-theme-body-small-font-weight);
  /* Justify the text */
  hyphens: auto;
  letter-spacing: var(--material-theme-body-small-letter-spacing);
  line-height: var(--material-theme-body-small-line-height);
  margin-top: -1px;
  overflow: visible;
  /* Adjusted to show the full text */
  position: relative;
  text-align: justify;
  /* Automatic hyphenation */
}

.side-sheet-product-card .img {
  margin-bottom: 50px;
  margin-left: 10px;
  margin-top: 10px;
  width: 275px;
}

.side-sheet-product-card .buy-on-merchant-site {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  height: 40px;
  position: relative;
}

.side-sheet-product-card .button {
  align-items: flex-start;
  background-color: var(--material-themesyslightprimary);
  border: none;
  border-radius: 10px;
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  height: 40px;
  justify-content: flex-end;
  overflow: hidden;
  position: relative;
}

.side-sheet-product-card .state-layer {
  align-items: center;
  display: inline-flex;
  flex: 1;
  flex-grow: 1;
  gap: 8px;
  justify-content: center;
  padding: 5px;
  position: relative;
}

.side-sheet-product-card .redirect-icon {
  height: 18px;
  position: relative;
  width: 18px;
}

.side-sheet-product-card .buy-on-merchant-name {
  color: var(--material-themesyslightsurface);
  font-family: var(--material-theme-label-small-font-family);
  font-size: var(--material-theme-label-small-font-size);
  font-style: var(--material-theme-label-small-font-style);
  font-weight: var(--material-theme-label-small-font-weight);
  letter-spacing: var(--material-theme-label-small-letter-spacing);
  line-height: var(--material-theme-label-small-line-height);
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.loading-overlay {
  background-color: var(--material-themesyslightsurface-fifty);
  display: none;
  /*block*/
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 999;
}

.loading-bar {
  align-items: center;
  align-self: stretch;
  background-color: var(--material-themesyslightsurface-variant);
  display: flex;
  /*flex*/
  /* Changed from flex-start to center to align items vertically */
  justify-content: center;
  margin-left: 0px;
  min-height: 10px;
  /* Added to center items horizontally */
  position: relative;
  width: 100%;
}

.loading-bar::before {
  animation: load 1.5s infinite linear;
  background: linear-gradient(to right, transparent, var(--material-themesyslightsecondary), transparent);
  content: '';
  display: block;
  height: 100%;
  width: 50%;
}

@keyframes load {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(100%);
  }
}

table {
  background-color: var(--material-themesyslightsurface);
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

td {
  background-color: var(--material-themesyslightsurface);
  padding: 0;
  /* Remove cell padding */
}

.flex-container {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  justify-content: center;
  margin: 75px;
  margin-bottom: 0px;
  margin-top: 25px;
  max-width: 1600px;
  padding: 20px;
}

.column {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-top: 50px;
  width: 23%;
  /* Adjust as needed */
}

.product-card {
  align-items: flex-start;
  background-color: var(--material-themesyslightsurface);
  border-radius: 15px;
  box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 575px;
  margin-bottom: 10px;
  max-width: 300px;
  overflow: hidden;
  position: relative;
}

.product-card .top-container {
  align-items: flex-start;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 150%;
  position: relative;
  width: 100%;
}

.product-card .top-container .content-wrapper {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.product-card .product-info {
  align-items: flex-start;
  background-color: var(--material-themesyslightsurface-fifty);
  display: flex;
  flex-wrap: wrap;
  gap: 0px 0px;
  left: 0;
  padding: 5px;
  position: absolute;
  top: 0;
  width: 100%;
}

.product-card .product-content {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-grow: 1;
  gap: 16px;
  padding: 0px 0px 0px 0px;
  position: relative;
}

.product-card .product-text {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 4px;
  position: relative;
}

.product-card .text-wrapper {
  align-self: stretch;
  color: var(--material-themesyslighton-surface);
  font-family: var(--material-theme-title-medium-font-family);
  font-size: var(--material-theme-title-medium-font-size);
  font-style: var(--material-theme-title-medium-font-style);
  font-weight: var(--material-theme-title-medium-font-weight);
  letter-spacing: var(--material-theme-title-medium-letter-spacing);
  line-height: var(--material-theme-title-medium-line-height);
  margin-top: -1px;
  position: relative;
}

.product-card .text-wrapper-description {
  align-self: stretch;
  color: var(--material-themesyslighton-surface);
  font-family: var(--material-theme-body-small-font-family);
  font-size: var(--material-theme-body-small-font-size);
  font-style: var(--material-theme-body-small-font-style);
  font-weight: var(--material-theme-body-small-font-weight);
  letter-spacing: var(--material-theme-body-small-letter-spacing);
  line-height: var(--material-theme-body-small-line-height);
  margin-top: -1px;
  position: relative;
}

.product-card .div {
  color: var(--material-themesyslighton-surface);
  flex: 1;
  flex-grow: 1;
  font-family: var(--material-theme-body-small-font-family);
  font-size: var(--material-theme-body-small-font-size);
  font-style: var(--material-theme-body-small-font-style);
  font-weight: var(--material-theme-body-small-font-weight);
  letter-spacing: var(--material-theme-body-small-letter-spacing);
  line-height: var(--material-theme-body-small-line-height);
  position: relative;
  width: 56.81px;
}

.product-card .top-container .content-wrapper .product-info .icons {
  align-items: flex-start;
  display: inline-flex;
  gap: 20px;
  position: absolute;
  /* Set position to absolute */
  right: 10px;
  /* Anchor to the right with 10px offset */
  top: 10px;
  /* Anchor to the top with 10px offset */
}

.product-card .compare {
  display: none;
  height: 24px;
  position: relative;
  width: 24px;
}

.product-card .favorite {
  display: none;
  height: 24px;
  position: relative;
  width: 24px;
}

.product-card .bookmark {
  display: none;
  height: 24px;
  position: relative;
  width: 24px;
}

.product-card .share {
  display: none;
  height: 24px;
  position: relative;
  width: 24px;
}

.product-card .open-in-full {
  height: 16px;
  position: relative;
  width: 16px;
}

/* Basic styles for the swiper container */
.swiper-container {
  height: 100%;
  overflow: hidden;
  /* Adjust the height as needed */
  position: relative;
  width: 100%;
}

/* Basic styles for the swiper wrapper */
.swiper-wrapper {
  display: flex;
  height: 100%;
  /* Adjust the height as needed */
  position: relative;
  transition: transform 0.3s ease;
  width: 100%;
}

/* Styles for each slide */
.swiper-slide {
  flex: 0 0 auto;
  height: 100%;
  /* Maintain full height of the swiper container */
  position: relative;
  width: 100%;
  /* Each slide taking full width of the container */
}

/* Styles specifically for images and videos within slides */
.swiper-slide img,
.swiper-slide video {
  display: block;
  /* Scale the width to 100% of the container */
  height: auto;
  /* Scale the height automatically to maintain the aspect ratio */
  max-height: 575px;
  /* Maximum height for media */
  object-fit: cover;
  /* Cover the container while maintaining aspect ratio */
  object-position: center;
  width: 100%;
  /* Center the image or video within its container */
}

.photo-advance {
  align-items: center;
  /* 10px padding on both sides */
  display: flex;
  justify-content: space-between;
  left: 0;
  /* Fill the entire width of the container */
  padding: 0 10px;
  position: absolute;
  top: 50%;
  /* Start from the very left edge */
  transform: translateY(-50%);
  width: 100%;
  /* This will space out the child elements */
}

.photo-advance .handle-prev,
.photo-advance .handle-next {
  /* Center the content horizontally */
  align-items: center;
  display: flex;
  height: 30px;
  /* Enables flex properties for centering the content */
  justify-content: center;
  /* Center the content vertically */
  width: 30px;
}

.product-card .handle-container {
  height: 28px;
  margin-left: -4px;
  position: relative;
  width: 28px;
}

.product-card .img {
  height: 28px;
  margin-right: -4px;
  position: relative;
  width: 28px;
}

.product-card .linear-progress {
  background-color: var(--material-themesyslightsurface-container-highest-half);
  bottom: 5%;
  /* Full width of the container or as required */
  /* additional styling as needed */
  height: 4px;
  /* Adjust as needed for vertical positioning */
  left: 50%;
  position: absolute;
  /* Centers the progress bar horizontally */
  transform: translate(-50%, -50%);
  /* Ensures exact centering */
  width: 80%;
}

.linear-progress .progress-bar {
  background-color: var(--material-themesyslightprimary);
  height: 4px;
  width: 30px;
}

.product-bottom {
  /* or column, depending on your design */
  align-items: center;
  display: flex;
  flex-direction: row;
  /* or another value to align items vertically */
  justify-content: space-between;
  /* or another value to align items horizontally */
}

.product-card .product-details .headline {
  align-items: flex-start;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  margin-bottom: 20px;
  padding: 0px 0px;
  position: relative;
  width: 268px;
}

.product-card .product-details .headline .case-title {
  color: var(--material-themesyslighton-surface);
  display: flex;
  font-family: var(--material-theme-title-medium-bold-font-family);
  font-size: var(--material-theme-title-medium-bold-font-size);
  font-style: var(--material-theme-title-medium-bold-font-style);
  font-weight: var(--material-theme-title-medium-bold-font-weight);
  letter-spacing: var(--material-theme-title-medium-bold-letter-spacing);
  line-height: var(--material-theme-title-medium-bold-line-height);
  margin-right: -70px;
  position: relative;
  width: 320px;
}

.product-card .product-details .headline .case-one-line {
  color: var(--material-themesyslighton-surface);
  display: none;
  font-family: var(--material-theme-body-large-font-family);
  font-size: var(--material-theme-body-large-font-size);
  font-style: var(--material-theme-body-large-font-style);
  font-weight: var(--material-theme-body-large-font-weight);
  letter-spacing: var(--material-theme-body-large-letter-spacing);
  line-height: var(--material-theme-body-large-line-height);
  margin-right: -70px;
  position: relative;
  width: 320px;
}

.product-card .product-details {
  align-items: center;
  align-self: stretch;
  /* Change this line to position: absolute; */
  bottom: 0;
  display: flex;
  /* You may adjust the left position as needed */
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 5px;
  justify-content: flex-end;
  /* Add this line to anchor it to the bottom */
  left: 0;
  position: absolute;
  width: 100%;
}

.product-details.collapsed {
  display: none;
}

.product-card .product-description {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 6px;
  overflow: visible;
  padding: 4px 10px 10px 5px;
  position: relative;
  width: 100%;
}

.product-card .product-description-wrapper {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 1px 1px;
  position: relative;
  width: 100%;
}

.product-card .p {
  align-self: stretch;
  color: var(--material-themesyslighton-surface-variant);
  display: block;
  /* Changed from -webkit-box */
  flex: 1;
  font-family: var(--material-theme-body-small-font-family);
  font-size: var(--material-theme-body-small-font-size);
  font-style: var(--material-theme-body-small-font-style);
  font-weight: var(--material-theme-body-small-font-weight);
  /* Justify the text */
  hyphens: auto;
  letter-spacing: var(--material-theme-body-small-letter-spacing);
  line-height: var(--material-theme-body-small-line-height);
  margin-top: -1px;
  overflow: visible;
  /* Adjusted to show the full text */
  position: relative;
  text-align: justify;
  /* Automatic hyphenation */
}

.product-card .buttons {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  /* Center horizontally */
  justify-content: flex-start;
  /* Center vertically */
  margin-bottom: 5px;
  padding-right: 5px;
  position: relative;
  width: 100%;
}

.product-card .tn {
  align-items: center;
  align-self: stretch;
  display: flex;
}

.product-card .icon-spacer {
  flex: 1;
  flex-grow: 1;
  position: relative;
}

.product-card .buy-on-merchant-site {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  height: 40px;
  position: relative;
}

.product-card .button {
  align-items: flex-start;
  background-color: var(--material-themesyslightprimary);
  border: none;
  border-radius: 10px;
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  height: 40px;
  justify-content: flex-start;
  overflow: hidden;
  position: relative;
}

.product-card .state-layer {
  align-items: center;
  display: inline-flex;
  flex: 1;
  flex-grow: 1;
  gap: 8px;
  justify-content: center;
  padding: 5px;
  position: relative;
}

.product-card .state-layer .redirect-icon {
  height: 18px;
  position: relative;
  width: 18px;
}

.product-card .buy-on-merchant-name {
  color: var(--material-themesyslightsurface);
  font-family: var(--material-theme-label-small-font-family);
  font-size: var(--material-theme-label-small-font-size);
  font-style: var(--material-theme-label-small-font-style);
  font-weight: var(--material-theme-label-small-font-weight);
  letter-spacing: var(--material-theme-label-small-letter-spacing);
  line-height: var(--material-theme-label-small-line-height);
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.bottom-navigation.hidden {
  transform: translateY(100%);
  /* Moves the navigation bar down out of the view */
}

.bottom-navigation {
  align-items: flex-start;
  background-color: var(--material-themesyslightsurface-variant);
  bottom: 0px;
  display: none;
  gap: 8px;
  left: 0px;
  padding: 0px 8px;
  position: fixed;
  /* ensure this is a high value */
  transition: transform 0.3s ease-in-out;
  width: 100%;
  z-index: 9999;
}

.bottom-navigation .icon-container {
  flex: 0 0 auto;
  margin-top: -6px;
  position: relative;
  width: 64px;
}

.bottom-navigation .ai-assistant {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 2px;
  justify-content: center;
  position: relative;
}

.bottom-navigation .ai-assistant .input-text {
  align-items: center;
  border-radius: 100px;
  display: none;
  height: 300px;
  justify-content: center;
  left: -100px;
  max-width: 310px;
  position: absolute;
  top: -300px;
  width: 330px;
}

.bottom-navigation .ai-assistant .input-text .div {
  background-color: var(--material-themesyslighton-primary);
  border: none;
  border-radius: 20px;
  color: var(--material-themesyslighton-primary-fixed-variant);
  flex: 1;
  font-family: var(--material-theme-body-largre-font-family);
  font-size: var(--material-theme-body-large-font-size);
  font-style: var(--material-theme-body-large-font-style);
  font-weight: var(--material-theme-body-large-font-weight);
  letter-spacing: var(--material-theme-body-large-letter-spacing);
  line-height: var(--material-theme-body-large-line-height);
  margin-top: -1px;
  position: relative;

  /* Placeholder styling */
  ::placeholder {
    background-color: var(--material-themesyslightprimary);
  }

  /* Styling for when the input is in focus */
  :focus {
    outline: none;
    /* Removes the default outline */
  }
}

.bottom-navigation .ai-assistant .text-wrapper {
  margin-left: -40px;
}

.bottom-navigation .filter {
  align-items: center;
  align-self: stretch;
  display: none;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 2px;
  justify-content: center;
  position: relative;
}

.bottom-navigation .browse {
  align-items: center;
  align-self: stretch;
  display: none;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 2px;
  justify-content: center;
  position: relative;
}

.bottom-navigation .search {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 2px;
  justify-content: center;
  position: relative;
}

.bottom-navigation .browse .img {
  height: 36px;
}

.bottom-navigation .filter .img {
  height: 36px;
}

.bottom-navigation .ai-assistant .img {
  height: 36px;
  transform: rotate(180deg);
}

.bottom-navigation .text-wrapper {
  color: var(--material-themesyslighttertiary);
  font-family: var(--material-theme-label-small-font-family);
  font-size: var(--material-theme-label-small-font-size);
  font-style: var(--material-theme-label-small-font-style);
  font-weight: var(--material-theme-label-small-font-weight);
  height: 20px;
  letter-spacing: var(--material-theme-label-small-letter-spacing);
  line-height: var(--material-theme-label-small-line-height);
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: 47px;
}

.bottom-navigation .div {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 8px;
  justify-content: center;
  padding: 6px 0px 0px;
  position: relative;
}

/* maximized state */
#chat-container.maximized {
  width: 350px;
}

#chat-container {
  background-color: var(--material-themesyslightsurface);
  border-radius: 8px;
  /* Fixed positioning relative to the viewport */
  bottom: 10px;
  box-shadow: 0 0 10px var(--material-themesyslightshadow-tenth);
  display: block;
  overflow: hidden;
  position: fixed;
  /* 10px from the bottom */
  right: 15px;
  transition: width 0.3s ease;
  /* 10px from the right */
  width: 100px;
  z-index: 5000;
  /* Add transition for smooth width change */
}

#chat-header {
  background-color: var(--material-themesyslightsurface-variant);
  color: var(--material-themesyslighton-surface-variant);
  font-family: var(--material-theme-body-large-font-family);
  font-size: 18px;
  font-size: var(--material-theme-body-large-font-size);
  font-style: var(--material-theme-body-large-font-style);
  font-weight: var(--material-theme-body-large-font-weight);
  letter-spacing: var(--material-theme-body-large-letter-spacing);
  line-height: var(--material-theme-body-large-line-height);
  padding: 20px;
  text-align: center;
}

.chat-state-layer.maximized {
  width: 350px;
}

.chat-state-layer {
  /* Align to the right of the header */
  cursor: pointer;
  /* Align to the top of the header */
  display: flex;
  flex-direction: row;
  left: 5px;
  max-height: 40px;
  position: absolute;
  top: 5px;
  transition: width 0.3s ease;
  width: 80px;
  /* Add transition for smooth width change */
  /* Changes the cursor to a pointer to indicate it's clickable */
}

.chat-state-layer .img-caret.rotated {
  transform: rotate(90deg);
  /* Rotate the caret */
}

.chat-state-layer .img-caret {
  align-self: flex-end;
  display: flex;
  /* Set the width as desired */
  height: 36px;
  /* Removes any default image inline spacing */
  width: 36px;
  /* Set the height as desired */
}

.chat-state-layer .img-close {
  display: none;
  /* Set the width as desired */
  height: 36px;
  /* Removes any default image inline spacing */
  width: 36px;
  /* Set the height as desired */
}

.chat-state-layer .img-sofia {
  align-self: flex-start;
  display: flex;
  /* Set the width as desired */
  height: 24px;
  /* Removes any default image inline spacing */
  margin-bottom: 5px;
  margin-left: auto;
  width: 100px;
  /* Set the height as desired */
}

#chat-box {
  background-color: var(--material-themesyslightsurface);
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 0px;
  overflow-y: auto;
  padding: 0px;
  transition: height 0.3s ease, padding 0.3s ease;
  /* Smooth transition for height and padding */
}

#chat-box.expanded {
  /* Expanded padding */
  box-sizing: border-box;
  height: 400px;
  /* Expanded height */
  padding: 10px;
  /* Include padding in the height calculation */
}

.message {
  border-radius: 18px;
  max-width: 70%;
  padding: 10px;
  word-wrap: break-word;
}

.shopper {
  align-self: flex-end;
  background-color: var(--material-themesyslightsecondary);
  color: var(--material-themesyslighton-secondary);
  font-family: var(--material-theme-body-large-font-family);
  font-size: var(--material-theme-body-large-font-size);
  font-style: var(--material-theme-body-large-font-style);
  font-weight: var(--material-theme-body-large-font-weight);
  letter-spacing: var(--material-theme-body-large-letter-spacing);
  line-height: var(--material-theme-body-large-line-height);
  margin-right: 15px;
  position: relative;
}

.shopper::after {
  background-color: var(--material-themesyslightsecondary);
  /* Change to user bubble color */
  border-radius: 50%;
  bottom: 0;
  /* Rotate in the opposite direction */
  clip-path: polygon(0 50%, 50% 100%, 100% 50%, 50% 50%);
  content: "";
  height: 20px;
  position: absolute;
  right: -20px;
  transform: translate(-5px, -10px) rotate(45deg);
  /* Align to the right side */
  width: 20px;
  z-index: 1;
}

.user {
  align-self: flex-start;
  background-color: var(--material-themesyslighttertiary);
  color: var(--material-themesyslighton-primary);
  font-family: var(--material-theme-body-large-font-family);
  font-size: var(--material-theme-body-large-font-size);
  font-style: var(--material-theme-body-large-font-style);
  font-weight: var(--material-theme-body-large-font-weight);
  letter-spacing: var(--material-theme-body-large-letter-spacing);
  line-height: var(--material-theme-body-large-line-height);
  margin-left: 15px;
  position: relative;
}

.user::after {
  background-color: var(--material-themesyslighttertiary);
  border-radius: 50%;
  bottom: 0;
  clip-path: polygon(0 50%, 50% 100%, 100% 50%, 50% 50%);
  content: "";
  height: 20px;
  left: -20px;
  position: absolute;
  transform: translate(5px, -10px) rotate(-45deg);
  width: 20px;
  z-index: 1;
}

#input-container.expanded {
  display: flex;
}

#input-container {
  background-color: var(--material-themesyslightsurface-variant);
  border: none;
  display: none;
  padding: 10px;

  /* Placeholder styling */
  ::placeholder {
    color: var(--material-themesyslighton-surface-variant-half);
    font-family: var(--material-theme-body-medium-font-family);
    font-size: 18px;
    font-size: var(--material-theme-body-medium-font-size);
    font-style: var(--material-theme-body-medium-font-style);
    font-weight: var(--material-theme-body-medium-font-weight);
    letter-spacing: var(--material-theme-body-medium-letter-spacing);
    line-height: var(--material-theme-body-medium-line-height);
    padding: 10px;
    text-align: center;
  }
}

#chat-input {
  background-color: var(--material-themesyslightsurface);
  border: 2px solid var(--material-themesyslightsurface-variant);
  border-radius: 18px;
  color: var(--material-themesyslighton-surface);
  flex-grow: 1;
  margin-right: 10px;
  padding: 10px;
}

#chat-input:focus {
  /* Removes the default focus outline */
  border: 2px solid var(--material-themesyslighttertiary);
  outline: none;
  /* Your desired border color for focus */
  /* Add other styles you want to apply on focus, like box-shadow if needed */
}

#send-btn {
  background-color: var(--material-themesyslightprimary);
  border: none;
  border-radius: 18px;
  color: var(--material-themesyslighton-primary);
  cursor: pointer;
  padding: 10px 15px;
}

@keyframes smoothRotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes showPersonalShopper {

  0%,
  35%,
  100% {
    opacity: 0;
    transform: translateY(100%);
  }

  10%,
  30% {
    opacity: 1;
    transform: translateY(0);
  }
}

:root {
  --is-mobile: 0;
}

/* Mobile Phones */
@media (max-aspect-ratio: 3/5) {
  :root {
    --is-mobile: 1;

    .beta-logo {
      display: none;
    }

    #ID_TOK_TOKI_WIDGET{
        display: grid;
    }

    .splash-flex-container,
    .splash-container {
      height: 600px;
    }

    .splash-flex-container {
      height: 100%;
      margin: 0px;
      max-height: none;
      max-width: 100vw;
      min-height: 40vh;
      width: 85vw;
    }

    .category-hero {
      height: 100%;
      margin: 0px;
      max-height: 90vh;
      max-width: 85vw;
      min-height: 40vh;
    }

	.category-hero[data-type="display-explainer"] h1 {
      font-size: 2rem;
      font-weight: 900;
      line-height: 1.0;
      top: 35%;
      /* Center the h1 element horizontally */
      transform: translate(-50%, -50%);
    }

	.category-hero[data-type="display-explainer"] h3 {
      font-size: 1rem;
      font-weight: 700;
      top: 80%;
      transform: translate(-50%, -50%);
    }
    
    .category-hero img {
      /* Ensure the image covers the container */
      height: 100%;
      /* Ensure the image stays behind the text */
      max-height: 90vh;
      max-width: 85vw;
      /* Maintain aspect ratio */
      object-fit: cover;
      /* Cover the area without distorting the image */
      width: auto;
      /* Ensure the image is positioned correctly within the container */
      z-index: 1;
    }

    .splash-container {
      display: none;
      flex-direction: column;
    }

    .splash-container[data-type="admin"],
    .splash-container[data-type="admin-short"] {
      display: flex;
      max-height: none;
    }

    .splash-flex-container .category-hero[data-type="display-board-wide"] h1 {
      font-size: 4rem;
      font-weight: 900;
      line-height: 1.0;
      top: 50%;
      /* Center the h1 element horizontally */
      transform: translate(-50%, -50%);
    }

    .splash-flex-container .category-hero[data-type="display-board-wide"] h2 {
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1.0;
      top: 50%;
      /* Center the h1 element horizontally */
      transform: translate(-50%, -50%);
    }

    .splash-flex-container .category-hero[data-type="display-board"] h2 {
      top: 50%;
      /* Center the h1 element horizontally */
      transform: translate(-50%, -50%);
    }

    .splash-flex-container .category-hero[data-type="display-board-wide"] h3 {
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1.0;
      top: 80%;
      /* Center the h1 element horizontally */
      transform: translate(-50%, -50%);
    }

    .splash-flex-container .category-hero[data-type="display-board-wide"] h4 {
      font-size: 4rem;
      font-weight: 900;
      line-height: 1.0;
      top: 50%;
      /* Center the h1 element horizontally */
      transform: translate(-50%, -50%);
    }

    .splash-flex-container .category-hero[data-type="display-board-wide"] h5 {
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1.0;
    }

    .category-hero h1 {
      font-size: 5rem;
      font-weight: 700;
      top: 50%;
    }

    .category-hero h2 {
      font-size: 2rem;
      font-weight: 500;
      top: 90%;
    }

    .category-hero h3 {
      font-size: 1rem;
      font-weight: 700;
    }

    .sub-category h1 {
      font-size: 2.5rem;
      font-weight: 700;
      top: 50%;
    }

    .sub-category h2 {
      font-size: 1rem;
      font-weight: 500;
      top: 50%;
    }

    .sub-category h4 {
      font-size: 2.5rem;
      font-weight: 700;
      top: 50%;
    }

    .sub-category h5 {
      font-size: .9rem;
      font-weight: 700;
      top: 50%;
    }

    .pages {
      margin-top: 75px;
    }

	.section,
		.section #beta {
		margin-left: 0px;
		width: 100vw;
	}

    .mini-categories {
      gap: 10px;
      margin-left: -10px;
      margin-top: 45px;
    }

    .body {
      max-width: 100%;
      overflow-x: hidden;
    }

    .flex-container {
      gap: 0px;
      margin: 0px;
      margin-bottom: 0px;
      margin-top: 25px;
      padding: 0px;
    }

    .column {
      gap: 0px;
      margin: 1px;
      margin-bottom: 10px;
      margin-left: 0px;
      width: 100%;
    }

    .product-card {
      align-self: center;
      height: calc(var(--product-card-size) * 1.5);
      width: 176px;
    }

    .product-card .open-in-full {
      display: block;
    }

    .top-bar-full .navbar {
      display: none;
    }

    /*
    .top-bar-full .search-view {
    display: none;
    }
    */
    .photo-advance {
      display: none;
    }

    .bottom-navigation {
      display: flex;
    }

    .color-fill:not(.visible) {
      display: none;
      min-height: 1000px;
    }

    .filter-bar .scroll-container:not(.visible) {
      display: none;
    }

    /* Initial state: visible */
    .filter-dialog,
    .filter-dialog {
      height: auto;
    }

    .filter-dialog .button-container {
      flex-direction: row;
    }

    /* Add this to your existing CSS */
    .top-bar-full {
      position: fixed;
      top: 0;
      transition: transform 0.3s ease-in-out;
      width: 100%;
      z-index: 1000;
      /* Ensure the bar stays above other content */
    }

    .top-bar-full.hidden {
      transform: translateY(-100%);
      /* Moves the top bar up out of the view */
    }

    .filter-dialog .frame {
      max-height: 650px;
      /* to enable scrolling on mobile*/
    }

    .filter-dialog .filter-bar {
      flex-direction: column;
      flex-wrap: nowrap;
      /* mobile*/
    }

    .top-bar-full .trailing-icon-frame {
      justify-content: flex-start;
      max-width: 150px
        /*display: none;*/
    }

    .filter-frame .filter {
      display: none;
    }

    .product-side-sheet {
      max-width: 500px;
    }

    #chat-container {
      /* Ensures the chat container is above the overlay */
      box-shadow: 0 4px 15px var(--material-themesyslightshadow-tenth);
      display: none;
      margin-bottom: 65px;
      z-index: 5000;
      /* Large shadow for the chat container */
    }

    .chat-state-layer {
      display: flex;
    }

    .chat-state-layer .img-close {
      display: flex;
    }

    .chat-state-layer .img-caret {
      display: none;
    }

    .filter-mobile-visual {
      display: none;
    }

    .breadcrumb-categories {
      display: none;
    }
  }

  #chat-box.expanded {
    height: 275px;
    /* Expanded height */
  }
  
  
  /* Maintenance */
  .category-hero[data-type="OOS"] {
    align-items: center;
    align-self: center;
    display: flex;
    max-width: 100vw;
  }

  #mobileImage {
    display: block;
  }

  #desktopImage {
    display: none;
  }
}

/* Tablet in Portrait Mode */
@media only screen and (min-device-width: 600px) and (max-device-width: 1400px) and (orientation: portrait) {
  :root {
    --is-mobile: 1;
    --is-tablet-portrait: 1;

    .beta-logo {
      display: none;
    }

    .splash-flex-container,
    .splash-container {
      height: 600px;
    }

    .splash-flex-container {
      height: 100%;
      margin: 0px;
      max-height: none;
      max-width: 100vw;
      min-height: 40vh;
      width: 85vw;
    }

	.category-hero[data-type="display-explainer"] h1 {
      font-size: 2rem;
      font-weight: 900;
      line-height: 1.0;
      top: 35%;
      /* Center the h1 element horizontally */
      transform: translate(-50%, -50%);
}

    .category-hero {
      height: 100%;
      margin: 0px;
      max-height: 90vh;
      max-width: 85vw;
      min-height: 40vh;
    }

    .category-hero img {
      /* Ensure the image covers the container */
      height: 100%;
      /* Ensure the image stays behind the text */
      max-height: 90vh;
      max-width: 85vw;
      /* Maintain aspect ratio */
      object-fit: cover;
      /* Cover the area without distorting the image */
      width: auto;
      /* Ensure the image is positioned correctly within the container */
      z-index: 1;
    }

    .splash-container {
      display: none;
      flex-direction: column;
    }

    .splash-container[data-type="admin"],
    .splash-container[data-type="admin-short"] {
      display: flex;
      max-height: none;
    }

    .splash-flex-container .category-hero[data-type="display-board-wide"] h1 {
      font-size: 4rem;
      font-weight: 900;
      line-height: 1.0;
      top: 50%;
      /* Center the h1 element horizontally */
      transform: translate(-50%, -50%);
    }

    .splash-flex-container .category-hero[data-type="display-board-wide"] h2 {
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1.0;
      top: 50%;
      /* Center the h1 element horizontally */
      transform: translate(-50%, -50%);
    }

    .splash-flex-container .category-hero[data-type="display-board-wide"] h3 {
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1.0;
      top: 80%;
      /* Center the h1 element horizontally */
      transform: translate(-50%, -50%);
    }

    .splash-flex-container .category-hero[data-type="display-board-wide"] h4 {
      font-size: 4rem;
      font-weight: 900;
      line-height: 1.0;
      top: 50%;
      /* Center the h1 element horizontally */
      transform: translate(-50%, -50%);
    }

    .splash-flex-container .category-hero[data-type="display-board-wide"] h5 {
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1.0;
    }

    .category-hero h1 {
      font-size: 5rem;
      font-weight: 700;
      top: 50%;
    }

    .category-hero h2 {
      font-size: 2rem;
      font-weight: 500;
      top: 90%;
    }

    .category-hero h3 {
      font-size: 1rem;
      font-weight: 700;
    }

    .sub-category h1 {
      font-size: 2.5rem;
      font-weight: 700;
      top: 50%;
    }

    .sub-category h2 {
      font-size: 1rem;
      font-weight: 500;
      top: 50%;
    }

    .sub-category h4 {
      font-size: 2.5rem;
      font-weight: 700;
      top: 50%;
    }

    .sub-category h5 {
      font-size: .9rem;
      font-weight: 700;
      top: 50%;
    }

    .pages {
      margin-top: 75px;
    }

	.section,
		.section #beta {
		margin-left: 0px;
		width: 100vw;
	}

    .mini-categories {
      gap: 10px;
      margin-left: -10px;
      margin-top: 45px;
    }

    .flex-container {
      gap: 1px;
      margin: 0px;
      margin-bottom: 0px;
      margin-top: 20px;
      overflow-x: auto;
      padding: 0px;
    }

    .column {
      gap: 2px;
      margin: 1px;
      margin-bottom: 10px;
      margin-left: 0px;
      margin-top: 25px;
      width: 100%;
    }

    .product-card {
      align-self: center;
      height: calc(var(--product-card-size) * 1.5);
      width: 255px;
    }

    .product-card .open-in-full {
      display: block;
    }

    .top-bar-full .navbar {
      display: none;
    }

    /*
        .top-bar-full .search-view {
        display: none;
        }
        */
    .photo-advance {
      display: none;
    }

    .bottom-navigation {
      display: flex;
    }

    .color-fill:not(.visible) {
      display: none;
      min-height: 1000px;
    }

    .filter-bar .scroll-container:not(.visible) {
      display: none;
    }

    /* Initial state: visible */
    .filter-dialog,
    .filter-dialog {
      height: auto;
    }

    .filter-dialog .button-container {
      flex-direction: row;
    }

    /* Add this to your existing CSS */
    .top-bar-full {
      position: fixed;
      top: 0;
      transition: transform 0.3s ease-in-out;
      width: 100%;
      z-index: 1000;
      /* Ensure the bar stays above other content */
    }

    .top-bar-full.hidden {
      transform: translateY(-100%);
      /* Moves the top bar up out of the view */
    }

    .filter-dialog .frame {
      max-height: 650px;
      /* to enable scrolling on mobile*/
    }

    .filter-dialog .filter-bar {
      flex-direction: column;
      flex-wrap: nowrap;
      /* mobile*/
    }

    .top-bar-full .trailing-icon-frame {
      justify-content: flex-start;
      max-width: 150px
        /*display: none;*/
    }

    .filter-frame .filter {
      display: none;
    }

    .product-side-sheet {
      max-width: 95vw;
    }

    #chat-container {
      /* Ensures the chat container is above the overlay */
      box-shadow: 0 4px 15px var(--material-themesyslightshadow-tenth);
      display: none;
      margin-bottom: 65px;
      z-index: 5000;
      /* Large shadow for the chat container */
    }

    .chat-state-layer {
      display: flex;
    }

    .chat-state-layer .img-close {
      display: flex;
    }

    .chat-state-layer .img-caret {
      display: none;
    }

    .filter-mobile-visual {
      display: none;
    }

    .breadcrumb-categories {
      display: none;
    }
  }

  #chat-box.expanded {
    height: 275px;
    /* Expanded height */
  }


  /* Maintenance */

  .category-hero[data-type="OOS"] {
    align-items: center;
    align-self: center;
    display: flex;
    max-width: 100vw;
  }

  #mobileImage {
    display: block;
  }

  #desktopImage {
    display: none;
  }
}

/* Tablet in Landscape Mode */
@media only screen and (min-device-width: 600px) and (max-device-width: 1500px) and (orientation: landscape) {
  :root {
    --is-mobile: 0;
  }

  .beta-logo-tiny {
    display: none;
  }

  .tree-location {
    display: none;
  }

  .filter-bar .scroll-container {
    max-height: 250px;
    overflow-y: auto;
  }

  .product-card .open-in-full {
    display: none;
  }

  @media (max-width: 1500px) {
    :root {
      --product-card-size: 300px;
    }
  }

  @media (max-width: 1450px) {
    :root {
      --product-card-size: 290px;
    }
  }

  @media (max-width: 1400px) {
    :root {
      --product-card-size: 280px;
    }
  }

  @media (max-width: 1350px) {
    :root {
      --product-card-size: 270px;
    }
  }

  @media (max-width: 1300px) {
    :root {
      --product-card-size: 260px;
    }

    .product-card .open-in-full {
      display: block;
    }
  }

  @media (max-width: 1250px) {
    :root {
      --product-card-size: 250px;
    }
  }

  @media (max-width: 1200px) {
    :root {
      --product-card-size: 240px;
    }

    .product-card .open-in-full {
      display: block;
    }

    .mini-categories,
    .breadcrumb-categories {
      margin-top: 55px;
    }
  }

  @media (max-width: 1150px) {
    :root {
      --product-card-size: 230px;
    }
  }

  @media (max-width: 1100px) {
    :root {
      --product-card-size: 220px;
    }
  }

  @media (max-width: 1050px) {
    :root {
      --product-card-size: 210px;
    }
  }

  @media (max-width: 1000px) {
    :root {
      --product-card-size: 200px;
    }

    .product-card .open-in-full {
      display: block;
    }

    .top-bar-full .navbar {
      display: none;
    }
  }

  @media (max-width: 950px) {
    :root {
      --product-card-size: 190px;
    }
  }

  @media (max-width: 900px) {
    :root {
      --product-card-size: 180px;
    }
  }

  @media (max-width: 850px) {
    :root {
      --product-card-size: 170px;
    }
  }

  @media (max-width: 800px) {
    :root {
      --product-card-size: 160px;
    }
  }
}

/* Desktop */
@media (hover: hover) and (pointer: fine) {
  :root {
    --is-mobile: 0;
  }

  .beta-logo-tiny {
    display: none;
  }

  .tree-location {
    display: none;
  }

  .filter-bar .scroll-container {
    max-height: 250px;
    overflow-y: auto;
  }

  .product-card .open-in-full {
    display: none;
  }

  @media (max-width: 1500px) {
    :root {
      --product-card-size: 300px;
    }
  }

  @media (max-width: 1450px) {
    :root {
      --product-card-size: 290px;
    }
  }

  @media (max-width: 1400px) {
    :root {
      --product-card-size: 280px;
    }
  }

  @media (max-width: 1350px) {
    :root {
      --product-card-size: 270px;
    }
  }

  @media (max-width: 1300px) {
    :root {
      --product-card-size: 260px;
    }

    .product-card .open-in-full {
      display: block;
    }
  }

  @media (max-width: 1250px) {
    :root {
      --product-card-size: 250px;
    }
  }

  @media (max-width: 1200px) {
    :root {
      --product-card-size: 240px;
    }

    .product-card .open-in-full {
      display: block;
    }

    .top-bar-full .navbar {
      display: none;
    }

    .filter-frame .filter {
        height:40px;
        width:auto;
    }

    .mini-categories,
    .breadcrumb-categories {
      margin-top: 55px;
    }
  }

  @media (max-width: 1150px) {
    :root {
      --product-card-size: 230px;
    }
  }

  @media (max-width: 1100px) {
    :root {
      --product-card-size: 220px;
    }
  }

  @media (max-width: 1050px) {
    :root {
      --product-card-size: 210px;
    }
  }

  @media (max-width: 1000px) {
    :root {
      --product-card-size: 200px;
    }

    .product-card .open-in-full {
      display: block;
    }
  }

  @media (max-width: 950px) {
    :root {
      --product-card-size: 190px;
    }
  }

  @media (max-width: 900px) {
    :root {
      --product-card-size: 180px;
    }
  }

  @media (max-width: 850px) {
    :root {
      --product-card-size: 170px;
    }
  }

  @media (max-width: 800px) {
    :root {
      --product-card-size: 160px;
    }
  }
}

.product-card {
  height: calc(var(--product-card-size) * 1.5);
  width: var(--product-card-size);
}

.menu_outer {
  margin: 0 auto;
}

.menu_top {
  margin-left: 50px;
}

.menu_inner {
  margin-left: 30px;
}


.splash-flex-container-wide {
  align-self: center;
  background-color: var(--material-themesyslightsurface);
  gap: 10px;
  justify-content: center;
  max-height: 450px;
  min-width: 80vw;
}

.category-hero[data-type="display-explainer"] {
  background-color: var(--material-themesyslightsurface);
  max-height: 400px;
  min-width: 80vw;
}

.category-hero[data-type="display-explainer"] h1 {
  border-bottom: none;
  color: var(--material-themesyslighton-surface);
  font-family: 'Abril Fatface', serif;
  font-size: 4rem;
  font-weight: 900;
  /* Center the h1 element vertically */
  line-height: 1.0;
  max-height: 400px;
  min-width: 80vw;
  /* Position the h1 element absolutely within its parent */
  top: 30%;
}

.category-hero[data-type="display-explainer"] h3 {
  align-self: center;
  /* existing styles */
  border-bottom: none;
  color: var(--material-themesyslighton-surface);
  cursor: pointer;
  font-family: 'Roboto', serif;
  font-size: 2rem;
  font-weight: 600;
  justify-content: center;
  max-height: 400px;
  min-width: 80vw;
  /* Center the h1 element vertically */
  /* Creates a white underline */
  padding-bottom: 2px;
  top: 80%;
  /* Optional: Adjusts spacing between text and underline */
}


/* ============================================================================================================== */
/* Dark mode */

.menu .switch-frame {
  align-items: center;
  display: flex;
  flex-direction: row;
  /* Align items vertically in the center */
  justify-content: space-between;
  /* Space out the items */
  margin-left: 17px;
}

.menu .switch-container {
  align-items: center;
  display: flex;
  flex-direction: row;
  margin-left: 65px;
  /* Align items vertically in the center */
  /* Space out the items */
}

.menu .switch-frame {
  color: var(--material-themesyslighton-surface-variant);
  font-family: var(--material-theme-body-large-font-family);
  font-size: var(--material-theme-body-large-font-size);
  font-style: var(--material-theme-body-large-font-style);
  font-weight: var(--material-theme-body-large-font-weight);
  letter-spacing: var(--material-theme-body-large-letter-spacing);
  line-height: var(--material-theme-body-large-line-height);
}

.menu .switch-frame .color-mode {
  color: var(--material-themesyslighton-surface-variant);
  font-family: var(--material-theme-body-large-font-family);
  font-size: var(--material-theme-body-large-font-size);
  font-style: var(--material-theme-body-large-font-style);
  font-weight: var(--material-theme-body-large-font-weight);
  letter-spacing: var(--material-theme-body-large-letter-spacing);
  line-height: var(--material-theme-body-large-line-height);
}

.menu .switch-frame .switch-lightmode {
  background-color: var(--material-themesyslightprimary);
  border-radius: 50px;
  height: 16px;
  /* 12px (handle width) * 3 */
  right: 0px;
  /* Half of 32px */
  width: 36px;
}

.menu .switch-frame .switch-lightmode .handle-container {
  height: 24px;
  /* Half of 48px */
  /* Half of 48px */
  /* Adjusted for centering */
  position: relative;
  top: -4px;
  /* Adjusted for smaller size */
  width: 24px;
}

.menu .switch-frame #modeStatus {
  margin-left: 20px;
}

.menu .switch-frame .switch-lightmode .handle {
  background-color: var(--material-themesyslighton-primary);
  border-radius: 11.5px;
  /* Adjusted for smaller size */
  height: 12px;
  /* Half of 24px */
  /* This animates the left position over 0.3 seconds */
  /* Initial position adjusted for smaller size */
  position: relative;
  top: 6px;
  /* Half of 24px */
  transition: left 0.3s ease;
  /* Adjusted for smaller size */
  width: 12px;
}

.menu .switch-frame {
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.menu .switch-frame {
  color: var(--material-themesyslighton-surface);
  font-family: var(--material-theme-body-medium-font-family);
  font-size: var(--material-theme-body-medium-font-size);
  font-style: var(--material-theme-body-medium-font-style);
  font-weight: var(--material-theme-body-medium-font-weight);
  letter-spacing: var(--material-theme-body-medium-letter-spacing);
  line-height: var(--material-theme-body-medium-line-height);
}


/* ============================================================================================================== */
/* Top Picks */

.top-pick {
  align-items: flex-start;
  display: flex;
  gap: 20px;
  left: 75%;
  min-height: 45px;
  min-width: 97px;
  position: absolute;
  /* Set position to absolute */
  /* Anchor to the right with 10px offset */
  top: 91%;
  /* Center the h1 element horizontally */
  transform: translate(-50%, -50%);
  z-index: 500;
}

.top-pick .top-pick-logo .img {
  min-height: 45px;
  min-width: 97px;
}

.splash-flex[data-type="top-pick"] {
  align-items: flex-start;
  display: flex;
  gap: 0em;
  margin-top: 0em;
}

.splash-flex .merchant-main {
  background-color: whitesmoke;
  display: flex;
  gap: 0em;
  justify-content: space-around;
  min-height: 1200px;
  position: relative;
  width: 100vw;
}

.splash-flex .main-container {
  border-radius: 10px;
  display: flex;
  flex: 1;
  flex-grow: 1;
  flex-wrap: wrap;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.splash-flex .bullet-container {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-grow: 1;
  flex-wrap: wrap;
  height: 800px;
  justify-content: center;
  margin-top: 10px;
  max-width: 350px;
  min-width: 350px;
  position: relative;
}

.splash-flex .toppick-container {
  align-items: flex-start;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 200px;
  margin-top: 0%;
  padding: 10px;
  width: 100%;
}

.splash-flex .top-pick {
  height: auto;
  top: 50%;
  width: 128px;
}

.splash-flex .top-pick-badge {
  height: 100%;
}

.bullet-container .text-wrapper-2l {
  align-self: center;
  color: var(--material-themesyslighton-surface);
  font-family: "Abril Fatface", serif;
  font-size: 40px;
  font-weight: 400;
  height: 40px;
  letter-spacing: 0;
  line-height: 40px;
  position: absolute;
  text-align: center;
  top: 5%;
  white-space: nowrap;
  width: 100%;
  z-index: 2;
}

.splash-flex .div-wrapper-2l {
  align-self: stretch;
  background-color: var(--material-themesyslightsurface);
  border-radius: 15px;
  box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.splash-flex .div-wrapper-3l {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 5px;
  justify-content: space-around;
  position: relative;
  width: 100%;
}

.splash-flex .div-wrapper-3l h4 {
  color: var(--material-themesyslighton-surface);
  cursor: pointer;
  font-family: 'roboto', serif;
  font-size: 1.25rem;
  font-weight: 500;
  /* Center the h1 element vertically */
  line-height: 1.0;
  /* Creates a white underline */
  padding-bottom: 2px;
}

.splash-flex .div-wrapper-3l {
  color: var(--material-themesyslighton-surface);
  font-family: var(--material-theme-body-large-font-family);
  font-size: var(--material-theme-body-large-font-size);
  font-style: var(--material-theme-body-large-font-style);
  font-weight: var(--material-theme-body-large-font-weight);
  letter-spacing: var(--material-theme-body-large-letter-spacing);
  line-height: var(--material-theme-body-large-line-height);
}

.splash-flex .div-wrapper-3l .pl {
  text-align: justify;
}


/* ============================================================================================================== */
/* Maintenance  */

footer#ID_FOOTER {
  color: var(--material-themesyslighton-surface);
  font-family: var(--material-theme-body-large-font-family);
  font-size: var(--material-theme-body-large-font-size);
  font-style: var(--material-theme-body-large-font-style);
  font-weight: var(--material-theme-body-large-font-weight);
  letter-spacing: var(--material-theme-body-large-letter-spacing);
  line-height: var(--material-theme-body-large-line-height);
  margin-left: 20px;
}


.main-OOS-container {
  margin-top: 10vh;
}

#splash-container-OOS h1 {
  top: 30%;
}

#splash-container-OOS h2 {
  top: 90%;
}

#mobileImage {
  display: none;
}

#desktopImage {
  display: block;
}

.category-hero #splash-container-OOS {
  align-items: center;
  align-self: center;
  display: flex;
  max-width: 100vw;
  min-width: 100vw;
}

/* ============================================================================================================== */