/* ==========================================================================
   Breadcrumb
   Uzun ürün adlarında satır satır taşıp ekranı kaplamasın diye tek satıra
   sabitlenip taşan kısım üç noktayla kesilir.
   ========================================================================== */

.woocommerce-breadcrumb {
	display: block;
	overflow: hidden;
	margin-bottom: var(--sp-3);
	color: var(--muted);
	font-size: var(--fs-xs);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.woocommerce-breadcrumb a {
	color: var(--muted);
}

.woocommerce-breadcrumb a:hover {
	color: var(--ink);
}

/* ==========================================================================
   Bildirimler
   Sepete eklendi / hata / bilgi mesajları. Mağaza ve ürün sayfalarında görünür.
   ========================================================================== */

.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-noreviews,
p.no-comments {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-2) var(--sp-3);
	margin-bottom: var(--sp-3);
	list-style: none;
	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-left: 3px solid var(--ink);
	border-radius: var(--radius);
	font-size: var(--fs-sm);
}

.woocommerce-message {
	border-left-color: var(--success);
}

.woocommerce-error {
	border-left-color: var(--error);
}

.woocommerce-message a.button,
.woocommerce-error a.button,
.woocommerce-info a.button {
	order: 2;
	margin-left: auto;
}

/* ==========================================================================
   Mağaza başlığı
   ========================================================================== */

.shop-header {
	margin-bottom: var(--sp-3);
	padding-bottom: var(--sp-3);
	border-bottom: 1px solid var(--line);
}

.shop-header .page-title {
	margin-bottom: var(--sp-1);
	font-size: var(--fs-2xl);
}

.shop-header__intro {
	max-width: 65ch;
	margin-top: var(--sp-1);
	color: var(--muted);
	font-size: var(--fs-base);
	line-height: var(--lh-snug);
}

@media (min-width: 768px) {
	.shop-header {
		margin-bottom: var(--sp-5);
		padding-bottom: var(--sp-4);
	}

	.shop-header .page-title {
		margin-bottom: var(--sp-2);
		font-size: var(--fs-3xl);
	}

	.shop-header__intro {
		margin-top: var(--sp-2);
		font-size: var(--fs-lg);
	}
}

.shop-footer__description {
	max-width: 65ch;
	margin-top: var(--sp-5);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: var(--fs-sm);
}

/* ==========================================================================
   Alt kategori gezinme çubuğu
   ========================================================================== */

.shop-subcats {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--sp-2);
	margin-bottom: var(--sp-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.shop-subcats::-webkit-scrollbar {
	display: none;
}

@media (min-width: 768px) {
	.shop-subcats {
		flex-wrap: wrap;
		overflow-x: visible;
		scroll-snap-type: none;
	}
}

.shop-subcats__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0.5rem 1rem;
	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--ink);
	font-size: var(--fs-sm);
	font-weight: 600;
	white-space: nowrap;
	flex: 0 0 auto;
	scroll-snap-align: start;
	transition: background var(--ease), border-color var(--ease), color var(--ease);
}

@media (min-width: 768px) {
	.shop-subcats__item {
		flex: initial;
	}
}

.shop-subcats__item:hover {
	color: #FFFFFF;
	background: var(--ink);
	border-color: var(--ink);
	text-decoration: none;
}

.shop-subcats__count {
	color: var(--muted);
	font-size: var(--fs-xs);
	font-weight: 400;
}

.shop-subcats__item:hover .shop-subcats__count {
	color: rgba(255, 255, 255, 0.75);
}

/* ==========================================================================
   Araç çubuğu: sonuç sayısı, marka filtresi, sıralama
   ========================================================================== */

.shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2);
	margin-bottom: var(--sp-4);
}

.woocommerce-result-count {
	display: none;
	margin: 0;
	color: var(--muted);
	font-size: var(--fs-sm);
}

@media (min-width: 768px) {
	.woocommerce-result-count {
		display: block;
	}
}

.shop-toolbar__controls {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--sp-2);
	width: 100%;
	margin-left: auto;
}

@media (min-width: 768px) {
	.shop-toolbar__controls {
		width: auto;
	}
}

/* Marka filtresi (.shop-filter) ve WooCommerce'in kendi sıralama formu
   (.woocommerce-ordering) aynı pill görünümünü paylaşır. Mobilde ikisi de
   eşit pay alıp yan yana sığar, seçili metin sığmazsa üç noktayla kesilir. */
