/** Shopify CDN: Minification failed

Line 2798:2 All "@import" rules must come first
Line 3280:2 All "@import" rules must come first

**/


/* CSS from section stylesheet tags */
.dark-product-detail {
    color: #fff;
  }

  .dark-product-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .dark-product-container {
    margin: 0 auto;
    padding: 0vh 4vh;
  }

  .dark-product-grid {
    display: grid;
    gap: 15rem;
    padding: 3rem 0;
  }

  .main-image-wrapper {
    margin-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    position: sticky;
    top: 20px;
  }

  .main-product-image {
    width: 100%;
    height: auto;
    max-width: 639px;
    max-height: 743px;
    object-fit: contain;
  }

  .dark-product-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

  .gallery-image {
    width: 100%;
    height: auto;
    cursor: pointer;
    transition: opacity 0.3s;
    aspect-ratio: 1;
    object-fit: cover;
  }

  .gallery-image:hover {
    opacity: 0.8;
  }

  .product-logo-image {
    height: auto;
    width: 200px;
  }

  .product-heading {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 2rem;
  }

  .price-amount {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
  }

  .dark-product-description {
    width: 70%;
  }

  .dark-product-logo,
  .dark-product-price,
  .dark-product-description {
    margin-bottom: 3rem;
  }

  .description-text {
    font-size: 18px !important;
    font-style: normal;
    font-weight: 300 !important;
    letter-spacing: 0.02em;
    line-height: 130%;
    font-family: 'articulat-cf', sans-serif !important;
  }

  .specs-heading {
    font-family: 'articulat-cf', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 100;
    line-height: normal;
    color: #e6e7e8;
    margin-bottom: 1rem;
  }

  .specs-heading-span {
    font-family: 'articulat-cf', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .specs-grid {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1rem;
  }

  .spec-item {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 18px 0px;
  }

  .spec-label {
    font-family: 'articulat-cf', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
  }

  .spec-value {
    font-family: 'articulat-cf', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 100;
    line-height: normal;
    text-transform: uppercase;
    grid-column: 2 span;
  }

  .dimensions-section {
    padding: 80px 20px;
    background-color: #231f20;
    color: white;
  }

  .dimensions-title {
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    margin-bottom: 40px;
    margin-top: 60px;
    text-transform: uppercase;
  }

  .dimensions-specs {
    /* padding-top: 20px; */
  }

  .dimensions-stem-short {
    margin-bottom: 30px;
  }

  .dimensions-stem-title {
    font-size: 20px;
    font-weight: 600;
    line-height: normal;
  }

  .dimensions-stem-length {
    color: #e6e7e8;
    margin-top: 5px;
    margin-bottom: 20px;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    line-height: normal;
  }

  .dimensions-weight-title {
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    line-height: normal;
    padding: 5px 0px;
    text-transform: uppercase;
  }

  .dimensions-weight-item {
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    padding: 5px 0px;
    line-height: normal;
  }

  .dimensions-stem-long {
    opacity: 0.5;
  }

  .dimensions-diagram {
    width: 100%;
  }

  .dimensions-diagram img {
    max-width: 600px;
    height: auto;
  }

  @media (min-width: 768px) {
    .dark-product-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .dark-product-container {
      padding: 0vh 4vh;
    }
  }

  @media (min-width: 1024px) {
    .spec-item {
      grid-template-columns: repeat(2, 1fr);
    }
    .spec-value {
      grid-column: unset;
    }

    .main-image-wrapper {
      margin-left: auto;
      margin-right: unset;
    }
  }

  @media (min-width: 1440px) {
    .spec-item {
      grid-template-columns: repeat(3, 1fr); /* Return to original layout */
    }
    .spec-value {
      grid-column: 2 span; /* Return to original spanning */
    }

    .dark-product-container {
      margin: 0 auto;
      padding: 0vh 12vh;
    }
  }

  @media (max-width: 768px) {
    .specs-grid {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 3vh; /* vertical horizontal */
    }

    /* Remove the grid from individual spec items */
    .spec-item {
      display: contents;
    }

    .spec-label {
      white-space: nowrap;
      font-size: 14px;
    }

    .spec-value {
      grid-column: unset;
      font-size: 14px;
    }

    .dark-product-grid {
      gap: 3vh;
    }

    .dark-product-description {
      width: 100%;
    }

    .dark-product-container {
      padding: 0vh 2vh;
    }

    .dimensions-section {
      padding: 20px;
    }

    .description-text {
      font-size: 16px;
    }

    .specs-heading,
    .specs-heading-span {
      font-size: 15px;
    }

    .spec-label {
      font-size: 15px;
    }

    .dimensions-weight-item {
      font-size: 15px;
    }

    .dimensions-title {
      font-size: 20px !important;
      margin-bottom: 18px;
    }

    .dimensions-stem-length {
      font-size: 15px;
    }

    .dimensions-weight-title {
      font-size: 14px;
    }
  }
html.safari body {
    scroll-behavior: smooth;
  }

  #dealer-map-container p,
  #dealer-map-container a,
  #dealer-map-container h4 {
    margin: 0;
    padding: 0;
  }

  #dealer-map-container {
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding: 80px 0;
  }

  .dealer-title {
    padding-bottom: 46px;
    display: flex;
    flex-direction: column;
    gap: 46px;
  }

  .dealer-title h2 {
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%; /* 52px */
    font-family: 'articulat-cf', sans-serif;
  }

  .dealer-title p {
    color: #fff;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.2px;
    font-family: 'articulat-cf', sans-serif;
    text-transform: uppercase;
  }

  .marker-container {
    color: #333;
  }

  #region-selector {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
  }

  .region-title {
    font-size: 32px;
    font-weight: 400;
    margin: 20px 0;
    color: #ffffff;
    text-transform: uppercase;
    font-family: 'articulat-cf', sans-serif;
  }

  #region-body-selector {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }

  #region-body-selector ul {
    list-style: none;
    display: flex;
    gap: 10px;
  }

  .region-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
  }
  .region-button {
    padding: 10px 20px;
    background-color: #f0f0f0;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  .region-button.active {
    background-color: #29235c;
    color: white;
  }

  #region-body-selector a {
    padding: 10px 15px;
    color: black;
    text-decoration: none;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    transition: color 0.3s ease;
  }

  .dealers-portal {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
  }
  .dealers-portal a {
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    text-transform: uppercase;
  }

  #region-body-selector a .region-text {
    position: relative;
  }

  /* Add a sliding border effect using ::before pseudo-element for the text only */
  #region-body-selector a .region-text::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    height: 2px;
    width: 0%;
    background-color: #ffffff;
    transition: width 0.4s ease;
  }

  /* On hover, the border will slide from left to right */
  #region-body-selector a:hover .region-text::before {
    width: 100%;
  }

  /* Style for the arrow icon inside the region link */
  .region-icon {
    margin-left: 10px;
    padding: 5px;
    transition: transform 0.3s ease;
    display: inline-block;
    color: #5567ae;
  }

  /* Rotate the arrow down when hovered */
  #region-body-selector a:hover .region-icon {
    transform: rotate(90deg); /* Rotates the right arrow to point down */
  }

  .location-slider-item p {
    margin: 5px 0;
  }

  .unique-region-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Base style for the animate-plus link */
  .animate-plus {
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #ffffff;
    position: relative;
    cursor: pointer; /* Make it clickable */
    transition: color 0.3s ease; /* Transition for the text color */
  }

  /* Sliding border effect for the plus-text */
  .animate-plus .plus-text {
    position: relative; /* Needed for the sliding border to be applied just on the text */
    font-size: 20px;
    padding-bottom: 4px;
  }

  /* Add a sliding border effect using ::before pseudo-element for the text */
  .animate-plus .plus-text::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0%;
    background-color: #ffffff;
    transition: width 0.4s ease; /* Animate the width of the border */
  }

  /* On hover, the border will slide from left to right */
  .animate-plus:hover .plus-text::before {
    width: 100%; /* Slide the border to full width */
  }

  /* Style for the plus icon */
  .plus-icon {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
    display: inline-block;
    transform-origin: center;
  }

  .plus-icon svg {
    width: 100%;
    height: 100%;
  }

  /* Hover effect for the animate-plus link */
  .animate-plus:hover {
    color: #ffffff; /* Text color change on hover */
  }

  /* Plus icon rotates on hover */
  .animate-plus:hover .plus-icon {
    transform: rotate(180deg); /* Change plus to an "x" rotation */
    color: #ffffff;
  }

  .location-slider-item h2 {
    font-size: 16px;
    font-weight: bold;
  }

  #region-id {
    font-family: 'articulat-cf';
    text-transform: none;
    font-size: 30px;
    font-weight: 600;
  }

  .dealer-list {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    margin-top: 40px;
  }

  .dealer-list h2 {
    color: #fff;
    text-align: left;
    font-family: 'articulat-cf', sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 40px;
    grid-column: 1 / -1;
    text-transform: uppercase;
  }

  #filtered-dealers-container {
    padding-bottom: 40px;
    margin-bottom: 40px;
    border-bottom: 1px solid #4f4f4f;
  }

  #filtered-dealers-container,
  #other-dealers-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    width: 100%;
    align-items: stretch;
    margin-bottom: 80px;
  }

  #map {
    height: 849px;
  }

  /* Map scroll overlay */
  .map-container {
    position: relative;
    width: 100%;
    height: 849px;
  }

  @media screen and (min-width: 768px) {
    #filtered-dealers-container,
    #other-dealers-container {
      grid-template-columns: repeat(2, 1fr);
      gap: 40px;
      margin-bottom: 80px;
    }
  }

  @media screen and (min-width: 1024px) {
    #filtered-dealers-container,
    #other-dealers-container {
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
    }
  }

  @media screen and (min-width: 1440px) {
    #filtered-dealers-container,
    #other-dealers-container {
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
    }
  }

  @media screen and (max-width: 1023px) {
    #filtered-dealers-container {
      margin-bottom: 60px;
    }
  }

  @media screen and (max-width: 767px) {
    #map {
      height: 401px;
    }

    .map-container {
      height: 401px;
    }

    .dealer-list {
      margin-bottom: 56px;
      gap: 0;
    }

    #filtered-dealers-container,
    #other-dealers-container {
      margin-bottom: 40px;
    }

    .dealer-list h2 {
      font-size: 20px;
      margin-bottom: 24px;
    }

    #filtered-dealers-container {
      margin-bottom: 40px;
    }

    #filtered-dealers-container,
    #other-dealers-container {
      gap: 16px;
    }

    .dealer-card #location-name {
      font-size: 18px;
      margin-bottom: 12px;
    }

    .dealer-card #location-address,
    .dealer-card #location-contact,
    .dealer-card #location-schedule1,
    .dealer-card #location-schedule2,
    .dealer-link {
      font-size: 14px;
    }

    .dealer-card #location-contact {
      margin-bottom: 16px !important;
    }

    .dealer-links {
      margin-top: auto;
      padding-top: 16px;
      gap: 12px;
    }
  }

  .dealer-card {
    background-color: transparent;
    border: none;
    padding: 24px 20px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    border: 1px solid #3c3839;
    background: #231f20;
  }

  .dealer-card-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 150px;
  }

  .dealer-card #location-name {
    color: #fff;
    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: #fff;
    font-family: 'articulat-cf';
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 16px;
    text-transform: uppercase;
  }

  .dealer-card #location-address {
    color: rgba(255, 255, 255, 0.8);
    font-family: 'articulat-cf';
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 150%;
    margin-bottom: 8px;
  }

  .dealer-card #location-contact {
    color: rgba(255, 255, 255, 0.8);
    font-family: 'articulat-cf';
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 150%;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.8); /* Prevents iOS from changing text color */
    text-decoration: none;
  }

  /* Style for phone links to match the text */
  .phone-link {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.8) !important;
    cursor: pointer;
  }

  .phone-link:hover {
    opacity: 0.9;
  }

  /* Disable automatic phone number detection on iOS */
  a[href^='tel'] {
    color: inherit;
    text-decoration: none;
    -webkit-text-fill-color: inherit;
  }

  .dealer-card #location-schedule1,
  .dealer-card #location-schedule2 {
    color: rgba(255, 255, 255, 0.8);
    font-family: 'articulat-cf';
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    margin-bottom: 8px;
  }

  .dealer-links {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: auto;
    padding-top: 20px;
  }

  .dealer-link {
    color: #fff;
    font-family: 'articulat-cf';
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
  }

  .view-website {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* Hide the original region groups since we'll be using JavaScript for filtering */
  .unique-region-group {
    display: none;
  }

  #search {
    position: relative;
  }

  #results {
    position: absolute;
    top: 70px;
    left: 0px;
    z-index: 1000;
    background: #393536;
    border-radius: 5px;
    max-height: 200px;
    overflow-y: auto;
    color: rgba(255, 255, 255, 0.6);
    width: 469px;
  }
  .no-scroll {
    overflow: hidden;
  }

  #result-item {
    padding: 4px 8px;
    cursor: pointer;
  }

  #result-item:hover {
    background-color: #5567ae;
    color: #fff;
    pointer: cursor;
  }

  .contact-me-mobile {
    display: none !important;
  }

  #search-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    padding-top: 24px;
  }

  #search-container h3 {
    color: #fff;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.2px;
    font-family: 'articulat-cf', sans-serif;
  }

  #contact-me {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  #search-container p,
  #contact-me p {
    font-size: 20px;
    color: #ffffff;
    text-transform: uppercase;
    margin: 0;
    line-height: 1;
    font-family: 'articulat-cf', sans-serif;
  }

  #search-input {
    width: 469px;
    height: 59px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px 0 0;
    padding: 16px 20px;
    background-color: #393536;
    gap: 24px;
  }

  #location {
    border: none;
    outline: none;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.6);
    background: transparent;
  }

  #location:focus-visible {
    border: none;
    outline: none;
    box-shadow: none;
  }

  #clear-location {
    border: none;
    outline: none;
    background: transparent;
    width: 35px;
    height: 35px;
    display: none;
    cursor: pointer;
  }

  #contact-me a {
    outline: none;
    border: none;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'articulat-cf', sans-serif;
  }

  #location-slider {
    overflow: hidden;
    position: relative;
  }

  #location-slides-mobile {
    display: none;
  }

  #location-slides {
    display: flex;
    justify-content: space-between;
    width: 100%;
    transition: transform 0.5s ease-in-out;
  }

  .location-slider-item {
    width: 320px;
    min-width: 320px;
    width: 100%;
  }

  .location-slider-item p {
    margin: 0;
    line-height: 1;
    size: 20px;
    color: rgb(var(--color-foreground));
    line-height: 30px;
  }

  .location-slider-item #location-name {
    color: #ffffff;
    font-weight: 400;
  }

  #slider-buttons {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    top: 0;
  }

  #slider-buttons button {
    outline: none;
    border: 2px solid #29235c;
    background-color: #fff;
    width: 56px;
    height: 56px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  /* BECOME A DEALER MODAL */

  .accordion-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .accordion-item {
    background-color: #2e2a2b;
    overflow: hidden;
    padding: 60px 40px;
    gap: 20px;
    max-width: 810px;
    min-width: unset;
    width: 100%;
    display: flex;
    height: 100px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
  }

  .accordion-item:hover .plus-icon {
    transform: rotate(90deg);
  }

  .accordion-header {
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    color: white;
    background: none;
    border: none;
    width: 100%;
    font-size: 20px;
    font-weight: 500;
    line-height: 130%;
    padding-left: 0;
    padding-right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'articulat-cf';
  }

  .accordion-header a {
    text-decoration: none;
    color: inherit;
    margin: 0 auto !important;
  }

  .accordion-header a:hover {
    text-decoration: underline;
  }

  @media (max-width: 768px) {
    #search-container {
      padding-top: 0;
    }

    .accordion-container {
      grid-template-columns: 1fr;
      margin: 0;
      gap: 40px;
    }
    .accordion-item {
      min-width: unset;
      max-width: 100%;
    }

    .accordion-item.contact {
      padding: 12px;
    }

    .accordion-header {
      font-size: 14px;
    }

    .dealer-title p {
      font-size: 24px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      letter-spacing: 1.2px;
    }
  }

  .modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    justify-content: center;
    align-items: center;
    overflow: auto; /* Allow scrolling in case of smaller screens */
  }

  .modal-content {
    background-color: #231f1f;
    padding: 30px;
    width: 812px;
    max-height: 1069px;
    position: relative;
    overflow-y: scroll;
    height: auto;
  }
  .modal.active {
    display: flex;
  }

  .modal-content::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  .modal-content {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  .close-modal {
    position: absolute;
    top: 10px;
    right: 10px;
    border: none;
    background: none;
    font-size: 24px;
    cursor: pointer;
    color: white;
  }

  .plus-icon {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
    display: inline-block;
    transform-origin: center;
  }

  .plus-icon svg {
    width: 100%;
    height: 100%;
  }

  .accordion-item:hover .plus-icon {
    transform: rotate(90deg);
  }

  .become-a-dealer-form {
    max-width: 692px;
    margin: 0 auto;
  }

  .form-control {
    padding: 24px 20px;
    font-family: 'articulat-cf', sans-serif !important;
  }

  .padded-form-container {
    padding: 60px 0 30px 0;
  }

  .become-a-dealer-form-header {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 24px;
  }

  .become-a-dealer-form-header h2,
  .become-a-dealer-form-header p {
    margin: 0;
  }

  .become-a-dealer-form-header h2 {
    font-family: 'articulat-cf', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 130%;
    margin-bottom: 8px;
    text-transform: uppercase;
  }

  .become-a-dealer-form-header-login {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .become-a-dealer-form-header-login a {
    color: rgb(var(--color-foreground));
  }

  .become-a-dealer-input {
    padding: 24px 20px;
  }

  #become-dealer-modal,
  #dealer-contact-modal {
    z-index: 1000;
  }

  /* CONTACT ME MODAL */

  .contact-me-form {
    max-width: 692px;
    margin: 0 auto;
  }

  .form-control {
    padding: 24px 20px;
    font-family: 'articulat-cf', sans-serif !important;
  }

  .contact-me-form-container {
    padding: 60px 0;
  }

  .contact-me-form-header {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 24px;
  }

  .contact-me-form-header h2,
  .contact-me-form-header p {
    margin: 0;
  }

  .contact-me-form-header h2 {
    font-family: 'articulat-cf', sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 130%;
    margin-bottom: 8px;
    text-transform: uppercase;
  }

  .contact-me-form-header-login {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .contact-me-form-header-login a {
    color: rgb(var(--color-foreground));
  }

  .contact-me-input {
    padding: 24px 20px;
  }

  #dealer-header {
    margin-bottom: 56px;
    display: none;
  }

  @media (max-height: 600px) {
    .modal {
      align-items: flex-start; /* Align modal content to top */
      padding-top: 20px;
    }

    .modal-content {
      max-height: none; /* Remove max-height restriction */
      height: 100vh; /* Full screen height */
      border-radius: 0; /* Remove border-radius for full-screen view */
      overflow-y: auto; /* Ensure content inside is scrollable */
    }
  }

  @media (max-width: 768px) {
    .dealer-card-content {
      min-height: auto;
    }

    .contact-me-form-container {
      padding: 40px 20px;
    }

    .contact-me-form-header {
      align-items: flex-start;
    }
    s .contact-me-form-header h2 {
      font-size: 18px;
      font-weight: 300;
    }

    .contact-me-form-header p {
      font-size: 14px;
    }

    .modal-content {
      height: 100%;
    }

    .accordion-item {
      padding: 12px;
    }
  }

  @media (max-width: 768px) {
    .padded-form-container {
      padding: 40px 20px;
    }

    .become-a-dealer-form-header {
      align-items: flex-start;
    }

    .become-a-dealer-form-header h2 {
      font-size: 18px;
      font-weight: 700;
    }

    .become-a-dealer-form-header p {
      font-size: 14px;
    }
  }

  @media only screen and (max-width: 780px) {
    .dealer-card #location-name {
      font-size: 18px;
      font-style: normal;
      font-weight: 400;
      letter-spacing: 0.02em;
      line-height: normal;
    }

    .dealer-card #location-address {
      color: rgba(255, 255, 255, 0.8);
      font-size: 15px;
      font-style: normal;
      font-weight: 400;
      letter-spacing: 0.02em;
      line-height: 150%; /* 22.5px */
    }

    .dealer-link {
      font-size: 15px;
      font-style: normal;
      font-weight: 500;
      line-height: 150%; /* 22.5px */
      text-decoration-line: underline;
      text-decoration-style: solid;
      text-decoration-skip-ink: none;
      text-decoration-thickness: auto;
      text-underline-offset: auto;
      text-underline-position: from-font;
    }

    #dealer-header {
      flex-direction: column;
      justify-content: flex-start;
      gap: 48px;
    }

    .contact-me-mobile {
      display: flex !important;
    }

    .contact-me-mobile a {
      font-size: 14px !important;
    }

    #contact-me {
      display: none;
    }

    #search-container p,
    #contact-me p {
      font-size: 18px;
    }

    #search-input {
      width: 100%;
    }

    #location-slides-mobile {
      display: flex;
      flex-direction: column;
    }

    #location-slider {
      display: none;
    }

    .location-slider-item {
      width: 100%;
      min-width: 100%;
      height: 100%;
    }

    .location-slider-item p {
      font-size: 12px;
    }

    #results {
      width: 100%;
    }

    #region-selector {
      display: flex;
      align-items: flex-start;
      flex-direction: column;
    }

    #region-body-selector {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-bottom: 20px;
    }

    .region-title {
      font-size: 32px;
      margin: 10px 0;
      text-align: left;
    }

    .leaflet-popup-content p {
      font-size: 12px !important;
    }
  }

  .leaflet-control {
    z-index: 0 !important;
  }
  .leaflet-pane {
    z-index: 0 !important;
  }
  .leaflet-top,
  .leaflet-bottom {
    z-index: 0 !important;
  }

  #region-dropdown-container {
    width: 469px;
  }

  .region-select {
    width: 100%;
    height: 59px;
    padding: 0 16px;
    background-color: #393536;
    color: rgba(255, 255, 255, 0.9);
    border: none;
    outline: none;
    font-size: 16px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    cursor: pointer;
  }

  .region-select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(85, 103, 174, 0.5);
  }

  @media only screen and (max-width: 780px) {
    #region-dropdown-container {
      width: 100%;
    }
  }

  .map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 18px;
    text-align: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
  }

  .map-overlay.visible {
    opacity: 1;
    visibility: visible;
  }

  .map-overlay-icon {
    font-size: 40px;
    margin-bottom: 20px;
  }

  .map-overlay-text {
    max-width: 80%;
    line-height: 1.5;
  }

  .map-overlay-instructions {
    margin-top: 15px;
    font-size: 16px;
    background-color: rgba(85, 103, 174, 0.8);
    padding: 10px 15px;
    border-radius: 5px;
  }

  /* Super small screen optimizations */
  @media screen and (max-width: 360px) {
    .dealer-card {
      padding: 0;
    }

    .dealer-card #location-name {
      font-size: 16px;
    }

    .dealer-card p {
      font-size: 14px;
      margin: 6px 0;
    }

    .dealer-links {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }
  }

  .dealer-card:hover {
    background-color: transparent;
    transform: none;
    box-shadow: none;
  }

  .email-us-container {
    margin: 80px 0 40px;
  }

  .email-us-container h3 {
    color: #fff;
    font-family: 'articulat-cf', sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
  }

  .autocomplete {
    margin-top: 40px;
    position: relative;
    width: 300px;
  }

  @media screen and (max-width: 767px) {
    .email-us-container {
      margin: 56px 0 40px 0;
    }

    .email-us-container h3 {
      font-size: 20px;
    }

    .autocomplete {
      width: 100% !important;
    }
  }

  .autocomplete {
    position: relative;
    width: 300px; /* Adjust width as needed */
  }

  #searchInput {
    width: 400px;
    height: 46px;
    padding: 8px 8px 8px 40px; /* Add left padding for the icon */
    box-sizing: border-box;
    background-color: #393536;
    color: rgba(255, 255, 255, 0.6);
    border: none;
    outline: none;
    font-size: 16px;
    font-family: 'articulat-cf', sans-serif;
  }

  #searchInput::placeholder {
    color: rgba(255, 255, 255, 0.6);
  }

  .autocomplete::before {
    content: '';
    position: absolute;
    left: 10px; /* Position the icon */
    top: 50%;
    transform: translateY(-50%);
    width: 16px; /* Adjust size as needed */
    height: 16px; /* Adjust size as needed */
    background-image: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.07222 2.8049C10.2756 2.80381 11.4523 3.15965 12.4535 3.82743C13.4546 4.49521 14.2352 5.44491 14.6965 6.55639C15.1577 7.66788 15.279 8.89121 15.0449 10.0716C14.8108 11.252 14.2319 12.3365 13.3813 13.1878C12.5308 14.0392 11.4468 14.6191 10.2666 14.8543C9.08642 15.0894 7.86298 14.9693 6.75107 14.509C5.63917 14.0488 4.68875 13.2691 4.02006 12.2685C3.35137 11.268 2.99445 10.0916 2.99445 8.88824C3.00174 7.27805 3.64424 5.7358 4.78231 4.59669C5.92038 3.45758 7.46204 2.81367 9.07222 2.8049ZM9.07222 1.66602C7.6438 1.66602 6.24746 2.08959 5.05977 2.88318C3.87208 3.67677 2.94639 4.80472 2.39976 6.12441C1.85313 7.4441 1.7101 8.89625 1.98877 10.2972C2.26745 11.6982 2.9553 12.9851 3.96534 13.9951C4.97539 15.0052 6.26226 15.693 7.66324 15.9717C9.06421 16.2504 10.5164 16.1073 11.836 15.5607C13.1557 15.0141 14.2837 14.0884 15.0773 12.9007C15.8709 11.713 16.2944 10.3167 16.2944 8.88824C16.2944 6.97278 15.5335 5.13578 14.1791 3.78136C12.8247 2.42693 10.9877 1.66602 9.07222 1.66602Z" fill="white" fill-opacity="0.6"/><path d="M19.4444 18.4953L15.35 14.373L14.5611 15.1564L18.6556 19.2786C18.707 19.3304 18.7681 19.3716 18.8355 19.3997C18.9028 19.4279 18.975 19.4425 19.048 19.4428C19.121 19.4431 19.1934 19.4289 19.2609 19.4012C19.3284 19.3735 19.3899 19.3328 19.4417 19.2814C19.4935 19.2299 19.5346 19.1688 19.5628 19.1015C19.591 19.0341 19.6056 18.9619 19.6059 18.8889C19.6061 18.8159 19.592 18.7436 19.5643 18.676C19.5366 18.6085 19.4959 18.5471 19.4444 18.4953Z" fill="white" fill-opacity="0.6"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    color: rgba(255, 255, 255, 0.6);
  }

  @media screen and (max-width: 767px) {
    #searchInput {
      width: 100% !important;
    }
  }

  /* Style the Google Maps Autocomplete dropdown */
  .pac-container {
    background: #393536 !important;
    border-radius: 5px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-family: 'articulat-cf', sans-serif !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
    z-index: 2000 !important;
  }

  .pac-item {
    padding: 8px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 16px !important;
    background: transparent !important;
    border-bottom: 1px solid #3e3d3d !important;
    cursor: pointer;
  }

  .pac-item:hover,
  .pac-item-selected {
    background-color: #5567ae !important;
    color: #fff !important;
  }

  .pac-icon {
    display: none !important; /* Hide the default icon if you want */
  }

  /* Remove the default border */
  .pac-container {
    border: none !important;
  }

  .pac-container {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important; /* optional, for shadow */
  }
  .pac-item {
    border: none !important;
    border-radius: 0 !important;
  }

  /* Non-matching (normal) text */
  .pac-item {
    color: #fff9 !important;
  }

  /* Matching (highlighted) text */
  .pac-item .pac-matched {
    color: #fff !important;
    font-weight: bold;
  }

  /* Default all suggestion text to #fff9 */
  .pac-item,
  .pac-item span,
  .pac-item .pac-item-query {
    color: #fff9 !important;
  }

  /* Matched (highlighted) text to #fff */
  .pac-item .pac-matched {
    color: #fff !important;
    font-weight: bold;
  }

  .pac-container .pac-logo,
  .pac-container .pac-logo * {
    color: #fff !important;
    fill: #fff !important;
    opacity: 1 !important;
  }

  @media (max-width: 1140px) {
    .accordion-container:last-of-type {
      display: block !important;
    }

    .accordion-container:last-of-type .accordion-item {
      width: 100% !important;
      max-width: 100% !important;
    }
  }

  .dealer-card.highlight {
    outline: 3px solid #5567ae;
    background: rgba(85, 103, 174, 0.1);
    transition: outline 0.3s, background 0.3s;
  }

  /* Google Maps InfoWindow Styling */
  .gm-style-iw {
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  }

  .gm-style-iw-d {
    overflow: visible !important;
    padding: 0 !important;
  }

  .gm-style-iw-c {
    border-radius: 8px !important;
    padding: 0 !important;
  }

  .gm-style-iw-tc {
    display: none !important;
  }

  .custom-infowindow {
    background: #2e2a2b;
    border-radius: 8px;
    padding: 20px;
    min-width: 250px;
    color: white;
    font-family: 'articulat-cf', sans-serif;
    position: relative;
  }

  .custom-infowindow .dealer-name {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: #ffffff;
    line-height: 1.2;
  }

  .custom-infowindow .dealer-address {
    font-size: 14px;
    margin: 0 0 8px 0;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
  }

  .custom-infowindow .dealer-contact {
    font-size: 14px;
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
  }

  .custom-infowindow .dealer-contact a {
    color: #506bb2;
    text-decoration: none;
  }

  .custom-infowindow .dealer-contact a:hover {
    text-decoration: underline;
  }

  .custom-infowindow .user-location-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: #ffffff;
  }

  .custom-infowindow .user-location-subtitle {
    font-size: 14px;
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
  }

  /* RESPONSIVE TYPOGRAPHY */

  /* Tablet styles (768px to 1023px) */
  @media screen and (min-width: 768px) and (max-width: 1023px) {
    /* Heading 1 - Page headings */
    .dealer-title h2 {
      font-size: 32px;
      line-height: 130%;
      font-weight: 600;
    }

    /* Heading 2 - Section headings */
    .dealer-list h2,
    .become-a-dealer-form-header h2,
    .contact-me-form-header h2 {
      font-size: 22px;
      line-height: 130%;
      font-weight: 600;
      text-transform: uppercase;
    }

    /* Heading 3 - Headings under section headings */
    #search-container h3,
    .email-us-container h3 {
      font-size: 19px;
      line-height: 130%;
      font-weight: 600;
      text-transform: uppercase;
    }

    /* Region title adjustments */
    .region-title {
      font-size: 28px;
    }

    /* Accordion header adjustments */
    .accordion-header {
      font-size: 18px;
    }

    /* Dealer card name adjustments */
    .dealer-card #location-name {
      font-size: 18px;
    }
  }

  /* Mobile styles (max-width: 767px) */
  @media screen and (max-width: 767px) {
    #dealer-map-container {
      padding: 60px 0;
    }

    /* Heading 1 - Page headings */
    .dealer-title h2 {
      font-size: 24px;
      line-height: 130%;
      font-weight: 600;
    }

    /* Heading 2 - Section headings */
    .dealer-list h2,
    .become-a-dealer-form-header h2,
    .contact-me-form-header h2 {
      font-size: 20px;
      line-height: 130%;
      font-weight: 600;
      text-transform: uppercase;
    }

    /* Heading 3 - Headings under section headings */
    #search-container h3,
    .email-us-container h3 {
      font-size: 18px;
      line-height: 130%;
      font-weight: 600;
      text-transform: uppercase;
    }

    /* Region title adjustments */
    .region-title {
      font-size: 24px;
    }

    /* Accordion header adjustments */
    .accordion-header {
      font-size: 16px;
    }

    /* Dealer card name adjustments */
    .dealer-card #location-name {
      font-size: 16px;
    }

    /* Body text adjustments for better mobile experience */
    .dealer-title p {
      font-size: 20px;
    }

    #search-container p,
    #contact-me p {
      font-size: 16px;
    }

    /* Form header text adjustments */
    .become-a-dealer-form-header p,
    .contact-me-form-header p {
      font-size: 14px;
    }
  }

  /* Mobile styles for custom-infowindow */
  @media screen and (max-width: 768px) {
    .custom-infowindow {
      min-width: 200px;
      max-width: 280px;
      padding: 16px;
    }

    .custom-infowindow .dealer-name {
      font-size: 16px;
      margin: 0 0 10px 0;
    }

    .custom-infowindow .dealer-address,
    .custom-infowindow .dealer-contact {
      font-size: 13px;
      margin: 0 0 6px 0;
      line-height: 1.3;
    }

    .custom-infowindow .user-location-title {
      font-size: 15px;
      margin: 0 0 3px 0;
    }

    .custom-infowindow .user-location-subtitle {
      font-size: 13px;
    }
  }

  @media screen and (max-width: 480px) {
    .custom-infowindow {
      min-width: 180px;
      max-width: 250px;
      padding: 12px;
    }

    .custom-infowindow .dealer-name {
      font-size: 15px;
      margin: 0 0 8px 0;
    }

    .custom-infowindow .dealer-address,
    .custom-infowindow .dealer-contact {
      font-size: 12px;
      margin: 0 0 5px 0;
    }

    .custom-infowindow .user-location-title {
      font-size: 14px;
    }

    .custom-infowindow .user-location-subtitle {
      font-size: 12px;
    }
  }

  /* Override default InfoWindow close button styling */
  .gm-style-iw button,
  .gm-style-iw-t button,
  .gm-ui-hover-effect {
    background: rgba(255, 255, 255, 0.95) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 28px !important;
    height: 28px !important;
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1000 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .gm-style-iw button:hover,
  .gm-style-iw-t button:hover,
  .gm-ui-hover-effect:hover {
    background: rgba(255, 255, 255, 1) !important;
    transform: scale(1.1) !important;
  }

  /* Ensure the close button content (X) is visible */
  .gm-style-iw button img,
  .gm-style-iw-t button img {
    opacity: 0.8 !important;
    width: 12px !important;
    height: 12px !important;
  }

  /* Alternative targeting for the close button container */
  .gm-style-iw-t {
    opacity: 1 !important;
    visibility: visible !important;
    right: 6px !important;
    top: 6px !important;
  }

  .gm-ui-hover-effect > span {
    min-width: 24px !important;
  }
.home-feat-prod {
  background: red !important;
  border: 2px solid red;
}
/* Common */
  .footer-v2 {
    background: #506bb2;
  }

  .footer-first-section-container {
    display: flex;
    justify-content: space-between;
  }

  .become-a-dealer-form-header h2 {
    font-family: 'articulat-cf', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    text-transform: uppercase;
  }

  .footer-v2 h3,
  .footer-v2 span,
  .footer-v2 a,
  .footer-v2 p {
    color: #fff;
  }

  .footer-first-section,
  .footer-second-section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .footer-second-section {
    gap: 120px;
  }

  /* Subscribe */
  .footer-subscribe {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  .footer-subscribe-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 27.2px;
    text-transform: uppercase;
    color: #fff;
  }

  .footer-subscribe-input {
    border: none;
    outline: none;
    width: 400px;
    height: 52px;
    background: #ededed;
    padding: 14px 25px;
    font-family: 'articulat-cf', sans-serif;
    font-size: 16px;
    line-height: 130%;
    font-weight: 500;
  }

  .footer-subscribe-button {
    border: none;
    outline: none;
    width: 100px;
    height: 52px;
    background: transparent;
    padding: 8px 34px;
    cursor: pointer;

    font-size: 20px;
    font-weight: 500;
    line-height: 27.2px;
    color: #fff;

    position: relative; /* Added for positioning the text */
    overflow: hidden; /* Added to hide the overflow text */
    transition: background-color 0.7s cubic-bezier(0.19, 1, 0.22, 1);
    transition: color 0.7s cubic-bezier(0.19, 1, 0.22, 1);

    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'articulat-cf', sans-serif;
  }

  .footer-subscribe-button::after {
    background-color: rgba(255, 255, 255, 1);
    bottom: 0;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
    width: 100%;
    transform: scaleX(0);
    transform-origin: right center;
  }

  .footer-subscribe-button:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }

  .footer-subscribe-button span {
    display: block;
    transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1); /* Smooth transition for transform */
  }

  .footer-subscribe-form-group {
    display: flex;
    gap: 30px;
  }

  .footer-subscribe-error,
  .footer-subscribe-success {
    font-size: 16px;
    font-weight: 400;
    line-height: 21.6px;
    color: #000;
    padding: 8px 2px;
  }

  /* Links */
  .footer-links {
    display: flex;
    gap: 30px;
  }

  .no-scroll {
    overflow: hidden;
  }

  .footer-links-first,
  .footer-links-second {
    min-width: 216px;
    display: flex;
    gap: 72px;
  }

  .footer-links-item {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 140px;
  }

  @media (max-width: 767px) {
    .footer-links-item {
      gap: 8px;
    }
  }

  .footer-links-item-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .footer-links-item-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 130%;
    color: #fff;
    margin: 0;
    text-transform: uppercase;
    font-family: 'articulat-cf', sans-serif;
  }

  .footer-links-item-list-item {
    position: relative;
    overflow: hidden;
    vertical-align: top;
    width: fit-content;
    display: flex;
    height: 40px;
    flex-direction: column;
    justify-content: center;
  }

  .footer-links-item-list-item a {
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    color: #fff;
    text-decoration: none;
    text-transform: capitalize;
    letter-spacing: 0px;
    font-family: 'articulat-cf', sans-serif;
  }

  .footer-links-item-list-item a::after {
    background-color: #fff;
    bottom: 0;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
    width: 100%;
    transform: scaleX(0);
    transform-origin: right center;
  }

  .footer-links-item-list-item a:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }

  /* Made */
  .footer-made,
  .footer-made-mobile {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
  }

  .footer-made img {
    width: 51px;
    height: 34px;
    flex-shrink: 0;
  }

  .footer-made span,
  .footer-made-mobile span {
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 22.5px */
    letter-spacing: 0.3px;
    color: #fff;
    font-family: 'articulat-cf', sans-serif;
  }

  /* Tablet and Mobile */
  .mobile-bottom-footer {
    display: none;
  }

  #become-dealer-modal,
  #dealer-contact-modal,
  #contact-us-modal {
    z-index: 1000;
    padding: 20px;
  }

  .modal-content {
    background-color: #231f1f;
    padding: 30px;
    width: 812px;
    max-height: 85vh;
    position: relative;
    overflow-y: scroll;
    height: auto;
  }

  .modal-content::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  .modal-content {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  .mobile-tko-cta-container {
    display: none;
  }

  .mobile-logo {
    display: none;
  }

  .desktop-logo {
    display: block;
    max-width: 393px;
  }

  @media (max-width: 1100px) {
    .mobile-bottom-footer {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 40px;
    }

    .footer-desktop-logo {
      display: none;
    }

    .footer-made {
      display: none;
    }

    .footer-first-section-container {
      flex-direction: column;
      gap: 40px;
    }

    .footer-subscribe-form-group {
      flex-direction: row;
      gap: 20px;
    }

    .footer-links-first,
    .footer-links-second {
      width: 100%;
      min-width: 0px;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .footer-subscribe-input {
      width: 100%;
    }

    .footer-links-item-title {
      font-size: 18px;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
    }

    .footer-links-item-list-item {
      line-height: 19px;
    }

    .footer-links-item-list-item a {
      font-size: 18px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }

    .footer-mobile-logo {
      display: flex;
      justify-content: center;
    }

    .footer-mobile-logo img {
      width: auto;
      height: 40px;
    }

    .footer-made-mobile {
      align-items: center;
      gap: 16px;
    }

    .footer-made-mobile img {
      width: auto;
      height: 24px;
    }

    .footer-made-mobile span {
      font-size: 13px;
      line-height: 17px;
      text-align: center;
    }

    .footer-links {
      padding: 0;
      display: flex;
      align-items: flex-end;
      gap: 150px;
    }

    .footer-subscribe-button {
      font-size: 18px;
      line-height: 20.48px;
    }

    .footer-subscribe-title {
      font-size: 18px;
      line-height: 20.48px;
    }

    .desktop-logo {
      display: none;
    }

    .mobile-logo {
      display: block;
    }
  }

  @media (max-width: 767px) {
    .footer-section {
      padding: 40px 20px !important;
    }

    .footer-links-first,
    .footer-links-second {
      flex-direction: column;
      align-items: flex-start;
    }

    .footer-links {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      gap: 150px;
    }

    .modal-content {
      height: auto;
    }

    .footer-subscribe-form-group {
      flex-direction: row;
      gap: 20px;
    }

    .footer-subscribe-button {
      width: auto !important;
      min-width: fit-content !important;
      padding: 0 !important;
    }

    .footer-subscribe-button::after {
      transform: scaleX(1);
    }

    .mobile-tko-cta-container {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #231f20;
      height: 131px;
      width: 100%;
    }

    .mobile-tko-cta {
      display: flex;
      align-items: center;
      gap: 8px;
      height: 28.79px;
      position: relative;
      vertical-align: top;
      width: fit-content;
    }

    .mobile-tko-cta img {
      margin-top: 1px;
    }

    .mobile-tko-cta a {
      text-decoration: none;
      font-weight: 700;
      font-size: 20px;
      line-height: 24px;
      color: rgba(255, 255, 255, 1);
      text-transform: uppercase;
    }

    .mobile-tko-cta a::after {
      background-color: rgba(255, 255, 255, 1);
      bottom: 0;
      content: '';
      height: 1px;
      left: 0;
      position: absolute;
      transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
      width: 100%;
      transform: scaleX(0);
      transform-origin: right center;
    }

    .mobile-tko-cta:hover a::after {
      transform: scaleX(1);
      transform-origin: left center;
    }

    .mobile-tko-cta-arrow {
      position: relative; /* Added for positioning the text */
      overflow: hidden; /* Added to hide the overflow text */
      transition: background-color 0.7s cubic-bezier(0.19, 1, 0.22, 1);
      transition: color 0.7s cubic-bezier(0.19, 1, 0.22, 1);
      width: 16px;
      height: 13px;
    }

    .mobile-tko-cta-arrow img {
      display: block;
      transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1); /* Smooth transition for transform */
      width: 16px;
    }

    #mobile-tko-cta-arrow-hover {
      transform: translateX(-100%); /* Start below the button */
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #mobile-tko-cta-arrow-default {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .mobile-tko-cta:hover #mobile-tko-cta-arrow-hover {
      transform: translateX(0); /* Move into view */
    }

    .mobile-tko-cta:hover #mobile-tko-cta-arrow-default {
      transform: translateX(100%); /* Move out of view */
    }

    .footer-v2 {
      padding-bottom: 3vh !important;
    }

    .mobile-bottom-footer {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  @media (max-width: 500px) {
    .footer-links {
      gap: 120px;
      align-items: flex-start;
    }
  }
/* Header wrapper and responsive display logic */
  .header-wrapper {
    position: relative;
    z-index: 100;
  }

  /* Desktop header - shown by default, hidden on mobile */
  .desktop-header {
    display: block;
  }

  .mobile-header {
    display: none;
  }

  /* Mobile breakpoint */
  @media (max-width: 1024px) {
    .desktop-header {
      display: none;
    }
    
    .mobile-header {
      display: block;
    }
  }

  /* Common styles for both desktop and mobile */
  .link-text {
    text-decoration: none;
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    color: rgba(255, 255, 255, 1);
    text-transform: uppercase;
  }

  .link-text::after {
    background-color: rgba(255, 255, 255, 1);
    bottom: 0;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
    width: 100%;
    transform: scaleX(0);
    transform-origin: right center;
  }

  .link-text:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }

  .header-hidden {
    transform: translateY(-100%);
  }

  .header-visible {
    transform: translateY(0);
    background-color: var(--color-dark-bg);
  }
