/* ============================================
   Eleven Finger Products — style.css
   Mobile-first / BEM / CSS variables only
   ============================================ */

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

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

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

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-body);
	color: var(--color-text-primary);
	background-color: var(--color-bg);
	letter-spacing: var(--letter-spacing-body);
}

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

a {
	color: inherit;
	text-decoration: none;
}

.main {
	flex: 1;
}

/* ── Container helper ── */
.header__inner,
.instagram__inner,
.news-section__inner,
.products-section__inner,
.social-message__inner,
.footer__inner {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

@media (min-width: 768px) {
	.header__inner,
	.instagram__inner,
	.news-section__inner,
	.products-section__inner,
	.social-message__inner,
	.footer__inner {
		padding-inline: var(--container-pad);
	}
}

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

.header {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--z-header);
	/* Semi-transparent so content faintly shows through on scroll.
	   No backdrop-filter: it would make .header the containing block for the
	   fixed drawer/overlay and cause the drawer content to paint late on mobile. */
	background-color: color-mix(in srgb, var(--color-bg) 88%, transparent);
	border-bottom: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
}

.header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 4rem;
}

/* Logo */
.header__logo {
	display: flex;
	align-items: center;
	/* Tight gap so symbol + logotype read as one unified logo mark */
	gap: var(--space-1);
	flex-shrink: 0;
}

.header__logo-symbol {
	width: 2rem;
	height: 2rem;
}

.header__logo-type {
	/* Sized to keep the symbol/logotype ratio close to the desktop balance */
	height: 1.5rem;
	width: auto;
}

/* Desktop nav — hidden on mobile */
.header__nav {
	display: none;
}

/* Actions: hamburger visible on mobile, shop hidden */
.header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

/* Action icons (cart, Instagram) — visible on desktop; mobile uses the drawer */
.header__action {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	color: var(--color-accent);
	transition: color var(--transition-fast) var(--ease-default);

	&:hover {
		color: var(--color-brand);
	}
}

/* launch-day toggle: adding the hidden attr hides the cart before EC launch */
.header__action[hidden] {
	display: none;
}

.header__action-icon {
	width: 1.375rem;
	height: 1.375rem;
}

.header__hamburger {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
}

.header__hamburger-bar {
	display: block;
	width: 1.5rem;
	height: 2px;
	background-color: var(--color-text-secondary);
	border-radius: var(--radius-sm);
	transition: transform var(--transition-base) var(--ease-smooth),
	            opacity var(--transition-base) var(--ease-smooth);
}

/* Hamburger open state */
.header__hamburger[aria-expanded="true"] {
	& .header__hamburger-bar:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}
	& .header__hamburger-bar:nth-child(2) {
		opacity: 0;
	}
	& .header__hamburger-bar:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}
}

/* Drawer — full-screen overlay (no left gap) */
.header__drawer {
	position: fixed;
	inset: 0;
	z-index: var(--z-menu);
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100dvh;
	padding: var(--space-8) var(--space-6);
	background-color: var(--color-bg);
	transform: translateX(100%);
	transition: transform var(--transition-base) var(--ease-smooth);
	overflow-y: auto;
}

/* Close (×) button — top-right of the full-screen menu */
.header__drawer-close {
	position: absolute;
	top: var(--space-5);
	right: var(--space-5);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	color: var(--color-text-secondary);
	background: transparent;
	border: none;
	cursor: pointer;
	transition: color var(--transition-fast) var(--ease-default);

	&:hover {
		color: var(--color-brand);
	}
}

.header__drawer-close-icon {
	width: 1.5rem;
	height: 1.5rem;
}

.header__drawer[aria-hidden="false"] {
	transform: translateX(0);
}

.header__drawer-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.header__drawer-link {
	display: block;
	text-align: center;
	padding: var(--space-3) 0;
	font-family: var(--font-heading);
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-heading);
	color: var(--color-accent);
	border-bottom: 1px solid var(--color-border);
	transition: color var(--transition-fast) var(--ease-default);

	&:hover {
		color: var(--color-brand);
	}
}

/* Cart + Instagram icon group inside the mobile menu.
   The last nav link's own border-bottom is the single separator above this row,
   so no border-top here (avoids a doubled divider under Contact). */
.header__drawer-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-5);
	margin-top: var(--space-5);
}

.header__drawer-action {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	color: var(--color-accent);
	transition: color var(--transition-fast) var(--ease-default);

	&:hover {
		color: var(--color-brand);
	}
}

.header__drawer-action-icon {
	width: 1.5rem;
	height: 1.5rem;
}

/* Overlay */
.header__overlay {
	position: fixed;
	top: 0;
	left: 0;
	z-index: var(--z-overlay);
	display: none;
	width: 100%;
	height: 100dvh;
	background-color: rgba(92, 75, 58, 0.4);
}

.header__overlay--visible {
	display: block;
}

/* ── Desktop header (768px+) ── */
@media (min-width: 768px) {
	.header__inner {
		height: var(--header-h);
	}

	/* Logo grows slightly on desktop for stronger presence.
	   Symbol held at 2.25rem; logotype nudged up a touch for legibility. */
	.header__logo-symbol {
		width: 2.25rem;
		height: 2.25rem;
	}

	.header__logo-type {
		height: 1.75rem;
	}

	/* Nav pushed right so logo (left) + nav/actions (right) read as one header */
	.header__nav {
		display: block;
		margin-left: auto;
	}

	.header__nav-list {
		display: flex;
		align-items: center;
		gap: var(--space-5);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.header__nav-link {
		position: relative;
		font-family: var(--font-heading);
		font-size: var(--font-size-body);
		font-weight: var(--font-weight-medium);
		letter-spacing: var(--letter-spacing-heading);
		color: var(--color-accent);
		transition: color var(--transition-fast) var(--ease-default);

		/* Underline slides in from left on hover / active */
		&::after {
			content: '';
			position: absolute;
			bottom: -4px;
			left: 0;
			width: 0;
			height: 2px;
			background-color: var(--color-brand);
			transition: width var(--transition-fast) var(--ease-default);
		}

		&:hover,
		&:where(.header__nav-item--current > *) {
			color: var(--color-brand);
		}

		&:hover::after,
		&:where(.header__nav-item--current > *)::after {
			width: 100%;
		}
	}

	/* Cart + Instagram: distinct action/external icon group at the end of the nav */
	.header__actions {
		margin-left: var(--space-5);
	}

	.header__action {
		display: inline-flex;
	}

	.header__hamburger {
		display: none;
	}
}

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

.hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	width: 100%;
	min-height: calc(100svh - 4rem);
	overflow: hidden;
	background-color: var(--color-bg-section);
}

.hero__slider {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.hero__slide-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
}

/* Splide track/list must fill the abs-positioned slider container */
.hero__slider .splide__track,
.hero__slider .splide__list {
	height: 100%;
}

.hero__slide {
	height: 100%;
}

/* Gradient overlay so text is legible */
.hero__slider::after {
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background:
		linear-gradient(
			to right,
			rgba(92, 75, 58, 0.55) 0%,
			rgba(92, 75, 58, 0.2) 45%,
			transparent 75%
		),
		linear-gradient(
			to top,
			rgba(92, 75, 58, 0.65) 0%,
			rgba(92, 75, 58, 0.1) 60%,
			transparent 100%
		);
	pointer-events: none;
}

.hero__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-8) 1.25rem;
	text-align: left;
}

.hero__deco-text {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0 0 var(--space-3);
	font-family: var(--font-heading);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.3em;
	color: var(--color-text-on-dark);
	text-transform: uppercase;
	text-shadow: 0 1px 10px rgba(40, 35, 28, 0.45);

	&::before {
		content: "";
		width: 2.5rem;
		height: 1px;
		background-color: currentColor;
	}
}

