/* ÇiçekEvi özel Elementor widget stilleri */

.ce-widget-empty {
	border: 2px dashed var(--ce-border, #e5e5e5);
	border-radius: 8px;
	padding: 24px;
	text-align: center;
	color: #757575;
	font-size: 14px;
}

/* ---------- Kampanya Slider ---------- */
.ce-slider {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	--ce-slider-height: 380px;
}

.ce-slider__track {
	display: flex;
	transition: transform 0.45s ease;
	height: var(--ce-slider-height);
}

.ce-slider__slide {
	flex: 0 0 100%;
	min-width: 100%;
	position: relative;
	display: block;
	line-height: 0;
}

.ce-slider__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ce-slider__caption {
	position: absolute;
	left: 6%;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	line-height: 1.3;
	max-width: 46%;
}

.ce-slider__caption strong {
	font-size: 32px;
	font-weight: 800;
	color: #fff;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.ce-slider__subtitle {
	font-size: 16px;
	color: #fff;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.ce-slider__btn {
	font-size: 14px;
	padding: 10px 22px;
}

.ce-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: #2d2d2d;
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	transition: background 0.15s;
	z-index: 2;
}

.ce-slider__arrow:hover {
	background: #fff;
	color: var(--ce-green, #12a150);
}

.ce-slider__arrow--prev { left: 14px; }
.ce-slider__arrow--next { right: 14px; }

.ce-slider__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	display: flex;
	justify-content: center;
	gap: 7px;
	z-index: 2;
}

.ce-slider__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	background: rgba(255, 255, 255, 0.55);
	transition: background 0.15s, width 0.15s;
}

.ce-slider__dot.is-active {
	background: #fff;
	width: 22px;
	border-radius: 5px;
}

/* ---------- Kategori Kısayolları (yatay kaydırmalı) ---------- */
/* Oklar kaydırma alanının DIŞINDA, kendi boşluklarında durur (flex akışında). */
.ce-catgrid {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.ce-catgrid__track {
	flex: 1;
	min-width: 0;
	display: flex;
	gap: 12px;
	justify-content: flex-start;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	padding: 6px 6px 8px;
	scrollbar-width: none;
	cursor: grab;
}

.ce-catgrid__track.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	/* Sürükleme sırasında snap devre dışı; bırakınca JS en yakın daireye oturtur. */
	scroll-snap-type: none;
	user-select: none;
}

.ce-catgrid__track::-webkit-scrollbar {
	display: none;
}

.ce-catgrid__item {
	flex: 0 0 112px;
	width: 112px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	text-align: center;
	scroll-snap-align: start;
}

.ce-catgrid__item img {
	-webkit-user-drag: none;
	user-select: none;
}

.ce-catgrid__arrow {
	flex-shrink: 0;
	/* Daire merkez hizası: track üst boşluğu (6px) + daire yarıçapı (~47px) - ok yarıçapı (17px) */
	margin-top: 36px;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #8a8a8a;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.14);
	transition: color 0.15s, box-shadow 0.15s;
}

