/*
 * Екрани кабінету, які малює не блок, а наші шаблони WooCommerce:
 * шапка кабінету і форма «Мої дані».
 *
 * Живе окремим файлом, бо форма даних — не блок, і на її сторінці жоден наш
 * блок не рендериться. Підключається так само, як assets/search-suggest.css:
 * вручну, з path для вбудовування (контракт — docs/design/block-css-contract.md).
 */

/*
 * Шапка кабінету.
 *
 * Три рядки: ім'я, номер, під яким зайшли, і те, що магазин пам'ятає про цю
 * людину. Останнє — єдине, заради чого варто щось писати над списком
 * замовлень: «замовлень у нас 47, з 2022 року» каже покупцеві, що переїзд
 * нічого не загубив.
 */

.gsl-cab__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 12px;
}

/* Кружечок з першою літерою — прийом Silpo, єдиного з одинадцяти виміряних
   українських магазинів, хто на телефоні взагалі показує, під ким ви увійшли. */
.gsl-cab__mark {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-wash);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1;
}

.gsl-cab__who {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 3px;
}

.gsl-cab__hi {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.15;
}

.gsl-cab__facts {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Заголовок сторінки ховається від очей, але не від читача екрана: рядок під
   ним називає ту саму сторінку точніше — на ім'я. На телефоні це сорок пікселів,
   на які піднімається перша картка; на комп'ютері «Мій кабінет» і одразу під
   ним «Вітаємо!» були двома заголовками поспіль (28.09.2026). */
.woocommerce-account .wp-block-post-title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Підекрани кабінету: «‹ Мій кабінет» і назва розділу. Шапку з привітанням і
   обидва ряди розділів на телефоні ховаємо — людина щойно ними скористалася, а
   форма через них починалася на 400-му пікселі. На комп'ютері бічне меню
   лишається, і кнопка «назад» там зайва. */
.gsl-cab__top {
	margin: 0 0 16px;
}

.gsl-cab__back {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 40px;
	color: var(--wp--preset--color--brand-action);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	text-decoration: none;
}

.gsl-cab__back:hover {
	color: var(--wp--preset--color--brand-text);
}

.gsl-cab__title {
	margin: 2px 0 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: 1.15;
}

.gsl-cab__count {
	margin-left: 6px;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
}

@media (max-width: 782px) {
	.gsl-cab__head.gsl-cab__head--sub,
	.gsl-nav.gsl-nav--sub.woocommerce-MyAccount-navigation {
		display: none;
	}
}

@media (min-width: 783px) {
	.gsl-cab__back {
		display: none;
	}

	.gsl-cab__title {
		margin-top: 0;
	}

	/* Кабінет на комп'ютері: привітання на всю ширину, під ним бічне меню
	   272 пікселі (медіана виміряних українських кабінетів — 290) і зміст.
	   Два класи на меню й змісті, бо WooCommerce розкладає їх float-ами на
	   30 і 68 % правилом (0,2,0). */
	.woocommerce-account .woocommerce:has(> .gsl-nav) {
		display: grid;
		grid-template-columns: 272px minmax(0, 1fr);
		align-items: start;
		gap: 0 32px;
	}

	.woocommerce-account .woocommerce:has(> .gsl-nav) > .gsl-cab__head {
		grid-column: 1 / -1;
		margin-bottom: 24px;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation.gsl-nav {
		position: sticky;
		top: 20px;
		float: none;
		width: auto;
	}

	.woocommerce-account .woocommerce .woocommerce-MyAccount-content {
		float: none;
		width: auto;
		min-width: 0;
	}

	.gsl-cab__hi {
		font-size: var(--wp--preset--font-size--x-large);
	}
}

/*
 * «Мої дані».
 *
 * Чотири рядки замість семи: WooCommerce просив поточний пароль, новий і
 * підтвердження — три поля для таємниці, якої тут ні в кого немає. Телефон
 * показано, але не редагується: змінити номер означає підтвердити новий кодом,
 * а поле, яке тихо переписує особу, — це загублений акаунт.
 */

.gsl-me {
	max-width: 36rem;
}

/* Два блоки (28.09.2026): як звертатися — і номер, за яким входять. Номер
   живе окремо, бо міняється кодом, а не кнопкою «Зберегти». */
.gsl-me__block {
	margin: 0 0 12px;
	padding: 16px 16px 2px;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--base);
}

.gsl-me__h {
	margin: 0 0 12px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
}

.gsl-me__two {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 8px;
}

.gsl-me__two .gsl-me__input {
	min-width: 0;
}

.gsl-me__out {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	max-width: 36rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--base);
	text-decoration: none;
}

.gsl-me__out:hover {
	color: var(--wp--preset--color--brand-text);
}

.gsl-me__row {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 0 16px;
}

.gsl-me__label {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.gsl-me__input {
	height: 46px;
	padding: 0 12px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--medium);
}

.gsl-me__input:focus {
	border-color: var(--wp--preset--color--brand-action);
	outline: none;
}

/* Номер не поле: його видно, але не набирають. */
.gsl-me__fixed {
	padding: 11px 0;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--medium);
}

.gsl-me__note {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--label);
	line-height: 1.4;
}

.gsl-me__save {
	width: 100%;
	height: 48px;
	padding: 0 26px;
	border: 0;
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--brand-action);
	color: var(--wp--preset--color--base);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.gsl-me__save:hover {
	background: var(--wp--preset--color--brand-text);
}

/* Зміна номера: розкривається під рядком телефону, два кроки один за одним. */

.gsl-me__phoneline {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px;
}

.gsl-me__link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--brand-action);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: underline;
	cursor: pointer;
}

.gsl-me__link:hover {
	color: var(--wp--preset--color--brand-hover);
}