.shop-filter__select-wrap,
.woocommerce-ordering {
	flex: 1 1 0;
	min-width: 0;
}

@media (min-width: 768px) {
	.shop-filter__select-wrap,
	.woocommerce-ordering {
		flex: none;
	}
}

.shop-filter__select-wrap {
	position: relative;
}

.shop-filter__select-wrap select,
.woocommerce-ordering select {
	appearance: none;
	width: 100%;
	min-width: 0;
	padding: 0.5rem 2.25rem 0.5rem 0.875rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: var(--fs-sm);
	cursor: pointer;
	transition: border-color var(--ease);
}

@media (min-width: 768px) {
	.shop-filter__select-wrap select,
	.woocommerce-ordering select {
		width: auto;
		min-width: 160px;
	}
}

.shop-filter__select-wrap select:hover,
.woocommerce-ordering select:hover {
	border-color: var(--ink);
}

.shop-filter__select-wrap select:focus,
.woocommerce-ordering select:focus {
	border-color: var(--ink);
	outline: none;
}

.shop-filter__chevron {
	position: absolute;
	top: 50%;
	right: 0.75rem;
	width: 16px;
	height: 16px;
	color: var(--muted);
	transform: translateY(-50%);
	pointer-events: none;
}

.woocommerce-ordering {
	position: relative;
}

.woocommerce-ordering::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0.75rem;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--muted);
	border-bottom: 2px solid var(--muted);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}

/* ==========================================================================
   Ürün ızgarası ve kartı
   ========================================================================== */

ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
}

.product-card {
	position: relative;
	list-style: none;
	transition: transform var(--ease);
}

.product-card:hover {
	transform: translateY(-4px);
}

.product-card__frame {
	position: relative;
	overflow: hidden;
}

@media (hover: none) {
	.product-card__frame {
		overflow: visible;
	}
}

.product-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: box-shadow var(--ease), border-color var(--ease);
}

.product-card:hover .product-card__media {
	border-color: transparent;
	box-shadow: 0 16px 32px rgba(20, 20, 20, 0.12);
}

.product-card__image {
	position: absolute;
	inset: 6%;
	width: 88%;
	height: 88%;
	object-fit: contain;
	object-position: center;
	transition: opacity var(--ease), transform var(--ease);
}

.product-card__image--hover {
	opacity: 0;
}

.product-card__badge {
	position: absolute;
	top: var(--sp-1);
	left: var(--sp-1);
	z-index: 1;
	padding: 0.25rem 0.6rem;
	background: var(--ink);
	color: #FFFFFF;
	font-size: var(--fs-xs);
	font-weight: 600;
	border-radius: var(--radius);
}

.product-card__badge--stock {
	left: auto;
	right: var(--sp-1);
	background: var(--muted);
}

.product-card:hover .product-card__image {
	transform: scale(1.05);
}

.product-card:hover .product-card__image--primary {
	opacity: 0;
}

.product-card:hover .product-card__image--hover {
	opacity: 1;
}

/* Hızlı bakış + sepete ekle: görselin altından yukarı kayarak birlikte
   açılır. Kartın tamamını kaplayan link (aşağıdaki ::after) altında
   kalmamaları için z-index alırlar. */
.product-card__actions {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	transform: translateY(100%);
	transition: transform var(--ease);
}

.product-card__quick-view,
.product-card__actions .button {
	display: block;
	width: 100%;
	padding: var(--sp-1) var(--sp-2);
	background: rgba(255, 255, 255, 0.94);
	border-top: 1px solid var(--line);
	border-radius: 0;
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--ink);
	text-align: center;
}

.product-card__actions .button {
	background: var(--ink);
	color: #FFFFFF;
	border-top-color: var(--ink);
}

.product-card__actions .button:hover {
	background: #000000;
}

.product-card__actions .added_to_cart {
	display: block;
	padding: 4px var(--sp-2) var(--sp-1);
	background: rgba(255, 255, 255, 0.94);
	font-size: var(--fs-xs);
	text-align: center;
}

/* Dokunmatikte hover olmadığı için hızlı bakış/sepete ekle görselin üstünde
   kalıcı görünmez; bunun yerine görselin altında normal akışta, kendi
   satırında durur (bkz. .product-card__frame). */
