/**
 * Store kategori sahnesi (ana sayfa, banner sonrası). Tasarım kararı: docs/STORE-SCENE-DESIGN.md.
 *
 * - Zemin: banner’ın fildişi kavisinden başlayıp alta doğru sıcak taşa iner; alt kenar (CARILO-12): sığ asimetrik bordo bitiş + çok ince kırmızı eşlikçi çizgi, altında değer alanının fildişi eğrisi.
 * - Bölüm kimliği (CARILO-14): bölüm genişliğinde ALÇAK bordo başlık kuşağı (fildişi Cormorant + “Tüm Ürünler”), sağ alt bitişi logo ovalinden gelen kontrollü kavis + ince kırmızı eşlikçi; imza (CARILO-15) kuşağın İÇİNDE, Store’un hemen altında, Cormorant gerçek italic; imza ve altı kategori TEK ortak açık gül–fildişi yüzeyde, tek ızgaradan hizalı. Banner ile arada fildişi boşluk korunur.
 * - Kategori hücresi: büyük, kırpılmayan görsel (kategori başına optik ölçek) + hücreye göre değişen asimetrik organik destek yüzeyi.
 *   Çerçeve/pencere/isim levhası yok. Ad: Manrope 700; solda aynı küçük eğik kırmızı işaret (çok satırlı metnin dikey ortasında), sağda sakin ok.
 * - Hareket: tek ölçülü giriş (yalnız JS varken); fare/klavye odağında görsel hafif kalkar. Dokunmatikte hover’a bağlı bir şey yok.
 */

.carilo-store {
	--store-gap-x: clamp(1rem, 3vw, 2.75rem);
	--store-gap-y: clamp(1.5rem, 3.4vw, 3rem);
	position: relative;
	overflow: clip;
	background-color: var(--color-ivory); /* banner ile kuşak arasındaki açık boşluk sayfa zemininde kalır */
	padding-block: clamp(1.75rem, 4.2vw, 3.5rem) 0;
}

/* Ortak yüzey: imza + altı kategori tek açık gül–fildişi zeminde (griye dönmez; sayfa fildişisinden gözle ayrışır). */
.carilo-store__surface {
	background-image: linear-gradient(180deg, #f6e8e3 0%, #f3e3df 100%);
	padding-bottom: clamp(2.75rem, 6vw, 5.25rem);
}

/* Alt geçiş (CARILO-12): logo kavisinden türeyen sığ asimetrik bordo bitiş; üstüne fildişi eğri oturur, bordo yalnız ince bir hilal olarak kalır. */
.carilo-store::before,
.carilo-store::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	pointer-events: none;
}

.carilo-store::before {
	height: clamp(20px, 3vw, 40px);
	background-image: linear-gradient(90deg, var(--color-wine-900) 0%, var(--color-wine-800) 55%, var(--color-wine-700) 100%);
	clip-path: ellipse(64% 100% at 30% 100%);
}

.carilo-store::after {
	height: clamp(16px, 2.4vw, 31px);
	background-color: var(--color-ivory);
	clip-path: ellipse(63% 100% at 36% 100%);
}

/* çok ince kırmızı eşlikçi: bordo hilalin üzerinde, uçlara doğru kaybolan kısa yay */
.carilo-store__edge {
	position: absolute;
	right: clamp(6%, 11vw, 15%);
	bottom: clamp(16px, 2.4vw, 31px);
	width: clamp(120px, 26vw, 340px);
	height: 8px;
	border-top: 1.5px solid var(--color-accent);
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 60%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 60%, transparent 100%);
	pointer-events: none;
}

.carilo-store__inner {
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 3.2vw, 2.75rem);
}

/* ---------- Başlık kuşağı (CARILO-14): bölüm genişliğinde alçak bordo başlangıç yüzeyi ---------- */
.carilo-store__head {
	--band-h: 3.25rem;
	--band-rx: clamp(48px, 8.5vw, 130px);
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--band-h);
	background-image: linear-gradient(100deg, var(--color-wine-900) 0%, var(--color-wine-800) 58%, #85293f 100%);
	/* sağ alt bitiş: logo ovalinden gelen kontrollü kavis */
	border-radius: 0 0 var(--band-rx) 0 / 0 0 50% 0;
	box-shadow: 0 12px 20px -18px rgba(63, 16, 32, 0.5);
}

@media (min-width: 700px) { .carilo-store__head { --band-h: 3.75rem; } }
@media (min-width: 1100px) { .carilo-store__head { --band-h: 4.25rem; } }