.gsl-me__panel {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 10px 0 0;
	padding: 14px;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--surface-soft);
}

.gsl-me__panel[hidden] {
	display: none;
}

.gsl-me__step {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.gsl-me__step[hidden] {
	display: none;
}

.gsl-me__input--code {
	letter-spacing: 0.32em;
	font-size: var(--wp--preset--font-size--price);
}

.gsl-me__buttons {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 4px 0 0;
}

/* У панелі зміни номера кнопка стоїть поруч із «Скасувати», не на всю ширину. */
.gsl-me__buttons .gsl-me__save {
	width: auto;
}

.gsl-me__err {
	padding: 8px 10px;
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--brand-wash);
	color: var(--wp--preset--color--sale);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

/* Той самий рядок, але коли все вийшло: зелений, а не тривожний. */
.gsl-me__err--done {
	color: var(--wp--preset--color--in-stock);
}

/* ---------------------------------------------------------------------------
   Розділи кабінету.

   Чому саме дві смуги, а не стрічка з прокруткою, написано в
   templates/myaccount/navigation.php: стрічка була 745 пікселів завширшки у
   вікні на 358, і чотири розділи з шести лежали за правим краєм.

   На комп'ютері обидва списки — одна колонка ліворуч, як було: плитки й тихий
   ряд різняться там лише вагою підпису, бо на 220 пікселях ширини вони однак
   стоять один під одним. На телефоні перший список стає двома плитками, другий —
   рядком дрібних посилань під ними.

   Активний розділ залито темним, а не позначено самою лише вагою чи
   підкресленням, як роблять Sephora, Michaels і Kasta: WCAG 1.4.11 вимагає 3:1
   для позначки стану, а на нашій палітрі вагу й підкреслення до цього порогу не
   дотягнути. Біле по `brand-action` дає 3,98:1 — замало для 13 пікселів, тож
   заливка саме `ink`, це 10:1. Так само (заливка + колір + вага) це зроблено в
   єдиного з українських магазинів, хто зробив це виразно, — Allo.

   Специфічність (0,2,0) навмисна: тема стилізує `.woocommerce-MyAccount-navigation ul`
   і `… a` — це (0,1,1), і без другого класу її правила перемагають.
   --------------------------------------------------------------------------- */

/* Обидва класи на одному елементі (0,3,0): WooCommerce дає спискам усередині
   своєї навігації `margin-bottom: 2em` правилом на (0,2,1)
   (`woocommerce-blocktheme.css`), і на телефоні це 28 зайвих пікселів двічі —
   рівно те, на що опускалося перше замовлення. */
.gsl-nav.woocommerce-MyAccount-navigation .gsl-nav__main,
.gsl-nav.woocommerce-MyAccount-navigation .gsl-nav__rest {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gsl-nav .gsl-nav__main {
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--base);
	overflow: hidden;
}

.gsl-nav.woocommerce-MyAccount-navigation .gsl-nav__rest {
	margin-top: 10px;
	margin-bottom: 14px;
}

.gsl-nav .gsl-nav__go,
.gsl-nav .gsl-nav__link {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 10px 14px;
	border-left: 3px solid transparent;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--base);
	text-decoration: none;
}

/* Те саме, що зі списками вище: `woocommerce-blocktheme.css` відбиває кожен
   пункт навігації знизу, і на комп'ютері колонка з п'яти розділів розтягувалася
   на півтора екрана. */
.gsl-nav.woocommerce-MyAccount-navigation .gsl-nav__tile,
.gsl-nav.woocommerce-MyAccount-navigation .gsl-nav__item {
	margin: 0;
	padding: 0;
}

.gsl-nav .gsl-nav__tile + .gsl-nav__tile,
.gsl-nav .gsl-nav__item + .gsl-nav__item {
	border-top: 1px solid var(--wp--preset--color--hairline);
}

.gsl-nav .gsl-nav__icon {
	flex: none;
	color: var(--wp--preset--color--brand-action);
}

.gsl-nav .gsl-nav__name {
	font-weight: 700;
}

/* У вузькій колонці 220 пікселів «Адреси й відділення» інакше переноситься на
   другий рядок і ламає рівну висоту списку. */
