/**
 * I.M. Baits & Tackle - theme styles that theme.json cannot express.
 *
 * Loaded on the front end and in the editor (see functions.php).
 * Tokens come from theme.json as --wp--preset--* / --wp--custom--* variables;
 * the short aliases below keep this file readable.
 *
 * Contents
 *  1. Aliases and base
 *  2. Accessibility (focus, reduced motion, forced colours)
 *  3. Block style variations (.is-style-*)
 *  4. Header (announcement, sticky bar, brand, navigation, tools)
 *  5. Sections and front page patterns
 *  6. Footer
 *  7. Posts, pages, 404
 */

/* --------------------------------------------------------------------------
 * 1. Aliases and base
 * ----------------------------------------------------------------------- */

:root {
	--im-bg: var(--wp--preset--color--bg);
	--im-bg-deep: var(--wp--preset--color--bg-deep);
	--im-surface: var(--wp--preset--color--surface);
	--im-surface-2: var(--wp--preset--color--surface-2);
	--im-line: var(--wp--preset--color--line);
	--im-line-strong: var(--wp--preset--color--line-strong);
	--im-cream: var(--wp--preset--color--cream);
	--im-paper: var(--wp--preset--color--paper);
	--im-muted: var(--wp--preset--color--muted);
	--im-peach: var(--wp--preset--color--peach);
	--im-coral: var(--wp--preset--color--coral);
	--im-ember: var(--wp--preset--color--ember);
	--im-ember-deep: var(--wp--preset--color--ember-deep);
	--im-radius: var(--wp--custom--radius--card, 18px);
	--im-radius-field: var(--wp--custom--radius--field, 12px);
	--im-ease: var(--wp--custom--transition, 0.18s ease);
	--im-announce-h: var(--wp--custom--announce-height, 2.3125rem);

	/* Native controls, scrollbars and autofill render dark to match. */
	color-scheme: dark;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	background: var(--im-peach);
	color: var(--im-bg-deep);
}

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

/* Low-specificity form defaults; WooCommerce overrides live in woocommerce.css. */
:where(
	input[type="text"],
	input[type="email"],
	input[type="search"],
	input[type="tel"],
	input[type="number"],
	input[type="password"],
	input[type="url"],
	input[type="date"],
	select,
	textarea
) {
	background-color: var(--im-bg-deep);
	color: var(--im-cream);
	border: 1px solid var(--im-line-strong);
	border-radius: var(--im-radius-field);
	padding: 0.65em 0.9em;
	font: inherit;
	line-height: 1.4;
}

:where(input, select, textarea)::placeholder {
	color: var(--im-muted);
	opacity: 1;
}

/* Button hover lift (concept: .btn:hover translateY(-2px)). */
.wp-element-button,
.wp-block-button__link {
	transition: transform var(--im-ease), background var(--im-ease), color var(--im-ease), border-color var(--im-ease);
}

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	transform: translateY(-2px);
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	background-image: none;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--im-peach);
	color: var(--im-peach);
}

/* Arrow after a button label: add the class "im-btn-arrow" to a Button block. */
.im-btn-arrow .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
}

.im-btn-arrow .wp-block-button__link::after {
	content: "";
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: url("../icons/arrow-right.svg") center / contain no-repeat;
	mask: url("../icons/arrow-right.svg") center / contain no-repeat;
}

/* --------------------------------------------------------------------------
 * 2. Accessibility
 * ----------------------------------------------------------------------- */

