/* Kaynak: suudcollection.com PRODUCT #03 pw-reco-wrapper — brief/PRODUCT-03-pw-reco-wrapper.md §6 */

/* .pw-reco-wrapper (s726–s729): max-width:min(100%,100vw); padding 0 10px */
.cc_ois9tmeu_svqn0539EM .reco {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: min(100%, 100vw);
  padding-right: 10px;
  padding-left: 10px;
  font-family: var(--su-font);
  font-size: 12.8px;
}

/* .pw-slider-wrapper (s530) */
.cc_ois9tmeu_svqn0539EM .reco__inner {
  display: flex;
  flex-direction: column;
}

/* .pw-slider-title (s531): 14px/500, letter-spacing .8px, capitalize, mb 20, pl 20, pr 10 */
.cc_ois9tmeu_svqn0539EM .reco__title {
  min-width: auto;
  min-height: auto;
  margin-bottom: 20px;
  padding-right: 10px;
  padding-left: 20px;
  color: var(--su-text-dark); /* kalıtılan; ekran görüntüsünde koyu (Metin/2) */
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  letter-spacing: 0.8px;
  text-align: left;
  text-transform: capitalize;
}

/* .pw-slider-content.pw-grid-reco (s532): flex-wrap, gap 10 */
.cc_ois9tmeu_svqn0539EM .reco__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: auto;
  min-height: auto;
}

/* .pw-product-item (s533) — §9: width calc(20% - 10px); ≤768px calc(50% - 5px) */
.cc_ois9tmeu_svqn0539EM .reco__item {
  position: relative;
  flex-shrink: 0;
  width: calc(20% - 10px);
  min-width: auto;
  min-height: auto;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Öneri kartına özgü farklar — paylaşılan ProductCard'ın (.pc) üstüne yazılır.
   --------------------------------------------------------------------------- */
/* kart ızgara gap'ini kullanır; ProductCard'ın kategori margin'i (36/16) yok → 411 + 47 = 458 */
.cc_ois9tmeu_svqn0539EM .reco .pc {
  margin-bottom: 0;
}

/* görsel (s542): beyaz zemin. Kaynak object-fit:contain kullanır ama tüm görselleri 2:3'tür; mağazada 3:4
   görseller de olduğundan contain üstte/altta beyaz bant bırakıp satır hizasını bozuyordu → ProductCard'ın
   2:3 cover kuralı geçerli kalır (2:3 görselde sonuç kaynakla aynı). */
.cc_ois9tmeu_svqn0539EM .reco .pc__img {
  background-color: var(--su-bg);
}

/* çizgi göstergeleri (s473 / s474): siyah, pasif %10 saydam */
.cc_ois9tmeu_svqn0539EM .reco .pc__dot {
  background-color: var(--su-black);
  opacity: 0.1;
  transition: opacity 0.2s ease;
}
.cc_ois9tmeu_svqn0539EM .reco .pc__dot--on {
  opacity: 1;
}

/* favori (s569): top 11 / right 11 — ProductCard ile aynı; mobilde gizli (s477) */

/* kaynakta öneri kartında fiyat yok (ağaçta .productDetailRight bulunmaz); showPrice ile açılır */
.cc_ois9tmeu_svqn0539EM .reco .pc__right {
  display: none;
}
.cc_ois9tmeu_svqn0539EM .reco--price .pc__right {
  display: flex;
}

/* "+" hızlı ekle (s566 masaüstü / s565 tablet): 28×28, ad satırının sağ ucunda, her zaman görünür,
   beyaz daire, 20px/200 artı; (s563/s564 mobil-tablet): saydam zemin, 22px/300, bottom 20.
   Kaynakta buton .productItem (kart) köküne göre konumlanır: w1440 top 420 / kart 458 (bottom 10),
   w1024 top 295.188 / kart 333.2 (bottom 10), w768 top 552.5 / kart 600.5 (bottom 20),
   w360 top 250.5 / kart 298.5 (bottom 20). ProductCard butonu .pc__media (overflow:hidden) içinde
   render ettiğinden görselin alt kenarına göre ölçülür → kaynak bottom'u detay yüksekliğiyle
   (w1024/w1440 47, w768 47, w360 51) negatif bottom'a çevrilir; medyanın overflow'u açılır ki
   buton kesilmesin (.reco__item overflow:hidden kart içinde kaldığı için kesmez). */
.cc_ois9tmeu_svqn0539EM .reco .pc__media {
  overflow: visible;
}
.cc_ois9tmeu_svqn0539EM .reco .pc__add, .cc_ois9tmeu_svqn0539EM .reco .pc:hover .pc__add {
  top: auto;
  right: 0;
  bottom: -37px; /* 47 (detay) − 10 (kaynak bottom) → görselin 9px altında, ad satırı hizasında */
  z-index: 5;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--su-bg);
  color: var(--su-text-dark);
  font-size: 20px;
  font-weight: 200;
  line-height: 20px;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s;
}
.cc_ois9tmeu_svqn0539EM .reco .pc__add svg {
  width: 14px;
  height: 14px;
}
.cc_ois9tmeu_svqn0539EM .reco .pc__add:disabled {
  opacity: 0.5;
}
.cc_ois9tmeu_svqn0539EM .reco .pc__add--done, .cc_ois9tmeu_svqn0539EM .reco .pc:hover .pc__add--done, .cc_ois9tmeu_svqn0539EM .reco .pc__add--done:disabled {
  background-color: var(--su-text-dark);
  color: var(--su-bg);
  opacity: 1;
}

