/*
 * Steak.nl — design system
 *
 * Built to the "Steak.nl Shop v2" handoff. Three rules govern everything here:
 *   1. border-radius: 0, box-shadow: none, no gradients (hero overlay excepted).
 *   2. No icons. The "+" is a typographic plus; separators are hairlines.
 *   3. Anton for display and numerals only, never for paragraphs.
 *
 * Layout is fluid: type uses clamp(), and multi-column sections use
 * auto-fit/minmax so they collapse on their own. There is exactly ONE
 * media-query breakpoint in this file — the mobile burger menu at the end of
 * section 7 — because a six-item nav cannot collapse itself.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	--ink: #191510;
	--paper: #F3EDE0;
	--paper-dark: #EAE2CE;
	--input: #FBF7EC;
	--muted: #6E6353;
	--muted-2: #5A5142;
	--body: #3A332A;
	--hairline-soft: #C9BCA0;
	--tan: #B4A88E;
	--accent: #2F4A33;

	/* Text on the ink surface, as used by the footer and summary panels. */
	--on-ink: rgba(243, 237, 224, 0.7);
	--on-ink-strong: rgba(243, 237, 224, 0.75);
	--on-ink-faint: rgba(243, 237, 224, 0.55);
	--on-ink-hairline: rgba(243, 237, 224, 0.25);
	--on-ink-rule: rgba(243, 237, 224, 0.15);
	--on-ink-dim: rgba(243, 237, 224, 0.4);

	--container: 1280px;
	--container-narrow: 1140px;   /* cart + checkout */
	--gutter: 24px;

	--section-y: clamp(48px, 6vw, 72px);
	--section-y-lg: clamp(56px, 7vw, 88px);

	--font-display: 'Anton', 'Arial Narrow', sans-serif;
	--font-body: 'Karla', system-ui, -apple-system, sans-serif;
	--font-serif: 'Source Serif 4', Georgia, serif;

	/* Minimum comfortable touch target; every control below meets it. */
	--tap: 44px;
}

/* ==========================================================================
   2. Reset and base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* The design is fluid down to 320px; this guarantees no page-level scroll. */
	overflow-x: hidden;
}

/* Nothing in this design is rounded or raised. Stated once, globally, so
   third-party markup (WooCommerce, blocks, plugins) inherits the rule. */
input,
select,
textarea,
button,
img,
fieldset,
table,
.wp-block-button__link {
	border-radius: 0;
	box-shadow: none;
}

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

a {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

button {
	font-family: var(--font-body);
	border-radius: 0;
}

::selection {
	background: var(--ink);
	color: var(--paper);
}

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

h1, h2, h3, h4 {
	font-weight: 400;
	margin: 0;
}

p {
	margin: 0 0 1em;
}

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */

.sn-wrap {
	max-width: var(--container);
	margin: 0 auto;
	padding-inline: var(--gutter);
	width: 100%;
}

.sn-wrap--narrow {
	max-width: var(--container-narrow);
}

.sn-section {
	padding-block: var(--section-y);
}

.sn-section--lg {
	padding-block: var(--section-y-lg);
}

.sn-rule {
	border-top: 1px solid var(--ink);
}

/* Wide content (tables, code in posts) scrolls inside itself rather than
   pushing the page sideways. */
.sn-scroll-x {
	overflow-x: auto;
	max-width: 100%;
}

/* ==========================================================================
   4. Typography
   ========================================================================== */

.sn-display {
	font-family: var(--font-display);
	font-weight: 400;
	text-transform: uppercase;
	line-height: 1.05;
	letter-spacing: 0.005em;
}

.sn-h1-hero {
	font-family: var(--font-display);
	font-weight: 400;
	text-transform: uppercase;
	font-size: clamp(52px, 9.2vw, 118px);
	line-height: 0.94;
	letter-spacing: 0.005em;
	margin: 0;
}

/* Second hero line: transparent fill with a paper stroke. */
.sn-hero-outline {
	color: transparent;
	-webkit-text-stroke: 2px var(--paper);
}

.sn-h1 {
	font-family: var(--font-display);
	font-weight: 400;
	text-transform: uppercase;
	font-size: clamp(48px, 7vw, 84px);
	line-height: 1;
	margin: 0;
}

.sn-h2 {
	font-family: var(--font-display);
	font-weight: 400;
	text-transform: uppercase;
	font-size: clamp(34px, 4.5vw, 52px);
	line-height: 1;
	margin: 0;
}

.sn-h3 {
	font-family: var(--font-display);
	font-weight: 400;
	text-transform: uppercase;
	font-size: clamp(28px, 3.4vw, 36px);
	line-height: 1.05;
	margin: 0;
}

/* Uppercase micro-label: nav, buttons, badges, breadcrumbs, footer headings.
   Never applied to body copy. */
.sn-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.2;
}

.sn-label--sm {
	font-size: 11px;
	letter-spacing: 0.18em;
}

.sn-label--xs {
	font-size: 10px;
	letter-spacing: 0.22em;
	font-weight: 700;
	text-transform: uppercase;
}

.sn-quote {
	font-family: var(--font-serif);
	font-style: italic;
	line-height: 1.55;
}

.sn-num {
	font-family: var(--font-display);
	font-weight: 400;
}

.sn-muted {
	color: var(--muted);
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

/* Base: square, uppercase, letterspaced, no radius, no transition.
   Hover states invert rather than fade — the design has no animation. */
.sn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 17px 34px;
	min-height: var(--tap);
	border: none;
	cursor: pointer;
	text-align: center;
}

/* Solid ink → accent on hover. */
.sn-btn--ink {
	background: var(--ink);
	color: var(--paper);
}

.sn-btn--ink:hover {
	background: var(--accent);
	color: var(--paper);
}

