/* ==========================================================================
   JakoStore — Material 3 Expressive design system
   1. Tokens (color, type, shape, motion, elevation)
   2. Base & typography
   3. Layout helpers
   4. Components (buttons, chips, cards, fields, badges…)
   5. App chrome (top bar, drawer, search view, bottom nav, footer)
   6. Homepage sections
   7. Blog, pages & prose
   8. Utilities, motion & accessibility
   ========================================================================== */

/* 1. TOKENS ================================================================ */
:root {
	--md-ref-typeface-brand: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--md-ref-typeface-plain: var(--md-ref-typeface-brand);
	--md-ref-typeface-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--jd-accent: #C9F53B;
	--jd-on-accent: #141A00;
	--jd-secondary: #7B61FF;
	--jd-on-secondary: #FFFFFF;
	--jd-ink: #111116;

	/* Shape scale (M3 Expressive) */
	--md-sys-shape-corner-extra-small: 4px;
	--md-sys-shape-corner-small: 8px;
	--md-sys-shape-corner-medium: 12px;
	--md-sys-shape-corner-large: 16px;
	--md-sys-shape-corner-large-increased: 20px;
	--md-sys-shape-corner-extra-large: 28px;
	--md-sys-shape-corner-extra-large-increased: 32px;
	--md-sys-shape-corner-extra-extra-large: 48px;
	--md-sys-shape-corner-full: 999px;

	/* Motion — expressive springs */
	--md-sys-motion-spring-fast-spatial: cubic-bezier(0.42, 1.67, 0.21, 0.9);
	--md-sys-motion-spring-default-spatial: cubic-bezier(0.38, 1.21, 0.22, 1);
	--md-sys-motion-spring-slow-spatial: cubic-bezier(0.39, 1.29, 0.35, 0.98);
	--md-sys-motion-spring-fast-effects: cubic-bezier(0.31, 0.94, 0.34, 1);
	--md-sys-motion-spring-default-effects: cubic-bezier(0.34, 0.8, 0.34, 1);
	--md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
	--md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
	--jd-dur-1: 150ms;
	--jd-dur-2: 250ms;
	--jd-dur-3: 400ms;
	--jd-dur-4: 600ms;

	/* State layers */
	--md-sys-state-hover: 0.08;
	--md-sys-state-focus: 0.1;
	--md-sys-state-pressed: 0.12;

	/* Layout */
	--jd-container: 1280px;
	--jd-container-narrow: 760px;
	--jd-gutter: clamp(16px, 4vw, 32px);
	--jd-topbar-h: 72px;
	--jd-section-y: clamp(64px, 9vw, 128px);
	--jd-admin-bar: 0px;

	/* Light scheme (default when no JS & light preference) */
	--md-sys-color-primary: #16161D;
	--md-sys-color-on-primary: #FFFFFF;
	--md-sys-color-primary-container: var(--jd-accent);
	--md-sys-color-on-primary-container: var(--jd-on-accent);
	--md-sys-color-secondary: var(--jd-secondary);
	--md-sys-color-on-secondary: var(--jd-on-secondary);
	--md-sys-color-secondary-container: color-mix(in oklab, var(--jd-secondary) 16%, #FFFFFF);
	--md-sys-color-on-secondary-container: color-mix(in oklab, var(--jd-secondary) 55%, #000000);
	--md-sys-color-tertiary: #00796B;
	--md-sys-color-tertiary-container: #BFF3E8;
	--md-sys-color-on-tertiary-container: #00201C;
	--md-sys-color-error: #BA1A1A;
	--md-sys-color-on-error: #FFFFFF;
	--md-sys-color-error-container: #FFDAD6;
	--md-sys-color-on-error-container: #410002;
	--md-sys-color-success: #1B7F3B;
	--md-sys-color-success-container: #CBF3D4;
	--md-sys-color-on-success-container: #00210B;
	--md-sys-color-surface: #F7F7F4;
	--md-sys-color-surface-dim: #DCDCD6;
	--md-sys-color-surface-bright: #FFFFFF;
	--md-sys-color-surface-container-lowest: #FFFFFF;
	--md-sys-color-surface-container-low: #F1F1ED;
	--md-sys-color-surface-container: #EBEBE6;
	--md-sys-color-surface-container-high: #E5E5E0;
	--md-sys-color-surface-container-highest: #DFDFD9;
	--md-sys-color-on-surface: #16161D;
	--md-sys-color-on-surface-variant: #4B4B55;
	--md-sys-color-outline: #787882;
	--md-sys-color-outline-variant: #D3D3CC;
	--md-sys-color-inverse-surface: #1B1B22;
	--md-sys-color-inverse-on-surface: #F3F3EE;
	--md-sys-color-inverse-primary: var(--jd-accent);
	--md-sys-color-scrim: #000000;

	--md-sys-elevation-1: 0 1px 2px rgb(20 20 30 / 0.06), 0 1px 3px 1px rgb(20 20 30 / 0.04);
	--md-sys-elevation-2: 0 2px 6px 2px rgb(20 20 30 / 0.06), 0 1px 2px rgb(20 20 30 / 0.08);
	--md-sys-elevation-3: 0 8px 24px -4px rgb(20 20 30 / 0.12), 0 2px 6px rgb(20 20 30 / 0.06);
	--md-sys-elevation-4: 0 24px 60px -12px rgb(20 20 30 / 0.22), 0 4px 12px rgb(20 20 30 / 0.06);

	--jd-logo-bg: #111116;
	--jd-logo-fg: #FFFFFF;
	--jd-logo-tag: var(--jd-accent);
	--jd-link: var(--md-sys-color-on-surface);
	--jd-grid-line: rgb(20 20 30 / 0.06);
	--jd-glow: color-mix(in oklab, var(--jd-accent) 55%, transparent);

	color-scheme: light;
}

/* Dark scheme */
:root[data-theme="dark"] {
	--md-sys-color-primary: var(--jd-accent);
	--md-sys-color-on-primary: var(--jd-on-accent);
	--md-sys-color-primary-container: color-mix(in oklab, var(--jd-accent) 16%, #101014);
	--md-sys-color-on-primary-container: color-mix(in oklab, var(--jd-accent) 88%, #FFFFFF);
	--md-sys-color-secondary: color-mix(in oklab, var(--jd-secondary) 72%, #FFFFFF);
	--md-sys-color-on-secondary: color-mix(in oklab, var(--jd-secondary) 30%, #000000);
	--md-sys-color-secondary-container: color-mix(in oklab, var(--jd-secondary) 28%, #101014);
	--md-sys-color-on-secondary-container: color-mix(in oklab, var(--jd-secondary) 22%, #FFFFFF);
	--md-sys-color-tertiary: #7FDCCB;
	--md-sys-color-tertiary-container: #004D44;
	--md-sys-color-on-tertiary-container: #BFF3E8;
	--md-sys-color-error: #FFB4AB;
	--md-sys-color-on-error: #690005;
	--md-sys-color-error-container: #93000A;
	--md-sys-color-on-error-container: #FFDAD6;
	--md-sys-color-success: #8FDBA2;
	--md-sys-color-success-container: #0E4F24;
	--md-sys-color-on-success-container: #CBF3D4;
	--md-sys-color-surface: #0F0F13;
	--md-sys-color-surface-dim: #0F0F13;
	--md-sys-color-surface-bright: #35353C;
	--md-sys-color-surface-container-lowest: #0A0A0D;
	--md-sys-color-surface-container-low: #16161B;
	--md-sys-color-surface-container: #1B1B21;
	--md-sys-color-surface-container-high: #24242B;
	--md-sys-color-surface-container-highest: #2F2F37;
	--md-sys-color-on-surface: #EDEDF0;
	--md-sys-color-on-surface-variant: #B7B7C1;
	--md-sys-color-outline: #8B8B95;
	--md-sys-color-outline-variant: #34343D;
	--md-sys-color-inverse-surface: #EDEDF0;
	--md-sys-color-inverse-on-surface: #1B1B21;
	--md-sys-color-inverse-primary: #16161D;

	--md-sys-elevation-1: 0 1px 2px rgb(0 0 0 / 0.4), 0 1px 3px 1px rgb(0 0 0 / 0.2);
	--md-sys-elevation-2: 0 2px 6px 2px rgb(0 0 0 / 0.25), 0 1px 2px rgb(0 0 0 / 0.4);
	--md-sys-elevation-3: 0 10px 28px -4px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.3);
	--md-sys-elevation-4: 0 28px 70px -12px rgb(0 0 0 / 0.7), 0 4px 12px rgb(0 0 0 / 0.3);

	--jd-logo-bg: var(--jd-accent);
	--jd-logo-fg: var(--jd-on-accent);
	--jd-logo-tag: var(--jd-on-accent);
	--jd-link: var(--jd-accent);
	--jd-grid-line: rgb(255 255 255 / 0.05);
	--jd-glow: color-mix(in oklab, var(--jd-accent) 35%, transparent);

	color-scheme: dark;
}

/* 2. BASE ================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--jd-topbar-h) + 24px);
	interpolate-size: allow-keywords;
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--md-ref-typeface-plain);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--md-sys-color-on-surface);
	background: var(--md-sys-color-surface);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
	transition: background-color var(--jd-dur-3) var(--md-sys-motion-easing-standard), color var(--jd-dur-3) var(--md-sys-motion-easing-standard);
}

body.jd-lock { overflow: hidden; }

.admin-bar { --jd-admin-bar: 32px; }
@media (max-width: 782px) { .admin-bar { --jd-admin-bar: 46px; } }
@media (max-width: 600px) { .admin-bar { --jd-admin-bar: 0px; } }

img,
svg,
video,
iframe { max-width: 100%; }
img,
video { height: auto; display: block; }

a {
	color: var(--jd-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--jd-dur-1) ease;
}
a:hover { color: var(--md-sys-color-on-surface); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--md-ref-typeface-brand);
	font-weight: 750;
	line-height: 1.12;
	letter-spacing: -0.025em;
	margin: 0 0 0.5em;
	color: var(--md-sys-color-on-surface);
	text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }
h4 { font-size: 1.125rem; }
h5, h6 { font-size: 1rem; }

p { margin: 0 0 1em; text-wrap: pretty; }

code, kbd, pre, samp { font-family: var(--md-ref-typeface-mono); font-size: 0.9em; }

hr {
	border: 0;
	height: 1px;
	background: var(--md-sys-color-outline-variant);
	margin: 2rem 0;
}

::selection { background: var(--jd-accent); color: var(--jd-on-accent); }

:focus-visible {
	outline: 3px solid var(--md-sys-color-secondary);
	outline-offset: 2px;
	border-radius: 6px;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
.screen-reader-text:focus,
.skip-link:focus {
	clip: auto !important;
	clip-path: none;
	height: auto;
	width: auto;
	z-index: 1000;
	top: 12px;
	left: 12px;
	padding: 12px 20px;
	background: var(--jd-accent);
	color: var(--jd-on-accent);
	border-radius: var(--md-sys-shape-corner-full);
	font-weight: 700;
	text-decoration: none;
}

/* Material type roles */
.jd-display-l { font: 800 clamp(2.75rem, 1rem + 6vw, 6rem)/0.98 var(--md-ref-typeface-brand); letter-spacing: -0.05em; }
.jd-display-m { font: 800 clamp(2.25rem, 1rem + 4vw, 4rem)/1.02 var(--md-ref-typeface-brand); letter-spacing: -0.04em; }
.jd-headline-l { font: 750 clamp(1.75rem, 1.2rem + 2vw, 2.75rem)/1.1 var(--md-ref-typeface-brand); letter-spacing: -0.03em; }
.jd-title-l { font: 700 1.375rem/1.3 var(--md-ref-typeface-brand); letter-spacing: -0.01em; }
.jd-title-m { font: 650 1rem/1.5 var(--md-ref-typeface-brand); letter-spacing: 0.01em; }
.jd-body-l { font-size: 1.125rem; line-height: 1.65; }
.jd-label-l { font: 650 0.875rem/1.4 var(--md-ref-typeface-brand); letter-spacing: 0.01em; }
.jd-label-m { font: 650 0.75rem/1.3 var(--md-ref-typeface-brand); letter-spacing: 0.04em; }
.jd-muted { color: var(--md-sys-color-on-surface-variant); }

/* 3. LAYOUT ================================================================ */
.jd-container {
	width: 100%;
	max-width: calc(var(--jd-container) + var(--jd-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--jd-gutter);
}
.jd-container--narrow { max-width: calc(var(--jd-container-narrow) + var(--jd-gutter) * 2); }

.jd-main { display: block; min-height: 50vh; }

.jd-section { padding-block: var(--jd-section-y); position: relative; }
.jd-section--tight { padding-block: calc(var(--jd-section-y) * 0.6); }
.jd-section--surface { background: var(--md-sys-color-surface-container-low); }

.jd-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: clamp(28px, 4vw, 48px);
	flex-wrap: wrap;
}
.jd-section__titles { max-width: 720px; }
.jd-section__title {
	font-size: clamp(2rem, 1.2rem + 2.6vw, 3.25rem);
	letter-spacing: -0.04em;
	font-weight: 800;
	margin: 12px 0 0;
}
.jd-section__lead {
	margin: 14px 0 0;
	color: var(--md-sys-color-on-surface-variant);
	font-size: 1.0625rem;
	max-width: 620px;
}

.jd-grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.jd-grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.jd-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }

.jd-layout-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
}
@media (max-width: 1024px) { .jd-layout-sidebar { grid-template-columns: 1fr; } }

/* 4. COMPONENTS ============================================================ */

/* Highlight mark — expressive lime pill behind a word */
mark.jd-hl,
.jd-hl {
	background: var(--jd-accent);
	color: var(--jd-on-accent);
	padding: 0 0.18em 0.02em;
	margin: 0 -0.02em;
	border-radius: 0.28em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	display: inline;
	white-space: nowrap;
}
.jd-hl--secondary { background: var(--jd-secondary); color: var(--jd-on-secondary); }

/* Eyebrow label */
.jd-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px 6px 10px;
	border-radius: var(--md-sys-shape-corner-full);
	background: var(--md-sys-color-surface-container-high);
	color: var(--md-sys-color-on-surface);
	font: 650 0.8125rem/1.2 var(--md-ref-typeface-brand);
	letter-spacing: 0.02em;
	border: 1px solid var(--md-sys-color-outline-variant);
}
.jd-eyebrow::before {
	content: "";
	width: 10px;
	height: 10px;
	background: var(--jd-accent);
	transform: rotate(45deg);
	border-radius: 2px;
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--jd-accent) 30%, transparent);
}

/* Icons */
.jd-icon { fill: currentColor; flex: none; display: inline-block; vertical-align: middle; }

/* State layer + ripple base */
.jd-btn,
.jd-icon-btn,
.jd-chip,
.jd-nav__link,
.jd-state {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	-webkit-tap-highlight-color: transparent;
}
.jd-btn::before,
.jd-icon-btn::before,
.jd-chip::before,
.jd-nav__link::before,
.jd-state::before {
	content: "";
	position: absolute;
	inset: 0;
	background: currentColor;
	opacity: 0;
	transition: opacity var(--jd-dur-1) linear;
	pointer-events: none;
	z-index: -1;
	border-radius: inherit;
}
.jd-btn:hover::before,
.jd-icon-btn:hover::before,
.jd-chip:hover::before,
.jd-nav__link:hover::before,
.jd-state:hover::before { opacity: var(--md-sys-state-hover); }
.jd-btn:focus-visible::before,
.jd-icon-btn:focus-visible::before,
.jd-chip:focus-visible::before { opacity: var(--md-sys-state-focus); }
.jd-btn:active::before,
.jd-icon-btn:active::before,
.jd-chip:active::before { opacity: var(--md-sys-state-pressed); }

.jd-ripple {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	background: currentColor;
	opacity: 0.16;
	transform: scale(0);
	animation: jd-ripple 550ms var(--md-sys-motion-easing-emphasized) forwards;
	z-index: -1;
}
@keyframes jd-ripple { to { transform: scale(1); opacity: 0; } }

/* Buttons — M3 Expressive: pill at rest, shape-morphs to squircle on press */
.jd-btn,
.button,
button.button,
input[type="submit"],
.wp-block-button__link,
.wp-element-button {
	--jd-btn-h: 48px;
	--jd-btn-bg: var(--md-sys-color-primary);
	--jd-btn-fg: var(--md-sys-color-on-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--jd-btn-h);
	padding: 0 24px;
	border: 0;
	border-radius: var(--md-sys-shape-corner-full);
	background: var(--jd-btn-bg);
	color: var(--jd-btn-fg);
	font: 650 0.9375rem/1 var(--md-ref-typeface-brand);
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
	transition:
		border-radius var(--jd-dur-2) var(--md-sys-motion-spring-fast-spatial),
		transform var(--jd-dur-2) var(--md-sys-motion-spring-fast-spatial),
		box-shadow var(--jd-dur-2) var(--md-sys-motion-spring-default-effects),
		background-color var(--jd-dur-2) ease,
		color var(--jd-dur-2) ease;
}
.jd-btn:hover,
.button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover { color: var(--jd-btn-fg); box-shadow: var(--md-sys-elevation-1); }
.jd-btn:active,
.button:active,
input[type="submit"]:active,
.wp-block-button__link:active { border-radius: var(--md-sys-shape-corner-medium); transform: scale(0.97); }
.jd-btn .jd-icon { width: 20px; height: 20px; margin-inline: -4px; transition: transform var(--jd-dur-2) var(--md-sys-motion-spring-fast-spatial); }
.jd-btn:hover .jd-icon--arrow_forward,
.jd-btn:hover .jd-icon--north_east { transform: translateX(3px); }

.jd-btn--tonal { --jd-btn-bg: var(--md-sys-color-secondary-container); --jd-btn-fg: var(--md-sys-color-on-secondary-container); }
.jd-btn--accent { --jd-btn-bg: var(--jd-accent); --jd-btn-fg: var(--jd-on-accent); }
.jd-btn--inverse { --jd-btn-bg: var(--md-sys-color-inverse-surface); --jd-btn-fg: var(--md-sys-color-inverse-on-surface); }
.jd-btn--surface { --jd-btn-bg: var(--md-sys-color-surface-container-highest); --jd-btn-fg: var(--md-sys-color-on-surface); }
.jd-btn--outlined {
	--jd-btn-bg: transparent;
	--jd-btn-fg: var(--md-sys-color-on-surface);
	box-shadow: inset 0 0 0 1px var(--md-sys-color-outline);
}
.jd-btn--outlined:hover { box-shadow: inset 0 0 0 1px var(--md-sys-color-on-surface); }
.jd-btn--text { --jd-btn-bg: transparent; --jd-btn-fg: var(--md-sys-color-on-surface); padding-inline: 14px; }
.jd-btn--text:hover { box-shadow: none; }
.jd-btn--sm { --jd-btn-h: 40px; padding: 0 16px; font-size: 0.875rem; }
.jd-btn--xs { --jd-btn-h: 32px; padding: 0 12px; font-size: 0.8125rem; gap: 6px; }
.jd-btn--lg { --jd-btn-h: 56px; padding: 0 28px; font-size: 1rem; }
.jd-btn--xl { --jd-btn-h: 72px; padding: 0 40px; font-size: 1.125rem; }
.jd-btn--block { width: 100%; }
.jd-btn[disabled],
.jd-btn.is-disabled,
.button.disabled,
.button:disabled { opacity: 0.38; pointer-events: none; }

/* Icon buttons */
.jd-icon-btn {
	--jd-ib-size: 44px;
	display: inline-grid;
	place-items: center;
	width: var(--jd-ib-size);
	height: var(--jd-ib-size);
	flex: none;
	padding: 0;
	border: 0;
	border-radius: var(--md-sys-shape-corner-full);
	background: transparent;
	color: var(--md-sys-color-on-surface-variant);
	cursor: pointer;
	text-decoration: none;
	transition: border-radius var(--jd-dur-2) var(--md-sys-motion-spring-fast-spatial), background-color var(--jd-dur-2) ease, color var(--jd-dur-2) ease, transform var(--jd-dur-2) var(--md-sys-motion-spring-fast-spatial);
}
.jd-icon-btn:hover { color: var(--md-sys-color-on-surface); }
.jd-icon-btn:active { border-radius: var(--md-sys-shape-corner-medium); transform: scale(0.94); }
.jd-icon-btn .jd-icon { width: 22px; height: 22px; }
.jd-icon-btn--filled { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.jd-icon-btn--filled:hover { color: var(--md-sys-color-on-primary); }
.jd-icon-btn--tonal { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); }
.jd-icon-btn--accent { background: var(--jd-accent); color: var(--jd-on-accent); }
.jd-icon-btn--accent:hover { color: var(--jd-on-accent); }
.jd-icon-btn--outlined { box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant); }
.jd-icon-btn--sm { --jd-ib-size: 36px; }
.jd-icon-btn--sm .jd-icon { width: 18px; height: 18px; }
.jd-icon-btn--lg { --jd-ib-size: 56px; }

/* Count badge on icon buttons */
.jd-count {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--jd-accent);
	color: var(--jd-on-accent);
	font: 800 0.6875rem/18px var(--md-ref-typeface-brand);
	text-align: center;
	box-shadow: 0 0 0 2px var(--md-sys-color-surface);
	transform: scale(1);
	transition: transform var(--jd-dur-2) var(--md-sys-motion-spring-fast-spatial);
	pointer-events: none;
}
.jd-count:empty,
.jd-count[data-count="0"] { transform: scale(0); }
.jd-count.is-bump { animation: jd-bump 500ms var(--md-sys-motion-spring-fast-spatial); }
@keyframes jd-bump { 40% { transform: scale(1.5); } }

