/**
 * TopDrop Theme — header chrome.
 *
 * Rebuilt to match the reference screenshot exactly:
 *
 *   Row A — light blue-grey strip (#e9eef2):
 *     [logo]  [search input + grey square button]   [💳 box] [📋 box] [👤 box]
 *
 *   Row B — white strip:
 *     [🏠 home  ·  📦 products  ·  📤 upload  ·  📖 instructions]      [🛒 grey pill]
 *
 * Utility items on the right of Row A are individually outlined cards,
 * separated by short vertical dividers between them. Cart pill bleeds
 * to the right edge of the shell and is the same grey as the search btn.
 *
 * Tokens (matched from the screenshot):
 *   row-A bg          : #e9eef2
 *   row-A border      : #d8dee3
 *   nav row bg        : #ffffff
 *   util box border   : #d8dee3
 *   util text         : #4e7184
 *   util label strong : #1f2937
 *   logo "top"        : #4e7184
 *   logo "drop"       : #2dc270   (with subtle green underline curve)
 *   search border     : #d0d5dd
 *   search btn / cart : #a8b5be
 *   nav text          : #4e7184
 *   nav active        : #2dc270
 */

/* -----------------------------------------------------------
 * Header shell
 * ----------------------------------------------------------- */

.td-header {
	font-family: inherit;     /* Rubik via base.css */
	color: #4e7184;
	font-size: 14px;
}

.td-header__row-inner {
	display: flex;
	align-items: center;
	gap: 24px;
}

/* ---- Row A : tinted top strip ---- */

.td-header__row--top {
	background: #f2f6f9;
	margin-bottom: var(--td-rows-gap, 0);
}

.td-header__row--top .td-header__row-inner {
	min-height: 92px;
	padding: 16px 0;
}

.td-header__left {
	display: flex;
	align-items: center;
	gap: 24px;
	flex: 1;
	min-width: 0;
}

.td-header__right {
	display: flex;
	align-items: center;
	gap: 0;
	flex-shrink: 0;
}

/* ---- Row B : white nav strip ---- */

.td-header__row--nav {
	background: #f7f7f7;
	border-top: 1px solid #e4e7ea;
	border-bottom: 1px solid #e4e7ea;
}

.td-header__row--nav .td-header__row-inner {
	min-height: var(--td-nav-height, 60px);
	padding: 0;
}

/* -----------------------------------------------------------
 * Logo
 * ----------------------------------------------------------- */

.td-logo {
	display: inline-flex;
	align-items: center;
	color: inherit;
	text-decoration: none;
	flex-shrink: 0;
	transform: translateY(var(--td-logo-y-offset, 0));
}

.td-logo img {
	display: block;
	width: var(--td-logo-width, 180px);
	height: auto;
	max-height: 56px;
	object-fit: contain;
}

.td-logo--text {
	font-family: 'Rubik', sans-serif;
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
}

.td-logo__top  { color: #4e7184; }
.td-logo__drop { color: #2dc270; }

/* -----------------------------------------------------------
 * Search
 * ----------------------------------------------------------- */

.td-search {
	display: flex;
	align-items: stretch;
	width: var(--td-search-width, 380px);
	max-width: 100%;
	background: #fff;
	border: 1px solid #d0d5dd;
	border-radius: 6px;
	overflow: hidden;
	transition: border-color .15s, box-shadow .15s;
}

.td-search:focus-within {
	border-color: #4e7184;
	box-shadow: 0 0 0 2px rgba(78, 113, 132, 0.10);
}

.td-search__input {
	flex: 1;
	height: var(--td-search-height, 42px);
	padding: 0 14px;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 14px;
	color: #1f2937;
	outline: none;
}

.td-search__input::placeholder {
	color: #9ca3af;
}

.td-search__btn {
	width: var(--td-search-height, 42px);  /* keep button square */
	background: #afc3ce;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .15s;
}

.td-search__btn-icon {
	display: block;
	color: #fff;
}

.td-search__btn:hover {
	background: #4e7184;
}

.td-search__btn.is-disabled {
	background: #cdd5dc;
	cursor: not-allowed;
}

.td-search__btn.is-disabled:hover {
	background: #cdd5dc;
}

/* -----------------------------------------------------------
 * Utility items (Row A right) — outlined boxes with dividers
 * ----------------------------------------------------------- */

.td-util {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--td-icon-label-gap, 8px);
	height: 44px;
	padding: 0 var(--td-util-side-padding, 18px);
	color: #4e7184;
	text-decoration: none;
	font-size: var(--td-util-text-size, 13px);
	font-weight: 500;
	background: transparent;
	border: 0;
	transition: color .15s;
}

/* Vertical divider between utility items.
 * Rendered as an explicit element rather than a ::before pseudo so the
 * browser rasterizes every 1px line at the same subpixel position
 * regardless of whether the adjacent element is a link or a div. */
.td-util__divider {
	display: inline-block;
	width: 1px;
	height: 22px;
	background: #d6dce0;
	flex-shrink: 0;
	align-self: center;
}

.td-util:hover {
	color: #1f2937;
}

.td-util__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--td-util-icon-size, 20px);
	height: var(--td-util-icon-size, 20px);
	font-size: var(--td-util-icon-size, 16px);
	line-height: 1;
	transform: translateY(var(--td-util-icon-y, 0));
}

.td-util__icon--svg svg {
	display: block;
	width: 100%;
	height: 100%;
	color: currentColor;
}

.td-util__label {
	font-family: 'Rubik', sans-serif;
}

.td-util__label strong {
	color: #1f2937;
	font-weight: 600;
	margin-left: 2px;
}

.td-util--account {
	height: 44px;
	padding: 0 0 0 14px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.td-util--account .td-util__icon {
	color: #4e7184;
}

.td-util--account .td-util__label {
	color: #4e7184;
	font-weight: 500;
}

.td-util__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	margin-left: 4px;
	background: #2dc270;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	border-radius: 999px;
	font-family: 'Rubik', sans-serif;
}

/* Account dropdown */

.td-account-menu {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 6px;
	min-width: 200px;
	background: #fff;
	border: 1px solid #e4e7ea;
	border-radius: 8px;
	box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
	padding: 6px 6px 6px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .15s, transform .15s, visibility .15s;
	z-index: 100;
}

.td-util--account:hover .td-account-menu,
.td-util--account:focus-within .td-account-menu,
.td-util--account.is-open .td-account-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Language pill — segmented control sitting at the top of the menu.
   Cosmetic only; full i18n lands later. */
.td-account-menu__lang {
	display: flex;
	background: #f2f6f9;
	border-radius: 7px;
	padding: 3px;
	margin: 0 0 6px;
	gap: 2px;
}
.td-account-menu__lang-btn {
	flex: 1;
	background: transparent;
	border: 0;
	padding: 5px 0;
	font: 600 12px/1 'Rubik', sans-serif;
	color: #4e7184;
	border-radius: 5px;
	cursor: pointer;
	letter-spacing: 0.03em;
	transition: background-color .15s, color .15s, box-shadow .15s;
}
.td-account-menu__lang-btn.is-active {
	background: #ffffff;
	color: #1f2937;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}
.td-account-menu__lang-btn:hover:not(.is-active) {
	color: #1f2937;
}

.td-account-menu__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	color: #1f2937;
	font-size: 13px;
	border-radius: 5px;
	font-family: 'Rubik', sans-serif;
	transition: background-color .15s, color .15s;
	text-decoration: none;
}

.td-account-menu__item:hover {
	background: #f2f6f9;
	color: #1f2937;
}

/* Button variant — same look as the anchor variant, just resets
   the native <button> defaults. */
.td-account-menu__item--btn {
	width: 100%;
	background: transparent;
	border: 0;
	cursor: pointer;
	text-align: left;
}

.td-account-menu__icon {
	display: inline-flex;
	color: #4e7184;
	flex-shrink: 0;
}

/* -----------------------------------------------------------
 * Account-menu modal — base shell used by every menu-item
 * popup (Notifications first, more to come).
 * ----------------------------------------------------------- */