/* Paper on an ink surface → accent on hover. */
.sn-btn--paper {
	background: var(--paper);
	color: var(--ink);
}

.sn-btn--paper:hover {
	background: var(--accent);
	color: var(--paper);
}

/* Outlined → fills ink on hover. Used by the header cart button. */
.sn-btn--outline {
	background: transparent;
	border: 1px solid var(--ink);
	color: var(--ink);
	padding: 10px 18px;
	font-size: 12px;
}

.sn-btn--outline:hover {
	background: var(--ink);
	color: var(--paper);
}

.sn-btn--block {
	display: flex;
	width: 100%;
}

.sn-btn--lg {
	padding: 20px 42px;
	font-size: 13px;
	letter-spacing: 0.16em;
}

/* Underlined text link in label style ("Alles bekijken", "Verwijderen"). */
.sn-textlink {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink);
	border-bottom: 2px solid var(--ink);
	padding-bottom: 3px;
	text-decoration: none;
	line-height: 1.2;
}

.sn-textlink:hover {
	color: var(--accent);
	border-color: var(--accent);
}

/* The square "+" that adds a product from a ledger row. Typographic, not an icon. */
.sn-plus {
	width: 52px;
	height: 52px;
	min-height: var(--tap);
	border: 1px solid var(--ink);
	background: transparent;
	color: var(--ink);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.sn-plus:hover {
	background: var(--ink);
	color: var(--paper);
}

.sn-plus--sm {
	width: 44px;
	height: 44px;
	font-size: 18px;
}

.sn-plus.is-loading {
	opacity: 0.45;
	pointer-events: none;
}

/* ==========================================================================
   6. Quantity stepper
   ========================================================================== */

.sn-qty {
	display: inline-flex;
	flex-shrink: 0;
}

.sn-qty__btn {
	width: 52px;
	height: 56px;
	min-width: var(--tap);
	min-height: var(--tap);
	border: 1px solid var(--ink);
	background: transparent;
	color: var(--ink);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.sn-qty__btn:hover {
	background: var(--ink);
	color: var(--paper);
}

.sn-qty__input {
	width: 52px;
	border: 1px solid var(--ink);
	border-inline: none;
	background: transparent;
	font-family: var(--font-display);
	font-size: 18px;
	text-align: center;
	color: var(--ink);
	padding: 0;
	-moz-appearance: textfield;
	appearance: textfield;
}

.sn-qty__input::-webkit-outer-spin-button,
.sn-qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Compact variant used in cart lines. */
.sn-qty--sm .sn-qty__btn {
	width: 38px;
	height: 38px;
	min-width: 38px;
	min-height: 38px;
	font-size: 16px;
}

.sn-qty--sm .sn-qty__input {
	width: 42px;
	font-size: 15px;
}

/* ==========================================================================
   7. Promo bar + header
   ========================================================================== */

.sn-promo {
	background: var(--accent);
	color: var(--paper);
	text-align: center;
	padding: 8px 16px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.sn-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--paper);
	border-bottom: 1px solid var(--ink);
}

.sn-header__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: 10px var(--gutter);
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

.sn-logo {
	display: flex;
	align-items: baseline;
	gap: 12px;
	text-decoration: none;
	color: var(--ink);
}

.sn-logo:hover {
	color: var(--ink);
}

.sn-logo__mark {
	font-family: var(--font-display);
	font-size: 22px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	line-height: 1;
}

.sn-logo__eyebrow {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--accent);
}

/*
 * Nav wrapper. `display: contents` removes this box entirely on desktop, so
 * the <ul> below is still a direct flex child of .sn-header__inner and the
 * desktop row is unchanged. The mobile breakpoint turns it into a real box.
 */
.sn-header__nav {
	display: contents;
}

/* The burger exists only under the mobile breakpoint. */
.sn-burger {
	display: none;
}

/* Nav scrolls horizontally when cramped rather than wrapping into the logo. */
.sn-nav {
	display: flex;
	gap: 22px;
	flex: 1;
	min-width: 200px;
	overflow-x: auto;
	scrollbar-width: none;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sn-nav::-webkit-scrollbar {
	display: none;
}

.sn-nav li a {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	text-decoration: none;
	padding: 4px 0;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}

.sn-nav li a:hover {
	color: var(--ink);
}

/* Active item takes a 2px ink underline. */
.sn-nav li.current-menu-item > a,
.sn-nav li.current_page_item > a,
.sn-nav li.current-menu-ancestor > a,
.sn-nav li.sn-nav-active > a {
	color: var(--ink);
	border-bottom-color: var(--ink);
}

.sn-header__cart {
	margin-left: auto;
	white-space: nowrap;
}

/*
 * Neutralise wp-content/mu-plugins/shop-button.php.
 *
 * That must-use plugin echoes inline CSS into wp_head on every request,
 * painting menu item 303 as a red, 6px-rounded pill with !important on every
 * declaration. It was added for the Kadence site; here it is the only rounded,
 * off-palette element on the page.
 *
 * It cannot be dequeued (it is an anonymous closure on wp_head), so it is
 * overridden by out-specifying it: `.sn-header .sn-nav li#menu-item-303 > a`
 * carries an id plus two classes and beats its bare `#menu-item-303 > a`.
 * Scoped to .sn-header so the Kadence site keeps its red button until the
 * new theme goes live — at which point that mu-plugin should be deleted.
 */
.sn-header .sn-nav li#menu-item-303 > a,
.sn-header .sn-nav li.menu-item-303 > a {
	background-color: transparent !important;
	color: var(--muted) !important;
	padding: 4px 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
	font-weight: 700 !important;
	font-size: 12px !important;
	letter-spacing: 0.14em !important;
	text-align: left !important;
	width: auto !important;
	display: block !important;
}

.sn-header .sn-nav li#menu-item-303 > a:hover,
.sn-header .sn-nav li.menu-item-303 > a:hover,
.sn-header .sn-nav li#menu-item-303.current-menu-item > a,
.sn-header .sn-nav li.menu-item-303.current-menu-item > a {
	background-color: transparent !important;
	color: var(--ink) !important;
}

/* --------------------------------------------------------------------------
   Tap targets
   --------------------------------------------------------------------------
   Three controls are smaller than 44px because the design draws them that way:
   nav links (4px padding on 12px type ≈ 29px), the cart line stepper (38px),
   and the "Verwijderen" text button (13px). The handoff asks for both the
   exact metrics AND ≥44px touch targets, so the visual box is left alone and
   only the HIT AREA is grown with a transparent pseudo-element. Nothing moves;
   the underline still hugs the nav text.
   -------------------------------------------------------------------------- */

.sn-nav li a,
.sn-qty--sm .sn-qty__btn,
.sn-remove {
	position: relative;
}

.sn-nav li a::after,
.sn-qty--sm .sn-qty__btn::after,
.sn-remove::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 44px;
	transform: translateY(-50%);
}

