/**
 * Sutore Product Page — öneri şeritleri (3 kompartman).
 * Kart dili: görsel + marka (bold) + model (tek satır) + fiyat — anasayfa
 * kalıbının sutore ölçeği. Flickity YOK: native scroll-snap yatay ray.
 */

.sutore-product-recommendations {
	flex: 0 0 100%;
	/* column+wrap flex'te cross-size auto kalırsa item içerik max-content'ine şişiyor
	   (track'in overflow'u intrinsic'i sınırlamaz) — genişlik AÇIKÇA sabitlenir */
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.sutore-pp-reco-wrap,
.sutore-pp-reco {
	max-width: 100%;
	min-width: 0;
}

.sutore-pp-reco {
	margin-top: 44px;
}

/* Detay bölümü → ilk şerit: 30 gap + 14 = 44 (iki büyük geçiş de 44) */
.sutore-pp-reco:first-child {
	margin-top: 14px;
}

.sutore-pp-reco__title,
h2.sutore-pp-reco__title {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: 400 !important; /* tema h2 700'e eziyor */
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #222;
}

/* Ray: kaydırılabilir, çubuk görünmez, kartlar snap'li */
.sutore-pp-reco__track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	overflow-y: hidden;
	/* proximity (mandatory değil): mandatory snap, çapraz jestte snap noktasına
	   sürekli çekip TİTRETİYORDU ve dikey kaydırmayı kilitliyordu. proximity
	   yakınken nazikçe oturur, jesti boğmaz. Asıl navigasyon: ok butonları
	   (desktop) — trackpad'e mahkûm kalınmaz. */
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	touch-action: pan-x pan-y; /* yatay jest rayı kaydırır, dikey jest sayfaya düşer */
}

.sutore-pp-reco__track::-webkit-scrollbar {
	display: none;
}

/* Kök artık <div> (link + kalp ayrı katmanlar); kalp için konum bağlamı */
.sutore-pp-reco-card {
	position: relative;
	flex: 0 0 42%;
	min-width: 0;
	scroll-snap-align: start;
	display: block;
	color: #222;
}

.sutore-pp-reco-card__link,
.sutore-pp-reco-card__link:hover,
.sutore-pp-reco-card__link:visited {
	display: block;
	color: #222;
	text-decoration: none;
}

.sutore-pp-reco-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 4;
	margin-bottom: 10px;
	background: #f7f7f7;
	overflow: hidden;
	/* isolation+contain: mix-blend(multiply) + kesirli aspect-ratio yüksekliği,
	   "+"→"✓" repaint'inde alttaki yazıyı sub-pixel 1px oynatıyordu.
	   Yeni stacking context + paint containment → blend yerelde çözülür, repaint
	   medyada kalır, kart-geneli yeniden-yuvarlama olmaz. */
	isolation: isolate;
	contain: paint;
}

.sutore-pp-reco-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply; /* beyaz fonlu ürün fotoğrafları gri sahneye otursun */
}

/* --- Optik normalizasyon (has-fill) -----------------------------------------
   Katalog iki fazlı, ürünün kanvası doldurma oranı görselden görsele değişiyor
   (yeni ayakkabı 0.37, eski 0.79 gibi). Sunucu ölçümü --su-fill/--su-dip verir:
   ölçek = hedef / doluluk (taban-orijinli), dip kadar aşağı itilir. Sonuç: aynı
   kategori aynı boy + tabanlar aynı çizgide. Ölçümsüz görsel eski davranışta. */
.sutore-pp-reco-card__media.has-fill {
	align-items: flex-end;
	padding-bottom: 9%;
}

.sutore-pp-reco-card__media.has-fill img {
	height: auto; /* kanvas oranı korunur; yüzde-transform'lar gerçek kanvasa göre işler */
	transform-origin: 50% 100%;
	/* Ölçek sunucuda hesaplanır (optik kütle: sqrt(hedef alan / ölçülen alan) + korumalar) */
	transform: translateY(calc(var(--su-dip, 0) * 100%)) scale(var(--su-olcek, 1));
}

