/**
 * ==========================================================
 * GM THEME v2
 * File: assets/css/components/product-card.css
 * Description: Ortak GM ürün kartı tasarımı
 *
 * Project: Güvencem Mobilya
 * Component: GM Product Card
 * Version: 1.1.0
 * Last Update: 16.08.2026
 * ==========================================================
 */


/* ==========================================================
   Kart ana yapısı
   ========================================================== */

.gm-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	height: 100%;

	padding:
		var(--gm-space-md)
		0
		var(--gm-space-lg);

	background: rgba(250, 250, 248, 0.42);

	color: var(--gm-color-text);

	font-family: var(--gm-font-family);
}


/* Üst ve alt editoryal çizgiler */

.gm-product-card::before,
.gm-product-card::after {
	position: absolute;
	left: 50%;

	width: 66.666%;
	height: 1px;

	background: rgba(32, 36, 42, 0.12);

	content: "";

	transform: translateX(-50%);
}

.gm-product-card::before {
	top: 0;
}

.gm-product-card::after {
	bottom: 0;
}


/* ==========================================================
   Görsel alanı
   ========================================================== */

.gm-product-card__media {
	position: relative;

	width: 100%;
	min-width: 0;
}

.gm-product-card__image-link {
	display: block;

	width: 100%;

	color: inherit;

	text-decoration: none;
}

.gm-product-card__image-frame {
	position: relative;

	width: 100%;

	aspect-ratio: 4 / 3;

	overflow: hidden;

	border-radius: var(--gm-radius-xs);

	background: var(--gm-color-background-muted);
}

.gm-product-card__image-element,
.gm-product-card__image-frame img {
	display: block;

	width: 100%;
	height: 100%;

	margin: 0;

	object-fit: cover;
	object-position: center;

	transition:
		transform
			var(--gm-motion-slow)
			var(--gm-motion-bounce),
		filter
			var(--gm-motion-normal)
			var(--gm-motion-smooth);
}

.gm-product-card:hover .gm-product-card__image-element,
.gm-product-card:hover .gm-product-card__image-frame img {
	transform: scale(1.025);
}


/* ==========================================================
   Fırsat rozeti
   ========================================================== */

.gm-product-card__badge {
	position: absolute;

	top: var(--gm-space-sm);
	left: var(--gm-space-sm);

	z-index: 3;

	display: inline-flex;
	align-items: center;

	min-height: 28px;

	padding:
		5px
		var(--gm-space-xs);

	border-radius: var(--gm-radius-xs);

	background: rgba(28, 35, 43, 0.88);

	color: var(--gm-color-white);

	font-size: 11px;
	font-weight: var(--gm-font-weight-medium);

	line-height: 1;

	letter-spacing: 0.06em;

	text-transform: uppercase;

	backdrop-filter: blur(8px);
}


/* ==========================================================
   Favori alanı
   ========================================================== */

.gm-product-card__wishlist {
	position: absolute;

	top: var(--gm-space-sm);
	right: var(--gm-space-sm);

	z-index: 4;

	display: flex;

	align-items: center;
	justify-content: center;
}

.gm-product-card__wishlist:empty {
	display: none;
}


/* ==========================================================
   İçerik alanı
   ========================================================== */

.gm-product-card__body {
	display: flex;

	flex: 1;

	flex-direction: column;

	align-items: flex-start;

	padding:
		var(--gm-space-md)
		var(--gm-space-2xs)
		0;
}


/* ==========================================================
   Ürün adı
   ========================================================== */

.gm-product-card__title {
	display: -webkit-box;

	width: 100%;

	min-height: 2.7em;

	margin: 0;

	overflow: hidden;

	color: var(--gm-color-text);

	font-size: clamp(17px, 1.25vw, 20px);

	font-weight: var(--gm-font-weight-medium);

	line-height: 1.35;

	letter-spacing: -0.025em;

	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

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

	font: inherit;

	text-decoration: none;

	transition:
		opacity
		var(--gm-motion-fast)
		var(--gm-motion-smooth);
}