@media (hover: none) {
	.product-card__actions {
		position: static;
		transform: none;
		margin-top: 6px;
		border: 1px solid var(--line);
		border-radius: var(--radius);
		overflow: hidden;
	}

	.product-card__quick-view,
	.product-card__actions .button {
		border-top: 1px solid var(--line);
	}

	.product-card__quick-view:first-child {
		border-top: none;
	}
}

@media (hover: hover) {
	.product-card:hover .product-card__actions,
	.product-card__actions:focus-within {
		transform: translateY(0);
	}
}

.product-card__body {
	padding-top: var(--sp-2);
}

/* İki satıra kadar sabit yükseklik: başlık uzunluğu farklı olsa da
   fiyat her kartta aynı hizada oturur. */
.product-card__title {
	display: -webkit-box;
	overflow: hidden;
	overflow-wrap: break-word;
	min-height: 2.7em;
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: var(--lh-snug);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.product-card__title-link {
	color: inherit;
}

.product-card__title-link:hover {
	text-decoration: none;
}

/* Kartın tamamını tıklanabilir yapar (stretched link), hızlı bakış
   butonu kendi z-index'i sayesinde bağımsız çalışmaya devam eder. */
.product-card__title-link::after {
	content: '';
	position: absolute;
	inset: 0;
}

.product-card__price {
	display: block;
	margin-top: 4px;
	color: var(--accent);
	font-weight: 600;
}

.product-card__price del {
	margin-right: var(--sp-1);
	color: var(--muted);
	font-weight: 400;
	text-decoration: line-through;
}

.product-card__price ins {
	text-decoration: none;
}

@media (min-width: 768px) {
	ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--sp-4);
	}
}

/* ==========================================================================
   Sayfalama
   ========================================================================== */

.woocommerce-pagination {
	margin-top: var(--sp-5);
}

.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-1);
	margin: 0;
	padding: 0;
}

.woocommerce-pagination .page-numbers li {
	list-style: none;
}

.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--sp-1);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-size: var(--fs-sm);
	transition: background var(--ease), border-color var(--ease), color var(--ease);
}

.woocommerce-pagination .page-numbers a:hover {
	background: var(--bg-soft);
	border-color: var(--ink);
	text-decoration: none;
}

.woocommerce-pagination .page-numbers .current {
	background: var(--ink);
	color: #FFFFFF;
	border-color: var(--ink);
}

/* ==========================================================================
   Ürün detay: düzen
   ========================================================================== */

.product-single {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-4);
}

@media (min-width: 1024px) {
	.product-single {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--sp-6);
		align-items: start;
	}

	/* Galeri ve özet sadece ilk sıradaki iki hücreyi paylaşır; sekmeler ve
	   ilgili ürünler grid'in geri kalan otomatik satırlarında her ikisi de
	   tam genişlik alıp alt alta dizilir (yoksa ikisi yan yana yarım
	   genişlikte sıkışırdı). */
	.woocommerce-tabs,
	.related.products {
		grid-column: 1 / -1;
	}
}

/* Ürün galerisi: mobilde ana görsel üstte, küçük görseller altında yatay
   kaydırmalı bir şerit; masaüstünde küçük görseller solda dikey bir sütun,
   ana görsel sağda. DOM sırası [thumbs, main] sabit — yön mobilde
   column-reverse, masaüstünde row olarak değiştirilerek elde edilir. */
.product-gallery {
	display: flex;
	flex-direction: column-reverse;
	gap: var(--sp-2);
}

