/* Floortrim UK — bileşen CSS 12/19: Sipariş alındı, boş sepet, Woo bildirimleri, arşiv AJAX geri bildirimi, başlıktaki sepet rozeti.
   Yükleme sırası bağlayıcıdır: functions.php floortrim_uk_component_css_files(). */
/* ===========================================================================
   SIPARIS ALINDI (klasik `checkout/thankyou.php` — tema override'i YOK)

   ⚠️ Tema KLASIK (`wp_is_block_theme() === false`), bu yuzden WooCommerce'in
   `order-confirmation.html` BLOK sablonu ve `.wc-block-order-confirmation-*`
   sinif ailesi bu sitede HIC kullanilmiyor. O seciciler icin kural yazilmaz.
   ======================================================================== */

/* Onay cumlesi sayfanin ANA mesaji — muted gri degil tam guclu ink. */
body.woocommerce-checkout .ft-page p.woocommerce-notice--success {
	color: var(--fg);
	font-size: 1.125rem;
	line-height: 1.5;
	margin: 0 0 2.5rem;
}

/* Siparis ozeti seridi: Woo `float: left` + 0,715em + KESIKLI LILA (#CFC8D8)
   ayirici veriyor. Sarilan flex + duz hairline + etiket/deger ayrimi. */
body.woocommerce-checkout .woocommerce ul.order_details {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2rem;
	padding-left: 0;
	margin: 0 0 3rem;
	list-style: none;
}

/* ⚠️ WooCommerce `ul.order_details`e clearfix veriyor (`::before`/`::after`
   content). Kapsayici FLEX'e cevrilince bu pseudo ogeler birer FLEX OGESI olur
   ve `gap` ilk gercek <li>'yi 32px saga iter (olculdu: ul x=336, ilk li x=368).
   Clearfix float ile birlikte zaten gereksiz — kaldirilir. */
body.woocommerce-checkout .woocommerce ul.order_details::before,
body.woocommerce-checkout .woocommerce ul.order_details::after {
	content: none;
}

body.woocommerce-checkout .woocommerce ul.order_details li {
	float: none;
	margin: 0;
	padding: 0 2rem 0 0;
	border-right: 1px solid var(--line);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fg-muted);
	line-height: 1.4;
}

body.woocommerce-checkout .woocommerce ul.order_details li:last-child {
	border-right: 0;
	padding-right: 0;
}

body.woocommerce-checkout .woocommerce ul.order_details li strong {
	display: block;
	margin-top: 0.35rem;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--fg);
}

/* Siparis tablosu + adres kutulari: Woo 5px yuvarlak kose ve token disi
   rgba(20,20,20,.2) / rgba(0,0,0,.1) cerceve veriyor; adres kutusunda
   `border-bottom: 2px` ile sahte golge numarasi yapiyor (asimetrik cerceve). */
body.woocommerce-checkout .woocommerce table.shop_table,
body.woocommerce-account .woocommerce table.shop_table {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	border-collapse: collapse;
}

body.woocommerce-checkout .woocommerce table.shop_table td,
body.woocommerce-checkout .woocommerce table.shop_table th,
body.woocommerce-account .woocommerce table.shop_table td,
body.woocommerce-account .woocommerce table.shop_table th {
	border-top: 1px solid var(--line);
	padding: 0.875rem 1rem;
}

body.woocommerce-checkout .woocommerce table.shop_table thead th,
body.woocommerce-checkout .woocommerce table.shop_table tfoot th,
body.woocommerce-account .woocommerce table.shop_table thead th,
body.woocommerce-account .woocommerce table.shop_table tfoot th {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fg-muted);
}

body.woocommerce-checkout .woocommerce table.shop_table tfoot td,
body.woocommerce-account .woocommerce table.shop_table tfoot td {
	font-family: var(--font-body);
	font-weight: 400;
	color: var(--fg);
}

body.woocommerce-checkout .woocommerce table.shop_table tfoot tr:last-child th,
body.woocommerce-checkout .woocommerce table.shop_table tfoot tr:last-child td {
	border-top: 1px solid var(--fg);
	color: var(--fg);
	font-size: 1.0625rem;
	font-weight: 600;
}

body.woocommerce-checkout .woocommerce .woocommerce-customer-details address,
body.woocommerce-account .woocommerce .woocommerce-customer-details address {
	border: 1px solid var(--line);
	border-bottom-width: 1px;
	border-radius: var(--radius);
	padding: 1rem 1.25rem;
	font-style: normal;
	line-height: 1.6;
}

