/* ============================================================================
 * Ürün kategori arşivi (taxonomy-urun-kategorisi.php) — "Hazır Yemek" ve tüm
 * urun-kategorisi terimleri. Yalnız bu sayfada enqueue edilir (is_tax); ana
 * sayfa/global CSS'e sızmaz. XD "Hazır Yemek" artboard'undan (native ~1920):
 * içerik container header'ın görünür içerik sütununa hizalı (search-button
 * sol -> EN-button sağ), 4 kolon, kutu 388×450 + kare görsel 388×388, yatay
 * gap 30px, dikey gap 70px. Responsive: tablet 3 kolon, mobil 2 kolon, çok dar
 * ekran 1 kolon (aşağıdaki media query'ler). Container hiçbir viewport'ta
 * yatay overflow üretmez.
 * ==========================================================================*/

.product-archive {
	/* Bottom spacing is balanced against the top pagination gap. The footer
	   adds its own 24px top margin (16px below 1100), so the visible
	   pagination -> red-panel gap = this padding-bottom + that footer margin;
	   padding-bottom is chosen so it equals the grid -> pagination gap set on
	   .product-archive__pagination. The site footer is tall enough that the
	   page always exceeds the viewport, so no min-height (which would inflate
	   this gap on the short page 2) is needed to keep the footer from floating. */
	padding-bottom: 40px;
}
/* Align the page content column to the approved header's visible content edges
   (search-button outer-left  ->  EN-button outer-right), tracking the header's
   OWN two desktop width formulas so the title, breadcrumb and grid land on the
   exact same left/right lines at every desktop width:
     >= 1601px : min(1640px, 100vw - 100px)   (header inner, padding 0)
     1101-1600 : 100vw - 209px                (header inner - 45 margin - 164 pad)
   Narrower widths (<=1100) get their own responsive container further down. */
.product-archive__inner {
	box-sizing: border-box;
	width: min(1640px, calc(100vw - 100px));
	margin: 0 auto;
}
@media (min-width: 1101px) and (max-width: 1600px) {
	.product-archive__inner {
		width: calc(100vw - 209px);
	}
}

/* ---- Başlık + breadcrumb ---- */
.product-archive__head {
	/* Shared interior-page header rhythm — tokens in main.css :root, which also
	   carry the tablet/mobile steps. The product detail page reads the same ones. */
	margin: var(--tada-page-head-top) 0 var(--tada-page-head-bottom);
}
.product-archive__title {
	margin: 0 0 10px;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 800;
	font-size: var(--tada-page-title-size);
	line-height: 1.1;
	color: #9e262d;
}
.product-archive__breadcrumb {
	font-size: 0;
}
.product-archive__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: #000000;
}
.product-archive__crumbs li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.product-archive__crumbs li:not(:last-child)::after {
	content: "›";
	font-weight: 500;
	color: #000000;
}
.product-archive__crumbs a {
	color: #000000;
	text-decoration: none;
	transition: color .2s ease;
}
.product-archive__crumbs a:hover,
.product-archive__crumbs a:focus-visible {
	color: var(--tada-red-active);
}
.product-archive__crumbs .is-current {
	color: #000000;
}

/* ---- Ürün grid'i (4 kolon, gap 30/70) ---- */
.product-archive__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 70px 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.product-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
}
.product-card__link:focus-visible {
	outline: 3px solid var(--tada-yellow);
	outline-offset: 4px;
	border-radius: 24px;
}
/* Beyaz kart kutusu 388×450, 1px border; kare görsel içeride 31px offset ile
   ortalanmış (contain — ambalajlar kendi relatif ölçeklerini korur). */
.product-card__media {
	display: block;
	position: relative;
	aspect-ratio: 388 / 450;
	background: var(--tada-white);
	border: 1px solid var(--tada-gray-200);
	border-radius: 24px;
	overflow: hidden;
}
.product-card__image {
	position: absolute;
	top: 6.9%; /* 31 / 450 */
	left: 0;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
	display: block;
	transform-origin: center;
}
/* Hover: ONLY the product package grows, inside its own clipped panel — the
   white box, title and weight never move and the card never scales/lifts, so
   there is no layout shift. Pointer/hover devices only. */
