/* Спільна палітра вітрини. Тема завжди відповідає системним налаштуванням. */
:root {
	color-scheme: light;
	--kk-bg: #ffffff;
	--kk-surface: #ffffff;
	--kk-surface-muted: #f6f6f7;
	--kk-surface-hover: #eeeef0;
	--kk-control-bg: #ffffff;
	--kk-text: #202024;
	--kk-text-muted: #68686f;
	--kk-border: #e7e7ea;
	--kk-border-strong: #aaaab1;
	--kk-brand: #e7192a;
	--kk-accent: #d51223;
	--kk-accent-hover: #c61020;
	--kk-accent-soft: #fff1f2;
	--kk-on-accent: #ffffff;
	--kk-success: #247238;
	--kk-error: #c92332;
	--kk-warning: #8e5a06;
	--kk-overlay: rgba(18, 18, 22, .52);
	--kk-shadow: 0 20px 72px rgba(20, 20, 28, .2);
	--kk-logo-filter: none;
	--kk-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2368686f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

	/* Сумісність із компонентами основної теми без дублювання розмітки. */
	--header-bg: var(--kk-surface);
	--header-text: var(--kk-text);
	--header-text-muted: var(--kk-text-muted);
	--text-color: var(--kk-text);
	--border-color: var(--kk-border);
	--search-bg: var(--kk-surface-muted);
	--hamburger-border: var(--kk-border-strong);
	--modal-bg: var(--kk-surface);
	--black: var(--kk-surface);
	--body-bg: var(--kk-bg);
	--body-bg-subtle: var(--kk-surface-muted);
	--body-bg-dark: var(--kk-surface);
	--color-primary: var(--kk-brand);
	--color-text-secondary: var(--kk-text-muted);
	--bs-heading-color: var(--kk-text);
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
		--kk-bg: #161618;
		--kk-surface: #202023;
		--kk-surface-muted: #29292e;
		--kk-surface-hover: #333339;
		--kk-control-bg: #252529;
		--kk-text: #f6f6f7;
		--kk-text-muted: #b7b7bf;
		--kk-border: #39393f;
		--kk-border-strong: #797981;
		--kk-accent: #ff5665;
		--kk-accent-hover: #c61020;
		--kk-accent-soft: #382126;
		--kk-success: #85d69a;
		--kk-error: #ff8690;
		--kk-warning: #f2c165;
		--kk-overlay: rgba(0, 0, 0, .7);
		--kk-shadow: 0 24px 80px rgba(0, 0, 0, .48);
		--kk-logo-filter: brightness(0) invert(1);
		--kk-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b7b7bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	}
}

html,
body {
	background-color: var(--kk-bg);
	color: var(--kk-text);
}

/* Нейтральне тло залишає фотографії їжі головним візуальним акцентом. */
body::before,
body::after { display: none; }

::selection { background: var(--kk-accent-soft); color: var(--kk-text); }

input,
select,
textarea,
button { color-scheme: inherit; }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--kk-accent);
	outline-offset: 3px;
}

/* Preserve a visible keyboard focus over the legacy modal button resets. */
.cart-modal__close:focus-visible,
.order-modal__close:focus-visible,
.order-modal__back:focus-visible {
	outline: 2px solid var(--kk-accent);
	outline-offset: 3px;
}

.site-logo img { filter: var(--kk-logo-filter); }
.site-footer__phone { color: var(--kk-accent); }
.site-footer__phone:hover { color: var(--kk-text); opacity: 1; }

.site-header,
.site-header__nav,
.site-footer,
.site-footer__bottom,
.site-footer__copy,
.header-phone-item + .header-phone-item,
.mobile-menu__item,
.mobile-menu__phones,
.mobile-search-panel {
	border-color: var(--kk-border);
}

.header-phone-dropdown,
.mobile-menu,
.delivery-suggestions {
	background: var(--kk-surface);
	border-color: var(--kk-border);
	box-shadow: var(--kk-shadow);
}

