/* Case study pages — SHODROP redesign palette (молочный премиум) */

body:has(.case-page),
body:has(.case-hero) {
	background: #fcf8f0 !important;
	background-image: none !important;
	color: #16161a;
}

body:has(.case-page) .wrapper,
body:has(.case-hero) .wrapper {
	background: #fcf8f0;
}

.case-page,
main.contacts-page:has(.case-hero) {
	--case-accent: #d6603d;
	--case-accent-2: #b8893a;
	--case-accent-deep: #b0522f;
	--case-accent-dim: color-mix(in srgb, var(--case-accent) 28%, transparent);
	--case-bg: #fcf8f0;
	--case-bg2: #f5efe3;
	--case-ink: #16161a;
	--case-mut: rgba(22, 22, 26, 0.58);
	--case-kicker: rgba(22, 22, 26, 0.46);
	--case-line: rgba(22, 22, 26, 0.1);
	--case-card-bg: #ffffff;
	--case-card-border: rgba(22, 22, 26, 0.09);
	--case-on-accent: #ffffff;
	color: var(--case-ink);
}

/* --- Base case-styles (legacy Shopify / Yandex v1) --- */

.case-page .top__text,
.case-page .case-overview__text,
.case-page .task-text,
.case-page .solution-list-item p,
.case-page .case-overview__text p {
	color: var(--case-mut);
}

.case-page .top__title,
.case-page .title,
.case-page .top-title-case,
.case-page .case-overview__title,
.case-page .case-overview .title_h2,
.case-page .case-solution__title,
.case-page .case-solution .title_h2,
.case-page .case-gallery__title,
.case-page .case-gallery .title_h2,
.case-page .case-results__title,
.case-page .case-results .title_h2,
.case-page .case-technologies__title,
.case-page .case-technologies .title_h2,
.case-page .solution-list-item h3,
.case-page .result-stat__label,
.case-page .technology-list-item h3,
.case-page .technology-list-item__content h3 {
	color: var(--case-ink);
}

.case-page .case-overview__tasks h3 {
	color: var(--case-accent);
}

.case-page .stat-item,
.case-page .result-stat,
.case-page .result-card,
.case-page .technology-list-item,
.case-page .gallery-item {
	background: var(--case-card-bg);
	border-color: var(--case-card-border);
	box-shadow: 0 8px 24px color-mix(in srgb, var(--case-ink) 6%, transparent);
}

.case-page .stat-label,
.case-page .result-stat__label {
	color: var(--case-mut);
}

.case-page .case-gallery__arrow {
	background: var(--case-card-bg);
	border-color: var(--case-line);
	color: var(--case-ink);
}

.case-page .case-gallery__arrow:hover {
	background: var(--case-bg2);
	border-color: color-mix(in srgb, var(--case-accent) 30%, var(--case-line));
}

.case-page .solution-list-item {
	border-bottom-color: var(--case-line);
}

.case-page .solution-list-item:hover {
	background: color-mix(in srgb, var(--case-accent) 4%, var(--case-card-bg));
}

.case-page .case-gallery__grid {
	scrollbar-color: color-mix(in srgb, var(--case-ink) 20%, transparent) transparent;
}

.case-page .case-gallery__grid::-webkit-scrollbar-track {
	background: var(--case-line);
}

.case-page .case-gallery__grid::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--case-ink) 22%, transparent);
}

/* --- Yandex Kit v2 --- */

