/*
 * Artiviq — PDP conversion layer styles.
 * Loaded on product pages only (artiviq_pdp_styles()).
 *
 * Every colour is a token from assets/artiviq-tokens.css. Nothing is hard-coded: the
 * palette is `locked` in knowledge/brands/artiviq/TOKENS.json and a literal hex here
 * would be a second copy of it that nothing keeps in step.
 *
 * ⚠️ BRASS IS A FILL, NOT A WORD. #8A6A36 on sand measures 4.15:1 — under AA. Text in
 * brass uses --av-accent-text (#826433: 4.55 on sand, 4.97 on paper, 5.50 on white).
 * This file therefore never sets `color: var(--av-accent)`. SigaraTech's own audit
 * traced 20 of its 42 contrast failures to exactly this one substitution.
 *
 * ⚠️ NOTHING HERE SELECTS html / body / :root. A page stylesheet that escapes its own
 * scope reaches every other template through the cascade
 * (memory `feedback_page_css_must_not_escape_its_scope`).
 */

/* ============ PALETTE CHIPS ============
 * MOVED to assets/artiviq-homepage.css on 2026-09-22, and this note is the whole
 * reason there is a note: `artiviq-homepage.css` is enqueued on EVERY page of this
 * site (functions.php, "so PLP/PDP/cart/account/page/post inherit the same shell"),
 * while this file loads on products and product archives only. The homepage hero
 * now prints the same chips, so the rules had to be somewhere both surfaces get.
 *
 * They were not COPIED. A duplicate would have been the worse bug here: the two
 * files are combined by LiteSpeed in an order this theme does not control, so
 * `.av-pdp-chip--fill` and `.av-pdp-chip` — equal specificity, decided by source
 * order alone — could have swapped places between builds and turned the payment
 * chip back into a plain one. The whole block, variant included, lives in the one
 * file now. */

/* SHIPPING LINE: no box of its own since 2026-10-24 — it is the first row of the TESLİMAT
   card (artiviq_pdp_shipping_lead), styled by `.av-pdp-row` below. */

/* ============ MAKER CARD — under the title, where "Tasarımcı: X" was (2026-10-23) ============
 *
 * The directory's own monogram, at PDP scale. `artiviq-designer.css` only loads on designer
 * views, so the mark is styled here rather than borrowing `.av-dz-logo` from a sheet this page
 * never receives. */

.av-pdp-maker {
	display: flex;
	align-items: center;   /* one text line since the tagline left (2026-10-24) */
	gap: 11px;
	margin: 8px 0 14px;
}

.av-pdp-maker__mark {
	flex: none;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--av-accent);
	color: var(--av-white);
	font-family: var(--av-font-display);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .02em;
	text-decoration: none;
}

.av-pdp-maker__mark img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.av-pdp-maker__text {
	min-width: 0;
}

.av-pdp-maker__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	margin: 0;
	font-family: var(--av-font-body);
	font-size: .88rem;
	line-height: 1.35;
}

.av-pdp-maker__k {
	font-size: 10px;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--av-gray-mid);
}

.av-pdp-maker__name {
	font-weight: 600;
	color: var(--av-black);
	text-decoration: none;
}

.av-pdp-maker__all {
	margin-left: auto;
	font-size: .8rem;
	color: var(--av-accent-text);
	text-decoration: underline;
	text-underline-offset: .16em;
	white-space: nowrap;
}

.av-pdp-maker__name:hover,
.av-pdp-maker__all:hover {
	color: var(--av-accent-text);
}

/* ============ SERIES STRIP — above the button (2026-10-23, inc/pdp-series.php) ============ */

.av-pdp-series {
	margin: 16px 0 4px;
}

.av-pdp-series__title {
	margin: 0 0 8px;
	font-family: var(--av-font-body);
	font-size: .85rem;
	font-weight: 600;
	color: var(--av-black);
}

.av-pdp-series__title span {
	font-weight: 400;
	color: var(--av-gray-mid);
}

.av-pdp-series__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.av-pdp-series__list li {
	margin: 0;
}

.av-pdp-series__item {
	position: relative;
	display: block;
	width: 58px;
	height: 58px;
	border: 1px solid var(--av-gray-light);
	border-radius: var(--av-radius);
	overflow: hidden;
	background: var(--av-off-white);
}

.av-pdp-series__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.av-pdp-series__item:hover,
.av-pdp-series__item:focus-visible {
	border-color: var(--av-accent);
}

/* The piece you are on: a 2px ink ring, the same weight a selected swatch carries. */
.av-pdp-series__item.is-current {
	border-color: var(--av-black);
	box-shadow: 0 0 0 1px var(--av-black);
}

.av-pdp-series__item.is-sold img {
	opacity: .45;
}