/* ===========================================================================
   BOS SEPET (`wp-block-woocommerce-empty-cart-block`)
   ⚠️ Bu blogun icerigi yalniz baslik + ayirici + "New in store" gridi;
   "Return to shop" CTA'si HTML'de HIC YOK. Bu bir BLOK ICERIGI eksigidir,
   CSS ile eklenemez — sepet sayfasinin blok icerigine buton eklenmeli.
   ======================================================================== */

/* Bos sepet ikonu: `.wc-block-cart__empty-cart__title::before`, 140x140px,
   `background-color: currentColor` + mask SVG. Token cevirmesinden ONCE beyaz
   uzerine beyazdi (gorunmuyordu); gorunur hale gelince 140px'lik TAM SIYAH bir
   emoji suratina donustu — galeri dilinde bu agirlikta bir isaret yok.
   72px'e cekilip muted tona alinir. `mask-size` de kucultulmeli
   (varsayilan 140px sabit -> ikon kirpiliyordu, olculdu). */
body.woocommerce-cart .wc-block-cart__empty-cart__title::before {
	width: 4.5rem;
	height: 4.5rem;
	background-color: var(--fg-muted);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* WordPress'in "noktali" varsayilan ayiricisi (#808080 uc nokta) galeri
   dilinde yok; duz hairline'a cevrilir.
   ⚠️ CIZGI `border` ILE CIZILEMEZ: WordPress cekirdegi
   `.wp-block-separator.is-style-dots { background: none !important;
   border: none !important }` yaziyor (CDP CSS.getMatchedStylesForNode ile
   dogrulandi) — `!important` her ozgullugu yener. Bu yuzden hairline, noktalari
   basan `::before` pseudo ogesinin KENDISI yeniden tanimlanarak ciziliyor
   (pseudo ogenin background'i o `!important` kuralinin kapsaminda degil).
   Olculdu: 1px x 1152px, #E7E4DE. */
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots {
	margin: 3rem 0;
	max-width: 100%;
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots::before {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: var(--line);
	letter-spacing: normal;
	padding: 0;
}

/* Vitrin urun karti: baslik 12px/700 Mulish (blok gridinin dili), fiyat ayni.
   Kimlik: baslik Jost, fiyat Mulish muted. */
body.woocommerce-cart .wc-block-grid__product-title {
	font-family: var(--font-display);
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--fg);
	line-height: 1.35;
}

body.woocommerce-cart .wc-block-grid__product-link {
	text-decoration: none;
}

body.woocommerce-cart .wc-block-grid__product-price {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	color: var(--fg-muted);
}

/* Vitrin butonlari HAP seklindeydi (border-radius 9999px), #32373C dolgulu,
   35px yuksekliginde (44px dokunma hedefinin altinda) ve basma geri bildirimi
   yoktu. */
body.woocommerce-cart .wc-block-grid__product-add-to-cart .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 1.25rem;
	background-color: var(--fill-accent);
	color: var(--on-fill-accent);
	border-radius: var(--radius);
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: transform var(--dur-press) var(--ease-out),
	            opacity var(--dur-press) var(--ease-out);
}

body.woocommerce-cart .wc-block-grid__product-add-to-cart .wp-block-button__link:active {
	transform: scale(0.97);
}

@media (hover: hover) {
	body.woocommerce-cart .wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
		opacity: 0.85;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.woocommerce-cart .wc-block-grid__product-add-to-cart .wp-block-button__link {
		transition: none;
	}
	body.woocommerce-cart .wc-block-grid__product-add-to-cart .wp-block-button__link:active {
		transform: none;
	}
}

/* ===========================================================================
   WOO BILDIRIMLERI (.woocommerce-error / -info / -message)
   ======================================================================== */

/* (B-1) "Yamali beyaz kutu" — KULLANICININ BILDIRDIGI KUSURUN TAMAMI BUYDU.
   Woo bandı `role="alert" tabindex="-1"` ile PROGRAMATİK odaklıyor; 04-shell-polish.css
   "Görünür klavye odağı" `:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible`
   kuralı (fiilen (0,1,0)) banti 2px BEYAZ halkayla cerceveliyordu (koyu deride
   --color-focus beyaza doner). Olculdu: dort genislikte de
   `outline: rgb(255,255,255) solid 2px`, `document.activeElement === bant`,
   `:focus-visible === true` — ve halka kullanici baska bir yere tiklayana kadar
   duruyor. Bandin KENDI zemini beyaz DEGIL (#1B1E21); `blur()` sonrasi bant
   kimlige tamamen uygun goruntuye donuyor.
   Halka kaldirilabilir cunku bant SEKME SIRASINDA DEGIL (tabindex="-1") — WCAG
   2.4.7 klavyeyle isletilebilir bilesenler icindir, bu bant oyle degil.
   `role="alert"` duyurusu CSS'ten etkilenmez, ekran okuyucu kaybi yok.
   Ozgulluk (0,2,0) yeter; deri sarti YOK ki acik zeminli Cart/Checkout'ta da
   ayni halka cizilmesin. */
.woocommerce-error:focus-visible,
.woocommerce-info:focus-visible,
.woocommerce-message:focus-visible {
	outline: none;
}

/* (B-2) Derisiz (acik zeminli) sayfalarda bildirimler KIRMIZI / MAVI / YESIL
   cerceveyle basiliyordu — tam da satin alma yolunda, monokrom kimlik ihlali.
   10-shop-controls.css "(8) Woo bildirimleri" monokrom kuralı `body.ft-skin-*.woocommerce` öneki
   tasiyor; Cart/Checkout/Order-received/Account body'sinde NE `woocommerce`
   NE `ft-skin-*` var, yani o kural HIC eslesmiyordu. Ayrica ANA SAYFA
   (`ft-skin-surface`, `woocommerce` sinifi YOK) da ayni boslukta.
   Bu blok o iki boslugu kapatir; mevcut blogu DEGISTIRMEZ (ayni degerleri
   yazar, dolayisiyla ortusme zararsizdir). */
body.ft-skin-surface .woocommerce-error,
body.ft-skin-surface .woocommerce-info,
body.ft-skin-surface .woocommerce-message,
body.ft-skin-spec .woocommerce-error,
body.ft-skin-spec .woocommerce-info,
body.ft-skin-spec .woocommerce-message {
	background-color: var(--color-spec-1);
	border-top: 2px solid var(--color-on-spec-muted);
	border-radius: var(--radius);
	color: var(--color-on-spec);
	font-family: var(--font-body);
	font-size: 0.9rem;
}

body.ft-skin-surface .woocommerce-error::before,
body.ft-skin-surface .woocommerce-info::before,
body.ft-skin-surface .woocommerce-message::before,
body.ft-skin-spec .woocommerce-error::before,
body.ft-skin-spec .woocommerce-info::before,
body.ft-skin-spec .woocommerce-message::before {
	color: var(--color-on-spec-muted);
}

body.woocommerce-cart .woocommerce-error,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-cart .woocommerce-message,
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-account .woocommerce-error,
body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-message {
	background-color: var(--bg-raised);
	border-top: 2px solid var(--fg-muted);
	border-radius: var(--radius);
	color: var(--fg);
	font-family: var(--font-body);
	font-size: 0.9rem;
}

body.woocommerce-cart .woocommerce-error::before,
body.woocommerce-cart .woocommerce-info::before,
body.woocommerce-cart .woocommerce-message::before,
body.woocommerce-checkout .woocommerce-error::before,
body.woocommerce-checkout .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-message::before,
body.woocommerce-account .woocommerce-error::before,
body.woocommerce-account .woocommerce-info::before,
body.woocommerce-account .woocommerce-message::before {
	color: var(--fg-muted);
}

/* (B-3) Hata / bilgi / basari BIREBIR ayni goruntudeydi — kullanici hatayi
   basaridan ayirt edemiyordu (tek fark ikon glyph'i). Renk kullanmadan
   hiyerarsi: HATA = tam guclu ust cizgi + sol cizgi + agirlikli metin;
   bilgi/basari sakin hairline dilinde kalir (seffaf sol cizgi ile ayni
   ic dolguyu korur, boylece metin kaymaz).
   ⚠️ `body.ft-skin-spec.woocommerce` — NOKTALAR BITISIK (`woocommerce` sinifi
   body'nin KENDİSİNDE). 10-shop-controls.css "(8) Woo bildirimleri" (0,3,0) ile aynı özgüllükte;
   SONRA geldigi icin kazanir. */
body.ft-skin-surface .woocommerce-error,
body.ft-skin-spec .woocommerce-error,
body.ft-skin-surface.woocommerce .woocommerce-error,
body.ft-skin-spec.woocommerce .woocommerce-error {
	border-top-color: var(--color-on-spec);
	border-left: 3px solid var(--color-on-spec);
	font-weight: 600;
}

body.ft-skin-surface .woocommerce-error::before,
body.ft-skin-spec .woocommerce-error::before,
body.ft-skin-surface.woocommerce .woocommerce-error::before,
body.ft-skin-spec.woocommerce .woocommerce-error::before {
	color: var(--color-on-spec);
}

body.woocommerce-cart .woocommerce-error,
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-account .woocommerce-error {
	border-top-color: var(--fg);
	border-left: 3px solid var(--fg);
	font-weight: 600;
}

body.woocommerce-cart .woocommerce-error::before,
body.woocommerce-checkout .woocommerce-error::before,
body.woocommerce-account .woocommerce-error::before {
	color: var(--fg);
}

body.ft-skin-surface .woocommerce-info,
body.ft-skin-surface .woocommerce-message,
body.ft-skin-spec .woocommerce-info,
body.ft-skin-spec .woocommerce-message,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-cart .woocommerce-message,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-message {
	border-left: 3px solid transparent;
}

/* (B-4) Bandin tek eylemi olan "View cart" butonu HAYALET stildeydi:
   zemin seffaf, kenarlik --color-spec-line (#2A2F33) -> bant zeminine karsi
   1,24:1 (WCAG 1.4.11'in 3:1 esiginin cok altinda), buton oldugu okunmuyordu.
   Kimlik kurali: koyu deride birincil CTA TERS DOLGU (beyaz zemin + is siyahi).
   ⚠️ ÖZGÜLLÜK: ezilecek kural 10-shop-controls.css "İkincil eylem" buton kuralı
   `body.ft-skin-spec.woocommerce .button:not(.alt):not(.single_add_to_cart_button)
    :not(.add_to_cart_button):not(.checkout-button)` = (0,7,1) — `:not()`
   argumanlari sinif sayar. Sade `... .woocommerce-message > a.button` (0,4,2)
   KAYBEDER. Ayni :not() zinciri tekrar edilerek (0,8,2) elde edilir. */
body.ft-skin-surface .woocommerce-message a.button:not(.alt):not(.single_add_to_cart_button):not(.add_to_cart_button):not(.checkout-button),
body.ft-skin-spec .woocommerce-message a.button:not(.alt):not(.single_add_to_cart_button):not(.add_to_cart_button):not(.checkout-button),
body.ft-skin-surface.woocommerce .woocommerce-message a.button:not(.alt):not(.single_add_to_cart_button):not(.add_to_cart_button):not(.checkout-button),
body.ft-skin-spec.woocommerce .woocommerce-message a.button:not(.alt):not(.single_add_to_cart_button):not(.add_to_cart_button):not(.checkout-button) {
	background: var(--fill-accent);
	color: var(--on-fill-accent);
	border-color: transparent;
	border-radius: var(--radius);
	font-family: var(--font-display);
	font-size: 0.95rem;
	min-height: 44px;
	/* (B-5) Woo bandin kendi kuralindan `float: right` veriyor -> eylem bandin
	   uzak sag ucuna atiliyordu (1440'ta metinden 964px uzakta; 375'te sarilan
	   metne sikisiyordu). Eylem cumlenin hemen ardinda olmali. */
	float: none;
	display: inline-flex;
	vertical-align: middle;
	margin: 0 0 0 1rem;
	/* ⚠️ DOLGU/HIZALAMA BURADA ACIKCA VERILMELI: temanin taban buton kurallari
	   `.woocommerce a.button` on-ekli, ANA SAYFANIN body'sinde ise `woocommerce`
	   sinifi YOK (yalniz ft-skin-surface). Onlar olmadan buton `padding: 0` +
	   `align-items: normal` kaliyordu -> etiket 60px'lik kutunun DISINA tasti
	   ve "beyaz bos kutu + ustunde okunmayan yazi" gorunuyordu (canlida
	   olculdu: HOME 60x44 / PRODUCT 109x44). */
	align-items: center;
	justify-content: center;
	padding: 0 1.25rem;
}

/* Beyaz dolgunun üzerinde beyaz odak halkası görünmez → .ft-quote-cta deseni
   (08-inverse-fill.css): dış halka beyaz, iç 1px iş siyahı. */
body.ft-skin-surface .woocommerce-message a.button:focus-visible,
body.ft-skin-spec .woocommerce-message a.button:focus-visible,
body.ft-skin-surface.woocommerce .woocommerce-message a.button:focus-visible,
body.ft-skin-spec.woocommerce .woocommerce-message a.button:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
	box-shadow: inset 0 0 0 1px var(--on-fill-accent);
}