.carousel-section {
    margin: 0 16px;
  }

  #carousel-label-container {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  #carousel-label {
    font-size: 24px;
    text-transform: uppercase;
    color: #fff;
  }

  #slider-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 120px;
  }

  #slider {
    overflow: hidden;
    position: relative;
  }

  #slider p {
    margin: 0;
  }

  #slides {
    display: flex;
    justify-content: space-between;
    width: 100%;
    transition: transform 0.5s ease-in-out;
    gap: 50px;
  }

  .slider-item {
    width: 350px;
    min-width: 350px;
    height: fit-content;
    display: flex;
    position: relative;
    flex-direction: column;
    border: 1px solid #c8c8c8;
    border-radius: 4.5px;
  }

  .slider-item img {
    object-fit: contain;
    background: #c8c8c8;
    height: 258px;
    width: 349px;
  }

  .slider-button {
    outline: none;
    border: 2px solid #29235c;
    background-color: #fff;
    width: 56px;
    min-width: 56px;
    height: 56px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-top: 125px;
  }

  .slide-content {
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: #E6E7E8;
  }

  .slide-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .product-title-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
  }

  .product-title {
    color: #000;
    font-size: 20px;
    text-transform: uppercase;
    font-family: 'eurostile-extended', 'articulat-cf', sans-serif;
  }

  .product-helper-label {
    color: #787878;
    font-size: 14px;
  }

  .slide-header-navigation {
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .slide-content-expand-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .slide-content-expand-content-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .slide-content-expand-content-item svg {
    cursor: pointer;
  }

  .slide-content-expand-content-item a {
    color: #2f3385;
    font-size: 16px;
    text-decoration: none;
  }

  @media (max-width: 768px) {
    #slider-container {
      flex-direction: column;
      gap: 0;
      margin-bottom: 40px;
    }

    #slides {
      flex-direction: column;
      gap: 16px;
      transform: none !important;
    }

    .slider-item {
      width: 100%;
      min-width: 0;
    }

    .slider-item img {
      width: 100%;
      height: 260px;
      object-fit: contain;
    }

    .slider-button {
      display: none;
    }

    .product-title {
      font-size: 18px;
    }

    .product-helper-label {
      font-size: 12px;
    }

    .slide-content {
      padding: 8px 12px;
    }
  }
