/* ============================================================================
 * TADA — Single Product Detail page (desktop). Sprint 01: managed content +
 * pixel-perfect desktop. Tablet/mobile refinement is a later sprint; a minimal
 * safe stack below 1100px only prevents horizontal overflow for now.
 * All selectors are scoped to .product-detail / .product-detail-main so nothing
 * leaks to other templates. Brand red is #9e262d (project-wide); the right
 * panel is a fixed light grey (#f4f4f4) at the client's request.
 * ==========================================================================*/

.product-detail-main {
	/* Match the category archive's space above the footer (40px padding + the
	   footer's own 24px top gap = 64px total). */
	padding-bottom: 40px;
}
/* Every weight used (Montserrat 400/600/700/800, Baloo 2 800) is a real
   self-hosted face, so forbid the browser from faux-bolding/italicising. */
.product-detail {
	font-synthesis: none;
}

/* Same two desktop width formulas as the product archive so the title,
   breadcrumb and panel land on the exact header/footer content lines. */
.product-detail__inner {
	width: min(1640px, calc(100vw - 100px));
	margin: 0 auto;
}
@media (min-width: 1101px) and (max-width: 1600px) {
	/* Metrik şeridi: 3 kutuyu tek satırda taşıyabilsin.
	   Ölçüm (klon yöntemi, gerçek DOM bağlamı): "Dakikada Hazır" tek satır için
	   87.5px istiyor. Eski değerlerle (width 47.8481%, column-gap 7.9365%)
	   1440'ta kutu başına yalnızca 79.5px düşüyordu — 3 × 87.5 + 2 × 22.5 =
	   307.5 > 283.5 — ve etiket ikiye kırılıyordu. Oysa foot satırında 32.5px
	   kullanılmayan alan duruyordu: sorun yer yokluğu değil, şeridin kendi iç
	   boşluğunun (2 × 22.5px) alanı yemesiydi. 50% + 3.5% ile 1440'ta kutu
	   91.8px, 1600'de 103.8px → tek satır. ≥1601 (1920 dahil) bu bloğun DIŞINDA
	   ve taban değerleriyle kalıyor; orada etiket zaten tek satırdı. CTA
	   sütununun genişliği ve düğme tasarımı değişmedi. */
	.product-detail__highlights {
		width: 50%;
		column-gap: 3.5%;
	}
	.product-detail__inner {
		width: calc(100vw - 209px);
	}
}

/* ---- Heading + breadcrumb ---- */
/* Same head rhythm as the category archive (56px above the title, 10px
   title→breadcrumb via the title's own margin, 40px breadcrumb→panel) so every
   page shares one breadcrumb block. The first-fold min-height offsets below are
   tuned to this taller head. */
.product-detail__head {
	/* Shared interior-page header rhythm — the same main.css :root tokens the
	   product category archive reads, so header→H1→breadcrumb→card lands on one
	   system at every breakpoint (product-archive.css is not loaded here, which is
	   why this is a token rather than a shared selector). */
	margin: var(--tada-page-head-top) 0 var(--tada-page-head-bottom);
}
.product-detail__page-title {
	margin: 0 0 10px;
	font-family: Montserrat, Arial, sans-serif;
	/* Flat size (not clamp): keeps the head block height — and thus the panel's
	   top edge — constant across desktop widths, which the two first-fold
	   min-height formulas below depend on. Token-driven so it is literally the
	   category page's title scale, per breakpoint, rather than a copy of it. */
	font-size: var(--tada-page-title-size);
	font-weight: 800;
	line-height: 1.1;
	color: #9e262d;
}
/* Breadcrumb mirrors the approved category-archive breadcrumb token-for-token
   (Montserrat 13/700 gray-700, "›" separator 500/gray-400, hover→black,
   current→black) so the two pages read as one system. Same values, not shared
   selectors. */
.product-detail__breadcrumb {
	font-size: 0;
}
.product-detail__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-detail__crumbs li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.product-detail__crumbs li:not(:last-child)::after {
	content: "›";
	font-weight: 500;
	color: #000000;
}
.product-detail__crumbs a {
	color: #000000;
	text-decoration: none;
	transition: color .2s ease;
}
.product-detail__crumbs a:hover,
.product-detail__crumbs a:focus-visible {
	color: var(--tada-red-active);
}
.product-detail__crumbs .is-current {
	color: #000000;
}

/* ============================================================================
 * PANEL GEOMETRY — XD "Hazır Yemek – Detay", card 1641×733 at the 1920 artboard.
 *
 * How this scales (the rule for everything below this line):
 *   • Horizontal geometry (column split, paddings, the nutrition card width) is
 *     expressed as a PERCENTAGE of the card, so it is exactly proportional at
 *     every width with a single value. Percentage padding resolves against the
 *     containing block's WIDTH — including padding-top — which is what makes the
 *     vertical insets scale with the card too.
 *   • Local box geometry (pill height, button height, table row height, icon
 *     dots) is expressed in `em` against that element's own scaled font-size, so
 *     it tracks the type without a second formula.
 *   • Type is the only thing needing a viewport formula, because font-size has
 *     no percentage basis. The card width is a known linear function of the
 *     viewport, so an XD value V renders exactly proportional as
 *       card = 100vw - 209px  (1101–1600)  →  calc(V*100/1641·vw - V*209/1641·px)
 *       card = 100vw - 100px  (≥1601)      →  calc(V*100/1641·vw - V*100/1641·px)
 *     each wrapped in clamp() with a readability floor and the XD value as the
 *     ceiling. Base rules carry the 1101–1600 form (which collapses to the floor
 *     below 1101); the ≥1601 block at the bottom of this section overrides it.
 *     Deliberately NOT a single `--scale` custom property — see the warning at
 *     assets/css/pages/recipe-detail.css:13 about nested calc(var(calc())).
 *
 * Consequence to keep in mind: type reaches its floor around 1400–1500, so the
 * card is pixel-exact to XD at ≥1740 and progressively type-heavy below that.
 * The card height rule absorbs it (see `min-height` below).
 * ==========================================================================*/
.product-detail__panel {
	display: grid;
	/* XD: 891px content column + 750px visual column of 1641. */
	grid-template-columns: 54.2962% 45.7038%;
	/* XD card height 733 of 1641 (44.6679%). `min-height` rather than a fixed
	   height so the card is exactly the XD proportion for every product whose
	   tallest tab fits it, and grows only for the few that don't — measured over
	   the client's 111-product sheet, 104 fit. Combined with the stacked tab
	   panels below, this is what keeps the height from changing on tab switch. */
	min-height: calc(44.6679vw - 93.3559px);
	background: var(--tada-white);
	border: 1px solid #eaeaea;
	border-radius: clamp(24px, calc(3.0469vw - 6.3681px), 50px);
	box-shadow: var(--tada-shadow-soft);
	overflow: hidden;
}

/* Left content column. XD insets: 55 top, 50 left/right/bottom of the 891 column
   — reproduced exactly in the ≥1601 block. Below that the card's own frame and
   the internal gaps run a touch tighter (and the nutrition row floor a touch
   shorter) so the whole section still lands inside the first screen on short
   laptops. That trade is taken INSIDE the card on purpose: the page's head/
   breadcrumb rhythm is shared with the category archive and is not ours to
   compress here. */
.product-detail__body {
	display: flex;
	flex-direction: column;
	padding: 5.1% 5.6117% 4.6%;
	min-width: 0;
}
/* XD: 180×40 pill, r20, 18px side padding, 5px dot, 10px dot→text gap — all of
   which are exact multiples of the 16px label, so `em` reproduces them. */
.product-detail__category-pill {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	height: 2.5em;
	padding: 0 1.125em;
	gap: 0.625em;
	background: #9e262d;
	color: var(--tada-white);
	border-radius: 999px;
	font-size: clamp(12px, calc(0.9750vw - 2.0378px), 16px);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: background-color .2s ease;
}
/* No hover state on the category pill (it stays solid red). Global
   :focus-visible still supplies the keyboard focus outline. */
.product-detail__category-dot {
	flex: 0 0 auto;
	width: 0.3125em;
	height: 0.3125em;
	border-radius: 50%;
	background: currentColor;
}
.product-detail__title {
	/* XD: Baloo 2 ExtraBold 72px, pill bottom → title baseline 78px. */
	margin: 2.1000% 0 0;
	font-family: "Baloo 2", Arial, sans-serif;
	font-size: clamp(34px, calc(4.3876vw - 9.1700px), 72px);
	font-weight: 800;
	line-height: 1.04;
	color: var(--tada-black);
}

