/* ==========================================================================
   KARTA PRODUKTU (single) — LAYOUT (galeria | zakup) + kolumna „zakup" (.summary)
   + akordeon zakładek. Ładowane warunkowo na is_product() przez
   `inc/woo/single-layout.php`. ZERO override szablonu Woo — stylujemy natywny
   `div.product` i output haków summary. Wartości = tokeny theme.json
   (var(--wp--preset--*) / var(--wp--custom--*)), zero hardkodów.

   Reużywane prymitywy (components.css): .pill, .btn, .swatch, .swatch-size,
   .stepper, .rating. Galeria (.galeria/.lightbox) = product-gallery.css.
   Swatche wariantów (.humee-swatches) + toast = woocommerce.css.
   Port prototypu: docs/prototypes/sections/produkt/zakup + galeria-produktu.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) LAYOUT KARTY — 2 kolumny (galeria | zakup) bez override szablonu Woo.
   Natywny `div.product` (content-single-product.php) trzyma jako dzieci:
   `.galeria` (nasz render zamiast obrazów Woo), `.summary.entry-summary`
   (w niej m.in. akordeon `.product-accordion` renderowany pod CTA), a pod
   kolumnami `.up-sells` / `.related` (rekomendacje Woo, pełna szerokość).
   Legacy CSS Woo jest OFF (foundation.php) → grid definiujemy sami.
   -------------------------------------------------------------------------- */
.single-product div.product {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--md);
	max-inline-size: var(--wp--custom--max-width);
	margin-inline: auto;
	padding-inline: var(--wp--custom--gutter);
	/* Górny oddech przejął breadcrumb (renderowany PRZED `div.product`); tu tylko dół. */
	padding-block: 0 var(--wp--preset--spacing--xl);
}

/* Breadcrumb nad kartą (home → kategoria → produkt; prototyp `produkt__head`) —
   wyrównany do gridu produktu (ta sama `max-width` + `gutter` co `div.product`).
   Breadcrumb JEST właścicielem górnego oddechu strony (produkt ma `padding-block-start:0`),
   więc do galerii zostaje tylko mały gap (`sm`) — bez podwójnego odstępu. Render:
   `woocommerce_before_single_product` (single-layout.php); ścieżkę liczy wspólny moduł. */
.single-product .single-breadcrumb {
	max-inline-size: var(--wp--custom--max-width);
	margin-inline: auto;
	padding-inline: var(--wp--custom--gutter);
	padding-block: var(--wp--preset--spacing--md) var(--wp--preset--spacing--sm);
}

@media (min-width: 1024px) {
	.single-product div.product {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--xl);
		align-items: start;
	}

	/* Galeria „przykleja się" na wysokość PRAWEJ kolumny (nazwa/warianty/CTA +
	   akordeon = zwykle wyższa) — zdjęcie zostaje w polu widzenia gdy przewijasz
	   opis. Sticky grid-item jest ograniczony wysokością `div.product`; dlatego
	   rekomendacje (upsells/related) są WYPROWADZONE poza `div.product`
	   (`woocommerce_after_single_product`, single-layout.php) — inaczej galeria
	   wjeżdżałaby pod nie. Grid = wyłącznie dwie kolumny. */
	.single-product div.product > .galeria {
		position: sticky;
		inset-block-start: calc(var(--wp--custom--header-height) + var(--wp--preset--spacing--sm));
	}
}

/* --------------------------------------------------------------------------
   2) SUMMARY (kolumna „zakup") — nazwa, cena-pill, ocena, warianty, ilość, CTA.
   Odwzorowanie prototypu `zakup`. .summary = natywny kontener Woo.
   -------------------------------------------------------------------------- */
.single-product div.product > .summary {
	position: relative; /* kotwica dla serca-wishlist w prawym górnym rogu */
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--md);
	margin: 0;
}

/* Serce-wishlist = okrągły przycisk-ikona w prawym górnym rogu summary (w linii
   z badge'ami, jak na kaflu). Wyjęte z toku (position:absolute) → znika osierocone
   serce spod CTA i nie zajmuje slotu w kolumnie. Wygląd/stan (kolor, .is-active,
   focus) trzyma wishlist.css; tu tylko POZYCJA + kontener-przycisk dla single. */