.gsl-nav .gsl-nav__name,
.gsl-nav .gsl-nav__label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gsl-nav .gsl-nav__count {
	margin-left: auto;
	padding: 1px 9px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.gsl-nav .gsl-nav__go:hover,
.gsl-nav .gsl-nav__link:hover {
	background: var(--wp--preset--color--surface-soft);
	color: var(--wp--preset--color--brand-text);
}

.gsl-nav .is-current .gsl-nav__go,
.gsl-nav .is-current .gsl-nav__link {
	border-left-color: var(--wp--preset--color--gold);
	background: var(--wp--preset--color--brand-wash);
	color: var(--wp--preset--color--brand-text);
	font-weight: 700;
}

/* Вихід — останній і тихіший за решту: його шукають, але не щодня. */
.gsl-nav .gsl-nav__item--exit .gsl-nav__link,
.gsl-nav .gsl-nav__item--exit .gsl-nav__icon {
	color: var(--wp--preset--color--muted);
}

@media (max-width: 782px) {
	.gsl-nav.woocommerce-MyAccount-navigation .gsl-nav__main {
		flex-direction: row;
		gap: 10px;
		border: 0;
		border-radius: 0;
		background: none;
		overflow: visible;
	}

	.gsl-nav .gsl-nav__tile {
		display: flex;
		flex: 1 1 0;
		min-width: 0;
	}

	.gsl-nav .gsl-nav__tile + .gsl-nav__tile,
	.gsl-nav .gsl-nav__item + .gsl-nav__item {
		border-top: 0;
	}

	/* Плитка: іконка, назва, число праворуч. Знизу три пікселі
	   кольору — там, де в активної плитки стоїть золото, щоб рядки не стрибали
	   на пікселі при перемиканні. */
	.gsl-nav .gsl-nav__go {
		display: flex;
		align-items: center;
		flex: 1;
		gap: 8px;
		min-height: 56px;
		padding: 0 14px;
		border: 1px solid var(--wp--preset--color--border);
		border-bottom: 3px solid var(--wp--preset--color--border);
		border-radius: var(--wp--custom--radius--medium);
		background: var(--wp--preset--color--base);
	}

	.gsl-nav .gsl-nav__go .gsl-nav__icon {
		width: 20px;
		height: 20px;
	}

	.gsl-nav .gsl-nav__go .gsl-nav__name {
		font-size: var(--wp--preset--font-size--medium);
		color: var(--wp--preset--color--ink);
	}

	/* Лічильник — голим числом праворуч (28.09.2026): другим рядком він робив
	   плитку вдвічі вищою заради однієї цифри. */
	.gsl-nav .gsl-nav__count {
		margin-left: auto;
		padding: 0;
		background: none;
		color: var(--wp--preset--color--muted);
		font-size: var(--wp--preset--font-size--medium);
		font-weight: 700;
	}

	.gsl-nav .gsl-nav__count--rest {
		display: none;
	}

	.gsl-nav .is-current .gsl-nav__go {
		border-color: var(--wp--preset--color--ink);
		border-bottom-color: var(--wp--preset--color--gold);
		background: var(--wp--preset--color--ink);
		color: var(--wp--preset--color--base);
	}

	.gsl-nav .is-current .gsl-nav__go .gsl-nav__name,
	.gsl-nav .is-current .gsl-nav__go .gsl-nav__icon {
		color: var(--wp--preset--color--base);
	}

	.gsl-nav .is-current .gsl-nav__go .gsl-nav__count {
		color: var(--wp--preset--color--brand-light);
	}

	/* Тихий ряд: не картка, а рядок посилань по тлу сторінки — інакше три
	   однакові білі смуги читаються як ще три розділи такої ж ваги. */
	.gsl-nav.woocommerce-MyAccount-navigation .gsl-nav__rest {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 4px 18px;
		margin-top: 8px;
	}

	.gsl-nav .gsl-nav__link {
		gap: 6px;
		min-height: 36px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--wp--preset--color--muted);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 600;
	}

	.gsl-nav .gsl-nav__rest .gsl-nav__icon {
		width: 15px;
		height: 15px;
		color: var(--wp--preset--color--muted);
	}

	.gsl-nav .is-current .gsl-nav__link {
		border: 0;
		background: none;
		color: var(--wp--preset--color--brand-text);
	}

	.gsl-nav .is-current .gsl-nav__link .gsl-nav__icon {
		color: var(--wp--preset--color--brand-action);
	}

	/* Вихід відсувається до правого краю: це не сусід «Моїх даних», а дія. */
	.gsl-nav .gsl-nav__item--exit {
		margin-left: auto;
	}
}

/* ---------------------------------------------------------------------------
   Повернення товару.

   Кнопка стоїть під карткою, а не поруч із «Купити знову»: у підвалі картки на
   358 пікселях уже лежать сума й головна дія, і друга кнопка поруч із нею
   читалася б як рівна за вагою. Повернення — не те, що робиться щодня.

   Форма живе в `details`, тож без скрипта вона теж розкривається й
   відправляється: єдине, що дає скрипт, — галочка «обрати все».

   Пояснення в templates/parts/order-card.php і в Account\Returns.
   --------------------------------------------------------------------------- */

.gsl-ret {
	margin: 12px 0 0;
	padding: 12px 0 0;
	border-top: 1px solid var(--wp--preset--color--hairline);
}

.gsl-ret__open {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.gsl-ret__open::-webkit-details-marker {
	display: none;
}

.gsl-ret__open:hover {
	color: var(--wp--preset--color--brand-text);
}

/* Скільки лишилося — сірим і дрібним: це не попередження, а довідка. */
.gsl-ret__left {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}

.gsl-ret__left::before {
	content: "· ";
}

.gsl-ret__form {
	margin: 10px 0 0;
	padding: 14px;
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--surface);
}

.gsl-ret__title {
	margin: 0 0 6px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
}

.gsl-ret__title:not(:first-child) {
	margin-top: 14px;
}

.gsl-ret__row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 40px;
	padding: 6px 0;
	cursor: pointer;
}

.gsl-ret__row--all {
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

.gsl-ret__box {
	width: 20px;
	height: 20px;
	flex: none;
	margin: 2px 0 0;
	accent-color: var(--wp--preset--color--brand-action);
}

.gsl-ret__name {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.35;
}

.gsl-ret__qty {
	color: var(--wp--preset--color--muted);
}

.gsl-ret__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 14px;
}

.gsl-ret__label {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.gsl-ret__note {
	padding: 10px 12px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--base);
	resize: vertical;
}

.gsl-ret__note:focus {
	border-color: var(--wp--preset--color--brand-action);
	outline: none;
}

/* Умова зберігання товарного вигляду стоїть перед кнопкою, а не після
   повернення грошей: людина має прочитати її до того, як запакує посилку. */
.gsl-ret__hint {
	margin: 12px 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

.gsl-ret__send {
	margin-top: 12px;
	height: 44px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--brand-action);
	color: var(--wp--preset--color--base);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.gsl-ret__send:hover {
	background: var(--wp--preset--color--brand-text);
}

/* Подана заявка: замість кнопки — що відбувається далі. */
.gsl-orders__ret {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 12px 0 0;
	padding: 12px 14px;
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--brand-wash);
}