.td-acct-modal[hidden] { display: none; }
.td-acct-modal {
	position: fixed;
	inset: 0;
	z-index: 10001;  /* above the mobile drawer (10000) during the hand-off */
	display: flex;
	align-items: center;
	justify-content: center;
}
.td-acct-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(31, 41, 55, .55);
}
.td-acct-modal__card {
	position: relative;
	width: min(460px, calc(100vw - 24px));
	max-height: calc(100vh - 40px);
	overflow: auto;
	background: #ffffff;
	border: 1px solid #e4e7ea;
	border-radius: 7px;
	box-shadow: 0 6px 20px rgba(31, 41, 55, .08);
	display: flex;
	flex-direction: column;
}
.td-acct-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	border-bottom: 1px solid #e5e7eb;
}
.td-acct-modal__title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: #1f2937;
}
.td-acct-modal__close {
	background: none;
	border: 0;
	font-size: 22px;
	line-height: 1;
	color: #636c72;
	cursor: pointer;
	padding: 4px 8px;
}
.td-acct-modal__close:hover { color: #1f2937; }
.td-acct-modal__body {
	padding: 10px 18px 14px;
	font-size: 13px;
	line-height: 1.5;
	color: #4b5563;
}
.td-acct-modal__empty {
	margin: 0;
	padding: 16px;
	text-align: center;
	color: #7c7c7c;
	background: #f8fafc;
	border-radius: 7px;
}

body.td-acct-modal-open { overflow: hidden; }

/* Notifications modal is content-heavy; on mobile its card was filling almost
   the whole viewport. Cap it at 75% of the shared max-height (-25%). */
@media (max-width: 900px) {
	#td-acct-notifications-modal .td-acct-modal__card {
		max-height: calc(75vh - 30px);
	}
}

/* Notifications modal: keep the header pinned while the list scrolls. The
   card clips, the head stays fixed, and only the body scrolls. */
#td-acct-notifications-modal .td-acct-modal__card { overflow: hidden; }
#td-acct-notifications-modal .td-acct-modal__head { flex: 0 0 auto; }
#td-acct-notifications-modal .td-acct-modal__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

/* -----------------------------------------------------------
 * Primary nav (Row B left)
 * ----------------------------------------------------------- */

.td-nav {
	flex: 1;
	min-width: 0;
}

.td-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0;
}

.td-nav__item {
	position: relative;
}

.td-nav__divider {
	display: inline-block;
	width: 1px;
	height: 18px;
	background: #d6dce0;
	flex-shrink: 0;
	align-self: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.td-nav__link,
.td-nav .td-nav__list > li > a {
	display: inline-flex;
	align-items: center;
	gap: var(--td-icon-label-gap, 8px);
	padding: 0 var(--td-nav-link-side-padding, 22px);
	height: var(--td-nav-height, 60px);
	color: #4e7184;
	text-decoration: none;
	font-family: 'Rubik', sans-serif;
	font-size: var(--td-nav-text-size, 14px);
	font-weight: 400;
	transition: color .15s;
}

/* First nav link sits flush with the shell edge — no left padding. */
.td-nav .td-nav__list > li:first-child > a {
	padding-left: 0;
}

/* But the CTA, even when it's first, keeps its own internal padding so
 * its content stays centered inside the green pill. */
.td-nav .td-nav__list > li.td-nav__item--cta:first-child > a {
	padding-left: var(--td-nav-link-side-padding, 22px);
}

.td-nav__link:hover,
.td-nav__link.is-active,
.td-nav .td-nav__list > li > a:hover,
.td-nav .td-nav__list > li > a.is-active,
.td-nav .current-menu-item > a {
	color: #4e7184;
	/* Simulated bold — keeps the link's width identical to its non-bold
	 * state so the nav layout doesn't shift on hover. */
	text-shadow: 0 0 0.4px currentColor;
}

/* "Начать сотрудничество" CTA — green background, white bold, with a
 * subtle diagonal shine sweep that draws attention without being loud.
 *
 * On desktop the CTA's right edge must align exactly with where the search
 * input begins in Row A. Since the CTA sits flush with the shell's left
 * edge and the layout in Row A is [logo] + 24px gap + [search], we set
 * the CTA width to logo-width + 24px (computed in functions.php as
 * --td-cta-width). */
.td-nav__item--cta {
	position: relative;
}

@media (min-width: 901px) {
	.td-nav__item--cta {
		width: var(--td-cta-width, 204px);
		flex-shrink: 0;
	}
	.td-nav__item--cta > .td-nav__link,
	.td-nav__item--cta > a {
		width: 100%;
		justify-content: center;
		box-sizing: border-box;
	}
}

.td-nav__item--cta > .td-nav__link,
.td-nav__item--cta > a {
	position: relative;
	background: #2dc270;
	color: #ffffff !important;
	font-weight: 800;
	white-space: nowrap;
	overflow: hidden;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset,
		0 1px 3px rgba(45, 194, 112, 0.25);
	transition: background-color .2s, box-shadow .2s, transform .1s;
}

.td-nav__item--cta > .td-nav__link::before,
.td-nav__item--cta > a::before {
	content: '';
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(
		115deg,
		transparent 0%,
		rgba(255, 255, 255, 0) 30%,
		rgba(255, 255, 255, 0.42) 50%,
		rgba(255, 255, 255, 0) 70%,
		transparent 100%
	);
	transform: skewX(-18deg);
	animation: td-cta-shine 4.2s ease-in-out infinite;
	pointer-events: none;
}

@keyframes td-cta-shine {
	0%   { left: -60%; }
	60%  { left: 130%; }
	100% { left: 130%; }
}

.td-nav__item--cta > .td-nav__link:hover,
.td-nav__item--cta > a:hover {
	background: #1d9350;
	color: #ffffff !important;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset,
		0 2px 6px rgba(45, 194, 112, 0.35);
}

@media (prefers-reduced-motion: reduce) {
	.td-nav__item--cta > .td-nav__link::before,
	.td-nav__item--cta > a::before {
		animation: none;
		display: none;
	}
}

/* The CTA's own icon should render white. */
.td-nav__item--cta .td-nav__icon.td-emoji {
	filter: grayscale(1) brightness(0) invert(1);
}

/* Disabled / unclickable nav links (placeholder pages not built yet). */
.td-nav__link--disabled {
	cursor: default;
	pointer-events: none;
}

.td-nav__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--td-nav-icon-size, 16px);
	height: var(--td-nav-icon-size, 16px);
	font-size: var(--td-nav-icon-size, 16px);
	line-height: 1;
	transform: translateY(var(--td-nav-icon-y, 0));
}

.td-nav__icon--svg svg {
	display: block;
	width: 100%;
	height: 100%;
	color: currentColor;
}

/* -----------------------------------------------------------
 * Cart pill (Row B right)
 * ----------------------------------------------------------- */

.td-cart-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--td-cart-gap, 10px);
	width: auto;
	height: var(--td-nav-height, 60px);
	padding: 0 var(--td-cart-side-pad, 30px);
	background: #d7d9d9;
	color: #ffffff;
	font-family: 'Rubik', sans-serif;
	font-size: var(--td-cart-text-size, 14px);
	font-weight: 600;
	flex-shrink: 0;
	transition: background-color .15s, color .15s;
	box-sizing: border-box;
}

/* Empty (zero) state — fixed width set in the Customizer. */
.td-cart-pill--empty {
	width: var(--td-cart-empty-width, 130px);
	min-width: var(--td-cart-empty-width, 130px);
	pointer-events: none;
	cursor: default;
}

/* Filled state: green bg, sizes naturally to content with a balanced
 * fixed side padding — explicitly overriding the Customizer variable so
 * tweaks made to the empty-state padding don't leak through here. */
.td-cart-pill--filled {
	background: #2dc270;
	padding: 0 18px;
}

.td-cart-pill--filled:hover {
	background: #1d9350;
	color: #ffffff;
}

/* Disabled (e.g. on /checkout/): visually identical to the active
 * filled pill, but cursor and hover don't suggest clickability. */
.td-cart-pill[aria-disabled="true"] {
	cursor: default;
	pointer-events: none;
}
.td-cart-pill[aria-disabled="true"].td-cart-pill--filled:hover {
	background: #2dc270;
}

