/*
 * LitePrint public UI contract.
 * The calculator on the home page is the protected visual reference and is
 * intentionally excluded from broad content rules in this file.
 */

:root {
	--site-canvas: #ffffff;
	--site-surface: #fafafa;
	--site-surface-strong: #f5f5f5;
	--site-line: #dddddd;
	--site-ink: #111111;
	--site-ink-secondary: #333333;
	--site-muted: #666666;
	--site-brand: #f68b1e;
	--site-primary: #ffa742;
	--site-primary-hover: #ff9a2f;
	--site-selected: #fff7ee;
	--site-success: #2e7d32;
	--site-error: #b42318;
	--site-radius: 4px;
	--site-radius-modal: 14px;
	--site-radius-pill: 999px;
	--site-control-height: 44px;
	--site-shadow-primary: 0 10px 18px rgba(255, 167, 66, .28);
	--site-focus-ring: 0 0 0 3px rgba(246, 139, 30, .22);
	--site-motion-fast: 200ms cubic-bezier(.25, 1, .5, 1);
	--site-space-1: 4px;
	--site-space-2: 8px;
	--site-space-3: 12px;
	--site-space-4: 16px;
	--site-space-6: 24px;
	--site-space-8: 32px;
	--site-space-12: 48px;
	--site-space-16: 64px;
}

.site-public {
	background: var(--site-canvas);
	color: var(--site-ink);
	font-family: museo_sans_cyrl300, sans-serif;
}

.site-container,
.site-page {
	width: min(100% - 32px, 960px);
	margin-inline: auto;
}

.site-page {
	padding-block: var(--site-space-6) var(--site-space-16);
}

.site-prose,
.site-public :where(
	.knowledge-article__body,
	.portfolio-article-page__body,
	.privacy-page,
	.legal-page
) {
	max-width: 75ch;
	color: var(--site-ink-secondary);
	font-size: 16px;
	line-height: 1.58;
	text-wrap: pretty;
}

/* Content typography. The home calculator lives inside .page-main and is excluded. */
.site-public #content > .wrap:not(.page-main) h1,
.site-public #content .page-main--simple-calc h1,
.site-public #content .service-page h1,
.site-public #content .knowledge-page h1,
.site-public #content .page-portfolio h1,
.site-public #content .portfolio-article-page h1,
.site-public #content .consultant-page h1,
.site-public #content .layout-upload h1,
.site-public #content .error-page h1 {
	margin-top: 0;
	color: var(--site-brand);
	font: 32px/38px museo_sans_cyrl500, sans-serif;
	text-wrap: balance;
}

.site-public #home-seo-title {
	color: var(--site-brand);
	font: 32px/38px museo_sans_cyrl500, sans-serif;
}

.site-public #content > .wrap:not(.page-main) :where(h2, h3, h4),
.site-public #content .page-main--simple-calc :where(h2, h3, h4),
.site-public #content .service-page :where(h2, h3, h4),
.site-public #content .knowledge-page :where(h2, h3, h4),
.site-public #content .page-portfolio :where(h2, h3, h4),
.site-public #content .portfolio-article-page :where(h2, h3, h4),
.site-public #content .consultant-page :where(h2, h3, h4),
.site-public #content .layout-upload :where(h2, h3, h4),
.site-public #content .error-page :where(h2, h3, h4) {
	color: var(--site-ink);
	font-family: museo_sans_cyrl500, sans-serif;
	text-wrap: balance;
}

.site-public #content :where(.site-page, .service-page, .knowledge-page, .page-portfolio, .portfolio-article-page) h2 {
	font-size: 24px;
	line-height: 30px;
}

.site-public #content :where(.site-page, .service-page, .knowledge-page, .page-portfolio, .portfolio-article-page) p {
	overflow-wrap: anywhere;
}