.hero__tagline {
	margin: 0 0 var(--space-4);
	font-family: var(--font-hero);
	font-size: var(--font-size-h1);
	font-weight: var(--font-weight-regular);
	font-feature-settings: "palt";
	line-height: var(--line-height-h4);
	color: var(--color-text-on-dark);
	letter-spacing: var(--letter-spacing-h1);
	text-shadow: 0 1px 12px rgba(40, 35, 28, 0.45);
}

.hero__tagline-line {
	display: block;
}

/* Phrase-level wrapping so JP copy breaks at natural points, not mid-word */
.hero__tagline-phrase {
	display: inline-block;
}

.hero__copy {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0 0 var(--space-6);
	font-family: var(--font-heading);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-on-dark);
	letter-spacing: 0.3em;
	text-transform: uppercase;
	text-shadow: 0 1px 10px rgba(40, 35, 28, 0.4);

	&::after {
		content: "";
		width: 2.5rem;
		height: 1px;
		background-color: currentColor;
	}
}

.hero__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-7);
	font-family: "Work Sans", var(--font-body);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-heading);
	color: var(--color-text-on-dark);
	background-color: var(--color-brand);
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-lg);
	transition: background-color var(--transition-fast) var(--ease-default),
	            color var(--transition-fast) var(--ease-default);

	&::after {
		content: "";
		width: 0.5rem;
		height: 0.5rem;
		border-top: 1.5px solid currentColor;
		border-right: 1.5px solid currentColor;
		transform: rotate(45deg);
		transition: transform var(--transition-fast) var(--ease-default);
	}

	&:hover {
		background-color: var(--color-accent);
	}

	&:hover::after {
		transform: translateX(3px) rotate(45deg);
	}
}

/* Hero slide zoom-out (Ken Burns) — active slide only */
@keyframes hero-zoom {
	from { transform: scale(1.07); }
	to   { transform: scale(1); }
}

.hero__slide-img.is-zooming {
	animation: hero-zoom 11000ms var(--ease-default) forwards;
}

/* Pagination dots above hero content so they remain clickable */
.hero .splide__pagination {
	z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
	.hero__slide-img.is-zooming {
		animation: none;
	}
}

@media (min-width: 768px) {
	.hero {
		min-height: calc(100svh - var(--header-h));
	}

	.hero__content {
		padding: var(--space-10) var(--container-pad);
	}
}

/* ============================================
   INSTAGRAM
   ============================================ */

.instagram {
	padding-block: var(--space-7);
	background-color: color-mix(in srgb, var(--color-light-beige) 30%, var(--color-bg));
}

/* ── Section heading system (eyebrow → title → caption) ── */
.section-eyebrow {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.22em;
	color: var(--color-accent);
	text-transform: uppercase;
}

.section-caption {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-small);
	line-height: var(--line-height-small);
	color: var(--color-text-secondary);
	letter-spacing: var(--letter-spacing-heading);
}

/* Refined text-button link used for "View All" / Instagram links */
.section-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-heading);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-heading);
	color: var(--color-brand);
	white-space: nowrap;
	border-bottom: 1px solid currentColor;
	padding-bottom: var(--space-1);
	transition: color var(--transition-fast) var(--ease-default);

	&::after {
		content: "";
		width: 0.4rem;
		height: 0.4rem;
		border-top: 1.5px solid currentColor;
		border-right: 1.5px solid currentColor;
		transform: rotate(45deg);
		transition: transform var(--transition-fast) var(--ease-default);
	}

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

	&:hover::after {
		transform: translateX(2px) rotate(45deg);
	}
}

/* ============================================
   SHOP CTA — EC preview (demo only; easy to remove)
   ============================================ */
.news-section__cta {
	display: flex;
	justify-content: center;
	margin-top: var(--space-7);
}

.shop-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-5);
	font-family: "Work Sans", var(--font-body);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-heading);
	color: var(--color-text-on-dark);
	background-color: var(--color-brand);
	border: 1px solid var(--color-brand);
	border-radius: var(--radius-full);
	transition:
		color var(--transition-fast) var(--ease-default),
		background-color var(--transition-fast) var(--ease-default),
		border-color var(--transition-fast) var(--ease-default);
}

.shop-cta:hover {
	color: var(--color-text-on-dark);
	background-color: var(--color-accent);
	border-color: var(--color-accent);
}

.shop-cta__icon {
	width: 1.125rem;
	height: 1.125rem;
}

/* Solid variant — product-detail purchase point */
.shop-cta--solid {
	color: var(--color-text-on-dark);
	background-color: var(--color-brand);
	border-color: var(--color-brand);
}

.shop-cta--solid:hover {
	color: var(--color-text-on-dark);
	background-color: var(--color-accent);
	border-color: var(--color-accent);
}

.products-grid__footer {
	margin-top: var(--space-7);
	text-align: center;
}

.product-info__buy {
	margin-top: var(--space-6);
}

.instagram__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
	margin-bottom: var(--space-6);
}

.instagram__heading {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--font-size-display);
	font-weight: var(--font-weight-regular);
	font-style: italic;
	line-height: var(--line-height-display);
	color: var(--color-text-primary);
	letter-spacing: var(--letter-spacing-display);
}

.instagram__subtext {
	margin: 0;
	font-size: var(--font-size-small);
	color: var(--color-text-secondary);
}

.instagram__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-2);
	margin-bottom: var(--space-5);
}

/* Wrapper for the Smash Balloon [instagram-feed] output; matches the static
   grid's spacing before the "View on Instagram" link. The plugin renders and
   styles its own markup inside. */
.instagram__feed {
	margin-bottom: var(--space-5);
}

.instagram__item {
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background-color: var(--color-border);
	border-radius: var(--radius-sm);
}

.instagram__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-base) var(--ease-smooth);
}

.instagram__item:hover .instagram__img {
	transform: scale(1.04);
}

.instagram__account-link {
	display: block;
	width: fit-content;
	margin-inline: auto;
	font-family: var(--font-heading);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-heading);
	color: var(--color-brand);
	transition: color var(--transition-fast) var(--ease-default);

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

.instagram__more {
	margin-top: var(--space-6);
	text-align: center;
}

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

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

/* ============================================
   NEWS
   ============================================ */

.news-section {
	padding-block: var(--space-7);
	background-color: var(--color-bg);
}

.news-section__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);
	margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
	.news-section__header {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--space-5);
	}
}

.news-section__heading-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.news-section__heading {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--font-size-display);
	font-weight: var(--font-weight-regular);
	font-style: italic;
	line-height: var(--line-height-display);
	color: var(--color-text-primary);
	letter-spacing: var(--letter-spacing-display);
}

.news-section__subtext {
	margin: 0;
	font-size: var(--font-size-small);
	color: var(--color-text-secondary);
}

.news-section__view-all {
	font-family: var(--font-heading);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-heading);
	color: var(--color-brand);
	white-space: nowrap;
	transition: color var(--transition-fast) var(--ease-default);

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

.news-section__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ── card-news ── */
.card-news__link {
	display: flex;
	gap: var(--space-4);
	overflow: hidden;
	border-radius: var(--radius-md);
	background-color: var(--color-bg);
	box-shadow: var(--shadow-sm);
	transition:
		box-shadow var(--transition-fast) var(--ease-default),
		transform var(--transition-fast) var(--ease-default);

	&:hover {
		box-shadow: var(--shadow-md);
		transform: translateY(-4px);
	}
}

