/*
Theme Name: FoodTools
Theme URI: https://foilfoodpouches.com
Author: FoodTools Team
Author URI: https://foilfoodpouches.com
Description: A clean, fast, AdSense-ready food and recipes WordPress theme with built-in food tools, recipe schema markup, and full legal pages.
Version: 3.4.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: foodtools
Tags: food, recipes, blog, responsive, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, sticky-post, threaded-comments, translation-ready
*/

/* ==========================================================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ========================================================================== */

:root {
	--color-primary:       #E8520A;
	--color-primary-dark:  #c44108;
	--color-primary-light: #f06a25;
	--color-secondary:     #2D6A4F;
	--color-secondary-dark:#1f4d39;
	--color-accent:        #F4A261;
	--color-text:          #1A1A1A;
	--color-text-light:    #666666;
	--color-text-muted:    #999999;
	--color-bg:            #FFFFFF;
	--color-bg-alt:        #FBF7F4;
	--color-card-bg:       #FFFFFF;
	--color-border:        #E5E5E5;
	--color-border-dark:   #CCCCCC;
	--color-success:       #2D6A4F;
	--color-error:         #D32F2F;
	--color-warning:       #F57C00;

	--font-heading: Georgia, 'Times New Roman', serif;
	--font-body:    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
	--font-mono:    'Courier New', Courier, monospace;

	--font-size-xs:   0.75rem;
	--font-size-sm:   0.875rem;
	--font-size-base: 1rem;
	--font-size-md:   1.125rem;
	--font-size-lg:   1.25rem;
	--font-size-xl:   1.5rem;
	--font-size-2xl:  1.875rem;
	--font-size-3xl:  2.25rem;
	--font-size-4xl:  3rem;

	--line-height-tight:  1.2;
	--line-height-normal: 1.7;
	--line-height-loose:  2;

	--spacing-xs:  0.25rem;
	--spacing-sm:  0.5rem;
	--spacing-md:  1rem;
	--spacing-lg:  1.5rem;
	--spacing-xl:  2rem;
	--spacing-2xl: 3rem;
	--spacing-3xl: 4rem;
	--spacing-4xl: 6rem;

	--border-radius-sm: 4px;
	--border-radius:    8px;
	--border-radius-lg: 12px;
	--border-radius-xl: 16px;
	--border-radius-full: 9999px;

	--shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
	--shadow-md:  0 4px 12px rgba(0,0,0,0.1);
	--shadow-lg:  0 8px 24px rgba(0,0,0,0.12);
	--shadow-xl:  0 16px 40px rgba(0,0,0,0.15);

	--transition-fast:   150ms ease;
	--transition-normal: 250ms ease;
	--transition-slow:   400ms ease;

	--header-height: 70px;
	--container-max: 1200px;
	--container-narrow-max: 800px;
	--sidebar-width: 320px;

	--z-sticky: 100;
	--z-dropdown: 200;
	--z-modal: 300;
	--z-cookie: 400;
	--z-skip: 500;
}

/* ==========================================================================
   CSS RESET / NORMALIZE
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 100%;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	line-height: var(--line-height-normal);
	color: var(--color-text);
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

ul,
ol {
	list-style: none;
}

a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--transition-fast);
}

a:hover {
	color: var(--color-primary-dark);
}

table {
	border-collapse: collapse;
	width: 100%;
}

button {
	cursor: pointer;
	border: none;
	background: none;
}

hr {
	border: none;
	border-top: 1px solid var(--color-border);
	margin: var(--spacing-xl) 0;
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

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

.screen-reader-text:focus {
	position: fixed;
	top: 0;
	left: 0;
	z-index: var(--z-skip);
	width: auto;
	height: auto;
	padding: var(--spacing-md) var(--spacing-lg);
	clip: auto;
	white-space: normal;
	background: var(--color-primary);
	color: #fff;
	font-size: var(--font-size-base);
	font-weight: 700;
}

.skip-link {
	position: absolute;
	top: -100%;
	left: 0;
	z-index: var(--z-skip);
	padding: var(--spacing-md) var(--spacing-lg);
	background: var(--color-primary);
	color: #fff;
	font-weight: 700;
	border-radius: 0 0 var(--border-radius) 0;
	transition: top var(--transition-fast);
}

.skip-link:focus {
	top: 0;
	color: #fff;
}

:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: 3px;
	border-radius: var(--border-radius-sm);
}

/* ==========================================================================
   BASE TYPOGRAPHY
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: var(--line-height-tight);
	color: var(--color-text);
}

h1 { font-size: var(--font-size-2xl); }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }
h4 { font-size: var(--font-size-md); }
h5 { font-size: var(--font-size-base); }
h6 { font-size: var(--font-size-sm); }

@media (min-width: 768px) {
	h1 { font-size: var(--font-size-3xl); }
	h2 { font-size: var(--font-size-2xl); }
	h3 { font-size: var(--font-size-xl); }
	h4 { font-size: var(--font-size-lg); }
}

@media (min-width: 1024px) {
	h1 { font-size: var(--font-size-4xl); }
}

p {
	margin-bottom: var(--spacing-md);
}

p:last-child {
	margin-bottom: 0;
}

.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content blockquote,
.entry-content pre,
.entry-content table {
	margin-bottom: var(--spacing-lg);
}

.entry-content ul,
.entry-content ol {
	list-style: revert;
	padding-left: var(--spacing-xl);
}

.entry-content li {
	margin-bottom: var(--spacing-sm);
}

.entry-content a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin-top: var(--spacing-xl);
	margin-bottom: var(--spacing-md);
}

blockquote {
	border-left: 4px solid var(--color-primary);
	padding: var(--spacing-md) var(--spacing-lg);
	margin: var(--spacing-xl) 0;
	background: var(--color-bg-alt);
	border-radius: 0 var(--border-radius) var(--border-radius) 0;
	font-style: italic;
	color: var(--color-text-light);
}

blockquote cite {
	display: block;
	margin-top: var(--spacing-sm);
	font-size: var(--font-size-sm);
	font-style: normal;
	color: var(--color-text-muted);
}

code {
	font-family: var(--font-mono);
	font-size: 0.9em;
	background: var(--color-bg-alt);
	padding: 2px 6px;
	border-radius: var(--border-radius-sm);
	border: 1px solid var(--color-border);
}

pre {
	background: #1a1a1a;
	color: #f8f8f2;
	padding: var(--spacing-lg);
	border-radius: var(--border-radius);
	overflow-x: auto;
}

pre code {
	background: none;
	border: none;
	padding: 0;
	font-size: var(--font-size-sm);
	color: inherit;
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--spacing-md);
	padding-right: var(--spacing-md);
}

@media (min-width: 768px) {
	.container {
		padding-left: var(--spacing-xl);
		padding-right: var(--spacing-xl);
	}
}

.container-narrow {
	width: 100%;
	max-width: var(--container-narrow-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--spacing-md);
	padding-right: var(--spacing-md);
}

@media (min-width: 768px) {
	.container-narrow {
		padding-left: var(--spacing-xl);
		padding-right: var(--spacing-xl);
	}
}

.site-main {
	padding: var(--spacing-2xl) 0;
}

.content-area {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-2xl);
}

@media (min-width: 1024px) {
	.content-area.with-sidebar {
		grid-template-columns: 1fr var(--sidebar-width);
		align-items: start;
	}
}

.main-content {
	min-width: 0;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--z-sticky);
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
	height: var(--header-height);
	display: flex;
	align-items: center;
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-md);
	width: 100%;
}

/* Branding */
.site-branding {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
}

.site-branding .custom-logo-link {
	display: block;
	line-height: 0;
}

.site-branding .custom-logo {
	height: 44px;
	width: auto;
	max-width: 200px;
	object-fit: contain;
}

.site-branding .site-title {
	font-family: var(--font-heading);
	font-size: var(--font-size-lg);
	font-weight: 700;
	margin: 0;
}

.site-branding .site-title a {
	color: var(--color-primary);
	text-decoration: none;
}

.site-branding .site-title a:hover {
	color: var(--color-primary-dark);
}

.site-branding .site-description {
	font-size: var(--font-size-xs);
	color: var(--color-text-light);
	margin: 0;
}

/* Header Ad Slot */
.header-ad-slot {
	display: none;
}

@media (min-width: 1024px) {
	.header-ad-slot {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
	}
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.main-navigation {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
}

/* Hamburger */
.menu-toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 6px;
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-sm);
	cursor: pointer;
	transition: background var(--transition-fast);
}

.menu-toggle:hover {
	background: var(--color-bg-alt);
}

.menu-toggle .hamburger-bar {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--color-text);
	border-radius: 2px;
	transition: transform var(--transition-normal), opacity var(--transition-fast);
}

.menu-toggle.is-active .hamburger-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.menu-toggle.is-active .hamburger-bar:nth-child(2) {
	opacity: 0;
}
.menu-toggle.is-active .hamburger-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Nav menu */
.nav-menu {
	display: none;
	position: absolute;
	top: var(--header-height);
	left: 0;
	right: 0;
	background: var(--color-bg);
	border-bottom: 2px solid var(--color-border);
	box-shadow: var(--shadow-md);
	padding: var(--spacing-md) 0;
	z-index: var(--z-dropdown);
}

.nav-menu.is-open {
	display: block;
}

.nav-menu li {
	display: block;
}

.nav-menu > li {
	border-bottom: 1px solid var(--color-border);
}

.nav-menu > li:last-child {
	border-bottom: none;
}

.nav-menu a {
	display: block;
	padding: var(--spacing-md) var(--spacing-xl);
	color: var(--color-text);
	font-size: var(--font-size-base);
	font-weight: 600;
	transition: color var(--transition-fast), background var(--transition-fast);
}

.nav-menu a:hover,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a {
	color: var(--color-primary);
	background: var(--color-bg-alt);
}

/* Desktop nav */
@media (min-width: 1024px) {
	.menu-toggle {
		display: none;
	}

	.nav-menu {
		display: flex !important;
		position: static;
		background: transparent;
		border: none;
		box-shadow: none;
		padding: 0;
		gap: 0;
	}

	.nav-menu > li {
		border: none;
		position: relative;
	}

	.nav-menu > li > a {
		padding: var(--spacing-sm) var(--spacing-md);
		border-radius: var(--border-radius);
		font-size: var(--font-size-sm);
	}

	.nav-menu > li > a:hover,
	.nav-menu > .current-menu-item > a,
	.nav-menu > .current-menu-ancestor > a {
		color: var(--color-primary);
		background: transparent;
	}

	/* Dropdown submenu */
	.nav-menu .sub-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 200px;
		background: var(--color-bg);
		border: 1px solid var(--color-border);
		border-radius: var(--border-radius);
		box-shadow: var(--shadow-lg);
		padding: var(--spacing-sm) 0;
		z-index: var(--z-dropdown);
	}

	.nav-menu li:hover > .sub-menu,
	.nav-menu li:focus-within > .sub-menu {
		display: block;
	}

	.nav-menu .sub-menu a {
		padding: var(--spacing-sm) var(--spacing-lg);
		font-size: var(--font-size-sm);
		font-weight: 400;
		border-radius: 0;
	}

	.nav-menu .sub-menu li {
		border: none;
	}
}

/* Below header ad */
.below-header-ad {
	background: var(--color-bg-alt);
	border-bottom: 1px solid var(--color-border);
	padding: var(--spacing-sm) 0;
}

.below-header-ad .ad-slot {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */

.breadcrumbs {
	padding: var(--spacing-md) 0;
	font-size: var(--font-size-sm);
	color: var(--color-text-light);
	border-bottom: 1px solid var(--color-border);
	background: var(--color-bg-alt);
}

.breadcrumbs .container {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--spacing-xs);
}

.breadcrumbs a {
	color: var(--color-text-light);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.breadcrumbs a:hover {
	color: var(--color-primary);
}

.breadcrumbs .separator {
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
	margin: 0 2px;
}

.breadcrumbs .current {
	color: var(--color-text);
	font-weight: 600;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

.hero-section {
	background: linear-gradient(135deg, #E8520A 0%, #c44108 40%, #2D6A4F 100%);
	color: #fff;
	padding: var(--spacing-3xl) 0;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.hero-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	pointer-events: none;
}

.hero-content {
	position: relative;
	z-index: 1;
}

.hero-title {
	font-family: var(--font-heading);
	font-size: var(--font-size-2xl);
	font-weight: 700;
	color: #fff;
	margin-bottom: var(--spacing-md);
	text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

@media (min-width: 768px) {
	.hero-title {
		font-size: var(--font-size-3xl);
	}
}

@media (min-width: 1024px) {
	.hero-section {
		padding: var(--spacing-4xl) 0;
	}
	.hero-title {
		font-size: var(--font-size-4xl);
	}
}

.hero-subtitle {
	font-size: var(--font-size-lg);
	color: rgba(255,255,255,0.9);
	margin-bottom: var(--spacing-2xl);
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.hero-search {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	max-width: 560px;
	margin: 0 auto;
}

@media (min-width: 480px) {
	.hero-search {
		flex-direction: row;
	}
}

.hero-search input[type="search"] {
	flex: 1;
	padding: var(--spacing-md) var(--spacing-lg);
	border: none;
	border-radius: var(--border-radius-full);
	font-size: var(--font-size-base);
	background: #fff;
	color: var(--color-text);
	box-shadow: var(--shadow-lg);
}

.hero-search input[type="search"]:focus {
	outline: 3px solid var(--color-accent);
	outline-offset: 2px;
}

.hero-search button {
	padding: var(--spacing-md) var(--spacing-xl);
	background: var(--color-accent);
	color: var(--color-text);
	font-weight: 700;
	border-radius: var(--border-radius-full);
	font-size: var(--font-size-base);
	transition: background var(--transition-fast), transform var(--transition-fast);
	white-space: nowrap;
}

.hero-search button:hover {
	background: #e89050;
	transform: translateY(-1px);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn,
.button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-sm);
	padding: 0.625rem 1.25rem;
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: var(--border-radius);
	cursor: pointer;
	transition: all var(--transition-fast);
	white-space: nowrap;
}

.btn-primary,
.btn-primary.btn {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}

.btn-primary:hover,
.btn-primary.btn:hover {
	background: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}

.btn-secondary,
.btn-secondary.btn {
	background: var(--color-secondary);
	color: #fff;
	border-color: var(--color-secondary);
}

.btn-secondary:hover,
.btn-secondary.btn:hover {
	background: var(--color-secondary-dark);
	border-color: var(--color-secondary-dark);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}

.btn-outline,
.btn-outline.btn {
	background: transparent;
	color: var(--color-primary);
	border-color: var(--color-primary);
}

.btn-outline:hover,
.btn-outline.btn:hover {
	background: var(--color-primary);
	color: #fff;
	transform: translateY(-1px);
}

.btn-ghost,
.btn-ghost.btn {
	background: transparent;
	color: var(--color-text);
	border-color: var(--color-border);
}

.btn-ghost:hover,
.btn-ghost.btn:hover {
	background: var(--color-bg-alt);
	border-color: var(--color-border-dark);
}

.btn-sm {
	padding: 0.375rem 0.875rem;
	font-size: var(--font-size-sm);
}

.btn-lg {
	padding: 0.875rem 1.75rem;
	font-size: var(--font-size-lg);
	border-radius: var(--border-radius-lg);
}

/* ==========================================================================
   FORMS
   ========================================================================== */

.form-group {
	margin-bottom: var(--spacing-lg);
}

.form-label {
	display: block;
	margin-bottom: var(--spacing-sm);
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--color-text);
}

.form-control,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="password"],
textarea,
select {
	display: block;
	width: 100%;
	padding: 0.625rem var(--spacing-md);
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	line-height: 1.5;
	color: var(--color-text);
	background: var(--color-bg);
	border: 1px solid var(--color-border-dark);
	border-radius: var(--border-radius);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(232, 82, 10, 0.15);
}

.form-control.is-invalid,
input.is-invalid {
	border-color: var(--color-error);
	box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.15);
}

.form-control.is-valid,
input.is-valid {
	border-color: var(--color-success);
}

.form-error {
	display: block;
	margin-top: var(--spacing-xs);
	font-size: var(--font-size-sm);
	color: var(--color-error);
}

.form-hint {
	display: block;
	margin-top: var(--spacing-xs);
	font-size: var(--font-size-sm);
	color: var(--color-text-light);
}

textarea {
	resize: vertical;
	min-height: 120px;
}

select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 36px;
	-webkit-appearance: none;
	appearance: none;
}

/* Search form */
.search-form {
	display: flex;
	gap: var(--spacing-sm);
}

.search-form .search-field {
	flex: 1;
}

.search-form .search-submit {
	padding: 0.625rem var(--spacing-lg);
	background: var(--color-primary);
	color: #fff;
	border-radius: var(--border-radius);
	font-weight: 600;
	transition: background var(--transition-fast);
}

.search-form .search-submit:hover {
	background: var(--color-primary-dark);
}

/* ==========================================================================
   RECIPE CARDS
   ========================================================================== */

.recipe-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-lg);
}

@media (min-width: 480px) {
	.recipe-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 768px) {
	.recipe-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1200px) {
	.recipe-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.recipe-card {
	background: var(--color-card-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition-normal), box-shadow var(--transition-normal);
	display: flex;
	flex-direction: column;
}

.recipe-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

.recipe-card-image {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4/3;
	background: var(--color-bg-alt);
}

.recipe-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}

.recipe-card:hover .recipe-card-image img {
	transform: scale(1.05);
}

.recipe-card-badge {
	position: absolute;
	top: var(--spacing-sm);
	left: var(--spacing-sm);
	background: var(--color-primary);
	color: #fff;
	font-size: var(--font-size-xs);
	font-weight: 700;
	padding: 3px 10px;
	border-radius: var(--border-radius-full);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.recipe-card-body {
	padding: var(--spacing-md);
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.recipe-card-category {
	font-size: var(--font-size-xs);
	font-weight: 700;
	color: var(--color-primary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.recipe-card-title {
	font-family: var(--font-heading);
	font-size: var(--font-size-md);
	font-weight: 700;
	line-height: var(--line-height-tight);
	color: var(--color-text);
	flex: 1;
}

.recipe-card-title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition-fast);
}

.recipe-card-title a:hover {
	color: var(--color-primary);
}

.recipe-card-excerpt {
	font-size: var(--font-size-sm);
	color: var(--color-text-light);
	line-height: 1.5;
}

.recipe-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
	font-size: var(--font-size-xs);
	color: var(--color-text-light);
	border-top: 1px solid var(--color-border);
	padding-top: var(--spacing-sm);
	margin-top: auto;
}

.recipe-card-meta-item {
	display: flex;
	align-items: center;
	gap: 4px;
}

.recipe-card-meta-item .icon {
	color: var(--color-primary);
	font-size: 14px;
}

/* ==========================================================================
   SINGLE RECIPE
   ========================================================================== */

.recipe-header {
	margin-bottom: var(--spacing-2xl);
}

.recipe-hero-image {
	width: 100%;
	border-radius: var(--border-radius-xl);
	overflow: hidden;
	margin-bottom: var(--spacing-xl);
	max-height: 500px;
}

.recipe-hero-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.recipe-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-2xl);
}

@media (min-width: 768px) {
	.recipe-layout {
		grid-template-columns: 2fr 1fr;
		align-items: start;
	}
}

.recipe-meta-card {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-lg);
	padding: var(--spacing-lg);
}

.recipe-meta-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--spacing-md);
}

.recipe-meta-item {
	text-align: center;
	padding: var(--spacing-md);
	background: var(--color-bg);
	border-radius: var(--border-radius);
	border: 1px solid var(--color-border);
}

.recipe-meta-label {
	display: block;
	font-size: var(--font-size-xs);
	color: var(--color-text-light);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 4px;
}

.recipe-meta-value {
	display: block;
	font-size: var(--font-size-md);
	font-weight: 700;
	color: var(--color-text);
}

/* Ingredients */
.recipe-ingredients {
	margin-bottom: var(--spacing-2xl);
}

.recipe-ingredients h3,
.recipe-instructions h3,
.recipe-nutrition h3 {
	font-size: var(--font-size-xl);
	margin-bottom: var(--spacing-lg);
	padding-bottom: var(--spacing-sm);
	border-bottom: 3px solid var(--color-primary);
}

.ingredients-list {
	list-style: none;
	padding: 0;
}

.ingredients-list li {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-md);
	padding: var(--spacing-sm) 0;
	border-bottom: 1px solid var(--color-border);
}

.ingredients-list li:last-child {
	border-bottom: none;
}

.ingredients-list input[type="checkbox"] {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-top: 3px;
	accent-color: var(--color-primary);
	cursor: pointer;
}

.ingredients-list label {
	cursor: pointer;
	line-height: 1.5;
	transition: opacity var(--transition-fast);
}

.ingredients-list input[type="checkbox"]:checked + label {
	opacity: 0.5;
	text-decoration: line-through;
}

/* Instructions */
.recipe-instructions {
	margin-bottom: var(--spacing-2xl);
}

.instructions-list {
	list-style: none;
	padding: 0;
	counter-reset: step-counter;
}

.instructions-list li {
	display: flex;
	gap: var(--spacing-lg);
	margin-bottom: var(--spacing-lg);
	counter-increment: step-counter;
}

.step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	background: var(--color-primary);
	color: #fff;
	font-weight: 700;
	font-size: var(--font-size-sm);
	border-radius: 50%;
	margin-top: 2px;
}

.step-content {
	flex: 1;
	line-height: var(--line-height-normal);
}

/* Nutrition table */
.recipe-nutrition {
	margin-bottom: var(--spacing-2xl);
}

.nutrition-table {
	width: 100%;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	overflow: hidden;
}

.nutrition-table th,
.nutrition-table td {
	padding: var(--spacing-sm) var(--spacing-md);
	text-align: left;
	border-bottom: 1px solid var(--color-border);
}

.nutrition-table th {
	background: var(--color-bg-alt);
	font-weight: 700;
	font-size: var(--font-size-sm);
	color: var(--color-text-light);
	text-transform: uppercase;
}

.nutrition-table tr:last-child td {
	border-bottom: none;
}

.nutrition-table tr:nth-child(even) td {
	background: var(--color-bg-alt);
}

/* Recipe notes */
.recipe-notes {
	background: var(--color-bg-alt);
	border-left: 4px solid var(--color-accent);
	border-radius: 0 var(--border-radius) var(--border-radius) 0;
	padding: var(--spacing-lg);
	margin-bottom: var(--spacing-2xl);
}

.recipe-notes h3 {
	color: var(--color-primary);
	margin-bottom: var(--spacing-sm);
	font-size: var(--font-size-lg);
}

/* ==========================================================================
   FOOD TOOLS
   ========================================================================== */

.tools-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-lg);
}

@media (min-width: 480px) {
	.tools-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 768px) {
	.tools-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.tool-card {
	background: var(--color-card-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-lg);
	padding: var(--spacing-xl);
	text-align: center;
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.tool-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}

.tool-card-icon {
	font-size: 3rem;
	margin-bottom: var(--spacing-md);
	display: block;
}

.tool-card-title {
	font-family: var(--font-heading);
	font-size: var(--font-size-lg);
	color: var(--color-text);
	margin-bottom: var(--spacing-sm);
}

.tool-card-desc {
	font-size: var(--font-size-sm);
	color: var(--color-text-light);
	margin-bottom: var(--spacing-lg);
}

/* Tool forms */
.tool-form {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-lg);
	padding: var(--spacing-xl);
	margin-bottom: var(--spacing-xl);
}

.tool-form h2 {
	margin-bottom: var(--spacing-lg);
}

.tool-result {
	background: var(--color-bg);
	border: 2px solid var(--color-primary);
	border-radius: var(--border-radius-lg);
	padding: var(--spacing-xl);
	margin-top: var(--spacing-xl);
	text-align: center;
}

.tool-result-value {
	font-size: var(--font-size-3xl);
	font-weight: 700;
	color: var(--color-primary);
	font-family: var(--font-heading);
}

.tool-result-label {
	font-size: var(--font-size-sm);
	color: var(--color-text-light);
	margin-top: var(--spacing-sm);
}

.tool-input-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-md);
}

@media (min-width: 600px) {
	.tool-input-row {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.tool-input-row {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ==========================================================================
   BLOG CARDS
   ========================================================================== */

.blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-xl);
}

.blog-card {
	display: flex;
	flex-direction: column;
	background: var(--color-card-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.blog-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}

@media (min-width: 600px) {
	.blog-card {
		flex-direction: row;
	}

	.blog-card-image {
		width: 240px;
		flex-shrink: 0;
	}
}

.blog-card-image {
	aspect-ratio: 16/9;
	overflow: hidden;
	background: var(--color-bg-alt);
}

@media (min-width: 600px) {
	.blog-card-image {
		aspect-ratio: auto;
	}
}

.blog-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}

.blog-card:hover .blog-card-image img {
	transform: scale(1.05);
}

.blog-card-body {
	padding: var(--spacing-lg);
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.blog-card-category {
	font-size: var(--font-size-xs);
	font-weight: 700;
	color: var(--color-primary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.blog-card-title {
	font-family: var(--font-heading);
	font-size: var(--font-size-lg);
	color: var(--color-text);
}

.blog-card-title a {
	color: inherit;
	text-decoration: none;
}

.blog-card-title a:hover {
	color: var(--color-primary);
}

.blog-card-excerpt {
	font-size: var(--font-size-sm);
	color: var(--color-text-light);
	flex: 1;
}

.blog-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);
	padding-top: var(--spacing-sm);
	border-top: 1px solid var(--color-border);
}

.post-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--spacing-md);
	font-size: var(--font-size-sm);
	color: var(--color-text-light);
	margin-bottom: var(--spacing-md);
}

.post-meta a {
	color: var(--color-text-light);
}

.post-meta a:hover {
	color: var(--color-primary);
}

.post-author-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
}

.reading-time {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);
}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */

.sidebar-main {
	position: relative;
}

@media (min-width: 1024px) {
	.sidebar-main {
		position: sticky;
		top: calc(var(--header-height) + var(--spacing-lg));
	}
}

.widget {
	background: var(--color-card-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-lg);
	padding: var(--spacing-lg);
	margin-bottom: var(--spacing-lg);
}

.widget:last-child {
	margin-bottom: 0;
}

.widget-title {
	font-family: var(--font-heading);
	font-size: var(--font-size-md);
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: var(--spacing-md);
	padding-bottom: var(--spacing-sm);
	border-bottom: 2px solid var(--color-primary);
}

.widget ul {
	list-style: none;
	padding: 0;
}

.widget ul li {
	padding: var(--spacing-sm) 0;
	border-bottom: 1px solid var(--color-border);
	font-size: var(--font-size-sm);
}

.widget ul li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.widget ul li a {
	color: var(--color-text-light);
	text-decoration: none;
	display: flex;
	justify-content: space-between;
	transition: color var(--transition-fast);
}

.widget ul li a:hover {
	color: var(--color-primary);
}

/* ==========================================================================
   AD SLOTS
   ========================================================================== */

.ad-slot {
	display: block;
	text-align: center;
	overflow: hidden;
}

.ad-slot:empty,
.ad-slot.ad-empty {
	background: #f9f9f9;
	border: 1px dashed #ddd;
	border-radius: var(--border-radius);
	position: relative;
}

.ad-slot:empty::after,
.ad-slot.ad-empty::after {
	content: 'Advertisement';
	display: block;
	font-size: var(--font-size-xs);
	color: #bbb;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: var(--spacing-sm);
}

/* Leaderboard (728x90 / 320x50) */
.ad-slot-header {
	min-height: 90px;
	max-width: 728px;
	margin: 0 auto;
}

