/**
 * ===================================================================
 * SHEFCOOK.RU — WORLD-CLASS REDESIGN
 * Modern CSS layer — overrides legacy style.css
 * ===================================================================
 */

/* -------------------------------------------------------------------
 * 1. DESIGN TOKENS
 * ------------------------------------------------------------------- */
:root {
	/* Brand */
	--c-brand: #c45c26;
	--c-brand-dark: #a34d20;
	--c-brand-light: #d97a4a;
	--c-brand-bg: #fef5ec;
	--c-brand-border: rgba(196, 92, 38, 0.25);

	/* Stone palette (warm grays) */
	--c-900: #1c1917;
	--c-800: #292524;
	--c-700: #44403c;
	--c-600: #57534e;
	--c-500: #78716c;
	--c-400: #a8a29e;
	--c-300: #d6d3d1;
	--c-200: #e7e5e4;
	--c-100: #f5f4f3;
	--c-50:  #fafaf9;

	/* Semantic */
	--c-bg:           #fdfaf6;
	--c-surface:      #ffffff;
	--c-text:         var(--c-900);
	--c-muted:        var(--c-500);
	--c-subtle:       var(--c-400);
	--c-border:       var(--c-200);
	--c-accent:       var(--c-brand);
	--c-accent-hover: var(--c-brand-dark);

	/* Stars */
	--c-star:       #f59e0b;
	--c-star-empty: #d6d3d1;

	/* Typography */
	--font: "Roboto", "Open Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

	/* Type scale */
	--text-xs:   0.75rem;
	--text-sm:   0.875rem;
	--text-base: 1rem;
	--text-md:   1.0625rem;
	--text-lg:   1.125rem;
	--text-xl:   1.25rem;
	--text-2xl:  1.5rem;
	--text-3xl:  clamp(1.375rem, 3vw, 1.875rem);
	--text-4xl:  clamp(1.75rem,  4vw, 2.5rem);

	/* Leading */
	--leading-tight:   1.2;
	--leading-snug:    1.35;
	--leading-normal:  1.55;
	--leading-relaxed: 1.7;

	/* Spacing */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.25rem;
	--sp-6: 1.5rem;
	--sp-8: 2rem;
	--sp-10: 2.5rem;
	--sp-12: 3rem;

	/* Radii */
	--r-sm:   6px;
	--r-md:   10px;
	--r-lg:   16px;
	--r-xl:   22px;
	--r-full: 9999px;

	/* Shadows */
	--shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-sm:    0 1px 4px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
	--shadow-md:    0 4px 20px rgba(0, 0, 0, 0.09), 0 1px 4px rgba(0, 0, 0, 0.04);
	--shadow-lg:    0 8px 40px rgba(0, 0, 0, 0.11), 0 4px 8px rgba(0, 0, 0, 0.05);
	--shadow-brand: 0 4px 14px rgba(196, 92, 38, 0.35);

	/* Transitions */
	--t-fast: 130ms ease;
	--t-base: 210ms ease;
	--t-slow: 320ms ease;

	/* Backward-compat aliases (used elsewhere in theme) */
	--color-bg:          var(--c-bg);
	--color-surface:     var(--c-surface);
	--color-text:        var(--c-text);
	--color-text-muted:  var(--c-muted);
	--color-border:      var(--c-border);
	--color-accent:      var(--c-accent);
	--color-accent-hover: var(--c-accent-hover);
	--radius-sm:  var(--r-sm);
	--radius-md:  var(--r-md);
	--radius-lg:  var(--r-lg);
	--shadow-sm:  var(--shadow-sm);
	--shadow-md:  var(--shadow-md);
	--space-1:  var(--sp-1);
	--space-2:  var(--sp-2);
	--space-3:  var(--sp-3);
	--space-4:  var(--sp-4);
	--space-5:  var(--sp-5);
	--space-6:  var(--sp-6);
	--space-8:  var(--sp-8);
	--space-10: var(--sp-10);
	--font-sans: var(--font);
	--text-base: var(--text-md);
	--leading-normal: var(--leading-normal);
	--content-max: 72rem;
}

/* -------------------------------------------------------------------
 * 2. BASE
 * ------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	min-width: 0 !important;
	font-family: var(--font) !important;
	font-size: var(--text-md) !important;
	line-height: var(--leading-normal) !important;
	color: var(--c-text) !important;
	background: var(--c-bg) !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	color: var(--c-accent);
	text-decoration-color: rgba(196, 92, 38, 0.3);
	transition: color var(--t-fast);
}

a:hover {
	color: var(--c-accent-hover);
	text-decoration: none;
}

img {
	max-width: 100%;
	height: auto;
}

/* -------------------------------------------------------------------
 * 3. ACCESSIBILITY
 * ------------------------------------------------------------------- */
:focus {
	outline: none;
}

:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
	border-radius: 3px;
}

.skip-link:not(:focus):not(:focus-visible):not(:active) {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.skip-link:focus,
.skip-link:focus-visible {
	position: fixed;
	z-index: 100001;
	top: var(--sp-4);
	left: var(--sp-4);
	width: auto;
	height: auto;
	padding: var(--sp-3) var(--sp-5);
	margin: 0;
	overflow: visible;
	clip: auto !important;
	clip-path: none !important;
	background: var(--c-accent);
	color: #fff;
	font-weight: 600;
	font-size: var(--text-sm);
	text-decoration: none;
	border-radius: var(--r-sm);
	box-shadow: var(--shadow-lg);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* -------------------------------------------------------------------
 * 4. LAYOUT SHELL
 * ------------------------------------------------------------------- */
#site {
	background: var(--c-bg);
}

#container {
	width: min(1240px, 96vw) !important;
	max-width: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	box-sizing: border-box;
}

#content_box::after,
#content::after {
	content: "";
	display: table;
	clear: both;
}

/* -------------------------------------------------------------------
 * 5. STICKY HEADER
 *
 * Redesign: flexbox header.
 * Legacy: #logo inline-block + .header_links position:absolute right:0
 *         → causes cramped layout when search + auth buttons compete for space.
 * Fix: #header becomes a flex row; .header_links is a flex item that
 *      fills remaining width.  #menu stays position:absolute (bottom strip).
 * ------------------------------------------------------------------- */
#header {
	position: sticky !important;
	top: 0 !important;
	z-index: 999 !important;

	/* Flex row: logo | [search + auth links] */
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: var(--sp-5) !important;

	background: rgba(253, 250, 246, 0.97) !important;
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
	border-bottom: 1px solid var(--c-border) !important;

	/* bottom padding creates room for the absolutely-positioned #menu (bottom:13px + ~30px height) */
	min-height: 100px !important;
	padding: var(--sp-3) var(--sp-6) 48px !important;
	box-sizing: border-box !important;
	transition: box-shadow var(--t-base) !important;
}

#header.shef-scrolled {
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08) !important;
}

/* -------------------------------------------------------------------
 * 6. LOGO
 * ------------------------------------------------------------------- */
#logo {
	flex: 0 0 auto !important;
	display: block !important;
	width: auto !important;
	max-width: 220px !important;
	height: auto !important;
	margin: 0 !important;
	overflow: visible !important;
	/* Remove legacy inline-block vertical-align */
	vertical-align: unset !important;
}

#logo img {
	display: block !important;
	width: 210px !important;
	height: auto !important;
	margin-bottom: 4px !important;
}

#logo p {
	font-size: var(--text-xs) !important;
	color: var(--c-muted) !important;
	line-height: 1.35 !important;
	text-align: center !important;
	margin: 0 !important;
}

/* -------------------------------------------------------------------
 * 7. HEADER LINKS & SEARCH
 * ------------------------------------------------------------------- */

/* Remove absolute positioning — now a proper flex item */
.header_links {
	flex: 1 !important;
	position: static !important;
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: var(--sp-3) !important;
	justify-content: flex-end !important;
	margin: 0 !important;
	text-align: unset !important;
}

/* Search form: flex row so input + button never wrap or clip */
.header_links .search.header_search {
	flex: 1 1 auto !important;
	display: flex !important;
	align-items: stretch !important;
	width: auto !important;
	max-width: 440px !important;
	min-width: 160px !important;
	height: 38px !important;
	margin-bottom: 0 !important;
	border-radius: 24px !important;
	border: 1.5px solid var(--c-border) !important;
	overflow: hidden !important;
	background: var(--c-surface) !important;
	transition: border-color var(--t-base), box-shadow var(--t-base) !important;
}

.header_links .search.header_search:focus-within {
	border-color: var(--c-accent) !important;
	box-shadow: 0 0 0 3px var(--c-brand-bg) !important;
}

/* Text input: stretch to fill, no legacy fixed width */
.header_links .search.header_search input[type="text"] {
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0 !important;
	height: 100% !important;
	box-sizing: border-box !important;
	padding: 0 var(--sp-4) !important;
	border: none !important;
	outline: none !important;
	background: transparent !important;
	font-size: var(--text-sm) !important;
}

/* Submit button: auto width, never shrinks or clips */
.header_links .search.header_search input[type="submit"],
.header_links .search.header_search input[type="button"] {
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: 56px !important;
	height: 100% !important;
	padding: 0 var(--sp-4) !important;
	box-sizing: border-box !important;
	background: var(--c-accent) !important;
	color: #fff !important;
	border: none !important;
	cursor: pointer !important;
	font-size: var(--text-sm) !important;
	font-weight: 600 !important;
	transition: background-color var(--t-fast) !important;
}

.header_links .search.header_search input[type="submit"]:hover,
.header_links .search.header_search input[type="button"]:hover {
	background: var(--c-accent-hover) !important;
}

/* Auth links: no underline, consistent spacing */
.header_links .link_account,
.header_links .link_register,
.header_links .link_favorites {
	flex: 0 0 auto !important;
	white-space: nowrap !important;
	font-size: var(--text-sm) !important;
	text-decoration: none !important;
	color: var(--c-text) !important;
	padding: 0.35rem var(--sp-2) !important;
}

