/* Product Extra Info strip (price üstü) */

/* ---- Image overlay (grid + mobile) ---- */
.product-thumb .image-group .image {
  position: relative;
}

.product-extra-info-img-overlay {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  z-index: 6;
  display: flex;
  justify-content: flex-start;
  pointer-events: none;
}

.product-extra-info-img-overlay .product-extra-info-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-weight: 800;
  font-size: 11px;
  line-height: 1.2;
  max-width: calc(100% - 4px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}

.product-extra-info-img-overlay .product-extra-info-badge .ei-ico {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(0,0,0,.03);
  flex-shrink: 0;
}

.product-extra-info-img-overlay .product-extra-info-badge.ei-blue {
  border-color: rgba(51,122,183,.35);
  background: rgba(51,122,183,.12);
  color: #2e6da4;
}
.product-extra-info-img-overlay .product-extra-info-badge.ei-blue .ei-ico {
  background: rgba(51,122,183,.12);
  border-color: rgba(51,122,183,.20);
}

.product-extra-info-img-overlay .product-extra-info-badge.ei-red {
  border-color: rgba(217,83,79,.38);
  background: rgba(217,83,79,.12);
  color: #a94442;
}
.product-extra-info-img-overlay .product-extra-info-badge.ei-red .ei-ico {
  background: rgba(217,83,79,.12);
  border-color: rgba(217,83,79,.22);
}

.product-extra-info-img-overlay .product-extra-info-badge.ei-green {
  border-color: rgba(92,184,92,.35);
  background: rgba(92,184,92,.14);
  color: #2b7a2b;
}
.product-extra-info-img-overlay .product-extra-info-badge.ei-green .ei-ico {
  background: rgba(92,184,92,.14);
  border-color: rgba(92,184,92,.25);
}

.product-extra-info-img-overlay .product-extra-info-badge.ei-neutral {
  border-color: rgba(0,0,0,.16);
  background: rgba(255,255,255,.94);
  color: #555;
}

/* Style-specific left accent bar for overlay badges */
.product-extra-info-img-overlay .product-extra-info-badge.ei-style1:before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-top-left-radius: 9px;
  border-bottom-left-radius: 9px;
  background: rgba(51,122,183,.6);
}

.product-extra-info-img-overlay .product-extra-info-badge.ei-style2 {
  border-style: dashed;
}

/* Desktop grid: label'i resim alanına taşı ve caption içindeki yükseklik etkisini kaldır. */
@media (min-width: 577px) {
  .product-grid .product-thumb {
    position: relative;
  }

  .product-grid .product-thumb .caption {
    position: static;
  }

  .product-grid .product-thumb .caption > .product-extra-info {
    position: absolute !important;
    top: 2px !important;
    left: 10px !important;
    right: 10px !important;
    bottom: auto !important;
    margin: 0 !important;
    z-index: 10;
    pointer-events: none;
    max-width: calc(100% - 20px) !important;
  }

  .product-grid .product-thumb .caption > .product-extra-info .product-extra-info-badge {
    padding: 4px 10px !important;
    border-radius: 11px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    gap: 7px !important;
  }

  .product-grid .product-thumb .caption > .product-extra-info .product-extra-info-badge .ei-ico,
  .product-grid .product-thumb .caption > .product-extra-info .product-extra-info-badge .ei-icon {
    width: 18px !important;
    height: 18px !important;
    border-radius: 7px !important;
  }
}

/* Grid view: badge'i resmin ÜST köşesine bindirmek için absolute konumlama.
   SADECE mobilde uygulanır — masaüstünde badge caption içinde normal akışta durur. */
@media (max-width: 576px) {
  .product-grid .product-thumb {
    position: relative;
  }

  .product-grid .product-thumb .caption {
    position: static;
  }

  .product-grid .product-thumb .caption > .product-extra-info {
    position: absolute !important;
    top: 2px !important;
    left: 5px !important;
    right: 5px !important;
    bottom: auto !important;
    margin: 0 !important;
    z-index: 10;
    pointer-events: none;
    max-width: calc(100% - 10px) !important;
  }
}

/* ---- End image overlay ---- */

.product-extra-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--label-gap, 8px);
  margin-top: 8px;
  max-width: 100%;
  min-width: 0;
}

.product-extra-info .product-extra-info-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.85);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.1;
  max-width: 100%;
  min-width: 0;
}

.product-extra-info .product-extra-info-badge .ei-ico,
.product-extra-info .product-extra-info-badge .ei-icon {
  width: 22px;
  height: 22px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(0,0,0,.03);
}

.product-extra-info .product-extra-info-badge.ei-blue {
  border-color: rgba(51,122,183,.30);
  background: rgba(51,122,183,.08);
  color: #2e6da4;
}
.product-extra-info .product-extra-info-badge.ei-blue .ei-ico,
.product-extra-info .product-extra-info-badge.ei-blue .ei-icon {
  background: rgba(51,122,183,.10);
  border-color: rgba(51,122,183,.18);
}

.product-extra-info .product-extra-info-badge.ei-red {
  border-color: rgba(217,83,79,.32);
  background: rgba(217,83,79,.08);
  color: #a94442;
}
.product-extra-info .product-extra-info-badge.ei-red .ei-ico,
.product-extra-info .product-extra-info-badge.ei-red .ei-icon {
  background: rgba(217,83,79,.10);
  border-color: rgba(217,83,79,.18);
}

.product-extra-info .product-extra-info-badge.ei-green {
  border-color: rgba(92,184,92,.28);
  background: rgba(92,184,92,.10);
  color: #2b7a2b;
}
.product-extra-info .product-extra-info-badge.ei-green .ei-ico,
.product-extra-info .product-extra-info-badge.ei-green .ei-icon {
  background: rgba(92,184,92,.12);
  border-color: rgba(92,184,92,.20);
}

.product-extra-info .product-extra-info-badge.ei-neutral {
  border-color: rgba(0,0,0,.14);
  background: rgba(0,0,0,.02);
  color: #555;
}
.product-extra-info .product-extra-info-badge.ei-neutral .ei-ico,
.product-extra-info .product-extra-info-badge.ei-neutral .ei-icon {
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.10);
}

/* Style-specific accents */
.product-extra-info .product-extra-info-badge.ei-style1:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  background: rgba(51,122,183,.55);
}

.product-extra-info .product-extra-info-badge.ei-style2 {
  border-style: dashed;
}

.product-extra-info .product-extra-info-badge.ei-style3:before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 999px;
  background: rgba(43,122,43,.55);
}

.product-extra-info .product-extra-info-badge.ei-style5:after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 999px;
  background: rgba(46,109,164,.40);
}

.product-extra-info .product-label {
  pointer-events: none;
}

.product-extra-info .product-extra-info-value {
  font-size: 95%;
  line-height: 1;
  white-space: nowrap;
}

.product-extra-info .product-extra-info-message {
  font-size: 95%;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-width: 0;
}

.product-extra-info .product-extra-info-message .ei-rotator {
  display: inline-block;
}

