/* EAP Produkt Manager — Frontend Styles
   Based on layout-reference.html. Oswald font is self-hosted via Elementor Pro. */

*, *::before, *::after {
	box-sizing: border-box;
}

.prdct-wrap {
	max-width: 1290px;
	margin: 0 auto;
	font-family: 'Oswald', sans-serif;
}

/* ── Brand bar ─────────────────────────────────────────── */

.prdct-brands-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 2rem;
	margin-bottom: 2rem;
	overflow: visible;
	background: linear-gradient(to right, transparent 0%, #ddd 20%, #ddd 80%, transparent 100%) bottom / 100% 1px no-repeat;
}

.prdct-brands {
	display: flex;
	gap: 3rem;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
	flex: 1;
	padding: 20px 10px;
	overflow: visible;
}

.prdct-scroll-btn {
	display: none;
	background: #85481a;
	border: none;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	cursor: pointer;
	flex-shrink: 0;
	color: #fff;
	padding: 0;
	position: relative;
}

.prdct-scroll-btn:hover,
.prdct-scroll-btn:focus,
.prdct-scroll-btn:active {
	background: #6a3814;
	outline: none;
	box-shadow: none;
}

.prdct-scroll-btn svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: block;
}

.prdct-brand-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	background: none !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	padding: 8px 8px 16px !important;
	cursor: pointer;
	min-width: 150px;
	position: relative;
	font-family: 'Oswald', sans-serif;
}

.prdct-brand-btn:hover,
.prdct-brand-btn:focus {
	background: none !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	color: inherit !important;
}

.prdct-brand-btn::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 2px;
	background: #85481a;
	border-radius: 2px;
	transition: width 0.3s ease;
}

.prdct-brand-btn.active::after {
	width: 60%;
}

.prdct-logo-wrap {
	width: 190px;
	height: 140px;
	overflow: visible;
	display: flex !important;
	align-items: center;
	justify-content: center;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	background: none !important;
	padding: 10px !important;
	margin: 0 !important;
}

.prdct-logo-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.6s ease;
	transform: scale(1);
}

.prdct-brand-btn:hover .prdct-logo-img {
	transform: scale(1.12);
}

.prdct-brand-btn span {
	font-size: 16px;
	color: #1a1a1a;
	font-weight: 500;
}

.prdct-brand-btn.active span {
	font-weight: 700;
}

.prdct-logo-placeholder {
	font-size: 14px;
	color: #999;
	text-align: center;
}

/* ── Product grid ──────────────────────────────────────── */

.prdct-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
}

/* ── Product card ──────────────────────────────────────── */

.prdct-card {
	background: #fff;
	border: none;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	padding: 0.75rem;
	position: relative;
	opacity: 1;
	transform: translateY(0);
	transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.prdct-card.out {
	opacity: 0;
	transform: translateY(32px);
	pointer-events: none;
}

.prdct-card.gone {
	display: none;
}

.prdct-card::after {
	display: none;
}

.prdct-card-img {
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	height: 320px;
	overflow: hidden;
	border-radius: 8px;
}

.prdct-card-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.7s ease;
	transform: scale(1);
}

.prdct-card:hover .prdct-card-img img {
	transform: scale(1.08);
}

.prdct-no-image {
	font-size: 13px;
	color: #bbb;
}

.prdct-card-body {
	padding: 0.75rem 0 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
	align-items: center;
}

.prdct-card-title {
	font-size: 17px;
	font-weight: 700;
	color: #1a1a1a;
	text-align: center;
	line-height: 1.45;
	font-family: 'Oswald', sans-serif;
}

.prdct-badge {
	display: inline-block;
	background: #85481a;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	padding: 6px 18px;
	border-radius: 999px;
	transition: background 0.3s ease;
	font-family: 'Oswald', sans-serif;
}

.prdct-card:hover .prdct-badge {
	background: #1a1a1a;
}

/* ── Responsive ────────────────────────────────────────── */

@media (max-width: 1024px) and (min-width: 769px) {
	.prdct-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
	}
	.prdct-card-img {
		height: 220px;
	}
	.prdct-logo-wrap {
		width: 168px;
		height: 126px;
	}
	.prdct-brand-btn {
		min-width: 170px;
	}
	.prdct-brands {
		justify-content: center;
	}
}

@media (max-width: 768px) {
	.prdct-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.prdct-scroll-btn {
		display: grid;
		place-items: center;
	}
	.prdct-brands {
		flex-wrap: nowrap;
		overflow-x: auto;
		justify-content: flex-start;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		gap: 0.5rem;
	}
	.prdct-brands::-webkit-scrollbar {
		display: none;
	}
	.prdct-brand-btn {
		min-width: 120px;
	}
	.prdct-logo-wrap {
		width: 120px;
		height: 90px;
	}
	.prdct-card-img {
		height: 200px;
	}
	.prdct-grid {
		gap: 16px;
	}
}