/* kavisi izleyen ince logo kırmızısı: aynı eğrinin hemen altında, soldan sönerek başlar */
.carilo-store__head::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -5px;
	width: calc(var(--band-rx) + 28px);
	height: 100%;
	border-bottom: 1.5px solid var(--color-accent);
	border-radius: 0 0 var(--band-rx) 0 / 0 0 50% 0;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
	pointer-events: none;
}

.carilo-store__bandin {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(0.75rem, 3vw, 2.5rem);
	padding-block: clamp(0.55rem, 1.1vw, 0.9rem);
}

.carilo-store__plate {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.carilo-store__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.875rem, 1.3rem + 1.5vw, 2.5rem);
	line-height: 1;
	letter-spacing: -0.005em;
	color: var(--color-ivory);
	overflow-wrap: normal;
}

/* Kuşağın içindeki imza: başlığın hemen altında, daha hafif; Cormorant Garamond gerçek italic (500), sıcak fildişi. Çince için italik yok. */
.carilo-store__inner { padding-top: clamp(1.5rem, 3.2vw, 2.75rem); }

.carilo-store__sig {
	margin: 0;
	max-width: 36rem;
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
	font-synthesis: none;
	font-size: clamp(1.1875rem, 0.95rem + 0.75vw, 1.5rem);
	line-height: 1.2;
	letter-spacing: 0.005em;
	color: rgba(247, 243, 237, 0.88);
	overflow-wrap: normal;
	text-wrap: balance;
}

.carilo-store__sig:lang(zh) { font-style: normal; font-family: var(--font-zh-serif, var(--font-display)); }

.carilo-store__all {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 40px;
	padding: 0 1.15rem;
	border-radius: var(--radius-pill);
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 1.1;
	color: var(--color-ivory);
	text-decoration: none;
	white-space: nowrap;
	box-shadow: inset 0 0 0 1.5px rgba(247, 243, 237, 0.75);
	transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.carilo-store__all svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform var(--duration-fast) var(--ease-standard);
}

.carilo-store__all:hover { background-color: var(--color-ivory); color: var(--color-wine-800); }
.carilo-store__all:hover svg { transform: translateX(3px); }
.carilo-store__all:focus-visible { outline: 3px solid var(--color-ivory); outline-offset: 3px; }
.carilo-store__tile:focus-visible {
	outline: 3px solid var(--color-focus-on-light);
	outline-offset: 4px;
}

/* ---------- Kategori ızgarası: masaüstü 3, mobil 2, çok dar tek sütun ---------- */
.carilo-store__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--store-gap-x);
	row-gap: var(--store-gap-y);
}

@media (min-width: 700px) {
	.carilo-store__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 340px) {
	.carilo-store__grid { grid-template-columns: minmax(0, 1fr); }
}

.carilo-store__item { min-width: 0; }