/* One clear focus ring everywhere (peach on the dark background = 8.8:1). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--im-peach);
	outline-offset: 3px;
}

:where(input, select, textarea):focus-visible {
	outline-offset: 1px;
	border-color: var(--im-peach);
}

.skip-link.screen-reader-text:focus {
	background: var(--im-paper);
	color: var(--im-bg-deep);
	border-radius: 999px;
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.wp-block-button__link:hover,
	.wp-block-button__link:focus-visible,
	.im-cat-tile:hover,
	.im-cat-tile:focus-within,
	.im-lift:hover,
	.im-lift:focus-within {
		transform: none !important;
	}
}

/* Windows High Contrast / forced colours: drop decorative clipping. */
@media (forced-colors: active) {
	.is-style-gradient-text,
	.is-style-gradient-text a {
		background: none !important;
		-webkit-text-fill-color: currentColor !important;
		color: CanvasText !important;
	}

	.is-style-badge-mask img {
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* --------------------------------------------------------------------------
 * 3. Block style variations
 * ----------------------------------------------------------------------- */

/* Peach to coral gradient text (headings, site title, paragraphs). */
.is-style-gradient-text,
.is-style-gradient-text a {
	background-image: var(--wp--preset--gradient--peach-coral-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-decoration: none;
}

/* Small serif kicker above section headings. */
.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.05rem;
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: var(--im-peach);
}

/* Cards */
.wp-block-group.is-style-card {
	background-color: var(--im-surface);
	border: 1px solid var(--im-line);
	border-radius: var(--im-radius);
	padding: 1.5rem;
}

.wp-block-group.is-style-card-outline {
	border: 1px solid var(--im-line);
	border-radius: var(--im-radius);
	padding: 1.5rem;
}

/* Koi scale texture (concept .scales). */
.wp-block-group.is-style-scales {
	background-color: var(--im-bg-deep);
	background-image: radial-gradient(circle at 50% 100%, transparent 13px, rgba(252, 198, 138, 0.07) 14px, transparent 15.5px);
	background-size: 30px 15px;
}

/* Soft circular fade for the badge artwork (concept .hero-art img). */
.wp-block-image.is-style-badge-mask img {
	width: 100%;
	height: auto;
	-webkit-mask-image: radial-gradient(closest-side, #000 88%, transparent);
	mask-image: radial-gradient(closest-side, #000 88%, transparent);
}

/* Koi emblem inside a peach/ember/bronze ring (concept .story-mark). */
.wp-block-image.is-style-koi-ring {
	width: min(100%, 380px);
	aspect-ratio: 1;
	margin-inline: auto;
	padding: 18px;
	border-radius: 50%;
	background: var(--wp--preset--gradient--koi-ring);
}

.wp-block-image.is-style-koi-ring img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 50%;
	border: 10px solid var(--im-bg-deep);
	background-color: var(--im-bg-deep);
}

/* List with peach ticks (concept .proof). */
.wp-block-list.is-style-checks {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem 1.75rem;
	color: var(--im-muted);
	font-size: 0.9rem;
}

.wp-block-list.is-style-checks li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.wp-block-list.is-style-checks li::before {
	content: "";
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background-color: var(--im-peach);
	-webkit-mask: url("../icons/check.svg") center / contain no-repeat;
	mask: url("../icons/check.svg") center / contain no-repeat;
}

/* Generic hover lift: add the class "im-lift" to any block. */
.im-lift {
	transition: transform var(--im-ease), border-color var(--im-ease), background-color var(--im-ease), box-shadow var(--im-ease);
}

.im-lift:hover,
.im-lift:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--lift);
}

/* --------------------------------------------------------------------------
 * 4. Header
 * ----------------------------------------------------------------------- */

/*
 * The whole header part is sticky, offset by the announcement bar's height,
 * so the bar scrolls away and the main bar stays pinned (as in the concept).
 * No backdrop-filter: it would trap the mobile navigation overlay.
 */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--im-announce-h));
	z-index: 50;
}

@media (max-width: 600px) {
	/* The admin bar is not fixed on small screens. */
	.wp-site-blocks > header.wp-block-template-part {
		top: calc(0px - var(--im-announce-h));
	}
}

/* Announcement bar: a fixed height so the sticky offset above is exact. */
.im-announce {
	height: var(--im-announce-h);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding-top: 0;
	padding-bottom: 0;
}