/* --------------------------------------------------------------------------
   Mobile header: burger menu
   --------------------------------------------------------------------------
   The only breakpoint in this stylesheet, and it earns its place: the live
   menu has six items, which cannot share a 390px row with the logo and the
   cart button. Below 860px the nav leaves the header row and becomes a
   full-width drop panel toggled by the burger; the logo and the cart button
   stay visible, because the cart is the site's primary action.

   This block sits AFTER the menu-item-303 mu-plugin override above on
   purpose. A media query adds no specificity, so the mobile padding below
   only beats that block's `!important` by being later in the file with the
   same selector. Keep it last.
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {

	/* The row is now three fixed things; nothing wraps. */
	.sn-header__inner {
		flex-wrap: nowrap;
		gap: 12px;
	}

	.sn-logo {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		min-width: 0;
	}

	.sn-logo__mark {
		font-size: 20px;
	}

	.sn-header__cart {
		margin-left: auto;
		padding-left: 14px;
		padding-right: 14px;
	}

	/* Three ink rules, in keeping with "no icons, separators are hairlines". */
	.sn-js .sn-burger {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		flex: none;
		width: var(--tap);
		height: var(--tap);
		margin-right: calc(var(--gutter) * -0.5);
		padding: 0;
		background: none;
		border: 0;
		cursor: pointer;
	}

	.sn-burger__bar {
		display: block;
		width: 22px;
		height: 2px;
		margin: 0 auto;
		background: var(--ink);
	}

	/* Open state draws a cross. Instant, like everything else here. */
	.sn-js .sn-header.is-nav-open .sn-burger__bar:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.sn-js .sn-header.is-nav-open .sn-burger__bar:nth-child(2) {
		opacity: 0;
	}

	.sn-js .sn-header.is-nav-open .sn-burger__bar:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* The wrapper stops being `display: contents` and becomes the panel. */
	.sn-js .sn-header__nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--paper);
		border-bottom: 1px solid var(--ink);
		max-height: calc(100vh - 100%);
		overflow-y: auto;
	}

	.sn-js .sn-header.is-nav-open .sn-header__nav {
		display: block;
	}

	/* Stacked rows, separated by hairlines, full-width tap targets. */
	.sn-js .sn-header__nav .sn-nav {
		display: block;
		flex: none;
		min-width: 0;
		overflow: visible;
	}

	.sn-js .sn-header__nav .sn-nav li + li {
		border-top: 1px solid var(--hairline-soft);
	}

	.sn-js .sn-header__nav .sn-nav li a {
		padding: 15px var(--gutter);
		font-size: 13px;
		border-bottom: 0;
		border-left: 2px solid transparent;
	}

	/* The active item keeps its 2px ink mark, moved to the leading edge. */
	.sn-js .sn-header__nav .sn-nav li.current-menu-item > a,
	.sn-js .sn-header__nav .sn-nav li.current_page_item > a,
	.sn-js .sn-header__nav .sn-nav li.current-menu-ancestor > a,
	.sn-js .sn-header__nav .sn-nav li.sn-nav-active > a {
		border-left-color: var(--ink);
	}

	/* The row is already ≥44px tall, so the desktop hit-area shim would only
	   overhang into its neighbours. */
	.sn-js .sn-header__nav .sn-nav li a::after {
		content: none;
	}

	/* Re-assert the mobile row padding over the mu-plugin override. */
	.sn-js .sn-header .sn-nav li#menu-item-303 > a,
	.sn-js .sn-header .sn-nav li.menu-item-303 > a {
		padding: 15px var(--gutter) !important;
		font-size: 13px !important;
	}
}

/* ==========================================================================
   8. Footer
   ========================================================================== */

.sn-footer {
	background: var(--ink);
	color: var(--on-ink);
	margin-top: auto;
}

.sn-footer a {
	color: var(--on-ink);
	text-decoration: none;
}

.sn-footer a:hover {
	color: var(--paper);
}

.sn-footer__cols {
	max-width: var(--container);
	margin: 0 auto;
	padding: clamp(44px, 6vw, 64px) var(--gutter) 40px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 40px;
}

.sn-footer__brand {
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: 26px;
	color: var(--paper);
	margin-bottom: 14px;
	line-height: 1;
}

.sn-footer__blurb {
	font-size: 13.5px;
	line-height: 1.7;
	margin: 0;
	max-width: 280px;
}

.sn-footer__heading {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tan);
	margin-bottom: 6px;
}

.sn-footer__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 13.5px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sn-footer__bar {
	border-top: 1px solid var(--on-ink-rule);
}

