/**
 * Shop v2 — global layer (Phase 0)
 * Circuit Atelier: base, mainarea, header, nav, footer, FAB
 * All rules scoped under .shop-v2
 */

/* ── Base ─────────────────────────────────────────────────────────────── */

.shop-v2 {
	--ms-header-utility-height: 3.25rem;

	color: var(--ms-ink);
	background-color: var(--ms-surface);
	font-family: var(--ms-font-ui);
	font-size: var(--ms-text-base);
	line-height: var(--ms-leading-normal);
	font-style: normal;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* v2 active marker — visible proof that CSS loaded */
.shop-v2::before {
	content: "";
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--ms-brand), var(--ms-spark));
	z-index: var(--ms-z-dev);
	pointer-events: none;
}

.shop-v2 h1,
.shop-v2 h2,
.shop-v2 h3,
.shop-v2 h4,
.shop-v2 h5,
.shop-v2 h6 {
	font-family: var(--ms-font-display);
	color: var(--ms-ink);
	font-weight: var(--ms-weight-normal);
	font-style: normal;
	line-height: var(--ms-leading-tight);
	text-wrap: balance;
}

.shop-v2 h1 {
	font-size: var(--ms-text-hero);
	letter-spacing: var(--ms-tracking-tight);
}

.shop-v2 h2 {
	font-size: var(--ms-text-display);
	letter-spacing: var(--ms-tracking-tight);
}

.shop-v2 p,
.shop-v2 li {
	max-width: var(--ms-prose-max);
}

.shop-v2 a {
	color: var(--ms-link);
	text-decoration: none;
	transition: color var(--ms-transition-fast);
}

.shop-v2 a:hover {
	color: var(--ms-link-hover);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.shop-v2 a:focus-visible {
	outline: none;
	box-shadow: var(--ms-focus-ring);
	border-radius: var(--ms-radius-xs);
}

.shop-v2 button,
.shop-v2 [role="button"],
.shop-v2 .button,
.shop-v2 .btn,
.shop-v2 input[type="submit"],
.shop-v2 button.next,
.shop-v2 .top-header__btn,
.shop-v2 .navigation__link,
.shop-v2 .service-link,
.shop-v2 .accessories__link,
.shop-v2 .fab-trigger,
.shop-v2 .fab-option,
.shop-v2 .location-btn,
.shop-v2 .menu-btn,
.shop-v2 .search-btn {
	cursor: pointer;
}

.shop-v2 .font-italic,
.shop-v2 .top-cta__title,
.shop-v2 .top-cta__input,
.shop-v2 .top-cta__btn,
.shop-v2 .service-link,
.shop-v2 .location-btn-title {
	font-style: normal;
}

/* ── Layout: mainarea + noise ───────────────────────────────────────────── */

.shop-v2 #mainarea {
	position: relative;
	background-color: var(--ms-surface) !important;
	background-image: none !important;
	min-width: 0;
	overflow-x: clip;
}

.shop-v2 #mainarea::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: var(--ms-noise-opacity);
	background-image: var(--ms-noise-image);
	background-repeat: repeat;
	background-size: 180px 180px;
	mix-blend-mode: multiply;
}

.shop-v2 #mainarea > * {
	position: relative;
	z-index: 1;
}

.shop-v2 .container,
.shop-v2 header .container,
.shop-v2 footer .container,
.shop-v2 .container.main_menu {
	width: min(100% - var(--ms-gutter-inline) * 2, var(--ms-content-max));
	max-width: var(--ms-content-max);
	margin-inline: auto;
	padding-inline: var(--ms-gutter-inline);
}

/* ── Glass utilities ──────────────────────────────────────────────────── */

.shop-v2 .ms-glass-light {
	background: var(--ms-glass-bg-light);
	backdrop-filter: var(--ms-backdrop);
	-webkit-backdrop-filter: var(--ms-backdrop);
	border: 1px solid var(--ms-glass-border-light);
}

.shop-v2 .ms-glass-dark {
	background: var(--ms-glass-bg-dark);
	backdrop-filter: var(--ms-backdrop);
	-webkit-backdrop-filter: var(--ms-backdrop);
	border: 1px solid var(--ms-glass-border-dark);
}