.gm-product-card__title-link:hover {
	color: inherit;

	opacity: 0.72;
}


/* ==========================================================
   Fiyat
   ========================================================== */

.gm-product-card__price-area {
	display: flex;

	align-items: baseline;

	width: 100%;

	margin-top: var(--gm-space-sm);
}

.gm-product-card__price {
	color: var(--gm-color-text);

	font-size: clamp(17px, 1.2vw, 20px);

	font-weight: var(--gm-font-weight-medium);

	line-height: 1.3;

	letter-spacing: -0.025em;
}

.gm-product-card__price .price,
.gm-product-card__price .woocommerce-Price-amount {
	color: inherit;

	font: inherit;
}

.gm-product-card__price del {
	margin-right: 7px;

	color: rgba(32, 36, 42, 0.43);

	font-size: 0.78em;

	font-weight: var(--gm-font-weight-regular);

	text-decoration-thickness: 1px;
}

.gm-product-card__price ins {
	padding: 0;

	background: transparent;

	color: inherit;

	font-weight: var(--gm-font-weight-medium);

	text-decoration: none;
}

.gm-product-card__price small,
.gm-product-card__price .woocommerce-price-suffix {
	color: rgba(32, 36, 42, 0.54);

	font-size: 11px;

	font-weight: var(--gm-font-weight-regular);
}


/* ==========================================================
   İncele bağlantısı
   ========================================================== */

.gm-product-card__view-link {
	display: inline-flex;

	align-items: center;

	gap: var(--gm-space-xs);

	margin-top: auto;

	padding-top: var(--gm-space-md);

	color: rgba(32, 36, 42, 0.72);

	font-size: 13px;

	font-weight: var(--gm-font-weight-regular);

	line-height: 1.3;

	letter-spacing: 0.01em;

	text-decoration: none;

	transition:
		color
			var(--gm-motion-fast)
			var(--gm-motion-smooth),
		opacity
			var(--gm-motion-fast)
			var(--gm-motion-smooth);
}

.gm-product-card__view-link:hover {
	color: var(--gm-color-text);
}

.gm-product-card__view-icon {
	display: inline-block;

	transition:
		transform
		var(--gm-motion-normal)
		var(--gm-motion-bounce);
}

.gm-product-card__view-link:hover .gm-product-card__view-icon {
	transform: translateX(4px);
}


/* ==========================================================
   WooCommerce ve Blocksy sıfırlamaları
   ========================================================== */

.woocommerce ul.products li.product .gm-product-card,
.woocommerce-page ul.products li.product .gm-product-card {
	margin: 0;

	border: 0;

	border-radius: 0;

	box-shadow: none;
}

.woocommerce ul.products li.product .gm-product-card a,
.woocommerce-page ul.products li.product .gm-product-card a {
	text-decoration: none;
}

.woocommerce ul.products li.product .gm-product-card img,
.woocommerce-page ul.products li.product .gm-product-card img {
	width: 100%;

	margin: 0;

	border-radius: var(--gm-radius-xs);
}

.woocommerce ul.products li.product .gm-product-card__title,
.woocommerce-page ul.products li.product .gm-product-card__title {
	padding: 0;

	color: var(--gm-color-text);

	font-weight: var(--gm-font-weight-medium);
}

.woocommerce ul.products li.product .gm-product-card__price,
.woocommerce-page ul.products li.product .gm-product-card__price {
	display: block;

	margin: 0;

	color: var(--gm-color-text);
}


/* ==========================================================
   Klavye erişilebilirliği
   ========================================================== */

.gm-product-card a:focus-visible {
	outline: var(--gm-focus-ring);

	outline-offset: var(--gm-focus-ring-offset);
}


/* ==========================================================
   Mobil
   ========================================================== */