.sn-footer__bar-inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: 18px var(--gutter);
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--on-ink-dim);
	flex-wrap: wrap;
}

/* ==========================================================================
   9. Product ledger row — the most reused component in the design
   ========================================================================== */

.sn-ledger {
	border-top: 1px solid var(--ink);
}

.sn-row {
	display: flex;
	gap: clamp(14px, 2.5vw, 28px);
	align-items: center;
	border-bottom: 1px solid var(--ink);
	padding: 16px 0;
	flex-wrap: wrap;
}

.sn-row:hover {
	background: var(--paper-dark);
}

.sn-row__media {
	width: clamp(72px, 10vw, 112px);
	height: clamp(72px, 10vw, 112px);
	flex-shrink: 0;
	display: block;
}

.sn-row__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sn-row__body {
	flex: 1;
	min-width: 180px;
	text-decoration: none;
	color: var(--ink);
}

.sn-row__body:hover {
	color: var(--ink);
}

.sn-row__name {
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: clamp(20px, 2.6vw, 30px);
	line-height: 1.05;
}

.sn-row__meta {
	font-size: 13.5px;
	color: var(--muted);
	margin-top: 6px;
}

/* Price + "+" stay together and are pushed right; on a wrapped row they sit
   below the name rather than beside it. */
.sn-row__buy {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2vw, 28px);
	margin-left: auto;
}

.sn-row__price {
	font-family: var(--font-display);
	font-size: clamp(19px, 2.2vw, 26px);
	line-height: 1;
	white-space: nowrap;
}

/* Product with no photo: a flat paper-dark block, not WooCommerce's grey
   placeholder image (which would be the only off-palette element on the page). */
.sn-noimg {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--paper-dark);
	border: 1px solid var(--hairline-soft);
}

/* Outlined badge chip beside the product name on the shop archive. */
.sn-badge-chip {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	border: 1px solid var(--ink);
	padding: 4px 8px;
	white-space: nowrap;
	line-height: 1.2;
}

/* --- Shop archive variant: larger photo, name and badge on one line --- */
.sn-row--shop {
	padding: 18px 0;
}

.sn-row--shop .sn-row__media {
	width: clamp(84px, 12vw, 140px);
	height: clamp(76px, 10vw, 120px);
}

.sn-row--shop .sn-row__body {
	min-width: 200px;
}

.sn-row--shop .sn-row__title {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.sn-row--shop .sn-row__name {
	font-size: clamp(21px, 2.8vw, 32px);
}

.sn-row--shop .sn-row__meta {
	margin-top: 8px;
	max-width: 520px;
}

.sn-row--shop .sn-row__price {
	font-size: clamp(20px, 2.4vw, 28px);
}

/* --- Compact variant: "Ook lekker" on the PDP --- */
.sn-row--compact {
	gap: 20px;
	padding: 14px 0;
}

.sn-row--compact .sn-row__media {
	width: 72px;
	height: 72px;
}

.sn-row--compact .sn-row__body {
	min-width: 0;
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: 19px;
	line-height: 1.1;
}

.sn-row--compact .sn-row__price {
	font-size: 18px;
}

/* ==========================================================================
   10. Home
   ========================================================================== */

.sn-hero {
	position: relative;
	background: var(--ink);
	color: var(--paper);
	overflow: hidden;
	border-bottom: 1px solid var(--ink);
}

.sn-hero__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.4;
}

/* The one gradient the design allows: it keeps the H1 legible over the photo. */
.sn-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(25, 21, 16, 0.55), rgba(25, 21, 16, 0.88));
}

.sn-hero__inner {
	position: relative;
	max-width: var(--container);
	margin: 0 auto;
	padding: clamp(56px, 9vw, 96px) var(--gutter) clamp(48px, 7vw, 72px);
}

.sn-hero__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-top: 44px;
	flex-wrap: wrap;
}

.sn-hero__sub {
	font-size: 17px;
	line-height: 1.6;
	color: var(--on-ink-strong);
	max-width: 420px;
	margin: 0;
}

/* Service line: hairline strip of uppercase promises separated by tan slashes. */
.sn-service {
	border-bottom: 1px solid var(--ink);
}

.sn-service__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: 13px var(--gutter);
	display: flex;
	gap: 14px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	flex-wrap: wrap;
}

.sn-service__sep {
	color: var(--tan);
}

.sn-sectionhead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
	flex-wrap: wrap;
}

/* --- Bundle cards --- */
.sn-bundles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
	gap: 32px;
}

.sn-bundle {
	border: 1px solid var(--ink);
	display: flex;
	flex-direction: column;
}

.sn-bundle__media {
	position: relative;
	display: block;
}

.sn-bundle__media img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	border-bottom: 1px solid var(--ink);
}

/* Solid ink badge, flush to the top-left corner of the photo. */
.sn-badge {
	position: absolute;
	top: 0;
	left: 0;
	background: var(--ink);
	color: var(--paper);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 8px 14px;
	line-height: 1.2;
}

.sn-bundle__body {
	padding: 24px 26px 26px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.sn-bundle__name {
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: clamp(24px, 3vw, 32px);
	line-height: 1.05;
	text-decoration: none;
	color: var(--ink);
}

.sn-bundle__blurb {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 16px;
	color: var(--muted);
	line-height: 1.55;
}

.sn-bundle__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: auto;
	padding-top: 16px;
	flex-wrap: wrap;
}

.sn-bundle__price {
	font-family: var(--font-display);
	font-size: 26px;
	line-height: 1;
}

/* --- Herkomst: alt-background split section --- */
.sn-herkomst {
	border-top: 1px solid var(--ink);
	border-bottom: 1px solid var(--ink);
	background: var(--paper-dark);
}