@supports not (backdrop-filter: blur(1px)) {
	.shop-v2 .ms-glass-light {
		background: var(--ms-surface);
	}

	.shop-v2 .ms-glass-dark {
		background: var(--ms-void);
	}
}

/* ── Header: utility bar ──────────────────────────────────────────────── */

.shop-v2 .header,
.shop-v2 #header {
	position: sticky;
	top: 0;
	z-index: var(--ms-z-sticky);
}

.shop-v2 .black_line {
	background: transparent;
}

.shop-v2 .header__top {
	background: var(--ms-void) !important;
	background: oklch(0.14 0.02 250 / 0.92) !important;
	backdrop-filter: var(--ms-backdrop);
	-webkit-backdrop-filter: var(--ms-backdrop);
	border-bottom: 1px solid var(--ms-border-on-dark);
	transition:
		background var(--ms-transition-base),
		box-shadow var(--ms-transition-base),
		border-color var(--ms-transition-base);
}

.shop-v2 .header__bottom {
	background: transparent;
}

.shop-v2 .top-header {
	padding-block: var(--ms-space-sm);
	align-items: center;
}

.shop-v2 .top-header__left,
.shop-v2 .top-header__left .color-white,
.shop-v2 .top-header__left a,
.shop-v2 .header__top .color-white {
	color: var(--ms-ink-on-dark);
}

.shop-v2 .top-header__left a:hover {
	color: #fff;
	text-decoration: none;
	opacity: 0.88;
}

.shop-v2 .top-header__btn {
	color: var(--ms-ink-on-dark);
	font-size: var(--ms-text-sm);
	font-weight: var(--ms-weight-medium);
	letter-spacing: var(--ms-tracking-normal);
	border-radius: var(--ms-radius-sm);
	padding: var(--ms-space-xs) var(--ms-space-sm);
	transition:
		background var(--ms-transition-fast),
		opacity var(--ms-transition-fast),
		transform var(--ms-transition-fast);
}

.shop-v2 .top-header__btn:hover {
	color: #fff;
	opacity: 1;
	text-decoration: none;
	background: var(--ms-glass-bg-dark);
	transform: translateY(calc(-1px * var(--ms-motion-scale, 1)));
}

.shop-v2 .top-header__btn img {
	max-width: 1.75rem;
	opacity: 0.92;
	filter: brightness(1.05);
}

.shop-v2 .top-header .lang-button a,
.shop-v2 .top-header ul.lang-button li a,
.shop-v2 .top-header__left ul li a {
	color: var(--ms-ink-muted-on-dark);
	font-size: var(--ms-text-xs);
	font-weight: var(--ms-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--ms-tracking-wide);
}

.shop-v2 .top-header .lang-button a:hover,
.shop-v2 .top-header__left ul li a:hover {
	color: #fff;
	text-decoration: none;
}

.shop-v2 .top-header .lang.active_lang_ru a span,
.shop-v2 .top-header .lang.active_lang_ua a span,
.shop-v2 .top-header__left .lang.active_lang_ru a,
.shop-v2 .top-header__left .lang.active_lang_ua a {
	color: #fff;
}

.shop-v2 .cart-btn span {
	background-color: var(--ms-urgent);
	font-weight: var(--ms-weight-semibold);
	box-shadow: var(--ms-shadow-xs);
}

/* ── Header: main navigation ────────────────────────────────────────── */

.shop-v2 .container.main_menu {
	position: sticky;
	top: var(--ms-header-utility-height);
	z-index: calc(var(--ms-z-sticky) - 1);
	padding-block: var(--ms-space-md);
	background: var(--ms-glass-bg-light);
	backdrop-filter: var(--ms-backdrop);
	-webkit-backdrop-filter: var(--ms-backdrop);
	border-bottom: 1px solid var(--ms-border);
	box-shadow: var(--ms-shadow-xs);
	transition:
		box-shadow var(--ms-transition-base),
		background var(--ms-transition-base);
}

.shop-v2 .navigation {
	gap: var(--ms-space-lg);
	padding-block: 0;
}

.shop-v2 .navigation__link {
	color: var(--ms-ink);
	font-size: var(--ms-text-sm);
	font-weight: var(--ms-weight-semibold);
	letter-spacing: var(--ms-tracking-wide);
	text-transform: uppercase;
	position: relative;
	padding-block: var(--ms-space-xs);
	transition: color var(--ms-transition-fast);
}