@media (max-width: 480px) {
	.prdct-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.prdct-card-img {
		height: 160px;
		padding: 1rem;
	}
	.prdct-card-title {
		font-size: 14px;
	}
	.prdct-badge {
		font-size: 14px;
		padding: 5px 14px;
	}
}

/* ── Related products slider ── */
.prdct-related-wrap {
	max-width: 1290px;
	margin: 0 auto;
}

.prdct-related-slider {
	overflow: hidden;
	cursor: grab;
	user-select: none;
}

.prdct-related-slider.grabbing,
.prdct-related-slider.grabbing * {
	cursor: grabbing !important;
}

.prdct-related-track {
	display: flex;
	gap: 24px;
	transition: transform 0.4s ease;
}

.prdct-related-card {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	padding: 1.25rem;
	flex: 0 0 calc(25% - 18px);
}

.prdct-related-card-img {
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	height: 340px;
	overflow: hidden;
	border-radius: 8px;
}

.prdct-related-card-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.7s ease;
}

.prdct-related-card:hover .prdct-related-card-img img {
	transform: scale(1.08);
}

.prdct-related-card-body {
	padding: 0.875rem 0 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
	align-items: center;
}

.prdct-related-card-title {
	font-size: 17px;
	font-weight: 700;
	color: #1a1a1a;
	text-align: center;
	line-height: 1.45;
	font-family: 'Oswald', sans-serif;
}

.prdct-related-wrapper {
	display: flex;
	align-items: center;
	gap: 28px;
}

.prdct-related-arrow {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: #85481a;
	cursor: pointer;
	position: relative;
	padding: 0;
	transition: background 0.3s ease;
}

.prdct-related-arrow:hover,
.prdct-related-arrow:focus,
.prdct-related-arrow:active {
	background: #6a3814;
	outline: none;
	box-shadow: none;
}

.prdct-related-arrow svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: block;
}

@media (max-width: 1024px) {
	.prdct-related-card { flex: 0 0 calc(50% - 12px); }
}

@media (max-width: 768px) {
	.prdct-related-arrow { width: 36px; height: 36px; }
	.prdct-related-card { flex: 0 0 100%; }
	.prdct-related-card-img { height: 200px; }
}

@media (max-width: 480px) {
	.prdct-related-arrow { width: 32px; height: 32px; }
	.prdct-related-card { flex: 0 0 100%; }
	.prdct-related-card-img { height: 160px; padding: 1rem; }
	.prdct-related-card-title { font-size: 14px; }
}

/* ── Search shortcode ── */

.prdct-search-wrap {
	position: relative;
	font-family: 'Sora', sans-serif !important;
}

.demfood-hero__controls {
	display: flex !important;
	flex-direction: column !important;
	gap: clamp(10px, 1.4vw, 14px) !important;
	max-width: 528px !important;
	min-width: 0 !important;
}

.demfood-hero__search {
	width: 100% !important;
	height: 42px !important;
	border-radius: 21px !important;
	border: 1px solid rgba(255, 255, 255, 0.55) !important;
	background: rgba(30, 10, 10, 0.38) !important;
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
	display: flex !important;
	align-items: center !important;
	padding: 0 7px 0 22px !important;
	overflow: hidden !important;
	box-shadow: none !important;
}

.demfood-hero__search-text {
	flex: 1 !important;
	min-width: 0 !important;
	font-size: 15px !important;
	color: #ffffff !important;
	font-family: 'Sora', sans-serif !important;
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	height: 100% !important;
}

.demfood-hero__search-text::placeholder {
	color: rgba(255, 255, 255, 0.7) !important;
}

.demfood-hero__search-icon {
	flex: none !important;
	width: 28px !important;
	height: 28px !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: default !important;
	pointer-events: none !important;
	margin: 4px 4px 4px auto !important;
}

.demfood-hero__buttons {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: clamp(14px, 1.6vw, 24px) !important;
}

.demfood-hero__btn {
	flex: 1 1 140px !important;
	min-width: 0 !important;
	height: 48px !important;
	border: none !important;
	border-radius: 24px !important;
	font-size: clamp(15.4px, 1.32vw, 17.6px) !important;
	font-weight: 500 !important;
	font-family: 'Archivo Narrow', sans-serif !important;
	cursor: pointer !important;
	transition: background 200ms ease, color 200ms ease !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-decoration: none !important;
	padding: 0 20px !important;
	box-shadow: none !important;
	outline: none !important;
}