.header_links .link_account:hover,
.header_links .link_register:hover,
.header_links .link_favorites:hover {
	color: var(--c-accent) !important;
}

/* «Добавить рецепт» — акцентная кнопка */
.header_links .link_recipe {
	flex: 0 0 auto !important;
	white-space: nowrap !important;
	background: var(--c-accent) !important;
	color: #fff !important;
	border-radius: var(--r-sm) !important;
	padding: 0.4rem 0.875rem !important;
	font-size: var(--text-sm) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: background-color var(--t-fast) !important;
}

.header_links .link_recipe:hover {
	background: var(--c-accent-hover) !important;
	color: #fff !important;
}

/* -------------------------------------------------------------------
 * 8. NAVIGATION MENUS
 * ------------------------------------------------------------------- */

/* Desktop nav: подчёркивание на hover (не ломаем позиционирование) */
ul.menu_desktop > li > a {
	transition: color var(--t-fast) !important;
	position: relative !important;
}

ul.menu_desktop > li > a::after {
	content: "" !important;
	position: absolute !important;
	bottom: 0 !important;
	left: 0.75rem !important;
	right: 0.75rem !important;
	height: 2px !important;
	background: var(--c-accent) !important;
	border-radius: var(--r-full) !important;
	transform: scaleX(0) !important;
	transform-origin: left !important;
	transition: transform var(--t-base) !important;
}

ul.menu_desktop > li > a:hover::after,
ul.menu_desktop > li.current-menu-item > a::after,
ul.menu_desktop > li.current-menu-parent > a::after,
ul.menu_desktop > li.current-menu-ancestor > a::after {
	transform: scaleX(1) !important;
}

ul.menu_desktop > li > a:hover,
ul.menu_desktop > li.current-menu-item > a,
ul.menu_desktop > li.current-menu-parent > a,
ul.menu_desktop > li.current-menu-ancestor > a {
	color: var(--c-accent) !important;
}

/* Mobile menu */
ul.menu_mobile {
	border-radius: var(--r-md) !important;
}

/* -------------------------------------------------------------------
 * 9. BREADCRUMBS
 * ------------------------------------------------------------------- */
#content > .breadcrumbs {
	clear: both;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-1);
	margin-bottom: var(--sp-5);
	padding-top: var(--sp-5);
	font-size: var(--text-sm);
	color: var(--c-muted);
}

#content > .breadcrumbs a {
	color: var(--c-muted);
	text-decoration: none;
	transition: color var(--t-fast);
}

#content > .breadcrumbs a:hover {
	color: var(--c-accent);
}

/* -------------------------------------------------------------------
 * 10. RATING STARS
 * ------------------------------------------------------------------- */
.rating {
	display: inline-flex !important;
	gap: 1px !important;
	align-items: center !important;
	font-size: 0 !important;
	line-height: 1 !important;
}

.rating span {
	display: inline-block !important;
	width: auto !important;
	height: auto !important;
	background: none !important;
	background-image: none !important;
}

.rating span::before {
	content: "★" !important;
	font-size: 14px !important;
	line-height: 1 !important;
	color: var(--c-star-empty) !important;
	display: block !important;
	font-style: normal !important;
	font-weight: normal !important;
}

.rating span.active::before {
	color: var(--c-star) !important;
}

/* Larger stars in recipe header */
.recipe-page .rating span::before,
.single .rating span::before {
	font-size: 18px !important;
}

/* -------------------------------------------------------------------
 * 11. HOMEPAGE HERO: GALLERY / SLIDER
 *
 * Legacy CSS: .slider { float:left; width:460px; height:400px }
 *             .gallery .favorites { float:right; width:480px }
 *             → side-by-side layout intended for 960px+ content area
 *
 * Redesign: side-by-side flex layout.
 *   LEFT  → slider at native 460×400 — pixel-perfect, no upscaling
 *   RIGHT → 2-column favourites grid filling the remaining width
 *
 * jCarousel's reload_carousel() sets each li width via $(li).css('width', x).
 * We must NOT use width:100%!important on li — it fights the inline style.
 * ------------------------------------------------------------------- */
.gallery {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: var(--sp-4) !important;
	align-items: flex-start !important;
	margin: 0 0 var(--sp-6) 0 !important;
	overflow: visible !important;
}

/* ---- Slider: native image dimensions — no upscaling, razor-sharp ---- */
.gallery .slider {
	flex: 0 0 460px !important;
	width: 460px !important;
	height: 400px !important;
	float: none !important;
	margin-bottom: 0 !important;
	border-radius: var(--r-lg) !important;
	overflow: hidden !important;
	box-shadow: var(--shadow-md) !important;
	position: relative !important;
}

.gallery .slider .inner {
	float: none !important;
	width: 460px !important;
	height: 400px !important;
	overflow: hidden !important;
}

.gallery .slider .inner ul {
	height: 400px !important;
}

.gallery .slider .inner ul li {
	position: relative !important;
	height: 400px !important;
	overflow: hidden !important;
}

/* Images at 1:1 scale — perfectly sharp, no crop distortion */
.gallery .slider .inner ul li img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center center !important;
}

/* Slide title/info overlay */
.gallery .slider .information {
	background: linear-gradient(
		to top,
		rgba(15, 12, 10, 0.82) 0%,
		rgba(15, 12, 10, 0.4) 55%,
		transparent 100%
	) !important;
	padding: var(--sp-6) var(--sp-7) !important;
	border-radius: 0 0 var(--r-lg) var(--r-lg) !important;
}

.gallery .slider .information .title {
	font-size: clamp(1.15rem, 2vw, 1.65rem) !important;
	font-weight: 700 !important;
	line-height: var(--leading-snug) !important;
	margin-bottom: var(--sp-3) !important;
}

.gallery .slider .information .title a {
	color: #fff !important;
	text-decoration: none !important;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55) !important;
	transition: opacity var(--t-fast) !important;
}

.gallery .slider .information .title a:hover {
	opacity: 0.88 !important;
}

.gallery .slider .information .info {
	display: flex !important;
	gap: var(--sp-4) !important;
	align-items: center !important;
}

.gallery .slider .information .time {
	color: rgba(255, 255, 255, 0.9) !important;
	font-size: var(--text-sm) !important;
}

/* Slider arrows — floating controls */
.gallery .slider .slider_arrows {
	position: absolute !important;
	bottom: var(--sp-6) !important;
	right: var(--sp-6) !important;
	z-index: 10 !important;
	display: flex !important;
	gap: var(--sp-2) !important;
}

.gallery .slider .slider_arrows .arrow_l,
.gallery .slider .slider_arrows .arrow_r {
	width: 40px !important;
	height: 40px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: rgba(255, 255, 255, 0.92) !important;
	border-radius: var(--r-full) !important;
	box-shadow: var(--shadow-sm) !important;
	transition: background-color var(--t-fast), transform var(--t-fast) !important;
	cursor: pointer !important;
}

.gallery .slider .slider_arrows .arrow_l:hover,
.gallery .slider .slider_arrows .arrow_r:hover {
	background: #fff !important;
	transform: scale(1.1) !important;
}

/* -------------------------------------------------------------------
 * 12. HOMEPAGE: FAVORITES INSIDE GALLERY — overlay card design
 *
 * Legacy: .gallery .favorites { float:right; width:480px }
 *         .favorite { display:inline-block; width:220px; position:relative }
 *         .favorite .inner { position:absolute; bottom:15px }  ← overlay
 *         .favorite:after { gradient overlay }
 *
 * We override to: full-width 4-col grid, each card = full photo with
 * gradient + text overlay (keeps the original overlay aesthetic).
 * ------------------------------------------------------------------- */
.gallery .favorites {
	flex: 1 1 0 !important;
	float: none !important;
	width: auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	vertical-align: unset !important;
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: var(--sp-3) !important;
	align-content: start !important;
}

/* Each card: position:relative kept so :after overlay and .inner abs work */
.gallery .favorite {
	display: block !important;
	position: relative !important;
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	vertical-align: unset !important;
	border-radius: var(--r-md) !important;
	overflow: hidden !important;
	box-shadow: var(--shadow-sm) !important;
	transition: transform var(--t-base), box-shadow var(--t-base) !important;
	background: var(--c-900) !important;
}

.gallery .favorite:hover {
	transform: translateY(-4px) !important;
	box-shadow: var(--shadow-md) !important;
}

/* Thumbnail fills the card — 4 cards × 2 rows fit the 400px slider height */
.gallery .favorite .thumb,
.gallery .favorite > span.thumb {
	display: block !important;
	width: 100% !important;
	height: 178px !important;
	overflow: hidden !important;
	aspect-ratio: unset !important;
}

.gallery .favorite .thumb img,
.gallery .favorite > span.thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block !important;
	transition: transform var(--t-slow) !important;
}

.gallery .favorite:hover .thumb img,
.gallery .favorite:hover > span.thumb img {
	transform: scale(1.07) !important;
}

/* Text overlay — keep position:absolute (legacy), just polish it */
.gallery .favorite .inner {
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	padding: var(--sp-3) var(--sp-4) !important;
	z-index: 3 !important;
	display: block !important;
	flex: unset !important;
	background: none !important;
}

/* White title text over the dark gradient */
.gallery .favorite .title {
	font-size: var(--text-sm) !important;
	font-weight: 700 !important;
	line-height: var(--leading-snug) !important;
	margin-bottom: var(--sp-2) !important;
	color: #fff !important;
}

.gallery .favorite .title a {
	color: #fff !important;
	text-decoration: none !important;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	transition: opacity var(--t-fast) !important;
}

.gallery .favorite .title a:hover {
	opacity: 0.85 !important;
}

.gallery .favorite .info {
	display: flex !important;
	align-items: center !important;
	gap: var(--sp-3) !important;
	float: none !important;
	overflow: visible !important;
}

.gallery .favorite .time {
	color: rgba(255, 255, 255, 0.9) !important;
	font-size: var(--text-xs) !important;
}

/* Stars also white-ish on overlay */
.gallery .favorite .rating span::before {
	color: rgba(255, 255, 255, 0.45) !important;
}