/* Swiper CSS */
  @import url('https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css');

  .m10-product-detail {
    color: #fff;

  }

  .m10-product-info {
    display: flex;
    flex-direction: column;
  }

  .m10-product-container {
    margin: 0 auto;
    padding: 0 60px;
    max-width: 1500px;
  }

  .m10-product-image-container {
    display: flex;
    flex-direction: column;
    gap: 60px;
  }

  .m10-product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5rem;
    padding: 80px 0;
  }

  .m10-main-image-wrapper {
    position: relative;
    cursor: zoom-in;
    height: 500px;
    width: 100%;
    overflow: hidden;
  }

  .m10-main-product-image {
    object-fit: contain;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
    transform-origin: center center;
  }

  .m10-main-product-image.m10-zoomed {
    cursor: grab;
    transform: scale(2);
  }

  .m10-main-product-image.m10-zoomed:active {
    cursor: grabbing;
  }

  /* Navigation arrows */
  .m10-image-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: white;
    width: 44px;
    height: 44px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    border-radius: 50%;
    transition: all 0.3s ease;
    opacity: 0.8;
  }

  .m10-image-nav:hover {
    background: transparent;
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
  }

  .m10-image-nav-prev {
    left: 15px;
  }

  .m10-image-nav-next {
    right: 15px;
  }

  .m10-image-nav svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    pointer-events: none;
  }

  .m10-product-gallery-container {
    position: relative;
    margin-top: 3rem;
    overflow: hidden;
  }

  .m10-product-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding: 0 1rem;
    transition: transform 0.3s ease;
  }

  .m10-gallery-image {
    width: 100%;
    height: auto;
    cursor: pointer;
    transition: all 0.3s ease;
    aspect-ratio: 1;
    object-fit: contain;
  }

  .m10-product-logo-image {
    height: auto;
    width: 200px;
  }

  .m10-product-heading {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 2rem;
  }

  .m10-price-amount {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
  }

  .m10-product-description {
    /* width: 70%; */
  }

  .m10-product-logo,
  .m10-product-price {
    margin-bottom: 1.5rem;
  }

  .m10-product-description {
    margin-bottom: 2.5rem;
  }

  .m10-description-text {
    font-size: 18px !important;
    font-style: normal;
    font-weight: 300 !important;
    letter-spacing: 0.02em;
    line-height: 130%;
    font-family: 'articulat-cf', sans-serif !important;
  }

  .m10-specs-heading {
    font-family: 'articulat-cf', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 100;
    line-height: normal;
    color: #e6e7e8;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .m10-specs-heading-span {
    font-family: 'articulat-cf', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .m10-specs-grid {
    padding-top: 1rem;
  }

  .m10-spec-item {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 18px 0px;
  }

  .m10-spec-label {
    font-family: 'articulat-cf', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
  }

  .m10-spec-value {
    font-family: 'articulat-cf', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 100;
    line-height: normal;
    text-transform: uppercase;
    grid-column: 2 span;
  }

  .m10-dimensions-section {
    padding: 80px 20px;
    background-color: #231f20;
    color: white;
  }

  .m10-dimensions-title {
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    margin-bottom: 60px;
    margin-top: 60px;
  }

  .m10-dimensions-specs {
    padding-top: 20px;
  }

  .m10-dimensions-stem-short {
    margin-bottom: 30px;
  }

  .m10-dimensions-stem-title {
    font-size: 20px;
    font-weight: 600;
    line-height: normal;
  }

  .m10-dimensions-stem-length {
    color: #e6e7e8;
    margin-top: 5px;
    margin-bottom: 20px;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    line-height: normal;
  }

  .m10-dimensions-weight-title {
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    line-height: normal;
    padding: 5px 0px;
  }

  .m10-dimensions-weight-item {
    font-size: 16px;
    font-style: normal;
    font-weight: 200;
    padding: 5px 0px;
    line-height: normal;
  }

  .m10-dimensions-stem-long {
    opacity: 0.5;
  }

  .m10-dimensions-diagram {
    width: 100%;
  }

  .m10-dimensions-diagram img {
    max-width: 600px;
    height: auto;
  }

  .m10-technical-specs {
  }

  @media (min-width: 1024px) {
    .m10-spec-item {
      grid-template-columns: repeat(2, 1fr);
    }
    .m10-spec-value {
      grid-column: unset;
    }
  }

  @media (min-width: 1440px) {
    .m10-spec-item {
      grid-template-columns: repeat(3, 1fr); /* Return to original layout */
    }
    .m10-spec-value {
      grid-column: 2 span; /* Return to original spanning */
    }

    .m10-product-container {
      margin: 0 auto;
      padding: 0 60px;
    }
  }

  @media (max-width: 768px) {
    .m10-product-grid {
      grid-template-columns: repeat(1, 1fr);
    }

    .m10-specs-grid {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 3vh; /* vertical horizontal */
    }

    /* Remove the grid from individual spec items */
    .m10-spec-item {
      display: contents;
    }

    .m10-spec-label {
      white-space: nowrap;
      font-size: 15px;
    }

    .m10-spec-value {
      grid-column: unset;
      font-size: 15px;
    }

    .m10-product-grid {
      gap: 20px;
      padding: 60px 0;
    }

    .m10-product-description {
      width: 100%;
    }

    .m10-product-container {
      padding: 0vh 20px;
    }

    .m10-product-logo-image {
      height: auto;
      width: 150px;
    }

    .m10-dimensions-section {
      padding: 20px;
    }

    .m10-description-text {
      font-size: 16px !important;
    }

    .m10-specs-heading,
    .m10-specs-heading-span {
      font-size: 15px !important;
    }

    .m10-dimensions-title {
      font-size: 20px !important;
      margin-bottom: 18px;
    }

    .m10-dimensions-stem-title {
      font-size: 18px;
    }

    .m10-dimensions-weight-item {
      font-size: 15px;
    }

    .m10-dimensions-stem-length {
      font-size: 15px;
    }

    .m10-dimensions-weight-title {
      font-size: 14px;
    }

    .m10-main-image-wrapper {
      height: 300px;
    }

    .m10-product-gallery {
      grid-template-columns: repeat(3, 1fr);
    }

    .m10-product-image-container {
      gap: 16px;
    }
  }

  .m10-triple-image-section {
    padding: 60px 0;
    background-color: #231f20;
  }

  .m10-triple-image-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: center;
  }

  .image-item {
    position: relative;
    width: 100%;
    height: 170px;
    min-width: 170px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .m10-triple-image {
    object-fit: contain;
  }

  .placeholder-svg {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    background-color: #231f20;
  }

  .m10-triple-image-section .slider-dots {
    display: none;
  }

  @media (max-width: 768px) {
    .image-grid {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x proximity;
      scroll-behavior: smooth;
      -webkit-scroll-behavior: smooth;
      gap: 0;
      position: relative;
      border: solid 1px transparent; /* Don't remove for swiper */
    }

    .image-grid::-webkit-scrollbar {
      display: none;
    }

    .image-item {
      flex: 0 0 100%;
      scroll-snap-align: start;
      padding: 0 20px;
      border: solid 1px transparent; /* Don't remove for swiper */
    }

    .m10-triple-image-section .slider-dots {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 20px;
    }

    .m10-triple-image-section .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #666;
      transition: background-color 0.3s ease;
    }

    .m10-triple-image-section .dot.active {
      background-color: #ddd;
    }
  }
