/*
 * Artiviq — Global Design Tokens
 * Loaded on EVERY page (homepage + kategori + ürün + blog + checkout + myaccount).
 * Shoptimizer'ın CSS'ini ezmek değil, kademeli olarak marka tonuna kaydırmak amacı var.
 * Kırılma olursa önce bu dosyadaki override'ları kaldırıp parent stile dönülebilir.
 *
 * ── 2026-09-21: SigaraTech'in GÖRSEL DİLİ, Artiviq'in RENKLERİ ────────────────
 * Sahip kararı: "tam ST görünümü yalnız renkler artiviq renkleri olsun".
 * Değişen: tipografi (Cormorant Garamond + DM Sans → Roboto Slab + Roboto),
 * ağırlıklar (300 → 500/600), köşeler (0 → 6/10px), buton dili (11px uppercase
 * 0.15em harf aralığı → ST'nin .92rem sentence-case'i), rozet/fiyat mobilyası.
 * Değişmeyen: PALET. Her değer knowledge/brands/artiviq/TOKENS.json'dan birebir
 * alındı — ST'nin turuncusu (#F59107) bu dosyaya HİÇ girmiyor.
 *
 * TOKEN ADLARI KASTEN KORUNDU. Bu dosyanın 198. satırından sonrası (header/footer
 * kabuğu, mobil menü, checkout okunabilirliği, sticky footer — ~960 satır) bu
 * adlara bağlı. Adları değiştirmek görünmez biçimde o katmanı kırardı; değişen
 * yalnızca DEĞERLER ve muamele.
 *
 * Marka kitabı notu: TOKENS.json `locked` ve tipografi kuralı "serif display over
 * sans body is the identity ... the serif is not substitutable" diyor. Bu değişiklik
 * o kuralı sahip kararıyla geçersiz kılıyor; kitabın tipografi bölümünün
 * brand-steward tarafından yeniden yazılması gerekiyor (palet bölümü aynen geçerli).
 */

:root {
	/* Palet — knowledge/brands/artiviq/TOKENS.json, locked 2026-07-31. Birebir. */
	--av-black: #1F1B16;        /* book: ink        — birincil metin, koyu dolgu, buton */
	--av-white: #ffffff;
	--av-off-white: #F7F3EC;    /* book: paper      — sayfa zemini, sıcak kırık beyaz */
	--av-sand: #EFE9DF;         /* book: sand       — hafif yükseltilmiş yüzey */
	--av-gray-light: #D8CFBF;   /* book: line       — saç teli kenarlık ve ayraç */
	--av-gray-mid: #5A5147;     /* book: ink-mute   — ikincil metin, açıklama */
	--av-gray-dark: #3B342C;
	--av-accent: #8A6A36;       /* book: brass      — DOLGU/kenarlık/rozet aksanı */
	--av-accent-light: #B08A4B; /* book: brass-light— hover dolgusu */

	/* Pirinç METİN OLARAK. ST'nin kendi CSS'i bu dersi uzun uzun anlatıyor:
	   marka rengi dolgu olarak doğru, yazı olarak AA'yı geçmeyebilir — ST'de tek
	   bu hata 2026-08-12 denetimindeki 42 kontrast ihlalinin 20'sini üretmişti.
	   Aynı hatayı burada ölçmeden tekrarlamamak için üç zeminde de hesaplandı:
	     #8A6A36 → paper 4,53 · beyaz 5,01 · sand 4,15  ← sand'de AA ALTI
	     #826433 → paper 4,97 · beyaz 5,50 · sand 4,55  ← üçünde de geçiyor
	   Aynı ton, bir tık koyu. Dolgular/kenarlıklar --av-accent'te kalıyor;
	   markanın rengi değişmedi, yalnız KELİMENİN hangi tonla yazılacağı sabitlendi. */
	--av-accent-text: #826433;

	/* Tipografi — ST'nin dili. Roboto Slab functions.php'de SELF-HOSTED + inline
	   @font-face olarak basılıyor: ST 2026-08-12'de bunu Google Fonts <link>'ten
	   taşımak zorunda kaldı, çünkü LiteSpeed Guest Mode harici stylesheet'i
	   komple düşürüyor (@font-face 22 → 1, bütün başlıklar Times New Roman'a
	   düştü, h1 132px'ten 88px'e indi). Artiviq da LiteSpeed kullanıyor. */
	--av-font-display: "Roboto Slab", Georgia, "Times New Roman", serif;
	--av-font-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Biçim — ST'nin ölçüleri */
	--av-radius: 6px;           /* buton, form */
	--av-radius-card: 10px;     /* kart */
	--av-radius-chip: 4px;      /* rozet */
	/* Gölge siyah değil SICAK: nötr siyah gölge kağıt zeminde gri leke yapıyor. */
	--av-shadow-card: 0 1px 2px rgba(31, 27, 22, .04);
	--av-shadow-lift: 0 16px 34px rgba(31, 27, 22, .10);

	/* ── SAYFA IZGARASI — TEK KAYNAK (2026-09-22) ─────────────────────────
	 * The page content column and the fixed header used to be two unrelated
	 * layouts: `.av-page-shell` is a 1280px centred column, `.av-nav` was
	 * edge-to-edge with a flat 32px gutter. Above ~1345px viewport they part
	 * company and the gap grows with the screen. MEASURED on the live PDP
	 * before this block existed:
	 *
	 *   viewport   content column starts   logo starts   drift   logo→menü boşluk
	 *   1920            345                    32        313px        547px
	 *   1680            225                    32        193px        427px
	 *   1440            105                    32         73px        307px
	 *   1280             32                    32          0px        227px
	 *
	 * The owner read that as "logo responsive değil, sürekli solda, menüden
	 * uzak" — and that is exactly what the numbers say: on a 1920 monitor the
	 * brand mark sits a third of a metre outside the column every other thing
	 * on the page is aligned to.
	 *
	 * These two numbers are the INPUTS. Everything that has to sit on the grid
	 * — the content column, the fixed bar's gutter, the mega panel's inner
	 * width — is derived from them at its own point of use, so the column and
	 * the bar cannot drift apart again (doctrine 1: a constant lives in ONE
	 * place, everything else proves it).
	 *
	 * ⚠️ THE DERIVED VALUES ARE NOT TOKENS, AND THAT IS DELIBERATE — COST ONE
	 * MEASUREMENT. They were, first: `--av-shell-inset: max(var(--av-shell-gutter),
	 * …)` on this very block. A custom property substitutes its own var()
	 * references AT THE ELEMENT THAT DECLARES IT, and then the finished token
	 * stream is what descendants inherit. So a derived token declared here is
	 * frozen to the :root gutter, and the homepage — which redefines the gutter
	 * on its body class because its sections use a wider one — inherited an
	 * inset still computed from 32px: measured 344.5 against a section edge of
	 * 368.5, i.e. the bug this whole block exists to remove, 24px smaller.
	 * The formula therefore lives in the rule that uses it, where the gutter it
	 * reads is the one that element actually inherits. Each formula appears
	 * exactly once; grep `--av-shell-max` to find them.
	 */
	--av-shell-max: 1280px;
	--av-shell-gutter: 32px;
}

/* Mobile gutter — the shell already narrows to 16px at this breakpoint; the
 * token follows so the header narrows with it instead of keeping a desktop
 * gutter the content no longer uses. */
@media (max-width: 960px) {
	:root { --av-shell-gutter: 16px; }
}

/* ============ SITE-WIDE TYPOGRAPHY ============ */
body,
.woocommerce,
.site,
.site-content,
.entry-content p {
	font-family: var(--av-font-body);
	font-weight: 400;   /* 300'dü: ST'nin yoğunluğu ince gövdeyle kurulmuyor */
	color: var(--av-black);
}

h1, h2, h3, h4,
.entry-title,
.product_title,
.woocommerce-loop-product__title,
.widget-title,
.site-title,
.shop-page-title {
	font-family: var(--av-font-display);
	font-weight: 600;          /* 300'dü */
	letter-spacing: -0.015em;  /* -0.005em'di */
	line-height: 1.15;         /* 1.2'ydi */
	color: var(--av-black);
}

/* ST'nin başlık ölçeği — clamp'li, sabit px değil */
h1, .entry-title, .product_title { font-size: clamp(1.9rem, 4.2vw, 3.1rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 500; letter-spacing: -0.005em; }

.woocommerce-loop-product__title {
	font-family: var(--av-font-body);  /* ST ürün adını GÖVDE fontuyla yazar,
	                                      serif yalnız başlık ve fiyatta durur */
	font-size: .95rem;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0;
	color: var(--av-black);
}

/* Üst-etiket (eyebrow) — ST'nin bölüm başlıklarındaki küçük kaps aksanı.
   Metin olduğu için --av-accent DEĞİL --av-accent-text kullanır. */
.av-eyebrow {
	font-family: var(--av-font-body);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--av-accent-text);
	display: inline-block;
}

/* ============ SITE-WIDE BUTTONS ============ */
.button,
button.button,
a.button,
.wp-block-button__link,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce ul.products li.product .button,
.woocommerce div.product form.cart .button,
.single_add_to_cart_button {
	/* ST'nin buton dili: yuvarlatılmış, sentence-case, okunur boy.
	   Önceki hâli 11px/uppercase/0.15em harf aralığıydı — galeri etiketi gibi
	   duruyordu ve dokunma hedefi olarak da küçüktü. */
	background-color: var(--av-black);
	color: var(--av-white);
	font-family: var(--av-font-body);
	font-size: .92rem;
	font-weight: 600;
	letter-spacing: .01em;
	text-transform: none;
	line-height: 1.2;
	padding: 13px 22px;
	border: 1px solid transparent;
	border-radius: var(--av-radius);
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.button:hover,
button.button:hover,
a.button:hover,
.wp-block-button__link:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce div.product form.cart .button:hover,
.single_add_to_cart_button:hover {
	/* Pirinç dolgu üstünde metin BEYAZ, mürekkep değil. Ölçüm:
	   mürekkep/pirinç 3,42 (AA altı) · beyaz/pirinç 5,01 (geçer).
	   Kural: koyu pirinç (--av-accent) beyaz ister, açık pirinç
	   (--av-accent-light) mürekkep ister (5,37); beyaz açık pirinçte 3,19'a düşer. */
	background-color: var(--av-accent);
	color: var(--av-white);
	transform: translateY(-2px);
}

.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background-color: var(--av-accent);
	color: var(--av-white);   /* mürekkepti — pirinç üstünde 3,42, AA altı */
}

.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background-color: var(--av-black);
	color: var(--av-white);
}

/* ============ SITE-WIDE PRICES ============ */
.price,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	/* ST fiyatı DISPLAY fontuyla yazar — sayfadaki tek "ağır" rakam o olsun diye.
	   Ürün adı gövde fontunda kalır; ayrım fiyatı tarattırır. */
	font-family: var(--av-font-display);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--av-black);
}

.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins {
	background: none;
	text-decoration: none;
	color: var(--av-black);
	font-weight: 600;
}

.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del {
	/* --av-gray-mid artık #5A5147 (kitabın ink-mute'u): kağıtta 7,02, sand'de 6,43.
	   Eskiden #a8a8a8 idi — kağıt üstünde 2,4 civarı, yani üstü çizili fiyat
	   okunmuyordu bile. Silik göstermek için opaklık değil TON kullanılır. */
	color: var(--av-gray-mid);
	font-weight: 400;
	font-size: .85em;
	opacity: 1;
}

/* ============ SITE-WIDE LINKS ============ */
a {
	color: var(--av-black);
	transition: color 0.2s ease;
}

a:hover,
a:focus {
	color: var(--av-accent-text);  /* metin olduğu için dolgu pirinci değil metin pirinci */
}

/* ============ SITE-WIDE FORMS ============ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
textarea,
select {
	font-family: var(--av-font-body);
	border: 1px solid var(--av-gray-light);
	border-radius: var(--av-radius);
	background: var(--av-white);
	color: var(--av-black);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
textarea:focus {
	border-color: var(--av-accent);
	outline: 2px solid transparent;   /* Windows yüksek-kontrast kipinde halka kaybolmasın */
	box-shadow: 0 0 0 3px rgba(138, 106, 54, .18);
}

/* ============ CATEGORY / SHOP HEADINGS ============ */
.woocommerce-products-header__title,
.page-title,
.archive-title {
	font-family: var(--av-font-display);
	font-weight: 600;                      /* 300'dü */
	font-size: clamp(1.9rem, 4.2vw, 3.1rem);
	letter-spacing: -0.025em;
}