/* Acik zeminli sayfalarda (Cart/Checkout) ayni bandin butonu ink dolgulu. */
body.woocommerce-cart .woocommerce-message a.button,
body.woocommerce-checkout .woocommerce-message a.button,
body.woocommerce-account .woocommerce-message a.button {
	float: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	margin: 0 0 0 1rem;
	min-height: 44px;
	padding: 0 1.25rem;
	background: var(--fill-accent);
	color: var(--on-fill-accent);
	border: 0;
	border-radius: var(--radius);
	font-family: var(--font-display);
	font-size: 0.95rem;
	text-decoration: none;
}

@media (max-width: 600px) {
	body.ft-skin-surface .woocommerce-message a.button:not(.alt):not(.single_add_to_cart_button):not(.add_to_cart_button):not(.checkout-button),
	body.ft-skin-spec .woocommerce-message a.button:not(.alt):not(.single_add_to_cart_button):not(.add_to_cart_button):not(.checkout-button),
	body.ft-skin-surface.woocommerce .woocommerce-message a.button:not(.alt):not(.single_add_to_cart_button):not(.add_to_cart_button):not(.checkout-button),
	body.ft-skin-spec.woocommerce .woocommerce-message a.button:not(.alt):not(.single_add_to_cart_button):not(.add_to_cart_button):not(.checkout-button),
	body.woocommerce-cart .woocommerce-message a.button,
	body.woocommerce-checkout .woocommerce-message a.button,
	body.woocommerce-account .woocommerce-message a.button {
		display: flex;
		justify-content: center;
		width: 100%;
		margin: 0.85rem 0 0;
	}
}

