/*
 * Figma 特集ページ A–D (95:1019): top area, body blocks and the list CTA.
 * Loaded only on features that opted into the new design (paleri_core_enqueue_feature_layout).
 * Numbers are the 1440px frames; the 390px frames apply at 767px and below.
 * `body.` raises specificity over the older A–D rules in the theme style.css, which use !important.
 */

/* ---------- Top area ---------- */

body.feature-design-enabled .paleri-feature-top {
	--top-ink: #030303;
	--top-muted: #6e6e6e;
	--top-gutter: max(22px, calc((100% - 1200px) / 2));
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0 !important;
	color: #030303;
	font-family: "Zen Kaku Gothic New", sans-serif;
	line-break: strict;
}

body.feature-design-enabled .paleri-feature-top__cover {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	padding: 64px var(--top-gutter);
	background: var(--feature-hero-bg, #e0f0fa);
	color: var(--top-ink);
}

/* Dark top colours flip the text drawn straight on them (the D card and A title keep dark text). */
body.feature-design-enabled.feature-header-dark .paleri-feature-top__cover {
	--top-ink: #fff;
	--top-muted: rgba(255, 255, 255, .82);
}

body.feature-design-enabled.feature-header-dark .paleri-feature-top--b .paleri-feature-top__rule {
	background: #fff;
}

body.feature-design-enabled .paleri-feature-top__crumbs {
	margin: 0;
	color: var(--top-muted);
	font: 400 12px/19px Jost, sans-serif;
	letter-spacing: 0;
	white-space: pre;
}

body.feature-design-enabled .paleri-feature-top__crumbs a {
	color: inherit;
	text-decoration: none;
}

body.feature-design-enabled .paleri-feature-top__crumbs a:hover {
	text-decoration: underline;
}

/* The thumbnail spans the frame width at its own ratio (planned 16:9; never cropped). */
body.feature-design-enabled .paleri-feature-top__image {
	width: 100%;
	margin: 0;
}

body.feature-design-enabled .paleri-feature-top__image img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Figma 158:2 / 158:5: 60px sine wave into the page colour. */
body.feature-design-enabled .paleri-feature-top__wave {
	position: relative;
	height: 24px;
	background: var(--feature-hero-bg, #e0f0fa);
}

body.feature-design-enabled .paleri-feature-top__wave::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--feature-bg, #fff);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='24'%3E%3Cpath d='M0 12C10 4 20 4 30 12C40 20 50 20 60 12V24H0Z'/%3E%3C/svg%3E") 0 0 / 60px 24px repeat-x;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='24'%3E%3Cpath d='M0 12C10 4 20 4 30 12C40 20 50 20 60 12V24H0Z'/%3E%3C/svg%3E") 0 0 / 60px 24px repeat-x;
}

body.feature-design-enabled .paleri-feature-top__intro {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	min-width: 0;
}

body.feature-design-enabled .paleri-feature-top__eyebrow {
	margin: 0;
	color: var(--top-muted);
	font: 700 12px/19px Jost, sans-serif;
	letter-spacing: 0;
	white-space: pre;
}

body.feature-design-enabled .paleri-feature-top__rule {
	display: block;
	flex: none;
	width: 40px;
	height: 4px;
	background: #0050d8;
}

body.feature-design-enabled .paleri-feature-top__title {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--top-ink);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: 48px;
	font-weight: 900;
	line-height: 56px;
	letter-spacing: 0;
	overflow-wrap: anywhere;
}

body.feature-design-enabled .paleri-feature-top__lead {
	margin: 0;
	color: var(--top-muted);
	font-size: 15px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0;
	overflow-wrap: anywhere;
}

body.feature-design-enabled .paleri-feature-top__lead p {
	margin: 0;
}

/* Figma 229:20: 240×48, the arrow slides 4px on hover and press. */
body.feature-design-enabled .paleri-feature-top__cta {
	box-sizing: border-box;
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 240px;
	height: 48px;
	min-height: 0;
	padding: 0 24px;
	border: 1px solid #030303;
	border-radius: 9999px;
	background: #fff;
	color: #030303;
	font: 700 14px/24px "Zen Kaku Gothic New", sans-serif;
	letter-spacing: 0;
	text-decoration: none;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, padding 180ms ease;
}

body.feature-design-enabled .paleri-feature-top__arrow {
	font-size: 18px;
	line-height: 26px;
}