.header-search:focus-within,
.mobile-search-panel .header-search,
.mobile-search-panel .header-search:focus-within {
	background: var(--kk-surface-muted);
	border-color: var(--kk-border-strong);
}

.header-menu-toggle { border-color: var(--kk-border); }
.header-menu-toggle span,
.header-menu-toggle span::before,
.header-menu-toggle span::after { background: var(--kk-text); }

.header-search__input,
.header-search:focus-within .header-search__icon,
.header-phone-item__phone,
.mobile-menu__link,
.mobile-menu__phones-link,
.featured-products,
.featured-products__title,
.featured-products__name,
.featured-products__price,
.home-menu-categories,
.home-menu-category__title,
.home-menu-category__link,
.home-menu-category__price,
.home-menu-category__qty-val,
.home-promo-section .home-menu-category__price,
.hits-page .home-menu-category__price,
.site-footer__brand-name,
.site-footer__email:hover,
.spots-modal__contact-link,
.spots-modal__contact-link--phone {
	color: var(--kk-text);
}

.header-search__input::placeholder,
.header-search__clear,
.mobile-menu__phones-title,
.mobile-menu__phones-name,
.home-menu-category__desc,
.home-search-empty,
.legal-page__content p,
.legal-page__content li,
.home-promo-section__desc,
.hits-page__desc,
.hits-page__count,
.hits-page__breadcrumb,
.hits-page__breadcrumb a,
.hits-page__empty {
	color: var(--kk-text-muted);
}

.featured-products__card,
.home-menu-category__image,
.product-image-seo.with-placeholder,
.spots-modal__map {
	background-color: var(--kk-surface-muted);
}

.home-menu-category__link:hover { border-color: var(--kk-border-strong); }
.home-menu-category__addons { background-color: var(--kk-accent-soft); color: var(--kk-accent); }
button.home-menu-category__qty-btn.home-menu-category__qty-minus { color: var(--kk-text); }
.legal-page__content { color: var(--kk-text); }
.legal-page__content a { color: var(--kk-accent); }

.header-search__clear:hover,
.mobile-menu__close,
.mobile-menu__close:hover,
.site-footer__spots-btn:hover,
.spots-modal__close:hover {
	background: var(--kk-surface-hover);
	border-color: var(--kk-border-strong);
	color: var(--kk-text);
}

.site-footer__spots-btn,
.spots-modal__dialog,
.spots-modal__header,
.spots-modal__contacts-row,
.spots-modal__socials,
.spots-modal__spot { border-color: var(--kk-border); }

/* Кольори акцій можуть задаватися в адмінці; поверхні та текст — системні. */
.home-promo-banners__unified,
.home-promo-banner {
	--banner-bg: var(--kk-surface-muted) !important;
	--banner-text: var(--kk-text) !important;
	--banner-text-muted: var(--kk-text-muted);
	--banner-border: var(--kk-border);
	--banner-divider: var(--kk-border);
	--banner-arrow-border: var(--kk-border-strong);
	--banner-arrow-color: var(--kk-text);
	--banner-hover-tint: var(--kk-accent-soft);
	border-color: var(--kk-border);
}

.home-promo-banners__unified .home-promo-banners__title,
.home-promo-banners__unified .home-promo-banners__half,
.home-promo-section .home-promo-section__title,
.home-promo-section h2.home-promo-section__title,
.hits-page__breadcrumb a:hover,
.hits-page__back,
.hits-page__back:hover { color: var(--kk-text); }

.home-promo-banners__unified .home-promo-banners__desc,
.home-promo-banner__desc { color: var(--kk-text-muted); }

.home-promo-banners__tag { background: var(--kk-brand); color: var(--kk-on-accent); }

.hits-page {
	--hits-bg: var(--kk-surface-muted) !important;
	--hits-text: var(--kk-text) !important;
}
.hits-page__tag { color: var(--kk-accent); }
.hits-page__count { background: var(--kk-surface-muted); border-color: var(--kk-border); }