.demfood-hero__btn--dark {
	background: #E51C20 !important;
	color: #ffffff !important;
}

.demfood-hero__btn--dark:hover,
.demfood-hero__btn--dark:focus {
	background: #ffffff !important;
	color: #E51C20 !important;
}

.demfood-hero__btn--light {
	background: #ffffff !important;
	color: #000000 !important;
}

.demfood-hero__btn--light:hover,
.demfood-hero__btn--light:focus {
	background: #E51C20 !important;
	color: #ffffff !important;
}

/* Search results dropdown — yukarı açılır, search box stiliyle uyumlu */
.prdct-search-results {
	position: absolute !important;
	bottom: calc(100% + 4px) !important;
	top: auto !important;
	left: 0 !important;
	width: 100% !important;
	max-width: 528px !important;
	background: rgba(30, 10, 10, 0.72) !important;
	backdrop-filter: blur(16px) !important;
	-webkit-backdrop-filter: blur(16px) !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	border-radius: 10px !important;
	box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.28) !important;
	z-index: 999 !important;
	/* 8 sonuç × ~44px satır yüksekliği */
	max-height: 352px !important;
	/* overflow-x'i de kısıtla; tek 'overflow' kuralı webkit scroll bar'ın
	   doğru render olmasını garantiler (overflow:hidden + overflow-y:auto
	   çakışması bazı tarayıcılarda özel bar'ı bastırıyordu). */
	overflow: hidden auto !important;
	/* iOS Safari momentum (akıcı) parmakla kaydırma */
	-webkit-overflow-scrolling: touch !important;
	/* Dikey pan dokunuşuna izin ver; liste sonuna gelince scroll zinciri
	   sayfaya taşmasın (mobilde liste içinde parmakla rahat gezme). */
	touch-action: pan-y !important;
	overscroll-behavior: contain !important;
	/* Firefox */
	scrollbar-width: thin !important;
	scrollbar-color: rgba(229, 28, 32, 0.6) transparent !important;
}

/* Webkit/Blink (Chrome, Edge, Safari) — tarayıcı varsayılanı yerine
   tasarımla uyumlu özel scroll bar. */
.prdct-search-results::-webkit-scrollbar {
	width: 8px !important;
	background: transparent !important;
}

.prdct-search-results::-webkit-scrollbar-track {
	background: transparent !important;
	margin: 6px 0 !important;
}

.prdct-search-results::-webkit-scrollbar-thumb {
	background: rgba(229, 28, 32, 0.55) !important;
	border-radius: 8px !important;
	/* İnce görünüm için thumb'ın etrafına şeffaf border — track içinde
	   ortalanmış, kenarlardan boşluklu bir bar verir. */
	border: 2px solid transparent !important;
	background-clip: content-box !important;
}

.prdct-search-results::-webkit-scrollbar-thumb:hover {
	background: rgba(229, 28, 32, 0.9) !important;
	background-clip: content-box !important;
}

.prdct-search-results::-webkit-scrollbar-corner {
	background: transparent !important;
}

/* Tablet ve mobil: en çok ~3 ürün gözüksün, gerisi scroll.
   Satır yüksekliği ~44px (6px+6px padding + 32px thumb). 3 × 44 ≈ 132px. */
@media (max-width: 1024px) {
	.prdct-search-results {
		max-height: 156px !important; /* ~3 sonuç + biraz nefes payı */
	}
}

.prdct-search-results[hidden] {
	display: none !important;
}

.prdct-search-result-item {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 6px 12px !important;
	text-decoration: none !important;
	color: #ffffff !important;
	transition: background 150ms ease !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
	background: transparent !important;
}

.prdct-search-result-item:last-child {
	border-bottom: none !important;
}

.prdct-search-result-item:hover,
.prdct-search-result-item:focus {
	background: rgba(229, 28, 32, 0.15) !important;
	color: #ffffff !important;
	outline: none !important;
}

.prdct-search-result-thumb {
	flex: none !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 6px !important;
	overflow: hidden !important;
	background: rgba(255, 255, 255, 0.1) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.prdct-search-result-thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
}

.prdct-search-result-info {
	flex: 1 !important;
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 1px !important;
}

.prdct-search-result-title {
	font-size: 12px !important;
	font-weight: 600 !important;
	color: #ffffff !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	line-height: 1.3 !important;
}

.prdct-search-result-meta {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
}

.prdct-search-result-brand {
	font-size: 10px !important;
	color: #E51C20 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	font-weight: 500 !important;
}

.prdct-search-result-weight {
	font-size: 10px !important;
	color: rgba(255, 255, 255, 0.45) !important;
	white-space: nowrap !important;
	flex-shrink: 0 !important;
}