/* ============ BADGE (Sale / New) ============ */
.woocommerce span.onsale {
	/* ST rozeti: mürekkep dolgu + beyaz yazı (17,12), köşe 4px.
	   Pirinç dolgu + mürekkep yazı 3,42'de kalıyordu. */
	background: var(--av-black);
	color: var(--av-white);
	font-family: var(--av-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border: 1px solid var(--av-black);
	border-radius: var(--av-radius-chip);
	padding: 5px 10px;
	min-height: auto;
	min-width: auto;
	line-height: 1.4;
}

/* ============ QUANTITY INPUTS ============ */
.quantity input.qty {
	border: 1px solid var(--av-gray-light);
	border-radius: var(--av-radius);
	background: var(--av-white);
	padding: 10px 8px;
}

/* ============ ÜRÜN KARTI — ST kart mobilyası ============
 * Shoptimizer'ın döngü kartı düz; ST'nin kartı çerçeveli, yuvarlatılmış ve
 * hover'da kalkıyor. Görünümü asıl değiştiren yer burası: kategori ve arama
 * sayfalarının tamamı bu karttan oluşuyor. */
.woocommerce ul.products li.product {
	background: var(--av-white);
	border: 1px solid var(--av-gray-light);
	border-radius: var(--av-radius-card);
	box-shadow: var(--av-shadow-card);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.woocommerce ul.products li.product:hover {
	border-color: var(--av-black);
	transform: translateY(-2px);
	box-shadow: var(--av-shadow-lift);
}

/* Kartın içi nefes alsın — Shoptimizer kenardan kenara basıyor */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .star-rating {
	margin-left: 16px;
	margin-right: 16px;
}

/* Kart butonu: yan boşluk EKLEMEK tek başına taşma üretiyor. Shoptimizer PLP
   butonu `display:block` + hesaplanmış sabit `width` ile geliyor; üstüne 16px
   sol kenar boşluğu koyunca buton 15px kartın DIŞINA çıkıyordu — 390px'te
   ölçüldü (kart sağ kenarı 178, buton sağ kenarı 193) ve mobilde ekran kenarına
   dayanıyordu. Sabit genişliğe kenar boşluğu eklenmez; genişlik `auto`ya
   bırakılır ki blok öğe kalan alana otursun. */
.woocommerce ul.products li.product .button {
	width: auto;
	display: block;
	padding: 12px 16px;
	text-align: center;
}

.woocommerce ul.products li.product .price {
	padding-top: 8px;
	border-top: 1px solid var(--av-gray-light);
}

/* Fiyatları satır boyunca AYNI hizaya getir. Ürün adları 2 ve 3 satır arasında
   değişiyor, kart da içeriğe göre uzuyordu — sonuç: aynı sırada fiyatlar farklı
   yüksekliklerde (ekran görüntüsünde /cerceve-ayna/ üzerinde görüldü, 3. kart
   diğerlerinden aşağıda). ST kartı bunu flex + margin-top:auto ile çözüyor:
   kart kolon olur, fiyat satırı dibe itilir. Izgaradaki hizasızlık, kaçınılmak
   istenen "özensiz" görünümün ta kendisi. */
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
}

/* margin-top:auto önce DOĞRUDAN li'nin .price'ına konmuştu ve hiçbir şey yapmadı:
   ölçünce görüldü ki fiyat li'nin çocuğu değil, Shoptimizer onu
   `.woocommerce-card__header` içine sarıyor (li'nin çocukları: wishlist,
   image__wrapper, card__header). Bir hizalama kuralı, hizalanacak öğenin
   GERÇEK flex ebeveynine yazılmak zorunda — DOM'a bakmadan yazılan doğru kural
   yanlış katmanda sessizce hiçbir şey yapar. */
.woocommerce ul.products li.product .woocommerce-card__header {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.woocommerce ul.products li.product .price {
	margin-top: auto;
}

/* Kenar çubuğu butonları kompakt kalır. Yeni buton ölçüsü (.92rem / 13px 22px)
   ana içerik için doğru ama dar widget sütununda taşıyor: /cerceve-ayna/'da
   "Filtrele" butonu fiyat aralığı metninin ÜSTÜNE biniyordu (ekran görüntüsü).
   Fiyat filtresi widget'ı butonu ile metni aynı satıra koyuyor, o satırın
   genişliği sabit — büyüyen tek şey buton olunca çakışma kaçınılmaz. */
.widget-area .button,
.woocommerce .widget_price_filter .price_slider_amount .button,
.sidebar-container .button {
	font-size: .8rem;
	padding: 9px 14px;
	float: none;
}
/* Fill = ink. The parent paints this one #282828 — a near-ink the palette does not
   carry; theme_layout_gate I (render-palette check) found it 2026-09-30. */
.woocommerce .widget_price_filter .price_slider_amount .button {
	background: var(--av-black);
	color: var(--av-white);
}

.woocommerce .widget_price_filter .price_slider_amount {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	justify-content: space-between;
}

.woocommerce .widget_price_filter .price_slider_amount .price_label {
	font-size: .82rem;
	color: var(--av-gray-mid);
	white-space: normal;
}

/* ============ NAV / HEADER TWEAKS (non-homepage) ============ */
.main-navigation a,
.site-header .main-navigation li a {
	font-family: var(--av-font-body);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 400;
}

/* ============ FOOTER TWEAKS (non-homepage) ============ */
.site-footer,
.site-footer a {
	font-family: var(--av-font-body);
}

.site-footer .widget-title {
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-family: var(--av-font-body);
	font-size: 11px;
	font-weight: 500;
}

/* ============ GLOBAL HEADER + FOOTER (v1.2.0) ============
 * .av-nav is position:fixed; on the homepage the hero compensates with its
 * own padding-top, but inner pages need explicit body offset so content
 * doesn't slide under the nav. Mobile breakpoint matches artiviq-homepage.css.
 */
body:not(.home) {
	padding-top: 80px;
}
body:not(.home).has-av-topbar {
	padding-top: 116px;
}
@media (max-width: 960px) {
	body:not(.home) { padding-top: 72px; }
	body:not(.home).has-av-topbar { padding-top: 104px; }
}

/* Top bar — minimal duyuru şeridi above the nav. Content sourced from
 * Customizer key (artiviq_top_bar_text or shoptimizer_top_bar_text). */
.av-topbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 101;
	background: var(--av-black);
	color: var(--av-white);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 400;
	text-align: center;
	padding: 9px 16px;
	line-height: 1.4;
}
body.has-av-topbar .av-nav {
	top: 36px;
}
body.has-av-topbar .av-mega-panel {
	top: 132px;
}
body.has-av-topbar .av-search-panel {
	top: 110px;
}
body.has-av-topbar .av-nav.scrolled ~ .av-mega-panel {
	top: 118px;
}
body.has-av-topbar .av-nav.scrolled ~ .av-search-panel {
	top: 96px;
}
@media (max-width: 960px) {
	.av-topbar {
		font-size: 10px;
		letter-spacing: 0.12em;
		padding: 7px 12px;
	}
	body.has-av-topbar .av-nav { top: 32px; }
}

/* Checkout minimal nav — center-align logo + actions, hide gap that would
 * have held mega menu links. */
.av-nav--checkout .av-nav-links {
	display: none;
}
.av-nav--checkout {
	justify-content: space-between;
}

/* Box-sizing reset for header/footer components on every page (homepage
 * already gets this via .artiviq-home *). Without it, padding adds to width
 * on inner pages and mega-panel/footer sizing breaks. */
.av-nav, .av-nav *,
.av-mega-panel, .av-mega-panel *,
.av-search-panel, .av-search-panel *,
.av-mobile-menu, .av-mobile-menu *,
.av-footer, .av-footer *,
.av-topbar {
	box-sizing: border-box;
}

/* Page shell — constrains WC + page content to a centered column on every
 * non-home template (cart, checkout, my-account, PLP, PDP, page, post, 404).
 * Homepage is full-bleed and renders without this wrapper.
 * Without this, promoted header.php had no max-width container and content
 * stretched edge-to-edge. */
.av-page-shell {
	/* Values unchanged — they are now READ from the grid tokens instead of
	 * being restated here, so the fixed header can be derived from the same
	 * two numbers (see --av-shell-max / --av-shell-gutter above). */
	max-width: var(--av-shell-max);
	/* ⚠️ `width: 100%` IS LOAD-BEARING — added 2026-09-22 after the owner reported
	 * Hesabım looking squeezed. `body:not(.home)` is a COLUMN FLEX container (the
	 * v1.7.4 sticky-footer block below), and an `auto` cross-axis margin on a flex
	 * item cancels stretch: the shell therefore sized itself to its own CONTENT and
	 * the page width became a function of what happened to be inside it. Measured at
	 * a 1440 viewport before the fix:
	 *     /cerceve-ayna/ · PDP · /blog/ · 404  →  1280  (content wide enough to cap)
	 *     /sikca-sorulan-sorular/               →   844
	 *     /alisveris-sepeti/ (empty)            →   358
	 *     /hesabim/                             →   338
	 * On Hesabım that is the whole reported bug: the menu is `width: 17.647%` of this
	 * box, so the dashboard's long paragraph gave it ~202px and the addresses view's
	 * short content gave it ~105px — the same menu, half the width, every label
	 * wrapped onto two lines. A layout must not be a function of its content length.
	 * The four pages already at 1280 are unaffected; the rest go full width with their
	 * own inner max-widths still doing the centring. */
	width: 100%;
	margin: 0 auto;
	padding: 48px var(--av-shell-gutter) 80px;
	box-sizing: border-box;
}
.av-page-shell .col-full {
	max-width: 100%;
	margin: 0;
	padding: 0;
}
.av-page-shell--narrow {
	max-width: 1080px;
}
@media (max-width: 960px) {
	.av-page-shell {
		padding: 28px var(--av-shell-gutter) 56px;
	}
}

/* WordPress admin bar (logged-in users) — WP injects a fixed toolbar at top
 * (32px desktop, 46px mobile ≤782px). Our position:fixed nav + topbar +
 * mega/search panels are anchored to top:0 → admin toolbar overlaps them.
 * Push every fixed shell element down by the toolbar height. WP's own
 * html margin-top:32px already handles body content offset. */
.admin-bar .av-topbar { top: 32px; }
.admin-bar .av-nav { top: 32px; }
.admin-bar.has-av-topbar .av-nav { top: 68px; }
.admin-bar .av-mega-panel { top: 128px; }
.admin-bar .av-nav.scrolled ~ .av-mega-panel { top: 114px; }
.admin-bar .av-search-panel { top: 106px; }
.admin-bar .av-nav.scrolled ~ .av-search-panel { top: 92px; }
.admin-bar.has-av-topbar .av-mega-panel { top: 164px; }
.admin-bar.has-av-topbar .av-search-panel { top: 142px; }
@media screen and (max-width: 782px) {
	.admin-bar .av-topbar { top: 46px; }
	.admin-bar .av-nav { top: 46px; }
	.admin-bar.has-av-topbar .av-nav { top: 78px; }
	.admin-bar .av-search-panel { top: 110px; }
}

/* Add-to-cart button vertical alignment fix.
 * Shoptimizer parent sets `.cart .single_add_to_cart_button` to
 * height:52px + line-height:52px + padding:0 to vertically center the label.
 * Our global token override adds `padding:14px 28px` which pushes the
 * 52px-line-height text down out of the 52px content box → label appears
 * shifted toward the bottom. Reset line-height + height so our padding
 * does the centering. Also unify cart "Ödemeye Geç" + checkout
 * "Siparişi Onayla" buttons so they match the PDP add-to-cart visual
 * (gold alt + 16px/28px padding + auto height). */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce .cart .single_add_to_cart_button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order,
.woocommerce-checkout button.place-order,
.woocommerce-checkout button#place_order {
	height: auto;
	line-height: 1.4;
	padding: 16px 28px;
}

/* Cart proceed + checkout place-order: full-width primary CTA on every
 * breakpoint, gold alt fill, sticky on mobile/tablet so the action stays
 * thumb-reachable while the user scrolls totals or reviews lines. */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 12px;
	letter-spacing: 0.18em;
}

/* CHECKOUT IS NOT STICKY (2026-09-26). On the checkout `.form-row.place-order` is not a
 * button, it is the privacy notice + the required terms/consent checkbox + the button.
 * Pinned, it measured 358px of an 844px phone — with the cookie bar over half the screen
 * covered while the customer is still typing their name, and the legal text stuck on top
 * of a form they had not filled yet. The cart keeps its sticky CTA: there it is a button.
 *
 * AND ON THE CART ONLY THE BUTTON IS PINNED (2026-09-26). WooCommerce Gift Cards hooks its
 * "Hediye kartınız mı var?" form into `.wc-proceed-to-checkout`, so pinning that wrapper
 * pinned a heading + input + button too: 214px of an 844px phone, a code field glued to the
 * screen for every shopper who holds no code. The wrapper now stays in the flow (the
 * gift card form sits under the totals where it belongs); the button alone is fixed, and a
 * fixed pseudo-element behind it draws the same frosted strip the wrapper used to. */