.gsl-orders__rettitle {
	color: var(--wp--preset--color--brand-text);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
}

.gsl-orders__rethint {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

/* Єдине, що форма може сказати у відповідь: жодного товару не позначено. */
.gsl-ret__warn {
	margin: 0 0 10px;
	color: var(--wp--preset--color--sale);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Одне замовлення.

   Картка у списку відповідає на «що з моєю посилкою», ця сторінка — на «що
   саме я купила, почому і що з цим можна зробити». Тому тут ціна стоїть у
   кожному рядку, а не лише підсумком: рядок — це те, що перевіряють, коли
   здається, що порахували двічі.

   Пояснення в templates/myaccount/order.php.
   --------------------------------------------------------------------------- */

.gsl-one {
	max-width: 760px;
}

.gsl-one__nav {
	margin: 0 0 12px;
}

.gsl-one__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
}

.gsl-one__back:hover {
	color: var(--wp--preset--color--brand-text);
}

.gsl-one__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.gsl-one__when {
	margin-left: auto;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.gsl-one__title {
	margin: 10px 0 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
}

.gsl-one__note {
	margin: 6px 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.45;
}

.gsl-one__box {
	margin: 16px 0 0;
	padding: 14px;
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--surface);
}

.gsl-one__label {
	margin: 18px 0 8px;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

.gsl-one__box .gsl-one__label {
	margin: 0 0 6px;
}

.gsl-one__where {
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--base);
}

.gsl-one__ttn {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin: 6px 0 0;
	font-size: var(--wp--preset--font-size--base);
}

.gsl-one__ttn a {
	color: var(--wp--preset--color--brand-action);
	font-weight: 600;
}

.gsl-one__code {
	color: var(--wp--preset--color--muted);
}

.gsl-one__items {
	margin: 0;
	padding: 0;
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--base);
	list-style: none;
	overflow: hidden;
	box-shadow: 0 2px 10px color-mix(in srgb, var(--wp--preset--color--ink) 8%, transparent);
}

.gsl-one__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
}

.gsl-one__item + .gsl-one__item {
	border-top: 1px solid var(--wp--preset--color--hairline);
}

.gsl-one__shot {
	display: block;
	flex: none;
	line-height: 0;
}

.gsl-one__what {
	display: flex;
	min-width: 0;
	flex-direction: column;
	flex-grow: 1;
	gap: 3px;
}

.gsl-one__name {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.35;
	text-decoration: none;
}

a.gsl-one__name:hover {
	color: var(--wp--preset--color--brand-text);
}

.gsl-one__line {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.gsl-one__cost {
	flex: none;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
}

.gsl-one__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 16px 0 0;
	padding: 14px;
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
}

.gsl-one__grand {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--price);
	letter-spacing: -0.02em;
}

.gsl-one__again {
	margin: 16px 0 0;
}

.gsl-one__repeat {
	height: 46px;
	padding: 0 22px;
	border: 1px solid var(--wp--preset--color--brand-action);
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--brand-action);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.gsl-one__repeat:hover {
	background: var(--wp--preset--color--brand-wash);
}

.gsl-one__none {
	margin: 0 0 10px;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--medium);
}

/* Заголовок форми повернення на сторінці: те саме, що було підписом згорнутого
   блока в картці, тільки тут нічого не згортається. */
.gsl-ret__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Двері з рядка історії: «N товарів · Деталі» ліворуч, дії праворуч.
   Рядок, а не картка (28.09.2026), тож без власної лінії згори — лінією
   рядки ділить сам список.
   --------------------------------------------------------------------------- */

.gsl-orders__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 18px;
	margin: 8px 0 0;
}

.gsl-orders__open {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 36px;
	margin-right: auto;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.gsl-orders__open:hover {
	color: var(--wp--preset--color--brand-text);
}

.gsl-orders__goret {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
}

.gsl-orders__goret:hover {
	color: var(--wp--preset--color--brand-text);
}

.gsl-orders__retmark {
	color: var(--wp--preset--color--brand-text);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* Чип статусу й мініатюри на сторінці замовлення.

   Ті самі класи, що в списку, але стиль списку живе у `blocks/my-orders/style.css`
   і вантажиться лише там, де стоїть блок. На цій сторінці блока немає, і без
   цих правил статус читався б голим текстом, а кожна картинка малювалася б у
   свої три тисячі пікселів. Правила обмежені сторінкою, тож у списку виграє
   стиль блока, як і має бути. */

.gsl-one .gsl-orders__pic {
	display: block;
	width: 64px;
	height: 64px;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--surface);
	object-fit: cover;
}

.gsl-one .gsl-orders__pic--none {
	border-style: dashed;
}

.gsl-one .gsl-orders__chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 11px 5px 9px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--surface-soft);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.3;
}

.gsl-one .gsl-orders__dot {
	width: 8px;
	height: 8px;
	flex: none;
	border-radius: 50%;
	background: currentColor;
}

.gsl-one .gsl-orders__chip--open .gsl-orders__dot,
.gsl-one .gsl-orders__chip--moving .gsl-orders__dot {
	color: var(--wp--preset--color--brand-action);
}

.gsl-one .gsl-orders__chip--wait .gsl-orders__dot {
	color: var(--wp--preset--color--gold-text);
}

.gsl-one .gsl-orders__chip--ready {
	background: color-mix(in srgb, var(--wp--preset--color--in-stock) 14%, transparent);
}

.gsl-one .gsl-orders__chip--ready .gsl-orders__dot {
	color: var(--wp--preset--color--in-stock);
}

