@font-face {
			font-family: "IRANYekanXVF";
			src: url("IRANYekanXVF.woff");
		}

		@font-face {
			font-family: "IRANYekanXVF";
			src: url("IRANYekanXVF.woff2");
			font-weight: 100 900;
			font-display: swap
		}

		:root {
			--green: #247e59;
			--dark: #006839;
			--orange: #f68b1f;
			--paper: #ffffff;
			--ink: #253c31;
			--muted: #7b8179;
			--line: #e5e8dd;
			--white: #fff;
			--soft: #d8e6dc
		}

		* {
			box-sizing: border-box
		}

		html {
			scroll-behavior: smooth;
			scroll-padding-top: 100px
		}

		body {
			margin: 0;
			background: var(--paper);
			color: var(--ink);
			font-family: IRANYekanXVF, Tahoma, sans-serif;
			font-size: 14px;
			line-height: 1.8
		}

		button,
		input,
		textarea,
		select {
			font: inherit
		}

		button,
		a,
		input,
		textarea,
		select {
			-webkit-tap-highlight-color: transparent
		}

		button,
		a {
			touch-action: manipulation
		}

		button {
			cursor: pointer
		}

		button {
			color: inherit
		}

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

		button:disabled {
			opacity: .5;
			cursor: wait
		}

		button:focus-visible,
		a:focus-visible,
		input:focus-visible,
		textarea:focus-visible,
		select:focus-visible {
			outline: 3px solid var(--orange);
			outline-offset: 4px
		}

		button {
			border: 0
		}

		img {
			display: block;
			max-width: 100%;
			object-fit: cover
		}

		svg {
			width: 21px;
			height: 21px;
			fill: none;
			stroke: currentColor;
			stroke-width: 1.7;
			stroke-linecap: round;
			stroke-linejoin: round;
			flex-shrink: 0
		}

		[hidden] {
			display: none !important
		}

		.wrap {
			width: min(1160px, calc(100% - 48px));
			margin: auto
		}

		.header {
			border-bottom: 1px solid var(--line);
			background: var(--paper)
		}

		.header-inner {
			height: 94px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 24px
		}

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

		.logo {
			width: 49px;
			height: 49px;
			background: transparent;
			color: white;
			border-radius: 50%;
			display: grid;
			place-items: center
		}

		.logo svg {
			width: 100%;
			height: 100%
		}

		.brand-name {
			font-size: 24px;
			font-weight: 850;
			line-height: 1.4
		}

		.brand-sub {
			font-size: 9px;
			letter-spacing: 3px;
			color: var(--green);
			font-weight: 500
		}

		.nav {
			display: flex;
			align-items: center;
			gap: 36px;
			font-size: 13px
		}

		.nav a {
			padding: 8px 0
		}

		.nav a:first-child {
			color: var(--green);
			border-bottom: 2px solid var(--green)
		}

		.outline-btn,
		.primary-btn,
		.soft-btn {
			min-height: 46px;
			padding: 10px 20px;
			border-radius: 10px;
			display: inline-flex;
			gap: 9px;
			align-items: center;
			justify-content: center;
			font-weight: 600;
			font-size: 13px
		}

		.outline-btn {
			border: 1px solid #d6ddcf;
			background: transparent
		}

		.primary-btn {
			background: var(--green);
			color: #fff
		}

		.primary-btn:hover {
			background: #1a6345
		}

		.soft-btn {
			background: var(--soft);
			color: var(--green)
		}

		.hero {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 72px;
			padding: 56px 0 58px;
			align-items: center
		}

		.eyebrow {
			display: flex;
			align-items: center;
			gap: 10px;
			font-size: 12px;
			font-weight: 550;
			color: var(--green);
			margin-bottom: 18px
		}

		.eyebrow:before {
			content: '';
			width: 25px;
			height: 1px;
			background: var(--green)
		}

		h1 {
			font-size: clamp(34px, 4.4vw, 58px);
			font-weight: 850;
			line-height: 1.55;
			letter-spacing: -1.9px;
			margin: 0 0 18px
		}

		h1 span {
			color: var(--green);
			position: relative;
			white-space: nowrap
		}

		h1 span:after {
			content: '';
			position: absolute;
			bottom: 0;
			right: 0;
			left: 0;
			height: 7px;
			background: var(--orange);
			border-radius: 60%;
			z-index: -1;
			transform: rotate(-2deg)
		}

		.hero-copy {
			max-width: 470px
		}

		.hero-copy>p {
			max-width: 385px;
			color: var(--muted);
			font-size: 14px;
			line-height: 2.2;
			margin: 0 0 25px
		}

		.hero-actions {
			display: flex;
			align-items: center;
			gap: 24px
		}

		.hero-actions .primary-btn {
			padding: 13px 24px
		}

		.hero-actions small {
			font-size: 11px;
			color: var(--muted);
			display: flex;
			align-items: center;
			gap: 6px
		}

		.dot {
			height: 7px;
			width: 7px;
			display: inline-block;
			border-radius: 50%;
			background: var(--green)
		}

		.hero-visual {
			position: relative;
			isolation: isolate;
			margin: 0 12px 0 0
		}

		.hero-photo {
			height: 366px;
			width: 100%;
			border-radius: 140px 140px 22px 22px;
			filter: brightness(.85);
			object-position: 50% 54%
		}

		.photo-outline {
			position: absolute;
			inset: -12px 13px 13px -12px;
			border: 1px solid #c7d4c1;
			border-radius: 140px 140px 22px 22px;
			z-index: -1
		}

		.photo-stamp {
			position: absolute;
			left: -22px;
			top: 14px;
			width: 94px;
			height: 94px;
			border: 6px solid var(--paper);
			border-radius: 50%;
			background: var(--orange);
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			transform: rotate(-13deg);
			color: var(--dark);
			font-size: 10px;
			font-weight: 700;
			line-height: 1.7
		}

		.photo-stamp span {
			font-size: 7px;
			letter-spacing: .2px;
			white-space: nowrap
		}

		.photo-stamp svg {
			height: 27px;
			width: 27px;
			margin-bottom: 2px
		}

		.photo-caption {
			position: absolute;
			right: 20px;
			bottom: 19px;
			color: #fff;
			left: 20px;
			display: flex;
			justify-content: space-between;
			align-items: end
		}

		.photo-caption strong {
			display: block;
			font-size: 17px
		}

		.photo-caption small {
			font-size: 10px;
			color: #e6e9de
		}

		.photo-caption>span {
			font-size: 10px;
			letter-spacing: 2px
		}

		.intro-strip {
			border-top: 1px solid var(--line);
			border-bottom: 1px solid var(--line);
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 75px;
			padding: 16px;
			margin-bottom: 45px
		}

		.intro-strip span {
			font-size: 12px;
			display: flex;
			gap: 10px;
			align-items: center;
			color: #737d70
		}

		.intro-strip svg {
			color: var(--green);
			width: 19px
		}

		.section-heading {
			display: flex;
			justify-content: space-between;
			align-items: end;
			gap: 20px;
			padding: 32px 0px;
		}

		.section-kicker {
			color: var(--green);
			font-size: 10px;
			letter-spacing: 3px;
			display: block;
			margin-bottom: 6px
		}

		.section-heading h2 {
			font-size: 26px;
			margin: 0;
			font-weight: 800;
			letter-spacing: -.8px
		}

		.section-heading p {
			color: var(--muted);
			font-size: 12px;
			margin: 4px 0 0
		}

		.section-heading>span {
			color: var(--muted);
			font-size: 11px
		}

		.categories {
			display: flex;
			gap: 16px;
			overflow: auto;
			padding: 24px 3px 28px;
			scrollbar-width: none
		}

		.categories::-webkit-scrollbar {
			display: none
		}

		.category {
			flex: 1;
			min-width: 125px;
			padding: 14px 15px 12px;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: #fff;
			border: 1px solid var(--line);
			border-radius: 17px;
			transition: background .2s, border-color .2s, transform .2s
		}

		.category:hover {
			transform: translateY(-3px)
		}

		.category[aria-pressed=true] {
			background: var(--green);
			border-color: var(--green);
			color: #fff;
			box-shadow: 0 7px 15px #247e5917
		}

		.category img {
			width: 66px;
			height: 66px;
			border-radius: 50%;
			margin-bottom: 9px;
			outline: 3px solid #f5f3ed;
			outline-offset: 2px
		}

		.category strong {
			font-size: 12px;
			font-weight: 600
		}

		.category small {
			font-size: 10px;
			color: var(--muted);
			margin-top: 2px
		}

		.category[aria-pressed=true] small {
			color: #d4e6db
		}

		.menu-toolbar {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 18px;
			padding: 32px 0 32px;
		}

		.filters {
			display: flex;
			gap: 6px
		}

		.filter {
			background: transparent;
			border: 1px solid transparent;
			border-radius: 8px;
			padding: 7px 14px;
			font-size: 12px;
			min-height: 42px
		}

		.filter.active {
			background: #e9efe5;
			color: var(--green);
			border-color: #dce6d6
		}

		.search {
			position: relative;
			width: 280px
		}

		.search svg {
			position: absolute;
			right: 14px;
			top: 13px;
			width: 18px;
			color: var(--muted)
		}

		.search input {
			width: 100%;
			height: 44px;
			background: #fff;
			border: 1px solid var(--line);
			border-radius: 10px;
			padding: 9px 41px 9px 12px;
			font-size: 12px;
			color: var(--ink)
		}

		.grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 25px
		}

		.card {
			border: 1px solid var(--line);
			background: white;
			border-radius: 17px;
			overflow: hidden;
			transition: transform .2s, box-shadow .2s
		}

		.card:hover {
			transform: translateY(-4px);
			box-shadow: 0 12px 28px #233b2c09
		}

		.card-photo {
			position: relative;
			aspect-ratio: 1 / 1;
			margin: 10px 10px 0;
			overflow: hidden;
			border-radius: 10px
		}

		.card-photo>button[data-detail] {
			padding: 0;
			background: #e5e5d9;
			width: 100%;
			height: 100%
		}

		.card-photo img {
			width: 100%;
			height: 100%;
			transition: transform .5s
		}

		.card:hover .card-photo img {
			transform: scale(1.035)
		}

		.card-tag {
			position: absolute;
			right: 10px;
			top: 10px;
			background: #fff5e2;
			color: #725023;
			font-size: 10px;
			border-radius: 6px;
			padding: 4px 10px;
			pointer-events: none
		}

		.card-body {
			padding: 17px 19px 18px
		}

		.card-title {
			display: flex;
			justify-content: space-between;
			gap: 10px;
			align-items: center
		}

		.card-title h3 {
			margin: 0;
			font-size: 16px;
			font-weight: 750
		}

		.english {
			font-size: 12px;
			letter-spacing: 1px;
			color: var(--green)
		}

		.card-body p {
			font-size: 11px;
			color: var(--muted);
			line-height: 1.9;
			margin: 8px 0 16px;
			min-height: 42px
		}

		.card-bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-top: 1px solid #f0f0e8;
			padding-top: 14px
		}

		.price {
			color: var(--green);
			font-size: 18px;
			font-weight: 750
		}

		.price small {
			font-size: 10px;
			font-weight: 400;
			margin-right: 5px;
			color: var(--muted)
		}

		.toman{
			rotate: 90deg;
		}

		.detail-btn {
			width: 33px;
			height: 33px;
			border-radius: 9px;
			background: var(--soft);
			color: var(--green);
			display: grid;
			place-items: center
		}

		.detail-btn svg {
			width: 17px
		}

		.menu-meta {
			text-align: center;
			color: var(--muted);
			font-size: 11px;
			margin: 25px 0 50px
		}

		.empty {
			grid-column: 1/-1;
			text-align: center;
			padding: 65px 20px;
			border: 1px dashed #cad7c5;
			border-radius: 15px;
			color: var(--muted)
		}

		.empty svg {
			width: 36px;
			height: 36px;
			color: var(--green)
		}

		.empty h3 {
			color: var(--ink)
		}

		.story {
			background: #eaf0e5;
			border-radius: 20px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 30px;
			padding: 30px 38px;
			margin: 0 0 48px;
			position: relative;
			overflow: hidden
		}

		.story h2 {
			font-size: 23px;
			margin: 0 0 6px
		}

		.story p {
			font-size: 12px;
			color: #77816f;
			margin: 0;
			max-width: 530px;
			line-height: 2
		}

		.story-mark {
			display: flex;
			align-items: center;
			gap: 20px;
			flex-shrink: 0;
			color: var(--green)
		}

		.story-mark svg {
			width: 60px;
			height: 60px;
			stroke-width: 1
		}

		.story-mark span {
			font-size: 12px;
			letter-spacing: 3px;
			line-height: 2.3
		}

		.footer {
			border-top: 1px solid var(--line);
			padding: 25px 0
		}

		.footer-inner {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 15px
		}

		.footer p {
			font-size: 11px;
			color: var(--muted);
			margin: 0
		}

		.footer .brand-name {
			font-size: 18px
		}

		.footer .logo {
			width: 34px;
			height: 34px
		}

		.footer .logo svg {
			width: 100%;
			height: 100%
		}

		.footer small {
			color: var(--muted);
			font-size: 10px
		}

		.admin {
			padding: 40px 0 60px;
			min-height: 75vh
		}

		.admin .section-heading {
			margin-bottom: 24px
		}

		.admin-actions {
			display: flex;
			gap: 10px;
			flex-wrap: wrap
		}

		.admin-note {
			background: #eef2e9;
			border: 1px solid #dce6d6;
			border-radius: 12px;
			padding: 15px 18px;
			color: #596b52;
			font-size: 12px;
			margin-bottom: 24px
		}

		.admin-note strong {
			color: var(--green)
		}

		.admin-tabs {
			display: flex;
			gap: 10px;
			margin-bottom: 20px
		}

		.admin-list {
			display: grid;
			gap: 12px
		}

		.admin-row {
			display: flex;
			align-items: center;
			gap: 16px;
			background: #fff;
			border: 1px solid var(--line);
			padding: 14px;
			border-radius: 13px
		}

		.admin-row img {
			width: 65px;
			height: 65px;
			border-radius: 10px
		}

		.admin-row-info {
			flex: 1;
			min-width: 0
		}

		.admin-row-info strong {
			font-size: 14px;
			display: block
		}

		.admin-row-info small {
			font-size: 11px;
			color: var(--muted)
		}

		.admin-row .price {
			font-size: 15px
		}

		.icon-btn {
			display: inline-grid;
			place-items: center;
			min-width: 42px;
			height: 42px;
			background: var(--soft);
			border-radius: 9px;
			color: var(--green)
		}

		.delete-btn {
			background: #fcf1eb;
			color: #a45b46
		}

		.row-actions {
			display: flex;
			gap: 7px
		}

		.admin-topline {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 15px;
			margin: 20px 0
		}

		.admin-topline .search {
			max-width: 60%
		}

		dialog {
			border: 0;
			padding: 0;
			border-radius: 21px;
			background: var(--paper);
			width: min(500px, calc(100% - 28px));
			max-height: 90dvh;
			color: var(--ink);
			box-shadow: 0 25px 100px #11241844
		}

		dialog::backdrop {
			background: #12261c8c;
			backdrop-filter: blur(5px)
		}

		.dialog-head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 19px 24px;
			border-bottom: 1px solid var(--line)
		}

		.dialog-head h2 {
			font-size: 18px;
			margin: 0
		}

		.close-btn {
			width: 38px;
			height: 38px;
			border-radius: 50%;
			display: grid;
			place-items: center;
			background: #e9ede3
		}

		.dialog-content {
			padding: 24px
		}

		.field {
			display: block;
			margin-bottom: 17px;
			font-size: 12px;
			font-weight: 600
		}

		.field input,
		.field textarea,
		.field select {
			width: 100%;
			display: block;
			border: 1px solid #d8dece;
			border-radius: 9px;
			padding: 10px 12px;
			background: white;
			color: var(--ink);
			margin-top: 6px;
			font-weight: 400;
			min-height: 44px
		}

		.field textarea {
			resize: vertical;
			min-height: 85px
		}

		.fields-two {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 14px
		}

		.upload {
			display: flex;
			align-items: center;
			gap: 15px;
			background: #fff;
			border: 1px dashed #c6d4bc;
			border-radius: 12px;
			padding: 12px;
			margin-bottom: 20px
		}

		.upload img {
			width: 80px;
			height: 80px;
			border-radius: 8px
		}

		.upload label {
			cursor: pointer;
			color: var(--green);
			font-size: 12px;
			font-weight: 600
		}

		.upload small {
			display: block;
			color: var(--muted);
			font-size: 10px;
			font-weight: 400
		}

		.upload input {
			width: 100%;
			max-width: 260px;
			font-size: 10px;
			margin-top: 8px
		}

		.save-row {
			display: flex;
			gap: 10px;
			margin-top: 25px
		}

		.save-row .primary-btn {
			flex: 1
		}

		.error {
			font-size: 12px;
			color: #af3d32;
			margin: 12px 0 0
		}

		.detail-photo {
			width: 100%;
			height: 260px;
			border-radius: 13px;
			margin-bottom: 19px
		}

		.detail-description {
			color: var(--muted);
			font-size: 13px;
			line-height: 2
		}

		.detail-footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 23px
		}

		.toast {
			visibility: hidden;
			position: fixed;
			bottom: 25px;
			left: 50%;
			transform: translateX(-50%) translateY(100px);
			background: var(--dark);
			color: #fff;
			padding: 13px 24px;
			border-radius: 12px;
			z-index: 40;
			box-shadow: 0 8px 28px #162a2d25;
			font-size: 12px;
			max-width: calc(100% - 32px);
			width: max-content;
			transition: transform .25s;
			pointer-events: none
		}

		.toast.show {
			visibility: visible;
			transform: translateX(-50%) translateY(0)
		}

		@media(min-width:1400px) {
			.hero {
				padding-top: 65px;
				padding-bottom: 65px
			}

			.hero-photo {
				height: 390px
			}
		}

		@media(max-width:900px) {
			.photo-stamp {
				left: -4px
			}

			.hero {
				gap: 35px
			}

			.hero-photo {
				height: 335px
			}

			.grid {
				gap: 16px
			}

			.english {
				display: none
			}

			.intro-strip {
				gap: 40px
			}

			.category {
				min-width: 110px
			}

			.categories {
				gap: 11px
			}

			.story-mark span {
				display: none
			}

			.nav {
				gap: 22px
			}

			.card-body {
				padding: 14px
			}
		}

		@media(max-width:640px) {
			.wrap {
				width: calc(100% - 36px)
			}

			.header-inner {
				min-height: 76px;
				height: auto;
				flex-wrap: wrap;
				gap: 10px
			}

			.brand-name {
				font-size: 21px
			}

			.logo {
				width: 42px;
				height: 42px
			}

			.brand-sub {
				font-size: 8px
			}

			.brand {
				gap: 9px
			}

			.nav {
				width: 100%;
				flex-wrap: wrap;
				gap: 12px 22px;
				padding-bottom: 12px
			}

			.header .outline-btn {
				font-size: 11px;
				padding: 8px 12px;
				min-height: 40px
			}

			.header .outline-btn svg {
				width: 16px
			}

			.hero {
				grid-template-columns: 1fr;
				gap: 33px;
				padding: 30px 0 28px
			}

			.eyebrow {
				margin-bottom: 12px;
				font-size: 11px
			}

			h1 {
				font-size: 39px;
				line-height: 1.55;
				margin-bottom: 12px;
				letter-spacing: -1.4px
			}

			.hero-copy>p {
				font-size: 12px;
				line-height: 2.1;
				margin-bottom: 18px;
				max-width: 330px
			}

			.hero-actions {
				gap: 18px
			}

			.hero-actions .primary-btn {
				padding: 11px 19px;
				font-size: 12px
			}

			.hero-actions small {
				font-size: 10px
			}

			.hero-visual {
				margin: 5px 6px 0 10px
			}

			.hero-photo {
				height: 246px;
				border-radius: 95px 95px 18px 18px;
				object-position: center 58%
			}

			.photo-outline {
				border-radius: 95px 95px 18px 18px;
				inset: -9px 10px 10px -9px
			}

			.photo-stamp {
				width: 80px;
				height: 80px;
				left: -15px;
				top: 5px;
				font-size: 9px
			}

			.photo-caption strong {
				font-size: 15px
			}

			.photo-caption>span {
				font-size: 8px
			}

			.intro-strip {
				gap: 0;
				justify-content: space-between;
				padding: 14px 0;
				margin-bottom: 30px
			}

			.intro-strip span {
				gap: 5px;
				font-size: 9px
			}

			.intro-strip svg {
				width: 16px;
				height: 16px
			}

			.section-heading h2 {
				font-size: 23px
			}

			.section-heading p {
				font-size: 11px
			}

			.section-heading>span {
				font-size: 9px
			}

			.section-kicker {
				font-size: 8px
			}

			.categories {
				margin-left: -18px;
				margin-right: -18px;
				padding: 22px 18px 18px;
				gap: 10px
			}

			.category {
				min-width: 96px;
				flex: 0 0 96px;
				border-radius: 13px;
				padding: 12px 8px 10px
			}

			.category img {
				width: 52px;
				height: 52px
			}

			.category strong {
				font-size: 11px
			}

			.category small {
				font-size: 9px
			}

			.menu-toolbar {
				flex-direction: column-reverse;
				align-items: stretch;
				gap: 12px;
				padding: 5px 0 20px
			}

			.search {
				width: 100%
			}

			.filters {
				justify-content: flex-start;
				gap: 6px
			}

			.filter {
				font-size: 11px;
				padding: 6px 13px;
				min-height: 37px
			}

			.grid {
				grid-template-columns: repeat(2, minmax(0, 1fr));
				gap: 12px
			}

			.card {
				border-radius: 13px
			}

			.card-photo {
				margin: 6px 6px 0;
				border-radius: 8px
			}

			.card-body {
				padding: 11px
			}

			.card-title h3 {
				font-size: 13px
			}

			.card-body p {
				font-size: 10px;
				margin: 6px 0 12px;
				min-height: 57px
			}

			.price {
				font-size: 15px
			}

			.price small {
				font-size: 8px;
				margin-right: 3px
			}

			.detail-btn {
				width: 28px;
				height: 28px;
				border-radius: 7px
			}

			.card-bottom {
				padding-top: 10px
			}

			.card-tag {
				font-size: 8px;
				right: 6px;
				top: 8px;
				padding: 3px 6px
			}

			.menu-meta {
				font-size: 10px;
				margin: 23px 0 32px
			}

			.story {
				padding: 23px;
				gap: 15px;
				margin-bottom: 30px;
				border-radius: 15px
			}

			.story h2 {
				font-size: 18px
			}

			.story p {
				font-size: 10px
			}

			.story-mark svg {
				width: 38px;
				height: 38px
			}

			.footer-inner {
				flex-wrap: wrap
			}

			.footer p {
				font-size: 9px
			}

			.footer small {
				display: block;
				width: 100%;
				text-align: center;
				border-top: 1px solid var(--line);
				padding-top: 14px;
				margin-top: 5px
			}

			.admin {
				padding-top: 28px
			}

			.admin .section-heading {
				align-items: start;
				flex-direction: column
			}

			.admin-actions .outline-btn,
			.admin-actions .primary-btn {
				font-size: 11px;
				padding: 9px 13px
			}

			.admin-row {
				gap: 10px;
				padding: 10px;
				flex-wrap: wrap
			}

			.admin-row img {
				width: 49px;
				height: 49px
			}

			.admin-row-info strong {
				font-size: 12px
			}

			.admin-row .price {
				font-size: 12px
			}

			.admin-row-info small {
				font-size: 10px
			}

			.row-actions {
				margin-right: auto
			}

			.icon-btn {
				min-width: 36px;
				height: 36px
			}

			.admin-note {
				font-size: 11px
			}

			.dialog-content {
				padding: 18px
			}

			.dialog-head {
				padding: 15px 18px
			}

			.detail-photo {
				height: 210px
			}
		}

		@media(max-width:360px) {
			h1 {
				font-size: 34px
			}

			.price {
				font-size: 13px
			}

			.card-body {
				padding: 9px
			}

			.intro-strip span {
				font-size: 8px
			}

			.admin-row .price {
				display: none
			}
		}

		@media(prefers-reduced-motion:reduce) {
			* {
				scroll-behavior: auto !important;
				transition: none !important
			}
		}
		.brand-sub { display: block }
		.price-hint { font-weight: 400; color: var(--muted) }
		.popular-field { display: flex; gap: 8px; align-items: center; font-size: 12px }
		.popular-field input { accent-color: var(--green) }
		.delete-confirm { background: #a4513c }

		/* Product illustrations share a quiet, warm studio background. */
		.card-photo>button[data-detail] {
			background: radial-gradient(ellipse at 50% 35%, #ffffff, #e9efe5)
		}

		.card-photo img {
			object-fit: contain;
			padding: 14px
		}

		.category img {
			object-fit: contain;
			padding: 5px;
			background: #f3f0e7
		}

		.detail-photo {
			object-fit: contain;
			background: radial-gradient(ellipse at 50% 35%, #ffffff, #e9efe5);
			padding: 20px
		}

		.admin-row img,
		.upload img {
			object-fit: contain;
			background: #f3f0e7
		}

		@media(max-width:640px) {
			.card-photo img {
				padding: 10px
			}

			.photo-stamp span {
				font-size: 7px
			}
		}

		/* A personal counter list; no online checkout. */
		body {
			padding-bottom: 104px
		}

		.add-pick {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 7px;
			width: 100%;
			min-height: 44px;
			margin-top: 12px;
			border: 1px solid #d9e5d3;
			border-radius: 9px;
			background: var(--soft);
			color: var(--green);
			font-size: 12px;
			font-weight: 650
		}

		.add-pick:hover {
			background: #aeceb9
		}

		.add-pick svg {
			width: 17px;
			height: 17px
		}

		.add-pick.has-picks {
			border-color: var(--green)
		}

		.pick-qty {
			display: inline-grid;
			place-items: center;
			min-width: 22px;
			height: 22px;
			padding: 0 5px;
			border-radius: 6px;
			background: var(--green);
			color: white;
			font-size: 11px
		}

		.picks-dock {
			position: fixed;
			bottom: max(18px, env(safe-area-inset-bottom));
			left: 50%;
			transform: translateX(-50%);
			width: min(460px, calc(100% - 32px));
			z-index: 30;
			display: flex;
			align-items: center;
			gap: 12px;
			padding: 13px 18px;
			background: var(--dark);
			color: #fff;
			border: 1px solid #42604b;
			border-radius: 17px;
			box-shadow: 0 8px 35px #173b2d30;
			text-align: right
		}

		.dock-icon {
			display: grid;
			place-items: center;
			width: 40px;
			height: 40px;
			border-radius: 11px;
			background: var(--orange);
			color: var(--dark);
			flex-shrink: 0
		}

		.dock-copy {
			flex: 1
		}

		.dock-copy strong {
			display: block;
			font-size: 14px
		}

		.dock-copy small {
			display: block;
			color: #d4e3d5;
			font-size: 10px
		}

		.dock-count {
			font-weight: 750;
			min-width: 28px;
			height: 28px;
			border-radius: 50%;
			background: #ffffff1c;
			display: grid;
			place-items: center
		}

		.picks-dock>svg {
			width: 18px
		}

		.picks-intro {
			font-size: 12px;
			color: var(--muted);
			margin: 0 0 18px;
			line-height: 2
		}

		.pick-list {
			display: grid;
			gap: 12px
		}

		.pick-row {
			display: grid;
			grid-template-columns: 62px 1fr;
			gap: 11px;
			border: 1px solid var(--line);
			background: #fff;
			border-radius: 12px;
			padding: 12px
		}

		.pick-row>img {
			width: 62px;
			height: 62px;
			object-fit: contain;
			background: #f3f0e7;
			border-radius: 9px
		}

		.pick-row-title {
			display: flex;
			gap: 8px;
			align-items: center;
			justify-content: space-between
		}

		.pick-row h3 {
			font-size: 13px;
			margin: 0;
			overflow-wrap: anywhere
		}

		.pick-unit {
			font-size: 10px;
			color: var(--muted)
		}

		.pick-remove {
			min-width: 38px;
			height: 38px;
			display: grid;
			place-items: center;
			border-radius: 8px;
			background: transparent;
			color: #956454
		}

		.pick-remove svg {
			width: 17px
		}

		.pick-row-bottom {
			grid-column: 1/-1;
			display: flex;
			gap: 12px;
			align-items: center;
			justify-content: space-between
		}

		.quantity-control {
			display: flex;
			align-items: center;
			gap: 5px;
			background: var(--soft);
			border-radius: 9px;
			padding: 3px
		}

		.quantity-control button {
			width: 38px;
			height: 38px;
			display: grid;
			place-items: center;
			background: transparent;
			color: var(--green);
			border-radius: 6px
		}

		.quantity-control button:hover {
			background: #dce8d5
		}

		.quantity-control svg {
			width: 16px
		}

		.quantity-control output {
			min-width: 26px;
			text-align: center;
			font-weight: 650
		}

		.pick-row-bottom .price {
			font-size: 16px
		}

		.picks-summary {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-top: 1px solid var(--line);
			padding-top: 20px;
			margin-top: 20px
		}

		.picks-summary strong {
			font-size: 13px
		}

		.picks-summary small {
			display: block;
			color: var(--muted);
			font-size: 10px;
			font-weight: 400
		}

		.picks-continue {
			width: 100%;
			margin-top: 20px
		}

		.picks-empty {
			text-align: center;
			padding: 22px 0
		}

		.picks-empty>svg {
			width: 42px;
			height: 42px;
			color: var(--green)
		}

		.picks-empty h3 {
			font-size: 17px;
			margin-bottom: 5px
		}

		.picks-empty p {
			font-size: 12px;
			color: var(--muted)
		}

		.toast {
			bottom: 108px
		}

		.detail-footer .add-pick {
			width: auto;
			margin: 0;
			padding: 9px 15px
		}

		@media(max-width:640px) {
			.add-pick {
				font-size: 11px
			}

			.pick-row {
				padding: 10px
			}

			.pick-row-bottom .price {
				font-size: 15px
			}

			.dock-copy strong {
				font-size: 13px
			}

			.picks-dock {
				padding: 11px 14px
			}

			.detail-footer {
				gap: 12px
			}

			.detail-footer .add-pick {
				padding: 9px 12px
			}
		}

		/* Category navigation stays above the menu and follows the visible section. */
		:root {
			--category-offset: 110px
		}

		html {
			scroll-padding-top: 0
		}

		.category-nav {
			position: sticky;
			top: 0;
			z-index: 20;
			isolation: isolate;
			background: var(--paper);
			border-bottom: 1px solid var(--line);
			padding: 12px 3px;
			gap: 10px;
			scroll-padding-inline: 5px;
			overscroll-behavior-x: contain;
			box-shadow: 0 7px 12px -12px #193d2e55
		}

		.category-nav .category {
			flex: 1 0 155px;
			min-width: 155px;
			flex-direction: row;
			gap: 12px;
			padding: 10px 13px;
			border-radius: 12px;
			text-align: right;
			white-space: nowrap
		}

		.category-nav .category:hover {
			transform: none;
			background: var(--soft)
		}

		.category-nav .category img {
			width: 43px;
			height: 43px;
			margin: 0;
			outline-width: 2px;
			padding: 3px;
			flex-shrink: 0
		}

		.category-label {
			display: flex;
			flex-direction: column
		}

		.category-nav .category strong {
			font-size: 12px
		}

		.category-nav .category small {
			font-size: 9px
		}

		.category-nav .category[aria-current=location] {
			background: var(--green);
			border-color: var(--green);
			color: white;
			box-shadow: 0 5px 12px #247e5917
		}

		.category-nav .category[aria-current=location] small {
			color: #d4e6db
		}

		.menu-sections {
			display: grid;
			gap: 38px
		}

		.menu-group {
			scroll-margin-top: var(--category-offset);
			min-width: 0
		}

		.menu-group-heading {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 15px;
			margin-bottom: 18px;
			padding-bottom: 13px;
			border-bottom: 1px solid var(--line)
		}

		.menu-group-heading h3 {
			font-size: 21px;
			margin: 0;
			font-weight: 750
		}

		.menu-group-heading span {
			color: var(--muted);
			font-size: 11px
		}

		.menu-group .card-title h4 {
			margin: 0;
			font-size: 16px;
			font-weight: 750
		}

		@media(max-width:640px) {
			.category-nav {
				margin: 16px -18px 0;
				padding: 10px 18px;
				gap: 9px;
				scroll-padding-inline: 18px
			}

			.category-nav .category {
				flex: 0 0 auto;
				min-width: 137px;
				gap: 9px;
				padding: 8px 11px;
				border-radius: 10px
			}

			.category-nav .category img {
				width: 36px;
				height: 36px
			}

			.category-nav .category strong {
				font-size: 11px
			}

			.category-nav .category small {
				font-size: 8px
			}

			.menu-toolbar {
				padding-top: 16px
			}

			.menu-sections {
				gap: 30px
			}

			.menu-group-heading {
				margin-bottom: 14px
			}

			.menu-group-heading h3 {
				font-size: 18px
			}

			.menu-group-heading span {
				font-size: 10px
			}

			.menu-group .card-title h4 {
				font-size: 13px
			}
		}

		.sort-help {
			font-size: 11px;
			color: var(--muted);
			margin: 0 0 18px;
			line-height: 2
		}

		.admin-sort-section {
			min-width: 0
		}

		.admin-sort-heading {
			font-size: 15px;
			margin: 15px 0 12px;
			color: var(--green)
		}

		.sortable-group {
			display: grid;
			gap: 12px;
			min-width: 0
		}

		.drag-handle {
			display: grid;
			place-items: center;
			flex-shrink: 0;
			min-width: 38px;
			height: 48px;
			background: transparent;
			color: #86957f;
			border-radius: 9px;
			cursor: grab;
			touch-action: none
		}

		.drag-handle:hover {
			background: var(--soft);
			color: var(--green)
		}

		.drag-handle:active {
			cursor: grabbing
		}

		.drag-handle:disabled {
			cursor: not-allowed;
			opacity: .35
		}

		.drag-handle svg {
			width: 19px;
			height: 19px
		}

		.admin-row.is-dragging {
			opacity: .28;
			border: 2px dashed var(--green);
			background: var(--soft)
		}

		.drag-preview {
			position: fixed;
			z-index: 50;
			pointer-events: none !important;
			opacity: .96;
			box-shadow: 0 12px 40px #193d2e30;
			border: 1px solid var(--green);
			margin: 0;
			transform: rotate(-1deg)
		}

		body.is-reordering,
		body.is-reordering * {
			cursor: grabbing !important;
			user-select: none !important
		}

		.admin-row-info {
			overflow-wrap: anywhere
		}

		@media(max-width:640px) {
			.admin-row .drag-handle {
				min-width: 30px;
				width: 30px;
				height: 44px
			}

			.admin-row {
				gap: 8px
			}

			.admin-row .row-actions {
				flex-shrink: 0
			}

			.sort-help {
				font-size: 10px
			}

			.admin-sort-heading {
				font-size: 13px
			}
		}