.sn-herkomst__grid {
	max-width: var(--container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
}

.sn-herkomst__text {
	padding: clamp(48px, 6vw, 72px) clamp(24px, 4vw, 56px) clamp(48px, 6vw, 72px) var(--gutter);
}

.sn-herkomst__intro {
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--muted-2);
	margin: 0 0 36px;
	max-width: 440px;
}

.sn-herkomst__photo {
	width: 100%;
	height: 100%;
	min-height: 300px;
	object-fit: cover;
	display: block;
}

/* Numbered fact list: Anton numeral in accent, hairline between rows. */
.sn-facts {
	border-top: 1px solid var(--ink);
}

.sn-facts__row {
	display: flex;
	gap: 24px;
	align-items: baseline;
	border-bottom: 1px solid var(--ink);
	padding: 16px 0;
}

.sn-facts__n {
	font-family: var(--font-display);
	font-size: 16px;
	color: var(--accent);
	flex-shrink: 0;
}

.sn-facts__text {
	font-size: 15px;
	font-weight: 600;
}

/* --- Reviews --- */
.sn-reviews {
	display: flex;
	gap: clamp(28px, 5vw, 56px);
	align-items: flex-start;
	flex-wrap: wrap;
}

.sn-reviews__stat {
	border: 1px solid var(--ink);
	padding: 22px 24px;
	text-align: center;
	min-width: 130px;
}

.sn-reviews__score {
	font-family: var(--font-display);
	font-size: 44px;
	line-height: 1;
}

.sn-reviews__count {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	margin-top: 6px;
}

.sn-reviews__body {
	flex: 1;
	min-width: min(100%, 320px);
}

.sn-reviews__lead {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: clamp(22px, 3vw, 34px);
	line-height: 1.35;
	max-width: 820px;
}

.sn-reviews__by {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	margin-top: 20px;
}

.sn-reviews__more {
	display: flex;
	gap: 24px 40px;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--hairline-soft);
	font-size: 14px;
	color: var(--muted-2);
	flex-wrap: wrap;
}

/* --- Uit de gids: ink section with article cards --- */
.sn-gids {
	background: var(--ink);
	color: var(--paper);
}

.sn-gids .sn-textlink {
	color: var(--paper);
	border-color: var(--paper);
}

.sn-gids .sn-textlink:hover {
	color: var(--hairline-soft);
	border-color: var(--hairline-soft);
}

.sn-gids__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: clamp(48px, 6vw, 72px) var(--gutter) clamp(56px, 7vw, 80px);
}

.sn-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 32px;
}

.sn-card {
	text-decoration: none;
	color: var(--paper);
	display: block;
}

.sn-card:hover {
	color: var(--paper);
}

.sn-card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	border: 1px solid var(--on-ink-hairline);
}

/* Stand-in for a missing featured image: the same 4:3 box, flat, so the card
   grid keeps its rows even. 27 of the 30 posts have no image today, and cards
   that collapse to bare text leave the grid ragged. */
.sn-card__ph {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: rgba(243, 237, 224, 0.06);
	border: 1px solid var(--on-ink-hairline);
}

.sn-card--paper .sn-card__ph {
	background: var(--paper-dark);
	border-color: var(--ink);
}

.sn-card__cat {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--tan);
	margin: 16px 0 8px;
}

.sn-card__title {
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: 22px;
	line-height: 1.15;
}

.sn-card:hover .sn-card__title {
	color: var(--hairline-soft);
}

/* ==========================================================================
   11. Shop archive
   ========================================================================== */

.sn-shop__sub {
	font-size: 14px;
	color: var(--muted);
	margin: 6px 0 36px;
}

/* Filter tabs sit ON the hairline: the active tab's 3px underline overlaps it. */
.sn-tabs {
	display: flex;
	gap: clamp(16px, 2.5vw, 28px);
	border-bottom: 1px solid var(--ink);
	overflow-x: auto;
	scrollbar-width: none;
}

.sn-tabs::-webkit-scrollbar {
	display: none;
}

.sn-tab {
	background: none;
	border: none;
	padding: 10px 2px 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	white-space: nowrap;
	min-height: var(--tap);
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}

.sn-tab:hover {
	color: var(--ink);
}

.sn-tab.is-active {
	color: var(--ink);
	border-bottom-color: var(--ink);
}

/* Pagination in the same hairline idiom — no rounded page bubbles. */
.sn-pagination {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 40px;
}

.sn-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--tap);
	min-height: var(--tap);
	padding: 0 14px;
	border: 1px solid var(--ink);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ink);
}

.sn-pagination .page-numbers:hover,
.sn-pagination .page-numbers.current {
	background: var(--ink);
	color: var(--paper);
}

/* ==========================================================================
   12. Product detail
   ========================================================================== */

.sn-breadcrumb {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 28px;
}

.sn-breadcrumb a {
	color: var(--muted);
	text-decoration: none;
}

.sn-breadcrumb a:hover {
	color: var(--ink);
}

.sn-breadcrumb__sep {
	margin: 0 10px;
}

.sn-breadcrumb__current {
	color: var(--ink);
}

.sn-pdp {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: clamp(28px, 4.5vw, 56px);
	align-items: start;
}

.sn-pdp__media {
	position: relative;
	border: 1px solid var(--ink);
}

.sn-pdp__media img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	display: block;
}

.sn-pdp__title {
	font-family: var(--font-display);
	font-weight: 400;
	text-transform: uppercase;
	font-size: clamp(36px, 5vw, 58px);
	margin: 0 0 8px;
	line-height: 0.98;
}

.sn-pdp__meta {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 22px;
}

.sn-pdp__price {
	font-family: var(--font-display);
	font-size: clamp(30px, 4vw, 42px);
	line-height: 1;
	margin-bottom: 22px;
}