.td-cart-pill__icon,
.td-cart-pill__amount {
	color: #ffffff;
}

.td-cart-pill__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--td-cart-icon-size, 18px);
	height: var(--td-cart-icon-size, 18px);
	line-height: 1;
}

.td-cart-pill__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.td-cart-pill__icon {
	font-size: 18px;
	line-height: 1;
}

/* -----------------------------------------------------------
 * Modern emoji rendering — force the OS color emoji font so glyphs
 * land in the system's pre-rasterised emoji table (zero network
 * cost, fast paint).
 * ----------------------------------------------------------- */

.td-emoji {
	font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji',
		'Twemoji Mozilla', sans-serif;
	font-style: normal;
	font-weight: 400;
	-webkit-font-feature-settings: 'liga';
	font-feature-settings: 'liga';
	line-height: 1;
}

/* -----------------------------------------------------------
 * Responsive
 * ----------------------------------------------------------- */

@media (max-width: 900px) {
	.td-header__row--top .td-header__row-inner {
		flex-wrap: wrap;
		gap: 12px;
		min-height: auto;
		padding: 14px 16px;
	}

	.td-header__left {
		gap: 16px;
		flex: 1 1 100%;
		flex-wrap: wrap;
	}

	.td-search {
		flex: 1;
		min-width: 200px;
	}

	.td-header__right {
		flex: 1 1 100%;
		justify-content: flex-end;
	}

	.td-util__label {
		display: none;
	}

	.td-util--wallet .td-util__label {
		display: inline;          /* keep the balance number visible */
		font-size: 12px;
	}

	.td-header__row--nav .td-header__row-inner {
		padding: 0 16px;
		flex-wrap: wrap;
	}

	.td-cart-pill {
		margin-right: -16px;
		padding: 0 18px;
		height: 52px;
	}

	.td-nav__link {
		padding: 0 14px;
		font-size: 13px;
	}
}

@media (max-width: 600px) {
	.td-nav__label {
		display: none;            /* leave only emoji icons on phones */
	}

	.td-nav__link {
		padding: 0 12px;
		height: 52px;
	}
}

/* ============================================================
 * .td-bank — bank-details renderer used by:
 *   - /balance/ topup view (.tdrop-bank-box wraps it)
 *   - /my-orders/ report-payment modal (.td-report-modal__bank)
 *
 * Stacked layout: key on its own line, value + copy below, so a
 * narrow container (~300-360px) lays out cleanly.
 *
 *   Реквізити р/р              ← section head
 *      Отримувач:               ← key
 *      Іванов Іван  ⎘           ← value + copy on same line
 *      IBAN:
 *      UA...        ⎘
 *
 * Note row uses the same stacked pattern but no copy button (it's
 * informational free text, not a value to paste).
 * ============================================================ */

.td-bank {
	font-size: 13px;
	color: #1f2937;
	line-height: 1.45;
}
.td-bank__section + .td-bank__section { margin-top: 14px; }

.td-bank__head {
	font-size: 12px;
	font-weight: 600;
	color: #4e7184;
	margin-bottom: 8px;
}
/* "Або картка" — sits on the left, no centered-divider line */
.td-bank__head--alt {
	padding-top: 10px;
	border-top: 1px dashed #e4e7ea;
}