.card-news__thumbnail {
	flex-shrink: 0;
	overflow: hidden;
	position: relative;
	width: 7rem;
	aspect-ratio: 1 / 1;
	background-color: var(--color-border);
}

.card-news__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-base) var(--ease-smooth);
}

.card-news__link:hover .card-news__img {
	transform: scale(1.04);
}

/* Neutral placeholder for News cards with no featured image (icon centered on
   the thumbnail's existing gray background). Single posts have no fallback. */
.card-news__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: color-mix(in srgb, var(--color-text-secondary) 45%, transparent);
}

.card-news__placeholder-icon {
	width: 28%;
	max-width: 2.5rem;
	height: auto;
}

.card-news__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-4) var(--space-4) var(--space-4) 0;
}

.card-news__meta {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.card-news__date {
	font-size: var(--font-size-caption);
	color: var(--color-text-secondary);
	letter-spacing: var(--letter-spacing-body);
}

.card-news__category {
	padding: var(--space-1) var(--space-2);
	font-size: var(--font-size-caption);
	color: var(--color-brand);
	background-color: var(--color-light-beige);
	border-radius: var(--radius-sm);
	letter-spacing: var(--letter-spacing-body);
}

.card-news__title {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-h4);
	color: var(--color-text-primary);
}

.card-news__excerpt {
	display: none;
	margin: 0;
	font-size: var(--font-size-caption);
	line-height: var(--line-height-small);
	color: var(--color-text-secondary);
}

/* Top-page News cards: equal height + text truncation (scoped to .news-section) */
.news-section__list-item {
	display: flex;
}

/* The list item is a flex container, so its child article.card-news is the flex
   item; without an explicit width it shrinks to content below 768px (varying per
   title length / image presence). Force the article full width so teaser cards
   align. The 768px+ rule already handles the link width, so this only adds the
   missing base case on the wrapper. */
.news-section__list .card-news {
	width: 100%;
}

.news-section__list .card-news__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

@media (min-width: 768px) {
	.news-section__list {
		align-items: stretch;
	}

	.news-section__list .card-news__link {
		width: 100%;
		height: 100%;
	}

	.news-section__list .card-news__body {
		flex: 1;
		justify-content: flex-start;
	}

	.news-section__list .card-news__excerpt {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}
}

@media (min-width: 768px) {
	.news-section__list {
		flex-direction: row;
		gap: var(--space-5);
	}

	.news-section__list-item {
		flex: 1;
	}

	.card-news__link {
		flex-direction: column;
		gap: 0;
	}

	.card-news__thumbnail {
		width: 100%;
		aspect-ratio: 4 / 3;
	}

	.card-news__body {
		padding: var(--space-5);
	}

	.card-news__title {
		font-size: var(--font-size-body);
	}

	.card-news__excerpt {
		display: block;
	}
}

/* ============================================
   PRODUCTS
   ============================================ */

.products-section {
	padding-block: var(--space-7);
	background-color: color-mix(in srgb, var(--color-light-beige) 30%, var(--color-bg));
}

.products-section__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);
	margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
	.products-section__header {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--space-5);
	}
}

.products-section__heading-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

/* Keep the longer Products eyebrow on one line at narrow widths */
.products-section__heading-group .section-eyebrow {
	letter-spacing: 0.14em;
}

@media (min-width: 768px) {
	.products-section__heading-group .section-eyebrow {
		letter-spacing: 0.22em;
	}
}

.products-section__heading {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--font-size-display);
	font-weight: var(--font-weight-regular);
	font-style: italic;
	line-height: var(--line-height-display);
	color: var(--color-text-primary);
	letter-spacing: var(--letter-spacing-display);
}

.products-section__subtext {
	margin: 0;
	font-size: var(--font-size-small);
	color: var(--color-text-secondary);
}

.products-section__view-all {
	font-family: var(--font-heading);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-heading);
	color: var(--color-brand);
	white-space: nowrap;
	transition: color var(--transition-fast) var(--ease-default);

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

.products-section__footer {
	margin-top: var(--space-7);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
}

@media (min-width: 768px) {
	.products-section__footer {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-4) var(--space-6);
	}
}

.products-section__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: start;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ── card-product ── */
.card-product__link {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--radius-md);
	background-color: var(--color-bg);
	box-shadow: var(--shadow-sm);
	transition:
		box-shadow var(--transition-fast) var(--ease-default),
		transform var(--transition-fast) var(--ease-default);

	&:hover {
		box-shadow: var(--shadow-md);
		transform: translateY(-4px);
	}
}

.card-product__thumbnail {
	overflow: hidden;
	position: relative;
	aspect-ratio: 1 / 1;
	background-color: var(--color-border);
}

.card-product__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-base) var(--ease-smooth);
}

.card-product__link:hover .card-product__img {
	transform: scale(1.04);
}

/* Subtle warm-white hover overlay — shared by News + Products (incl. Other Products) cards */
.card-news__thumbnail::after,
.card-product__thumbnail::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--color-bg);
	opacity: 0;
	transition: opacity var(--transition-base) var(--ease-default);
	pointer-events: none;
}

.card-news__link:hover .card-news__thumbnail::after,
.card-product__link:hover .card-product__thumbnail::after {
	opacity: 0.16;
}

.card-product__name {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin: 0;
	padding: var(--space-3) var(--space-4);
}

.card-product__name-ja {
	font-family: var(--font-body);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-primary);
}

.card-product__name-en {
	font-family: var(--font-heading);
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-regular);
	color: var(--color-text-secondary);
	letter-spacing: var(--letter-spacing-heading);
}

@media (min-width: 768px) {
	.products-section__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-5);
	}

	.products-section__grid .card-product__name-ja {
		font-size: var(--font-size-body);
	}
}

/* ============================================
   SOCIAL MESSAGE
   ============================================ */

/* Understated treatment — used on the top page and the About page (the only
   two places this section appears, so no modifier is needed). */
.social-message {
	padding-block: var(--space-5);
	background-color: color-mix(in srgb, var(--color-light-beige) 30%, var(--color-bg));
}

.social-message__text {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-small);
	line-height: var(--line-height-small);
	color: var(--color-text-secondary);
	text-align: center;
	letter-spacing: var(--letter-spacing-body);
}

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

.footer {
	background-color: var(--color-dark-brown);
	/* Mobile: top padding tuned so the first nav item's spacing matches the
	   inter-item rhythm (no top divider on the first item). */
	padding-top: var(--space-3);
	padding-bottom: var(--space-5);
}

.footer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

/* ── Footer sections (accordion containers) ── */
.footer__section {
	width: 100%;
}

.footer__section-heading {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-2);
	width: auto;
	margin-inline: auto;
	padding: var(--space-3) var(--space-6);
	font-family: var(--font-heading);
	font-style: italic;
	font-size: var(--font-size-nav);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-heading);
	color: var(--color-soft-gold);
	background: color-mix(in srgb, var(--color-soft-gold) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--color-soft-gold) 30%, transparent);
	border-radius: var(--radius-full);
	cursor: default;
	pointer-events: none;
}

.footer__section-body {
	padding-block: 0;
}

/* ── Accordion indicator icon ── */
.footer__section-heading__icon {
	display: none;
	align-items: center;
	justify-content: center;
	font-style: normal;
	font-size: var(--font-size-body);
	line-height: 1;
	color: var(--color-soft-gold);
	/* Optical nudge so the "+" glyph aligns with the Menu text */
	transform: translateY(-0.11em);
	transition: transform var(--transition-base) var(--ease-smooth);
}