.av-pdp-series__sold {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 2px 0;
	background: var(--av-black);
	color: var(--av-white);
	font-family: var(--av-font-body);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .04em;
	text-align: center;
	text-transform: uppercase;
}

/* ============ TRUST BLOCK ============ */

.av-pdp {
	margin: 22px 0 0;
	font-family: var(--av-font-body);
}

/* ---- Provenance badge ---- */

.av-pdp-origin {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 11px 13px;
	border: 1px solid var(--av-gray-light);
	border-left: 3px solid var(--av-accent);
	border-radius: var(--av-radius);
	background: var(--av-sand);
}

.av-pdp-origin__label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: .9rem;
	font-weight: 600;
	color: var(--av-black);
}

.av-pdp-origin__label svg {
	flex: 0 0 auto;
	color: var(--av-accent-text);
}

.av-pdp-origin__note {
	font-size: .8rem;
	line-height: 1.45;
	color: var(--av-gray-mid);
}

/* ── interactive (QR) badge ──────────────────────────────────────────────────
 *
 * Deliberately NOT a second copy of the origin badge's look: two identical cards
 * stacked read as one repeated element and the eye skips the second. Same box, same
 * spacing, accent kept for provenance — this one is carried by the sand fill and the
 * code glyph, which is also what the feature looks like in the buyer's hand.
 */
.av-pdp-scene {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 8px;
	padding: 11px 13px;
	background: var(--av-sand);
	border: 1px solid var(--av-gray-light);
	border-radius: var(--av-radius-card);
}

.av-pdp-scene__label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: .9rem;
	font-weight: 600;
	color: var(--av-black);
}

.av-pdp-scene__label svg {
	flex: 0 0 auto;
	color: var(--av-accent-text);
}

/* The scene name. Carries the weight the note does not: it is the sentence's
   subject, and the only line here a shopper scans for. */
.av-pdp-scene__name {
	font-size: .84rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--av-accent-text);
}

.av-pdp-scene__note {
	font-size: .8rem;
	line-height: 1.45;
	color: var(--av-gray-mid);
}

/* ---- Künye ---- */

.av-pdp-kunye {
	margin-top: 14px;
	padding: 13px 15px;
	border: 1px solid var(--av-gray-light);
	border-radius: var(--av-radius-card);
	background: var(--av-white);
}

.av-pdp-kunye__title {
	margin: 0 0 9px;
	font-family: var(--av-font-display);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .14em;
	color: var(--av-gray-mid);
}

.av-pdp-kunye__list {
	margin: 0;
	display: grid;
	gap: 0;
}

.av-pdp-kunye__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 7px 0;
	border-top: 1px solid var(--av-gray-light);
}

.av-pdp-kunye__row:first-child {
	border-top: 0;
	padding-top: 0;
}

.av-pdp-kunye__row dt {
	flex: 0 0 auto;
	margin: 0;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--av-gray-mid);
}

.av-pdp-kunye__row dd {
	margin: 0;
	font-size: .88rem;
	line-height: 1.4;
	text-align: right;
	color: var(--av-black);
}

/* ---- Payment ---- */

.av-pdp-pay {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
}

.av-pdp-pay__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .82rem;
	font-weight: 600;
	color: var(--av-gray-mid);
}

.av-pdp-pay__label svg {
	flex: 0 0 auto;
}

/* ---- Fact cards ---- */

.av-pdp-facts {
	display: grid;
	/* ⚠️ AUTO-FIT, NOT `1fr 1fr` WITH A MEDIA QUERY. The constraint is the SUMMARY
	   COLUMN, not the viewport: at a 1440px viewport Shoptimizer gives this column
	   408px, so two fixed tracks are ~195px each and
	   "1.999,00 ₺ ve üzeri siparişlerde ücretsiz kargo" wrapped to three lines on a
	   full-width desktop screen. A viewport media query cannot see that — measured on
	   the live page 2026-09-21, which is the only place the number was visible. */
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 10px;
	margin-top: 14px;
}

.av-pdp-card {
	padding: 13px 15px;
	border: 1px solid var(--av-gray-light);
	border-radius: var(--av-radius-card);
	background: var(--av-off-white);
}

.av-pdp-card__title {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 9px;
	font-family: var(--av-font-display);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .12em;
	color: var(--av-accent-text);
}

.av-pdp-card__title svg {
	flex: 0 0 auto;
}

.av-pdp-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 6px;
	font-size: .82rem;
	line-height: 1.45;
	color: var(--av-black);
}

.av-pdp-row:last-child {
	margin-bottom: 0;
}

/* The tick is CSS, not an inline SVG repeated six times: the same 220-byte path
   printed once per row is 1.3 KB of markup on every product page for one glyph. */