.case-page--v2 .title_h2 {
	background: linear-gradient(135deg, var(--case-accent), var(--case-accent-2));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.case-page--v2 .top__title,
.case-page--v2 .top-title-case,
.case-page--v2 .case-hero-title,
.case-page--v2 .case-hero-title__line {
	color: var(--case-ink);
	background: none;
	-webkit-text-fill-color: unset;
}

.case-page--v2 .top__text,
.case-page--v2 .case-hero-lead,
.case-page--v2 .case-hero-subtitle {
	color: var(--case-mut);
}

.case-page--v2 > section:not(.top):nth-of-type(even) {
	background: var(--case-bg2);
}

.case-breadcrumbs__list {
	color: var(--case-kicker);
}

.case-breadcrumbs__list a {
	color: var(--case-mut);
}

.case-breadcrumbs__list a:hover {
	color: var(--case-accent);
}

.case-breadcrumbs__current {
	color: var(--case-ink);
}

.case-page--v2 .case-hero-badge {
	background: var(--case-card-bg);
	border-color: var(--case-card-border);
	box-shadow: 0 4px 16px color-mix(in srgb, var(--case-ink) 5%, transparent);
}

.case-page--v2 .case-hero-badge__value {
	color: var(--case-ink);
}

.case-page--v2 .case-hero-badge__label {
	color: var(--case-mut);
}

.case-page--v2 .case-hero-visual {
	border-color: var(--case-card-border);
	box-shadow: 0 8px 28px color-mix(in srgb, var(--case-ink) 8%, transparent);
}

.case-page--v2 .case-hero-logo--light-bg {
	background: var(--case-card-bg);
	border: 1px solid var(--case-card-border);
}

.case-marketplace-card {
	background: var(--case-card-bg);
	border-color: var(--case-card-border);
	box-shadow: 0 8px 28px color-mix(in srgb, var(--case-ink) 7%, transparent);
}

.case-marketplace-card__title,
.case-mp-stat__value:not(.case-mp-stat__value--rating) {
	color: var(--case-ink);
}

.case-marketplace-card__note,
.case-mp-stat__label {
	color: var(--case-mut);
}

.case-marketplace-proof__subtitle {
	color: var(--case-mut);
}

.case-brand-intro__quote {
	color: var(--case-ink);
}

.case-page--v2 .case-marketplace-card__media,
.case-page--v2 .case-marketplace-card--ozon .case-marketplace-card__media,
.case-page--v2 .case-marketplace-card--wb .case-marketplace-card__media,
.case-page--v2 .case-marketplace-card--yandex-market .case-marketplace-card__media {
	background: transparent;
	border-top: 1px solid var(--case-line);
}

.case-page--v2 .case-marketplace-card__image {
	background: transparent;
	border: 1px solid var(--case-line);
	box-shadow: none;
}

.case-page--v2 .case-marketplace-card__actions {
	background: transparent;
	border-top: 1px solid var(--case-line);
}

.case-page--v2 .case-marketplace-card__link:hover {
	color: var(--case-on-accent);
}

.case-page--bronext .case-marketplace-card__note,
.case-page--vestiseven .case-marketplace-card__note {
	color: var(--case-mut);
}

.case-brand-intro {
	background: linear-gradient(180deg, color-mix(in srgb, var(--case-accent) 6%, var(--case-bg)) 0%, var(--case-bg) 100%);
}

.case-brand-intro__subtitle {
	color: var(--case-mut);
}

.case-brand-intro__card {
	background: var(--case-card-bg);
	border-color: var(--case-card-border);
	box-shadow: 0 8px 28px color-mix(in srgb, var(--case-ink) 7%, transparent);
}

.case-brand-intro__col--brand {
	background: var(--case-bg2);
	border-right-color: var(--case-line);
}

.case-brand-intro__logo {
	background: var(--case-card-bg);
	border: 1px solid var(--case-card-border);
}

.case-brand-intro__brand-name,
.case-brand-intro__col--facts h3,
.case-brand-intro__facts li strong {
	color: var(--case-ink);
}

.case-brand-intro__facts li,
.case-brand-intro__col--facts p {
	color: var(--case-mut);
}

.case-brand-intro__col--banner {
	background: var(--case-bg2);
}

.case-page--v2 .case-overview__col--text p,
.case-page--v2 .tasks-list--overview .task-text {
	color: var(--case-mut);
}

.case-page--v2 .case-overview__tasks {
	background: var(--case-card-bg);
	border-color: var(--case-card-border);
}

.case-page--v2 .tasks-list--overview .task-icon {
	color: var(--case-on-accent);
}

.case-page--v2 .solution-card,
.case-page--v2 .result-card,
.case-page--v2 .technology-list-item,
.case-page--v2 .case-faq__item {
	background: var(--case-card-bg);
	border-color: var(--case-card-border);
	box-shadow: 0 4px 18px color-mix(in srgb, var(--case-ink) 5%, transparent);
}

.case-page--v2 .solution-card h3,
.case-page--v2 .result-card h3,
.case-page--v2 .technology-list-item h3,
.case-page--v2 .case-steps__item h3,
.case-page--v2 .case-faq__question {
	color: var(--case-ink);
}

.case-page--v2 .technology-list-item h3,
.case-page--v2 .technology-list-item__content h3 {
	color: var(--case-ink);
}

.case-page--v2 .solution-card p,
.case-page--v2 .result-card p,
.case-page--v2 .technology-list-item p,
.case-page--v2 .technology-list-item__content p,
.case-page--v2 .case-steps__item p,
.case-page--v2 .case-faq__answer {
	color: var(--case-mut);
}

.case-page--v2 .case-steps__item::before {
	color: var(--case-on-accent);
}

.case-page--v2 .gallery-item {
	background: var(--case-card-bg);
	border-color: var(--case-card-border);
}

.case-page--v2 .case-faq__item.is-open {
	border-color: color-mix(in srgb, var(--case-accent) 35%, var(--case-card-border));
}

.case-page--v2 .case-faq__toggle {
	color: var(--case-accent);
}

/* CTA + request block (overrides inline styles in partial) */
.case-page .questions-content--case,
.case-page--v2 .questions-content--case {
	background: var(--case-card-bg) !important;
	border-color: color-mix(in srgb, var(--case-accent) 28%, var(--case-line)) !important;
	box-shadow: 0 8px 28px color-mix(in srgb, var(--case-ink) 6%, transparent) !important;
}

.case-page .questions-section--case .questions-title,
.case-page .questions-title-brand {
	color: var(--case-ink) !important;
}

.case-page .questions-title-gradient--case {
	background: linear-gradient(135deg, var(--case-accent), var(--case-accent-2)) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
}

.case-page .questions-section--case .questions-subtitle {
	color: var(--case-mut) !important;
}

.case-page .questions-btn--case,
.case-page--v2 .questions-btn--case {
	background: var(--case-accent) !important;
	color: var(--case-on-accent) !important;
	border: none !important;
	box-shadow: none !important;
}

.case-page .questions-btn--case:hover,
.case-page--v2 .questions-btn--case:hover {
	background: var(--case-accent-deep) !important;
	color: var(--case-on-accent) !important;
	box-shadow: 0 8px 24px color-mix(in srgb, var(--case-accent) 32%, transparent) !important;
}

/* Other cases carousel */
.case-other-cases--dellwell-v2 .other-case-item,
.case-page .other-case-item {
	background: var(--case-card-bg);
	border-color: var(--case-card-border);
}

.case-other-cases--dellwell-v2 .other-case-item:hover,
.case-page .other-case-item:hover {
	border-color: color-mix(in srgb, var(--case-accent) 40%, var(--case-card-border));
}

.case-other-cases--dellwell-v2 .other-case-item__category {
	color: var(--case-on-accent);
}

.case-other-cases--dellwell-v2 .other-case-item__content h3,
.case-page .other-case-item__content h3 {
	color: var(--case-ink);
}

.case-other-cases--dellwell-v2 .other-case-item__excerpt,
.case-page .other-case-item__excerpt {
	color: var(--case-mut);
}

.case-related-v2__all-btn,
.case-other-cases--dellwell-v2 .case-related-v2__all-btn {
	background: color-mix(in srgb, var(--case-accent) 8%, var(--case-card-bg));
	color: var(--case-accent);
}

.case-related-v2__all-btn:hover,
.case-other-cases--dellwell-v2 .case-related-v2__all-btn:hover {
	background: var(--case-accent);
	color: var(--case-on-accent);
}

/* «Другие кейсы» — две строки, не inline-block из legacy .title_h2 */
.case-other-cases--yandexkit-scroll .case-related-v2__head {
	align-items: flex-end;
}

.case-other-cases--yandexkit-scroll .case-other-cases__title.title_h2,
.case-other-cases--yandexkit-scroll .case-related-v2__title {
	display: block !important;
	text-align: left !important;
	margin-bottom: 0 !important;
	color: transparent !important;
}

.case-other-cases--yandexkit-scroll .case-related-v2__title-line {
	display: block !important;
	color: inherit !important;
	-webkit-text-fill-color: transparent;
}

/* Lightbox */
.case-page .lightbox,
.lightbox {
	background-color: rgba(22, 22, 26, 0.92);
}

.case-page .lightbox-close,
.lightbox .lightbox-close {
	color: #fff !important;
}

.case-page .lightbox-close:hover,
.case-page--v2 .lightbox-close:hover,
.lightbox .lightbox-close:hover {
	color: var(--case-accent) !important;
}

.case-gallery__item,
.case-gallery__img {
	cursor: pointer;
}

.lightbox {
	display: none;
	position: fixed;
	z-index: 99999;
	inset: 0;
	background-color: rgba(22, 22, 26, 0.92);
	overflow: auto;
	align-items: center;
	justify-content: center;
}

.lightbox.active {
	display: flex;
}

.lightbox-content {
	position: relative;
	max-width: 90%;
	max-height: 90%;
	margin: auto;
}

.lightbox-content img {
	width: 100%;
	height: auto;
	max-height: 90vh;
	object-fit: contain;
	border-radius: 8px;
}

.lightbox-close {
	position: absolute;
	top: 20px;
	right: 35px;
	color: #fff;
	font-size: 40px;
	font-weight: bold;
	cursor: pointer;
	z-index: 10002;
	line-height: 1;
	border: none;
	background: transparent;
	padding: 0;
}

.lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	z-index: 10001;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background 0.2s, border-color 0.2s;
}