@keyframes eiDropPaper {
  0% { opacity: 0; transform: translateY(-14px); filter: blur(.2px); }
  60% { opacity: 1; transform: translateY(2px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.product-extra-info .product-extra-info-message .ei-rotator.ei-rotator-anim {
  animation: eiDropPaper .38s ease-out;
}

@media (max-width: 576px) {
  /* Mobilde ürün grid'ini kenara yaklaştırma — Journal3 kolon/gutter kadar bleed */
  :root {
    /* Sekmeler: kolon padding'ini telafi — soldan yanaşır */
    --ei-tab-edge-bleed: 16px;
    --ei-tab-safe-gutter: 4px;
    /* Ürün grid: hafif dışa açılır, ekrandan taşmaz */
    --ei-grid-bleed: 15px;
    --ei-grid-safe-gutter: 4px;
    --ei-tab-width-first: 38%;
    --ei-tab-width-rest: 62%;
  }

  /* Kategori sayfası: ürün grid'i genişletmek için container padding 5px */
  #product-category.container {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  /* Anasayfa layout kolon padding'i sıfırla — .grid-items, products modülünün PARENT'ı.
     Journal3 admin panelinden .grid-col-{id} > .grid-items'a padding yazıyor,
     bizim .module-products .module-body hedefi yanlış yeri etkiliyordu.
     :has() ile sadece products içeren sütunları hedefliyoruz. */
  .grid-col > .grid-items:has(.module-products),
  .grid-item:has(.module-products),
  .grid-item:has(.module-products) > .grid-items {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .module-products {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Eski hatalı kural kaldırıldı, yerine yukarıdaki kural kullanılıyor */
  .module-products .module-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Sekmeler: bleed SADECE .nav-tabs'ta; tab-container genişlemesin (ürün grid taşmasın) */
  .module-products .tab-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .module-products .tab-container > .nav-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    width: calc(100% + (2 * var(--ei-tab-edge-bleed))) !important;
    max-width: calc(100% + (2 * var(--ei-tab-edge-bleed))) !important;
    margin: 0 calc(-1 * var(--ei-tab-edge-bleed)) 8px !important;
    padding-left: var(--ei-tab-safe-gutter) !important;
    padding-right: var(--ei-tab-safe-gutter) !important;
    box-sizing: border-box !important;
    border-left-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 0 !important;
    scroll-padding-left: 0 !important;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }

  .module-products .tab-container > .nav-tabs::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  /* İlk sekme dar, diğerleri geniş → Haftanın Kampanyaları tam okunur */
  .module-products .tab-container > .nav-tabs > li {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .module-products .tab-container > .nav-tabs > li:first-child {
    flex: 0 0 var(--ei-tab-width-first) !important;
    width: var(--ei-tab-width-first) !important;
    min-width: var(--ei-tab-width-first) !important;
    max-width: var(--ei-tab-width-first) !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  .module-products .tab-container > .nav-tabs > li:first-child > a {
    padding-left: 8px !important;
    border-top-left-radius: inherit !important;
    border-bottom-left-radius: inherit !important;
  }

  .module-products .tab-container > .nav-tabs > li:not(:first-child) {
    flex: 0 0 var(--ei-tab-width-rest) !important;
    width: var(--ei-tab-width-rest) !important;
    min-width: var(--ei-tab-width-rest) !important;
    max-width: var(--ei-tab-width-rest) !important;
  }

  .module-products .tab-container > .nav-tabs > li > a {
    justify-content: center !important;
    text-align: center !important;
    font-size: inherit !important;
    line-height: inherit !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .module-products .tab-container > .tab-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    box-sizing: border-box !important;
  }

  /* Mobile grid: kartlar satırlar arasında üst üste binmesin (border/yuvarlak köşe net görünsün)
     + Sepete Ekle'nin altında boş alan kalmasın (Journal3 auto-grid height:100% stretch override) */
  .product-grid.auto-grid {
    --grid-gap: 12px;
  }

  /* Bu sitede bazı ürün modülleri `.product-grid.ipr-grid` ile geliyor ve
     mobilde satır içinde kartların boyu farklı olunca çerçeve/boşluk algısı bozulabiliyor.
     Bu yüzden ipr-grid'de satır bazında eşit yükseklik + net gap uyguluyoruz. */
  /* Anasayfa ürün modülü: kolon padding'ini hafifçe telafi et, taşmadan genişlet */
  .module-products .tab-content .product-grid.ipr-grid:not(.swiper-wrapper),
  .module-products:not(.carousel-mode) .module-body > .product-grid.ipr-grid:not(.swiper-wrapper),
  .module-products:not(.carousel-mode) .module-body .product-grid.ipr-grid:not(.swiper-wrapper) {
    margin-left: calc(-1 * var(--ei-grid-bleed)) !important;
    margin-right: calc(-1 * var(--ei-grid-bleed)) !important;
    width: calc(100% + (2 * var(--ei-grid-bleed))) !important;
    max-width: calc(100% + (2 * var(--ei-grid-bleed))) !important;
    padding-left: var(--ei-grid-safe-gutter) !important;
    padding-right: var(--ei-grid-safe-gutter) !important;
    box-sizing: border-box !important;
  }

  .product-grid.ipr-grid:not(.swiper-wrapper) {
    /* Yan yana ve alt alta boşluk aynı (margin-bottom yerine sadece gap) */
    --ei-ipr-gap: 8px;
    --ei-ipr-cols: 2;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    align-content: flex-start;
    gap: var(--ei-ipr-gap) !important;
    row-gap: var(--ei-ipr-gap) !important;
    column-gap: var(--ei-ipr-gap) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Kategori / diğer sayfalar: geniş bleed yok */
  html body .product-grid.ipr-grid:not(.swiper-wrapper) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }

  .module-products .product-grid.ipr-grid:not(.swiper-wrapper) > .product-layout,
  .product-grid.ipr-grid:not(.swiper-wrapper) > .product-layout {
    height: auto !important;
    align-self: stretch !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    display: flex;
    flex: 0 0 calc((100% - (var(--ei-ipr-cols) - 1) * var(--ei-ipr-gap)) / var(--ei-ipr-cols)) !important;
    max-width: calc((100% - (var(--ei-ipr-cols) - 1) * var(--ei-ipr-gap)) / var(--ei-ipr-cols)) !important;
    width: calc((100% - (var(--ei-ipr-cols) - 1) * var(--ei-ipr-gap)) / var(--ei-ipr-cols)) !important;
    min-width: 0 !important;
    box-sizing: border-box;
    position: relative;
    z-index: 0;
  }

  /* Some Journal3 module CSS targets `.module-products-XXX` with very specific selectors and can
     force `width: 100%` / `flex-basis: 100%` on mobile, collapsing the grid to 1 column.
     This selector intentionally matches those module wrappers to keep 2 columns. */
  [class*="module-products-"] .product-grid.ipr-grid:not(.swiper-wrapper) > .product-layout {
    flex: 0 0 calc((100% - (var(--ei-ipr-cols) - 1) * var(--ei-ipr-gap)) / var(--ei-ipr-cols)) !important;
    max-width: calc((100% - (var(--ei-ipr-cols) - 1) * var(--ei-ipr-gap)) / var(--ei-ipr-cols)) !important;
    width: calc((100% - (var(--ei-ipr-cols) - 1) * var(--ei-ipr-gap)) / var(--ei-ipr-cols)) !important;
  }

  /* Kategori (mobil ipr-grid): satır aralığı 3x, kolon aralığı aynı */
  #product-category .main-products.product-grid.ipr-grid:not(.swiper-wrapper),
  #product-category .product-grid.ipr-grid:not(.swiper-wrapper) {
    --ei-ipr-gap: 8px;
    --ei-ipr-row-gap: 24px;
    gap: var(--ei-ipr-row-gap) var(--ei-ipr-gap) !important;
    row-gap: var(--ei-ipr-row-gap) !important;
    column-gap: var(--ei-ipr-gap) !important;
  }

  #product-category .product-grid.ipr-grid:not(.swiper-wrapper) > .product-layout,
  #product-category .product-grid.ipr-grid:not(.swiper-wrapper) > .product-item {
    margin: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Kategori auto-grid (mobil): satır aralığı 3x, kolon aralığı aynı */
  #product-category .product-grid.auto-grid:not(.swiper-wrapper) {
    --grid-gap: 8px;
    --grid-row-gap: 24px;
    gap: var(--grid-row-gap) var(--grid-gap) !important;
    row-gap: var(--grid-row-gap) !important;
    column-gap: var(--grid-gap) !important;
  }

  #product-category .product-grid.auto-grid:not(.swiper-wrapper) > .product-layout,
  #product-category .product-grid.auto-grid:not(.swiper-wrapper) > .product-item {
    margin: 0 !important;
    margin-bottom: 0 !important;
  }

  .module-products .product-grid.ipr-grid:not(.swiper-wrapper) > .product-layout > .product-thumb,
  .product-grid.ipr-grid:not(.swiper-wrapper) > .product-layout > .product-thumb {
    height: auto !important;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid #00A2E0 !important;
    border-color: #00A2E0 !important;
    box-shadow: 0 0 0 1px #00A2E0 inset !important;
    outline: 1px solid #00A2E0 !important;
    outline-offset: -1px;
    background-clip: padding-box;
  }

  /* Journal3 bazı durumlarda kart çerçevesini hover'a/opacity'ye bağlayabiliyor.
     Mobilde çerçeve her zaman görünür kalsın. */
  .module-products .product-grid.auto-grid > .product-layout > .product-thumb,
  .product-grid.auto-grid > .product-layout > .product-thumb {
    border: 1px solid #00A2E0 !important;
    border-color: #00A2E0 !important;
    box-shadow: 0 0 0 1px #00A2E0 inset !important;
    outline: 1px solid #00A2E0 !important;
    outline-offset: -1px;
    background-clip: padding-box;
  }

  /* Bazı modüllerde `.product-thumb` direct-child olmayabiliyor veya tema `border:0 !important` basabiliyor.
     Bu yüzden mobil grid içinde tüm `.product-thumb`'larda çerçeveyi garantiye alıyoruz. */
  html body .product-grid.ipr-grid:not(.swiper-wrapper) .product-thumb,
  html body .product-grid.auto-grid .product-thumb {
    border: 1px solid #00A2E0 !important;
    border-color: #00A2E0 !important;
    box-shadow: 0 0 0 1px #00A2E0 inset !important;
    outline: 1px solid #00A2E0 !important;
    outline-offset: -1px;
    background-clip: padding-box;
  }

  .product-grid.ipr-grid:not(.swiper-wrapper) .product-thumb .caption > .buttons-wrapper {
    margin-top: 4px !important;
    margin-bottom: 2px !important;
  }

  .product-grid.auto-grid > .product-layout {
    height: auto !important;
    align-self: flex-start;
  }

  .product-grid:not(.swiper-wrapper):not(.auto-grid):not(.ipr-grid) {
    row-gap: 0;
  }

  .product-grid:not(.auto-grid) .product-layout,
  .product-grid:not(.auto-grid) .product-item {
    align-self: flex-start;
    height: auto !important;
  }

  .product-extra-info {
    gap: 10px;
    margin-top: 10px;
  }

  .product-extra-info .product-extra-info-badge {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.1;
  }

  .product-extra-info .product-extra-info-badge .ei-ico,
  .product-extra-info .product-extra-info-badge .ei-icon {
    width: 24px;
    height: 24px;
    border-radius: 10px;
  }

  .product-extra-info .product-extra-info-value,
  .product-extra-info .product-extra-info-message {
    font-size: 100%;
  }

  /* Mobile grid cards: blue pill, white text, wrap to 2 lines, no icons */
  .product-grid .product-thumb .caption {
    display: flex;
    flex-direction: column;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .product-grid .product-thumb .caption > .name {
    order: 1 !important;
    min-height: calc(1.22em * 2) !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2;
    overflow: hidden !important;
    font-size: 13px !important;
    line-height: 1.22 !important;
    margin-top: -3px !important;
    margin-bottom: 1px !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
  }

  .product-grid .product-thumb .caption > .name a,
  .product-grid .product-layout .caption > .name a,
  .product-grid .product-item .caption > .name a {
    text-align: left !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  .product-grid .product-thumb .caption > .price {
    order: 2 !important;
    margin-top: 0 !important;
  }

  /* Mobile grid: fiyat tipografisi (sadece grid kartları) */
  .product-grid .product-thumb .price,
  .product-grid .product-layout .price,
  .product-grid .product-item .price {
    margin-top: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    text-align: left !important;
    margin-left: -3px !important;
    position: relative !important;
    top: 3px !important;
  }

  .product-grid .product-thumb .price > div,
  .product-grid .product-layout .price > div,
  .product-grid .product-item .price > div {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: baseline !important;
    -webkit-align-items: baseline !important;
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
    -webkit-box-pack: start !important;
    -webkit-justify-content: flex-start !important;
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    -webkit-flex-wrap: nowrap !important;
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    margin-left: 0 !important;
  }

  .product-grid .product-thumb .price .price-new,
  .product-grid .product-layout .price .price-new,
  .product-grid .product-item .price .price-new,
  .product-grid .product-thumb .price .price-normal,
  .product-grid .product-layout .price .price-normal,
  .product-grid .product-item .price .price-normal {
    color: #003177 !important;
    font-size: clamp(16px, 5.6vw, 17px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.8px !important;
    line-height: 1 !important;
    display: inline-block !important;
    -webkit-box-flex: 0 !important;
    -webkit-flex: 0 0 auto !important;
    -ms-flex: 0 0 auto !important;
    flex: 0 0 auto !important;
  }

  .product-grid .product-thumb .price .price-normal::before,
  .product-grid .product-layout .price .price-normal::before,
  .product-grid .product-item .price .price-normal::before {
    content: 'Fiyat: ';
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    line-height: inherit !important;
    margin-right: 4px;
    margin-left: -1px;
    position: relative;
    left: 0;
  }

  .product-grid .product-thumb .price .price-old,
  .product-grid .product-layout .price .price-old,
  .product-grid .product-item .price .price-old {
    color: rgba(0,0,0,.45) !important;
    font-size: clamp(9px, 2.8vw, 10px) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 1.1 !important;
    text-decoration: line-through !important;
    display: inline-block !important;
    white-space: nowrap !important;
    -webkit-box-flex: 1 !important;
    -webkit-flex: 1 1 auto !important;
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .product-grid .product-thumb .price .price-tax,
  .product-grid .product-layout .price .price-tax,
  .product-grid .product-item .price .price-tax {
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  /* Eğer tema fiyatı sayı + para birimi olarak ayırıyorsa */
  .product-grid .product-thumb .product-list__price,
  .product-grid .product-layout .product-list__price,
  .product-grid .product-item .product-list__price {
    color: #003177 !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    line-height: 1 !important;
    display: inline-block !important;
  }

  .product-grid .product-thumb .product-list__currency,
  .product-grid .product-layout .product-list__currency,
  .product-grid .product-item .product-list__currency {
    color: #003177 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    display: inline-block !important;
    margin-left: 2px !important;
  }

  .product-grid .product-thumb .product-list__current-price,
  .product-grid .product-layout .product-list__current-price,
  .product-grid .product-item .product-list__current-price {
    color: rgba(0,0,0,.45) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 1.1 !important;
    text-decoration: line-through !important;
    display: inline-block !important;
    margin-left: 6px !important;
  }

  .product-grid .product-thumb .caption > .buttons-wrapper {
    order: 4 !important;
    margin-top: 2px !important;
    margin-bottom: -3px !important;
    padding-bottom: 0 !important;
    min-height: 30px !important;
  }

  .product-grid .product-thumb .caption > .description {
    order: 5 !important;
  }

  .product-grid .product-thumb .caption > .rating {
    order: 6 !important;
  }

  .product-grid .product-thumb .caption > .extra-group {
    order: 7 !important;
  }

  .product-grid .product-thumb .product-extra-info .product-extra-info-badge,
  .product-grid .product-layout .product-extra-info .product-extra-info-badge,
  .product-grid .product-item .product-extra-info .product-extra-info-badge {
    background: #1f5fbf !important;
    color: #ffffff !important;
    border-color: transparent !important;
    border-radius: 999px !important;
    padding: 6px 10px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  .product-grid .product-thumb .product-extra-info .product-extra-info-badge:before,
  .product-grid .product-thumb .product-extra-info .product-extra-info-badge:after,
  .product-grid .product-layout .product-extra-info .product-extra-info-badge:before,
  .product-grid .product-layout .product-extra-info .product-extra-info-badge:after,
  .product-grid .product-item .product-extra-info .product-extra-info-badge:before,
  .product-grid .product-item .product-extra-info .product-extra-info-badge:after {
    display: none !important;
  }

  .product-grid .product-thumb .product-extra-info .product-extra-info-badge .ei-ico,
  .product-grid .product-thumb .product-extra-info .product-extra-info-badge .ei-icon,
  .product-grid .product-layout .product-extra-info .product-extra-info-badge .ei-ico,
  .product-grid .product-layout .product-extra-info .product-extra-info-badge .ei-icon,
  .product-grid .product-item .product-extra-info .product-extra-info-badge .ei-ico,
  .product-grid .product-item .product-extra-info .product-extra-info-badge .ei-icon {
    display: none !important;
  }

  .product-grid .product-thumb .product-extra-info .product-extra-info-message,
  .product-grid .product-thumb .product-extra-info .product-extra-info-value,
  .product-grid .product-layout .product-extra-info .product-extra-info-message,
  .product-grid .product-layout .product-extra-info .product-extra-info-value,
  .product-grid .product-item .product-extra-info .product-extra-info-message,
  .product-grid .product-item .product-extra-info .product-extra-info-value {
    white-space: normal !important;
  }

  /* Mobile grid: ULTRA KOMPAKT - yan yana */
  .product-grid .product-thumb .buttons-wrapper,
  .product-grid .product-layout .buttons-wrapper,
  .product-grid .product-item .buttons-wrapper {
    width: 100% !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    line-height: 0 !important;
  }

  .product-grid .product-thumb .button-group,
  .product-grid .product-layout .button-group,
  .product-grid .product-item .button-group {
    width: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    min-height: 30px !important;
  }

  .product-grid .product-thumb .cart-group,
  .product-grid .product-layout .cart-group,
  .product-grid .product-item .cart-group {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -webkit-flex-direction: row !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
    -webkit-flex-wrap: nowrap !important;
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
    -webkit-box-align: center !important;
    -webkit-align-items: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    float: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    min-height: 30px !important;
  }

  /* Stepper - mini kompakt */
  .product-grid .product-thumb .cart-group .stepper,
  .product-grid .product-layout .cart-group .stepper,
  .product-grid .product-item .cart-group .stepper {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: horizontal !important;
    -webkit-flex-direction: row !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
    -webkit-box-align: center !important;
    -webkit-align-items: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-pack: center !important;
    -webkit-justify-content: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    gap: 0 !important;
    height: 30px !important;
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    -webkit-box-flex: 0 !important;
    -webkit-flex: 0 0 56px !important;
    -ms-flex: 0 0 56px !important;
    flex: 0 0 56px !important;
    background: #fff !important;
    border: 1px solid rgba(0, 162, 224, 0.55) !important;
    border-radius: 8px !important;
    box-shadow: 0 0 0 1px rgba(0, 162, 224, 0.06) inset !important;
    outline: none !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    overflow: hidden !important;
    float: none !important;
    position: relative !important;
  }

  .product-grid .product-thumb .cart-group .stepper:has(input:focus),
  .product-grid .product-layout .cart-group .stepper:has(input:focus),
  .product-grid .product-item .cart-group .stepper:has(input:focus) {
    border-color: rgb(0 162 224) !important;
    box-shadow: 0 0 0 2px rgba(0, 162, 224, 0.16) !important;
  }

  /* İçeride ekstra çizgi/border oluşmasın (dış çerçeve stepper'da) */
  .product-grid .product-thumb .cart-group .stepper *,
  .product-grid .product-layout .cart-group .stepper *,
  .product-grid .product-item .cart-group .stepper * {
    box-shadow: none !important;
    outline: none !important;
  }

  /* Sadece input kalsın: +/- gizle */
  .product-grid .product-thumb .cart-group .stepper button.fa-angle-down,
  .product-grid .product-layout .cart-group .stepper button.fa-angle-down,
  .product-grid .product-item .cart-group .stepper button.fa-angle-down,
  .product-grid .product-thumb .cart-group .stepper button.fa-angle-up,
  .product-grid .product-layout .cart-group .stepper button.fa-angle-up,
  .product-grid .product-item .cart-group .stepper button.fa-angle-up {
    display: none !important;
  }

  /* Sağ üst köşede işlevsiz + göstergesi */
  .product-grid .product-thumb .cart-group .stepper:after,
  .product-grid .product-layout .cart-group .stepper:after,
  .product-grid .product-item .cart-group .stepper:after {
    content: none !important;
    display: none !important;
  }

  /* Input - mini */
  .product-grid .product-thumb .cart-group .stepper input.form-control,
  .product-grid .product-layout .cart-group .stepper input.form-control,
  .product-grid .product-item .cart-group .stepper input.form-control {
    -webkit-box-ordinal-group: 3 !important;
    -webkit-order: 2 !important;
    -ms-flex-order: 2 !important;
    order: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 30px !important;
    min-height: 30px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-align: center !important;
    background: transparent !important;
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    padding: 0 6px !important;
    margin: 0 !important;
    line-height: 28px !important;
    -webkit-box-flex: 0 !important;
    -webkit-flex: 1 1 auto !important;
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
    color: #333 !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  /* Native number spinners (mobilde iki çizgi gibi görünebiliyor) */
  .product-grid .product-thumb .cart-group .stepper input.form-control[type="number"]::-webkit-outer-spin-button,
  .product-grid .product-thumb .cart-group .stepper input.form-control[type="number"]::-webkit-inner-spin-button,
  .product-grid .product-layout .cart-group .stepper input.form-control[type="number"]::-webkit-outer-spin-button,
  .product-grid .product-layout .cart-group .stepper input.form-control[type="number"]::-webkit-inner-spin-button,
  .product-grid .product-item .cart-group .stepper input.form-control[type="number"]::-webkit-outer-spin-button,
  .product-grid .product-item .cart-group .stepper input.form-control[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
  }

  .product-grid .product-thumb .cart-group .stepper input.form-control[type="number"],
  .product-grid .product-layout .cart-group .stepper input.form-control[type="number"],
  .product-grid .product-item .cart-group .stepper input.form-control[type="number"] {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
  }

  .product-grid .product-thumb .cart-group .stepper input.form-control:focus,
  .product-grid .product-layout .cart-group .stepper input.form-control:focus,
  .product-grid .product-item .cart-group .stepper input.form-control:focus {
    box-shadow: none !important;
  }

  /* Sepete Ekle - mini */
  .product-grid .product-thumb .cart-group .btn-cart,
  .product-grid .product-layout .cart-group .btn-cart,
  .product-grid .product-item .cart-group .btn-cart {
    -webkit-box-flex: 1 !important;
    -webkit-flex: 1 !important;
    -ms-flex: 1 !important;
    flex: 1 !important;
    height: 30px !important;
    line-height: 30px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 0 8px !important;
    background: rgb(0 162 224) !important;
    background-color: rgb(0 162 224) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    text-transform: none !important;
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -webkit-align-items: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-pack: center !important;
    -webkit-justify-content: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    text-align: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    float: none !important;
    position: static !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .product-grid .product-thumb .cart-group .btn-cart:hover,
  .product-grid .product-layout .cart-group .btn-cart:hover,
  .product-grid .product-item .cart-group .btn-cart:hover {
    background: rgb(0 145 202) !important;
    background-color: rgb(0 145 202) !important;
  }

  /* FINAL: +/- her koşulda gizli kalsın (tema override etmesin) */
  .product-grid .product-thumb .cart-group .stepper button.fa-angle-down,
  .product-grid .product-layout .cart-group .stepper button.fa-angle-down,
  .product-grid .product-item .cart-group .stepper button.fa-angle-down,
  .product-grid .product-thumb .cart-group .stepper button.fa-angle-up,
  .product-grid .product-layout .cart-group .stepper button.fa-angle-up,
  .product-grid .product-item .cart-group .stepper button.fa-angle-up {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }

  .product-grid .product-thumb .cart-group .btn-cart:before,
  .product-grid .product-layout .cart-group .btn-cart:before,
  .product-grid .product-item .cart-group .btn-cart:before {
    display: none !important;
  }

  .product-grid .product-thumb .cart-group .btn-cart span,
  .product-grid .product-layout .cart-group .btn-cart span,
  .product-grid .product-item .cart-group .btn-cart span {
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  /* Qty Picker (1-100) */
  .ei-qtypicker-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 99999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 10px;
  }

  html.ei-qtypicker-open,
  body.ei-qtypicker-open {
    overflow: hidden;
  }

  .ei-qtypicker-sheet {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0,0,0,.22);
  }

  .ei-qtypicker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    gap: 10px;
  }

  .ei-qtypicker-title {
    font-weight: 700;
    font-size: 15px;
    color: #222;
  }

  .ei-qtypicker-btn {
    appearance: none;
    border: 1px solid rgba(0,0,0,.12);
    background: #fff;
    color: #333;
    border-radius: 8px;
    padding: 6px 10px;
    font-weight: 700;
    font-size: 14px;
  }

  .ei-qtypicker-btn.ei-primary {
    background: #667eea;
    border-color: transparent;
    color: #fff;
  }

  .ei-qtypicker-body {
    padding: 12px;
  }

  /* iOS-like wheel */
  .ei-qtypicker-wheel {
    position: relative;
    width: 100%;
    height: 220px; /* 5 rows x 44px */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: y mandatory;
    touch-action: pan-y;
    overscroll-behavior: contain;
    padding: 88px 0; /* 2 rows above + 2 rows below */
    box-sizing: border-box;
    text-align: center;
  }

  .ei-qtypicker-wheel-item {
    height: 44px;
    line-height: 44px;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    opacity: .45;
    scroll-snap-align: center;
    user-select: none;
    -webkit-user-select: none;
  }

  .ei-qtypicker-wheel-item.ei-active {
    font-size: 28px;
    font-weight: 800;
    opacity: 1;
    position: relative;
    z-index: 3;
  }

  /* Cascade/specificity safety: aktif satır asla soluk kalmasın (özellikle 3 gibi durumlarda) */
  .ei-qtypicker-wheel .ei-qtypicker-wheel-item.ei-active {
    opacity: 1 !important;
    font-weight: 800 !important;
  }

  /* Subtle fade top/bottom like native pickers */
  .ei-qtypicker-wheel:before,
  .ei-qtypicker-wheel:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 66px;
    pointer-events: none;
    z-index: 2;
  }

  .ei-qtypicker-wheel:before {
    top: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
  }

  .ei-qtypicker-wheel:after {
    bottom: 0;
    background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
  }

  /* FINAL ULTRA FIX */
  .product-grid .product-thumb .button-group .cart-group,
  .product-grid .product-layout .button-group .cart-group,
  .product-grid .product-item .button-group .cart-group {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -webkit-flex-direction: row !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }

  /* Mobile list: product-extra-info badge kompakt */
  .product-list .product-thumb .product-extra-info,
  .product-list .product-layout .product-extra-info,
  .product-list .product-item .product-extra-info {
    gap: 5px !important;
    margin-top: 5px !important;
  }

  .product-list .product-thumb .product-extra-info .product-extra-info-badge,
  .product-list .product-layout .product-extra-info .product-extra-info-badge,
  .product-list .product-item .product-extra-info .product-extra-info-badge {
    padding: 4px 8px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    gap: 5px !important;
  }

  .product-list .product-thumb .product-extra-info .product-extra-info-badge .ei-ico,
  .product-list .product-thumb .product-extra-info .product-extra-info-badge .ei-icon,
  .product-list .product-layout .product-extra-info .product-extra-info-badge .ei-ico,
  .product-list .product-layout .product-extra-info .product-extra-info-badge .ei-icon,
  .product-list .product-item .product-extra-info .product-extra-info-badge .ei-ico,
  .product-list .product-item .product-extra-info .product-extra-info-badge .ei-icon {
    width: 16px !important;
    height: 16px !important;
    border-radius: 5px !important;
  }

  .product-list .product-thumb .product-extra-info .product-extra-info-message,
  .product-list .product-thumb .product-extra-info .product-extra-info-value,
  .product-list .product-layout .product-extra-info .product-extra-info-message,
  .product-list .product-layout .product-extra-info .product-extra-info-value,
  .product-list .product-item .product-extra-info .product-extra-info-message,
  .product-list .product-item .product-extra-info .product-extra-info-value {
    font-size: 13px !important;
    white-space: normal !important;
  }
}

/* Desktop grid: kampanyalı fiyatta sağ ikonlar alta düşmesin */
@media (min-width: 577px) {
  /* Desktop: hover aksiyonları alttaki ürüne BINMESİN (push-down).
     Aynı satırdaki diğer kartlar da stretch olup çerçeveyi uzatmasın. */

  /* Journal3 auto-grid default: `.product-layout { height: 100% }` + grid stretch
     => bir kart uzayınca aynı satırdaki diğer kartların çerçevesi de uzuyor.
     Bunu desktop'ta kapatıyoruz ki sadece hover edilen kart içerik kadar büyüsün. */
  .main-products.product-grid.auto-grid:not(.swiper-wrapper),
  .product-grid.auto-grid:not(.swiper-wrapper) {
    align-items: flex-start !important;
    align-content: flex-start !important;
  }

  .main-products.product-list.auto-grid:not(.swiper-wrapper),
  .product-list.auto-grid:not(.swiper-wrapper) {
    align-items: flex-start !important;
    align-content: flex-start !important;
  }

  .main-products.product-grid.auto-grid:not(.swiper-wrapper) > .product-layout,
  .product-grid.auto-grid:not(.swiper-wrapper) > .product-layout,
  .product-grid.auto-grid:not(.swiper-wrapper) > .product-item {
    height: auto !important;
    align-self: flex-start !important;
    margin-bottom: 45px !important;
  }

  .main-products.product-list.auto-grid:not(.swiper-wrapper) > .product-layout,
  .product-list.auto-grid:not(.swiper-wrapper) > .product-layout,
  .product-list.auto-grid:not(.swiper-wrapper) > .product-item {
    height: auto !important;
    align-self: flex-start !important;
    margin-bottom: 45px !important;
  }

  .product-grid.auto-grid:not(.swiper-wrapper) > .product-layout > .product-thumb,
  .product-grid.auto-grid:not(.swiper-wrapper) > .product-item > .product-thumb,
  .product-grid.auto-grid:not(.swiper-wrapper) .product-thumb {
    height: auto !important;
  }

  .product-list.auto-grid:not(.swiper-wrapper) > .product-layout > .product-thumb,
  .product-list.auto-grid:not(.swiper-wrapper) > .product-item > .product-thumb,
  .product-list.auto-grid:not(.swiper-wrapper) .product-thumb {
    height: auto !important;
  }

  /* Tüm sayfalarda (anasayfa ipr-grid, kategori auto-grid, arama auto-grid) satırlar
     arası boşluk 45px sabit olacak şekilde ayarlandı.
     - ipr-grid: üstteki margin kuralına margin-bottom: 45px eklendi (daha yüksek özgüllük)
     - auto-grid ve diğerleri: bu genel kural 45px verir
     - swiper tek satırlı yatay scroll olduğu için satır arası boşluk görsel olarak sorun yaratmaz */
  /* 55px: anasayfa ipr-grid için expand panel ile alt satır arasında yeterli boşluk.
     Kategori (#product-category) ve arama (#product-search) ID bazlı kurallarla 45px'de kalır. */
  .product-grid > .product-layout,
  .product-grid > .product-item {
    margin-bottom: 55px !important;
  }

  /* Satır yüksekliği büyüdüğünde diğer kartların çerçevesi de uzamasın.
     (Journal3 bazı yerlerde kart/thumbnail'e height:100% verir.) */
  .product-grid:not(.swiper-wrapper) > .product-layout,
  .product-grid:not(.swiper-wrapper) > .product-item,
  .product-list:not(.swiper-wrapper) > .product-layout,
  .product-list:not(.swiper-wrapper) > .product-item {
    height: auto !important;
    align-self: flex-start !important;
  }

  /* ipr-grid (anasayfa): Journal3 bu grid tipinde product-layout'a overflow:hidden uygular.
     Expand panel (position:absolute, top:100%) üst elementi aşıp görünebilmesi için
     layout ve container üzerinde overflow:visible zorunludur. */
  .product-grid.ipr-grid:not(.swiper-wrapper) {
    align-items: flex-start !important;
    align-content: flex-start !important;
    overflow: visible !important;
  }
  .product-grid.ipr-grid:not(.swiper-wrapper) > .product-layout {
    overflow: visible !important;
  }


  /* Journal3 varsayılanı: .product-layout .buttons-wrapper { margin-top: auto }
     Bu kural, eşit yüksekliğe çekilmiş kartlarda fiyat ile alt kenarlık
     arasında görünür boş bir kutu (beyaz alan) oluşturuyor — özellikle
     kategori ve arama sayfalarında gizli button-group'un wrapper'ı hâlâ
     margin-top:auto ile alta itildiğinde. Anasayfa ile tutarlı görünüm için
     bu boşluğu sıfırlıyoruz. */
  .product-grid .product-thumb .buttons-wrapper {
    margin-top: 0 !important;
  }

  .product-grid:not(.swiper-wrapper) > .product-layout > .product-thumb,
  .product-grid:not(.swiper-wrapper) > .product-item > .product-thumb,
  .product-list:not(.swiper-wrapper) > .product-layout > .product-thumb,
  .product-list:not(.swiper-wrapper) > .product-item > .product-thumb {
    height: auto !important;
  }

  .product-grid:not(.swiper-wrapper) .product-layout:hover .product-thumb,
  .product-grid:not(.swiper-wrapper) .product-item:hover .product-thumb,
  .product-grid:not(.swiper-wrapper) .product-thumb:hover,
  .product-list:not(.swiper-wrapper) .product-layout:hover .product-thumb,
  .product-list:not(.swiper-wrapper) .product-item:hover .product-thumb,
  .product-list:not(.swiper-wrapper) .product-thumb:hover {
    overflow: visible;
  }

  .module-products .product-grid .product-thumb .price > div,
  .module-products .product-grid .product-layout .price > div,
  .module-products .product-grid .product-item .price > div {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-flex-wrap: nowrap !important;
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
    -webkit-box-align: center !important;
    -webkit-align-items: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .module-products .product-grid .product-thumb .price > div > span.price-new,
  .module-products .product-grid .product-layout .price > div > span.price-new,
  .module-products .product-grid .product-item .price > div > span.price-new,
  .module-products .product-grid .product-thumb .price > div > span.price-normal,
  .module-products .product-grid .product-layout .price > div > span.price-normal,
  .module-products .product-grid .product-item .price > div > span.price-normal {
    -webkit-box-ordinal-group: 2 !important;
    -webkit-order: 1 !important;
    -ms-flex-order: 1 !important;
    order: 1 !important;
  }

  .module-products .product-grid .product-thumb .price > div > span,
  .module-products .product-grid .product-layout .price > div > span,
  .module-products .product-grid .product-item .price > div > span {
    -webkit-box-flex: 0 !important;
    -webkit-flex: 0 0 auto !important;
    -ms-flex: 0 0 auto !important;
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }

  .module-products .product-grid .product-thumb .price > div > span.price-old,
  .module-products .product-grid .product-layout .price > div > span.price-old,
  .module-products .product-grid .product-item .price > div > span.price-old {
    -webkit-box-ordinal-group: 3 !important;
    -webkit-order: 2 !important;
    -ms-flex-order: 2 !important;
    order: 2 !important;
    -webkit-box-flex: 0 !important;
    -webkit-flex: 0 1 auto !important;
    -ms-flex: 0 1 auto !important;
    flex: 0 1 auto !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .module-products .product-grid .product-thumb .price > div > span.oc-delivery-badges,
  .module-products .product-grid .product-thumb .price > div > span.oc-tip-frame,
  .module-products .product-grid .product-layout .price > div > span.oc-delivery-badges,
  .module-products .product-grid .product-layout .price > div > span.oc-tip-frame,
  .module-products .product-grid .product-item .price > div > span.oc-delivery-badges,
  .module-products .product-grid .product-item .price > div > span.oc-tip-frame {
    margin-left: auto !important;
    -webkit-box-ordinal-group: 100 !important;
    -webkit-order: 99 !important;
    -ms-flex-order: 99 !important;
    order: 99 !important;
    -webkit-box-flex: 0 !important;
    -webkit-flex: 0 0 auto !important;
    -ms-flex: 0 0 auto !important;
    flex: 0 0 auto !important;
    -webkit-flex-direction: row !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }

  .product-grid .product-thumb .price .price-new::before,
  .product-grid .product-layout .price .price-new::before,
  .product-grid .product-item .price .price-new::before,
  .product-grid .product-thumb .price .price-normal::before,
  .product-grid .product-layout .price .price-normal::before,
  .product-grid .product-item .price .price-normal::before {
    content: 'Fiyat: ';
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    line-height: inherit !important;
    margin-right: 4px;
  }

  .product-grid .product-layout:hover .price .price-new::before,
  .product-grid .product-thumb:hover .price .price-new::before,
  .oc-card-expand.oc-hovering .price .price-new::before,
  .oc-card-expand.oc-expanded .price .price-new::before,
  .product-grid .product-layout:hover .price .price-special::before,
  .product-grid .product-thumb:hover .price .price-special::before,
  .oc-card-expand.oc-hovering .price .price-special::before,
  .oc-card-expand.oc-expanded .price .price-special::before {
    content: none !important;
  }
}

/* ===== Extra Info strip v2: simple horizontal ribbon, no icons ===== */
.product-extra-info {
  margin-top: 8px;
}

.product-extra-info .product-extra-info-strip {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid #d7e4f7;
  background: #eef5ff;
  padding: 8px 10px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.product-extra-info .product-extra-info-message {
  display: block;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
  white-space: normal;
  overflow: visible;
  text-overflow: initial;
}

.product-extra-info .product-extra-info-message .ei-bold {
  display: inline !important;
  font-weight: 900 !important;
  font-size: calc(1em + 6px) !important;
  line-height: 1.1 !important;
  letter-spacing: 0.1px !important;
  color: inherit !important;
}

/* Hide old icon-based badge elements in the new strip layout */
.product-extra-info .product-extra-info-strip .ei-ico,
.product-extra-info .product-extra-info-strip i.fa {
  display: none !important;
}

/* Style map (1..5) */
.product-extra-info.product-extra-info--style-1 .product-extra-info-strip {
  background: #eaf4ff;
  border-color: #bdd9ff;
}
.product-extra-info.product-extra-info--style-1 .product-extra-info-message { color: #0f4c92; }

.product-extra-info.product-extra-info--style-2 .product-extra-info-strip {
  background: #d92d20;
  border-color: #d92d20;
}
.product-extra-info.product-extra-info--style-2 .product-extra-info-message { color: #ffffff; }

.product-extra-info.product-extra-info--style-3 .product-extra-info-strip {
  background: #eefcf1;
  border-color: #bcecc8;
}
.product-extra-info.product-extra-info--style-3 .product-extra-info-message { color: #1d6b2e; }

.product-extra-info.product-extra-info--style-4 .product-extra-info-strip {
  background: #fff7ea;
  border-color: #ffdca7;
}
.product-extra-info.product-extra-info--style-4 .product-extra-info-message { color: #8b5a00; }

.product-extra-info.product-extra-info--style-5 .product-extra-info-strip {
  background: #f3efff;
  border-color: #d6c8ff;
}
.product-extra-info.product-extra-info--style-5 .product-extra-info-message { color: #4f2b93; }

@media (max-width: 768px) {
  .product-extra-info {
    margin-top: 6px;
  }

  .product-extra-info .product-extra-info-strip {
    border-radius: 8px;
    padding: 6px 8px;
  }

  .product-extra-info .product-extra-info-message {
    font-size: 11px;
    line-height: 1.3;
  }
}

/* ===== Compatibility layer: old badge markup -> new strip look ===== */
.product-extra-info .product-extra-info-badge {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  border: 1px solid #d7e4f7 !important;
  background: #eef5ff !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: initial !important;
}

/* remove icon usage completely (requirement #1) */
.product-extra-info .product-extra-info-badge .ei-ico,
.product-extra-info .product-extra-info-badge i.fa {
  display: none !important;
}

/* style mapping for old class names */
.product-extra-info .product-extra-info-badge.ei-style1,
.product-extra-info .product-extra-info-badge.ei-blue.ei-style1 {
  background: #eaf4ff !important;
  border-color: #bdd9ff !important;
  color: #0f4c92 !important;
}

.product-extra-info .product-extra-info-badge.ei-style2,
.product-extra-info .product-extra-info-badge.ei-red.ei-style2 {
  background: #d92d20 !important;
  border-color: #d92d20 !important;
  color: #ffffff !important;
}

.product-extra-info .product-extra-info-badge.ei-style3,
.product-extra-info .product-extra-info-badge.ei-green.ei-style3 {
  background: #eefcf1 !important;
  border-color: #bcecc8 !important;
  color: #1d6b2e !important;
}

.product-extra-info .product-extra-info-badge.ei-style4 {
  background: #fff7ea !important;
  border-color: #ffdca7 !important;
  color: #8b5a00 !important;
}

.product-extra-info .product-extra-info-badge.ei-style5,
.product-extra-info .product-extra-info-badge.ei-blue.ei-style5 {
  background: #f3efff !important;
  border-color: #d6c8ff !important;
  color: #4f2b93 !important;
}

/* ensure message text wraps safely in both grid + list */
.product-extra-info .product-extra-info-badge .product-extra-info-message {
  display: block !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

@media (max-width: 768px) {
  .product-extra-info .product-extra-info-badge {
    border-radius: 8px !important;
    padding: 6px 8px !important;
  }

  .product-extra-info .product-extra-info-badge .product-extra-info-message {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
}

/* Desktop list view: match grid-like full strip width + centered content */
@media (min-width: 769px) {
  .product-grid .product-extra-info,
  .product-list .product-extra-info {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .product-grid .product-extra-info .product-extra-info-strip,
  .product-grid .product-extra-info .product-extra-info-badge,
  .product-list .product-extra-info .product-extra-info-strip,
  .product-list .product-extra-info .product-extra-info-badge {
    width: 100% !important;
    max-width: 100% !important;
  }

  .product-grid .product-extra-info .product-extra-info-message,
  .product-list .product-extra-info .product-extra-info-message {
    font-size: 13px !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }

  /* List-only tune: move text up 5px, keep same frame size */
  body .product-list:not(.product-grid) .product-extra-info .product-extra-info-strip,
  body .product-list:not(.product-grid) .product-extra-info .product-extra-info-badge {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body .product-list:not(.product-grid) .product-extra-info .product-extra-info-message {
    font-size: 18px !important;
    line-height: 1 !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Grid reset: never inherit list offset */
  .product-grid .product-extra-info .product-extra-info-message {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* Final lock: mobile grid extra-info as full-width flat strip above product */
@media (max-width: 768px) {
  body .product-grid .product-thumb .caption > .product-extra-info,
  body .product-grid .product-layout .caption > .product-extra-info,
  body .product-grid .product-item .caption > .product-extra-info {
    order: -999 !important;
    display: block !important;
    width: calc(100% + 16px) !important;
    max-width: calc(100% + 16px) !important;
    margin-left: -8px !important;
    margin-right: -8px !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
    align-self: stretch !important;
  }

  body .product-grid .product-thumb .caption > .product-extra-info .product-extra-info-strip,
  body .product-grid .product-thumb .caption > .product-extra-info .product-extra-info-badge,
  body .product-grid .product-layout .caption > .product-extra-info .product-extra-info-strip,
  body .product-grid .product-layout .caption > .product-extra-info .product-extra-info-badge,
  body .product-grid .product-item .caption > .product-extra-info .product-extra-info-strip,
  body .product-grid .product-item .caption > .product-extra-info .product-extra-info-badge {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  body .product-grid .product-thumb .caption > .product-extra-info .product-extra-info-message,
  body .product-grid .product-layout .caption > .product-extra-info .product-extra-info-message,
  body .product-grid .product-item .caption > .product-extra-info .product-extra-info-message {
    width: 100% !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* =====================================================================
   Kategori & Arama: satır aralığı — yüksek özgüllük
   Kategori: dar kalıcı boşluk (--oc-category-row-gap, product-card-expand.css)
   Arama: margin 0, gap grid'den
   ===================================================================== */

/* Kategori sayfası (#product-category) — satır aralığı 3x (sadece kategori, anasayfa etkilenmez) */
#product-category {
  --oc-category-row-gap: 96px;
}

#product-category .product-grid {
  row-gap: 0 !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
}
#product-category .product-grid > .product-layout,
#product-category .product-grid > .product-item {
  margin-bottom: var(--oc-category-row-gap, 32px) !important;
  align-self: flex-start !important;
  height: auto !important;
}

/* ipr-grid: boşluk gap ile (margin-bottom üst üste binmesin) */
#product-category .product-grid.ipr-grid:not(.swiper-wrapper) > .product-layout,
#product-category .product-grid.ipr-grid:not(.swiper-wrapper) > .product-item {
  margin-bottom: 0 !important;
}

#product-category .product-grid > .product-layout > .product-thumb,
#product-category .product-grid > .product-item > .product-thumb {
  height: auto !important;
}

/* Kategori ipr-grid (masaüstü): stretch kapat, hover panel taşabilsin */
@media (min-width: 577px) {
  #product-category .main-products.product-grid.ipr-grid:not(.swiper-wrapper),
  #product-category .product-grid.ipr-grid:not(.swiper-wrapper) {
    align-items: flex-start !important;
    align-content: flex-start !important;
    overflow: visible !important;
  }

  #product-category .main-products.product-grid.ipr-grid:not(.swiper-wrapper) > .product-layout,
  #product-category .product-grid.ipr-grid:not(.swiper-wrapper) > .product-layout {
    height: auto !important;
    align-self: flex-start !important;
    overflow: visible !important;
  }

  #product-category .main-products.product-grid.ipr-grid .product-thumb,
  #product-category .product-grid.ipr-grid .product-thumb {
    position: relative !important;
    height: auto !important;
  }
}

/* Arama sayfası:
   #product-search  → standart OpenCart wrapper (varsa)
   html.route-product-search → Journal3 <html> class'ı (her zaman var)
   row-gap override kaldırıldı → Journal3'ün column-gap = row-gap (eşit boşluk).
   margin-bottom: 0 — genel 55px kuralını eziyoruz; gap yönetimi grid'dedir. */
#product-search .product-grid,
html.route-product-search .product-grid {
  align-items: flex-start !important;
  align-content: flex-start !important;
}
#product-search .product-grid > .product-layout,
#product-search .product-grid > .product-item,
html.route-product-search .product-grid > .product-layout,
html.route-product-search .product-grid > .product-item {
  margin-bottom: 0 !important;
  align-self: flex-start !important;
  height: auto !important;
}
#product-search .product-grid > .product-layout > .product-thumb,
#product-search .product-grid > .product-item > .product-thumb,
html.route-product-search .product-grid > .product-layout > .product-thumb,
html.route-product-search .product-grid > .product-item > .product-thumb {
  height: auto !important;
}

/* Fırsat list (module-262): resim üstü kampanya etiketi — list strip genişletmesin */
.module-products-262 .product-list .product-thumb .image-group > .product-extra-info .product-extra-info-badge,
.module-products-262 .product-list .product-thumb .image-group > .product-extra-info .product-extra-info-strip {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

body .module-products-262 .product-list:not(.product-grid) .product-thumb .image-group > .product-extra-info .product-extra-info-message {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  font-size: inherit !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}