.sn-pdp__desc {
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--body);
	margin: 0 0 26px;
}

/* Numbered spec/origin list — hairline-soft rows inside the ink-bordered area. */
.sn-specs {
	border-top: 1px solid var(--ink);
	margin-bottom: 28px;
}

.sn-specs__row {
	display: flex;
	gap: 20px;
	align-items: baseline;
	border-bottom: 1px solid var(--hairline-soft);
	padding: 12px 0;
	font-size: 14px;
	font-weight: 600;
}

.sn-specs__n {
	font-family: var(--font-display);
	font-size: 13px;
	color: var(--accent);
	flex-shrink: 0;
}

.sn-pdp__buy {
	display: flex;
	gap: 16px;
	align-items: stretch;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.sn-pdp__cta {
	flex: 1;
	min-width: 220px;
	padding: 16px;
}

.sn-infobox {
	border: 1px solid var(--ink);
	padding: 16px 18px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--body);
	margin-bottom: 22px;
	background: var(--paper-dark);
}

.sn-infobox strong {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 11px;
}

.sn-tip {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 17px;
	line-height: 1.6;
	color: var(--body);
}

.sn-pdp__below {
	margin-top: clamp(48px, 7vw, 80px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: clamp(28px, 4.5vw, 56px);
	align-items: start;
}

.sn-reviewlist {
	border-top: 1px solid var(--ink);
}

.sn-reviewlist__item {
	border-bottom: 1px solid var(--hairline-soft);
	padding: 18px 0;
}

.sn-reviewlist__text {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 16.5px;
	line-height: 1.55;
}

.sn-reviewlist__by {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	margin-top: 10px;
}

/* ==========================================================================
   13. Cart + checkout
   ========================================================================== */

.sn-cartgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: clamp(28px, 4vw, 48px);
	align-items: start;
}

.sn-cartline {
	display: flex;
	gap: 20px;
	align-items: center;
	border-bottom: 1px solid var(--ink);
	padding: 18px 0;
	flex-wrap: wrap;
}

.sn-cartline__media {
	width: 88px;
	height: 88px;
	flex-shrink: 0;
}

.sn-cartline__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sn-cartline__body {
	flex: 1;
	min-width: 170px;
}

.sn-cartline__name {
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: 22px;
	line-height: 1.05;
	text-decoration: none;
	color: var(--ink);
}

.sn-cartline__meta {
	font-size: 13px;
	color: var(--muted);
	margin: 4px 0 12px;
}

.sn-cartline__right {
	text-align: right;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-end;
	margin-left: auto;
}

.sn-cartline__total {
	font-family: var(--font-display);
	font-size: 22px;
	line-height: 1;
}

.sn-remove {
	background: none;
	border: none;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	padding: 0;
	cursor: pointer;
}

.sn-remove:hover {
	color: var(--ink);
}

/* Sticky ink summary panel, shared by cart and checkout. Once the grid
   collapses to one column it falls back into normal flow on its own. */
.sn-summary {
	background: var(--ink);
	color: var(--paper);
	padding: 30px;
	position: sticky;
	top: 92px;
}

.sn-summary__title {
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: 26px;
	margin-bottom: 22px;
	line-height: 1;
}

.sn-summary__line {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-size: 14px;
	padding: 9px 0;
	color: var(--on-ink-strong);
}

.sn-summary__line--ruled {
	border-bottom: 1px solid var(--on-ink-hairline);
}

.sn-summary__nudge {
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hairline-soft);
	padding: 12px 0 0;
}

.sn-summary__total {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-family: var(--font-display);
	font-size: 22px;
	padding: 18px 0 24px;
}

.sn-summary__note {
	font-size: 12px;
	color: var(--on-ink-faint);
	margin-top: 14px;
	line-height: 1.6;
}

/* Order-review thumbnails on checkout. */
.sn-summary__items {
	display: flex;
	flex-direction: column;
	gap: 12px;
	border-bottom: 1px solid var(--on-ink-hairline);
	padding-bottom: 16px;
	margin-bottom: 10px;
}

.sn-summary__item {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sn-summary__item img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	flex-shrink: 0;
}

.sn-summary__item-name {
	font-size: 13.5px;
	flex: 1;
}

.sn-summary__item-total {
	font-size: 13.5px;
	font-weight: 700;
}

/* Empty cart. */
.sn-empty {
	border: 1px solid var(--ink);
	padding: clamp(40px, 6vw, 72px);
	text-align: center;
}

.sn-empty__title {
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: 32px;
	margin-bottom: 12px;
	line-height: 1;
}

/* --- Checkout step cards --- */
.sn-steps {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.sn-step {
	border: 1px solid var(--ink);
	padding: clamp(20px, 3vw, 28px);
}

.sn-step__title {
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: 18px;
	margin-bottom: 20px;
	line-height: 1;
}

.sn-step__n {
	color: var(--accent);
}

.sn-fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	gap: 14px;
}

.sn-field--wide {
	grid-column: 1 / -1;
}

/* Square inputs on the warm input background, tan hairline border. */
.sn-fields input[type="text"],
.sn-fields input[type="email"],
.sn-fields input[type="tel"],
.sn-fields input[type="number"],
.sn-fields input[type="password"],
.sn-fields textarea,
.sn-fields select,
.sn-input {
	width: 100%;
	border: 1px solid var(--tan);
	padding: 13px 14px;
	font-size: 14px;
	background: var(--input);
	color: var(--ink);
	min-width: 0;
	font-family: var(--font-body);
	min-height: var(--tap);
}

.sn-fields input:focus,
.sn-fields select:focus,
.sn-fields textarea:focus {
	border-color: var(--ink);
	outline: none;
}

.sn-fields label {
	display: none; /* the design uses placeholders, not floating labels */
}

