.ratio {
    position: relative;
    width: 100%;
  }
  .ratio::before {
    display: block;
    padding-top: var(--cz-aspect-ratio);
    content: "";
  }
  .ratio > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .ratio-1x1 {
    --cz-aspect-ratio: 100%;
  }
  
  .ratio-4x3 {
    --cz-aspect-ratio: 75%;
  }
  
  .ratio-16x9 {
    --cz-aspect-ratio: 56.25%;
  }
  
  .ratio-21x9 {
    --cz-aspect-ratio: 42.8571428571%;
  }
  
  .fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
  }
  
  .fixed-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
  }
  
  .sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
  
  .sticky-bottom {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    z-index: 1020;
  }
  
  @media (min-width: 500px) {
    .sticky-sm-top {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      z-index: 1020;
    }
    .sticky-sm-bottom {
      position: -webkit-sticky;
      position: sticky;
      bottom: 0;
      z-index: 1020;
    }
  }
  @media (min-width: 768px) {
    .sticky-md-top {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      z-index: 1020;
    }
    .sticky-md-bottom {
      position: -webkit-sticky;
      position: sticky;
      bottom: 0;
      z-index: 1020;
    }
  }
  @media (min-width: 992px) {
    .sticky-lg-top {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      z-index: 1020;
    }
    .sticky-lg-bottom {
      position: -webkit-sticky;
      position: sticky;
      bottom: 0;
      z-index: 1020;
    }
  }
  @media (min-width: 1200px) {
    .sticky-xl-top {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      z-index: 1020;
    }
    .sticky-xl-bottom {
      position: -webkit-sticky;
      position: sticky;
      bottom: 0;
      z-index: 1020;
    }
  }
  @media (min-width: 1400px) {
    .sticky-xxl-top {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      z-index: 1020;
    }
    .sticky-xxl-bottom {
      position: -webkit-sticky;
      position: sticky;
      bottom: 0;
      z-index: 1020;
    }
  }

  .hover-effect-scale {
    --cz-transition-duration: .35s;
    --cz-transform-scale: 1.06;
  }
  .hover-effect-scale .hover-effect-target {
    transition: transform var(--cz-transition-duration) ease-in-out;
  }
  .hover-effect-scale:hover .hover-effect-target, .hover-effect-scale:focus-visible .hover-effect-target, .hover-effect-scale:focus-within .hover-effect-target {
    transform: scale(var(--cz-transform-scale));
  }
  
  .hover-effect-opacity {
    --cz-transition-duration: .25s;
  }
  .hover-effect-opacity .hover-effect-target {
    transition: visibility var(--cz-transition-duration) ease-in-out, opacity var(--cz-transition-duration) ease-in-out;
  }
  .hover-effect-opacity:hover .hover-effect-target.opacity-0, .hover-effect-opacity:focus-visible .hover-effect-target.opacity-0, .hover-effect-opacity:focus-within .hover-effect-target.opacity-0 {
    visibility: visible !important;
    opacity: 1 !important;
  }
  .hover-effect-opacity:hover .hover-effect-target.opacity-100, .hover-effect-opacity:focus-visible .hover-effect-target.opacity-100, .hover-effect-opacity:focus-within .hover-effect-target.opacity-100 {
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  .hover-effect-scale.hover-effect-opacity .hover-effect-target {
    transition: all var(--cz-transition-duration) ease-in-out;
  }
  
  .hover-effect-underline:hover {
    text-decoration: underline !important;
    text-decoration-thickness: var(--cz-underline-thickness) !important;
  }

  .vr {
    display: inline-block;
    align-self: stretch;
    width: var(--cz-border-width);
    min-height: 1em;
    background-color: currentcolor;
    opacity: 1;
  }

  .text-body-tertiary {
    --cz-text-opacity: 1;
    color: var(--cz-tertiary-color) !important;
  }

  .g-0,
.gx-0 {
  --cz-gutter-x: 0;
}

.g-0,
.gy-0 {
  --cz-gutter-y: 0;
}

.g-1,
.gx-1 {
  --cz-gutter-x: 0.25rem;
}

.g-1,
.gy-1 {
  --cz-gutter-y: 0.25rem;
}

.g-2,
.gx-2 {
  --cz-gutter-x: 0.5rem;
}

.g-2,
.gy-2 {
  --cz-gutter-y: 0.5rem;
}

.g-3,
.gx-3 {
  --cz-gutter-x: 1rem;
}

.g-3,
.gy-3 {
  --cz-gutter-y: 1rem;
}

.g-4,
.gx-4 {
  --cz-gutter-x: 1.5rem;
}

.g-4,
.gy-4 {
  --cz-gutter-y: 1.5rem;
}

.g-5,
.gx-5 {
  --cz-gutter-x: 3rem;
}

.g-5,
.gy-5 {
  --cz-gutter-y: 3rem;
}

.flex-md-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-md-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-md-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-md-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-md-wrap {
    flex-wrap: wrap !important;
  }
  .flex-md-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-md-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .gap-0 {
    gap: 0 !important;
  }
  
  .gap-1 {
    gap: 0.25rem !important;
  }
  
  .gap-2 {
    gap: 0.5rem !important;
  }
  
  .gap-3 {
    gap: 1rem !important;
  }
  
  .gap-4 {
    gap: 1.5rem !important;
  }
  
  .gap-5 {
    gap: 3rem !important;
  }

  .animate-slide-end {
    overflow: hidden;
  }
  .animate-slide-end:hover .animate-target, .animate-slide-end:focus-visible .animate-target {
    animation: slide-end 0.3s forwards;
  }
  
  .animate-slide-start {
    overflow: hidden;
  }
  .animate-slide-start:hover .animate-target, .animate-slide-start:focus-visible .animate-target {
    animation: slide-start 0.3s forwards;
  }
  
  .animate-slide-up {
    overflow: hidden;
  }
  .animate-slide-up:hover .animate-target, .animate-slide-up:focus-visible .animate-target {
    animation: slide-up 0.3s forwards;
  }
  
  .animate-slide-down {
    overflow: hidden;
  }
  .animate-slide-down:hover .animate-target, .animate-slide-down:focus-visible .animate-target {
    animation: slide-down 0.3s forwards;
  }
  
  @keyframes slide-end {
    49% {
      transform: translate(100%);
    }
    50% {
      opacity: 0;
      transform: translate(-100%);
    }
    51% {
      opacity: 1;
    }
  }
  @keyframes slide-start {
    49% {
      transform: translate(-100%);
    }
    50% {
      opacity: 0;
      transform: translate(100%);
    }
    51% {
      opacity: 1;
    }
  }
  @keyframes slide-up {
    49% {
      transform: translateY(-100%);
    }
    50% {
      opacity: 0;
      transform: translateY(100%);
    }
    51% {
      opacity: 1;
    }
  }
  @keyframes slide-down {
    49% {
      transform: translateY(100%);
    }
    50% {
      opacity: 0;
      transform: translateY(-100%);
    }
    51% {
      opacity: 1;
    }
  }
  .animate-blinking {
    animation: blinking 1s infinite;
  }
  
  @keyframes blinking {
    from {
      opacity: 0;
    }
  }
  .animate-shake .animate-target::after,
  .animate-pulse .animate-target::after,
  .animate-rotate .animate-target::after,
  .animate-scale .animate-target::after,
  .animate-slide-end .animate-target::after,
  .animate-slide-start .animate-target::after,
  .animate-slide-up .animate-target::after,
  .animate-slide-down .animate-target::after {
    display: none;
  }
  
  .animate-up-down {
    animation: move-up-down 5s linear infinite;
  }
  
  @keyframes move-up-down {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-1rem);
    }
  }
  .animate-down-up {
    animation: move-down-up 5s linear infinite;
  }
  
  @keyframes move-down-up {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(1rem);
    }
  }
  .animate-spin {
    animation: spin 10s linear infinite;
  }
  
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(180deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  .animate-blink {
    animation: blink 1.75s linear infinite;
  }
  
  @keyframes blink {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes fade-up {
    from {
      opacity: 0;
      transform: translateY(0.5rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .swiper-button-lock {
    display: none !important;
  }
  
  .swiper-pagination-bullets {
    --swiper-pagination-bottom: 1.5rem;
    --swiper-pagination-right: 1.5rem;
    --swiper-pagination-bullet-inactive-color: #cad0d9;
    --swiper-pagination-color: #222934;
    --swiper-pagination-bullet-border-radius: 50%;
    --swiper-pagination-bullet-inactive-opacity: 1;
    --swiper-pagination-bullet-opacity: 1;
    --swiper-pagination-bullet-horizontal-gap: 0.375rem;
    --swiper-pagination-bullet-vertical-gap: 0.375rem;
    --swiper-pagination-bullet-transition: background-color 0.2s ease-in-out;
  }
  
  .swiper-pagination-bullet {
    transition: var(--swiper-pagination-bullet-transition);
  }
  
  .swiper-pagination-progressbar {
    --swiper-pagination-progressbar-size: 0.25rem;
    --swiper-pagination-progressbar-border-radius: 50rem;
    --swiper-pagination-progressbar-bg-color: #eef1f6;
    --swiper-pagination-color: #222934;
    overflow: hidden;
    border-radius: var(--swiper-pagination-progressbar-border-radius);
  }
  
  .swiper-scrollbar {
    --swiper-scrollbar-bottom: .25rem;
    --swiper-scrollbar-right: .25rem;
    --swiper-scrollbar-size: 0.25rem;
    --swiper-scrollbar-border-radius: 50rem;
    --swiper-scrollbar-bg-color: #eef1f6;
    --swiper-scrollbar-drag-bg-color: #222934;
    display: none;
  }
  .swiper-scrollbar.swiper-scrollbar-horizontal, .swiper-scrollbar.swiper-scrollbar-vertical {
    display: block;
  }
  
  .swiper-thumbs {
    --swiper-thumbnail-border-width: var(--cz-border-width);
    --swiper-thumbnail-border-color: var(--cz-border-color);
    --swiper-thumbnail-active-border-color: var(--cz-component-active-color);
    --swiper-thumbnail-border-radius: var(--cz-border-radius);
    --swiper-thumbnail-opacity: .5;
    --swiper-thumbnail-active-opacity: 1;
  }
  
  .swiper-thumb-img {
    opacity: var(--swiper-thumbnail-opacity);
    transition: opacity 0.2s ease-in-out;
    border-radius: var(--swiper-thumbnail-border-radius);
  }
  
  .swiper-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    cursor: pointer;
    border: var(--swiper-thumbnail-border-width) solid var(--swiper-thumbnail-border-color);
    border-radius: var(--swiper-thumbnail-border-radius);
    transition: border-color 0.2s ease-in-out;
  }
  .swiper-thumb:hover .swiper-thumb-img, .swiper-thumb.active .swiper-thumb-img, .swiper-thumb.swiper-slide-thumb-active .swiper-thumb-img {
    opacity: var(--swiper-thumbnail-active-opacity);
  }
  .swiper-thumb.active, .swiper-thumb.swiper-slide-thumb-active {
    border-color: var(--swiper-thumbnail-active-border-color);
  }
  
  .swiper-load {
    visibility: hidden;
  }
  .swiper-load.swiper-initialized {
    visibility: visible;
  }
  
  [data-bs-theme=dark] .swiper-pagination-bullets:not([data-bs-theme=light]) {
    --swiper-pagination-bullet-inactive-color: rgba(255, 255, 255, 0.3);
    --swiper-pagination-color: #fff;
  }
  [data-bs-theme=dark] .swiper-pagination-progressbar:not([data-bs-theme=light]) {
    --swiper-pagination-progressbar-bg-color: rgba(255, 255, 255, 0.3);
    --swiper-pagination-color: #fff;
  }
  [data-bs-theme=dark] .swiper-scrollbar:not([data-bs-theme=light]) {
    --swiper-scrollbar-bg-color: rgba(255, 255, 255, 0.3);
    --swiper-scrollbar-drag-bg-color: #fff;
  }

  .stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
  }

  .pagination {
    --cz-pagination-padding-x: 0.75rem;
    --cz-pagination-padding-y: 0.375rem;
    --cz-pagination-font-size: 0.875rem;
    --cz-pagination-color: var(--cz-component-color);
    --cz-pagination-bg: transparent;
    --cz-pagination-border-width: 0;
    --cz-pagination-border-color: var(--cz-border-color);
    --cz-pagination-border-radius: var(--cz-border-radius-sm);
    --cz-pagination-hover-color: var(--cz-component-hover-color);
    --cz-pagination-hover-bg: var(--cz-component-hover-bg);
    --cz-pagination-hover-border-color: var(--cz-border-color);
    --cz-pagination-focus-color: var(--cz-component-hover-color);
    --cz-pagination-focus-bg: var(--cz-component-hover-bg);
    --cz-pagination-focus-box-shadow: 0 0 0 0.25rem var(--cz-focus-ring-color);
    --cz-pagination-active-color: var(--cz-component-active-color);
    --cz-pagination-active-bg: var(--cz-component-active-bg);
    --cz-pagination-active-border-color: #eef1f6;
    --cz-pagination-disabled-color: var(--cz-component-disabled-color);
    --cz-pagination-disabled-bg: transparent;
    --cz-pagination-disabled-border-color: var(--cz-border-color);
    display: flex;
    padding-left: 0;
    list-style: none;
  }
  
  .page-link {
    position: relative;
    display: block;
    padding: var(--cz-pagination-padding-y) var(--cz-pagination-padding-x);
    font-size: var(--cz-pagination-font-size);
    color: var(--cz-pagination-color);
    text-decoration: none;
    background-color: var(--cz-pagination-bg);
    border: var(--cz-pagination-border-width) solid var(--cz-pagination-border-color);
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  }
  @media (prefers-reduced-motion: reduce) {
    .page-link {
      transition: none;
    }
  }
  .page-link:hover {
    z-index: 2;
    color: var(--cz-pagination-hover-color);
    background-color: var(--cz-pagination-hover-bg);
    border-color: var(--cz-pagination-hover-border-color);
  }
  .page-link:focus {
    z-index: 3;
    color: var(--cz-pagination-focus-color);
    background-color: var(--cz-pagination-focus-bg);
    outline: 0;
    box-shadow: var(--cz-pagination-focus-box-shadow);
  }
  .page-link.active, .active > .page-link {
    z-index: 3;
    color: var(--cz-pagination-active-color);
    background-color: var(--cz-pagination-active-bg);
    border-color: var(--cz-pagination-active-border-color);
  }
  .page-link.disabled, .disabled > .page-link {
    color: var(--cz-pagination-disabled-color);
    pointer-events: none;
    background-color: var(--cz-pagination-disabled-bg);
    border-color: var(--cz-pagination-disabled-border-color);
  }
  
  .page-item:not(:first-child) .page-link {
    margin-left: 0;
  }
  .page-item .page-link {
    border-radius: var(--cz-pagination-border-radius);
  }
  
  .pagination-lg {
    --cz-pagination-padding-x: 0.9375rem;
    --cz-pagination-padding-y: 0.5rem;
    --cz-pagination-font-size: 1.125rem;
    --cz-pagination-border-radius: var(--cz-border-radius);
  }
  
  .pagination-sm {
    --cz-pagination-padding-x: 0.5rem;
    --cz-pagination-padding-y: 0.1875rem;
    --cz-pagination-font-size: 0.875rem;
    --cz-pagination-border-radius: var(--cz-border-radius-xs);
  }

  .hover-effect-underline:hover {
    text-decoration: underline !important;
    text-decoration-thickness: var(--cz-underline-thickness) !important;
  }
  
  .product-card:hover .hover-effect-underline {
    text-decoration: underline !important;
    text-decoration-thickness: var(--cz-underline-thickness) !important;
  }

  .text-body {
    --cz-text-opacity: 1;
    color: rgba(var(--cz-body-color-rgb), var(--cz-text-opacity)) !important;
  }

  [class^=rounded].overflow-hidden,
[class*=" rounded"].overflow-hidden {
  transform: translateZ(0);
}

.overflow-hidden {
    overflow: hidden !important;
  }

  .rounded-circle {
    border-radius: 50% !important;
  }

  .btn-icon {
    --cz-btn-size: 2.5rem;
    flex-shrink: 0;
    width: var(--cz-btn-size);
    height: var(--cz-btn-size);
    padding: 0;
  }
  .btn-icon.btn-lg, .btn-group-lg > .btn-icon.btn {
    --cz-btn-size: 3rem;
  }
  .btn-icon.btn-sm, .btn-group-sm > .btn-icon.btn {
    --cz-btn-size: 2rem;
  }

  .translate-middle {
    transform: translate(-50%, -50%) !important;
  }
  
  .translate-middle-x {
    transform: translateX(-50%) !important;
  }
  
  .translate-middle-y {
    transform: translateY(-50%) !important;
  }

  .fs-base {
    font-size: 1rem !important;
  }

  .top-0 {
    top: 0 !important;
  }
  
  .top-50 {
    top: 50% !important;
  }
  
  .top-100 {
    top: 100% !important;
  }
  
  .bottom-0 {
    bottom: 0 !important;
  }
  
  .bottom-50 {
    bottom: 50% !important;
  }
  
  .bottom-100 {
    bottom: 100% !important;
  }
  
  .start-0 {
    left: 0 !important;
  }
  
  .start-50 {
    left: 50% !important;
  }
  
  .start-100 {
    left: 100% !important;
  }
  
  .end-0 {
    right: 0 !important;
  }
  
  .end-50 {
    right: 50% !important;
  }
  
  .end-100 {
    right: 100% !important;
  }

  .text-black {
    color: black;
  }

  .pagination {
    --cz-pagination-padding-x: 0.75rem;
    --cz-pagination-padding-y: 0.375rem;
    --cz-pagination-font-size: 0.875rem;
    --cz-pagination-color: var(--cz-component-color);
    --cz-pagination-bg: transparent;
    --cz-pagination-border-width: 0;
    --cz-pagination-border-color: var(--cz-border-color);
    --cz-pagination-border-radius: var(--cz-border-radius-sm);
    --cz-pagination-hover-color: var(--cz-component-hover-color);
    --cz-pagination-hover-bg: var(--cz-component-hover-bg);
    --cz-pagination-hover-border-color: var(--cz-border-color);
    --cz-pagination-focus-color: var(--cz-component-hover-color);
    --cz-pagination-focus-bg: var(--cz-component-hover-bg);
    --cz-pagination-focus-box-shadow: 0 0 0 0.25rem var(--cz-focus-ring-color);
    --cz-pagination-active-color: var(--cz-component-active-color);
    --cz-pagination-active-bg: var(--cz-component-active-bg);
    --cz-pagination-active-border-color: #eef1f6;
    --cz-pagination-disabled-color: var(--cz-component-disabled-color);
    --cz-pagination-disabled-bg: transparent;
    --cz-pagination-disabled-border-color: var(--cz-border-color);
    display: flex;
    padding-left: 0;
    list-style: none;
  }
  
  .page-link {
    position: relative;
    display: block;
    padding: var(--cz-pagination-padding-y) var(--cz-pagination-padding-x);
    font-size: var(--cz-pagination-font-size);
    color: var(--cz-pagination-color);
    text-decoration: none;
    background-color: var(--cz-pagination-bg);
    border: var(--cz-pagination-border-width) solid var(--cz-pagination-border-color);
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  }
  @media (prefers-reduced-motion: reduce) {
    .page-link {
      transition: none;
    }
  }
  .page-link:hover {
    z-index: 2;
    color: var(--cz-pagination-hover-color);
    background-color: var(--cz-pagination-hover-bg);
    border-color: var(--cz-pagination-hover-border-color);
  }
  .page-link:focus {
    z-index: 3;
    color: var(--cz-pagination-focus-color);
    background-color: var(--cz-pagination-focus-bg);
    outline: 0;
    box-shadow: var(--cz-pagination-focus-box-shadow);
  }
  .page-link.active, .active > .page-link {
    z-index: 3;
    color: var(--cz-pagination-active-color);
    background-color: var(--cz-pagination-active-bg);
    border-color: var(--cz-pagination-active-border-color);
  }
  .page-link.disabled, .disabled > .page-link {
    color: var(--cz-pagination-disabled-color);
    pointer-events: none;
    background-color: var(--cz-pagination-disabled-bg);
    border-color: var(--cz-pagination-disabled-border-color);
  }
  
  .page-item:not(:first-child) .page-link {
    margin-left: 0;
  }
  .page-item .page-link {
    border-radius: var(--cz-pagination-border-radius);
  }
  
  .pagination-lg {
    --cz-pagination-padding-x: 0.9375rem;
    --cz-pagination-padding-y: 0.5rem;
    --cz-pagination-font-size: 1.125rem;
    --cz-pagination-border-radius: var(--cz-border-radius);
  }
  
  .pagination-sm {
    --cz-pagination-padding-x: 0.5rem;
    --cz-pagination-padding-y: 0.1875rem;
    --cz-pagination-font-size: 0.875rem;
    --cz-pagination-border-radius: var(--cz-border-radius-xs);
  }

  .visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.visually-hidden:not(caption),
.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
  position: absolute !important;
}