.av-pdp-row__tick {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	margin-top: 4px;
	border-radius: 50%;
	background: var(--av-accent);
	position: relative;
}

.av-pdp-row__tick::after {
	content: "";
	position: absolute;
	left: 3.5px;
	top: 2.5px;
	width: 3px;
	height: 6px;
	border: solid var(--av-white);
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(42deg);
}

.av-pdp-row .woocommerce-Price-amount {
	font-family: var(--av-font-body);
	font-weight: 600;
	white-space: nowrap;
}

.av-pdp-link {
	color: var(--av-accent-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.av-pdp-link:hover,
.av-pdp-link:focus-visible {
	color: var(--av-black);
}

/* ---- Badges ---- */

.av-pdp-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.av-pdp-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border: 1px solid var(--av-gray-light);
	border-radius: var(--av-radius-chip);
	background: var(--av-white);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--av-gray-mid);
}

.av-pdp-badge svg {
	flex: 0 0 auto;
	color: var(--av-accent-text);
}

/* ============ MOBILE ============ */

@media (max-width: 767px) {
	.av-pdp-kunye__row {
		/* At 390px a right-aligned value next to its label collapses to one word per
		   line ("Dokuma Kumaş (Pamuk/Keten" / "Karışımı)"). Stacked, it reads. */
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.av-pdp-kunye__row dd {
		text-align: left;
	}

	.av-pdp-chips {
		gap: 5px;
	}

	.av-pdp-chip {
		font-size: 11.5px;
		padding: 4px 9px;
	}
}

/* ============ BREADCRUMB ============
 *
 * The strip the owner noticed was missing: above the gallery, under the fixed nav,
 * where SigaraTech renders one 52px tall and Artiviq rendered nothing.
 *
 * Body face, not the slab. A breadcrumb is navigation furniture, not a heading — the
 * display face at this size reads as a second title competing with the product name
 * two hundred pixels below it.
 */
.av-bc-wrap {
	margin: 0 0 18px;
}

.av-bc {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	font-family: var(--av-font-body);
	font-size: .8rem;
	line-height: 1.5;
	/* The LAST crumb is the page you are already on, so it is the quiet one. */
	color: var(--av-gray-mid);
}

.av-bc a {
	color: var(--av-gray-mid);
	text-decoration: none;
	/* An underline that appears on hover rather than sitting there: three underlined
	   items in a row read as a sentence with three mistakes in it. */
	border-bottom: 1px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}

.av-bc a:hover,
.av-bc a:focus-visible {
	color: var(--av-accent-text);
	border-bottom-color: var(--av-accent-text);
}

.av-bc__sep {
	/* WooCommerce prints the delimiter raw between crumbs and SigaraTech's renders as a
	   bare "/" with nothing either side ("Ana Sayfa/Isıtmalı Cihaz Tütünü/…"). The
	   spacing is the whole reason this span exists. */
	padding: 0 8px;
	color: var(--av-gray-light);
}

@media (max-width: 767px) {
	.av-bc-wrap {
		margin-bottom: 12px;
	}

	.av-bc {
		font-size: .75rem;
		/* At 390px a three-step trail with a long category name wraps, and a wrapped
		   breadcrumb costs two lines above the product image — the most valuable
		   space on the page. One line, scrolled if it must be, keeps the image where
		   it was. */
		flex-wrap: nowrap;
		overflow-x: auto;
		white-space: nowrap;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.av-bc::-webkit-scrollbar {
		display: none;
	}

	.av-bc__sep {
		padding: 0 6px;
	}
}

/* ============ PRODUCT META (stok kodu / kategori / etiket / marka) ============
 *
 * THE BUG THE OWNER SPOTTED: the block was sitting 112px left of everything else and
 * poking 7px off the left edge of the window.
 *
 * Cause, measured 2026-09-21 — Shoptimizer full-bleeds this block with the standard
 * escape-the-container recipe:
 *
 *     margin-left: -50vw;  margin-right: -50vw;  position: relative;  left: 50%;
 *
 * That recipe only closes when the element is ALSO `width: 100vw`. On SigaraTech it is:
 * its meta measures left=-7 right=1418 on a 1440 window, `left: 712.5px` — the band
 * really does span the viewport and the centred text reads centred. On Artiviq the
 * block's parent is our own 1216px `.related-wrapper`, so `left: 50%` resolves to 608px
 * instead of 712.5px while the negative margins stay at a hard -720px. The box ends up
 * 1216px wide running from -7 to 1209: not full-bleed, not in the container, 112px off
 * to the left. The same parent rule, two different wrappers, one broken sum.
 *
 * THE FIX IS TO STOP ESCAPING, not to repair the arithmetic. Every other band on this
 * page — breadcrumb, gallery, tabs, related products — starts at the container's left
 * edge, so a centred full-width strip was a second layout language even on the days the
 * sum happened to work. Putting it back in the column also makes it immune to viewport
 * maths, which is what broke it.
 *
 * Left-aligned rather than centred for the same reason, plus one of its own: these
 * products carry up to 14 tags, and a centred 14-item list wraps into ragged lines that
 * are hard to scan. Left-aligned it reads as what it is — a list.
 */
.product_meta {
	margin-left: 0 !important;
	margin-right: 0 !important;
	left: auto !important;
	right: auto !important;
	width: auto !important;
	max-width: 100% !important;
	position: static !important;
	text-align: left !important;
	padding: 18px 0 0 !important;
	border-top: 1px solid var(--av-gray-light);
	font-family: var(--av-font-body);
	font-size: .82rem;
	line-height: 1.7;
	color: var(--av-gray-mid);
}

/* TWO rows, not four. `artiviq_product_meta_reorder()` (inc/product-pdp.php) rebuilds
   the block as `<span class="av-meta-primary">` — Kategoriler · Marka · Stok kodu —
   followed by `<span class="av-meta-tags">`. Only those two wrappers are direct
   children, so `display:block` here gives exactly the two lines the owner asked for
   and the spans INSIDE the first one stay inline beside each other. */
.product_meta > span {
	display: block;
}

.product_meta .av-meta-primary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 20px;
	row-gap: 2px;
}

/* The tag list is the one row that can run to 14 links, which is the whole reason it
   gets a line of its own rather than a fourth item on the first one. */
.product_meta .av-meta-tags {
	margin-top: 8px;
}

.product_meta .sku_wrapper,
.product_meta .posted_in,
.product_meta .tagged_as,
.product_meta .pwb-brands-in-single-product {
	color: var(--av-gray-mid);
}

.product_meta a {
	color: var(--av-gray-mid);
	text-decoration: none;
	border-bottom: 1px solid var(--av-gray-light);
	transition: color .15s ease, border-color .15s ease;
}

.product_meta a:hover,
.product_meta a:focus-visible {
	color: var(--av-accent-text);
	border-bottom-color: var(--av-accent-text);
}

/* ============ "İLGİLİ ÜRÜNLER" — RAGGED CARD BOTTOMS ============
 *
 * Measured on /iphone-6-plus-parcalanmis-tablo/ 2026-09-21: four cards, same top
 * (y=4835), four different bottoms — 5251 · 5251 · 5271 · **5290**. The right-hand card
 * hung 39px below its neighbours, which is what the owner saw.
 *
 * TWO CAUSES, and fixing only the first would have left the prices ragged:
 *
 *  1. `align-self: flex-start` on the `li`. The list IS `display:flex` with
 *     `align-items: normal`, which resolves to stretch — so the cards SHOULD have
 *     equalised on their own. They did not, because each item overrides the container
 *     with `align-self`, and an item's own `align-self` always beats the container's
 *     `align-items`. Reading the container's computed style alone would have said
 *     "stretch, nothing to fix here".
 *  2. Even stretched, the PRICE would still float at a different height in each card,
 *     because the titles run 2, 2, 3 and 4 lines (47 · 47 · 67 · 86px). Equal boxes
 *     with the prices at four different heights read as MORE broken, not less.
 *
 * So the card body is made a column that fills the stretched box and the price is
 * pushed to its end. Titles keep every word — clamping them would tidy the grid by
 * hiding the product's name, and on a catalogue of one-off pieces the name is the
 * differentiator.
 *
 * ⚠️ Scoped to `.single-product`, so up-sells and cross-sells on the same template are
 * covered by the same rule rather than needing their own the first time one appears.
 * The archive grid already equalises — its fix is in artiviq-tokens.css and was
 * verified at three cards of identical height with prices all at y=342.
 */
.single-product ul.products {
	align-items: stretch;
}

.single-product ul.products li.product {
	/* Beats the per-item `align-self: flex-start` that keeps these content-height. */
	align-self: stretch !important;
	height: auto;
	display: flex;
	flex-direction: column;
}

.single-product ul.products li.product .woocommerce-card__header {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* The price is the last thing the eye needs on a card, so it is the thing that gets
   anchored: `margin-top: auto` in a column absorbs whatever slack the shorter titles
   leave, and every price lands on one line across the row. */
.single-product ul.products li.product .price {
	margin-top: auto;
	padding-top: 8px;
}

/* A star rating exists on 4 of 81 products, so it appears on some cards in a row and
   not others. Sitting directly above the anchored price it moves with it instead of
   shoving the price up by its own height. */
.single-product ul.products li.product .star-rating {
	margin-top: auto;
}

.single-product ul.products li.product .star-rating ~ .price {
	margin-top: 4px;
}

/* ============ BODY BLOCK PALETTE — the description panel ============
 *
 * Owner decision 2026-09-22 ("Seçenek A · prose blok paleti"): the product body
 * keeps its blocks inside `description`, but only from a closed list, and every
 * one of them is printed by `scripts/artiviq_pdp_blocks.py` — never hand-written.
 * This is the theme half of that palette; the module is the writer.
 *
 * ⚠️ UNTIL TODAY THIS FILE HAD NO RULE FOR THE DESCRIPTION PANEL AT ALL. The body
 * rendered on Shoptimizer's defaults while `artiviq-pdp.css` styled only the summary
 * column, which is why the catalogue drifted into five markup vocabularies with
 * nothing reporting it (measured: 18 bodies carrying inline `style=`, 12 carrying
 * chat-editor `data-*` residue, 8 a raw `div`).
 *
 * Scoped by class, not by container. `#cgkit-tab-description` is CommerceKit's id
 * and the tab layout is a plugin's decision; keying the palette to it would make a
 * plugin setting able to unstyle the catalogue. `av-body-*` is ours either way.
 */

/* ONE measure for every block in the panel (owner, 2026-09-23: *"content alanı hizalama
 * problemi var, blog yazıları yapısında da vardı"*).
 *
 * Measured on the live PDP at 1440px the day he said it — the column had THREE right
 * edges stacked on one left edge (all `left: 188`):
 *
 *     .av-body-p / .av-body-close .... 685px   (68ch)
 *     .av-body-fig / origin / künye .. 620px   (hard-coded)
 *     .av-body-hook .................. 497px   (34ch at the display size)
 *
 * So the origin card and the künye table stopped 65px short of the paragraph above them,
 * which is exactly what reads as "misaligned" — the eye tracks the right edge of a
 * justified-looking column, and a box that ends early looks inset rather than narrower.
 *
 * Invisible below about 1000px, where the container is narrower than every one of the
 * three: on a phone all of them measured 311px. Same shape as the 313px header offset
 * found on 2026-09-22 that never showed under 1280 — a defect only the widest viewport
 * states.
 *
 * 680px is not a new number: it is the blog's text column
 * (`scripts/deploy_artiviq_article_css.py`, owner 2026-09-23 "dergi"). One measure across
 * the post body and the product body is what "total uyumluluk" meant.
 *
 * A `ch` value cannot be that shared measure: it resolves against each block's own
 * font-size, which is how 68ch and 34ch became two different columns in the first place.
 */
:root {
	--av-body-measure: 680px;
}

.av-body-hook {
	font-family: var(--av-font-display);
	font-size: clamp(1.28rem, 1.05rem + 1vw, 1.6rem);
	font-weight: 500;
	line-height: 1.34;
	margin: 0 0 18px;
	max-width: var(--av-body-measure);
	/* `text-wrap: balance` is what keeps a one-sentence hook from running the full
	   measure: it splits a short hook into even lines well before 680px, so the block
	   reads as a heading while still ending on the column's one right edge. The old
	   34ch did the same job by holding a SECOND column, which is the defect. */
	text-wrap: balance;
}

.av-body-p {
	margin: 0 0 15px;
	max-width: var(--av-body-measure);
	line-height: 1.75;
}

.av-body-p a {
	color: var(--av-accent-text);   /* NOT --av-accent: brass as a word fails AA */
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ── figure ───────────────────────────────────────────────────────────────── */
.av-body-fig {
	margin: 22px 0;
	max-width: var(--av-body-measure);
}

.av-body-fig img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--av-gray-light);
	border-radius: var(--av-radius-card);
}

.av-body-fig__cap {
	margin: 9px 0 0;
	font-size: .86rem;
	line-height: 1.5;
	color: var(--av-gray-mid);
}

/* ── facts band ───────────────────────────────────────────────────────────────
 *
 * The origin card and the künye, moved as ONE thing (owner, 2026-09-23). They answer the
 * same question — "what IS this" — and until they were banded, "move the facts up" had
 * no single answer: the card and the table could drift apart in any reordering.
 *
 * Side by side from 900px, where two stacked 680px boxes are a lot of vertical room for
 * eight words and four rows. `align-items: start` so the shorter card does not stretch
 * to the table's height and read as an empty box.
 */
.av-body-facts {
	display: grid;
	gap: 14px;
	margin: 22px 0;
	max-width: var(--av-body-measure);
	align-items: start;
}

@media (min-width: 900px) {
	.av-body-facts {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	}
}

/* Inside the band the children own no outer margin — the grid gap is the spacing, and a
   margin here would put the two boxes on different baselines. */
.av-body-facts > .av-body-origin,
.av-body-facts > .av-body-scene,
.av-body-facts > .av-body-kunye {
	margin: 0;
	max-width: 100%;
}

/* ── origin ───────────────────────────────────────────────────────────────── */
.av-body-origin {
	margin: 22px 0;
	padding: 15px 18px;
	background: var(--av-white);
	border: 1px solid var(--av-gray-light);
	border-left: 3px solid var(--av-accent);
	border-radius: var(--av-radius-card);
	max-width: var(--av-body-measure);
}

.av-body-origin__label {
	margin: 0;
	font-family: var(--av-font-display);
	font-size: 1rem;
	font-weight: 600;
	color: var(--av-black);
}

.av-body-origin__note {
	margin: 5px 0 0;
	font-size: .92rem;
	line-height: 1.55;
	color: var(--av-gray-mid);
}

/* ── scene ────────────────────────────────────────────────────────────────────
 *
 * The interactive card. Same geometry as the origin card so the two read as one
 * pair, and the same reason for the different fill: stacked identical cards are
 * skipped. `--av-sand` carries it instead of a second brass rule.
 */
.av-body-scene {
	margin: 22px 0;
	padding: 15px 18px;
	background: var(--av-sand);
	border: 1px solid var(--av-gray-light);
	border-radius: var(--av-radius-card);
	max-width: var(--av-body-measure);
}

.av-body-scene__label {
	margin: 0;
	font-family: var(--av-font-display);
	font-size: 1rem;
	font-weight: 600;
	color: var(--av-black);
}

.av-body-scene__name {
	margin: 4px 0 0;
	font-size: .94rem;
	font-weight: 600;
	color: var(--av-accent-text);
}

.av-body-scene__note {
	margin: 5px 0 0;
	font-size: .92rem;
	line-height: 1.55;
	color: var(--av-gray-mid);
}

/* ── künye + compare ──────────────────────────────────────────────────────── */
.av-body-kunye,
.av-body-compare {
	width: 100%;
	max-width: var(--av-body-measure);
	margin: 22px 0;
	border-collapse: collapse;
	font-size: .94rem;
}

.av-body-compare {
	max-width: 100%;
}

.av-body-kunye th,
.av-body-kunye td,
.av-body-compare th,
.av-body-compare td {
	padding: 9px 12px;
	border: 1px solid var(--av-gray-light);
	text-align: left;
	vertical-align: top;
}

.av-body-kunye th {
	width: 38%;
	font-weight: 400;
	color: var(--av-gray-mid);
	background: var(--av-sand);
}

.av-body-kunye td {
	font-weight: 500;
}

.av-body-compare thead th {
	background: var(--av-sand);
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--av-gray-mid);
}

