/* ============================================================================
 * 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 colour is per-product via --product-accent.
 * ==========================================================================*/

.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) {
	.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 {
	display: flex;
	flex-wrap: wrap;
	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);
}
.product-detail__highlight {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	flex: 1 1 min(150px, 45%);
	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);
}
.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);
}
.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;
	background: var(--product-accent, #9e262d);
}
.product-detail__art {
	position: absolute;
	inset: 0;
	display: grid;
	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, white 1px at 20% opacity. 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: rgb(255 255 255 / 20%);
	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. The square still clears
	   the panel's 733px height, so it is never cropped. */
	width: 92%;
	height: auto;
	max-height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	filter: drop-shadow(0 24px 40px rgb(0 0 0 / 28%));
}
/* 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;
		column-gap: 0.8em;
	}
	.product-detail__highlight {
		flex: 0 0 auto;
		width: 5.2em;
		min-width: 0;
	}
	.product-detail__actions {
		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);
	}
}

/* ============================ 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;
	}
	/* 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;
	}
	/* 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: 94%;
		max-height: calc((100% - 112px) / var(--product-art-boost, 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(--product-art-boost, 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. */
	.product-detail__foot {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		padding-top: 22px;
	}
	.product-detail__highlights {
		width: 100%;
		flex-wrap: nowrap;
		justify-content: space-between;
		column-gap: 10px;
	}
	.product-detail__highlight {
		flex: 0 0 auto;
		width: auto;
		min-width: 0;
	}
	.product-detail__highlight-label {
		white-space: nowrap;
	}
	.product-detail__actions {
		width: auto;
		flex-wrap: nowrap;
		column-gap: 12px;
	}
	.product-detail .button,
	.product-detail .button--primary {
		flex: 0 0 auto;
		padding: 0 20px;
		min-height: 46px;
	}
}

/* 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 {
		width: min(100% - 24px, 560px);
	}
	/* 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;
	}
	.product-detail__highlights {
		justify-content: space-between;
		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;
	}
	.product-detail__actions {
		flex-wrap: wrap;
		gap: 12px;
	}
	.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. */
@media (max-width: 360px) {
	.product-detail .button {
		flex: 1 1 100%;
	}
}