.im-announce p {
	margin: 0 !important;
	font-weight: 500;
	line-height: 1.5;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.im-announce__extra {
	opacity: 0.9;
}

@media (max-width: 640px) {
	.im-announce__extra {
		display: none;
	}
}

.im-site-header {
	background-color: rgba(45, 46, 41, 0.97);
	border-bottom: 1px solid var(--im-line);
}

.im-site-header__inner {
	min-height: var(--wp--custom--header-height, 4.75rem);
	gap: 1.75rem;
}

/* Brand: koi mark + gradient wordmark, one link (site title stretched over both). */
.im-brand {
	position: relative;
	flex-shrink: 0;
	gap: 0.75rem;
}

.im-brand .wp-block-image,
.im-brand figure {
	margin: 0;
}

.im-brand img {
	width: 48px;
	height: 48px;
	display: block;
}

.im-brand .wp-block-site-title {
	margin: 0;
	white-space: nowrap;
}

.im-brand .wp-block-site-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Main navigation */
.im-main-nav {
	margin-left: 0.75rem;
}

.im-main-nav .wp-block-navigation-item__content {
	transition: color var(--im-ease);
}

.im-main-nav .current-menu-item > .wp-block-navigation-item__content,
.im-main-nav .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--im-cream);
}

/* Desktop drop-downs: dark panel instead of core's white one. */
.im-main-nav .wp-block-navigation__submenu-container {
	background-color: var(--im-surface) !important;
	color: var(--im-cream) !important;
	border: 1px solid var(--im-line) !important;
	border-radius: 12px;
	padding: 0.5rem 0;
	min-width: 230px !important;
	box-shadow: var(--wp--preset--shadow--lift);
}

.im-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.55rem 1.1rem;
}

/* Links only shown inside the mobile overlay (e.g. "My account"). */
.im-main-nav .im-nav-mobile-only {
	display: none;
}

.im-main-nav .wp-block-navigation__responsive-container.is-menu-open .im-nav-mobile-only {
	display: flex;
}

/* Mobile overlay */
.im-main-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem;
}

.im-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 3rem;
	gap: 0.25rem;
}

.im-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.15rem;
	padding: 0.6rem 0;
	color: var(--im-cream);
}

.im-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none;
	padding: 0 0 0 1rem;
}

.im-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--im-muted);
	font-size: 1rem;
}

.im-main-nav .wp-block-navigation__responsive-container-open,
.im-main-nav .wp-block-navigation__responsive-container-close {
	/* No "display" here: core decides when these buttons show. */
	width: 42px;
	height: 42px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--im-cream);
}

.im-main-nav .wp-block-navigation__responsive-container-close {
	top: 1rem;
	right: 1rem;
}

.im-main-nav .wp-block-navigation__responsive-container-open:hover {
	background-color: var(--im-surface);
}

/* Header tools: search, account, basket. Icon buttons 42px round (concept .icon-btn). */
.im-header-tools {
	margin-left: auto;
	gap: 0.375rem;
	flex-shrink: 0;
}

.im-header-tools .wp-block-search__button,
.im-header-tools .wc-block-mini-cart__button,
.im-header-tools .wp-block-woocommerce-customer-account a {
	width: 42px;
	height: 42px;
	min-width: 42px;
	padding: 0;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 0;
	background: none;
	background-image: none;
	color: var(--im-cream);
	transform: none;
	transition: background-color var(--im-ease);
}

.im-header-tools .wp-block-search__button:hover,
.im-header-tools .wc-block-mini-cart__button:hover,
.im-header-tools .wp-block-woocommerce-customer-account a:hover {
	background-color: var(--im-surface);
	color: var(--im-cream);
}

.im-header-tools .wp-block-search__button svg,
.im-header-tools .wc-block-mini-cart__icon,
.im-header-tools .wp-block-woocommerce-customer-account svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

/* Header search: expands from the icon (core button-only search). */
.im-header-search {
	margin: 0;
}

.im-header-search .wp-block-search__inside-wrapper {
	border: 0;
	padding: 0;
	background: none;
	gap: 0.25rem;
}