.prdct-search-no-results {
	padding: 10px 12px !important;
	font-size: 12px !important;
	color: rgba(255, 255, 255, 0.6) !important;
	text-align: center !important;
	background: transparent !important;
}

/* ── Nutrition shortcode ── */
.prdct-nutrition-wrap {
	font-family: 'Oswald', sans-serif !important;
	font-size: 18px !important;
	color: #fff !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
}

/* Mobile-only header (title + "100g için" inline) — hidden on desktop */
.prdct-nutrition-mobile-header {
	display: none !important;
}

.prdct-nutrition-per {
	font-size: 16px !important;
	font-weight: 400 !important;
	opacity: 0.75 !important;
	color: #fff !important;
}

.prdct-nutrition-flex {
	display: flex !important;
	gap: 80px !important;
	width: 100% !important;
	max-width: 960px !important;
	margin: 0 auto !important;
}

.prdct-nutrition-col {
	flex: 1 1 0 !important;
	display: flex !important;
	flex-direction: column !important;
	min-width: 0 !important;
}

.prdct-nutrition-heading {
	font-size: 20px !important;
	font-weight: 600 !important;
	color: #fff !important;
	padding-bottom: 10px !important;
}

.prdct-nutrition-heading--right {
	text-align: right !important;
}

.prdct-nutrition-row {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	padding: 13px 0 !important;
}

.prdct-nutrition-row--border {
	border-bottom: 2px dashed rgba(255, 255, 255, 0.45) !important;
}

.prdct-nutrition-label {
	flex: 1 !important;
	color: #fff !important;
}

.prdct-nutrition-label--sub {
	padding-left: 16px !important;
	color: #ddd !important;
}

.prdct-nutrition-value {
	font-weight: 600 !important;
	white-space: nowrap !important;
	padding-left: 16px !important;
	color: #fff !important;
}

/* Tablet */
@media (max-width: 768px) {
	.prdct-nutrition-flex {
		gap: 40px !important;
	}

	.prdct-nutrition-heading {
		font-size: 17px !important;
	}

	.prdct-nutrition-wrap {
		font-size: 16px !important;
	}
}

/* Mobile — tek sütun, başlık satırında "100g için" */
@media (max-width: 520px) {
	.prdct-nutrition-mobile-header {
		display: flex !important;
		/* Full width so space-between pins the title left and "100g için" right;
		   the parent .prdct-nutrition-wrap has align-items:center, which would
		   otherwise shrink this header to content width and collapse the gap. */
		width: 100% !important;
		justify-content: space-between !important;
		align-items: baseline !important;
		padding-bottom: 10px !important;
	}

	.prdct-nutrition-flex {
		flex-direction: column !important;
		gap: 0 !important;
	}

	/* Desktop başlıkları mobilde gizle */
	.prdct-nutrition-heading--desktop {
		display: none !important;
	}

	.prdct-nutrition-col {
		flex: none !important;
		width: 100% !important;
	}

	.prdct-nutrition-wrap {
		font-size: 16px !important;
	}
}

/* ── Random products grid ([prdct_random_products]) ──────────
   Self-contained clone of the .prdct-card look, kept under its own
   .prdct-r* class names so script.js (which targets .prdct-card and
   .prdct-brand-btn) never touches this grid. No filter/entrance JS. */

.prdct-rwrap {
	max-width: 1290px;
	margin: 0 auto;
}

.prdct-rgrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
}

.prdct-rcard {
	background: #fff;
	border: none;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	padding: 0.75rem;
	position: relative;
}

.prdct-rcard-img {
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	height: 320px;
	overflow: hidden;
	border-radius: 8px;
}

.prdct-rcard-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.7s ease;
	transform: scale(1);
}

.prdct-rcard:hover .prdct-rcard-img img {
	transform: scale(1.08);
}

.prdct-rcard-body {
	padding: 0.75rem 0 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
	align-items: center;
}

.prdct-rcard-title {
	font-size: 17px;
	font-weight: 700;
	color: #1a1a1a;
	text-align: center;
	line-height: 1.45;
	font-family: 'Oswald', sans-serif;
}

.prdct-rcard:hover .prdct-badge {
	background: #1a1a1a;
}

@media (max-width: 1024px) and (min-width: 769px) {
	.prdct-rgrid {
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
	}
	.prdct-rcard-img {
		height: 220px;
	}
}

@media (max-width: 768px) {
	.prdct-rgrid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
	.prdct-rcard-img {
		height: 200px;
	}
}

@media (max-width: 480px) {
	.prdct-rgrid {
		grid-template-columns: repeat(2, 1fr);
	}
	.prdct-rcard-img {
		height: 160px;
		padding: 1rem;
	}
	.prdct-rcard-title {
		font-size: 14px;
	}
}