.sn-fields .sn-field--labelled label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 6px;
}

/* --- Square radio rows (delivery slot + payment method) --- */
.sn-radios {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sn-radio {
	display: flex;
	align-items: center;
	gap: 14px;
	border: 1px solid var(--hairline-soft);
	background: transparent;
	padding: 14px 16px;
	flex-wrap: wrap;
	cursor: pointer;
	min-height: var(--tap);
}

.sn-radio.is-selected {
	border-color: var(--ink);
	background: var(--paper-dark);
}

/* The indicator is a 14px SQUARE, not a circle, and fills ink when selected. */
.sn-radio__dot {
	width: 14px;
	height: 14px;
	border: 1px solid var(--ink);
	background: transparent;
	box-sizing: border-box;
	flex-shrink: 0;
}

.sn-radio.is-selected .sn-radio__dot {
	background: var(--ink);
}

.sn-radio input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.sn-radio__label {
	font-size: 14px;
	font-weight: 700;
}

.sn-radio__note {
	margin-left: auto;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

/* Privacy-policy and terms copy that WooCommerce prints beside the submit
   button. It lands inside the ink summary panel, so it takes the same faint
   treatment as the design's own microcopy rather than 16px paper-white body
   text. */
.sn-summary .woocommerce-privacy-policy-text,
.sn-summary .woocommerce-terms-and-conditions-wrapper {
	font-size: 12px;
	line-height: 1.6;
	color: var(--on-ink-faint);
	margin-bottom: 16px;
}

.sn-summary .woocommerce-privacy-policy-text p,
.sn-summary .woocommerce-terms-and-conditions-wrapper p {
	font-size: 12px;
	line-height: 1.6;
	color: var(--on-ink-faint);
	margin: 0 0 8px;
}

.sn-summary .woocommerce-privacy-policy-text a,
.sn-summary .woocommerce-terms-and-conditions-wrapper a {
	color: var(--hairline-soft);
}

.sn-summary .woocommerce-privacy-policy-text a:hover,
.sn-summary .woocommerce-terms-and-conditions-wrapper a:hover {
	color: var(--paper);
}

/* The terms checkbox, when the shop enables one. */
.sn-summary .woocommerce-terms-and-conditions-checkbox-text {
	font-size: 12px;
	color: var(--on-ink-strong);
}

/* WooCommerce injects gateway descriptions and iDEAL issuer selects here. */
.sn-radio__extra {
	flex-basis: 100%;
	font-size: 13px;
	color: var(--muted-2);
	line-height: 1.6;
}

.sn-radio__extra:empty {
	display: none;
}

/* ==========================================================================
   14. Thank you
   ========================================================================== */

.sn-done {
	max-width: 760px;
	margin: 0 auto;
	padding: clamp(56px, 9vw, 96px) var(--gutter) clamp(64px, 10vw, 110px);
	text-align: center;
}

.sn-done__title {
	font-family: var(--font-display);
	font-weight: 400;
	text-transform: uppercase;
	font-size: clamp(56px, 9vw, 96px);
	margin: 0 0 20px;
	line-height: 0.95;
}

.sn-done__chip {
	display: inline-block;
	border: 1px solid var(--ink);
	padding: 12px 22px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: 26px;
}

.sn-done__note {
	font-size: 16px;
	line-height: 1.7;
	color: var(--body);
	margin: 0 0 36px;
}

/* Order details under the confirmation.
   The handoff specifies only the four centred elements above, but dropping
   WooCommerce's order summary would leave a customer with no record of what
   they just bought. It is kept and pulled into the hairline system instead —
   left-aligned, secondary, clearly below the moment. */
.sn-done .woocommerce-order-details,
.sn-done .woocommerce-customer-details {
	text-align: left;
	max-width: 560px;
	margin: 56px auto 0;
	border-top: 1px solid var(--ink);
	padding-top: 28px;
}

.sn-done .woocommerce-order-details__title,
.sn-done .woocommerce-column__title {
	font-family: var(--font-display);
	font-weight: 400;
	text-transform: uppercase;
	font-size: 22px;
	line-height: 1;
	margin: 0 0 18px;
}

.sn-done .woocommerce-table--order-details,
.sn-done .woocommerce-table--customer-details {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.sn-done .woocommerce-table--order-details th,
.sn-done .woocommerce-table--order-details td {
	border-bottom: 1px solid var(--hairline-soft);
	padding: 12px 0;
	text-align: left;
	font-weight: 400;
}

.sn-done .woocommerce-table--order-details thead th {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	border-bottom-color: var(--ink);
}

.sn-done .woocommerce-table--order-details td:last-child,
.sn-done .woocommerce-table--order-details th:last-child {
	text-align: right;
	white-space: nowrap;
}

.sn-done .woocommerce-table--order-details tfoot th {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.sn-done .woocommerce-table--order-details tfoot tr:last-child th,
.sn-done .woocommerce-table--order-details tfoot tr:last-child td {
	font-family: var(--font-display);
	font-size: 20px;
	letter-spacing: 0;
	text-transform: none;
	border-bottom: none;
}

.sn-done address {
	font-style: normal;
	font-size: 14px;
	line-height: 1.7;
	color: var(--body);
}

/* ==========================================================================
   15. Toast
   ========================================================================== */

.sn-toast {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: var(--ink);
	color: var(--paper);
	padding: 14px var(--gutter);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	flex-wrap: wrap;
}

.sn-toast[hidden] {
	display: none;
}

.sn-toast a {
	color: var(--hairline-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sn-toast a:hover {
	color: var(--paper);
}

/* ==========================================================================
   16. Editorial: blog, recepten, BBQ, pages
   --------------------------------------------------------------------------
   Not specified in the handoff. Extended from the same hairline system:
   the archive reuses the "Uit de gids" card, and the article is a single
   measure of body copy under an Anton headline.
   ========================================================================== */

.sn-archive__head {
	border-bottom: 1px solid var(--ink);
	padding-bottom: 24px;
	margin-bottom: 40px;
}

.sn-archive__intro {
	font-size: 15.5px;
	color: var(--muted);
	margin: 10px 0 0;
	max-width: 620px;
}

/* Card on the paper background is the inverse of the ink "Uit de gids" card. */
.sn-card--paper {
	color: var(--ink);
}

.sn-card--paper:hover {
	color: var(--ink);
}

.sn-card--paper img {
	border: 1px solid var(--ink);
}

.sn-card--paper .sn-card__cat {
	color: var(--accent);
}

.sn-card--paper:hover .sn-card__title {
	color: var(--accent);
}

.sn-article {
	max-width: 720px;
	margin: 0 auto;
}

.sn-article__head {
	margin-bottom: 32px;
}

.sn-article__cat {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 14px;
}

.sn-article__title {
	font-family: var(--font-display);
	font-weight: 400;
	text-transform: uppercase;
	font-size: clamp(38px, 5.5vw, 64px);
	line-height: 1;
	margin: 0 0 16px;
}

.sn-article__meta {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	border-top: 1px solid var(--ink);
	padding-top: 14px;
}

.sn-article__hero {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border: 1px solid var(--ink);
	margin-bottom: 32px;
}

/* Long-form body copy: the one place body colour and serif-free reading
   sizes take over. Anton never appears in a paragraph. */
.sn-prose {
	font-size: 17px;
	line-height: 1.75;
	color: var(--body);
}

.sn-prose > * + * {
	margin-top: 1.2em;
}

.sn-prose h2 {
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: clamp(26px, 3.2vw, 34px);
	line-height: 1.05;
	margin-top: 1.8em;
	color: var(--ink);
}

.sn-prose h3 {
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: clamp(21px, 2.4vw, 25px);
	line-height: 1.1;
	margin-top: 1.6em;
	color: var(--ink);
}

.sn-prose h4 {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-top: 1.5em;
	color: var(--ink);
}

.sn-prose img,
.sn-prose figure img {
	border: 1px solid var(--ink);
}

.sn-prose figcaption {
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	margin-top: 10px;
}

.sn-prose blockquote {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: clamp(19px, 2.4vw, 24px);
	line-height: 1.45;
	margin: 1.6em 0;
	padding-left: 24px;
	border-left: 1px solid var(--ink);
	color: var(--ink);
}

.sn-prose ul,
.sn-prose ol {
	padding-left: 1.3em;
}

.sn-prose li + li {
	margin-top: 0.5em;
}

.sn-prose ul {
	list-style: none;
	padding-left: 0;
}

/* Hairline-ruled list rows rather than bullet glyphs — the design has no icons. */
.sn-prose ul > li {
	border-bottom: 1px solid var(--hairline-soft);
	padding: 10px 0;
}

.sn-prose ol {
	list-style: none;
	counter-reset: sn-ol;
	padding-left: 0;
}

.sn-prose ol > li {
	counter-increment: sn-ol;
	border-bottom: 1px solid var(--hairline-soft);
	padding: 10px 0 10px 44px;
	position: relative;
}

.sn-prose ol > li::before {
	content: counter(sn-ol, decimal-leading-zero);
	position: absolute;
	left: 0;
	font-family: var(--font-display);
	font-size: 14px;
	color: var(--accent);
	top: 12px;
}

.sn-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
}

.sn-prose th,
.sn-prose td {
	border-bottom: 1px solid var(--hairline-soft);
	padding: 10px 12px 10px 0;
	text-align: left;
}

.sn-prose th {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-bottom-color: var(--ink);
}

.sn-prose code {
	font-size: 0.9em;
	background: var(--paper-dark);
	padding: 2px 5px;
}

.sn-prose pre {
	background: var(--paper-dark);
	border: 1px solid var(--hairline-soft);
	padding: 16px;
	overflow-x: auto;
}

/* Post navigation. */
.sn-postnav {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	border-top: 1px solid var(--ink);
	margin-top: 56px;
	padding-top: 24px;
}

/* ==========================================================================
   17. WooCommerce overrides
   --------------------------------------------------------------------------
   The core stylesheets are dequeued, but Woo still emits its own markup for
   notices, forms and the login/account screens. These keep it in the system.
   ========================================================================== */

.woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	border: 1px solid var(--ink);
	background: var(--paper-dark);
	padding: 14px 18px;
	margin: 0 0 24px;
	font-size: 14px;
	list-style: none;
	color: var(--ink);
}

.woocommerce-error {
	border-color: #8C2F1B;
	color: #8C2F1B;
}

.woocommerce-error li {
	list-style: none;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* Skip link, visible only on focus. */
.sn-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--ink);
	color: var(--paper);
	padding: 12px 18px;
	z-index: 200;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sn-skip:focus {
	left: 0;
}

/* Account / login and any other stock Woo form. */
.woocommerce form .form-row {
	margin-bottom: 14px;
}

.woocommerce form .form-row label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	display: block;
	margin-bottom: 6px;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
	width: 100%;
	border: 1px solid var(--tan);
	background: var(--input);
	padding: 13px 14px;
	font-size: 14px;
	font-family: var(--font-body);
	min-height: var(--tap);
}

.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
	background: var(--ink);
	color: var(--paper);
	border: none;
	padding: 17px 34px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	min-height: var(--tap);
	font-family: var(--font-body);
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover {
	background: var(--accent);
	color: var(--paper);
}

/* Layout shell so the footer always sits at the bottom of short pages. */
.sn-page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.sn-main {
	flex: 1;
}