.gsl-one .gsl-orders__chip--done,
.gsl-one .gsl-orders__chip--closed {
	color: var(--wp--preset--color--muted);
	font-weight: 600;
}

.gsl-one .gsl-orders__chip--done .gsl-orders__dot,
.gsl-one .gsl-orders__chip--closed .gsl-orders__dot {
	color: var(--wp--preset--color--muted);
}

/* Де саме посилка — найголовніший рядок сторінки, коли вона ще їде. */
.gsl-one__state {
	margin: 0 0 6px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 1.35;
}


/* ---------------------------------------------------------------------------
   Сторінка замовлення: дві дії, вибір рядків, шторка «Додано в кошик»,
   повернення через Легке повернення (власник, 25.09.2026).

   Дві рівні кнопки під сумою: золота «Купити знову» — як усі кнопки покупки
   на сайті, контурна «Повернути» з днями, що лишились. У режимі вибору форма
   «Купити знову» стає панеллю внизу екрана з сумою обраного.
   --------------------------------------------------------------------------- */

.gsl-one__acts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 16px 0 0;
}

.gsl-one__acts--one {
	grid-template-columns: 1fr;
}

.gsl-one__acts .gsl-one__again {
	margin: 0;
}

.gsl-one__acts .gsl-one__repeat {
	width: 100%;
	height: 48px;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--medium);
}

.gsl-one__acts .gsl-one__repeat:hover {
	background: var(--wp--preset--color--gold-hover);
}

.gsl-one__retgo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	box-sizing: border-box;
	border: 1.5px solid var(--wp--preset--color--brand-action);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--brand-text);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.15;
	text-decoration: none;
}

.gsl-one__retgo small {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
}

.gsl-one__retgo:hover {
	background: var(--wp--preset--color--brand-wash);
}

/* Вибір рядків. */
.gsl-pick__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
	padding: 12px 14px;
	border-radius: var(--wp--custom--radius--medium) var(--wp--custom--radius--medium) 0 0;
	background: var(--wp--preset--color--brand-wash);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--base);
}

.gsl-pick__all {
	padding: 6px 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--brand-text);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	cursor: pointer;
}

.gsl-one.is-picking .gsl-one__items {
	border-radius: 0 0 var(--wp--custom--radius--medium) var(--wp--custom--radius--medium);
}

.gsl-one.is-picking .gsl-one__item {
	cursor: pointer;
}

.gsl-pick__box {
	flex: none;
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--wp--preset--color--brand-action);
	cursor: pointer;
}

.gsl-one.is-picking .gsl-one__item.is-off .gsl-one__shot,
.gsl-one.is-picking .gsl-one__item.is-off .gsl-one__what,
.gsl-one.is-picking .gsl-one__item.is-off .gsl-one__cost {
	opacity: 0.45;
}

.gsl-pick__gone {
	color: var(--wp--preset--color--sale);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

.gsl-one.is-picking .gsl-one__item.is-gone .gsl-one__shot,
.gsl-one.is-picking .gsl-one__item.is-gone .gsl-one__name,
.gsl-one.is-picking .gsl-one__item.is-gone .gsl-one__line,
.gsl-one.is-picking .gsl-one__item.is-gone .gsl-one__cost {
	opacity: 0.45;
}

.gsl-one.is-picking .gsl-one__total,
.gsl-one.is-picking .gsl-one__retgo {
	display: none;
}

.gsl-one.is-picking .gsl-one__acts {
	grid-template-columns: 1fr;
}

.gsl-pick__bar,
.gsl-ret__bar {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 4px 12px;
	position: sticky;
	bottom: 12px;
	z-index: 30;
	margin-top: 14px;
	padding: 12px 14px;
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--base);
	box-shadow: 0 4px 18px color-mix(in srgb, var(--wp--preset--color--ink) 20%, transparent);
}

.gsl-pick__bar[hidden] {
	display: none;
}

.gsl-pick__sum,
.gsl-ret__sum {
	display: flex;
	flex-direction: column;
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.25;
}

.gsl-pick__sum b,
.gsl-ret__sum b {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--price);
	font-weight: 800;
}

.gsl-pick__go {
	min-width: 170px;
	height: 48px;
	padding: 0 18px;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.gsl-pick__go:disabled {
	opacity: 0.5;
	cursor: default;
}

.gsl-pick__cancel,
.gsl-ret__cancel {
	grid-column: 1 / -1;
	padding: 2px 0 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--muted);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: underline;
	cursor: pointer;
}

.gsl-ret__cancel[hidden] {
	display: none;
}

/* На телефоні панель — смуга по нижньому краю екрана, де вже лежить палець. */
@media (max-width: 640px) {
	.gsl-pick__bar,
	.gsl-ret__bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 80;
		margin: 0;
		padding: 10px var(--wp--custom--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
		border-radius: 0;
	}

	.gsl-one.is-picking,
	.gsl-ret:not(.is-folded) {
		padding-bottom: 110px;
	}

	.gsl-pick__go {
		min-width: 0;
	}
}

/* «Додано в кошик». */
.gsl-done__veil {
	position: fixed;
	inset: 0;
	z-index: 95;
	background: color-mix(in srgb, var(--wp--preset--color--ink) 45%, transparent);
}

.gsl-done__panel {
	position: fixed;
	left: 50%;
	top: 50%;
	z-index: 96;
	width: min(420px, calc(100vw - 32px));
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px 18px 18px;
	border-radius: var(--wp--custom--radius--large);
	background: var(--wp--preset--color--base);
	transform: translate(-50%, -50%);
	box-shadow: 0 10px 30px color-mix(in srgb, var(--wp--preset--color--ink) 30%, transparent);
}