/* Bildirim kapsayicisi (header.php'de basilir — bkz. oradaki yorum): sayfa
   govdesiyle ayni okuma kolonunda dursun, kenara yapismasin. */
.ft-notices {
	max-width: 72rem;
	margin: 0 auto;
	padding: 1.5rem 1.5rem 0;
}

.ft-notices:empty {
	display: none;
}

.ft-notices .woocommerce-error,
.ft-notices .woocommerce-info,
.ft-notices .woocommerce-message {
	margin-bottom: 0;
}

/* ===========================================================================
   ARSIV (kategori/shop) AJAX GERI BILDIRIMI
   ⚠️ Arsivde `.woocommerce-message` HIC basilmiyor (AJAX ekleme sayfayi
   yenilemiyor) — tek geri bildirim butondaki ✓ ve asagidaki baglanti.
   ======================================================================== */

/* Olculen: `text-decoration-line: none`, yukseklik 20px, padding 0, cerceve yok
   -> kart icindeki duz govde metninden hicbir sekilde ayrilmiyor (sorun
   kontrast degil AFFORDANCE). Temanin `.woocommerce a.added_to_cart` (0,2,1)
   `underline` kuralini Woo'nun `.woocommerce ul.products li.product a
   { text-decoration: none }` (0,3,1) kurali eziyordu; asagidaki (0,5,4) gecer. */