/* Swiper CSS */
  @import url('https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css');

  .m6-product-detail {
    color: #fff;
  }

  .m6-product-info {
    display: flex;
    flex-direction: column;
  }

  .m6-product-container {
    margin: 0 auto;
    padding: 0vh 60px;
    max-width: 1500px;
  }

  .m6-product-image-container {
    display: flex;
    flex-direction: column;
    gap: 47px;
  }

  .m6-product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15rem;
    padding: 3rem 0;
  }

  .m6-main-image-wrapper {
    position: relative;
    cursor: zoom-in;
    height: 500px;
    width: 100%;
    overflow: hidden;
  }

  .m6-main-product-image {
    object-fit: contain;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
    transform-origin: center center;
  }

  .m6-main-product-image.m6-zoomed {
    cursor: grab;
    transform: scale(2);
  }

  .m6-main-product-image.m6-zoomed:active {
    cursor: grabbing;
  }

  /* Navigation arrows */
  .m6-image-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: white;
    width: 44px;
    height: 44px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    border-radius: 50%;
    transition: all 0.3s ease;
    opacity: 0.8;
  }

  .m6-image-nav:hover {
    background: transparent;
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
  }

  .m6-image-nav-prev {
    left: 15px;
  }

  .m6-image-nav-next {
    right: 15px;
  }

  .m6-image-nav svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    pointer-events: none;
  }

  .m6-product-gallery-container {
    position: relative;
    margin-top: 3rem;
    overflow: hidden;
  }

  .m6-product-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding: 0 1rem;
    transition: transform 0.3s ease;
  }

  .m6-gallery-image {
    width: 100%;
    height: auto;
    cursor: pointer;
    transition: all 0.3s ease;
    aspect-ratio: 1;
    object-fit: contain;
  }

  .m6-product-logo-image {
    height: auto;
    width: 200px;
  }

  .m6-product-heading {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 2rem;
  }

  .m6-price-amount {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
  }

  .m6-product-description {
    /* width: 70%; */
  }

  .m6-product-logo,
  .m6-product-price {
    margin-bottom: 1.5rem;
  }

  .m6-product-description {
    margin-bottom: 2.5rem;
  }

  .m6-description-text {
    font-size: 18px !important;
    font-style: normal;
    font-weight: 300 !important;
    letter-spacing: 0.02em;
    line-height: 130%;
    font-family: 'articulat-cf', sans-serif !important;
  }

  .m6-specs-heading {
    font-family: 'articulat-cf', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 100;
    line-height: normal;
    color: #e6e7e8;
    margin-bottom: 1rem;
  }

  .m6-specs-heading-span {
    font-family: 'articulat-cf', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .m6-specs-grid {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1rem;
  }

  .m6-spec-item {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 18px 0px;
  }

  .m6-spec-label {
    font-family: 'articulat-cf', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
  }

  .m6-spec-value {
    font-family: 'articulat-cf', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 100;
    line-height: normal;
    text-transform: uppercase;
    grid-column: 2 span;
  }

  .m6-dimensions-section {
    padding: 80px 20px;
    background-color: #231f20;
    color: white;
  }

  .m6-dimensions-title {
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    margin-bottom: 60px;
    margin-top: 60px;
  }

  .m6-dimensions-specs {
    padding-top: 20px;
  }

  .m6-dimensions-stem-short {
    margin-bottom: 30px;
  }

  .m6-dimensions-stem-title {
    font-size: 20px;
    font-weight: 600;
    line-height: normal;
  }

  .m6-dimensions-stem-length {
    color: #e6e7e8;
    margin-top: 5px;
    margin-bottom: 20px;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    line-height: normal;
  }

  .m6-dimensions-weight-title {
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    line-height: normal;
    padding: 5px 0px;
  }

  .m6-dimensions-weight-item {
    font-size: 16px;
    font-style: normal;
    font-weight: 200;
    padding: 5px 0px;
    line-height: normal;
  }

  .m6-dimensions-stem-long {
    opacity: 0.5;
  }

  .m6-dimensions-diagram {
    width: 100%;
  }

  .m6-dimensions-diagram img {
    max-width: 600px;
    height: auto;
  }

  .m6-technical-specs {
  }

  @media (min-width: 1024px) {
    .m6-spec-item {
      grid-template-columns: repeat(2, 1fr);
    }
    .m6-spec-value {
      grid-column: unset;
    }
  }

  @media (min-width: 1440px) {
    .m6-spec-item {
      grid-template-columns: repeat(3, 1fr); /* Return to original layout */
    }
    .m6-spec-value {
      grid-column: 2 span; /* Return to original spanning */
    }

    .m6-product-container {
      margin: 0 auto;
      padding: 0vh 60px;
    }
  }

  @media (max-width: 768px) {
    .m6-product-grid {
      grid-template-columns: repeat(1, 1fr);
    }
    
    .m6-specs-grid {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 3vh; /* vertical horizontal */
    }

    /* Remove the grid from individual spec items */
    .m6-spec-item {
      display: contents;
    }

    .m6-spec-label {
      white-space: nowrap;
      font-size: 15px;
    }

    .m6-spec-value {
      grid-column: unset;
      font-size: 15px;
    }

    .m6-product-grid {
      gap: 40px;
    }

    .m6-product-description {
      width: 100%;
    }

    .m6-product-container {
      padding: 0vh 20px;
    }

    .m6-product-logo-image {
      height: auto;
      width: 150px;
    }

    .m6-dimensions-section {
      padding: 20px;
    }

    .m6-description-text {
      font-size: 16px !important;
    }

    .m6-specs-heading,
    .m6-specs-heading-span {
      font-size: 15px !important;
    }

    .m6-dimensions-title {
      font-size: 20px !important;
      margin-bottom: 18px;
    }

    .m6-dimensions-stem-title {
      font-size: 18px;
    }

    .m6-dimensions-weight-item {
      font-size: 15px;
    }

    .m6-dimensions-stem-length {
      font-size: 15px;
    }

    .m6-dimensions-weight-title {
      font-size: 14px;
    }

    .m6-main-image-wrapper {
      height: 300px;
    }

    .m6-product-gallery {
      grid-template-columns: repeat(3, 1fr);
    }

    .m6-product-image-container {
      gap: 16px;
    }
  }

  .m6-triple-image-section {
    padding: 60px 0;
    background-color: #231f20;
  }

  .m6-triple-image-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: center;
  }

  .image-item {
    position: relative;
    width: 100%;
    height: 170px;
    min-width: 170px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .m6-triple-image {
    object-fit: contain;
  }

  .placeholder-svg {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    background-color: #231f20;
  }

  .m6-triple-image-section .slider-dots {
    display: none;
  }

  @media (max-width: 768px) {
    .image-grid {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x proximity;
      scroll-behavior: smooth;
      -webkit-scroll-behavior: smooth;
      gap: 0;
      position: relative;
      border: solid 1px transparent; /* Don't remove for swiper */
    }

    .image-grid::-webkit-scrollbar {
      display: none;
    }

    .image-item {
      flex: 0 0 100%;
      scroll-snap-align: start;
      padding: 0 20px;
      border: solid 1px transparent; /* Don't remove for swiper */
    }

    .m6-triple-image-section .slider-dots {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 20px;
    }

    .m6-triple-image-section .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #666;
      transition: background-color 0.3s ease;
    }

    .m6-triple-image-section .dot.active {
      background-color: #ddd;
    }
  }