.site-public #content :where(.site-page, .service-page, .knowledge-page, .page-portfolio, .portfolio-article-page) a:not([class]),
.site-link {
	color: var(--site-brand);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.site-public #content :where(.site-page, .service-page, .knowledge-page, .page-portfolio, .portfolio-article-page) a:not([class]):hover,
.site-link:hover {
	color: var(--site-primary-hover);
}

/* Reusable components for current and future pages. */
.site-button,
.site-button-primary,
.site-button-secondary,
.site-button-text,
.site-button-icon {
	display: inline-flex;
	min-height: var(--site-control-height);
	align-items: center;
	justify-content: center;
	gap: var(--site-space-2);
	padding: 0 var(--site-space-4);
	border-radius: var(--site-radius);
	font: 15px/1 museo_sans_cyrl500, sans-serif;
	text-decoration: none;
	cursor: pointer;
	transition: color var(--site-motion-fast), background-color var(--site-motion-fast), border-color var(--site-motion-fast), box-shadow var(--site-motion-fast), transform var(--site-motion-fast);
}

.site-button-primary {
	border: 1px solid var(--site-primary);
	background: var(--site-primary);
	box-shadow: var(--site-shadow-primary);
	color: #fff;
}

.site-button-primary:hover {
	border-color: var(--site-primary-hover);
	background: var(--site-primary-hover);
	color: #fff;
}

.site-button-primary:active {
	transform: translateY(1px);
}

.site-button-secondary {
	border: 1px solid var(--site-line);
	background: var(--site-canvas);
	color: var(--site-ink);
	transition: none;
}

.site-button-secondary:hover,
.site-button-secondary:focus,
.site-button-secondary:focus-visible,
.site-button-secondary:active {
	border-color: var(--site-primary);
	background: var(--site-primary);
	color: #fff;
	transform: none;
}

.site-button-text,
.site-button-icon {
	border: 0;
	background: transparent;
	color: var(--site-brand);
}

.site-button-icon {
	width: var(--site-control-height);
	padding: 0;
}

.site-card,
.site-panel,
.site-callout {
	border: 1px solid var(--site-line);
	border-radius: var(--site-radius);
	background: var(--site-canvas);
}

.site-card,
.site-panel {
	padding: var(--site-space-4);
}

.site-panel,
.site-callout {
	background: var(--site-surface);
}

.site-callout {
	display: flex;
	gap: var(--site-space-3);
	padding: var(--site-space-4);
	color: var(--site-ink-secondary);
}

.site-callout > .material-symbols-outlined {
	flex: 0 0 auto;
	color: var(--site-brand);
	font-size: 20px;
}

.site-media,
.site-media img,
.site-public #content :where(.site-page, .service-page, .knowledge-page, .page-portfolio, .portfolio-article-page) img:not(.material-symbols-outlined) {
	border-radius: var(--site-radius);
}

.site-chip,
.site-filter {
	display: inline-flex;
	min-height: 36px;
	align-items: center;
	justify-content: center;
	padding: 6px 12px;
	border: 1px solid var(--site-line);
	border-radius: var(--site-radius-pill);
	background: var(--site-canvas);
	color: var(--site-ink-secondary);
	font: 13px/1.2 museo_sans_cyrl500, sans-serif;
}

.site-chip[aria-pressed="true"],
.site-filter[aria-current="true"],
.site-filter.is-active {
	border-color: var(--site-primary);
	background: var(--site-selected);
	color: var(--site-ink);
}

.site-details {
	border-block-end: 1px solid var(--site-line);
}

.site-details:first-child {
	border-block-start: 1px solid var(--site-line);
}

.site-details > summary {
	display: flex;
	min-height: 52px;
	align-items: center;
	justify-content: space-between;
	gap: var(--site-space-4);
	padding: var(--site-space-3) 0;
	color: var(--site-ink);
	font-family: museo_sans_cyrl500, sans-serif;
	cursor: pointer;
	list-style: none;
}

.site-details > summary::-webkit-details-marker {
	display: none;
}

.site-details > summary::after {
	width: 8px;
	height: 8px;
	flex: 0 0 auto;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	content: "";
	transform: rotate(45deg);
	transition: transform var(--site-motion-fast);
}