.ce-catgrid__arrow:hover {
	color: var(--ce-green, #12a150);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

/* Daire: sabit tam yuvarlak kap (span → flex ile blocklaşır ve içerik
   ortalanır); yeşil halka görselin DIŞINDA kalır, iç boşluk yok — görsel
   halkanın hemen içinden başlar */
.ce-catgrid__circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 95px;
	height: 95px;
	aspect-ratio: 1 / 1;
	flex-shrink: 0;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid var(--ce-accent, var(--ce-green, #12a150));
	padding: 0;
	transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
	line-height: 0;
	background: #fff;
}

/* Görsel: daireyi kenarlara kadar TAM doldurur — her en/boy oranındaki
   kaynak bozulmadan (cover) ortalanır, ortada küçük/boşluklu durmaz */
.ce-catgrid__circle img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center;
	border-radius: 50%;
}

.ce-catgrid__item:hover .ce-catgrid__circle {
	border-color: var(--ce-green-dark, #0d7d3e);
	transform: translateY(-3px);
	box-shadow: 0 4px 12px rgba(18, 161, 80, 0.2);
}

.ce-catgrid__label {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--ce-text, #2d2d2d);
	line-height: 1.3;
}

.ce-catgrid__item:hover .ce-catgrid__label {
	color: var(--ce-green, #12a150);
}

/* ---------- Ürün Rafı ---------- */
.ce-shelf__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.ce-shelf__title {
	font-size: 22px;
	font-weight: 800;
	margin: 0;
	color: var(--ce-text, #2d2d2d);
}

.ce-shelf__viewall {
	font-size: 14px;
	font-weight: 700;
	color: var(--ce-green, #12a150);
	white-space: nowrap;
}

/* Carousel raf okları: başlık satırında "Tümünü Gör"ün solunda; kategori
   kısayolu oklarıyla aynı dil (beyaz daire, hafif gölge, hover'da yeşil).
   Uçlarda ilgili ok pasifleşir; yalnız MASAÜSTÜNDE görünür. */
.ce-shelf__actions {
	display: flex;
	align-items: center;
	align-self: center;
	gap: 8px;
	flex-shrink: 0;
}

.ce-shelf__actions .ce-shelf__viewall {
	margin-left: 6px;
}

.ce-shelf__arrow {
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #8a8a8a;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	transition: color 0.15s, box-shadow 0.15s, opacity 0.15s;
}

.ce-shelf__arrow svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	stroke-width: 2;
	fill: none;
}

.ce-shelf__arrow:hover:not(:disabled) {
	color: var(--ce-green, #12a150);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.ce-shelf__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

/* Tablet dar görünüm + mobil: oklar tamamen gizli (dokunmayla kaydırma). */
@media (max-width: 1024px) {
	.ce-shelf__arrow {
		display: none;
	}
}

.ce-shelf__wrap {
	position: relative;
}

.ce-shelf__track {
	/* Masaüstünde bir görünümde 5 kart (1500px konteynırda kart ~283px) */
	--ce-cards: 5;
	--ce-card-gap: 16px;
	display: flex;
	gap: var(--ce-card-gap);
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	padding: 4px 2px 10px;
	scrollbar-width: none;
	cursor: grab;
}

/* Grid düzeni ("Düzen: Grid"): satır başına 5 ürün alt alta —
   tablet 3, mobil 2 sütun. Kartlar carousel'dekiyle birebir aynı;
   yalnız flex-basis genişlik formülü sıfırlanır. */
.ce-shelf__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 20px 16px;
	align-items: start;
	padding: 4px 2px 10px;
}

.ce-shelf__grid .ce-card {
	flex: initial;
	width: 100%;
	min-width: 0;
}

@media (max-width: 1024px) {
	.ce-shelf__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.ce-shelf__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px 10px;
	}
}

.ce-shelf__track.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	/* Sürükleme sırasında snap devre dışı; bırakınca JS en yakın karta oturtur. */
	scroll-snap-type: none;
	user-select: none;
}

.ce-shelf__track::-webkit-scrollbar {
	display: none;
}

.ce-shelf__track img {
	-webkit-user-drag: none;
	user-select: none;
}

/* ============================================================
   ÜRÜN KARTI — TEK KAYNAK
   Anasayfa rafları, kategori arşivi, Favorilerim, favori şeridi ve
   "Benzer Seçenekler" hep bu bileşeni kullanır.

   TEMA RENGİ: --card-primary tek satırda değiştirilince rozet/başlık/
   fiyat/butonlar topluca döner (ör. tema yeşili için #12a150).
   ============================================================ */
.ce-card {
	/* Başlık ve fiyat: ÇiçekEvi > Renkler > Ürün Başlık / Fiyat Rengi
	   (--ce-heading). Buradaki lacivert yalnız yedektir. */
	--card-primary: var(--ce-heading, #2e3a59);
	--card-primary-dark: var(--ce-heading-dark, #222c45);
	--card-on-primary: #fff;
	/* Vurgu (SKU rozeti + butonlar): TEMA YEŞİLİ — tema değişkenine bağlı, tek yerden döner */
	--card-accent: var(--ce-green, #12a150);
	--card-accent-dark: var(--ce-green-dark, #0d7d3e);
	--card-accent-soft: var(--ce-green-light, #e7f6ee);
	--card-on-accent: #fff;
	--card-sale: #e8442e;
	--card-star: #f5a623;
	--card-star-empty: #dfe3ea;
	--card-muted: #8a94a6;
	--card-border: #e9ebf0;
	--card-radius: 14px;
	--card-btn-radius: 8px;

	flex: 0 0 calc((100% - (var(--ce-cards) - 1) * var(--ce-card-gap)) / var(--ce-cards));
	min-width: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--card-border);
	border-radius: var(--card-radius);
	box-shadow: 0 1px 3px rgba(23, 32, 56, 0.05);
	overflow: hidden;
	scroll-snap-align: start;
	/* Kart hover'da YERİNDEN OYNAMAZ/ÖLÇEKLENMEZ: transform yok, sadece gölge. */
	transition: box-shadow 0.22s ease, border-color 0.22s ease;
	/* Kart içi ölçüler DIŞ genişliğe göre küçülür: 8'li favori şeridi,
	   mobil 2 sütun ve masaüstü 5'li raf aynı kuralla yönetilir. */
	container-type: inline-size;
}

.ce-card:hover {
	box-shadow: 0 10px 24px rgba(23, 32, 56, 0.13);
	border-color: #dfe3ec;
}

/* ---------- Görsel ---------- */
/* Kendi kırpma kutusu: hover'da büyüyen görsel yuvarlak köşelerden taşmaz
   (kartın overflow'una güvenilmez — üst köşe yarıçapı burada da tekrarlanır). */
.ce-card__img {
	position: relative;
	display: block;
	line-height: 0;
	overflow: hidden;
	border-radius: calc(var(--card-radius) - 1px) calc(var(--card-radius) - 1px) 0 0;
	background: var(--ce-bg-soft, #f7f7f7);
}

.ce-card__img img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	margin: 0;
	transition: transform 0.35s ease;
}

/* Hover'da SADECE görsel, kendi kutusu içinde büyür. */
.ce-card:hover .ce-card__img img {
	transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.ce-card__img img,
	.ce-card:hover .ce-card__img img {
		transition: none;
		transform: none;
	}
}

/* Ürün kodu rozeti (SKU) — sol üst, tema yeşili zemin + beyaz metin.
   SKU boşsa PHP hiç render etmez. */
.ce-card__sku {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	background: var(--card-accent);
	color: var(--card-on-accent);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2px;
	line-height: 1;
	padding: 5px 8px;
	border-radius: 6px;
}

/* Favori kalbi — sağ üst. İşlev değişmedi, yalnız görünüm yenilendi. */
.ce-card__fav {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 8px rgba(23, 32, 56, 0.18);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
	cursor: pointer;
	transition: transform 0.15s ease;
}

.ce-card__fav:hover {
	transform: scale(1.08);
}

.ce-card__fav svg {
	width: 19px;
	height: 19px;
	fill: none;
	/* Pasif kalp: nötr gri; aktif hâli --ce-sale (ÇiçekEvi > Renkler). */
	stroke: #9aa2b1;
	stroke-width: 1.8;
	stroke-linejoin: round;
	transition: fill 0.15s, stroke 0.15s;
}

.ce-card__fav.is-active svg {
	fill: var(--ce-danger, #e0234e);
	stroke: var(--ce-danger, #e0234e);
}

/* ---------- "Sepete Eklendi" katmanı ----------
   Örtü kartın TAMAMINI kaplar (alt bilgi kısmı da kararır), kart yarıçapıyla
   birebir. z-index 1: SKU rozeti (2) ve favori kalbi (3) örtünün üstünde kalır
   ve tıklanabilir olmayı sürdürür; alttaki "Hızlı Sipariş"/"İncele" örtünün
   ALTINDA kalır ve tıklanamaz (örtü tıklamayı kendi üstünde tutar).
   TASARLANABİLİR rozeti (.ce-designbadge--card) bilerek z-index 0'dadır:
   örtü açıkken onu tamamen kapatır (bkz. style.css).
   Markup her kartta basılır, görünürlük tek sınıfla yönetilir — ekleme
   anında ağ beklenmez, sayfa render'ında sunucudan geldiği için FOUC olmaz.
   display yerine opacity/visibility: sınıf değişince geçiş çalışabilsin. */
.ce-card__added {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(23, 32, 56, 0.62);
	border-radius: calc(var(--card-radius) - 1px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.12s ease, visibility 0s linear 0.12s;
}

.ce-card.is-incart .ce-card__added {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.12s ease, visibility 0s;
}

/* İçerik KARTIN tamamına göre ortalanır — görsel yüksekliğine bağlı hesap
   yok, başlık iki satıra inip kart uzasa da blok ortada kalır.
   Ortalamanın üzerine sabit bir yukarı kaydırma uygulanır: kart yüksekliği
   değişse de bağıl konum aynı kalır, yatay ortalama etkilenmez. */
.ce-card__added-in {
	--card-added-lift: 30px;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 12px;
	transform: translateY(calc(-1 * var(--card-added-lift)));
}

.ce-card__added-ok {
	width: 46px;
	height: 46px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--card-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.ce-card__added-ok svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: #fff;
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ce-card__added-txt {
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.ce-card__added-row {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 8px;
	width: 100%;
}

/* Metin sarmalanır (kesilmez): dar kartta iki satıra iner, taşma olmaz. */
.ce-card__added-go {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 38px;
	padding: 6px 12px;
	background: #3f4a63;
	color: #fff;
	border-radius: var(--card-btn-radius);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.15;
	text-align: center;
	text-decoration: none;
	transition: background 0.15s ease;
}

.ce-card__added-go:hover,
.ce-card__added-go:focus {
	background: #2e3a59;
	color: #fff;
}

.ce-card__added-del {
	flex: 0 0 auto;
	width: 38px;
	min-height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: #1e2740;
	border: 0;
	border-radius: var(--card-btn-radius);
	cursor: pointer;
	transition: background 0.15s ease, opacity 0.15s ease;
}

.ce-card__added-del svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: #fff;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ce-card__added-del:hover {
	background: #111a2e;
}

.ce-card__added-del.is-busy {
	opacity: 0.6;
	cursor: default;
}

/* Çıkarma başarısız olursa sessizce yutulmaz. */
.ce-card__added-err {
	max-width: 100%;
	margin-top: 2px;
	padding: 5px 8px;
	background: rgba(224, 35, 78, 0.95);
	color: #fff;
	border-radius: 6px;
	font-size: 11px;
	line-height: 1.25;
	text-align: center;
}

/* Dar kart (mobil 2 sütun, 8'li favori şeridi): ölçüler küçülür. */
@container (max-width: 205px) {
	.ce-card__added-in {
		gap: 8px;
		padding: 10px;
	}

	.ce-card__added-ok {
		width: 38px;
		height: 38px;
	}

	.ce-card__added-ok svg {
		width: 20px;
		height: 20px;
	}

	.ce-card__added-txt {
		font-size: 13px;
	}

	.ce-card__added-go {
		font-size: 11px;
		padding: 6px 6px;
	}
}

/* Mobilde dokunma hedefi en az 44px. */
@media (max-width: 782px) {
	.ce-card__added-go,
	.ce-card__added-del {
		min-height: 44px;
	}

	.ce-card__added-del {
		width: 44px;
	}
}

/* ---------- Gövde ---------- */
.ce-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 12px 14px;
	flex: 1 1 auto;
}

/* Ürün adı: en fazla 2 satır, taşarsa ellipsis. 2 satırlık sabit alan sayesinde
   tek satırlık adlarda da fiyat/butonlar aynı hizada kalır. */
.ce-card__title {
	font-size: 15px;
	font-weight: 500;
	color: var(--card-primary);
	line-height: 1.35;
	min-height: calc(2 * 1.35em);
	text-align: left;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-decoration: none;
}

.ce-card__title:hover {
	color: var(--card-primary);
	text-decoration: underline;
}

/* ---------- Puan satırı ---------- */
.ce-card__rating {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 16px;
}

/* Gri yıldız sırasının üstüne genişliği yüzdeyle kırpılmış altın sıra bindirilir
   → yarım (ve her türlü kesirli) yıldız SVG id'si olmadan çalışır. */
.ce-card__stars {
	position: relative;
	display: inline-block;
	line-height: 0;
	white-space: nowrap;
	flex-shrink: 0;
}

.ce-card__stars-bg,
.ce-card__stars-fg {
	display: block;
	white-space: nowrap;
	line-height: 0;
}

.ce-card__stars-fg {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}

.ce-card__stars svg {
	width: 14px;
	height: 14px;
	display: inline-block;
	vertical-align: top;
}

.ce-card__stars-bg svg {
	fill: var(--card-star-empty);
}

.ce-card__stars-fg svg {
	fill: var(--card-star);
}

.ce-card__reviews {
	font-style: normal;
	font-size: 12px;
	color: var(--card-muted);
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------- Fiyat satırı: rozet → eski fiyat → güncel fiyat (tek satır) ---------- */
.ce-card__pricerow {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: nowrap;
	min-width: 0;
	line-height: 1.2;
}

/* İndirim rozeti: dolu kırmızı zemin + beyaz kalın yazı */
.ce-card__disc {
	flex-shrink: 0;
	background: var(--card-sale);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	border-radius: 5px;
	padding: 3px 6px;
	line-height: 1.1;
}

.ce-card__old {
	flex-shrink: 1;
	min-width: 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--card-muted);
	text-decoration: line-through;
	white-space: nowrap;
	overflow: hidden;
}

.ce-card__old .woocommerce-Price-amount {
	text-decoration: inherit;
}

.ce-card__price {
	font-size: 19px;
	font-weight: 800;
	color: var(--card-primary);
	line-height: 1.15;
	white-space: nowrap;
}

.ce-card__price .woocommerce-Price-amount {
	color: inherit;
}

/* ---------- Buton satırı: iki eşit buton yan yana ---------- */
/* margin-top:auto → farklı uzunluktaki başlıklara rağmen grid/raf içindeki
   kartların buton satırları aynı hizada biter. */
.ce-card__actions {
	display: flex;
	gap: 10px;
	margin-top: auto;
	padding-top: 2px;
}

.ce-card__btn {
	flex: 1 1 0;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 38px;
	padding: 0 8px;
	border-radius: var(--card-btn-radius);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.ce-card__btn span {
	overflow: hidden;
	text-overflow: ellipsis;
}

.ce-card__btn svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Dolu yeşil + beyaz metin/ikon (ikon stroke: currentColor) */
.ce-card__btn--order {
	background: var(--card-accent);
	color: var(--card-on-accent);
	border: 1px solid var(--card-accent);
}

.ce-card__btn--order:hover {
	background: var(--card-accent-dark);
	border-color: var(--card-accent-dark);
	color: var(--card-on-accent);
}

/* Beyaz zemin + yeşil kenarlık/metin/ikon */
.ce-card__btn--view {
	background: #fff;
	color: var(--card-accent);
	border: 1px solid var(--card-accent);
}

.ce-card__btn--view:hover {
	background: var(--card-accent-soft);
	color: var(--card-accent-dark);
	border-color: var(--card-accent-dark);
}

/* ---------- Dar kart (favori şeridi 8'li, mobil 2 sütun) ----------
   Sütun sayıları DEĞİŞMEZ; yalnız kart içi ölçüler orantılı küçülür ve
   iki buton yan yana sığmaya devam eder. */
@container (max-width: 215px) {
	.ce-card__body {
		gap: 6px;
		/* Yan padding daraltıldı: buton satırına ~4px genişlik kazandırır. */
		padding: 10px 7px 11px;
	}

	.ce-card__title {
		font-size: 13px;
	}

	.ce-card__sku {
		top: 7px;
		left: 7px;
		font-size: 10px;
		padding: 4px 6px;
	}

	.ce-card__fav {
		top: 7px;
		right: 7px;
		width: 30px;
		height: 30px;
	}

	.ce-card__fav svg {
		width: 16px;
		height: 16px;
	}

	.ce-card__stars svg {
		width: 12px;
		height: 12px;
	}

	.ce-card__reviews {
		font-size: 10.5px;
	}

	.ce-card__pricerow {
		gap: 5px;
	}

	.ce-card__disc {
		font-size: 10.5px;
		padding: 2px 5px;
	}

	.ce-card__old {
		font-size: 11.5px;
	}

	.ce-card__price {
		font-size: 16px;
	}

	/* "İncele" SABİT dar kare-ikon butonu; kalan TÜM genişliği "Hızlı
	   Sipariş" alır → yazı hiçbir koşulda kesilmez. */
	.ce-card__actions {
		display: grid;
		grid-template-columns: 1fr 44px;
		gap: 4px;
	}

	.ce-card__btn {
		height: 34px;
		gap: 4px;
		padding: 0 4px;
		font-size: 11.5px;
	}

	/* KESME YOK: metin ellipsis'e düşmez, alt satıra da kırılmaz
	   (nowrap temel kuraldan geliyor). */
	.ce-card__btn span {
		overflow: visible;
		text-overflow: clip;
	}

	/* Çanta ikonu METİNLE uyumlu boyutta */
	.ce-card__btn--order svg {
		width: 12px;
		height: 12px;
	}

	/* İncele: İKON-ONLY — yazı gizlenir (aria-label/title ile ad korunur) */
	.ce-card__btn--view span {
		display: none;
	}

	.ce-card__btn--view {
		gap: 0;
		padding: 0;
	}

	/* Göz ikonu BUTONA göre orantılı, ortalı */
	.ce-card__btn--view svg {
		width: 17px;
		height: 17px;
	}
}

/* Çok dar kart (360px viewport'ta 2 sütun): metin KISALTILMAZ, yalnız
   ölçüler bir tık daha küçülür. Eski "Hızlı Sipariş → Sipariş" kısaltması
   kaldırıldı — yazı tam görünüyor. */
@container (max-width: 165px) {
	.ce-card__reviews {
		font-size: 10px;
	}

	.ce-card__price {
		font-size: 15px;
	}

	.ce-card__body {
		padding: 10px 7px 11px;
	}

	/* İncele ikon-only olduğu için "Hızlı Sipariş"e bol yer kalıyor;
	   yazıyı daha fazla küçültmeye GEREK YOK, yalnız kutu bir tık daralır. */
	.ce-card__actions {
		grid-template-columns: 1fr 40px;
		gap: 3px;
	}

	.ce-card__btn {
		font-size: 11px;
		padding: 0 3px;
	}

	.ce-card__btn--order svg {
		width: 11px;
		height: 11px;
	}

	.ce-card__btn--view svg {
		width: 16px;
		height: 16px;
	}
}

/* ---------- Kampanya Banner Grid (çiçeksepeti ölçüleri) ---------- */
.ce-bannergrid {
	display: grid;
	gap: 20px;
}

.ce-bannergrid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.ce-bannergrid--cols-3 { grid-template-columns: repeat(3, 1fr); }

.ce-bannergrid__item {
	position: relative;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	line-height: 0;
}

.ce-bannergrid__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.25s;
}

/* Sabit oranlar: 2'li 730x304, 3'lü 480x199 (~2.4:1) — küçülürken oran korunur. */
.ce-bannergrid--cols-2 .ce-bannergrid__item {
	aspect-ratio: 730 / 304;
}

.ce-bannergrid--cols-3 .ce-bannergrid__item {
	aspect-ratio: 480 / 199;
}

.ce-bannergrid__item:hover img {
	transform: scale(1.03);
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
	.ce-shelf__track {
		--ce-cards: 4;
	}
}

/* Mobil: köşe/gölge biraz sakinleşir. Kart içi ölçüleri yukarıdaki
   @container kuralları hallediyor (sütun sayısına değil kart genişliğine bakar). */
@media (max-width: 768px) {
	.ce-card {
		--card-radius: 12px;
	}
}

@media (max-width: 900px) {
	.ce-shelf__track {
		--ce-cards: 3;
	}

	.ce-slider {
		--ce-slider-height: 260px !important;
	}

	.ce-slider__caption strong {
		font-size: 22px;
	}

	.ce-catgrid__arrow {
		display: none;
	}

}

@media (max-width: 600px) {
	.ce-slider {
		--ce-slider-height: 190px !important;
	}

	.ce-slider__caption {
		max-width: 70%;
	}

	.ce-slider__caption strong {
		font-size: 18px;
	}

	.ce-slider__subtitle {
		font-size: 13px;
	}

	.ce-catgrid__item {
		flex-basis: 84px;
		width: 84px;
	}

	.ce-catgrid__circle {
		width: 68px;
		height: 68px;
	}

	.ce-catgrid__label {
		font-size: 12px;
	}

	.ce-bannergrid--cols-2,
	.ce-bannergrid--cols-3 {
		grid-template-columns: 1fr;
	}

	.ce-shelf__track {
		--ce-cards: 2.2;
	}

	.ce-shelf__title {
		font-size: 18px;
	}
}