.product-gallery__main {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.product-gallery__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.product-gallery__badge {
	position: absolute;
	top: var(--sp-2);
	left: var(--sp-2);
	z-index: 1;
	padding: 0.3rem 0.7rem;
	background: var(--ink);
	color: #FFFFFF;
	font-size: var(--fs-xs);
	font-weight: 600;
	border-radius: var(--radius);
}

.product-gallery__thumbs {
	display: flex;
	flex-shrink: 0;
	gap: var(--sp-1);
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 2px;
}

.product-gallery__thumb {
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
	padding: 0;
	overflow: hidden;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	cursor: pointer;
	transition: border-color var(--ease);
}

.product-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.product-gallery__thumb:hover {
	border-color: var(--muted);
}

.product-gallery__thumb.is-active {
	border-color: var(--ink);
}

@media (min-width: 1024px) {
	.product-gallery {
		flex-direction: row;
		align-items: stretch;
	}

	.product-gallery__thumbs {
		flex-direction: column;
		/* 5 küçük görsel (84px + var(--sp-1) boşluk) sabit yükseklik: 5*84 + 4*8.
		   Fazlası büyümek yerine dikey kaydırmalı olur, ana görsel fotoğraf
		   sayısına göre uzamaz. */
		max-height: 452px;
		overflow-x: hidden;
		overflow-y: auto;
		padding-bottom: 0;
		padding-right: 2px;
	}

	.product-gallery__thumb {
		flex-basis: 84px;
		width: 84px;
		height: 84px;
	}

	.product-gallery__main {
		flex: 1;
	}
}

/* ==========================================================================
   Ürün detay: bilgi kolonu
   ========================================================================== */

.summary.entry-summary .product_title {
	margin-bottom: var(--sp-2);
	font-size: var(--fs-xl);
	font-weight: 600;
}

@media (min-width: 768px) {
	.summary.entry-summary .product_title {
		font-size: var(--fs-2xl);
		font-weight: 700;
	}
}

.summary.entry-summary .price {
	display: block;
	font-family: var(--font-display);
	font-size: var(--fs-2xl);
	font-weight: 700;
	color: var(--accent);
}

.summary.entry-summary .price del {
	margin-right: var(--sp-2);
	font-size: var(--fs-lg);
	font-weight: 400;
	color: var(--muted);
	text-decoration: line-through;
}

.summary.entry-summary .price ins {
	text-decoration: none;
}

.product-single__installment {
	margin-top: var(--sp-2);
}

.product-single__installment:empty {
	display: none;
}

.product-single__shipping-info {
	display: flex;
	flex-direction: column;
	margin: var(--sp-4) 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}

.product-single__shipping-info li {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	padding-block: var(--sp-2);
	color: var(--ink);
	font-size: var(--fs-sm);
	border-bottom: 1px solid var(--line);
}

.product-single__shipping-info svg {
	flex-shrink: 0;
	box-sizing: content-box;
	width: 16px;
	height: 16px;
	padding: 7px;
	color: var(--ink);
	background: var(--bg-soft);
	border-radius: 50%;
}

.stock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--sp-2);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.stock::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.stock.in-stock {
	color: var(--success);
}

.stock.out-of-stock,
.stock.unavailable {
	color: var(--error);
}

.woocommerce-product-details__short-description {
	margin-top: var(--sp-3);
	color: var(--muted);
}

/* Varyant seçimi */

.variations {
	width: 100%;
	margin-top: var(--sp-3);
}

.variations td,
.variations th {
	padding-bottom: var(--sp-2);
	text-align: left;
	vertical-align: top;
}

.variations select {
	width: 100%;
	max-width: 100%;
}

@media (min-width: 480px) {
	.variations select {
		width: auto;
		min-width: 200px;
	}
}

.woocommerce-variation-add-to-cart,
.single_variation_wrap {
	margin-top: var(--sp-2);
}

/* Adet ve sepete ekle */

.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	margin-top: var(--sp-4);
}

.quantity {
	display: inline-flex;
	align-items: stretch;
	height: 48px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}

.quantity .qty {
	width: 48px;
	padding: 0;
	text-align: center;
	background: var(--bg);
	border: 0;
	border-radius: 0;
	font-weight: 600;
	-moz-appearance: textfield;
}

.quantity .qty:focus {
	border-color: transparent;
}

.quantity .qty::-webkit-outer-spin-button,
.quantity .qty::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.quantity__step {
	flex-shrink: 0;
	width: 40px;
	color: var(--ink);
	font-size: var(--fs-base);
	line-height: 1;
	background: var(--bg-soft);
	transition: background var(--ease);
}

.quantity__step:hover {
	background: var(--line);
}

.quantity__step:active {
	background: var(--muted);
	color: #FFFFFF;
}

.quantity__step--down {
	border-right: 1px solid var(--line);
}

.quantity__step--up {
	border-left: 1px solid var(--line);
}

/* WooCommerce'in kendi .button sınıfı, tema butonlarıyla (.btn) aynı
   aileden ama ayrı bir bileşen — çekirdek şablon/blok çıktılarında
   (bildirimler, sepete ekle, sepetten devam et) kullanılıyor. */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.5rem;
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: #FFFFFF;
	background: var(--ink);
	border: 1px solid transparent;
	border-radius: var(--radius);
	transition: background var(--ease);
}

.button:hover {
	color: #FFFFFF;
	background: #000000;
	text-decoration: none;
}