.im-header-search .wp-block-search__input {
	background-color: var(--im-bg-deep);
	border: 1px solid var(--im-line-strong);
	border-radius: 999px;
	color: var(--im-cream);
	padding: 0.5rem 1rem;
	min-width: min(60vw, 240px);
}

.im-header-search.wp-block-search__searchfield-hidden .wp-block-search__input {
	min-width: 0;
}

@media (max-width: 859.98px) {
	.im-site-header__inner {
		min-height: var(--wp--custom--header-height-mobile, 4.125rem);
		gap: 0.5rem;
	}

	.im-brand img {
		width: 40px;
		height: 40px;
	}

	.im-brand .wp-block-site-title {
		font-size: 1.1rem;
	}

	/* Menu button sits at the far right, after the basket (concept). */
	.im-main-nav {
		order: 10;
		margin-left: 0;
	}

	.im-header-tools .wp-block-woocommerce-customer-account {
		display: none;
	}

	/*
	 * Core collapses navigation at 600px; the concept collapses at 860px.
	 * Between the two, force the hamburger and hide the inline menu.
	 */
	.im-main-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.im-main-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

@media (max-width: 400px) {
	.im-brand .wp-block-site-title {
		font-size: 0.98rem;
	}

	.im-brand {
		gap: 0.5rem;
	}
}

/* --------------------------------------------------------------------------
 * 5. Sections and front page
 * ----------------------------------------------------------------------- */

/* Section heading row: eyebrow + h2 left, "more" link right. */
.im-sec-head {
	gap: 1.5rem;
}

.im-sec-head h2 {
	margin: 0.5rem 0 0;
}

.im-sec-head > .wp-block-group > * {
	margin-block: 0;
}

.im-link-more {
	margin: 0;
}

.im-link-more a {
	color: var(--im-peach);
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.im-link-more a::after {
	content: "\2192";
	content: "\2192" / "";
}

.im-link-more a:hover {
	color: var(--im-peach);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Hero */
.im-hero {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--im-line);
}

.im-hero h1 {
	margin-block: 0.875rem 1.375rem;
	line-height: 0.95;
}

.im-hero .im-lead {
	max-width: 30em;
	margin-block: 0 2rem;
}

.im-hero .wp-block-list.is-style-checks {
	margin-top: 2.5rem;
}

.im-hero__art .wp-block-image {
	margin: 0 auto;
	max-width: 560px;
}

.im-hero__art img {
	aspect-ratio: 1280 / 1024;
}

@media (max-width: 781px) {
	/* Badge first on mobile (concept .hero-art { order: -1 }). */
	.im-hero__art {
		order: -1;
	}

	.im-hero__art .wp-block-image {
		max-width: 360px;
	}
}

/* Shop by category */
.wp-block-group.im-cat-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 1rem;
}

@media (max-width: 1080px) {
	.wp-block-group.im-cat-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.wp-block-group.im-cat-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
	}
}

.im-cat-tile {
	position: relative;
	text-align: center;
	background-color: var(--im-surface);
	border: 1px solid var(--im-line);
	border-radius: var(--im-radius);
	padding: 1.625rem 1rem 1.375rem;
	transition: border-color 0.2s, transform 0.2s, background-color 0.2s;
}

.im-cat-tile > * {
	margin-block: 0;
}

.im-cat-tile:hover,
.im-cat-tile:focus-within {
	border-color: var(--im-peach);
	transform: translateY(-4px);
	background-color: var(--im-surface-2);
}

/* Ring the whole tile when its link has keyboard focus (falls back to the link's own ring). */
@supports selector(:has(a)) {
	.im-cat-tile:has(a:focus-visible) {
		outline: 2px solid var(--im-peach);
		outline-offset: 3px;
	}

	.im-cat-tile a:focus-visible {
		outline: none;
	}
}

.im-cat-tile .im-cat-tile__icon {
	width: 76px;
	height: 76px;
	margin: 0 auto 1rem;
	border-radius: 50%;
	background-color: var(--im-bg);
	display: grid;
	place-items: center;
}