.shop-v2 .navigation__link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, var(--ms-brand), var(--ms-spark));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--ms-transition-base);
}

.shop-v2 .navigation__link:hover {
	color: var(--ms-brand);
	text-decoration: none;
}

.shop-v2 .navigation__link:hover::after {
	transform: scaleX(1);
}

.shop-v2 .main-logo img {
	max-height: 3rem;
	width: auto;
	transition: opacity var(--ms-transition-fast);
}

.shop-v2 .main-logo:hover img {
	opacity: 0.85;
}

.shop-v2 .drop_menu {
	border-radius: var(--ms-radius-md);
	border: 1px solid var(--ms-border);
	box-shadow: var(--ms-shadow-lg);
	background: var(--ms-surface);
	overflow: hidden;
}

.shop-v2 .drop_menu a {
	color: var(--ms-ink);
	font-size: var(--ms-text-sm);
}

.shop-v2 .drop_menu a:hover {
	color: var(--ms-brand);
	background: var(--ms-brand-muted);
	text-decoration: none;
}

/* Catalog header extras */
.shop-v2 .catalog-drop-down-wrap,
.shop-v2 .lg-view.catalog-drop-down-wrap {
	border-bottom: 1px solid var(--ms-border);
}

/* ── Info panel (ticker) ──────────────────────────────────────────────── */

.shop-v2 .info-panel__inner {
	margin-top: var(--ms-space-lg);
	background: var(--ms-brand-muted);
	border: 1px solid oklch(0.55 0.18 250 / 0.22);
	border-radius: var(--ms-radius-md);
	box-shadow: var(--ms-shadow-sm);
}

.shop-v2 .info-panel__text {
	color: var(--ms-ink);
	font-size: var(--ms-text-sm);
	line-height: var(--ms-leading-snug);
}

.shop-v2 .info-panel__link {
	color: var(--ms-brand);
	font-weight: var(--ms-weight-semibold);
}

.shop-v2 .info-panel__close {
	color: var(--ms-ink-muted);
	font-size: var(--ms-text-xl);
	line-height: 1;
	background: transparent;
	border: none;
	cursor: pointer;
	transition: color var(--ms-transition-fast);
}

.shop-v2 .info-panel__close:hover {
	color: var(--ms-ink);
}

/* ── Buttons (global pattern) ─────────────────────────────────────────── */

.shop-v2 .button,
.shop-v2 .btn,
.shop-v2 input[type="submit"],
.shop-v2 button.next {
	border-radius: var(--ms-radius-sm);
	font-family: var(--ms-font-ui);
	font-weight: var(--ms-weight-medium);
	transition:
		background var(--ms-transition-fast),
		color var(--ms-transition-fast),
		box-shadow var(--ms-transition-fast),
		transform var(--ms-transition-fast);
}

.shop-v2 .button:focus-visible,
.shop-v2 .btn:focus-visible,
.shop-v2 input[type="submit"]:focus-visible {
	outline: none;
	box-shadow: var(--ms-focus-ring);
}

/* ── Footer ───────────────────────────────────────────────────────────── */

.shop-v2 .footer,
.shop-v2 #footer {
	position: relative;
	padding: var(--ms-space-3xl) 0 var(--ms-space-2xl);
	background: var(--ms-void);
	color: var(--ms-ink-on-dark);
	border-top: 1px solid transparent;
}

.shop-v2 .footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		var(--ms-brand) 20%,
		var(--ms-spark) 50%,
		var(--ms-brand) 80%,
		transparent
	);
	opacity: 0.85;
}

.shop-v2 .footer p,
.shop-v2 .footer li,
.shop-v2 .footer a {
	color: var(--ms-ink-muted-on-dark);
	font-weight: var(--ms-weight-normal);
	font-style: normal;
	max-width: none;
}

.shop-v2 .footer a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.shop-v2 .footer .brands-list {
	gap: var(--ms-space-lg);
	margin-bottom: var(--ms-space-2xl);
	padding-bottom: var(--ms-space-xl);
	border-bottom: 1px solid var(--ms-border-on-dark);
}