.gallery .favorite .rating span.active::before {
	color: #ffd055 !important;
}

/* -------------------------------------------------------------------
 * 13. HOMEPAGE: FAVORITES OUTSIDE GALLERY (favorite2)
 * .gallery ~ .favorites = sibling after .gallery (CSS Level 2, safe)
 * These show as a 4-col grid of compact overlay cards too.
 * ------------------------------------------------------------------- */
.gallery ~ .favorites {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: var(--sp-3) !important;
	margin: var(--sp-4) 0 var(--sp-6) !important;
}

/* Make favorite2 look like the gallery favorites (overlay style),
   not horizontal mini-cards */
.favorite.favorite2 {
	display: block !important;
	position: relative !important;
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	vertical-align: unset !important;
	border-radius: var(--r-md) !important;
	overflow: hidden !important;
	box-shadow: var(--shadow-sm) !important;
	transition: transform var(--t-base), box-shadow var(--t-base) !important;
	background: var(--c-900) !important;
	padding: 0 !important;
	text-decoration: none !important;
	align-items: unset !important;
	gap: unset !important;
}

.favorite.favorite2:hover {
	transform: translateY(-4px) !important;
	box-shadow: var(--shadow-md) !important;
}

.favorite.favorite2 .thumb,
.favorite.favorite2 > span.thumb {
	display: block !important;
	width: 100% !important;
	height: 200px !important;
	overflow: hidden !important;
	aspect-ratio: unset !important;
	flex-shrink: unset !important;
}

.favorite.favorite2 .thumb img,
.favorite.favorite2 > span.thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block !important;
	transition: transform var(--t-slow) !important;
}

.favorite.favorite2:hover .thumb img,
.favorite.favorite2:hover > span.thumb img {
	transform: scale(1.07) !important;
}

/* favorite2 also needs :after gradient — reuse selector */
.favorite.favorite2::after {
	content: ' ' !important;
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	z-index: 2 !important;
	background: linear-gradient(to bottom, transparent 30%, rgba(0, 0, 0, 0.78) 100%) !important;
	pointer-events: none !important;
}

.favorite.favorite2 .inner {
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	padding: var(--sp-3) var(--sp-4) !important;
	z-index: 3 !important;
	min-width: unset !important;
	flex: unset !important;
}

.favorite.favorite2 .title {
	font-size: var(--text-sm) !important;
	font-weight: 700 !important;
	line-height: var(--leading-snug) !important;
	margin-bottom: var(--sp-2) !important;
	color: #fff !important;
}

.favorite.favorite2 .title a {
	color: #fff !important;
	text-decoration: none !important;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	transition: opacity var(--t-fast) !important;
}

.favorite.favorite2 .title a:hover {
	opacity: 0.85 !important;
}

.favorite.favorite2 .info {
	display: flex !important;
	align-items: center !important;
	gap: var(--sp-3) !important;
	float: none !important;
	overflow: visible !important;
}

.favorite.favorite2 .time {
	color: rgba(255, 255, 255, 0.9) !important;
	font-size: var(--text-xs) !important;
	margin-top: 0 !important;
}

.favorite.favorite2 .rating span::before {
	color: rgba(255, 255, 255, 0.45) !important;
}

.favorite.favorite2 .rating span.active::before {
	color: #ffd055 !important;
}

/* -------------------------------------------------------------------
 * 14. RECIPE CARDS — popular recipes news_box
 * Selector: main > section:not(.double_news) > .news_box
 * Targets the "Популярные рецепты" grid that sits inside <section>
 * inside <main>, excluding the .double_news <section>.
 * :not(.double_news) uses a simple class selector → valid in CSS Level 3.
 * ------------------------------------------------------------------- */
main > section:not(.double_news) > .news_box {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
	gap: var(--sp-5) !important;
	margin-bottom: var(--sp-8) !important;
}

main > section:not(.double_news) > .news_box .news {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--c-surface) !important;
	border: 1px solid var(--c-border) !important;
	border-radius: var(--r-md) !important;
	overflow: hidden !important;
	box-shadow: var(--shadow-xs) !important;
	transition: box-shadow var(--t-base), transform var(--t-base) !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
}

main > section:not(.double_news) > .news_box .news:hover {
	box-shadow: var(--shadow-md) !important;
	transform: translateY(-3px) !important;
}

/* Card image: aspect-ratio container — override legacy width:220px height:161px */
main > section:not(.double_news) > .news_box .news .thumb,
main > section:not(.double_news) > .news_box .news a.thumb {
	display: block !important;
	width: 100% !important;        /* override legacy width:220px */
	height: auto !important;       /* let aspect-ratio drive height */
	aspect-ratio: 4 / 3 !important;
	overflow: hidden !important;
	border-radius: 0 !important;
	flex-shrink: 0 !important;
	margin: 0 !important;          /* override legacy margin-bottom:9px */
}

main > section:not(.double_news) > .news_box .news .thumb img,
main > section:not(.double_news) > .news_box .news a.thumb img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;      /* override legacy min-height:161px */
	object-fit: cover !important;
	border-radius: 0 !important;
	transition: transform var(--t-slow) !important;
}

main > section:not(.double_news) > .news_box .news:hover .thumb img,
main > section:not(.double_news) > .news_box .news:hover a.thumb img {
	transform: scale(1.06) !important;
}

/* Card title */
main > section:not(.double_news) > .news_box .news .title {
	padding: var(--sp-4) var(--sp-4) var(--sp-2) !important;
	font-size: var(--text-base) !important;
	font-weight: 600 !important;
	line-height: var(--leading-snug) !important;
	margin: 0 !important;
	min-height: 0 !important;
}

main > section:not(.double_news) > .news_box .news .title a {
	color: var(--c-text) !important;
	text-decoration: none !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	transition: color var(--t-fast) !important;
}

main > section:not(.double_news) > .news_box .news .title a:hover {
	color: var(--c-accent) !important;
}

/* Card meta */
main > section:not(.double_news) > .news_box .news .info {
	display: flex !important;
	align-items: center !important;
	gap: var(--sp-3) !important;
	padding: var(--sp-2) var(--sp-4) var(--sp-4) !important;
	margin-top: auto !important;
	font-size: var(--text-xs) !important;
	color: var(--c-muted) !important;
	border-top: 0 !important;
}

main > section:not(.double_news) > .news_box .news .info .time {
	display: flex !important;
	align-items: center !important;
	gap: 3px !important;
}

/* -------------------------------------------------------------------
 * 15. SECTION TOPIC HEADERS
 * ------------------------------------------------------------------- */
.topic {
	margin: var(--sp-8) 0 var(--sp-5) !important;
	padding: 0 !important;
	background: transparent !important;
}

.topic h1,
.topic h2,
.topic > span {
	display: inline-block !important;
	font-size: var(--text-2xl) !important;
	font-weight: 700 !important;
	line-height: var(--leading-tight) !important;
	color: var(--c-text) !important;
	padding: 0 0 var(--sp-3) !important;
	position: relative !important;
	background: transparent !important;
}

.topic h1 {
	font-size: clamp(1.3rem, 4vw, 1.75rem) !important;
}

.topic h1::after,
.topic h2::after,
.topic > span::after {
	content: "" !important;
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important;
	width: 2.25rem !important;
	height: 3px !important;
	background: var(--c-accent) !important;
	border-radius: var(--r-full) !important;
}

/* -------------------------------------------------------------------
 * 16. HOME SEO BLOCK
 * ------------------------------------------------------------------- */
.home-seo {
	margin: var(--sp-10) 0 !important;
	padding: var(--sp-8) !important;
	background: var(--c-surface) !important;
	border: 1px solid var(--c-border) !important;
	border-radius: var(--r-xl) !important;
	box-shadow: var(--shadow-sm) !important;
}

.home-seo__header {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-4);
	margin-bottom: var(--sp-6);
}

.home-seo__h1 {
	font-size: clamp(1.5rem, 3.5vw, 2.15rem);
	line-height: var(--leading-tight);
	font-weight: 700;
	color: var(--c-text);
	margin: 0;
}

.home-seo__lead {
	margin: 0;
	color: var(--c-muted);
	font-size: var(--text-md);
	line-height: var(--leading-relaxed);
	max-width: 65ch;
}

.home-seo__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	align-items: center;
}

.home-seo__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.625rem 1.25rem;
	background: var(--c-accent);
	color: #fff;
	font-weight: 700;
	font-size: var(--text-sm);
	border-radius: var(--r-sm);
	text-decoration: none;
	transition: background-color var(--t-base), box-shadow var(--t-base);
}

.home-seo__btn:hover {
	background: var(--c-accent-hover);
	color: #fff;
	box-shadow: var(--shadow-brand);
}

.home-seo__link {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--c-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.home-seo__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-5);
	margin-top: var(--sp-6);
}

.home-seo__card {
	padding: var(--sp-5);
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
}

.home-seo__h2 {
	margin: 0 0 var(--sp-3);
	font-size: var(--text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--c-muted);
}

.home-seo__h2--sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.home-seo__list {
	margin: 0;
	padding-left: 1.25rem;
	color: var(--c-text);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
}

.home-seo__list li + li {
	margin-top: var(--sp-2);
}

.home-seo__pills {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.home-seo__pills a {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	border-radius: var(--r-full);
	border: 1px solid var(--c-brand-border);
	background: var(--c-brand-bg);
	color: var(--c-brand-dark);
	text-decoration: none;
	font-size: var(--text-sm);
	font-weight: 600;
	transition: border-color var(--t-fast), background-color var(--t-fast);
}

.home-seo__pills a:hover {
	border-color: var(--c-accent);
	background: rgba(196, 92, 38, 0.12);
	color: var(--c-accent);
}

.home-seo__terms {
	margin-top: var(--sp-6);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--c-border);
}

.home-seo__term-list {
	list-style: none;
	margin: var(--sp-2) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-5);
}