/* ── JS-activated accordion (mobile, toggled by JS) ── */
.footer--js-accordion {
	& .footer__section-heading {
		cursor: pointer;
		pointer-events: auto;
	}

	& .footer__section-heading:hover {
		background: color-mix(in srgb, var(--color-soft-gold) 14%, transparent);
	}

	& .footer__section-heading__icon {
		display: flex;
	}

	& .footer__section-heading[aria-expanded="true"] .footer__section-heading__icon {
		transform: translateY(-0.11em) rotate(45deg);
	}

	& .footer__section-body {
		overflow: hidden;
		max-height: 0;
		padding-block: 0;
		transition:
			max-height var(--transition-base) var(--ease-default),
			padding-block var(--transition-base) var(--ease-default);
	}

	& .footer__section-body--open {
		max-height: 24rem;
		padding-block: var(--space-4);
	}
}

/* ── Nav links ── */
.footer__nav-list {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	width: 100%;
	max-width: none;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

/* Mobile: full-viewport-width divider below every footer item (no accordion).
   Negative inline margin cancels .footer__inner's 1.25rem padding so the line
   bleeds edge to edge; the link keeps its own inline padding for the text. */
.footer__nav-item {
	margin-inline: -1.25rem;
	border-bottom: 1px solid color-mix(in srgb, var(--color-soft-gold) 22%, transparent);
}

.footer__nav-link {
	display: block;
	padding-block: var(--space-3);
	padding-inline: 1.25rem;
	font-family: var(--font-body);
	font-size: var(--font-size-nav);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-nav);
	letter-spacing: var(--letter-spacing-heading);
	text-align: center;
	color: var(--color-light-beige);
	transition: color var(--transition-fast) var(--ease-default);

	&:hover {
		color: var(--color-soft-gold);
	}
}

/* ── Social / action icons (cart + Instagram) — static row, header icon style ── */
.footer__social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
}

.footer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	color: var(--color-light-beige);
	transition: color var(--transition-fast) var(--ease-default);

	&:hover {
		color: var(--color-soft-gold);
	}
}

.footer__social-icon {
	width: 1.5rem;
	height: 1.5rem;
}

/* ── Copyright ── */
.footer__copyright {
	margin: 0;
	font-family: "Work Sans", var(--font-body);
	font-size: var(--font-size-caption);
	line-height: var(--line-height-small);
	text-align: center;
	color: color-mix(in srgb, var(--color-light-beige) 70%, transparent);
	letter-spacing: var(--letter-spacing-heading);
}

/* ── Desktop footer (768px+) ── */
@media (min-width: 768px) {
	.footer {
		padding-block: var(--space-5);
	}

	/* Row 1: centered nav (col 2) + icon group (col 3); Row 2: centered copyright.
	   Equal 1fr side columns keep the nav optically centered in the footer. */
	.footer__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: var(--space-5);
	}

	/* Menu nav centered in the middle column */
	.footer__section {
		grid-column: 2;
		width: auto;
	}

	/* Menu heading not needed on desktop — kept in the DOM for the mobile accordion */
	.footer__section-heading {
		display: none;
	}

	.footer__section-body {
		padding-block: 0;
		overflow: visible;
		max-height: none;
	}

	/* Flatten the footer nav into one horizontal row with subtle "/" separators */
	.footer__nav-list {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		column-gap: 0;
		row-gap: var(--space-2);
		max-width: none;
	}

	/* Drop the mobile full-bleed stacked dividers on desktop (uses "/" separators) */
	.footer__nav-item {
		display: inline-flex;
		align-items: center;
		margin-inline: 0;
		border: none;
	}

	.footer__nav-link {
		display: inline-block;
		padding-block: var(--space-1);
		padding-inline: 0;
	}

	.footer__nav-item:not(:last-child)::after {
		content: "/";
		margin-inline: var(--space-4);
		font-size: var(--font-size-caption);
		font-style: normal;
		color: color-mix(in srgb, var(--color-light-beige) 35%, transparent);
	}

	/* Cart + Instagram icon group at the right (col 3) */
	.footer__social {
		grid-column: 3;
		justify-self: end;
		margin-top: 0;
	}

	/* Copyright centered on the footer's bottom line */
	.footer__copyright {
		grid-column: 1 / -1;
		margin: 0;
		padding-top: var(--space-5);
		border-top: 1px solid color-mix(in srgb, var(--color-soft-gold) 15%, transparent);
		text-align: center;
	}
}

/* ============================================
   DESKTOP — 1440px
   ============================================ */

/* ── Hero 1440px ── */
@media (min-width: 1440px) {
	.hero__content {
		padding-inline: var(--space-10);
		padding-bottom: var(--space-10);
	}

	.hero__deco-text {
		font-size: var(--font-size-body);
		margin-bottom: var(--space-4);
	}

	.hero__tagline {
		margin-bottom: var(--space-4);
	}

	.hero__copy {
		margin-bottom: var(--space-7);
	}

	.hero__cta {
		padding: var(--space-4) var(--space-7);
		font-size: var(--font-size-body);
	}
}

/* ── Instagram 1440px — already defined above (6-col grid) ── */

/* ── News 1440px ── */
@media (min-width: 1440px) {
	.news-section {
		padding-block: var(--space-8);
	}

	.news-section__list {
		gap: var(--space-6);
	}

	.card-news__thumbnail {
		aspect-ratio: 16 / 10;
	}

	.card-news__body {
		padding: var(--space-6);
	}

	.card-news__title {
		font-size: var(--font-size-h4);
	}

	.card-news__excerpt {
		font-size: var(--font-size-small);
	}
}

/* ── Products 1440px ── */
@media (min-width: 1440px) {
	.products-section {
		padding-block: var(--space-8);
	}

	.products-section__grid {
		gap: var(--space-6);
	}

	.card-product__name {
		padding: var(--space-4) var(--space-5);
	}

	.card-product__name-ja {
		font-size: var(--font-size-body);
	}

	.card-product__name-en {
		font-size: var(--font-size-small);
	}
}

/* ── Social message 1440px ── */
@media (min-width: 1440px) {
	.social-message {
		padding-block: var(--space-6);
	}

	.social-message__text {
		font-size: var(--font-size-body);
	}
}

/* ── Footer 1440px ── */
@media (min-width: 1440px) {
	.footer {
		padding-block: var(--space-5);
	}
}

/* ============================================
   ABOUT PAGE — Container helpers
   ============================================ */

.breadcrumb__inner,
.about-intro__inner,
.about-story__inner,
.about-staff__inner,
.about-facility__inner,
.about-location__inner {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

@media (min-width: 768px) {
	.breadcrumb__inner,
	.about-intro__inner,
	.about-story__inner,
	.about-staff__inner,
	.about-facility__inner,
	.about-location__inner {
		padding-inline: var(--container-pad);
	}
}

/* ============================================
   BREADCRUMB
   ============================================ */

.breadcrumb {
	padding-block: var(--space-3);
	background-color: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
}

.breadcrumb__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumb__item {
	display: flex;
	align-items: center;
	gap: var(--space-2);

	&:not(:last-child)::after {
		content: '/';
		font-size: var(--font-size-caption);
		color: var(--color-text-secondary);
	}
}

.breadcrumb__link {
	font-size: var(--font-size-caption);
	color: var(--color-text-secondary);
	transition: color var(--transition-fast) var(--ease-default);

	&:hover {
		color: var(--color-brand);
	}
}

.breadcrumb__current {
	font-size: var(--font-size-caption);
	color: var(--color-text-primary);
}

/* ============================================
   ABOUT INTRO
   ============================================ */

.about-intro {
	padding-block: var(--space-5);
	background-color: color-mix(in srgb, var(--color-light-beige) 30%, var(--color-bg));
	text-align: center;
}

.about-intro__label {
	display: block;
	margin: 0 0 var(--space-3);
	font-family: var(--font-heading);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.25em;
	color: var(--color-accent);
}

.about-intro__heading {
	margin: 0 0 var(--space-4);
	font-family: var(--font-heading);
	font-size: var(--font-size-h1);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-h2);
	color: var(--color-text-primary);
	letter-spacing: var(--letter-spacing-heading);
}