/* Chips */
.jd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.jd-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	padding: 0 14px;
	border-radius: var(--md-sys-shape-corner-small);
	border: 1px solid var(--md-sys-color-outline-variant);
	background: transparent;
	color: var(--md-sys-color-on-surface-variant);
	font: 600 0.875rem/1 var(--md-ref-typeface-brand);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--jd-dur-2) ease, border-color var(--jd-dur-2) ease, color var(--jd-dur-2) ease, border-radius var(--jd-dur-2) var(--md-sys-motion-spring-fast-spatial);
}
.jd-chip:hover { color: var(--md-sys-color-on-surface); }
.jd-chip .jd-icon { width: 18px; height: 18px; }
.jd-chip--pill { border-radius: var(--md-sys-shape-corner-full); }
.jd-chip--tonal { background: var(--md-sys-color-surface-container-high); border-color: transparent; color: var(--md-sys-color-on-surface); }
.jd-chip--sm { height: 28px; padding: 0 10px; font-size: 0.75rem; border-radius: 6px; }
.jd-chip--xs { height: 24px; padding: 0 8px; font-size: 0.6875rem; border-radius: 6px; gap: 4px; }
.jd-chip.is-active,
.jd-chip[aria-pressed="true"],
.jd-chip[aria-selected="true"],
.jd-chip.current-cat,
.jd-chip[aria-current="page"] {
	background: var(--md-sys-color-secondary-container);
	border-color: transparent;
	color: var(--md-sys-color-on-secondary-container);
	border-radius: var(--md-sys-shape-corner-full);
}
.jd-chip.is-active::after,
.jd-chip[aria-current="page"]::after {
	content: "";
	width: 14px;
	height: 14px;
	margin-right: -4px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/contain no-repeat;
	order: -1;
	margin: 0 0 0 -4px;
}
.jd-chips--scroll {
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
	padding-bottom: 4px;
	mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.jd-chips--scroll::-webkit-scrollbar { display: none; }
.jd-chips--scroll > * { scroll-snap-align: start; }

/* Badges */
.jd-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 26px;
	padding: 0 10px;
	border-radius: var(--md-sys-shape-corner-full);
	background: var(--md-sys-color-inverse-surface);
	color: var(--md-sys-color-inverse-on-surface);
	font: 750 0.6875rem/1 var(--md-ref-typeface-brand);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.jd-badge--accent { background: var(--jd-accent); color: var(--jd-on-accent); }
.jd-badge--secondary { background: var(--jd-secondary); color: var(--jd-on-secondary); }
.jd-badge--sale { background: #FF4D6D; color: #fff; }
.jd-badge--soft { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); }

/* Cards */
.jd-card {
	position: relative;
	border-radius: var(--md-sys-shape-corner-extra-large);
	background: var(--md-sys-color-surface-container-low);
	color: var(--md-sys-color-on-surface);
	padding: clamp(20px, 2.4vw, 32px);
	transition: transform var(--jd-dur-3) var(--md-sys-motion-spring-default-spatial), box-shadow var(--jd-dur-3) var(--md-sys-motion-spring-default-effects), background-color var(--jd-dur-2) ease;
}
.jd-card--elevated { background: var(--md-sys-color-surface-container-lowest); box-shadow: var(--md-sys-elevation-1); }
.jd-card--outlined { background: transparent; box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant); }
.jd-card--high { background: var(--md-sys-color-surface-container-high); }
.jd-card--accent { background: var(--jd-accent); color: var(--jd-on-accent); }
.jd-card--accent :is(h2, h3, h4, p) { color: inherit; }
.jd-card--ink { background: #111116; color: #F2F2F5; }
.jd-card--ink :is(h2, h3, h4) { color: #fff; }
.jd-card--interactive:hover { transform: translateY(-4px); box-shadow: var(--md-sys-elevation-3); }

/* Text fields (outlined) */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
	width: 100%;
	min-height: 52px;
	padding: 14px 16px;
	border: 1px solid var(--md-sys-color-outline);
	border-radius: var(--md-sys-shape-corner-medium);
	background: var(--md-sys-color-surface-container-lowest);
	color: var(--md-sys-color-on-surface);
	font: 500 1rem/1.4 var(--md-ref-typeface-plain);
	transition: border-color var(--jd-dur-1) ease, box-shadow var(--jd-dur-1) ease, background-color var(--jd-dur-2) ease;
	-webkit-appearance: none;
	appearance: none;
}
textarea { min-height: 140px; resize: vertical; }
select {
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23888'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 24px;
	cursor: pointer;
}
input:hover,
select:hover,
textarea:hover { border-color: var(--md-sys-color-on-surface); }
input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--md-sys-color-primary);
	box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
}
::placeholder { color: var(--md-sys-color-on-surface-variant); opacity: 0.8; }
label { font: 600 0.875rem/1.4 var(--md-ref-typeface-brand); color: var(--md-sys-color-on-surface); }
input[type="checkbox"],
input[type="radio"] { accent-color: var(--md-sys-color-primary); width: 18px; height: 18px; vertical-align: -3px; }

