/**
 * Derang — product taxonomy description (warm coffee-shop)
 */

.derang-cat-desc:not(:has(.term-description)):not(:has(.page-description)),
.derang-cat-desc[hidden] {
	display: none;
}

.derang-cat-desc {
	--dcd-sage: #95b193;
	--dcd-sage-deep: #7d937a;
	--dcd-sage-soft: rgba(149, 177, 147, 0.14);
	--dcd-forest: #334b31;
	--dcd-ink: #10110e;
	--dcd-muted: #5f675c;
	--dcd-line: rgba(51, 75, 49, 0.12);
	--dcd-paper: #f5f8f3;
	--dcd-paper-2: #eaf1e7;
	--dcd-radius: 28px;

	position: relative;
	isolation: isolate;
	margin: 48px 0 28px;
	padding: 8px;
	overflow: hidden;
	overflow-anchor: none;
	border-radius: var(--dcd-radius);
	background:
		linear-gradient(145deg, rgba(149, 177, 147, 0.22), transparent 42%),
		linear-gradient(325deg, rgba(51, 75, 49, 0.08), transparent 48%),
		linear-gradient(180deg, var(--dcd-paper) 0%, var(--dcd-paper-2) 100%);
	opacity: 1;
	transform: none;
}

.derang-cat-desc__atmosphere {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}

.derang-cat-desc__orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(18px);
}

.derang-cat-desc__orb--a {
	top: -48px;
	right: -36px;
	width: 180px;
	height: 180px;
	background: radial-gradient(circle, rgba(149, 177, 147, 0.45) 0%, transparent 70%);
}

.derang-cat-desc__orb--b {
	bottom: -60px;
	left: -20px;
	width: 220px;
	height: 220px;
	background: radial-gradient(circle, rgba(131, 139, 118, 0.28) 0%, transparent 72%);
}

.derang-cat-desc__grain {
	position: absolute;
	inset: 0;
	opacity: 0.35;
	background-image: radial-gradient(rgba(16, 17, 14, 0.05) 0.6px, transparent 0.7px);
	background-size: 3px 3px;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 90%);
}

.derang-cat-desc__panel {
	position: relative;
	z-index: 1;
	padding: clamp(24px, 3vw, 36px) clamp(16px, 2.5vw, 28px) clamp(28px, 3vw, 40px);
}

.derang-cat-desc .term-description,
.derang-cat-desc .page-description {
	max-width: none;
	width: 100%;
	margin: 0;
	color: var(--dcd-muted);
	font-size: 16px;
	line-height: 2;
	text-align: right;
}

@media (min-width: 992px) {
	.derang-cat-desc {
		margin: 40px 0 24px;
		padding: 4px;
	}

	.derang-cat-desc__panel {
		padding: 28px 24px 32px;
	}
}

.derang-cat-desc .term-description > *:first-child {
	margin-top: 0;
}

/* Title hierarchy */
.derang-cat-desc .term-description > h1:first-child,
.derang-cat-desc .term-description > h2:first-child {
	position: relative;
	margin: 0 0 22px;
	padding-bottom: 18px;
	color: var(--dcd-ink);
	font-size: clamp(1.55rem, 2.4vw, 2.05rem);
	font-weight: 800;
	line-height: 1.45;
	letter-spacing: -0.02em;
}

.derang-cat-desc .term-description > h1:first-child::after,
.derang-cat-desc .term-description > h2:first-child::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 72px;
	height: 3px;
	border-radius: 999px;
	background: linear-gradient(90deg, transparent, var(--dcd-sage) 18%, var(--dcd-forest));
}

.derang-cat-desc .term-description h2,
.derang-cat-desc .term-description h3 {
	position: relative;
	margin: 34px 0 14px;
	padding-right: 16px;
	color: var(--dcd-forest);
	font-size: clamp(1.12rem, 1.5vw, 1.3rem);
	font-weight: 750;
	line-height: 1.55;
}

.derang-cat-desc .term-description h2::before,
.derang-cat-desc .term-description h3::before {
	content: "";
	position: absolute;
	top: 0.35em;
	right: 0;
	width: 4px;
	height: 1.15em;
	border-radius: 999px;
	background: var(--dcd-sage);
}

.derang-cat-desc .term-description p {
	margin: 0 0 1em;
	text-align: justify;
	text-justify: inter-word;
}

.derang-cat-desc .term-description a {
	color: var(--dcd-forest);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: rgba(149, 177, 147, 0.55);
	text-underline-offset: 3px;
	transition: color 0.25s ease, text-decoration-color 0.25s ease;
}

.derang-cat-desc .term-description a:hover {
	color: var(--dcd-sage-deep);
	text-decoration-color: var(--dcd-sage);
}