.wide-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }

  .article-template {
    display: flex;
    flex-direction: column;
    margin-bottom: 80px;
  }
  
  .article-template > * {
    width: 100%;
  }
  
  /* Article Content */
  .article-template__content.page-width.page-width--narrow {
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    color: #000;
    clear: both;
  }
  
  /* Fix spacing between sections */
  .article-template section + section {
    margin-top: 40px;
  }

  /* Article Image - New classes */
  .article-image-container {
    margin: 0 auto;
    clear: both;
    width: 100%;
    overflow: hidden;
    max-width: 60% !important;
  }
  
  .article-featured-image {
    margin: 40px auto;
    height: 401px;
    object-fit: cover;
    width: 100%;
    display: block;
  }

  /* Title and Metadata */
  .title-group {
    margin-top: 0;
  }
  
  h1.article-template__title {
    color: #000;
    font-family: "articulat-cf";
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: none;
  }

  .byline-group {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin: 24px 0;
  }
  
  .byline-group .circle-divider:after {
    content: none;
  }

  .author-text,
  .date-text,
  .location-text {
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .article-card__icon {
    flex-shrink: 0;
    width: 16px !important;
    height: 16px !important;
    display: inline-flex;
    align-items: center;
  }
  
  .article-card__icon svg {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
  }
  
  .byline-group .article-card__icon svg {
    width: 16px !important;
    height: 16px !important;
  }

  .article-card__icon svg path {
    fill: rgba(0, 0, 0, 0.50);
  }

  p.article-template__excerpt {
    color: rgba(0, 0, 0, 0.60);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
  }

  .caption-with-letter-spacing {
    letter-spacing: normal;
  }
  
  span.caption-with-letter-spacing,
  time {
    color: #000;
    font-size: 16px;
    line-height: 150%;
    text-transform: none;
  }
  
  /* Layout */
  .article-template__content.page-width.page-width--narrow,
  .page-width.page-width--narrow,
  .article-image-container {
    max-width: 60% !important;
  }
  
  /* Content styles */
  .article-template__content.page-width.page-width--narrow p,
  .article-template__content.page-width.page-width--narrow li,
  .article-template__content.page-width.page-width--narrow div {
    color: #000;
  }

  .article-template__content.page-width.page-width--narrow h1,
  .article-template__content.page-width.page-width--narrow h2,
  .article-template__content.page-width.page-width--narrow h3,
  .article-template__content.page-width.page-width--narrow h4,
  .article-template__content.page-width.page-width--narrow h5,
  .article-template__content.page-width.page-width--narrow h6 {
    color: #000;
  }

  .article-template__content.page-width.page-width--narrow h2 {
    color: #000 !important;
  }

  .article-template__content h2 {
    color: #000 !important;
  }

  .rte h2 {
    color: #000 !important;
  }

  .article-template__content.page-width.page-width--narrow a {
    color: #000;
  }

  /* Tags */
  .article-tags {
    margin-bottom: 8px;
  }
  .article-tags a {
    color: #b0b0b0;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    font-weight: 400;
    text-decoration: none;
  }
  .article-tags a:hover {
    color: #7d7878;
  }

  .title-container {
    padding: 0 !important;
  }

  /* Comments section */
  .article-template__comment-wrapper {
    margin-top: 5rem;
    padding: 2.7rem 0;
  }

  @media screen and (min-width: 750px) {
    .article-template__comment-wrapper {
      margin-top: 6rem;
      padding: 3.6rem 0;
    }
  }

  .article-template__comment-wrapper h2 {
    margin-top: 0;
  }

  .article-template__comments {
    margin-bottom: 5rem;
  }

  @media screen and (min-width: 750px) {
    .article-template__comments {
      margin-bottom: 7rem;
    }
  }

  .article-template__comments-fields {
    margin-bottom: 4rem;
  }

  .article-template__comments-comment {
    color: rgba(var(--color-foreground), 0.75);
    background-color: rgb(var(--color-background));
    margin-bottom: 1.5rem;
    padding: 2rem 2rem 1.5rem;
  }

  @media screen and (min-width: 750px) {
    .article-template__comments-comment {
      padding: 2rem 2.5rem;
    }
  }

  .article-template__comments-comment p {
    margin: 0 0 1rem;
  }

  .article-template__comment-fields > * {
    margin-bottom: 3rem;
  }

  @media screen and (min-width: 750px) {
    .article-template__comment-fields {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-column-gap: 4rem;
    }
  }

  .article-template__comment-warning {
    margin: 2rem 0 2.5rem;
  }

  /* Responsive */
  @media (min-width: 768px) and (max-width: 1024px) {
    .title-container {
      padding-left: 0rem !important;
    }
    
    /* Tablet Styles */
    .article-template__content.page-width.page-width--narrow,
    .page-width.page-width--narrow,
    .article-image-container {
      max-width: 80% !important;
    }
    
    .article-template {
      margin-bottom: 67px;
    }
    
    h1.article-template__title {
      padding-top: 16px;
    }
  }

  @media screen and (max-width: 768px) {
    .article-template__content.page-width.page-width--narrow,
    .page-width.page-width--narrow,
    .article-image-container {
      max-width: 100% !important;
    }
    .page-width--narrow {
      padding: 0 24px !important;
    }
    .related-post-item {
      flex: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }
    .related-posts .title-container {
      padding-left: 0 !important;
      justify-content: space-between;
    }
    .related-posts .title-container h3 {
      text-align: left;
    }
    
    /* Mobile styles */
    .article-template {
      margin-bottom: 67px;
    }
    
    h1.article-template__title {
      padding-top: 16px;
      color: #000;
      font-size: 32px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }
    
    .byline-group {
      flex-direction: column;
      gap: 16px;
    }
    
    .author-text,
    .date-text {
      color: #000;
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: 150%;
    }
    
    p.article-template__excerpt {
      color: rgba(0, 0, 0, 0.60);
      font-size: 18px;
      font-style: normal;
      font-weight: 500;
      line-height: 130%;
    }
    
    .article-featured-image {
      margin: 40px 0;
    }
    
    .article-image-container {
      padding: 0 24px;
      box-sizing: border-box;
    }
    
    .article-template__content.page-width.page-width--narrow {
      font-size: 18px;
      font-style: normal;
      font-weight: 400;
      line-height: 130%;
      color: #000;
    }
  }

  @media screen and (max-width: 320px) {
    .article-template__content.page-width.page-width--narrow,
    .page-width.page-width--narrow,
    .article-image-container {
      max-width: 100%;
    }
    .related-post-item {
      flex: 1 1 100%;
      max-width: 100%;
    }
    .breadcrumb {
      margin: 67px 0;
    }
    .related-posts {
      width: 92%;
    }
    .page-width--narrow {
      padding: 0 24px !important;
    }
    .article-featured-image {
      margin: 40px 0;
    }
    
    /* Smaller mobile screens - column layout for author/date */
    .byline-group {
      flex-direction: column;
      gap: 8px;
    }
  }
  
  /* New breakpoint for smaller mobile screens */
  @media screen and (max-width: 375px) {
    .byline-group {
      flex-direction: column;
      gap: 8px;
    }
    
    h1.article-template__title {
      font-size: 28px;
    }
    
    .article-template__content.page-width.page-width--narrow {
      font-size: 16px;
    }
  }

  /* Fix for article content */
  .article-image-container + * {
    clear: both;
  }

  .event-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  @media screen and (max-width: 768px) {
    .byline-group {
      flex-direction: column;
      gap: 16px;
      margin: 24px 0;
    }
  }
.MB6-product-detail {
    color: #fff;
  }

  .MB6-product-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .MB6-product-container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 80px 60px 80px 60px;
  }

  .MB6-product-grid {
    display: grid;
    gap: 10rem;
    grid-template-columns: repeat(2, 1fr);
  }

  @media (max-width: 768px) {
    .MB6-product-grid {
      grid-template-columns: 1fr;
    }
  }

  .main-image-wrapper {
    margin-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    position: sticky;
    top: 20px;
  }

  .main-product-image {
    width: 100%;
    height: auto;
    max-width: 639px;
    max-height: 743px;
    object-fit: contain;
  }

  .MB6-product-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

  .gallery-image {
    width: 100%;
    height: auto;
    cursor: pointer;
    transition: opacity 0.3s;
    aspect-ratio: 1;
    object-fit: cover;
  }

  .gallery-image:hover {
    opacity: 0.8;
  }

  .product-logo-image {
    height: auto;
    width: 200px;
  }

  .product-heading {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 2rem;
  }

  .price-amount {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
  }

  .MB6-product-description {
    /* width: 70%; */
  }

  .MB6-product-logo,
  .MB6-product-price,
  .MB6-product-description {
    margin-bottom: 3rem;
  }

  .description-text {
    font-size: 18px !important;
    font-style: normal;
    font-weight: 300 !important;
    letter-spacing: 0.02em;
    line-height: 130%;
    font-family: 'articulat-cf', sans-serif !important;
  }

  .specs-heading {
    font-family: 'articulat-cf', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 100;
    line-height: normal;
    color: #e6e7e8;
    margin-bottom: 1rem;
  }

  .specs-heading-span {
    font-family: 'articulat-cf', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .specs-grid {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1rem;
  }

  .spec-item {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 18px 0px;
  }

  .spec-label {
    font-family: 'articulat-cf', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
  }

  .spec-value {
    font-family: 'articulat-cf', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 100;
    line-height: normal;
    text-transform: uppercase;
    grid-column: 2 span;
  }

  .dimensions-section {
    padding: 80px 20px;
    background-color: #231f20;
    color: white;
  }

  .dimensions-title {
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    margin-bottom: 40px;
    margin-top: 60px;
    text-transform: uppercase;
  }

  .dimensions-specs {
    /* padding-top: 20px; */
  }

  .dimensions-stem-short {
    margin-bottom: 30px;
  }

  .dimensions-stem-title {
    font-size: 20px;
    font-weight: 600;
    line-height: normal;
  }

  .dimensions-stem-length {
    color: #e6e7e8;
    margin-top: 5px;
    margin-bottom: 20px;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    line-height: normal;
  }

  .dimensions-weight-title {
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    line-height: normal;
    padding: 5px 0px;
    text-transform: uppercase;
  }

  .dimensions-weight-item {
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    padding: 5px 0px;
    line-height: normal;
  }

  .dimensions-stem-long {
    opacity: 0.5;
  }

  .dimensions-diagram {
    width: 100%;
  }

  .dimensions-diagram img {
    max-width: 600px;
    height: auto;
  }

  @media (min-width: 1024px) {
    .spec-item {
      grid-template-columns: repeat(2, 1fr);
    }
    .spec-value {
      grid-column: unset;
    }

    .main-image-wrapper {
      margin-left: auto;
      margin-right: unset;
    }
  }

  @media (min-width: 1440px) {
    .spec-item {
      grid-template-columns: repeat(3, 1fr); /* Return to original layout */
    }
    .spec-value {
      grid-column: 2 span; /* Return to original spanning */
    }

    .MB6-product-container {
      margin: 0 auto;
      padding: 0vh 60px;
    }
  }

  @media (max-width: 768px) {
    .specs-grid {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 3vh; /* vertical horizontal */
    }

    /* Remove the grid from individual spec items */
    .spec-item {
      display: contents;
    }

    .spec-label {
      white-space: nowrap;
      font-size: 15px;
    }

    .spec-value {
      grid-column: unset;
      font-size: 15px;
    }

    .MB6-product-grid {
      gap: 3vh;
    }

    .MB6-product-description {
      width: 100%;
    }

    .MB6-product-container {
      padding: 0vh 20px;
    }

    .product-logo-image {
      height: auto;
      width: 150px;
    }

    .dimensions-section {
      padding: 20px;
    }

    .description-text {
      font-size: 16px !important;
    }

    .specs-heading,
    .specs-heading-span {
      font-size: 15px !important;
    }

    .dimensions-title {
      font-size: 20px !important;
      margin-bottom: 18px;
    }

    .dimensions-stem-title {
      font-size: 18px;
    }

    .dimensions-weight-item {
      font-size: 15px;
    }

    .dimensions-diagram {
      max-width: 300px;
    }

    .dimensions-stem-length {
      font-size: 15px;
    }

    .dimensions-weight-title {
      font-size: 14px;
    }
  }
.ME6-product-detail {
    color: #fff;
  }

  .ME6-product-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .ME6-product-container {
    margin: 0 auto;
    padding: 0px 60px 80px 60px;
  }

  .ME6-product-grid {
    display: grid;
    gap: 15rem;
  }

  .main-image-wrapper {
    margin-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    position: sticky;
    top: 20px;
  }

  .main-product-image {
    width: 100%;
    height: auto;
    max-width: 639px;
    max-height: 743px;
    object-fit: contain;
  }

  .ME6-product-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

  .gallery-image {
    width: 100%;
    height: auto;
    cursor: pointer;
    transition: opacity 0.3s;
    aspect-ratio: 1;
    object-fit: cover;
  }

  .gallery-image:hover {
    opacity: 0.8;
  }

  .product-logo-image {
    height: auto;
    width: 200px;
  }

  .product-heading {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 2rem;
  }

  .price-amount {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
  }

  .ME6-product-description {
    width: 70%;
  }

  .ME6-product-logo,
  .ME6-product-price,
  .ME6-product-description {
    margin-bottom: 3rem;
  }

  .description-text {
    font-size: 18px !important;
    font-style: normal;
    font-weight: 300 !important;
    letter-spacing: 0.02em;
    line-height: 130%;
    font-family: 'articulat-cf', sans-serif !important;
  }

  .specs-heading {
    font-family: 'articulat-cf', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 100;
    line-height: normal;
    color: #e6e7e8;
    margin-bottom: 1rem;
  }

  .specs-heading-span {
    font-family: 'articulat-cf', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .specs-grid {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1rem;
  }

  .spec-item {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 18px 0px;
  }

  .spec-label {
    font-family: 'articulat-cf', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
  }

  .spec-value {
    font-family: 'articulat-cf', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 100;
    line-height: normal;
    text-transform: uppercase;
    grid-column: 2 span;
  }

  .dimensions-section {
    padding: 80px 20px;
    background-color: #231f20;
    color: white;
  }

  .dimensions-title {
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    margin-bottom: 40px;
    margin-top: 60px;
    text-transform: uppercase;
  }

  .dimensions-specs {
    /* padding-top: 20px; */
  }

  .dimensions-stem-short {
    margin-bottom: 30px;
  }

  .dimensions-stem-title {
    font-size: 20px;
    font-weight: 600;
    line-height: normal;
  }

  .dimensions-stem-length {
    color: #e6e7e8;
    margin-top: 5px;
    margin-bottom: 20px;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    line-height: normal;
  }

  .dimensions-weight-title {
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    line-height: normal;
    padding: 5px 0px;
    text-transform: uppercase;
  }

  .dimensions-weight-item {
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    padding: 5px 0px;
    line-height: normal;
  }

  .dimensions-stem-long {
    opacity: 0.5;
  }

  .dimensions-diagram {
    width: 100%;
  }

  .dimensions-diagram img {
    max-width: 600px;
    height: auto;
  }

  @media (min-width: 768px) {
    .ME6-product-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .spec-item {
      grid-template-columns: repeat(2, 1fr);
    }
    .spec-value {
      grid-column: unset;
    }

    .main-image-wrapper {
      margin-left: auto;
      margin-right: unset;
    }
  }

  @media (min-width: 1440px) {
    .spec-item {
      grid-template-columns: repeat(3, 1fr); /* Return to original layout */
    }
    .spec-value {
      grid-column: 2 span; /* Return to original spanning */
    }

    .ME6-product-container {
      margin: 0 auto;
      padding: 0vh 12vh;
    }
  }

  @media (max-width: 768px) {
    .specs-grid {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 3vh; /* vertical horizontal */
    }

    /* Remove the grid from individual spec items */
    .spec-item {
      display: contents;
    }

    .spec-label {
      white-space: nowrap;
      font-size: 15px;
    }

    .spec-value {
      grid-column: unset;
      font-size: 15px;
    }

    .ME6-product-grid {
      gap: 3vh;
    }

    .ME6-product-description {
      width: 100%;
    }

    .ME6-product-container {
      padding: 0vh 2vh;
    }

    .product-logo-image {
      height: auto;
      width: 150px;
    }

    .dimensions-section {
      padding: 20px;
    }

    .description-text {
      font-size: 16px !important;
    }

    .specs-heading,
    .specs-heading-span {
      font-size: 15px !important;
    }

    .dimensions-title {
      font-size: 20px !important;
      margin-bottom: 18px;
    }

    .dimensions-stem-title {
      font-size: 18px;
    }

    .dimensions-weight-item {
      font-size: 15px;
    }

    .dimensions-diagram {
      max-width: 300px;
    }

    .dimensions-stem-length {
      font-size: 15px;
    }

    .dimensions-weight-title {
      font-size: 14px;
    }
  }
.MT1-product-detail {
    color: #fff;
  }

  .MT1-product-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .MT1-product-container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 80px 60px;
  }

  .MT1-product-grid {
    display: grid;
    gap: 10rem;
  }

  .main-image-wrapper {
    margin-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    position: sticky;
    top: 20px;
  }

  .main-product-image {
    width: 100%;
    height: auto;
    max-width: 639px;
    max-height: 743px;
    object-fit: contain;
  }

  .MT1-product-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

  .gallery-image {
    width: 100%;
    height: auto;
    cursor: pointer;
    transition: opacity 0.3s;
    aspect-ratio: 1;
    object-fit: cover;
  }

  .gallery-image:hover {
    opacity: 0.8;
  }

  .product-logo-image {
    height: auto;
    width: 200px;
  }

  .product-heading {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 2rem;
  }

  .price-amount {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
  }

  .MT1-product-description {
    /* width: 70%; */
  }

  .MT1-product-logo,
  .MT1-product-price,
  .MT1-product-description {
    margin-bottom: 3rem;
  }

  .description-text {
    font-size: 18px !important;
    font-style: normal;
    font-weight: 300 !important;
    letter-spacing: 0.02em;
    line-height: 130%;
    font-family: 'articulat-cf', sans-serif !important;
  }

  .specs-heading {
    font-family: 'articulat-cf', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 100;
    line-height: normal;
    color: #e6e7e8;
    margin-bottom: 1rem;
  }

  .specs-heading-span {
    font-family: 'articulat-cf', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .specs-grid {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1rem;
  }

  .spec-item {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 18px 0px;
  }

  .spec-label {
    font-family: 'articulat-cf', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
  }

  .spec-value {
    font-family: 'articulat-cf', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 100;
    line-height: normal;
    text-transform: uppercase;
    grid-column: 2 span;
  }

  .dimensions-section {
    padding: 80px 20px;
    background-color: #231f20;
    color: white;
  }

  .dimensions-title {
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    margin-bottom: 20px;
    margin-top: 60px;
    text-transform: uppercase;
  }

  .dimensions-specs {
    /* padding-top: 20px; */
  }

  .dimensions-stem-short {
    margin-bottom: 30px;
  }

  .dimensions-stem-title {
    font-size: 20px;
    font-weight: 600;
    line-height: normal;
  }

  .dimensions-stem-length {
    color: #e6e7e8;
    margin-top: 5px;
    margin-bottom: 20px;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    line-height: normal;
  }

  .dimensions-weight-title {
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    line-height: normal;
    padding: 5px 0px;
    text-transform: uppercase;
  }

  .dimensions-weight-item {
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    padding: 5px 0px;
    line-height: normal;
  }

  .dimensions-stem-long {
    opacity: 0.5;
  }

  .dimensions-diagram {
    width: 100%;
  }

  .dimensions-diagram img {
    max-width: 600px;
    height: auto;
  }

  @media (min-width: 768px) {
    .MT1-product-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .spec-item {
      grid-template-columns: repeat(2, 1fr);
    }
    .spec-value {
      grid-column: unset;
    }

    .main-image-wrapper {
      margin-left: auto;
      margin-right: unset;
    }
  }

  @media (min-width: 1440px) {
    .spec-item {
      grid-template-columns: repeat(3, 1fr); /* Return to original layout */
    }
    .spec-value {
      grid-column: 2 span; /* Return to original spanning */
    }

    .MT1-product-container {
      margin: 0 auto;
      padding: 80px 60px;
    }
  }

  @media (max-width: 768px) {
    .specs-grid {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 3vh; /* vertical horizontal */
    }

    /* Remove the grid from individual spec items */
    .spec-item {
      display: contents;
    }

    .spec-label {
      white-space: nowrap;
      font-size: 15px;
    }

    .spec-value {
      grid-column: unset;
      font-size: 15px;
    }

    .MT1-product-grid {
      gap: 3vh;
    }

    .MT1-product-description {
      width: 100%;
    }

    .MT1-product-container {
      padding: 60px 20px;
    }

    .product-logo-image {
      height: auto;
      width: 150px;
    }

    .dimensions-section {
      padding: 20px;
    }

    .description-text {
      font-size: 16px !important;
    }

    .specs-heading,
    .specs-heading-span {
      font-size: 15px !important;
    }

    .dimensions-title {
      font-size: 20px !important;
      margin-bottom: 18px;
    }

    .dimensions-stem-title {
      font-size: 18px;
    }

    .dimensions-weight-item {
      font-size: 15px;
    }

    .dimensions-stem-length {
      font-size: 15px;
    }

    .dimensions-weight-title {
      font-size: 14px;
    }
  }
.MT2-product-detail {
    color: #fff;
  }

  .MT2-product-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .MT2-product-container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0vh 60px;
  }

  .MT2-product-grid {
    display: grid;
    gap: 10rem;
    padding: 3rem 0;
  }

  .main-image-wrapper {
    margin-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    position: sticky;
    top: 70px;
  }

  .main-product-image {
    width: 100%;
    height: auto;
    max-width: 639px;
    max-height: 743px;
    object-fit: contain;
  }

  .MT2-product-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

  .gallery-image {
    width: 100%;
    height: auto;
    cursor: pointer;
    transition: opacity 0.3s;
    aspect-ratio: 1;
    object-fit: cover;
  }

  .gallery-image:hover {
    opacity: 0.8;
  }

  .product-logo-image {
    height: auto;
    width: 200px;
  }

  .product-heading {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 2rem;
  }

  .price-amount {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
  }

  .MT2-product-description {
    /* width: 70%; */
  }

  .MT2-product-logo,
  .MT2-product-price,
  .MT2-product-description {
    margin-bottom: 3rem;
  }

  .description-text {
    font-size: 18px !important;
    font-style: normal;
    font-weight: 300 !important;
    letter-spacing: 0.02em;
    line-height: 130%;
    font-family: 'articulat-cf', sans-serif !important;
  }

  .specs-heading {
    font-family: 'articulat-cf', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 100;
    line-height: normal;
    color: #e6e7e8;
    margin-bottom: 1rem;
  }

  .specs-heading-span {
    font-family: 'articulat-cf', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .specs-grid {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1rem;
  }

  .spec-item {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 18px 0px;
  }

  .spec-label {
    font-family: 'articulat-cf', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
  }

  .spec-value {
    font-family: 'articulat-cf', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 100;
    line-height: normal;
    text-transform: uppercase;
    grid-column: 2 span;
  }

  .dimensions-section {
    padding: 80px 20px;
    background-color: #231f20;
    color: white;
  }

  .dimensions-title {
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    margin-bottom: 20px;
    margin-top: 60px;
    text-transform: uppercase;
  }

  .dimensions-specs {
    /* padding-top: 20px; */
  }

  .dimensions-stem-short {
    margin-bottom: 30px;
  }

  .dimensions-stem-title {
    font-size: 20px;
    font-weight: 600;
    line-height: normal;
  }

  .dimensions-stem-length {
    color: #e6e7e8;
    margin-top: 5px;
    margin-bottom: 20px;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    line-height: normal;
  }

  .dimensions-weight-title {
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    line-height: normal;
    padding: 5px 0px;
    text-transform: uppercase;
  }

  .dimensions-weight-item {
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    padding: 5px 0px;
    line-height: normal;
  }

  .dimensions-stem-long {
    opacity: 0.5;
  }

  .dimensions-diagram {
    width: 100%;
  }

  .dimensions-diagram img {
    max-width: 272px;
    height: auto;
  }

  @media (min-width: 768px) {
    .MT2-product-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .spec-item {
      grid-template-columns: repeat(2, 1fr);
    }
    .spec-value {
      grid-column: unset;
    }

    .main-image-wrapper {
      margin-left: auto;
      margin-right: unset;
    }
  }

  @media (min-width: 1440px) {
    .spec-item {
      grid-template-columns: repeat(3, 1fr); /* Return to original layout */
    }
    .spec-value {
      grid-column: 2 span; /* Return to original spanning */
    }

    .MT2-product-container {
      margin: 0 auto;
      padding: 80px 60px;
    }
  }

  @media (max-width: 768px) {
    .specs-grid {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 3vh; /* vertical horizontal */
    }

    /* Remove the grid from individual spec items */
    .spec-item {
      display: contents;
    }

    .spec-label {
      white-space: nowrap;
      font-size: 15px;
    }

    .spec-value {
      grid-column: unset;
      font-size: 15px;
    }

    .MT2-product-grid {
      gap: 3vh;
    }

    .MT2-product-description {
      width: 100%;
    }

    .MT2-product-container {
      padding: 60px 20px;
    }

    .product-logo-image {
      height: auto;
      width: 150px;
    }

    .dimensions-section {
      padding: 20px;
    }

    .description-text {
      font-size: 16px !important;
    }

    .specs-heading,
    .specs-heading-span {
      font-size: 15px !important;
    }

    .dimensions-title {
      font-size: 20px !important;
      margin-bottom: 18px;
    }

    .dimensions-stem-title {
      font-size: 18px;
    }

    .dimensions-weight-item {
      font-size: 15px;
    }

    .dimensions-stem-length {
      font-size: 15px;
    }

    .dimensions-weight-title {
      font-size: 14px;
    }
  }
.news-hero-banner {
  display: flex;
  height: 40vw; /* Responsive height based on viewport width */
  max-height: 359px;
  min-height: 250px;
  padding: 80px 160px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 40px;
  background-size: cover !important;
  background-position: top !important;
}

.news-hero-content h1 {
  color: #FFF;
  font-family: "articulat-cf", sans-serif;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 125%; /* 50px */
  margin: 0;
}

@media screen and (max-width: 749px) {
  .news-hero-banner {
    padding: 40px 20px;
  }
  
  .news-hero-content h1 {
    font-size: 32px;
  }
}
.one-image-container {
    background-color: #231F20;
  }

  .one-image-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4vh;
  }

  @media (max-width: 768px) {
    .one-image-wrapper {
      gap: 1vh;
    }
  }

  .one-image-image-container {
    width: 100%;
    height: 100%;
  }

  .one-image-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: 600px;
  }

  @media (max-width: 768px) {
    .one-image-image-container img {
      max-width: 300px;
    }
  }