.home-seo__term-list a {
	font-size: var(--text-sm);
	color: var(--c-muted);
	text-decoration: none;
	border-bottom: 1px solid var(--c-brand-border);
	transition: color var(--t-fast), border-color var(--t-fast);
}

.home-seo__term-list a:hover {
	color: var(--c-accent);
	border-bottom-color: var(--c-accent);
}

.home-seo__content {
	margin-top: var(--sp-6);
}

/* -------------------------------------------------------------------
 * 17. DOUBLE NEWS SECTION
 * ------------------------------------------------------------------- */
.double_news {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: var(--sp-8) !important;
	margin: var(--sp-8) 0 !important;
	align-items: stretch !important;
}

/* Left: blog advices — stretches full height, subtle bg fills the gap */
.double_news .advices {
	min-width: 0 !important;
	background: var(--c-50, #fafaf8) !important;
	border-radius: var(--r-md) !important;
	padding: var(--sp-4) var(--sp-5) !important;
}

/* Reset topic top-margin inside double_news columns so both headings align */
.double_news .advices > .topic {
	margin-top: 0 !important;
}

.double_news .advice {
	display: flex !important;
	gap: var(--sp-4) !important;
	padding: var(--sp-4) 0 !important;
	border-bottom: 1px solid var(--c-border) !important;
	align-items: flex-start !important;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

.double_news .advice:last-child {
	border-bottom: none !important;
}

.double_news .advice .thumb {
	flex-shrink: 0 !important;
	width: 110px !important;
	height: 90px !important;
	border-radius: var(--r-sm) !important;
	overflow: hidden !important;
	display: block !important;
	float: none !important;
	margin: 0 !important;
}

.double_news .advice .thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	border-radius: var(--r-sm) !important;
}

/* Legacy .advice .thumb + .inner { margin-left: 160px } causes the gap — reset it */
.double_news .advice .inner,
.double_news .advice .thumb + .inner {
	flex: 1 !important;
	min-width: 0 !important;
	margin-left: 0 !important;
}

.double_news .advice .title {
	font-size: var(--text-sm) !important;
	font-weight: 600 !important;
	line-height: var(--leading-snug) !important;
	margin-bottom: var(--sp-1) !important;
}

.double_news .advice .title a {
	color: var(--c-text) !important;
	text-decoration: none !important;
	transition: color var(--t-fast) !important;
}

.double_news .advice .title a:hover {
	color: var(--c-accent) !important;
}

.double_news .advice .text {
	font-size: var(--text-xs) !important;
	color: var(--c-muted) !important;
	line-height: var(--leading-normal) !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	margin-bottom: var(--sp-1) !important;
}

.double_news .advice .info {
	display: flex !important;
	gap: var(--sp-3) !important;
	font-size: var(--text-xs) !important;
	color: var(--c-subtle) !important;
	float: none !important;
	overflow: visible !important;
	min-width: 0 !important;
	border-top: none !important;
	padding-top: 0 !important;
}

/* Right: recipe news_box */
.double_news .news_box {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: var(--sp-4) !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0 !important;
	/* Override the inline-block hack */
	margin-right: 0 !important;
}

.double_news .news_box > .topic {
	grid-column: 1 / -1 !important;
	margin-top: 0 !important;
	margin-bottom: var(--sp-3) !important;
}

.double_news .news_box .news {
	display: flex !important;
	flex-direction: column !important;
	background: var(--c-surface) !important;
	border: 1px solid var(--c-border) !important;
	border-radius: var(--r-md) !important;
	overflow: hidden !important;
	box-shadow: var(--shadow-xs) !important;
	transition: box-shadow var(--t-base), transform var(--t-base) !important;

	/* Override legacy inline-block layout */
	display: flex !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	vertical-align: unset !important;
	float: none !important;
	font-size: var(--text-base) !important;
}

.double_news .news_box .news:hover {
	box-shadow: var(--shadow-md) !important;
	transform: translateY(-2px) !important;
}

.double_news .news_box .news .thumb,
.double_news .news_box .news a.thumb {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 3 !important;
	overflow: hidden !important;
	border-radius: 0 !important;
	margin: 0 !important;
}

.double_news .news_box .news .thumb img,
.double_news .news_box .news a.thumb img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	object-fit: cover !important;
	transition: transform var(--t-slow) !important;
	border-radius: 0 !important;
}

.double_news .news_box .news:hover .thumb img,
.double_news .news_box .news:hover a.thumb img {
	transform: scale(1.06) !important;
}

.double_news .news_box .news .title {
	padding: var(--sp-3) !important;
	font-size: var(--text-sm) !important;
	font-weight: 600 !important;
	line-height: var(--leading-snug) !important;
	margin: 0 !important;
	min-height: 0 !important;
}

.double_news .news_box .news .title a {
	color: var(--c-text) !important;
	text-decoration: none !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	transition: color var(--t-fast) !important;
}

.double_news .news_box .news .title a:hover {
	color: var(--c-accent) !important;
}

.double_news .news_box .news .info {
	display: flex !important;
	align-items: center !important;
	gap: var(--sp-2) !important;
	padding: var(--sp-2) var(--sp-3) var(--sp-3) !important;
	font-size: var(--text-xs) !important;
	color: var(--c-muted) !important;
	margin-top: auto !important;
	border-top: 1px solid var(--c-border) !important;

	/* Override old inline-block hack */
	overflow: unset !important;
	float: none !important;
}

/* -------------------------------------------------------------------
 * 18. AUTHORS SECTION
 * ------------------------------------------------------------------- */
.authors {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: var(--sp-5) !important;
	margin: var(--sp-8) 0 !important;
	padding: var(--sp-8) !important;
	background: var(--c-surface) !important;
	border: 1px solid var(--c-border) !important;
	border-radius: var(--r-xl) !important;
	box-shadow: var(--shadow-sm) !important;
	font-size: 1rem !important;
	line-height: var(--leading-normal) !important;
	overflow: visible !important;
}

.authors .author {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
	width: auto !important;
	margin: 0 !important;
	padding: var(--sp-5) var(--sp-4) !important;
	color: var(--c-text) !important;
	text-decoration: none !important;
	border-radius: var(--r-lg) !important;
	transition: background-color var(--t-base), transform var(--t-base) !important;
}

.authors .author:hover {
	background: var(--c-brand-bg) !important;
	transform: translateY(-2px) !important;
	box-shadow: none !important;
	color: var(--c-text) !important;
}

.authors .thumb {
	margin-bottom: var(--sp-4) !important;
}

.authors .avatar {
	width: 96px !important;
	height: 96px !important;
	max-width: none !important;
	border-radius: var(--r-full) !important;
	object-fit: cover !important;
	display: block !important;
	border: 3px solid var(--c-surface) !important;
	box-shadow: 0 0 0 2px var(--c-border) !important;
	transition: box-shadow var(--t-base) !important;
}

.authors .author:hover .avatar {
	box-shadow: 0 0 0 3px var(--c-accent) !important;
	border-color: var(--c-brand-bg) !important;
}

.authors .name {
	font-size: var(--text-base) !important;
	font-weight: 700 !important;
	color: var(--c-text) !important;
	margin-bottom: var(--sp-1) !important;
}

.authors .author:hover .name {
	color: var(--c-accent) !important;
}

.authors .posts {
	font-size: var(--text-xs) !important;
	color: var(--c-muted) !important;
}

/* -------------------------------------------------------------------
 * 19. RECIPE SINGLE PAGE
 * ------------------------------------------------------------------- */
.recipe-page {
	max-width: none;
	margin-inline: 0;
	clear: both;
}

/* Main recipe card */
.recipe-page .single {
	background: var(--c-surface);
	border-radius: var(--r-xl);
	box-shadow: var(--shadow-md);
	padding: var(--sp-8);
	margin-bottom: var(--sp-8);
	border: 1px solid var(--c-border);
}

/* Favorite button */
.recipe-page .add_favorite {
	display: inline-flex !important;
	align-items: center !important;
	gap: var(--sp-2) !important;
	padding: var(--sp-2) var(--sp-4) !important;
	background: var(--c-surface) !important;
	border: 1.5px solid var(--c-border) !important;
	border-radius: var(--r-full) !important;
	font-size: var(--text-sm) !important;
	font-weight: 500 !important;
	color: var(--c-muted) !important;
	cursor: pointer !important;
	transition: all var(--t-base) !important;
	margin-bottom: var(--sp-5) !important;
	float: right !important;
}

.recipe-page .add_favorite::before {
	content: "♡" !important;
}

.recipe-page .add_favorite.disabled {
	background: var(--c-brand-bg) !important;
	border-color: var(--c-brand-border) !important;
	color: var(--c-accent) !important;
}

.recipe-page .add_favorite.disabled::before {
	content: "♥" !important;
}

.recipe-page .add_favorite:hover:not(.disabled) {
	border-color: var(--c-accent) !important;
	color: var(--c-accent) !important;
}

/* Title */
.recipe-page .single_top .heading,
.recipe-page h1.heading {
	font-size: clamp(1.5rem, 3.5vw, 2.25rem) !important;
	font-weight: 700 !important;
	line-height: var(--leading-tight) !important;
	color: var(--c-text) !important;
	margin: 0 0 var(--sp-5) !important;
	padding-left: 0 !important;
	clear: both !important;
}

.recipe-page .single_top .heading::before,
.recipe-page h1.heading::before {
	display: none !important;
}

/* Lead */
.recipe-lead {
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
	color: var(--c-muted);
	margin: 0 0 var(--sp-6);
	padding: var(--sp-4) var(--sp-5);
	background: linear-gradient(135deg, rgba(196, 92, 38, 0.06), rgba(196, 92, 38, 0.02));
	border-left: 3px solid var(--c-accent);
	border-radius: 0 var(--r-md) var(--r-md) 0;
}

/* Key facts */
.recipe-keyfacts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-6);
	margin: var(--sp-5) 0;
	padding: var(--sp-4) var(--sp-5);
	background: var(--c-bg);
	border-radius: var(--r-md);
	border: 1px solid var(--c-border);
	font-size: var(--text-sm);
}