.about-intro__lead {
	margin: 0;
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	color: var(--color-text-secondary);
	letter-spacing: var(--letter-spacing-body);
}

.about-intro__tagline {
	margin: 0;
	font-family: var(--font-hero);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-h4);
	color: var(--color-text-secondary);
	letter-spacing: var(--letter-spacing-h1);
}

@media (min-width: 768px) {
	.about-intro {
		padding-block: var(--space-6);
	}

	.about-intro__heading {
		font-size: var(--font-size-display);
	}

	.about-intro__tagline {
		font-size: var(--font-size-h4);
	}
}

/* ============================================
   ABOUT STORY
   ============================================ */

.about-story {
	padding-block: var(--space-7);
	background-color: var(--color-bg);
}

.about-story__header {
	margin-bottom: var(--space-6);
}

.about-story__label {
	display: block;
	margin: 0 0 var(--space-3);
	font-family: var(--font-heading);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.2em;
	color: var(--color-accent);
}

.about-story__heading {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-h2);
	color: var(--color-text-primary);
	letter-spacing: var(--letter-spacing-heading);
}

.about-story__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.about-story__text {
	margin: 0;
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	color: var(--color-text-primary);
	letter-spacing: var(--letter-spacing-body);
}

.about-story__columns {
	display: grid;
	gap: var(--space-6);
}

/* Narrow: single image fills the text container width, scaling with the
   viewport (mirrors the Access section's .about-location__photo-img). */
.about-story__media {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
}

.about-story__media-item {
	overflow: hidden;
	border-radius: var(--radius-md);
	background-color: var(--color-border);
}

.about-story__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

@media (min-width: 768px) {
	.about-story {
		padding-block: var(--space-8);
	}

	/* Tablet: proportional split fills the container; text stays under its 42rem cap */
	.about-story__columns {
		grid-template-columns: 1.4fr 1fr;
		align-items: start;
		gap: var(--space-8);
	}

	.about-story__body {
		max-width: 42rem;
	}

	.about-story__media {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}
}

/* Desktop: text hugs its 42rem cap, images take the rest — fills the container,
   no gap between text and images (mirrors the Access section's width feel) */
@media (min-width: 1440px) {
	.about-story__columns {
		grid-template-columns: minmax(0, 42rem) 1fr;
	}
}

/* ============================================
   ABOUT STAFF
   ============================================ */

.about-staff {
	padding-block: var(--space-7);
	background-color: var(--color-bg);
	text-align: center;
}

.about-staff__header {
	margin-bottom: var(--space-6);
}

.about-staff__label {
	display: block;
	margin: 0 0 var(--space-3);
	font-family: var(--font-heading);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.2em;
	color: var(--color-accent);
}

.about-staff__heading {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-h2);
	color: var(--color-text-primary);
	letter-spacing: var(--letter-spacing-heading);
}

/* ── staff-list ── */

.staff-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2) var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.staff-list__item {
	margin: 0;
	padding: 0;
}

.staff-list__name {
	font-family: var(--font-heading);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-secondary);
	letter-spacing: var(--letter-spacing-heading);
}

@media (min-width: 768px) {
	.about-staff {
		padding-block: var(--space-8);
	}

	.staff-list {
		gap: var(--space-2) var(--space-7);
	}

	.staff-list__name {
		font-size: var(--font-size-h4);
	}
}

/* ============================================
   ABOUT LOCATION
   ============================================ */

.about-location {
	padding-block: var(--space-7);
	background-color: color-mix(in srgb, var(--color-light-beige) 30%, var(--color-bg));
}

.about-location__header {
	margin-bottom: var(--space-6);
}

.about-location__label {
	display: block;
	margin: 0 0 var(--space-3);
	font-family: var(--font-heading);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.2em;
	color: var(--color-accent);
}

.about-location__heading {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-h2);
	color: var(--color-text-primary);
	letter-spacing: var(--letter-spacing-heading);
}

.about-location__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.about-location__map {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-md);
	background-color: var(--color-border);
	aspect-ratio: 16 / 9;
}

/* Google Maps embed iframe fills the 16:9 map container */
.about-location__map-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.about-location__map--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: color-mix(in srgb, var(--color-light-beige) 30%, var(--color-bg));
}

/* Demo-only faux map illustration (token-colored). Swap for a real map later. */
.about-location__map-art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.map-art__land {
	fill: color-mix(in srgb, var(--color-light-beige) 30%, var(--color-bg));
}

.map-art__block {
	fill: color-mix(in srgb, var(--color-dark-brown) 6%, var(--color-light-beige));
}

.map-art__park {
	fill: color-mix(in srgb, var(--color-green-soft) 45%, var(--color-bg));
}

.map-art__road line {
	stroke: var(--color-bg);
	stroke-linecap: round;
}

.map-art__road--minor line {
	stroke-width: 5;
}

.map-art__road--major line {
	stroke-width: 10;
}

.about-location__map-overlay {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-3) var(--space-5);
	background-color: color-mix(in srgb, var(--color-bg) 80%, transparent);
	border-radius: var(--radius-md);
	text-align: center;
}

.about-location__map-pin {
	color: var(--color-brand);
}

.about-location__map-label {
	font-family: var(--font-heading);
	font-style: italic;
	font-size: var(--font-size-body);
	color: var(--color-text-primary);
	letter-spacing: var(--letter-spacing-heading);
}

.about-location__map-sub {
	font-size: var(--font-size-caption);
	color: var(--color-text-secondary);
	letter-spacing: var(--letter-spacing-body);
}

/* Real demo map screenshot — covers the faux fallback when the file is present */
.about-location__map-img {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.about-location__photo {
	margin: var(--space-5) 0 0;
}

.about-location__photo-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-md);
}

.about-location__photo-caption {
	margin-top: var(--space-2);
	font-size: var(--font-size-caption);
	color: var(--color-text-secondary);
	letter-spacing: var(--letter-spacing-body);
	text-align: center;
}

/* ── location-info ── */

.location-info {
	margin: 0;
	padding: 0;
}

.location-info__row {
	display: flex;
	gap: var(--space-5);
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--color-border);

	&:first-child {
		border-top: 1px solid var(--color-border);
	}
}

.location-info__term {
	flex-shrink: 0;
	width: 5rem;
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-secondary);
	letter-spacing: var(--letter-spacing-body);
}

.location-info__desc {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin: 0;
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	color: var(--color-text-primary);
	letter-spacing: var(--letter-spacing-body);
}

.location-info__link {
	color: var(--color-brand);
	transition: color var(--transition-fast) var(--ease-default);

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

.location-info__note {
	font-size: var(--font-size-small);
	color: var(--color-text-secondary);
}

@media (min-width: 768px) {
	.about-location {
		padding-block: var(--space-8);
	}

	.about-location__content {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--space-8);
	}

	.about-location__map {
		flex: 1;
		aspect-ratio: 4 / 3;
	}

	.about-location__info {
		flex-shrink: 0;
		width: 20rem;
	}
}

/* ============================================
   PRODUCTS LIST PAGE — Container helpers
   ============================================ */