.hero-banner-slideshow-wrapper {
    height: 100vh;
    width: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 1;
    background: radial-gradient(80.68% 59.45% at 47.62% 43.04%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  }

  .hero-banner-slideshow-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  .slide-show-hybrid-content {
    display: flex;
    align-items: flex-end;
    gap: 32px;
  }

  .swiper-controls {
    display: flex;
    align-items: center;
    height: 48px;
  }

  image.video-slider {
    font-size: 24px !important;
    font-family: 'articulat-cf', sans-serif;
    margin-bottom: 0;
    text-align: right;
  }

  @media screen and (max-width: 767px) {
    image.video-slider {
      line-height: 100% !important;
    }
  }

  p.video-slider {
    font-size: 24px !important;
    font-family: 'articulat-cf', sans-serif;
    margin-top: 16px;
    line-height: 130% !important;
    font-weight: 700;
    text-align: left;
    color: #f6f6f6;
    width: 350px;
  }

  a.video-slider {
    font-family: 'articulat-cf', sans-serif;
    border-radius: 100px !important;
    padding: 12px 36px !important;
    margin-top: 10px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    background-color: #fff;
    text-decoration: none;
    color: #202020;
    cursor: pointer;
  }

  video#autoplay-video-mobile {
    display: none;
  }
  video#autoplay-video-desktop {
    height: 100vh;
    object-fit: cover;
    width: 100vw;
  }

  .swiper-button-next,
  .swiper-button-prev {
    cursor: pointer;
    display: block !important;
    color: #b6b5b8 !important;
    width: 48px !important;
    height: 48px !important;
    position: static !important;
    margin: auto 0;
  }

  .swiper-button-next:after,
  .swiper-button-prev:after {
    content: none;
  }

  .swiper-button-next svg,
  .swiper-button-prev svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  .swiper-button-next {
    padding: 12px;
  }

  .swiper-button-prev {
    padding: 12px;
  }

  .swiper-horizontal > .swiper-pagination-bullets,
  .swiper-pagination-bullets.swiper-pagination-horizontal,
  .swiper-pagination-custom,
  .swiper-pagination-fraction {
    position: static !important;
    margin-left: 22px;
  }

  .swiper-pagination-bullet {
    background-color: #fff !important;
    opacity: 0.7;
  }

  .swiper-pagination-bullet-active {
    background-color: #fff !important;
    opacity: 1;
  }

  .swiper-wrapper {
    margin-bottom: -10px !important;
  }

  .custom-hybrid-slideshow {
    width: 100%;
    overflow: hidden;
    height: 100vh;
    position: relative;
  }

  .desktop-image {
    height: 100vh;
    width: 100%;
    object-fit: cover;
  }

  .video-slider-m10-logo-wrapper {
    width: 195px;
    height: 140px;
  }

  .video-slider-m10-logo {
    object-fit: contain;
  }

  .video-slider-description-wrapper {
    width: 380px;
  }

  .video-slider-description {
    font-family: 'articulat-cf', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 150%;
    text-align: left;
    letter-spacing: 0.02em;
    color: rgb(var(--color-foreground));
    text-transform: uppercase;
    padding-bottom: 10px;
  }

  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    a:empty {
      display: block !important;
    }

    a.video-slider {
      background-color: transparent !important;
      display: block !important;
    }
  }

  @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .swiper-button-next,
    .swiper-button-prev {
      display: flex !important;
    }
  }

  @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .swiper-button-next,
    .swiper-button-prev {
      display: flex !important;
    }
  }

  @media screen and (max-width: 768px) {
    img.video-slider {
      max-width: 190px;
      padding-left: 20px;
    }

    .swiper-button-next,
    .swiper-button-prev {
      display: block !important;
    }

    .video-slider-m10-logo-wrapper {
      width: 140px;
      height: auto;
    }
  }

  @media screen and (max-width: 430px) {
    video#autoplay-video-mobile {
      display: flex;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    video#autoplay-video-desktop {
      display: none !important;
    }

    .swiper-button-next,
    .swiper-button-prev {
      display: block !important;
    }

    .swiper-horizontal > .swiper-pagination-bullets,
    .swiper-pagination-bullets.swiper-pagination-horizontal,
    .swiper-pagination-custom,
    .swiper-pagination-fraction {
      bottom: 12% !important;
    }

    .swiper-slide {
      height: 100vh !important;
    }

    p.video-slider {
      display: flex;
      font-size: 18px !important;
      line-height: 26px;
      letter-spacing: 1px;
    }

    a.video-slider {
      background-color: transparent !important;
    }

    a:empty {
      display: block !important;
    }
  }

  @media screen and (max-width: 1024px) {
    .swiper-pagination {
      display: none !important;
    }

    .swiper-controls {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      width: 100%;
      transform: translateY(-50%);
      justify-content: space-between;
      padding: 0 5vh;
      z-index: 10;
    }

    .hero-banner-slideshow-content {
      flex-direction: column-reverse;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 40px;
    }

    .video-slider-description {
      font-size: 16px;
      font-style: normal;
      font-weight: 300;
      line-height: 150%; /* 24px */
      letter-spacing: 0.02em;
      padding-bottom: 0;
    }

    .slide-show-hybrid-content {
      display: flex;
      width: 438px;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: 24px;
    }
  }

  @media screen and (max-width: 768px) {
    .swiper-controls {
      padding: 0 2vh;
    }

    .slide-show-hybrid-content {
      flex-direction: column;
      width: 100%;
      align-items: flex-start;
      gap: 20px;
    }

    .video-slider-description-wrapper {
      width: 100%;
    }
  }

  @media screen and (max-width: 430px) {
    .swiper-controls {
      padding: 0;
    }
  }