@media (hover: hover) and (pointer: fine) {
	.product-card__image {
		transition: transform .4s cubic-bezier(.4, 0, .2, 1);
	}
	.product-card__link:hover .product-card__image,
	.product-card__link:focus-visible .product-card__image {
		transform: scale(1.07);
	}
	/* Name turns TADA red while the image zooms. */
	.product-card__link:hover .product-card__title,
	.product-card__link:focus-visible .product-card__title {
		color: #9e262d;
	}
}
@media (prefers-reduced-motion: reduce) {
	.product-card__image { transition: none; }
	.product-card__link:hover .product-card__image,
	.product-card__link:focus-visible .product-card__image { transform: none; }
}
/* Product name. XD master is Bold 22px (instance scale = 1, so effective 22px at
   the 388px native card), but that reads oversized once the card scales down on
   real screens, so the size tracks the viewport — capped a touch under the XD
   value for a more compact look — and every card reserves ~2 lines so the weight
   baseline lines up across a row regardless of 1- vs 2-line names. */
.product-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 26px 0 0;
	min-height: 2.6em;
	text-align: center;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(15px, 1.05vw, 20px);
	line-height: 1.3;
	color: var(--tada-black);
	transition: color .25s cubic-bezier(.4, 0, .2, 1);
}
.product-card__weight {
	display: block;
	margin: 3px 0 0;
	text-align: center;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(12px, 0.78vw, 15px);
	line-height: 1.2;
	color: #9e262d;
}

/* ---- Pagination (native the_posts_pagination) ----
 * XD "Hazır Yemek" artboard: the pagination-button component master is 60×60 at
 * 1:1 on the native 1920 artboard (button pitch 75px -> 15px gap), the row
 * centered on the content column. A fixed 60px reads oversized on smaller
 * desktops (13.3") because the grid/cards scale down with the viewport while the
 * buttons would not — so the circle diameter tracks the viewport, staying a
 * touch under the XD native value for a compact look and never dropping below a
 * 44px touch target. Prev/next reuse the same circle with the theme's chevron. */