/* Stars */
.jd-stars { position: relative; display: inline-flex; line-height: 0; color: var(--md-sys-color-outline-variant); }
.jd-stars .jd-icon { width: 15px; height: 15px; }
.jd-stars__base,
.jd-stars__fill { display: inline-flex; }
.jd-stars__fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: #FFB400; white-space: nowrap; }
.jd-stars__count { font-size: 0.8125rem; font-weight: 700; margin-left: 6px; color: var(--md-sys-color-on-surface); }
.jd-stars__count span { color: var(--md-sys-color-on-surface-variant); font-weight: 500; }

/* Segmented / connected button group (M3 Expressive) */
.jd-segmented {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	border-radius: var(--md-sys-shape-corner-full);
	background: var(--md-sys-color-surface-container-high);
	max-width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
}
.jd-segmented::-webkit-scrollbar { display: none; }
.jd-segmented__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 44px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--md-sys-shape-corner-full);
	background: transparent;
	color: var(--md-sys-color-on-surface-variant);
	font: 650 0.9375rem/1 var(--md-ref-typeface-brand);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--jd-dur-2) ease, color var(--jd-dur-2) ease, border-radius var(--jd-dur-3) var(--md-sys-motion-spring-fast-spatial);
}
.jd-segmented__btn:hover { color: var(--md-sys-color-on-surface); background: color-mix(in srgb, var(--md-sys-color-on-surface) 6%, transparent); }
.jd-segmented__btn[aria-selected="true"],
.jd-segmented__btn.is-active {
	background: var(--md-sys-color-primary);
	color: var(--md-sys-color-on-primary);
	border-radius: var(--md-sys-shape-corner-large);
}
.jd-segmented__btn .jd-icon { width: 18px; height: 18px; }

/* Tab panels */
[data-jd-panel][hidden] { display: none !important; }
[data-jd-panel] { animation: jd-fade-up var(--jd-dur-4) var(--md-sys-motion-spring-default-spatial); }

/* Loading indicator — M3 Expressive morphing shape */
.jd-loader {
	width: 40px;
	height: 40px;
	background: var(--md-sys-color-primary);
	animation: jd-morph 1.6s var(--md-sys-motion-spring-default-spatial) infinite, jd-spin 1.6s linear infinite;
	margin: 24px auto;
}
@keyframes jd-morph {
	0%, 100% { border-radius: 50%; transform: scale(0.85); }
	25% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
	50% { border-radius: 14px; transform: scale(1); }
	75% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}
@keyframes jd-spin { to { rotate: 360deg; } }