/* Guide table */
.derang-cat-desc .term-description table {
	width: 100%;
	margin: 22px 0 28px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	border: 1px solid var(--dcd-line);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.55);
	box-shadow: none;
}

.derang-cat-desc .term-description thead th {
	padding: 14px 18px;
	background: linear-gradient(180deg, rgba(149, 177, 147, 0.28), rgba(149, 177, 147, 0.14));
	color: var(--dcd-forest);
	font-size: 14px;
	font-weight: 800;
	text-align: right;
	border-bottom: 1px solid var(--dcd-line);
}

.derang-cat-desc .term-description tbody td {
	padding: 13px 18px;
	border-bottom: 1px solid rgba(51, 75, 49, 0.08);
	color: var(--dcd-ink);
	font-size: 14.5px;
	line-height: 1.8;
	vertical-align: top;
}

.derang-cat-desc .term-description tbody tr:last-child td {
	border-bottom: 0;
}

.derang-cat-desc .term-description tbody tr:nth-child(even) td {
	background: rgba(149, 177, 147, 0.06);
}

.derang-cat-desc .term-description tbody td:first-child {
	width: 34%;
	color: var(--dcd-forest);
	font-weight: 700;
	white-space: nowrap;
}

/* Inline show-more / close buttons (from term content) */
.derang-cat-desc .term-description button[id^="more_content_"],
.derang-cat-desc .term-description .custom-more-content-toggle,
.derang-cat-desc .term-description .derang-cat-desc__more {
	appearance: none !important;
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	min-width: 168px !important;
	margin: 8px auto 0 !important;
	padding: 13px 28px !important;
	border: 1px solid transparent !important;
	border-radius: 999px !important;
	background: var(--dcd-sage) !important;
	color: #fff !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	cursor: pointer !important;
	box-shadow: 0 10px 24px rgba(149, 177, 147, 0.28) !important;
	transition:
		background-color 0.28s ease,
		transform 0.28s ease,
		box-shadow 0.28s ease !important;
}

/* Win over inline scripts + avoid empty button wrappers after expand */
.derang-cat-desc .term-description button[id^="more_content_"].is-hidden,
.derang-cat-desc .term-description .derang-cat-desc__more.is-hidden,
.derang-cat-desc .term-description .derang-cat-desc__more-wrap.is-hidden {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
}

.derang-cat-desc .term-description button[id^="more_content_"]:hover,
.derang-cat-desc .term-description .custom-more-content-toggle:hover,
.derang-cat-desc .term-description .derang-cat-desc__more:hover {
	background: var(--dcd-sage-deep) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 14px 28px rgba(125, 147, 122, 0.32) !important;
}

.derang-cat-desc .term-description button[id^="more_content_"]:active,
.derang-cat-desc .term-description .custom-more-content-toggle:active,
.derang-cat-desc .term-description .derang-cat-desc__more:active {
	transform: translateY(0) !important;
}

.derang-cat-desc .term-description button[id$="_close"] {
	background: transparent !important;
	color: var(--dcd-forest) !important;
	border-color: rgba(51, 75, 49, 0.22) !important;
	box-shadow: none !important;
}

.derang-cat-desc .term-description button[id$="_close"]:hover {
	background: rgba(149, 177, 147, 0.12) !important;
	border-color: rgba(149, 177, 147, 0.45) !important;
	color: var(--dcd-forest) !important;
	box-shadow: none !important;
}

.derang-cat-desc .term-description div[style*="text-align: center"] {
	margin: 22px 0 8px !important;
}

/* Expanded block fade */
.derang-cat-desc .term-description [id^="more_content_"][id$="_content"],
.derang-cat-desc .term-description .custom-more-content-hidden {
	overflow-anchor: none;
	animation: derangCatDescReveal 0.45s ease;
}

@keyframes derangCatDescReveal {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 767.98px) {
	.derang-cat-desc {
		margin: 32px 0 18px;
		border-radius: 22px;
	}

	.derang-cat-desc__panel {
		padding: 24px 18px 28px;
	}

	.derang-cat-desc .term-description {
		font-size: 15px;
		line-height: 1.95;
	}

	.derang-cat-desc .term-description tbody td:first-child {
		white-space: normal;
		width: 40%;
	}

	.derang-cat-desc .term-description table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

@media (prefers-reduced-motion: reduce) {
	.derang-cat-desc,
	.derang-cat-desc .term-description button[id^="more_content_"],
	.derang-cat-desc .term-description .custom-more-content-toggle,
	.derang-cat-desc .term-description .derang-cat-desc__more,
	.derang-cat-desc .term-description [id^="more_content_"][id$="_content"],
	.derang-cat-desc .term-description .custom-more-content-hidden {
		transition: none !important;
		animation: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
}