.single-product .summary > .wishlist-heart {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	z-index: 1;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--bg-alt);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.single-product .summary > .wishlist-heart svg { inline-size: 1.35rem; }
.single-product .summary > .wishlist-heart:hover,
.single-product .summary > .wishlist-heart:focus-visible { border-color: var(--wp--preset--color--dark); }
.single-product .summary > .wishlist-heart.is-active { border-color: var(--wp--preset--color--accent); }

/* Nagłówek: nazwa (H1), pod nią cena-pill. Cena wisząca w prawym górnym rogu
   rozjeżdżała się przy wieloliniowych nazwach WC ([dev]…) — stos nazwa→cena jest
   czytelniejszy i stabilny niezależnie od długości tytułu. Prawy górny róg zostaje
   dla serca-wishlist (patrz niżej), więc rezerwujemy tam padding. */
.single-product .summary__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--sm);
	padding-inline-end: calc(2.75rem + var(--wp--preset--spacing--sm));
}

/* Nazwa = H1 (46px w Figmie → token h-1), regular, lowercase (globalnie). */
.single-product .summary__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-1);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--tight);
	letter-spacing: var(--wp--custom--letter-spacing--wide);
}

/* Cena = główny punkt hierarchii zakupowej (zaraz po nazwie): duża, ciężka, ciemna
   liczba BEZ pigułki. Pigułka (cienki obrys) czytała się jak drugorzędny tag obok
   badge'y — standard sklepów premium to wyróżniona typografia ceny, nie box (research
   PDP, Baymard/Shopify: hierarchię ceny budują wielkość + waga + kolor). Waga `medium`
   (cięższa niż nazwa @regular) dodatkowo „pcha" cenę naprzód. */
.single-product .summary__price {
	font-size: var(--wp--preset--font-size--heading);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--tight);
	color: var(--wp--preset--color--dark);
	white-space: nowrap;
}
/* Promocja: cena pierwotna stonowana i mniejsza (przekreślona natywnym <del>), cena
   promo mocna w akcencie — kontrast „było → jest" (konwencja PDP: strikethrough +
   kontrastowy kolor ceny promo). Dotyczy też ceny wariantu wstrzykniętej do pill'a
   przez woo-variation-price.js (ten sam `<del>/<ins>` w środku). */
.single-product .summary__price del {
	margin-inline-end: var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: var(--wp--custom--font-weight--regular);
	color: var(--wp--preset--color--muted);
}
.single-product .summary__price ins {
	text-decoration: none;
	color: var(--wp--preset--color--accent);
}

/* Omnibus „najniższa cena z 30 dni przed obniżką" (dyrektywa 2019/2161) — wtyczka
   WC Price History, shortcode renderowany pod ceną przez `inc/woo/omnibus.php`. Mała,
   stonowana linia tuż pod ceną: informacja PRAWNA, nie element sprzedażowy, więc `body`
   + `muted`. W trybie defer wtyczka pokazuje placeholder (przed wyborem wariantu) →
   kwotę (po wyborze; JS wtyczki na `found_variation`). Etykietę prawną dokładamy CSS-em
   (`::before` na cenie), bo deferred-output wtyczki renderuje SAMĄ kwotę bez `display_text`. */
.single-product .wc-price-history-shortcode {
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--muted);
}
.single-product .wc-price-history-shortcode-price::before {
	content: "najniższa cena z 30 dni przed obniżką: ";
}
/* i18n: `content` nie sięga `.mo`, a label musi przeżyć nadpisanie `innerHTML`
   przez JS wtyczki → wariant EN przez `:lang()` (matchuje `<html lang="en-US">`). */
.single-product .wc-price-history-shortcode-price:lang(en)::before {
	content: "lowest price in the 30 days before the discount: ";
}

/* Ocena — gwiazdki 22px, licznik ciemny (jak prototyp). Prymityw `.rating`. */
.single-product .summary .rating__count {
	font-size: var(--wp--preset--font-size--lead);
	color: var(--wp--preset--color--dark);
}

/* Krótki opis (excerpt @20) — jeśli klient go wypełni. Pusto → nic. */
.single-product .woocommerce-product-details__short-description {
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--dark);
	max-inline-size: 60ch;
}
.single-product .woocommerce-product-details__short-description p:last-child { margin-block-end: 0; }

/* Komunikat lojalnościowy „zdobądź X punktów za ten produkt" (WPLoyalty), pod ceną
   (pozycja `after_title`, loyalty.php). Inline-style wtyczki zdjęty filtrem
   `wlr_single_product_message` → callout na tokenach + ikona-gwiazdka (CSS-mask,
   tint akcentem). Branding robimy TU, nie w GUI wtyczki (config w kodzie; kolory z
   GUI wracałyby jako inline-style). Bez `!important`, bez walki ze specyficznością. */