.site-details[open] > summary::after {
	transform: rotate(225deg);
}

.site-details > :not(summary) {
	padding: 0 0 var(--site-space-4);
}

.site-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--site-space-2);
	margin-bottom: var(--site-space-6);
	color: var(--site-muted);
	font-size: 13px;
	line-height: 1.4;
}

.site-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: grid;
	place-items: center;
	padding: var(--site-space-6);
}

.site-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(17, 17, 17, .58);
}

.site-modal__dialog {
	position: relative;
	width: min(100%, 720px);
	max-height: calc(100dvh - 48px);
	overflow: auto;
	padding: var(--site-space-6);
	border-radius: var(--site-radius-modal);
	background: var(--site-canvas);
	box-shadow: 0 24px 60px rgba(17, 17, 17, .2);
}

/* Existing action aliases. Protected calculator selectors are intentionally absent. */
.site-public :where(
	.service-button--primary,
	.actions-cta__btn--primary,
	.knowledge-button--primary,
	.knowledge-search button,
	.portfolio-cta__btn,
	.error-page__btn,
	.simple-calc-primary-btn,
	.designer-btn--primary,
	.consultant-order__btn,
	.consultant-entry-strip,
	.layout-upload__actions button,
	.layout-send-progress__close,
	.btn-send,
	.brief-next,
	.brief-submit
) {
	min-height: var(--site-control-height);
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	border: 1px solid var(--site-primary) !important;
	border-radius: var(--site-radius) !important;
	background: var(--site-primary) !important;
	box-shadow: var(--site-shadow-primary) !important;
	color: #fff !important;
	font-family: museo_sans_cyrl500, sans-serif;
	text-shadow: none;
}

.site-public :where(
	.service-button--primary,
	.actions-cta__btn--primary,
	.knowledge-button--primary,
	.knowledge-search button,
	.portfolio-cta__btn,
	.error-page__btn,
	.simple-calc-primary-btn,
	.designer-btn--primary,
	.consultant-order__btn,
	.consultant-entry-strip,
	.layout-upload__actions button,
	.layout-send-progress__close,
	.btn-send,
	.brief-next,
	.brief-submit
):hover {
	border-color: var(--site-primary-hover) !important;
	background: var(--site-primary-hover) !important;
	color: #fff !important;
}

.site-public :where(
	.service-button,
	.actions-cta__btn,
	.knowledge-button,
	.knowledge-search button,
	.portfolio-cta__btn,
	.error-page__btn,
	.simple-calc-primary-btn,
	.simple-calc-secondary-btn,
	.simple-calc-back-btn,
	.designer-btn,
	.consultant-order__btn,
	.layout-upload__actions button,
	.layout-send-progress__close,
	.btn-send,
	.brief-next,
	.brief-submit
) {
	min-height: var(--site-control-height);
	border-radius: var(--site-radius) !important;
	font-family: museo_sans_cyrl500, sans-serif;
}

/* Shared focus, state and icon language. */
.site-public :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid rgba(246, 139, 30, .32);
	outline-offset: 2px;
}

.site-public :where(button, input, select, textarea):disabled,
.site-public [aria-disabled="true"] {
	cursor: not-allowed;
	opacity: .62;
}

.site-public .material-symbols-outlined {
	font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}

.site-public :where(
	.footer-icon,
	.footer-legal-icon,
	.cookie-banner__icon,
	.messenger-launcher__icon,
	.service-page .material-symbols-outlined,
	.knowledge-page .material-symbols-outlined,
	.consultant-page .material-symbols-outlined
) {
	font-size: 20px;
	line-height: 1;
}