body.feature-design-enabled .paleri-feature-top__cta:hover {
	padding-right: 20px;
	border-color: #0050d8;
	background: #0050d8;
	color: #fff;
}

body.feature-design-enabled .paleri-feature-top__cta:active {
	padding-right: 20px;
	border-color: #030303;
	background: #b1d0fc;
	color: #030303;
	transition-duration: 80ms;
}

body.feature-design-enabled .paleri-feature-top__cta:focus-visible {
	outline: 3px solid #0050d8;
	outline-offset: -3px;
}

body.feature-design-enabled .paleri-feature-top .paleri-feature-share {
	margin: 0;
}

body.feature-design-enabled .paleri-feature-top__cover .paleri-feature-share__label {
	color: var(--top-muted);
}

/* A (131:2): thumbnail on the top colour, the title block on the page colour. */
body.feature-design-enabled .paleri-feature-top--a .paleri-feature-top__cover {
	gap: 20px;
	padding-bottom: 88px;
}

body.feature-design-enabled .paleri-feature-top--a .paleri-feature-top__intro {
	padding: 72px var(--top-gutter);
}

body.feature-design-enabled .paleri-feature-top--a .paleri-feature-top__lead {
	max-width: 800px;
}

body.feature-design-enabled .paleri-feature-top--a .paleri-feature-top__cta-row {
	display: flex;
	align-self: stretch;
	justify-content: center;
}

/* B (220:2): image and title side by side, sharing buttons centred underneath. */
body.feature-design-enabled .paleri-feature-top--b .paleri-feature-top__cover {
	display: grid;
	grid-template-columns: minmax(0, 734fr) minmax(0, 418fr);
	column-gap: 48px;
	align-items: center;
	padding: 48px var(--top-gutter) 32px;
}

body.feature-design-enabled .paleri-feature-top--b .paleri-feature-top__crumbs {
	grid-column: 1 / -1;
	margin-bottom: 24px;
}

body.feature-design-enabled .paleri-feature-top--b .paleri-feature-top__title {
	line-height: 52px;
}

body.feature-design-enabled .paleri-feature-top--b .paleri-feature-top__cover > .paleri-feature-share {
	grid-column: 1 / -1;
	justify-content: center;
	margin-top: 48px;
}

body.feature-design-enabled .paleri-feature-top--b.is-no-image .paleri-feature-top__intro {
	grid-column: 1 / -1;
}

/* C (220:1003): centred, the image above the title on both widths. */
body.feature-design-enabled .paleri-feature-top--c .paleri-feature-top__cover {
	align-items: center;
	gap: 32px;
}

body.feature-design-enabled .paleri-feature-top--c .paleri-feature-top__crumbs {
	align-self: stretch;
}

body.feature-design-enabled .paleri-feature-top--c .paleri-feature-top__intro {
	align-items: center;
	width: 100%;
	max-width: 960px;
	padding: 32px 0 24px;
	text-align: center;
}

body.feature-design-enabled .paleri-feature-top--c .paleri-feature-top__rule {
	width: 64px;
	background: #96fbeb;
}

body.feature-design-enabled .paleri-feature-top--c .paleri-feature-top__title {
	font-size: 52px;
	line-height: 68px;
}

/* D (220:2004): a white title card overlapping the image by 24px. */
body.feature-design-enabled .paleri-feature-top--d .paleri-feature-top__cover {
	gap: 20px;
}

body.feature-design-enabled .paleri-feature-top--d .paleri-feature-top__stack {
	display: flex;
	flex-direction: column;
	align-items: center;
}

body.feature-design-enabled .paleri-feature-top--d .paleri-feature-top__intro {
	--top-ink: #030303;
	--top-muted: #6e6e6e;
	position: relative;
	z-index: 1;
	width: 80%;
	margin-top: -24px;
	padding: 31px 39px;
	border: 1px solid #030303;
	background: #fff;
	gap: 16px;
}

body.feature-design-enabled .paleri-feature-top--d.is-no-image .paleri-feature-top__intro {
	margin-top: 0;
}

body.feature-design-enabled .paleri-feature-top--d .paleri-feature-top__intro::before {
	content: "";
	position: absolute;
	top: -4px;
	left: 39px;
	width: 64px;
	height: 6px;
	background: #ffbdb1;
}