.product-archive__pagination {
	/* Grid -> pagination gap. Matches the pagination -> footer gap
	   (padding-bottom 40 + footer margin-top 24 = 64). */
	margin-top: 64px;
}
.product-archive__pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: clamp(10px, 0.65vw, 13px);
}
.product-archive__pagination .page-numbers {
	display: grid;
	place-items: center;
	width: clamp(44px, 3.2vw, 50px);
	height: clamp(44px, 3.2vw, 50px);
	border-radius: 50%;
	border: 1px solid var(--tada-gray-200);
	background: var(--tada-white);
	color: var(--tada-black);
	font-family: Montserrat, Arial, sans-serif;
	font-size: clamp(14px, 0.85vw, 16px);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
/* Prev/next chevron scales to the circle; colour inherits (dark, red on hover). */
.product-archive__pagination .page-numbers .product-archive__arrow {
	display: block;
	width: 75%;
	height: 75%;
}
.product-archive__pagination a.page-numbers:hover,
.product-archive__pagination a.page-numbers:focus-visible {
	border-color: #9e262d;
	color: #9e262d;
}
.product-archive__pagination .page-numbers.current {
	background: #9e262d;
	border-color: #9e262d;
	color: var(--tada-white);
}
.product-archive__pagination .page-numbers.dots {
	border: 0;
	background: transparent;
	width: auto;
}

.product-archive__empty {
	margin: 40px 0 80px;
	text-align: center;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 16px;
	color: var(--tada-gray-700);
}

/* ============================================================================
 * Marka arşivi ek alanları (taxonomy-marka.php). Grid/kart/pagination/başlık/
 * breadcrumb tümüyle kategori sayfasıyla ORTAK (yukarıdaki kurallar). Buradaki
 * tek fark, breadcrumb ile ürün listesi arasına giren marka tanıtım kartı ve
 * "Markanın Ürünleri" bölüm başlığı — XD/PNG marka referansına göre.
 * ==========================================================================*/
/* Layout is a 2-column CSS grid so the same markup reflows per breakpoint:
   - Desktop: logo on the left spanning both rows, with the titles AND the
     description stacked in the right column (description aligns under the
     titles, not back at the card's left edge).
   - Mobile: logo + titles share the top row, description spans full width
     beneath (see the <=768 override). */
.brand-intro {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"logo titles"
		"logo text";
	align-items: center;
	column-gap: 44px;
	row-gap: 14px;
	margin: 0 0 48px;
	padding: 40px 48px;
	background: var(--tada-white);
	border: 1px solid var(--tada-gray-200);
	border-radius: 24px;
	/* Standard card floor, tied to the fixed logo slot below (Tada Profesyonel's
	   approved geometry: 210x134.75 logo slot + this padding), so a brand with
	   little/no slogan-description text never renders shorter than this. A
	   brand with genuinely more text is still free to grow past it. */
	min-height: calc(2 * 40px + 2px + 210px * 77 / 120);
}
/* Fixed logo slot: every brand's logo — portrait, square, or landscape — is
   contained inside this exact box instead of rendering at its own natural
   size, so neither a tall nor a wide logo can resize the card. The aspect
   ratio matches Tada Profesyonel's reference logo (120x77) so that page's
   render is unchanged; other logos letterbox inside the same box instead of
   stretching or cropping. */
.brand-intro__logo {
	grid-area: logo;
	align-self: center;
	width: 210px;
	aspect-ratio: 120 / 77;
}
.brand-intro__logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.brand-intro__titles {
	grid-area: titles;
	align-self: end;
	min-width: 0;
}
.brand-intro__name {
	margin: 0 0 6px;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 800;
	font-size: 24px;
	line-height: 1.15;
	color: #9e262d;
}
.brand-intro__slogan {
	margin: 0;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.3;
	color: var(--tada-black);
}
.brand-intro__text {
	grid-area: text;
	align-self: start;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 400;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--tada-gray-700);
}
.brand-intro__text p {
	margin: 0 0 10px;
}
.brand-intro__text p:last-child {
	margin-bottom: 0;
}
/* Large desktop / native 1920 geometry: scale the intro card up so it stays
   proportional to the enlarged product grid, tracking the same >=1601 band the
   rest of the page uses. */
@media (min-width: 1601px) {
	.brand-intro {
		column-gap: 52px;
		row-gap: 16px;
		padding: 48px 60px;
		margin-bottom: 56px;
		min-height: calc(2 * 48px + 2px + 240px * 77 / 120);
	}
	.brand-intro__logo { width: 240px; }
	.brand-intro__name { font-size: 28px; }
	.brand-intro__slogan { font-size: 19px; }
}

/* ============================================================================
 * Responsive — tablet + mobil. Desktop (>=1101px) grid above tracks the header
 * content column; below 1100 the header is the hamburger layout, so this page
 * uses its own gutter-based container. Columns: 3 (tablet) / 2 (mobile) / 1
 * (very small). Card internals (square image panel, 2-line title area, weight)
 * are inherited; only sizing/gaps/column-count change per breakpoint.
 * ==========================================================================*/
@media (max-width: 1100px) {
	/* Footer margin-top is 16px here, so padding-bottom 36 + 16 = 52 = top gap. */
	.product-archive { padding-bottom: 36px; }
	.product-archive__inner { width: min(calc(100% - 48px), 1040px); }
	.product-archive__crumbs { font-size: 12px; }
	.product-archive__grid { grid-template-columns: repeat(3, 1fr); gap: 44px 24px; }
	.product-card__title { font-size: 16px; min-height: 2.6em; margin-top: 22px; }
	.product-card__weight { font-size: 13px; }
	/* Circle size/font are governed by the clamp() above (44px floor). */
	.product-archive__pagination { margin-top: 52px; }
	/* Brand intro: keep the desktop 2-column grid, just tighten spacing/sizes. */
	.brand-intro {
		column-gap: 28px;
		row-gap: 12px;
		padding: 32px 36px;
		margin-bottom: 40px;
		min-height: calc(2 * 32px + 2px + 170px * 77 / 120);
	}
	.brand-intro__logo { width: 170px; }
	.brand-intro__name { font-size: 22px; }
	.brand-intro__slogan { font-size: 16px; }
}