.td-bank__rows {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.td-bank__row {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.td-bank__key {
	color: #9ca3af;
	font-size: 11px;
	letter-spacing: .02em;
}
.td-bank__line {
	display: flex;
	align-items: center;
	gap: 6px;
}
.td-bank__val {
	font-weight: 600;
	color: #1f2937;
	word-break: break-all;
	font-size: 13px;
}
.td-bank__val--card     { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.td-bank__val--note {
	font-weight: 600;
	color: #1f2937;
	font-size: 13px;
}

.td-bank__empty {
	color: #9ca3af;
	font-style: italic;
	font-size: 12px;
}

/* ============================================================
 * Floating input-validation bubble — used by the global input
 * filters in footer.php (time, digits, card, IBAN, cyrillic).
 *
 * Anchored to the input by absolute positioning + transform from
 * the inline script in footer.php. Default state hidden; toggles
 * .is-visible for ~1.5s on each failed keystroke / paste.
 * ============================================================ */

.td-input-bubble {
	position: absolute;
	z-index: 9999;
	padding: 6px 10px;
	background: #1f2937;
	color: #ffffff;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	border-radius: 6px;
	box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.18 );
	opacity: 0;
	transform: translate( -50%, calc( -100% + 6px ) );
	pointer-events: none;
	transition: opacity .15s ease, transform .15s ease;
}
.td-input-bubble::after {
	content: "";
	position: absolute;
	bottom: -5px;
	left: 50%;
	transform: translateX( -50% );
	width: 0; height: 0;
	border-left:  5px solid transparent;
	border-right: 5px solid transparent;
	border-top:   5px solid #1f2937;
}
.td-input-bubble.is-visible {
	opacity: 1;
	transform: translate( -50%, -100% );
}

/* ============================================================
 * .td-copy + .td-copy__btn — universal clipboard button.
 *
 * Renders next to any value the user might want to copy: bank
 * details on /balance/, recipient details in the admin payouts
 * table, etc. Click handling is global (footer.php) so any page
 * with these elements works without per-page wiring.
 *
 * (Previously these rules lived in my-orders.css and didn't load
 * on /balance/, so the buttons existed in DOM but were 0×0 px.)
 * ============================================================ */

.td-copy {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	vertical-align: middle;
}

.td-copy__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	border-radius: 4px;
	color: #afc3ce;
	cursor: pointer;
	transition: background .12s, color .12s, transform .08s;
	flex-shrink: 0;
}

.td-copy__btn svg {
	width: 12px;
	height: 12px;
	display: block;
}

.td-copy__btn:hover {
	background: #eef3f5;
	color: var( --td-tab-color, #4e7184 );
}

.td-copy__btn:active {
	transform: scale( 0.92 );
}

/* Just-copied confirmation — class toggled on by JS for ~1s. */
.td-copy__btn.is-copied {
	background: #d4f5e2;
	color: #1d6f3d;
}

/* ============================================================
 * Telegram login modal — opened by .td-util--account when the
 * user is logged out. Drives the bot deeplink + polling flow.
 * ============================================================ */
.td-tg-login-modal[hidden] { display: none; }
.td-tg-login-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.td-tg-login-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(31, 41, 55, .55);
}
.td-tg-login-modal__card {
	position: relative;
	width: min(420px, calc(100vw - 24px));
	background: #ffffff;
	border-radius: 10px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
	padding: 28px 24px 22px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.td-tg-login-modal__close {
	position: absolute;
	top: 8px;
	right: 10px;
	background: none;
	border: 0;
	font-size: 22px;
	line-height: 1;
	color: #636c72;
	cursor: pointer;
	padding: 4px 8px;
}
.td-tg-login-modal__close:hover { color: #1f2937; }
.td-tg-login-modal__icon {
	color: #2dc270;
	margin-bottom: 8px;
}
.td-tg-login-modal__title {
	margin: 0 0 10px;
	font-size: 17px;
	font-weight: 700;
	color: #1f2937;
}
.td-tg-login-modal__hint {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.5;
	color: #4b5563;
	max-width: 320px;
}
.td-tg-login-modal__hint--err { color: #b42318; }
.td-tg-login-modal__spinner {
	width: 32px;
	height: 32px;
	border: 3px solid #e4e7ea;
	border-top-color: #2dc270;
	border-radius: 50%;
	margin: 0 auto 14px;
	animation: td-tg-spin .85s linear infinite;
}
@keyframes td-tg-spin { to { transform: rotate(360deg); } }
.td-tg-login-modal__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 22px;
	border-radius: 8px;
	background: #2dc270;
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background .12s;
}
.td-tg-login-modal__cta:hover { background: #25a861; color: #ffffff; text-decoration: none; }

body.td-tg-login-open { overflow: hidden; }

/* ============================================================
 * Center-screen feedback toast — login (success/green) and
 * logout (info/red). Modern, minimal, matches site design tokens.
 * ============================================================ */
.td-feedback-toast[hidden] { display: none; }
.td-feedback-toast {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.td-feedback-toast__card {
	background: #ffffff;
	border: 1px solid var( --td-card-border, #e4e7ea );
	border-radius: 7px;
	box-shadow: 0 6px 20px rgba(31, 41, 55, .08);
	padding: 18px 24px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	transform: translateY(6px);
	opacity: 0;
	transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .25s;
}
.td-feedback-toast.is-open .td-feedback-toast__card {
	transform: translateY(0);
	opacity: 1;
}

.td-feedback-toast__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.td-feedback-toast--success .td-feedback-toast__icon { color: #2dc270; }
.td-feedback-toast--info    .td-feedback-toast__icon { color: #e5484d; }

.td-feedback-toast__title {
	font-size: 14px;
	font-weight: 600;
	color: #1f2937;
	line-height: 1.4;
}

/* ============================================================
 * Notifications modal — list of toggleable Telegram scenarios.
 * Each row: label on the left, iOS-style switch on the right.
 * ============================================================ */
.td-acct-notif-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.td-acct-notif-loading {
	padding: 16px;
	text-align: center;
	color: #7c7c7c;
	font-size: 13px;
}
.td-acct-notif-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	padding: 8px 4px;
	border-bottom: 1px solid #f1f5f9;
}
.td-acct-notif-row:last-child { border-bottom: 0; }
.td-acct-notif-text {
	flex: 1;
	min-width: 0;
}
.td-acct-notif-label {
	font-size: 13px;
	font-weight: 600;
	color: #1f2937;
	line-height: 1.3;
}
.td-acct-notif-desc {
	margin-top: 2px;
	font-size: 11.5px;
	color: #636c72;
	line-height: 1.4;
}
.td-acct-notif-lock {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 24px;
	color: #afc3ce;
	cursor: default;
}

/* iOS-style switch */
.td-switch {
	position: relative;
	display: inline-block;
	flex-shrink: 0;
	width: 40px;
	height: 24px;
	cursor: pointer;
}
.td-switch input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	margin: 0;
}
.td-switch__track {
	position: absolute;
	inset: 0;
	background: #e4e7ea;
	border-radius: 999px;
	transition: background-color .2s;
}
.td-switch__thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	background: #ffffff;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .15);
	transition: transform .2s;
}
.td-switch input:checked + .td-switch__track {
	background: #2dc270;
}
.td-switch input:checked + .td-switch__track .td-switch__thumb {
	transform: translateX(16px);
}
.td-switch input:focus-visible + .td-switch__track {
	box-shadow: 0 0 0 2px rgba(45, 194, 112, .25);
}

/* ============================================================
 * Wishlist modal — wider variant + product table layout.
 * ============================================================ */
.td-acct-modal__card--wide {
	max-width: 680px;
}
.td-acct-wishlist-body {
	min-height: 100px;
}
.td-acct-wishlist-list {
	display: flex;
	flex-direction: column;
}
.td-acct-wishlist-row {
	display: grid;
	grid-template-columns: 56px 1fr auto auto 30px;
	gap: 14px;
	align-items: center;
	padding: 10px 4px;
	border-bottom: 1px solid #f1f5f9;
}
.td-acct-wishlist-row:last-child { border-bottom: 0; }
.td-acct-wishlist-thumb {
	display: block;
	width: 56px;
	height: 56px;
	border-radius: 6px;
	overflow: hidden;
	background: #f2f6f9;
	flex-shrink: 0;
}
.td-acct-wishlist-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.td-acct-wishlist-thumb--empty {
	width: 100%;
	height: 100%;
	background:
		linear-gradient(45deg, #f1f5f9 25%, transparent 25%) 0 0/12px 12px,
		linear-gradient(-45deg, #f1f5f9 25%, transparent 25%) 0 0/12px 12px,
		#f8fafc;
}
.td-acct-wishlist-title {
	font-size: 12.5px;
	font-weight: 600;
	color: #374151;
	line-height: 1.35;
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
}
.td-acct-wishlist-title:hover { text-decoration: underline; color: #1f2937; }
.td-acct-wishlist-price {
	font-size: 13px;
	font-weight: 700;
	color: #2dc270;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.td-acct-wishlist-stock {
	font-size: 11.5px;
	white-space: nowrap;
}
.td-acct-wishlist-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	background: transparent;
	border: 1px solid #e4e7ea;
	border-radius: 5px;
	color: #afc3ce;
	cursor: pointer;
	transition: color .12s, border-color .12s, background-color .12s;
}
.td-acct-wishlist-remove:hover {
	color: #e5484d;
	border-color: #e5484d;
	background: #fff;
}
.td-acct-wishlist-remove:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 560px) {
	.td-acct-wishlist-row {
		grid-template-columns: 56px 1fr 30px;
		grid-template-areas:
			"thumb title remove"
			"thumb price stock";
		row-gap: 4px;
	}
	.td-acct-wishlist-thumb  { grid-area: thumb; }
	.td-acct-wishlist-title  { grid-area: title; }
	.td-acct-wishlist-price  { grid-area: price; }
	.td-acct-wishlist-stock  { grid-area: stock; text-align: right; }
	.td-acct-wishlist-remove { grid-area: remove; }
}

/* ============================================================
 * Heart button "in-wishlist" filled state.
 * ============================================================ */
.td-shop-card__wish.is-in {
	background: #e5484d;
	border-color: #e5484d;
	color: #ffffff;
}
.td-shop-card__wish.is-in svg {
	fill: #ffffff;
	stroke: #ffffff;
}
.td-shop-card__wish.is-in:hover {
	background: #c9333a;
	border-color: #c9333a;
	color: #ffffff;
}
.td-shop-card__wish.is-busy {
	opacity: .55;
	pointer-events: none;
}

/* ============================================================
 * First-add coachmark — anchored to the account icon, fades in
 * and slides up. Auto-dismisses after a few seconds.
 * ============================================================ */
.td-wishlist-coach {
	position: absolute;
	z-index: 9999;
	width: 260px;
	background: #1f2937;
	color: #ffffff;
	border-radius: 8px;
	padding: 12px 14px;
	font-size: 12.5px;
	line-height: 1.45;
	box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
	opacity: 0;
	transform: translateY( -6px );
	transition: opacity .25s ease, transform .25s ease;
	pointer-events: none;
}
.td-wishlist-coach.is-visible {
	opacity: 1;
	transform: translateY( 0 );
}
.td-wishlist-coach__arrow {
	position: absolute;
	top: -6px;
	left: calc(50% - 6px);
	width: 12px;
	height: 12px;
	background: #1f2937;
	transform: rotate(45deg);
	border-radius: 2px;
}
.td-wishlist-coach__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.td-wishlist-coach__body strong {
	font-size: 13px;
	font-weight: 700;
}
.td-wishlist-coach__body span {
	color: #d1d5db;
}

/* Subtle pulse on the account icon while the coachmark is visible
 * — emphasizes "look here" without yelling. */
@keyframes td-util-pulse-kf {
	0%   { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.55); }
	70%  { box-shadow: 0 0 0 14px rgba(229, 72, 77, 0);   }
	100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0);     }
}
.td-util--pulse {
	border-radius: 50%;
	animation: td-util-pulse-kf 1.4s ease-out infinite;
}

/* ============================================================
 * Stats modal — tenure statement line + 2×3 tile grid.
 * ============================================================ */
.td-acct-stats-body {
	min-height: 100px;
}
.td-acct-stats-line {
	margin: 0 0 14px;
	padding: 10px 14px;
	background: #f8fafc;
	border-radius: 7px;
	font-size: 13px;
	color: #1f2937;
	line-height: 1.5;
}
.td-acct-stats-line strong { color: #1f2937; font-weight: 700; }
.td-acct-stats-picker {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
}
.td-acct-stats-picker__label {
	font-size: 12px;
	color: #4e7184;
	font-weight: 600;
}
.td-acct-stats-picker__select {
	flex: 1;
	max-width: 240px;
	padding: 6px 10px;
	font-size: 13px;
	color: #1f2937;
	background: #ffffff;
	border: 1px solid #e4e7ea;
	border-radius: 7px;
	line-height: 1.35;
	cursor: pointer;
}
.td-acct-stats-picker__select:focus {
	outline: none;
	border-color: #4e7184;
	box-shadow: 0 0 0 2px rgba(78, 113, 132, .15);
}
.td-acct-stats-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 10px;
}
.td-acct-stats-tile {
	background: #ffffff;
	border: 1px solid #e4e7ea;
	border-radius: 7px;
	padding: 14px 12px 12px;
	text-align: left;
}
.td-acct-stats-tile__value {
	font-size: 18px;
	font-weight: 700;
	color: #1f2937;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.td-acct-stats-tile__label {
	margin-top: 4px;
	font-size: 11.5px;
	color: #4e7184;
	line-height: 1.3;
}

@media (max-width: 560px) {
	.td-acct-stats-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

/* ============================================================
 * Guest-mode styling.
 *
 * Body class .td-is-guest applies these. Visually disables
 * known interactive controls so guests see them but they look
 * unavailable. Combined with the guest-mode.js click handler,
 * any attempted use triggers the tooltip.
 * ============================================================ */
.td-is-guest {
	/* Block accidental text selection across non-input content. */
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
.td-is-guest input,
.td-is-guest textarea,
.td-is-guest [contenteditable] {
	-webkit-user-select: text;
	-moz-user-select: text;
	user-select: text;
}
.td-is-guest img {
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
	pointer-events: none; /* gallery enlarge clicks too */
}

/* Same selection / image blocking for negative-balance droppers.
 * They get the same look-but-don't-take treatment as guests until
 * they top up. Form fields stay selectable so they can still type
 * into the top-up form, search, etc. */
.td-balance-locked {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
.td-balance-locked input,
.td-balance-locked textarea,
.td-balance-locked [contenteditable] {
	-webkit-user-select: text;
	-moz-user-select: text;
	user-select: text;
}
.td-balance-locked img {
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
	pointer-events: none;
}

/* Always-on protection for product-card images — applies to both
 * logged-in users AND guests. Blocks drag-to-desktop saving and
 * works with the JS contextmenu handler that suppresses the
 * "save image" right-click menu. */
.td-shop-card__img,
.td-shop-card__img img {
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
	-webkit-touch-callout: none;
}

/* Restore pointer-events on images that ARE buttons themselves
 * (rare — most galleries put click on the wrapper). */
.td-is-guest .td-shop-card__link img {
	pointer-events: none;
}

/* Visually disable known interactive controls — guests AND
 * balance-locked droppers share the same muted styling. */
.td-is-guest .td-shop-card__wish,
.td-is-guest .td-product__cta:not(.is-disabled),
.td-is-guest .td-copy-btn,
.td-is-guest .td-product-panel__copy,
.td-is-guest .td-photos__btn,
.td-is-guest .td-photos__btn--download,
.td-is-guest [data-guest-block],
.td-balance-locked .td-shop-card__wish,
.td-balance-locked .td-product__cta:not(.is-disabled),
.td-balance-locked .td-copy-btn,
.td-balance-locked .td-product-panel__copy,
.td-balance-locked .td-photos__btn,
.td-balance-locked .td-photos__btn--download,
.td-balance-locked [data-guest-block] {
	opacity: .55;
	cursor: not-allowed !important;
	filter: grayscale(.4);
}
.td-is-guest .td-shop-card__wish:hover,
.td-is-guest .td-product__cta:hover,
.td-is-guest .td-copy-btn:hover,
.td-is-guest .td-product-panel__copy:hover,
.td-is-guest .td-photos__btn:hover,
.td-balance-locked .td-shop-card__wish:hover,
.td-balance-locked .td-product__cta:hover,
.td-balance-locked .td-copy-btn:hover,
.td-balance-locked .td-product-panel__copy:hover,
.td-balance-locked .td-photos__btn:hover {
	opacity: .55;
}

/* ============================================================
 * Guest tooltip — anchored to cursor on blocked actions.
 * ============================================================ */
.td-guest-tip {
	position: absolute;
	z-index: 100000;
	max-width: 280px;
	padding: 10px 14px;
	background: #1f2937;
	color: #ffffff;
	border-radius: 7px;
	font-size: 12.5px;
	line-height: 1.45;
	box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22);
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity .18s ease, transform .18s ease;
	pointer-events: none;
}
.td-guest-tip.is-measuring {
	opacity: 0;
	visibility: hidden;
}
.td-guest-tip.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.td-guest-tip__arrow {
	position: absolute;
	bottom: -5px;
	left: calc(50% - 5px);
	width: 10px;
	height: 10px;
	background: #1f2937;
	transform: rotate(45deg);
	border-radius: 1.5px;
}
.td-guest-tip.is-below .td-guest-tip__arrow {
	bottom: auto;
	top: -5px;
}
.td-guest-tip__body { position: relative; z-index: 1; }

/* Tooltip CTA — used by balance-locked tooltips to give users a
 * one-click path to /balance/#tab=topup. The tip is normally
 * pointer-events:none for cursor-tracking; when the action
 * is shown we restore pointer-events so the link is clickable. */
.td-guest-tip__action {
	position: relative;
	z-index: 1;
	margin-top: 8px;
}
.td-guest-tip:has(.td-guest-tip__action:not([hidden])) {
	pointer-events: auto;
}
.td-guest-tip__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	padding: 8px 12px;
	background: #2dc270;
	color: #ffffff !important;
	border-radius: 5px;
	font-size: 11.5px;
	font-weight: 600;
	text-decoration: none !important;
	transition: background-color .12s;
}
.td-guest-tip__cta:hover {
	background: #25a861;
	color: #ffffff !important;
	text-decoration: none !important;
}

/* ============================================================
 * Ghost pages — /my-orders/ and /balance/ when guest.
 *
 * The toolbar renders normally. The table body is a blurred
 * skeleton with a centered call-to-action overlay.
 * ============================================================ */
.td-ghost {
	position: relative;
	pointer-events: none;
	user-select: none;
	/* Cap the height so very long underlying tables don't push the
	 * centered overlay below the fold. The blurred content beneath
	 * is purely decorative, so clipping it is fine. */
	max-height: 380px;
	overflow: hidden;
}
.td-ghost > *:not(.td-ghost__overlay) {
	filter: blur(2.4px);
	opacity: .55;
}
.td-ghost::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg, rgba(255,255,255,0) 0%, rgba(248,250,252,.65) 60%, rgba(248,250,252,.95) 100% );
	z-index: 1;
	pointer-events: none;
}
.td-ghost__table {
	filter: blur(2.4px);
	opacity: .55;
}
.td-ghost__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
}
.td-ghost__card {
	background: #ffffff;
	border: 1px solid #e4e7ea;
	border-radius: 10px;
	box-shadow: 0 12px 30px rgba(15, 23, 42, .10);
	padding: 22px 28px;
	max-width: 360px;
	text-align: center;
}
.td-ghost__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #f2f6f9;
	color: #4e7184;
	margin-bottom: 10px;
}
.td-ghost__sub {
	margin: 0 0 14px;
	font-size: 13px;
	color: #4e7184;
	line-height: 1.4;
}
.td-ghost__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	background: #2dc270;
	color: #ffffff;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .12s;
}
.td-ghost__cta:hover {
	background: #25a861;
	color: #ffffff;
	text-decoration: none;
}
.td-ghost__cta--secondary {
	background: #ffffff;
	color: #4e7184;
	border: 1px solid #e4e7ea;
	margin-left: 6px;
}
.td-ghost__cta--secondary:hover {
	background: #f2f6f9;
	color: #1f2937;
}