.single-product .wlr-product-message {
	display: flex;
	align-items: center;
	align-self: flex-start;           /* nie rozciągaj na całą kolumnę — szerokość = treść */
	gap: var(--wp--preset--spacing--xs);
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--dark);
	background: var(--wp--preset--color--bg-alt);
	border-radius: var(--wp--custom--radius--modal);
}

.single-product .wlr-product-message::before {
	content: "";
	flex: none;
	inline-size: 1.15rem;
	block-size: 1.15rem;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask: url("../icons/gift.svg") center / contain no-repeat;
	mask: url("../icons/gift.svg") center / contain no-repeat;
}

/* --- Formularz wariantów --------------------------------------------------
   Rozbijamy natywną <table class="variations"> na bloki (label nad swatchami).
   <select> chowa woocommerce.css (.variations_form.is-humee-swatches …), a JS
   swatchy renderuje .humee-swatches obok (ADR-0012). Tu tylko layout pól. */
.single-product .variations_form { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--md); }

.single-product .variations,
.single-product .variations tbody,
.single-product .variations tr {
	display: block;
	inline-size: 100%;
}
.single-product .variations tr + tr { margin-block-start: var(--wp--preset--spacing--md); }

.single-product .variations th.label,
.single-product .variations td.value {
	display: block;
	padding: 0;
	text-align: start;
}

/* Etykieta pola („kolor" / „rozmiar") — lead / 22px, jak `.zakup__label`. */
.single-product .variations th.label,
.single-product .variations th.label label {
	margin: 0 0 var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--tight);
}

/* Link „wyczyść wybór" (pojawia się po wyborze wariantu). */
.single-product .reset_variations {
	display: inline-block;
	margin-block-start: var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--muted);
}
.single-product .reset_variations:hover,
.single-product .reset_variations:focus-visible { color: var(--wp--preset--color--dark); }

/* Wybrany wariant: cena/dostępność + (ilość + CTA). */
.single-product .single_variation_wrap { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--md); }

/* Cena wybranego wariantu — Woo renderuje ją tu, pod swatchami, DUBLUJĄC kwotę
   już pokazaną w górnym pill'u (`.summary__price`). Gdy JS aktywny
   (`is-humee-varprice`, woo-variation-price.js), pill „przeskakuje" na cenę
   wybranego wariantu, więc ten duplikat chowamy — jedno miejsce prawdy dla ceny.
   Bez JS zostaje widoczny (progressive enhancement), stąd zachowany styl niżej. */
.single-product .variations_form.is-humee-varprice .woocommerce-variation-price { display: none; }

.single-product .woocommerce-variation-price .price {
	font-size: var(--wp--preset--font-size--lead);
	color: var(--wp--preset--color--dark);
}
.single-product .woocommerce-variation-availability { font-size: var(--wp--preset--font-size--body); }

/* --- Ilość + CTA (prototyp `.zakup__buy`) ---------------------------------
   Rząd „ilość": label na własnej linii (nad stepperem), pod nim stepper + CTA
   obok siebie. Kontener flex to `form.cart` DLA PROSTEGO oraz
   `.woocommerce-variation-add-to-cart` DLA ZMIENNEGO — NIE stosujemy do
   `.variations_form` (rozbiłoby tabelę wariantów; ta zostaje kolumną wyżej). */
.single-product form.cart:not(.variations_form),
.single-product .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
}

/* „ilość" — pełna szerokość rzędu → stepper i CTA lądują pod nią. */
.single-product .summary__qty-label {
	flex: 1 0 100%;
	margin: 0;
	font-size: var(--wp--preset--font-size--lead);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--tight);
}

.single-product form.cart .quantity,
.single-product form.cart .stepper { flex: none; }

/* CTA „dodaj do koszyka" = prymityw `.btn` (wygląd zmapowany w components.css,
   jedno źródło). Tu tylko LAYOUT rzędu: rośnie do końca linii, oraz lowercase —
   natywny tekst WC bywa „Dodaj do koszyka" (Wielka litera), a design = małe. */
.single-product .single_add_to_cart_button {
	flex: 1 1 auto;
	text-transform: lowercase;
}