@media (max-width: 640px) {
	.gsl-done__panel {
		left: 0;
		right: 0;
		top: auto;
		bottom: 0;
		width: auto;
		padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
		border-radius: var(--wp--custom--radius--large) var(--wp--custom--radius--large) 0 0;
		transform: none;
	}
}

.gsl-done__ok,
.gsl-ret__ok {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--wp--preset--color--in-stock);
}

.gsl-done__ok::after,
.gsl-ret__ok::after {
	content: "";
	width: 16px;
	height: 9px;
	border-left: 3px solid var(--wp--preset--color--base);
	border-bottom: 3px solid var(--wp--preset--color--base);
	transform: translateY(-2px) rotate(-45deg);
}

.gsl-done__title {
	margin: 4px 0 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--price);
	font-weight: 800;
}

.gsl-done__text {
	margin: 0 0 6px;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--base);
}

.gsl-done__main,
.gsl-done__more,
.gsl-ret__np {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	border-radius: var(--wp--custom--radius--pill);
	font-weight: 700;
	text-decoration: none;
}

.gsl-done__main {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}

.gsl-done__more {
	border: 1.5px solid var(--wp--preset--color--brand-action);
	color: var(--wp--preset--color--brand-text);
}

/* ------------------------------------------------------------- повернення --- */
.gsl-ret.is-folded {
	display: none;
}

.gsl-ret__h {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin: 22px 0 10px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--large);
}

.gsl-ret__days {
	color: var(--wp--preset--color--in-stock);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	white-space: nowrap;
}

.gsl-ret .gsl-ret__form {
	margin: 0;
	padding: 0;
	background: none;
}

.gsl-ret__ez {
	padding: 14px;
	border: 2px solid var(--wp--preset--color--brand-action);
	border-radius: var(--wp--custom--radius--large);
	background: var(--wp--preset--color--base);
}

.gsl-ret__eztop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 6px;
}

.gsl-ret__tag {
	padding: 3px 8px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--brand-wash);
	color: var(--wp--preset--color--brand-text);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.gsl-ret__free {
	color: var(--wp--preset--color--in-stock);
	font-size: var(--wp--preset--font-size--price);
	font-weight: 800;
}

.gsl-ret__eztitle {
	margin: 0 0 4px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 800;
}

.gsl-ret__promise {
	margin: 0 0 8px;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.45;
}

.gsl-ret__steps {
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
	counter-reset: gsl-step;
}

.gsl-ret__steps li {
	position: relative;
	padding: 2px 0 10px 34px;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.4;
}

.gsl-ret__steps li::before {
	counter-increment: gsl-step;
	content: counter(gsl-step);
	position: absolute;
	left: 0;
	top: 0;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-wash);
	color: var(--wp--preset--color--brand-text);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 800;
}

.gsl-ret__ttn {
	white-space: nowrap;
}

.gsl-ret__copy {
	margin-left: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--brand-text);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}

.gsl-ret__np {
	background: var(--wp--preset--color--brand-action);
	color: var(--wp--preset--color--base);
}

.gsl-ret__np:hover {
	background: var(--wp--preset--color--brand-text);
}

.gsl-ret__limits {
	margin: 8px 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.gsl-ret__money {
	margin: 14px 0 0;
	padding: 12px 0 0;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--hairline);
}

.gsl-ret__money.is-off {
	opacity: 0.45;
}

.gsl-ret__moneyh {
	padding: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 800;
}

.gsl-ret__moneyw,
.gsl-ret__mismatch {
	margin: 2px 0 8px;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

.gsl-ret__mismatch {
	margin: 4px 0 0;
	color: var(--wp--preset--color--gold-text);
}

.gsl-ret__f {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin: 0 0 8px;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.gsl-ret__in {
	min-height: 44px;
	box-sizing: border-box;
	padding: 0 12px;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}

.gsl-ret__in:focus {
	border-color: var(--wp--preset--color--brand-action);
	outline: none;
}

.gsl-ret__in[aria-invalid="true"] {
	border-color: var(--wp--preset--color--sale);
}

.gsl-ret__terms {
	margin: 12px 0 0;
	padding: 12px 14px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--gold) 45%, transparent);
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

.gsl-ret__termsh,
.gsl-ret__otherh {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-weight: 800;
}

.gsl-ret__list {
	margin: 6px 0 8px;
	padding-left: 18px;
}

.gsl-ret__other {
	margin: 8px 0;
	padding: 10px 12px;
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--base);
}

.gsl-ret__otherw {
	margin: 2px 0 4px;
}

.gsl-ret__full {
	color: var(--wp--preset--color--brand-text);
	font-weight: 700;
}

.gsl-ret__q {
	margin: 18px 0 8px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
}

.gsl-ret__seg {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 0 0 10px;
	padding: 4px;
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--surface);
}

.gsl-ret__segi {
	position: relative;
	cursor: pointer;
}

.gsl-ret__segi input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.gsl-ret__segi span {
	display: block;
	padding: 10px 6px;
	border-radius: var(--wp--custom--radius--small);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	text-align: center;
}

.gsl-ret__segi input:checked + span {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	box-shadow: 0 1px 4px color-mix(in srgb, var(--wp--preset--color--ink) 15%, transparent);
}

.gsl-ret__segi input:focus-visible + span {
	outline: 2px solid var(--wp--preset--color--brand-action);
}

.gsl-ret__items {
	margin: 0;
	padding: 4px 14px;
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--base);
	list-style: none;
}

.gsl-ret__item + .gsl-ret__item {
	border-top: 1px solid var(--wp--preset--color--hairline);
}

.gsl-ret__item.is-off .gsl-ret__name {
	opacity: 0.5;
}

.gsl-ret__count {
	display: block;
	margin: 0 0 8px 30px;
}