/* Snackbar */
.jd-snackbar {
	position: fixed;
	left: 50%;
	bottom: calc(24px + env(safe-area-inset-bottom));
	z-index: 120;
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: min(92vw, 344px);
	max-width: min(92vw, 560px);
	padding: 8px 8px 8px 18px;
	border-radius: var(--md-sys-shape-corner-large);
	background: var(--md-sys-color-inverse-surface);
	color: var(--md-sys-color-inverse-on-surface);
	box-shadow: var(--md-sys-elevation-3);
	font-weight: 600;
	font-size: 0.9375rem;
	transform: translate(-50%, 150%);
	opacity: 0;
	transition: transform var(--jd-dur-4) var(--md-sys-motion-spring-default-spatial), opacity var(--jd-dur-2) ease;
	pointer-events: none;
}
.jd-snackbar.is-open { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.jd-snackbar__text { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 40px; }
.jd-snackbar__text .jd-icon { color: var(--md-sys-color-inverse-primary); }
.jd-snackbar__action { --jd-btn-bg: transparent; --jd-btn-fg: var(--md-sys-color-inverse-primary); }
.jd-has-bottom-nav .jd-snackbar { bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .jd-has-bottom-nav .jd-snackbar { bottom: 24px; } }

/* FAB */
.jd-fab {
	position: fixed;
	right: clamp(16px, 3vw, 28px);
	bottom: calc(clamp(16px, 3vw, 28px) + env(safe-area-inset-bottom));
	z-index: 60;
	display: inline-grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border: 0;
	border-radius: var(--md-sys-shape-corner-large);
	background: var(--md-sys-color-primary-container);
	color: var(--md-sys-color-on-primary-container);
	box-shadow: var(--md-sys-elevation-3);
	cursor: pointer;
	text-decoration: none;
	transition: transform var(--jd-dur-3) var(--md-sys-motion-spring-fast-spatial), opacity var(--jd-dur-2) ease, border-radius var(--jd-dur-2) var(--md-sys-motion-spring-fast-spatial);
}
.jd-fab:hover { border-radius: var(--md-sys-shape-corner-extra-large); color: var(--md-sys-color-on-primary-container); }
.jd-fab--top { transform: scale(0) rotate(-90deg); opacity: 0; }
.jd-fab--top.is-visible { transform: none; opacity: 1; }
.jd-fab--wa { background: #25D366; color: #fff; bottom: calc(clamp(16px, 3vw, 28px) + 72px + env(safe-area-inset-bottom)); border-radius: 50%; }
.jd-fab--wa:hover { color: #fff; border-radius: 30%; }
.jd-has-bottom-nav .jd-fab { bottom: calc(96px + env(safe-area-inset-bottom)); }
.jd-has-bottom-nav .jd-fab--wa { bottom: calc(168px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) {
	.jd-has-bottom-nav .jd-fab { bottom: calc(clamp(16px, 3vw, 28px) + env(safe-area-inset-bottom)); }
	.jd-has-bottom-nav .jd-fab--wa { bottom: calc(clamp(16px, 3vw, 28px) + 72px + env(safe-area-inset-bottom)); }
}

/* Accordion (details) */
.jd-accordion { display: grid; gap: 10px; }
.jd-accordion details {
	border-radius: var(--md-sys-shape-corner-large-increased);
	background: var(--md-sys-color-surface-container-low);
	transition: background-color var(--jd-dur-2) ease, border-radius var(--jd-dur-3) var(--md-sys-motion-spring-default-spatial);
	overflow: hidden;
}
.jd-accordion details[open] { background: var(--md-sys-color-surface-container-high); border-radius: var(--md-sys-shape-corner-extra-large); }
.jd-accordion summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 22px;
	cursor: pointer;
	list-style: none;
	font: 700 1.0625rem/1.4 var(--md-ref-typeface-brand);
	letter-spacing: -0.01em;
}
.jd-accordion summary::-webkit-details-marker { display: none; }
.jd-accordion summary::after {
	content: "";
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--md-sys-color-surface-container-highest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23888'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E") center/20px no-repeat;
	transition: transform var(--jd-dur-3) var(--md-sys-motion-spring-fast-spatial), background-color var(--jd-dur-2) ease, border-radius var(--jd-dur-3) ease;
}
.jd-accordion details[open] summary::after { transform: rotate(135deg); background-color: var(--jd-accent); border-radius: 12px; }
.jd-accordion details > div { padding: 0 22px 22px; color: var(--md-sys-color-on-surface-variant); }
.jd-accordion details::details-content {
	block-size: 0;
	overflow: hidden;
	transition: block-size var(--jd-dur-3) var(--md-sys-motion-easing-emphasized), content-visibility var(--jd-dur-3) allow-discrete;
}
.jd-accordion details[open]::details-content { block-size: auto; }

/* Avatar */
.jd-avatar { border-radius: 50%; display: inline-block; vertical-align: middle; }

/* 5. APP CHROME ============================================================ */

/* Announcement bar */
.jd-announce {
	position: relative;
	background: var(--jd-accent);
	color: var(--jd-on-accent);
	font: 650 0.875rem/1.3 var(--md-ref-typeface-brand);
	text-align: center;
	padding: 10px 48px;
}
.jd-announce[hidden] { display: none; }
.jd-announce a { color: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; margin-left: 6px; white-space: nowrap; }
.jd-announce__diamond { display: inline-block; width: 8px; height: 8px; background: currentColor; transform: rotate(45deg); margin: 0 10px 2px 0; border-radius: 1px; }
.jd-announce .jd-icon-btn { position: absolute; right: 6px; top: 50%; translate: 0 -50%; --jd-ib-size: 34px; color: inherit; }

/* Top app bar */
.jd-topbar {
	position: sticky;
	top: var(--jd-admin-bar);
	z-index: 80;
	background: color-mix(in srgb, var(--md-sys-color-surface) 80%, transparent);
	-webkit-backdrop-filter: saturate(1.8) blur(20px);
	backdrop-filter: saturate(1.8) blur(20px);
	border-bottom: 1px solid transparent;
	transition: background-color var(--jd-dur-3) ease, border-color var(--jd-dur-3) ease, box-shadow var(--jd-dur-3) ease;
}
.jd-topbar.is-scrolled {
	background: color-mix(in srgb, var(--md-sys-color-surface-container) 86%, transparent);
	border-bottom-color: var(--md-sys-color-outline-variant);
}
.jd-topbar__inner {
	display: flex;
	align-items: center;
	gap: 8px;
	height: var(--jd-topbar-h);
}
.jd-topbar__menu { margin-left: -8px; }
@media (min-width: 1180px) { .jd-topbar__menu { display: none; } }

.jd-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--md-sys-color-on-surface);
	flex: none;
	border-radius: 14px;
}
.jd-brand:hover { color: var(--md-sys-color-on-surface); }
.jd-brand .custom-logo { max-height: 44px; width: auto; }
.jd-logo-icon { flex: none; transition: transform var(--jd-dur-3) var(--md-sys-motion-spring-fast-spatial); }
.jd-brand:hover .jd-logo-icon { transform: rotate(-8deg) scale(1.06); }
.jd-logo-icon__bg { fill: var(--jd-logo-bg); }
.jd-logo-icon__j { fill: var(--jd-logo-fg); }
.jd-logo-icon__tag { fill: var(--jd-logo-tag); transform-box: fill-box; transform-origin: center; transition: transform var(--jd-dur-4) var(--md-sys-motion-spring-fast-spatial); }
.jd-brand:hover .jd-logo-icon__tag { transform: rotate(90deg); }
.jd-logo-wordmark { height: 24px; width: auto; color: var(--md-sys-color-on-surface); }
.jd-logo-wordmark__stroke { stroke: currentColor; }
.jd-logo-wordmark__fill { fill: currentColor; }
.jd-logo-wordmark__chip { fill: var(--jd-accent); }
.jd-logo-wordmark__chip-text { stroke: var(--jd-on-accent); }
.jd-logo-mark__j { fill: currentColor; }
.jd-logo-mark__tag { fill: var(--jd-accent); }
@media (max-width: 420px) { .jd-brand--header .jd-logo-wordmark { height: 20px; } }
@media (max-width: 360px) { .jd-brand--header .jd-logo-wordmark { display: none; } }

/* Primary navigation */
.jd-nav { display: none; margin-left: 16px; }
@media (min-width: 1180px) { .jd-nav { display: block; } }
.jd-nav__list,
.jd-nav ul { list-style: none; margin: 0; padding: 0; }
.jd-nav__list { display: flex; align-items: center; gap: 2px; }
.jd-nav li { position: relative; }
.jd-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 40px;
	padding: 0 14px;
	border-radius: var(--md-sys-shape-corner-full);
	color: var(--md-sys-color-on-surface-variant);
	font: 650 0.9375rem/1 var(--md-ref-typeface-brand);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--jd-dur-1) ease, background-color var(--jd-dur-2) ease;
}
.jd-nav__link:hover,
.jd-nav__link[aria-current="page"] { color: var(--md-sys-color-on-surface); }
.jd-nav__link[aria-current="page"] { background: var(--md-sys-color-surface-container-highest); }
.jd-nav .menu-item-has-children > .jd-nav__link::after {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E") center/contain no-repeat;
	transition: transform var(--jd-dur-2) var(--md-sys-motion-spring-fast-spatial);
}
.jd-nav .sub-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 240px;
	padding: 8px;
	border-radius: var(--md-sys-shape-corner-large);
	background: var(--md-sys-color-surface-container);
	box-shadow: var(--md-sys-elevation-3);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px) scale(0.98);
	transform-origin: top left;
	transition: opacity var(--jd-dur-2) ease, transform var(--jd-dur-3) var(--md-sys-motion-spring-fast-spatial), visibility var(--jd-dur-2);
	z-index: 10;
}
.jd-nav .sub-menu::before { content: ""; position: absolute; inset: -10px 0 auto; height: 10px; }
.jd-nav li:hover > .sub-menu,
.jd-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.jd-nav li:hover > .jd-nav__link::after { transform: rotate(180deg); }
.jd-nav .sub-menu .jd-nav__link { display: flex; height: 44px; border-radius: var(--md-sys-shape-corner-medium); }

/* Actions */
.jd-topbar__actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.jd-topbar__actions .jd-icon-btn--hide-sm { display: none; }
@media (min-width: 640px) { .jd-topbar__actions .jd-icon-btn--hide-sm { display: inline-grid; } }

.jd-searchbar {
	display: none;
	align-items: center;
	gap: 10px;
	width: clamp(200px, 22vw, 320px);
	height: 48px;
	padding: 0 8px 0 16px;
	margin-right: 8px;
	border: 0;
	border-radius: var(--md-sys-shape-corner-full);
	background: var(--md-sys-color-surface-container-high);
	color: var(--md-sys-color-on-surface-variant);
	font: 500 0.9375rem/1 var(--md-ref-typeface-plain);
	cursor: text;
	transition: background-color var(--jd-dur-2) ease, width var(--jd-dur-3) var(--md-sys-motion-spring-default-spatial);
}
.jd-searchbar:hover { background: var(--md-sys-color-surface-container-highest); }
.jd-searchbar span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jd-searchbar kbd {
	padding: 4px 8px;
	border-radius: 8px;
	background: var(--md-sys-color-surface-container-lowest);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--md-sys-color-on-surface-variant);
	box-shadow: inset 0 -1px 0 var(--md-sys-color-outline-variant);
}
@media (min-width: 900px) {
	.jd-searchbar { display: inline-flex; }
	.jd-topbar__search-icon { display: none !important; }
}
/* Desktop with the primary menu visible: narrower search so a 6-item menu always fits;
   between 1180–1339px the search collapses to an icon (⌘K / "/" still open it). */
@media (min-width: 1180px) {
	.jd-nav__link { padding: 0 12px; }
	.jd-searchbar { width: 190px; }
	.jd-searchbar kbd { display: none; }
}
@media (min-width: 1180px) and (max-width: 1339px) {
	.jd-topbar__actions .jd-searchbar { display: none; }
	.jd-topbar__actions .jd-topbar__search-icon { display: inline-grid !important; }
}

.jd-theme-toggle .jd-icon--light_mode { display: none; }
[data-theme="dark"] .jd-theme-toggle .jd-icon--light_mode { display: block; }
[data-theme="dark"] .jd-theme-toggle .jd-icon--dark_mode { display: none; }
.jd-theme-toggle .jd-icon { animation: jd-pop var(--jd-dur-4) var(--md-sys-motion-spring-fast-spatial); }
@keyframes jd-pop { from { transform: rotate(-90deg) scale(0.4); opacity: 0; } }

/* Drawer (modal navigation drawer) */
.jd-drawer { position: fixed; inset: 0; z-index: 110; visibility: hidden; }
.jd-drawer.is-open { visibility: visible; }
.jd-scrim {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--md-sys-color-scrim) 45%, transparent);
	opacity: 0;
	transition: opacity var(--jd-dur-3) ease;
}
.jd-drawer.is-open .jd-scrim { opacity: 1; }
.jd-drawer__sheet {
	position: absolute;
	inset: 0 auto 0 0;
	width: min(88vw, 360px);
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 12px calc(16px + env(safe-area-inset-bottom));
	background: var(--md-sys-color-surface-container-low);
	border-radius: 0 var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0;
	transform: translateX(-104%);
	transition: transform var(--jd-dur-4) var(--md-sys-motion-spring-default-spatial);
	overflow-y: auto;
}
.jd-drawer.is-open .jd-drawer__sheet { transform: none; }
.jd-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 12px 12px; }
.jd-drawer nav ul { list-style: none; margin: 0; padding: 0; }
.jd-drawer .jd-nav__link { display: flex; height: 56px; padding: 0 20px; font-size: 1rem; border-radius: var(--md-sys-shape-corner-full); }
.jd-drawer .sub-menu { padding-left: 16px; }
.jd-drawer .sub-menu .jd-nav__link { height: 48px; font-size: 0.9375rem; }
.jd-drawer__footer { margin-top: auto; padding: 16px 12px 0; display: grid; gap: 12px; border-top: 1px solid var(--md-sys-color-outline-variant); }
.jd-drawer__label { padding: 18px 20px 6px; font: 700 0.75rem/1 var(--md-ref-typeface-brand); letter-spacing: 0.08em; text-transform: uppercase; color: var(--md-sys-color-on-surface-variant); }