.ad-slot-below-header {
	min-height: 90px;
	margin: var(--spacing-sm) auto;
}

/* In-content (300x250 or responsive) */
.ad-slot-in-content {
	min-height: 250px;
	max-width: 336px;
	margin: var(--spacing-xl) auto;
}

/* Sidebar (300x250 or 300x600) */
.ad-slot-sidebar {
	min-height: 250px;
	max-width: 300px;
	margin: 0 auto var(--spacing-lg);
}

/* Before footer (728x90 or 970x90) */
.ad-slot-before-footer {
	min-height: 90px;
	padding: var(--spacing-md) 0;
	margin: 0 auto;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.before-footer-ad {
	background: var(--color-bg-alt);
	border-top: 1px solid var(--color-border);
	padding: var(--spacing-md) 0;
}

.site-footer {
	background: #1A1A1A;
	color: rgba(255,255,255,0.8);
}

.footer-widgets {
	padding: var(--spacing-3xl) 0 var(--spacing-2xl);
}

.footer-widgets-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-2xl);
}

@media (min-width: 600px) {
	.footer-widgets-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.footer-widgets-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.footer-widget-area .widget {
	background: transparent;
	border: none;
	padding: 0;
	color: rgba(255,255,255,0.8);
}

.footer-widget-area .widget-title {
	color: #fff;
	border-bottom-color: var(--color-primary);
	font-size: var(--font-size-base);
}

.footer-widget-area .widget ul li a {
	color: rgba(255,255,255,0.7);
}

.footer-widget-area .widget ul li a:hover {
	color: var(--color-accent);
}

.footer-widget-area .widget ul li {
	border-bottom-color: rgba(255,255,255,0.1);
}

.footer-widget-area a {
	color: rgba(255,255,255,0.7);
}

.footer-widget-area a:hover {
	color: var(--color-accent);
}

.footer-bottom {
	background: #111;
	border-top: 1px solid rgba(255,255,255,0.1);
	padding: var(--spacing-lg) 0;
}

.footer-bottom-inner {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
	text-align: center;
}

@media (min-width: 768px) {
	.footer-bottom-inner {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		text-align: left;
	}
}

.footer-copyright {
	font-size: var(--font-size-sm);
	color: rgba(255,255,255,0.5);
}

.footer-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-md);
	justify-content: center;
}

@media (min-width: 768px) {
	.footer-nav ul {
		justify-content: flex-end;
	}
}

.footer-nav a {
	font-size: var(--font-size-sm);
	color: rgba(255,255,255,0.6);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.footer-nav a:hover {
	color: var(--color-accent);
}

/* Social links */
.social-links {
	display: flex;
	gap: var(--spacing-sm);
	flex-wrap: wrap;
}

.social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255,255,255,0.1);
	color: rgba(255,255,255,0.8);
	text-decoration: none;
	transition: background var(--transition-fast), color var(--transition-fast);
	font-size: var(--font-size-sm);
}

.social-link:hover {
	background: var(--color-primary);
	color: #fff;
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--spacing-sm);
	margin-top: var(--spacing-2xl);
}

.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--spacing-sm);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--color-text-light);
	text-decoration: none;
	background: var(--color-bg);
	transition: all var(--transition-fast);
}

.nav-links .page-numbers:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
	background: var(--color-bg-alt);
}

.nav-links .page-numbers.current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

.nav-links .page-numbers.dots {
	border: none;
	background: transparent;
}

/* Post navigation (prev/next) */
.post-navigation {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-lg);
	margin-top: var(--spacing-2xl);
	padding-top: var(--spacing-2xl);
	border-top: 1px solid var(--color-border);
}

.nav-previous,
.nav-next {
	padding: var(--spacing-lg);
	background: var(--color-bg-alt);
	border-radius: var(--border-radius);
	border: 1px solid var(--color-border);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.nav-previous:hover,
.nav-next:hover {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-sm);
}

.nav-next {
	text-align: right;
}

.nav-label {
	display: block;
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: var(--spacing-xs);
}

.nav-previous a,
.nav-next a {
	font-weight: 600;
	color: var(--color-text);
	text-decoration: none;
	font-size: var(--font-size-sm);
	transition: color var(--transition-fast);
}

.nav-previous a:hover,
.nav-next a:hover {
	color: var(--color-primary);
}

/* ==========================================================================
   COMMENTS
   ========================================================================== */

.comments-area {
	margin-top: var(--spacing-3xl);
	padding-top: var(--spacing-2xl);
	border-top: 2px solid var(--color-border);
}

.comments-title {
	font-size: var(--font-size-xl);
	margin-bottom: var(--spacing-xl);
}

.comment-list {
	list-style: none;
	padding: 0;
}

.comment-list .children {
	list-style: none;
	padding-left: var(--spacing-xl);
	border-left: 2px solid var(--color-border);
	margin-left: var(--spacing-md);
	margin-top: var(--spacing-md);
}

.comment {
	margin-bottom: var(--spacing-xl);
}

.comment-body {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-lg);
	padding: var(--spacing-lg);
}

.bypostauthor > .comment-body {
	border-left: 4px solid var(--color-primary);
}

.comment-author {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-md);
}

.comment-author img.avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--color-border);
}

.comment-author-info .fn {
	display: block;
	font-weight: 700;
	color: var(--color-text);
	font-style: normal;
}

.comment-metadata {
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);
}

.comment-metadata a {
	color: var(--color-text-muted);
}

.comment-content p {
	font-size: var(--font-size-sm);
	color: var(--color-text);
	line-height: var(--line-height-normal);
	margin-bottom: var(--spacing-sm);
}

.comment-content p:last-child {
	margin-bottom: 0;
}

.comment-reply-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--font-size-xs);
	font-weight: 600;
	color: var(--color-primary);
	text-decoration: none;
	margin-top: var(--spacing-sm);
	transition: color var(--transition-fast);
}

.comment-reply-link:hover {
	color: var(--color-primary-dark);
}

.comment-awaiting-moderation {
	display: inline-block;
	margin-top: var(--spacing-sm);
	padding: 4px 10px;
	background: #fff3cd;
	color: #856404;
	border: 1px solid #ffc107;
	border-radius: var(--border-radius-sm);
	font-size: var(--font-size-xs);
}

/* Comment form */
.comment-respond {
	margin-top: var(--spacing-2xl);
}

.comment-reply-title {
	font-size: var(--font-size-xl);
	margin-bottom: var(--spacing-lg);
}

.comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-sm);
	margin-bottom: var(--spacing-lg);
}

.comment-form-cookies-consent input[type="checkbox"] {
	width: auto;
	margin-top: 3px;
	accent-color: var(--color-primary);
}

.comment-form-cookies-consent label {
	font-size: var(--font-size-sm);
	color: var(--color-text-light);
}

.comment-notes {
	font-size: var(--font-size-sm);
	color: var(--color-text-light);
	margin-bottom: var(--spacing-lg);
}

.required-field-message {
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);
	margin-bottom: var(--spacing-lg);
}

/* ==========================================================================
   404 PAGE
   ========================================================================== */

.error-404 {
	text-align: center;
	padding: var(--spacing-4xl) 0;
}

.error-404 .page-title {
	font-size: 8rem;
	color: var(--color-primary);
	line-height: 1;
	margin-bottom: var(--spacing-md);
	opacity: 0.2;
}

@media (min-width: 768px) {
	.error-404 .page-title {
		font-size: 12rem;
	}
}

.error-404 h2 {
	font-size: var(--font-size-2xl);
	margin-bottom: var(--spacing-md);
}

.error-404 p {
	font-size: var(--font-size-lg);
	color: var(--color-text-light);
	margin-bottom: var(--spacing-2xl);
}

.error-404 .search-form {
	max-width: 480px;
	margin: 0 auto var(--spacing-2xl);
}

/* ==========================================================================
   SEARCH RESULTS
   ========================================================================== */

.search-results .page-title {
	font-size: var(--font-size-2xl);
	margin-bottom: var(--spacing-xl);
}

.search-results .page-title span {
	color: var(--color-primary);
}

.search-no-results {
	text-align: center;
	padding: var(--spacing-3xl) 0;
}

.search-no-results h2 {
	margin-bottom: var(--spacing-md);
}

.search-no-results p {
	color: var(--color-text-light);
	margin-bottom: var(--spacing-xl);
}

/* ==========================================================================
   COOKIE CONSENT BANNER
   ========================================================================== */

.cookie-consent-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: var(--z-cookie);
	background: #1A1A1A;
	color: #fff;
	padding: var(--spacing-md) var(--spacing-lg);
	box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
	transform: translateY(0);
	transition: transform var(--transition-normal);
}

.cookie-consent-banner.cookie-hidden {
	transform: translateY(100%);
}

.cookie-consent-inner {
	max-width: var(--container-max);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
	align-items: flex-start;
}

@media (min-width: 768px) {
	.cookie-consent-inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.cookie-consent-text {
	font-size: var(--font-size-sm);
	color: rgba(255,255,255,0.9);
	margin: 0;
	line-height: 1.6;
}

.cookie-consent-text a {
	color: var(--color-accent);
	text-decoration: underline;
}

.cookie-consent-buttons {
	display: flex;
	gap: var(--spacing-sm);
	flex-shrink: 0;
}

.cookie-accept,
.cookie-decline {
	padding: 0.5rem 1.25rem;
	border-radius: var(--border-radius);
	font-size: var(--font-size-sm);
	font-weight: 700;
	cursor: pointer;
	transition: all var(--transition-fast);
	border: 2px solid transparent;
}

.cookie-accept {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}

.cookie-accept:hover {
	background: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
}

.cookie-decline {
	background: transparent;
	color: rgba(255,255,255,0.8);
	border-color: rgba(255,255,255,0.4);
}

.cookie-decline:hover {
	border-color: rgba(255,255,255,0.8);
	color: #fff;
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-light   { color: var(--color-text-light); }
.text-muted   { color: var(--color-text-muted); }
.text-small   { font-size: var(--font-size-sm); }
.text-large   { font-size: var(--font-size-lg); }
.text-bold    { font-weight: 700; }
.text-uppercase { text-transform: uppercase; letter-spacing: 0.5px; }

.bg-alt       { background: var(--color-bg-alt); }
.bg-primary   { background: var(--color-primary); color: #fff; }

.rounded      { border-radius: var(--border-radius); }
.rounded-lg   { border-radius: var(--border-radius-lg); }
.rounded-full { border-radius: var(--border-radius-full); }

.shadow-sm    { box-shadow: var(--shadow-sm); }
.shadow-md    { box-shadow: var(--shadow-md); }

.d-flex       { display: flex; }
.d-grid       { display: grid; }
.d-none       { display: none; }
.d-block      { display: block; }

.flex-wrap    { flex-wrap: wrap; }
.align-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

.gap-sm       { gap: var(--spacing-sm); }
.gap-md       { gap: var(--spacing-md); }
.gap-lg       { gap: var(--spacing-lg); }

.mt-xs  { margin-top: var(--spacing-xs); }
.mt-sm  { margin-top: var(--spacing-sm); }
.mt-md  { margin-top: var(--spacing-md); }
.mt-lg  { margin-top: var(--spacing-lg); }
.mt-xl  { margin-top: var(--spacing-xl); }
.mt-2xl { margin-top: var(--spacing-2xl); }
.mt-3xl { margin-top: var(--spacing-3xl); }

.mb-xs  { margin-bottom: var(--spacing-xs); }
.mb-sm  { margin-bottom: var(--spacing-sm); }
.mb-md  { margin-bottom: var(--spacing-md); }
.mb-lg  { margin-bottom: var(--spacing-lg); }
.mb-xl  { margin-bottom: var(--spacing-xl); }
.mb-2xl { margin-bottom: var(--spacing-2xl); }

.pt-xl  { padding-top: var(--spacing-xl); }
.pb-xl  { padding-bottom: var(--spacing-xl); }
.py-xl  { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
.py-2xl { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-2xl); }

.w-full { width: 100%; }

/* Section heading */
.section-heading {
	text-align: center;
	margin-bottom: var(--spacing-2xl);
}

.section-heading h2 {
	font-size: var(--font-size-2xl);
	margin-bottom: var(--spacing-sm);
}

@media (min-width: 768px) {
	.section-heading h2 {
		font-size: var(--font-size-3xl);
	}
}

.section-heading p {
	font-size: var(--font-size-lg);
	color: var(--color-text-light);
	max-width: 600px;
	margin: 0 auto;
}

.section-heading .section-tag {
	display: inline-block;
	padding: 4px 14px;
	background: rgba(232,82,10,0.1);
	color: var(--color-primary);
	font-size: var(--font-size-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-radius: var(--border-radius-full);
	margin-bottom: var(--spacing-sm);
}

/* ==========================================================================
   ENTRY CONTENT (Single Post/Page)
   ========================================================================== */

.entry-header {
	margin-bottom: var(--spacing-2xl);
}

.entry-title {
	font-size: var(--font-size-2xl);
	margin-bottom: var(--spacing-md);
}

@media (min-width: 768px) {
	.entry-title {
		font-size: var(--font-size-3xl);
	}
}

.featured-image {
	margin-bottom: var(--spacing-2xl);
	border-radius: var(--border-radius-xl);
	overflow: hidden;
}

.featured-image img {
	width: 100%;
	object-fit: cover;
}

.entry-footer {
	margin-top: var(--spacing-2xl);
	padding-top: var(--spacing-lg);
	border-top: 1px solid var(--color-border);
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-md);
	font-size: var(--font-size-sm);
	color: var(--color-text-light);
}

.entry-tags a {
	display: inline-block;
	padding: 4px 12px;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-full);
	font-size: var(--font-size-xs);
	color: var(--color-text-light);
	text-decoration: none;
	transition: all var(--transition-fast);
}

.entry-tags a:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

/* ==========================================================================
   RELATED RECIPES / POSTS
   ========================================================================== */

.related-section {
	margin-top: var(--spacing-3xl);
	padding-top: var(--spacing-2xl);
	border-top: 2px solid var(--color-border);
}

.related-section h3 {
	font-size: var(--font-size-xl);
	margin-bottom: var(--spacing-xl);
}

/* ==========================================================================
   NOTICE / ALERT COMPONENTS
   ========================================================================== */

.notice,
.alert {
	padding: var(--spacing-md) var(--spacing-lg);
	border-radius: var(--border-radius);
	border: 1px solid transparent;
	margin-bottom: var(--spacing-md);
	font-size: var(--font-size-sm);
}

.notice-info,
.alert-info {
	background: #e8f4f8;
	border-color: #b8d9e8;
	color: #1565c0;
}

.notice-success,
.alert-success {
	background: #e8f5e9;
	border-color: #a5d6a7;
	color: #1b5e20;
}

.notice-warning,
.alert-warning {
	background: #fff8e1;
	border-color: #ffe082;
	color: #e65100;
}

.notice-error,
.alert-error {
	background: #ffebee;
	border-color: #ef9a9a;
	color: #b71c1c;
}

/* ==========================================================================
   LOADING SPINNER
   ========================================================================== */

.spinner {
	display: inline-block;
	width: 24px;
	height: 24px;
	border: 3px solid rgba(232,82,10,0.2);
	border-top-color: var(--color-primary);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

/* ==========================================================================
   CATEGORY / TAXONOMY ARCHIVE
   ========================================================================== */

.archive-header {
	background: var(--color-bg-alt);
	border-bottom: 1px solid var(--color-border);
	padding: var(--spacing-2xl) 0;
	margin-bottom: var(--spacing-2xl);
}

.archive-title {
	font-size: var(--font-size-2xl);
	margin-bottom: var(--spacing-sm);
}

.archive-description {
	color: var(--color-text-light);
	font-size: var(--font-size-lg);
}

/* ==========================================================================
   HOMEPAGE SECTIONS
   ========================================================================== */

.hp-section {
	padding: var(--spacing-3xl) 0;
}

.hp-section:nth-child(even) {
	background: var(--color-bg-alt);
}

/* Category pills */
.category-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--spacing-md);
}

@media (min-width: 480px) {
	.category-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 768px) {
	.category-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 1024px) {
	.category-grid {
		grid-template-columns: repeat(6, 1fr);
	}
}

.category-pill {
	display: block;
	padding: var(--spacing-md);
	background: var(--color-card-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-lg);
	text-align: center;
	text-decoration: none;
	color: var(--color-text);
	font-size: var(--font-size-sm);
	font-weight: 600;
	transition: all var(--transition-normal);
	box-shadow: var(--shadow-sm);
}

.category-pill:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.category-pill-icon {
	font-size: 2rem;
	display: block;
	margin-bottom: var(--spacing-sm);
}

/* About strip */
.about-strip {
	background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
	color: #fff;
	padding: var(--spacing-3xl) 0;
}

.about-strip h2 {
	color: #fff;
	margin-bottom: var(--spacing-md);
}

.about-strip p {
	color: rgba(255,255,255,0.85);
	margin-bottom: var(--spacing-lg);
}

/* ==========================================================================
   TABLES (General)
   ========================================================================== */

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--spacing-lg);
	font-size: var(--font-size-sm);
	overflow: hidden;
	border-radius: var(--border-radius);
	border: 1px solid var(--color-border);
}

.entry-content table th,
.entry-content table td {
	padding: var(--spacing-sm) var(--spacing-md);
	border-bottom: 1px solid var(--color-border);
	text-align: left;
}

.entry-content table th {
	background: var(--color-bg-alt);
	font-weight: 700;
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.entry-content table tr:last-child td {
	border-bottom: none;
}

.entry-content table tr:nth-child(even) td {
	background: rgba(251,247,244,0.5);
}

/* Responsive table wrapper */
.table-responsive {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: var(--spacing-lg);
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
	/* Hide non-essential elements */
	.site-header,
	.main-navigation,
	.menu-toggle,
	.sidebar-main,
	.site-footer,
	.cookie-consent-banner,
	.comments-area,
	.related-section,
	.ad-slot,
	.before-footer-ad,
	.below-header-ad,
	.post-navigation,
	.nav-links,
	.breadcrumbs,
	.btn,
	.button,
	.hero-search {
		display: none !important;
	}

	/* Reset layout */
	.container,
	.container-narrow {
		max-width: 100%;
		padding: 0;
	}

	.content-area.with-sidebar {
		grid-template-columns: 1fr;
	}

	body {
		font-size: 12pt;
		line-height: 1.6;
		color: #000;
		background: #fff;
	}

	a {
		color: #000;
		text-decoration: none;
	}

	/* Show URLs for external links */
	.entry-content a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 10pt;
		color: #555;
	}

	h1, h2, h3, h4, h5, h6 {
		color: #000;
		page-break-after: avoid;
	}

	img {
		max-width: 100%;
		page-break-inside: avoid;
	}

	/* Recipe printing */
	.recipe-meta-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
	}

	.ingredients-list li,
	.instructions-list li {
		page-break-inside: avoid;
	}

	.nutrition-table {
		page-break-inside: avoid;
	}

	/* Print recipe header */
	.recipe-hero-image {
		max-height: 300px;
	}
}


/* ==========================================================================
   PATCH v1.1 — Visual fixes based on live site review
   ========================================================================== */

/* ── 1. HEADER: fix hamburger bar class mismatch (template uses .menu-toggle-bar,
         CSS targeted .hamburger-bar) ── */
.menu-toggle .menu-toggle-bar {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--color-text);
	border-radius: 2px;
	transition: transform var(--transition-normal), opacity var(--transition-fast);
}
.menu-toggle.is-active .menu-toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.menu-toggle.is-active .menu-toggle-bar:nth-child(2) {
	opacity: 0;
}
.menu-toggle.is-active .menu-toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ── 2. HEADER: ensure branding + nav always visible, min-height, white bg ── */
.site-header {
	min-height: var(--header-height);
	height: auto;
}
.header-inner {
	min-height: var(--header-height);
	flex-wrap: wrap;
	padding-top: 8px;
	padding-bottom: 8px;
}
/* Site title always orange and readable */
.site-title-link {
	text-decoration: none;
}
.site-title {
	font-family: var(--font-heading);
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--color-primary);
	margin: 0;
	line-height: 1.2;
}
/* WP admin bar offset for sticky header */
.admin-bar .site-header {
	top: 32px;
}
@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

/* ── 3. HEADER SEARCH: search toggle button style ── */
.header-search-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--border-radius);
	background: transparent;
	border: 1px solid var(--color-border);
	color: var(--color-text);
	transition: background var(--transition-fast), color var(--transition-fast);
	cursor: pointer;
	flex-shrink: 0;
}
.header-search-toggle:hover {
	background: var(--color-bg-alt);
	color: var(--color-primary);
}
.header-search-dropdown {
	position: absolute;
	top: var(--header-height);
	right: 0;
	left: 0;
	background: var(--color-bg);
	border-bottom: 2px solid var(--color-primary);
	box-shadow: var(--shadow-md);
	padding: var(--spacing-md) var(--spacing-lg);
	z-index: var(--z-dropdown);
}
.header-search-dropdown .search-form {
	max-width: 600px;
	margin: 0 auto;
}
.header-search-dropdown .search-input-wrap {
	display: flex;
	gap: var(--spacing-sm);
}
.header-search-dropdown .search-field {
	flex: 1;
	padding: 10px 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	font-size: 1rem;
}
.header-search-dropdown .search-submit {
	padding: 10px 18px;
	background: var(--color-primary);
	color: #fff;
	border: none;
	border-radius: var(--border-radius);
	cursor: pointer;
}

/* ── 4. TOOLS GRID: 2×2 at tablet, 4-col at desktop (no orphaned card) ── */
@media (min-width: 768px) {
	.tools-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1100px) {
	.tools-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ── 5. TOOL CARD: improved visual design ── */
.tool-card {
	border-radius: var(--border-radius-lg);
	border: 1px solid var(--color-border);
	padding: var(--spacing-xl) var(--spacing-lg);
	background: var(--color-card-bg);
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	transition: box-shadow var(--transition-normal), transform var(--transition-normal);
	text-align: center;
}
.tool-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}
.tool-card__icon {
	font-size: 2.5rem;
	line-height: 1;
	margin-bottom: var(--spacing-sm);
}
.tool-card__title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-text);
	margin: 0 0 var(--spacing-xs);
}
.tool-card__description {
	font-size: 0.875rem;
	color: var(--color-text-light);
	flex: 1;
	margin: 0 0 var(--spacing-md);
	line-height: 1.5;
}
.btn-tool {
	display: inline-block;
	padding: 8px 20px;
	background: transparent;
	border: 1.5px solid var(--color-primary);
	color: var(--color-primary);
	border-radius: var(--border-radius-full);
	font-size: 0.875rem;
	font-weight: 600;
	transition: background var(--transition-fast), color var(--transition-fast);
	margin-top: auto;
	align-self: center;
}
.btn-tool:hover {
	background: var(--color-primary);
	color: #fff;
}

/* ── 6. CATEGORY TILES: proper grid with visual tiles ── */
.category-tiles {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--spacing-md);
}
@media (min-width: 480px) {
	.category-tiles {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (min-width: 768px) {
	.category-tiles {
		grid-template-columns: repeat(4, 1fr);
	}
}
.category-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-sm);
	padding: var(--spacing-lg) var(--spacing-md);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-lg);
	text-decoration: none;
	text-align: center;
	transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.category-tile:hover {
	background: #fff;
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
	border-color: var(--color-primary);
}
.category-tile__media {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--color-border);
	overflow: hidden;
	flex-shrink: 0;
}
.category-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.category-tile__emoji {
	font-size: 1.8rem;
	line-height: 1;
}
.category-tile__name {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--color-text);
	display: block;
}
.category-tile__count {
	font-size: 0.78rem;
	color: var(--color-text-light);
	display: block;
}

/* ── 7. SECTION LAYOUT: uniform padding and proper container alignment ── */
.section-padding {
	padding-top: 3.5rem;
	padding-bottom: 3.5rem;
}
.section-header {
	margin-bottom: 2rem;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
}
.section-title {
	font-size: 1.6rem;
	font-family: var(--font-heading);
	color: var(--color-text);
	margin: 0;
}
.section-subtitle {
	color: var(--color-text-light);
	margin: 4px 0 0;
	font-size: 0.95rem;
}
/* Section header: title + subtitle stacked left, link right */
.section-header-col {
	display: flex;
	flex-direction: column;
}
.section-link {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-primary);
	white-space: nowrap;
	flex-shrink: 0;
}
.section-link:hover {
	color: var(--color-primary-dark);
}

/* ── 8. HERO: sharper search form inside hero ── */
.hero-search .search-form {
	max-width: 480px;
	margin: 0 auto var(--spacing-md);
}
.hero-search .search-input-wrap {
	display: flex;
	background: #fff;
	border-radius: var(--border-radius-full);
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.hero-search .search-field {
	flex: 1;
	border: none;
	padding: 14px 20px;
	font-size: 1rem;
	outline: none;
	background: transparent;
	color: #1A1A1A;
}
.hero-search .search-field::placeholder {
	color: #999;
}
.hero-search .search-submit {
	background: var(--color-primary);
	border: none;
	padding: 12px 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	color: #fff;
	flex-shrink: 0;
	transition: background var(--transition-fast);
}
.hero-search .search-submit:hover {
	background: var(--color-primary-dark);
}
.hero-search .search-submit svg {
	stroke: #fff;
}

/* ── 9. BLOG CARDS: clean horizontal layout on desktop ── */
.blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-lg);
}
@media (min-width: 768px) {
	.blog-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
.blog-card {
	background: var(--color-card-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}
.blog-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}
.blog-card-image a {
	display: block;
	aspect-ratio: 16/9;
	overflow: hidden;
	background: var(--color-bg-alt);
}
.blog-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}
.blog-card:hover .blog-card-image img {
	transform: scale(1.04);
}
.blog-card-body {
	padding: var(--spacing-lg);
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--spacing-sm);
}
.blog-card-meta {
	font-size: 0.78rem;
	color: var(--color-text-light);
	display: flex;
	gap: var(--spacing-sm);
	flex-wrap: wrap;
	align-items: center;
}
.blog-card-meta .category-badge {
	background: var(--color-bg-alt);
	color: var(--color-primary);
	border-radius: var(--border-radius-full);
	padding: 2px 10px;
	font-weight: 600;
	font-size: 0.75rem;
}
.blog-card-title {
	font-size: 1.05rem;
	font-family: var(--font-heading);
	margin: 0;
}
.blog-card-title a {
	color: var(--color-text);
	text-decoration: none;
}
.blog-card-title a:hover {
	color: var(--color-primary);
}
.blog-card-excerpt {
	font-size: 0.875rem;
	color: var(--color-text-light);
	line-height: 1.6;
	flex: 1;
	margin: 0;
}
.blog-card .btn-ghost {
	align-self: flex-start;
	margin-top: auto;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-primary);
	padding: 0;
	background: transparent;
	border: none;
}
.blog-card .btn-ghost:hover {
	color: var(--color-primary-dark);
}

/* ── 10. ABOUT / TRUST SECTION: two-col + stats ── */
.about-section {
	background: var(--color-bg-alt);
}
.about-section-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-2xl);
	align-items: center;
}
@media (min-width: 768px) {
	.about-section-inner {
		grid-template-columns: 1fr 340px;
	}
}
.about-section__text h2 {
	font-size: 1.75rem;
	margin-bottom: var(--spacing-md);
}
.about-section__text p {
	color: var(--color-text-light);
	line-height: 1.7;
	margin-bottom: var(--spacing-md);
}
.about-stats {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}
.about-stat-item {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-lg);
	padding: var(--spacing-lg);
	text-align: center;
	box-shadow: var(--shadow-sm);
}
.about-stat-item .stat-number {
	display: block;
	font-size: 2rem;
	font-weight: 800;
	color: var(--color-primary);
	font-family: var(--font-heading);
	line-height: 1;
}
.about-stat-item .stat-label {
	font-size: 0.85rem;
	color: var(--color-text-light);
	margin-top: 4px;
	display: block;
}