/* ad: w1024/w1440 11px/350/17 (s576) — ProductCard varsayılanıyla aynı; w360/w768 12px/17 (s575) */
.cc_ois9tmeu_svqn0539EM .reco .pc__name a {
  line-height: 17px;
}

/* ad satırı (s573 w1440): satır, space-between, gap 6, mb 6 */
.cc_ois9tmeu_svqn0539EM .reco .pc__top {
  gap: 6px;
  margin-bottom: 6px;
}
/* "+" (28px, sağ uçta, absolute) ad satırıyla aynı hizada: kaynakta uzun adlar butonun altına giriyor.
   Bilinçli düzeltme: buton varken ad satırı sağdan 28 + 6px boşaltılır → "…" artıdan önce biter. */
.cc_ois9tmeu_svqn0539EM .reco .pc--has-add .pc__top {
  padding-right: 34px;
}

/* --- tablet (w1024 / w768 ölçümü): ad satırı sütun (s496) */
@media (max-width: 1024px) {
  .cc_ois9tmeu_svqn0539EM .reco .pc__top {
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 6px;
  }
}

/* --- mobil (≤768: kaynağın gerçek eşiği) */
@media (max-width: 768px) {
  .cc_ois9tmeu_svqn0539EM .reco__item {
    width: calc(50% - 5px);
  }
  /* s575: 12px/350/17 */
  .cc_ois9tmeu_svqn0539EM .reco .pc__name a {
    font-size: 12px;
    line-height: 17px;
  }
  /* w768: s496 (sütun, gap 6, mb 6) — ProductCard'ın 767 mobil kuralını (gap 4 / mb 10) geri al */
  .cc_ois9tmeu_svqn0539EM .reco .pc__top {
    gap: 6px;
    margin-bottom: 6px;
  }
  /* favori: kaynakta w768'de görünür (s567), yalnız w360'ta gizli (s477) */
  .cc_ois9tmeu_svqn0539EM .reco .pc__fav {
    display: inline-flex;
  }
  /* s563/s564: saydam zemin, 22px/300, bottom 20 (karta göre) → 47 − 20 = −27 (görsele göre) */
  .cc_ois9tmeu_svqn0539EM .reco .pc__add, .cc_ois9tmeu_svqn0539EM .reco .pc:hover .pc__add {
    bottom: -27px;
    z-index: 8;
    background-color: transparent;
    font-size: 22px;
    font-weight: 300;
    line-height: 22px;
  }
  .cc_ois9tmeu_svqn0539EM .reco .pc__add--done, .cc_ois9tmeu_svqn0539EM .reco .pc:hover .pc__add--done {
    background-color: var(--su-text-dark);
  }
}

/* --- küçük mobil (w360 ölçümü; eşik proje notu: 480) */
@media (max-width: 480px) {
  /* s478: sütun, gap 4, mb 10 → 12 + 17 + 10 + 12 = 51 */
  .cc_ois9tmeu_svqn0539EM .reco .pc__top {
    gap: 4px;
    margin-bottom: 10px;
  }
  /* s477 */
  .cc_ois9tmeu_svqn0539EM .reco .pc__fav {
    display: none;
  }
  /* s563: bottom 20 (karta göre); detay 12 + 17 + 10 + 12 = 51 → 51 − 20 = −31 (görsele göre) */
  .cc_ois9tmeu_svqn0539EM .reco .pc__add, .cc_ois9tmeu_svqn0539EM .reco .pc:hover .pc__add {
    bottom: -31px;
  }
}