/* ── close ────────────────────────────────────────────────────────────────── */
.av-body-rule {
	height: 1px;
	border: 0;
	background: var(--av-gray-light);
	margin: 26px 0 16px;
	max-width: var(--av-body-measure);
}

.av-body-close {
	margin: 0;
	max-width: var(--av-body-measure);
	font-weight: 500;
	line-height: 1.7;
}

/* ── the column is CENTRED in the panel, not pinned to its left edge ──────────
 *
 * Owner, 2026-09-23, on the same area a second time: *"content yerleşimini de değerlendir,
 * yine sola yaslanmış ve sıkışık duruyor; bunu daha önce tespit etmiştim, sende
 * düzeltmiştin, yine bozulmuş."*
 *
 * It had not come back — the first fix held and a different fault was underneath it.
 * Measured on the live PDP at 1920px:
 *
 *     column 680px inside a 1132px panel → 42px of space on the LEFT, 411px on the RIGHT
 *
 * Every block agreed with every other block (that was the first fix, and it still holds:
 * one left edge, one right edge). What none of them did was sit in the middle of the box
 * they live in, so the page reads as a narrow strip shoved against one side with a gap the
 * width of a sidebar beside it — "sola yaslanmış ve sıkışık" is an exact description.
 *
 * The blog was measured as the precedent rather than guessed at, because 680px came from
 * there: its container IS the measure (680px) and the text sits centred inside it,
 * 27px / 24px. The product body borrows the number but lives in a 1132px WooCommerce tab
 * panel, so it has to centre itself to land in the same place.
 *
 * `margin-inline: auto` and not a `margin` shorthand: every block above sets its own
 * vertical rhythm (`0 0 15px`, `22px 0`, `26px 0 16px`) and a shorthand here would flatten
 * all of it. Below ~1000px the container is narrower than the measure, the auto margins
 * resolve to 0, and nothing moves — which is why this is invisible on a phone and was
 * only ever a defect on the widest viewport, the same shape as the 313px header offset.
 */