/* ── 11. NO CONTENT NOTICE ── */
.no-content-notice {
	color: var(--color-text-light);
	font-style: italic;
	padding: var(--spacing-lg) 0;
}

/* ── 12. FOOTER: dark theme, better contrast ── */
.site-footer {
	background: #1a1a1a;
	color: #d0d0d0;
	margin-top: 0;
}
.footer-widgets {
	padding: 3rem 0 2rem;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-widgets-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-xl);
}
@media (min-width: 480px) {
	.footer-widgets-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px) {
	.footer-widgets-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}
.site-footer .widget-title {
	color: #fff;
	font-size: 0.9rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: var(--spacing-md);
	padding-bottom: var(--spacing-sm);
	border-bottom: 2px solid var(--color-primary);
	display: inline-block;
}
.site-footer p,
.site-footer .widget p {
	color: #b0b0b0;
	font-size: 0.875rem;
	line-height: 1.6;
}
.footer-link-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.footer-link-list a {
	color: #b0b0b0;
	font-size: 0.875rem;
	text-decoration: none;
	transition: color var(--transition-fast);
}
.footer-link-list a:hover {
	color: var(--color-primary-light);
}
.footer-social-links {
	display: flex;
	gap: var(--spacing-sm);
	margin-top: var(--spacing-md);
	flex-wrap: wrap;
}
.social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255,255,255,0.08);
	text-decoration: none;
	transition: background var(--transition-fast);
	font-size: 1.1rem;
}
.social-link:hover {
	background: var(--color-primary);
}
.footer-bottom {
	padding: var(--spacing-lg) 0;
}
.footer-bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--spacing-md);
}
.footer-copyright {
	font-size: 0.82rem;
	color: #888;
	margin: 0;
}
.footer-navigation .footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-sm) var(--spacing-md);
	list-style: none;
	margin: 0;
	padding: 0;
}
.footer-navigation .footer-menu a {
	color: #888;
	font-size: 0.82rem;
	text-decoration: none;
	transition: color var(--transition-fast);
}
.footer-navigation .footer-menu a:hover {
	color: var(--color-primary-light);
}

/* ── 13. BREADCRUMBS BAR ── */
.breadcrumbs-bar {
	background: var(--color-bg-alt);
	border-bottom: 1px solid var(--color-border);
	padding: 8px 0;
}
.breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.breadcrumb-item {
	display: flex;
	align-items: center;
}
.breadcrumb-item a {
	font-size: 0.8rem;
	color: var(--color-text-light);
}
.breadcrumb-item a:hover {
	color: var(--color-primary);
}
.breadcrumb-current {
	font-size: 0.8rem;
	color: var(--color-text-muted);
}
.breadcrumb-sep {
	color: var(--color-border-dark);
	font-size: 0.85rem;
	margin: 0 2px;
}

/* ── 14. RECIPE CARD: ensure cards display correctly ── */
.recipe-card {
	background: var(--color-card-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}
.recipe-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-4px);
}
.recipe-card-image-link {
	display: block;
	aspect-ratio: 4/3;
	overflow: hidden;
	background: var(--color-bg-alt);
}
.recipe-card-image-link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}
.recipe-card:hover .recipe-card-image-link img {
	transform: scale(1.05);
}
.recipe-card-image-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg-alt);
	font-size: 3rem;
	color: var(--color-text-muted);
}
.recipe-card-body {
	padding: var(--spacing-md) var(--spacing-lg);
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 6px;
}
.recipe-card-meta {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.recipe-card-title {
	font-size: 1rem;
	font-family: var(--font-heading);
	margin: 0;
}
.recipe-card-title a {
	color: var(--color-text);
}
.recipe-card-title a:hover {
	color: var(--color-primary);
}
.recipe-card-excerpt {
	font-size: 0.85rem;
	color: var(--color-text-light);
	margin: 0;
	line-height: 1.5;
	flex: 1;
}
.recipe-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: var(--spacing-sm);
	padding-top: var(--spacing-sm);
	border-top: 1px solid var(--color-border);
	font-size: 0.8rem;
}
.recipe-time {
	color: var(--color-text-light);
}
.recipe-badge,
.cuisine-badge,
.diet-badge {
	font-size: 0.7rem;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: var(--border-radius-full);
	background: var(--color-bg-alt);
	color: var(--color-text-light);
	border: 1px solid var(--color-border);
	text-decoration: none;
}
.difficulty-easy   { background: #e8f5e9; color: #2D6A4F; border-color: #a5d6a7; }
.difficulty-medium { background: #fff8e1; color: #F57C00; border-color: #ffe082; }
.difficulty-hard   { background: #fbe9e7; color: #E8520A; border-color: #ffab91; }

/* Recipe grid on archive/homepage */
.recipe-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-lg);
}
@media (min-width: 480px) {
	.recipe-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px) {
	.recipe-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ── 15. GENERAL BTN: outline variant ── */
.btn-outline-primary {
	display: inline-block;
	padding: 12px 28px;
	border: 2px solid var(--color-primary);
	color: var(--color-primary);
	border-radius: var(--border-radius-full);
	font-weight: 600;
	font-size: 0.95rem;
	transition: background var(--transition-fast), color var(--transition-fast);
	text-decoration: none;
}
.btn-outline-primary:hover {
	background: var(--color-primary);
	color: #fff;
}
.view-all-wrap {
	text-align: center;
	margin-top: var(--spacing-xl);
}

/* ── 16. BUTTON VARIANTS: primary, secondary, ghost ── */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 28px;
	border-radius: var(--border-radius-full);
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
	text-decoration: none;
	line-height: 1;
	border: 2px solid transparent;
}
.btn:hover {
	transform: translateY(-1px);
}
.btn-primary {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}
.btn-primary:hover {
	background: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
	color: #fff;
}
.btn-secondary {
	background: var(--color-secondary);
	color: #fff;
	border-color: var(--color-secondary);
}
.btn-secondary:hover {
	background: var(--color-secondary-dark);
	border-color: var(--color-secondary-dark);
	color: #fff;
}
.btn-ghost {
	background: transparent;
	color: var(--color-primary);
	border-color: transparent;
	padding-left: 0;
	padding-right: 0;
}
.btn-ghost:hover {
	color: var(--color-primary-dark);
	transform: translateX(3px);
}
.btn-lg {
	padding: 16px 36px;
	font-size: 1.05rem;
}
.btn-sm {
	padding: 8px 18px;
	font-size: 0.85rem;
}
.btn-arrow {
	transition: transform var(--transition-fast);
}
.btn:hover .btn-arrow {
	transform: translateX(4px);
}

/* ── 17. HERO: full-width gradient, white text ── */
.hero-section {
	background: linear-gradient(135deg, var(--color-primary) 0%, #b03d00 40%, var(--color-secondary-dark) 100%);
	color: #fff;
	padding: 5rem 0 4rem;
	text-align: center;
}
.hero-title {
	font-family: var(--font-heading);
	font-size: clamp(1.8rem, 4vw, 3rem);
	color: #fff;
	margin-bottom: 1rem;
	line-height: 1.2;
	text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.hero-subtitle {
	font-size: clamp(1rem, 2vw, 1.2rem);
	color: rgba(255,255,255,0.88);
	max-width: 560px;
	margin: 0 auto 2rem;
	line-height: 1.6;
}
.hero-cta {
	margin-top: 1.5rem;
}
.hero-section .btn-primary {
	background: #fff;
	color: var(--color-primary);
	border-color: #fff;
	box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.hero-section .btn-primary:hover {
	background: rgba(255,255,255,0.92);
	color: var(--color-primary-dark);
}

/* ── 18. CONTAINER: ensure consistent side padding ── */
.container {
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: max(16px, env(safe-area-inset-left));
	padding-right: max(16px, env(safe-area-inset-right));
}
@media (min-width: 640px) {
	.container {
		padding-left: 24px;
		padding-right: 24px;
	}
}
@media (min-width: 1024px) {
	.container {
		padding-left: 32px;
		padding-right: 32px;
	}
}

/* ==========================================================================
   PATCH v1.2 — Recipe archive layout + no-results + sidebar fixes
   ========================================================================== */

/* ── 1. RECIPE ARCHIVE: two-column content + sidebar layout ── */
.recipe-archive-wrapper {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-2xl);
	align-items: start;
	padding-top: var(--spacing-2xl);
	padding-bottom: var(--spacing-2xl);
}
@media (min-width: 1024px) {
	.recipe-archive-wrapper {
		grid-template-columns: 1fr 300px;
	}
}
.recipe-archive-content {
	min-width: 0; /* prevent grid blowout */
}

/* ── 2. ARCHIVE HERO ── */
.archive-hero {
	background: var(--color-bg-alt);
	border-bottom: 1px solid var(--color-border);
	padding: 2.5rem 0 1.5rem;
}
.archive-hero__title {
	font-size: clamp(1.8rem, 3vw, 2.5rem);
	font-family: var(--font-heading);
	margin: 0 0 0.5rem;
	color: var(--color-text);
}
.archive-hero__subtitle {
	color: var(--color-text-light);
	font-size: 1rem;
	max-width: 680px;
	margin: 0;
	line-height: 1.6;
}

/* ── 3. FILTER BAR ── */
.recipe-filter-bar {
	background: #fff;
	border-bottom: 1px solid var(--color-border);
	padding: 1rem 0;
	position: sticky;
	top: var(--header-height);
	z-index: 50;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.admin-bar .recipe-filter-bar {
	top: calc(var(--header-height) + 32px);
}
@media (max-width: 782px) {
	.admin-bar .recipe-filter-bar {
		top: calc(var(--header-height) + 46px);
	}
}
.recipe-filter-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: flex-end;
}
.filter-dropdowns {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	flex: 1;
}
.filter-dropdown {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 160px;
}
.filter-dropdown__label {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-text-light);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.filter-dropdown__select {
	appearance: none;
	-webkit-appearance: none;
	padding: 8px 32px 8px 12px;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
	font-size: 0.875rem;
	color: var(--color-text);
	cursor: pointer;
	transition: border-color var(--transition-fast);
	min-width: 150px;
}
.filter-dropdown__select:hover,
.filter-dropdown__select:focus {
	border-color: var(--color-primary);
	outline: none;
}
.filter-dropdown.is-active .filter-dropdown__select {
	border-color: var(--color-primary);
	background-color: #fff8f5;
	font-weight: 600;
}

/* Active filter tags */
.active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--color-border);
}
.active-filters__label {
	font-size: 0.8rem;
	color: var(--color-text-light);
	font-weight: 600;
}
.active-filter-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	background: #fff3ee;
	border: 1px solid var(--color-primary);
	border-radius: var(--border-radius-full);
	font-size: 0.8rem;
	color: var(--color-primary);
	text-decoration: none;
	transition: background var(--transition-fast);
}
.active-filter-tag:hover {
	background: var(--color-primary);
	color: #fff;
}
.active-filter-tag__remove {
	font-size: 1rem;
	line-height: 1;
	opacity: 0.7;
}
.active-filters__clear-all {
	font-size: 0.8rem;
	color: var(--color-text-light);
	text-decoration: underline;
	margin-left: 0.5rem;
}
.active-filters__clear-all:hover {
	color: var(--color-primary);
}

/* Recipe count */
.recipe-count {
	font-size: 0.875rem;
	color: var(--color-text-light);
	margin-bottom: 1.25rem;
}
.recipe-count strong {
	color: var(--color-text);
}

/* Pagination */
.recipe-pagination {
	margin-top: 2.5rem;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.recipe-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	font-size: 0.875rem;
	color: var(--color-text);
	text-decoration: none;
	transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.recipe-pagination .page-numbers:hover,
.recipe-pagination .page-numbers.current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

/* ── 4. NO-RESULTS SECTION: centred, padded, readable ── */
.no-results {
	padding: 2rem 0;
}
.no-results__inner {
	max-width: 520px;
	margin: 0 auto;
	text-align: center;
	padding: 2.5rem 1.5rem;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-xl);
}
.no-results__icon {
	display: flex;
	justify-content: center;
	margin-bottom: 1.25rem;
	color: var(--color-text-muted);
}
.no-results__title {
	font-family: var(--font-heading);
	font-size: 1.6rem;
	margin-bottom: 0.75rem;
	color: var(--color-text);
}
.no-results__message {
	color: var(--color-text-light);
	font-size: 0.95rem;
	line-height: 1.6;
	margin-bottom: 1.5rem;
}
.no-results__search {
	margin-bottom: 1.5rem;
}
.no-results__search-label,
.no-results__browse-label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-text-light);
	margin-bottom: 0.5rem;
	text-align: left;
}
.no-results__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	justify-content: center;
}
.no-results__popular-cats {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-border);
	text-align: left;
}
.no-results__tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
}
.recipe-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 12px;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-full);
	font-size: 0.8rem;
	color: var(--color-text-light);
	text-decoration: none;
	transition: background var(--transition-fast), color var(--transition-fast);
}
.recipe-badge:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}
.recipe-badge__count {
	opacity: 0.7;
}

/* ── 5. SIDEBAR: clean widget styling ── */
.sidebar-main {
	min-width: 0;
}
.sidebar-main .widget {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-lg);
	padding: 1.25rem 1.25rem 1.5rem;
	margin-bottom: 1.5rem;
}
.sidebar-main .widget:last-child {
	margin-bottom: 0;
}
.sidebar-main .widget-title {
	font-family: var(--font-heading);
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-text);
	margin: 0 0 1rem;
	padding-bottom: 0.625rem;
	border-bottom: 2px solid var(--color-primary);
	display: block;
}
/* Default WP widget lists */
.sidebar-main .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.sidebar-main .widget ul li {
	font-size: 0.875rem;
}
.sidebar-main .widget ul li a {
	color: var(--color-text-light);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 4px 0;
	border-bottom: 1px solid transparent;
	transition: color var(--transition-fast);
}
.sidebar-main .widget ul li a:hover {
	color: var(--color-primary);
}
/* Widget search */
.sidebar-main .widget_search .search-input-wrap {
	display: flex;
	gap: 6px;
}
.sidebar-main .widget_search .search-field {
	flex: 1;
	padding: 8px 12px;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	font-size: 0.875rem;
}
.sidebar-main .widget_search .search-submit {
	padding: 8px 14px;
	background: var(--color-primary);
	color: #fff;
	border: none;
	border-radius: var(--border-radius);
	cursor: pointer;
	font-size: 0.875rem;
	transition: background var(--transition-fast);
}
.sidebar-main .widget_search .search-submit:hover {
	background: var(--color-primary-dark);
}

/* ── 6. CONTENT-AREA: general two-column for single/page ── */
.content-area.with-sidebar {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-2xl);
	align-items: start;
}
@media (min-width: 1024px) {
	.content-area.with-sidebar {
		grid-template-columns: 1fr 300px;
	}
}
.main-content {
	min-width: 0;
}

/* ==========================================================================
   PATCH v1.3 — Complete header & footer redesign
   ========================================================================== */

/* ── RESET old header rules that conflict ── */
.site-header {
	position: sticky !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--z-sticky);
	background: #fff;
	box-shadow: 0 2px 12px rgba(0,0,0,0.08);
	display: block;
	height: auto;
	min-height: unset;
}
.admin-bar .site-header {
	top: 32px;
}
@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

/* ── TOP UTILITY BAR ── */
.header-topbar {
	background: #1a1a1a;
	color: rgba(255,255,255,0.75);
	font-size: 0.78rem;
	padding: 6px 0;
}
.header-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.header-topbar__tagline {
	color: rgba(255,255,255,0.65);
}
.header-topbar__links {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}
.header-topbar__links a {
	color: rgba(255,255,255,0.75);
	text-decoration: none;
	font-size: 0.78rem;
	transition: color var(--transition-fast);
}
.header-topbar__links a:hover {
	color: var(--color-accent);
}
@media (max-width: 640px) {
	.header-topbar__tagline {
		display: none;
	}
}

/* ── MAIN HEADER BAR ── */
.header-main {
	background: #fff;
}
.header-main__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	height: 68px;
}

/* ── SITE BRANDING ── */
.site-branding {
	flex-shrink: 0;
}
.site-name-link {
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--color-text);
}
.site-name-link:hover {
	color: var(--color-primary);
}
.site-name-icon {
	font-size: 1.5rem;
	line-height: 1;
}
.site-name-text {
	font-family: var(--font-heading);
	font-size: 1.35rem;
	line-height: 1.1;
	color: var(--color-text);
	white-space: nowrap;
}
.site-name-text strong {
	color: var(--color-primary);
	font-weight: 800;
}
.site-branding .custom-logo-link {
	display: block;
}
.site-branding .custom-logo {
	height: 48px;
	width: auto;
	max-width: 200px;
}

/* ── MAIN NAVIGATION ── */
.main-navigation {
	flex: 1;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

/* nav-menu: hidden on mobile, flex on desktop */
.nav-menu {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (min-width: 1024px) {
	.nav-menu {
		display: flex !important;
		align-items: center;
		gap: 0;
	}
}
.nav-menu > li {
	position: relative;
}
.nav-menu > li > a {
	display: block;
	padding: 8px 14px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--color-text);
	text-decoration: none;
	border-radius: 6px;
	transition: color var(--transition-fast), background var(--transition-fast);
	white-space: nowrap;
}
.nav-menu > li > a:hover,
.nav-menu > .current-menu-item > a,
.nav-menu > .current-menu-ancestor > a {
	color: var(--color-primary);
	background: #fff5f0;
}
/* Dropdown arrow hide on desktop (handled by walker button) */
.nav-menu > li > .dropdown-toggle {
	display: none;
}
@media (min-width: 1024px) {
	.nav-menu > li > .dropdown-toggle {
		display: none;
	}
}
/* Sub-menus */
.nav-menu .sub-menu {
	display: none;
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	min-width: 200px;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-lg);
	box-shadow: var(--shadow-lg);
	padding: 6px 0;
	z-index: var(--z-dropdown);
	list-style: none;
}
.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu,
.nav-menu li.dropdown-open > .sub-menu {
	display: block;
}
.nav-menu .sub-menu a {
	display: block;
	padding: 8px 18px;
	font-size: 0.875rem;
	color: var(--color-text);
	text-decoration: none;
	transition: color var(--transition-fast), background var(--transition-fast);
}
.nav-menu .sub-menu a:hover {
	color: var(--color-primary);
	background: #fff5f0;
}

/* ── HEADER ACTIONS (right side) ── */
.header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

/* Search toggle button */
.header-search-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: transparent;
	border: 1.5px solid var(--color-border);
	border-radius: 8px;
	color: var(--color-text);
	cursor: pointer;
	transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.header-search-toggle:hover,
.header-search-toggle[aria-expanded="true"] {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}
.header-search-toggle svg {
	display: block;
}

/* Mobile menu toggle */
.menu-toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	background: transparent;
	border: 1.5px solid var(--color-border);
	border-radius: 8px;
	cursor: pointer;
	padding: 8px;
	transition: background var(--transition-fast), border-color var(--transition-fast);
}
.menu-toggle:hover {
	background: var(--color-bg-alt);
	border-color: var(--color-primary);
}
.menu-toggle .menu-toggle-bar,
.menu-toggle .hamburger-bar {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--color-text);
	border-radius: 2px;
	transition: transform 0.3s ease, opacity 0.2s ease;
}
.menu-toggle.is-active .menu-toggle-bar:nth-child(1),
.menu-toggle.is-active .hamburger-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.menu-toggle.is-active .menu-toggle-bar:nth-child(2),
.menu-toggle.is-active .hamburger-bar:nth-child(2) {
	opacity: 0;
}
.menu-toggle.is-active .menu-toggle-bar:nth-child(3),
.menu-toggle.is-active .hamburger-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}
@media (min-width: 1024px) {
	.menu-toggle {
		display: none;
	}
}

/* ── MOBILE NAV: slide-in panel ── */
@media (max-width: 1023px) {
	.main-navigation {
		position: fixed;
		top: 0;
		right: -100%;
		width: min(320px, 85vw);
		height: 100vh;
		background: #fff;
		box-shadow: -4px 0 24px rgba(0,0,0,0.12);
		z-index: var(--z-modal);
		overflow-y: auto;
		transition: right 0.3s ease;
		flex-direction: column;
		justify-content: flex-start;
		padding: 80px 0 32px;
	}
	.main-navigation.is-open {
		right: 0;
	}
	/* Overlay when mobile nav is open */
	body.nav-open::before {
		content: '';
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,0.45);
		z-index: calc(var(--z-modal) - 1);
	}
	.nav-menu {
		display: block !important;
		width: 100%;
	}
	.nav-menu > li > a {
		padding: 14px 24px;
		border-radius: 0;
		border-bottom: 1px solid var(--color-border);
		font-size: 1rem;
	}
	.nav-menu .sub-menu {
		position: static;
		box-shadow: none;
		border: none;
		border-radius: 0;
		background: var(--color-bg-alt);
		padding: 0;
		display: none;
	}
	.nav-menu li.dropdown-open > .sub-menu {
		display: block;
	}
	.nav-menu .sub-menu a {
		padding: 11px 36px;
		border-bottom: 1px solid var(--color-border);
	}
	/* Show dropdown toggles on mobile */
	.nav-menu > li.has-dropdown {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.nav-menu > li.has-dropdown > a {
		flex: 1;
	}
	.nav-menu > li > .dropdown-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		background: transparent;
		border: none;
		border-left: 1px solid var(--color-border);
		cursor: pointer;
		color: var(--color-text-light);
		flex-shrink: 0;
	}
	.nav-menu > li.dropdown-open > .dropdown-toggle {
		color: var(--color-primary);
	}
}

/* ── HEADER SEARCH BAR ── */
.header-search-bar {
	background: var(--color-bg-alt);
	border-top: 1px solid var(--color-border);
	padding: 14px 0;
}
.header-search-bar .search-form {
	display: flex;
	max-width: 600px;
	margin: 0 auto;
}
.header-search-bar .search-input-wrap {
	display: flex;
	flex: 1;
	gap: 8px;
}
.header-search-bar .search-field {
	flex: 1;
	padding: 10px 16px;
	border: 1.5px solid var(--color-border);
	border-radius: var(--border-radius);
	font-size: 1rem;
	outline: none;
	transition: border-color var(--transition-fast);
}
.header-search-bar .search-field:focus {
	border-color: var(--color-primary);
}
.header-search-bar .search-submit {
	padding: 10px 20px;
	background: var(--color-primary);
	color: #fff;
	border: none;
	border-radius: var(--border-radius);
	cursor: pointer;
	font-size: 0.9rem;
	font-weight: 600;
	transition: background var(--transition-fast);
}
.header-search-bar .search-submit:hover {
	background: var(--color-primary-dark);
}

/* ── COOKIE BANNER ── */
.cookie-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #1a1a1a;
	color: #fff;
	z-index: var(--z-cookie);
	border-top: 2px solid var(--color-primary);
	padding: 1rem 0;
}
.cookie-banner__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}
.cookie-banner__text {
	font-size: 0.875rem;
	color: rgba(255,255,255,0.85);
	margin: 0;
	flex: 1;
	min-width: 200px;
}
.cookie-banner__text a {
	color: var(--color-accent);
	text-decoration: underline;
}
.cookie-banner__actions {
	display: flex;
	gap: 0.75rem;
	flex-shrink: 0;
}
.cookie-btn {
	padding: 8px 20px;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	border: none;
	transition: background var(--transition-fast), color var(--transition-fast);
}
.cookie-btn--accept {
	background: var(--color-primary);
	color: #fff;
}
.cookie-btn--accept:hover {
	background: var(--color-primary-dark);
}
.cookie-btn--decline {
	background: transparent;
	color: rgba(255,255,255,0.7);
	border: 1px solid rgba(255,255,255,0.25);
}
.cookie-btn--decline:hover {
	background: rgba(255,255,255,0.1);
	color: #fff;
}

/* ════════════════════════════════════════════════════════════
   FOOTER — complete redesign
════════════════════════════════════════════════════════════ */
.site-footer {
	background: #111;
	color: rgba(255,255,255,0.7);
	margin-top: 0;
}

/* Top section: columns */
.footer-top {
	padding: 4rem 0 3rem;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}
@media (min-width: 600px) {
	.footer-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px) {
	.footer-grid {
		grid-template-columns: 1.8fr 1fr 1fr 1fr;
		gap: 2rem;
	}
}

/* Brand column */
.footer-brand {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.footer-logo-link {
	text-decoration: none;
}
.footer-site-name {
	font-family: var(--font-heading);
	font-size: 1.4rem;
	color: #fff;
	font-weight: 700;
}
.footer-tagline {
	font-size: 0.875rem;
	color: rgba(255,255,255,0.55);
	line-height: 1.7;
	margin: 0;
	max-width: 280px;
}
.footer-social {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 4px;
}
.social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: rgba(255,255,255,0.08);
	color: rgba(255,255,255,0.6);
	text-decoration: none;
	transition: background var(--transition-fast), color var(--transition-fast);
}
.social-icon:hover {
	background: var(--color-primary);
	color: #fff;
}
.social-icon svg {
	display: block;
}

/* Footer columns: heading + links */
.footer-heading {
	font-size: 0.8rem;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0 0 1.25rem;
	padding-bottom: 0.6rem;
	border-bottom: 2px solid var(--color-primary);
	display: inline-block;
}
.footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.footer-links li a {
	font-size: 0.875rem;
	color: rgba(255,255,255,0.55);
	text-decoration: none;
	transition: color var(--transition-fast), padding-left var(--transition-fast);
	display: block;
}
.footer-links li a:hover {
	color: var(--color-accent);
	padding-left: 4px;
}

/* Widget-style footer columns (when sidebar widgets assigned) */
.site-footer .widget-title,
.site-footer .footer-col .widget-title {
	font-size: 0.8rem;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0 0 1.25rem;
	padding-bottom: 0.6rem;
	border-bottom: 2px solid var(--color-primary);
	display: inline-block;
}
.site-footer .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.site-footer .widget ul li a {
	font-size: 0.875rem;
	color: rgba(255,255,255,0.55);
	text-decoration: none;
	transition: color var(--transition-fast);
	display: block;
}
.site-footer .widget ul li a:hover {
	color: var(--color-accent);
}
.site-footer .widget p {
	font-size: 0.875rem;
	color: rgba(255,255,255,0.55);
	line-height: 1.7;
}