body.feature-design-enabled .paleri-feature-top--d .paleri-feature-top__title {
	line-height: 50px;
}

body.feature-design-enabled .paleri-feature-top--d .paleri-feature-share__label {
	color: #6e6e6e;
}

@media (max-width: 1023px) {
	body.feature-design-enabled .paleri-feature-top--b .paleri-feature-top__cover {
		display: flex;
		align-items: stretch;
	}

	body.feature-design-enabled .paleri-feature-top--b .paleri-feature-top__crumbs {
		margin-bottom: 16px;
	}

	body.feature-design-enabled .paleri-feature-top--b .paleri-feature-top__intro {
		margin-top: 28px;
		gap: 16px;
	}

	body.feature-design-enabled .paleri-feature-top--b .paleri-feature-top__cover > .paleri-feature-share {
		justify-content: start;
		margin-top: 16px;
	}
}

@media (max-width: 767px) {
	body.feature-design-enabled .paleri-feature-top__cover {
		padding: 12px 22px 36px;
		gap: 16px;
	}

	body.feature-design-enabled .paleri-feature-top__crumbs {
		font-size: 10px;
		line-height: 16px;
	}

	/* Figma 479:2435 etc.: edge to edge. */
	body.feature-design-enabled .paleri-feature-top__image {
		width: calc(100% + 44px);
		margin: 0 -22px;
	}

	body.feature-design-enabled .paleri-feature-top__wave {
		height: 16px;
	}

	body.feature-design-enabled .paleri-feature-top__wave::before {
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='16'%3E%3Cpath d='M0 8C10 2.667 20 2.667 30 8C40 13.333 50 13.333 60 8V16H0Z'/%3E%3C/svg%3E") 0 0 / 60px 16px repeat-x;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='16'%3E%3Cpath d='M0 8C10 2.667 20 2.667 30 8C40 13.333 50 13.333 60 8V16H0Z'/%3E%3C/svg%3E") 0 0 / 60px 16px repeat-x;
	}

	body.feature-design-enabled .paleri-feature-top__intro {
		gap: 16px;
	}

	body.feature-design-enabled .paleri-feature-top__title {
		font-size: 32px;
		line-height: 38px;
	}

	body.feature-design-enabled .paleri-feature-top__lead {
		font-size: 14px;
		line-height: 22px;
	}

	body.feature-design-enabled .paleri-feature-top--a .paleri-feature-top__cover {
		padding-bottom: 32px;
		gap: 16px;
	}

	body.feature-design-enabled .paleri-feature-top--a .paleri-feature-top__intro {
		padding: 32px 22px;
	}

	body.feature-design-enabled .paleri-feature-top--b .paleri-feature-top__cover {
		padding: 12px 22px 32px;
		gap: 0;
	}

	body.feature-design-enabled .paleri-feature-top--b .paleri-feature-top__rule {
		height: 3px;
	}

	body.feature-design-enabled .paleri-feature-top--b .paleri-feature-top__title {
		line-height: 38px;
	}

	body.feature-design-enabled .paleri-feature-top--c .paleri-feature-top__cover {
		gap: 24px;
	}

	body.feature-design-enabled .paleri-feature-top--c .paleri-feature-top__intro {
		padding: 16px 0 8px;
	}

	body.feature-design-enabled .paleri-feature-top--c .paleri-feature-top__title {
		font-size: 30px;
		line-height: 42px;
	}

	body.feature-design-enabled .paleri-feature-top--d .paleri-feature-top__cover {
		gap: 16px;
	}

	body.feature-design-enabled .paleri-feature-top--d .paleri-feature-top__intro {
		align-items: center;
		width: 100%;
		margin-top: -8px;
		padding: 23px 21px;
	}

	body.feature-design-enabled .paleri-feature-top--d .paleri-feature-top__intro::before {
		top: -9px;
		left: 21px;
		height: 20px;
	}

	/* PTK 2026-09-30: everything in the card is centred (Figma mixes left and centre). */
	body.feature-design-enabled .paleri-feature-top--d .paleri-feature-top__eyebrow,
	body.feature-design-enabled .paleri-feature-top--d .paleri-feature-top__lead,
	body.feature-design-enabled .paleri-feature-top--d .paleri-feature-top__title {
		align-self: stretch;
		text-align: center;
	}

	body.feature-design-enabled .paleri-feature-top--d .paleri-feature-share {
		width: auto;
	}

	body.feature-design-enabled .paleri-feature-top--d .paleri-feature-share__label {
		text-align: center;
	}

	body.feature-design-enabled .paleri-feature-top--d .paleri-feature-top__title {
		font-size: 27px;
		line-height: 38px;
	}
}