.av-body-hook,
.av-body-p,
.av-body-fig,
.av-body-facts,
.av-body-origin,
.av-body-scene,
.av-body-kunye,
.av-body-compare,
.av-body-rule,
.av-body-close {
	margin-inline: auto;
}

/* A table is the one block that can outgrow a phone. It scrolls in its own box so
   the page itself never scrolls sideways — the same rule the blog CSS uses. */
@media (max-width: 600px) {
	.av-body-kunye,
	.av-body-compare {
		display: block;
		overflow-x: auto;
	}

	.av-body-kunye th {
		width: 44%;
	}
}

/* ============ VARIATION SWATCHES ============
 * Drawn by inc/variation-swatches.php; driven by assets/artiviq-variation-swatches.js.
 * The mode class on the wrapper (--image / --colour / --text) is decided per product
 * from its own data, so the three blocks below are three renderings of one control,
 * not three components.
 *
 * ⚠️ THE SELECT IS HIDDEN ON RENDER, NOT ON BIND, AND THAT IS A MEASURED CHOICE.
 * LiteSpeed serves this store's scripts as `type="litespeed/javascript"` — they do not
 * execute until the visitor's first mousemove, scroll or touch. Gating the hide on the
 * script therefore showed BOTH controls, the tiles and the native dropdown, for the
 * whole first paint (measured 2026-09-23: `av-swatches--ready` absent and the select
 * still `display:block` after 4s of waiting, present after one mouse move). Nothing is
 * lost by hiding it early: `wc-add-to-cart-variation.js` is delayed by the same rule,
 * so before that first interaction the dropdown cannot pick a variation either.
 *
 * Two ways back, for the two ways this can fail:
 *   - the script loads and throws → it adds `.av-swatches--fallback` itself
 *   - no JS at all → the <noscript> block printed inside the wrapper
 * And a third, upstream: the PHP prints no tiles when the .js file is not on disk. */