/* Footer bottom bar */
.footer-bottom {
	padding: 1.25rem 0;
}
.footer-bottom__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
}
.footer-copyright {
	font-size: 0.8rem;
	color: rgba(255,255,255,0.35);
	margin: 0;
}
.footer-copyright a {
	color: rgba(255,255,255,0.5);
	text-decoration: none;
}
.footer-copyright a:hover {
	color: var(--color-accent);
}
.footer-nav__menu {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.footer-nav__menu a {
	font-size: 0.8rem;
	color: rgba(255,255,255,0.35);
	text-decoration: none;
	transition: color var(--transition-fast);
}
.footer-nav__menu a:hover {
	color: var(--color-accent);
}


/* ==========================================================================
   PATCH v1.4 — Header branding + nav visibility fix
   ========================================================================== */

/* Force site name always visible */
.site-branding .site-name-link {
	display: flex !important;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: #1a1a1a !important;
}
.site-branding .site-name-icon {
	font-size: 1.6rem;
	line-height: 1;
	display: inline-block !important;
}
.site-branding .site-name-text {
	display: inline-block !important;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.4rem !important;
	font-weight: 700 !important;
	color: #1a1a1a !important;
	white-space: nowrap;
	letter-spacing: -0.01em;
}
.site-branding .site-name-text strong {
	color: #E8520A !important;
	font-weight: 800;
}
.site-branding .site-name-link:hover .site-name-text {
	color: #E8520A !important;
}

/* ── DESKTOP NAV (≥ 768px) — show the nav menu inline ── */
@media (min-width: 768px) {
	/* On ≥768px: nav stays in normal flow (not fixed panel) */
	.main-navigation {
		position: static !important;
		width: auto !important;
		height: auto !important;
		right: auto !important;
		top: auto !important;
		background: transparent !important;
		box-shadow: none !important;
		overflow: visible !important;
		padding: 0 !important;
		flex: 1;
		display: flex !important;
		justify-content: flex-end;
		align-items: center;
		transition: none !important;
		z-index: auto !important;
	}
	.nav-menu {
		display: flex !important;
		align-items: center;
		gap: 0;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.nav-menu > li > a {
		display: block;
		padding: 8px 12px;
		font-size: 0.875rem;
		font-weight: 600;
		color: #1a1a1a;
		text-decoration: none;
		border-radius: 6px;
		white-space: nowrap;
		transition: color 0.2s, background 0.2s;
	}
	.nav-menu > li > a:hover,
	.nav-menu > .current-menu-item > a,
	.nav-menu > .current-menu-ancestor > a {
		color: #E8520A;
		background: #fff5f0;
	}
	/* Hide hamburger on tablet/desktop */
	.menu-toggle {
		display: none !important;
	}
}

/* ── MOBILE NAV (< 768px) — hamburger + slide panel ── */
@media (max-width: 767px) {
	/* Nav is a fixed right-side panel */
	.main-navigation {
		position: fixed !important;
		top: 0;
		right: -100%;
		width: min(300px, 85vw) !important;
		height: 100vh !important;
		background: #fff !important;
		box-shadow: -4px 0 24px rgba(0,0,0,0.15);
		z-index: 9999 !important;
		overflow-y: auto;
		transition: right 0.3s ease;
		display: flex !important;
		flex-direction: column;
		padding: 72px 0 32px;
	}
	.main-navigation.is-open {
		right: 0;
	}
	body.nav-open::before {
		content: '';
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,0.45);
		z-index: 9998;
	}
	.nav-menu {
		display: block !important;
		width: 100%;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.nav-menu > li > a {
		display: block;
		padding: 14px 24px;
		font-size: 1rem;
		font-weight: 600;
		color: #1a1a1a;
		text-decoration: none;
		border-bottom: 1px solid #eee;
	}
	.nav-menu > li > a:hover {
		color: #E8520A;
		background: #fff5f0;
	}
	/* Show hamburger on mobile */
	.menu-toggle {
		display: flex !important;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 5px;
		width: 40px;
		height: 40px;
		background: transparent;
		border: 1.5px solid #ddd;
		border-radius: 8px;
		cursor: pointer;
		padding: 8px;
	}
	.menu-toggle-bar {
		display: block !important;
		width: 20px;
		height: 2px;
		background: #1a1a1a;
		border-radius: 2px;
		transition: transform 0.3s ease, opacity 0.2s ease;
	}
	.menu-toggle.is-active .menu-toggle-bar:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}
	.menu-toggle.is-active .menu-toggle-bar:nth-child(2) {
		opacity: 0;
	}
	.menu-toggle.is-active .menu-toggle-bar:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}
}

/* ── HEADER LAYOUT: always flex ── */
.header-main {
	background: #fff;
	border-bottom: 1px solid #eee;
}
.header-main__inner {
	display: flex !important;
	align-items: center;
	gap: 1rem;
	height: 68px;
	min-height: 68px;
}
.site-branding {
	flex-shrink: 0;
}
.header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	margin-left: auto;
}
@media (min-width: 768px) {
	.header-actions {
		margin-left: 0;
	}
}

/* Sub-menu on desktop */
@media (min-width: 768px) {
	.nav-menu .sub-menu {
		display: none;
		position: absolute;
		top: calc(100% + 4px);
		left: 0;
		min-width: 200px;
		background: #fff;
		border: 1px solid #e5e7eb;
		border-radius: 8px;
		box-shadow: 0 8px 24px rgba(0,0,0,0.1);
		padding: 6px 0;
		z-index: 1000;
		list-style: none;
	}
	.nav-menu li:hover > .sub-menu,
	.nav-menu li.dropdown-open > .sub-menu {
		display: block;
	}
	.nav-menu li {
		position: relative;
	}
	.nav-menu .sub-menu a {
		display: block;
		padding: 8px 18px;
		font-size: 0.875rem;
		color: #1a1a1a;
		text-decoration: none;
		white-space: nowrap;
	}
	.nav-menu .sub-menu a:hover {
		color: #E8520A;
		background: #fff5f0;
	}
}
/* END PATCH v1.4 */


/* ==========================================================================
   PATCH v1.5 — Single Recipe Page Design Overhaul
   ========================================================================== */

/* ── RECIPE SINGLE WRAPPER ── */
.recipe-single-main {
	background: #fafaf8;
	padding-bottom: 4rem;
}
.recipe-single {
	max-width: 1100px;
	margin: 0 auto;
}

/* ── RECIPE HEADER ── */
.recipe-header {
	padding-top: 2rem;
	padding-bottom: 1.5rem;
	max-width: 1100px;
	margin: 0 auto;
}
.recipe-header__title {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	font-weight: 800;
	color: #1a1a1a;
	line-height: 1.2;
	margin: 0 0 0.75rem;
}
.recipe-header__meta-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
}
.recipe-header__date {
	font-size: 0.8rem;
	color: #888;
}
.recipe-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 0.75rem;
	font-weight: 600;
	text-decoration: none;
	background: #fff5f0;
	color: #E8520A;
	border: 1px solid #ffddd0;
}
.recipe-badge--diet {
	background: #f0faf0;
	color: #2d7a2d;
	border-color: #c3e6c3;
}

/* ── HERO IMAGE ── */
.recipe-hero-image {
	width: 100%;
	max-height: 480px;
	overflow: hidden;
	background: #f0ede8;
	position: relative;
}
.recipe-hero-image__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	max-height: 480px;
}
/* Placeholder when no featured image */
.recipe-hero-placeholder {
	width: 100%;
	height: 280px;
	background: linear-gradient(135deg, #fff5f0 0%, #fde8d8 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 5rem;
}

/* ── QUICK-STATS BAR (below hero, above content) ── */
.recipe-stats-bar {
	background: #fff;
	border-bottom: 2px solid #f0ede8;
	margin-bottom: 0;
}
.recipe-stats-bar__inner {
	display: flex;
	align-items: stretch;
	justify-content: center;
	flex-wrap: wrap;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 1.5rem;
}
.recipe-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1rem 1.5rem;
	gap: 2px;
	border-right: 1px solid #f0ede8;
	min-width: 100px;
	flex: 1;
}
.recipe-stat:last-child {
	border-right: none;
}
.recipe-stat__icon {
	font-size: 1.2rem;
	line-height: 1;
}
.recipe-stat__label {
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #999;
}
.recipe-stat__value {
	font-size: 0.95rem;
	font-weight: 700;
	color: #1a1a1a;
}
.recipe-stat--total .recipe-stat__value {
	color: #E8520A;
}
.difficulty-easy   { color: #2d7a2d; }
.difficulty-medium { color: #b45309; }
.difficulty-hard   { color: #c0392b; }

/* ── MAIN LAYOUT: left content + right sidebar ── */
.recipe-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	max-width: 1100px;
	margin: 0 auto;
	padding-top: 2rem;
}
@media (min-width: 900px) {
	.recipe-layout {
		grid-template-columns: 1fr 300px;
		align-items: start;
	}
}

/* ── RECIPE DESCRIPTION ── */
.recipe-description {
	font-size: 1.05rem;
	line-height: 1.8;
	color: #444;
	margin-bottom: 2rem;
	padding: 1.25rem 1.5rem;
	background: #fff;
	border-radius: 12px;
	border-left: 4px solid #E8520A;
	box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.recipe-description p { margin: 0; }

/* ── SECTION TITLES ── */
.recipe-section-title {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.35rem;
	font-weight: 800;
	color: #1a1a1a;
	margin: 0 0 1.25rem;
	padding-bottom: 0.6rem;
	border-bottom: 3px solid #E8520A;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.recipe-section-title::before {
	content: '';
	display: inline-block;
	width: 4px;
	height: 1.2em;
	background: #E8520A;
	border-radius: 2px;
}

/* ── INGREDIENTS ── */
.recipe-ingredients {
	background: #fff;
	border-radius: 12px;
	padding: 1.5rem;
	box-shadow: 0 1px 4px rgba(0,0,0,0.06);
	margin-bottom: 1.5rem;
}
.recipe-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1rem;
}
.recipe-section-header .recipe-section-title {
	margin-bottom: 0;
}

/* Servings adjuster */
.servings-adjuster {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 1.25rem;
	padding: 0.75rem 1rem;
	background: #fafaf8;
	border-radius: 8px;
	border: 1px solid #f0ede8;
}
.servings-adjuster__label {
	font-size: 0.8rem;
	color: #666;
	font-weight: 600;
}
.servings-adjuster__controls {
	display: flex;
	align-items: center;
	gap: 0;
	border: 1.5px solid #ddd;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}
.servings-adjuster__btn {
	width: 32px;
	height: 32px;
	background: #fff;
	border: none;
	cursor: pointer;
	font-size: 1.1rem;
	font-weight: 700;
	color: #E8520A;
	transition: background 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
}
.servings-adjuster__btn:hover {
	background: #fff5f0;
}
.servings-adjuster__value {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	font-size: 1rem;
	font-weight: 700;
	color: #1a1a1a;
	border-left: 1px solid #eee;
	border-right: 1px solid #eee;
	padding: 0 4px;
	height: 32px;
}
.servings-adjuster__unit {
	font-size: 0.8rem;
	color: #666;
	font-weight: 600;
}
.servings-adjuster__note {
	font-size: 0.72rem;
	color: #aaa;
}

/* Ingredient list */
.ingredients-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.ingredients-list__item {
	border-bottom: 1px solid #f5f5f3;
}
.ingredients-list__item:last-child {
	border-bottom: none;
}
.ingredients-list__label {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.6rem 0.25rem;
	cursor: pointer;
	transition: background 0.15s;
	border-radius: 6px;
}
.ingredients-list__label:hover {
	background: #fafaf8;
}
.ingredients-list__checkbox {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	accent-color: #E8520A;
	margin-top: 2px;
	cursor: pointer;
}
.ingredients-list__text {
	font-size: 0.95rem;
	color: #333;
	line-height: 1.5;
	transition: color 0.2s, text-decoration 0.2s;
}
.ingredients-list__checkbox:checked + .ingredients-list__text {
	color: #aaa;
	text-decoration: line-through;
}

/* ── INSTRUCTIONS ── */
.recipe-instructions {
	background: #fff;
	border-radius: 12px;
	padding: 1.5rem;
	box-shadow: 0 1px 4px rgba(0,0,0,0.06);
	margin-bottom: 1.5rem;
}
.instructions-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	counter-reset: step-counter;
}
.instruction-step {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 1rem;
	align-items: start;
	padding: 1rem;
	border-radius: 10px;
	background: #fafaf8;
	border: 1px solid #f0ede8;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.instruction-step:hover {
	border-color: #ffddd0;
	box-shadow: 0 2px 8px rgba(232, 82, 10, 0.08);
}
.instruction-step__number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: #E8520A;
	color: #fff;
	border-radius: 50%;
	font-size: 0.95rem;
	font-weight: 800;
	flex-shrink: 0;
	font-family: Georgia, serif;
}
.instruction-step__content {
	font-size: 0.97rem;
	color: #333;
	line-height: 1.7;
	padding-top: 8px;
}

/* ── NOTES ── */
.recipe-notes {
	background: #fffbf5;
	border-radius: 12px;
	padding: 1.5rem;
	border: 1px solid #fde8c8;
	margin-bottom: 1.5rem;
}
.recipe-notes .recipe-section-title {
	color: #b45309;
	border-bottom-color: #f59e0b;
}
.recipe-notes .recipe-section-title::before {
	background: #f59e0b;
}
.recipe-notes__content {
	font-size: 0.93rem;
	color: #555;
	line-height: 1.7;
}
.recipe-notes__content p { margin: 0 0 0.5rem; }
.recipe-notes__content p:last-child { margin-bottom: 0; }

/* ── NUTRITION ── */
.recipe-nutrition {
	background: #fff;
	border-radius: 12px;
	padding: 1.5rem;
	box-shadow: 0 1px 4px rgba(0,0,0,0.06);
	margin-bottom: 1.5rem;
}
.nutrition-disclaimer {
	font-size: 0.78rem;
	color: #999;
	margin: 0 0 1rem;
	font-style: italic;
}

/* Nutrition as visual cards instead of plain table */
.nutrition-table {
	width: 100%;
	border-collapse: collapse;
	display: none; /* hidden — replaced by grid below */
}
.nutrition-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	gap: 0.75rem;
}
.nutrition-card {
	background: #fafaf8;
	border: 1px solid #f0ede8;
	border-radius: 10px;
	padding: 0.85rem 1rem;
	text-align: center;
}
.nutrition-card__value {
	font-size: 1.3rem;
	font-weight: 800;
	color: #E8520A;
	line-height: 1;
	margin-bottom: 4px;
}
.nutrition-card__label {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #888;
}
.nutrition-card--calories .nutrition-card__value {
	color: #E8520A;
}
.nutrition-card--protein .nutrition-card__value { color: #2d7a2d; }
.nutrition-card--fat .nutrition-card__value     { color: #b45309; }
.nutrition-card--carbs .nutrition-card__value   { color: #1d6fa4; }
.nutrition-card--fiber .nutrition-card__value   { color: #7c3aed; }

/* ── RECIPE ACTIONS (print / share) ── */
.recipe-actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	padding: 1.25rem 0;
	margin-bottom: 1.5rem;
}
.recipe-action-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1.25rem;
	border-radius: 8px;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
	text-decoration: none;
	border: 1.5px solid transparent;
}
.recipe-action-btn--print {
	background: #E8520A;
	color: #fff;
	border-color: #E8520A;
}
.recipe-action-btn--print:hover {
	background: #c44108;
	border-color: #c44108;
}
.recipe-action-btn--share {
	background: #fff;
	color: #1a1a1a;
	border-color: #ddd;
}
.recipe-action-btn--share:hover {
	border-color: #E8520A;
	color: #E8520A;
}

/* Share menu */
.recipe-share { position: relative; }
.share-menu {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 0;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
	padding: 0.5rem;
	min-width: 160px;
	z-index: 100;
}
.share-menu__link {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.75rem;
	border-radius: 6px;
	font-size: 0.85rem;
	color: #333;
	text-decoration: none;
	background: transparent;
	border: none;
	cursor: pointer;
	width: 100%;
	transition: background 0.15s;
}
.share-menu__link:hover {
	background: #fafaf8;
	color: #E8520A;
}

/* ── RIGHT SIDEBAR: meta panel ── */
.recipe-meta-panel {
	position: sticky;
	top: 100px;
}
.recipe-meta-panel__inner {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* Time card in sidebar */
.recipe-time-card {
	background: #fff;
	border-radius: 12px;
	padding: 1.25rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.07);
	border-top: 3px solid #E8520A;
}
.recipe-time-card__list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
}
.recipe-time-card__item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.65rem 0;
	border-bottom: 1px solid #f5f5f3;
}
.recipe-time-card__item:last-child {
	border-bottom: none;
}
.recipe-time-card__item--total {
	border-top: 2px solid #f0ede8;
	margin-top: 4px;
	padding-top: 0.65rem;
}
.recipe-time-card__item--total .recipe-time-card__label {
	font-weight: 800;
	color: #1a1a1a;
}
.recipe-time-card__item--total .recipe-time-card__value {
	color: #E8520A;
	font-size: 1.05rem;
}
.recipe-time-card__label {
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #888;
}
.recipe-time-card__value {
	font-size: 0.9rem;
	font-weight: 700;
	color: #1a1a1a;
}
.recipe-time-card__difficulty {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid #f5f5f3;
}
.recipe-time-card__difficulty-label {
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #888;
}
.recipe-difficulty-badge {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 20px;
	font-size: 0.78rem;
	font-weight: 700;
}
.recipe-difficulty-badge.difficulty-easy   { background: #f0faf0; color: #2d7a2d; }
.recipe-difficulty-badge.difficulty-medium { background: #fffbf0; color: #b45309; }
.recipe-difficulty-badge.difficulty-hard   { background: #fff0f0; color: #c0392b; }

/* Related recipes in sidebar */
.recipe-related {
	background: #fff;
	border-radius: 12px;
	padding: 1.25rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.recipe-related__title {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1rem;
	font-weight: 800;
	color: #1a1a1a;
	margin: 0 0 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid #f0ede8;
}
.recipe-related__list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.recipe-related__item {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	padding: 0.5rem 0;
	border-bottom: 1px solid #f5f5f3;
}
.recipe-related__item:last-child {
	border-bottom: none;
}

/* ── COMMENTS ── */
.recipe-comments {
	background: #fff;
	border-radius: 12px;
	padding: 1.5rem;
	box-shadow: 0 1px 4px rgba(0,0,0,0.06);
	margin-top: 1.5rem;
}
.recipe-comments .comment-reply-title,
.recipe-comments #reply-title {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.35rem;
	font-weight: 800;
	color: #1a1a1a;
	margin: 0 0 1.25rem;
}
.recipe-comments textarea,
.recipe-comments input[type="text"],
.recipe-comments input[type="email"],
.recipe-comments input[type="url"] {
	width: 100%;
	padding: 0.7rem 1rem;
	border: 1.5px solid #ddd;
	border-radius: 8px;
	font-size: 0.9rem;
	transition: border-color 0.2s;
	font-family: inherit;
}
.recipe-comments textarea:focus,
.recipe-comments input:focus {
	border-color: #E8520A;
	outline: none;
}
.recipe-comments .submit,
.recipe-comments input[type="submit"] {
	background: #E8520A;
	color: #fff;
	border: none;
	padding: 0.65rem 1.5rem;
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s;
}
.recipe-comments .submit:hover,
.recipe-comments input[type="submit"]:hover {
	background: #c44108;
}

/* ── RESPONSIVE: stack on mobile ── */
@media (max-width: 899px) {
	.recipe-stats-bar__inner {
		gap: 0;
	}
	.recipe-stat {
		padding: 0.75rem 1rem;
		min-width: 80px;
	}
	.recipe-meta-panel {
		position: static;
	}
}
@media (max-width: 599px) {
	.recipe-stat__label { font-size: 0.6rem; }
	.recipe-stat { padding: 0.65rem 0.75rem; min-width: 60px; }
	.recipe-stat__value { font-size: 0.85rem; }
	.instruction-step { grid-template-columns: 32px 1fr; gap: 0.75rem; }
	.instruction-step__number { width: 32px; height: 32px; font-size: 0.8rem; }
	.recipe-header__title { font-size: 1.6rem; }
}
/* END PATCH v1.5 */


/* ==========================================================================
   PATCH v1.5.1 — Remove double underline below header/breadcrumbs
   ========================================================================== */
/* Strip all borders from header layers — use a single box-shadow instead
   so there is always exactly ONE visible line under the whole header block */
.site-header {
	border-bottom: none !important;
	box-shadow: 0 1px 0 0 #e8e4de !important;
}
.header-main {
	border-bottom: none !important;
}
/* Breadcrumbs bar: keep its bottom border as the page-content divider */
.breadcrumbs-bar {
	border-top: none;
	border-bottom: 1px solid #e8e4de;
}
/* END PATCH v1.5.1 */


/* ==========================================================================
   PATCH v1.6 — Category Archive + Recipe Card Design
   ========================================================================== */

/* ── CATEGORY HERO ── */
.cat-archive-main {
	background: #fafaf8;
	padding-bottom: 4rem;
}
.cat-hero {
	background: linear-gradient(135deg, #1a1a1a 0%, #2d1f0e 100%);
	padding: 3rem 0 2.5rem;
	position: relative;
	overflow: hidden;
}
.cat-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.cat-hero__inner {
	display: flex;
	align-items: center;
	gap: 2rem;
	position: relative;
	z-index: 1;
}
.cat-hero__emoji {
	font-size: 4rem;
	line-height: 1;
	flex-shrink: 0;
	filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}
.cat-hero__title {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	font-weight: 800;
	color: #fff;
	margin: 0 0 0.5rem;
	line-height: 1.15;
}
.cat-hero__desc {
	font-size: 1rem;
	color: rgba(255,255,255,0.65);
	margin: 0 0 0.75rem;
	max-width: 560px;
	line-height: 1.6;
}
.cat-hero__count {
	display: inline-block;
	background: #E8520A;
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	padding: 3px 12px;
	border-radius: 20px;
	letter-spacing: 0.04em;
}

/* ── CATEGORY PILL FILTER NAV ── */
.cat-filter-nav {
	background: #fff;
	border-bottom: 1px solid #f0ede8;
	padding: 0.75rem 0;
	position: sticky;
	top: 68px;
	z-index: 100;
}
.cat-filter-nav__list {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	flex-wrap: nowrap;
	padding-bottom: 2px;
}
.cat-filter-nav__list::-webkit-scrollbar { display: none; }
.cat-filter-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 16px;
	border-radius: 24px;
	font-size: 0.85rem;
	font-weight: 600;
	color: #555;
	background: #f5f3f0;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s, color 0.2s;
	border: 1.5px solid transparent;
}
.cat-filter-pill:hover {
	background: #fff5f0;
	color: #E8520A;
	border-color: #ffddd0;
}
.cat-filter-pill--active {
	background: #E8520A !important;
	color: #fff !important;
	border-color: #E8520A !important;
}

/* ── ARCHIVE CONTENT ── */
.cat-archive-content {
	padding-top: 2.5rem;
}

/* ── RECIPE CARD GRID — 3 cols desktop, 2 tablet, 1 mobile ── */
.cat-recipe-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5rem;
}
@media (max-width: 640px) {
	.cat-recipe-grid {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
}

/* ── RECIPE CARD ── */
.recipe-card {
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	display: flex;
	flex-direction: column;
	border: 1px solid #f0ede8;
}
.recipe-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* Card image */
.recipe-card-image-link {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: #f5f3f0;
}
.recipe-card-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}
.recipe-card:hover .recipe-card-image {
	transform: scale(1.05);
}
.recipe-card-image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #fff5f0 0%, #fde8d8 100%);
	color: #E8520A;
}
.recipe-card-image--placeholder svg {
	opacity: 0.4;
	width: 56px;
	height: 56px;
}

/* Card body */
.recipe-card-body {
	padding: 1.1rem 1.25rem 1.25rem;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0.5rem;
}
.recipe-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.recipe-card-title {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0;
	line-height: 1.3;
}
.recipe-card-title a {
	color: #1a1a1a;
	text-decoration: none;
	transition: color 0.2s;
}
.recipe-card-title a:hover {
	color: #E8520A;
}
.recipe-card-excerpt {
	font-size: 0.85rem;
	color: #666;
	line-height: 1.55;
	margin: 0;
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Card footer */
.recipe-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 0.75rem;
	border-top: 1px solid #f5f3f0;
}
.recipe-time {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 0.8rem;
	color: #888;
	font-weight: 500;
}
.recipe-difficulty {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 20px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.03em;
}
.recipe-difficulty.difficulty-easy   { background: #f0faf0; color: #2d7a2d; }
.recipe-difficulty.difficulty-medium { background: #fffbf0; color: #b45309; }
.recipe-difficulty.difficulty-hard   { background: #fff0f0; color: #c0392b; }

/* ── PAGINATION ── */
.recipe-pagination {
	margin-top: 2.5rem;
}
.recipe-pagination .nav-links {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
}
.recipe-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: 600;
	color: #555;
	background: #fff;
	border: 1.5px solid #e5e5e5;
	text-decoration: none;
	transition: all 0.2s;
}
.recipe-pagination .page-numbers:hover {
	background: #fff5f0;
	border-color: #E8520A;
	color: #E8520A;
}
.recipe-pagination .page-numbers.current {
	background: #E8520A;
	border-color: #E8520A;
	color: #fff;
}
.recipe-pagination .page-numbers.prev,
.recipe-pagination .page-numbers.next {
	width: auto;
	padding: 0 16px;
}

/* END PATCH v1.6 */


/* ==========================================================================
   PATCH v1.7 — Food Tools Page Design
   ========================================================================== */

/* ── TOOL PAGE WRAPPER ── */
.tool-page-main {
	background: #fafaf8;
	padding-bottom: 5rem;
}
.tool-page-layout--full {
	max-width: 860px;
	margin: 0 auto;
}
.tool-page-content {
	width: 100%;
}

/* ── TOOL PAGE HEADER ── */
.tool-page-header {
	text-align: center;
	padding: 2.5rem 0 2rem;
}
.tool-page-title {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp(1.6rem, 3.5vw, 2.4rem);
	font-weight: 800;
	color: #1a1a1a;
	margin: 0 0 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	flex-wrap: wrap;
}
.tool-page-title__icon {
	font-size: 2rem;
	line-height: 1;
}
.tool-page-description {
	font-size: 1.05rem;
	color: #555;
	max-width: 600px;
	margin: 0 auto;
	line-height: 1.7;
}

/* ── DISCLAIMER NOTE ── */
.ft-disclaimer {
	background: #fffbf0;
	border: 1px solid #fde68a;
	border-left: 4px solid #f59e0b;
	border-radius: 8px;
	padding: 0.75rem 1rem;
	font-size: 0.85rem;
	color: #78350f;
	margin-bottom: 1.5rem;
}

/* ── TOOL CALCULATOR CARD ── */
.ft-tool-box {
	background: #fff;
	border-radius: 16px;
	padding: 2rem;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	border: 1px solid #f0ede8;
	margin-bottom: 2rem;
}
.ft-tool-box__heading {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.2rem;
	font-weight: 800;
	color: #1a1a1a;
	margin: 0 0 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid #f0ede8;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.ft-tool-box__heading::before {
	content: '';
	display: inline-block;
	width: 4px;
	height: 1.2em;
	background: #E8520A;
	border-radius: 2px;
}

/* ── FORM LAYOUT ── */
.ft-form__row {
	margin-bottom: 1.25rem;
}
.ft-form__row--two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
.ft-form__row--three {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1rem;
}
@media (max-width: 600px) {
	.ft-form__row--two,
	.ft-form__row--three {
		grid-template-columns: 1fr;
	}
}
.ft-form__group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.ft-form__label {
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #666;
}
.ft-form__input,
.ft-form__select {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1.5px solid #e0ddd8;
	border-radius: 10px;
	font-size: 1rem;
	color: #1a1a1a;
	background: #fafaf8;
	transition: border-color 0.2s, box-shadow 0.2s;
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
}
.ft-form__input:focus,
.ft-form__select:focus {
	border-color: #E8520A;
	box-shadow: 0 0 0 3px rgba(232, 82, 10, 0.12);
	outline: none;
	background: #fff;
}
.ft-form__select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 2.5rem;
	cursor: pointer;
}

/* ── CONVERT BUTTON ── */
.ft-form__actions {
	margin-top: 1.5rem;
}
.ft-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.8rem 2rem;
	border-radius: 10px;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	border: none;
	transition: background 0.2s, transform 0.1s;
	font-family: inherit;
}
.ft-btn--primary {
	background: #E8520A;
	color: #fff;
	width: 100%;
	justify-content: center;
}
.ft-btn--primary:hover {
	background: #c44108;
}
.ft-btn--primary:active {
	transform: scale(0.98);
}

/* ── RESULT BOX ── */
.ft-result {
	margin-top: 1.25rem;
	padding: 1.25rem 1.5rem;
	border-radius: 12px;
	font-size: 1.15rem;
	font-weight: 700;
	text-align: center;
	animation: ft-result-pop 0.25s ease;
}
@keyframes ft-result-pop {
	from { transform: scale(0.96); opacity: 0; }
	to   { transform: scale(1);    opacity: 1; }
}
.ft-result--success {
	background: linear-gradient(135deg, #fff5f0 0%, #ffe8d8 100%);
	border: 2px solid #E8520A;
	color: #c44108;
}
.ft-result--error {
	background: #fff0f0;
	border: 2px solid #e74c3c;
	color: #c0392b;
	font-size: 0.9rem;
	font-weight: 500;
}

/* ── QUICK REFERENCE TABLE ── */
.ft-quick-ref {
	background: #fff;
	border-radius: 16px;
	padding: 1.75rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	border: 1px solid #f0ede8;
	margin-bottom: 2rem;
}
.ft-quick-ref__heading {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.15rem;
	font-weight: 800;
	color: #1a1a1a;
	margin: 0 0 1.25rem;
	padding-bottom: 0.65rem;
	border-bottom: 2px solid #f0ede8;
}
.ft-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.ft-ref-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}
.ft-ref-table__th {
	text-align: left;
	padding: 0.6rem 0.85rem;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #888;
	background: #fafaf8;
	border-bottom: 2px solid #f0ede8;
}
.ft-ref-table__cell {
	padding: 0.65rem 0.85rem;
	border-bottom: 1px solid #f5f3f0;
	color: #333;
}
.ft-ref-table tr:last-child .ft-ref-table__cell {
	border-bottom: none;
}
.ft-ref-table tr:hover .ft-ref-table__cell {
	background: #fafaf8;
}

/* ── EDITORIAL CONTENT ── */
.ft-editorial {
	background: #fff;
	border-radius: 16px;
	padding: 1.75rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	border: 1px solid #f0ede8;
	margin-bottom: 2rem;
}
.ft-editorial h2 {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.1rem;
	font-weight: 800;
	color: #1a1a1a;
	margin: 1.5rem 0 0.6rem;
}
.ft-editorial h2:first-child {
	margin-top: 0;
}
.ft-editorial p {
	font-size: 0.93rem;
	color: #555;
	line-height: 1.75;
	margin: 0 0 0.75rem;
}
.ft-editorial p:last-child { margin-bottom: 0; }

/* ── RELATED TOOLS ROW ── */
.ft-related-tools {
	margin-top: 2rem;
}
.ft-related-tools__title {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1rem;
	font-weight: 800;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 1rem;
	font-size: 0.78rem;
}
.ft-related-tools__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0.75rem;
}
.ft-related-tool-card {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.9rem 1rem;
	background: #fff;
	border: 1.5px solid #f0ede8;
	border-radius: 10px;
	text-decoration: none;
	color: #333;
	font-size: 0.875rem;
	font-weight: 600;
	transition: border-color 0.2s, box-shadow 0.2s, color 0.2s;
}
.ft-related-tool-card:hover {
	border-color: #E8520A;
	box-shadow: 0 2px 8px rgba(232,82,10,0.1);
	color: #E8520A;
}
.ft-related-tool-card__icon {
	font-size: 1.4rem;
	flex-shrink: 0;
}