.support-browse-categories {
    max-width: 890px;
    margin: 0 auto;
    padding: 0 16px; /* Add padding for mobile and tablet */
  }

  .support-browse-categories__title {
    text-align: center;
    font-size: 24px;
    text-transform: uppercase;
    margin-bottom: 40px;
    color: white;
  }

  .content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
  }

  .support-browse-categories__category {
    position: relative;
    width: 100%;
    height: 360px;
    overflow: hidden;
    border-radius: 10px;
  }

  .support-browse-categories__category-link {
    display: block;
    text-decoration: none;
    color: inherit;
  }

  .support-browse-categories__image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
  }

  .support-browse-categories__text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
    color: white;
    padding: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    gap: 24px;
  }

  .support-browse-categories__category-title {
    font-size: 20px;
    text-transform: uppercase;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'articulat-cf', sans-serif;
  }

  .support-browse-categories__category-title svg {
    margin-left: 10px;
  }

  .support-browse-categories__category-description {
    font-size: 16px;
    margin: 5px 0 0;
    line-height: 1.5;
    color: #fff;
    font-family: 'articulat-cf', sans-serif;
    opacity: 80%;
  }

  /* Media queries for mobile and tablet */
  @media (max-width: 768px) {
    .support-browse-categories {
      padding: 0 16px; /* Ensure padding on smaller screens */
    }

    .support-browse-categories__title {
      font-size: 20px; /* Adjust title size for smaller screens */
    }

    .support-browse-categories__category {
      height: auto; /* Adjust height for smaller screens */
    }

    .support-browse-categories__image {
      height: auto; /* Adjust image height for smaller screens */
    }

    .support-browse-categories__text {
      padding: 20px; /* Adjust text padding for smaller screens */
      gap: 12px; /* Adjust gap for smaller screens */
    }

    .support-browse-categories__category-title {
      font-size: 18px; /* Adjust category title size for smaller screens */
    }

    .support-browse-categories__category-description {
      font-size: 14px; /* Adjust description size for smaller screens */
    }
  }