.products-intro__inner,
.products-grid__inner {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

@media (min-width: 768px) {
	.products-intro__inner,
	.products-grid__inner {
		padding-inline: var(--container-pad);
	}
}

/* ============================================
   PRODUCTS INTRO
   ============================================ */

.products-intro {
	padding-block: var(--space-5);
	background-color: color-mix(in srgb, var(--color-light-beige) 30%, var(--color-bg));
	text-align: center;
}

.products-intro__label {
	display: block;
	margin: 0 0 var(--space-3);
	font-family: var(--font-heading);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.25em;
	color: var(--color-accent);
}

.products-intro__heading {
	margin: 0 0 var(--space-4);
	font-family: var(--font-heading);
	font-size: var(--font-size-h1);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-h2);
	color: var(--color-text-primary);
	letter-spacing: var(--letter-spacing-heading);
}

.products-intro__lead {
	margin: 0 0 var(--space-3);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	color: var(--color-text-secondary);
	letter-spacing: var(--letter-spacing-body);
}

@media (min-width: 768px) {
	.products-intro {
		padding-block: var(--space-6);
	}

	.products-intro__heading {
		font-size: var(--font-size-display);
	}
}

/* ============================================
   PRODUCTS GRID
   ============================================ */

.products-grid {
	padding-block: var(--space-7);
	background-color: var(--color-bg);
}

/* Visually hidden heading — provides accessible section label */
.products-grid__heading-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.products-grid__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.products-grid {
		padding-block: var(--space-8);
	}

	.products-grid__list {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-5);
	}
}

@media (min-width: 1440px) {
	.products-grid__list {
		gap: var(--space-6);
	}
}

/* ============================================
   CONTACT PAGE — Container helpers
   ============================================ */

.contact-intro__inner,
.contact-form__inner,
.contact-note__inner {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

@media (min-width: 768px) {
	.contact-intro__inner,
	.contact-form__inner,
	.contact-note__inner {
		padding-inline: var(--container-pad);
	}
}

/* ============================================
   CONTACT INTRO
   ============================================ */

.contact-intro {
	padding-block: var(--space-5);
	background-color: color-mix(in srgb, var(--color-light-beige) 30%, var(--color-bg));
	text-align: center;
}

.contact-intro__label {
	display: block;
	margin: 0 0 var(--space-3);
	font-family: var(--font-heading);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.25em;
	color: var(--color-accent);
}

.contact-intro__heading {
	margin: 0 0 var(--space-4);
	font-family: var(--font-heading);
	font-size: var(--font-size-h1);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-h2);
	color: var(--color-text-primary);
	letter-spacing: var(--letter-spacing-heading);
}

.contact-intro__lead {
	margin: 0;
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	color: var(--color-text-secondary);
	letter-spacing: var(--letter-spacing-body);
}

@media (min-width: 768px) {
	.contact-intro {
		padding-block: var(--space-6);
	}

	.contact-intro__heading {
		font-size: var(--font-size-display);
	}
}

/* ============================================
   CONTACT FORM
   ============================================ */

.contact-form {
	padding-block: var(--space-7);
	background-color: var(--color-bg);
}

.contact-form__form {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

/* ── form-group ── */

.form-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.form-group__label {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-primary);
	letter-spacing: var(--letter-spacing-body);
}

.form-group__required {
	display: inline-flex;
	align-items: center;
	padding: var(--space-1) var(--space-2);
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-medium);
	line-height: 1.4;
	color: var(--color-text-on-dark);
	background-color: var(--color-brand);
	border-radius: var(--radius-sm);
	letter-spacing: var(--letter-spacing-body);
}

.form-group__input,
.form-group__textarea {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	color: var(--color-text-primary);
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	transition:
		border-color var(--transition-fast) var(--ease-default),
		box-shadow var(--transition-fast) var(--ease-default);
	appearance: none;

	&::placeholder {
		color: var(--color-border);
	}

	&:focus,
	&:focus-visible {
		outline: none;
		border-color: var(--color-brand);
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 20%, transparent);
	}
}

.form-group__textarea {
	min-height: 8rem;
	resize: vertical;
}

/* ── form-submit ── */

.form-submit {
	padding-top: var(--space-2);
	text-align: center;
}

.form-submit__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: var(--space-4) var(--space-7);
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-body);
	color: var(--color-text-on-dark);
	background-color: var(--color-brand);
	border: none;
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: background-color var(--transition-fast) var(--ease-default);

	&:hover {
		background-color: var(--color-accent);
	}
}

/* ── Contact Form 7 auto-format normalization ──
   When the Contact page renders via CF7, the plugin's auto-formatting wraps the
   BEM fields in stray <p> and inserts <br> (inside/after labels and inside each
   .form-group), which adds vertical space on top of the intended flex-gap
   rhythm. Neutralize that noise so the CF7-rendered form matches the approved
   local (static) spacing. Scoped to .contact-form__form only; the static
   fallback form contains no <p>/<br>, so these rules are no-ops there.
   (Descendant selector is used for <p> because CF7 nests the <p> inside each
   .form-group, so a direct-child selector would not reach them.) */
.contact-form__form br {
	display: none;
}

.contact-form__form p {
	margin: 0;
}

/* ── CF7 residual layout fixes ──
   With CF7's <p> wrappers and the suppressed <br>, the static-form assumptions
   (button centered via inherited text-align; label/field as flex-column
   siblings) no longer hold. These additive, scoped rules restore the intended
   layout without reopening the spacing normalization above. The .wpcf7-* rule
   is inert on the static fallback form (it has no CF7 wrappers). */
.contact-form__form .form-submit__btn {
	display: flex;
	margin-inline: auto;
}

.contact-form__form .form-group__label {
	flex-wrap: wrap;
}

.contact-form__form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
	/* Reproduce the static .form-group { gap: var(--space-2) } relationship:
	   in CF7 the label and field are siblings inside one <p>, so that gap no
	   longer applies and the field (and the 必須 badge above it) jams against
	   the label. This restores the same space-2 between label row and field.
	   Static form has no .wpcf7-form-control-wrap, so it is unaffected. */
	margin-top: var(--space-2);
}

@media (min-width: 768px) {
	.contact-form {
		padding-block: var(--space-8);
	}

	.contact-form__form {
		max-width: 40rem;
		margin-inline: auto;
	}

	.form-submit__btn {
		width: auto;
		min-width: 12rem;
	}
}

/* ============================================
   CONTACT NOTE
   ============================================ */

.contact-note {
	padding-block: var(--space-6);
	background-color: var(--color-bg);
	border-top: 1px solid var(--color-border);
}

.contact-note__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	max-width: 36rem;
	margin-inline: auto;
	text-align: center;
}

.contact-note__text {
	margin: 0;
	font-size: var(--font-size-small);
	line-height: var(--line-height-small);
	color: var(--color-text-secondary);
	letter-spacing: var(--letter-spacing-body);
}