/* ── BACK LINK ── */
.ft-back-link {
	margin-top: 1.5rem;
}
.ft-back-link a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: #E8520A;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}
.ft-back-link a:hover { text-decoration: underline; }

/* END PATCH v1.7 */


/* ==========================================================================
   PATCH v1.8 — Tool Pages Complete Visual Overhaul
   ========================================================================== */

/* ── Reset tool-page-main to full width, no orphan space ── */
.tool-page-main {
	background: #F7F5F2;
	padding: 0 0 4rem;
}

/* ── Hero banner for tool pages ── */
.tool-page-hero {
	background: linear-gradient(135deg, #1A1A1A 0%, #2C1810 50%, #E8520A 100%);
	padding: 3.5rem 0 4rem;
	margin-bottom: -2.5rem;
	position: relative;
	overflow: hidden;
}
.tool-page-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='28'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
	pointer-events: none;
}
.tool-page-hero .container {
	position: relative;
	z-index: 1;
}
.tool-page-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: rgba(255,255,255,0.12);
	color: rgba(255,255,255,0.85);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,0.15);
	margin-bottom: 1rem;
}
.tool-page-hero__title {
	font-size: clamp(1.8rem, 4vw, 2.75rem);
	font-weight: 800;
	color: #fff;
	margin: 0 0 0.75rem;
	line-height: 1.15;
}
.tool-page-hero__title .tool-icon {
	display: inline-block;
	margin-right: 0.4rem;
	filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}
.tool-page-hero__desc {
	font-size: 1.05rem;
	color: rgba(255,255,255,0.75);
	max-width: 640px;
	line-height: 1.65;
	margin: 0;
}

/* ── Inject hero into existing template structure ── */
/* Tool header (from existing template) sits inside .tool-page-content */
/* We re-style it as a floating card that overlaps the hero */
.tool-page-layout--full {
	position: relative;
	z-index: 2;
}

/* ── Full-width card shell ── */
.tool-page-card {
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 4px 30px rgba(0,0,0,0.10);
	overflow: hidden;
	margin-bottom: 1.5rem;
}

/* ── Tool page header (title + description) ── */
.tool-page-header {
	background: linear-gradient(135deg, #1A1A1A 0%, #2C1810 50%, #E8520A 100%);
	padding: 2.5rem 2rem 2rem;
	position: relative;
	overflow: hidden;
}
.tool-page-header::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='20' cy='20' r='18'/%3E%3C/g%3E%3C/svg%3E") repeat;
	pointer-events: none;
}

/* ── Tool title ── */
.tool-page-title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: clamp(1.6rem, 3.5vw, 2.2rem) !important;
	font-weight: 800 !important;
	color: #fff !important;
	margin: 0 0 0.6rem !important;
	line-height: 1.2 !important;
	position: relative;
	z-index: 1;
}
.tool-page-title__icon {
	font-size: 1.8rem;
	filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
	flex-shrink: 0;
}

/* ── Tool description ── */
.tool-page-description {
	font-size: 1rem !important;
	color: rgba(255,255,255,0.80) !important;
	line-height: 1.65 !important;
	max-width: 680px;
	margin: 0 !important;
	position: relative;
	z-index: 1;
}

/* ── Tool content wrapper (below header) ── */
.tool-page-content {
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 4px 30px rgba(0,0,0,0.08);
	overflow: hidden;
}

/* ── Disclaimer bar ── */
.ft-disclaimer {
	background: #FFF8F0;
	border-left: 4px solid #E8520A;
	border-top: 1px solid #F5E6D8;
	border-bottom: 1px solid #F5E6D8;
	padding: 0.85rem 1.5rem;
	font-size: 0.875rem;
	color: #5C3A1E;
	margin: 0;
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}
.ft-disclaimer strong {
	color: #E8520A;
	white-space: nowrap;
}

/* ── Tool box (the white card wrapping the form) ── */
.ft-tool-box {
	background: #fff;
	padding: 2rem 2rem 1.5rem !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
}
.ft-tool-box__heading {
	font-size: 1.15rem !important;
	font-weight: 700 !important;
	color: #1A1A1A !important;
	margin: 0 0 1.25rem !important;
	padding-bottom: 0.75rem !important;
	border-bottom: 2px solid #F0EDE8 !important;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.ft-tool-box__heading::before {
	content: '';
	display: inline-block;
	width: 4px;
	height: 1.2em;
	background: #E8520A;
	border-radius: 2px;
	flex-shrink: 0;
}

/* ── Form layout ── */
.ft-form__row {
	display: grid;
	gap: 1rem;
	margin-bottom: 1rem;
}
.ft-form__row--two { grid-template-columns: 1fr 1fr; }
.ft-form__row--three { grid-template-columns: 1fr 1fr 1fr; }
.ft-form__group { display: flex; flex-direction: column; gap: 0.4rem; }

/* ── Labels ── */
.ft-form__label {
	font-size: 0.8rem !important;
	font-weight: 700 !important;
	color: #5A5A5A !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ── Inputs & selects ── */
.ft-form__input,
.ft-form__select {
	width: 100%;
	padding: 0.65rem 0.9rem !important;
	font-size: 0.95rem !important;
	font-family: inherit;
	color: #1A1A1A !important;
	background: #FAFAF9 !important;
	border: 1.5px solid #DDD8D0 !important;
	border-radius: 8px !important;
	outline: none;
	transition: border-color 0.18s, box-shadow 0.18s;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}
.ft-form__select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 0.9rem center !important;
	padding-right: 2.5rem !important;
}
.ft-form__input:focus,
.ft-form__select:focus {
	border-color: #E8520A !important;
	box-shadow: 0 0 0 3px rgba(232,82,10,0.12) !important;
	background: #fff !important;
}
.ft-form__input--table {
	padding: 0.45rem 0.6rem !important;
	font-size: 0.875rem !important;
	border-radius: 6px !important;
}

/* ── Form action row ── */
.ft-form__actions {
	margin-top: 1.25rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/* ── Buttons ── */
.ft-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.7rem 1.75rem !important;
	font-size: 0.9rem !important;
	font-weight: 700 !important;
	font-family: inherit;
	border: none;
	border-radius: 8px !important;
	cursor: pointer;
	transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
	text-decoration: none !important;
}
.ft-btn--primary {
	background: linear-gradient(135deg, #E8520A 0%, #C44208 100%) !important;
	color: #fff !important;
	box-shadow: 0 3px 12px rgba(232,82,10,0.35) !important;
}
.ft-btn--primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 5px 18px rgba(232,82,10,0.45) !important;
}
.ft-btn--primary:active { transform: translateY(0); }
.ft-btn--secondary {
	background: #F0EDE8 !important;
	color: #3A3A3A !important;
	box-shadow: none !important;
}
.ft-btn--secondary:hover { background: #E5E1DB !important; }

/* ── Result box ── */
.ft-result {
	margin-top: 1.25rem;
	padding: 1.1rem 1.25rem;
	border-radius: 10px;
	font-size: 1.05rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	animation: ftSlideIn 0.25s ease;
}
@keyframes ftSlideIn {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}
.ft-result--success {
	background: linear-gradient(135deg, #E8F5E9 0%, #F1FBF2 100%);
	border: 1.5px solid #A5D6A7;
	color: #1B5E20;
}
.ft-result--success::before {
	content: '✓';
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	background: #2E7D32;
	color: #fff;
	border-radius: 50%;
	font-size: 0.85rem;
	font-weight: 900;
	flex-shrink: 0;
}
.ft-result--error {
	background: #FFF3F0;
	border: 1.5px solid #FFCDD2;
	color: #B71C1C;
}
.ft-result--error::before {
	content: '!';
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	background: #C62828;
	color: #fff;
	border-radius: 50%;
	font-size: 0.9rem;
	font-weight: 900;
	flex-shrink: 0;
}

/* ── Quick reference section ── */
.ft-quick-ref {
	background: #F7F5F2;
	padding: 1.75rem 2rem;
	border-top: 1px solid #EDE8E0;
}
.ft-quick-ref__heading {
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	color: #1A1A1A !important;
	margin: 0 0 1rem !important;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.ft-quick-ref__heading::before {
	content: '';
	display: inline-block;
	width: 4px;
	height: 1.1em;
	background: #E8520A;
	border-radius: 2px;
}

/* ── Reference table ── */
.ft-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: 10px;
	border: 1px solid #E5E0D8;
}
.ft-ref-table,
.ft-ingredients-table,
.ft-results-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
	background: #fff;
}
.ft-ref-table__th,
.ft-ingredients-table__th,
.ft-results-table__th {
	background: #1A1A1A;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.7rem 1rem;
	text-align: left;
	white-space: nowrap;
}
.ft-ref-table__th:first-child,
.ft-ingredients-table__th:first-child,
.ft-results-table__th:first-child { border-radius: 0; }
.ft-ref-table__cell,
.ft-ingredients-table__cell,
.ft-results-table__cell {
	padding: 0.65rem 1rem;
	color: #333;
	border-bottom: 1px solid #F0EDE8;
	vertical-align: middle;
}
.ft-ref-table tbody tr:last-child .ft-ref-table__cell,
.ft-ingredients-table tbody tr:last-child .ft-ingredients-table__cell,
.ft-results-table tbody tr:last-child .ft-results-table__cell {
	border-bottom: none;
}
.ft-ref-table tbody tr:nth-child(even),
.ft-results-table tbody tr:nth-child(even) { background: #FAFAF8; }
.ft-ref-table tbody tr:hover,
.ft-results-table tbody tr:hover { background: #FFF4EE; }
.ft-results-table__cell--highlight {
	color: #C44208 !important;
	font-weight: 700 !important;
}

/* ── Ingredients table (scaler) ── */
.ft-ingredients-wrapper {
	margin: 1rem 0;
}
.ft-ingredients-wrapper__heading {
	font-size: 0.875rem !important;
	font-weight: 700 !important;
	color: #5A5A5A !important;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin: 0 0 0.5rem !important;
}
.ft-ingredients-table__cell--action,
.ft-ingredients-table__th--action {
	width: 2.5rem;
	text-align: center;
}
.ft-remove-row {
	background: none;
	border: none;
	color: #C44208;
	font-size: 1.1rem;
	cursor: pointer;
	padding: 0.2rem 0.4rem;
	border-radius: 4px;
	line-height: 1;
	transition: background 0.15s;
}
.ft-remove-row:hover { background: #FFF0EA; }

/* ── Results area (scaler) ── */
#ft-scaler-results {
	padding: 1.5rem 2rem;
	background: #F7F5F2;
	border-top: 2px solid #E8520A;
	animation: ftSlideIn 0.25s ease;
}
.ft-results-heading {
	font-size: 1rem !important;
	font-weight: 700 !important;
	color: #E8520A !important;
	margin: 0 0 1rem !important;
}

/* ── Editorial section ── */
.ft-editorial {
	padding: 2rem;
	background: #fff;
	border-top: 1px solid #F0EDE8;
}
.ft-editorial h2 {
	font-size: 1.15rem !important;
	font-weight: 700 !important;
	color: #1A1A1A !important;
	margin: 1.5rem 0 0.6rem !important;
	padding-left: 0.75rem;
	border-left: 3px solid #E8520A;
}
.ft-editorial h2:first-child { margin-top: 0 !important; }
.ft-editorial p {
	font-size: 0.92rem !important;
	color: #4A4A4A !important;
	line-height: 1.75 !important;
	margin: 0 0 0.9rem !important;
}

/* ── Related tools grid ── */
.ft-related-tools {
	padding: 1.75rem 2rem;
	background: #F7F5F2;
	border-top: 1px solid #EDE8E0;
}
.ft-related-tools__heading {
	font-size: 1rem !important;
	font-weight: 700 !important;
	color: #1A1A1A !important;
	margin: 0 0 1rem !important;
}
.ft-related-tools-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0.75rem;
}
.ft-related-tool-card {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	background: #fff;
	border: 1.5px solid #E5E0D8;
	border-radius: 10px;
	padding: 0.85rem 1rem;
	text-decoration: none !important;
	color: #2A2A2A !important;
	font-size: 0.875rem;
	font-weight: 600;
	transition: border-color 0.18s, box-shadow 0.18s, color 0.18s, transform 0.15s;
}
.ft-related-tool-card:hover {
	border-color: #E8520A;
	box-shadow: 0 3px 12px rgba(232,82,10,0.12);
	color: #E8520A !important;
	transform: translateY(-2px);
}
.ft-related-tool-card__icon {
	font-size: 1.5rem;
	flex-shrink: 0;
	line-height: 1;
}

/* ── Back link ── */
.ft-back-link {
	padding: 1.25rem 2rem;
	background: #fff;
	border-top: 1px solid #F0EDE8;
	margin: 0 !important;
}
.ft-back-link a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: #E8520A !important;
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: none !important;
	transition: gap 0.15s;
}
.ft-back-link a:hover { gap: 0.65rem; text-decoration: none !important; }

/* ── Responsive: collapse 3-col and 2-col on small screens ── */
@media (max-width: 640px) {
	.ft-form__row--three { grid-template-columns: 1fr; }
	.ft-form__row--two   { grid-template-columns: 1fr; }
	.tool-page-header { padding: 1.75rem 1.25rem 1.5rem; }
	.ft-tool-box { padding: 1.25rem !important; }
	.ft-editorial { padding: 1.25rem; }
	.ft-quick-ref { padding: 1.25rem; }
	.ft-back-link { padding: 1rem 1.25rem; }
	.ft-related-tools { padding: 1.25rem; }
	.ft-related-tools-grid { grid-template-columns: 1fr 1fr; }
	.tool-page-title { font-size: 1.5rem !important; }
}
@media (max-width: 400px) {
	.ft-related-tools-grid { grid-template-columns: 1fr; }
}

/* END PATCH v1.8 */

/* ==========================================================================
   PATCH v1.8b — Food Tools Hub Page + Tool-Card Grid Redesign
   ========================================================================== */

/* ── Hub page main wrapper ── */
.tools-landing-main {
	background: #F7F5F2;
	padding-bottom: 4rem;
}

/* ── Hero section ── */
.tools-hero {
	background: linear-gradient(135deg, #1A1A1A 0%, #2C1810 55%, #E8520A 100%);
	padding: 3.5rem 0;
	position: relative;
	overflow: hidden;
}
.tools-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='40' cy='40' r='36'/%3E%3C/g%3E%3C/svg%3E") repeat;
	pointer-events: none;
}
.tools-hero__inner {
	position: relative;
	z-index: 1;
	text-align: center;
}
.tools-hero__title {
	font-size: clamp(2rem, 5vw, 3rem) !important;
	font-weight: 900 !important;
	color: #fff !important;
	margin: 0 0 0.75rem !important;
	line-height: 1.1 !important;
}
.tools-hero__description {
	font-size: 1.05rem;
	color: rgba(255,255,255,0.75);
	max-width: 560px;
	margin: 0 auto;
	line-height: 1.65;
}
.tools-hero__description p {
	margin: 0;
	color: rgba(255,255,255,0.75) !important;
}

/* ── Grid section ── */
.tools-grid-section {
	padding: 2.5rem 0 0;
}

/* ── Tool cards grid ── */
.tools-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.5rem;
	margin-bottom: 2rem;
}

/* ── Individual tool card ── */
.tool-card {
	background: #fff;
	border-radius: 16px;
	border: 1.5px solid #EDE8E0;
	padding: 2rem 1.75rem 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	box-shadow: 0 2px 12px rgba(0,0,0,0.06);
	transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
	position: relative;
	overflow: hidden;
}
.tool-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #E8520A, #FF7A40);
	opacity: 0;
	transition: opacity 0.2s;
}
.tool-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 28px rgba(0,0,0,0.12);
	border-color: #E8520A;
}
.tool-card:hover::before { opacity: 1; }

.tool-card__icon {
	font-size: 2.5rem;
	margin-bottom: 1rem;
	line-height: 1;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}
.tool-card__title {
	font-size: 1.1rem !important;
	font-weight: 800 !important;
	color: #1A1A1A !important;
	margin: 0 0 0.6rem !important;
	line-height: 1.25 !important;
}
.tool-card__description {
	font-size: 0.875rem !important;
	color: #6A6A6A !important;
	line-height: 1.65 !important;
	margin: 0 0 1.5rem !important;
	flex: 1;
}
.tool-card__button {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.6rem 1.25rem !important;
	font-size: 0.875rem !important;
	font-weight: 700 !important;
	color: #E8520A !important;
	background: #FFF4EE !important;
	border: 1.5px solid #F5C4A8 !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
	margin-top: auto;
}
.tool-card__button::after {
	content: '→';
	font-size: 0.9em;
	transition: transform 0.15s;
}
.tool-card__button:hover {
	background: #E8520A !important;
	border-color: #E8520A !important;
	color: #fff !important;
}
.tool-card__button:hover::after { transform: translateX(3px); }

/* ── Trust note ── */
.tools-trust-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-size: 0.8rem !important;
	color: #888 !important;
	margin: 0.5rem 0 0 !important;
}
.tools-trust-note__icon { color: #E8520A; flex-shrink: 0; }

/* ── Responsive ── */
@media (max-width: 600px) {
	.tools-grid { grid-template-columns: 1fr; }
	.tools-hero { padding: 2.5rem 0; }
	.tool-card { padding: 1.5rem 1.25rem 1.25rem; }
}

/* END PATCH v1.8b */

/* ==========================================================================
   PATCH v1.9 — Blog Archive + Single Post Design
   ========================================================================== */

/* ── BLOG ARCHIVE — Hero ─────────────────────────────────────── */
.blog-hero {
	background: linear-gradient(135deg, #1A1A1A 0%, #2C1810 55%, #E8520A 100%);
	padding: 3.5rem 0 4.5rem;
	position: relative;
	overflow: hidden;
}
.blog-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='28' fill='%23fff' fill-opacity='.03'/%3E%3C/svg%3E") repeat;
	pointer-events: none;
}
.blog-hero__inner {
	position: relative;
	z-index: 1;
}
.blog-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: rgba(255,255,255,0.12);
	color: rgba(255,255,255,0.85);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.28rem 0.75rem;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,0.18);
	margin-bottom: 0.85rem;
}
.blog-hero__title {
	font-size: clamp(2rem, 5vw, 3rem) !important;
	font-weight: 900 !important;
	color: #fff !important;
	margin: 0 0 0.7rem !important;
	line-height: 1.1 !important;
}
.blog-hero__desc {
	font-size: 1.05rem;
	color: rgba(255,255,255,0.72);
	max-width: 580px;
	line-height: 1.65;
	margin: 0;
}

/* ── BLOG ARCHIVE — Main wrapper ─────────────────────────────── */
.blog-archive-main {
	background: #F7F5F2;
	padding: 2.5rem 0 4rem;
	margin-top: -1.5rem;
}

/* ── BLOG ARCHIVE — Grid ─────────────────────────────────────── */
.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-bottom: 2.5rem;
}
/* First card spans full width */
.blog-card--featured {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	align-items: stretch;
}
.blog-card--featured .blog-card__thumb { aspect-ratio: 16/9; border-radius: 16px 0 0 16px; }
.blog-card--featured .blog-card__thumb img { border-radius: 16px 0 0 16px; }
.blog-card--featured .blog-card__body { padding: 2.25rem 2rem; border-radius: 0 16px 16px 0; }
.blog-card--featured .blog-card__title { font-size: 1.5rem !important; }
.blog-card--featured .blog-card__excerpt { -webkit-line-clamp: 4; }

