* {
    margin: 0;
    padding: 0;
}

/* Style from Ms. Joana - Start */
.accordion {
    --bs-accordion-active-bg: #ffffff;
    --bs-accordion-active-color: #000000;
    --bs-accordion-btn-focus-box-shadow: none;
    font-family: "Montserrat", sans-serif;
}

.accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
    border: 2px solid #000000;
    box-shadow: 5px 5px #000000;
}

.accordion-button.collapsed {
    border: 1px solid #d8d8d8;
}

.accordion-collapse {
    transition: all 0.3s;
} 

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
    transition: all 0.5s;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash' viewBox='0 0 16 16'%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
}

.accordion-button::after {
    transition: all 0.5s;
}

.accordion-button:not(.collapsed) {
    background-color: transparent !important;
    color: inherit;
}

button.accordion-button:focus{
    box-shadow: inherit;
}

/* a:link {
  color: #a39a57;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: #a39a57;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #a39a57;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: #a39a57;
  background-color: transparent;
  text-decoration: underline;
    
} */

table,ui,li,a{
    font-family: "Montserrat", sans-serif;
}
/* Style from Ms. Joana - End */

body {
    min-height: 100vh;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
}

.fs-7 {
    font-size: 0.75rem !important;
}

.fs-8 {
    font-size: 0.5rem !important;
}

.fw-superbold {
    font-weight: 900 !important;
}

.bg-light-gray {
    background-color: #eaeaea;
}

.bg-custom-1 {
    background: url('../../images/webstore/home/mok-heat-bg-min.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-custom-2 {
    background: url('../../images/webstore/bg/1-MOK-PRODUCT-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-custom-3 {
    background: url('../../images/webstore/bg/4-MOK-PRODUCT-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-custom-4 {
    background: url('../../images/webstore/bg/switch-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-custom-5 {
    background: url('../../images/webstore/bg/MOK-FWRD-ECLIPSE-BLACK-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-custom-6 {
    background: url('../../images/webstore/bg/coo-bg-1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-custom-7 {
    background: url('../../images/webstore/bg/store-locator-banner.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-custom-8 {
    background: url('../../images/webstore/bg/kiosk-banner.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-custom-9 {
    background: url('../../images/webstore/bg/motion-speed-effect-with-city-night.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-custom-10 {
    background: url('../../images/webstore/bg/COO-is-Back_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-custom-11 {
    background: url('../../images/webstore/bg/lifestyle.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-mok-brown {
    background-color: #773a25;
}

.bg-mok-green {
    background-color: #007d6f;
}

.text-olive-gold {
    color: #a59a4c;
}

.btn-outline-black {
    border: 2px solid black;
    background-color: white !important;
    color: black;
    transition: 0.3s ease-in-out;
}

.btn-outline-black:hover {
    background-color: black !important;
    color: white;
}

.btn-outline-white {
    border: 2px solid white;
}

.btn-hover-black:hover {
    background-color: black !important;
    color: white;
}

.btn-outline-white-hover-black {
    border: 2px solid white;
}

.btn-outline-white-hover-black:hover {
    border: 2px solid white;
    background-color: #000000;
}

.btn-outline-white-hover-black-2 {
    border: 2px solid white;
}

.btn-outline-white-hover-black-2:hover {
    border: 2px solid black;
    background-color: #000000;
}

.table-black {
    --bs-table-bg: #000000;
    --bs-table-color: #ffffff;
    --bs-table-border-color: #000000;
    color: #ffffff;
}

.w-6-rem {
    width: 6rem;
}

.px-4-5 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.marquee-container {
    width: 100%;
    overflow: hidden;
    background: #6f2c8b;
    color: white;
    padding: 0.35rem 0;
    position: relative;
}

.marquee-container .marquee-track:hover {
    filter: invert(8%) sepia(20%) saturate(805%) hue-rotate(-35deg) brightness(90%) contrast(85%);
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee linear infinite;
}

.marquee-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    padding-right: 15rem; /* spacing between repeats */
}

/* Animation duration will be set via JS */
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.mok-nav-logo {
    height: 2.5rem;
}

#nav-links .link:hover {
    color: #d2b778 !important;
}

#nav-links .dropdown a {
    background-color: black;
    width: 16rem;
    color: white;
}

#nav-links .dropdown a:hover {
    background-color: white;
    color: black;
    width: 16rem;
}

.text-gold-hover:hover {
    color: #d2b778 !important;
}

[x-cloak] {
    display: none !important; 
}

#footer .links .text-decoration-none {
  text-decoration: none !important;            /* base: no underline */
  text-underline-offset: 0px;                  /* numeric start value */
  text-decoration-color: transparent;          /* start transparent so we can fade it in */
  transition: text-underline-offset 0.17s ease-in-out,
              text-decoration-color 0.17s ease-in-out,
              color 0.17s ease-in-out;
}

#footer .links .text-decoration-none:hover {
  text-decoration: underline !important;      /* underline appears immediately */
  text-underline-offset: 4.5px;                  /* animates from 0 -> 5px */
  text-decoration-color: black;         /* fades from transparent -> currentColor */
}

#exploreMOKCarousel .carousel-inner {
    height: 46.5rem;
}

#exploreMOKCarousel .carousel-controls img {
    width: 2.5rem;
}

#exploreMOKCarousel .explore-mok-item img {
    height: 18rem;
}

img.mirror-x {
  transform: scaleX(-1);
}

@media (max-width: 575.98px) {
    #exploreMOKCarousel .carousel-inner {
        height: 50.5rem;
    } 
}

#exploreMOKCarouselMobile .carousel-inner {
    height: 46.5rem;
}