@media (max-width: 960px) {
	.woocommerce-cart .wc-proceed-to-checkout::after {
		content: "";
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 89;
		height: calc(80px + env(safe-area-inset-bottom, 0px));
		background: rgba(255, 255, 255, 0.96);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		border-top: 1px solid rgba(0, 0, 0, 0.08);
		box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.06);
	}
	/* `body.` prefix: the global CTA rule further down this file uses the same selector with
	 * !important and would otherwise win on source order. */
	body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
		position: fixed;
		left: 16px;
		right: 16px;
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		z-index: 90;
		/* The global CTA rule sizes this button `width: 100%; max-width: 480px; margin: auto`
		 * (all !important) for the desktop column. On a fixed box with both insets set that over-constrains and
		 * resolved to a -32px right margin, pushing the button past the screen edge. */
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
	}
	.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
	.woocommerce-checkout #place_order {
		margin: 0;
		padding: 16px 24px;
	}
	/* Reserve space at page bottom so the sticky bar never covers the cart total
	 * on the last scroll position. */
	body.woocommerce-cart .av-page-shell {
		padding-bottom: 110px;
	}
}

/* PDP quantity-nav cleanup. Shoptimizer's CommerceKit qty widget renders
 * .quantity-up (▲) + .quantity-down (▼) chevron spans even when the
 * underlying input is hidden + max=1. On Artiviq every product is a
 * 1-of-1 curator piece → the stepper is always meaningless, and the lone
 * down-chevron drifting next to the add-to-cart button reads as a
 * decorative artifact. Hide both the nav and the wrapper when the qty
 * input is hidden. */
.woocommerce div.product form.cart .quantity-nav,
.commercekit-pdp-sticky-inner .quantity-nav,
.commercekit-pdp-simple-form .quantity-nav {
	display: none !important;
}
.woocommerce div.product form.cart .quantity:has(input.qty[type="hidden"]),
.commercekit-pdp-simple-form .quantity:has(input.qty[type="hidden"]),
.commercekit-pdp-sticky-inner .quantity:has(input.qty[type="hidden"]) {
	display: none !important;
}

/* Cart + checkout entry-header breathing room. Shoptimizer parent collapses
 * .entry-header margins when WC pages are detected, but with our promoted
 * fixed nav that means the H1 sits flush against the nav border. Restore a
 * comfortable top gap on mobile/tablet where the issue was reported. */
.woocommerce-cart .entry-header,
.woocommerce-checkout .entry-header,
.woocommerce-account .entry-header {
	margin-top: 0;
	padding-top: 0;
}
@media (max-width: 960px) {
	.woocommerce-cart .entry-header .entry-title,
	.woocommerce-checkout .entry-header .entry-title,
	.woocommerce-account .entry-header .entry-title {
		margin-top: 8px;
	}
}

/* ============ v1.5.0 — qty-nav reinforce ============
 * `:has()` covers ~96% of browsers but old Edge / pre-2023 Samsung Internet
 * miss it. Belt-and-suspenders: hide the chevron buttons themselves and
 * collapse the whole .quantity wrapper inside CommerceKit's PDP form.
 * Artiviq is a 1-of-1 curator catalog → no qty stepper is ever meaningful. */
.commercekit-pdp-simple-form .quantity-button,
.commercekit-pdp-sticky-inner .quantity-button,
.woocommerce div.product form.cart .quantity-button {
	display: none !important;
}
.commercekit-pdp-simple-form > .commercekit-sticky-atc-intersector > .quantity,
.commercekit-pdp-simple-form .commercekit-sticky-atc-intersector .quantity {
	display: none !important;
}

/* ============ v1.5.0 — header overlap reinforce ============
 * Some WC pages (cart-empty layout, checkout coupon expanded) emit additional
 * margin-top on the first heading via parent rules. Lock the page shell top
 * gap to a known floor so the H1 / WC notices never slide under the fixed
 * nav. Bumped to 96px on mobile (was 72) after user reported persistent
 * overlap on cart H1 + checkout tab strip. */
@media (max-width: 960px) {
	body.woocommerce-cart:not(.home),
	body.woocommerce-checkout:not(.home),
	body.woocommerce-account:not(.home) {
		padding-top: 96px;
	}
	body.woocommerce-cart.has-av-topbar:not(.home),
	body.woocommerce-checkout.has-av-topbar:not(.home),
	body.woocommerce-account.has-av-topbar:not(.home) {
		padding-top: 128px;
	}
	body.woocommerce-cart .av-page-shell,
	body.woocommerce-checkout .av-page-shell,
	body.woocommerce-account .av-page-shell {
		padding-top: 16px;
	}
}

/* ============ v1.5.0 — Mobile menu accordion ============
 * Override homepage.css centered-flex layout. New layout is top-aligned and
 * scrollable so the Kategoriler accordion can expand
 * inline without overflowing the viewport. Replaces the old flat list of
 * 32px display links. */
.av-mobile-menu.open {
	display: block;
	overflow: hidden;
	padding: 0;
}
.av-mobile-scroll {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow-y: auto;
	padding: 64px 24px 32px;
	gap: 0;
}
.av-mobile-menu .av-mobile-search {
	width: 100%;
	max-width: 100%;
	margin: 0 0 28px;
	border-bottom: 1px solid var(--av-gray-light);
	padding-bottom: 12px;
}
.av-mobile-menu .av-mobile-search input {
	text-align: left;
	font-family: var(--av-font-display);
	font-size: 22px;
	font-weight: 500;
}
.av-mobile-nav {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--av-gray-light);
}
.av-mobile-section {
	border-bottom: 1px solid var(--av-gray-light);
}
.av-mobile-section-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: transparent;
	border: 0;
	padding: 18px 4px;
	font-family: var(--av-font-display);
	font-size: 22px;
	font-weight: 500;
	color: var(--av-black);
	cursor: pointer;
	text-align: left;
	letter-spacing: 0;
	text-transform: none;
}
.av-mobile-section-chev {
	font-size: 22px;
	font-weight: 500;
	color: var(--av-gray-dark);
	transition: transform 0.25s ease;
	line-height: 1;
}
.av-mobile-section.is-open .av-mobile-section-chev {
	transform: rotate(45deg);
	color: var(--av-accent);
}
.av-mobile-section-body {
	display: none;
	padding: 4px 4px 18px;
	flex-direction: column;
	gap: 2px;
}
.av-mobile-section.is-open .av-mobile-section-body {
	display: flex;
}
.av-mobile-section-item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 12px 8px;
	font-family: var(--av-font-body);
	font-size: 15px;
	color: var(--av-black);
	text-decoration: none;
	border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
}
.av-mobile-section-item:last-of-type {
	border-bottom: 0;
}
.av-mobile-section-item-name {
	font-weight: 500;
}
.av-mobile-section-item-meta {
	font-size: 11px;
	color: var(--av-gray-mid);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.av-mobile-section-all {
	display: block;
	margin-top: 8px;
	padding: 12px 8px;
	font-family: var(--av-font-body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--av-gray-dark);
	text-decoration: none;
}
.av-mobile-link {
	display: block;
	padding: 18px 4px;
	font-family: var(--av-font-display);
	font-size: 22px;
	font-weight: 500;
	color: var(--av-black);
	text-decoration: none;
	border-bottom: 1px solid var(--av-gray-light);
}
.av-mobile-menu .av-mobile-cta {
	color: var(--av-accent) !important;
	font-weight: 400;
}
/* ── Mobile menu: account + cart, v1.10.2 ────────────────────────────────────
 *
 * Owner, 2026-09-21: these should be VISIBLE in the mobile menu. They already
 * were, and that is precisely why it was easy to miss — measured at 390px, the
 * old row rendered as 39px of ~10px uppercase grey text at y=551, sitting under
 * "Hediye Bul" set in 28px display type. Present, reachable, and reading as a
 * footnote. The header's own account and cart icons are 24px, so the menu was
 * the WORST place on the phone to sign in or open the basket.
 *
 * Now rows on the same scale as the nav links above them, each at least 48px of
 * tap target (Apple's floor is 44), icon-led so they are scannable without
 * reading, and separated from the navigation by a rule rather than by size.
 */
.av-mobile-menu .av-mobile-actions {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 22px 0 8px;
	padding-top: 10px;
	border-top: 1px solid var(--av-gray-light);
	width: 100%;
	max-width: 100%;
}

.av-mobile-menu .av-mobile-action {
	display: flex;
	align-items: center;
	gap: 14px;
	/* 14+14 padding + a 20px icon = 48px, which is the tap target, not a guess. */
	padding: 14px 4px;
	min-height: 48px;
	border-bottom: 1px solid var(--av-gray-light);
	color: var(--av-black);
	text-decoration: none;
	font-family: var(--av-font-body);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

.av-mobile-menu .av-mobile-action:last-child {
	border-bottom: 0;
}

.av-mobile-menu .av-mobile-action:hover,
.av-mobile-menu .av-mobile-action:focus-visible {
	color: var(--av-accent-text);
}

.av-mobile-menu .av-mobile-action__icon {
	flex: 0 0 auto;
	display: inline-flex;
	width: 20px;
	height: 20px;
	color: var(--av-gray-mid);
}

.av-mobile-menu .av-mobile-action__icon svg {
	width: 20px;
	height: 20px;
}

.av-mobile-menu .av-mobile-action:hover .av-mobile-action__icon {
	color: var(--av-accent-text);
}

.av-mobile-menu .av-mobile-action__label {
	flex: 1 1 auto;
}

/* The count is a filled pill, not "(1)" in parentheses — the same shape the
   header's cart badge uses, so one glance answers the same question on both.
   White on brass measures 5.01:1; ink on brass is 3.42 and fails AA. */
.av-mobile-menu .av-mobile-action__badge {
	flex: 0 0 auto;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--av-accent);
	color: var(--av-white);
	font-size: .72rem;
	font-weight: 600;
	line-height: 20px;
	text-align: center;
}

/* ============ v1.5.0 — WC notice + ATC modal styling ============
 * After "Sepete Ekle" Shoptimizer fires either:
 *   (a) the standard .woocommerce-message banner at the top of the page, or
 *   (b) the cart-confirmation-modal inside #shoptimizer-modals-wrapper.
 * Both default to bright WC green with off-brand sans-serif buttons. Re-skin
 * to the Artiviq cream-card aesthetic + gold-accent action so it stops
 * looking pasted-in. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	background: var(--av-off-white) !important;
	color: var(--av-black) !important;
	border: 0 !important;
	border-left: 3px solid var(--av-accent) !important;
	border-radius: 0 !important;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
	padding: 18px 24px !important;
	font-family: var(--av-font-body, Roboto, system-ui, sans-serif) !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 12px !important;
	margin: 0 0 24px !important;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	color: var(--av-accent) !important;
	background: transparent !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 16px !important;
	position: static !important;
	flex: 0 0 auto;
}
.woocommerce-message > a.button,
.woocommerce-info > a.button,
.woocommerce-message a.button.wc-forward,
.woocommerce-message .button {
	/* Black since 2026-09-21, same pass as the cart CTA: a brass slab is the one
	   use of this colour the brand does not carry (it is the hairline/badge tone
	   everywhere else), and the "Sepetim" chip sat two rows above a black
	   "Ödeme sayfasına git" on the same screen. */
	background: var(--av-black) !important;
	color: var(--av-white) !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 11px 22px !important;
	font-family: var(--av-font-body, Roboto, system-ui, sans-serif) !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	box-shadow: none !important;
	height: auto !important;
	line-height: 1.4 !important;
	margin: 0 !important;
	transition: background 0.2s ease !important;
	order: 99;
	flex: 0 0 auto !important;
	float: none !important;
}
/* Notice text node sits in the same flex row as the buttons; expanding it
 * with margin-right:auto on the first .button pushes the whole button cluster
 * flush to the right edge instead of floating mid-banner. Without this the
 * default WC layout left-aligns text and lets buttons cluster wherever the
 * gap lands — the screenshot bug user reported on 2026-05-03. */
.woocommerce-message > a.button:first-of-type,
.woocommerce-message a.button.wc-forward:first-of-type,
.woocommerce-message .button:first-of-type {
	margin-left: auto !important;
}
.woocommerce-message > a.button + a.button,
.woocommerce-message .button + .button {
	margin-left: 0 !important;
}
.woocommerce-message > a.button:hover,
.woocommerce-message a.button.wc-forward:hover,
.woocommerce-message .button:hover,
.woocommerce-message > a.button:focus-visible,
.woocommerce-message a.button.wc-forward:focus-visible,
.woocommerce-message .button:focus-visible {
	background: var(--av-accent) !important;
	color: var(--av-white) !important;
}
@media (max-width: 600px) {
	/* Tight column on phones — text + button cluster stack instead of
	 * fighting for one line. */
	.woocommerce-message,
	.woocommerce-info,
	.woocommerce-error {
		flex-direction: column !important;
		align-items: stretch !important;
	}
	.woocommerce-message > a.button:first-of-type,
	.woocommerce-message .button:first-of-type {
		margin-left: 0 !important;
	}
}