/* ---------- Body sections ---------- */

/* Figma stacks the bands edge to edge; WordPress's flow layout would add 24px above the list and Related Features. */
body.feature-design-enabled .wp-block-post-content > .paleri-item-list,
body.feature-design-enabled .feature-single > .paleri-feature-related {
	margin-block: 0 !important;
}

body.feature-design-enabled .wp-block-post-content {
	counter-reset: paleri-feature-section paleri-feature-heading;
	line-break: strict;
}

/* Figma: text and product groups 48px (A: 64px), image blocks 80px, the list CTA 48/56 (A: 48/48). */
body.feature-design-enabled .paleri-feature-section {
	--fs-top: 48px;
	--fs-bottom: 48px;
	--fs-wave: 0px;
	padding: var(--fs-top) max(22px, calc((100% - 1200px) / 2)) calc(var(--fs-bottom) + var(--fs-wave)) !important;
}

body.feature-design-enabled.feature-layout-a .paleri-feature-section {
	--fs-top: 64px;
	--fs-bottom: 64px;
}

body.feature-design-enabled .paleri-feature-section:has(> .paleri-feature-section__inner > .wp-block-image:first-child) {
	--fs-top: 80px;
	--fs-bottom: 80px;
}

/* B–D: the text after an image block continues without its own top space. */
body.feature-design-enabled:not(.feature-layout-a) .paleri-feature-section:has(> .paleri-feature-section__inner > .wp-block-image:first-child) + .paleri-feature-section:has(> .paleri-feature-section__inner > p:first-child) {
	--fs-top: 0px;
}

body.feature-design-enabled .paleri-feature-section:has(> .paleri-feature-section__inner > .wp-block-buttons:only-child) {
	--fs-top: 48px;
	--fs-bottom: 56px;
}

body.feature-design-enabled.feature-layout-a .paleri-feature-section:has(> .paleri-feature-section__inner > .wp-block-buttons:only-child) {
	--fs-bottom: 48px;
}

/* Room for the wave that the next section draws over this one. */
body.feature-design-enabled .paleri-feature-section:has(+ .paleri-feature-section.has-divider-wave) {
	--fs-wave: 24px;
}

body.feature-design-enabled .paleri-feature-section__inner > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Pairs Figma does not show get one plain gap; the Figma pairs are set below. */
body.feature-design-enabled .paleri-feature-section__inner > * + * {
	margin-top: 24px !important;
}

body.feature-design-enabled .paleri-feature-section__inner > p {
	max-width: none !important;
	color: #030303;
	font: 500 15px/28px "Zen Kaku Gothic New", sans-serif !important;
	letter-spacing: 0;
}

body.feature-design-enabled .paleri-feature-section__inner > p + p {
	margin-top: 16px !important;
}

/* Figma 134:3: eyebrow, heading and the optional description, 12px apart. */
body.feature-design-enabled .paleri-feature-heading {
	margin: 0 !important;
	counter-increment: paleri-feature-heading;
}