.shop-v2 .footer .brands-list__item img {
	opacity: 0.45;
	filter: grayscale(1);
	transition:
		opacity var(--ms-transition-base),
		filter var(--ms-transition-base),
		transform var(--ms-transition-base);
}

.shop-v2 .footer .brands-list__item a:hover img {
	opacity: 1;
	filter: grayscale(0);
	transform: translateY(calc(-2px * var(--ms-motion-scale, 1)));
}

.shop-v2 .footer__logo img {
	filter: brightness(1.1);
}

.shop-v2 .footer__cards img,
.shop-v2 .footer__accum img {
	opacity: 0.88;
	transition: opacity var(--ms-transition-fast);
}

.shop-v2 .footer__cards img:hover,
.shop-v2 .footer .social-list a:hover img {
	opacity: 1;
}

.shop-v2 .footer .social-list a {
	display: inline-flex;
	border-radius: var(--ms-radius-pill);
	transition: transform var(--ms-transition-fast);
}

.shop-v2 .footer .social-list a:hover {
	transform: translateY(calc(-2px * var(--ms-motion-scale, 1)));
	text-decoration: none;
}

/* ── Contact FAB ──────────────────────────────────────────────────────── */

.shop-v2 .contact-fab {
	position: fixed;
	bottom: var(--ms-space-lg);
	right: var(--ms-space-lg);
	z-index: var(--ms-z-fab);
}

.shop-v2 .fab-trigger {
	background: var(--ms-brand);
	border: 1px solid var(--ms-glass-border-dark);
	border-radius: var(--ms-radius-pill);
	color: #fff;
	font-size: var(--ms-text-xl);
	width: 3.25rem;
	height: 3.25rem;
	box-shadow: var(--ms-shadow-glow-brand);
	animation: ms-fab-ring calc(2.4s / max(var(--ms-motion-scale, 1), 0.01)) infinite;
	transition:
		background var(--ms-transition-fast),
		transform var(--ms-transition-fast),
		box-shadow var(--ms-transition-fast);
}

.shop-v2 .fab-trigger:hover {
	background: var(--ms-brand-hover);
	transform: translateY(calc(-2px * var(--ms-motion-scale, 1)));
}

.shop-v2 .fab-options {
	bottom: calc(100% + var(--ms-space-md));
	gap: var(--ms-space-sm);
	transition:
		opacity var(--ms-transition-base),
		transform var(--ms-transition-base);
}

.shop-v2 .fab-option {
	width: 3rem;
	height: 3rem;
	border-radius: var(--ms-radius-pill);
	border: 1px solid var(--ms-border-on-dark);
	box-shadow: var(--ms-shadow-md);
	transition:
		transform var(--ms-transition-fast),
		box-shadow var(--ms-transition-fast);
}

.shop-v2 .fab-option:hover {
	transform: translateY(calc(-3px * var(--ms-motion-scale, 1)));
	box-shadow: var(--ms-shadow-lg);
	text-decoration: none;
}

.shop-v2 .fab-option.viber {
	background: #995aca;
	color: #fff;
}

.shop-v2 .fab-option.telegram {
	background: #2fc6f6;
	color: #fff;
}

.shop-v2 .fab-option.menu-btn-new {
	background: var(--ms-brand);
	color: #fff;
}

/* ── Mobile header ────────────────────────────────────────────────────── */

@media screen and (max-width: 991px) {
	.shop-v2 {
		--ms-header-utility-height: 3.5rem;
	}

	.shop-v2 .header {
		position: fixed;
		left: 0;
		right: 0;
	}

	.shop-v2 .container.main_menu {
		display: none;
	}

	.shop-v2 .top-header__left,
	.shop-v2 .top-header__right {
		display: none;
	}

	.shop-v2 .menu-btn,
	.shop-v2 .search-btn {
		filter: brightness(1.2);
		transition: opacity var(--ms-transition-fast);
	}

	.shop-v2 .menu-btn:hover,
	.shop-v2 .search-btn:hover {
		opacity: 0.8;
	}

	.shop-v2 #mainarea {
		padding-top: var(--ms-header-utility-height);
	}
}

@media screen and (min-width: 992px) {
	.shop-v2 .menu-btn-new {
		display: none;
	}
}