.av-swatches [data-av-swatch-select] {
	display: none;
}

.av-swatches--fallback [data-av-swatch-select] {
	display: block;
}

.av-swatches--fallback .av-swatch-list,
.av-swatches--fallback .av-swatch-picked {
	display: none;
}

.av-swatch-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.av-swatch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 5px 12px 5px 6px;
	border: 1px solid var(--av-gray-light);
	border-radius: 6px;
	background: var(--av-white);
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.av-swatch:hover {
	border-color: var(--av-accent-light);
}

.av-swatch.is-selected {
	border-color: var(--av-accent);
	box-shadow: inset 0 0 0 1px var(--av-accent);
}

.av-swatch:focus-visible {
	outline: 2px solid var(--av-accent);
	outline-offset: 2px;
}

/* Not `display:none`. A choice that has been ruled out is information — it tells the
 * visitor the combination exists and is gone, which a vanished tile does not. */
.av-swatch.is-unavailable {
	cursor: not-allowed;
	opacity: .42;
}

.av-swatch.is-unavailable .av-swatch__face {
	position: relative;
	overflow: hidden;
}

.av-swatch.is-unavailable .av-swatch__face::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top right, transparent 46%, var(--av-gray-mid) 46%, var(--av-gray-mid) 54%, transparent 54%);
}