body.feature-design-enabled .paleri-feature-heading__eyebrow {
	margin: 0 0 12px !important;
	color: var(--feature-heading-eyebrow-color, #6e6e6e) !important;
	font: 700 12px/19px Jost, sans-serif !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

body.feature-design-enabled .paleri-feature-heading__eyebrow::before {
	content: counter(paleri-feature-heading, decimal-leading-zero) " / " !important;
}

body.feature-design-enabled .paleri-feature-heading__eyebrow:empty::before {
	content: counter(paleri-feature-heading, decimal-leading-zero) !important;
}

body.feature-design-enabled .paleri-feature-heading__title {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	color: var(--feature-heading-color, #030303) !important;
	font: 700 32px/46px "Zen Kaku Gothic New", sans-serif !important;
	letter-spacing: 0 !important;
}

body.feature-design-enabled .paleri-feature-section__inner > .paleri-feature-heading + p {
	margin-top: 12px !important;
	color: #6e6e6e;
	font: 400 14px/22px "Zen Kaku Gothic New", sans-serif !important;
}

/* Figma 134:7: four columns, 24px apart, 32px below the heading block. */
body.feature-design-enabled .paleri-feature-item-grid {
	gap: 24px !important;
}

body.feature-design-enabled .paleri-feature-section__inner > .paleri-feature-item-grid:not(:first-child) {
	margin-top: 32px !important;
}

/*
 * The photo always fills the 5:6 frame (tall photos used to overflow and get cut), then the per-product
 * 画像倍率 applies. Offsets are stored for the 460×552 product-page frame, so they are converted to a share
 * of the frame like Code Snippets #18 does for the product page and catalogue cards.
 */
body.feature-design-enabled .paleri-feature-item-grid .paleri-feature-item-card__media img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-height: none !important;
	object-fit: contain !important;
	transform: translate(var(--paleri-product-image-x, 0), var(--paleri-product-image-y, 0)) scale(var(--paleri-product-image-scale, 1)) !important;
}

@supports (width: calc(tan(atan2(1px, 2px)) * 100%)) {
	body.feature-design-enabled .paleri-feature-item-grid .paleri-feature-item-card__media img {
		transform: translate(calc(tan(atan2(var(--paleri-product-image-x, 0px), 460px)) * 100%), calc(tan(atan2(var(--paleri-product-image-y, 0px), 552px)) * 100%)) scale(var(--paleri-product-image-scale, 1)) !important;
	}
}

/* Figma: the photo frame sits flat, at rest and on hover. The old design removed its offset shadow only in sections 1–3. */
body.feature-design-enabled .paleri-feature-item-grid .paleri-feature-item-card__media,
body.feature-design-enabled .paleri-feature-item-grid .paleri-feature-item-card:hover .paleri-feature-item-card__media {
	box-shadow: none;
}

/*
 * PTK 2026-10-01: the cards match the HOME product cards (measured on paleri.jp at 1440 and below 768):
 * 12px under the photo, colour pill 10px, brand Jost 14px grey, name 13px on one line with "…", price Jost 600 18px.
 */
body.feature-design-enabled .paleri-feature-item-grid .paleri-feature-item-card__link {
	gap: 0 !important;
}

body.feature-design-enabled .paleri-feature-item-grid .paleri-feature-item-card__body,
body.feature-design-enabled .paleri-feature-item-grid .paleri-feature-item-card__heading {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 0 !important;
	padding: 0 !important;
}

body.feature-design-enabled .paleri-feature-item-grid .paleri-feature-item-card__body {
	padding-top: 12px !important;
}

body.feature-design-enabled .paleri-feature-item-grid .paleri-feature-item-card__tag {
	display: inline-block !important;
	align-self: flex-start;
	box-sizing: border-box;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--tag, #f4f4f4);
	color: var(--tag-ink, #030303);
	font: 700 10px/14px Jost, "Zen Kaku Gothic New", sans-serif;
	letter-spacing: 0;
	white-space: nowrap;
}

body.feature-design-enabled .paleri-feature-item-grid .paleri-feature-item-card__brand {
	display: block !important;
	order: 0 !important;
	margin: 6px 0 !important;
	color: #6e6e6e !important;
	font: 700 14px/1.4 Jost, sans-serif !important;
	letter-spacing: 0 !important;
}

body.feature-design-enabled .paleri-feature-item-grid .paleri-feature-item-card__title {
	display: block !important;
	order: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	overflow: hidden !important;
	color: #030303 !important;
	font: 500 13px/1.25 Jost, "Zen Kaku Gothic New", sans-serif !important;
	letter-spacing: 0 !important;
	white-space: nowrap !important;
	text-overflow: ellipsis !important;
	-webkit-line-clamp: unset !important;
}

body.feature-design-enabled .paleri-feature-item-grid .paleri-feature-item-card__price {
	order: 0 !important;
	margin: 4px 0 0 !important;
	padding: 0 !important;
	color: #030303 !important;
	font: 600 18px/1.25 Jost, sans-serif !important;
	letter-spacing: 0 !important;
}

body.feature-design-enabled .paleri-feature-item-grid .paleri-feature-item-card__description {
	display: none !important;
}

/* Figma 232:2 / 232:10: grey bubble with a left tail; B and D open it with a pill button. */
body.feature-design-enabled .paleri-feature-comment {
	margin: 12px 0 0 !important;
	padding-left: 14px;
	color: #030303;
	font-family: "Zen Kaku Gothic New", sans-serif;
}

body.feature-design-enabled .paleri-feature-section__inner > .paleri-feature-comment:first-child {
	margin-top: 0 !important;
}

body.feature-design-enabled .paleri-feature-comment__toggle {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 240px;
	height: 48px;
	padding: 0 24px;
	border: 1px solid #030303;
	border-radius: 9999px;
	background: #fff;
	color: #030303;
	font: 700 14px/24px "Zen Kaku Gothic New", sans-serif;
	letter-spacing: 0;
	list-style: none;
	cursor: pointer;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

body.feature-design-enabled .paleri-feature-comment__toggle::-webkit-details-marker {
	display: none;
}

body.feature-design-enabled .paleri-feature-comment__toggle:hover {
	border-color: #0050d8;
	background: #0050d8;
	color: #fff;
}

body.feature-design-enabled .paleri-feature-comment__toggle:active {
	border-color: #030303;
	background: #b1d0fc;
	color: #030303;
	transition-duration: 80ms;
}

body.feature-design-enabled .paleri-feature-comment__toggle:focus-visible {
	outline: 3px solid #0050d8;
	outline-offset: -3px;
}

body.feature-design-enabled .paleri-feature-comment__close,
body.feature-design-enabled .paleri-feature-comment[open] .paleri-feature-comment__open {
	display: none;
}

body.feature-design-enabled .paleri-feature-comment[open] .paleri-feature-comment__close {
	display: inline;
}

body.feature-design-enabled .paleri-feature-comment.is-toggle .paleri-feature-comment__bubble {
	margin-top: 16px;
}

/* PTK 2026-10-01: a flat fill with no outline. Unset colour is white, or grey where the section itself is white. */
body.feature-design-enabled .paleri-feature-comment__bubble {
	--comment-fill: var(--comment-bg, #fff);
	position: relative;
	box-sizing: border-box;
	display: block;
	padding: 20px 24px;
	border: 0;
	border-radius: 16px;
	background: var(--comment-fill);
	color: var(--comment-ink, #030303);
}

body.feature-design-enabled .paleri-feature-section[style*="--feature-section-background:#ffffff"] .paleri-feature-comment__bubble {
	--comment-fill: var(--comment-bg, #f4f4f4);
}

body.feature-design-enabled .paleri-feature-comment__tail {
	position: absolute;
	top: 50%;
	left: -14px;
	width: 18px;
	height: 36px;
	margin-top: -18px;
	overflow: visible;
}

body.feature-design-enabled .paleri-feature-comment__tail path {
	fill: var(--comment-fill);
}

body.feature-design-enabled .paleri-feature-comment__body {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0;
	overflow-wrap: anywhere;
}

/* Figma 209:2: the image keeps its own ratio at the text width, caption 12px below. */
body.feature-design-enabled .paleri-feature-section__inner > .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

body.feature-design-enabled .paleri-feature-section__inner > .wp-block-image figcaption {
	margin: 12px 0 0;
	color: #6e6e6e;
	font: 400 12px/22px "Zen Kaku Gothic New", sans-serif;
	letter-spacing: 0;
	text-align: left;
}

/* Product detail sits on the section padding; Figma 158:9 is 1099px wide. */
body.feature-design-enabled .paleri-feature-section__inner > .paleri-product-detail {
	width: min(100%, 1100px);
	margin: 0 auto !important;
}

/* Figma 158:9: 380px image, 625px column, gaps of 18px, buttons three across (200×54). */
body.feature-design-enabled .paleri-product-detail .prod[data-product-embed] {
	grid-template-columns: minmax(0, 380px) minmax(0, 625px);
	justify-content: space-between;
	column-gap: 48px;
}

body.feature-design-enabled .paleri-product-detail .prod[data-product-embed] .info > * {
	margin-top: 0;
	margin-bottom: 0;
}

body.feature-design-enabled .paleri-product-detail .prod[data-product-embed] .info__title {
	margin-top: 12.343px;
}

body.feature-design-enabled .paleri-product-detail .prod[data-product-embed] :is(.price, .vars, .shops) {
	margin-top: 18.09px;
}

body.feature-design-enabled .paleri-product-detail .prod[data-product-embed] .vars {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0;
	border: 0;
}

body.feature-design-enabled .paleri-product-detail .prod[data-product-embed] .vars__h {
	margin: 0;
	color: #030303;
	font: 700 18px/19.543px "Zen Kaku Gothic New", sans-serif;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
}

body.feature-design-enabled .paleri-product-detail .prod[data-product-embed] .vars__h::after {
	content: "：";
}

body.feature-design-enabled .paleri-product-detail .prod[data-product-embed] .vars__row {
	gap: 10.286px;
}

body.feature-design-enabled .paleri-product-detail .prod[data-product-embed] .shops {
	grid-template-columns: repeat(3, minmax(0, 200px));
	gap: 12.343px;
}

body.feature-design-enabled .paleri-product-detail .prod[data-product-embed] .shop {
	box-sizing: border-box;
	min-height: 54px;
	padding: 0 20.571px 0 24.686px;
}

body.feature-design-enabled .paleri-product-detail .prod[data-product-embed] .shops__notice {
	margin-top: 12.343px;
}

body.feature-design-enabled .paleri-product-detail .prod[data-product-embed] .spec {
	display: none;
}

/* Divider (#dedede) 18px under the note, the ad box 18px under the divider. */
body.feature-design-enabled .paleri-product-detail .prod[data-product-embed] .affiliate-note {
	position: relative;
	margin-top: 37.21px;
}

body.feature-design-enabled .paleri-product-detail .prod[data-product-embed] .affiliate-note::before {
	content: "";
	position: absolute;
	top: -20.66px;
	right: 0;
	left: 0;
	height: 1.03px;
	background: #dedede;
}

/* Three buttons need about 450px; narrower columns stack them. */
@media (max-width: 1023px) {
	body.feature-design-enabled .paleri-product-detail .prod[data-product-embed] .shops {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Figma 142:3 / 142:7: 120px (mobile 60px) sine wave drawn over the previous section. */
body.feature-design-enabled .paleri-feature-section.has-divider-wave::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	top: -24px !important;
	left: 0 !important;
	width: 100% !important;
	height: 24px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--feature-section-background, var(--feature-bg, #fff)) !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='24'%3E%3Cpath d='M0 12C20 4 40 4 60 12C80 20 100 20 120 12V24H0Z'/%3E%3C/svg%3E") 0 0 / 120px 24px repeat-x !important;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='24'%3E%3Cpath d='M0 12C20 4 40 4 60 12C80 20 100 20 120 12V24H0Z'/%3E%3C/svg%3E") 0 0 / 120px 24px repeat-x !important;
	pointer-events: none;
}

/* Figma 137:3: the centred pill below the item list. */
body.feature-design-enabled .paleri-feature-section__inner > .wp-block-buttons {
	justify-content: center;
	gap: 16px;
}

body.feature-design-enabled .paleri-feature-section .wp-block-button__link {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 220px;
	height: 48px;
	padding: 0 24px;
	border: 1px solid #030303;
	background: #fff;
	color: #030303;
	font: 700 14px/22px "Zen Kaku Gothic New", sans-serif;
	letter-spacing: 0;
	text-decoration: none;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

body.feature-design-enabled .paleri-feature-section .wp-block-button__link:hover {
	border-color: #0050d8;
	background: #0050d8;
	color: #fff;
}

body.feature-design-enabled .paleri-feature-section .wp-block-button__link:active {
	border-color: #030303;
	background: #b1d0fc;
	color: #030303;
	transition-duration: 80ms;
}

body.feature-design-enabled .paleri-feature-section .wp-block-button__link:focus-visible {
	outline: 3px solid #0050d8;
	outline-offset: -3px;
}

@media (prefers-reduced-motion: no-preference) {
	html:has(body.feature-design-enabled) {
		scroll-behavior: smooth;
	}
}

@media (max-width: 767px) {
	body.feature-design-enabled .paleri-feature-section {
		--fs-top: 32px;
		--fs-bottom: 32px;
	}

	body.feature-design-enabled.feature-layout-a .paleri-feature-section {
		--fs-top: 32px;
		--fs-bottom: 32px;
	}

	body.feature-design-enabled .paleri-feature-section:has(> .paleri-feature-section__inner > .paleri-feature-heading) {
		--fs-top: 36px;
		--fs-bottom: 36px;
	}

	body.feature-design-enabled .paleri-feature-section:has(> .paleri-feature-section__inner > .wp-block-image:first-child) {
		--fs-top: 32px;
		--fs-bottom: 32px;
	}

	body.feature-design-enabled .paleri-feature-section:has(> .paleri-feature-section__inner > .paleri-product-detail) {
		--fs-top: 48px;
		--fs-bottom: 48px;
	}

	body.feature-design-enabled .paleri-feature-section:has(> .paleri-feature-section__inner > .wp-block-buttons:only-child) {
		--fs-top: 32px;
		--fs-bottom: 40px;
	}

	body.feature-design-enabled.feature-layout-a .paleri-feature-section:has(> .paleri-feature-section__inner > .wp-block-buttons:only-child) {
		--fs-bottom: 32px;
	}

	body.feature-design-enabled .paleri-feature-section:has(+ .paleri-feature-section.has-divider-wave) {
		--fs-wave: 16px;
	}

	body.feature-design-enabled .paleri-feature-section.has-divider-wave::before {
		top: -16px !important;
		height: 16px !important;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='16'%3E%3Cpath d='M0 8C10 2.667 20 2.667 30 8C40 13.333 50 13.333 60 8V16H0Z'/%3E%3C/svg%3E") 0 0 / 60px 16px repeat-x !important;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='16'%3E%3Cpath d='M0 8C10 2.667 20 2.667 30 8C40 13.333 50 13.333 60 8V16H0Z'/%3E%3C/svg%3E") 0 0 / 60px 16px repeat-x !important;
	}

	body.feature-design-enabled .paleri-feature-section__inner > p {
		font-size: 14px !important;
		line-height: 26px !important;
	}

	/* Figma 158:73: one column, 24px apart; buttons stack full width; the category row shows under the divider. */
	body.feature-design-enabled .paleri-product-detail .prod[data-product-embed] {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 28px;
	}

	body.feature-design-enabled .paleri-product-detail .prod[data-product-embed] :is(.price, .vars, .shops) {
		margin-top: 24px;
	}

	body.feature-design-enabled .paleri-product-detail .prod[data-product-embed] .info__title {
		margin-top: 12px;
	}

	body.feature-design-enabled .paleri-product-detail .prod[data-product-embed] .shops {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	body.feature-design-enabled .paleri-product-detail .prod[data-product-embed] .shop {
		min-height: 52px;
		padding: 0 20px 0 24px;
	}

	body.feature-design-enabled .paleri-product-detail .prod[data-product-embed] .shops__notice {
		margin-top: 12px;
	}

	body.feature-design-enabled .paleri-product-detail .prod[data-product-embed] .spec {
		display: grid;
		position: relative;
		margin-top: 49px;
	}

	body.feature-design-enabled .paleri-product-detail .prod[data-product-embed] .spec::before {
		content: "";
		position: absolute;
		top: -25px;
		right: 0;
		left: 0;
		height: 1px;
		background: #dedede;
	}

	body.feature-design-enabled .paleri-product-detail .prod[data-product-embed] .affiliate-note {
		margin-top: 24px;
	}

	body.feature-design-enabled .paleri-product-detail .prod[data-product-embed] .affiliate-note::before {
		content: none;
	}

	body.feature-design-enabled .paleri-feature-heading__title {
		font-size: 24px !important;
		line-height: 36px !important;
	}

	body.feature-design-enabled .paleri-feature-section__inner > .paleri-feature-heading + p {
		font-size: 14px !important;
		line-height: 22px !important;
	}

	body.feature-design-enabled .paleri-feature-item-grid {
		gap: 28px 16px !important;
	}

	body.feature-design-enabled .paleri-feature-section__inner > .paleri-feature-item-grid:not(:first-child) {
		margin-top: 24px !important;
	}

	/* HOME below 768: pill 9px, brand 12px; name and price stay 13px / 18px. */
	body.feature-design-enabled .paleri-feature-item-grid .paleri-feature-item-card__tag {
		padding: 2px 8px;
		font-size: 9px;
		line-height: 1.4;
	}

	body.feature-design-enabled .paleri-feature-item-grid .paleri-feature-item-card__brand {
		font-size: 12px !important;
	}

	/* PTK 2026-10-01: a three-column group stays three columns on phones instead of wrapping to 2 + 1. */
	body.feature-design-enabled .paleri-feature-item-grid.is-columns-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 24px 10px !important;
	}

	body.feature-design-enabled .paleri-feature-item-grid.is-columns-3 .paleri-feature-item-card__brand {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}