/* Existing content blocks: normalize without introducing extra wrappers. */
.site-public :where(
	.classic-card,
	.envelope-card,
	.about-card,
	.actions-card,
	.service-card-grid article,
	.service-benefits article,
	.service-receive,
	.service-local,
	.service-hero-offer,
	.service-promo-grid article,
	.knowledge-card,
	.knowledge-category,
	.knowledge-category-card,
	.knowledge-related,
	.knowledge-search,
	.error-page,
	.privacy-block,
	.legal-block,
	.designer-wrap,
	.designer-panel,
	.designer-stage,
	.designer-mini-guide,
	.designer-toolbar,
	.designer-template-card,
	.designer-font-preview,
	.consultant-entry-strip,
	.consultant-card,
	.consultant-order,
	.consultant-suggestion,
	.simple-calc-panel,
	.simple-calc-pro,
	.simple-calc-subsection,
	.simple-calc-card,
	.simple-calc-note,
	.layout-upload__form,
	.layout-upload__aside,
	.home-seo,
	.home-seo__card,
	.home-reviews__card,
	.reviews-card,
	.requisites-bank,
	.contacts-map,
	.contacts-director,
	.privacy-page__intro,
	.privacy-block,
	.page-help .help-card,
	.page-malotirazh .malotirazh-card,
	.page-help-checker .help-checker__panel,
	.page-help-checker .help-checker__dropzone,
	.page-help-checker .help-checker__preview-wrap,
	.page-help-checker .help-checker__preview-stage canvas,
	.page-help-checker .help-checker__overlay,
	.page-help-checker .help-checker__size-alert,
	.page-help-checker .help-checker__result-item,
	.page-help-checker .help-checker__tip-bubble
) {
	border-radius: var(--site-radius) !important;
}

.site-public :where(
	.classic-note,
	.envelope-note,
	.about-note,
	.actions-note,
	.portfolio-modal__article-body blockquote,
	.portfolio-article-page__body blockquote,
	.simple-calc-note
) {
	padding: var(--site-space-4);
	border: 1px solid var(--site-line);
	border-radius: var(--site-radius);
	background: var(--site-surface);
	color: var(--site-ink-secondary);
}

.site-public :where(
	.service-hero__media,
	.service-portfolio-grid a,
	.service-portfolio-grid img,
	.knowledge-article__media,
	.knowledge-article__media img,
	.portfolio-card__image,
	.portfolio-card__image img,
	.portfolio-article-page__media img,
	.error-page__image,
	.home-reviews__iframe,
	.privacy-page__figure img
) {
	border-radius: var(--site-radius) !important;
}

/* FAQ is a flat disclosure list, not a grid of floating cards. */
.site-public :where(.faq-list, .knowledge-faq, .service-faq, .actions-faq, .page-help .help-faq) {
	border-top: 1px solid var(--site-line);
}