.support-ticket-section { 
    padding: 0;
    margin: 40px 0;
  }

  .support-ticket-cta {
    display: flex;
    padding: 60px 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    align-self: stretch;
    background: rgba(255, 255, 255, 0.05);
  }

  .support-ticket-cta__description {
    color: #FFF;
    text-align: center;
    font-family: "articulat-cf";
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    margin: 0;
  }

  #support-ticket-cta-button {
    font-family: "articulat-cf";
    font-size: 20px;
    font-weight: 500;
    line-height: normal;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .plus-icon-white {
    width: 10px;
    height: 10px;
    max-height: 25.6px;
    transition: transform 0.3s ease-in-out;
  }

  .animate-plus-white:hover .plus-icon-white {
    transform: rotate(90deg);
  }

  .submit-support-text {
    display: -webkit-box;
    max-height: 24px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    color: #FFF;
    text-overflow: ellipsis;
    font-family: "articulat-cf";
  }

  .support-link-text {
    text-decoration: none;
    color: #fff;
    border-bottom: solid 1px white;
  }

  /* Responsive styles */
  @media (max-width: 768px) {
    .support-ticket-cta {
      padding: 40px 16px;
    }

    .support-ticket-cta__description {
      font-size: 18px;
    }

    #support-ticket-cta-button {
      font-size: 18px;
    }
  }

  @media (max-width: 480px) {
    .support-ticket-cta {
      padding: 30px 16px;
    }

    .support-ticket-cta__description {
      font-size: 16px;
    }

    #support-ticket-cta-button {
      font-size: 16px;
    }
  }
.title-section {
    text-align: center;
  }

  .title-section h2 {
    font-size: 40px;
    font-weight: 400;
    margin: 20px 0;
    color: white;
    text-transform: uppercase;
    font-family: 'articulat-cf', sans-serif;
  }

  @media only screen and (max-width: 780px) {
    .title-section {
      text-align: left;
      width: 90%;
      margin: 0 auto;
    }

    .title-section h2 {
      font-size: 32px;
    }
  }
.tri-column__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.tri-column__item {
  position: relative;
  width: 100%;
  height: 500px;
}

.tri-column__item__image-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.tri-column__item__image-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 49.91%, rgba(0, 0, 0, 0.60) 84.26%);
  pointer-events: none;
 
}

.tri-column__item__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tri-column__item__content {
  position: absolute;
  bottom: 0;
  width: 100%;
  color: white;
  padding: 3vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
}

.tri-column-header {
  width: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 4px;
}

.tri-column-title {
  font-weight: 600;
  font-size: 24px;
  line-height: 130%;
  color: #ffffff;
  margin: 0;
}

.tri-column-plus {
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.tri-column__item:hover .tri-column-plus {
  transform: rotate(90deg);
}

.tri-column-description {
  font-size: 15px;
  font-weight: 300;
  line-height: 150%;
  letter-spacing: 0.02em;
  color: #ffffff;
  margin: 0;
}

.tri-column-description--mobile {
  display: none;
}

.tri-column-description--desktop {
  display: block;
}

.tri-column-link {
  text-decoration: none;
  display: block;
}

@media screen and (max-width: 768px) {
  .tri-column__grid {
    grid-template-columns: 1fr;
  }

  .tri-column__item {
    height: 300px;
  }

  .tri-column__item__content {
    padding: 20px;
    justify-content: flex-end !important;
    height: auto !important;
  }

  .tri-column-title {
    font-size: 18px;
  }

  .tri-column__item__content {
    gap: 8px;
  }

  .tri-column-plus {
    width: 30px;
    height: 30px;
  }

  .tri-column-description--desktop {
    display: none;
  }

  .tri-column-description--mobile {
    display: block;
  }
}

@media screen and (max-width: 425px) {
  .tri-column__item {
    height: 300px;
  }
  
  .tri-column__item__image {
    object-position: 45% 95%;
  }
}

/* CSS from snippet stylesheet tags */
/* Desktop Header Styles */
  .header-desktop-sticky {
    position: fixed;
    top: 0;
    width: 100%;
    height: 80px;
    padding: 0 24px;
    transition: background-color 0.3s ease-in-out, border-bottom 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out,
      height 0.3s ease-in-out;
    z-index: 100;
  }

  .navbar-header-desktop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
  }

  #header-logo-desktop {
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 999;
  }

  .desktop-nav {
    height: 80px;
  }

  .desktop-nav ul {
    list-style-type: none;
    display: flex;
    align-items: center;
    gap: 50px;
    padding: 0 40px;
    height: 100%;
    margin: 0;
  }

  .desktop-nav ul li {
    position: relative;
    vertical-align: top;
    width: fit-content;
  }

  .desktop-product-link {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
  }

  /* Desktop TKO CTA Styles */
  .header-tko-cta-container-desktop {
    padding: 0;
  }

  .header-tko-cta-desktop {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 28.79px;
    position: relative;
    vertical-align: top;
    width: fit-content;
  }

  .header-tko-cta-desktop img {
    margin-top: 1px;
  }

  .header-tko-cta-desktop a {
    text-decoration: none;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    color: rgba(255, 255, 255, 1);
    text-transform: uppercase;
  }

  .header-tko-cta-desktop a::after {
    background-color: rgba(255, 255, 255, 1);
    bottom: 0;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
    width: 100%;
    transform: scaleX(0);
    transform-origin: right center;
  }

  .header-tko-cta-desktop:hover a::after {
    transform: scaleX(1);
    transform-origin: left center;
  }

  .header-tko-cta-arrow-desktop {
    position: relative;
    overflow: hidden;
    transition: background-color 0.7s cubic-bezier(0.19, 1, 0.22, 1);
    transition: color 0.7s cubic-bezier(0.19, 1, 0.22, 1);
    width: 16px;
    height: 13px;
  }

  .header-tko-cta-arrow-desktop img {
    display: block;
    transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
    width: 16px;
  }

  #header-tko-cta-arrow-hover-desktop {
    transform: translateX(-100%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #header-tko-cta-arrow-default-desktop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header-tko-cta-desktop:hover #header-tko-cta-arrow-hover-desktop {
    transform: translateX(0);
  }

  .header-tko-cta-desktop:hover #header-tko-cta-arrow-default-desktop {
    transform: translateX(100%);
  }
/* Mobile Header Styles */
  .header-mobile-sticky {
    position: fixed;
    top: 0;
    width: 100%;
    height: 80px;
    padding: 0 5vh;
    overflow: visible;
    transition: background-color 0.3s ease-in-out, border-bottom 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out,
      height 0.3s ease-in-out;
    z-index: 100;
  }

  @media screen and (max-width: 768px) {
    .header-mobile-sticky {
      padding: 0 2vh;
    }
  }

  .navbar-header-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
  }

  #header-logo-mobile {
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 999;
  }

  .burger-menu-mobile {
    display: block;
    cursor: pointer;
    position: fixed;
    right: 5vh;
    z-index: 999;
  }

  @media screen and (max-width: 768px) {
    .burger-menu-mobile {
      right: 2vh;
    }
  }

  .burger-menu-mobile img {
    width: 24px;
    height: 24px;
  }

  .burger-menu-mobile .close-icon {
    display: none;
    position: relative;
    z-index: 999;
  }

  #main-nav-list-mobile li a {
    width: 100%;
    display: flex;
  }

  #tko-link-mobile a {
    width: fit-content !important;
  }

  .burger-menu-mobile.open .burger-icon {
    display: none;
  }

  .burger-menu-mobile.open .close-icon {
    display: block;
  }

  .mobile-nav {
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 99;
    padding: 10vh 0 0 0;
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: rgba(35, 31, 32, 0.5);
    backdrop-filter: blur(120px);
  }

  .mobile-nav.open {
    display: flex;
  }

  .mobile-nav ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: transparent;
    gap: 3vh;
    width: 100%;
    padding-bottom: 10vh;
    list-style-type: none;
    margin: 0;
    padding: 40px;
  }

  .mobile-product-link a:hover::after {
    transform: scaleX(0);
    transform-origin: left center;
  }

  .mobile-nav ul li {
    padding: 16px;
    height: fit-content;
    position: relative;
    vertical-align: top;
    width: 100%;
  }

  .mobile-product-link .product-menu-mobile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2vh;
    margin-top: 2vh;
  }

  .product-mobile-item-menu {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: 4px;
  }

  .submenu-image-container-mobile {
    height: 40px;
    width: 40px;
  }

  .submenu-image-mobile {
    object-fit: contain;
    width: 100%;
    height: 100%;
  }

  .mobile-tko-link {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .mobile-cart-icon {
    display: none;
  }

  /* Prevent body scroll when mobile nav is open */
  body:has(.mobile-nav.open) {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }

  /* Header height adjustment when mobile nav is open */
  .header-mobile-sticky:has(.burger-menu-mobile.open) {
    height: 100vh !important;
  }

  /* Responsive styles for smaller screens */
  @media (max-width: 500px) {
    .mobile-nav ul li {
      padding: 12px;
    }
  }
/* Desktop Product Hover Menu */
  .product-hover-menu {
    display: none;
    top: 80px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    padding: 5vh 0;
  }

  .product-hover-menu.open {
    display: block;
  }

  .product-hover-menu-container {
    display: flex;
    justify-content: space-between;
    gap: 2vh;
    padding: 0 10vh 0 5vh;
  }

  .submenu-header {
    display: flex;
    align-items: center;
    gap: 3vh;
  }

  .submenu-header-line {
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.5);
    flex: 1;
  }

  .submenu-card {
    display: flex;
    flex-direction: column;
    gap: 4vh;
  }

  .submenu-title {
    font-family: 'articulat-cf', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 130%;
    text-align: left;
    color: rgba(255, 255, 255, 0.8);
  }

  .submenu-item {
    display: flex;
    gap: 2vh;
  }

  .submenu-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3vh;
    text-decoration: none !important;
    position: relative;
  }

  .padded-title {
    padding: 5px 0px;
    font-size: 24px;
  }

  .submenu-image-container {
    width: 119px;
    height: 132px;
  }

  .submenu-image-container .submenu-image[src*='mt2-product.png'] {
    width: 165px;
    margin-top: -2px;
  }

  .submenu-image-container .submenu-image[src*='mt-1-product-latest.png'] {
    width: 138px;
  }

  .submenu-image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .submenu-description {
    font-family: 'articulat-cf', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 130%;
    text-align: left;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none !important;
    margin: 0;
  }

  #product-coming-soon {
    font-family: 'articulat-cf', sans-serif;
    font-size: 9px;
    font-weight: 500;
    line-height: 130%;
    letter-spacing: 0.03em;
    text-align: left;
    padding: 2px 4px;
    color: #d8d8d8;
    position: absolute;
    top: -18px;
    left: 34px;
  }

  .product-coming-soon {
    opacity: 0.7;
  }

  .product-mobile-item-menu {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: 4px;
  }