/* Tabs. XD lays the four labels across exactly the 790px content width with
   ~97px between them — which is what `space-between` produces for these four
   strings at 18px, so the distribution is the reference's, not an invention. */
.product-detail__tablist {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	/* `gap` is only the fallback spacing used when the bar has to wrap; keeping it
	   small is what lets all four labels stay on one row down to ~1101. */
	gap: 10px 12px;
	border-bottom: 1px solid #eaeaea;
	margin-top: 1.3500%;
}
.product-detail__tab {
	position: relative;
	padding: 0 0 0.8889em;
	background: none;
	border: 0;
	font-family: Montserrat, Arial, sans-serif;
	font-size: clamp(14px, calc(1.0969vw - 2.2925px), 18px);
	font-weight: 600;
	line-height: 1;
	color: #000000;
	cursor: pointer;
	transition: color .2s ease;
}
/* XD draws the active indicator as a 1px red line sitting exactly on the 1px
   grey rule (both at the same y), not as a thicker bar below it. */
.product-detail__tab::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: #9e262d;
	transform: scaleX(0);
	transition: transform .2s ease;
}
.product-detail__tab.is-active {
	color: #9e262d;
}
.product-detail__tab.is-active::after {
	transform: scaleX(1);
}
.product-detail__tab:hover {
	color: #9e262d;
}

/* Every tab panel occupies the SAME grid cell, so the block is always as tall as
   the tallest tab and switching tabs cannot resize the card. The inactive ones
   keep the native `hidden` attribute (so the markup still degrades correctly
   without CSS, and main.js's existing toggle is untouched) but are re-shown as
   `display:block` and hidden with `visibility` instead — which keeps them out of
   the accessibility tree and out of the tab order while still occupying space. */
.product-detail__tabpanels {
	display: grid;
	margin-top: 2.1500%;
}
.product-detail__tabpanel {
	grid-area: 1 / 1;
	outline: none;
}
.product-detail__tabpanel[hidden] {
	display: block;
	visibility: hidden;
}
/* Tab-switch entry. Reuses the site's own `tada-fade-up` keyframe (main.css,
   "Scroll reveal system") rather than introducing a second motion vocabulary —
   short, because this is a UI response to a click, not a scroll reveal.

   Deliberately on the PANEL and nothing inside it: no per-heading, per-row or
   per-pill motion, so a table of 12 nutrition rows arrives as one block.
   It cannot shift layout — every panel already shares one grid cell (above), so
   the panels block is permanently as tall as the tallest tab and only opacity/
   transform change here.

   Gated on `.tada-anim`, the same <html> class the reveal system uses, which is
   only present when JS runs AND prefers-reduced-motion is not "reduce" —
   reduced-motion users get an instant, motionless swap. The class is added by
   assets/js/product-detail.js, on switch only; the first panel never animates. */
.tada-anim .product-detail__tabpanel.is-tab-entering {
	animation: tada-fade-up 150ms var(--tada-anim-ease) both;
}
/* The red heading inside each panel (XD: 18px #9e262d — "İçindekiler:",
   "Alerjenler", "Besin Değerleri (100g)", "Kullanım ve Saklama Koşulları"). */

.product-detail__tab-title {
	margin: 0 0 0.7067em;
	font-family: Montserrat, Arial, sans-serif;
	/* XD sets this at 18px, but the site runs its sub-headings at a fixed 15px
	   (cf. .recipe-hero__ingredients-title) and its body copy at a fixed 12.5px.
	   Everything INSIDE a tab panel follows the site scale rather than the
	   reference's literal type — the reference's BOX geometry (card, table, pills,
	   row pitch) is still reproduced exactly. Fixed, not clamped, for the same
	   reason the rest of the site fixes these sizes. */
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: #9e262d;
}
.product-detail__rte {
	color: #000000;
	/* The site's established small-paragraph size (.about-hero__description,
	   .recipe-card__excerpt, .home-catalog__description all use it). */
	font-size: 12.5px;
	line-height: 1.6;
	font-weight: 500;
}
.product-detail__rte p {
	margin: 0 0 12px;
}
.product-detail__rte p:last-child {
	margin-bottom: 0;
}
.product-detail__rte strong,
.product-detail__rte b {
	color: #9e262d;
	font-weight: 700;
}
/* XD draws the Kullanım ve Saklama lines as plain indented text, but they are a
   list and the client asked for visible markers — so they use the site's
   established bullet (6px red dot, 16px indent) from .recipe-hero__ingredients-list
   / .recipe-tips rather than a browser default disc. */
.product-detail__rte ul,
.product-detail__rte ol {
	margin: 0 0 12px;
	padding-left: 0;
	list-style: none;
}
.product-detail__rte ul li,
.product-detail__rte ol li {
	position: relative;
	margin: 0 0 10px;
	padding-left: 16px;
}
.product-detail__rte ul li:last-child,
.product-detail__rte ol li:last-child {
	margin-bottom: 0;
}
.product-detail__rte ul li::before,
.product-detail__rte ol li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #000000;
}
.product-detail__rte a {
	color: #9e262d;
	text-decoration: underline;
}

/* Allergen — two groups: direct (solid red pills) + trace amount (the same red
   at 30% alpha, per XD, with black text and dot). XD pill: h35, r20, 18px side
   padding, 5px dot, 10px dot→text gap, 15px between pills, at a 14px label. */
.product-detail__allergen-group + .product-detail__allergen-group {
	margin-top: 3.7927%;
}
.product-detail__allergen-heading {
	margin: 0 0 1.52em;
	font-size: 12.5px;
	line-height: 1.6;
	font-weight: 400;
	color: #000000;
}
.product-detail__allergens {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2em;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12.5px;
}
.product-detail__allergen {
	display: inline-flex;
	align-items: center;
	/* XD pill box (35 tall, 18px side padding, 10px dot gap) on the site's 12.5px
	   label instead of the reference's 14px. The HEIGHT is card-proportional (box
	   geometry), not em — the type is fixed now, so tying the box to it would stop
	   the pill shrinking with the card. */
	height: clamp(26px, calc(2.1328vw - 4.4576px), 35px);
	padding: 0 1.44em;
	gap: 0.8em;
	background: #9e262d;
	border-radius: 999px;
	font-size: 1em;
	font-weight: 500;
	line-height: 1;
	color: var(--tada-white);
}
/* Leading dot (vertically centred), inheriting the pill's text colour:
   white on the red group, black on the trace group. */
.product-detail__allergen::before {
	content: "";
	flex-shrink: 0;
	width: 0.4em;
	height: 0.4em;
	border-radius: 50%;
	background: currentColor;
}
.product-detail__allergen--trace {
	background: rgb(158 38 45 / 30%);
	color: #000000;
}

/* Nutrition footnote — XD: 14px, 24px below the table card. */
.product-detail__nutrition-footnote {
	margin: 1.0667em 0 0;
	font-size: 12px;
	line-height: 1.4;
	font-weight: 400;
	color: #000000;
}
/* Single-value tables read as a label→value list: hide the header row
   visually but keep it for screen readers. */