@media (max-width: 767px) {

	.gm-product-card {
		padding-top: var(--gm-space-md);
		padding-bottom: var(--gm-space-md);
	}

	.gm-product-card::before,
	.gm-product-card::after {
		width: 72%;
	}

	.gm-product-card__body {
		padding-top: var(--gm-space-md);
	}

	.gm-product-card__title {
		min-height: auto;

		font-size: 18px;

		line-height: 1.4;
	}

	.gm-product-card__price-area {
		margin-top: var(--gm-space-xs);
	}

	.gm-product-card__price {
		font-size: 18px;
	}

	.gm-product-card__view-link {
		padding-top: var(--gm-space-sm);

		font-size: 13px;
	}

	.gm-product-card__badge {
		top: var(--gm-space-xs);
		left: var(--gm-space-xs);
	}
}


/* ==========================================================
   Hareket azaltma tercihi
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

	.gm-product-card__image-element,
	.gm-product-card__image-frame img,
	.gm-product-card__title-link,
	.gm-product-card__view-link,
	.gm-product-card__view-icon {
		transition: none;
	}

	.gm-product-card:hover .gm-product-card__image-element,
	.gm-product-card:hover .gm-product-card__image-frame img,
	.gm-product-card__view-link:hover .gm-product-card__view-icon {
		transform: none;
	}
}


/* ==========================================================
   WooCommerce loop kabuğu ile kesin entegrasyon
   Eski tema seçicilerinin GM kart içeriğini yeniden
   boyutlandırmasını engeller.
   ========================================================== */

.woocommerce ul.products li.product.gm-product-loop-item,
.woocommerce-page ul.products li.product.gm-product-loop-item {
	display: flex !important;

	width: auto !important;
	min-width: 0 !important;

	height: auto !important;
	min-height: 0 !important;

	margin: 0 !important;
	padding: 0 !important;

	overflow: visible !important;

	border: 0 !important;

	background: transparent !important;

	box-shadow: none !important;

	text-align: left !important;
}

.woocommerce ul.products li.product.gm-product-loop-item
.gm-product-card__image-link,
.woocommerce-page ul.products li.product.gm-product-loop-item
.gm-product-card__image-link {
	display: block !important;

	width: 100% !important;
	height: auto !important;

	aspect-ratio: auto !important;

	overflow: visible !important;

	background: transparent !important;
}

.woocommerce ul.products li.product.gm-product-loop-item
.gm-product-card__image-frame,
.woocommerce-page ul.products li.product.gm-product-loop-item
.gm-product-card__image-frame {
	display: block !important;

	width: 100% !important;
	height: auto !important;

	aspect-ratio: 4 / 3 !important;

	overflow: hidden !important;
}

.woocommerce ul.products li.product.gm-product-loop-item
.gm-product-card__image-frame img,
.woocommerce-page ul.products li.product.gm-product-loop-item
.gm-product-card__image-frame img {
	display: block !important;

	width: 100% !important;

	min-width: 0 !important;
	max-width: none !important;

	height: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	aspect-ratio: auto !important;

	object-fit: cover !important;
	object-position: center !important;
}

.woocommerce ul.products li.product.gm-product-loop-item
.gm-product-card__price .price,
.woocommerce-page ul.products li.product.gm-product-loop-item
.gm-product-card__price .price {
	display: inline-flex !important;

	flex-wrap: wrap;

	align-items: baseline;

	gap:
		var(--gm-space-2xs)
		var(--gm-space-xs);

	margin: 0 !important;
	padding: 0 !important;

	color: inherit !important;

	font: inherit !important;

	text-align: left !important;

	white-space: normal !important;
}

.gm-product-card__price .gm-starting-label {
	color: rgba(32, 36, 42, 0.54);

	font-size: 0.65em;

	font-weight: var(--gm-font-weight-regular);

	letter-spacing: 0;
}