.recipe-keyfacts__item {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	color: var(--c-muted);
}

.recipe-keyfacts__item strong {
	color: var(--c-text);
	font-weight: 600;
}

/* Body: clearfix */
.recipe-page .single_body {
	display: block;
	overflow: hidden;
}

.recipe-page .single_body::after {
	content: "";
	display: table;
	clear: both;
}

@media screen and (min-width: 1001px) {
	.recipe-page .single_body .thumb,
	.recipe-page .single_body > a.thumb {
		float: left;
		max-width: 45%;
		margin-right: var(--sp-6);
		margin-bottom: var(--sp-4);
	}

	.recipe-page .single_body .thumb img,
	.recipe-page .single_body > a.thumb img {
		border-radius: var(--r-lg) !important;
		box-shadow: var(--shadow-md) !important;
		width: 100% !important;
		height: auto !important;
		display: block !important;
	}

	.recipe-page .single_body .thumb + .inner {
		overflow: hidden;
	}
}

@media screen and (max-width: 1000px) {
	.recipe-page .single_body .thumb,
	.recipe-page .single_body > a.thumb {
		float: none;
		display: block;
		margin: 0 auto var(--sp-5) !important;
		max-width: 100%;
	}

	.recipe-page .single_body .thumb img,
	.recipe-page .single_body > a.thumb img {
		border-radius: var(--r-lg) !important;
		width: 100% !important;
		height: auto !important;
		box-shadow: var(--shadow-md) !important;
	}

	.recipe-page .single_body .thumb + .inner {
		margin-left: 0 !important;
		overflow: visible;
	}
}

/* Author / meta */
.recipe-page .single_body .inner .info {
	background: transparent !important;
	padding: 0 !important;
	border-radius: 0 !important;
	font-size: var(--text-sm);
	color: var(--c-muted);
}

.recipe-page .single_body .inner .info p {
	margin-bottom: var(--sp-2);
}

.recipe-author a {
	font-weight: 600;
	color: var(--c-accent);
}

/* Recipe intro text */
.recipe-page .text.content {
	font-size: var(--text-md);
	line-height: var(--leading-relaxed) !important;
	color: var(--c-text);
}

.recipe-page .text.content p {
	margin-bottom: var(--sp-4);
}

/* YouTube */
.recipe-page .youtube-embed,
.youtube-embed {
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	margin: var(--sp-6) 0;
}

.recipe-page .youtube-embed iframe,
.youtube-embed iframe {
	border: 0;
}

/* Section heading inside recipe */
.recipe-page .youtube-block .single_title,
.recipe-page .single_title {
	font-size: var(--text-xl) !important;
	font-weight: 700 !important;
	color: var(--c-text) !important;
	margin-bottom: var(--sp-4) !important;
}

/* -------------------------------------------------------------------
 * 20. INGREDIENTS / COMPOSITION
 * ------------------------------------------------------------------- */
.composition {
	background: var(--c-surface);
	border-radius: var(--r-xl);
	border: 1px solid var(--c-border);
	padding: var(--sp-8);
	margin-bottom: var(--sp-8);
	box-shadow: var(--shadow-sm);
}

.composition .composition_top {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--sp-4);
	margin-bottom: var(--sp-6);
	padding-bottom: var(--sp-5);
	border-bottom: 1px solid var(--c-border);
}

.composition .single_title {
	font-size: var(--text-xl) !important;
	font-weight: 700 !important;
	color: var(--c-text) !important;
	margin: 0 !important;
	line-height: var(--leading-tight) !important;
}

.composition select.serving {
	padding: var(--sp-2) var(--sp-4);
	font-size: var(--text-sm);
	border: 1px solid var(--c-border);
	border-radius: var(--r-sm);
	background: var(--c-bg);
	color: var(--c-text);
	font-family: var(--font);
	cursor: pointer;
	transition: border-color var(--t-fast);
	margin-top: var(--sp-1);
}

.composition select.serving:focus {
	outline: 2px solid var(--c-accent);
	border-color: var(--c-accent);
}

/* =======================================================================
 * INGREDIENTS SECTION
 *
 * Two rendering modes depending on which ACF field is filled:
 *
 *   composition--rich  -> ingredients_text (rich HTML: h2/h3/ul/li)
 *                         .item--nutrients = horizontal stats bar
 *                         .ing-rich-content = 2-column ingredient groups
 *
 *   composition--cards -> ingredients (ACF repeater) = stacked group cards
 *                         .item = ingredient group card
 *                         .item--header = full-width section divider
 * ===================================================================== */

/* Reset legacy .inner overflow/margin hacks */
.composition .inner {
	display: block !important;
	overflow: visible !important;
	margin: 0 !important;
	position: static !important;
	padding-top: 0 !important;
}

/* Kill legacy bullets everywhere in .composition */
.composition ul li::before,
.composition .item li::before {
	display: none !important;
	content: none !important;
}

/* Bold quantity values always orange */
.composition b,
.composition ul li b {
	font-weight: 700 !important;
	color: var(--c-accent) !important;
}

/* =======================================================================
 * NUTRIENTS STRIP  (.item--nutrients)
 * Full-width horizontal bar showing calories/macros at a glance
 * ===================================================================== */
.composition .item--nutrients {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	margin: 0 0 var(--sp-6) !important;
	background: var(--c-surface) !important;
	border: 1px solid var(--c-border) !important;
	border-top: 3px solid var(--c-accent) !important;
	border-radius: var(--r-md) !important;
	padding: 0 !important;
	overflow: hidden !important;
}

.composition .item--nutrients .title {
	display: block !important;
	font-size: 0.62rem !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	color: var(--c-accent) !important;
	background: rgba(196, 92, 38, 0.06) !important;
	padding: var(--sp-2) var(--sp-5) !important;
	margin: 0 !important;
	border-bottom: 1px solid rgba(196, 92, 38, 0.15) !important;
}