/* Komunikat „kombinacja niedostępna" (JS swatchy) — dyskretny. */
.single-product .single_variation .wc-no-matching-variations { font-size: var(--wp--preset--font-size--body); color: var(--wp--preset--color--muted); }

/* --------------------------------------------------------------------------
   3) AKORDEON zakładek (taby→akordeon) — w kolumnie „zakup", pod CTA (prototyp
   `zakup`: akordeon = ostatni element sekcji). Natywny <details>/<summary> — bez
   JS. Port `.accordion` z prototypu na tokeny (nie jest globalnym prymitywem —
   layout specyficzny dla single/koszyka).
   -------------------------------------------------------------------------- */
.product-accordion {
	inline-size: 100%;
	margin-block-start: var(--wp--preset--spacing--sm);
}

.accordion { display: flex; flex-direction: column; }

.accordion__item { border-block-start: 1px solid var(--wp--preset--color--dark); }
.accordion__item:last-child { border-block-end: 1px solid var(--wp--preset--color--dark); }

/* <summary> jako nagłówek-przycisk (bez natywnego markera). */
.accordion__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--md);
	padding-block: var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: var(--wp--custom--font-weight--medium);
	letter-spacing: var(--wp--custom--letter-spacing--wide);
	color: var(--wp--preset--color--dark);
	cursor: pointer;
	list-style: none;
}
.accordion__head::-webkit-details-marker { display: none; }
.accordion__head:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Strzałka (pill obrysowy) — obrót przy otwarciu (↓ → ↑). */
.accordion__arrow {
	flex: none;
	pointer-events: none;
	transition: transform 0.2s ease;
}
.accordion__item[open] .accordion__arrow { transform: rotate(180deg); }

.accordion__body { padding-block: 0 var(--wp--preset--spacing--md); }
.accordion__body > :last-child { margin-block-end: 0; }
.accordion__body p,
.accordion__body li {
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--dark);
}
.accordion__body p { max-inline-size: 60ch; }

/* Tabela atrybutów (zakładka „informacje dodatkowe") — czytelny układ. */
.accordion__body .woocommerce-product-attributes { inline-size: 100%; border-collapse: collapse; }
.accordion__body .woocommerce-product-attributes th,
.accordion__body .woocommerce-product-attributes td {
	padding: var(--wp--preset--spacing--xs) 0;
	text-align: start;
	vertical-align: top;
	font-size: var(--wp--preset--font-size--body);
	border-block-end: 1px solid var(--wp--preset--color--line);
}
.accordion__body .woocommerce-product-attributes th { font-weight: var(--wp--custom--font-weight--medium); padding-inline-end: var(--wp--preset--spacing--md); }

/* --------------------------------------------------------------------------
   4) Rekomendacje pod produktem (upsells / related) = WSPÓLNA karuzela
   `.rekomendacje` (Swiper + kafle `.product-card`) renderowana przez
   `single-layout.php` na `woocommerce_after_single_product` (POZA `div.product`).
   Style karuzeli = globalny prymityw w components.css, init = woo-carousel.js.
   Dawny natywny render `.up-sells`/`.related` (siatka) zdjęty — tu nic nie trzeba.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   5) PRZEWODNIK PO ROZMIARACH — trigger (link przy polu rozmiaru) + modal z
   tabelą rozmiarów. Modal reużywa prymitywy `.scrim`/`.modal`/`.modal__head`/
   `.modal__title`/`.modal__close` (components.css) — tu tylko wygląd triggera,
   ikona-close oraz style tabeli (`.size-guide` = modyfikator modala, jak
   `.shop-filter` w filtrach). Treść modala = pole Options (wp_kses_post), więc
   stylujemy też GOŁE elementy tabeli (klient może wkleić `<table>` bez klasy).
   Enqueue JS/warunek renderu = single-layout.php (ADR-0025).
   -------------------------------------------------------------------------- */

/* Trigger = dyskretny link z ikoną stopy (ta sama `foot.svg` co „w trosce {foot}
   o stopy" na home). Ikona + tekst w jednej linii (inline-flex). Kolor `dark`
   (czytelny — `muted` był za blady), akcent na hoverze; podkreślenie TYLKO na
   tekście (nie na ikonie). Docelowo JS (`woo-size-guide.js`) przenosi go do
   wiersza etykiety „rozmiar" (reguła `th.label` niżej). `align-self:flex-start`
   = fallback pozycji SSR (@25) w kolumnie `.summary` (flex-column). */