.product-detail__nutrition--simple thead {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Nutrition table.
   XD draws the single-column case as a 440×279 white card (r15, 1px #eaeaea)
   holding eight 35px rows separated by 1px hairlines — no outer grid, no header
   band, labels left at 15px, values right-aligned 20px from the card's right
   edge. 440 of the 791px content column is 55.6258%. Multi-column tables (a
   product with both "100 g" and "porsiyon" columns) keep the visible header row
   and stay full width with a scroll wrapper. */
.product-detail__table-wrap {
	overflow-x: auto;
}
.product-detail__table-wrap--card {
	width: 55.6258%;
	border: 1px solid #eaeaea;
	/* Not scaled: at the narrowest desktop this would round to 11px, which is
	   visually indistinguishable, and a fluid radius on a 1px-bordered box
	   shimmers as the width changes. */
	border-radius: 15px;
	overflow: hidden;
}
.product-detail__nutrition {
	border-collapse: collapse;
	width: 100%;
	font-size: 12.5px;
	/* 24px leading (XD) is restored in the ≥1601 block; below that the table runs
	   on tighter leading so the eight rows fit the shorter card. */
	line-height: 1.75;
	color: #000000;
}
.product-detail__nutrition th,
.product-detail__nutrition td {
	border: 1px solid var(--tada-gray-200);
	padding: 9px 14px;
	text-align: left;
	font-weight: 500;
}
.product-detail__nutrition thead th {
	background: var(--tada-gray-100);
	font-weight: 700;
}
.product-detail__nutrition tbody th {
	font-weight: 600;
}

/* ---- Single-column (card) presentation ---- */
.product-detail__nutrition--simple th,
.product-detail__nutrition--simple td {
	/* XD row pitch 35px; the card's own 1px border makes up the 279px total, so
	   the row box is 34.5 rather than a flat 35. Card-proportional for the same
	   reason as the allergen pill above — the cell type is fixed at the site's
	   12.5px, so the row box has to scale on its own. */
	height: clamp(22px, calc(2.1024vw - 4.3941px), 34.5px);
	padding: 0;
	border: 0;
	border-bottom: 1px solid #eaeaea;
	font-weight: 500;
	vertical-align: middle;
}
.product-detail__nutrition--simple tbody tr:last-child th,
.product-detail__nutrition--simple tbody tr:last-child td {
	border-bottom: 0;
}
.product-detail__nutrition--simple tbody th {
	padding-left: 3.4091%;
	/* XD sets the row LABELS in Montserrat Bold and only the values in Medium. */
	font-weight: 700;
}
/* XD writes every row label as "Enerji :" — decoration, not data, so it is
   generated rather than baked into the editable label. */
.product-detail__nutrition--simple tbody th::after {
	content: " :";
}
/* A label the editor typed as "- Doymuş Yağ" is a sub-item of the row above it;
   the template strips the dash and re-adds it here so it can never be mistaken
   for a minus sign in the value. */
.product-detail__nutrition--simple tbody th.is-sub::before {
	content: "- ";
}
.product-detail__nutrition--simple td {
	padding-right: 4.5455%;
	text-align: right;
	white-space: nowrap;
}
.product-detail__nutrition-note {
	margin-top: 12px;
	font-size: 13.5px;
}

/* Foot: highlights + actions, pinned to the bottom of the content column */
.product-detail__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	/* Below the ≥1601 tier the type sits on its readability floors, so the
	   em-based XD widths stop shrinking with the card and the highlights + the
	   two buttons would wrap onto separate rows well before the card is actually
	   too narrow for them. The tighter gaps and content-sized buttons here hold
	   the reference's single row down to ~1300; the ≥1601 block restores the
	   exact XD 180/140 buttons and 30px gaps. */
	gap: 14px;
	margin-top: auto;
	padding-top: 8px;
}
/* Fixed, equal item width (centred content) so the values sit centred over
   their labels and all four align; long labels ("Dakikada Hazır", "Katkı
   Maddesi") wrap to two lines naturally while short ones stay on one — driven
   by width, not per-string hardcoding. XD's four centres sit ~102px apart, which
   a 72px box + 30px gap reproduces (the fourth lands 9px short of XD because the
   reference nudged it by hand — flagged rather than hardcoded per string). */
/* The figure block and the two buttons are sized as PERCENTAGES of the foot row
   (= the content column), not in `em` off their own floored type — that is what
   keeps the whole block at XD's proportions at every desktop width instead of
   only at ≥1601. XD, of the 790px content column: four 72px columns 30px apart
   (378 total) and 180 + 30 + 140 (350 total). `min-width: min-content` is the
   only guard: below ~1450 the proportional column would be narrower than the
   word "Dakikada" at the 11px type floor, so from there the columns stop
   shrinking rather than letting the label spill into its neighbour. */
.product-detail__highlights {
	/* Üç SABİT slot. Veri dinamik (0–3 satır) ama mizanpaj değil: iki metrik
	   kaldığında kalan öğeler genişleyip alanı paylaşmıyor, ilk iki slotta
	   soldaki yerlerini koruyor; bir metrikte yalnız ilk slot doluyor.
	   `repeat(3, 1fr)` bunu DOM'a boş placeholder eklemeden çözüyor — üçüncü
	   kolon veri olmadığında da grid geometrisinde duruyor.
	   Üç metrikli hâl eski flex düzenle birebir aynı ölçüyü veriyor
	   (1fr = minmax(auto,1fr), yani flex:1 1 0 + min-width:min-content ile
	   aynı davranış), dolayısıyla onaylı masaüstü görünümü değişmiyor. */
	display: grid;
	/* `1fr` yerine `minmax(min-content, 1fr)`: slot sayısı yine SABİT ÜÇ ve
	   1–2 metrikte kalanlar soldaki yerini koruyor, ama artık hiçbir track
	   kendi içeriğinin altına inemiyor. Gerekçe: birim "g" → "gram" olunca
	   ağırlık değeri genişledi ve eşit `1fr` payı ("200 gram" 85.7px isterken
	   pay 78.2px) metni slotun dışına taşırıyordu; dar değerler ("0", "343")
	   ise kendi payını kullanmıyordu. minmax ile geniş track ihtiyacı kadar
	   büyüyor, dar iki track farkı karşılıyor. */
	grid-template-columns: repeat(3, minmax(min-content, 1fr));
	width: 47.8481%;
	column-gap: 7.9365%;
	row-gap: 2.5em;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: clamp(11px, calc(0.7313vw - 1.5283px), 12px);
}

/* ---- Metrik şeridi 1101–1600: üç kutu tek satırda ----
   Ölçüm (klon yöntemi, gerçek DOM bağlamında): "Dakikada Hazır" tek satır için
   87.5px istiyor. Taban değerlerle (width 47.8481%, column-gap 7.9365%) 1440'ta
   kutu başına yalnızca 79.5px düşüyordu — 3 × 87.5 + 2 × 22.5 = 307.5 > 283.5 —
   ve etiket ikiye kırılıyordu. Oysa foot satırında 1440'ta 32.5px, 1366'da
   118.8px KULLANILMAYAN alan duruyordu: sorun yer yokluğu değil, şeridin sabit
   yüzde genişliği + kendi iç boşluğuydu.
   Çözüm sabit bir yüzde değil: şerit foot satırındaki artan alanı alıyor
   (`flex: 1 1 auto`), CTA sütunu kendi genişliğinde sabit kalıyor
   (`flex: 0 0 auto`). Hem alan tam kullanılıyor hem de sabit yüzdenin ~1200
   civarında foot'u iki satıra kırma riski doğmuyor.
   ~1300'ün altında yatay alan gerçekten yetmiyor; orada etiket doğal olarak iki
   satıra iniyor — zorlama `nowrap` uygulanmadı.
   ≥1601 (1920/2560/3440) bu bloğun DIŞINDA, taban değerleriyle birebir
   korunuyor; orada etiket zaten tek satırdı. */
@media (min-width: 1101px) and (max-width: 1600px) {
	.product-detail__highlights {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
		column-gap: 3.5%;
	}
	.product-detail__actions {
		flex: 0 0 auto;
	}
}
.product-detail__highlight {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	/* Şerit TEK SATIR, en fazla üç öğe (müşteri revizesi 2026-08-25).
	   Eskiden `flex: 1 1 min(150px, 45%)` idi: 150px'lik taban genişlik yüzünden
	   377.8px'lik şeride üçüncü öğe sığmıyor, 2+1 kırılıyor ve yetim kalan öğe
	   tek başına tüm satırı kaplıyordu (ölçüldü: 1920'de {846:2, 928:1}, üçüncü
	   öğe 377.8px; 390'da da aynı kırılma).
	   `flex: 1 1 0` ile taban genişlik ortadan kalkıyor: görünen öğe sayısı
	   kaç olursa olsun kalan alan eşit paylaşılıyor — 3 öğe üçte bir, 2 öğe
	   yarım, 1 öğe tam genişlik. Sabit kolon sayısı, nth-child kuralı veya
	   placeholder yok, dolayısıyla boş veri hiç render edilmediğinde
	   (bkz. template-parts/product/detail.php) geride boş kolon da kalmıyor.
	   `min-width: min-content` korunuyor: kelimeler bölünmüyor; içerik gerçekten
	   sığmazsa `flex-wrap: wrap` yumuşak geçiş sağlıyor. */
	flex: 1 1 0;
	min-width: min-content;
	text-align: center;
}
.product-detail__highlight-value {
	font-family: "Baloo 2", Arial, sans-serif;
	font-size: clamp(20px, calc(1.9500vw - 4.0756px), 32px);
	font-weight: 800;
	line-height: 1;
	color: var(--tada-black);
}
/* ---- Ağırlık değeri: bölünmez + kendi slotunu taşımaz ----
   Birim sunumda "g" → "gram" olunca (inc/helpers.php `tada_format_weight_unit`)
   SADECE ağırlık değerleri iki kelimeye dönüştü: "85g" → "85 gram". Boşluk
   kırılma fırsatı yarattığı için 1920'de "75 / gram" alt alta düşüyor ve hemen
   altındaki "Gramaj" etiketiyle üst üste okunuyordu.
   Kural GLOBAL DEĞİL, anlamsal olarak kapsanmış: modifier `tada_is_weight_label()`
   ile şablonda basılıyor (template-parts/product/detail.php). Ağırlık dışı
   değerler (Kcal, Protein, Lif, Gluten, Katkı Maddesi) tek jeton olsalar da
   kuraldan muaf kalır; ileride birinin içine boşluk giren bir değer yazılırsa
   doğal olarak sarabilir. Ürün/slug özelinde kural yok.

   İkinci bildirim şart: `repeat(3, 1fr)` = `minmax(auto, 1fr)` ve otomatik
   minimum, öğenin `min-width` değerinden geliyor. 769–1400 katmanlarında
   `.product-detail__highlight { min-width: 0 }` tanımlı (etiketin komşu slota
   taşımaması için bilerek) ve bu taban, bölünmez değerin altına da iniyordu:
   1100'de slot 78.2px iken "200 gram" 85.7px ölçüldü, metin slotu 7.6px aşıyordu.
   Tabanı YALNIZ ağırlık öğesine geri veriyoruz — o öğenin etiketi kısa ("Gramaj"),
   dolayısıyla "Dakikada Hazır" gibi uzun etiketlerin sarma davranışı etkilenmiyor.
   İki sınıflı seçici, sonradan gelen tek sınıflı media kurallarının sırasından
   bağımsız kazanması için. */
.product-detail__highlight-value--weight {
	white-space: nowrap;
}

.product-detail__highlight-label {
	font-size: 1em;
	font-weight: 700;
	line-height: 1.1667;
	color: #666666;
}

/* Actions — the two buttons must always stay side-by-side on one row.
   XD: 180×60 and 140×60, r30, 30px apart, 16px labels; the ghost button is a
   1px #eaeaea outline with #666666 text. */
.product-detail__actions {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: 44.3038%;
	column-gap: 8.5714%;
	font-size: clamp(13px, calc(0.9750vw - 2.0378px), 16px);
	/* CTA sutunu foot satirinin SONUNA KENDI BASINA sabitlenir; konumu solundaki
	   metrik seridinin VAR OLUP OLMAMASINA bagli degildir.
	   Neden gerekli: metrik seridi (`.product-detail__highlights`) veri yoksa
	   hic render edilmiyor (bkz. template-parts/product/detail.php) — sahte
	   placeholder uretmemek icin bilincli bir karar. Ama foot `justify-content:
	   space-between` idi ve space-between TEK cocukta flex-start gibi davranir,
	   yani metriksiz urunlerde butonlar satirin basina dusuyordu (olculdu:
	   1440'ta 329.97px sicrama). `margin-inline-start: auto` bos alani cocuk
	   sayisindan bagimsiz olarak SOLDA toplar: iki cocukta sonuc space-between
	   ile birebir ayni (delta 0px), tek cocukta da CTA yine sagda kalir.
	   DOM'a bos sarmalayici veya "-" doldurucu eklenmedi; urun/slug/nth-child
	   ozelinde kural yok. Buton genisligi, yuksekligi, tipografisi, kenarligi,
	   radius'u, araligi ve hover'i bu kuraldan etkilenmez.
	   Grid'e (`grid-template-columns` + `grid-column: 2`) gecis degerlendirildi
	   ve REDDEDILDI: cocuklarin genislikleri yuzde (%47.85 / %44.30) ve bu
	   yuzdeler auto grid track'inde dairesel cozulup onaylanmis masaustu
	   geometrisini bozuyor; ayni sonuc icin alti media blogunun yeniden
	   turetilmesi gerekiyordu.
	   Foot'un SUTUN oldugu katmanlarda (769-999 ve <=768) bu kural sifirlanir:
	   orada auto kenar bosluk `align-self: stretch`i iptal edip CTA'yi saga
	   iterdi. Bkz. asagidaki iki blok. */
	margin-inline-start: auto;
}
.product-detail .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 40%;
	min-width: 0;
	min-height: 3.75em;
	padding: 0;
	font-size: 1em;
	font-weight: 500;
	white-space: nowrap;
	transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}