.carilo-store__tile {
	display: flex;
	flex-direction: column;
	gap: clamp(0.7rem, 1.4vw, 1.1rem);
	color: var(--color-ink);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

/* Sahne: kare alan; görsel altta ortalı ve kırpılmaz; destek yüzeyi görselin arkasında, alt yarıda. */
.carilo-store__stage {
	position: relative;
	display: block;
	aspect-ratio: 1 / 0.9;
	width: 100%;
}

.carilo-store__base {
	position: absolute;
	left: 6%;
	right: 4%;
	bottom: 3%;
	height: 46%;
	/* asimetrik organik yüzey; biçim hücreye göre değişir (nth-child). Renk ailesi ORTAK: #7A243A’dan türeyen gül/bordo; aynı ışık yönü ve duraklar. */
	border-radius: 62% 38% 55% 45% / 58% 46% 54% 42%;
	background-image: linear-gradient(155deg, #f3e3dc 0%, #e4bcc2 36%, #c98a98 72%, #b06178 100%);
}

.carilo-store__item:nth-child(6n + 1) .carilo-store__base { border-radius: 62% 38% 55% 45% / 58% 46% 54% 42%; left: 4%; right: 8%; }
.carilo-store__item:nth-child(6n + 2) .carilo-store__base { border-radius: 40% 60% 42% 58% / 50% 42% 58% 50%; left: 9%; right: 3%; bottom: 5%; height: 42%; }
.carilo-store__item:nth-child(6n + 3) .carilo-store__base { border-radius: 55% 45% 62% 38% / 44% 56% 44% 56%; left: 3%; right: 6%; height: 48%; }
.carilo-store__item:nth-child(6n + 4) .carilo-store__base { border-radius: 46% 54% 38% 62% / 56% 40% 60% 44%; left: 8%; right: 5%; bottom: 4%; }
.carilo-store__item:nth-child(6n + 5) .carilo-store__base { border-radius: 60% 40% 48% 52% / 42% 58% 42% 58%; left: 5%; right: 9%; height: 44%; }
.carilo-store__item:nth-child(6n + 6) .carilo-store__base { border-radius: 38% 62% 54% 46% / 60% 44% 56% 40%; left: 10%; right: 4%; bottom: 5%; }

.carilo-store__img {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	/* optik ölçek: kategori başına yönetimden (60–140 %); kırpılmaz, esnetilmez */
	transform: translate3d(0, var(--lift, 0px), 0) scale(var(--cat-scale, 1));
	transform-origin: 50% 88%;
	transition: transform 0.38s var(--ease-standard, ease);
	user-select: none;
	filter: drop-shadow(0 10px 14px rgba(63, 16, 32, 0.13));
}

@media (hover: hover) and (pointer: fine) {
	.carilo-store__tile:hover { --lift: -7px; }
}

.carilo-store__tile:focus-visible { --lift: -7px; }

/* ---------- Ad satırı ---------- */
.carilo-store__name {
	display: flex;
	align-items: center; /* işaret, çok satırlı ad bloğunun dikey ortasında */
	gap: 0.7rem;
	min-width: 0;
}

.carilo-store__mark {
	flex: 0 0 auto;
	width: 7px;
	height: 1.7em;
	background-color: var(--color-accent);
	/* küçük, asimetrik (eğik) işaret; hepsinde aynı */
	clip-path: polygon(0 12%, 100% 0, 100% 88%, 0 100%);
	font-size: clamp(1rem, 1.5vw, 1.2rem);
}

.carilo-store__label {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: clamp(1rem, 1.5vw, 1.2rem);
	line-height: 1.25;
	color: var(--color-ink);
	/* sözcükler ortadan kırılmaz (uzun RU/AZ adlar satır sonunda alta iner) */
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
	text-wrap: balance;
}

.carilo-store__arrow {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: var(--color-muted);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform var(--duration-fast) var(--ease-standard), stroke var(--duration-fast) var(--ease-standard);
}

.carilo-store__tile:hover .carilo-store__arrow,
.carilo-store__tile:focus-visible .carilo-store__arrow { transform: translateX(3px); stroke: var(--color-ink); }

/* ---------- Mobil: başlık + düğme aynı satır, imza altında; dar/uzun metinde doğal sarar; dikey alan büyümez ---------- */
@media (max-width: 699px) {
	.carilo-store__head { --band-rx: 56px; }
	.carilo-store__bandin { gap: 0.5rem; padding-block: 0.5rem; }
	.carilo-store__title { font-size: clamp(1.75rem, 7.6vw, 2rem); }
	.carilo-store__sig { font-size: 1.1875rem; }
	.carilo-store__all { min-height: 38px; padding: 0 0.8rem; font-size: 0.8125rem; gap: 0.35rem; }
	.carilo-store::before { height: 15px; }
	.carilo-store::after { height: 12px; }
	.carilo-store__edge { bottom: 12px; height: 5px; width: 40%; right: 8%; }
	.carilo-store__tile { gap: 0.55rem; }
	.carilo-store__name { gap: 0.5rem; }
	.carilo-store__arrow { width: 17px; height: 17px; }
	.carilo-store__label { font-size: 0.9375rem; }
	.carilo-store__mark { width: 6px; font-size: 0.9375rem; }
}

/* Çok dar ekran: düğme başlığın altına inebilir (doğal sarılma). */
@media (max-width: 359px) {
	.carilo-store__bandin { flex-wrap: wrap; row-gap: 0.4rem; padding-block: 0.5rem; }
}

/* ---------- Ölçülü giriş (yalnız JS varken hazırlanır; içerik JS kapalıyken eksiksiz görünür) ---------- */
.carilo-store.is-armed .carilo-store__item {
	opacity: 0;
	transform: translate3d(0, 14px, 0);
	transition: opacity 0.5s var(--ease-standard, ease), transform 0.5s var(--ease-standard, ease);
	transition-delay: calc(var(--i, 0) * 60ms);
}

.carilo-store.is-armed.is-in .carilo-store__item {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.carilo-store.is-armed .carilo-store__item { opacity: 1; transform: none; transition: none; }
	.carilo-store__img,
	.carilo-store__arrow,
	.carilo-store__all,
	.carilo-store__all svg { transition: none; }
	.carilo-store__tile:hover,
	.carilo-store__tile:focus-visible { --lift: 0px; }
}