#exploreMOKCarouselMobile .carousel-controls img {
    width: 2.5rem;
}

#exploreMOKCarouselMobile .explore-mok-item img {
    height: 18rem;
}

@media (max-width: 575.98px) {
    #exploreMOKCarouselMobile .carousel-inner {
        height: 50.5rem;
    } 
}

/* Gallery - Start */

.gallery-container {
    overflow: hidden;
}

.gallery-track {
    display: flex;
    transition: transform 0.4s ease-in-out;
}

.gallery-item {
    min-width: calc(100% / 3); /* 3 images per row */
    box-sizing: border-box;
    padding: 5px;
}

.gallery-item img {
    width: 100%;
    height: 32rem;
    object-fit: cover;
    object-position: 0% 20%;
    display: block;
}

.gallery-btn {
    border: none;
    background-color: transparent;
    color: white;
}

@media (max-width: 1199.98px) { 
    .gallery-item {
        min-width: calc(100% / 2);
    } 
}

@media (max-width: 767.98px) { 
    .gallery-item {
        min-width: 100%;
    } 
}

/* Gallery - End */

/* News and Event - Start */
.news-and-events img {
    height: 13rem;
    object-fit: cover;
}

.news-and-events a {
    text-decoration: none;
    color: #1d2a47;
    font-weight: 600;
    border: 2px solid #1d2a47;
    border-radius: 0.2rem !important;
    padding: 0.75rem 1rem;
    display: block;
}

.news-and-events .active > .page-link {
    background-color: #1d2a47;
    font-weight: 600;
    border: 2px solid #1d2a47;
    border-radius: 0.2rem !important;
    padding: 0.75rem 1rem;
}

.news-and-events .pagination {
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;   /* number of lines to show */
  -webkit-box-orient: vertical;
  line-clamp: 3; 
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 575.98px) { 

    .news-and-events .pagination {
        gap: 0.5rem;
    }

    .news-and-events .page-link a {
        font-size: 0.8rem;
    }

    .news-and-events .page-link {
        border: 2px solid #1d2a47;
        border-radius: 0.2rem !important;
        padding: 0.5rem 0.75rem;
    }
        
 }
/* News and Event - End */

/* Discover MOK - Start */
.discover-mok .header-banner-bg {
    background: url('../../images/webstore/bg/product-mok-bg.png');
    background-size: cover;
    background-position: center center;
    height: 43rem;
}