.contact-note__phone {
	font-weight: var(--font-weight-medium);
	color: var(--color-brand);
	transition: color var(--transition-fast) var(--ease-default);

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

/* ============================================
   NEWS ARCHIVE PAGE
   ============================================ */

/* ── Container helpers ── */
.news-intro__inner,
.news-archive__inner {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

@media (min-width: 768px) {
	.news-intro__inner,
	.news-archive__inner {
		padding-inline: var(--container-pad);
	}
}

/* ── News intro ── */
.news-intro {
	padding-block: var(--space-5);
	background-color: color-mix(in srgb, var(--color-light-beige) 30%, var(--color-bg));
	text-align: center;
}

.news-intro__label {
	display: block;
	margin: 0 0 var(--space-3);
	font-family: var(--font-heading);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.25em;
	color: var(--color-accent);
}

.news-intro__heading {
	margin: 0 0 var(--space-4);
	font-family: var(--font-heading);
	font-size: var(--font-size-h1);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-h2);
	color: var(--color-text-primary);
	letter-spacing: var(--letter-spacing-heading);
}

/* Archive/search headings are Japanese — match the Privacy Policy heading
   (Gothic / Noto Sans JP). The News page "News" heading keeps the serif base.
   Double-class selector keeps this independent of stylesheet source order. */
.news-intro__heading.news-intro__heading--gothic {
	font-family: var(--font-body);
	font-size: clamp(1.5rem, 6vw, 1.75rem);
}

.news-intro__lead {
	margin: 0;
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	color: var(--color-text-secondary);
	letter-spacing: var(--letter-spacing-body);
}

@media (min-width: 768px) {
	.news-intro {
		padding-block: var(--space-6);
	}

	.news-intro__heading {
		font-size: var(--font-size-display);
	}

	.news-intro__heading.news-intro__heading--gothic {
		font-size: var(--font-size-h1);
	}
}

/* ── News archive layout ── */
.news-archive {
	padding-block: var(--space-7);
}

.news-archive__layout {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.news-archive__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ── card-news--list modifier: keep horizontal at all breakpoints ── */
@media (min-width: 768px) {
	.card-news--list .card-news__link {
		flex-direction: row;
		gap: var(--space-4);
	}

	.card-news--list .card-news__thumbnail {
		width: 9rem;
		aspect-ratio: 1;
	}

	.card-news--list .card-news__body {
		padding: var(--space-4) var(--space-5) var(--space-4) 0;
	}

	.card-news--list .card-news__title {
		font-size: var(--font-size-body);
	}

	.card-news--list .card-news__excerpt {
		display: block;
	}
}

/* ── Pagination ── */
.news-pagination {
	margin-block-start: var(--space-7);
}

.news-pagination__list {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.news-pagination__link,
.news-pagination__current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: var(--space-3);
	font-size: var(--font-size-small);
	border-radius: var(--radius-sm);
	transition:
		background-color var(--transition-fast) var(--ease-default),
		color var(--transition-fast) var(--ease-default);
}

.news-pagination__current {
	background-color: var(--color-brand);
	color: var(--color-text-on-dark);
	font-weight: var(--font-weight-medium);
}

.news-pagination__link {
	color: var(--color-text-secondary);
	border: 1px solid var(--color-border);

	&:hover {
		background-color: var(--color-bg-section);
		color: var(--color-text-primary);
	}
}

.news-pagination__link--next {
	padding-inline: var(--space-4);
	letter-spacing: var(--letter-spacing-heading);
}

/* ── Sidebar ── */
.news-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.news-sidebar__section {
	padding: var(--space-5);
	background-color: color-mix(in srgb, var(--color-light-beige) 30%, var(--color-bg));
	border-radius: var(--radius-md);
}

.news-sidebar__heading {
	margin: 0 0 var(--space-4);
	font-family: var(--font-heading);
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-h4);
	letter-spacing: var(--letter-spacing-display);
	color: var(--color-text-primary);
	padding-block-end: var(--space-3);
	border-bottom: 1px solid var(--color-border);
}

.news-sidebar__cat-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.news-sidebar__cat-link {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	font-size: var(--font-size-small);
	border-radius: var(--radius-sm);
	color: var(--color-text-primary);
	transition: background-color var(--transition-fast) var(--ease-default);

	&::before {
		content: '';
		display: inline-block;
		width: 0.375rem;
		height: 0.375rem;
		border-radius: var(--radius-full);
		background-color: var(--color-accent);
		flex-shrink: 0;
	}

	&:hover {
		background-color: var(--color-bg);
	}
}

.news-sidebar__year-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.news-sidebar__year-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	font-size: var(--font-size-small);
	border-radius: var(--radius-sm);
	color: var(--color-text-primary);
	transition: background-color var(--transition-fast) var(--ease-default);

	&:hover {
		background-color: var(--color-bg);
	}
}

.news-sidebar__year-count {
	font-size: var(--font-size-caption);
	color: var(--color-text-secondary);
	letter-spacing: var(--letter-spacing-body);
}

/* ── Responsive: 768px ── */
@media (min-width: 768px) {
	.news-archive {
		padding-block: var(--space-8);
	}

	.news-archive__layout {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--space-8);
	}

	.news-archive__main {
		flex: 1;
		min-width: 0;
	}

	.news-archive__sidebar {
		flex-shrink: 0;
		width: 18rem;
	}

	.news-archive__list {
		gap: var(--space-5);
	}
}

/* ============================================
   NEWS SINGLE PAGE
   ============================================ */

/* ── Container helpers ── */
.article-single__inner,
.post-nav__inner {
	width: 100%;
	max-width: 52rem;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

@media (min-width: 768px) {
	.article-single__inner,
	.post-nav__inner {
		padding-inline: var(--container-pad);
	}
}

/* ── Article single ── */
.article-single {
	padding-block: var(--space-7);
}

.article-single__header {
	margin-block-end: var(--space-6);
}

.article-single__meta {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-block-end: var(--space-4);
}

.article-single__date {
	font-size: var(--font-size-small);
	color: var(--color-text-secondary);
	letter-spacing: var(--letter-spacing-body);
}

.article-single__category {
	padding: var(--space-1) var(--space-2);
	font-size: var(--font-size-caption);
	color: var(--color-brand);
	background-color: var(--color-light-beige);
	border-radius: var(--radius-sm);
	letter-spacing: var(--letter-spacing-body);
}

.article-single__title {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-h2);
	letter-spacing: var(--letter-spacing-heading);
	color: var(--color-text-primary);
}

.article-single__featured {
	margin: 0 0 var(--space-7);
	overflow: hidden;
	border-radius: var(--radius-md);
}

.article-single__featured-img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* ── Post content (WordPress the_content() output) ── */
.post-content {
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	color: var(--color-text-primary);

	& h2 {
		margin: var(--space-7) 0 var(--space-4);
		font-family: var(--font-body);
		font-size: var(--font-size-h3);
		font-weight: var(--font-weight-medium);
		line-height: var(--line-height-h3);
		letter-spacing: var(--letter-spacing-heading);
		color: var(--color-text-primary);
		padding-block-end: var(--space-3);
		border-bottom: 1px solid var(--color-border);
	}

	& h3 {
		margin: var(--space-6) 0 var(--space-3);
		font-family: var(--font-body);
		font-size: var(--font-size-h4);
		font-weight: var(--font-weight-medium);
		line-height: var(--line-height-h4);
		letter-spacing: var(--letter-spacing-heading);
		color: var(--color-text-primary);
	}

	& p {
		margin: 0 0 var(--space-5);
	}

	& p:last-child {
		margin-block-end: 0;
	}

	& ul,
	& ol {
		margin: 0 0 var(--space-5);
		padding-inline-start: var(--space-5);
	}

	& li {
		margin-block-end: var(--space-2);
		line-height: var(--line-height-body);

		&:last-child {
			margin-block-end: 0;
		}
	}

	& img {
		width: 100%;
		height: auto;
		border-radius: var(--radius-md);
		margin-block: var(--space-6);
	}
}

/* ── Post navigation ── */
.post-nav {
	padding-block: var(--space-7);
	border-top: 1px solid var(--color-border);
}

.post-nav__list {
	display: flex;
	justify-content: space-between;
	gap: var(--space-5);
}

.post-nav__item--prev {
	margin-inline-end: auto;
}

.post-nav__item--next {
	margin-inline-start: auto;
}

.post-nav__link {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	transition: opacity var(--transition-fast) var(--ease-default);

	&:hover {
		opacity: 0.7;
	}
}

.post-nav__link--next {
	text-align: right;
}

