.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;

  scrollbar-width: none;
}

.animate-pop {
  animation: popIn 0.3s ease-out;
}

@keyframes popIn {
  from {
    opacity: 0;

    transform: scale(0.95) translateY(10px);
  }

  to {
    opacity: 1;

    transform: scale(1) translateY(0);
  }
}

.product-gallery-thumbs .swiper-slide {
  width: auto;

  margin-right: 12px;
}

.product-gallery-thumbs .swiper-slide {
  width: 80px;

  flex-shrink: 0;
}

.product-gallery-thumbs .swiper-wrapper {
  display: flex;
}

.product-gallery-thumbs .swiper-slide img {
  transition: opacity 0.3s;
}

.product-gallery-thumbs .swiper-slide:hover img {
  opacity: 0.7;
}

.product-gallery-thumbs .swiper-slide.ring-2 img {
  opacity: 1;
}

.return-product-card {
  position: relative;

  border: 1px solid #e5e7eb;

  border-radius: 1rem;

  padding: 1rem;

  display: flex;

  align-items: center;

  gap: 0.85rem;

  cursor: pointer;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.return-product-card:hover {
  border-color: #93c5fd;

  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.05);
}

.return-product-card .return-card-thumb {
  width: 48px;

  height: 48px;

  border-radius: 12px;

  border: 1px solid #e5e7eb;

  background: #f9fafb;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  flex-shrink: 0;
}

.return-product-card .return-card-info {
  display: flex;

  flex-direction: column;

  gap: 0.25rem;
}

.return-product-card .return-card-title {
  font-size: 0.9rem;

  font-weight: 600;

  color: #111827;
}

.return-product-card .return-card-price {
  font-size: 0.8rem;

  font-weight: 600;

  color: #4b5563;
}

.return-product-card .return-check {
  position: absolute;

  top: 0.5rem;

  right: 0.5rem;

  width: 24px;

  height: 24px;

  border-radius: 999px;

  border: 1px solid #d1d5db;

  background: #fff;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  color: #059669;

  opacity: 0;

  transition: all 0.2s ease;

  pointer-events: none;
}

.return-product-card.is-selected {
  border-color: #34d399;

  background: #ecfdf5;
}

.return-product-card.is-selected .return-card-title {
  color: #065f46;
}

.return-product-card.is-selected .return-card-price {
  color: #047857;
}

.return-product-card.is-selected .return-check {
  opacity: 1;

  border-color: #059669;

  background: #059669;

  color: #fff;
}

.return-product-card.is-disabled {
  opacity: 0.6;

  cursor: not-allowed;

  pointer-events: none;

  border-style: dashed;
}

.return-product-card.is-disabled .return-check {
  display: none;
}

.chekcout-form {
  margin-top: 0px !important;
}

.return-card-badge {
  position: absolute;

  bottom: 0.75rem;

  right: 0.75rem;

  font-size: 0.65rem;

  font-weight: 600;

  padding: 0.2rem 0.55rem;

  border-radius: 999px;

  background: #fef3c7;

  color: #b45309;

  text-transform: uppercase;
}