/* Кошик, оформлення замовлення, підказки адреси та стан оплати. */
.cart-modal__backdrop,
.order-modal__backdrop,
.spots-modal__backdrop,
.mobile-menu-overlay,
.mobile-search-backdrop,
.kk-liqpay-popup { background: var(--kk-overlay); }

.cart-modal__dialog,
.order-modal__dialog,
.spots-modal__dialog,
.kk-liqpay-popup__dialog { box-shadow: var(--kk-shadow); }

.cart-modal__header,
.cart-modal__row,
.cart-modal__footer,
.cart-upsell,
.order-modal__header,
.order-modal__payment,
.order-modal__summary,
.order-modal__promo,
.delivery-suggestion-item { border-color: var(--kk-border); }

.cart-modal__close,
.cart-modal__qty-btn,
.cart-modal__row-img-wrap,
.cart-modal__row-img-wrap--empty,
.cart-upsell__img--empty,
.cart-upsell__sauce-chip,
.order-modal__close,
.order-modal__tabs,
.order-modal__promo-apply,
.kchk-saved-chip,
.order-modal__note {
	background: var(--kk-surface-muted);
	color: var(--kk-text);
	border-color: var(--kk-border);
}

.cart-modal__close:hover,
.cart-modal__close:focus-visible,
.cart-modal__qty-btn:hover,
.cart-upsell__sauce-chip:hover,
.order-modal__close:hover,
.order-modal__close:focus-visible,
.order-modal__promo-apply:hover {
	background: var(--kk-surface-hover);
}

.cart-modal__row-options,
.cart-modal__footer-total,
.cart-upsell__title,
.cart-upsell__group-title,
.cart-upsell__show-more,
.order-modal__tab,
.order-modal__field-icon,
.order-modal__summary-row,
.order-modal__summary-label,
.kchk-saved-label,
.kchk-saved-chip__del,
.order-nearest-spot-label,
.delivery-zone-indicator,
.delivery-suggestion-item__district {
	color: var(--kk-text-muted);
}

.cart-modal__qty-val,
.cart-modal__footer-sum,
.cart-upsell__name,
.cart-upsell__show-more:hover,
.order-modal__section-header,
.order-modal__summary-total-row,
.order-modal__summary-value,
.order-modal__summary-total,
.order-modal__thanks-title,
.order-modal__note.is-error,
.order-modal__note.is-success,
.delivery-suggestion-item__name { color: var(--kk-text); }

.cart-modal__comment,
.order-modal__input,
.order-modal__select,
.order-modal__select option {
	background-color: var(--kk-control-bg);
	border-color: var(--kk-border);
	color: var(--kk-text);
	color-scheme: inherit;
}
.order-modal__select { background-image: var(--kk-chevron); }
.order-modal__input { background-image: none; }
.cart-modal__comment::placeholder,
.order-modal__input::placeholder { color: var(--kk-text-muted); }
.cart-modal__comment:focus,
.order-modal__input:focus,
.order-modal__select:focus,
.order-modal__input:not(:disabled):hover,
.order-modal__select:not(:disabled):hover { border-color: var(--kk-border-strong); }

.order-modal__tab:not(.is-active):hover { background: var(--kk-surface-hover); color: var(--kk-text); }
.order-modal__tab.is-active,
.cart-modal__qty-plus,
.cart-modal__footer-submit,
.cart-upsell__add,
.order-modal__submit,
.order-modal__thanks-close,
.kk-liqpay-popup__btn,
.home-menu-category__add-btn,
.home-menu-category__qty-plus,
.kebabchik-cart-bar__inner {
	background: var(--kk-brand);
	color: var(--kk-on-accent);
}
.cart-modal__qty-plus:hover,
.cart-modal__footer-submit:hover,
.order-modal__submit:hover,
.order-modal__thanks-close:hover,
.kk-liqpay-popup__btn:hover,
.home-menu-category__add-btn:hover,
.home-menu-category__qty-plus:hover { background: var(--kk-accent-hover); color: var(--kk-on-accent); }
.order-modal__submit.is-loading { color: transparent; }