@media (max-width: 768px) {
	/* Footer margin-top is 16px here, so padding-bottom 28 + 16 = 44 = top gap. */
	.product-archive { padding-bottom: 28px; }
	.product-archive__inner { width: calc(100% - 32px); }
	.product-archive__grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
	.product-card__media { border-radius: 18px; }
	.product-card__link:focus-visible { border-radius: 18px; }
	.product-card__title { -webkit-line-clamp: 3; min-height: 3.9em; margin-top: 16px; font-size: 15px; }
	.product-card__weight { font-size: 12px; }
	/* Circle keeps its 44px clamp floor -> touch target stays >=44x44. */
	.product-archive__pagination { margin-top: 44px; }
	/* Brand intro: logo + titles share the top row; the description spans the
	   full width below (reflow the grid areas). */
	.brand-intro {
		grid-template-areas:
			"logo titles"
			"text text";
		align-items: center;
		column-gap: 16px;
		row-gap: 18px;
		padding: 22px;
		border-radius: 18px;
		margin-bottom: 28px;
		min-height: calc(2 * 22px + 2px + 116px * 77 / 120);
	}
	.brand-intro__titles { align-self: center; }
	.brand-intro__logo { width: 116px; }
	.brand-intro__name { font-size: 19px; margin-bottom: 4px; }
	.brand-intro__slogan { font-size: 14px; }
}

/* Very small screens only: drop to a single readable column. */
@media (max-width: 360px) {
	.product-archive__grid { grid-template-columns: 1fr; gap: 22px; }
	.product-card__title { -webkit-line-clamp: 2; min-height: 2.6em; }
}

/* ============================================================================
 * Ürün grid'i — kart bazlı reveal sıralaması (Faz 4).
 *
 * Same shape as the homepage's "Kategorilerimiz" rule (main.css, "per-card
 * reveal ordering"): every card carries its OWN `data-animate="fade-up"`
 * rather than sitting inside a `data-animate="stagger"` container, for two
 * reasons that both matter on a 16-per-page archive:
 *   1. A stagger container reveals ALL of its children the moment the
 *      container first intersects — on a grid four rows tall that means rows
 *      the visitor has not scrolled to yet burn their animation off-screen.
 *      Per-card observation means each row reveals as it actually arrives.
 *   2. main.js shrinks a stagger container's step to fit a 650ms budget
 *      (STAGGER_TOTAL_MAX), so 16 children would collapse the 80ms step to
 *      ~43ms and the requested rhythm would be lost.
 * The trade-off is that the left-to-right offset inside a row has to come
 * from CSS, which is what these rules are.
 *
 * The modulus is the column count the grid ACTUALLY renders at each band (see
 * the grid-template-columns rules above), not a fixed 4 — otherwise the cycle
 * would restart mid-row and the flow would read diagonally instead of left to
 * right:
 *   >= 1101px : 4 columns -> 0 / 80 / 160 / 240ms
 *   769-1100  : 3 columns -> 0 / 80 / 160ms
 *   <= 768    : 2 columns (1 below 361) -> no offset; every card starts
 *               immediately, so a long mobile list never queues up behind a
 *               growing delay.
 * 240ms max is well inside the shared 650ms stagger budget.
 *
 * Only the <li> animates. The image/title/weight inside it are never separate
 * reveal targets, and `.is-anim-done` (main.js, on animationend) drops the
 * animation entirely so the card's own hover transitions are untouched.
 * ==========================================================================*/
@media (min-width: 769px) and (max-width: 1100px) {
	.tada-anim .product-archive__grid > .product-card:nth-child(3n+2) { --tada-anim-delay: 80ms; }
	.tada-anim .product-archive__grid > .product-card:nth-child(3n+3) { --tada-anim-delay: 160ms; }
}

@media (min-width: 1101px) {
	.tada-anim .product-archive__grid > .product-card:nth-child(4n+2) { --tada-anim-delay: 80ms; }
	.tada-anim .product-archive__grid > .product-card:nth-child(4n+3) { --tada-anim-delay: 160ms; }
	.tada-anim .product-archive__grid > .product-card:nth-child(4n+4) { --tada-anim-delay: 240ms; }
}