.post-nav__label {
	font-size: var(--font-size-caption);
	color: var(--color-text-secondary);
	letter-spacing: var(--letter-spacing-body);
}

.post-nav__title {
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-h4);
	color: var(--color-text-primary);
}

/* ── Responsive: 768px ── */
@media (min-width: 768px) {
	.article-single {
		padding-block: var(--space-8);
	}

	.article-single__title {
		font-size: var(--font-size-h1);
	}

	.post-nav {
		padding-block: var(--space-7);
	}
}

/* ============================================
   PRODUCT SINGLE PAGE
   ============================================ */

/* ── Container helpers ── */
.product-single__inner,
.other-products__inner {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

@media (min-width: 768px) {
	.product-single__inner,
	.other-products__inner {
		padding-inline: var(--container-pad);
	}
}

/* ── Product single ── */
.product-single {
	padding-block: var(--space-7);
}

.product-single__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-7);
}

/* ── Gallery ── */
.gallery-product {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.gallery-product__main-link {
	display: block;
	overflow: hidden;
	border-radius: var(--radius-md);
	cursor: zoom-in;
}

.gallery-product__main-img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	transition: transform var(--transition-base) var(--ease-default);

	&:hover {
		transform: scale(1.02);
	}
}

.gallery-product__thumbs {
	display: flex;
	gap: var(--space-3);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-block-end: var(--space-2);
}

.gallery-product__thumb {
	flex-shrink: 0;
	width: 72px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--radius-sm);
	background: none;
	cursor: pointer;
	scroll-snap-align: start;
	overflow: hidden;
	transition: border-color var(--transition-fast) var(--ease-default);

	&:hover {
		border-color: var(--color-accent);
	}
}

.gallery-product__thumb--active {
	border-color: var(--color-brand);
}

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

/* ── Product info ── */
.product-info {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.product-info__heading {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0;
}

.product-info__name-ja {
	display: block;
	font-family: var(--font-body);
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-h2);
	letter-spacing: var(--letter-spacing-heading);
	color: var(--color-text-primary);
}

.product-info__name-en {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-h3);
	letter-spacing: var(--letter-spacing-display);
	color: var(--color-text-secondary);
}

.product-info__desc {
	margin: 0;
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	color: var(--color-text-primary);
}

.product-info__fields {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--color-border);
}

.product-info__field {
	display: flex;
	gap: var(--space-5);
	padding-block: var(--space-4);
	border-bottom: 1px solid var(--color-border);
}

.product-info__field-term {
	flex-shrink: 0;
	width: 5.5rem;
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-secondary);
	line-height: var(--line-height-body);
}

.product-info__field-desc {
	margin: 0;
	font-size: var(--font-size-small);
	line-height: var(--line-height-small);
	color: var(--color-text-primary);
}

/* ── Other Products ── */
.other-products {
	padding-block: var(--space-7);
	background-color: color-mix(in srgb, var(--color-light-beige) 30%, var(--color-bg));
}

.other-products__header {
	margin-block-end: var(--space-6);
	text-align: center;
}

.other-products__heading {
	margin: 0 0 var(--space-2);
	font-family: var(--font-heading);
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-h2);
	letter-spacing: var(--letter-spacing-display);
	color: var(--color-text-primary);
}

.other-products__subtext {
	margin: 0;
	font-size: var(--font-size-small);
	color: var(--color-text-secondary);
}

.other-products__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ── Responsive: 768px ── */
@media (min-width: 768px) {
	.product-single {
		padding-block: var(--space-8);
	}

	.product-single__content {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--space-8);
	}

	.gallery-product {
		flex: 1;
		position: sticky;
		top: calc(var(--header-h) + var(--space-5));
	}

	.gallery-product__thumb {
		width: 80px;
	}

	.product-info {
		flex: 1;
	}

	.other-products__list {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-5);
	}
}

/* ── Responsive: 1440px ── */
@media (min-width: 1440px) {
	.gallery-product__thumb {
		width: 96px;
	}

	.other-products__list {
		grid-template-columns: repeat(5, 1fr);
	}
}

/* ============================================
   PRIVACY POLICY PAGE
   ============================================ */

/* ── Container helpers ── */
.pp-intro__inner,
.pp-body__inner {
	width: 100%;
	max-width: 52rem;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

@media (min-width: 768px) {
	.pp-intro__inner,
	.pp-body__inner {
		padding-inline: var(--container-pad);
	}
}

/* ── Page intro ── */
.pp-intro {
	padding-block: var(--space-5);
	background-color: color-mix(in srgb, var(--color-light-beige) 30%, var(--color-bg));
	text-align: center;
}

.pp-intro__label {
	display: block;
	margin: 0 0 var(--space-3);
	font-family: var(--font-heading);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.25em;
	color: var(--color-accent);
}

.pp-intro__heading {
	margin: 0 0 var(--space-3);
	font-family: var(--font-body);
	/* mobile: shrink the long JP heading so it doesn't clip at narrow widths; 768px+ overrides to --font-size-h1 */
	font-size: clamp(1.5rem, 6vw, 1.75rem);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-h2);
	color: var(--color-text-primary);
	letter-spacing: var(--letter-spacing-heading);
}

@media (min-width: 768px) {
	.pp-intro {
		padding-block: var(--space-6);
	}

	.pp-intro__heading {
		font-size: var(--font-size-h1);
	}
}

/* ── Legal body ── */
.pp-body {
	padding-block: var(--space-8);
}

/* ── post-content additions: links + address ── */
.post-content a {
	color: var(--color-brand);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--color-brand) 40%, transparent);
	text-underline-offset: 0.2em;
	transition: text-decoration-color var(--transition-fast) var(--ease-default);

	&:hover {
		text-decoration-color: var(--color-brand);
	}
}

.post-content__address {
	font-style: normal;
	margin-block-end: var(--space-5);
	line-height: var(--line-height-body);
	color: var(--color-text-primary);
}

/* ============================================
   SHARED COMPONENTS — BTN
   ============================================ */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4) var(--space-7);
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-body);
	border: none;
	border-radius: var(--radius-full);
	cursor: pointer;
	text-decoration: none;
	transition:
		background-color var(--transition-fast) var(--ease-default),
		color var(--transition-fast) var(--ease-default);
}

.btn--primary {
	color: var(--color-text-on-dark);
	background-color: var(--color-brand);

	&:hover {
		background-color: var(--color-accent);
	}
}

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

.main--error {
	display: flex;
	flex-direction: column;
}

.error-block {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-block: var(--space-9);
	padding-inline: 1.25rem;
	gap: var(--space-4);
}

.error-block__number {
	margin: 0;
	font-family: var(--font-heading);
	font-size: clamp(5rem, 20vw, 9rem);
	font-weight: var(--font-weight-regular);
	line-height: 1;
	letter-spacing: var(--letter-spacing-display);
	color: var(--color-light-beige);
}

.error-block__heading {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-h2);
	letter-spacing: var(--letter-spacing-heading);
	color: var(--color-text-primary);
}

.error-block__message {
	margin: 0;
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	color: var(--color-text-secondary);
}

.error-block__message-en {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-heading);
	color: var(--color-text-secondary);
}

/* ============================================
   SCROLL REVEAL
   ============================================ */

/* Initial hidden state — JS adds .is-visible when element enters viewport */
.js-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity var(--transition-slow) var(--ease-smooth),
		transform var(--transition-slow) var(--ease-smooth);
}

.js-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ============================================
   FOCUS / A11Y
   ============================================ */

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

/* ============================================
   REDUCED MOTION
   ============================================ */

@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;
	}

	html {
		scroll-behavior: auto;
	}
}