/* Ghost toolbar — buttons still look usable (tabs are clickable
 * per spec) but search inputs and dropdowns get visually muted. */
.td-is-guest .td-orders__toolbar input,
.td-is-guest .td-orders__toolbar select,
.td-is-guest .tdrop-balance-toolbar input,
.td-is-guest .tdrop-balance-toolbar select,
.td-is-guest .tdrop-balance-toolbar button[type="submit"],
.td-balance-locked .td-orders__toolbar input,
.td-balance-locked .td-orders__toolbar select {
	opacity: .55;
	cursor: not-allowed !important;
}

/* ============================================================
 * Header wallet — negative balance is red.
 *
 * Mirrors .tdrop-mybal-amount.is-negative on the main /balance/
 * page so the header signal matches the page signal at a glance.
 * ============================================================ */
#td-util-wallet-amount.is-negative {
	color: #c0664a;
}

/* ============================================================
 * /instructions/ page.
 *
 * Reuses .td-shop shell (sticky left sidebar + main column from
 * shop.css). Page-specific rules: TOC link styling, intro card,
 * always-open accordion sections.
 *
 * Each .td-instructions__section has scroll-margin-top so deep
 * links / TOC clicks anchor below the sticky header instead of
 * tucking the section heading under it.
 * ============================================================ */