/* Search view (full-screen on mobile, docked dialog on desktop) */
.jd-search-view { position: fixed; inset: 0; z-index: 115; visibility: hidden; }
.jd-search-view.is-open { visibility: visible; }
.jd-search-view.is-open .jd-scrim { opacity: 1; }
.jd-search-view__panel {
	position: absolute;
	left: 50%;
	top: calc(var(--jd-admin-bar) + 12px);
	width: min(720px, calc(100vw - 24px));
	max-height: min(80vh, 720px);
	display: flex;
	flex-direction: column;
	border-radius: var(--md-sys-shape-corner-extra-large);
	background: var(--md-sys-color-surface-container-high);
	box-shadow: var(--md-sys-elevation-4);
	transform: translate(-50%, -20px) scale(0.96);
	opacity: 0;
	transition: transform var(--jd-dur-4) var(--md-sys-motion-spring-default-spatial), opacity var(--jd-dur-2) ease;
	overflow: hidden;
}
.jd-search-view.is-open .jd-search-view__panel { transform: translate(-50%, 0) scale(1); opacity: 1; }
.jd-search-view__form { display: flex; align-items: center; gap: 4px; padding: 8px 8px 8px 12px; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.jd-search-view__form input[type="search"] {
	flex: 1;
	border: 0;
	background: transparent;
	min-height: 60px;
	font-size: 1.125rem;
	font-weight: 600;
	box-shadow: none;
	padding: 0 8px;
}
.jd-search-view__form input[type="search"]::-webkit-search-cancel-button { display: none; }
.jd-search-view__body { padding: 12px; overflow-y: auto; }
.jd-search-view__hint { padding: 12px 12px 4px; font: 700 0.75rem/1 var(--md-ref-typeface-brand); letter-spacing: 0.08em; text-transform: uppercase; color: var(--md-sys-color-on-surface-variant); }
.jd-search-view .jd-chips { padding: 8px 12px 12px; }
.jd-search-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.jd-search-result {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px;
	border-radius: var(--md-sys-shape-corner-large);
	text-decoration: none;
	color: var(--md-sys-color-on-surface);
}
.jd-search-result:hover,
.jd-search-result.is-active { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); }
.jd-search-result__img {
	width: 72px;
	height: 48px;
	flex: none;
	border-radius: 10px;
	object-fit: cover;
	background: linear-gradient(135deg, var(--jd-secondary), var(--jd-accent));
}
.jd-search-result__name { font-weight: 700; line-height: 1.3; }
.jd-search-result__meta { font-size: 0.8125rem; color: var(--md-sys-color-on-surface-variant); }
.jd-search-result__price { margin-left: auto; font-weight: 800; white-space: nowrap; }
.jd-search-result__price del { opacity: 0.5; font-weight: 500; margin-right: 4px; }
.jd-search-result__price ins { text-decoration: none; }
.jd-search-empty { padding: 32px 12px; text-align: center; color: var(--md-sys-color-on-surface-variant); }
@media (max-width: 640px) {
	.jd-search-view__panel { top: 0; width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; }
}

/* Bottom navigation bar (mobile) */
.jd-bottom-nav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 70;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
	background: color-mix(in srgb, var(--md-sys-color-surface-container) 92%, transparent);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	border-top: 1px solid var(--md-sys-color-outline-variant);
}
.jd-bottom-nav__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--md-sys-color-on-surface-variant);
	font: 650 0.75rem/1 var(--md-ref-typeface-brand);
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.jd-bottom-nav__icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 64px;
	height: 32px;
	border-radius: var(--md-sys-shape-corner-full);
	transition: background-color var(--jd-dur-2) ease, width var(--jd-dur-3) var(--md-sys-motion-spring-fast-spatial);
}
.jd-bottom-nav__icon .jd-icon { width: 24px; height: 24px; }
.jd-bottom-nav__icon .jd-count { top: -2px; right: 10px; }
.jd-bottom-nav__item[aria-current="page"] { color: var(--md-sys-color-on-surface); }
.jd-bottom-nav__item[aria-current="page"] .jd-bottom-nav__icon { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.jd-bottom-nav__item:active .jd-bottom-nav__icon { width: 56px; }
.jd-has-bottom-nav { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) {
	.jd-bottom-nav { display: none; }
	.jd-has-bottom-nav { padding-bottom: 0; }
}

/* Footer */
.jd-footer {
	position: relative;
	margin-top: var(--jd-section-y);
	padding-top: clamp(56px, 7vw, 96px);
	background: var(--md-sys-color-surface-container-low);
	border-radius: var(--md-sys-shape-corner-extra-extra-large) var(--md-sys-shape-corner-extra-extra-large) 0 0;
	overflow: hidden;
}
.jd-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr) 1.2fr;
	gap: clamp(28px, 4vw, 48px);
}
@media (max-width: 1100px) { .jd-footer__grid { grid-template-columns: repeat(3, 1fr); } .jd-footer__about { grid-column: 1 / -1; } .jd-footer__contact { grid-column: 1 / -1; } }
@media (max-width: 640px) { .jd-footer__grid { grid-template-columns: 1fr 1fr; } }
.jd-footer__about p { color: var(--md-sys-color-on-surface-variant); margin: 20px 0; max-width: 360px; }
.jd-footer h2 { font: 750 0.8125rem/1 var(--md-ref-typeface-brand); letter-spacing: 0.1em; text-transform: uppercase; color: var(--md-sys-color-on-surface-variant); margin: 8px 0 18px; }
.jd-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.jd-footer ul a { color: var(--md-sys-color-on-surface); text-decoration: none; font-weight: 550; }
.jd-footer ul a:hover { color: var(--md-sys-color-on-surface); text-decoration: underline; }
.jd-social { display: flex; flex-wrap: wrap; gap: 8px; }
.jd-footer__contact .jd-card { display: grid; gap: 14px; }
.jd-footer__contact .jd-card p { margin: 0; color: inherit; opacity: 0.85; }
.jd-footer__watermark {
	margin-top: clamp(40px, 6vw, 80px);
	padding-inline: var(--jd-gutter);
	opacity: 0.9;
	line-height: 0;
}
.jd-footer__watermark svg { width: 100%; height: auto; }
.jd-footer__watermark .jd-textlogo--xl { display: block; font-size: clamp(3.5rem, 17vw, 15rem); line-height: 0.9; letter-spacing: -0.06em; color: var(--md-sys-color-surface-container-highest); white-space: nowrap; text-align: center; }
.jd-footer__watermark .jd-textlogo--xl .jd-textlogo__b { color: inherit; }
.jd-footer__watermark .jd-logo-wordmark__stroke { stroke: var(--md-sys-color-surface-container-highest); }
.jd-footer__watermark .jd-logo-wordmark__fill { fill: var(--md-sys-color-surface-container-highest); }
.jd-footer__watermark .jd-logo-wordmark__chip { fill: var(--md-sys-color-surface-container-highest); }
.jd-footer__watermark .jd-logo-wordmark__chip-text { stroke: var(--md-sys-color-surface-container-low); }
.jd-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 24px;
	margin-top: 8px;
	border-top: 1px solid var(--md-sys-color-outline-variant);
	font-size: 0.875rem;
	color: var(--md-sys-color-on-surface-variant);
}
.jd-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 18px; }
.jd-footer__bottom ul a { color: inherit; font-weight: 500; }
.jd-payments { display: flex; flex-wrap: wrap; gap: 6px; }
.jd-payments span {
	padding: 6px 10px;
	border-radius: 8px;
	background: var(--md-sys-color-surface-container-highest);
	font: 700 0.6875rem/1 var(--md-ref-typeface-brand);
	letter-spacing: 0.04em;
	color: var(--md-sys-color-on-surface);
}

/* 6. HOMEPAGE ============================================================== */

/* Hero */
.jd-hero {
	position: relative;
	padding-block: clamp(40px, 7vw, 96px) clamp(56px, 8vw, 112px);
	overflow: clip;
}
.jd-hero__bg { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.jd-hero__bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(var(--jd-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--jd-grid-line) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 30%, transparent 75%);
}
.jd-hero__bg::after {
	content: "";
	position: absolute;
	width: 60vw;
	height: 60vw;
	max-width: 900px;
	max-height: 900px;
	right: -10vw;
	top: -20vw;
	background: radial-gradient(circle, var(--jd-glow), transparent 65%);
	filter: blur(20px);
	opacity: 0.6;
}
.jd-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}
@media (max-width: 960px) { .jd-hero__grid { grid-template-columns: 1fr; } }
.jd-hero__grid > * { min-width: 0; }
.jd-hero-search { width: 100%; }
.jd-hero__title {
	margin: 20px 0 20px;
	font-size: clamp(2.5rem, 1.1rem + 4.4vw, 4.75rem);
	line-height: 1;
	letter-spacing: -0.05em;
	font-weight: 800;
}
.jd-hero__title .jd-hl { display: inline-block; transform: rotate(-2deg); padding: 0 0.14em 0.06em; border-radius: 0.22em; animation: jd-hl-in 900ms var(--md-sys-motion-spring-slow-spatial) both 200ms; }
@keyframes jd-hl-in { from { transform: rotate(-12deg) scale(0.6); opacity: 0; } }
.jd-hero__text { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); color: var(--md-sys-color-on-surface-variant); max-width: 560px; margin-bottom: 28px; }

.jd-hero-search {
	display: flex;
	align-items: center;
	gap: 6px;
	max-width: 620px;
	padding: 8px 8px 8px 20px;
	border-radius: var(--md-sys-shape-corner-full);
	background: var(--md-sys-color-surface-container-lowest);
	box-shadow: var(--md-sys-elevation-3), inset 0 0 0 1px var(--md-sys-color-outline-variant);
	transition: box-shadow var(--jd-dur-3) ease, transform var(--jd-dur-3) var(--md-sys-motion-spring-default-spatial);
}
[data-theme="dark"] .jd-hero-search { background: var(--md-sys-color-surface-container-high); }
.jd-hero-search:focus-within { box-shadow: var(--md-sys-elevation-4), inset 0 0 0 2px var(--md-sys-color-primary); transform: translateY(-2px); }
.jd-hero-search > .jd-icon { color: var(--md-sys-color-on-surface-variant); }
.jd-hero-search input[type="search"] { flex: 1; min-width: 0; border: 0; background: transparent; box-shadow: none; min-height: 52px; padding: 0 6px; font-size: 1.0625rem; font-weight: 550; }
.jd-hero-search select {
	width: auto;
	max-width: 190px;
	min-height: 44px;
	border: 0;
	border-left: 1px solid var(--md-sys-color-outline-variant);
	border-radius: 0;
	background-color: transparent;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--md-sys-color-on-surface-variant);
	box-shadow: none;
}
@media (max-width: 560px) { .jd-hero-search select { display: none; } .jd-hero-search .jd-btn span { display: none; } .jd-hero-search .jd-btn { padding: 0 16px; } }
.jd-hero__popular { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; font-size: 0.875rem; color: var(--md-sys-color-on-surface-variant); font-weight: 600; }
.jd-hero__trust { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 36px; }
.jd-hero__trust-item { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 0.9375rem; }
.jd-hero__trust-item .jd-icon { width: 36px; height: 36px; padding: 8px; border-radius: 12px; background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); }

/* Hero visual */
.jd-hero__visual { position: relative; aspect-ratio: 1 / 0.92; min-height: 360px; }
.jd-hero__shape {
	position: absolute;
	background: var(--jd-accent);
	-webkit-mask: var(--jd-shape) center / contain no-repeat;
	mask: var(--jd-shape) center / contain no-repeat;
}
.jd-hero__shape--main { inset: 6% 8% 4% 10%; animation: jd-rotate 60s linear infinite; }
.jd-hero__shape--small { width: 22%; aspect-ratio: 1; top: -2%; right: 0; background: var(--jd-secondary); animation: jd-float 7s ease-in-out infinite, jd-rotate 30s linear infinite reverse; }
.jd-hero__shape--tiny { width: 11%; aspect-ratio: 1; bottom: 6%; left: 2%; background: var(--md-sys-color-on-surface); animation: jd-float 6s ease-in-out infinite 1s; }
@keyframes jd-rotate { to { rotate: 360deg; } }
@keyframes jd-float { 50% { transform: translateY(-14px); } }

