/* ==========================================================================
   Karaaslan Tarım — Online Mağaza: hero, güven şeridi, filtre barı,
   ürün gridi/kartı, fiyat, sepete ekle butonu/stepper
   ========================================================================== */

/* ---- Hero (magenta) ---- */

.ka-shop-hero {
	background: var(--ka-magenta);
	overflow: hidden;
}

.ka-shop-hero-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 46px 34px 42px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: 30px;
	align-items: center;
}

.ka-shop-hero-kicker {
	font-family: 'Dancing Script', cursive;
	font-weight: 700;
	font-size: 30px;
	color: #ffd9a6;
	line-height: 1;
}

.ka-shop-hero-title {
	font-family: 'Anton', sans-serif;
	font-weight: 400;
	font-size: clamp(30px, 4vw, 48px);
	letter-spacing: .02em;
	color: #fff;
	margin: 8px 0 14px;
}

.ka-shop-hero-desc {
	color: rgba(255, 255, 255, .85);
	font-size: 15px;
	line-height: 1.7;
	margin: 0;
	max-width: 460px;
}

.ka-shop-hero-media {
	width: 100%;
	height: 230px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ka-shop-hero-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ---- Güven şeridi ---- */

.ka-shop-trust {
	background: #fff;
	border-bottom: 1px solid #f0e8db;
}

.ka-shop-trust-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 16px 34px;
	display: flex;
	justify-content: center;
	gap: min(70px, 7vw);
	flex-wrap: wrap;
}

.ka-shop-trust-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--ka-muted);
}

/* ---- Ürünler bölümü ---- */

.ka-shop-products {
	padding: 46px 40px 100px;
}

.ka-shop-products-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 30px;
}

.ka-shop-products-title {
	font-family: 'Anton', sans-serif;
	font-weight: 400;
	font-size: 30px;
	letter-spacing: .02em;
	color: var(--ka-ink);
	margin: 0;
}

/* ---- Filtre barı ---- */

.ka-shop-filters {
	display: flex;
	gap: 9px;
	flex-wrap: wrap;
}

.ka-shop-filter {
	display: flex;
	align-items: center;
	gap: 7px;
	border: 1.5px solid #ddd6ca;
	background: #fff;
	color: var(--ka-muted);
	border-radius: 999px;
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 600;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.ka-shop-filter.is-active {
	border-color: var(--ka-magenta);
	background: var(--ka-magenta);
	color: #fff;
}

.ka-shop-filter:hover:not(.is-active),
.ka-shop-filter:focus-visible:not(.is-active) {
	border-color: var(--ka-magenta);
	color: var(--ka-magenta);
}

/* ---- Ürün gridi ---- */

.ka-shop-products ul.products,
ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* WooCommerce 10.9 applies BOTH a .columns-N grid and legacy float widths
   (li.product { float:left; width:22.05% }) which collapses each card to a
   fraction of its grid track. Our custom responsive grid owns the layout. */
.ka-shop-products ul.products {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
}

/* WooCommerce'in float-layout için koyduğu clearfix pseudo-element'leri
   grid'de bir hücre işgal edip ilk kartı boş bırakır — kaldır. */
.ka-shop-products ul.products::before,
.ka-shop-products ul.products::after {
	content: none !important;
	display: none !important;
}

.ka-shop-products ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}

.ka-shop-products ul.products li.product a img,
.ka-shop-card-media .ka-shop-card-img {
	width: 100% !important;
	height: 165px !important;
	object-fit: contain !important;
}

/* ---- Ürün kartı ---- */

.ka-shop-card {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 8px 26px rgba(31, 43, 70, .08);
	padding: 12px 12px 18px;
	display: flex;
	flex-direction: column;
	transition: transform .25s ease, box-shadow .25s ease;
	position: relative;
}

.ka-shop-card:hover {
	box-shadow: 0 18px 40px rgba(31, 43, 70, .16);
	transform: translateY(-4px);
}

.ka-shop-card[hidden] {
	display: none;
}