/* Shoptimizer ATC confirmation modal (cart-confirmation-modal inside
 * #shoptimizer-modals-wrapper). Strip the parent's bright green and align
 * with the rest of the brand shell. */
#shoptimizer-modals-wrapper .modal,
#shoptimizer-modals-wrapper .shoptimizer-modal,
.shoptimizer-modal {
	background: var(--av-white) !important;
	color: var(--av-black) !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	border-radius: 0 !important;
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18) !important;
	font-family: var(--av-font-body, Roboto, system-ui, sans-serif) !important;
}
#shoptimizer-modals-wrapper .modal-header,
#shoptimizer-modals-wrapper .shoptimizer-modal-header {
	background: var(--av-off-white) !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
	color: var(--av-black) !important;
	padding: 16px 24px !important;
	font-family: var(--av-font-display, 'Roboto Slab', Georgia, serif) !important;
	font-size: 18px !important;
	font-weight: 400 !important;
}
#shoptimizer-modals-wrapper .modal-content,
#shoptimizer-modals-wrapper .shoptimizer-modal-content,
#shoptimizer-modals-wrapper .modal-body {
	padding: 24px !important;
}
#shoptimizer-modals-wrapper .button,
#shoptimizer-modals-wrapper a.button,
#shoptimizer-modals-wrapper button.button,
#shoptimizer-modals-wrapper .modal-footer .button,
.shoptimizer-modal .button,
.shoptimizer-modal a.button {
	background: var(--av-accent) !important;
	color: var(--av-white) !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 13px 26px !important;
	font-family: var(--av-font-body, Roboto, system-ui, sans-serif) !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	height: auto !important;
	line-height: 1.4 !important;
	box-shadow: none !important;
}
#shoptimizer-modals-wrapper .button:hover,
#shoptimizer-modals-wrapper a.button:hover {
	background: var(--av-black) !important;
}
/* Secondary modal button (e.g. "Alışverişe Devam Et") gets the outline variant
 * so the primary "Ödemeye Geç" stands out. */
#shoptimizer-modals-wrapper .button.alt,
#shoptimizer-modals-wrapper .button.button-secondary,
#shoptimizer-modals-wrapper a.button:not(.wc-forward):not(.checkout):first-of-type {
	background: transparent !important;
	color: var(--av-black) !important;
	border: 1px solid rgba(0, 0, 0, 0.18) !important;
}
#shoptimizer-modals-wrapper .button.alt:hover,
#shoptimizer-modals-wrapper .button.button-secondary:hover {
	border-color: var(--av-black) !important;
	background: var(--av-off-white) !important;
}

/* ============ v1.7.3 — Checkout error legibility ============
 * Validation errors at the top of the checkout (terms missing, address empty)
 * inherit a washed pinkish tint from Shoptimizer that reads as "info" rather
 * than "error" — user-tested 2026-05-03 and called out as unreadable. Push
 * the contrast: warm-tinted background, deep red accent border + bullet,
 * black body text, brand-font typography. */
.woocommerce-error,
.woocommerce-NoticeGroup-checkout .woocommerce-error,
form.checkout .woocommerce-NoticeGroup .woocommerce-error,
.woocommerce form .form-row.woocommerce-invalid .select2-selection,
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
	border-left-color: #b00020 !important;
}
/* Ground is sand, not the old #fdf2f0 pink: that tint was the one colour on the
 * notice outside the locked palette (owner, 2026-09-30, on the PDP "stokta 1
 * adet" notice). The error still reads as an error through the signal-error
 * hairline + icon, which is the semantic token the brand book carries. */
.woocommerce-error,
.woocommerce-NoticeGroup-checkout .woocommerce-error {
	background: var(--av-sand) !important;
	color: var(--av-black) !important;
	border-left: 3px solid #b00020 !important;
}
.woocommerce-error li,
.woocommerce-error a,
.woocommerce-error strong,
.woocommerce-NoticeGroup-checkout .woocommerce-error li {
	color: var(--av-black) !important;
	font-family: var(--av-font-body, Roboto, system-ui, sans-serif) !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
}
/* WC puts a "Sepetim" a.button.wc-forward INSIDE the error <li> (the stock-limit
 * notice on a second add-to-cart). The `.woocommerce-error a` rule above paints
 * it ink, and the parent's button fill is ink too — so it rendered as an empty
 * black slab (measured 2026-09-30: color and background both rgb(31,27,22)).
 * Give it the same black/uppercase chip as the .woocommerce-message buttons and
 * push it to the right edge of the row. */
.woocommerce-error li:has(> a.button) {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 12px 16px !important;
	flex: 1 1 auto !important;
}
.woocommerce-error a.button,
.woocommerce-error a.button.wc-forward {
	background: var(--av-black) !important;
	color: var(--av-white) !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 11px 22px !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	line-height: 1.4 !important;
	height: auto !important;
	box-shadow: none !important;
	float: none !important;
	margin: 0 0 0 auto !important;
	order: 99;
	transition: background 0.2s ease !important;
}
.woocommerce-error a.button:hover,
.woocommerce-error a.button:focus-visible {
	background: var(--av-accent) !important;
	color: var(--av-white) !important;
}
@media (max-width: 600px) {
	.woocommerce-error a.button,
	.woocommerce-error a.button.wc-forward {
		margin-left: 0 !important;
		flex: 1 1 100% !important;
		text-align: center !important;
	}
}
.woocommerce-error::before,
.woocommerce-NoticeGroup-checkout .woocommerce-error::before {
	color: #b00020 !important;
}
/* Inline per-field invalid state — Shoptimizer renders a subtle pink
 * underline that disappears on white forms; lock the border to the same
 * deep red so the user sees which row is wrong. */
.woocommerce form .form-row.woocommerce-invalid label {
	color: #b00020 !important;
}
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid textarea {
	border-color: #b00020 !important;
	box-shadow: 0 0 0 1px rgba(176, 0, 32, 0.25) !important;
}
/* Terms checkbox validation — the "Lütfen şartları kabul edin" label
 * specifically; default is faded grey on cream-pink. */
.woocommerce-form__label-for-checkbox.checkbox.validate-required.woocommerce-invalid span,
.woocommerce-terms-and-conditions-wrapper .woocommerce-invalid span {
	color: #b00020 !important;
	font-weight: 500 !important;
}

/* ============ v1.7.3 — PDP "no reviews" placeholder ============
 * Shoptimizer parent ships `.woocommerce-info,.woocommerce-noreviews,
 * p.no-comments { background-color: #3d9cd2; color: #fff; }` — the
 * woocommerce-info background override only covered .woocommerce-info, so
 * the PDP review tab's <p class="woocommerce-noreviews"> kept the parent's
 * blue tile. Force background to transparent + brand grey + Cormorant
 * italic + hairline divider for an editorial empty state. */
.woocommerce-noreviews,
#reviews .woocommerce-noreviews,
#tab-reviews .woocommerce-noreviews,
#cgkit-tab-reviews .woocommerce-noreviews,
.commercekit-Tabs-panel--reviews .woocommerce-noreviews,
.commentlist + .woocommerce-noreviews,
p.no-comments {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--av-gray-dark) !important;
	font-family: var(--av-font-display, 'Roboto Slab', Georgia, serif) !important;
	font-size: 18px !important;
	font-weight: 500 !important;
	font-style: normal !important;
	line-height: 1.5 !important;
	margin: 16px 0 24px !important;
	padding: 12px 0 !important;
	border: 0 !important;
	border-top: 1px solid var(--av-gray-light) !important;
	border-bottom: 1px solid var(--av-gray-light) !important;
	border-left: 0 !important;
	border-radius: 0 !important;
	text-align: center !important;
	box-shadow: none !important;
	max-width: none !important;
}
.woocommerce-noreviews a,
p.no-comments a {
	color: var(--av-accent) !important;
}

/* ============ v1.7.3 — Cart + checkout typography unify ============
 * Shoptimizer's cart/checkout templates pull system-ui for table cells +
 * sidebar labels, so they sit visibly off-key next to the rest of the site
 * (which is DM Sans body + Cormorant display). Force the brand stack across
 * every visible element on those two pages. */
.woocommerce-cart,
.woocommerce-checkout,
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-cart table.shop_table,
.woocommerce-cart table.shop_table th,
.woocommerce-cart table.shop_table td,
.woocommerce-cart .cart_totals,
.woocommerce-cart .cart_totals table,
.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td,
.woocommerce-cart .coupon,
.woocommerce-cart .coupon input,
.woocommerce-cart .coupon label,
.woocommerce-cart .product-name,
.woocommerce-cart .product-name a,
.woocommerce-checkout table.shop_table,
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td,
.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .checkout_coupon,
.woocommerce-checkout .checkout_coupon input,
.woocommerce-checkout .checkout_coupon label,
.woocommerce-checkout #customer_details,
.woocommerce-checkout #customer_details label,
.woocommerce-checkout #customer_details input,
.woocommerce-checkout #customer_details select,
.woocommerce-checkout #customer_details textarea,
.woocommerce-checkout .woocommerce-additional-fields label,
.woocommerce-checkout .woocommerce-shipping-fields label,
.woocommerce-checkout .woocommerce-billing-fields label,
.woocommerce-checkout #payment,
.woocommerce-checkout #payment .payment_methods label,
.woocommerce-checkout #payment .payment_box,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label,
.woocommerce-checkout .woocommerce-privacy-policy-text,
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-results__option {
	font-family: var(--av-font-body, Roboto, system-ui, -apple-system, sans-serif) !important;
	font-weight: 400;
}
/* Section headings on cart + checkout — push to display serif so the page
 * rhythm matches PDP / homepage. */
.woocommerce-cart h1,
.woocommerce-cart h2,
.woocommerce-cart h3,
.woocommerce-cart .cart_totals h2,
.woocommerce-checkout h1,
.woocommerce-checkout h2,
.woocommerce-checkout h3,
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3 {
	font-family: var(--av-font-display, 'Roboto Slab', Georgia, serif) !important;
	font-weight: 600;
	letter-spacing: -0.005em;
}
/* Coupon + table totals — display medium weight to pull the eye toward
 * total pricing without screaming. */
.woocommerce-cart .cart_totals .order-total .amount,
.woocommerce-checkout #order_review .order-total .amount {
	font-family: var(--av-font-display, 'Roboto Slab', Georgia, serif) !important;
	font-weight: 400;
	font-size: 1.4em;
	color: var(--av-black);
}

/* ============ v1.7.4 — Cart + checkout primary CTA hard-lock ============
 * Parent Shoptimizer ships `.button { background-color:#43454b;
 * border-radius:4px; font-weight:600; padding:0.818em 1.416em }` plus the
 * sticky proceed-to-checkout block uses higher specificity than my prior
 * override. Lock the brand stack on every CTA on cart + checkout with
 * !important so visitor never sees the parent's grey-blue + Helvetica fallback. */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .return-to-shop a.button,
.woocommerce-cart .return-to-shop .button.wc-backward,
.woocommerce-cart a.button.wc-backward,
.woocommerce-cart .wc-empty-cart-message + .return-to-shop .button,
.woocommerce-checkout #place_order,
.woocommerce-checkout button#place_order,
.woocommerce-checkout button.place-order,
.woocommerce-checkout #payment .form-row.place-order #place_order,
.woocommerce-cart .actions .button[name="update_cart"],
.woocommerce-cart .actions button[name="update_cart"],
.woocommerce-cart .coupon button[name="apply_coupon"] {
	background-color: var(--av-black) !important;
	background: var(--av-black) !important;
	color: var(--av-white) !important;
	font-family: var(--av-font-body, Roboto, system-ui, -apple-system, sans-serif) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	padding: 16px 28px !important;
	border: 0 !important;
	border-radius: 0 !important;
	height: auto !important;
	line-height: 1.4 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	transition: background 0.2s ease, color 0.2s ease !important;
}
/* Primary CTA — Ödeme Sayfasına Git (cart) + Siparişi Onayla (checkout).
 *
 * ⚠️ BLACK, NOT BRASS, since 2026-09-21. These two carried an `--av-accent` fill so
 * they would "pop above" the secondary update-cart / coupon actions. The owner looked
 * at the cart and called the result cheap — and the reason is that brass is this
 * brand's HAIRLINE-AND-BADGE colour everywhere else (chips, eyebrows, the 34px card
 * arrow on hover). A 480px slab of it is the one place the palette does not hold up,
 * and it collided with the neighbouring black buttons on the same screen: three
 * primaries in two colours. Black on the primaries with brass kept for hover is the
 * same ladder the rest of the site already uses (`.button:hover`, line ~155).
 *
 * Hierarchy does not disappear with the gold: the secondary actions on cart are
 * bordered/ghost, and this one still owns full width, centre alignment and the icon. */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order,
.woocommerce-checkout button#place_order {
	background-color: var(--av-black) !important;
	background: var(--av-black) !important;
	color: var(--av-white) !important;
	display: block !important;
	width: 100% !important;
	max-width: 480px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:focus-visible,