.jd-window {
	position: absolute;
	border-radius: 18px;
	background: var(--md-sys-color-surface-container-lowest);
	box-shadow: var(--md-sys-elevation-4);
	overflow: hidden;
	transition: transform var(--jd-dur-4) var(--md-sys-motion-spring-default-spatial);
	outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}
.jd-window__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: var(--md-sys-color-surface-container-high); }
.jd-window__bar i { width: 9px; height: 9px; border-radius: 50%; background: #FF5F57; }
.jd-window__bar i:nth-child(2) { background: #FEBC2E; }
.jd-window__bar i:nth-child(3) { background: #28C840; }
.jd-window__bar span { margin-left: auto; margin-right: auto; width: 40%; height: 12px; border-radius: 6px; background: var(--md-sys-color-surface-container-highest); }
.jd-window__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.jd-window__media img,
.jd-window__media .jd-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.jd-window--1 { width: 72%; left: 14%; top: 14%; z-index: 3; }
.jd-window--2 { width: 52%; left: 0; top: 48%; z-index: 4; transform: rotate(-4deg); }
.jd-window--3 { width: 50%; right: -2%; top: 54%; z-index: 2; transform: rotate(5deg); }
.jd-hero__visual:hover .jd-window--2 { transform: rotate(-6deg) translate(-8px, 6px); }
.jd-hero__visual:hover .jd-window--3 { transform: rotate(7deg) translate(8px, 6px); }

.jd-float-card {
	position: absolute;
	z-index: 6;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px 10px 10px;
	border-radius: var(--md-sys-shape-corner-large-increased);
	background: var(--md-sys-color-surface-container-lowest);
	color: var(--md-sys-color-on-surface);
	box-shadow: var(--md-sys-elevation-3);
	font: 700 0.875rem/1.2 var(--md-ref-typeface-brand);
	text-decoration: none;
	animation: jd-float 6s ease-in-out infinite;
	white-space: nowrap;
}
[data-theme="dark"] .jd-float-card { background: var(--md-sys-color-surface-container-high); }
.jd-float-card small { display: block; font-weight: 550; font-size: 0.75rem; color: var(--md-sys-color-on-surface-variant); }
.jd-float-card__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: var(--jd-accent); color: var(--jd-on-accent); flex: none; }
.jd-float-card__icon--secondary { background: var(--jd-secondary); color: var(--jd-on-secondary); }
.jd-float-card--1 { top: 4%; left: -2%; animation-delay: -2s; }
.jd-float-card--2 { bottom: 2%; right: 4%; animation-delay: -4s; }
.jd-float-card--3 { top: 36%; right: -4%; }
a.jd-float-card:hover { color: var(--md-sys-color-on-surface); box-shadow: var(--md-sys-elevation-4); }
@media (max-width: 560px) { .jd-float-card--3 { display: none; } .jd-float-card { font-size: 0.75rem; } }
.jd-hero__image { position: absolute; inset: 8% 6% 6% 8%; z-index: 3; border-radius: var(--md-sys-shape-corner-extra-extra-large); overflow: hidden; box-shadow: var(--md-sys-elevation-4); }
.jd-hero__image img { width: 100%; height: 100%; object-fit: cover; }

/* Category tiles */
.jd-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 14px; }
@media (max-width: 600px) {
	.jd-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.jd-cat-tile { min-height: 168px; padding: 16px; gap: 12px; }
	.jd-cat-tile__shape { width: 56px; height: 56px; }
	.jd-cat-tile__shape .jd-icon { width: 24px; height: 24px; }
	.jd-cat-tile__arrow { top: 14px; right: 14px; width: 34px; height: 34px; }
	.jd-cat-tile__name { font-size: 1rem; }
}
.jd-cat-tile {
	--tile: var(--md-sys-color-secondary-container);
	--tile-on: var(--md-sys-color-on-secondary-container);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-height: 200px;
	padding: 22px;
	border-radius: var(--md-sys-shape-corner-extra-large);
	background: var(--md-sys-color-surface-container-low);
	color: var(--md-sys-color-on-surface);
	text-decoration: none;
	overflow: hidden;
	transition: transform var(--jd-dur-3) var(--md-sys-motion-spring-default-spatial), background-color var(--jd-dur-2) ease, border-radius var(--jd-dur-3) var(--md-sys-motion-spring-default-spatial);
}
.jd-cat-tile:hover { color: var(--md-sys-color-on-surface); background: var(--md-sys-color-surface-container-high); transform: translateY(-4px); border-radius: var(--md-sys-shape-corner-extra-extra-large); }
.jd-cat-tile__shape {
	position: relative;
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	color: var(--tile-on);
	transition: transform var(--jd-dur-4) var(--md-sys-motion-spring-fast-spatial);
}
.jd-cat-tile__shape::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--tile);
	-webkit-mask: var(--jd-shape) center / contain no-repeat;
	mask: var(--jd-shape) center / contain no-repeat;
	transition: transform var(--jd-dur-4) var(--md-sys-motion-spring-fast-spatial);
}
.jd-cat-tile__shape .jd-icon { position: relative; width: 30px; height: 30px; }
.jd-cat-tile:hover .jd-cat-tile__shape::before { transform: rotate(45deg) scale(1.08); }
.jd-cat-tile > div { margin-top: auto; }
.jd-cat-tile__name { font: 750 1.1875rem/1.2 var(--md-ref-typeface-brand); letter-spacing: -0.02em; margin: 0 0 4px; }
.jd-cat-tile__count { font-size: 0.875rem; color: var(--md-sys-color-on-surface-variant); font-weight: 600; }
.jd-cat-tile__arrow { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--md-sys-color-surface-container-highest); transition: transform var(--jd-dur-3) var(--md-sys-motion-spring-fast-spatial), background-color var(--jd-dur-2) ease; }
.jd-cat-tile:hover .jd-cat-tile__arrow { transform: rotate(-45deg); background: var(--jd-accent); color: var(--jd-on-accent); }
.jd-cat-tile--c1 { --tile: var(--jd-accent); --tile-on: var(--jd-on-accent); }
.jd-cat-tile--c2 { --tile: var(--jd-secondary); --tile-on: var(--jd-on-secondary); }
.jd-cat-tile--c3 { --tile: #7DD3FC; --tile-on: #06283D; }
.jd-cat-tile--c4 { --tile: #FFB38A; --tile-on: #3A1400; }
.jd-cat-tile--c5 { --tile: #86EFAC; --tile-on: #052E16; }
.jd-cat-tile--c6 { --tile: #F9A8D4; --tile-on: #3B0724; }

/* Product tabs section */
.jd-products-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 32px; }
.jd-empty {
	display: grid;
	justify-items: center;
	gap: 14px;
	padding: clamp(32px, 6vw, 64px) 24px;
	text-align: center;
	border-radius: var(--md-sys-shape-corner-extra-large);
	border: 2px dashed var(--md-sys-color-outline-variant);
	color: var(--md-sys-color-on-surface-variant);
}
.jd-empty__shape { width: 88px; height: 88px; display: grid; place-items: center; color: var(--jd-on-accent); position: relative; }
.jd-empty__shape::before { content: ""; position: absolute; inset: 0; background: var(--jd-accent); -webkit-mask: var(--jd-shape-url-cookie) center/contain no-repeat; mask: var(--jd-shape-url-cookie) center/contain no-repeat; animation: jd-rotate 20s linear infinite; }
.jd-empty__shape .jd-icon { position: relative; width: 36px; height: 36px; }
.jd-empty h3 { margin: 0; }

/* Bento features */
.jd-bento {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-areas:
		"code code upd sup"
		"code code prev prev"
		"dl sec docs docs";
	gap: 14px;
}
@media (max-width: 1024px) {
	.jd-bento { grid-template-columns: repeat(2, 1fr); grid-template-areas: "code code" "upd sup" "prev prev" "dl sec" "docs docs"; }
}
@media (max-width: 560px) {
	.jd-bento { grid-template-columns: 1fr; grid-template-areas: "code" "upd" "sup" "prev" "dl" "sec" "docs"; }
}
.jd-bento > * { display: flex; flex-direction: column; gap: 10px; min-height: 200px; overflow: hidden; }
.jd-bento h3 { font-size: 1.375rem; letter-spacing: -0.02em; margin: auto 0 0; }
.jd-bento p { margin: 0; color: var(--md-sys-color-on-surface-variant); font-size: 0.9375rem; }
.jd-bento .jd-card--accent p,
.jd-bento .jd-card--ink p { color: inherit; opacity: 0.8; }
.jd-bento__icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 18px; background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); }
.jd-card--accent .jd-bento__icon { background: rgb(0 0 0 / 0.1); color: inherit; }
.jd-bento__code { grid-area: code; }
.jd-bento__upd { grid-area: upd; }
.jd-bento__sup { grid-area: sup; }
.jd-bento__prev { grid-area: prev; }
.jd-bento__dl { grid-area: dl; }
.jd-bento__sec { grid-area: sec; }
.jd-bento__docs { grid-area: docs; }
.jd-code {
	margin: 0 0 12px;
	padding: 18px 20px;
	border-radius: var(--md-sys-shape-corner-large);
	background: #0A0A0D;
	color: #D8D8E0;
	font: 500 0.8125rem/1.75 var(--md-ref-typeface-mono);
	overflow: hidden;
	white-space: pre;
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
}
.jd-code .k { color: #C792EA; }
.jd-code .f { color: #82AAFF; }
.jd-code .s { color: var(--jd-accent); }
.jd-code .c { color: #6B6B7A; }
.jd-code .n { color: #F78C6C; }
.jd-devices { display: flex; align-items: flex-end; gap: 10px; margin-top: 8px; }
.jd-devices span { display: block; border-radius: 10px; border: 3px solid currentColor; opacity: 0.9; background: linear-gradient(160deg, color-mix(in srgb, var(--jd-secondary) 50%, transparent), color-mix(in srgb, var(--jd-accent) 60%, transparent)); }
.jd-devices span:nth-child(1) { width: 140px; height: 88px; }
.jd-devices span:nth-child(2) { width: 64px; height: 84px; }
.jd-devices span:nth-child(3) { width: 34px; height: 60px; border-radius: 8px; }

/* Marquee */
.jd-marquee { display: grid; gap: 12px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.jd-marquee__track { display: flex; gap: 12px; width: max-content; animation: jd-marquee 40s linear infinite; }
.jd-marquee__track--reverse { animation-direction: reverse; animation-duration: 48s; }
.jd-marquee:hover .jd-marquee__track { animation-play-state: paused; }
.jd-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 60px;
	padding: 0 24px;
	border-radius: var(--md-sys-shape-corner-full);
	background: var(--md-sys-color-surface-container-low);
	box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant);
	font: 700 1.0625rem/1 var(--md-ref-typeface-brand);
	white-space: nowrap;
}
.jd-marquee__item::before { content: ""; width: 10px; height: 10px; border-radius: 2px; transform: rotate(45deg); background: var(--jd-accent); }
.jd-marquee__item:nth-child(3n+2)::before { background: var(--jd-secondary); }
.jd-marquee__item:nth-child(3n)::before { background: var(--md-sys-color-on-surface); }
@keyframes jd-marquee { to { transform: translateX(calc(-50% - 6px)); } }

/* Steps */
.jd-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; counter-reset: step; }
@media (max-width: 860px) { .jd-steps { grid-template-columns: 1fr; } }
.jd-step { display: grid; gap: 12px; align-content: start; }
.jd-step__num {
	position: relative;
	width: 84px;
	height: 84px;
	display: grid;
	place-items: center;
	font: 800 1.75rem/1 var(--md-ref-typeface-brand);
	color: var(--jd-on-accent);
	margin-bottom: 12px;
}
.jd-step__num::before { content: ""; position: absolute; inset: 0; background: var(--jd-accent); -webkit-mask: var(--jd-shape) center/contain no-repeat; mask: var(--jd-shape) center/contain no-repeat; transition: transform var(--jd-dur-4) var(--md-sys-motion-spring-fast-spatial); }
.jd-step:hover .jd-step__num::before { transform: rotate(60deg) scale(1.1); }
.jd-step__num span { position: relative; }
.jd-step:nth-child(2) .jd-step__num { color: var(--jd-on-secondary); }
.jd-step:nth-child(2) .jd-step__num::before { background: var(--jd-secondary); }
.jd-step:nth-child(3) .jd-step__num { color: var(--md-sys-color-inverse-on-surface); }
.jd-step:nth-child(3) .jd-step__num::before { background: var(--md-sys-color-inverse-surface); }
.jd-step h3 { margin: 0; }
.jd-step p { margin: 0; color: var(--md-sys-color-on-surface-variant); }

/* License cards */
.jd-licenses { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 760px) { .jd-licenses { grid-template-columns: 1fr; } }
.jd-license { display: grid; gap: 18px; align-content: start; }
.jd-license__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.jd-license h3 { margin: 0; font-size: 1.75rem; letter-spacing: -0.03em; }
.jd-license ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.jd-license li { display: flex; gap: 12px; align-items: flex-start; }
.jd-license li .jd-icon { width: 22px; height: 22px; flex: none; color: var(--md-sys-color-success); margin-top: 1px; }
.jd-card--ink .jd-license li .jd-icon,
.jd-license.jd-card--ink li .jd-icon { color: var(--jd-accent); }
.jd-license li.is-no { opacity: 0.55; }
.jd-license li.is-no .jd-icon { color: var(--md-sys-color-on-surface-variant); }

/* Custom website CTA */
.jd-cta {
	position: relative;
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
	padding: clamp(32px, 6vw, 80px);
	border-radius: var(--md-sys-shape-corner-extra-extra-large);
	background: #111116;
	color: #F2F2F5;
	overflow: hidden;
	isolation: isolate;
}
[data-theme="dark"] .jd-cta { background: var(--md-sys-color-surface-container-high); }
@media (max-width: 900px) { .jd-cta { grid-template-columns: 1fr; } }
.jd-cta h2 { color: #fff; font-size: clamp(2rem, 1.2rem + 3vw, 3.75rem); letter-spacing: -0.045em; font-weight: 800; margin: 16px 0; }
.jd-cta p { color: rgb(255 255 255 / 0.75); font-size: 1.0625rem; max-width: 560px; }
.jd-cta .jd-eyebrow { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.14); color: #fff; }
.jd-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.jd-cta .jd-btn--outlined { --jd-btn-fg: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35); }
.jd-cta__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; position: relative; z-index: 1; }
.jd-cta__list li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	border-radius: var(--md-sys-shape-corner-large-increased);
	background: rgb(255 255 255 / 0.06);
	backdrop-filter: blur(8px);
	font-weight: 700;
	color: #fff;
	transition: transform var(--jd-dur-3) var(--md-sys-motion-spring-fast-spatial), background-color var(--jd-dur-2) ease;
}
.jd-cta__list li:hover { transform: translateX(-6px); background: rgb(255 255 255 / 0.1); }
.jd-cta__list .jd-icon { width: 40px; height: 40px; padding: 9px; border-radius: 14px; background: var(--jd-accent); color: var(--jd-on-accent); }
.jd-cta__shape { position: absolute; z-index: -1; background: var(--jd-accent); opacity: 0.12; -webkit-mask: var(--jd-shape) center/contain no-repeat; mask: var(--jd-shape) center/contain no-repeat; animation: jd-rotate 50s linear infinite; }
.jd-cta__shape--1 { width: 420px; height: 420px; right: -120px; top: -140px; }
.jd-cta__shape--2 { width: 240px; height: 240px; left: -80px; bottom: -100px; background: var(--jd-secondary); opacity: 0.25; animation-direction: reverse; }

/* FAQ */
.jd-faq { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .jd-faq { grid-template-columns: 1fr; } }
.jd-faq__aside { position: sticky; top: calc(var(--jd-topbar-h) + var(--jd-admin-bar) + 24px); }
.jd-faq__aside .jd-card { margin-top: 28px; display: grid; gap: 12px; }

/* Newsletter */
.jd-newsletter {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: center;
	padding: clamp(28px, 5vw, 64px);
	border-radius: var(--md-sys-shape-corner-extra-extra-large);
	background: var(--jd-accent);
	color: var(--jd-on-accent);
	overflow: hidden;
	isolation: isolate;
}
@media (max-width: 860px) { .jd-newsletter { grid-template-columns: 1fr; } }
.jd-newsletter h2 { color: inherit; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); letter-spacing: -0.04em; font-weight: 800; margin: 0 0 10px; }
.jd-newsletter h2 .jd-hl { background: var(--jd-on-accent); color: var(--jd-accent); }
.jd-newsletter p { margin: 0; opacity: 0.8; }
.jd-newsletter form { display: flex; gap: 8px; padding: 6px; border-radius: var(--md-sys-shape-corner-full); background: rgb(255 255 255 / 0.55); }
[data-theme="dark"] .jd-newsletter form { background: rgb(255 255 255 / 0.45); }
.jd-newsletter input[type="email"] { border: 0; background: transparent; box-shadow: none; min-height: 52px; color: #141A00; font-weight: 600; }
.jd-newsletter input[type="email"]::placeholder { color: #141A00; opacity: 0.6; }
.jd-newsletter .jd-btn { --jd-btn-bg: #111116; --jd-btn-fg: #fff; flex: none; }
.jd-newsletter__shape { position: absolute; z-index: -1; right: -60px; bottom: -80px; width: 280px; height: 280px; background: rgb(0 0 0 / 0.07); -webkit-mask: var(--jd-shape) center/contain no-repeat; mask: var(--jd-shape) center/contain no-repeat; animation: jd-rotate 40s linear infinite; }
.jd-newsletter__note { font-size: 0.8125rem; margin-top: 10px !important; }
.jd-notice-inline { margin-top: 12px; padding: 12px 16px; border-radius: 14px; background: rgb(0 0 0 / 0.08); font-weight: 650; }

/* 7. BLOG, PAGES & PROSE =================================================== */
.jd-page-hero { padding-block: clamp(32px, 5vw, 64px) clamp(24px, 3vw, 40px); position: relative; }
.jd-page-hero__title { font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4.25rem); letter-spacing: -0.05em; font-weight: 800; margin: 16px 0 12px; }
.jd-page-hero__lead { color: var(--md-sys-color-on-surface-variant); font-size: 1.125rem; max-width: 640px; margin: 0; }
.jd-page-hero--center { text-align: center; }
.jd-page-hero--center .jd-page-hero__lead { margin-inline: auto; }
.jd-page-hero--center .jd-breadcrumbs { justify-content: center; }

.jd-breadcrumbs,
.woocommerce-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--md-sys-color-on-surface-variant);
	margin: 0;
}
.jd-breadcrumbs a,
.woocommerce-breadcrumb a { color: var(--md-sys-color-on-surface-variant); text-decoration: none; padding: 4px 8px; border-radius: 8px; margin: 0 -4px; }
.jd-breadcrumbs a:hover,
.woocommerce-breadcrumb a:hover { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); }
.jd-breadcrumbs .jd-icon { width: 16px; height: 16px; opacity: 0.6; }
.jd-breadcrumbs [aria-current] { color: var(--md-sys-color-on-surface); }

