/* =========================================================
   OCEAN / SALLA — SWIPER BLOCK-DEPENDENT CSS (CLEAN / NO DUPLICATES)
   ---------------------------------------------------------
   ✅ Affects ONLY blocks that have ONE of these classes:
   - only-width
   - loop-only
   - swip-autoplay
   - swip-fast-images
   - swip-no-lazy
   - swip-hover-pause
   - swip-touch-pause
   - swip-force-visible      (NEW)
   - swip-force-eager        (NEW)
   - swip-force-swipe        (NEW)  [CSS helper only]
   - swip-ignore-overlay     (NEW)
   - swip-safe-init          (NEW)  [CSS helper only]
   - no-pagination
   - tight-space
   - no-radius
   - full-width
   - no-padding-item
   - hide-block-title
   - banner-slider
   - photos-right-edge
   ========================================================= */

/* ---------- FIX: wrong unit (keep your class) ---------- */
.s-padding-item{
  padding:10px !important;
  margin:10px !important;
}

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

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

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

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

/* ---------- No radius (block-scoped) ---------- */
.no-radius,
.no-radius *{
  border-radius:0 !important;
}

/* ---------- Full width helper (clean, no duplicates) ---------- */
.full-width{
  position:relative !important;
  overflow:visible !important;

  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
}
@supports (width: 100dvw){
  .full-width{
    width:100dvw !important;
    max-width:100dvw !important;
    margin-left:calc(50% - 50dvw) !important;
    margin-right:calc(50% - 50dvw) !important;
  }
}
.full-width > *{ max-width:100% !important; }

/* =========================================================
   (A) only-width — width control ONLY (safe)
   ========================================================= */
.only-width .swiper,
.only-width .swiper-wrapper{
  justify-content:flex-start !important;
}

/* Default slide widths (change numbers if you want) */
@media (max-width:768px){
  .only-width .swiper-wrapper > .swiper-slide{
    width:200px !important;
    flex:0 0 200px !important;
  }
}
@media (min-width:769px){
  .only-width .swiper-wrapper > .swiper-slide{
    width:250px !important;
    flex:0 0 250px !important;
  }
}

/* =========================================================
   (B) loop-only — allow loop, do NOT hide things
   ========================================================= */
.loop-only .swiper{ overflow:hidden !important; }

/* =========================================================
   (C) no-pagination — hide bullets ONLY for that block
   ========================================================= */
.no-pagination .swiper-pagination,
.no-pagination .swiper-pagination-bullets,
.no-pagination .swiper-pagination-fraction{
  display:none !important;
}

/* =========================================================
   (D) swip-no-lazy — force show images + controls (block only)
   ========================================================= */
.swip-no-lazy .swiper-lazy,
.swip-no-lazy .swiper-lazy-loaded,
.swip-no-lazy .swiper-lazy-loading{
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
  transition:none !important;
}
.swip-no-lazy .swiper-lazy-preloader{ display:none !important; }

.swip-no-lazy .swiper-button-prev,
.swip-no-lazy .swiper-button-next,
.swip-no-lazy .swiper-pagination,
.swip-no-lazy .swiper-pagination-bullet,
.swip-no-lazy .swiper-scrollbar,
.swip-no-lazy .swiper-scrollbar-drag{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:none !important;
  transition:none !important;
}

/* =========================================================
   (E) swip-fast-images — CSS hints only (JS does main work)
   ========================================================= */
.swip-fast-images img{
  image-rendering:auto;
}

/* =========================================================
   (F) Hover/Touch pause — CSS only (JS handles behavior)
   ========================================================= */
.swip-hover-pause{ cursor:pointer; }
.swip-touch-pause{ touch-action:pan-y; }

/* =========================================================
   (G) NEW — Force visibility (fix “images not appearing”)
   Use when theme keeps swiper-lazy at opacity:0 even with src
   ========================================================= */
.swip-force-visible .swiper-lazy,
.swip-force-visible .swiper-lazy-loading,
.swip-force-visible .swiper-lazy-loaded,
.swip-force-visible img{
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
}
.swip-force-visible .swiper-lazy-preloader{ display:none !important; }

/* =========================================================
   (H) NEW — Ignore overlay blocking swipe (fix “not sliding”)
   Targets common absolute overlays that sit above slides.
   ========================================================= */
.swip-ignore-overlay .absolute-center,
.swip-ignore-overlay [class*="absolute"],
.swip-ignore-overlay .swiper-slide [style*="position: absolute"]{
  pointer-events:none !important;
}

/* =========================================================
   (I) NEW — Force swipe (CSS helper)
   Real enable is in JS (allowTouchMove=true)
   ========================================================= */
.swip-force-swipe .swiper{ touch-action:pan-y !important; }

/* =========================================================
   (J) NEW — Safe init (CSS helper only)
   Prevent weird overflow hiding in some themes
   ========================================================= */
.swip-safe-init .swiper{ overflow:hidden !important; }

/* =========================================================
   OPTIONAL: Banner sizing class (block-specific)
   - does NOT touch other sliders
   ========================================================= */
.banner-slider .swiper-slide{
  width:700px !important;
  height:300px !important;
  flex:0 0 auto !important;
}
.banner-slider .swiper-slide img,
.banner-slider .swiper-slide picture,
.banner-slider .swiper-slide picture img,
.banner-slider .swiper-slide > *{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}
@media (max-width:768px){
  .banner-slider .swiper-slide{
    width:500px !important;
    height:400px !important;
  }
}

/* =========================================================
   OPTIONAL: RTL “touch right edge” version (block-specific)
   Apply ONLY if your block can add class: photos-right-edge
   ========================================================= */
.photos-right-edge{ direction:rtl !important; }
.photos-right-edge .swiper{ overflow:hidden !important; }
.photos-right-edge .swiper-wrapper{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
}
.photos-right-edge .swiper-slide + .swiper-slide{
  margin-inline-start:10px !important;
}


/*=============*/


/* Force promotion title style */
.product-entry__promotion_title {
  background-color: #dc2626 !important; /* red (Tailwind red-600) */
  color: #ffffff !important;

  /* decrease font size by 20% */
  font-size: 0.8em !important;
}


.s-button-text {
  font-size: 80% !important;
}

/*=============*/

.regular-price {
  color: #FF0000 !important;
  font-weight: 800 !important;
  font-size: 1.2rem !important;
}

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