.gsl-ret__qty {
	min-height: 36px;
	padding: 0 10px;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-weight: 700;
}

.gsl-ret__reason {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0 0 8px;
	padding: 11px 12px;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--base);
	cursor: pointer;
}

.gsl-ret__reason:has(input:checked) {
	border-color: var(--wp--preset--color--brand-action);
	background: var(--wp--preset--color--brand-wash);
}

.gsl-ret__reason input {
	width: 20px;
	height: 20px;
	flex: none;
	margin: 1px 0 0;
	accent-color: var(--wp--preset--color--brand-action);
}

.gsl-ret__reason b {
	display: block;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--base);
}

.gsl-ret__reason small {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.gsl-ret__bar .gsl-ret__send {
	margin: 0;
	min-width: 170px;
	height: 48px;
	border-radius: var(--wp--custom--radius--pill);
}

@media (max-width: 640px) {
	.gsl-ret__bar .gsl-ret__send {
		min-width: 0;
	}
}

.gsl-ret__filed {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 18px 0 0;
	padding: 16px;
	border-radius: var(--wp--custom--radius--large);
	background: var(--wp--preset--color--brand-wash);
}

.gsl-ret__filedtitle {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 800;
}

.gsl-ret__filedtext {
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.45;
}

.gsl-done {
	display: contents;
}

/* Прокрутка до вибору й до повернення зупиняється під липкою шапкою, а не за
   нею; підпис блоку реквізитів — звичайний рядок, не легенда в рамці. */
.gsl-pick__head,
.gsl-ret {
	scroll-margin-top: 150px;
}

.gsl-ret__moneyh {
	float: left;
	width: 100%;
	margin: 0;
}

.gsl-ret__moneyh + * {
	clear: left;
}

/* «Купити знову» у картці списку — тепер посилання на сторінку замовлення з
   вибором рядків, але виглядає так само, як кнопка. */
a.gsl-orders__repeat {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

/* Рядок «Що купити знову?» живе тільки в режимі вибору: власний display: flex
   перебивав атрибут hidden, і рядок стояв над списком завжди. */
.gsl-pick__head[hidden],
.gsl-pick__gone[hidden] {
	display: none;
}


/* ---------------------------------------------------------------------------
   Окремі сторінки «Купити знову» і «Повернення» (власник, 25.09.2026).
   --------------------------------------------------------------------------- */

/* На сторінці замовлення «Купити знову» — посилання, що виглядає як кнопка. */
a.gsl-one__repeat {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.gsl-one__acts a.gsl-one__repeat {
	width: 100%;
	height: 48px;
	box-sizing: border-box;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
}

.gsl-one__acts a.gsl-one__repeat:hover {
	background: var(--wp--preset--color--gold-hover);
}

.gsl-one__retdone {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 12px;
	margin: 14px 0 0;
	padding: 12px 14px;
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--brand-wash);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
}

.gsl-one__retdone a {
	color: var(--wp--preset--color--brand-text);
}

/* «Купити знову»: рядки завжди з галочками, увесь рядок — мішень. */
.gsl-pick__row {
	cursor: pointer;
}

.gsl-pick .gsl-pick__bar {
	margin-top: 14px;
}

a.gsl-pick__cancel {
	text-align: center;
}

/* На телефоні під панеллю-смугою лишаємо місце, щоб останній рядок не ховався. */
@media (max-width: 640px) {
	.gsl-one.is-picking,
	.gsl-one--return {
		padding-bottom: 120px;
	}
}

/* Повернення: фото в кожної позиції. */
.gsl-ret__row--shot {
	align-items: center;
	gap: 10px;
	padding: 8px 0;
}

.gsl-ret__row--shot .gsl-ret__box {
	margin: 0;
}

.gsl-ret__shot {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: var(--wp--custom--radius--small);
	overflow: hidden;
	line-height: 0;
	background: var(--wp--preset--color--surface);
}

.gsl-ret__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gsl-ret__what {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 2px;
}

.gsl-ret__line {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.gsl-ret__item.is-off .gsl-ret__shot {
	opacity: 0.45;
}

.gsl-ret__count {
	margin: -4px 0 10px 96px;
}

a.gsl-ret__cancel {
	text-align: center;
}

.gsl-one--return .gsl-ret {
	margin: 0;
	padding: 0;
	border: 0;
}

.gsl-one--return .gsl-ret__h {
	margin-top: 4px;
}

/* Клавіатура на телефоні відкрита — нижньої панелі немає (див. account.js). */
@media (max-width: 640px) {
	.gsl-one.is-typing .gsl-ret__bar,
	.gsl-one.is-typing .gsl-pick__bar {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   «Як вам замовлення?» — сторінка з QR-коду посилки (26.09.2026). Показ і
   приховування полів — на :has, без скрипта: браузер без :has просто покаже
   все одразу, і форма так само працює.
   --------------------------------------------------------------------------- */

.gsl-fb__again {
	margin: 10px 0 0;
	padding: 10px 12px;
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--brand-wash);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

.gsl-fb__stock {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin: 16px 0 0;
	padding: 0;
	border: 0;
}

.gsl-fb__stock legend {
	grid-column: 1 / -1;
	padding: 0;
}

.gsl-fb__pill {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 12px;
	box-sizing: border-box;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	text-align: center;
	cursor: pointer;
}

.gsl-fb__pill:has(input:checked) {
	border-color: var(--wp--preset--color--brand-action);
	background: var(--wp--preset--color--brand-wash);
}

.gsl-fb__pill input,
.gsl-fb__thumb input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.gsl-fb__pill:has(input:focus-visible),
.gsl-fb__thumb:has(input:focus-visible) {
	outline: 2px solid var(--wp--preset--color--brand-action);
	outline-offset: 2px;
}

.gsl-one__items .gsl-fb__row {
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}

.gsl-fb__top {
	display: flex;
	align-items: center;
	gap: 12px;
}

.gsl-fb__marks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.gsl-fb__marks .gsl-fb__gone {
	grid-column: 1 / -1;
}

.gsl-fb__gone {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
}

.gsl-fb__gone input,
.gsl-fb__got input {
	width: 20px;
	height: 20px;
	flex: none;
	margin: 0;
	accent-color: var(--wp--preset--color--brand-action);
}

/* «Немає в посилці» — лише після відповіді «Чогось немає». */
.gsl-fb:not(:has(.gsl-fb__stock input[value="no"]:checked)) .gsl-fb__gone {
	display: none;
}

.gsl-fb__thumb {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 14px;
	box-sizing: border-box;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
}

.gsl-fb__thumb--up:has(input:checked) {
	border-color: var(--wp--preset--color--brand-action);
	background: var(--wp--preset--color--brand-wash);
	color: var(--wp--preset--color--brand-text);
}

.gsl-fb__thumb--down:has(input:checked) {
	border-color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}

/* «Що не так?» — коли товару немає або він не сподобався. */
.gsl-fb__why {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.gsl-fb__row:not(:has(.gsl-fb__gone input:checked, .gsl-fb__thumb--down input:checked)) .gsl-fb__why {
	display: none;
}

.gsl-fb__got {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	margin: 16px 0 0;
	padding: 0 14px;
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	cursor: pointer;
}

.gsl-fb__wish {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.gsl-fb__wish .gsl-one__label {
	margin-bottom: 0;
}

.gsl-fb .gsl-fb__send {
	width: 100%;
	height: 48px;
	margin: 18px 0 0;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	cursor: pointer;
}

.gsl-fb .gsl-fb__send:hover {
	background: var(--wp--preset--color--gold-hover);
}

@media (min-width: 641px) {
	.gsl-one__items .gsl-fb__row {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
	}

	.gsl-fb__why {
		grid-column: 1 / -1;
	}

	.gsl-fb__marks {
		grid-template-columns: auto 132px 132px;
		align-items: center;
	}

	.gsl-fb__marks .gsl-fb__gone {
		grid-column: auto;
	}

	.gsl-fb__marks .gsl-fb__thumb--up {
		grid-column: 2;
	}

	.gsl-fb__marks .gsl-fb__thumb--down {
		grid-column: 3;
	}

	.gsl-fb .gsl-fb__send {
		width: auto;
		min-width: 220px;
	}
}

.gsl-fb__word {
	line-height: 1;
}

/* Позиція, яку на збірці не зіскановали: ми її не поклали — кажемо, не питаємо. */
.gsl-fb__row--out .gsl-one__shot {
	opacity: 0.5;
}

.gsl-fb__out {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
   «Адреси й відділення» (28.09.2026): картки місць, підказка з CRM і форма,
   що говорить мовою оформлення замовлення. Див. Account\Addresses.
   --------------------------------------------------------------------------- */

.gsl-addr {
	max-width: 40rem;
}

.gsl-addr__said {
	margin: 0 0 14px;
	padding: 10px 14px;
	border-radius: var(--wp--custom--radius--small);
	background: color-mix(in srgb, var(--wp--preset--color--in-stock) 12%, transparent);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}

.gsl-addr__said--bad {
	background: var(--wp--preset--color--brand-wash);
	color: var(--wp--preset--color--sale);
}

.gsl-addr__lead {
	margin: 0 0 16px;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.45;
}

.gsl-addr__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.gsl-addr__card {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 3px 12px;
	margin: 0;
	padding: 14px 16px 8px;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--base);
}

/* Основна — рамкою кольору дії, а не лише словом: її підставить оформлення. */
.gsl-addr__card.is-main {
	border-color: var(--wp--preset--color--brand-action);
	box-shadow: 0 0 0 1px var(--wp--preset--color--brand-action);
}

.gsl-addr__card > .gsl-addr__badge {
	grid-row: span 3;
}

.gsl-addr__card > :not(.gsl-addr__badge) {
	grid-column: 2;
}

.gsl-addr__name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
}

.gsl-addr__tag {
	padding: 2px 8px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--brand-wash);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
}

.gsl-addr__line {
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.4;
}

.gsl-addr__who {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.gsl-addr__acts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 20px;
	margin: 4px 0 0;
}

.gsl-addr__act {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--brand-action);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.gsl-addr__act:hover {
	color: var(--wp--preset--color--brand-text);
}

.gsl-addr__act--quiet {
	color: var(--wp--preset--color--muted);
	font-weight: 500;
}

/* Підказка з історії — кремова, як усе, що магазин пропонує сам, а не питає. */
.gsl-addr__tip {
	margin: 0 0 18px;
	padding: 14px 16px;
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--cream);
}

.gsl-addr__tiptitle {
	margin: 0 0 2px;
	color: var(--wp--preset--color--ink);
	font-weight: 700;
}

.gsl-addr__tiptext {
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

.gsl-addr__tipacts {
	display: flex;
	gap: 8px;
	margin: 10px 0 0;
}

.gsl-addr__btn {
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--wp--preset--color--brand-action);
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--brand-action);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.gsl-addr__btn--main {
	background: var(--wp--preset--color--brand-action);
	color: var(--wp--preset--color--base);
}

.gsl-addr__badge {
	display: block;
	flex: none;
}

/* Порожній список: адреси з’являються самі, з першого замовлення. */
.gsl-addr__empty {
	padding: 24px 18px 10px;
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--surface-soft);
	text-align: center;
}

.gsl-addr__emptytitle {
	margin: 0 0 6px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
}