.td-instructions__main {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.td-instructions__intro {
	color: #1f2937;
	line-height: 1.6;
	font-size: 14.5px;
	/* Desktop grid placement — .td-shop is grid (200px sidebar | 1fr).
	 * Intro lives at .td-shop level (sibling of sidebar/main) so it
	 * can appear above the trigger on mobile via plain DOM order, and
	 * here we pin it to col 2 row 1 on desktop so the right column
	 * still shows: intro -> sections (vertically), with the sidebar
	 * spanning both rows on the left. On mobile .td-shop is block,
	 * grid-column is ignored, and DOM order takes over naturally. */
	grid-column: 2;
}
/* Sidebar spans both rows on desktop so its sticky behavior has room
 * to actually stick across the full scroll length of the page. Use
 * `span 2` (not `1 / -1`) because the row tracks are implicit — `-1`
 * only references explicit grid lines and would otherwise collapse. */
.td-instructions .td-shop__sidebar {
	grid-row: 1 / span 2;
}
/* Main column lives at col 2 row 2 — without this, grid auto-placement
 * would drop it into col 1 row 2 (the next free cell after the sidebar
 * in col 1 row 1), pushing the sections under the sidebar on desktop. */
.td-instructions__main {
	grid-column: 2;
}
.td-instructions__intro p { margin: 0 0 12px; }
.td-instructions__intro p:last-child { margin-bottom: 0; }

.td-instructions .td-shop__cats-head {
	font-size: 13px;
	font-weight: 600;
}

/* ============================================================
 * Sidebar TOC — nested, minimal.
 *
 * Section labels read like quiet section headers and DON'T change
 * appearance when active — they're just here to group their
 * subsections. The active subsection is the only thing that lights
 * up, with a left accent in the bluish teal palette.
 *
 * A subtle divider sits between section groups so the eye groups
 * the subsections under the right parent.
 * ============================================================ */
.td-instructions__toc {
	padding: 4px 0;
}
.td-instructions__toc-group {
	padding: 0 0 14px;
	margin-bottom: 14px;
	border-bottom: 1px solid #e4e7ea;
}
.td-instructions__toc-group:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}
.td-instructions__toc-section {
	display: block;
	padding: 4px 12px 8px;
	color: #1f2937;
	text-decoration: none;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.3;
	/* No text-transform — only the first letter of the admin's
	 * title is capitalized; the rest stays exactly as typed. */
}
.td-instructions__toc-section:hover,
.td-instructions__toc-section:focus {
	color: #1f2937;
	text-decoration: none;
}

.td-instructions__toc-subs {
	list-style: none;
	margin: 0;
	padding: 0;
}
.td-instructions__toc-subs li {
	margin: 0;
}
.td-instructions__toc-sub {
	display: block;
	padding: 7px 12px 7px 16px;
	color: #1f2937;
	text-decoration: none;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	border-left: 3px solid transparent;
	transition: color .12s, background-color .12s, border-color .12s;
}
.td-instructions__toc-sub:hover,
.td-instructions__toc-sub:focus {
	background: #f8fafc;
	color: #1f2937;
	text-decoration: none;
}
.td-instructions__toc-sub.is-active {
	border-left-color: #f59e0b;
	background: #fef3c7;
	color: #1f2937;
	font-size: 12px;
	font-weight: 500;
}

/* ============================================================
 * Section + subsection layout in the main column.
 *
 * Section heading is small and quiet — it's a label above its
 * subsection cards, not the focal point.
 *
 * Subsection card: body on the left, image (1:1, 7px radius) on
 * the far right. Image column is fixed width; body fluid.
 *
 * scroll-margin-top on both anchors so deep-links land below the
 * sticky header.
 * ============================================================ */