.im-cat-tile .im-cat-tile__icon img {
	width: 44px;
	height: 44px;
}

.im-cat-tile .im-cat-tile__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	margin-bottom: 0.25rem;
}

.im-cat-tile .im-cat-tile__title a {
	color: var(--im-cream);
	text-decoration: none;
}

/* Whole tile is clickable; the heading link is the one accessible link. */
.im-cat-tile .im-cat-tile__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.im-cat-tile .im-cat-tile__desc {
	color: var(--im-muted);
	font-size: 0.82rem;
	line-height: 1.4;
}

/* Our story */
.im-story h2 {
	margin-block: 0.625rem 1.25rem;
}

.im-story p:not(.is-style-eyebrow) {
	color: var(--im-muted);
	font-size: 1.06rem;
}

.im-story .wp-block-quote {
	margin-top: 1.75rem;
	color: var(--im-cream);
}

.im-story .wp-block-quote p {
	color: var(--im-cream) !important;
	font-size: inherit !important;
	margin: 0;
}

@media (max-width: 781px) {
	.im-story .wp-block-image.is-style-koi-ring {
		width: min(100%, 280px);
	}
}

/* Promises */
.im-promise {
	gap: 1rem;
	height: 100%;
}

.im-promise .wp-block-image {
	margin: 0;
	flex-shrink: 0;
}

.im-promise .wp-block-image img {
	width: 30px;
	height: 30px;
}

.im-promise h3 {
	margin: 0 0 0.25rem;
	font-size: 1.02rem;
}

.im-promise p {
	margin: 0;
	color: var(--im-muted);
	font-size: 0.92rem;
}

.im-promise > .wp-block-group > * {
	margin-block: 0;
}

/* Newsletter */
.im-newsletter {
	position: relative;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--large, 28px);
	padding: 3.5rem;
}

.im-newsletter::after {
	content: "";
	position: absolute;
	right: -60px;
	top: -60px;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.07);
	pointer-events: none;
}

.im-newsletter h2 {
	color: var(--im-paper);
	font-size: clamp(1.9rem, 4vw, 2.6rem);
	margin: 0 0 0.625rem;
}

.im-newsletter p {
	margin: 0;
	color: var(--im-paper);
}

.im-newsletter-form {
	display: flex;
	gap: 0.625rem;
	position: relative;
	z-index: 1;
	margin: 0;
}

.im-newsletter-form input[type="email"] {
	flex: 1;
	min-width: 0;
	padding: 0.95rem 1.25rem;
	border-radius: 999px;
	border: 2px solid transparent;
	background-color: var(--im-paper);
	color: var(--im-bg-deep);
}

.im-newsletter-form input[type="email"]::placeholder {
	color: #6b6253;
}

.im-newsletter-form input[type="email"]:focus-visible {
	outline: 3px solid var(--im-peach);
	outline-offset: 2px;
	border-color: transparent;
}

.im-newsletter-form button {
	background-color: var(--im-bg-deep);
	color: var(--im-peach);
	border: 0;
	border-radius: 999px;
	padding: 0 1.5rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: transform var(--im-ease);
}

.im-newsletter-form button:hover {
	transform: translateY(-2px);
}

.im-newsletter-form button:focus-visible {
	outline: 3px solid var(--im-paper);
	outline-offset: 2px;
}

@media (max-width: 781px) {
	.im-newsletter {
		padding: 2.25rem 1.5rem;
	}
}

@media (max-width: 520px) {
	.im-newsletter-form {
		flex-direction: column;
	}

	.im-newsletter-form button {
		padding: 0.875rem;
	}
}

/* --------------------------------------------------------------------------
 * 6. Footer
 * ----------------------------------------------------------------------- */

.im-footer {
	border-top: 1px solid var(--im-line);
	color: var(--im-muted);
	font-size: 0.92rem;
}

.im-footer .im-brand {
	margin-bottom: 0.875rem;
}

.im-footer .im-brand img {
	width: 44px;
	height: 44px;
}

