@font-face {
  font-family: "Century Gothic";
  src: url("../fonts/century-gothic-regular.woff2") format("woff2"),
    url("../fonts/century-gothic-regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Century Gothic";
  src: url("../fonts/century-gothic-semibold.woff") format("woff2"),
    url("../fonts/century-gothic-semibold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Century Gothic";
  src: url("../fonts/century-gothic-bold.woff") format("woff2"),
    url("../fonts/century-gothic-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.scroll-to-top {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}

.scroll-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}

.scrolled {
  transition: all 0.3s ease;
  top: 0 !important;
}

.top-header.scrolled {
  position: unset !important;
}

header.scrolled .widian-header-logo {
  padding: 1rem 0 !important;
}

header.scrolled .widian-header-logo img {
  width: 160px !important;
  transition: all 0.3s ease;
}

/* ======= PRODUCT Card style ======= */
.product-card {
  border-bottom: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
}

/* ======= BASE (1 column) ======= */
.product-grid>div:first-child {
  border-top: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
}

/* ======= LG: 4 columns ======= */
@media (min-width: 1024px) {
  .product-grid>div {
    border-right: 1px solid #cccccc;
  }

  .product-grid>div:nth-child(4n) {
    border-right: 1px solid #cccccc;
  }

  .product-grid>div:nth-child(-n + 4) {
    border-top: 1px solid #cccccc !important;
  }

  .product-grid>div:nth-child(4n + 1) {
    /* border-left: 1px solid #cccccc; */
  }

  .product-grid.product-grid-3>div:nth-child(4) {
    border-top: none !important;
    /* border-right: none; */
    border-right: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
  }

  .product-carousel .owl-nav {
    width: 140% !important;
    left: -20%;
    top: 70% !important;
  }
}

/* ======= MD: 3 columns ======= */
@media (max-width: 1024px) {
  .product-grid>div {
    border-right: 1px solid #cccccc;
  }

  .product-grid>div:nth-child(3n + 1) {
    border-left: 1px solid #cccccc;
  }

  /* 3rd item of odd row (3, 9, 15, ...) */
  .product-grid>div:nth-child(6n + 3) {
    border-left: none;
  }

  /* 2nd item of even row (5, 11, 17, ...) */
  .product-grid>div:nth-child(6n - 1) {
    border-left: none;
  }

  /* .product-grid > div:nth-child(3n) {
      border-right: none;
    } */
  .product-grid>div:nth-child(-n + 3) {
    border-top: 1px solid #cccccc;
  }

  /* .product-grid > div:nth-child(4) {
      border-top: none;
    } */
}

/* ======= SM: 2 columns ======= */
@media (max-width: 768px) {
  .product-grid>div:nth-child(2n + 1) {
    /* border-left: 1px solid #cccccc; */
  }

  .product-grid>div:nth-child(3) {
    border-top: 0px solid #cccccc;
    border-left: 1px solid #cccccc;
  }

  .product-grid>div:nth-child(6n + 4) {
    border-left: none;
  }

  .product-grid>div:nth-child(-n + 2) {
    border-top: 1px solid #cccccc;
  }

  .product-carousel .owl-nav {
    width: 140% !important;
    left: -20%;
    top: 70% !important;
  }
}

.shadow-cart {
  box-shadow: 0px -1px 5px 0px rgba(61, 60, 58, 0.19);
}

.shadow-policy {
  box-shadow: 0px 0px 10px 0px rgba(61, 60, 58, 0.10);
}

.owl-carousel .owl-dots {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
}

.owl-carousel .owl-nav {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: space-between;
  top: 50%;
  align-items: center;
  padding: 0 16px;
  transform: translateY(-50%);
  pointer-events: none;
}

.complimentary-product-carousel .owl-nav {
  top: -50px !important;
  width: auto !important;
  right: -4px !important;
  justify-content: start !important;
  padding: 0 !important;
  transform: translateY(0) !important;
}

.owl-carousel .owl-nav button {
  pointer-events: auto;
}

.owl-carousel .owl-nav button:hover {
  background-color: transparent !important;
}

.product-carousel .owl-nav {
  padding: 0 !important;
  transform: translateY(0) !important;
}

.static-container {
  color: #666666;
  font-size: 1rem;
  line-height: 1.75rem;
  font-family: 'Century Gothic';
}

.static-container h2 {
  font-family: 'Playfair Display';
  font-size: 1.75rem;
  line-height: 2rem;
  color: rgb(117 124 91);
  font-weight: 500;
  margin-bottom: 1rem;
}

.static-container p {
  color: #666666;
  font-size: 1rem;
  line-height: 1.75rem;
  margin-bottom: 1rem;
}

.static-container h3 {
  color: #3D3C3A;
  font-size: 1.25rem;
  margin-bottom: 0.7rem;
  font-weight: 600;
  font-family: 'Century Gothic';
}

.static-container ul {
  margin-bottom: 1.5rem;
  margin-left: 1.5rem;
}

.static-container ul li {
  list-style: disc;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.static-container table {
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: left;
  color: rgb(61 60 58);
  background-color: rgb(253 249 242);
  border-width: 1px;
  margin-bottom: 1rem;
}

.static-container table th {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-weight: 600;
  border-width: 1px;
  border-color: rgb(239 236 226);
}

.static-container table td {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-weight: 400;
  border-width: 1px;
  border-color: rgb(239 236 226);
}

.widian-acc-text p {
  font-size: 0.85rem;
  line-height: 1.3rem;
  margin-bottom: 0.5rem;
}

.widian-acc-text p:last-child {
  margin-bottom: 0;
}

/*PROFILE PAGE*/
.profile-display {
  box-shadow: 0 0 10px #3c3b391a;
}

.profile-menu {
  box-shadow: 0 0 10px #3c3b391a;
}

.profile-page .profile-data {
  box-shadow: 0 0 10px #3c3b391a;
}


.hero-wrapper {
  height: 5000px;
  position: relative;
  overflow: visible;
}

.sprite-scroll {
  position: sticky;
  top: 220px;
  width: 1600px;
  height: 900px;
  margin: 0 auto;
  background: url('/widian-assets/images/sprite_sheet.png');
  will-change: background-position;
}

/* ======= HERO VIDEO STYLES ======= */
.hero-video-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-video-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
}

.hero-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  object-fit: cover;
  transition: opacity 0.3s ease-in-out;
}

.hero-video-container iframe.loading {
  opacity: 0;
}

.hero-video-container iframe.loaded {
  opacity: 1;
}

/* Ensure video maintains aspect ratio on all devices */
@media (max-aspect-ratio: 16/9) {
  .hero-video-wrapper {
    width: 100vh;
    height: calc(100vh * 9 / 16);
  }
}

@media (min-aspect-ratio: 16/9) {
  .hero-video-wrapper {
    width: calc(100vw);
    height: calc(100vw * 9 / 16);
  }
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .hero-video-container {
    height: 100vh;
    height: 100dvh;
    /* Dynamic viewport height for mobile */
  }
}

::-webkit-scrollbar:horizontal {
  display: none;
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background-color: #ffffff;
  outline: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
}

::-webkit-scrollbar-thumb {
  background-color: #757c5b;
  border-radius: 20px;
  cursor: pointer;
}

@media (max-width: 425px) {
  .product-carousel .owl-nav {
    width: 114% !important;
    left: -7%;
    top: 60% !important;
  }
}

.owl-carousel {
  direction: ltr !important;
}

.owl-carousel .owl-stage-outer {
  direction: ltr !important;
}

.owl-carousel .owl-nav {
  direction: ltr !important;
}

.collection-section-container .collection-element {
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s, transform 400ms;
    flex: 0 1 auto;
    text-align: initial;
    flex-wrap: initial;
    align-items: initial;
    justify-content: initial;
    order: initial;
}

.collection-section-container .collection-element .fixed-attach-bg-image {
    clip: rect(0, auto, auto, 0);
}

.collection-section-container .collection-element .fixed-attach-bg-image .columns-bg-image {
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    transform: translateZ(0);
    will-change: transform;
    overflow: hidden;
    z-index: auto;
    background-repeat: no-repeat;
}

@media (min-width: 1495.99px) and (min-height: 600px) {
  .collection-section-container .collection-element .fixed-attach-bg-image .columns-bg-image {
    background-size: contain !important;
    background-position: top -20px center !important;
  }
}