.checkout-payment-option {
  position: relative;

  border: 1px solid #e5e7eb;

  border-radius: 1rem;

  padding: 1rem;

  display: flex;

  gap: 0.85rem;

  align-items: flex-start;

  cursor: pointer;

  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

.checkout-payment-option:hover {
  border-color: #a7f3d0;

  background: #f0fdf4;
}

.checkout-payment-option .option-icon {
  width: 44px;

  height: 44px;

  border-radius: 999px;

  background: #ecfdf5;

  color: #047857;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-size: 1.25rem;

  flex-shrink: 0;
}

.checkout-payment-option .option-check {
  position: absolute;

  top: 0.75rem;

  right: 0.75rem;

  width: 22px;

  height: 22px;

  border-radius: 999px;

  border: 1px solid #d1d5db;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-size: 0.9rem;

  color: #fff;

  background: #10b981;

  opacity: 0;

  transition: opacity 0.2s ease;
}

.checkout-payment-option.is-selected {
  border-color: #34d399;

  background: #ecfdf5;

  box-shadow: 0 12px 24px rgba(16, 185, 129, 0.15);
}

.checkout-payment-option.is-selected .option-check {
  opacity: 1;
}

.home-hero {
  position: relative;

  width: 100%;

  overflow: hidden;
}

.home-hero .swiper,
.home-hero .swiper-slide {
  width: 100%;

  height: 100%;
}

.home-hero__slide {
  position: relative;

  min-height: 700px;

  display: flex;

  align-items: center;

  justify-content: center;
}

.home-hero__media {
  position: absolute;

  inset: 0;
}

.home-hero__image {
  width: 100%;

  height: 100%;

  object-fit: cover;
}

.home-hero__overlay {
  position: absolute;

  inset: 0;

  /* background: linear-gradient(

        120deg,

        rgba(15, 23, 42, 0.85) 20%,

        rgba(15, 23, 42, 0.25) 90%

    ); */
}

.home-hero__content {
  position: relative;

  width: 100%;

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 1.25rem;
}

.home-hero__body {
  max-width: 520px;

  color: #fff;

  display: flex;

  flex-direction: column;

  gap: 1.25rem;
}

.home-hero__kicker {
  font-size: 0.85rem;

  letter-spacing: 0.3em;

  text-transform: uppercase;

  opacity: 0.8;
}

.home-hero__title {
  font-size: clamp(2.5rem, 4vw, 3rem);

  line-height: 1.1;

  font-weight: 700;
}

.home-hero__description {
  font-size: 1.05rem;

  color: rgba(255, 255, 255, 0.85);
}

.home-hero__actions {
  margin-top: 0.5rem;
}

.home-hero__button {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.5rem;

  padding: 0.9rem 2.5rem;

  border-radius: 999px;

  background: #fff;

  color: #0f172a;

  font-weight: 600;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.home-hero__button:hover {
  transform: translateY(-2px);

  box-shadow: 0 15px 30px rgba(15, 23, 42, 0.2);
}

.home-hero__pagination {
  position: absolute;

  bottom: 1.5rem;

  left: 50%;

  transform: translateX(-50%);
}

.home-hero__nav {
  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 42px;

  height: 42px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.2);

  color: #fff;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: background 0.2s ease;

  z-index: 10;
}

.home-hero__nav:hover {
  background: rgba(255, 255, 255, 0.35);
}

.home-hero__nav--prev {
  left: 1.5rem;
}

.home-hero__nav--next {
  right: 1.5rem;
}

@media (max-width: 1024px) {
  .home-hero__slide {
    min-height: 420px;
  }

  .home-hero__nav {
    display: none;
  }
}

.category-tree {
  list-style: none;

  margin: 0;

  padding: 0;

  display: flex;

  flex-direction: column;

  gap: 0.35rem;
}

.category-tree__item {
  --category-level: 0;

  position: relative;
}

/* .category-tree__item::before {

    content: "";

    position: absolute;

    top: 50%;

    left: calc(var(--category-level) * 1.25rem);

    width: calc(100% - var(--category-level) * 1.25rem - 0.75rem);

    height: 1px;

    background: rgba(15, 23, 42, 0.04);

    pointer-events: none;

} */

.category-tree__link {
  position: relative;

  display: flex;

  align-items: center;

  gap: 0.15rem;

  padding: 0.3rem 0.55rem;

  /* padding-left: calc(1rem + var(--category-level) * 1rem); */

  /* border-radius: 0.65rem; */

  /* color: #1f2937; */

  font-size: 0.9rem;

  font-weight: 500;

  /* background: linear-gradient(

        90deg,

        rgba(248, 250, 252, 0.9),

        rgba(255, 255, 255, 0.8)

    ); */

  /* border: 1px solid rgba(226, 232, 240, 0.7); */

  transition: all 0.2s ease;
}

.category-tree__link:hover {
  /* border-color: rgba(99, 102, 241, 0.35); */

  /* box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08); */

  /* transform: translateX(2px); */
}

/* .category-tree__link.is-active {

    background: linear-gradient(

        90deg,

        rgba(99, 102, 241, 0.12),

        rgba(99, 102, 241, 0.08)

    );

    border-color: rgba(99, 102, 241, 0.5);

    color: #312e81;

    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.15);

} */

/* .category-tree__link.is-path:not(.is-active) {

    border-color: rgba(99, 102, 241, 0.25);

    color: #4338ca;

} */

.category-tree__icon {
  width: 30px;

  height: 30px;

  border-radius: 10px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-size: 1rem;

  flex-shrink: 0;

  /* background: rgba(15, 23, 42, 0.04); */

  /* color: #475569; */
}

.category-tree__icon.is-folder {
  /* background: rgba(59, 130, 246, 0.12); */

  /* color: #1d4ed8; */
}

.category-tree__icon.is-leaf {
  /* background: rgba(16, 185, 129, 0.12); */

  /* color: #047857; */
}

.category-tree__label {
  display: flex;

  align-items: center;

  gap: 0.35rem;

  flex: 1;

  min-width: 0;
}

.category-tree__name {
  display: inline-block;

  max-width: 100%;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

.category-tree__badge {
  /* background: rgba(15, 23, 42, 0.08); */

  /* color: #475569; */

  font-size: 0.7rem;

  padding: 0.15rem 0.5rem;

  border-radius: 999px;

  font-weight: 600;
}

/* .category-tree__link.is-active .category-tree__badge,

.category-tree__link.is-path .category-tree__badge {

    background: rgba(99, 102, 241, 0.15);

    color: #312e81;

} */

.category-tree__chevron {
  width: 28px;

  height: 28px;

  border-radius: 999px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  color: #94a3b8;

  transition: transform 0.2s ease;
}

.category-tree__chevron.is-open {
  transform: rotate(0deg);

  /* color: #312e81; */
}

.category-tree__children {
  list-style: none;

  margin: 0.25rem 0 0.25rem;

  padding: 0;

  /* border-left: 1px dashed rgba(15, 23, 42, 0.08); */

  margin-left: 0.75rem;

  display: none;
}

.category-tree__children.is-visible {
  display: flex;

  flex-direction: column;

  gap: 0.35rem;
}

/* Custom Menu Scrollbar styling */
.menu-scrollbar::-webkit-scrollbar {
  width: 4px;
}

.menu-scrollbar::-webkit-scrollbar-button {
  display: none;
}

.menu-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.menu-scrollbar::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 999px;
}

.menu-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #9ca3af;
}

.menu-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}