.button[disabled],
.button.disabled,
.button.loading {
	opacity: 0.45;
	pointer-events: none;
}

/* Vurgu rengi kuralı gereği sadece birincil satın alma eylemleri. */
.single_add_to_cart_button,
.checkout-button {
	padding: 0.875rem 2rem;
	background: var(--accent);
}

.single_add_to_cart_button:hover,
.checkout-button:hover {
	background: var(--accent-dark);
}

/* Blok tabanlı sepet/ödeme: "Ödemeye Git" ve "Siparişi Tamamla" butonları.
   WooCommerce Blocks bu sınıflara hiç renk/arkaplan vermiyor, normalde
   çekirdek .wp-element-button varsayılanına (wp-block-library CSS'i)
   güveniyor — ama bu tema o dosyayı performans için kaldırıyor (bkz.
   hoco_setup), bu yüzden buton arkaplansız ve metin siyah kalıp
   görünmez oluyordu. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.875rem 2rem;
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: #FFFFFF;
	background: var(--accent);
	border: 1px solid transparent;
	border-radius: var(--radius);
	transition: background var(--ease);
}

/* Hesabım > Siparişlerim tablosundaki "Eylemler" butonları (Görüntüle,
   Öde, İptal Et...). WooCommerce'in kendi çekirdek CSS'i (.woocommerce
   a.button) tema butonundan (.button) daha yüksek özgüllükte olduğu için
   kazanıyor ve varsayılan koyu gri rengiyle basıyordu — buton yok gibi,
   düz siyah metin görünüyordu. Aynı .button görünümü burada daha yüksek
   özgüllükle tekrarlanıyor; "Öde" ödeme tamamlayan bir eylem olduğu için
   vurgu rengi kuralına uygun şekilde accent alıyor. */
.woocommerce-MyAccount-orders .woocommerce-orders-table__cell-order-actions a.button,
.woocommerce-MyAccount-orders .woocommerce-pagination a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 var(--sp-1) var(--sp-1) 0;
	padding: 0.6rem 1.1rem;
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1;
	color: #FFFFFF;
	background: var(--ink);
	border: 1px solid transparent;
	border-radius: var(--radius);
	transition: background var(--ease);
}

.woocommerce-MyAccount-orders .woocommerce-orders-table__cell-order-actions a.button:hover,
.woocommerce-MyAccount-orders .woocommerce-pagination a.button:hover {
	background: #000000;
	color: #FFFFFF;
}

.woocommerce-MyAccount-orders .woocommerce-orders-table__cell-order-actions a.button.pay {
	background: var(--accent);
}

.woocommerce-MyAccount-orders .woocommerce-orders-table__cell-order-actions a.button.pay:hover {
	background: var(--accent-dark);
}

/* Sipariş detayında kargo takip bağlantısı (bkz. inc/order-shipping.php).
   Bağlantı kendi ".btn" sistemine değil ayrı, kendi kendine yeten bir sınıfa
   sahip — çünkü sipariş detayı .page-content (düz metin/prose) içinde
   basılıyor, oradaki "a { color: var(--ink) }" kuralı ".btn--dark"ı ezip
   metni arka planla aynı renge (siyah üstüne siyah) düşürüyordu. */
.hoco-order-tracking {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2);
	margin-top: var(--sp-4);
	padding: var(--sp-3);
	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.hoco-order-tracking p {
	margin: 0;
	color: var(--ink);
}

.hoco-order-tracking a.hoco-order-tracking__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0.7rem 1.25rem;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: #FFFFFF;
	background: var(--ink);
	border-radius: var(--radius);
	white-space: nowrap;
	transition: background var(--ease);
}

.hoco-order-tracking a.hoco-order-tracking__link:hover {
	background: #000000;
	color: #FFFFFF;
	text-decoration: none;
}

.hoco-order-tracking a.hoco-order-tracking__link svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

@media (max-width: 479px) {
	.hoco-order-tracking a.hoco-order-tracking__link {
		width: 100%;
	}
}

/* Sipariş detay sayfası (Hesabım > Sipariş Detayı ve sipariş onayı — ikisi
   de aynı woocommerce/order/order-details.php şablonunu paylaşıyor). Tema
   bu sayfaya hiç dokunmamıştı, WooCommerce'in çıplak varsayılanıyla
   (özellikle tarayıcının varsayılan sarı <mark> vurgusu) basılıyordu. */
