.bg-primary-50  { --tw-bg-opacity:1; background-color:rgb(237 247 251/var(--tw-bg-opacity,1)) }
.bg-primary-100 { --tw-bg-opacity:1; background-color:rgb(209 236 245/var(--tw-bg-opacity,1)) }
.bg-primary-200 { --tw-bg-opacity:1; background-color:rgb(169 218 234/var(--tw-bg-opacity,1)) }
.bg-primary-300 { --tw-bg-opacity:1; background-color:rgb(120 196 222/var(--tw-bg-opacity,1)) }
.bg-primary-400 { --tw-bg-opacity:1; background-color:rgb(60  168 207/var(--tw-bg-opacity,1)) }
.bg-primary-500 { --tw-bg-opacity:1; background-color:rgb(30  142 180/var(--tw-bg-opacity,1)) }
.bg-primary-600 { --tw-bg-opacity:1; background-color:rgb(26  112 153/var(--tw-bg-opacity,1)) }
.bg-primary-700 { --tw-bg-opacity:1; background-color:rgb(15   92 122/var(--tw-bg-opacity,1)) }
.bg-primary-800 { --tw-bg-opacity:1; background-color:rgb(11   69  96/var(--tw-bg-opacity,1)) }
.bg-primary-900 { --tw-bg-opacity:1; background-color:rgb( 8   49  73/var(--tw-bg-opacity,1)) }

.bg-primary-900\/30 { background-color: rgba(8,49,73,.30) }
.bg-primary-900\/50 { background-color: rgba(8,49,73,.50) }

.text-primary-50  { --tw-text-opacity:1; color:rgb(237 247 251/var(--tw-text-opacity,1)) }
.text-primary-300 { --tw-text-opacity:1; color:rgb(120 196 222/var(--tw-text-opacity,1)) }
.text-primary-400 { --tw-text-opacity:1; color:rgb( 60 168 207/var(--tw-text-opacity,1)) }
.text-primary-600 { --tw-text-opacity:1; color:rgb( 26 112 153/var(--tw-text-opacity,1)) }
.text-primary-700 { --tw-text-opacity:1; color:rgb( 15  92 122/var(--tw-text-opacity,1)) }

.from-primary-500 {
  --tw-gradient-from: #1e8eb4 var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(30,142,180,0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary-600 {
  --tw-gradient-from: #1a7099 var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(26,112,153,0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary-700 {
  --tw-gradient-from: #0f5c7a var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(15,92,122,0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-primary-600 { --tw-gradient-to: #1a7099 var(--tw-gradient-to-position) }
.to-primary-700 { --tw-gradient-to: #0f5c7a var(--tw-gradient-to-position) }
.to-primary-800 { --tw-gradient-to: #0b4560 var(--tw-gradient-to-position) }

.hover\:bg-primary-50:hover  { --tw-bg-opacity:1; background-color:rgb(237 247 251/var(--tw-bg-opacity,1)) }
.hover\:bg-primary-200:hover { --tw-bg-opacity:1; background-color:rgb(169 218 234/var(--tw-bg-opacity,1)) }
.hover\:bg-primary-600:hover { --tw-bg-opacity:1; background-color:rgb( 26 112 153/var(--tw-bg-opacity,1)) }
.hover\:bg-primary-700:hover { --tw-bg-opacity:1; background-color:rgb( 15  92 122/var(--tw-bg-opacity,1)) }
.hover\:bg-primary-900:hover { --tw-bg-opacity:1; background-color:rgb(  8  49  73/var(--tw-bg-opacity,1)) }

.hover\:text-primary-300:hover { --tw-text-opacity:1; color:rgb(120 196 222/var(--tw-text-opacity,1)) }
.hover\:text-primary-400:hover { --tw-text-opacity:1; color:rgb( 60 168 207/var(--tw-text-opacity,1)) }
.hover\:text-primary-600:hover { --tw-text-opacity:1; color:rgb( 26 112 153/var(--tw-text-opacity,1)) }
.hover\:text-primary-700:hover { --tw-text-opacity:1; color:rgb( 15  92 122/var(--tw-text-opacity,1)) }

.dark\:bg-primary-400:where(.dark,.dark *) { --tw-bg-opacity:1; background-color:rgb( 60 168 207/var(--tw-bg-opacity,1)) }
.dark\:bg-primary-500:where(.dark,.dark *) { --tw-bg-opacity:1; background-color:rgb( 30 142 180/var(--tw-bg-opacity,1)) }
.dark\:bg-primary-900\/30:where(.dark,.dark *) { background-color: rgba(8,49,73,.30) }

.dark\:text-primary-300:where(.dark,.dark *) { --tw-text-opacity:1; color:rgb(120 196 222/var(--tw-text-opacity,1)) }
.dark\:text-primary-400:where(.dark,.dark *) { --tw-text-opacity:1; color:rgb( 60 168 207/var(--tw-text-opacity,1)) }

.dark\:from-primary-700:where(.dark,.dark *) {
  --tw-gradient-from: #0f5c7a var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(15,92,122,0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:from-primary-800:where(.dark,.dark *) {
  --tw-gradient-from: #0b4560 var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(11,69,96,0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:to-primary-800:where(.dark,.dark *) { --tw-gradient-to: #0b4560 var(--tw-gradient-to-position) }
.dark\:to-primary-900:where(.dark,.dark *) { --tw-gradient-to: #083149 var(--tw-gradient-to-position) }

.dark\:hover\:bg-primary-500:hover:where(.dark,.dark *) { --tw-bg-opacity:1; background-color:rgb(30 142 180/var(--tw-bg-opacity,1)) }
.dark\:hover\:bg-primary-900\/50:where(.dark,.dark *):hover { background-color: rgba(8,49,73,.50) }

.mall-products-item {
    flex-direction: row;
    min-height: 256px;
}
.mall-products-item__image {
    width: 45%;
    min-width: 45%;
    min-height: 256px;
    flex-shrink: 0;
    position: relative;
}
.mall-products-item__image img,
.mall-products-item__image > .no-image-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mall-products-item__info {
    min-width: 0;
}
@media (min-width: 768px) {
    .mall-products-item {
        flex-direction: column;
        min-height: 360px;
    }
    .mall-products-item__image {
        width: 100%;
        min-width: 100%;
        height: 340px;
        min-height: 340px;
    }
}

.category-filter-backdrop-el {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 49;
    transition: opacity 0.2s ease;
}
@media (min-width: 992px) {
    .category-filter-backdrop-el { display: none; }
}

.category-filter-container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    width: 100%;
    max-width: 20rem;
    background: #fff;
    overflow-y: auto;
    box-shadow: -4px 0 24px rgba(0,0,0,0.12);
    transition: transform 0.2s ease-in-out;
}
.dark .category-filter-container {
    background: #18181b;
}
.category-filter-container.is-closed {
    transform: translateX(100%);
}
@media (min-width: 992px) {
    .category-filter-container {
        position: static;
        z-index: auto;
        width: 20rem;
        max-width: 20rem;
        height: auto;
        background: rgba(250,250,249,0.4);
        overflow-y: visible;
        box-shadow: none;
        transition: none;
        flex-shrink: 0;
        border-right: 1px solid #f5f5f4;
    }
    .dark .category-filter-container {
        background: transparent;
        border-right-color: #27272a;
    }
    .category-filter-container.is-closed {
        display: none;
    }
}