.woocommerce-checkout #place_order:hover,
.woocommerce-checkout #place_order:focus-visible {
	background-color: var(--av-accent) !important;
	background: var(--av-accent) !important;
	color: var(--av-white) !important;
}
/* Parent draws the padlock/cart glyph as a masked `:before`, so its colour is a
   background-color, not a fill. It has to track the label on both states or the icon
   disappears into the button. */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:before,
.woocommerce-checkout #place_order:before,
#payment .place-order .button:before,
.cart-collaterals .checkout-button:before {
	background-color: var(--av-white) !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover:before,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:focus-visible:before,
.woocommerce-checkout #place_order:hover:before,
.woocommerce-checkout #place_order:focus-visible:before {
	background-color: var(--av-white) !important;
}

/* ============ v1.7.4 — Empty cart compact + brand notice ============
 * `<div class="cart-empty woocommerce-info">Sepetiniz şu anda boş.</div>`
 * inherited the prior `.woocommerce-info { display:flex; align-items:center }`
 * cream banner plus parent's `padding:1em 1.618em`. Combined with parent's
 * `.cart-empty:before` mask-image (no width/height defined) and the WC
 * notice container's automatic full-width stretch, the box rendered ~280px
 * tall with one line of text floating awkwardly. Compact it: centered
 * editorial card, max 520px wide, gold border-left, brand display font. */
.woocommerce-cart .wc-empty-cart-message {
	margin: 32px auto !important;
	max-width: 560px !important;
	width: 100% !important;
}
.woocommerce-cart .wc-empty-cart-message .cart-empty,
.woocommerce-cart .cart-empty.woocommerce-info,
body.woocommerce-cart .cart-empty {
	display: block !important;
	flex-direction: initial !important;
	align-items: initial !important;
	flex-wrap: initial !important;
	gap: 0 !important;
	max-width: 560px !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding: 28px 32px !important;
	min-height: 0 !important;
	text-align: center !important;
	background: var(--av-off-white) !important;
	background-color: var(--av-off-white) !important;
	color: var(--av-black) !important;
	font-family: var(--av-font-display, 'Roboto Slab', Georgia, serif) !important;
	font-size: 22px !important;
	font-weight: 500 !important;
	font-style: normal !important;
	line-height: 1.4 !important;
	border: 0 !important;
	border-left: 3px solid var(--av-accent) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.woocommerce-cart .wc-empty-cart-message .cart-empty:before,
.woocommerce-cart .cart-empty.woocommerce-info:before,
body.woocommerce-cart .cart-empty:before {
	display: none !important;
	content: none !important;
}
body.woocommerce-cart .return-to-shop {
	text-align: center !important;
	margin: 16px auto 32px !important;
}
body.woocommerce-cart .return-to-shop a.button {
	display: inline-block !important;
	width: auto !important;
	max-width: none !important;
}

/* ============ v1.7.4 — Sticky footer (no white space below) ============
 * Issue: Hesabım dashboard, empty cart, ve thank-you sayfaları kısa içerik
 * ürettiğinde footer sayfa ortasında kalıyor, body bg (beyaz) altında
 * görünür beyaz şerit oluşuyor. Body'yi flex column, içeriği esnek, footer'ı
 * shrink-0 yaparak footer'ı her durumda viewport bottom'a sabitliyoruz.
 * Homepage hariç (full-bleed hero + parallax kendi layout'unu kuruyor). */
html, body {
	min-height: 100vh;
}
body:not(.home) {
	display: flex;
	flex-direction: column;
}
body:not(.home) #content {
	flex: 1 0 auto;
}
body:not(.home) .av-footer {
	flex-shrink: 0;
	margin-top: auto;
}
/* Admin bar + topbar üstte fixed olduğu için body padding-top zaten kuruldu;
 * flex column ile uyumlu. WP admin bar 32px / mobil 46px ekstra height
 * çıkardığında body min-height'ı buna göre düşür ki "100vh - admin-bar"
 * gerçek viewport olsun, gereksiz scroll yaratmasın. */
.admin-bar:not(.home) {
	min-height: calc(100vh - 32px);
}
@media (max-width: 782px) {
	.admin-bar:not(.home) {
		min-height: calc(100vh - 46px);
	}
}

/* ============ v1.7.4 — WC dynamic password toggle hide ============
 * Issue: WooCommerce frontend.js wraps every <input type="password"> with
 * <span class="password-input"> and appends <span class="show-password-input">
 * eye toggle (i18n via woocommerce_params.i18n_password_show in HTML). Our
 * custom .artiviq-pw-toggle on form-login.php then renders alongside it →
 * iki göz ikonu yan yana. Hide WC's dynamic toggle wherever it appears in
 * the Hesabım pages so only our brand-styled eye remains. Browser-built-in
 * reveal pseudo-elements were already covered in form-login.php inline css. */
.artiviq-account-wrapper .show-password-input,
.artiviq-account-wrapper .password-input .show-password-input,
body.woocommerce-account .show-password-input,
body.woocommerce-account .password-input::after {
	display: none !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
	pointer-events: none !important;
}
/* WC's wrapper span pushes input layout — neutralize so our .artiviq-pw-wrap
 * absolute positioning of the eye stays correct even after JS injects the
 * extra wrapper. */
.artiviq-account-wrapper .password-input {
	position: relative !important;
	display: block !important;
	width: 100% !important;
}

/* Cart quantity input: 16px on phones -------------------------------------
 * Shoptimizer 2.9.9 (installed 2026-09-20) added
 *   @media (max-width:768px){ input, select { font-size:16px } }
 * so iOS Safari stops zooming the page when the field takes focus. Its own
 * `table.cart .quantity input { font-size:12px }` in main.min.css is (0,2,1)
 * and outranks that (0,0,2), so the fix never reached the cart table —
 * measured at 390px right after the update: PDP 16px, cart 12px. The leading
 * `body ` takes this to (0,2,2), which also clears Shoptimizer's Customizer
 * CSS, printed after this file. */