.single-product .size-guide__trigger {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	padding: 0;
	border: 0;
	background: none;
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
	font-weight: var(--wp--custom--font-weight--regular);
	color: var(--wp--preset--color--dark);
	letter-spacing: normal; /* etykieta pola ma `--letter-spacing--wide`; link nie */
	cursor: pointer;
	transition: color 0.2s ease;
}
.single-product .size-guide__trigger-text {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
/* Ikona stopy — wysokość ~tekst, w kolorze tekstu. `foot.svg` ma sztywny fill
   `#2F2D30`, więc nadpisujemy na `currentColor`, by szła za kolorem linku (hover). */
.single-product .size-guide__trigger-icon {
	flex: none;
	inline-size: auto;
	block-size: 1.5em;
}
.single-product .size-guide__trigger-icon path { fill: currentColor; }
.single-product .size-guide__trigger:hover {
	color: var(--wp--preset--color--accent);
}
.single-product .size-guide__trigger:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Wiersz etykiety pola wariantu w JEDNEJ linii: „rozmiar" po lewej, a gdy JS
   przeniesie tu trigger — „przewodnik po rozmiarach" po prawej (space-between).
   Dotyczy też wiersza „kolor" (bez triggera → sama etykieta po lewej; bez zmian
   wizualnych). `align-items:center` — wyśrodkowanie w pionie mieści wyższą ikonę
   stopy w triggerze bez ucinania (baseline wypychał ją ponad linię → clip). */
.single-product .variations th.label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--sm);
	flex-wrap: wrap;
}
/* Etykieta była display:inline (margines pionowy ignorowany); po zmianie th.label
   na flex staje się itemem flex → zerujemy jej margines, bo odstęp do swatchy daje
   już margines th.label. */
.single-product .variations th.label label { margin: 0; }
/* W wierszu etykiety trigger dziedziczy wyrównanie z rodzica (nie flex-start z
   fallbacku SSR w kolumnie .summary). */
.single-product .variations th.label .size-guide__trigger { align-self: auto; }

/* Ikona-close (×) w headerze modala — przycisk-ikona (jak lightbox/cart-drawer),
   `.modal__close` z components.css daje flex:none, tu rozmiar i stan. */
.size-guide__close {
	display: inline-flex;
	padding: var(--wp--preset--spacing--xs);
	border: 0;
	background: none;
	color: var(--wp--preset--color--dark);
	cursor: pointer;
	transition: color 0.2s ease;
}
.size-guide__close svg { inline-size: 1.25rem; block-size: 1.25rem; }
.size-guide__close:hover { color: var(--wp--preset--color--accent); }
.size-guide__close:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Body modala — rytm pionowy + poziomy scroll dla szerokiej tabeli (modal ma
   stały max-width; tabela nie może rozpychać layoutu). */
.size-guide__body {
	margin-block-start: var(--wp--preset--spacing--md);
	overflow-x: auto;
}
.size-guide__body > :last-child { margin-block-end: 0; }

/* Nagłówki sekcji (np. „dorośli" / „dzieci") + nota TODO/wstęp. */
.size-guide__body h2,
.size-guide__body h3 {
	margin-block: var(--wp--preset--spacing--md) var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--tight);
}
.size-guide__body h2:first-child,
.size-guide__body h3:first-child { margin-block-start: 0; }
.size-guide__body p {
	margin-block: 0 var(--wp--preset--spacing--md);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--dark);
}

/* Tabela rozmiarów — na tokenach. Celuje w `.size-guide__table` ORAZ w gołe
   `table` w treści (klient może wkleić tabelę bez klasy z Options). */
.size-guide__table,
.size-guide__body table {
	inline-size: 100%;
	margin-block-end: var(--wp--preset--spacing--md);
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--body);
}
.size-guide__table th,
.size-guide__table td,
.size-guide__body table th,
.size-guide__body table td {
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
	text-align: start;
	vertical-align: middle;
	border-block-end: 1px solid var(--wp--preset--color--line);
}
.size-guide__table th,
.size-guide__body table th {
	font-weight: var(--wp--custom--font-weight--medium);
	color: var(--wp--preset--color--dark);
}
.size-guide__table thead th,
.size-guide__body table thead th {
	border-block-end: 1px solid var(--wp--preset--color--dark);
	letter-spacing: var(--wp--custom--letter-spacing--wide);
}