mark.order-number,
mark.order-date,
mark.order-status {
	padding: 2px 10px;
	background: #FFFFFF;
	color: var(--ink);
	font-weight: 700;
	font-style: normal;
	border: 1px solid var(--line);
	border-radius: 999px;
}

mark.order-status {
	background: var(--ink);
	color: #FFFFFF;
	border-color: var(--ink);
}

.woocommerce-order-details__title,
.woocommerce-column__title {
	font-size: var(--fs-lg);
	margin: var(--sp-4) 0 var(--sp-2);
}

.woocommerce-order-details__title {
	margin-top: 0;
}

/* Sipariş özeti cümlesi ("Sipariş #123 ... tarihinde verildi ve şu anda
   ... durumundadır.") — düz metin yerine hafif dolgulu bir şerit. */
.woocommerce-MyAccount-content > p:first-child,
.woocommerce-order-overview + p {
	padding: var(--sp-2) var(--sp-3);
	background: var(--bg-soft);
	border-radius: var(--radius-lg);
	line-height: var(--lh-base);
}

/* Sipariş kalemleri tablosu: kart görünümü. */
table.woocommerce-table--order-details {
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

table.woocommerce-table--order-details thead th {
	background: var(--bg-soft);
}

table.woocommerce-table--order-details tfoot th,
table.woocommerce-table--order-details tfoot td {
	background: var(--bg-soft);
}

/* Ürün adının önündeki küçük görsel (bkz. inc/woo-hooks.php,
   woocommerce_order_item_name filtresi). */
.hoco-order-item {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}

.hoco-order-item__thumb {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	object-fit: contain;
	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.hoco-order-item__name {
	min-width: 0;
}

/* Genel toplam satırı (bkz. inc/woo-hooks.php,
   woocommerce_get_order_item_totals filtresi). */
.hoco-grand-total {
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--ink);
}

/* Sipariş detayındaki "Eylemler" satırı (Yeniden sipariş ver, Öde...) —
   my-account sipariş tablosundaki aynı özgüllük sorunu burada da var. */
a.woocommerce-button.button.order-actions-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 var(--sp-1) var(--sp-1) 0;
	padding: 0.6rem 1.1rem;
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1;
	color: #FFFFFF;
	background: var(--ink);
	border-radius: var(--radius);
	transition: background var(--ease);
}

a.woocommerce-button.button.order-actions-button:hover {
	background: #000000;
	color: #FFFFFF;
}

.woocommerce-customer-details {
	margin-top: var(--sp-4);
}

.woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-3);
	margin: 0;
}