/* Macro list: inline pills in a flex row */
.composition .item--nutrients ul {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0 !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.composition .item--nutrients li {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.3em !important;
	font-size: var(--text-sm) !important;
	line-height: 1 !important;
	padding: var(--sp-3) var(--sp-5) !important;
	border-right: 1px solid var(--c-border) !important;
	border-bottom: none !important;
	position: static !important;
	margin: 0 !important;
}

.composition .item--nutrients li:last-child {
	border-right: none !important;
}

.composition .item--nutrients li::before {
	display: none !important;
	content: none !important;
}

.composition .item--nutrients li span {
	color: var(--c-text-light, #666) !important;
}

.composition .item--nutrients li b {
	font-weight: 700 !important;
	color: var(--c-accent) !important;
}

@media screen and (max-width: 600px) {
	.composition .item--nutrients li {
		padding: var(--sp-2) var(--sp-3) !important;
		font-size: 0.78rem !important;
	}
}

/* =======================================================================
 * RICH-TEXT INGREDIENTS  (.ing-rich-content)
 * Used when the recipe has ingredients_text (HTML field with h2/h3/ul/li).
 * Two-column layout via CSS columns so each h3+ul group stays together.
 * ===================================================================== */
.composition .ing-rich-content {
	display: block;
	width: 100%;
	column-count: 2;
	column-gap: var(--sp-8);
}

/* Hide the top-level "Ingredients" H2 - it duplicates the section heading */
.composition .ing-rich-content > h2:first-child {
	display: none;
}

/* Group headers: h2 and h3 become orange uppercase labels */
.composition .ing-rich-content h2,
.composition .ing-rich-content h3 {
	font-size: 0.68rem !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	color: var(--c-accent) !important;
	margin: 0 0 var(--sp-3) !important;
	padding-bottom: var(--sp-2) !important;
	border-bottom: 2px solid rgba(196, 92, 38, 0.25) !important;
	/* Keep each heading glued to its following list */
	break-after: avoid !important;
	page-break-after: avoid !important;
}

/* Ingredient lists */
.composition .ing-rich-content ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 0 var(--sp-6) !important;
	break-before: avoid !important;
	page-break-before: avoid !important;
}

.composition .ing-rich-content li {
	display: block !important;
	padding: 0.4rem 0 !important;
	border-bottom: 1px solid var(--c-100, #f5f2ef) !important;
	font-size: var(--text-sm) !important;
	line-height: 1.55 !important;
	position: static !important;
	margin: 0 !important;
	break-inside: avoid !important;
}

.composition .ing-rich-content li:last-child {
	border-bottom: none !important;
}

.composition .ing-rich-content li::before {
	display: none !important;
	content: none !important;
}

/* Mobile: single column */
@media screen and (max-width: 640px) {
	.composition .ing-rich-content {
		column-count: 1;
	}
}

/* =======================================================================
 * ACF REPEATER INGREDIENT CARDS  (composition--cards mode)
 * Each .item = one ingredient group card.
 * .item--header = full-width section divider (title only, no list).
 * ===================================================================== */

.composition--cards .item {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	margin: 0 0 var(--sp-4) !important;
	background: var(--c-surface) !important;
	border: 1px solid var(--c-border) !important;
	border-top: 3px solid var(--c-accent) !important;
	border-radius: var(--r-md) !important;
	padding: 0 !important;
	overflow: hidden !important;
}

.composition--cards .item .title {
	display: block !important;
	font-size: 0.65rem !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.09em !important;
	color: var(--c-accent) !important;
	background: rgba(196, 92, 38, 0.06) !important;
	padding: var(--sp-2) var(--sp-4) !important;
	margin: 0 !important;
	border-bottom: 1px solid rgba(196, 92, 38, 0.18) !important;
}

.composition--cards ul {
	list-style: none !important;
	padding: 0 var(--sp-4) var(--sp-3) !important;
	margin: 0 !important;
}

.composition--cards ul li {
	display: block !important;
	padding: 0.4rem 0 !important;
	border-bottom: 1px solid var(--c-100, #f5f2ef) !important;
	font-size: var(--text-sm) !important;
	line-height: 1.5 !important;
	position: static !important;
	margin: 0 !important;
}

.composition--cards ul li:last-child {
	border-bottom: none !important;
}

.composition--cards ul li span,
.composition--cards .recipe-ingredient-line {
	display: inline !important;
	color: var(--c-text) !important;
}

/* Full-width section divider */
.composition--cards .item--header {
	background: none !important;
	border: none !important;
	border-bottom: 2px solid var(--c-200, #e8e3de) !important;
	border-radius: 0 !important;
	padding: 0 0 var(--sp-2) !important;
	overflow: visible !important;
	margin-bottom: var(--sp-4) !important;
}

.composition--cards .item--header .title {
	font-size: var(--text-base) !important;
	font-weight: 700 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: var(--c-text) !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
}

/* -------------------------------------------------------------------
 * 21. RECIPE STEPS
 * ------------------------------------------------------------------- */
.recipe {
	background: var(--c-surface);
	border-radius: var(--r-xl);
	border: 1px solid var(--c-border);
	padding: var(--sp-8);
	margin-bottom: var(--sp-8);
	box-shadow: var(--shadow-sm);
}

.recipe .single_title {
	font-size: var(--text-xl) !important;
	font-weight: 700 !important;
	color: var(--c-text) !important;
	margin: 0 0 var(--sp-6) !important;
	padding-bottom: var(--sp-5) !important;
	border-bottom: 1px solid var(--c-border) !important;
	line-height: var(--leading-tight) !important;
}

.recipe .step {
	display: block !important;
	margin: 0 0 var(--sp-8) !important;
	padding-bottom: var(--sp-6) !important;
	border-bottom: 1px solid var(--c-border) !important;
	overflow: hidden !important;
}

.recipe .step:last-child {
	border-bottom: none !important;
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

.recipe .step::after {
	content: "";
	display: table;
	clear: both;
}

/* Step number badge */
.recipe .step .num {
	display: flex !important;
	align-items: center !important;
	gap: var(--sp-3) !important;
	font-size: var(--text-sm) !important;
	font-weight: 700 !important;
	color: var(--c-accent) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	margin-bottom: var(--sp-4) !important;
}

.recipe .step .num::before {
	content: "" !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 2rem !important;
	height: 2rem !important;
	background: var(--c-accent) !important;
	border-radius: var(--r-full) !important;
	flex-shrink: 0 !important;
}

/* Step image */
.recipe .step .thumb {
	display: block !important;
	float: left !important;
	width: min(280px, 42%) !important;
	max-width: 300px !important;
	margin: 0 var(--sp-5) var(--sp-4) 0 !important;
	vertical-align: unset !important;
	overflow: hidden !important;
	border-radius: var(--r-md) !important;
	box-shadow: var(--shadow-sm) !important;
}

.recipe .step .thumb img {
	display: block !important;
	width: 100% !important;
	max-width: 300px !important;
	height: auto !important;
	border-radius: var(--r-md) !important;
	box-shadow: none !important;
	transition: transform var(--t-slow) !important;
}

.recipe .step .thumb:hover img {
	transform: scale(1.02) !important;
}

/* Step text container */
.recipe .step .inner {
	display: block !important;
	float: none !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	overflow: hidden !important;
	vertical-align: unset !important;
	box-sizing: border-box !important;
}

.recipe .step .text {
	font-size: var(--text-md);
	line-height: var(--leading-relaxed);
	color: var(--c-text);
	word-wrap: break-word;
	overflow-wrap: break-word;
}

@media screen and (max-width: 600px) {
	.recipe .step .thumb {
		float: none !important;
		width: 100% !important;
		max-width: none !important;
		margin-right: 0 !important;
		margin-bottom: var(--sp-4) !important;
	}

	.recipe .step .thumb img {
		width: 100% !important;
		max-width: none !important;
	}
}

/* -------------------------------------------------------------------
 * 21b. AFTER-RECIPE DESC BLOCK  (.recipe > .text)
 *
 * The ACF `desc` field outputs HTML (h2/h3 + ul/li + p) directly
 * into a <div class="text"> at the bottom of <section class="recipe">.
 * We target it with .recipe > .text to avoid affecting step texts.
 * ------------------------------------------------------------------- */
.recipe > .text {
	margin-top: var(--sp-8) !important;
	padding-top: var(--sp-8) !important;
	border-top: 1px solid var(--c-border) !important;
	/* Two balanced columns; h2 + ul pairs stay together via break rules */
	column-count: 2 !important;
	column-gap: var(--sp-8) !important;
}

/* Section headers (Полезные советы, Вариации, С чем подавать…) */
.recipe > .text h2,
.recipe > .text h3 {
	display: block !important;
	font-size: 0.7rem !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.09em !important;
	color: var(--c-text) !important;
	margin: 0 0 0 !important;
	padding: var(--sp-3) var(--sp-4) !important;
	background: var(--c-50, #fafaf8) !important;
	border-left: 3px solid var(--c-accent) !important;
	border-radius: 0 var(--r-sm) var(--r-sm) 0 !important;
	/* Keep heading glued to its following list */
	break-after: avoid !important;
	page-break-after: avoid !important;
}

/* Bullet lists in desc block */
.recipe > .text ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 0 var(--sp-8) !important;
	break-before: avoid !important;
	page-break-before: avoid !important;
}

.recipe > .text li {
	position: relative !important;
	padding: 0.45rem 0 0.45rem var(--sp-5) !important;
	border-bottom: 1px solid var(--c-100, #f5f2ef) !important;
	font-size: var(--text-sm) !important;
	line-height: 1.6 !important;
	color: var(--c-text) !important;
	break-inside: avoid !important;
}

.recipe > .text li:last-child {
	border-bottom: none !important;
}

/* Orange dot bullet */
.recipe > .text li::before {
	content: '' !important;
	position: absolute !important;
	left: 0 !important;
	top: 0.75em !important;
	width: 6px !important;
	height: 6px !important;
	border-radius: 50% !important;
	background: var(--c-accent) !important;
}

/* Bold labels inside list items (Маринад заранее:, Проверка готовности: …) */
.recipe > .text li strong,
.recipe > .text li b {
	font-weight: 700 !important;
	color: var(--c-text) !important;
}

/* Paragraphs (e.g. "Похожие рецепты: …") */
.recipe > .text p {
	font-size: var(--text-sm) !important;
	color: var(--c-muted, #888) !important;
	font-style: italic !important;
	line-height: 1.6 !important;
	margin: 0 0 var(--sp-6) !important;
	padding: var(--sp-3) var(--sp-4) !important;
	background: var(--c-50, #fafaf8) !important;
	border-radius: var(--r-sm) !important;
	break-inside: avoid !important;
}

@media screen and (max-width: 640px) {
	.recipe > .text {
		column-count: 1 !important;
	}
}

/* -------------------------------------------------------------------
 * 21c. ARTICLE / TIPS CONTENT  (single.php → .content)
 *
 * Rich editorial content: headings, paragraphs, ul/ol, images,
 * blockquotes, tables. Overrides legacy style.css which has
 * font-weight:normal on headings and default list-style bullets.
 * ------------------------------------------------------------------- */

/* ── Base typography ─────────────────────────────────────────────── */
.content {
	font-size: var(--text-md, 1rem) !important;
	line-height: 1.8 !important;
	color: var(--c-text) !important;
	margin-bottom: var(--sp-8) !important;
}

.content p {
	margin-bottom: var(--sp-5) !important;
	line-height: 1.8 !important;
}

/* ── Headings ────────────────────────────────────────────────────── */
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--c-text) !important;
	margin-top: var(--sp-10, 2.5rem) !important;
	margin-bottom: var(--sp-4) !important;
}

/* H2 — major sections with orange left stripe */
.content h2 {
	font-size: clamp(1.05rem, 2.5vw, 1.2rem) !important;
	padding: var(--sp-4) var(--sp-5) !important;
	background: var(--c-50, #fafaf8) !important;
	border-left: 4px solid var(--c-accent) !important;
	border-radius: 0 var(--r-md) var(--r-md) 0 !important;
	text-transform: none !important;
}

/* H3 — sub-sections with bottom rule */
.content h3 {
	font-size: clamp(1rem, 2vw, 1.1rem) !important;
	border-bottom: 2px solid var(--c-100, #f0ece8) !important;
	padding-bottom: var(--sp-2) !important;
}

.content h4 {
	font-size: var(--text-md) !important;
	color: var(--c-accent) !important;
}

/* First heading: less top margin */
.content > h2:first-child,
.content > h3:first-child {
	margin-top: var(--sp-6) !important;
}

/* ── Images ──────────────────────────────────────────────────────── */
.content img {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: 380px !important;
	object-fit: cover !important;
	object-position: center !important;
	border-radius: var(--r-lg) !important;
	margin: var(--sp-6) 0 !important;
	box-shadow: 0 4px 20px rgba(0,0,0,0.10) !important;
}

@media screen and (max-width: 640px) {
	.content img {
		max-height: 240px !important;
	}
}

/* ── Unordered lists ─────────────────────────────────────────────── */
.content ul {
	list-style: none !important;
	margin: 0 0 var(--sp-6) !important;
	padding: 0 !important;
}

.content ul li {
	position: relative !important;
	padding: 0.5rem 0 0.5rem var(--sp-6) !important;
	border-bottom: 1px solid var(--c-100, #f5f2ef) !important;
	font-size: var(--text-md) !important;
	line-height: 1.65 !important;
	margin: 0 !important;
}

.content ul li:last-child {
	border-bottom: none !important;
}

/* Orange dot */
.content ul li::before {
	content: '' !important;
	position: absolute !important;
	left: var(--sp-1) !important;
	top: 0.92em !important;
	width: 7px !important;
	height: 7px !important;
	border-radius: 50% !important;
	background: var(--c-accent) !important;
	display: block !important;
}

/* ── Ordered lists (numbered steps) ─────────────────────────────── */
.content ol {
	list-style: none !important;
	margin: 0 0 var(--sp-6) !important;
	padding: 0 !important;
	counter-reset: step-counter !important;
}

.content ol li {
	position: relative !important;
	padding: var(--sp-3) var(--sp-3) var(--sp-3) 3rem !important;
	border-bottom: 1px solid var(--c-100, #f5f2ef) !important;
	font-size: var(--text-md) !important;
	line-height: 1.65 !important;
	margin: 0 !important;
	counter-increment: step-counter !important;
}

.content ol li:last-child {
	border-bottom: none !important;
}

/* Orange numbered badge */
.content ol li::before {
	content: counter(step-counter) !important;
	position: absolute !important;
	left: 0 !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 2rem !important;
	height: 2rem !important;
	border-radius: 50% !important;
	background: var(--c-accent) !important;
	color: #fff !important;
	font-size: 0.72rem !important;
	font-weight: 800 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
}

/* Bold/strong inside list items */
.content li strong,
.content li b {
	font-weight: 700 !important;
	color: var(--c-text) !important;
}

/* ── Blockquote ──────────────────────────────────────────────────── */
.content blockquote {
	background: var(--c-50, #fafaf8) !important;
	border-left: 4px solid var(--c-accent) !important;
	border-radius: 0 var(--r-md) var(--r-md) 0 !important;
	padding: var(--sp-5) var(--sp-6) !important;
	margin: var(--sp-6) 0 !important;
	font-style: italic !important;
	color: var(--c-text-light, #555) !important;
	font-size: var(--text-md) !important;
	line-height: 1.7 !important;
	text-align: left !important;
}

.content blockquote p:last-child {
	margin-bottom: 0 !important;
}

/* ── Tables ──────────────────────────────────────────────────────── */
.content table {
	width: 100% !important;
	border-collapse: collapse !important;
	font-size: var(--text-sm) !important;
	margin-bottom: var(--sp-6) !important;
	border-radius: var(--r-md) !important;
	overflow: hidden !important;
	box-shadow: var(--shadow-sm) !important;
}

.content th {
	background: var(--c-accent) !important;
	color: #fff !important;
	font-weight: 700 !important;
	padding: var(--sp-3) var(--sp-4) !important;
	text-align: left !important;
}

.content td {
	padding: var(--sp-3) var(--sp-4) !important;
	border-bottom: 1px solid var(--c-100) !important;
}

.content tr:last-child td {
	border-bottom: none !important;
}

.content tr:nth-child(even) td {
	background: var(--c-50) !important;
}

/* ── Mobile adjustments ──────────────────────────────────────────── */
@media screen and (max-width: 640px) {
	.content h2 {
		font-size: 1rem !important;
		padding: var(--sp-3) var(--sp-4) !important;
	}

	.content ol li {
		padding-left: 2.75rem !important;
	}
}

/* -------------------------------------------------------------------
 * 22. RECIPE OUTRO & SOCIAL SHARE
 * ------------------------------------------------------------------- */
.recipe-outro {
	display: block !important;
	font-size: var(--text-sm) !important;
	color: var(--c-muted) !important;
	font-style: normal !important;
	margin: var(--sp-6) 0 !important;
	padding: var(--sp-4) var(--sp-5) !important;
	background: var(--c-50, #fafaf8) !important;
	border-left: 3px solid var(--c-300, #d6cfc6) !important;
	border-radius: 0 var(--r-sm) var(--r-sm) 0 !important;
	line-height: var(--leading-relaxed) !important;
}

.social.social-likes {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: var(--sp-3) !important;
	margin: var(--sp-8) 0 !important;
	padding: var(--sp-5) 0 !important;
	border-top: 1px solid var(--c-border) !important;
	border-bottom: 1px solid var(--c-border) !important;
	clear: both !important;
}

.social.social-likes .tags {
	margin-left: auto;
	font-size: var(--text-sm);
	color: var(--c-muted);
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	align-items: center;
}

.social.social-likes .tags a {
	color: var(--c-700);
	text-decoration: none;
	padding: 0.2rem 0.55rem;
	border-radius: var(--r-sm);
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	font-size: var(--text-xs);
	font-weight: 500;
	transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.social.social-likes .tags a:hover {
	background: var(--c-brand-bg);
	border-color: var(--c-brand-border);
	color: var(--c-accent);
}

/* -------------------------------------------------------------------
 * 23. SIDEBAR
 *
 * Сайдбар использует сложную легаси-навигацию из style.css (красный/оранжевый
 * блок с категориями). Не переопределяем его стили — оставляем как есть.
 * ------------------------------------------------------------------- */
/* Сайдбар намеренно не переопределяется */

/* -------------------------------------------------------------------
 * 24. MOBILE MENU
 * ------------------------------------------------------------------- */
.menu_mobile {
	border-radius: var(--r-md) !important;
}

/* -------------------------------------------------------------------
 * 25. RESPONSIVE BREAKPOINTS
 * ------------------------------------------------------------------- */
@media screen and (max-width: 1100px) {
	.gallery .favorites {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.favorites:not(.gallery .favorites) {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media screen and (max-width: 960px) {
	/* Gallery: stack slider on top, favourites below */
	.gallery {
		flex-direction: column !important;
	}

	.gallery .slider {
		flex: none !important;
		width: 100% !important;
		height: 320px !important;
	}

	.gallery .slider .inner {
		width: 100% !important;
		height: 320px !important;
	}

	.gallery .slider .inner ul {
		height: 320px !important;
	}

	.gallery .slider .inner ul li {
		height: 320px !important;
	}

	.gallery .favorites {
		width: 100% !important;
		grid-template-columns: repeat(4, 1fr) !important;
	}

	.gallery ~ .favorites {
		grid-template-columns: repeat(3, 1fr) !important;
	}

	.double_news {
		grid-template-columns: 1fr !important;
		gap: var(--sp-6) !important;
	}

	.double_news .news_box {
		grid-template-columns: repeat(3, 1fr) !important;
	}

	.authors {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.home-seo__grid {
		grid-template-columns: 1fr !important;
	}

	.composition .item {
		max-width: 100% !important;
		flex-basis: 100% !important;
	}
}

/* =======================================================================
 * MOBILE HEADER  (≤768px)
 * Strategy: switch from flex to block layout.
 * Row 1 — logo (float:left) + "Добавить рецепт" (float:right)
 * Row 2 — search bar (full width, inside #menu)
 * #menu becomes normal-flow, no longer absolute.
 * ===================================================================== */

/* ≤1000px: neutralise legacy that hides .header_links and resets #menu */
@media screen and (max-width: 1000px) {
	/* Legacy hides .header_links here — we'll decide per-breakpoint below */
	.header_links {
		display: flex !important;
	}
	/* Legacy resets #menu to position:relative — keep it absolute for desktop range */
	#menu {
		position: absolute !important;
		bottom: 13px !important;
		left: 0 !important;
		right: 0 !important;
		margin: 0 !important;
	}
	/* Hide duplicate mobile search; our search lives in .header_links */
	#menu .search.header_search {
		display: none !important;
	}
}

@media screen and (max-width: 768px) {
	/* --- Header shell: block layout, no flex conflicts ------------------- */
	#header {
		display: block !important;
		position: sticky !important;
		top: 0 !important;
		z-index: 999 !important;
		padding: 0 !important;
		min-height: 0 !important;
		background: rgba(253, 250, 246, 0.97) !important;
		backdrop-filter: blur(12px) !important;
		-webkit-backdrop-filter: blur(12px) !important;
		border-bottom: 1px solid var(--c-border) !important;
	}

	/* --- Row 1: logo (left) + recipe CTA (right) -------------------------
	   Use floats so both ends go to their corners without flex hassle */
	#logo {
		float: left !important;
		display: block !important;
		width: auto !important;
		max-width: 55% !important;
		padding: 10px 16px 8px !important;
		margin: 0 !important;
		vertical-align: unset !important;
	}
	#logo img {
		display: block !important;
		width: 120px !important;
		height: auto !important;
	}
	#logo p {
		display: none !important;
	}

	/* .header_links: float right, show ONLY the recipe CTA */
	.header_links {
		float: right !important;
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		gap: var(--sp-2) !important;
		padding: 12px 16px 8px !important;
		margin: 0 !important;
		flex-wrap: nowrap !important;
	}
	/* Hide everything except "Добавить рецепт" */
	.header_links .search.header_search,
	.header_links .link_account,
	.header_links .link_register,
	.header_links .link_favorites {
		display: none !important;
	}
	.header_links .link_recipe {
		display: inline-flex !important;
		font-size: 12px !important;
		padding: 0.35rem 0.75rem !important;
	}

	/* --- Row 2: #menu → search bar + hamburger --------------------------
	   Clear floats so it starts below row 1.
	   position:relative needed so the slide-down dropdown is anchored here */
	#menu {
		position: relative !important;
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		clear: both !important;
		padding: 0 16px 10px !important;
		margin: 0 !important;
		gap: var(--sp-2) !important;
		background: transparent !important;
	}

	/* Nav lists: hidden by default — NO !important so inline style from JS can show them.
	   Positioned below #menu row (position:relative is on #menu). */
	#menu > ul.menu_desktop,
	#menu > ul.menu_mobile {
		display: none;
		position: absolute !important;
		top: 100% !important;
		left: -16px !important;
		right: -16px !important;
		z-index: 1000 !important;
		background: rgba(253, 250, 246, 0.98) !important;
		backdrop-filter: blur(12px) !important;
		-webkit-backdrop-filter: blur(12px) !important;
		border-top: 1px solid var(--c-border) !important;
		border-bottom: 1px solid var(--c-border) !important;
		padding: var(--sp-3) var(--sp-4) !important;
		list-style: none !important;
		margin: 0 !important;
	}
	#menu > ul.menu_desktop > li,
	#menu > ul.menu_mobile > li {
		display: block !important;
		float: none !important;
		border-top: 1px solid var(--c-100, #f0ede8) !important;
		padding: var(--sp-2) 0 !important;
		margin: 0 !important;
	}
	#menu > ul.menu_desktop > li:first-child,
	#menu > ul.menu_mobile > li:first-child {
		border-top: none !important;
	}
	#menu > ul.menu_desktop > li > a,
	#menu > ul.menu_mobile > li > a {
		display: block !important;
		font-size: var(--text-sm) !important;
		color: var(--c-text) !important;
		text-decoration: none !important;
		padding: var(--sp-1) 0 !important;
		font-weight: 500 !important;
	}

	/* Mobile search: show and style it */
	#menu .search.header_search {
		display: flex !important;
		flex: 1 1 auto !important;   /* grow to fill space */
		width: auto !important;      /* override legacy width:70% */
		max-width: none !important;
		align-items: stretch !important;
		height: 36px !important;
		border-radius: 24px !important;
		border: 1.5px solid var(--c-border) !important;
		overflow: hidden !important;
		background: var(--c-surface) !important;
		margin: 0 !important;
	}
	#menu .search.header_search input[type="text"],
	#menu .search.header_search input[name="s"] {
		flex: 1 1 auto !important;
		width: auto !important;
		min-width: 0 !important;
		height: 100% !important;
		box-sizing: border-box !important;
		padding: 0 12px !important;
		border: none !important;
		outline: none !important;
		background: transparent !important;
		font-size: 13px !important;
	}
	#menu .search.header_search input[type="submit"],
	#menu .search.header_search button[type="submit"] {
		flex: 0 0 auto !important;
		width: auto !important;
		height: 100% !important;
		padding: 0 14px !important;
		box-sizing: border-box !important;
		background: var(--c-accent) !important;
		color: #fff !important;
		border: none !important;
		cursor: pointer !important;
		font-size: 13px !important;
		font-weight: 600 !important;
		white-space: nowrap !important;
	}

	/* Hamburger / menu button: reset legacy margin, keep icon */
	#menu_button {
		flex: 0 0 auto !important;
		display: inline-flex !important;
		align-items: center !important;
		margin: 0 !important;          /* override legacy margin-right:25px */
		cursor: pointer !important;
	}

	/* Slider tighter on tablets */
	.gallery .slider {
		height: 280px !important;
	}

	.gallery .slider .inner,
	.gallery .slider .inner ul,
	.gallery .slider .inner ul li {
		height: 280px !important;
	}

	.gallery .favorites {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: var(--sp-3) !important;
	}

	.gallery ~ .favorites {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.favorites:not(.gallery .favorites) {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: var(--sp-3) !important;
	}

	.double_news .news_box {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* Advice thumbnails smaller on mobile */
	.double_news .advice .thumb {
		width: 80px !important;
		height: 64px !important;
	}

	.authors {
		grid-template-columns: repeat(2, 1fr) !important;
		padding: var(--sp-5) !important;
	}

	.recipe-page .single {
		padding: var(--sp-5) !important;
	}

	.composition,
	.recipe {
		padding: var(--sp-5) !important;
	}

	.composition .composition_top {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: var(--sp-2) !important;
	}

	.composition select.serving {
		width: 100% !important;
		box-sizing: border-box !important;
	}
}

@media screen and (max-width: 480px) {
	.composition,
	.recipe {
		padding: var(--sp-4) !important;
		border-radius: var(--r-md) !important;
	}

	.composition .inner {
		gap: var(--sp-3) !important;
	}

	.recipe-outro {
		padding: var(--sp-3) var(--sp-4) !important;
		font-size: var(--text-xs) !important;
	}
}

@media screen and (max-width: 560px) {
	/* Very small phones: make recipe CTA even tighter */
	.header_links .link_recipe {
		padding: 0.3rem 0.5rem !important;
		font-size: 11px !important;
	}

	.gallery .slider {
		height: 240px !important;
	}

	.gallery .slider .inner,
	.gallery .slider .inner ul,
	.gallery .slider .inner ul li {
		height: 240px !important;
	}

	.gallery .favorites {
		grid-template-columns: 1fr 1fr !important;
		gap: var(--sp-2) !important;
	}

	.gallery .favorite .thumb,
	.gallery .favorite > span.thumb {
		height: 140px !important;
	}

	.gallery ~ .favorites {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.favorites:not(.gallery .favorites) {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.double_news .news_box {
		grid-template-columns: 1fr 1fr !important;
	}

	.authors {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* Advice items: stack vertically on small phones */
	.double_news .advice {
		flex-direction: column !important;
		gap: var(--sp-2) !important;
	}

	.double_news .advice .thumb {
		width: 100% !important;
		height: 160px !important;
	}
}

@media screen and (max-width: 400px) {
	.gallery .favorites {
		grid-template-columns: 1fr 1fr !important;
	}

	.gallery ~ .favorites,
	.favorites:not(.gallery .favorites) {
		grid-template-columns: 1fr 1fr !important;
	}

	.authors {
		grid-template-columns: 1fr !important;
	}

	.double_news .news_box {
		grid-template-columns: 1fr !important;
	}
}

/* =======================================================================
 * YARPP — Related Posts block
 * Hide the duplicate English heading; the theme already shows "Похожие рецепты"
 * ===================================================================== */
.yarpp h3,
.yarpp-related h3 {
	display: none !important;
}

/* Style the list of related posts */
.yarpp ol,
.yarpp-related ol {
	list-style: decimal !important;
	padding-left: var(--sp-5) !important;
	margin: 0 0 var(--sp-4) !important;
}

.yarpp ol li,
.yarpp-related ol li {
	margin-bottom: var(--sp-2) !important;
	font-size: var(--text-sm) !important;
	line-height: 1.5 !important;
}

.yarpp ol li a,
.yarpp-related ol li a {
	color: var(--c-accent) !important;
	text-decoration: none !important;
	font-weight: 500 !important;
}

.yarpp ol li a:hover,
.yarpp-related ol li a:hover {
	text-decoration: underline !important;
}

/* =======================================================================
 * COMMENT FORM — modern redesign
 * FIX: high z-index so ad overlays (floor ad, fullscreen) don't cover it.
 * FIX: submit button uses flexbox, not float, to avoid float containment bugs.
 * ===================================================================== */

/* Container — position:relative + z-index to appear above sticky ad overlays */
#respond.comment-respond {
	position: relative !important;
	z-index: 200 !important;
	background: var(--c-50, #fafaf8) !important;
	border: 1px solid var(--c-border) !important;
	border-radius: var(--r-lg) !important;
	padding: var(--sp-6) !important;
	margin-top: var(--sp-6) !important;
}

/* Title */
#respond .comment-reply-title {
	font-size: var(--text-lg) !important;
	font-weight: 700 !important;
	color: var(--c-text) !important;
	margin-bottom: var(--sp-4) !important;
	display: block !important;
}

/* Avatar */
#respond .ava {
	float: left !important;
	width: 48px !important;
	height: 48px !important;
	border-radius: 50% !important;
	overflow: hidden !important;
	border: 2px solid var(--c-border) !important;
	margin-top: 4px !important;
}

#respond .ava img {
	width: 48px !important;
	height: 48px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
}

/* Form wrapper next to avatar */
#respond .ava + .inner {
	margin-left: 64px !important;
}

/* The form itself */
.comment-respond .comment-form {
	display: block !important;
	overflow: hidden !important;
}

/* All text inputs */
.comment-respond input[type="text"] {
	display: block !important;
	width: 100% !important;
	max-width: 400px !important;
	height: 42px !important;
	box-sizing: border-box !important;
	padding: 0 var(--sp-4) !important;
	border: 1.5px solid var(--c-border) !important;
	border-radius: var(--r-sm) !important;
	background: #fff !important;
	font-size: var(--text-sm) !important;
	color: var(--c-text) !important;
	margin-bottom: var(--sp-3) !important;
	transition: border-color var(--t-base), box-shadow var(--t-base) !important;
}

.comment-respond input[type="text"]:focus {
	outline: none !important;
	border-color: var(--c-accent) !important;
	box-shadow: 0 0 0 3px rgba(196, 92, 38, 0.12) !important;
}

/* Textarea */
.comment-respond textarea {
	display: block !important;
	width: 100% !important;
	min-height: 120px !important;
	height: auto !important;
	box-sizing: border-box !important;
	padding: var(--sp-3) var(--sp-4) !important;
	border: 1.5px solid var(--c-border) !important;
	border-radius: var(--r-sm) !important;
	background: #fff !important;
	font-size: var(--text-sm) !important;
	color: var(--c-text) !important;
	line-height: 1.5 !important;
	resize: vertical !important;
	margin-bottom: var(--sp-3) !important;
	transition: border-color var(--t-base), box-shadow var(--t-base) !important;
}

.comment-respond textarea:focus {
	outline: none !important;
	border-color: var(--c-accent) !important;
	box-shadow: 0 0 0 3px rgba(196, 92, 38, 0.12) !important;
}

/* Submit row: flex so button is right-aligned without float */
.comment-respond p.form-submit {
	display: flex !important;
	justify-content: flex-end !important;
	align-items: center !important;
	margin-bottom: 0 !important;
	width: 100% !important;
	overflow: visible !important;
}

/* Submit button — positioned above any possible overlay */
.comment-respond input[type="submit"] {
	position: relative !important;
	z-index: 201 !important;
	pointer-events: auto !important;
	display: inline-block !important;
	float: none !important;
	background: var(--c-accent) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--r-sm) !important;
	padding: 0.6rem 1.75rem !important;
	height: auto !important;
	line-height: 1.5 !important;
	font-size: var(--text-sm) !important;
	font-weight: 700 !important;
	letter-spacing: 0.03em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	transition: background-color var(--t-fast) !important;
}

.comment-respond input[type="submit"]:hover {
	background: var(--c-accent-hover) !important;
}

/* Mobile */
@media screen and (max-width: 600px) {
	#respond.comment-respond {
		padding: var(--sp-4) !important;
	}

	#respond .ava {
		display: none !important;
	}

	#respond .ava + .inner {
		margin-left: 0 !important;
	}

	.comment-respond input[type="text"] {
		max-width: 100% !important;
	}

	.comment-respond input[type="submit"] {
		width: 100% !important;
		text-align: center !important;
	}
}