.lightbox-nav:hover {
	background: color-mix(in srgb, var(--case-accent, #d6603d) 35%, transparent);
	border-color: color-mix(in srgb, var(--case-accent, #d6603d) 60%, transparent);
}

.lightbox-nav--prev {
	left: 16px;
}

.lightbox-nav--next {
	right: 16px;
}

.lightbox-counter {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.75);
	font-size: 14px;
	z-index: 10001;
	display: none;
}

.lightbox--nav .lightbox-nav,
.lightbox--nav .lightbox-counter {
	display: flex;
}

.lightbox--nav .lightbox-counter {
	display: block;
}

@media (max-width: 768px) {
	.lightbox-nav {
		width: 40px;
		height: 40px;
		font-size: 22px;
	}

	.lightbox-nav--prev {
		left: 8px;
	}

	.lightbox-nav--next {
		right: 8px;
	}

	.lightbox-close {
		top: 12px;
		right: 16px;
		font-size: 32px;
	}
}

.shodrop-redesign .case-page,
.shodrop-redesign main.contacts-page.case-page {
	padding-top: 24px;
}

/* Other cases — legacy scroll block */
.case-page .other-cases-grid--scroll-all .other-case-item__excerpt {
	color: var(--case-mut) !important;
}

.case-page .other-cases-grid--scroll-all .other-case-item__more {
	color: var(--case-mut) !important;
	background: var(--case-bg2) !important;
	border-color: var(--case-line) !important;
}

.case-page .other-case-item:hover .other-case-item__more {
	background: color-mix(in srgb, var(--case-accent) 8%, var(--case-bg2)) !important;
	border-color: color-mix(in srgb, var(--case-accent) 24%, var(--case-line)) !important;
	color: var(--case-accent) !important;
}

.other-cases-grid--scroll-all .other-case-item__category {
	background: var(--case-accent-2) !important;
	color: var(--case-on-accent) !important;
}

.case-page--v2 .case-faq .case-faq__title {
	color: var(--case-ink);
}

/* Shopify case pages (contacts-page + case-hero) */
main.contacts-page:has(.case-hero) .cases-subtitle,
main.contacts-page:has(.case-hero) .case-hero__description,
main.contacts-page:has(.case-hero) .case-hero__stat-label {
	color: var(--case-mut) !important;
}

main.contacts-page:has(.case-hero) .case-hero__title,
main.contacts-page:has(.case-hero) .top__title,
main.contacts-page:has(.case-hero) .case-challenge__title,
main.contacts-page:has(.case-hero) .case-solution__title,
main.contacts-page:has(.case-hero) .case-gallery__title,
main.contacts-page:has(.case-hero) .case-technologies__title,
main.contacts-page:has(.case-hero) .case-other-cases__title {
	color: var(--case-ink) !important;
}

main.contacts-page:has(.case-hero) .case-hero__stat-number,
main.contacts-page:has(.case-hero) .case-hero__stat-number--special {
	color: var(--case-accent) !important;
}

main.contacts-page:has(.case-hero) .case-hero__category,
main.contacts-page:has(.case-hero) .case-hero__platform,
main.contacts-page:has(.case-hero) .case-hero__duration {
	background: var(--case-card-bg) !important;
	color: var(--case-ink) !important;
	border: 1px solid var(--case-card-border) !important;
}

main.contacts-page:has(.case-hero) .case-challenge__card,
main.contacts-page:has(.case-hero) .case-solution__item,
main.contacts-page:has(.case-hero) .technology-card {
	background: var(--case-card-bg) !important;
	border-color: var(--case-card-border) !important;
	box-shadow: 0 4px 18px color-mix(in srgb, var(--case-ink) 5%, transparent) !important;
}

main.contacts-page:has(.case-hero) .case-challenge__card h3,
main.contacts-page:has(.case-hero) .case-solution__item h3,
main.contacts-page:has(.case-hero) .technology-card h3 {
	color: var(--case-ink) !important;
}

main.contacts-page:has(.case-hero) .case-challenge__card p,
main.contacts-page:has(.case-hero) .case-solution__item p,
main.contacts-page:has(.case-hero) .technology-card p {
	color: var(--case-mut) !important;
}

main.contacts-page:has(.case-hero) .case-action-btn,
main.contacts-page:has(.case-hero) .case-hero__btn {
	background: var(--case-accent) !important;
	color: var(--case-on-accent) !important;
	border-color: var(--case-accent) !important;
}

main.contacts-page:has(.case-hero) .case-action-btn:hover,
main.contacts-page:has(.case-hero) .case-hero__btn:hover {
	background: var(--case-accent-deep) !important;
}

/* Shopify — секции с inline white text */
main.contacts-page.case-page .cases-subtitle,
main.contacts-page.case-page .case-results__description,
main.contacts-page.case-page .case-technologies__description,
main.contacts-page.case-page .case-technologies__category h4,
main.contacts-page.case-page .case-gallery__description,
main.contacts-page.case-page .case-cta__description {
	color: var(--case-mut) !important;
}

main.contacts-page.case-page .case-results__title,
main.contacts-page.case-page .case-technologies__title,
main.contacts-page.case-page .cases-examples__title,
main.contacts-page.case-page .case-cta__title,
main.contacts-page.case-page .case-solution__step h4,
main.contacts-page.case-page .case-solution__step p {
	color: var(--case-ink) !important;
}

main.contacts-page.case-page .cases-examples__subtitle,
main.contacts-page.case-page .cases-examples__item-description,
main.contacts-page.case-page .cases-examples__item-title {
	color: var(--case-mut) !important;
}

main.contacts-page.case-page .cases-examples__item-title {
	color: var(--case-ink) !important;
}

main.contacts-page.case-page .case-technologies__item {
	background: var(--case-card-bg) !important;
	color: var(--case-ink) !important;
	border: 1px solid var(--case-card-border) !important;
}

main.contacts-page.case-page .case-cta {
	background: var(--case-card-bg) !important;
	border: 1px solid var(--case-card-border) !important;
	box-shadow: 0 8px 28px color-mix(in srgb, var(--case-ink) 6%, transparent) !important;
}

main.contacts-page.case-page .case-cta__button--primary {
	background: var(--case-accent) !important;
	color: var(--case-on-accent) !important;
	box-shadow: 0 4px 15px color-mix(in srgb, var(--case-accent) 32%, transparent) !important;
}

main.contacts-page.case-page .case-cta__button--primary:hover {
	background: var(--case-accent-deep) !important;
}

main.contacts-page.case-page .case-cta__button--secondary {
	color: var(--case-accent) !important;
	border-color: var(--case-accent) !important;
	background: transparent !important;
}

main.contacts-page.case-page .case-solution {
	background: var(--case-bg2) !important;
}

main.contacts-page.case-page .case-solution__content {
	max-width: 1200px;
	margin: 0 auto;
}

/* Image watermark — readable on light previews */
.case-page--v2.case-page--image-protected .case-hero-visual::after,
.case-page--v2.case-page--image-protected .gallery-item::after {
	color: color-mix(in srgb, var(--case-ink) 28%, transparent);
	text-shadow: none;
}

/* --- Mobile: scroll, images, headings (Safari / redesign shell) --- */

.shodrop-redesign main.case-page,
.shodrop-redesign main.contacts-page.case-page,
.case-page--v2 {
	overflow: visible;
}

.case-page .case-picture {
	display: block;
	max-width: 100%;
}

.case-page .case-picture img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Герой-кейсы: не даём общему правилу .case-picture img растягивать логотип на всю ширину */
.case-page--v2 .case-hero-logo {
	margin-bottom: 4px;
}

.case-page--v2 .case-hero-logo .case-picture {
	display: inline-block;
	max-width: min(160px, 100%);
	margin: 0 auto;
}

.case-page--v2 .case-hero-logo img,
.case-page--v2 .case-hero-logo .case-picture img {
	height: clamp(28px, 4vw, 44px);
	width: auto;
	max-width: min(160px, 100%);
	margin: 0 auto 10px;
	object-fit: contain;
}

.case-page--v2 .top {
	padding-top: 40px;
}

.case-page--v2 .case-breadcrumbs {
	padding-top: 12px;
}

@supports not (background-clip: text) {
	.case-page--v2 .title_h2 {
		background: none;
		-webkit-text-fill-color: unset;
		color: var(--case-accent);
	}
}

@media (max-width: 768px) {
	/*
	 * overflow-x:hidden на main превращает overflow-y в auto (CSS spec) —
	 * на iOS Safari это ломает прокрутку: виден только hero, остальное «пропадает».
	 * Горизонтальный overflow режем на .shodrop-redesign / контейнерах секций.
	 */
	.shodrop-redesign main.case-page,
	.shodrop-redesign main.contacts-page.case-page,
	main.case-page,
	main.contacts-page.case-page {
		overflow: visible !important;
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}

	body.shodrop-home-redesign .wrapper:has(.case-page),
	body.shodrop-home-redesign .wrapper:has(main.contacts-page.case-page) {
		overflow-x: clip;
		overflow-y: visible;
	}

	.case-page .case-hero-visual,
	.case-page .case-marketplace-card__image,
	.case-page .gallery-item {
		max-width: 100%;
		min-width: 0;
	}

	.case-page .gallery-item .case-picture,
	.case-page .case-hero-visual .case-picture {
		width: 100%;
	}

	.case-page .gallery-item .case-picture img,
	.case-page .case-hero-visual .case-picture img,
	.case-page .gallery-item > img {
		width: 100%;
		height: auto;
		max-width: 100%;
		object-fit: contain;
	}

	.case-page .case-gallery__grid {
		max-width: 100%;
		min-width: 0;
	}

	.case-page .case-solution__list,
	.case-page .case-results__grid,
	.case-page .case-overview__content,
	.case-page .case-marketplace-grid {
		max-width: 100%;
		min-width: 0;
	}
}