@media (min-width: 640px) {
	.woocommerce-columns--addresses {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.woocommerce-column--billing-address,
.woocommerce-column--shipping-address,
.woocommerce-customer-details > address {
	padding: var(--sp-3);
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.woocommerce-column--billing-address address,
.woocommerce-column--shipping-address address,
.woocommerce-customer-details > address {
	font-style: normal;
	color: var(--muted);
	line-height: var(--lh-base);
}

.woocommerce-customer-details--phone,
.woocommerce-customer-details--email {
	margin-top: var(--sp-1);
}

/* Hesabım alanındaki TÜM butonlar (İndirmeler'de "Ürünlere göz at",
   Hesap detayları'nda "Kaydet" vb.) — WooCommerce'in kendi çekirdek CSS'i
   (.woocommerce a.button/button.button, :where() üzerinden gelen özgüllüğü
   tema butonundan yüksek) kazanıp varsayılan koyu gri rengiyle basıyordu,
   arka planla aynı renk metin görünmez oluyordu. "body.woocommerce-account"
   ile bir öğe daha ekleyip özgüllüğü kalıcı olarak üstüne çıkarıyoruz.
   Fiyat/sepete ekle gibi vurgu rengi kuralına giren yerler zaten kendi
   sınıflarıyla (.single_add_to_cart_button vb.) ayrıca stilleniyor. */
body.woocommerce-account a.button,
body.woocommerce-account button.button,
body.woocommerce-account input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.5rem;
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: #FFFFFF;
	background: var(--ink);
	border: 1px solid transparent;
	border-radius: var(--radius);
	transition: background var(--ease);
}

body.woocommerce-account a.button:hover,
body.woocommerce-account button.button:hover,
body.woocommerce-account input.button:hover {
	color: #FFFFFF;
	background: #000000;
	text-decoration: none;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	color: #FFFFFF;
	background: var(--accent-dark);
	text-decoration: none;
}

/* Blok tabanlı ürün ızgaraları: sepet boşken "Mağazada yeni"
   (woocommerce/product-new, .wc-block-grid) ve sepet doluyken
   "İlginizi çekebilir…" (woocommerce/product-collection,
   .wc-block-product-template) bölümleri. Sütun düzeni ve "Sepete Ekle"
   butonları da çekirdek wp-block-library varsayılanına güveniyor — aynı
   sebepten (bkz. yukarıdaki not) hem ürünler alt alta düşüyor hem butonlar
   görünmüyordu. */
.wc-block-grid__products,
.wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wc-block-grid__product,
.wc-block-product-template > li {
	min-width: 0;
	margin: 0;
}

@media (min-width: 640px) {
	.wc-block-grid.has-3-columns .wc-block-grid__products,
	.wc-block-product-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.wc-block-grid.has-4-columns .wc-block-grid__products,
	.wc-block-grid.has-5-columns .wc-block-grid__products,
	.wc-block-grid.has-6-columns .wc-block-grid__products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.wc-block-grid__product-link {
	display: block;
	width: 100%;
	min-width: 0;
}

.wc-block-grid__product-image {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--bg-soft);
	border-radius: var(--radius);
}

.wc-block-grid__product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wc-block-grid__product-onsale {
	position: absolute;
	top: var(--sp-1);
	left: var(--sp-1);
	z-index: 1;
	padding: 0.25rem 0.6rem;
	background: var(--ink);
	color: #FFFFFF;
	font-size: var(--fs-xs);
	font-weight: 600;
	border-radius: var(--radius);
}

.wc-block-grid__product-title {
	margin-top: var(--sp-1);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: var(--lh-snug);
}

.wc-block-grid__product-price {
	margin-top: 4px;
	font-size: var(--fs-sm);
}

.wc-block-grid__product-add-to-cart {
	margin-top: var(--sp-1);
}

.wc-block-grid .wp-block-button__link,
.wc-block-product-template .wp-block-button__link,
.wc-block-grid .wp-element-button,
.wc-block-product-template .wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.6rem 1rem;
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: 600;
	color: #FFFFFF;
	background: var(--accent);
	border-radius: var(--radius);
	text-decoration: none;
}

.wc-block-grid .wp-block-button__link:hover,
.wc-block-product-template .wp-block-button__link:hover,
.wc-block-grid .wp-element-button:hover,
.wc-block-product-template .wp-element-button:hover {
	color: #FFFFFF;
	background: var(--accent-dark);
}

/* Meta: SKU, kategori */

.product_meta {
	margin-top: var(--sp-4);
	padding-top: var(--sp-3);
	border-top: 1px solid var(--line);
	font-size: var(--fs-sm);
	color: var(--muted);
}

.product_meta > span {
	display: block;
	margin-bottom: 4px;
}

.product_meta a {
	color: var(--muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
   Ürün detay: sekmeler
   ========================================================================== */

.woocommerce-tabs {
	margin-top: var(--sp-6);
}

.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin: 0 0 var(--sp-3);
	padding: 0;
	border-bottom: 1px solid var(--line);
}

.woocommerce-tabs ul.tabs li {
	list-style: none;
}

.woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding-block: var(--sp-2);
	font-weight: 600;
	color: var(--muted);
	border-bottom: 2px solid transparent;
	transition: color var(--ease), border-color var(--ease);
}

.woocommerce-tabs ul.tabs li a:hover {
	color: var(--ink);
	text-decoration: none;
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--ink);
	border-bottom-color: var(--ink);
}

.woocommerce-tabs .panel {
	animation: hoco-fade-in 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce-tabs .panel {
		animation: none;
	}
}

.woocommerce-tabs .panel {
	max-width: 75ch;
}

.woocommerce-tabs table.shop_attributes {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-tabs table.shop_attributes th,
.woocommerce-tabs table.shop_attributes td {
	padding: var(--sp-1) 0;
	border-bottom: 1px solid var(--line);
	text-align: left;
	font-size: var(--fs-sm);
}

.woocommerce-tabs table.shop_attributes th {
	width: 240px;
	font-weight: 600;
}

/* ==========================================================================
   İlgili ürünler
   Ürün ızgarası ile aynı .products / .product-card yapısını kullanır.
   ========================================================================== */

.related.products {
	margin-top: var(--sp-6);
	padding-top: var(--sp-6);
	border-top: 1px solid var(--line);
}

.related.products > h2 {
	font-family: var(--font-display);
}

.related.products > h2 {
	margin-bottom: var(--sp-3);
}

/* ==========================================================================
   Hızlı bakış modalı
   ========================================================================== */

body.has-quick-view-open {
	overflow: hidden;
}

.quick-view-modal {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sp-2);
}