/* ---- The face ---- */

.av-swatch__face {
	display: inline-block;
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--av-swatch-fill, var(--av-sand));
	/* A hairline on EVERY dot, not only on the white one: an inner border keeps the
	   disc the same 22px whatever it is filled with, and #FFFFFF without one is an
	   invisible control on a white card. */
	box-shadow: inset 0 0 0 1px rgba(31, 27, 22, .18);
}

.av-swatch__face--split {
	background: linear-gradient(135deg, var(--av-swatch-a) 0 50%, var(--av-swatch-b) 50% 100%);
}

.av-swatch__face--multi {
	background: conic-gradient(#C0392B, #E1701A, #C9A227, #2E7D4F, #2A9D8F, #2A6EA6, #7B2233, #C0392B);
}

.av-swatch__face--img {
	width: 46px;
	height: 46px;
	border-radius: 4px;
	object-fit: cover;
	box-shadow: none;
}

.av-swatch__face--text {
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-weight: 600;
	font-size: .92rem;
	color: var(--av-black);
	padding-left: 6px;
}

.av-swatch__label {
	font-size: .88rem;
	line-height: 1.2;
	color: var(--av-gray-mid);
}

.av-swatch.is-selected .av-swatch__label {
	color: var(--av-black);
}

/* ---- Per-mode furniture ---- */

/* Photo tiles carry no written label — eight of them beside eight names is a wall.
 * The name of the current choice is printed once, under the row, instead. */
.av-swatches--image .av-swatch {
	position: relative;
	padding: 4px;
	gap: 0;
}

/* The colour pip — see artiviq_swatch_dot() for why a photo tile earns one. The
 * white ring is not decoration: these photos are shot on white, and a pale pip
 * without it disappears into the corner it sits in. */
.av-swatch__dot {
	position: absolute;
	right: 5px;
	bottom: 5px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--av-swatch-fill, var(--av-sand));
	box-shadow: 0 0 0 2px var(--av-white), inset 0 0 0 1px rgba(31, 27, 22, .3);
}

