/* =========================================================
   OCEAN / AL-NADA SALLA CLEAN CSS (NO SCOPE)
   Each class works independently
   ========================================================= */

/* ---------- Padding helper ---------- */
.oc-padding-item {
  padding: 10px !important;
  margin: 10px !important;
}

/* ---------- Block gaps ---------- */
.oc-gap-xs { margin-top: 6px !important; }
.oc-gap-sm { margin-top: 12px !important; }
.oc-gap-md { margin-top: 20px !important; }
.oc-gap-lg { margin-top: 32px !important; }

/* ---------- Hide block title ---------- */
.oc-hide-title .s-block__title {
  display: none !important;
}

/* ---------- Tight space ---------- */
.oc-tight-space {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* ---------- No padding ---------- */
.oc-no-padding {
  padding: 0 !important;
  margin: 0 !important;
}

/* ---------- No radius ---------- */
.oc-no-radius,
.oc-no-radius * {
  border-radius: 0 !important;
}

/* ---------- Full width ---------- */
.oc-full-width {
  position: relative !important;
  overflow: clip !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ---------- Full bleed ---------- */
@media (min-width: 769px) {
  .oc-full-bleed {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    overflow: hidden !important;
  }
}

/* ---------- Slider fixed width ---------- */
.oc-slider-fixed-width .swiper,
.oc-slider-fixed-width .swiper-wrapper {
  justify-content: flex-start !important;
}

@media (max-width: 768px) {
  .oc-slider-fixed-width .swiper-wrapper > .swiper-slide {
    width: 200px !important;
    flex: 0 0 200px !important;
  }
}

@media (min-width: 769px) {
  .oc-slider-fixed-width .swiper-wrapper > .swiper-slide {
    width: 250px !important;
    flex: 0 0 250px !important;
  }
}

/* ---------- Slider loop ---------- */
.oc-slider-loop .swiper {
  overflow: hidden !important;
}

/* ---------- No pagination ---------- */
.oc-no-pagination .swiper-pagination,
.oc-no-pagination .swiper-pagination-bullets,
.oc-no-pagination .swiper-pagination-fraction {
  display: none !important;
}

/* ---------- No lazy ---------- */
.oc-no-lazy .swiper-lazy,
.oc-no-lazy .swiper-lazy-loaded,
.oc-no-lazy .swiper-lazy-loading {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  transition: none !important;
}

.oc-no-lazy .swiper-lazy-preloader {
  display: none !important;
}

/* ---------- Fast images ---------- */
.oc-fast-images img {
  image-rendering: auto;
}

/* ---------- Hover / touch pause ---------- */
.oc-hover-pause {
  cursor: pointer;
}

.oc-touch-pause {
  touch-action: pan-y;
}

/* ---------- Force visible ---------- */
.oc-force-visible .swiper-lazy,
.oc-force-visible .swiper-lazy-loading,
.oc-force-visible .swiper-lazy-loaded,
.oc-force-visible img {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

.oc-force-visible .swiper-lazy-preloader {
  display: none !important;
}

/* ---------- Ignore overlay ---------- */
.oc-ignore-overlay .absolute-center,
.oc-ignore-overlay [class*="absolute"],
.oc-ignore-overlay .swiper-slide [style*="position: absolute"] {
  pointer-events: none !important;
}

/* ---------- Force swipe ---------- */
.oc-force-swipe .swiper {
  touch-action: pan-y !important;
}

/* ---------- Safe init ---------- */
.oc-safe-init .swiper {
  overflow: hidden !important;
}

/* ---------- Banner slider ---------- */
.oc-banner-slider .swiper-slide {
  width: 700px !important;
  height: 300px !important;
  flex: 0 0 auto !important;
}

.oc-banner-slider .swiper-slide img,
.oc-banner-slider .swiper-slide picture,
.oc-banner-slider .swiper-slide picture img,
.oc-banner-slider .swiper-slide > * {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

@media (max-width: 768px) {
  .oc-banner-slider .swiper-slide {
    width: 500px !important;
    height: 400px !important;
  }
}

/* ---------- RTL right edge ---------- */
.oc-rtl-right-edge {
  direction: rtl !important;
}

.oc-rtl-right-edge .swiper {
  overflow: hidden !important;
}

.oc-rtl-right-edge .swiper-wrapper {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

.oc-rtl-right-edge .swiper-slide + .swiper-slide {
  margin-inline-start: 10px !important;
}

/* =========================================================
   FIXED GLOBAL CLASSES (were global → now controlled)
   ========================================================= */

/* Promotion title */
.oc-promo-title .product-entry__promotion_title {
  background-color: #dc2626 !important;
  color: #ffffff !important;
  font-size: 0.8em !important;
  max-width: 100% !important;
  width: auto !important;
  min-width: fit-content;
  font-size: clamp(10px, 1.8vw, 14px) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.9);
}

/* Button text */
.oc-btn-text .s-button-text {
  font-size: 80% !important;
}

/* Price styling */
.oc-price-style .regular-price {
  color: #FF0000 !important;
  font-weight: 800 !important;
  font-size: 1.2rem !important;
}

.oc-price-style .on-sale-price {
  color: #000000 !important;
}

.oc-price-style .regular-or-normal-price.regular-price {
  color: #e60023 !important;
  font-weight: 700 !important;
}

/* Text fix */
.oc-text-white .text-sm.leading-relaxed.max-w-md.mb-2\.5.text-gray-600,
.oc-text-white .text-sm.leading-relaxed.max-w-md.mb-2\.5.text-gray-600 p,
.oc-text-white .text-sm.leading-relaxed.max-w-md.mb-2\.5.text-gray-600 strong {
  color: #ffffff !important;
  text-align: right !important;
  direction: rtl !important;
}

/* Grid text */
.oc-grid-white .grid.grid-cols-1.md\:grid-cols-3,
.oc-grid-white .grid.grid-cols-1.md\:grid-cols-3 * {
  color: #ffffff !important;
}