.im-footer .im-brand .wp-block-site-title {
	font-size: 1.2rem;
}

.im-footer .im-footer__about {
	max-width: 26em;
	margin: 0;
}

.im-footer .im-footer-heading {
	color: var(--im-cream);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
	margin: 0.375rem 0 1rem;
}

.im-footer .wp-block-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.625rem;
}

.im-footer .wp-block-list li {
	margin: 0;
}

.im-footer a {
	color: var(--im-muted);
	text-decoration: none;
}

.im-footer a:hover {
	color: var(--im-peach);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Social: round outlined buttons (concept .social a). */
.im-footer .wp-block-social-links {
	gap: 0.625rem;
	margin-top: 1.125rem;
}

.im-footer .wp-block-social-links .wp-social-link {
	width: 38px;
	height: 38px;
	border: 1px solid var(--im-line);
	border-radius: 50%;
	background: none !important;
	color: var(--im-muted) !important;
	transition: border-color var(--im-ease), color var(--im-ease);
}

.im-footer .wp-block-social-links .wp-social-link:hover,
.im-footer .wp-block-social-links .wp-social-link:focus-within {
	border-color: var(--im-peach);
	color: var(--im-peach) !important;
	transform: none;
}

.im-footer .wp-block-social-links .wp-social-link a {
	width: 100%;
	height: 100%;
	padding: 0;
	display: grid;
	place-items: center;
	color: inherit;
}

.im-footer .wp-block-social-links .wp-social-link svg {
	width: 18px;
	height: 18px;
}

/* Legal row and payment marks. */
.im-legal {
	border-top: 1px solid var(--im-line);
	margin-top: 3rem;
	padding-top: 1.375rem;
	font-size: 0.82rem;
}

.im-legal p {
	margin: 0;
}

.im-pay {
	gap: 0.5rem;
}

.im-pay .im-pay-mark {
	margin: 0;
	border: 1px solid var(--im-line);
	border-radius: 6px;
	padding: 0.125rem 0.5rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
 * 7. Posts, pages, 404
 * ----------------------------------------------------------------------- */

.im-post-card {
	height: 100%;
	overflow: hidden;
	padding: 0 !important;
}

.im-post-card .wp-block-post-featured-image {
	margin: 0;
}

.im-post-card .wp-block-post-featured-image img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 100%;
}

.im-post-card__body {
	padding: 1.125rem 1.125rem 1.25rem;
}

.im-post-card__body > * {
	margin-block: 0 0.5rem;
}

.wp-block-post-excerpt__excerpt,
.im-post-card .wp-block-post-excerpt {
	color: var(--im-muted);
}

.wp-block-query-pagination {
	gap: 0.5rem;
}

.wp-block-query-pagination a {
	text-decoration: none;
}

.wp-block-query-pagination-numbers .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.5rem;
	border-radius: 999px;
	border: 1px solid var(--im-line);
	color: var(--im-cream);
	text-decoration: none;
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--wp--preset--gradient--peach-coral);
	border-color: transparent;
	color: var(--im-bg-deep);
}

.wp-block-query-pagination-numbers a.page-numbers:hover {
	border-color: var(--im-peach);
	color: var(--im-peach);
}

.wp-block-post-navigation-link a {
	text-decoration: none;
	font-weight: 600;
}

.wp-block-search__input {
	border-color: var(--im-line-strong);
}

.wp-block-search .wp-block-search__inside-wrapper {
	gap: 0.5rem;
}

.im-404 .im-404__code {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(5rem, 18vw, 10rem);
	line-height: 0.9;
	margin: 0;
}

/* Comments */
.wp-block-comment-template li {
	border-top: 1px solid var(--im-line);
	padding-top: 1rem;
}

.wp-block-post-comments-form input:not([type="submit"]):not([type="checkbox"]),
.wp-block-post-comments-form textarea {
	background-color: var(--im-bg-deep);
	color: var(--im-cream);
	border: 1px solid var(--im-line-strong);
	border-radius: var(--im-radius-field);
}