.sutore-pp-reco-card__brand {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* İsimlerin yalnız ilk satırı görünür */
.sutore-pp-reco-card__name {
	display: block;
	font-size: 13.6px;
	font-weight: 400;
	line-height: 1.45;
	color: #222;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sutore-pp-reco-card__price {
	display: block;
	margin-top: 8px;
	font-size: 14px;
}

/* Fiyat kalın DEĞİL: buybox + kart + mobil hepsi aynı sakin ağırlık.
   Tema .woocommerce-Price-amount'u 700'e ezdiği için rakamın KENDİSİNİ
   de hedefle (yalnız container yetmez). */
.sutore-pp-reco-card__price,
.sutore-pp-reco-card__price .woocommerce-Price-amount,
.sutore-pp-reco-card__price bdi {
	font-weight: 400;
}

.sutore-pp-reco-card__price .sutore-pp-reco-card__from {
	font-weight: 400;
}

/* Fiyattaki WC ins/del artıkları sakinleşsin (indirimli üründe) */
.sutore-pp-reco-card__price del {
	color: #999;
	font-weight: 400;
	margin-right: 6px;
}

.sutore-pp-reco-card__price ins {
	text-decoration: none;
}

/* --- Son Görüntülenenler: kart köşesinde wishlist kalbi --------------------
   Buybox kalbiyle aynı dil (stroke #111 1px; favoride #222 dolu — wishlist.css
   [aria-pressed=true] kuralı). Base .wishlist-btn zaten absolute; kart köşesine
   burada oturur: 40x40 dokunma alanı, ikon görsel kenarından 10px içeride. */
.sutore-pp-reco-card .sutore-pp-reco-card__wish.wishlist-btn {
	top: 0;
	right: 0;
	z-index: 2;
	margin: 0;
	padding: 10px;
	line-height: 0;
}

.sutore-pp-reco-card .sutore-pp-reco-card__wish.wishlist-btn .sutore-wishlist-heart-svg {
	display: block;
	width: 20px;
	height: 20px;
}

.sutore-pp-reco-card .sutore-pp-reco-card__wish.wishlist-btn svg.sutore-wishlist-heart-svg path {
	stroke: #111;
	stroke-width: 1px;
}

/* --- Lazy segmentler: hayalet sahne + zarif geliş ---------------------------
   İskelet gerçek kartın sınıflarını/geometrisini paylaşır: gri sahne (3:4) swap
   anında yerinde kalır, fotoğraf/metin sahnenin İÇİNE belirir → CLS 0, blink 0.
   Shimmer bilerek YOK — #f7f7f7 sahne placeholder dilinin kendisi. */

.sutore-pp-reco.is-pending .sutore-pp-reco__track {
	overflow: hidden; /* içerik yokken hayalet ray kaydırılmaz */
}

.sutore-pp-reco-ghost-bar {
	display: inline-block;
	height: 10px;
	background: #ececec;
	border-radius: 2px;
	vertical-align: middle;
}

/* Hayalet nefesi — hafif hareket hissi ama KAYMASIZ: boyut/konum asla değişmez,
   yalnız opaklık soluklanır. Kartlar arası faz farkı mekanik senkronu kırar.
   reduced-motion'da tamamen durur. */
@keyframes sutore-pp-nefes {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

.sutore-pp-reco-card.is-ghost .sutore-pp-reco-ghost-bar {
	animation: sutore-pp-nefes 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.sutore-pp-reco-card.is-ghost .sutore-pp-reco-card__media {
	animation: sutore-pp-nefes 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
	animation-delay: 150ms;
	opacity: 1;
}

.sutore-pp-reco-card.is-ghost:nth-child(2n) .sutore-pp-reco-ghost-bar,
.sutore-pp-reco-card.is-ghost:nth-child(2n) .sutore-pp-reco-card__media {
	animation-delay: 450ms;
}

.sutore-pp-reco-card.is-ghost:nth-child(3n) .sutore-pp-reco-ghost-bar,
.sutore-pp-reco-card.is-ghost:nth-child(3n) .sutore-pp-reco-card__media {
	animation-delay: 750ms;
}

@media (prefers-reduced-motion: reduce) {
	.sutore-pp-reco-card.is-ghost .sutore-pp-reco-ghost-bar,
	.sutore-pp-reco-card.is-ghost .sutore-pp-reco-card__media {
		animation: none;
	}
}

/* İçerik hiç gelmezse (boş RVP, ağ hatası) iskelet sessizce çözülür; prefetch
   viewport'a girmeden çok önce koştuğu için bu yol pratikte görünmez */
.sutore-pp-reco.is-void {
	opacity: 0;
	transition: opacity 200ms ease;
}

/* Geliş: yalnız .is-live (lazy gelen) şeritlerde — SSR şerit ASLA gizlenmez
   (JS'e emanet SSR içerik olmaz). Medyanın gri kutusu animasyona GİRMEZ: sahne
   sabittir; fotoğraf sakin bir fade, metin + kalp 6px'lik rise+fade ile gelir,
   kart başına 45ms kademe (--reco-d, JS kurar). */
.sutore-pp-reco.is-live .sutore-pp-reco-card__media img {
	opacity: 0;
	transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
	transition-delay: var(--reco-d, 0ms);
}

.sutore-pp-reco.is-live .sutore-pp-reco-card__brand,
.sutore-pp-reco.is-live .sutore-pp-reco-card__name,
.sutore-pp-reco.is-live .sutore-pp-reco-card__price,
.sutore-pp-reco.is-live .sutore-pp-reco-card .wishlist-btn {
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
	transition-delay: var(--reco-d, 0ms);
}

.sutore-pp-reco.is-live .sutore-pp-reco-card.is-in .sutore-pp-reco-card__media img.is-loaded {
	opacity: 1;
}

.sutore-pp-reco.is-live .sutore-pp-reco-card.is-in .sutore-pp-reco-card__brand,
.sutore-pp-reco.is-live .sutore-pp-reco-card.is-in .sutore-pp-reco-card__name,
.sutore-pp-reco.is-live .sutore-pp-reco-card.is-in .sutore-pp-reco-card__price,
.sutore-pp-reco.is-live .sutore-pp-reco-card.is-in .wishlist-btn {
	opacity: 1;
	transform: none;
}

/* Reveal'in dinlenme hâli (transform:none, özgüllük 0,5,0) genel kalp hover'ını
   (.wishlist-btn:hover scale, 0,3,0) EZİYORDU → lazy şeritlerde (Son Görüntülenenler,
   related) kalpte hover ölüydü, SSR ilk şeritte (Benzer) çalışıyordu. Eşleşen
   özgüllükte hover kuralı scale'i geri verir = tüm şeritlerde tutarlı. */
.sutore-pp-reco.is-live .sutore-pp-reco-card.is-in .wishlist-btn:hover {
	transform: scale(1.08);
}

/* Hareket istemeyen kullanıcı / IntersectionObserver'sız tarayıcı: anında son hal */
@media (prefers-reduced-motion: reduce) {
	.sutore-pp-reco.is-live .sutore-pp-reco-card__media img,
	.sutore-pp-reco.is-live .sutore-pp-reco-card__brand,
	.sutore-pp-reco.is-live .sutore-pp-reco-card__name,
	.sutore-pp-reco.is-live .sutore-pp-reco-card__price,
	.sutore-pp-reco.is-live .sutore-pp-reco-card .wishlist-btn {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

.sutore-pp-reco-wrap.no-anim .sutore-pp-reco.is-live .sutore-pp-reco-card__media img,
.sutore-pp-reco-wrap.no-anim .sutore-pp-reco.is-live .sutore-pp-reco-card__brand,
.sutore-pp-reco-wrap.no-anim .sutore-pp-reco.is-live .sutore-pp-reco-card__name,
.sutore-pp-reco-wrap.no-anim .sutore-pp-reco.is-live .sutore-pp-reco-card__price,
.sutore-pp-reco-wrap.no-anim .sutore-pp-reco.is-live .sutore-pp-reco-card .wishlist-btn {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

/* Marka banner'ı — bölümler arası editoryal nefes. Görsel DİKEY (model ayakta):
   geniş letterbox modeli anlamsız bir banda kırpıyordu. Çözüm: ORTALANMIŞ portre
   bloğu (mobildeki gibi tüm modeli gösterir), yanlarda nefes → editoryal
   duraklama, dev değil. */
.sutore-pp-reco-banner {
	position: relative;
	display: block;
	width: 100%;
	/* %50: ortalanmış portre blok — dev editoryal duraklama, yanlarda nefes. */
	max-width: 50%;
	margin: 60px auto 0;
	overflow: hidden;
	text-decoration: none;
}

.sutore-pp-reco-banner__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 42%;
}

.sutore-pp-reco-banner__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 55%);
}

.sutore-pp-reco-banner__text {
	position: absolute;
	left: 20px;
	bottom: 16px;
	color: #fff;
}

.sutore-pp-reco-banner__name {
	display: block;
	margin-bottom: 4px;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.3;
}

.sutore-pp-reco-banner__cta {
	display: inline-block;
	font-size: 14px;
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==== Reco ok butonları (desktop) — tıkla-gez native ray'i tamamlar ==== */
.sutore-pp-reco {
	position: relative;
}

/* Anasayfa carousel butonuyla TUTARLI (sfe-swiper-button: 44px daire, yumuşak
   gölge, hover scale 1.08) + kartın DIŞINDA (gutter'da). */
.sutore-pp-reco__arrow {
	position: absolute;
	top: var(--reco-arrow-top, 38%);
	transform: translateY(-50%);
	z-index: 3;
	display: none; /* JS overflow + desktop'ta gösterir */
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
	color: #222;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sutore-pp-reco__arrow:hover {
	transform: translateY(-50%) scale(1.08);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.sutore-pp-reco__arrow svg {
	width: 13px;
	height: 13px;
}

/* Kartın dışına: 65px gutter'a taşar (44 buton + 10 boşluk). İkisi de `left`
   ile konumlanır — `right` bu düzende section sağ kenarını 16px içeride sanıyor
   (section overflow:visible + ok taşması scrollWidth'i şişiriyor), `left` ise
   şaşmaz. calc(%100+10) sağ oku, -54 sol oku SİMETRİK 10px gutter'a koyar. */
.sutore-pp-reco__arrow--prev {
	left: -54px;
}

.sutore-pp-reco__arrow--next {
	left: calc(100% + 10px);
}

/* JS: overflow varsa ve desktop'ta göster (uçlarda ilgili yön gizlenir) */
.sutore-pp-reco.has-arrows .sutore-pp-reco__arrow:not([hidden]) {
	display: flex;
}

/* Mobil: ray gutter'dan gutter'a taşar (kenardan kenara kaydırma hissi) */
@media screen and (max-width: 768px) {
	.sutore-product-recommendations {
		padding: 0 20px;
	}

	.sutore-pp-reco__track {
		margin: 0 -20px;
		padding: 0 20px;
		/* mandatory snap ilk kartı scrollport soluna çeker, padding'i yutar —
		   snapport'u gutter kadar içeri al */
		scroll-padding: 0 20px;
	}

	/* Mobilde wrapper gap 16'ya indi (fold bütçesi) — renk→şerit 44 dengesi korunur */
	.sutore-pp-reco:first-child {
		margin-top: 28px;
	}

	/* Banner mobilde kenardan kenara (galeri gibi tam-genişlik editoryal). Portre
	   blok mobilde gutter'dan gutter'a; masaüstündeki ortalama/max-width burada
	   nötrlenir. Alt-ağırlıklı odak: ürün (ayakkabı) görünsün. */
	.sutore-pp-reco-banner {
		max-width: none;
		width: calc(100% + 40px);
		margin: 44px -20px 0;
	}

	.sutore-pp-reco-banner__img {
		object-position: 50% 60%;
	}

	/* Mobilde ok butonu yok (dokunmatik yatay kaydırma doğal) */
	.sutore-pp-reco__arrow {
		display: none !important;
	}
}

/* Desktop: sabit kart genişliği. ~255px + 16 gap → ~5 kart/tam genişlik,
   editoryal ölçek. */
@media screen and (min-width: 769px) {
	.sutore-pp-reco-card {
		flex: 0 0 255px;
	}

	/* Şeritler arası büyük geçiş: biri ekrandayken diğerinin yalnız başlığı
	   görünsün. Mobil 44; masaüstü orantılı 60. */
	.sutore-pp-reco {
		margin-top: 60px;
	}
}

/* ==== Sepet bağlamı (.sutore-sr-reco): SR'nin cart şeritleri PP raf dilinde ====
   SR her şeridi kendi sarmalayıcısında basar. O yüzden her şerit kendi kutusunda
   :first-child olur ve PDP'nin 14px ilk-şerit kuralı burada yanlış düşerdi.
   Ritim burada kurulur: sepet tablosu ile ilk şerit ve şeritler arası aynı büyük
   geçiş (mobil 44, masaüstü 60). Kurallar dosya SONUNDA: eşit özgüllükte
   (0-2-0) son yazılan kazanır, :first-child 14px'i deterministik ezer. */
.sutore-sr-reco .sutore-pp-reco,
.sutore-sr-reco .sutore-pp-reco:first-child {
	margin-top: 44px;
}

@media screen and (min-width: 769px) {
	.sutore-sr-reco .sutore-pp-reco,
	.sutore-sr-reco .sutore-pp-reco:first-child {
		margin-top: 60px;
	}
}

@media screen and (max-width: 768px) {
	/* Sepette mobil konteyner padding'i 0 (child theme .cart-container kuralı).
	   PDP'deki 20px gutter burada sarmalayıcıdan verilir: track'in -20px taşması
	   ekran kenarına oturur, kenardan kenara kaydırma hissi PDP ile bire bir. */
	.sutore-sr-reco {
		padding: 0 20px;
	}
}