@media (max-width: 768px) {
	body table.cart .quantity input,
	body .cart-drawer .quantity input,
	body .widget_shopping_cart .quantity input {
		font-size: 16px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
 * v1.10.0 (2026-09-21) — THE SWEEP v1.8.0 MISSED
 *
 * v1.8.0 moved the typeface, the weights and the radii. It moved the ones that
 * were VISIBLE on the pages that were looked at. Measuring the cart, checkout
 * and account pages a day later turned up the rest, and they all had the same
 * shape: a value from the old identity, still live, on a surface nobody had
 * opened.
 *
 *  1. `--av-cream` WAS NEVER DEFINED. Not in the old `:root`, not in the new
 *     one. Every `var(--av-cream, #faf6ee)` in this file therefore resolved to
 *     the literal fallback — the OLD cream — and the empty-cart panel has been
 *     painting itself in a retired brand colour the whole time. Now
 *     `var(--av-off-white)`, which is the token that exists.
 *
 *  2. FIVE FALLBACKS CARRIED THE OLD PALETTE: #c8a96e (old gold, brass is
 *     #8A6A36 now), #0d0d0d (old near-black, ink is #1F1B16), #3a3a3a, #ebebeb,
 *     #ffffff. A fallback holding a retired value is a landmine, not a safety
 *     net: it is invisible for as long as the token resolves, and the day a name
 *     changes it silently restores the old brand instead of failing loudly —
 *     which is exactly what `--av-cream` did. All five removed; a missing token
 *     should now render obviously wrong.
 *
 *  3. EIGHT `font-weight: 300` SURVIVED. Roboto Slab is self-hosted at 500 and
 *     600 ONLY (functions.php), so 300 was being synthesised by the browser on
 *     the mobile menu, the checkout headings, the checkout body text, the PDP
 *     "no reviews" line and the empty-cart panel. The checkout `h1` measured
 *     `font-weight: 300` live on 2026-09-21 — that is what sent us looking.
 *     Display → 500/600, body → 400.
 *
 *  4. TWO `font-style: italic` SURVIVED, and Roboto Slab HAS NO ITALIC. The
 *     browser falls to Georgia italic, so the PDP review empty state and the
 *     empty-cart panel were rendering in a different typeface entirely. Same
 *     defect as the hero `<em>` fixed on 2026-09-21; these two were in the file
 *     the hero fix did not touch.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* The cookie banner is plugin markup (`.ac-inner`) and it sets italic on its own
 * heading. The heading picks up `--av-font-display` from the global h1–h4 rule
 * above, so the italic lands on Roboto Slab and falls to Georgia — on EVERY page
 * of the site, which is why it outranks its size. The plugin's own stylesheet
 * loads after this file, so the override is `!important`; that is the narrow,
 * justified use of it, not the habit. */
.ac-inner h1,
.ac-inner h2,
.ac-inner h3 {
	font-style: normal !important;
	font-weight: 500 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * v1.10.0 — THE BODY FACE WAS NOT ACTUALLY THE BODY FACE
 *
 * MEASURED 2026-09-21 by counting the computed `font-family` of every visible
 * button, input, label, p, li, a, span and table cell on five templates:
 *
 *   /                      Inter 218 · Roboto  38 · Roboto Slab 53
 *   /hesabim/              Inter 123 · Roboto  20 · Roboto Slab 13
 *   /modern-seramik-vazo-6/ Inter 158 · Roboto 135 · Roboto Slab 32
 *   /vazolar-surahiler/    Inter 142 · Roboto 181 · Roboto Slab 49
 *   /alisveris-sepeti/     Inter  27 · Roboto 137 · Roboto Slab 15
 *
 * Inter was the dominant body face on the home page and the account page, and a
 * third loaded webfont everywhere. It comes from Shoptimizer's own
 * `body, button, input, select, option, textarea, :root :where(body)`.
 *
 * v1.8.0's body rule listed `body, .woocommerce, .site, .site-content,
 * .entry-content p` — the containers. It never named the FORM AND TEXT ELEMENTS
 * the parent names explicitly, and an explicit element selector is not inherited
 * past by a container selector. So every button, input, label, list item and
 * table cell on the site kept Inter, and the change read as done because the
 * headings and paragraphs it did cover were the ones anyone looked at. A body
 * face is not "set" until the elements that carry most of the words have it.
 *
 * ⚠️ ELEMENT SELECTORS ONLY, ON PURPOSE. Icon fonts (`star`, `WooCommerce`,
 * `WC_GC`, `slick`) are applied through CLASS selectors and pseudo-elements, both
 * of which outrank a bare element selector, so they keep their glyphs without
 * needing an exclusion list here — and an exclusion list authored apart from the
 * plugins that mint those classes would go stale the first time one is added
 * (memory `feedback_a_filter_list_authored_apart_from_its_data_excludes_silently`).
 *
 * ⚠️ NO HEADINGS IN THIS LIST. h1–h4 are display-face and are set above.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ `!important`, AND IT IS NOT LAZINESS — CASCADE ORDER CANNOT REACH THIS.
 *
 * The first attempt at this rule, without it, moved the home page from 218 Inter
 * elements to 159 and no further. Reading the LIVE combined stylesheet showed why:
 * LiteSpeed folds every sheet into one file, and inside it Shoptimizer's
 * `body, button, input, select, option, textarea, :root :where(body){font-family:Inter}`
 * lands AFTER both of this file's rules. It is Customizer-generated CSS emitted in
 * `wp_head`, so it is always later than an enqueued stylesheet no matter what the
 * dependency graph says — `wp_enqueue_style`'s `$deps` orders enqueued sheets against
 * each other and has no opinion about inline head CSS. Raising specificity would have
 * worked too, until the parent raised its own; `!important` states the intent, which
 * is that the brand's body face is not the parent theme's to choose.
 *
 * Diagnosed by reading the stylesheet the BROWSER assembled, not the ones we sent —
 * the intervening layer is part of every read (doctrine 5).
 */
body,
button,
input,
select,
optgroup,
option,
textarea,
label,
legend,
p,
li,
dd,
dt,
td,
th,
figcaption,
blockquote,
:root :where(body) {
	font-family: var(--av-font-body) !important;
}

/* ── The named selectors the parent's inline CSS still out-ranked ─────────────
 *
 * After the body rule above, Inter was gone from the home page, the account page
 * and the cart, and survived on exactly four selectors — measured, not guessed, by
 * walking every visible element and grouping the Inter ones:
 *
 *   .woocommerce-loop-product__title                   12 on /vazolar-surahiler/
 *   a.woocommerce-LoopProduct-link                     12
 *   .widget-title / .gamma                              6   (includes the new facets)
 *
 * All three are already given a face earlier in this file — the loop title
 * deliberately gets the BODY font, because SigaraTech writes product names in the
 * body face and keeps the slab for headings and prices. They lose for the same
 * reason `body` did: Shoptimizer sets them from Customizer CSS in `wp_head`, which
 * is always later than an enqueued stylesheet. Listed here rather than salted
 * through the file above, so what the parent actually contests stays readable and
 * a future parent update can be re-measured against this exact list.
 */
.woocommerce-loop-product__title,
a.woocommerce-LoopProduct-link,
.woocommerce-LoopProduct-link .woocommerce-loop-product__title {
	font-family: var(--av-font-body) !important;
}

.widget-title,
.gamma.widget-title,
.widget-area .widget-title {
	font-family: var(--av-font-display) !important;
}

/* ── The cookie consent banner: the last Cormorant on the site ────────────────
 *
 * `.artiviq-consent` is a custom component and it was never migrated with the
 * rest. Measured on every template on 2026-09-21, AFTER the two blocks above had
 * cleared Inter from the pages themselves: 4–5 elements per page still rendering
 * `Cormorant Garamond` (`.ac-name`) and ~20 rendering Inter (`.ac-row`, `.ac-desc`,
 * `.ac-inner`, `.ac-eyebrow`, `.ac-actions`, `.ac-prefs`).
 *
 * Cormorant Garamond is no longer loaded anywhere — the Google Fonts <link> came
 * out on 2026-09-21 — so `.ac-name` was falling all the way to Georgia. That is
 * why the banner has been reading as a different design from the site it sits on,
 * on every single page, including the checkout.
 *
 * ⚠️ The banner is the one surface that appears on 100% of sessions, including the
 * first paint of a first visit. It is the most-seen component on the site and it
 * was the least migrated.
 *
 * `html` and `.entry-content` are here for the same reason and from the same
 * measurement: the parent sets Inter on both, and `.entry-content` hands it down to
 * every block inside a page or post.
 */
html,
.entry-content,
.artiviq-consent,
.artiviq-consent div,
.artiviq-consent p,
.artiviq-consent span,
.artiviq-consent button,
.artiviq-consent a {
	font-family: var(--av-font-body) !important;
}

.artiviq-consent .ac-name,
.artiviq-consent h1,
.artiviq-consent h2,
.artiviq-consent h3 {
	font-family: var(--av-font-display) !important;
	font-style: normal !important;
}

/* ── An INVISIBLE LINK ON THE CHECKOUT, measured 2026-09-21 ──────────────────
 *
 * `.woocommerce-info` above re-skins WooCommerce's notice banner from its default
 * bright blue/green to Artiviq paper. It re-coloured the banner's own text and its
 * button. It never re-coloured the PLAIN LINKS inside it — and Shoptimizer styles
 * those white, because on the ground it was designed for, white was right.
 *
 * The consequence, measured on the live checkout: "Giriş yapmak için tıklayın" —
 * the returning-customer login link, the FIRST element on the checkout page —
 * rendered `rgb(255,255,255)` on `rgb(247,243,236)`. **Contrast 1.10:1.** Not hard
 * to read: invisible. A returning customer had no way to see that logging in was
 * offered, on the one page where it saves them typing an address.
 *
 * The general lesson, and it is the one this whole day keeps repeating: changing a
 * GROUND obliges you to re-measure everything sitting ON it. The re-skin was
 * checked by looking at the banner, and the banner looked right.
 *
 * `--av-accent-text` rather than `--av-accent`: brass-as-a-word is 4.15:1 on sand
 * and fails AA; #826433 measures 4.97 on paper.
 */
.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button),
.woocommerce-error a:not(.button),
.wc-block-components-notice-banner a:not(.button),
.woocommerce-form-login-toggle a,
a.showlogin,
a.showcoupon {
	color: var(--av-accent-text) !important;
	text-decoration: underline !important;
	text-underline-offset: 2px;
	font-weight: 600;
}

.woocommerce-message a:not(.button):hover,
.woocommerce-info a:not(.button):hover,
.woocommerce-form-login-toggle a:hover,
a.showlogin:hover,
a.showcoupon:hover {
	color: var(--av-black) !important;
}

/* ===========================================================================
   Artiviq PLP — kart hizası + Sepete Ekle butonu
   Sahip revizesi 2026-09-21: "düzen kayması var, vintage ahşap kabartma evi
   yukarıda kalmış" · "sepete ekle butonu şişmiş, ortalı değil, amatör".

   BU DOSYA NEDEN BURADA (tenants/ altında, themes/ altında değil)
   ---------------------------------------------------------------
   Kanonik yeri child theme'in `assets/artiviq-tokens.css` dosyasının sonu ve
   oraya da yazılıyor. Ama `themes/` .gitignore'da: `scripts/theme_sync.py`
   canlıyı çekip tokens.css'i ÜZERİNE YAZIYOR ve git'te kopyası olmadığı için
   yazdığın blok geri dönüşsüz gidiyor. 2026-09-21'de tam olarak bu oldu —
   blok yazıldı, ölçülerek doğrulandı, sonra başka bir oturumun zorunlu pull'u
   sildi. İzlenen bir yol üzerindeki bu kopya, o kaybı tek seferlik bir
   sinir bozukluğu olmaktan çıkarıp geri alınabilir hale getiriyor.
   Değiştirirsen İKİSİNİ de değiştir; tokens.css kaybolursa buradan geri koy.
   =========================================================================== */

/* --- 1 · Satır içi kart hizası --------------------------------------------
   Sebep, sanılan yerde değil. `.woocommerce-card__header{flex:1}` +
   `.price{margin-top:auto}` çifti tokens.css'te zaten var ve CANLIDA — ama
   hiçbir şey yapmıyor, çünkü Shoptimizer
   `body:not(.static-cta-buttons) ul.products li.product` ile
   `align-self:flex-start` veriyor. Kart flex satırında ESNEMEYİNCE kartın
   içinde fiyatı dibe itecek boşluk hiç oluşmuyor: `margin-top:auto` bir
   boşluğu paylaştırır, yoktan boşluk yaratmaz. Kural doğru, uygulanacağı
   boşluk yok.

   Ölçüm (/cerceve-ayna/, 1440px, 4. satır — sahibin ekran görüntüsündeki satır):
     önce : kart yük. 444px / 464px   fiyat üstleri 2143 / 2162  (bir satır kayma)
     sonra: kart yük. 464px (tek)     fiyat üstü    2162 (tek)   ✓

   `!important` burada tembellik değil: ezilecek kural `:not()` taşıyor, sınıf
   sayısıyla yarışmak selektörü okunmaz hale getiriyor. */
ul.products li.product {
	align-self: stretch !important;
}

/* --- 2 · Card body: the homepage card's price row -------------------------
 * Owner revision, 2026-09-21: "PLP'de sepete ekle butonunu anasayfadaki gibi
 * sadece ok işareti olarak düzenle … anasayfa gösterimi nasıl etkileyiciyse,
 * PLP'de o kalitede olmalı."
 *
 * The homepage card (`.av-card`, artiviq-homepage.css) ends in a price row: a
 * hairline, the price on the left, a 34px bordered square holding a right arrow
 * on the right. The PLP card carried the same four pieces stacked in a column
 * under a full-width text button — the same content rendered as a different
 * object. This block makes the loop card end the same way.
 *
 * WHY GRID AND NOT FLEX. The price and the button have to share one line, and
 * they are SIBLINGS: `.woocommerce-card__header` holds exactly
 * `p.product__categories`, `.woocommerce-loop-product__title`, `span.price`,
 * `a.button` and a `span.screen-reader-text`, with no wrapper the loop template
 * would let us add. A grid pairs two siblings on one line without one:
 *
 *     "cat   cat"     product__categories
 *     "title title"   woocommerce-loop-product__title   ← 1fr, absorbs the slack
 *     "rule  rule"    ::after hairline
 *     "price go"      .price + a.button
 *
 * That 1fr row is also what retires the `margin-top:10px` patch this block
 * carried at 390px. The old column asked TWO children for `margin-top:auto`
 * (Shoptimizer gives the button one, we gave the price one) and they split the
 * free space between them, so a card with a short name pushed its price ~8px
 * higher than its neighbour's — 4 of 6 rows drifted. A grid row does not
 * negotiate: the price sits on row 4 in every card of the row whatever the name
 * does above it. Removing the hack is part of the fix, not a regression.
 *
 * THREE BUTTONS, NOT ONE. `/cerceve-ayna/` serves all three at once, and they do
 * different things, so they do not all get the arrow:
 *   · `a.button.product_type_variable`  "Seçenekler"            → href = the PDP
 *   · `a.button.ajax_add_to_cart`       "Sepete Ekle"           → really adds
 *   · `li.outofstock a.button`          "Stok Gelince Haber Ver" → href = the PDP
 * Arrow = "this takes you to the product", exactly what it means on the
 * homepage; a real add-to-cart gets a bag instead. One glyph must not mean two
 * actions — that would be the inconsistency the revision is about, moved rather
 * than fixed.
 *
 * THE OUT-OF-STOCK CARD KEEPS ITS SIGNAL, and it was never the button that
 * carried it. Shoptimizer already prints `<span class="product-out-of-stock">
 * <em>Stokta yok</em></span>` across the image, in the markup, on every load —
 * checked on the served HTML before this block shipped a second "TÜKENDİ" badge
 * of its own and had to take it back out. Nothing is lost by the icon either
 * way: `font-size:0` hides the label from the eye and leaves it in the
 * accessibility tree, so the button is still announced as
 * "Stok Gelince Haber Ver".
 */

/* 2a · the grid */
.woocommerce ul.products li.product:not(.product-category) .woocommerce-card__header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto minmax(0, 1fr) auto auto;
	grid-template-areas:
		"cat   cat"
		"title title"
		"rule  rule"
		"price go";
	column-gap: 12px;
	padding-inline: 16px;
	padding-bottom: 16px;
}

/* Shoptimizer indents each loop child by 16px of its own; the grid owns the
   gutter now, so keeping those would indent everything twice. */
.woocommerce ul.products li.product .woocommerce-card__header > * {
	margin-left: 0;
	margin-right: 0;
}

.woocommerce ul.products li.product .woocommerce-card__header > .product__categories {
	grid-area: cat;
}

.woocommerce ul.products li.product .woocommerce-card__header > .woocommerce-loop-product__title {
	grid-area: title;
}

/* The hairline is a grid item, not a border, because the border would have to
   span two cells and the 12px column gap would cut it in half. */
.woocommerce ul.products li.product:not(.product-category) .woocommerce-card__header::after {
	content: "";
	grid-area: rule;
	height: 1px;
	/* 18/10 rather than 12/10: with the second hairline gone this rule has to read
	   as the TOP of the price row (the homepage card's `.av-card__price-row`
	   border), not as an underline hanging off the product name — which is the
	   line the owner asked to lose. More air above than below does that. */
	margin-top: 18px;
	margin-bottom: 10px;
	background: var(--av-gray-light);
}

/* ⚠️ `border-top: 0` IS THE RULE, not tidiness. Line ~330 of this file still gives
   every `li.product .price` a hairline of its own from the pre-grid column layout,
   and this block never reset it — so the card drew TWO lines 10px apart: the
   full-width `::after` above, and a second one that stopped dead where the 34px
   button starts, because a border on the price only spans grid column 1. Measured
   on /cerceve-ayna/ 2026-09-21 (owner reported it): `::after` at y=803 and
   `.price` border-top at y=826. The one that survives is the `::after`, because
   that is the homepage card's hairline — `.av-card__price-row` borders the WHOLE
   row, price AND go-button, so it runs edge to edge. Keeping the partial one
   instead would have left a rule that visibly stops short of the button. */
.woocommerce ul.products li.product .woocommerce-card__header > .price {
	grid-area: price;
	align-self: end;
	margin: 0;
	padding: 0;
	border-top: 0;
}

/* 2b · the action — the homepage's `.av-card__go`, to the pixel */
.woocommerce ul.products li.product .woocommerce-card__header > a.button,
.woocommerce ul.products li.product .woocommerce-card__header > a.added_to_cart {
	--av-plp-glyph: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2012h14M13%206l6%206-6%206%27%2F%3E%3C%2Fsvg%3E");
	grid-area: go;
	align-self: end;
	justify-self: end;
	position: relative;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	min-width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--av-gray-light);
	border-radius: var(--av-radius);
	background: transparent;
	color: var(--av-black);
	/* font-size:0 hides the label from the eye and keeps it in the accessibility
	   tree — the button is still named "Sepete Ekle" to a screen reader. */
	font-size: 0;
	line-height: 0;
	opacity: 1;
	transition: background-color .2s, border-color .2s, color .2s;
}

/* The six resets are not tidiness. Shoptimizer already owns this pseudo:
   `.ajax_add_to_cart.add_to_cart_button:after` is its AJAX spinner and parks it
   at `position:absolute; opacity:0; margin:-9px; border-radius:50%`. Our rule
   wins on the properties it DECLARES and inherits the rest, so the first build
   of this block drew a correct bag glyph at opacity 0, off-centre, on every
   simple product — the arrow buttons were fine because that selector does not
   match them. Measured on /cerceve-ayna/ 2026-09-21: `::after` computed
   `opacity:0, position:absolute` while content, mask and size were all ours. */
.woocommerce ul.products li.product .woocommerce-card__header > a.button::after,
.woocommerce ul.products li.product .woocommerce-card__header > a.added_to_cart::after {
	content: "";
	position: static;
	inset: auto;
	display: block;
	margin: 0;
	border: 0;
	border-radius: 0;
	opacity: 1;
	animation: none;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: var(--av-plp-glyph) center / 16px 16px no-repeat;
	mask: var(--av-plp-glyph) center / 16px 16px no-repeat;
}

/* A button that really puts the item in the cart is not the same promise as one
   that opens the product, so it does not borrow the same glyph. */
.woocommerce ul.products li.product .woocommerce-card__header > a.button.ajax_add_to_cart {
	--av-plp-glyph: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%207h12l1.2%2013H4.8L6%207z%27%2F%3E%3Cpath%20d%3D%27M9%207V5.5a3%203%200%200%201%206%200V7%27%2F%3E%3C%2Fsvg%3E");
}

.woocommerce ul.products li.product .woocommerce-card__header > a.added_to_cart {
	--av-plp-glyph: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2012.5l5%205L20%206.5%27%2F%3E%3C%2Fsvg%3E");
}

/* WooCommerce draws its spinner in `a.button.loading::after`, which this block
   has taken over; dimming the control is the replacement acknowledgement. */
.woocommerce ul.products li.product .woocommerce-card__header > a.button.loading {
	opacity: .5;
	pointer-events: none;
}

.woocommerce ul.products li.product .woocommerce-card__header > a.button:hover,
.woocommerce ul.products li.product .woocommerce-card__header > a.button:focus-visible,
.woocommerce ul.products li.product .woocommerce-card__header > a.added_to_cart:hover,
.woocommerce ul.products li.product .woocommerce-card__header > a.added_to_cart:focus-visible {
	background-color: var(--av-black);
	border-color: var(--av-black);
	color: var(--av-white);
	transform: none;
}

/* 2c · Shoptimizer reserves 40px at the foot of every loop card for a button it
   positions absolutely on hover. This block put the button back in flow, so that
   reserve is now 40px of nothing under the price row — measured 55px of dead
   space below a 34px control. The header's own 16px is the whole gutter. */
.woocommerce ul.products li.product:not(.product-category) {
	padding-bottom: 0;
}

/* 2d · two columns at 390px leave a 162px card: 16+16 gutter + 34 button + 12
   gap = 78px, so the price has ~84px. "1.499,00 ₺" does not fit at 1.05rem. */
@media (max-width: 600px) {
	.woocommerce ul.products li.product:not(.product-category) .woocommerce-card__header {
		column-gap: 8px;
		padding-inline: 12px;
	}

	.woocommerce ul.products li.product .woocommerce-card__header > .price {
		font-size: .82rem;
	}

	.woocommerce ul.products li.product .woocommerce-card__header > a.button,
	.woocommerce ul.products li.product .woocommerce-card__header > a.added_to_cart {
		width: 30px;
		min-width: 30px;
		height: 30px;
	}

	.woocommerce ul.products li.product .woocommerce-card__header > a.button::after,
	.woocommerce ul.products li.product .woocommerce-card__header > a.added_to_cart::after {
		width: 14px;
		height: 14px;
		-webkit-mask-size: 14px 14px;
		mask-size: 14px 14px;
	}
}


/* ── THE CHECKOUT STEP BAR OVERLAPPED THE FIRST CART ROW, measured 2026-09-21 ──
 *
 * Shoptimizer's `ul.checkout-bar` draws the progress line and hangs each step's
 * label out of a ZERO-HEIGHT `li` — the layout reserves 2px for the whole
 * component and the labels simply overflow downward. That works while every
 * label is one line. At 390px "Alışveriş Sepeti" and "Kargo ve Ödeme" each wrap
 * to two, and the labels then run into the content underneath.
 *
 * Measured on /alisveris-sepeti/ at 390px: label text ends at y=191, the first
 * `.cart_item` starts at y=170 — 21px of live overlap, the product title sitting
 * on top of the step names (owner-visible in the v1.8.0 mobile walk).
 *
 * The fix is clearance, not a redesign: the overflow is how the component is
 * built and reflowing it would touch the desktop too. 40px → 72px below 600px
 * covers the measured 21px with the second line's leading to spare, and the
 * rule cannot reach the one-line desktop layout at all.
 */
@media (max-width: 600px) {
	.woocommerce-cart .checkout-wrap,
	.woocommerce-checkout .checkout-wrap {
		margin-bottom: 72px;
	}
}


/* ── ONE H1 PER CONTENT PAGE ─────────────────────────────────────────────
 * Set by `artiviq_is_full_width_content_page()` + the `av-own-title` test in
 * inc/page-layout.php: the page body already opens with its own eyebrow and <h1>,
 * so Shoptimizer's `header.entry-header` would print the title a second time —
 * measured twice on /sikca-sorulan-sorular/ at two different sizes and two
 * different left edges. `.entry-header` holds nothing but that heading on these
 * templates (checked on the served DOM), so hiding the header is exactly as
 * surgical as hiding the h1 and does not leave its 24px bottom margin behind. */
body.av-content-page.av-own-title .entry-header {
	display: none;
}

/* ── EDITORIAL PAGE FIGURES ──────────────────────────────────────────────
 * The `.av-page-content` utility CSS lives in the mu-plugin
 * (plugins/mu-plugins/cs-site-artiviq.php, printed at wp_head) and predates these
 * pages carrying images at all, so it has no rule for a figure. Adding it here
 * rather than there keeps the change in the theme repo with the rest of the
 * 2026-09-21 revision pass; the two files simply both load.
 *
 * `aspect-ratio` from the served width/height plus a `min-height` of 0 is what
 * stops the page reflowing while the image decodes: LiteSpeed rewrites every
 * `<img>` to a `[data-lazyloaded]` placeholder, so the box has to be reserved by
 * CSS or the paragraph under it jumps when the real file lands. */
.av-page-content .av-page-figure {
	margin: 34px 0 40px;
}

.av-page-content .av-page-figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1600 / 893;
	object-fit: cover;
	border-radius: var(--av-radius-card, 10px);
	background: var(--av-sand);
}

.av-page-content .av-page-figure figcaption {
	margin-top: 10px;
	font-family: var(--av-font-body);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--av-gray-mid);
}

@media (max-width: 600px) {
	.av-page-content .av-page-figure {
		margin: 26px 0 30px;
	}
}

/* ── Sidebar product widgets: the image carries the row ──────────────────────
 *
 * MEASURED on the live /blog/ at 1440 before this block (2026-09-23): the sidebar
 * column is 207px and the widget thumbnail is 36.6px square, floated right, with a
 * 14px title running inline beside it. Two widgets, five products each, 1297px of
 * column — and the ten product photographs together occupy about 1,3% of it. The
 * owner read that as "yazı yazı, odak kaçıyor", which is exactly what the numbers
 * say: a text list with a decoration, on a site whose whole proposition is the
 * object.
 *
 * ⚠️ THE CAP IS IN THE PARENT, AND IT IS NOT A WIDTH. Shoptimizer ships
 *     .product_list_widget li img { float:right; max-width:2.617924em }
 * so `width:100%` alone is silently clamped to 36.65px: the rule LOOKS applied, the
 * box does not move, and nothing reports it. The first render pass here did exactly
 * that. Every override below therefore clears `max-width` as well — found by
 * measuring the element in a browser, not by reading the stylesheet.
 *
 * SHAPE (owner's pick, 2026-09-23, chosen from four variants rendered against the
 * live page): the list stays a list — 80px square image on the left, name and price
 * on the right. 4,8× the image area, all five products kept, and the column comes
 * out slightly shorter than before (1237px against 1297px).
 *
 * SCOPE — sidebars only, and never the cart. `.widget_shopping_cart` has its own
 * `.product_list_widget` with its own furniture (remove button, quantity line), and
 * the mini-cart drawer is injected by CommerceKit outside any `.widget-area`.
 * Measured on /blog/, /vazolar-surahiler/ and a single post: two widgets,
 * `widget_products` + `widget_top_rated_products`, both inside `#secondary`.
 *
 * The markup is WooCommerce's and is not ours to change — `li > a > img +
 * .product-title`, with the price a SIBLING of the anchor. That is why the image is
 * taken out of flow and the row padded around it, rather than made a flex row:
 * a flex/grid row would need `display:contents` on the anchor, which hands the
 * clickable box to the assistive tree to rebuild for no layout gain.
 */
.widget-area .widget:not(.widget_shopping_cart) .product_list_widget {
	display: block;
	margin: 0;
	padding: 0;
}

.widget-area .widget:not(.widget_shopping_cart) .product_list_widget li {
	position: relative;
	list-style: none;
	min-height: 80px;
	margin: 0 0 14px;
	padding: 0 0 14px 92px;
	border-bottom: 1px solid var(--av-gray-light);
}

.widget-area .widget:not(.widget_shopping_cart) .product_list_widget li:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

/* The parent clears a float that no longer exists. */
.widget-area .widget:not(.widget_shopping_cart) .product_list_widget li::before,
.widget-area .widget:not(.widget_shopping_cart) .product_list_widget li::after {
	content: none;
	display: none;
}

.widget-area .widget:not(.widget_shopping_cart) .product_list_widget li img {
	position: absolute;
	left: 0;
	top: 0;
	float: none !important;
	width: 80px !important;
	height: 80px !important;
	max-width: none !important;   /* the parent's 2.617924em cap */
	margin: 0 !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;            /* thumbnails are not guaranteed square */
	border-radius: 8px;
	background: var(--av-sand);
	transition: transform .35s ease;
}

.widget-area .widget:not(.widget_shopping_cart) .product_list_widget li a:hover img {
	transform: scale(1.04);
}

.widget-area .widget:not(.widget_shopping_cart) .product_list_widget .product-title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 5px;
	font-family: var(--av-font-body);
	font-size: 13px;
	line-height: 1.35;
	font-weight: 400;
	color: var(--av-black);
}

.widget-area .widget:not(.widget_shopping_cart) .product_list_widget .woocommerce-Price-amount {
	font-family: var(--av-font-display);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: .01em;
	color: var(--av-accent-text);
}

.widget-area .widget:not(.widget_shopping_cart) .product_list_widget ins {
	text-decoration: none;
	background: none;
}

/* The star row is off by the owner's pick: it was hidden in the variant chosen, and
 * it only ever rendered on 3 of the 10 rows, so it read as missing data rather than
 * as proof. One line to bring back if the votes are wanted on the votes widget. */
.widget-area .widget:not(.widget_shopping_cart) .product_list_widget .star-rating {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.widget-area .widget:not(.widget_shopping_cart) .product_list_widget li img {
		transition: none;
	}
	.widget-area .widget:not(.widget_shopping_cart) .product_list_widget li a:hover img {
		transform: none;
	}
}

/* --- 3 · Desktop gutter: cards stand apart --------------------------------
 * Owner, 2026-09-23: "PLP ve ilgili ürünlerde ürünler arası borderlar iyi
 * durmuyor." Above 992px Shoptimizer lays the loop out as flex rows whose
 * gutter is the li's own `padding: 0 15px` — a gutter only while the card has
 * no border. Once the card got a border, that padding moved INSIDE the frame:
 * the cards touched (x 381/699/1017, widths 318, gap 0), every seam was two 1px
 * lines with two 10px radii notching into each other, and the photo sat 16px
 * in from the sides but flush with the top. Measured on /vazolar-surahiler/
 * and the PDP's related row at 1440 and 1100.
 *
 * A grid with a real gap fixes all three at once: 24px between cards, padding
 * gone so the photo runs edge to edge as it already does at 390px. ≤992px is
 * untouched — the archive is already a 2-column grid with a 20px gap there,
 * and the related row is a horizontal scroller that must stay flex.
 * `::before/::after` are Shoptimizer's clearfix; in a grid they would take the
 * first and last cells. */
@media (min-width: 993px) {
	.woocommerce ul.products {
		display: grid;
		grid-template-columns: repeat(var(--av-loop-cols, 4), minmax(0, 1fr));
		gap: 24px;
	}

	.woocommerce ul.products.columns-2 { --av-loop-cols: 2; }
	.woocommerce ul.products.columns-3 { --av-loop-cols: 3; }
	.woocommerce ul.products.columns-5 { --av-loop-cols: 5; }

	.woocommerce ul.products::before,
	.woocommerce ul.products::after {
		display: none;
	}

	.woocommerce ul.products li.product {
		width: auto;
		margin: 0;
		padding: 0;
		float: none;
	}
}

/* Checkout "Hesap oluştur?" — the password field stays closed until the box is ticked.
 * WooCommerce hides `div.create-account` from checkout.js, and LiteSpeed delays that script
 * until the visitor's first touch (measured 2026-09-26: display:block before any interaction,
 * none after). Until then an unticked box sat above a starred "Hesap parolası oluştur *" field
 * that read as required. CSS closes it from the first paint; once the script runs, its inline
 * slideDown/slideUp styles win as before. Guarded by :has(#createaccount) so a store set to
 * always create an account (no checkbox) keeps the field visible. */
.woocommerce-account-fields:has(#createaccount):not(:has(#createaccount:checked)) div.create-account {
	display: none;
}

/* Cart code field on a phone = the checkout's: input and "Uygula" each full width, stacked.
 * On the cart the gift card form inherited inline-block sizing (280px input + a 96px button
 * wrapped under it), so the same field looked like two different components one step apart. */
@media (max-width: 960px) {
	.woocommerce-cart .add_gift_card_form #wc_gc_cart_redeem_form #wc_gc_cart_code,
	.woocommerce-cart .add_gift_card_form #wc_gc_cart_redeem_send {
		display: block;
		width: 100%;
		max-width: none; /* the desktop rule caps the input at 280px */
	}
	.woocommerce-cart .add_gift_card_form #wc_gc_cart_redeem_send {
		margin-top: 8px;
	}
}

/* ============ PLP REVIEW FIXES (2026-09-28, owner approved the PDP/PLP review) ============ */

/* /alisveris/ shelf chips — see inc/archive-filters.php. */
/* The parent lays .woocommerce-products-header out as a nowrap flex ROW on desktop, so the
 * chips sat beside the H1, top-aligned against its cap height (owner, 2026-09-30: "webde
 * ortalanmış görünmüyor"). The phone already stacked them under the title and the owner
 * called that right — so desktop gets the same: the header wraps, the shelf row takes a
 * full line of its own. */
.woocommerce-products-header:has(> .av-shop-shelves) {
	flex-wrap: wrap;
}
.av-shop-shelves {
	display: flex;
	flex-wrap: wrap;
	flex-basis: 100%;
	gap: 8px;
	margin: 0 0 18px;
}
.av-shop-shelf {
	display: inline-flex;
	align-items: center;
	padding: 7px 14px;
	border: 1px solid var(--av-gray-light);
	border-radius: 999px;
	background: var(--av-white);
	font-size: .86rem;
	font-weight: 500;
	color: var(--av-black);
	text-decoration: none;
}
.av-shop-shelf:hover,
.av-shop-shelf:focus-visible {
	border-color: var(--av-black);
}

/* On a category archive every card said the category the H1 already says ("TABLOLAR"
   ×24). The label stays on /alisveris/ and tag archives, where it tells cards apart. */
.tax-product_cat ul.products li.product .product__categories {
	display: none;
}

@media (max-width: 767px) {
	/* The category intro box cost ~100px above the first card on a phone. Same text,
	   tighter box: the SEO copy stays in the page, only the padding goes. */
	.tax-product_cat .woocommerce-products-header .term-description {
		padding: 12px 14px;
		font-size: .92rem;
		line-height: 1.5;
	}
	.tax-product_cat h1.woocommerce-products-header__title {
		margin-bottom: .8rem;
	}
	/* "Fiyata göre sırala: Yü…" — the select was clipped by its grid track. */
	.shoptimizer-sorting .woocommerce-ordering select.orderby {
		max-width: none;
		width: auto;
		text-overflow: clip;
	}
	/* With the full sort label back, "95 sonuçtan 1-24 arası gösteriliyor" broke into three
	   lines beside it. The count is the least useful line on a phone — the load-more bar
	   at the foot of the list already says how far through the shelf the visitor is. */
	.shoptimizer-sorting .woocommerce-result-count {
		display: none;
	}
}

/* ============ PALETTE LEAKS FOUND BY THE RENDER GATE (2026-09-30) ============
 * theme_layout_gate I measures every rendered colour against TOKENS.json. Its first
 * run on the live site found three parent-theme colours the palette does not carry:
 * the PDP stock line in WC green, the Dergi pagination in link blue, and the shop
 * pagination's current page in Shoptimizer orange. Each goes to its palette role. */
.single-product p.stock.in-stock {
	color: var(--av-accent-text);
}
.page-numbers a.page-numbers,
a.page-numbers,
.nav-links a.page-numbers {
	color: var(--av-black);
}
.page-numbers.current,
span.page-numbers.current {
	color: var(--av-accent-text);
}

/* ============ FAVORİLER (/favoriler/) — CommerceKit wishlist shortcode (2026-09-30) ============
 * The shortcode prints `ul.products.columns-4` inside the 578px reading column of
 * .av-page-content, so the parent's 4-up PLP grid gave 128px cards: titles broke one word
 * per line, the price broke inside the number ("9.499,0 / 0 ₺"), and the "1 Ürün" counter
 * sat on the card's bottom edge. The empty state was worse — the "Favori Listesi Boş"
 * heading lived in one 1/4 cell and broke letter by letter. Two cards per row in this
 * column (≈280px, the PLP card's own width), the counter below the grid, the empty state
 * across the full row. */
#commercekit-wishlist-shortcode ul.commercekit-wishlist-list {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}
#commercekit-wishlist-shortcode ul.commercekit-wishlist-list::before,
#commercekit-wishlist-shortcode ul.commercekit-wishlist-list::after {
	content: none !important;
	display: none !important;
}
#commercekit-wishlist-shortcode ul.commercekit-wishlist-list > li {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
}
/* Card titles are product names, not prose links — the reading column's link underline
   does not apply to them (the PLP card carries none). */
#commercekit-wishlist-shortcode ul.products li.product a,
#commercekit-wishlist-shortcode ul.products li.product a:hover {
	text-decoration: none;
}
#commercekit-wishlist-shortcode ul.products li.product .price {
	white-space: nowrap;
}
#commercekit-wishlist-shortcode .commercekit-wishlist-pages {
	clear: both;
	margin-top: 20px;
	font-size: 13px;
	color: var(--av-gray-mid);
}

/* Empty state: one full row, the brand's heading and button. */
#commercekit-wishlist-shortcode li.wsl-no-products {
	grid-column: 1 / -1;
	text-align: center;
	padding: 24px 0 8px;
}
#commercekit-wishlist-shortcode .wsl-no-icon svg {
	width: 56px;
	height: 56px;
	margin: 0 auto;
	display: block;
}
#commercekit-wishlist-shortcode .wsl-no-icon svg path {
	stroke: var(--av-gray-light);
	stroke-width: 1.5;
}
#commercekit-wishlist-shortcode .wsl-no-title {
	font-family: var(--av-font-display);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.3;
	margin: 16px 0 8px;
	word-break: normal;
	overflow-wrap: normal;
}
#commercekit-wishlist-shortcode .wsl-no-desc {
	color: var(--av-gray-mid);
	max-width: 420px;
	margin: 0 auto 20px;
}
#commercekit-wishlist-shortcode a.button.wsl-no-shop {
	background: var(--av-black);
	color: var(--av-white);
	border-radius: var(--av-radius);
	padding: 12px 24px;
	text-decoration: none;
	display: inline-block;
}
#commercekit-wishlist-shortcode a.button.wsl-no-shop:hover {
	background: var(--av-accent);
}
@media (max-width: 600px) {
	#commercekit-wishlist-shortcode ul.commercekit-wishlist-list {
		gap: 12px;
	}
}

/* ============ PLP "SIRALA" SHEET (2026-10-19, owner: hipicon.com/ev's sort) ============
 * Markup: woocommerce/loop/orderby.php — a pill that opens a right-hand sheet of pill
 * options, built on the Popover API so it works before LiteSpeed releases any script.
 * Pills borrow the shelf chip's language (.av-shop-shelf above): 1px line, full radius,
 * white ground; the active option is filled ink.
 *
 * Base rules show WooCommerce's own <select> and hide the pill + sheet. Only a browser that
 * can open a popover swaps them — otherwise the sheet would sit in the page, unstyled. */
.av-sort__btn,
.av-sort__sheet {
	display: none;
}

/* .shoptimizer-sorting is a flex row on desktop and a two-track grid on the phone; the
   pill goes to the far end of either (the count stays at the start, as on hipicon). */
.shoptimizer-sorting .av-sort {
	order: 9;
	margin-left: auto;
	grid-column: 1 / -1;
	justify-self: end;
}

@supports selector(:popover-open) {
	.av-sort .woocommerce-ordering {
		display: none;
	}

	.av-sort__btn {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		margin: 0;
		padding: 8px 16px 8px 13px;
		min-height: 38px;
		border: 1px solid var(--av-gray-light);
		border-radius: 999px;
		background: var(--av-white);
		box-shadow: none;
		color: var(--av-black);
		font-family: var(--av-font-body);
		font-size: .88rem;
		font-weight: 500;
		line-height: 1.2;
		letter-spacing: normal;
		text-transform: none;
		cursor: pointer;
		transition: border-color .15s ease;
	}
	.av-sort__btn:hover,
	.av-sort__btn:focus-visible {
		border-color: var(--av-black);
		background: var(--av-white);
		color: var(--av-black);
	}
	.av-sort__btn svg {
		width: 16px;
		height: 16px;
		flex: none;
	}
	/* The visitor's own sort is on: a brass dot, so the pill says "not the default"
	   without spelling out a label that would not fit on a phone. */
	.av-sort.is-custom .av-sort__btn::after {
		content: "";
		width: 6px;
		height: 6px;
		margin-left: 1px;
		border-radius: 50%;
		background: var(--av-accent);
	}

	/* The sheet. A popover opens centred by default (inset:0; margin:auto) — pin it to
	   the right edge at full height. */
	.av-sort__sheet:popover-open {
		display: flex;
	}
	.av-sort__sheet {
		position: fixed;
		inset: 0 0 0 auto;
		flex-direction: column;
		width: min(340px, 86vw);
		max-width: none;
		height: auto;
		max-height: none;
		margin: 0;
		padding: 0;
		border: 0;
		border-left: 1px solid var(--av-gray-light);
		background: var(--av-white);
		color: var(--av-black);
		box-shadow: var(--av-shadow-lift);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.av-sort__sheet::backdrop {
		background: rgba(31, 27, 22, .22);
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
	}

	.av-sort__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 14px 12px 6px 20px;
		min-height: 60px;
	}
	.av-sort__sheet .av-sort__title {
		margin: 0;
		padding: 0;
		font-family: var(--av-font-display);
		font-size: 1.15rem;
		font-weight: 500;
		line-height: 1.2;
		letter-spacing: normal;
		text-transform: none;
		color: var(--av-black);
	}
	.av-sort__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: transparent;
		box-shadow: none;
		color: var(--av-black);
		cursor: pointer;
	}
	.av-sort__close:hover,
	.av-sort__close:focus-visible {
		background: var(--av-sand);
		color: var(--av-black);
	}
	.av-sort__close svg {
		width: 20px;
		height: 20px;
	}

	.av-sort__list {
		display: grid;
		gap: 12px;
		margin: 0;
		padding: 14px 20px 28px;
		list-style: none;
	}
	.av-sort__list li {
		margin: 0;
		padding: 0;
	}
	.av-sort__opt {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding: 8px 18px;
		border: 1px solid var(--av-gray-light);
		border-radius: 999px;
		background: var(--av-white);
		color: var(--av-black);
		font-family: var(--av-font-body);
		font-size: .9rem;
		font-weight: 500;
		line-height: 1.25;
		text-align: center;
		text-decoration: none;
		transition: border-color .15s ease, background-color .15s ease;
	}
	.av-sort__opt:hover {
		border-color: var(--av-black);
		color: var(--av-black);
	}
	.av-sort__opt.is-active,
	.av-sort__opt.is-active:hover {
		border-color: var(--av-black);
		background: var(--av-black);
		color: var(--av-white);
	}
	.av-sort__btn:focus-visible,
	.av-sort__close:focus-visible,
	.av-sort__opt:focus-visible {
		outline: 2px solid var(--av-accent);
		outline-offset: 2px;
	}

	/* Slide in from the right. Where `@starting-style` / `allow-discrete` are missing the
	   sheet simply appears — the end state is the same. */
	@media (prefers-reduced-motion: no-preference) {
		.av-sort__sheet {
			transform: translateX(100%);
			transition: transform .32s cubic-bezier(.32, .72, 0, 1), overlay .32s allow-discrete, display .32s allow-discrete;
		}
		.av-sort__sheet:popover-open {
			transform: none;
		}
		.av-sort__sheet::backdrop {
			opacity: 0;
			transition: opacity .32s ease, overlay .32s allow-discrete, display .32s allow-discrete;
		}
		.av-sort__sheet:popover-open::backdrop {
			opacity: 1;
		}
		@starting-style {
			.av-sort__sheet:popover-open {
				transform: translateX(100%);
			}
			.av-sort__sheet:popover-open::backdrop {
				opacity: 0;
			}
		}
	}

	/* Phone: the page behind must not scroll under a thumb that is on the sheet. Desktop
	   is left alone — hiding the scrollbar there would shift the whole page sideways. */
	@media (max-width: 767px) {
		html:has(.av-sort__sheet:popover-open) {
			overflow: hidden;
		}
	}
}