.cart-modal__row-edit,
.cart-upsell__price,
.cart-upsell__sauce-price,
.order-modal__back,
.order-modal__promo-apply.is-applied { color: var(--kk-accent); }
.order-modal__promo-apply.is-applied,
.kchk-saved-chip:hover,
.delivery-suggestion-item:hover { background: var(--kk-accent-soft); border-color: var(--kk-accent); }
.order-nearest-spot-label,
.delivery-zone-indicator { border-left-color: var(--kk-border-strong); }

.delivery-address-status--ok,
.order-modal__promo-msg--ok,
.order-modal__summary-value--discount,
.order-modal__thanks-icon,
.order-free-delivery-hint--achieved { color: var(--kk-success); }
.delivery-address-status--err,
.order-modal__promo-msg--err,
.order-modal__failure-icon { color: var(--kk-error); }
.delivery-address-status--taxi,
.order-free-delivery-hint--progress,
.order-free-delivery-hint--progress strong { color: var(--kk-warning); }

.kk-goal { background: var(--kk-surface); color: var(--kk-text); box-shadow: var(--kk-shadow); }
.kk-goal__track { background: var(--kk-border); }

/* Інформаційна сторінка доставки та елементи карт. Фотографії не фільтруються. */
.delivery-page__hero,
.delivery-page__faq,
.delivery-page__steps,
.delivery-page__bottom-cta { background: var(--kk-surface-muted); }
.delivery-page__zone-card { background: var(--kk-surface); }
.delivery-page__zone-card:hover { background: var(--kk-surface-hover); }
.delivery-page__h1,
.delivery-page__section-title,
.delivery-page__zone-name,
.delivery-page__zone-dl dd,
.delivery-page__step-text strong,
.delivery-page__faq-item dt { color: var(--kk-text); }
.delivery-page__lead,
.delivery-page__section-sub,
.delivery-page__zone-dl dt,
.delivery-page__zone-red-note,
.delivery-page__step-text p,
.delivery-page__faq-item dt:hover,
.delivery-page__faq-item dd,
.delivery-page__faq-item dd ul li,
.delivery-page__bottom-cta p { color: var(--kk-text-muted); }
.delivery-page__zone-row,
.delivery-page__zone-red-note,
.delivery-page__faq-item,
.delivery-page__faq-item:first-child { border-color: var(--kk-border); }
.delivery-page__faq-item dt::after { background-image: var(--kk-chevron); }
.leaflet-popup-content-wrapper,
.leaflet-popup-tip,
.leaflet-bar a,
.ol-control button,
.dz-spot-popup { background: var(--kk-surface); color: var(--kk-text); }
.leaflet-bar a:hover,
.ol-control button:hover { background: var(--kk-surface-hover); color: var(--kk-text); }

* { scrollbar-color: var(--kk-border-strong) transparent; }
::-webkit-scrollbar-thumb,
.product-modal ::-webkit-scrollbar-thumb,
.order-modal ::-webkit-scrollbar-thumb { background: var(--kk-border-strong); }
::-webkit-scrollbar-thumb:hover,
.product-modal ::-webkit-scrollbar-thumb:hover,
.order-modal ::-webkit-scrollbar-thumb:hover { background: var(--kk-text-muted); }

@media (max-width: 768px) {
	.site-header__nav a { background-color: var(--kk-surface-muted); border-color: var(--kk-border); color: var(--kk-text); }
}

@media (prefers-color-scheme: dark) {
	/* Лише плитки карти: маркери й справжні фото залишаються без змін. */
	.spots-modal__map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.82) saturate(.65); }
}