/* ── BLOG ARCHIVE — Card ─────────────────────────────────────── */
.blog-card {
	background: #fff;
	border-radius: 16px;
	border: 1.5px solid #EDE8E0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 2px 10px rgba(0,0,0,0.06);
	transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.blog-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 28px rgba(0,0,0,0.11);
	border-color: #E8520A;
}
.blog-card__thumb-link { display: block; }
.blog-card__thumb {
	aspect-ratio: 16/9;
	overflow: hidden;
	background: #F0EDE8;
}
.blog-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.blog-card:hover .blog-card__thumb img { transform: scale(1.04); }
.blog-card__thumb--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #F0EDE8, #E8E2D8);
}
.blog-card__thumb--placeholder span { font-size: 3rem; opacity: 0.4; }
.blog-card__body {
	padding: 1.35rem 1.5rem 1.5rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.blog-cat-badge {
	display: inline-block;
	background: #FFF4EE;
	color: #E8520A;
	border: 1px solid #F5C4A8;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 0.22rem 0.6rem;
	border-radius: 999px;
	text-decoration: none !important;
	margin-bottom: 0.6rem;
	transition: background 0.15s, color 0.15s;
}
.blog-cat-badge:hover { background: #E8520A; color: #fff; border-color: #E8520A; }
.blog-cat-badge--sm { font-size: 0.65rem; padding: 0.18rem 0.5rem; }
.blog-card__title {
	font-size: 1.1rem !important;
	font-weight: 800 !important;
	color: #1A1A1A !important;
	margin: 0 0 0.5rem !important;
	line-height: 1.3 !important;
}
.blog-card__title a {
	color: inherit !important;
	text-decoration: none !important;
}
.blog-card__title a:hover { color: #E8520A !important; }
.blog-card__meta {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.78rem;
	color: #888;
	margin-bottom: 0.65rem;
}
.blog-card__meta-sep { opacity: 0.5; }
.blog-card__excerpt {
	font-size: 0.875rem !important;
	color: #5A5A5A !important;
	line-height: 1.65 !important;
	margin: 0 0 1.1rem !important;
	flex: 1;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
.blog-card__read-more {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.82rem;
	font-weight: 700;
	color: #E8520A !important;
	text-decoration: none !important;
	margin-top: auto;
	transition: gap 0.15s;
}
.blog-card__read-more:hover { gap: 0.6rem; }

/* ── BLOG ARCHIVE — Pagination ───────────────────────────────── */
.blog-pagination { text-align: center; padding: 0.5rem 0; }
.blog-pagination .nav-links { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; justify-content: center; }
.blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.6rem;
	border-radius: 8px;
	font-size: 0.875rem;
	font-weight: 600;
	color: #3A3A3A;
	background: #fff;
	border: 1.5px solid #DDD8D0;
	text-decoration: none !important;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.blog-pagination .page-numbers:hover,
.blog-pagination .page-numbers.current {
	background: #E8520A;
	border-color: #E8520A;
	color: #fff !important;
}
.blog-pagination .page-numbers.dots { border: none; background: transparent; color: #aaa; }

/* ── BLOG ARCHIVE — No results ───────────────────────────────── */
.blog-no-results {
	text-align: center;
	padding: 5rem 1rem;
}
.blog-no-results__icon { font-size: 3.5rem; margin-bottom: 1rem; }
.blog-no-results__title { font-size: 1.6rem !important; font-weight: 800 !important; color: #1A1A1A !important; margin: 0 0 0.5rem !important; }
.blog-no-results__text { font-size: 1rem; color: #666; margin: 0 0 1.5rem !important; }
.blog-btn-home {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.65rem 1.5rem;
	background: #E8520A;
	color: #fff !important;
	font-weight: 700;
	font-size: 0.875rem;
	border-radius: 8px;
	text-decoration: none !important;
	transition: background 0.15s;
}
.blog-btn-home:hover { background: #C44208; }

/* ── SINGLE POST — Hero (image bg) ──────────────────────────── */
.single-post-main {
	background: #F7F5F2;
	padding-bottom: 0;
}
.sp-hero {
	position: relative;
	min-height: 420px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: linear-gradient(135deg, #1A1A1A 0%, #2C1810 60%, #3D2010 100%);
}
.sp-hero--has-image {
	min-height: 500px;
}
.sp-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.sp-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	filter: brightness(0.45);
}
.sp-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
	z-index: 1;
}
.sp-hero__inner {
	position: relative;
	z-index: 2;
	padding: 3rem 0 3.5rem;
	width: 100%;
}

/* Breadcrumbs in hero */
.sp-breadcrumbs {
	margin-bottom: 1rem;
}
.sp-breadcrumbs .breadcrumb-item,
.sp-breadcrumbs a,
.sp-breadcrumbs span {
	color: rgba(255,255,255,0.65) !important;
	font-size: 0.8rem;
}
.sp-breadcrumbs a:hover { color: #fff !important; }

/* Category badge in hero */
.sp-cat-badge {
	display: inline-block;
	background: #E8520A;
	color: #fff !important;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	text-decoration: none !important;
	margin-bottom: 0.85rem;
	transition: background 0.15s;
}
.sp-cat-badge:hover { background: #C44208; }

/* Post title */
.sp-title {
	font-size: clamp(1.75rem, 4vw, 2.8rem) !important;
	font-weight: 900 !important;
	color: #fff !important;
	margin: 0 0 1rem !important;
	line-height: 1.15 !important;
	max-width: 760px;
}

/* Meta row */
.sp-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	font-size: 0.85rem;
	color: rgba(255,255,255,0.7);
}
.sp-meta__sep { opacity: 0.5; }
.sp-meta__author-link { color: rgba(255,255,255,0.85) !important; text-decoration: none !important; font-weight: 600; }
.sp-meta__author-link:hover { color: #fff !important; text-decoration: underline !important; }

/* ── SINGLE POST — Body ──────────────────────────────────────── */
.sp-body-wrap {
	background: #F7F5F2;
	padding: 3rem 0 2rem;
}

/* Content column — narrow for readability (overridden at desktop by sp-layout grid) */
.sp-content-col {
	max-width: 760px;
	margin: 0 auto;
}

/* Entry content typography */
.sp-entry {
	background: #fff;
	border-radius: 16px;
	padding: 2.5rem 2.5rem;
	box-shadow: 0 2px 16px rgba(0,0,0,0.07);
	margin-bottom: 1.5rem;
	font-size: 1rem;
	line-height: 1.8;
	color: #2A2A2A;
}
.sp-entry h2,
.sp-entry h3,
.sp-entry h4 {
	color: #1A1A1A;
	font-weight: 800;
	margin: 1.75rem 0 0.6rem;
	line-height: 1.25;
}
.sp-entry h2 { font-size: 1.45rem; }
.sp-entry h3 { font-size: 1.2rem; }
.sp-entry p { margin: 0 0 1rem; }
.sp-entry ul,
.sp-entry ol { padding-left: 1.5rem; margin: 0 0 1rem; }
.sp-entry li { margin-bottom: 0.4rem; }
.sp-entry blockquote {
	border-left: 4px solid #E8520A;
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	background: #FFF8F4;
	border-radius: 0 8px 8px 0;
	color: #4A3A2A;
	font-style: italic;
}
.sp-entry a { color: #E8520A; }
.sp-entry a:hover { text-decoration: underline; }
.sp-entry img { max-width: 100%; border-radius: 10px; margin: 0.5rem 0; }
.sp-entry figure { margin: 1rem 0; }
.sp-entry figcaption { font-size: 0.8rem; color: #888; text-align: center; margin-top: 0.4rem; }
.sp-entry code { background: #F0EDE8; padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.9em; }
.sp-entry pre { background: #1A1A1A; color: #F0EDE8; padding: 1.25rem; border-radius: 10px; overflow-x: auto; margin: 1rem 0; }

/* Tags */
.sp-tags {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	padding: 1.25rem 1.5rem;
	background: #fff;
	border-radius: 12px;
	border: 1.5px solid #EDE8E0;
}
.sp-tags__label {
	font-size: 0.75rem;
	font-weight: 700;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.sp-tag-pill {
	display: inline-block;
	background: #F0EDE8;
	color: #4A4A4A !important;
	font-size: 0.78rem;
	font-weight: 600;
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
	text-decoration: none !important;
	border: 1px solid #DDD8D0;
	transition: background 0.15s, color 0.15s;
}
.sp-tag-pill:hover { background: #E8520A; color: #fff !important; border-color: #E8520A; }

/* Prev/Next nav */
.sp-post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-bottom: 1.5rem;
}
.sp-post-nav__link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background: #fff;
	border: 1.5px solid #EDE8E0;
	border-radius: 12px;
	padding: 1rem 1.25rem;
	text-decoration: none !important;
	color: #1A1A1A !important;
	transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.sp-post-nav__link:hover {
	border-color: #E8520A;
	box-shadow: 0 3px 12px rgba(232,82,10,0.1);
	transform: translateY(-2px);
}
.sp-post-nav__link--next { justify-content: flex-end; }
.sp-post-nav__text--right { text-align: right; }
.sp-post-nav__arrow {
	font-size: 1.2rem;
	color: #E8520A;
	flex-shrink: 0;
}
.sp-post-nav__label {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	color: #E8520A;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 0.2rem;
}
.sp-post-nav__title {
	display: block;
	font-size: 0.85rem;
	font-weight: 700;
	color: #1A1A1A;
	line-height: 1.3;
	/* clamp to 2 lines */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* Author bio box */
.sp-author-box {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	background: #fff;
	border-radius: 14px;
	padding: 1.5rem;
	border: 1.5px solid #EDE8E0;
	margin-bottom: 1.5rem;
}
.sp-author-box__img {
	width: 80px !important;
	height: 80px !important;
	border-radius: 50% !important;
	flex-shrink: 0;
	object-fit: cover;
	border: 3px solid #F0EDE8;
}
.sp-author-box__name {
	font-size: 1rem !important;
	font-weight: 800 !important;
	margin: 0 0 0.3rem !important;
}
.sp-author-box__name a { color: #1A1A1A !important; text-decoration: none !important; }
.sp-author-box__name a:hover { color: #E8520A !important; }
.sp-author-box__bio {
	font-size: 0.875rem !important;
	color: #5A5A5A !important;
	line-height: 1.6 !important;
	margin: 0 0 0.6rem !important;
}
.sp-author-box__more-link {
	font-size: 0.8rem;
	font-weight: 700;
	color: #E8520A !important;
	text-decoration: none !important;
}
.sp-author-box__more-link:hover { text-decoration: underline !important; }

/* ── SINGLE POST — Related section ──────────────────────────── */
.sp-related {
	background: #1A1A1A;
	padding: 3rem 0 4rem;
}
.sp-related__heading {
	font-size: 1.35rem !important;
	font-weight: 800 !important;
	color: #fff !important;
	margin: 0 0 1.5rem !important;
	position: relative;
	padding-left: 1rem;
}
.sp-related__heading::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.1em;
	bottom: 0.1em;
	width: 4px;
	background: #E8520A;
	border-radius: 2px;
}
.sp-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}
.sp-related-card {
	background: #2A2A2A;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,0.06);
	transition: transform 0.2s, border-color 0.2s;
}
.sp-related-card:hover { transform: translateY(-3px); border-color: #E8520A; }
.sp-related-card__thumb {
	aspect-ratio: 16/9;
	overflow: hidden;
}
.sp-related-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s;
	filter: brightness(0.9);
}
.sp-related-card:hover .sp-related-card__thumb img { transform: scale(1.05); }
.sp-related-card__body { padding: 1rem 1.1rem 1.25rem; }
.sp-related-card__title {
	font-size: 0.92rem !important;
	font-weight: 700 !important;
	margin: 0.4rem 0 0.4rem !important;
	line-height: 1.35 !important;
}
.sp-related-card__title a { color: #fff !important; text-decoration: none !important; }
.sp-related-card__title a:hover { color: #E8520A !important; }
.sp-related-card__date { font-size: 0.75rem; color: rgba(255,255,255,0.45); }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
	.blog-grid { grid-template-columns: 1fr 1fr; }
	.blog-card--featured { grid-template-columns: 1fr; }
	.blog-card--featured .blog-card__thumb { border-radius: 16px 16px 0 0; aspect-ratio: 16/9; }
	.blog-card--featured .blog-card__thumb img { border-radius: 16px 16px 0 0; }
	.blog-card--featured .blog-card__body { border-radius: 0 0 16px 16px; }
	.sp-related-grid { grid-template-columns: 1fr 1fr; }
	.sp-post-nav { grid-template-columns: 1fr; }
	.sp-post-nav__link--next { justify-content: flex-start; }
	.sp-post-nav__text--right { text-align: left; }
}
@media (max-width: 640px) {
	.blog-grid { grid-template-columns: 1fr; }
	.blog-hero { padding: 2.5rem 0 3rem; }
	.sp-hero { min-height: 340px; }
	.sp-hero--has-image { min-height: 380px; }
	.sp-entry { padding: 1.5rem; }
	.sp-related-grid { grid-template-columns: 1fr; }
	.sp-author-box { flex-direction: column; }
}

/* END PATCH v1.9 */

/* ==========================================================================
   PATCH v1.9.1 — Single Post Hero Breadcrumb Fix
   Strip white background from .breadcrumbs inside the hero, style
   as a transparent pill-trail matching the dark hero design.
   ========================================================================== */

/* Kill the white background for ANY breadcrumb element inside .sp-hero */
.sp-hero .breadcrumbs,
.sp-hero .breadcrumbs-bar,
.sp-hero .sp-breadcrumbs,
.sp-hero nav.breadcrumbs {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 0 1rem !important;
}

/* The <ol> breadcrumb list inside the hero */
.sp-hero .breadcrumb-list,
.sp-hero .breadcrumbs ol,
.sp-hero .breadcrumbs .container {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 0 !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

/* Each breadcrumb list item */
.sp-hero .breadcrumb-item,
.sp-hero .breadcrumbs li {
	display: flex;
	align-items: center;
}

/* Links in hero breadcrumb */
.sp-hero .breadcrumb-item a,
.sp-hero .breadcrumbs a,
.sp-hero .breadcrumb-item span a {
	font-size: 0.78rem !important;
	font-weight: 500 !important;
	color: rgba(255,255,255,0.60) !important;
	text-decoration: none !important;
	transition: color 0.15s;
	background: transparent !important;
}
.sp-hero .breadcrumb-item a:hover,
.sp-hero .breadcrumbs a:hover {
	color: #fff !important;
}

/* Current / last item (non-link) */
.sp-hero .breadcrumb-current,
.sp-hero .breadcrumbs .current,
.sp-hero .breadcrumbs span:not(.breadcrumb-sep) {
	font-size: 0.78rem !important;
	font-weight: 600 !important;
	color: rgba(255,255,255,0.85) !important;
	background: transparent !important;
	/* Clamp long titles */
	max-width: 240px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
	vertical-align: middle;
}

/* Separator › */
.sp-hero .breadcrumb-sep,
.sp-hero .breadcrumbs .separator {
	color: rgba(255,255,255,0.30) !important;
	font-size: 0.75rem !important;
	margin: 0 0.35rem !important;
	background: transparent !important;
	flex-shrink: 0;
}

/* Home icon treatment — optional: show 🏠 before "Home" */
.sp-hero .breadcrumb-item:first-child a::before {
	content: '🏠 ';
	font-size: 0.7rem;
}

/* END PATCH v1.9.1 */

/* ==========================================================================
   PATCH v1.9.2 — sp-breadcrumbs-wrap selector alias
   ========================================================================== */
.sp-hero .sp-breadcrumbs-wrap { margin-bottom: 1rem; }
.sp-hero .sp-breadcrumbs-wrap .breadcrumbs {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
/* END PATCH v1.9.2 */

/* ==========================================================================
   PATCH v2.0 — Legal Pages Full Design Overhaul
   ========================================================================== */

/* ── Legal page main wrapper ── */
.legal-page,
.policy-page {
	background: #F7F5F2;
	padding: 3rem 0 4rem;
}

/* ── Legal content article ── */
.legal-content,
.policy-content {
	max-width: 820px;
	margin: 0 auto;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 4px 28px rgba(0,0,0,0.08);
	overflow: hidden;
}

/* ── Legal page header ── */
.legal-header {
	background: linear-gradient(135deg, #1A1A1A 0%, #2C1810 55%, #E8520A 100%);
	padding: 2.5rem 2.5rem 2rem;
	position: relative;
	overflow: hidden;
}
.legal-header::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='25' cy='25' r='22' fill='%23fff' fill-opacity='.03'/%3E%3C/svg%3E") repeat;
	pointer-events: none;
}
.legal-header__title {
	font-size: clamp(1.6rem, 3.5vw, 2.2rem) !important;
	font-weight: 900 !important;
	color: #fff !important;
	margin: 0 0 0.85rem !important;
	line-height: 1.15 !important;
	position: relative;
	z-index: 1;
}
.legal-header__meta {
	font-size: 0.82rem !important;
	color: rgba(255,255,255,0.70) !important;
	line-height: 1.75 !important;
	margin: 0 !important;
	position: relative;
	z-index: 1;
}
.legal-header__meta a {
	color: rgba(255,255,255,0.90) !important;
	text-decoration: underline;
}
.legal-header__meta a:hover { color: #fff !important; }
.legal-header__meta strong { color: rgba(255,255,255,0.55); font-weight: 600; }

/* Cookie/Policy page entry-header (different markup) */
.policy-content .entry-header {
	background: linear-gradient(135deg, #1A1A1A 0%, #2C1810 55%, #E8520A 100%);
	padding: 2.5rem 2.5rem 2rem;
}
.policy-content .entry-title {
	font-size: clamp(1.6rem, 3.5vw, 2.2rem) !important;
	font-weight: 900 !important;
	color: #fff !important;
	margin: 0 0 0.85rem !important;
}
.policy-content .policy-meta {
	font-size: 0.82rem !important;
	color: rgba(255,255,255,0.70) !important;
	line-height: 1.75 !important;
	margin: 0 !important;
}
.policy-content .policy-meta strong { color: rgba(255,255,255,0.55); }
.policy-content .policy-meta a { color: rgba(255,255,255,0.9) !important; }

/* ── Legal sections ── */
.legal-section,
.policy-section {
	padding: 2rem 2.5rem;
	border-bottom: 1px solid #F0EDE8;
}
.legal-section:last-child,
.policy-section:last-child { border-bottom: none; }

.legal-section__heading,
.policy-section h2,
.entry-content .policy-section h2 {
	font-size: 1.15rem !important;
	font-weight: 800 !important;
	color: #1A1A1A !important;
	margin: 0 0 0.9rem !important;
	padding-left: 0.9rem;
	border-left: 4px solid #E8520A;
	line-height: 1.3 !important;
}
.legal-section__subheading,
.policy-section h3,
.entry-content .policy-section h3 {
	font-size: 0.95rem !important;
	font-weight: 700 !important;
	color: #2A2A2A !important;
	margin: 1.25rem 0 0.5rem !important;
}

/* Paragraphs */
.legal-section p,
.policy-section p,
.entry-content .policy-section p {
	font-size: 0.9rem !important;
	color: #444 !important;
	line-height: 1.8 !important;
	margin: 0 0 0.85rem !important;
}
.legal-section p:last-child,
.policy-section p:last-child { margin-bottom: 0 !important; }

/* ── Legal lists ── */
.legal-list,
.legal-section ul,
.legal-section ol,
.policy-section ul,
.policy-section ol,
.entry-content .policy-section ul,
.entry-content .policy-section ol {
	margin: 0 0 0.85rem !important;
	padding-left: 0 !important;
	list-style: none !important;
}
.legal-list li,
.legal-section ul li,
.legal-section ol li,
.policy-section ul li,
.policy-section ol li,
.entry-content .policy-section ul li,
.entry-content .policy-section ol li {
	font-size: 0.88rem !important;
	color: #444 !important;
	line-height: 1.75 !important;
	padding: 0.35rem 0 0.35rem 1.4rem;
	position: relative;
	border-bottom: 1px solid #F8F5F0;
}
.legal-list li:last-child,
.legal-section ul li:last-child,
.policy-section ul li:last-child { border-bottom: none; }
.legal-list li::before,
.legal-section ul li::before,
.policy-section ul li::before,
.entry-content .policy-section ul li::before {
	content: '›';
	position: absolute;
	left: 0;
	top: 0.4rem;
	color: #E8520A;
	font-size: 1.1rem;
	font-weight: 900;
	line-height: 1;
}

/* Strong inside lists */
.legal-list li strong,
.legal-section li strong { color: #1A1A1A; font-weight: 700; }

/* ── Legal address block ── */
.legal-address {
	background: #F7F5F2;
	border: 1.5px solid #EDE8E0;
	border-radius: 10px;
	padding: 1.1rem 1.5rem;
	font-size: 0.88rem;
	color: #444;
	line-height: 1.75;
	font-style: normal;
}
.legal-address a { color: #E8520A !important; }

/* ── Policy table (cookie policy) ── */
.policy-table-wrapper {
	overflow-x: auto;
	border-radius: 10px;
	border: 1px solid #E5E0D8;
	margin: 0.85rem 0;
}
.policy-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.83rem;
	background: #fff;
}
.policy-table th {
	background: #1A1A1A;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.6rem 1rem;
	text-align: left;
	white-space: nowrap;
}
.policy-table td {
	padding: 0.6rem 1rem;
	color: #333;
	border-bottom: 1px solid #F0EDE8;
	vertical-align: top;
}
.policy-table tbody tr:last-child td { border-bottom: none; }
.policy-table tbody tr:nth-child(even) { background: #FAFAF8; }
.policy-table code {
	background: #F0EDE8;
	padding: 0.1em 0.35em;
	border-radius: 4px;
	font-size: 0.85em;
	color: #C44208;
}

/* ── Policy notice (info box) ── */
.policy-notice {
	border-radius: 10px;
	padding: 1rem 1.25rem;
	margin: 0.85rem 0;
	font-size: 0.87rem;
}
.policy-notice--info {
	background: #FFF8F0;
	border-left: 4px solid #E8520A;
	color: #5C3A1E;
}
.policy-notice--info p { color: #5C3A1E !important; margin: 0 0 0.75rem !important; }
.policy-notice--info p:last-child { margin: 0 !important; }

/* ── Entry content (cookie policy uses entry-content wrapper) ── */
.policy-content .entry-content {
	padding: 0;
}
.policy-content .entry-content p,
.policy-content .entry-content ul,
.policy-content .entry-content ol {
	font-size: 0.9rem;
	color: #444;
	line-height: 1.8;
}
.policy-content .entry-content a { color: #E8520A; }

/* ── Responsive ── */
@media (max-width: 640px) {
	.legal-header { padding: 2rem 1.5rem 1.5rem; }
	.legal-section,
	.policy-section { padding: 1.5rem; }
	.policy-content .entry-header { padding: 2rem 1.5rem 1.5rem; }
	.legal-content,
	.policy-content { border-radius: 12px; margin: 0 0.5rem; }
}

/* END PATCH v2.0 */

/* ==========================================================================
   PATCH v2.1 — About Us + Contact Page Design
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────
   ABOUT PAGE
   ───────────────────────────────────────────────────────────────────────── */

.about-page {
	background: #F7F5F2;
	padding-bottom: 0;
}

/* ── About Hero ── */
.about-hero {
	background: linear-gradient(135deg, #1A1A1A 0%, #2C1810 55%, #E8520A 100%);
	padding: 4rem 0 5rem;
	position: relative;
	overflow: hidden;
	text-align: center;
}
.about-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='27' fill='%23fff' fill-opacity='.03'/%3E%3C/svg%3E") repeat;
	pointer-events: none;
}
.about-hero .container { position: relative; z-index: 1; }
.about-hero__heading {
	font-size: clamp(2.2rem, 5vw, 3.2rem) !important;
	font-weight: 900 !important;
	color: #fff !important;
	margin: 0 0 0.85rem !important;
	line-height: 1.1 !important;
}
.about-hero__tagline {
	font-size: 1.1rem;
	color: rgba(255,255,255,0.75);
	max-width: 560px;
	margin: 0 auto;
	line-height: 1.65;
}

/* ── Stats strip ── */
.about-stats {
	background: #1A1A1A;
	padding: 1.75rem 0;
	margin-top: -1px;
}
.about-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	text-align: center;
}
.about-stat {
	padding: 0.5rem 1rem;
	border-right: 1px solid rgba(255,255,255,0.08);
}
.about-stat:last-child { border-right: none; }
.about-stat__number {
	font-size: 2rem;
	font-weight: 900;
	color: #E8520A;
	line-height: 1;
	margin-bottom: 0.25rem;
}
.about-stat__label {
	font-size: 0.75rem;
	font-weight: 600;
	color: rgba(255,255,255,0.55);
	text-transform: uppercase;
	letter-spacing: 0.07em;
}

/* ── About Sections (shared) ── */
.about-section {
	padding: 3.5rem 0;
}
.about-section:nth-child(even) { background: #fff; }
.about-section:nth-child(odd)  { background: #F7F5F2; }

.about-section__heading {
	font-size: 1.5rem !important;
	font-weight: 900 !important;
	color: #1A1A1A !important;
	margin: 0 0 1.25rem !important;
	position: relative;
	padding-left: 1rem;
	line-height: 1.25 !important;
}
.about-section__heading::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.1em;
	bottom: 0.1em;
	width: 4px;
	background: #E8520A;
	border-radius: 2px;
}

/* Two-column layout for about sections */
.about-section__content {
	max-width: 780px;
}
.about-section .container {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 3rem;
	align-items: start;
}
/* For sections where heading is above content (not side-by-side) */
.about-what .container,
.about-contact .container { grid-template-columns: 1fr; }
.about-what .about-section__heading,
.about-contact .about-section__heading { max-width: 780px; }

/* ── About lists ── */
.about-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0.75rem 0 !important;
}
.about-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.65rem 0;
	border-bottom: 1px solid #F0EDE8;
	font-size: 0.9rem;
	color: #3A3A3A;
	line-height: 1.65;
}
.about-list li:last-child { border-bottom: none; }
.about-list li::before {
	content: '✓';
	flex-shrink: 0;
	width: 1.4rem;
	height: 1.4rem;
	background: #E8520A;
	color: #fff;
	border-radius: 50%;
	font-size: 0.7rem;
	font-weight: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 0.15rem;
}
.about-list--ordered { counter-reset: about-ol; }
.about-list--ordered li { counter-increment: about-ol; }
.about-list--ordered li::before {
	content: counter(about-ol);
	font-size: 0.75rem;
	font-weight: 900;
}
.about-list li strong { color: #1A1A1A; font-weight: 700; }

/* ── Tool cards grid ── */
.about-tools-list.about-list li::before { content: '→'; font-size: 0.85rem; }

/* ── About sections paragraphs ── */
.about-section p {
	font-size: 0.92rem !important;
	color: #4A4A4A !important;
	line-height: 1.78 !important;
	margin: 0 0 0.9rem !important;
}

/* ── About contact section ── */
.about-contact {
	background: linear-gradient(135deg, #1A1A1A 0%, #2C1810 55%, #E8520A 100%) !important;
	padding: 3.5rem 0 !important;
}
.about-contact .about-section__heading {
	color: #fff !important;
}
.about-contact .about-section__heading::before { background: rgba(255,255,255,0.4); }
.about-contact p { color: rgba(255,255,255,0.75) !important; }
.about-contact__email {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: #fff;
	color: #E8520A !important;
	font-size: 1rem;
	font-weight: 800;
	padding: 0.6rem 1.4rem;
	border-radius: 8px;
	text-decoration: none !important;
	margin: 0.5rem 0;
	transition: background 0.15s, transform 0.15s;
}
.about-contact__email:hover {
	background: #FFF4EE;
	transform: translateY(-2px);
}
.about-contact a:not(.about-contact__email) {
	color: rgba(255,255,255,0.9) !important;
	text-decoration: underline !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   CONTACT PAGE
   ───────────────────────────────────────────────────────────────────────── */

.contact-page {
	background: #F7F5F2;
	padding-bottom: 4rem;
}

/* ── Contact Hero ── */
.contact-hero {
	background: linear-gradient(135deg, #1A1A1A 0%, #2C1810 55%, #E8520A 100%);
	padding: 3.5rem 0 4.5rem;
	position: relative;
	overflow: hidden;
	text-align: center;
}
.contact-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='27' fill='%23fff' fill-opacity='.03'/%3E%3C/svg%3E") repeat;
	pointer-events: none;
}
.contact-hero .container { position: relative; z-index: 1; }
.contact-hero__heading {
	font-size: clamp(2rem, 4.5vw, 2.8rem) !important;
	font-weight: 900 !important;
	color: #fff !important;
	margin: 0 0 0.75rem !important;
	line-height: 1.1 !important;
}
.contact-hero__intro {
	font-size: 1.05rem;
	color: rgba(255,255,255,0.75);
	max-width: 480px;
	margin: 0 auto;
	line-height: 1.65;
}

/* ── Contact body ── */
.contact-body {
	padding: 2.5rem 0;
	margin-top: -1.5rem;
}
.contact-body__grid {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 2rem;
	align-items: start;
}

/* ── Contact form card ── */
.contact-form-wrap {
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 4px 28px rgba(0,0,0,0.08);
	overflow: hidden;
}
.contact-form {
	padding: 2rem 2rem 1.5rem;
}
/* Form heading */
.contact-form::before {
	content: '✉️  Send us a message';
	display: block;
	font-size: 1.05rem;
	font-weight: 800;
	color: #1A1A1A;
	margin-bottom: 1.5rem;
	padding-bottom: 0.85rem;
	border-bottom: 2px solid #F0EDE8;
}

/* Form groups */
.contact-form__group {
	margin-bottom: 1.1rem;
}
.contact-form__label {
	display: block;
	font-size: 0.78rem !important;
	font-weight: 700 !important;
	color: #5A5A5A !important;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-bottom: 0.4rem;
}
.contact-form__required { color: #E8520A; margin-left: 2px; }

/* Inputs */
.contact-form__input,
.contact-form__select,
.contact-form__textarea {
	width: 100%;
	padding: 0.65rem 0.9rem !important;
	font-size: 0.95rem !important;
	font-family: inherit;
	color: #1A1A1A !important;
	background: #FAFAF9 !important;
	border: 1.5px solid #DDD8D0 !important;
	border-radius: 8px !important;
	outline: none;
	transition: border-color 0.18s, box-shadow 0.18s;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}
.contact-form__select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 0.9rem center !important;
	padding-right: 2.5rem !important;
}
.contact-form__textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {
	border-color: #E8520A !important;
	box-shadow: 0 0 0 3px rgba(232,82,10,0.10) !important;
	background: #fff !important;
}

/* Error spans */
.contact-form__error {
	display: none;
	font-size: 0.78rem;
	color: #C62828;
	margin-top: 0.3rem;
	font-weight: 600;
}

/* Submit button */
.contact-form__group--submit { margin-top: 0.5rem; }
.contact-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.8rem 1.5rem !important;
	font-size: 0.95rem !important;
	font-weight: 800 !important;
	font-family: inherit;
	background: linear-gradient(135deg, #E8520A 0%, #C44208 100%) !important;
	color: #fff !important;
	border: none;
	border-radius: 10px !important;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(232,82,10,0.35) !important;
	transition: transform 0.15s, box-shadow 0.15s;
}
.contact-form__submit:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(232,82,10,0.45) !important;
}
.contact-form__submit:active { transform: translateY(0); }
.contact-form__submit:disabled {
	opacity: 0.7;
	cursor: not-allowed;
	transform: none;
}

/* Response box */
.contact-form__response {
	margin-top: 1rem;
	padding: 1rem 1.15rem;
	border-radius: 10px;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.55;
	animation: ftSlideIn 0.25s ease;
}
.contact-form__response--success {
	background: #E8F5E9;
	border: 1.5px solid #A5D6A7;
	color: #1B5E20;
}
.contact-form__response--error {
	background: #FFF3F0;
	border: 1.5px solid #FFCDD2;
	color: #B71C1C;
}
.contact-form__response a { color: inherit; font-weight: 700; }

/* ── Contact sidebar ── */
.contact-sidebar {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
.contact-sidebar__card {
	background: #fff;
	border-radius: 16px;
	padding: 1.5rem;
	box-shadow: 0 2px 12px rgba(0,0,0,0.07);
	border: 1.5px solid #EDE8E0;
}
.contact-sidebar__heading {
	font-size: 1rem !important;
	font-weight: 800 !important;
	color: #1A1A1A !important;
	margin: 0 0 0.85rem !important;
	padding-bottom: 0.6rem;
	border-bottom: 2px solid #F0EDE8;
}
.contact-sidebar__card p {
	font-size: 0.875rem !important;
	color: #5A5A5A !important;
	line-height: 1.65 !important;
	margin: 0 0 0.75rem !important;
}
.contact-sidebar__email-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1rem;
	background: linear-gradient(135deg, #FFF4EE, #FFEEE4);
	border: 1.5px solid #F5C4A8;
	border-radius: 10px;
	color: #E8520A !important;
	font-size: 0.9rem;
	font-weight: 800;
	text-decoration: none !important;
	transition: background 0.15s, transform 0.15s;
	word-break: break-all;
}
.contact-sidebar__email-link::before { content: '📧'; font-size: 1rem; }
.contact-sidebar__email-link:hover {
	background: linear-gradient(135deg, #FFE8D8, #FFD8C0);
	transform: translateY(-1px);
}
.contact-sidebar__divider {
	border: none;
	border-top: 1px solid #F0EDE8;
	margin: 1rem 0;
}
.contact-sidebar__note {
	font-size: 0.8rem !important;
	color: #888 !important;
	font-style: italic;
}

/* Topics card */
.contact-sidebar__card--topics { background: #F7F5F2; }
.contact-sidebar__subheading {
	font-size: 0.85rem !important;
	font-weight: 800 !important;
	color: #1A1A1A !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 0.75rem !important;
}
.contact-sidebar__list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.contact-sidebar__list li {
	font-size: 0.82rem;
	color: #4A4A4A;
	padding: 0.4rem 0 0.4rem 1.3rem;
	border-bottom: 1px solid #EDE8E0;
	position: relative;
}
.contact-sidebar__list li:last-child { border-bottom: none; }
.contact-sidebar__list li::before {
	content: '›';
	position: absolute;
	left: 0;
	color: #E8520A;
	font-size: 1rem;
	font-weight: 900;
}

/* ── Responsive ── */
@media (max-width: 900px) {
	.about-stats__grid { grid-template-columns: repeat(2, 1fr); }
	.about-section .container { grid-template-columns: 1fr; gap: 0; }
	.about-section__heading { font-size: 1.3rem !important; }
	.contact-body__grid { grid-template-columns: 1fr; }
	.contact-sidebar { flex-direction: row; flex-wrap: wrap; }
	.contact-sidebar__card { flex: 1; min-width: 260px; }
}
@media (max-width: 600px) {
	.about-hero { padding: 2.5rem 0 3rem; }
	.about-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 0; }
	.about-section { padding: 2.5rem 0; }
	.contact-hero { padding: 2.5rem 0 3rem; }
	.contact-form { padding: 1.5rem; }
	.contact-sidebar { flex-direction: column; }
}

/* END PATCH v2.1 */

/* ==========================================================================
   PATCH v2.1.1 — Fix homepage "Your Kitchen Companion" stats section.
   Scope the dark About-page stats strip to .about-page only, and restore
   the homepage stat cards to their intended white card style.
   ========================================================================== */

/* Restore homepage stats wrapper — flex column of white cards */
.about-section .about-stats {
	display: flex !important;
	flex-direction: column !important;
	gap: 1rem !important;
	background: transparent !important;
	padding: 0 !important;
}

/* Restore each stat card */
.about-section .about-stat-item {
	background: #fff !important;
	border: 1.5px solid #EDE8E0 !important;
	border-radius: 14px !important;
	padding: 1.5rem 1.25rem !important;
	text-align: center !important;
	box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
	transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.about-section .about-stat-item:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(0,0,0,0.10) !important;
	border-color: #E8520A !important;
}

/* Stat number */
.about-section .about-stat-item .stat-number {
	display: block !important;
	font-size: 2.2rem !important;
	font-weight: 900 !important;
	color: #E8520A !important;
	line-height: 1 !important;
	margin-bottom: 0.3rem !important;
}

/* Stat label */
.about-section .about-stat-item .stat-label {
	font-size: 0.8rem !important;
	font-weight: 600 !important;
	color: #888 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	display: block !important;
}

/* Keep the About *page* dark stats strip properly scoped */
.about-page .about-stats {
	background: #1A1A1A !important;
	padding: 1.75rem 0 !important;
}
.about-page .about-stats__grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
}
.about-page .about-stat {
	text-align: center;
	padding: 0.5rem 1rem;
	border-right: 1px solid rgba(255,255,255,0.08);
}
.about-page .about-stat:last-child { border-right: none; }
.about-page .about-stat__number {
	font-size: 2rem !important;
	font-weight: 900 !important;
	color: #E8520A !important;
	line-height: 1;
	margin-bottom: 0.25rem;
}
.about-page .about-stat__label {
	font-size: 0.75rem;
	font-weight: 600;
	color: rgba(255,255,255,0.55);
	text-transform: uppercase;
	letter-spacing: 0.07em;
}

/* Also fix the about-section-inner layout on the homepage */
.about-section .about-section-inner {
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: 3rem;
	align-items: center;
}
@media (max-width: 768px) {
	.about-section .about-section-inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.about-section .about-stats {
		display: grid !important;
		grid-template-columns: repeat(3, 1fr) !important;
		flex-direction: unset !important;
	}
}
@media (max-width: 500px) {
	.about-section .about-stats {
		grid-template-columns: 1fr !important;
	}
}

/* END PATCH v2.1.1 */


/* ==========================================================================
   PATCH v2.2 — Homepage Comprehensive Visual Polish
   Scoped to body.home to prevent bleeding onto other pages.
   Covers: section backgrounds, recipe grid, category tiles, tools,
   blog cards (homepage variant), about/trust section.
   ========================================================================== */

/* ── 1. SECTION ALTERNATING BACKGROUNDS ────────────────────────────────── */
body.home .featured-recipes-section {
	background: #fff;
}
body.home .categories-section {
	background: #FBF7F4;
}
body.home .tools-section {
	background: #fff;
}
body.home .blog-section {
	background: #FBF7F4;
}
body.home .about-section {
	background: #fff;
}

/* ── 2. SECTION HEADER POLISH ──────────────────────────────────────────── */
body.home .section-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 2rem;
}
body.home .section-title {
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	font-weight: 900;
	color: #1A1A1A;
	margin: 0;
	font-family: Georgia, 'Times New Roman', serif;
}
body.home .section-subtitle {
	font-size: 0.95rem;
	color: #666;
	margin: 0.3rem 0 0;
	line-height: 1.5;
}
body.home .section-link {
	font-size: 0.85rem;
	font-weight: 700;
	color: #E8520A;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
}
body.home .section-link:hover {
	text-decoration: underline;
}
body.home .section-cta {
	text-align: center;
	margin-top: 2rem;
}

/* ── 3. RECIPE GRID (homepage — 3 cols at 768px, 2 at 480px) ───────────── */
body.home .recipe-grid--home {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 480px) {
	body.home .recipe-grid--home {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 768px) {
	body.home .recipe-grid--home {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ── 4. CATEGORY TILES (homepage) ──────────────────────────────────────── */
body.home .categories-section .category-tiles {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}
@media (min-width: 480px) {
	body.home .categories-section .category-tiles {
		grid-template-columns: repeat(4, 1fr);
	}
}
@media (min-width: 768px) {
	body.home .categories-section .category-tiles {
		grid-template-columns: repeat(8, 1fr);
	}
}
body.home .category-tile {
	background: #fff;
	border: 1.5px solid #EDE8E0;
	border-radius: 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 1.25rem 0.75rem;
	text-decoration: none;
	transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
body.home .category-tile:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(0,0,0,0.09);
	border-color: #E8520A;
}
body.home .category-tile__emoji {
	font-size: 2rem;
	line-height: 1;
}
body.home .category-tile__name {
	font-size: 0.78rem;
	font-weight: 700;
	color: #1A1A1A;
	text-align: center;
	display: block;
}
body.home .category-tile__count {
	font-size: 0.7rem;
	color: #999;
}

/* ── 5. TOOLS GRID (homepage) ──────────────────────────────────────────── */
body.home .tools-section .tools-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}
@media (min-width: 480px) {
	body.home .tools-section .tools-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 768px) {
	body.home .tools-section .tools-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}
body.home .tool-card {
	background: #fff;
	border: 1.5px solid #EDE8E0;
	border-radius: 16px;
	padding: 1.75rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	text-decoration: none;
	transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
body.home .tool-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 28px rgba(0,0,0,0.11);
	border-color: #E8520A;
}
body.home .tool-card__icon {
	font-size: 2.2rem;
	line-height: 1;
}
body.home .tool-card__title {
	font-size: 1.05rem;
	font-weight: 800;
	color: #1A1A1A;
	margin: 0;
	line-height: 1.3;
}
body.home .tool-card__desc {
	font-size: 0.85rem;
	color: #666;
	line-height: 1.55;
	margin: 0;
	flex: 1;
}
body.home .tool-card__cta {
	font-size: 0.82rem;
	font-weight: 700;
	color: #E8520A;
	margin-top: auto;
}

/* ── 6. BLOG GRID (homepage — 3-col card grid) ─────────────────────────── */
body.home .blog-section .blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 600px) {
	body.home .blog-section .blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 900px) {
	body.home .blog-section .blog-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
/* Reset homepage blog cards to vertical (not the archive's featured layout) */
body.home .blog-section .blog-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1.5px solid #EDE8E0;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0,0,0,0.06);
	transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
body.home .blog-section .blog-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 28px rgba(0,0,0,0.11);
	border-color: #E8520A;
}
body.home .blog-section .blog-card__thumb {
	aspect-ratio: 16/9;
	overflow: hidden;
	background: #F0EDE8;
}
body.home .blog-section .blog-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
body.home .blog-section .blog-card:hover .blog-card__thumb img {
	transform: scale(1.04);
}
body.home .blog-section .blog-card__body {
	padding: 1.25rem 1.35rem 1.5rem;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0.5rem;
}
body.home .blog-section .blog-card__cat {
	font-size: 0.72rem;
	font-weight: 700;
	color: #E8520A;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
}
body.home .blog-section .blog-card__title {
	font-size: 1rem !important;
	font-weight: 800 !important;
	color: #1A1A1A !important;
	margin: 0 !important;
	line-height: 1.35 !important;
}
body.home .blog-section .blog-card__title a {
	color: inherit !important;
	text-decoration: none !important;
}
body.home .blog-section .blog-card__title a:hover {
	color: #E8520A !important;
}
body.home .blog-section .blog-card__meta {
	font-size: 0.75rem;
	color: #999;
	display: flex;
	align-items: center;
	gap: 0.35rem;
}
body.home .blog-section .blog-card__excerpt {
	font-size: 0.875rem !important;
	color: #555 !important;
	line-height: 1.6 !important;
	margin: 0 !important;
	flex: 1;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
body.home .blog-section .blog-card__read-more {
	font-size: 0.8rem;
	font-weight: 700;
	color: #E8520A !important;
	text-decoration: none !important;
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}
body.home .blog-section .blog-card__read-more:hover {
	gap: 0.55rem;
}

/* ── 7. ABOUT / TRUST SECTION ──────────────────────────────────────────── */
body.home .about-section {
	border-top: 1px solid #EDE8E0;
}
body.home .about-section .about-section__text h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 900;
	color: #1A1A1A;
	margin: 0 0 1rem;
	font-family: Georgia, 'Times New Roman', serif;
	line-height: 1.2;
}
body.home .about-section .about-section__text p {
	font-size: 0.95rem;
	color: #555;
	line-height: 1.7;
	margin: 0 0 0.85rem;
}

/* ── 8. HERO SECTION REFINEMENTS ───────────────────────────────────────── */
body.home .hero-section {
	background: linear-gradient(135deg, #1A1A1A 0%, #2d2320 60%, #3a2a22 100%);
	position: relative;
	padding: 5rem 0 4.5rem;
	overflow: hidden;
}
body.home .hero-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 70% 50%, rgba(232,82,10,0.15) 0%, transparent 60%);
	pointer-events: none;
}
body.home .hero-content {
	position: relative;
	z-index: 1;
	max-width: 680px;
}
body.home .hero-title {
	font-size: clamp(2rem, 5vw, 3.2rem);
	font-weight: 900;
	color: #fff;
	line-height: 1.15;
	margin: 0 0 1rem;
	font-family: Georgia, 'Times New Roman', serif;
}
body.home .hero-subtitle {
	font-size: clamp(1rem, 2vw, 1.15rem);
	color: rgba(255,255,255,0.8);
	line-height: 1.6;
	margin: 0 0 1.75rem;
}
body.home .hero-search {
	margin-bottom: 1.5rem;
}
body.home .hero-search .search-form {
	display: flex;
	gap: 0;
	max-width: 540px;
}
body.home .hero-search .search-field {
	flex: 1;
	padding: 0.85rem 1.25rem;
	font-size: 0.95rem;
	border: none;
	border-radius: 10px 0 0 10px;
	background: rgba(255,255,255,0.12);
	color: #fff;
	outline: none;
	backdrop-filter: blur(4px);
	border: 1.5px solid rgba(255,255,255,0.2);
	border-right: none;
}
body.home .hero-search .search-field::placeholder {
	color: rgba(255,255,255,0.5);
}
body.home .hero-search .search-submit {
	padding: 0.85rem 1.5rem;
	background: #E8520A;
	color: #fff;
	border: none;
	border-radius: 0 10px 10px 0;
	font-weight: 700;
	font-size: 0.9rem;
	cursor: pointer;
	transition: background 0.2s;
}
body.home .hero-search .search-submit:hover {
	background: #c44108;
}

/* END PATCH v2.2 */


/* ==========================================================================
   PATCH v2.2.1 — Fix tool-card__description selector (was tool-card__desc)
   ========================================================================== */
body.home .tool-card__description {
	font-size: 0.85rem;
	color: #666;
	line-height: 1.55;
	margin: 0;
	flex: 1;
}
body.home .tool-card .btn-tool {
	display: inline-block;
	margin-top: auto;
	padding: 0.55rem 1.2rem;
	background: #E8520A;
	color: #fff !important;
	border-radius: 8px;
	font-size: 0.82rem;
	font-weight: 700;
	text-decoration: none;
	text-align: center;
	transition: background 0.2s;
}
body.home .tool-card .btn-tool:hover {
	background: #c44108;
}
/* END PATCH v2.2.1 */

/* ==========================================================================
   PATCH v2.3 — Trust/About Section redesign to match reference image.
   Warm cream background · 2-col layout · stacked white stat cards (right).
   ========================================================================== */

/* ── SECTION BACKGROUND ─────────────────────────────────────────────────── */
body.home .about-section {
	background: #FBF7F4 !important;
	border-top: 1px solid #EDE8E0;
	padding-top: 3.5rem !important;
	padding-bottom: 3.5rem !important;
}

/* ── 2-COLUMN LAYOUT ────────────────────────────────────────────────────── */
body.home .about-section .about-section-inner {
	display: grid !important;
	grid-template-columns: 1fr 220px !important;
	gap: 3.5rem !important;
	align-items: center !important;
}
@media (max-width: 820px) {
	body.home .about-section .about-section-inner {
		grid-template-columns: 1fr !important;
		gap: 2rem !important;
	}
}

/* ── LEFT COLUMN — TEXT ─────────────────────────────────────────────────── */
body.home .about-section .about-section__text h2 {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp(1.45rem, 3vw, 1.9rem);
	font-weight: 900;
	color: #1A1A1A;
	margin: 0 0 1rem;
	line-height: 1.2;
}
body.home .about-section .about-section__text p {
	font-size: 0.92rem;
	color: #555;
	line-height: 1.72;
	margin: 0 0 0.9rem;
}
body.home .about-section .about-section__text .btn-primary {
	display: inline-block;
	margin-top: 0.5rem;
	padding: 0.7rem 1.6rem;
	background: #E8520A;
	color: #fff;
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s;
}
body.home .about-section .about-section__text .btn-primary:hover {
	background: #c44108;
}

/* ── RIGHT COLUMN — STAT CARDS STACK ───────────────────────────────────── */
body.home .about-section .about-stats {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.85rem !important;
	background: transparent !important;
	padding: 0 !important;
}
@media (max-width: 820px) {
	body.home .about-section .about-stats {
		display: grid !important;
		grid-template-columns: repeat(3, 1fr) !important;
		flex-direction: unset !important;
		gap: 1rem !important;
	}
}
@media (max-width: 500px) {
	body.home .about-section .about-stats {
		grid-template-columns: 1fr !important;
	}
}

/* ── INDIVIDUAL STAT CARD ───────────────────────────────────────────────── */
body.home .about-section .about-stat-item {
	background: #fff !important;
	border: 1.5px solid #EDE8E0 !important;
	border-radius: 14px !important;
	padding: 1.35rem 1rem !important;
	text-align: center !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 0.3rem !important;
	transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
body.home .about-section .about-stat-item:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 18px rgba(0,0,0,0.09) !important;
	border-color: #E8520A !important;
}

/* ── STAT NUMBER (large orange) ─────────────────────────────────────────── */
body.home .about-section .stat-number {
	display: block !important;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 2.4rem !important;
	font-weight: 900 !important;
	color: #E8520A !important;
	line-height: 1 !important;
	margin: 0 !important;
}

/* Checkmark card — slightly smaller so it feels like an icon */
body.home .about-section .stat-number--check {
	font-size: 2rem !important;
	font-family: system-ui, sans-serif !important;
}

/* ── STAT LABEL (small gray) ────────────────────────────────────────────── */
body.home .about-section .stat-label {
	display: block !important;
	font-size: 0.72rem !important;
	font-weight: 600 !important;
	color: #888 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.07em !important;
	margin: 0 !important;
}

/* END PATCH v2.3 */

/* ==========================================================================
   PATCH v2.3.1 — Fix hero-content/hero-inner alignment to match container.
   The hero content was capped at 680px and left-anchored; this aligns it
   with the 1200px container used by every other homepage section.
   ========================================================================== */

/* Make hero-inner use identical container behaviour as all other sections */
body.home .hero-inner.container,
body.home .hero-inner {
	max-width: var(--container-max) !important; /* 1200px — same as all sections */
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: max(16px, env(safe-area-inset-left)) !important;
	padding-right: max(16px, env(safe-area-inset-right)) !important;
	box-sizing: border-box;
}
@media (min-width: 768px) {
	body.home .hero-inner.container,
	body.home .hero-inner {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
}
@media (min-width: 1024px) {
	body.home .hero-inner.container,
	body.home .hero-inner {
		padding-left: 32px !important;
		padding-right: 32px !important;
	}
}

/* Remove the narrow max-width cap from hero-content — let it fill the container */
body.home .hero-content {
	max-width: 100% !important;
	margin: 0 !important;
}

/* Keep the search form itself at a readable width, centered within the content */
body.home .hero-search .search-form {
	max-width: 560px !important;
	margin: 0 !important; /* left-aligned, matching the text above it */
}

/* END PATCH v2.3.1 */

/* ==========================================================================
   PATCH v2.3.2 — Hero section: full centered layout matching reference.
   Title · subtitle · pill search · outlined "Browse Recipes" button — all
   centred within the full-width container.
   ========================================================================== */

/* ── SECTION SHELL ──────────────────────────────────────────────────────── */
body.home .hero-section {
	background: linear-gradient(135deg, #1A1A1A 0%, #2d2320 55%, #3a2a22 100%) !important;
	padding: 4.5rem 0 4rem !important;
	position: relative;
	overflow: hidden;
}
body.home .hero-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 65% 50%, rgba(232,82,10,0.18) 0%, transparent 65%);
	pointer-events: none;
}

/* ── INNER CONTAINER — centres everything ───────────────────────────────── */
body.home .hero-inner {
	text-align: center !important;
	position: relative;
	z-index: 1;
}
body.home .hero-content {
	max-width: 100% !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
}

/* ── TITLE ───────────────────────────────────────────────────────────────── */
body.home .hero-title {
	font-family: Georgia, 'Times New Roman', serif !important;
	font-size: clamp(2rem, 5vw, 3.2rem) !important;
	font-weight: 900 !important;
	color: #fff !important;
	line-height: 1.15 !important;
	margin: 0 0 1rem !important;
	max-width: 820px;
}

/* ── SUBTITLE ────────────────────────────────────────────────────────────── */
body.home .hero-subtitle {
	font-size: clamp(0.95rem, 1.8vw, 1.1rem) !important;
	color: rgba(255,255,255,0.72) !important;
	line-height: 1.6 !important;
	margin: 0 0 2rem !important;
	max-width: 520px;
}

/* ── SEARCH BAR — pill input + orange submit ────────────────────────────── */
body.home .hero-search {
	width: 100%;
	max-width: 480px !important;
	margin: 0 0 1.5rem !important;
}
body.home .hero-search .search-form {
	display: flex !important;
	gap: 0 !important;
	max-width: 480px !important;
	margin: 0 auto !important;
	border-radius: 50px !important;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
body.home .hero-search .search-field {
	flex: 1 !important;
	padding: 0.9rem 1.5rem !important;
	font-size: 0.95rem !important;
	border: none !important;
	border-radius: 50px 0 0 50px !important;
	background: #fff !important;
	color: #1A1A1A !important;
	outline: none !important;
	backdrop-filter: none !important;
}
body.home .hero-search .search-field::placeholder {
	color: #aaa !important;
}
body.home .hero-search .search-submit {
	padding: 0.9rem 1.4rem !important;
	background: #E8520A !important;
	color: #fff !important;
	border: none !important;
	border-radius: 0 50px 50px 0 !important;
	font-weight: 700 !important;
	font-size: 1rem !important;
	cursor: pointer !important;
	transition: background 0.2s !important;
	line-height: 1;
}
body.home .hero-search .search-submit:hover {
	background: #c44108 !important;
}

/* ── CTA BUTTON — outlined pill (white bg, orange text + border) ─────────── */
body.home .hero-cta {
	margin-top: 0 !important;
}
body.home .hero-cta .btn-primary {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.4rem !important;
	padding: 0.75rem 2rem !important;
	background: #fff !important;
	color: #E8520A !important;
	border: 2px solid #E8520A !important;
	border-radius: 50px !important;
	font-size: 0.95rem !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	transition: background 0.2s, color 0.2s !important;
	box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
body.home .hero-cta .btn-primary:hover {
	background: #E8520A !important;
	color: #fff !important;
}

/* END PATCH v2.3.2 */

/* ==========================================================================
   PATCH v2.3.3 — Increase gap between about-section__text and about-stats.
   ========================================================================== */
body.home .about-section .about-section-inner {
	gap: 5rem !important;
}
@media (max-width: 820px) {
	body.home .about-section .about-section-inner {
		gap: 2rem !important;
	}
}
/* END PATCH v2.3.3 */

/* ==========================================================================
   PATCH v2.3.4 — About section: correct column ratio + gap to match reference.
   Left text ~60%, explicit gap, right stats ~30% — matching the screenshot.
   ========================================================================== */
body.home .about-section .about-section-inner {
	grid-template-columns: 60% 30% !important;
	gap: 0 !important;          /* gap now handled by justify-content / padding */
	justify-content: space-between !important;
	align-items: center !important;
}
/* END PATCH v2.3.4 */

/* ==========================================================================
   PATCH v2.3.5 — About section final layout fix.
   Explicit: left text fills remaining space, 80px gap, 260px stat column.
   ========================================================================== */
body.home .about-section .about-section-inner {
	display: grid !important;
	grid-template-columns: 1fr 260px !important;
	column-gap: 80px !important;
	row-gap: 2rem !important;
	justify-content: unset !important;
	align-items: center !important;
}
body.home .about-section .about-section__text {
	min-width: 0; /* prevent grid blowout */
}
body.home .about-section .about-stats {
	min-width: 0;
	width: 260px;
}
@media (max-width: 820px) {
	body.home .about-section .about-section-inner {
		grid-template-columns: 1fr !important;
		column-gap: 0 !important;
		row-gap: 2rem !important;
	}
	body.home .about-section .about-stats {
		width: 100%;
	}
}
/* END PATCH v2.3.5 */

/* ==========================================================================
   PATCH v2.4 — TRUST SECTION: Definitive responsive redesign.
   Overrides all previous about-section patches (v2.1.1, v2.2, v2.3.x).
   ========================================================================== */

/* ── SECTION SHELL ──────────────────────────────────────────────────────── */
body.home .about-section {
	background: #FBF7F4 !important;
	border-top: 1px solid #EDE8E0 !important;
	padding: 4rem 0 !important;
}

/* ── 2-COLUMN GRID (desktop) ────────────────────────────────────────────── */
body.home .about-section-inner {
	display: grid !important;
	grid-template-columns: 1fr 240px !important;
	column-gap: 4rem !important;
	row-gap: 0 !important;
	align-items: center !important;
	justify-content: unset !important;
	width: 100% !important;
}

/* ── LEFT: TEXT COLUMN ──────────────────────────────────────────────────── */
body.home .about-section__text {
	min-width: 0 !important;
}
body.home .about-section__text h2 {
	font-family: Georgia, 'Times New Roman', serif !important;
	font-size: 1.75rem !important;
	font-weight: 900 !important;
	color: #1A1A1A !important;
	margin: 0 0 1rem !important;
	line-height: 1.2 !important;
}
body.home .about-section__text p {
	font-size: 0.9rem !important;
	color: #555 !important;
	line-height: 1.72 !important;
	margin: 0 0 0.85rem !important;
}
body.home .about-section__text .btn-primary {
	display: inline-block !important;
	margin-top: 0.75rem !important;
	padding: 0.7rem 1.6rem !important;
	background: #E8520A !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px !important;
	font-size: 0.88rem !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	transition: background 0.2s !important;
}
body.home .about-section__text .btn-primary:hover {
	background: #c44108 !important;
	color: #fff !important;
}

/* ── RIGHT: STATS COLUMN — stacked cards ───────────────────────────────── */
body.home .about-stats {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.75rem !important;
	background: transparent !important;
	padding: 0 !important;
	min-width: 0 !important;
	width: 100% !important;
}

/* ── STAT CARD ──────────────────────────────────────────────────────────── */
body.home .about-stat-item {
	background: #fff !important;
	border: 1.5px solid #E8E2D8 !important;
	border-radius: 12px !important;
	padding: 1.1rem 1rem !important;
	text-align: center !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 0.2rem !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
	transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s !important;
}
body.home .about-stat-item:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 5px 16px rgba(0,0,0,0.09) !important;
	border-color: #E8520A !important;
}

/* ── STAT NUMBER (large orange) ─────────────────────────────────────────── */
body.home .stat-number {
	display: block !important;
	font-family: Georgia, 'Times New Roman', serif !important;
	font-size: 2.2rem !important;
	font-weight: 900 !important;
	color: #E8520A !important;
	line-height: 1.1 !important;
	margin: 0 !important;
}
body.home .stat-number--check {
	font-size: 1.8rem !important;
	font-family: system-ui, sans-serif !important;
}

/* ── STAT LABEL (small gray) ────────────────────────────────────────────── */
body.home .stat-label {
	display: block !important;
	font-size: 0.68rem !important;
	font-weight: 700 !important;
	color: #999 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	margin: 0 !important;
}

/* ── TABLET: narrow 2-col ───────────────────────────────────────────────── */
@media (max-width: 820px) and (min-width: 540px) {
	body.home .about-section-inner {
		grid-template-columns: 1fr 180px !important;
		column-gap: 2.5rem !important;
	}
}

/* ── MOBILE: stack vertically, stats go horizontal ─────────────────────── */
@media (max-width: 539px) {
	body.home .about-section-inner {
		grid-template-columns: 1fr !important;
		column-gap: 0 !important;
		row-gap: 2rem !important;
	}
	body.home .about-stats {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		gap: 0.75rem !important;
	}
	body.home .about-stat-item {
		flex: 1 1 100px !important;
		min-width: 90px !important;
		max-width: 160px !important;
	}
}

/* END PATCH v2.4 */

/* ==========================================================================
   PATCH v2.5 — Search Results Page Design
   Dark hero · full-width 3-col card grid · no sidebar · styled pagination.
   ========================================================================== */

/* ── SEARCH HERO ────────────────────────────────────────────────────────── */
.search-hero {
	background: linear-gradient(135deg, #1A1A1A 0%, #2d2320 60%, #3a2a22 100%);
	padding: 3.5rem 0 3rem;
	position: relative;
	overflow: hidden;
}
.search-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 70% 50%, rgba(232,82,10,0.15) 0%, transparent 65%);
	pointer-events: none;
}
.search-hero__inner {
	position: relative;
	z-index: 1;
}
.search-hero__label {
	font-size: 0.8rem;
	font-weight: 700;
	color: rgba(255,255,255,0.5);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0 0 0.4rem;
}
.search-hero__query {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	font-weight: 900;
	color: #fff;
	margin: 0 0 0.5rem;
	line-height: 1.2;
}
.search-hero__count {
	font-size: 0.9rem;
	color: rgba(255,255,255,0.6);
	margin: 0 0 1.5rem;
}
.search-hero__form {
	max-width: 500px;
}
.search-hero__form .search-form {
	display: flex;
	border-radius: 50px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.search-hero__form .search-field {
	flex: 1;
	padding: 0.8rem 1.4rem;
	font-size: 0.95rem;
	border: none;
	border-radius: 50px 0 0 50px;
	background: #fff;
	color: #1A1A1A;
	outline: none;
}
.search-hero__form .search-field::placeholder { color: #aaa; }
.search-hero__form .search-submit {
	padding: 0.8rem 1.3rem;
	background: #E8520A;
	color: #fff;
	border: none;
	border-radius: 0 50px 50px 0;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s;
}
.search-hero__form .search-submit:hover { background: #c44108; }

/* ── RESULTS GRID ───────────────────────────────────────────────────────── */
.search-results-page {
	background: #FBF7F4;
}
.search-results-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin-bottom: 3rem;
}
@media (min-width: 600px) {
	.search-results-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
	.search-results-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── SEARCH CARD ────────────────────────────────────────────────────────── */
.search-card {
	background: #fff;
	border: 1.5px solid #EDE8E0;
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 2px 10px rgba(0,0,0,0.06);
	transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.search-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 28px rgba(0,0,0,0.11);
	border-color: #E8520A;
}
.search-card__thumb-link { display: block; }
.search-card__thumb {
	aspect-ratio: 16/9;
	overflow: hidden;
	background: #F0EDE8;
}
.search-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.search-card:hover .search-card__thumb img { transform: scale(1.04); }
.search-card__thumb--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
	background: linear-gradient(135deg, #F0EDE8, #E8E2D8);
}

/* ── CARD BODY ──────────────────────────────────────────────────────────── */
.search-card__body {
	padding: 1.25rem 1.35rem 1.4rem;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0.45rem;
}
.search-card__badges {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex-wrap: wrap;
}
.search-badge {
	display: inline-block;
	padding: 0.18rem 0.6rem;
	border-radius: 50px;
	font-size: 0.67rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
}
.search-badge--type {
	background: #1A1A1A;
	color: #fff;
}
.search-badge--cat {
	background: #FFF4EE;
	color: #E8520A;
}
.search-card__title {
	font-size: 1rem;
	font-weight: 800;
	color: #1A1A1A;
	margin: 0.1rem 0 0;
	line-height: 1.3;
}
.search-card__title a {
	color: inherit;
	text-decoration: none;
}
.search-card__title a:hover { color: #E8520A; }
.search-card__meta {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.73rem;
	color: #999;
}
.search-card__meta-sep { opacity: 0.5; }
.search-card__excerpt {
	font-size: 0.86rem;
	color: #555;
	line-height: 1.65;
	margin: 0;
	flex: 1;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
.search-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.8rem;
	font-weight: 700;
	color: #E8520A;
	text-decoration: none;
	margin-top: auto;
	padding-top: 0.5rem;
	transition: gap 0.2s;
}
.search-card__cta:hover { gap: 0.5rem; }

/* ── PAGINATION ─────────────────────────────────────────────────────────── */
.search-pagination { text-align: center; margin-top: 1rem; }
.search-pagination .nav-links {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	flex-wrap: wrap;
	justify-content: center;
}
.search-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: 600;
	color: #1A1A1A;
	text-decoration: none;
	border: 1.5px solid #EDE8E0;
	background: #fff;
	transition: all 0.2s;
}
.search-pagination .page-numbers.current,
.search-pagination .page-numbers:hover {
	background: #E8520A;
	color: #fff;
	border-color: #E8520A;
}
.search-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}
.search-pagination .prev,
.search-pagination .next {
	width: auto;
	padding: 0 1rem;
	font-size: 0.82rem;
}

/* ── NO RESULTS ─────────────────────────────────────────────────────────── */
.search-no-results {
	text-align: center;
	padding: 4rem 1rem;
}
.search-no-results__icon {
	font-size: 3.5rem;
	margin-bottom: 1rem;
	display: block;
}
.search-no-results__title {
	font-size: 1.75rem;
	font-weight: 900;
	color: #1A1A1A;
	margin: 0 0 0.75rem;
}
.search-no-results__text {
	font-size: 1rem;
	color: #666;
	max-width: 480px;
	margin: 0 auto 2rem;
	line-height: 1.65;
}
.search-no-results__actions {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

/* END PATCH v2.5 */

/* ==========================================================================
   PATCH v2.5.1 — Fix search form structure in hero (search-input-wrap layer).
   searchform.php wraps field+button in .search-input-wrap inside .search-form.
   ========================================================================== */

/* Hero search — unwrap the search-input-wrap to get pill layout */
.search-hero__form .search-form {
	max-width: 500px !important;
}
.search-hero__form .search-input-wrap {
	display: flex !important;
	border-radius: 50px !important;
	overflow: hidden !important;
	box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
	width: 100% !important;
}
.search-hero__form .search-field {
	flex: 1 !important;
	padding: 0.85rem 1.4rem !important;
	font-size: 0.95rem !important;
	border: none !important;
	border-radius: 50px 0 0 50px !important;
	background: #fff !important;
	color: #1A1A1A !important;
	outline: none !important;
}
.search-hero__form .search-field::placeholder { color: #aaa !important; }
.search-hero__form .search-submit {
	padding: 0.85rem 1.3rem !important;
	background: #E8520A !important;
	color: #fff !important;
	border: none !important;
	border-radius: 0 50px 50px 0 !important;
	font-size: 1rem !important;
	cursor: pointer !important;
	transition: background 0.2s !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.search-hero__form .search-submit:hover { background: #c44108 !important; }

/* Also fix hero homepage search bar (same searchform.php) */
body.home .hero-search .search-input-wrap {
	display: flex !important;
	border-radius: 50px !important;
	overflow: hidden !important;
	box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
	max-width: 480px !important;
	margin: 0 auto !important;
}
body.home .hero-search .search-field {
	flex: 1 !important;
	padding: 0.9rem 1.5rem !important;
	border: none !important;
	border-radius: 50px 0 0 50px !important;
	background: #fff !important;
	color: #1A1A1A !important;
	outline: none !important;
	font-size: 0.95rem !important;
}
body.home .hero-search .search-field::placeholder { color: #aaa !important; }
body.home .hero-search .search-submit {
	padding: 0.9rem 1.3rem !important;
	background: #E8520A !important;
	color: #fff !important;
	border: none !important;
	border-radius: 0 50px 50px 0 !important;
	font-size: 1rem !important;
	cursor: pointer !important;
	transition: background 0.2s !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
body.home .hero-search .search-submit:hover { background: #c44108 !important; }

/* END PATCH v2.5.1 */

/* ==========================================================================
   PATCH v2.6 — Hero section: split layout with food image collage (right).
   Left: dark gradient + text/search. Right: 2×2 recipe image grid.
   ========================================================================== */

/* ── HERO SHELL ─────────────────────────────────────────────────────────── */
body.home .hero-section {
	background: linear-gradient(135deg, #1A1A1A 0%, #2a1f1a 55%, #1A1A1A 100%) !important;
	padding: 4rem 0 !important;
	position: relative !important;
	overflow: hidden !important;
	min-height: 480px;
}

/* ── INNER: 2-column split ──────────────────────────────────────────────── */
body.home .hero-inner {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 3rem !important;
	align-items: center !important;
	text-align: left !important;
	min-height: 400px;
}

/* ── LEFT: CONTENT ──────────────────────────────────────────────────────── */
body.home .hero-content {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 1.1rem !important;
	max-width: 100% !important;
	margin: 0 !important;
	position: relative;
	z-index: 2;
}
body.home .hero-title {
	font-family: Georgia, 'Times New Roman', serif !important;
	font-size: clamp(1.8rem, 4vw, 3rem) !important;
	font-weight: 900 !important;
	color: #fff !important;
	line-height: 1.15 !important;
	margin: 0 !important;
}
body.home .hero-subtitle {
	font-size: clamp(0.9rem, 1.6vw, 1.05rem) !important;
	color: rgba(255,255,255,0.72) !important;
	line-height: 1.65 !important;
	margin: 0 !important;
	max-width: 420px;
}

/* ── SEARCH BAR ─────────────────────────────────────────────────────────── */
body.home .hero-search {
	width: 100% !important;
	max-width: 440px !important;
	margin: 0 !important;
}
body.home .hero-search .search-input-wrap {
	display: flex !important;
	border-radius: 50px !important;
	overflow: hidden !important;
	box-shadow: 0 4px 20px rgba(0,0,0,0.35) !important;
}
body.home .hero-search .search-field {
	flex: 1 !important;
	padding: 0.85rem 1.4rem !important;
	font-size: 0.95rem !important;
	border: none !important;
	border-radius: 50px 0 0 50px !important;
	background: #fff !important;
	color: #1A1A1A !important;
	outline: none !important;
}
body.home .hero-search .search-field::placeholder { color: #aaa !important; }
body.home .hero-search .search-submit {
	padding: 0.85rem 1.25rem !important;
	background: #E8520A !important;
	color: #fff !important;
	border: none !important;
	border-radius: 0 50px 50px 0 !important;
	font-size: 1rem !important;
	cursor: pointer !important;
	transition: background 0.2s !important;
	display: flex !important;
	align-items: center !important;
}
body.home .hero-search .search-submit:hover { background: #c44108 !important; }

/* ── CTA BUTTONS ────────────────────────────────────────────────────────── */
body.home .hero-cta {
	display: flex !important;
	gap: 0.75rem !important;
	flex-wrap: wrap !important;
	margin: 0 !important;
}
body.home .btn-hero-primary {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.35rem !important;
	padding: 0.72rem 1.6rem !important;
	background: #E8520A !important;
	color: #fff !important;
	border: 2px solid #E8520A !important;
	border-radius: 50px !important;
	font-size: 0.9rem !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	transition: background 0.2s, color 0.2s !important;
}
body.home .btn-hero-primary:hover {
	background: #c44108 !important;
	border-color: #c44108 !important;
}
body.home .btn-hero-outline {
	display: inline-flex !important;
	align-items: center !important;
	padding: 0.72rem 1.6rem !important;
	background: transparent !important;
	color: #fff !important;
	border: 2px solid rgba(255,255,255,0.4) !important;
	border-radius: 50px !important;
	font-size: 0.9rem !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	transition: border-color 0.2s, background 0.2s !important;
}
body.home .btn-hero-outline:hover {
	border-color: #fff !important;
	background: rgba(255,255,255,0.08) !important;
}

/* ── RIGHT: IMAGE COLLAGE ───────────────────────────────────────────────── */
body.home .hero-collage {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	grid-template-rows: 1fr 1fr !important;
	gap: 0.65rem !important;
	height: 400px !important;
	position: relative;
	z-index: 1;
}
body.home .hero-collage__item {
	display: block !important;
	overflow: hidden !important;
	border-radius: 14px !important;
	position: relative;
}
/* First image is taller — spans both rows on the left */
body.home .hero-collage__item--1 {
	grid-row: 1 / 3 !important;
	border-radius: 18px 14px 14px 18px !important;
}
body.home .hero-collage__item img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	transition: transform 0.5s ease !important;
}
body.home .hero-collage__item:hover img {
	transform: scale(1.06) !important;
}
/* Subtle dark vignette on collage */
body.home .hero-collage::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(26,26,26,0.35) 0%, transparent 40%);
	pointer-events: none;
	z-index: 2;
	border-radius: 14px;
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	body.home .hero-inner {
		grid-template-columns: 1fr !important;
		gap: 2rem !important;
		text-align: center !important;
	}
	body.home .hero-content {
		align-items: center !important;
	}
	body.home .hero-subtitle { max-width: 100%; }
	body.home .hero-search { max-width: 480px !important; }
	body.home .hero-collage {
		height: 260px !important;
		grid-template-columns: repeat(4, 1fr) !important;
		grid-template-rows: 1fr !important;
	}
	body.home .hero-collage__item--1 {
		grid-row: 1 !important;
		border-radius: 12px !important;
	}
}
@media (max-width: 540px) {
	body.home .hero-collage {
		height: 180px !important;
	}
	body.home .hero-section {
		padding: 2.5rem 0 !important;
	}
}

/* END PATCH v2.6 */

/* ==========================================================================
   PATCH v2.7 — Recipe content list/heading styles + single recipe tweaks
   ========================================================================== */

/* ── Recipe content area: inherit entry-content list styles ── */
.recipe-content ul,
.recipe-content ol {
	list-style: revert;
	padding-left: var(--spacing-xl);
	margin-bottom: var(--spacing-lg);
}
.recipe-content li {
	margin-bottom: var(--spacing-sm);
	line-height: 1.7;
}
.recipe-content h2,
.recipe-content h3,
.recipe-content h4 {
	margin-top: var(--spacing-xl);
	margin-bottom: var(--spacing-md);
	font-weight: 700;
	color: var(--color-text);
}
.recipe-content p {
	margin-bottom: var(--spacing-md);
	line-height: 1.75;
}
.recipe-content strong {
	font-weight: 700;
	color: var(--color-text);
}

/* ── Published date: reduce visual prominence ── */
.recipe-published-date {
	font-size: 0.8rem;
	color: var(--color-text-muted, #888);
	margin-bottom: 0.75rem;
}

/* ── Recipe hero: min-height even without image ── */
.recipe-hero {
	min-height: 260px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.recipe-hero--no-image {
	background: var(--color-surface, #f9f5f0);
	border-radius: 12px;
	margin-bottom: 1.5rem;
}

/* END PATCH v2.7 */

/* ==========================================================================
   PATCH v1.2 — Internal Links & Further Reading
   ========================================================================== */

/* Contextual internal links inside post body */
.entry-content a,
.post-content a,
.recipe-content a {
    color: var(--color-primary, #e67e22);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}
.entry-content a:hover,
.post-content a:hover,
.recipe-content a:hover {
    color: var(--color-primary-dark, #ca6f1e);
    text-decoration: none;
}

/* Further Reading block */
.entry-content .further-reading,
.post-content .further-reading {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.entry-content .further-reading li,
.post-content .further-reading li {
    border-left: 3px solid var(--color-primary, #e67e22);
    padding: 8px 14px;
    background: #fdf6ee;
    border-radius: 0 6px 6px 0;
    margin: 0;
}
.entry-content .further-reading a,
.post-content .further-reading a {
    color: var(--color-primary, #e67e22);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.97rem;
}
.entry-content .further-reading a:hover,
.post-content .further-reading a:hover {
    text-decoration: underline;
}

/* Further Reading heading */
.entry-content h2:has(+ ul.further-reading),
.post-content h2:has(+ ul.further-reading) {
    font-size: 1.25rem;
    border-bottom: 2px solid var(--color-primary, #e67e22);
    padding-bottom: 8px;
    margin-top: 40px;
    margin-bottom: 16px;
}


/* ============================================================
   PATCH v1.3 – Single post sidebar layout
   ============================================================ */

/* ── Layout grid: content + sidebar ────────────────────────── */
.sp-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: start;
}

/* Override the centered single-column rule inside the grid */
.sp-layout .sp-content-col {
	max-width: 100%;
	margin: 0;
	min-width: 0;
}

/* Desktop: 2-col grid — content ~67%, sidebar ~31% */
@media (min-width: 1024px) {
	.sp-layout {
		grid-template-columns: 1fr 320px;
	}
}

/* ── Single-post sidebar styling ────────────────────────────── */
.sp-layout #secondary {
	position: sticky;
	top: 90px; /* clears fixed header */
}

.sp-layout #secondary .widget {
	background: #fff;
	border-radius: 12px;
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.5rem;
	box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.sp-layout #secondary .widget-title {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: #1a1a1a;
	margin: 0 0 .85rem;
	padding-bottom: .5rem;
	border-bottom: 2px solid #E94560;
}

/* Search widget */
.sp-layout #secondary .widget_search .search-field {
	width: 100%;
	padding: .55rem .85rem;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	font-size: .9rem;
}

.sp-layout #secondary .widget_search .search-submit {
	margin-top: .5rem;
	width: 100%;
	background: #E94560;
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: .55rem 1rem;
	font-size: .875rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s;
}

.sp-layout #secondary .widget_search .search-submit:hover {
	background: #c73050;
}

/* Latest posts list */
.sp-layout #secondary .wp-block-latest-posts li,
.sp-layout #secondary ul li {
	list-style: none;
	padding: .45rem 0;
	border-bottom: 1px solid #f0f0f0;
	font-size: .875rem;
	line-height: 1.45;
}

.sp-layout #secondary .wp-block-latest-posts li:last-child,
.sp-layout #secondary ul li:last-child {
	border-bottom: none;
}

.sp-layout #secondary a {
	color: #1a1a1a;
	text-decoration: none;
	transition: color .2s;
}

.sp-layout #secondary a:hover {
	color: #E94560;
}

/* Block widget wrapper */
.sp-layout #secondary .wp-block-group {
	margin: 0;
}

/* ── Tablet: sidebar drops below content ────────────────────── */
@media (max-width: 1023px) {
	.sp-layout {
		grid-template-columns: 1fr;
	}

	.sp-layout #secondary {
		position: static;
	}
}


/* ==========================================================================
   PATCH v2.8 — "You Might Also Like" Related Posts Force-Fix
   Ensures the dark section and card grid always render correctly
   regardless of any plugin/block-library overrides.
   ========================================================================== */

/* ── Section shell ── */
section.sp-related {
	display: block !important;
	background: #1A1A1A !important;
	padding: 3rem 0 4rem !important;
	width: 100% !important;
	clear: both !important;
}

/* ── Heading ── */
section.sp-related .sp-related__heading {
	display: block !important;
	font-size: 1.35rem !important;
	font-weight: 800 !important;
	color: #fff !important;
	margin: 0 0 1.5rem !important;
	padding-left: 1rem !important;
	position: relative !important;
}
section.sp-related .sp-related__heading::before {
	content: '' !important;
	position: absolute !important;
	left: 0 !important;
	top: 0.1em !important;
	bottom: 0.1em !important;
	width: 4px !important;
	background: #E8520A !important;
	border-radius: 2px !important;
}

/* ── Grid ── */
section.sp-related .sp-related-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 1.25rem !important;
}

/* ── Card ── */
section.sp-related .sp-related-card {
	display: flex !important;
	flex-direction: column !important;
	background: #2A2A2A !important;
	border-radius: 14px !important;
	overflow: hidden !important;
	border: 1px solid rgba(255,255,255,0.06) !important;
	transition: transform 0.2s, border-color 0.2s !important;
	visibility: visible !important;
	opacity: 1 !important;
}
section.sp-related .sp-related-card:hover {
	transform: translateY(-3px) !important;
	border-color: #E8520A !important;
}

/* ── Thumb area ── */
section.sp-related .sp-related-card__thumb-link {
	display: block !important;
	text-decoration: none !important;
}
section.sp-related .sp-related-card__thumb {
	display: block !important;
	width: 100% !important;
	aspect-ratio: 16/9 !important;
	overflow: hidden !important;
	min-height: 160px !important;
}
section.sp-related .sp-related-card__thumb img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
	transition: transform 0.4s !important;
	filter: brightness(0.9) !important;
}
section.sp-related .sp-related-card:hover .sp-related-card__thumb img {
	transform: scale(1.05) !important;
}

/* ── Card body ── */
section.sp-related .sp-related-card__body {
	padding: 1rem 1.1rem 1.25rem !important;
	flex: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.3rem !important;
}
section.sp-related .sp-related-card__title {
	font-size: 0.92rem !important;
	font-weight: 700 !important;
	margin: 0.4rem 0 0.4rem !important;
	line-height: 1.35 !important;
}
section.sp-related .sp-related-card__title a {
	color: #fff !important;
	text-decoration: none !important;
}
section.sp-related .sp-related-card__title a:hover {
	color: #E8520A !important;
}
section.sp-related .sp-related-card__date {
	font-size: 0.75rem !important;
	color: rgba(255,255,255,0.45) !important;
}
section.sp-related .blog-cat-badge {
	display: inline-block !important;
	font-size: 0.7rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	padding: 0.2em 0.6em !important;
	border-radius: 4px !important;
	background: #E8520A !important;
	color: #fff !important;
	text-decoration: none !important;
}

/* ── Responsive ── */
@media (max-width: 900px) {
	section.sp-related .sp-related-grid {
		grid-template-columns: 1fr 1fr !important;
	}
}
@media (max-width: 640px) {
	section.sp-related .sp-related-grid {
		grid-template-columns: 1fr !important;
	}
}

/* END PATCH v2.8 */

/* ==========================================================================
   PATCH v2.9 — Recipe Sidebar: "You Might Also Like" Mini-Cards
   Compact horizontal thumbnail + title + meta links for the recipe
   meta-panel sidebar (replaces oversized card.php template).
   ========================================================================== */

/* ── Mini-card link wrapper ── */
a.rr-mini-card {
	display: flex !important;
	align-items: center !important;
	gap: 0.75rem !important;
	padding: 0.6rem 0 !important;
	border-bottom: 1px solid #f5f5f3 !important;
	text-decoration: none !important;
	transition: background 0.15s !important;
}
a.rr-mini-card:last-child {
	border-bottom: none !important;
	padding-bottom: 0 !important;
}
a.rr-mini-card:hover {
	opacity: 0.85 !important;
}

/* ── Thumbnail square ── */
.rr-mini-card__thumb {
	flex-shrink: 0 !important;
	width: 64px !important;
	height: 64px !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	background: #f0ede8 !important;
}
.rr-mini-card__thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block !important;
}
.rr-mini-card__thumb-placeholder {
	width: 100% !important;
	height: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 1.5rem !important;
}

/* ── Text body ── */
.rr-mini-card__body {
	flex: 1 !important;
	min-width: 0 !important;
}
.rr-mini-card__title {
	font-size: 0.82rem !important;
	font-weight: 700 !important;
	color: #1a1a1a !important;
	line-height: 1.35 !important;
	margin: 0 0 0.3rem !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}
a.rr-mini-card:hover .rr-mini-card__title {
	color: #E8520A !important;
}
.rr-mini-card__meta {
	display: flex !important;
	align-items: center !important;
	gap: 0.4rem !important;
	flex-wrap: wrap !important;
}
.rr-mini-card__time {
	font-size: 0.72rem !important;
	color: #888 !important;
}
.rr-mini-card__diff {
	font-size: 0.68rem !important;
	font-weight: 700 !important;
	padding: 1px 6px !important;
	border-radius: 10px !important;
}
.rr-mini-card__diff.difficulty-easy   { background: #f0faf0 !important; color: #2d7a2d !important; }
.rr-mini-card__diff.difficulty-medium { background: #fffbf0 !important; color: #b45309 !important; }
.rr-mini-card__diff.difficulty-hard   { background: #fff0f0 !important; color: #c0392b !important; }

/* END PATCH v2.9 */

/* ==========================================================================
   PATCH v3.0 — Author Box: Larger avatar + "Written by" label
   ========================================================================== */

/* ── Author box layout ── */
.sp-author-box {
	display: flex !important;
	align-items: center !important;
	gap: 1.5rem !important;
	background: #fff !important;
	border-radius: 16px !important;
	padding: 1.75rem !important;
	border: 1.5px solid #EDE8E0 !important;
	margin-bottom: 1.5rem !important;
	box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}

/* ── Avatar wrapper — adds the orange ring ── */
.sp-author-box__avatar {
	flex-shrink: 0 !important;
	position: relative !important;
}
.sp-author-box__avatar::before {
	content: '' !important;
	position: absolute !important;
	inset: -4px !important;
	border-radius: 50% !important;
	background: linear-gradient(135deg, #E8520A 0%, #F5892A 100%) !important;
	z-index: 0 !important;
}
.sp-author-box__avatar a {
	display: block !important;
	position: relative !important;
	z-index: 1 !important;
	border-radius: 50% !important;
	overflow: hidden !important;
	line-height: 0 !important;
}

/* ── Avatar image ── */
.sp-author-box__img {
	display: block !important;
	width: 96px !important;
	height: 96px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	object-position: center top !important;
	border: 3px solid #fff !important;
	position: relative !important;
	z-index: 1 !important;
	flex-shrink: 0 !important;
}

/* ── Text content ── */
.sp-author-box__content {
	flex: 1 !important;
	min-width: 0 !important;
}

/* "Written by" label */
.sp-author-box__label {
	font-size: 0.7rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	color: #E8520A !important;
	margin: 0 0 0.2rem !important;
}

/* Author name */
.sp-author-box__name {
	font-size: 1.05rem !important;
	font-weight: 800 !important;
	margin: 0 0 0.4rem !important;
	line-height: 1.2 !important;
}
.sp-author-box__name a {
	color: #1A1A1A !important;
	text-decoration: none !important;
}
.sp-author-box__name a:hover {
	color: #E8520A !important;
}

/* Bio text */
.sp-author-box__bio {
	font-size: 0.875rem !important;
	color: #5A5A5A !important;
	line-height: 1.6 !important;
	margin: 0 0 0.65rem !important;
}

/* More posts link */
.sp-author-box__more-link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.25rem !important;
	font-size: 0.8rem !important;
	font-weight: 700 !important;
	color: #E8520A !important;
	text-decoration: none !important;
	transition: gap 0.2s !important;
}
.sp-author-box__more-link:hover {
	text-decoration: underline !important;
	gap: 0.4rem !important;
}

/* ── Mobile: stack vertically ── */
@media (max-width: 640px) {
	.sp-author-box {
		flex-direction: column !important;
		align-items: flex-start !important;
	}
}

/* END PATCH v3.0 */