.ka-shop-card-media-link {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.ka-shop-card-media {
	position: relative;
	width: 100%;
	background: #faf4ea;
	border-radius: 12px;
	padding: 16px 14px;
}

.ka-shop-card-pill {
	position: absolute;
	top: 10px;
	left: 10px;
	background: #fff;
	color: var(--ka-magenta);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	padding: 4px 11px;
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba(31, 43, 70, .12);
	z-index: 1;
}

.ka-shop-card-img {
	width: 100%;
	height: 165px;
	object-fit: contain;
	display: block;
}

.ka-shop-card-text {
	padding: 14px 6px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	text-align: center;
}

.ka-shop-card-script {
	font-size: 22px;
	line-height: 1;
	color: var(--ka-magenta);
	min-height: 19px;
}

.ka-shop-card-name {
	font-size: 24px;
	line-height: 1.05;
	color: var(--ka-ink);
	letter-spacing: .02em;
}

.ka-shop-card-price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 5px;
	margin: 9px 0 14px;
	font-size: 20px;
	font-weight: 700;
	color: var(--ka-ink);
}

.ka-shop-card-price .woocommerce-Price-amount {
	font-size: 20px;
	font-weight: 700;
	color: var(--ka-ink);
}

.ka-shop-card-price del .woocommerce-Price-amount {
	font-size: 15px;
	font-weight: 400;
	color: var(--ka-faint);
}

.ka-shop-card-unit {
	font-size: 12.5px;
	color: var(--ka-faint);
}

/* ---- Miktar/gramaj pilleri ---- */

.ka-amount-pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-bottom: 8px;
}

.ka-amount-pill {
	border: 1.5px solid #ddd6ca;
	background: #fff;
	color: var(--ka-muted);
	border-radius: 999px;
	padding: 5px 12px;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.4;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.ka-amount-pill:hover:not(.is-active),
.ka-amount-pill:focus-visible:not(.is-active) {
	border-color: var(--ka-orange);
	color: var(--ka-orange-hover);
}

.ka-amount-pill.is-active {
	border-color: var(--ka-orange);
	background: var(--ka-orange);
	color: #fff;
}

.ka-amount-price {
	text-align: center;
	font-size: 17px;
	font-weight: 700;
	color: var(--ka-ink);
	margin-bottom: 10px;
}

.ka-amount-price .woocommerce-Price-amount {
	font-size: 17px;
	font-weight: 700;
	color: var(--ka-ink);
}

.ka-shop-oos {
	text-align: center;
	color: var(--ka-muted);
	font-weight: 600;
	font-size: 13px;
	margin: 0;
}

/* ---- Sepete Ekle / stepper ---- */

.ka-shop-card-atc {
	width: 100%;
}

.ka-shop-cartbox {
	width: 100%;
}

.ka-shop-atc-btn {
	width: 100%;
}

.ka-shop-atc-btn.is-hidden {
	display: none;
}

.ka-shop-atc-btn.loading,
.ka-shop-atc-btn.is-loading {
	opacity: .6;
	pointer-events: none;
}

.ka-amount-atc-btn[hidden],
.ka-shop-stepper[hidden] {
	display: none;
}

.ka-shop-stepper {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 1.5px solid var(--ka-orange);
	border-radius: 999px;
	padding: 5px 6px;
}

.ka-shop-stepper-dec,
.ka-shop-stepper-inc {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: none;
	font-size: 17px;
	font-weight: 700;
	transition: background-color .15s ease;
}

.ka-shop-stepper-dec {
	background: var(--ka-cream-3);
	color: var(--ka-orange-hover);
}

.ka-shop-stepper-dec:hover {
	background: #f6ddc2;
}

.ka-shop-stepper-inc {
	background: var(--ka-orange);
	color: #fff;
}

.ka-shop-stepper-inc:hover {
	background: var(--ka-orange-hover);
}

.ka-shop-stepper-qty {
	font-size: 15px;
	font-weight: 700;
	color: var(--ka-ink);
}

/* ---- Responsive ---- */

@media (max-width: 640px) {
	.ka-shop-hero-inner {
		padding: 34px 20px 30px;
	}

	.ka-shop-trust-inner {
		padding: 14px 20px;
		gap: 20px;
	}

	.ka-shop-products {
		padding: 34px 18px 70px;
	}

	.ka-shop-header-inner {
		padding: 12px 18px;
	}

	.ka-shop-link span:not([aria-hidden]) {
		display: none;
	}
}