.td-instructions__section {
	background: #ffffff;
	border: 1px solid #e4e7ea;
	border-radius: 10px;
	overflow: hidden;
	scroll-margin-top: 120px;
}
.td-instructions__section-head {
	padding: 14px 22px;
	background: #f8fafc;
	border-bottom: 1px solid #e4e7ea;
}
.td-instructions__section-title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: #1f2937;
	line-height: 1.3;
	/* No text-transform — admins control the casing themselves. */
}
.td-instructions__subs {
	display: flex;
	flex-direction: column;
}
.td-instructions__sub {
	display: flex;
	align-items: flex-start;
	gap: 22px;
	padding: 18px 24px;
	/* Visible divider between subsections inside the same section card. */
	border-top: 1px solid #f1f5f9;
	scroll-margin-top: 120px;
	transition: background-color .15s;
}
.td-instructions__sub:first-child {
	border-top: 0;
}
.td-instructions__sub.is-active {
	background: #fef3c7;
}
.td-instructions__sub-content {
	flex: 1 1 auto;
	min-width: 0;
}
.td-instructions__sub-title {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 600;
	color: #1f2937;
	line-height: 1.35;
}
.td-instructions__sub-body {
	color: #1f2937;
	line-height: 1.65;
	font-size: 14px;
}
.td-instructions__sub-body p { margin: 0 0 10px; }
.td-instructions__sub-body p:last-child { margin-bottom: 0; }
.td-instructions__sub-body h3,
.td-instructions__sub-body h4 {
	color: #1f2937;
	margin: 14px 0 6px;
	font-weight: 700;
	font-size: 14px;
}
.td-instructions__sub-body ul,
.td-instructions__sub-body ol {
	padding-left: 20px;
	margin: 0 0 10px;
}
.td-instructions__sub-body li { margin: 3px 0; }
.td-instructions__sub-body a { color: #2dc270; text-decoration: underline; }
.td-instructions__sub-body a:hover { color: #25a861; }
.td-instructions__sub-body img {
	max-width: 100%;
	height: auto;
	border-radius: 7px;
}
.td-instructions__sub-body code {
	background: #f2f6f9;
	padding: 1px 6px;
	border-radius: 4px;
	font-size: .92em;
}

.td-instructions__sub-media {
	flex: 0 0 220px;
	width: 220px;
	aspect-ratio: 16 / 10;
	border-radius: 7px;
	overflow: hidden;
	background: #f2f6f9;
	border: 1px solid #e4e7ea;
}
/* When a title is present in the body column, push the image down
 * so its top edge aligns with the body text, not the title. The
 * offset matches the title's rendered height + bottom margin. */
.td-instructions__sub.has-title .td-instructions__sub-media {
	margin-top: 28px;
}
.td-instructions__sub-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 900px) {
	/* Intro now sits above the dropdown trigger on mobile (sibling
	 * of .td-shop__sidebar at the .td-shop level). Give it some
	 * breathing room before the trigger row starts. */
	.td-instructions__intro {
		margin-bottom: 16px;
	}
	.td-instructions__sub {
		flex-direction: column;
		gap: 14px;
	}
	/* Image goes full-width on mobile so it visually matches the
	 * sub-body's column width. The desktop 28px top offset (which
	 * aligned the image with the body text past the title) no
	 * longer applies in the stacked column layout. */
	.td-instructions__sub-media {
		flex: 0 0 auto;
		width: 100%;
		max-width: none;
		align-self: stretch;
		margin-top: 0;
	}
	.td-instructions__sub.has-title .td-instructions__sub-media {
		margin-top: 0;
	}
}

html { scroll-behavior: smooth; }

/* ============================================================
 * Front page (/) — banner + centered-title-with-rules + bubble grid.
 *
 * The layout: full-width banner (7px radius), centered titles with
 * a horizontal rule on each side, and a 2-column grid of "bubble"
 * cards. Each bubble pairs body content (left) with a circular
 * image (right).
 * ============================================================ */
.td-front {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 0 60px;
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.td-front__banner {
	border-radius: 7px;
	overflow: hidden;
	background: #f2f6f9;
}
.td-front__banner picture,
.td-front__banner img {
	display: block;
	width: 100%;
	height: auto;
}

.td-front__group {
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.td-front__title {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	color: #4e7184;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
}
.td-front__title::before,
.td-front__title::after {
	content: '';
	flex: 1 1 0;
	height: 1px;
	background: #e4e7ea;
}
.td-front__title-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	color: #4e7184;
	margin-right: -8px;
}
.td-front__title-text {
	flex: 0 0 auto;
	padding: 0 4px;
	text-align: center;
}

.td-front__bubbles {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 14px;
}
.td-front__bubble {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 16px;
	background: #ffffff;
	border: 1px solid #e4e7ea;
	border-radius: 7px;
	transition: box-shadow .15s, transform .15s;
	height: 100%;
}
.td-front__bubble:hover {
	box-shadow: 0 4px 14px rgba( 18, 28, 45, .06 );
	transform: translateY( -1px );
}
.td-front__bubble-content {
	flex: 1 1 auto;
	min-width: 0;
	order: 2;
}
.td-front__bubble-img {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	border-radius: 7px;
	overflow: hidden;
	background: #f2f6f9;
	border: 1px solid #e4e7ea;
	order: 1;
}
.td-front__bubble-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.td-front__bubble-title {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 700;
	color: #1f2937;
	line-height: 1.3;
}
.td-front__bubble-text {
	margin: 0;
	font-size: 14.5px;
	color: #4e7184;
	line-height: 1.5;
}

@media ( max-width: 760px ) {
	.td-front {
		padding: 0 0 48px;
		gap: 32px;
	}
	.td-front__title {
		font-size: 16px;
		gap: 12px;
	}
	.td-front__bubbles {
		grid-template-columns: 1fr;
	}
	.td-front__bubble {
		padding: 12px 14px;
	}
	.td-front__bubble-img {
		flex: 0 0 52px;
		width: 52px;
		height: 52px;
	}
	.td-front__banner.is-ghost {
		aspect-ratio: 2 / 1;
	}
}

/* ============================================================
 * Front page — ghost / placeholder states.
 *
 * Renders an empty-but-shaped homepage when admin hasn't filled
 * in the content yet. Banner becomes a soft gradient, bubble
 * slots stay in the grid but show muted skeleton lines.
 * ============================================================ */
.td-front__banner.is-ghost {
	background: linear-gradient( 135deg, #f2f6f9 0%, #e9eef2 50%, #f2f6f9 100% );
	aspect-ratio: 4 / 1;
}
.td-front__banner-ghost {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.td-front__banner-ghost-label {
	color: #afc3ce;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.td-front__bubble--ghost {
	border-style: dashed;
	background: #fbfcfd;
}
.td-front__bubble--ghost:hover {
	box-shadow: none;
	transform: none;
}
.td-front__bubble-img.is-ghost {
	background: linear-gradient( 135deg, #eef3f6, #e1e7eb );
	border-color: #e4e7ea;
}

/* ============================================================
 * "Розпочати співпрацю" CTA below the cooperation grid.
 *
 * Same green pill we use in the header nav, but as a centered
 * standalone button. Negative margin-top pulls it closer to the
 * cooperation section since the .td-front parent uses a 40px gap
 * by default.
 * ============================================================ */
.td-front__cta-wrap {
	display: flex;
	justify-content: center;
}
.td-front__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 56px;
	background: #2dc270;
	color: #ffffff !important;
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
	border-radius: 7px;
	box-shadow:
		0 1px 0 rgba( 255, 255, 255, .15 ) inset,
		0 2px 8px rgba( 45, 194, 112, .25 );
	transition: background-color .2s, box-shadow .2s, transform .1s;
}
.td-front__cta:hover,
.td-front__cta:focus {
	background: #25a861;
	color: #ffffff !important;
	box-shadow:
		0 1px 0 rgba( 255, 255, 255, .15 ) inset,
		0 4px 12px rgba( 45, 194, 112, .3 );
	text-decoration: none;
}
.td-front__cta:active {
	transform: translateY( 1px );
}

/* Full-width on mobile so the button spans the .td-shell gutter
 * rather than sitting as a fixed-padding pill in the middle. */
@media (max-width: 900px) {
	.td-front__cta-wrap {
		align-items: stretch;
	}
	.td-front__cta {
		display: flex;
		width: 100%;
		padding: 14px 16px;
		box-sizing: border-box;
	}
}

/* ============================================================
 * MOBILE HEADER + DRAWER (≤900px)
 *
 * Desktop is untouched. On mobile:
 *   Row 1 — hamburger | logo (centered) | cart icon (count only)
 *   Row 2 — full-width search bar
 *   Nav row + right cluster are hidden in their original location;
 *   their nodes get moved into the drawer by JS so they look and
 *   behave identically to desktop.
 *
 * The drawer itself is a positioned overlay; section slots inside
 * it use simple block layout so the moved nodes flow vertically.
 * We deliberately do NOT restyle the moved elements themselves —
 * .td-util, .td-nav__link, .td-account-menu__item all keep their
 * desktop appearance, with just a few horizontal→vertical layout
 * tweaks scoped to .td-mobile-drawer.
 * ============================================================ */

/* Hamburger + mobile cart + mobile search row — hidden on desktop. */
.td-header__hamburger,
.td-header__mobile-cart,
.td-header__row--search,
.td-header__row--mobile-cta {
	display: none;
}

@media ( max-width: 900px ) {
	/* Row 1 — three-column grid: hamburger | logo | cart icon. */
	.td-header__row--top .td-header__row-inner {
		display: grid;
		grid-template-columns: 44px 1fr 44px;
		align-items: center;
		gap: 8px;
		padding: 12px 16px;
		min-height: 72px;
	}
	.td-header__hamburger {
		display: inline-flex;
		align-items: center;
		/* Left-align the icon so it sits flush with the row's 16px gutter
		 * instead of being centered in the 44px touch target (which made
		 * it visually inset ~11px past the gutter). The 44×44 target is
		 * preserved for accessibility. */
		justify-content: flex-start;
		width: 44px;
		height: 44px;
		padding: 0;
		background: transparent;
		border: 0;
		color: #4e7184;
		cursor: pointer;
		grid-column: 1;
	}
	/* Slightly larger hamburger icon (was 22px via inline SVG attrs). */
	.td-header__hamburger svg {
		width: 24px;
		height: 24px;
	}

	/* Middle slot: logo only. The search input that lives in
	 * .td-header__left on desktop is hidden on mobile — it moves
	 * to its own row below. */
	.td-header__left {
		grid-column: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0;
		min-width: 0;
	}
	.td-header__left .td-search {
		display: none;
	}
	.td-header__left img { max-height: 40px; width: auto; }

	/* Right cluster on mobile is the cart icon. The desktop
	 * .td-header__right is hidden because JS has moved its
	 * children into the drawer. */
	.td-header__right { display: none; }

	/* Square (1:1) pill button mirroring the desktop .td-cart-pill:
	 * grey background when empty, green when it has items, white cart
	 * icon centered, 7px radius. A circular count badge hangs off the
	 * top-right corner. */
	.td-header__mobile-cart {
		grid-column: 3;
		justify-self: end;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		/* Same square size as the search submit button — both reference
		 * --td-search-height (42px fallback on mobile), so they match. */
		width: var(--td-search-height, 42px);
		height: var(--td-search-height, 42px);
		border-radius: 7px;
		position: relative;
		background: #d7d9d9;        /* empty — matches .td-cart-pill--empty */
		color: #ffffff;             /* white icon, like the desktop pill */
		text-decoration: none;
		transition: background-color .15s;
	}
	.td-header__mobile-cart svg {
		display: block;
		width: 21px;
		height: 21px;
	}
	/* Filled state — green, matches .td-cart-pill--filled. */
	.td-header__mobile-cart.has-items {
		background: #2dc270;
	}
	/* Empty cart isn't clickable, same as the desktop empty pill. */
	.td-header__mobile-cart[aria-disabled="true"] {
		pointer-events: none;
	}
	.td-header__mobile-cart-badge {
		position: absolute;
		top: -8px;
		right: -8px;
		min-width: 22px;
		height: 22px;
		padding: 0 6px;
		background: #2dc270;
		color: #ffffff;
		border: 2px solid #ffffff;  /* ring so the count reads on the green pill */
		border-radius: 999px;
		font-size: 12px;
		font-weight: 700;
		line-height: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}

	/* Row 2 — full-width search bar. Same surface + borders as the
	 * nav strip (.td-header__row--nav) so the header reads as one band. */
	.td-header__row--search {
		display: block;
		border-top: 1px solid #e4e7ea;
		border-bottom: 1px solid #e4e7ea;
		background: #f7f7f7;
	}
	.td-header__row--search .td-header__row-inner {
		padding: 8px 16px;
	}
	.td-header__row--search .td-search {
		display: flex;
		width: 100%;
	}
	.td-header__row--search .td-search__input {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* Nav row entirely hidden — its <ul> is now living in the drawer. */
	.td-header__row--nav { display: none; }

	/* Row 3 — mobile-only guest registration CTA.
	 * The <a> inside .td-nav__item--cta picks up the existing desktop
	 * pill styling (green bg, shine ::before, hover, shadow) for free
	 * — we only size it to fill the .td-shell gutter and centre the
	 * label. Markup renders only when the user is a guest. */
	.td-header__row--mobile-cta {
		display: block;
		background: #f7f7f7;
		border-bottom: 1px solid #e4e7ea;
	}
	.td-header__row--mobile-cta .td-header__row-inner {
		padding: 12px 16px;
	}
	.td-header__row--mobile-cta .td-nav__item--cta {
		display: block;
		width: 100%;
	}
	.td-header__row--mobile-cta .td-nav__item--cta > a {
		display: flex;
		width: 100%;
		height: 48px;
		padding: 0 16px;
		justify-content: center;
		align-items: center;
		font-family: 'Rubik', sans-serif;
		font-size: 14px;
		border-radius: 7px;
		box-sizing: border-box;
	}
}

/* ============================================================
 * DRAWER chrome — positioning, animation, body-scroll lock.
 * No restyling of the contents; the moved elements keep their
 * desktop look. We only add a couple of layout overrides for
 * horizontal-to-vertical reflow inside the panel.
 * ============================================================ */
.td-mobile-drawer {
	position: fixed;
	inset: 0;
	z-index: 10000;
}
.td-mobile-drawer[hidden] { display: none; }

.td-mobile-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 18, 28, 45, .45 );
	opacity: 0;
	transition: opacity .22s ease;
}
.td-mobile-drawer.is-open .td-mobile-drawer__backdrop { opacity: 1; }

.td-mobile-drawer__panel {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: min( 320px, 86vw );
	background: #ffffff;
	box-shadow: 4px 0 20px rgba( 18, 28, 45, .12 );
	transform: translateX( -102% );
	transition: transform .24s ease;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.td-mobile-drawer.is-open .td-mobile-drawer__panel { transform: translateX( 0 ); }

.td-mobile-drawer__head {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 10px 12px;
	border-bottom: 1px solid #e4e7ea;
}
.td-mobile-drawer__close {
	width: 36px;
	height: 36px;
	padding: 0;
	background: transparent;
	border: 0;
	color: #4e7184;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.td-mobile-drawer__section {
	padding: 8px 6px;
	border-bottom: 1px solid #e4e7ea;
}
.td-mobile-drawer__section:last-child { border-bottom: 0; }
.td-mobile-drawer__section:empty { display: none; }

/* ---- Horizontal → vertical layout reflow ----
 * The moved elements were styled to sit in a horizontal row on
 * desktop. Inside the drawer they need to stack. Visuals (color,
 * font, hover, badge, icon) are inherited from their existing
 * rules — we only adjust display/width/height. */

.td-mobile-drawer .td-util {
	display: flex;
	width: 100%;
	height: 44px;
	padding: 0 16px;
}

.td-mobile-drawer .td-nav__list {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
}
.td-mobile-drawer .td-nav__item { width: 100%; }
.td-mobile-drawer .td-nav__link {
	display: flex;
	width: 100%;
	height: 44px;
	padding: 0 16px;
}
.td-mobile-drawer .td-nav__divider { display: none; }

/* Hide the green «Розпочати співпрацю» CTA inside the drawer.
 * It still renders in the desktop nav row — only the sidebar copy
 * is suppressed. */
.td-mobile-drawer .td-nav__item--cta { display: none; }

/* Icon sizes inside the drawer.
 * On mobile the Customizer size tokens aren't defined (they live in a
 * desktop-only @media block), so util icons fall back to 20px and nav
 * icons to 16px — visibly mismatched. Normalize both to 20px so the
 * wallet/orders/login icons and the nav icons share one size and the
 * labels line up in a single column. */
.td-mobile-drawer .td-util__icon,
.td-mobile-drawer .td-nav__icon {
	width: 20px;
	height: 20px;
}

/* Restore item labels inside the drawer.
 *
 * Two legacy responsive rules predate the drawer and would otherwise
 * strip every moved item down to a bare icon:
 *   @media (max-width:900px) .td-util__label  { display:none }
 *   @media (max-width:600px) .td-nav__label   { display:none }
 * They were written for the old in-place shrinking header. Inside the
 * drawer we want the full label back. Scoped to .td-mobile-drawer so
 * the in-place desktop/tablet rules stay untouched, and the two-class
 * selector out-specifies the single-class media rules. */
.td-mobile-drawer .td-util__label,
.td-mobile-drawer .td-nav__label {
	display: inline;
}

/* Uniform 13px across all three drawer sections.
 * Most items are already 13px, but two legacy exceptions read 12px —
 * the wallet balance label (.td-util--wallet .td-util__label) and the
 * UA/RU segmented buttons (.td-account-menu__lang-btn). Pin everything
 * to 13px, scoped to the drawer so the in-place header is untouched. */
.td-mobile-drawer .td-util,
.td-mobile-drawer .td-util__label,
.td-mobile-drawer .td-nav__link,
.td-mobile-drawer .td-nav__label,
.td-mobile-drawer .td-account-menu__item,
.td-mobile-drawer .td-account-menu__lang-btn {
	font-size: 13px;
}

/* The account-menu is a floating dropdown on desktop. Inside the
 * drawer we want it to render inline as a normal block. */
.td-mobile-drawer .td-account-menu {
	position: static;
	display: block;
	visibility: visible;
	opacity: 1;
	transform: none;
	box-shadow: none;
	background: transparent;
	border: 0;
	padding: 6px 8px;
	min-width: 0;
	width: 100%;
}

/* Align the UA/RU segmented control with the other drawer items.
 * Util/nav items sit at outer = 6px (section padding); their icons
 * land at 22px (section pad 6 + item padding 16). To make the lang
 * pill's left edge sit at that same 22px column, we offset it from
 * its container by the difference:
 *   logged-in: lang lives inside .td-account-menu (padding 8px),
 *              so 8px + 8px margin = 16 → outer at 6 + 16 = 22.  ✓
 *   guest:     #td-guest-lang sits directly in the section,
 *              so 16px margin → outer at 6 + 16 = 22.            ✓ */
.td-mobile-drawer .td-account-menu__lang {
	margin: 0 8px 6px;
}

/* Guest UA/RU language switch.
 * Same control as the one inside the logged-in account menu, but
 * rendered standalone so guests get it too. Hidden everywhere by
 * default; only revealed once moved into the drawer (guests have no
 * account dropdown to host it on desktop). */
#td-guest-lang { display: none; }
.td-mobile-drawer #td-guest-lang {
	display: flex;
	margin: 2px 16px 10px;
}

body.td-no-scroll { overflow: hidden; }