/* ==========================================================================
   Content pages (Our story, Contact, Delivery, Returns, FAQs, legal)
   ========================================================================== */

/* Page hero band at the top of full-width pages */
.im-page-hero {
	border-bottom: 1px solid var(--im-line);
}
.im-page-hero h1 {
	margin-block: 0.5rem 1rem;
}
.im-page-hero .im-page-hero__lead {
	color: var(--im-muted);
	font-size: var(--wp--preset--font-size--large);
	max-width: 38em;
}

/* Value / contact cards */
.im-value-card h3,
.im-contact-card h3 {
	margin-block: 0.75rem 0.35rem;
}
.im-value-card p,
.im-contact-card p {
	color: var(--im-muted);
	margin: 0;
}
.im-contact-card a {
	color: var(--im-peach);
	font-weight: 600;
	word-break: break-word;
}
.im-value-card .im-value-card__num {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1;
	color: var(--im-peach);
}

/* Call-to-action band */
.im-cta {
	border-radius: 28px;
	position: relative;
	overflow: hidden;
}
.im-cta h2 {
	color: var(--im-paper);
	margin-top: 0;
}
.im-cta p {
	color: #ffe4cf;
}

/* FAQ accordion (core/details) */
.wp-block-details.im-faq {
	border: 1px solid var(--im-line);
	border-radius: var(--im-radius-field);
	background: var(--im-surface);
	padding: 0;
	margin-block: 0 0.75rem;
	transition: border-color var(--im-ease);
}
.wp-block-details.im-faq[open],
.wp-block-details.im-faq:hover {
	border-color: var(--im-line-strong);
}
.wp-block-details.im-faq summary {
	cursor: pointer;
	list-style: none;
	padding: 1rem 3rem 1rem 1.25rem;
	font-weight: 600;
	position: relative;
}
.wp-block-details.im-faq summary::-webkit-details-marker {
	display: none;
}
.wp-block-details.im-faq summary::after {
	content: "+";
	position: absolute;
	right: 1.25rem;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.4rem;
	color: var(--im-peach);
	transition: transform var(--im-ease);
}
.wp-block-details.im-faq[open] summary::after {
	transform: translateY(-50%) rotate(45deg);
}
.wp-block-details.im-faq summary:focus-visible {
	outline: 2px solid var(--im-peach);
	outline-offset: 2px;
	border-radius: var(--im-radius-field);
}
.wp-block-details.im-faq > :not(summary) {
	padding-inline: 1.25rem;
	color: var(--im-muted);
}
.wp-block-details.im-faq > :last-child {
	padding-bottom: 1rem;
	margin-bottom: 0;
}
.im-faq-group h2 {
	margin-block: 2.5rem 1rem;
	font-size: var(--wp--preset--font-size--x-large);
}

/* Draft notices on placeholder content (delete the block once confirmed) */
.im-draft-note {
	border: 1px dashed var(--im-ember);
	border-radius: var(--im-radius-field);
	padding: 0.75rem 1rem;
	color: var(--im-peach);
	font-size: var(--wp--preset--font-size--small);
	background: rgba(212, 98, 42, 0.08);
}

/* Tables on content pages */
.wp-block-table.im-table table {
	border-collapse: collapse;
	width: 100%;
}
.wp-block-table.im-table th,
.wp-block-table.im-table td {
	border: 0;
	border-bottom: 1px solid var(--im-line);
	padding: 0.85rem 0.75rem;
	text-align: left;
	vertical-align: top;
}
.wp-block-table.im-table thead th {
	color: var(--im-peach);
	font-weight: 600;
	border-bottom-color: var(--im-line-strong);
}
.wp-block-table.im-table td:last-child {
	white-space: nowrap;
}

/* Long-form legal text */
.im-legal-doc h2 {
	font-size: var(--wp--preset--font-size--x-large);
	margin-top: 2.5rem;
}
.im-legal-doc p,
.im-legal-doc li {
	color: var(--im-muted);
}