/* Post cards */
.jd-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: clamp(16px, 2vw, 24px); }
.jd-post-card {
	display: flex;
	flex-direction: column;
	border-radius: var(--md-sys-shape-corner-extra-large);
	background: var(--md-sys-color-surface-container-low);
	overflow: hidden;
	transition: transform var(--jd-dur-3) var(--md-sys-motion-spring-default-spatial), box-shadow var(--jd-dur-3) ease, background-color var(--jd-dur-2) ease;
}
.jd-post-card:hover { transform: translateY(-4px); box-shadow: var(--md-sys-elevation-3); background: var(--md-sys-color-surface-container); }
.jd-post-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; margin: 8px 8px 0; border-radius: calc(var(--md-sys-shape-corner-extra-large) - 6px); }
.jd-post-card__media img,
.jd-post-card__media .jd-cover { width: 100%; height: 100%; object-fit: cover; transition: transform var(--jd-dur-4) var(--md-sys-motion-spring-default-spatial); }
.jd-post-card:hover .jd-post-card__media img,
.jd-post-card:hover .jd-post-card__media .jd-cover { transform: scale(1.04); }
.jd-post-card__body { display: grid; gap: 10px; padding: 20px 22px 22px; justify-items: start; }
.jd-post-card__title { margin: 0; font-size: 1.25rem; letter-spacing: -0.02em; }
.jd-post-card__title a { color: inherit; text-decoration: none; }
.jd-post-card__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.jd-post-card__excerpt { margin: 0; color: var(--md-sys-color-on-surface-variant); font-size: 0.9375rem; }
.jd-post-card.sticky { outline: 2px solid var(--jd-accent); }

.jd-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 600; color: var(--md-sys-color-on-surface-variant); }
.jd-post-meta__author { display: inline-flex; align-items: center; gap: 8px; color: var(--md-sys-color-on-surface); }

/* Single post */
.jd-article__header { text-align: center; max-width: 900px; margin-inline: auto; padding-block: clamp(24px, 4vw, 56px) 32px; }
.jd-article__header .jd-post-meta { justify-content: center; }
.jd-article__title { font-size: clamp(2.25rem, 1.2rem + 3.8vw, 4.25rem); letter-spacing: -0.05em; font-weight: 800; margin: 18px 0; }
.jd-article__media { margin: 0 auto clamp(32px, 5vw, 56px); max-width: 1200px; border-radius: var(--md-sys-shape-corner-extra-extra-large); overflow: hidden; aspect-ratio: 16 / 8; }
.jd-article__media img,
.jd-article__media .jd-cover { width: 100%; height: 100%; object-fit: cover; }
.jd-article__footer { max-width: var(--jd-container-narrow); margin: 48px auto 0; display: grid; gap: 24px; }
.jd-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.jd-author-box { display: flex; gap: 18px; align-items: flex-start; }
.jd-author-box img { border-radius: 24px; }
.jd-author-box h3 { margin: 0 0 6px; font-size: 1.125rem; }
.jd-author-box p { margin: 0; color: var(--md-sys-color-on-surface-variant); }
.jd-progress { position: fixed; top: var(--jd-admin-bar); left: 0; right: 0; height: 4px; z-index: 90; background: transparent; pointer-events: none; }
.jd-progress span { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--p, 0)); background: var(--jd-accent); border-radius: 0 4px 4px 0; }