.site-public :where(.faq-item, .knowledge-faq details, .service-faq details, .actions-faq__item, .page-help .help-faq__item) {
	margin: 0 !important;
	border: 0 !important;
	border-bottom: 1px solid var(--site-line) !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.site-public :where(.actions-faq, .page-help .help-faq) {
	display: block;
}

.site-public :where(.actions-faq__item, .page-help .help-faq__item) {
	padding: var(--site-space-4) 2px !important;
}

.site-public :where(.faq-item__question, .faq-item summary, .knowledge-faq summary, .service-faq summary) {
	min-height: 52px;
	padding: 12px 0 !important;
	color: var(--site-ink) !important;
	font-family: museo_sans_cyrl500, sans-serif;
}

/* Portfolio keeps pills only for filtering; all media follows the 4 px rule. */
.site-public .page-portfolio .portfolio-filter .promo-nav__link {
	border-radius: var(--site-radius-pill) !important;
}

.site-public .page-portfolio .portfolio-card__image {
	border-radius: var(--site-radius) !important;
	box-shadow: none;
}

.site-public .portfolio-modal__dialog {
	border-radius: var(--site-radius-modal) !important;
	box-shadow: 0 24px 60px rgba(17, 17, 17, .2);
}

.site-public .portfolio-modal__image {
	border-radius: var(--site-radius) !important;
	box-shadow: none;
}

/* Product/content rows replace the feeling of repeated ornamental card triples. */
.site-public :where(.classic-grid, .envelope-grid, .about-grid, .actions-grid) {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	border-top: 1px solid var(--site-line);
}

.site-public :where(.classic-card, .envelope-card, .about-card, .actions-card) {
	display: grid;
	grid-template-columns: minmax(180px, .38fr) minmax(0, 1fr);
	gap: var(--site-space-4);
	padding: var(--site-space-4) 2px;
	border: 0;
	border-bottom: 1px solid var(--site-line);
	background: transparent;
}

.site-public :where(.classic-card-title, .envelope-card-title, .about-card-title, .actions-card-title) {
	align-items: flex-start;
	margin: 0;
}

.site-public .envelope-price {
	border-radius: var(--site-radius);
	box-shadow: none;
}

/* Tools retain functional canvas geometry while their chrome follows the system. */
.site-public .designer-template-dropdown__panel,
.site-public .designer-font-dropdown,
.site-public .consultant-overlay__dialog,
.site-public .consultant-modal__dialog,
.site-public .consultant-media-viewer__dialog,
.site-public .site-send-progress__dialog {
	border-radius: var(--site-radius-modal) !important;
}

.site-public :where(
	.designer-field input:not([type="color"]),
	.designer-field select,
	.designer-field textarea,
	.designer-template-toggle,
	.designer-font-toggle,
	.designer-icon-btn,
	.designer-stepper,
	.consultant-input,
	.consultant-order__input,
	.consultant-overlay__close,
	.consultant-overlay__clear,
	.simple-calc-primary-btn,
	.simple-calc-secondary-btn,
	.simple-calc-back-btn
) {
	border-radius: var(--site-radius) !important;
}

.site-public :where(.promo-nav__link, .simple-calc-hero__eyebrow, .simple-calc-panel__eyebrow, .simple-calc-preview__eyebrow, .simple-calc-review__eyebrow) {
	border-radius: var(--site-radius-pill);
}

/* Shell surfaces. */
.site-public .cookie-banner__inner,
.site-public .messenger-launcher__panel {
	border: 1px solid var(--site-line);
	border-radius: var(--site-radius);
	background: var(--site-canvas);
}

.site-public .cookie-banner button,
.site-public .messenger-launcher button {
	min-width: var(--site-control-height);
	min-height: var(--site-control-height);
	border-radius: var(--site-radius);
}

.site-public :where(.menu-toggle, .menu-item__main, .menu-submenu, .menu-submenu a, .header-quick-link, .qr-image img) {
	border-radius: var(--site-radius);
}

@media (max-width: 760px) {
	.site-public #content > .wrap:not(.page-main) h1,
	.site-public #content .page-main--simple-calc h1,
	.site-public #content .service-page h1,
	.site-public #content .knowledge-page h1,
	.site-public #content .page-portfolio h1,
	.site-public #content .portfolio-article-page h1,
	.site-public #content .consultant-page h1,
	.site-public #content .layout-upload h1,
	.site-public #content .error-page h1,
	.site-public #home-seo-title {
		font-size: 28px;
		line-height: 34px;
	}

	.site-modal {
		place-items: stretch;
		padding: 0;
	}

	.site-public :where(.portfolio-modal, .consultant-overlay, .consultant-modal, .consultant-media-viewer, .site-send-progress) {
		align-items: stretch;
		justify-content: stretch;
		padding: 0 !important;
	}

	.site-modal__dialog,
	.site-public .portfolio-modal__dialog,
	.site-public .consultant-overlay__dialog,
	.site-public .consultant-modal__dialog,
	.site-public .consultant-media-viewer__dialog,
	.site-public .site-send-progress__dialog {
		width: 100%;
		height: 100dvh;
		max-height: none;
		box-sizing: border-box;
		border-radius: 0 !important;
	}

	.site-public :where(.classic-card, .envelope-card, .about-card, .actions-card) {
		grid-template-columns: 1fr;
		gap: var(--site-space-2);
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-public *,
	.site-public *::before,
	.site-public *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
	}
}