.dark-overlay-gradient {
    background: linear-gradient(244deg, rgba(1, 1, 1, 0.77) 57%, rgba(0, 181, 226, 0) 85%);
    height: 100%;
    width: 100%;
}

@media (max-width: 767.98px) { 
    .discover-mok .header-banner-bg {
        height: fit-content;
    } 
}
/* Discover MOK - End */

/* MOK FWRD - How to - Start */
.how-to-container {
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.how-to-track {
    display: flex;
    transition: transform 0.3s ease;
}

.how-to-item {
    min-width: calc(100% / 2); /* 2 images per row */
    box-sizing: border-box;
    padding: 3rem;
}

.how-to-item img {
    width: 100%;
}

.how-to-btn.how-to-prev,
.how-to-btn.how-to-next {
    background: transparent;
    color: #fff;
    border: none;
    font-size: 3em;
    cursor: pointer;
}

.how-to-btn.hidden {
  display: none;
}

@media (max-width: 1199.98px) { 
    .how-to-item {
        padding: 1.5rem;
    } 
}

@media (max-width: 767.98px) { 
    .how-to-item {
        padding: 0.5rem;
    } 
}
/* MOK FWRD - How to - End */

/* COO - Start */
.coo-rating {
    width: 1rem;
    height: 1rem;
    display: inline-block;
    border-radius: 50%;
}
/* COO - End */

/* Official Retail Partners - Start */
#retail-table-container h2 {
  text-align: center;
  margin-bottom: 1rem;
}

#retail-table {
  width: 100%;
  background: white;
  overflow: hidden;
}

#retail-table th, 
#retail-table td {
  padding: 12px;
  text-align: left;
}

#retail-table tbody tr:hover {
  background: #0000000D;
}

#retail-table tr:nth-child(even) {
  background: #f9f9f9;
}

#retail-table .logo {
  width: auto;
  max-width: 150px!important;
  object-fit: contain;
}

#retail-pagination {
  display: flex;
  justify-content: center;
}

#retail-pagination button {
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-right: none;
  background: #fff;
  cursor: pointer;
  color: #337ab7;
  font-weight: 600;
  font-size: 0.95rem;
}

#retail-pagination button:last-child {
  border-right: 1px solid #ccc; /* restore for last button */
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

#retail-pagination button:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}


#retail-pagination button.active {
  background: #337ab7;
  color: white;
}

#retail-pagination button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 575.98px) {
    #retail-pagination button {
        padding: 0.25rem 0.5rem;
    }

    #retail-pagination #prev-btn {
        display: none;
    }

    #retail-pagination #next-btn {
        display: none;
    }
}
/* Official Retail Partners - End */


/* Shop - Start */

.fwrd-slider-container, .coo-slider-container, .accs-slider-container {
    overflow: hidden;
    width: 100%;
}

.fwrd-slider-track, .coo-slider-track, .accs-slider-track {
    display: flex;
    transition: transform 0.4s ease-in-out;
}

.fwrd-slider-item, .coo-slider-item, .accs-slider-item {
    min-width: calc(100% / 3); /* 3 images per row */
    box-sizing: border-box;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.fwrd-slider-item img, .fwrd-sw-item img {
    width: auto;
    height: 23.5rem;
    object-fit: contain;
}

.accs-slider-item img, .desk-item img {
    width: auto;
    height: 15rem;
    object-fit: contain;
}

.coo-slider-item img {
    width: 100%;
    object-fit: contain;
}

.fwrd-slider-btn, .coo-slider-btn, .accs-slider-btn {
    border: none;
    background-color: transparent;
    color: white;
    height: 100%;
    align-self: center;
}

.shop-footer-banner {
    padding: 12rem 0rem;
}

@media (max-width: 1199.98px) { 
    .fwrd-slider-item, .coo-slider-item, .accs-slider-item {
        min-width: calc(100% / 2);
    } 
}

@media (max-width: 767.98px) { 
    .fwrd-slider-item, .coo-slider-item, .accs-slider-item {
        min-width: 100%;
    } 
}

/* Shop - End */