.quick-view-modal[hidden] {
	display: none;
}

.quick-view-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(20, 20, 20, 0.6);
	animation: hoco-fade-in 0.2s ease;
}

.quick-view-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 960px;
	max-height: calc(100vh - var(--sp-4));
	overflow-y: auto;
	background: var(--bg);
	border-radius: var(--radius-lg);
	padding: var(--sp-4);
	animation: hoco-fade-in 0.25s ease;
}

.quick-view-modal__close {
	position: absolute;
	top: var(--sp-2);
	right: var(--sp-2);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--ink);
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 50%;
}

.quick-view-modal__close svg {
	width: 18px;
	height: 18px;
}

.quick-view-modal__loading {
	padding: var(--sp-6) 0;
	text-align: center;
	color: var(--muted);
}

.quick-view-modal__body {
	display: grid;
	gap: var(--sp-4);
}

@media (min-width: 768px) {
	.quick-view-modal__body {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--sp-5);
	}
}

.quick-view__image {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--bg-soft);
	border-radius: var(--radius-lg);
}

.quick-view__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-1);
	margin-top: var(--sp-1);
}

.quick-view__thumb {
	width: 56px;
	height: 56px;
	overflow: hidden;
	border-radius: var(--radius);
	border: 1px solid var(--line);
}

.quick-view__thumb.is-active {
	border-color: var(--ink);
}

.quick-view__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.quick-view__permalink {
	display: inline-block;
	margin-bottom: var(--sp-2);
	font-size: var(--fs-sm);
	color: var(--muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.quick-view__summary .product_title {
	font-size: var(--fs-xl);
}

/* ==========================================================================
   Paket indirimi ilerleme çubuğu (sepet sayfası)
   ========================================================================== */

.bundle-progress {
	margin-bottom: var(--sp-3);
	padding: var(--sp-2) var(--sp-3);
	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.bundle-progress__text {
	margin-bottom: var(--sp-1);
	font-size: var(--fs-sm);
}

.bundle-progress.is-unlocked .bundle-progress__text {
	color: var(--success);
	font-weight: 600;
}

.bundle-progress__bar {
	height: 6px;
	background: var(--line);
	border-radius: 3px;
	overflow: hidden;
}

.bundle-progress__fill {
	height: 100%;
	background: var(--ink);
	transition: width var(--ease);
}

.bundle-progress.is-unlocked .bundle-progress__fill {
	background: var(--success);
}

/* ==========================================================================
   Türkiye il/ilçe seçimi (bkz. inc/turkey-address.php)
   "İlçe" alanı resmi ek alan API'siyle eklendiği için çekirdek adres
   alanlarından sonra, form akışının en sonuna basılıyor. Form flex
   olduğundan (gerçek tarayıcıda doğrulandı) sıralamayı CSS order ile
   "İl"in hemen ardına, "Telefon"dan önce taşıyoruz — DOM'a dokunmadan.
   ========================================================================== */

.wc-block-components-address-form__country,
.wc-block-components-address-form__first_name,
.wc-block-components-address-form__last_name,
.wc-block-components-address-form__address_1,
.wc-block-components-address-form__address_2-toggle,
.wc-block-components-address-form__address_2-hidden-input,
.wc-block-components-address-form__postcode,
.wc-block-components-address-form__city,
.wc-block-components-address-form__state,
.wc-block-components-select-input-hoco-ilce,
.wc-block-components-address-form__phone {
	order: 1;
}

.wc-block-components-select-input-hoco-ilce {
	order: 2;
}

.wc-block-components-address-form__phone {
	order: 3;
}

/* "İl" ve "İlçe" varsayılan olarak yan yana (ör. Posta Kodu / Şehir gibi
   %48 genişlikli) çiftler halinde diziliyordu — kullanıcı isteğiyle her
   biri tam genişlik alıp alt alta duracak şekilde değiştirildi. */
.wc-block-components-address-form__state,
.wc-block-components-select-input-hoco-ilce {
	flex: 1 1 100% !important;
	width: 100% !important;
}