body.ft-skin-surface.woocommerce ul.products li.product a.added_to_cart,
body.ft-skin-spec.woocommerce ul.products li.product a.added_to_cart {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: 0.25rem;
	padding: 0;
	font-family: var(--font-display);
	font-size: 0.9rem;
	color: var(--color-on-spec);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ✓ geri bildirimini tasiyan "Add to cart" butonu 3px yuvarlak koseliydi ve
   Woo'nun `.618em 1em` dolgusunu aliyordu. Woo'nun
   `.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
   a.button` kurali (0,2,1) temanin `.woocommerce .add_to_cart_button` (0,2,0)
   kuralindan ozgul; (0,6,4) ile alinir. Renk/dolgu TEKRARLANMAZ — ters dolgu
   zaten 10-shop-controls.css "Koyu deri — TERS DOLGU"da uygulanıyor. */
body.ft-skin-surface.woocommerce ul.products li.product a.button.add_to_cart_button,
body.ft-skin-spec.woocommerce ul.products li.product a.button.add_to_cart_button {
	border-radius: var(--radius);
	padding: 0.75rem 1.5rem;
}

/* ===========================================================================
   BAŞLIKTAKİ SEPET ROZETİ
   ======================================================================== */

/* 10-shop-controls.css `.ft-site-header__cart-count` taban kuralı `background: currentColor`
   yazar; currentColor öğenin KENDİ color'ını çözer → zemin = rakam (1,00:1). Rozet
   ters dolgu alır (dolgu + zıt rakam, 18,42:1).
   Ayrica `box-sizing: content-box` + `min-width` yuzunden kutu 32,8 x 21,6px
   bir ELIPS'ti; `border-box` ile tek haneli sayida gercek daire olur. */
.ft-site-header__cart-count {
	background: var(--fill-accent);
	color: var(--on-fill-accent);
	box-sizing: border-box;
	min-width: 1.375rem;
	height: 1.375rem;
	padding: 0 0.3rem;
	font-variant-numeric: tabular-nums;
}