npm - @salla.sa/twilight-components - Versions diffs - 2.14.537 → 2.14.539 - Mend

@salla.sa/twilight-components 2.14.537 → 2.14.539

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (685) hide show

package/dist/collection/components/salla-offer/salla-offer.css CHANGED Viewed

@@ -1,3 +1,962 @@
-:host .s-drawer-close:where([dir=rtl], [dir=rtl] *) {
+/*!twlt*/:host .s-drawer-close:where([dir=rtl], [dir=rtl] *) {
   left: 0;
-}
+}
+.visible {
+  visibility: visible;
+}
+.fixed {
+  position: fixed;
+}
+.flex {
+  display: flex;
+}
+.table {
+  display: table;
+}
+.items-center {
+  align-items: center;
+}
+.justify-center {
+  justify-content: center;
+}
+.p-4 {
+  padding: 1rem;
+}
+.p-8 {
+  padding: 2rem;
+}
+.text-center {
+  text-align: center;
+}
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+.s-offer-wrapper {
+  position: relative;
+  margin-bottom: 2rem;
+  overflow: hidden;
+  border-radius: var(--s-radius, 0.25rem);
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
+  padding: 0.625rem;
+}
+@media (min-width: 640px) {
+  .s-offer-wrapper {
+    padding: 1.25rem;
+  }
+}
+@media (min-width: 768px) {
+  .s-offer-wrapper {
+    margin-bottom: 4rem;
+  }
+}
+.s-offer-corner-badge {
+  position: absolute;
+  z-index: 1;
+  float: left;
+  margin: 0px;
+  height: auto;
+  width: auto;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  border-width: 0px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
+  padding-left: 3rem;
+  padding-right: 3rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+.s-offer-corner-badge:where([dir="ltr"], [dir="ltr"] *) {
+  top: 1.25rem;
+  right: -3.5rem;
+  --tw-rotate: 45deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.s-offer-corner-badge:where([dir="rtl"], [dir="rtl"] *) {
+  top: 0.75rem;
+  left: -3rem;
+  --tw-rotate: -45deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.s-offer-slide-one-sixth {
+  width: 50% !important;
+}
+@media (min-width: 640px) {
+  .s-offer-slide-one-sixth {
+    width: 33.333333% !important;
+  }
+}
+@media (min-width: 768px) {
+  .s-offer-slide-one-sixth {
+    width: 25% !important;
+  }
+}
+@media (min-width: 1024px) {
+  .s-offer-slide-one-sixth {
+    width: 16.666667% !important;
+  }
+}
+.s-offer-slide-one-sixth-single {
+  display: flex;
+  align-items: center !important;
+  gap: 0.75rem;
+}
+.s-offer-slide-cat-entry {
+  display: flex;
+  height: 9rem;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  padding: 0.75rem;
+  text-align: center;
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 500ms;
+}
+.s-offer-slide-cat-entry:hover {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+  --tw-shadow: 5px 10px 30px #2B2D340D;
+  --tw-shadow-colored: 5px 10px 30px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.s-offer-slide-cat-entry i {
+  margin-bottom: 1rem;
+  display: inline-block;
+  font-size: 33px;
+  color: var(--color-primary);
+}
+.s-offer-slide-cat-entry h4 {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 700;
+}
+.s-offer-slide-one-fourth {
+  height: auto;
+  width: auto;
+  max-width: 310px;
+}
+.s-offer-slide-offer-entry {
+  display: flex;
+  height: 9rem;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 0.375rem;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  text-align: center;
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 500ms;
+}
+.s-offer-slide-offer-entry:hover {
+  --tw-shadow: 5px 10px 30px #2B2D340D;
+  --tw-shadow-colored: 5px 10px 30px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.s-offer-slide-offer-entry-price-quantity-container {
+  display: flex;
+  width: 100%;
+  flex-grow: 1;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0.75rem;
+}
+.s-offer-slide-offer-entry-quantity {
+  margin-bottom: 0.25rem;
+}
+.s-offer-slide-offer-entry-price {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+.s-offer-slide-offer-entry-price-amount {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+  font-weight: 800;
+  --tw-text-opacity: 1;
+  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
+}
+.s-offer-slide-offer-entry-price-amount-percent {
+  width: 100%;
+  border-top-width: 1px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
+  padding: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+.s-offer-slide-offer-entry-price-amount-percent span {
+  font-weight: 700;
+}
+.s-offer-discount-list {
+  margin-top: 1.25rem;
+}
+.s-offer-discount-list > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
+}
+.s-offer-discount-list-item {
+  display: flex;
+  justify-content: space-between;
+  border-top-width: 1px;
+  padding-top: 0.625rem;
+}
+.s-offer-discount-list-item-money {
+  font-weight: 700;
+  --tw-text-opacity: 1;
+  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
+}
+.s-offer-discount-list-item-discount {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+.s-offer-discount-list-item-discount span {
+  font-weight: 700;
+}
+.s-offer-bank-wrapper {
+  position: relative;
+  display: flex;
+  min-height: 144px;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.5rem;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  padding: 0.5rem;
+}
+.s-offer-bank-wrapper:hover {
+  --tw-shadow: 5px 10px 30px #2B2D340D;
+  --tw-shadow-colored: 5px 10px 30px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.s-offer-bank-wrapper-multi-spacer {
+  margin-top: 1.25rem;
+}
+.s-offer-bank-wrapper-sinlge-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.s-offer-bank-logo {
+  margin-bottom: 0.25rem;
+  display: flex;
+  height: 5rem;
+  width: 5rem;
+  align-items: center;
+  border-radius: var(--s-radius, 0.25rem);
+}
+.s-offer-bank-logo img {
+  height: 100%;
+  max-height: 100%;
+  width: 100%;
+  object-fit: contain;
+}
+.s-offer-bank-payment-wrapper {
+  display: flex;
+  min-width: 84px;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+}
+.s-offer-bank-payment-single {
+  display: flex;
+  height: 1.5rem;
+  width: 2rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--s-radius, 0.25rem);
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+}
+.s-offer-bank-payment-single img {
+  max-height: 100%;
+  max-width: 100%;
+  object-fit: contain;
+}
+.s-offer-bank-payment-discount-percent {
+  position: absolute;
+  top: -1rem;
+  left: auto;
+  border-radius: 9999px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  font-size: 11px;
+  font-weight: 600;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+  --tw-shadow: 0 1px 2px rgba(0,0,0,0.35);
+  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.s-offer-bank-message {
+  width: 100%;
+}
+.s-offer-bank-message h2 {
+  max-width: 92%;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 500;
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
+}
+.s-offer-bank-message p {
+  max-width: 95%;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+  line-height: 1.5;
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+}
+.s-offer-bank-message-amount {
+  font-weight: 700;
+  --tw-text-opacity: 1;
+  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
+}
+.s-offer-bank-payment-nav {
+  margin-left: 3.5rem !important;
+  margin-right: 3.5rem !important;
+}
+.s-offer-.s-slider-block__title {
+  position: relative;
+  margin-bottom: 1.25rem;
+}
+.s-offer-.s-slider-block__title::before {
+  position: absolute;
+  top: 1rem;
+  font-size: 3rem;
+  font-weight: 400;
+  line-height: 1;
+  --tw-text-opacity: 1;
+  color: rgb(254 242 242 / var(--tw-text-opacity, 1));
+  --tw-content: 'ee30';
+  content: var(--tw-content);
+}
+.s-offer-.s-slider-block__title:where([dir="ltr"], [dir="ltr"] *)::before {
+  content: var(--tw-content);
+  left: 0px;
+}
+.s-offer-.s-slider-block__title:where([dir="rtl"], [dir="rtl"] *)::before {
+  content: var(--tw-content);
+  right: 0px;
+}
+.s-offer-.s-offer-wrapper .s-slider-block__title h2 {
+  z-index: 0;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
+}
+.s-offer-.s-offer-wrapper .s-slider-block__title p {
+  margin-top: 0.25rem;
+  overflow: visible;
+  display: block;
+  -webkit-box-orient: horizontal;
+  -webkit-line-clamp: none;
+  line-height: 1.5rem;
+}
+.s-offer-wrapper .s-slider-block__title::before {
+  content: \ee30;
+  font-family: sallaicons;
+  position: absolute;
+  top: 1rem;
+  font-size: 3rem;
+  font-weight: 400;
+  line-height: 1;
+  z-index: -1;
+  color: rgba(254, 242, 242, 1);
+}
+.s-offer-bank-wrapper-single-item {
+  display: flex;
+  align-items: center;
+  gap: 0.875rem;
+}
+.s-offer-slides-container {
+  display: flex;
+  gap: 1rem;
+}
+.s-offer-card {
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  height: 100%;
+  min-height: 138px;
+  max-width: 28rem;
+  gap: 0.75rem;
+  border-radius: 0.375rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+}
+.s-offer-card-icon {
+  display: flex;
+  height: 3rem;
+  width: 3rem;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  align-self: flex-start;
+  border-radius: 9999px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+.s-offer-card-content {
+  min-width: 0px;
+  flex: 1 1 0%;
+  text-align: right;
+}
+.s-offer-card-title {
+  margin-bottom: 0.25rem;
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+  line-height: 1.25;
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
+}
+.s-offer-card-description {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  line-height: 1.625;
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
+}
+.s-offer-card-details {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+}
+.s-offer-shared-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+.s-offer-drawer-card {
+  overflow: hidden;
+  border-bottom-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+.s-offer-drawer-card:last-child {
+  border-bottom-width: 0px;
+}
+.s-offer-drawer-card .s-offer-card-main {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0px;
+}
+.s-offer-drawer-card .s-offer-card-icon {
+  display: flex;
+  height: 3rem;
+  width: 3rem;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+.s-offer-drawer-card .s-offer-card-content {
+  min-width: 0px;
+  flex: 1 1 0%;
+  text-align: right;
+}
+.s-offer-drawer-card .s-offer-card-title {
+  margin-bottom: 0.25rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
+}
+.s-offer-drawer-card .s-offer-card-description {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  line-height: 1.625;
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+}
+.s-offer-drawer-card .s-accordion-wrapper {
+  margin: 0px;
+}
+.s-offer-drawer-card .s-accordion-head-wrapper {
+  margin-right: 60px;
+  width: 100%;
+  max-width: 370px;
+  cursor: pointer;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  padding-bottom: 0.75rem;
+  padding-right: 0px;
+  padding-top: 0px;
+}
+.s-offer-drawer-card .s-accordion-head-wrapper-end {
+  display: none !important;
+}
+.s-offer-drawer-card .s-accordion-body-wrapper {
+  overflow: auto;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-bottom: 0px;
+}
+.s-offer-drawer-card .s-accordion-body-wrapper::-webkit-scrollbar {
+  width: 5px;
+}
+.s-offer-drawer-card .s-accordion-body-wrapper::-webkit-scrollbar-track {
+  background-color: #eee;
+}
+.s-offer-drawer-card .s-accordion-body-wrapper::-webkit-scrollbar-thumb {
+  background-color: var(--color-primary);
+  border-radius: 10px;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  -ms-border-radius: 10px;
+  -o-border-radius: 10px;
+}
+.s-offer-products-thumbnails {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+}
+.s-offer-products-thumbnails-stack {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.s-offer-product-thumbnail {
+  position: relative;
+  z-index: 10;
+  margin-left: -0.5rem;
+  height: 2rem;
+  width: 2rem;
+  overflow: hidden;
+  border-radius: 0.375rem;
+  border-width: 2px;
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
+.s-offer-product-thumbnail:first-child {
+  margin-left: 0px;
+}
+.s-offer-product-thumbnail img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
+.s-offer-products-more-count {
+  position: relative;
+  z-index: 50;
+  margin-left: -0.5rem;
+  display: flex;
+  height: 2rem;
+  width: 2rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem;
+  border-width: 2px;
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+  font-size: 11px;
+  font-weight: 400;
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+  direction: ltr;
+}
+.s-offer-products-title {
+  display: flex;
+  align-items: center;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
+}
+.s-offer-products-accordion-content {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
+  padding: 0.75rem;
+}
+.s-offer-products-link {
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: space-between;
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+}
+.s-offer-products-link:hover {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
+}
+.s-offer-products-link-text {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
+  text-decoration-line: underline;
+}
+.s-offer-products-link-icon {
+  font-size: 15px;
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+}
+.s-offer-products-link:hover .s-offer-products-link-icon {
+  --tw-translate-x: -0.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.s-offer-drawer-padding {
+  padding: 0px !important;
+}
+.s-offer-drawer-content {
+  max-height: calc(100vh - 120px);
+  overflow-y: auto !important;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+.s-offer-drawer-content::-webkit-scrollbar {
+  width: 5px;
+}
+.s-offer-drawer-content::-webkit-scrollbar-track {
+  background-color: #eee;
+}
+.s-offer-drawer-content::-webkit-scrollbar-thumb {
+  background-color: var(--color-primary);
+  border-radius: 10px;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  -ms-border-radius: 10px;
+  -o-border-radius: 10px;
+}
+.s-offer-products-drawer-content {
+  max-height: calc(100vh - 120px);
+  overflow-y: auto !important;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+.s-offer-products-drawer-content::-webkit-scrollbar {
+  width: 5px;
+}
+.s-offer-products-drawer-content::-webkit-scrollbar-track {
+  background-color: #eee;
+}
+.s-offer-products-drawer-content::-webkit-scrollbar-thumb {
+  background-color: var(--color-primary);
+  border-radius: 10px;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  -ms-border-radius: 10px;
+  -o-border-radius: 10px;
+}
+.s-offer-products-list-single-column .s-products-list-wrapper {
+  display: grid !important;
+  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
+  gap: 0.75rem;
+}
+.s-offer-products-list-single-column salla-product-card[horizontal] img {
+  height: 60px !important;
+  max-height: 60px !important;
+  width: 60px !important;
+  max-width: 60px !important;
+  object-fit: cover !important;
+}
+.s-offer-products-list-single-column salla-product-card[horizontal] button {
+  --tw-bg-opacity: 1;
+  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+.s-offer-products-list-single-column salla-product-card[horizontal] button:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
+}
+.s-offer-discount-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.s-offer-discount-table tr:not(:last-child) {
+  border-bottom-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
+}
+.s-offer-discount-table td {
+  padding: 0.75rem;
+  text-align: right;
+}
+.s-offer-discount-table td:first-child {
+  padding-right: 0px;
+}
+.s-offer-discount-percentage {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 700;
+  line-height: 1.25;
+}
+.s-offer-discount-condition {
+  margin-top: 0.25rem;
+  font-size: 10px;
+  line-height: 1.25;
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+}
+.s-offer-categories {
+  margin-top: 0.75rem;
+  text-align: right;
+}
+.s-offer-categories-list {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 1rem;
+  font-size: 13px;
+  line-height: 1.625;
+}
+.s-offer-categories-list a {
+  text-decoration-line: underline;
+}
+.s-offer-category-item {
+  display: inline-block;
+  cursor: pointer;
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+.s-offer-category-item:hover {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
+}
+.s-offer-categories-toggle {
+  cursor: pointer;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
+}
+.s-offer-categories-toggle:hover {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
+}
+.s-offer-min-spend {
+  margin-top: 0.625rem;
+  font-size: 13px;
+  line-height: 17px;
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+.s-offer-percentage-fixed-content {
+  display: flex;
+  flex-direction: column;
+}
+.s-offer-min-items {
+  font-size: 13px;
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+.s-offer-discount-table-subtitle {
+  margin-bottom: 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  line-height: 1.625;
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+}
+.s-offer-show-more-card {
+  pointer-events: auto;
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  text-align: center;
+}
+.s-offer-show-more-icon {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
+}
+.s-offer-show-more-title {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+  line-height: 1.25;
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
+}
+.s-offer-drawer-card .s-products-list-compact-cards {
+  margin-bottom: 0px !important;
+}
+.s-offer-modal-cat-item.swiper-slide {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  display: flex;
+  height: 9rem;
+  max-width: 180px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  padding: 0.75rem;
+  text-align: center;
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 500ms;
+}
+.s-offer-modal-cat-item.swiper-slide:hover {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.s-offer-modal-brand-item.swiper-slide {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  display: flex;
+  height: 9rem;
+  max-width: 180px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  padding: 0.75rem;
+  text-align: center;
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 500ms;
+}
+.s-offer-modal-brand-item.swiper-slide:hover {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.s-offer-modal-tag-item.swiper-slide {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  display: flex;
+  height: 9rem;
+  max-width: 180px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  padding: 0.75rem;
+  text-align: center;
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 500ms;
+}
+.s-offer-modal-tag-item.swiper-slide:hover {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.s-offer-modal-product.swiper-slide {
+  display: flex;
+  width: 70%;
+  flex-shrink: 0;
+  flex-grow: 1;
+  flex-direction: column;
+}
+@media (min-width: 640px) {
+  .s-offer-modal-product.swiper-slide {
+    width: 40%;
+  }
+}
+@media (min-width: 1024px) {
+  .s-offer-modal-product.swiper-slide {
+    width: 28%;
+  }
+}