.av-swatch__dot--split {
	background: linear-gradient(135deg, var(--av-swatch-a) 0 50%, var(--av-swatch-b) 50% 100%);
}

.av-swatch__dot--multi {
	background: conic-gradient(#C0392B, #E1701A, #C9A227, #2E7D4F, #2A9D8F, #2A6EA6, #7B2233, #C0392B);
}

.av-swatch-picked {
	display: none;
	margin-top: 8px;
	font-size: .88rem;
	color: var(--av-gray-mid);
}

.av-swatches--image .av-swatch-picked {
	display: block;
}

.av-swatches--image .av-swatch-picked:empty {
	display: none;
}

.av-swatches--text .av-swatch {
	padding: 6px 14px;
}

@media (max-width: 480px) {
	.av-swatch {
		padding: 4px 10px 4px 5px;
	}

	.av-swatch__face--img {
		width: 40px;
		height: 40px;
	}

	.av-swatch__label {
		font-size: .82rem;
	}
}

/* Page ground (owner, 2026-09-23 — option B "beyaz zemin, krem kart").
 * Shoptimizer paints the PDP column #f8f8f8, a grey that is not in the brand
 * book; between the white page and the paper cards it read as a third ground.
 * The column now shows the page's own white; cards keep --av-off-white. */
body.single-product .site-content .col-full {
	background-color: transparent;
}

/* The sticky tab bar must sit flush under the nav. CommerceKit pins it at the
 * nav's resting height (69px), but by the time the tabs stick the nav has
 * shrunk to its .scrolled height (63px), leaving a 6px slot the page scrolled
 * through. 62px tucks the bar 1px under the nav so rounding cannot reopen it. */
@media (max-width: 992px) {
	body.single-product.sticky-m .commercekit-atc-sticky-tabs {
		top: 62px;
	}

	/* #primary now bleeds to the viewport edge as Shoptimizer intends, so the
	 * breadcrumb — the one child without its own inset — needs the gutter. */
	body.single-product .woocommerce-breadcrumb {
		padding-inline: 16px;
		box-sizing: border-box;
	}
}

/* The sticky add-to-cart drawer's product row is Shoptimizer's #f8f8f8 — the
 * same off-book grey the page column carried. In the drawer it is a card, so
 * it takes the card tone (owner's option B: white ground, cream cards). */
.commercekit-pdp-before-form {
	background-color: var(--av-off-white);
	border: 1px solid var(--av-gray-light);
	border-radius: var(--av-radius-card);
}

/* "Temizle" shipped in WordPress link blue, a colour the palette does not
 * have. It is a secondary action: muted ink, underlined, brass on hover. */
.variations_form .reset_variations {
	color: var(--av-gray-mid);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.variations_form .reset_variations:hover,
.variations_form .reset_variations:focus-visible {
	color: var(--av-accent-text);
}

/* ---- "Müşterilerimiz ne dedi" (2026-09-28) — see inc/product-pdp.php ---- */
.av-pdp-voices {
	clear: both;
	margin: 40px 0 8px;
	padding-top: 28px;
	border-top: 1px solid var(--av-gray-light);
}
.av-pdp-voices__title {
	margin: 0 0 16px;
	font-size: clamp(1.25rem, 2.2vw, 1.6rem);
}
.av-pdp-voices__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
}
.av-pdp-voice {
	margin: 0;
	padding: 16px 18px;
	border: 1px solid var(--av-gray-light);
	border-radius: var(--av-radius-card);
	background: var(--av-off-white);
}
.av-pdp-voice blockquote {
	margin: 0 0 10px;
	padding: 0;
	border: 0;
	font-size: .92rem;
	line-height: 1.55;
	font-style: normal;
	color: var(--av-black);
}
.av-pdp-voice figcaption {
	font-size: .78rem;
	color: var(--av-gray-mid);
}
.av-pdp-voice figcaption a {
	color: var(--av-accent-text);
}

/* PDP GALLERY VIDEO (pilot, 2026-10-07) ------------------------------------
   Injected by inc/pdp-gallery-video.php as a swiper-slide; styled here so it
   fills the slot exactly like a gallery <img> does. */
.av-pdp-video-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--av-off-white);
}
.av-pdp-gallery-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.av-pdp-video-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--av-sand);
}
.av-pdp-video-thumb-badge {
	font-size: 14px;
	color: var(--av-accent-text);
}