.product-detail .button--primary {
	flex: 0 0 51.4286%;
	background: #9e262d;
	color: var(--tada-white);
}
.product-detail .button--primary:hover,
.product-detail .button--primary:focus-visible {
	background: #111111;
	color: var(--tada-white);
}
.product-detail .button--ghost {
	background: transparent;
	color: #666666;
	border: 1px solid #eaeaea;
}
.product-detail .button--ghost:hover,
.product-detail .button--ghost:focus-visible {
	background: #000000;
	border-color: #000000;
	color: var(--tada-white);
}

/* ---- Right: product visual (XD: 750×733 panel) ---- */
.product-detail__visual {
	position: relative;
	overflow: hidden;
	/* Client revision: fixed light grey panel (was the per-product accent red).
	   2026-10-06: müşterinin nihai ürün görseli zemini #F4F4F4 (önce #f0f0f0). */
	background: #f4f4f4;
}
.product-detail__art {
	position: absolute;
	inset: 0;
	/* Panel rengi (transform bu katmanı ayrı bir grup yapıyor; opak görselin
	   multiply karışımı bu zemine karşı yapılır). Saydam görsellerde görünüm aynı. */
	background-color: inherit;
	display: grid;
	/* Satır KESİN yükseklikte olmalı: `auto` satırda görselin yüzdelik
	   `height: 100%` değeri dayanaksız kalıp `auto`ya düşüyor ve dikey
	   ambalajlarda kutu panelden taşıyordu (ölçüldü: 517×754, panel 548).
	   Halkalar `position: absolute` olduğu için bu satırdan etkilenmez. */
	grid-template-rows: 100%;
	place-items: center;
	transform-origin: center;
	transform: scale(1);
	transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
/* Three concentric rings — XD diameters 700 / 550 / 400 inside the 750×733
   panel, #8d8d8d 1px at 35% opacity (client revision; was white 20%). Opacity is
   on the stroke only, so the product image beside the rings is never faded. The
   viewBox carries the panel's own aspect so `meet` reproduces the reference
   exactly at the design proportion and keeps the rings circular (never
   stretched) if a tall product grows the card. */
.product-detail__rings {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: #8d8d8d;
	stroke-opacity: .35;
	stroke-width: 1;
	pointer-events: none;
}
/* XD places the packet in a 650×650 square inside the 750-wide panel — 86.6667%
   of the panel width, centred, i.e. the 50px side inset the whole card uses.
   The square box is the reference's, so a non-square photograph is contained in
   it rather than being allowed to set its own scale. */
.product-detail__image {
	position: relative;
	z-index: 1;
	/* XD is 650 of the 750 panel (86.6667%); bumped to 92% at the client's
	   explicit request so the packet reads more strongly. */
	width: 92%;
	/* Kutu panelin TAMAMINI kaplar, görsel içine `contain` ile oturur.
	   Eskiden `aspect-ratio: 1 / 1` kutuyu yapay bir kareye zorluyordu
	   (ölçüldü, 1440px: panel 562×548 iken kutu 517×517). Onu kaldırıp
	   `height: auto; max-height: 100%` denendi ama `.product-detail__art`
	   bir grid + `place-items: center` olduğu için yüzdelik `max-height`
	   çözülmedi ve dikey ambalajlarda kutu 517×754'e çıkıp panelden taştı
	   (`overflow: hidden` → kırpma). Kutuya kesin bir yükseklik vermek
	   taşmayı yapısal olarak imkânsız kılar; oran `contain` ile korunur. */
	height: 100%;
	object-fit: contain;
	transform-origin: center;
	/* Sunum ölçeği: aynı ölçüm motoru, detay için ayrı hedef (helpers.php).
	   Hover ölçeği ÜST elemanda (.product-detail__art) durduğu için ikisi
	   birbirini ezmez, doğal olarak birleşirler. Tablet bandındaki eski
	   Tablet bandı da aynı property'yi kullanır (tek ölçek kaynağı). */
	transform: scale(var(--tada-art-scale, 1));
	/* Müşteri revizyonu (2026-10-06): eski `drop-shadow(0 24px 40px rgb(0 0 0
	   / 28%))` paketin alfa siluetinin çevresine 40px'lik koyu bir hale
	   yayıyordu; #f0f0f0 panel üstte koyu, altta açık bir gradyan gibi
	   algılanıyordu. Panel tek düz renk kalsın diye gölge kaldırıldı. */
}
/* Opak (beyaz zeminli) ambalaj fotoğrafı panel rengine karışır — beyaz
   dikdörtgen görünmez (detail.php → tada_art_is_opaque). */
.product-detail__image.is-opaque-art {
	mix-blend-mode: multiply;
}
/* XD: 150×40, r20, 16px #9e262d on white, 50px in from the panel's top-right —
   the same inset as the card's other edges, and with no drop shadow. */
.product-detail__badge {
	position: absolute;
	top: 0;
	right: 6.6667%;
	/* `top` percentages resolve against height; a top MARGIN resolves against
	   width, which is what keeps this inset proportional to the card. */
	margin-top: 7.3333%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	height: 2.5em;
	padding: 0 1.25em;
	background: var(--tada-white);
	color: #9e262d;
	border-radius: 999px;
	font-size: clamp(12px, calc(0.9750vw - 2.0378px), 16px);
	font-weight: 500;
	line-height: 1;
}

/* Image + rings zoom together on hover — desktop pointer only, motion-safe.
   The badge sits outside .product-detail__art so it never scales. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.product-detail__visual:hover .product-detail__art {
		transform: scale(1.05);
	}
}

/* ≤1400: below this the XD-proportional figure columns fall under the width of
   the word "Dakikada" at the 11px type floor, so the block can no longer hold the
   reference's proportions AND one row at the same time. There it reverts to the
   compact, type-driven sizing — which is what keeps the whole section inside the
   first screen on 1280/1366-class laptops. Between 1401 and 1920 the block is
   exactly XD's. */
@media (min-width: 1101px) and (max-width: 1400px) {
	.product-detail__highlights {
		/* `width: auto` şeridi içeriğe göre daraltıyordu: 1366'da yalnızca
		   197.5px iken foot satırında 118.8px boş alan duruyordu.
		   Sabit bir yüzde vermek yerine şerit foot satırındaki ARTAN alanı
		   alıyor (`flex: 1 1 auto`): CTA sütunu kendi içerik genişliğinde
		   (`flex: 0 0 auto`) sabit kalıyor, şerit ne eksik ne fazla kalanı
		   kaplıyor. Böylece 1366'da kutu 98px (tek satır) olurken, sabit
		   yüzdenin 1200 civarında foot'u iki satıra kırma riski de ortadan
		   kalkıyor. ~1300'ün altında yatay alan gerçekten yetmez; orada etiket
		   doğal olarak iki satıra iner — zorlama `nowrap` uygulanmadı. */
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
		column-gap: 3.5%;
	}
	.product-detail__highlight {
		/* Taban kuralla aynı mantık: sabit 5.2em kutular yerine kalan alanın
		   eşit paylaşımı, böylece 1/2/3 öğe bu ara masaüstü katmanında da
		   sola yığılmak yerine dengeli dağılıyor. */
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}
	.product-detail__actions {
		flex: 0 0 auto;
		width: auto;
		column-gap: 1em;
	}
	.product-detail .button {
		flex: 0 0 auto;
		padding: 0 1em;
	}
}

/* ---- ≥1601: the card reaches (and then holds) its native XD size ----
   Above 1740 the container formula pins the card at 1640px ≈ the XD 1641, so
   every value below is the reference's own number. Between 1601 and 1740 the
   same proportional formula applies with the wider container's -100px offset. */
@media (min-width: 1601px) {
	.product-detail__panel {
		min-height: min(733px, calc(44.6679vw - 44.6679px));
		border-radius: clamp(24px, calc(3.0469vw - 3.0469px), 50px);
	}
	.product-detail__category-pill,
	.product-detail__badge,
	.product-detail__actions {
		font-size: clamp(12px, calc(0.9750vw - 0.9750px), 16px);
	}
	.product-detail__title {
		font-size: clamp(34px, calc(4.3876vw - 4.3876px), 72px);
	}
	.product-detail__tab {
		font-size: clamp(15px, calc(1.0969vw - 1.0969px), 18px);
	}
	.product-detail__allergen {
		height: clamp(26px, calc(2.1328vw - 2.1328px), 35px);
	}
	.product-detail__nutrition {
		line-height: 1.92;
	}
	.product-detail__nutrition--simple th,
	.product-detail__nutrition--simple td {
		height: clamp(26px, calc(2.1024vw - 2.1024px), 34.5px);
	}
	.product-detail__highlights {
		font-size: clamp(11px, calc(0.7313vw - 0.7313px), 12px);
	}
	.product-detail__highlight-value {
		font-size: clamp(20px, calc(1.9500vw - 1.9500px), 32px);
	}
	/* XD foot: 30px between highlight columns, 30px between the buttons, and
	   180×60 / 140×60 button boxes. */
	.product-detail__body {
		padding: 6.1729% 5.6117% 5.6117%;
	}
	.product-detail__title {
		margin-top: 2.5190%;
	}
	.product-detail__tablist {
		gap: 14px 24px;
		margin-top: 1.7650%;
	}
	.product-detail__tabpanels {
		margin-top: 2.7320%;
	}
	.product-detail__foot {
		padding-top: 12px;
	}
}

/* Short viewports at full card scale: at ≥1601 the card sits at XD's exact 733
   and the head block above it is a fixed ~268px, which puts the card's bottom at
   ~1001. A 1080p screen minus the browser's own chrome leaves ~950–1000px, so the
   section ends just below the fold. This block buys ~55px back INSIDE the card —
   frame, internal gaps and table leading, the same levers the 1101–1600 tier
   already uses — so the whole section lands in the first screen. The page's head
   and breadcrumb rhythm is shared with the category archive and is deliberately
   not touched. Taller viewports keep the card at XD's exact geometry. */
/* Same idea for the 1101–1600 tier: there the card is usually content-bound (the
   internal trims already apply at every height in that tier), but on a short
   window the proportional floor can still be the thing holding it down. */
@media (min-width: 1101px) and (max-width: 1600px) and (max-height: 1060px) {
	.product-detail__panel {
		min-height: min(calc(44.6679vw - 93.3559px), calc(100vh - 243px));
	}
}

@media (min-width: 1601px) and (max-height: 1060px) {
	.product-detail__panel {
		/* The card is min-height-bound at this tier, so trimming its contents alone
		   would not shorten it — the floor itself has to yield to the viewport. 268px
		   is exactly the fixed head block above the card, so the card's bottom edge
		   lands on the fold and the section fills the first screen.
		   On a viewport tall enough for the reference height this resolves back to
		   733 and nothing changes. */
		min-height: min(733px, calc(44.6679vw - 44.6679px), calc(100vh - 268px));
	}
	.product-detail__body {
		padding: 5.1% 5.6117% 4.6%;
	}
	.product-detail__title {
		margin-top: 2.1000%;
	}
	.product-detail__tablist {
		margin-top: 2.2500%;
	}
	.product-detail__tabpanels {
		margin-top: 3.0500%;
	}
	.product-detail__nutrition {
		line-height: 1.8;
	}
	.product-detail__nutrition--simple th,
	.product-detail__nutrition--simple td {
		height: clamp(23px, calc(1.9500vw - 1.9500px), 32px);
	}
	.product-detail__tab-title {
		margin-bottom: 1.1067em;
	}
	.product-detail__nutrition-footnote {
		margin-top: 1.4em;
	}
	.product-detail__foot {
		padding-top: 8px;
	}
}

/* Second, tighter step for genuinely short windows. Kept separate from the block
   above so a viewport that only needs a little does not pay for the whole trim:
   the card height is min()-bound, so these lower the FLOOR the card can reach —
   a taller window still resolves to the looser step's height and simply carries
   more air above the foot, exactly as the reference does on its short tabs. */
@media (min-width: 1101px) and (max-height: 1000px) {
	.product-detail__body {
		padding: 4.4% 5.6117% 4.0%;
	}
	.product-detail__title {
		margin-top: 1.7000%;
	}
	.product-detail__tablist {
		margin-top: 2.3500%;
	}
	.product-detail__tab {
		padding-bottom: 0.6667em;
	}
	.product-detail__tabpanels {
		margin-top: 2.9500%;
	}
	.product-detail__tab-title {
		margin-bottom: 0.9667em;
	}
	.product-detail__nutrition {
		line-height: 1.7;
	}
	.product-detail__nutrition--simple th,
	.product-detail__nutrition--simple td {
		height: clamp(23px, calc(1.5844vw - 1.5844px), 26px);
	}
	.product-detail__nutrition-footnote {
		margin-top: 1.2em;
	}
	.product-detail__foot {
		padding-top: 4px;
	}
}
@media (min-width: 1601px) and (max-height: 1000px) {
	.product-detail__nutrition--simple th,
	.product-detail__nutrition--simple td {
		height: clamp(23px, calc(1.5844vw - 1.5844px), 26px);
	}
}
/* The product name is the last thing to give: it only steps down when the height
   genuinely leaves no other slack. */
@media (min-width: 1101px) and (max-height: 960px) {
	.product-detail__title {
		font-size: clamp(34px, calc(4.3876vw - 9.1700px), 62px);
	}
}
@media (min-width: 1601px) and (max-height: 960px) {
	.product-detail__title {
		font-size: clamp(34px, calc(4.3876vw - 4.3876px), 62px);
	}
}

/* NOT — kaldırılan iki kademe (2026-08-25 tasarım revizesi):
   Bu noktada `@media (min-width:1101px) and (max-height:800px)` ve
   `… (max-height:660px)` blokları vardı; 1366×768 ve 1280×720'yi ilk viewport'a
   sığdırmak için head marjinlerini 56/40 → 24/20 → 16/14, body padding'ini
   29.4/26.7 → 19.3/17.3 → 12.2/11.0 px'e indiriyorlardı.
   Sorun: eşik innerHeight 800 idi ve gerçek bir 1440×900 masaüstü pencerede
   (araç çubuğu + yer imleri çubuğu ile) innerHeight ~773'e düşüyor — yani
   kademe, hedeflenmeyen normal masaüstü ekranlarda devreye girip referans
   tasarımın boşluk ritmini görünür biçimde eziyordu.
   Müşteri kararı: öncelik referans spacing. Bloklar kaldırıldı; kısa masaüstü
   viewport'larda oluşan taşma raporlanıyor, yeni bir sıkıştırma kademesi
   EKLENMEYECEK. Mevcut 1060/960/1000 kademeleri bu revizeden önce de vardı ve
   dokunulmadı. */




/* ============================ RESPONSIVE ============================ */
/* Below the desktop split (≤1100): one stacked card — the accent image panel on
   top, the content below — keeping the same rounded-card language. Panel height
   is natural (no viewport-fill), the visual panel uses an aspect-ratio so the
   product image scales with width instead of a fixed height. */
@media (max-width: 1100px) {
	.product-detail__inner {
		width: min(100% - 32px, 720px);
	}
	.product-detail__panel {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.product-detail__visual {
		order: -1;
		min-height: 0;
		aspect-ratio: 16 / 10;
	}
	.product-detail__body {
		padding: 32px 30px 34px;
	}
	.product-detail__tablist {
		margin-top: 24px;
	}
	.product-detail__tabpanels {
		margin-top: 22px;
	}
	/* Sekme yüksekliği: kart, hangi sekme açık olursa olsun AYNI yükseklikte
	   kalır. Paneller taban kuralda tek grid hücresinde üst üste duruyor
	   (.product-detail__tabpanel{grid-area:1/1} + [hidden]{display:block;
	   visibility:hidden}); kutunun yüksekliğini en uzun panel — "Besin
	   Değerleri", ölçüldü: 243.7px — belirliyor. Masaüstünde zaten böyleydi;
	   önceki turda ≤1100 için yığın çözülüp kutu aktif panele göre
	   boyutlandırılmıştı, bu tur müşteri kararıyla geri alındı: sekme
	   değiştirince kart/görsel/footer zıplamamalı. Aktif panel kısa olduğunda
	   altında kalan boşluk kabul edilen davranış.
	   Bu yüzden burada override YOK — taban davranışı bilinçli olarak
	   tablet/mobilde de geçerli. */
	/* The reference's half-width nutrition card only works next to a 750px visual
	   column; stacked, it reads as a full-width card. */
	.product-detail__table-wrap--card {
		width: 100%;
	}
	/* Stacked, the visual panel is full-bleed, so the card-proportional inset
	   would push the badge too far in — back to a flat offset. */
	.product-detail__badge {
		top: 22px;
		right: 22px;
		margin-top: 0;
	}
	.product-detail__allergen-group + .product-detail__allergen-group {
		margin-top: 22px;
	}
	/* Stacked, the visual is a wide band rather than a full-height column, so the
	   reference's square 92%-of-the-panel packet no longer fits inside it — at
	   769–1100 it overflowed the band by ~212px and was cropped by the card's
	   overflow.
	   Sized off the band's WIDTH, not a percentage max-height: the band's height
	   comes from its aspect-ratio, and a percentage max-height on this centred grid
	   item does not resolve against that height (Chromium applies it to the item's
	   own width instead, which is what produced the 517px square in a 449px band).
	   56% of a 16/10 band is 90% of its height — the same intent, expressed against
	   an axis that resolves. */
	.product-detail__image {
		width: 56%;
		max-width: none;
		max-height: none;
		/* `aspect-ratio: 1 / 1` kaldırıldı — görsel kendi oranını korur. */
	}
	/* Stacked, the foot is a column, so the buttons can no longer take a share of a
	   proportional row — carrying the desktop percentages down here squeezed them
	   below their own labels and clipped the text. They size to their content again.
	   (≤360 still overrides this to stack them full-width.) */
	.product-detail__actions {
		width: auto;
		column-gap: 12px;
	}
	.product-detail .button,
	.product-detail .button--primary {
		flex: 0 0 auto;
		padding: 0 20px;
	}
}

/* ============================ TABLET: 769–1100 ============================
 * A real two-column card — the desktop product panel scaled down, NOT the mobile
 * stack with smaller numbers. Same structural relationships as ≥1101: one visual
 * column running the full height of the card, and one content column carrying
 * pill → title → tabs → active panel → highlights + CTA in a single vertical
 * flow. The stacked "image band on top" arrangement from the ≤1100 rules above
 * is fully overridden here.
 *
 * Column ORDER matches desktop exactly: content left, visual right.
 *
 * No aspect-ratio band, no compaction percentages, no artificial table cap: the
 * card's height comes from the content column, and the visual column stretches
 * to meet it.
 * ==========================================================================*/
@media (min-width: 769px) and (max-width: 1100px) {
	/* Same width formula as the site header and the footer card at this band, so
	   the card sits on exactly their gutter (24px a side → 772px at 820). The
	   ≤1100 rules above capped it at a needlessly narrow 720px. */
	.product-detail__inner {
		width: calc(100% - 48px);
	}

	.product-detail__panel {
		/* Content left / visual right, same order as desktop. The visual column has
		   a floor so the packet never gets too small to read. */
		grid-template-columns: minmax(0, 59%) minmax(285px, 41%);
		/* A content-poor product (no tabs, no highlights) would otherwise collapse
		   the card to ~170px and turn the visual column into a squat strip. This
		   floor keeps such a product reading as a product card; a product with real
		   tab content is taller than the floor and ignores it entirely. */
		min-height: clamp(320px, 44vw, 460px);
	}
	/* Explicit placement rather than `order` or DOM order, so the column order is
	   stated once in the grid itself. */
	.product-detail__body {
		grid-column: 1;
		grid-row: 1;
		padding: 30px 26px 28px;
	}
	.product-detail__visual {
		grid-column: 2;
		grid-row: 1;
		/* No aspect-ratio: the column is a full-height panel like desktop's, and
		   its height comes from the content column beside it. */
		aspect-ratio: auto;
		min-height: 0;
	}

	/* Packet: as large as the slot geometrically allows. The asset is square and
	   the visual column is narrow and tall (≈316×565 at 820), so WIDTH is the
	   binding axis — 94% of the column is the practical ceiling before the packet
	   touches the card's rounded right edge.
	   The height cap exists only to clear the preparation badge, which sits 22px
	   from the top and is ~30px tall. The packet is centred, so keeping it 56px
	   short of each edge guarantees its top edge lands below the badge — hence
	   `100% - 112px`, expressed against the column rather than as a flat percentage
	   so it tightens exactly on the short cards that need it (a content-poor
	   product falls back to the min-height floor) and gets out of the way on tall
	   ones, where the width cap is the real limit.
	   The HEIGHT cap is divided by the boost so it constrains the final, scaled box
	   — that is what keeps the badge clear. The WIDTH cap deliberately is not:
	   dividing it there would cancel the scale exactly and leave the packet the
	   size it is today. The scaled box overflowing the column horizontally is
	   intended; that overflow is transparent canvas, and it is clipped below. */
	.product-detail__image {
		width: auto;
		/* `max-width` de boost'a BÖLÜNMELİ. Aşağıdaki `transform: scale(boost)`
		   layout kutusunu görsel olarak büyütüyor; max-height bunu hesaba katıp
		   bölüyordu ama max-width bölmüyordu. Sonuç: 834'te kutu 269.2px layout
		   iken ekranda 395.2px render ediliyor, sütun ise 321.4px — paket iki
		   yandan 36.9'ar px KIRPILIYORDU (.__visual overflow:hidden).
		   Bölme ile render edilen genişlik tam olarak sütunun %94'ünde kalıyor,
		   yani kırpma yok ve kartın yuvarlak kenarına da değmiyor.
		   112px dikey rezerv DEĞİŞMEDİ: ölçüldü, "ISIT, YE - 2 DK" rozeti 30px
		   ve alt kenarı sütun üstünden 52px'te; görsel 56px'te başlıyor. Rezervi
		   kısmak paketi rozetin altına sokardı. */
		/* Ölçek artık TEK kaynaktan gelir: `--tada-art-scale`. Eski
		   `--product-art-boost` bu bandın kendi telafisiydi; yeni ölçüm motoru
		   aynı işi iki eksende ve safeScale güvencesiyle, üstelik tüm bandlarda
		   yapıyor. İkisini birlikte uygulamak aynı ürünü iki kez büyütürdü.
		   PHP tarafındaki `tada_get_product_art_boost()` geriye dönük uyumluluk
		   için duruyor ama sunumu artık yönetmiyor.
		   Kutu sınırları ölçeğe BÖLÜNÜR, yoksa render edilen genişlik sütunu
		   aşar ve paket kırpılır. */
		max-width: calc(94% / var(--tada-art-scale, 1));
		max-height: calc((100% - 112px) / var(--tada-art-scale, 1));
		aspect-ratio: auto;
		/* The pouch assets carry ~45% transparent canvas, so an <img> box at 94% of
		   the column renders a packet at only ~52% of it — the red field reads as
		   the subject instead of the product. This lifts the VISIBLE packet to its
		   target share. The factor is measured per product from the asset's own
		   alpha bounds (tada_get_product_art_boost()) and is exactly 1 for the
		   photographs that already fill their canvas, so nothing is scaled blindly.
		   A static transform, not an animation; the hover zoom lives on the parent
		   .__art and still composes with it. */
		transform: scale(var(--tada-art-scale, 1));
	}
	/* The scaled box is wider than the column — all of it transparent canvas, but
	   it would still extend under the white content column. Clipped at the red
	   column's own edge; the visible packet never reaches this boundary (verified
	   by alpha-scanning the render). */
	.product-detail__visual {
		overflow: hidden;
	}

	/* Title steps down from the desktop ceiling but stays the card's anchor:
	   32px at 820 rising to 38px at 1100 (measured against the content column, not
	   clamped down to a mobile size). */
	.product-detail__title {
		margin-top: 10px;
		font-size: clamp(28px, calc(2.1428vw + 14.43px), 38px);
	}

	/* Four tabs on ONE row inside the narrower column: no wrapping, labels sized
	   so "Kullanım ve Saklama" never breaks to a second line. 12px at 769 rising
	   to 14px at 1100. */
	.product-detail__tablist {
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: flex-end;
		gap: 0 10px;
		margin-top: 20px;
	}
	.product-detail__tab {
		flex: 0 0 auto;
		white-space: nowrap;
		font-size: clamp(12px, calc(0.6042vw + 7.353px), 14px);
		padding-bottom: 0.85em;
	}
	.product-detail__tabpanels {
		margin-top: 20px;
	}

	/* Nutrition stays a compact card, as on desktop, rather than stretching across
	   the whole content column. The cap sits on the PANEL, so the red heading, the
	   table card and the footnote all share one measure and one left edge — the
	   desktop relationship, left-aligned, not centred.
	   NOTE on the number: at 820 the content column's usable width is only 402px,
	   so a flat 410px cap would not bind at all — the table would still run edge to
	   edge. The proportional term is what actually makes it read as an inset card;
	   the absolute term keeps it from growing past the client's ceiling. */
	.product-detail__tabpanel--nutrition {
		max-width: min(410px, 88%);
	}
	.product-detail__table-wrap--card {
		width: 100%;
	}
	/* Desktop's label/value split, held explicitly so the values sit against the
	   right edge instead of drifting with the longest label. */
	.product-detail__nutrition--simple tbody th {
		width: 60%;
		padding-left: 4%;
	}
	.product-detail__nutrition--simple td {
		width: 40%;
		padding-right: 4%;
	}

	/* Foot stacks inside the column: the four highlights on one row, the two
	   buttons on one row beneath them. Desktop's side-by-side arrangement needs
	   ~570px of row and the column is ~400px, so this is the same content in the
	   only order that keeps both rows unbroken. Normal flow — no absolute pinning. */
	/* Footer tablette masaüstü mantığına dönüyor: metrikler solda, CTA sağda,
	   TEK yatay sıra. (Önceden `flex-direction: column` ile metrikler ve
	   butonlar alt alta iki satırdı.) Şerit foot satırındaki artan alanı alıyor,
	   CTA kendi içerik genişliğinde sabit kalıyor — 1101–1600'de kullanılan
	   yaklaşımın aynısı, böylece iki katman arasında geçiş sıçramıyor. */
	/* Footer taban davranışı bu katmanda iki satır: metrikler üstte, CTA altta.
	   Yatay (tek sıra) düzen yalnızca gerçekten sığdığı genişliklerde açılıyor
	   — aşağıdaki ≥1000px bloğuna bakın. */
	.product-detail__foot {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		padding-top: 22px;
	}
	.product-detail__highlights {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
		/* 10px → 6px. Ölçüldü (1024): üç track'in min-content toplamı
		   85.7 ("200 gram") + 59.4 ("247,48") + 48.7 ("Maddesi") = 193.8;
		   2 × 10px boşlukla 213.8 > şerit 212 ve şerit 1.84px taşıyordu.
		   Şerit büyüyemiyor (CTA sabit genişlikte ve konumu korunmalı), o
		   yüzden pay iç boşluktan alındı: 2 × 6px ile toplam 205.8 ≤ 212. */
		column-gap: 6px;
	}
	.product-detail__highlight {
		width: auto;
		min-width: 0;
	}
	/* `white-space: nowrap` KALDIRILDI. Metrikler artık üç eşit slotta duruyor
	   (taban `repeat(3, 1fr)`); 1024'te slot 64px iken "Dakikada Hazır" tek
	   satırda 87.5px istiyor ve nowrap ile komşu slota taşıp çakışıyordu.
	   Sarmaya izin verilince etiket iki satıra iniyor, slot geometrisi ve
	   hizalama bozulmuyor. Font küçültülmedi. */
	.product-detail__highlight-label {
		white-space: normal;
	}
	.product-detail__actions {
		flex: 0 0 auto;
		width: auto;
		flex-wrap: nowrap;
		column-gap: 12px;
		/* Foot burada SUTUN: auto kenar bosluk `align-self: stretch`i iptal edip
		   CTA'yi saga iterdi. Yigilmis duzen aynen korunuyor. */
		margin-inline-start: 0;
	}
	.product-detail .button,
	.product-detail .button--primary {
		flex: 0 0 auto;
		padding: 0 20px;
		min-height: 46px;
	}
}

/* ---- Tablet footer: masaüstü gibi TEK YATAY SIRA (yalnız sığdığı yerde) ----
   Ölçüldü. Yatay düzen için gereken genişlik:
     3 slot × 60px (en uzun KELİME "Dakikada", etiket sarabildiği için
     bağlayıcı olan kelime genişliği) + 2 × 10px slot arası
     + 20px footer boşluğu + CTA 253.5px  =  473.5px
   Kullanılabilir genişlik (body − padding): 1100 → 528.0, 1024 → 485.4,
   950 → 444.0, 834 → 410.5. Yani eşik ~1000px viewport.
   Bu yüzden yatay düzen 1000–1100 arasında açılıyor; altında footer iki satır
   (metrikler + CTA) olarak kalıyor. Alternatif — her genişlikte tek sıra
   zorlamak — 834'te slotu 39px'e düşürüp etiketleri komşu slota taşırırdı;
   CTA'yı daraltmak veya fontu küçültmek ise kapsam dışı bırakıldı. */
/* EŞİK GÜNCELLENDİ: 1000 → 1024. Yukarıdaki hesap, değerler kısayken
   ("160g") bağlayıcı ölçüyü ETİKETİN en uzun kelimesi (60px) kabul ediyordu.
   Birim "gram" olunca bağlayıcı ölçü DEĞER oldu: "200 gram" 85.7px. Yeni
   gereksinim = 85.7 + 59.4 + 48.7 + 2×6 + 20 (footer boşluğu) + 253.5 (CTA)
   = 479.3px. Kullanılabilir footer genişliği: 1024 → 485.4 (6.1px pay),
   1000 → 472.0 (7.3px EKSİK). Bu yüzden yatay sıra 1024'ten itibaren açılıyor;
   1000–1023 arası, altındaki iki satırlı (metrikler + CTA) düzende kalıyor —
   zaten o düzenin kendisi ölçümde temiz. CTA genişliği veya font küçültme
   seçenekleri kapsam dışı bırakıldı. */
@media (min-width: 1024px) and (max-width: 1100px) {
	.product-detail__foot {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		flex-wrap: nowrap;
	}
	.product-detail__highlights {
		flex: 1 1 auto;
		min-width: 0;
	}
	.product-detail__actions {
		flex: 0 0 auto;
		/* Foot yeniden SATIR oldugu icin taban kural geri geliyor: metrik seridi
		   olmayan urunde de CTA satirin sonunda kalir. */
		margin-inline-start: auto;
	}
}

/* 900–1100: the same two-column card with more room — the visual column takes a
   slightly larger share, exactly as the desktop split is more visual-heavy. */
@media (min-width: 900px) and (max-width: 1100px) {
	.product-detail__panel {
		grid-template-columns: minmax(0, 56%) minmax(340px, 44%);
	}
	.product-detail__body {
		padding: 34px 30px 32px;
	}
	/* Grows a little with the card but stays compact — never the full column. */
	.product-detail__tabpanel--nutrition {
		max-width: min(clamp(410px, 44vw, 480px), 88%);
	}
}


/* Mobile (≤768): full-bleed card, horizontal-scroll tabs, 2×2 highlights,
   stacked foot, tuned type. */
@media (max-width: 768px) {
	.product-detail__inner {
		/* 560px tavan telefon okuma ölçüsü içindi ama iPad portre (768) gibi
		   genişliklerde kartı 768'lik viewport'ta 560'a kilitleyip iki yanda
		   104'er px boş bırakıyordu. 640 tavanı yalnızca ~584px ve üzerini
		   etkiler; 430/390/375/360'ta bağlayıcı olan `100% - 24px` olduğu için
		   kart genişliği değişmez. */
		width: min(100% - 24px, 640px);
	}
	/* Head margin and title size come from the shared --tada-page-head-* /
	   --tada-page-title-size tokens, which carry their own ≤768 step — the
	   literals that used to sit here were a copy of exactly those values. */
	.product-detail__body {
		padding: 26px 22px 30px;
	}
	.product-detail__visual {
		aspect-ratio: 5 / 4;
	}
	/* 5/4 band: 70% of the width is 87.5% of its height. */
	.product-detail__image {
		width: 70%;
	}
	.product-detail__title {
		font-size: clamp(26px, 8vw, 34px);
	}

	/* Tabs: all four on ONE row spanning the full content width, like desktop —
	   the last tab ends flush with the right end of the rule and the gaps fall out
	   evenly, instead of the earlier horizontally-scrolling strip that cut the
	   fourth label off. Labels are allowed to wrap onto a second line, which is
	   what buys "Kullanım ve Saklama" the room; the buttons stretch to equal
	   height so every underline still meets the rule. */
	.product-detail__tablist {
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: stretch;
		gap: 8px;
	}
	.product-detail__tab {
		flex: 0 1 auto;
		min-width: min-content;
		font-size: 12px;
		line-height: 1.35;
		white-space: normal;
		text-align: left;
		/* The buttons stretch to a common height so their underlines all meet the
		   rule; top-aligning the label keeps the single-line tabs on the same first
		   baseline as the wrapped ones instead of floating to the middle. */
		display: flex;
		align-items: flex-start;
	}
	.product-detail__tab-title {
		font-size: 15px;
	}

	/* Foot stacks: the four highlights on ONE row (spread across the width, like
	   desktop) above the two buttons. */
	.product-detail__foot {
		flex-direction: column;
		align-items: stretch;
		gap: 22px;
	}
	/* Mobilde footer iki satır: üstte üç slotlu metrik satırı, hemen altında
	   CTA satırı (foot `flex-direction: column`). Slot geometrisi taban
	   kuraldaki `repeat(3, 1fr)` ile aynı, yani 2 veya 1 metrikte kalanlar
	   soldaki yerlerini koruyor ve CTA'nın konumu hiç değişmiyor. */
	.product-detail__highlights {
		gap: 12px;
		width: 100%;
	}
	/* Values/labels size to content and stay on a single line. */
	.product-detail__highlight {
		width: auto;
	}
	.product-detail__highlight-label {
		white-space: nowrap;
	}
	/* CTA satırı: iki buton EŞİT genişlikte ve birlikte footer genişliğini
	   dolduruyor. Önceden `flex` + içerik genişliği ile "Nereden Alınır?" 141.4px,
	   "Tarifi Gör" 100.1px kalıyor, satırın sağında 430'da 118.5px, 390'da
	   78.5px, 375'te 63.5px boşluk kalıyor ve blok sola ağırlık yapıyordu.
	   `grid-auto-flow: column` + `grid-auto-columns: 1fr` bunu ek wrapper veya
	   sabit kolon sayısı olmadan çözüyor: iki buton varsa yarı yarıya, tek
	   buton varsa (tarif bağlantısı olmayan ürünler) tam genişlik.
	   Buton fontu, rengi, kenarlığı, radius'u ve yüksekliği değişmedi. */
	.product-detail__actions {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		gap: 12px;
		/* Foot burada SUTUN ve CTA satiri tam genislik: auto kenar bosluk
		   stretch'i iptal edip blogu saga daraltirdi. */
		margin-inline-start: 0;
	}
	.product-detail .button {
		min-height: 48px;
	}
}

/* Narrow phones (≤429): below this the four labels no longer fit the rule on one
   line, and content-width tabs collapse to their min-content — which jams
   "Açıklama"/"Alerjen" together while the two long labels wrap, reading as a
   broken row. Four EQUAL columns instead: a regular rhythm, the last tab still
   flush with the end of the rule, and 11px keeps "Kullanım ve" on one line so
   nothing runs to a third row. */
@media (max-width: 429px) {
	.product-detail__tab {
		flex: 1 1 0;
		min-width: 0;
		font-size: 11px;
	}
}

/* Very narrow (≤360): the two action labels can't share a row — stack them.
   Ölçüldü: footer 290px, eşit genişlik (290 − 12) / 2 = 139.0px, ama butonun
   kendi içerik genişliği 141.0px — 2.0px eksik. 375'te 146.5 ≥ 141.0 olduğu
   için orada yan yana kalıyor; kırılma noktası gerçekten 360 ile 375 arasında.
   Üstteki blok artık grid kullandığı için buradaki `flex` bildirimi tek başına
   yetmez; yığma `grid-auto-flow: row` ile yapılıyor. */
@media (max-width: 360px) {
	.product-detail__actions {
		grid-auto-flow: row;
	}
	.product-detail .button {
		flex: 1 1 100%;
	}
}

/* ============================================================================
 * İçerik ile hızlı bilgi/butonlar arasındaki pay (masaüstü).
 *
 * `.product-detail__foot` kendi padding-top'unu kırılma noktası başına
 * veriyor (taban 8px; ≥1601 12px; ≥1601 & max-h≤1060 8px; ≥1101 & max-h≤1000
 * 4px). Bu değerler kısa içerikte sorun değil çünkü `margin-top:auto` zaten
 * boşluğu açıyor; ancak UZUN içindekiler bloğunda auto sıfıra indiği için
 * metnin son satırı hızlı bilgi satırına yapışıyordu (ölçüldü: 4px).
 *
 * Tek istenen değişiklik bu: masaüstünde pay rahat bir değere çekilir.
 * Kısa içerikte görünüm değişmez — `auto` bu payı kendi boşluğundan düşer.
 * Tipografi, metin genişliği, kolon oranı ve yatay iç boşluk DEĞİŞMEDİ.
 * 769-1100 bandı (22px) ve mobil kendi değerlerini korur.
 * ==========================================================================*/
@media (min-width: 1101px) {
	.product-detail__foot { padding-top: clamp(18px, 1.6vw, 30px); }
}