/* Prose */
.jd-prose,
.entry-content { font-size: 1.0625rem; line-height: 1.75; }
.jd-prose > *,
.entry-content > * { max-width: var(--jd-container-narrow); margin-inline: auto; }
.jd-prose > .alignwide,
.entry-content > .alignwide { max-width: 1100px; }
.jd-prose > .alignfull,
.entry-content > .alignfull { max-width: none; width: 100vw; margin-left: calc(50% - 50vw); }
.jd-prose :is(h2, h3, h4),
.entry-content :is(h2, h3, h4) { margin-top: 2em; }
.jd-prose a,
.entry-content a { text-decoration: underline; text-decoration-color: var(--jd-accent); text-decoration-thickness: 2px; font-weight: 600; }
[data-theme="light"] .jd-prose a,
[data-theme="light"] .entry-content a { text-decoration-color: color-mix(in oklab, var(--jd-accent) 60%, #000); }
.jd-prose blockquote,
.entry-content blockquote,
.wp-block-quote {
	margin: 2em auto;
	padding: 24px 28px;
	border-radius: var(--md-sys-shape-corner-extra-large);
	background: var(--md-sys-color-surface-container-low);
	border-left: 6px solid var(--jd-accent);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}
.jd-prose blockquote p:last-child,
.entry-content blockquote p:last-child { margin-bottom: 0; }
.jd-prose pre,
.entry-content pre,
.wp-block-code {
	padding: 20px 24px;
	border-radius: var(--md-sys-shape-corner-large);
	background: #0A0A0D;
	color: #E5E5EA;
	overflow-x: auto;
	font-size: 0.875rem;
	line-height: 1.7;
}
.jd-prose :not(pre) > code,
.entry-content :not(pre) > code { padding: 2px 6px; border-radius: 6px; background: var(--md-sys-color-surface-container-high); font-size: 0.875em; }
.jd-prose img,
.entry-content img { border-radius: var(--md-sys-shape-corner-large); }
.jd-prose figure,
.entry-content figure { margin: 2em auto; }
.jd-prose figcaption,
.entry-content figcaption,
.wp-element-caption { text-align: center; font-size: 0.875rem; color: var(--md-sys-color-on-surface-variant); margin-top: 10px; }
.jd-prose table,
.entry-content table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.jd-prose th,
.jd-prose td,
.entry-content th,
.entry-content td { padding: 12px 14px; border-bottom: 1px solid var(--md-sys-color-outline-variant); text-align: left; }
.jd-prose ul,
.jd-prose ol,
.entry-content ul,
.entry-content ol { padding-left: 1.4em; }
.jd-prose li,
.entry-content li { margin: 0.35em 0; }
.jd-prose li::marker,
.entry-content li::marker { color: var(--md-sys-color-on-surface-variant); }
.wp-block-separator { border: 0; height: 1px; background: var(--md-sys-color-outline-variant); }
.wp-block-button__link { text-decoration: none !important; }
.wp-block-button.is-style-outline .wp-block-button__link { --jd-btn-bg: transparent; --jd-btn-fg: var(--md-sys-color-on-surface); box-shadow: inset 0 0 0 1px var(--md-sys-color-outline); border: 0; }
.wp-block-image.is-style-rounded img { border-radius: var(--md-sys-shape-corner-extra-extra-large); }
.wp-block-group.has-background { border-radius: var(--md-sys-shape-corner-extra-large); padding: clamp(24px, 4vw, 48px); }
.wp-block-cover { border-radius: var(--md-sys-shape-corner-extra-large); overflow: hidden; }
.alignleft { float: left; margin: 0.4em 1.6em 1em 0; }
.alignright { float: right; margin: 0.4em 0 1em 1.6em; }
.aligncenter { margin-inline: auto; }
.wp-caption,
.gallery-caption { max-width: 100%; }
.bypostauthor { display: block; }

/* Widgets & sidebar */
.jd-sidebar { display: grid; gap: 16px; position: sticky; top: calc(var(--jd-topbar-h) + var(--jd-admin-bar) + 24px); }
.jd-widget { padding: 22px; border-radius: var(--md-sys-shape-corner-extra-large); background: var(--md-sys-color-surface-container-low); }
.jd-widget__title { font: 750 0.8125rem/1 var(--md-ref-typeface-brand); letter-spacing: 0.1em; text-transform: uppercase; color: var(--md-sys-color-on-surface-variant); margin: 0 0 16px; }
.jd-widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.jd-widget ul a { color: var(--md-sys-color-on-surface); text-decoration: none; font-weight: 600; }
.jd-widget ul a:hover { text-decoration: underline; }

/* Search form */
.jd-search-form { display: flex; gap: 8px; align-items: center; padding: 6px 6px 6px 18px; border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-surface-container-high); max-width: 560px; }
.jd-search-form input[type="search"] { border: 0; background: transparent; box-shadow: none; min-height: 48px; padding: 0 4px; }
.jd-search-form .jd-icon { color: var(--md-sys-color-on-surface-variant); }

/* Pagination */
.jd-pagination,
.woocommerce-pagination ul.page-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 48px 0 0; padding: 0; list-style: none; border: 0 !important; }
.woocommerce-pagination ul.page-numbers li { border: 0 !important; }
.jd-pagination .page-numbers,
.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span {
	display: inline-grid;
	place-items: center;
	min-width: 48px;
	height: 48px;
	padding: 0 14px;
	border-radius: var(--md-sys-shape-corner-full);
	background: var(--md-sys-color-surface-container-low);
	color: var(--md-sys-color-on-surface);
	font-weight: 700;
	text-decoration: none;
	transition: background-color var(--jd-dur-2) ease, border-radius var(--jd-dur-3) var(--md-sys-motion-spring-fast-spatial);
}
.jd-pagination .page-numbers:hover,
.woocommerce-pagination .page-numbers a:hover { background: var(--md-sys-color-surface-container-highest); }
.jd-pagination .page-numbers.current,
.woocommerce-pagination .page-numbers span.current { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); border-radius: var(--md-sys-shape-corner-large); }
.jd-pagination .jd-icon { width: 20px; height: 20px; }

/* Comments */
.jd-comments { max-width: var(--jd-container-narrow); margin: 64px auto 0; }
.jd-comments__title { font-size: 1.5rem; }
.comment-list,
.comment-list .children { list-style: none; margin: 0; padding: 0; }
.comment-list .children { padding-left: clamp(16px, 4vw, 48px); }
.comment-body { padding: 20px 22px; margin-bottom: 12px; border-radius: var(--md-sys-shape-corner-extra-large); background: var(--md-sys-color-surface-container-low); }
.comment-author { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.comment-author img { border-radius: 50%; }
.comment-author .says { display: none; }
.comment-metadata { font-size: 0.8125rem; margin: 4px 0 10px; }
.comment-metadata a { color: var(--md-sys-color-on-surface-variant); text-decoration: none; }
.comment-reply-link { font-weight: 700; font-size: 0.875rem; }
.comment-respond { margin-top: 32px; padding: clamp(20px, 3vw, 32px); border-radius: var(--md-sys-shape-corner-extra-large); background: var(--md-sys-color-surface-container-low); }
.comment-form { display: grid; gap: 16px; }
.comment-form p { margin: 0; display: grid; gap: 6px; }
.comment-form .comment-form-cookies-consent { display: flex; gap: 10px; align-items: center; }

/* 404 */
.jd-404 { text-align: center; padding-block: clamp(48px, 8vw, 120px); display: grid; justify-items: center; gap: 16px; }
.jd-404__num { display: flex; align-items: center; gap: 0.08em; font: 800 clamp(6rem, 3rem + 14vw, 14rem)/0.9 var(--md-ref-typeface-brand); letter-spacing: -0.06em; }
.jd-404__zero { display: inline-block; width: 0.8em; height: 0.8em; position: relative; }
.jd-404__zero::before { content: ""; position: absolute; inset: 0; background: var(--jd-accent); -webkit-mask: var(--jd-shape) center/contain no-repeat; mask: var(--jd-shape) center/contain no-repeat; animation: jd-rotate 12s linear infinite; }

/* 8. UTILITIES, MOTION & A11Y ============================================= */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--md-sys-motion-spring-default-effects), transform 900ms var(--md-sys-motion-spring-slow-spatial); transition-delay: calc(var(--i, 0) * 70ms); }
[data-reveal].is-visible { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }
@keyframes jd-fade-up { from { opacity: 0; transform: translateY(16px); } }

.jd-mt-0 { margin-top: 0; }
.jd-center { text-align: center; }
.jd-flex { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.jd-hide-mobile { display: none; }
@media (min-width: 768px) { .jd-hide-mobile { display: initial; } .jd-hide-desktop { display: none; } }

@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;
	}
	[data-reveal] { opacity: 1; transform: none; }
}

@media print {
	.jd-topbar,
	.jd-announce,
	.jd-bottom-nav,
	.jd-fab,
	.jd-footer,
	.jd-snackbar { display: none !important; }
	body { background: #fff; color: #000; }
}

/* Wordmark-only brand ("jako" + "store" chip) */
.jd-brand--wordmark { padding: 6px 2px; }
.jd-brand--wordmark .jd-logo-wordmark { height: 30px; }
.jd-brand--footer.jd-brand--wordmark .jd-logo-wordmark { height: 34px; }
@media (max-width: 420px) { .jd-brand--header.jd-brand--wordmark .jd-logo-wordmark { height: 24px; } }
@media (max-width: 360px) { .jd-brand--header.jd-brand--wordmark .jd-logo-wordmark { display: block; height: 22px; } }
[data-theme="light"] .jd-brand .jd-logo-wordmark__chip { fill: #111116; }
[data-theme="light"] .jd-brand .jd-logo-wordmark__chip-text { stroke: #C9F53B; }

/* Text logo ("jako store") */
.jd-textlogo { font: 800 1.5rem/1 var(--md-ref-typeface-brand); letter-spacing: -0.045em; color: var(--md-sys-color-on-surface); white-space: nowrap; }
.jd-textlogo__b { color: var(--jd-accent); }
:root[data-theme="light"] .jd-textlogo__b { color: var(--md-sys-color-on-surface); }
.jd-brand--text { padding: 6px 4px; }
.jd-brand--footer .jd-textlogo { font-size: 1.75rem; }
@media (max-width: 420px) { .jd-brand--header .jd-textlogo { font-size: 1.3rem; } }

/* Media products (photos & videos) */
.jd-sp--media .jd-sp__gallery .jd-window__bar { display: none; }
.jd-sp--media .jd-sp__gallery-inner { border-radius: inherit; }