/* =========================================================================
   Riyanzhi Daylight — 界面骨架样式
   ---------------------------------------------------------------------------
   设计语言：靛蓝 + 朱砂 + 纯白冷纸，圆角卡片与轻阴影，顶部双层导航，
            宽松留白、大字标题、克制的动效。与 1.x「墨绿导轨 + 米白纸面 +
            铜金强调 + 直角细线」的编辑部风格完全区分。

   命名约定：界面骨架类名一律 ry- 前缀；rz- 前缀保留给插件输出的模块
            （见 modules.css），两套不交叉。

   目录
     0. 变量与重置
     1. 基础排版
     2. 容器与栅格
     3. 按钮与表单
     4. 公告条
     5. 顶部导航
     6. 搜索面板
     7. 移动抽屉
     8. 首页首屏
     9. 品类胶囊
    10. 区块通用
    11. 品类卡
    12. 商品卡与商品网格
    13. 横向滚动轨
    14. 服务条
    15. 品牌故事
    16. 目录页（分类 / 商店）
    17. 商品详情
    18. 文档页（信息页）
    19. 搜索页与 404
    20. 文章列表
    21. 页脚
    22. 移动底部栏与浮动按钮
    23. 分页
    24. 工具类与动效
    25. 响应式
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. 变量与重置
   ---------------------------------------------------------------------- */

:root {
	/* 色板 */
	--ry-ink: #16181d;
	--ry-ink-2: #333a47;
	--ry-mute: #6b7280;
	--ry-faint: #9aa3b2;

	--ry-line: #e4e7ee;
	--ry-line-2: #d3d8e3;

	--ry-paper: #ffffff;
	--ry-wash: #f5f7fb;
	--ry-wash-2: #eaeef6;

	--ry-indigo: #1b3a6b;
	--ry-indigo-2: #2c5aa0;
	--ry-indigo-3: #eef3fb;

	--ry-coral: #d63a2f;
	--ry-coral-2: #fdeeed;

	--ry-ok: #1f7a4d;

	/* 形状 */
	--ry-r-sm: 10px;
	--ry-r: 14px;
	--ry-r-lg: 20px;
	--ry-r-xl: 28px;
	--ry-pill: 999px;

	/* 阴影 */
	--ry-sh-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
	--ry-sh-sm: 0 1px 2px rgba(16, 24, 40, 0.05), 0 6px 18px -10px rgba(16, 24, 40, 0.14);
	--ry-sh: 0 2px 4px rgba(16, 24, 40, 0.05), 0 14px 32px -16px rgba(16, 24, 40, 0.2);
	--ry-sh-lg: 0 28px 70px -32px rgba(16, 24, 40, 0.42);

	/* 排版 */
	--ry-font: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
		"Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif;
	--ry-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;

	/* 尺寸 */
	--ry-wrap: 1280px;
	--ry-gap: 20px;
	--ry-head-h: 74px;
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--ry-head-h) + 16px);
}

body.ry-theme {
	margin: 0;
	background: var(--ry-paper);
	color: var(--ry-ink);
	font-family: var(--ry-font);
	font-size: 15px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

body.ry-theme.is-locked {
	overflow: hidden;
}

:where(body.ry-theme) img {
	max-width: 100%;
	height: auto;
	display: block;
}

:where(body.ry-theme) a {
	color: inherit;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

:where(body.ry-theme) button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

:where(body.ry-theme) :focus-visible {
	outline: 2px solid var(--ry-indigo-2);
	outline-offset: 3px;
	border-radius: 4px;
}

:where(body.ry-theme) ::selection {
	background: var(--ry-indigo);
	color: #fff;
}

.ry-sr,
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.ry-skip {
	position: absolute;
	left: 16px;
	top: -60px;
	z-index: 200;
	background: var(--ry-indigo);
	color: #fff;
	padding: 10px 18px;
	border-radius: 0 0 var(--ry-r-sm) var(--ry-r-sm);
	font-size: 13px;
	transition: top 0.18s ease;
}

.ry-skip:focus {
	top: 0;
}

/* -------------------------------------------------------------------------
   1. 基础排版
   ---------------------------------------------------------------------- */

:where(body.ry-theme) h1,
:where(body.ry-theme) h2,
:where(body.ry-theme) h3,
:where(body.ry-theme) h4 {
	margin: 0;
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -0.025em;
	color: var(--ry-ink);
}

:where(body.ry-theme) p {
	margin: 0 0 1em;
}

:where(body.ry-theme) p:last-child {
	margin-bottom: 0;
}

:where(body.ry-theme) ul,
:where(body.ry-theme) ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ry-kicker {
	margin: 0 0 12px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ry-indigo-2);
}

.ry-kicker--light {
	color: rgba(255, 255, 255, 0.72);
}

.ry-ico {
	flex: 0 0 auto;
	display: inline-block;
	vertical-align: middle;
}

/* -------------------------------------------------------------------------
   2. 容器与栅格
   ---------------------------------------------------------------------- */

.ry-wrap {
	width: 100%;
	max-width: var(--ry-wrap);
	margin: 0 auto;
	padding: 0 24px;
}

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

.ry-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ry-gap) 16px;
}

/* -------------------------------------------------------------------------
   3. 按钮与表单
   ---------------------------------------------------------------------- */

.ry-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 20px;
	border-radius: var(--ry-pill);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
	white-space: nowrap;
	border: 1px solid transparent;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease,
		box-shadow 0.18s ease, transform 0.18s ease;
}

.ry-btn:active {
	transform: translateY(1px);
}

.ry-btn--indigo {
	background: var(--ry-indigo);
	color: #fff;
	box-shadow: 0 6px 18px -10px rgba(27, 58, 107, 0.9);
}

.ry-btn--indigo:hover {
	background: #16305a;
}

.ry-btn--coral {
	background: var(--ry-coral);
	color: #fff;
}

.ry-btn--coral:hover {
	background: #bd2f25;
}

.ry-btn--ghost {
	background: #fff;
	color: var(--ry-ink);
	border-color: var(--ry-line-2);
}

.ry-btn--ghost:hover {
	border-color: var(--ry-indigo);
	color: var(--ry-indigo);
}

.ry-btn--white {
	background: #fff;
	color: var(--ry-indigo);
}

.ry-btn--white:hover {
	background: #eef3fb;
}

.ry-btn--outline {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.42);
}

.ry-btn--outline:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.1);
}

.ry-btn--lg {
	padding: 14px 26px;
	font-size: 15px;
}

.ry-btn--sm {
	padding: 8px 15px;
	font-size: 13px;
}

.ry-btn--block {
	width: 100%;
}

/* 通用输入 */
.ry-input,
.ry-field input[type="text"],
.ry-field input[type="email"],
.ry-field input[type="tel"],
.ry-field input[type="password"],
.ry-field input[type="search"],
.ry-field input[type="number"],
.ry-field select,
.ry-field textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--ry-line-2);
	border-radius: var(--ry-r-sm);
	background: #fff;
	color: var(--ry-ink);
	font-size: 14px;
	line-height: 1.5;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ry-field input:focus,
.ry-field select:focus,
.ry-field textarea:focus,
.ry-input:focus {
	outline: none;
	border-color: var(--ry-indigo-2);
	box-shadow: 0 0 0 3px rgba(44, 90, 160, 0.14);
}

/* -------------------------------------------------------------------------
   4. 公告条
   ---------------------------------------------------------------------- */

.ry-top {
	background: var(--ry-indigo);
	color: rgba(255, 255, 255, 0.9);
	font-size: 12px;
}

.ry-top__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 38px;
}

.ry-top__notes {
	display: flex;
	align-items: center;
	gap: 22px;
	min-width: 0;
}

.ry-top__notes li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.ry-top__notes .ry-ico {
	opacity: 0.75;
}

.ry-top__links {
	display: flex;
	align-items: center;
	gap: 18px;
	flex: 0 0 auto;
}

.ry-top__links a {
	color: rgba(255, 255, 255, 0.78);
	transition: color 0.15s ease;
}

.ry-top__links a:hover {
	color: #fff;
}

/* -------------------------------------------------------------------------
   5. 顶部导航
   ---------------------------------------------------------------------- */

.ry-head {
	position: sticky;
	top: 0;
	z-index: 90;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--ry-line);
	transition: box-shadow 0.22s ease, background-color 0.22s ease;
}

.ry-head.is-stuck {
	box-shadow: 0 10px 30px -22px rgba(16, 24, 40, 0.55);
	background: rgba(255, 255, 255, 0.985);
}

.ry-head__inner {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: var(--ry-head-h);
	transition: min-height 0.22s ease;
}

.ry-head.is-stuck .ry-head__inner {
	min-height: 64px;
}

/* 品牌 */
.ry-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	color: var(--ry-indigo);
}

.ry-logo__mark {
	display: block;
	width: 36px;
	height: 36px;
	flex: 0 0 auto;
}

.ry-logo__img {
	max-height: 42px;
	width: auto;
}

.ry-logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1.06;
}

.ry-logo__text strong {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--ry-ink);
}

.ry-logo__text em {
	font-style: normal;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.24em;
	color: var(--ry-faint);
	margin-top: 2px;
}

/* 主导航 */
.ry-nav {
	margin-left: 6px;
	min-width: 0;
}

.ry-nav__list {
	display: flex;
	align-items: center;
	gap: 2px;
}

.ry-nav__item {
	position: relative;
}

.ry-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 9px 11px;
	border-radius: var(--ry-r-sm);
	font-size: 14px;
	font-weight: 500;
	color: var(--ry-ink-2);
	white-space: nowrap;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.ry-nav__link:hover,
.ry-nav__item--has-sub:hover .ry-nav__link,
.ry-nav__link[aria-expanded="true"] {
	color: var(--ry-indigo);
	background: var(--ry-indigo-3);
}

.ry-nav__link .ry-ico {
	transition: transform 0.2s ease;
	opacity: 0.6;
}

.ry-nav__link[aria-expanded="true"] .ry-ico {
	transform: rotate(180deg);
}

/* 下拉面板 */
.ry-mega {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	min-width: 260px;
	padding: 10px;
	background: #fff;
	border: 1px solid var(--ry-line);
	border-radius: var(--ry-r);
	box-shadow: var(--ry-sh-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	z-index: 95;
}

.ry-mega--right {
	left: auto;
	right: 0;
}

.ry-nav__item--has-sub:hover > .ry-mega,
.ry-mega.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ry-mega__list {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.ry-mega__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 12px;
	border-radius: var(--ry-r-sm);
	font-size: 13.5px;
	color: var(--ry-ink-2);
	transition: background-color 0.14s ease, color 0.14s ease;
}

.ry-mega__list a:hover {
	background: var(--ry-wash);
	color: var(--ry-indigo);
}

.ry-mega__list a .ry-ico {
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.16s ease, transform 0.16s ease;
}

.ry-mega__list a:hover .ry-ico {
	opacity: 0.8;
	transform: translateX(0);
}

.ry-mega__sub a {
	padding-left: 24px;
	font-size: 13px;
	color: var(--ry-mute);
}

/* 工具区 */
.ry-tools {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
	flex: 0 0 auto;
}

.ry-tool {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 11px;
	border-radius: var(--ry-r-sm);
	font-size: 13.5px;
	font-weight: 500;
	color: var(--ry-ink-2);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ry-tool:hover {
	background: var(--ry-wash);
	color: var(--ry-indigo);
}

.ry-tool__label {
	display: inline-block;
}

.ry-tool--bag {
	padding-right: 14px;
}

.ry-tool__sum {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ry-mute);
	margin-left: 2px;
}

.ry-badge {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--ry-pill);
	background: var(--ry-coral);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	box-shadow: 0 0 0 2px #fff;
	transition: transform 0.2s ease;
}

.ry-badge.is-empty {
	display: none;
}

.ry-badge.is-bump {
	animation: ry-bump 0.42s ease;
}

@keyframes ry-bump {
	0% {
		transform: scale(1);
	}
	35% {
		transform: scale(1.35);
	}
	100% {
		transform: scale(1);
	}
}

.ry-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--ry-r-sm);
	color: var(--ry-ink);
}

.ry-burger:hover {
	background: var(--ry-wash);
}

/* -------------------------------------------------------------------------
   6. 搜索面板
   ---------------------------------------------------------------------- */

.ry-search {
	border-top: 1px solid var(--ry-line);
	background: #fff;
	padding: 18px 0 20px;
	animation: ry-slide-down 0.2s ease;
}

.ry-search[hidden] {
	display: none;
}

@keyframes ry-slide-down {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.ry-search__form {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 6px 6px 16px;
	background: var(--ry-wash);
	border: 1px solid var(--ry-line);
	border-radius: var(--ry-pill);
}

.ry-search__form > .ry-ico {
	color: var(--ry-faint);
}

.ry-search__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	font-size: 15px;
	color: var(--ry-ink);
	padding: 8px 0;
}

.ry-search__input:focus {
	outline: none;
}

.ry-search__input::placeholder {
	color: var(--ry-faint);
}

.ry-search__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: var(--ry-mute);
}

.ry-search__close:hover {
	background: #fff;
	color: var(--ry-ink);
}

.ry-search__hot {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
	font-size: 12.5px;
	color: var(--ry-mute);
}

.ry-search__hot > span {
	font-weight: 600;
	color: var(--ry-faint);
	margin-right: 2px;
}

.ry-search__hot a {
	padding: 5px 12px;
	border-radius: var(--ry-pill);
	background: var(--ry-wash);
	color: var(--ry-ink-2);
	transition: background-color 0.14s ease, color 0.14s ease;
}

.ry-search__hot a:hover {
	background: var(--ry-indigo-3);
	color: var(--ry-indigo);
}

/* -------------------------------------------------------------------------
   7. 移动抽屉
   ---------------------------------------------------------------------- */

.ry-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 130;
	width: min(400px, 88vw);
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: -24px 0 60px -30px rgba(16, 24, 40, 0.5);
	transform: translateX(102%);
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	visibility: hidden;
}

.ry-drawer.is-open {
	transform: translateX(0);
	visibility: visible;
}

.ry-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--ry-line);
	flex: 0 0 auto;
}

.ry-drawer__title {
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--ry-indigo);
}

.ry-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--ry-ink-2);
}

.ry-drawer__close:hover {
	background: var(--ry-wash);
}

.ry-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 18px 20px 24px;
}

.ry-drawer__search {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 14px;
	background: var(--ry-wash);
	border-radius: var(--ry-pill);
	color: var(--ry-faint);
}

.ry-drawer__search input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	font-size: 14px;
	color: var(--ry-ink);
}

.ry-drawer__search input:focus {
	outline: none;
}

.ry-drawer__label {
	margin: 24px 0 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ry-faint);
}

.ry-catlist {
	display: flex;
	flex-direction: column;
}

.ry-catlist__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 2px;
	border-bottom: 1px solid var(--ry-line);
	font-size: 14.5px;
	color: var(--ry-ink-2);
	transition: color 0.14s ease;
}

.ry-catlist__link:hover {
	color: var(--ry-indigo);
}

.ry-catlist__link em {
	font-style: normal;
	font-size: 12px;
	color: var(--ry-faint);
	font-variant-numeric: tabular-nums;
}

.ry-drawer__links {
	display: flex;
	flex-direction: column;
}

.ry-drawer__links a {
	display: block;
	padding: 10px 2px;
	border-bottom: 1px solid var(--ry-line);
	font-size: 14px;
	color: var(--ry-ink-2);
}

.ry-drawer__links a:hover {
	color: var(--ry-indigo);
}

.ry-drawer__sub a {
	padding-left: 14px;
	font-size: 13.5px;
	color: var(--ry-mute);
}

.ry-drawer__foot {
	flex: 0 0 auto;
	padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--ry-line);
	background: var(--ry-wash);
}

.ry-drawer__foot p {
	margin: 10px 0 0;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--ry-mute);
	text-align: center;
}

.ry-veil {
	position: fixed;
	inset: 0;
	z-index: 120;
	background: rgba(16, 24, 40, 0.42);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity 0.24s ease;
}

.ry-veil[hidden] {
	display: none;
}

.ry-veil.is-open {
	opacity: 1;
}

/* -------------------------------------------------------------------------
   8. 首页首屏
   ---------------------------------------------------------------------- */

.ry-hero {
	position: relative;
	background:
		radial-gradient(1100px 520px at 82% -8%, var(--ry-indigo-3) 0%, transparent 62%),
		linear-gradient(180deg, var(--ry-wash) 0%, var(--ry-paper) 78%);
	overflow: hidden;
}

.ry-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
	align-items: center;
	gap: 56px;
	padding-top: 68px;
	padding-bottom: 76px;
}

.ry-hero__title {
	font-size: clamp(38px, 4.6vw, 62px);
	line-height: 1.06;
	letter-spacing: -0.04em;
	font-weight: 800;
	margin: 0 0 20px;
}

.ry-hero__title mark {
	position: relative;
	background: none;
	color: var(--ry-indigo);
	white-space: nowrap;
	box-shadow: inset 0 -0.22em 0 var(--ry-indigo-3);
}

.ry-hero__lead {
	max-width: 27em;
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--ry-mute);
	margin: 0 0 30px;
}

.ry-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 40px;
}

.ry-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding-top: 26px;
	border-top: 1px solid var(--ry-line);
}

.ry-stats > div {
	padding-right: 34px;
	margin-right: 34px;
	border-right: 1px solid var(--ry-line);
}

.ry-stats > div:last-child {
	padding-right: 0;
	margin-right: 0;
	border-right: 0;
}

.ry-stats dt {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--ry-faint);
	margin-bottom: 4px;
}

.ry-stats dd {
	margin: 0;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--ry-ink);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.ry-stats dd span {
	font-size: 13px;
	font-weight: 600;
	color: var(--ry-mute);
	margin-left: 2px;
	letter-spacing: 0;
}

/* 首屏拼贴 */
.ry-hero__art {
	position: relative;
}

.ry-collage {
	position: relative;
	aspect-ratio: 1 / 1;
	width: 100%;
}

.ry-collage__item {
	position: absolute;
	margin: 0;
	overflow: hidden;
	background: #fff;
	border-radius: var(--ry-r-lg);
	box-shadow: var(--ry-sh);
	border: 1px solid rgba(255, 255, 255, 0.9);
}

.ry-collage__item img {
	width: 100%;
	height: 100%;
	/* 商品图多为竖版烟盒/罐体，用 contain 才不会被裁掉上下沿 */
	object-fit: contain;
	padding: 6px;
	background: #fff;
}

.ry-collage__item--a {
	top: 0;
	left: 4%;
	width: 56%;
	height: 62%;
	z-index: 2;
}

.ry-collage__item--b {
	top: 12%;
	right: 0;
	width: 38%;
	height: 40%;
	z-index: 1;
}

.ry-collage__item--c {
	bottom: 0;
	right: 8%;
	width: 46%;
	height: 42%;
	z-index: 3;
}

.ry-collage__plate {
	position: absolute;
	bottom: 6%;
	left: 0;
	z-index: 4;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 18px;
	background: var(--ry-indigo);
	color: #fff;
	border-radius: var(--ry-r);
	box-shadow: var(--ry-sh-lg);
}

.ry-collage__plate span {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.1em;
}

.ry-collage__plate em {
	font-style: normal;
	font-size: 10.5px;
	letter-spacing: 0.08em;
	opacity: 0.72;
}

/* -------------------------------------------------------------------------
   9. 品类胶囊
   ---------------------------------------------------------------------- */

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

.ry-chips__inner {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.ry-chips__inner::-webkit-scrollbar {
	display: none;
}

.ry-chips--inline {
	border-bottom: 0;
}

.ry-chips--inline .ry-chips__inner {
	padding: 0 0 18px;
}

.ry-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	padding: 8px 15px;
	border: 1px solid var(--ry-line-2);
	border-radius: var(--ry-pill);
	background: #fff;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--ry-ink-2);
	white-space: nowrap;
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.ry-chip:hover {
	border-color: var(--ry-indigo);
	color: var(--ry-indigo);
	background: var(--ry-indigo-3);
}

.ry-chip.is-active {
	background: var(--ry-indigo);
	border-color: var(--ry-indigo);
	color: #fff;
}

.ry-chip em {
	font-style: normal;
	font-size: 11.5px;
	color: var(--ry-faint);
	font-variant-numeric: tabular-nums;
}

.ry-chip.is-active em {
	color: rgba(255, 255, 255, 0.7);
}

/* -------------------------------------------------------------------------
   10. 区块通用
   ---------------------------------------------------------------------- */

.ry-sec {
	padding: 64px 0;
}

.ry-sec + .ry-sec {
	padding-top: 8px;
}

.ry-sec__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 28px;
}

.ry-sec__title {
	font-size: clamp(24px, 2.4vw, 32px);
	letter-spacing: -0.032em;
}

.ry-more {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex: 0 0 auto;
	padding-bottom: 4px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ry-indigo);
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s ease, gap 0.15s ease;
}

.ry-more:hover {
	border-bottom-color: var(--ry-indigo);
	gap: 9px;
}

/* -------------------------------------------------------------------------
   11. 品类卡
   ---------------------------------------------------------------------- */

.ry-cats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.ry-catcard {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	border-radius: var(--ry-r-lg);
	overflow: hidden;
	background: linear-gradient(160deg, #f4f8fd 0%, #e3ebf8 100%);
	border: 1px solid var(--ry-line);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.ry-catcard:hover {
	transform: translateY(-4px);
	box-shadow: var(--ry-sh);
	border-color: var(--ry-indigo-2);
}

/* 商品图用 contain 居中摆放，像橱窗里的样品，避免 cover 把烟盒上下裁掉 */
.ry-catcard__media {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 22px 22px 92px;
}

.ry-catcard__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 14px 24px rgba(16, 24, 40, 0.16));
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.ry-catcard:hover .ry-catcard__media img {
	transform: scale(1.045) translateY(-2px);
}

/* 连一件有主图的商品都取不到时，退化成大字占位 */
.ry-catcard__media--blank {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: rgba(27, 58, 107, 0.14);
	font-size: clamp(76px, 8.4vw, 116px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.06em;
	-webkit-user-select: none;
	user-select: none;
}

.ry-catcard--blank {
	background: linear-gradient(160deg, #eef3fb 0%, #dfe8f6 100%);
}

.ry-catcard::after {
	/* 底部留一层极浅的白色渐隐，保证文字压在图上也能读清 */
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 32%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.82) 62%, rgba(255, 255, 255, 0.96) 100%);
	pointer-events: none;
}

.ry-catcard__body {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 20px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.ry-catcard__body strong {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--ry-ink);
}

.ry-catcard__body em {
	font-style: normal;
	font-size: 12px;
	color: var(--ry-mute);
}

.ry-catcard__go {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--ry-line);
	color: var(--ry-indigo);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
		transform 0.2s ease;
}

.ry-catcard:hover .ry-catcard__go {
	background: var(--ry-indigo);
	border-color: var(--ry-indigo);
	color: #fff;
	transform: translateX(2px);
}

/* -------------------------------------------------------------------------
   12. 商品卡与商品网格
   ---------------------------------------------------------------------- */

.ry-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--ry-paper);
	border: 1px solid var(--ry-line);
	border-radius: var(--ry-r);
	overflow: hidden;
	transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.24s ease,
		border-color 0.24s ease;
}

.ry-card:hover {
	transform: translateY(-4px);
	border-color: var(--ry-line-2);
	box-shadow: var(--ry-sh);
}

.ry-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	background: var(--ry-wash);
	overflow: hidden;
}

.ry-card__img {
	width: 100%;
	height: 100%;
	/* 站里商品图比例很杂（1:1、4:5、竖版长图都有），cover 会把包装
	   上下或左右切掉。改 contain，整只包装完整落在同一块底板上。 */
	object-fit: contain;
	transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}

/* 图片本身是 lazy 的，加载完才淡入，避免一格格白块。
   只在脚本确认运行后生效（html.has-js），脚本挂了也不会把图片藏起来。 */
.has-js .ry-card__img:not(.is-ready) {
	opacity: 0;
}

.ry-card__media.is-broken::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(135deg, transparent 46%, var(--ry-line) 46%, var(--ry-line) 54%, transparent 54%),
		var(--ry-wash);
}

.ry-card:hover .ry-card__img {
	transform: scale(1.045);
}

.ry-card__flag {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	padding: 4px 10px;
	border-radius: var(--ry-pill);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #fff;
	box-shadow: var(--ry-sh-xs);
}

.ry-card__flag--sale {
	background: var(--ry-coral);
}

.ry-card__flag--out {
	background: #4b5563;
}

.ry-card__peek {
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 9px 12px;
	border-radius: var(--ry-pill);
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(8px);
	color: var(--ry-indigo);
	font-size: 12.5px;
	font-weight: 600;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.ry-card:hover .ry-card__peek {
	opacity: 1;
	transform: translateY(0);
}

.ry-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 5px;
	padding: 13px 14px 15px;
}

.ry-card__cat {
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--ry-faint);
	text-transform: uppercase;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ry-card__name {
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.42;
	letter-spacing: -0.01em;
}

.ry-card__name a {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ry-card__cn {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--ry-ink);
}

.ry-card:hover .ry-card__cn {
	color: var(--ry-indigo);
}

.ry-card__ja {
	display: block;
	font-size: 11.5px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--ry-faint);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ry-card__price {
	margin: auto 0 0;
	padding-top: 6px;
	font-size: 15px;
	font-weight: 700;
	color: var(--ry-ink);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

.ry-card__price ins {
	background: none;
	text-decoration: none;
	color: var(--ry-coral);
}

.ry-card__price del {
	color: var(--ry-faint);
	font-weight: 400;
	font-size: 12.5px;
	margin-right: 4px;
}

.ry-card__price .woocommerce-Price-currencySymbol {
	font-size: 0.85em;
	font-weight: 600;
	margin-right: 1px;
}

.ry-card.is-out .ry-card__media {
	opacity: 0.72;
}

.ry-card--doc {
	border-style: dashed;
}

.ry-card__excerpt {
	margin: 6px 0 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--ry-mute);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* -------------------------------------------------------------------------
   13. 横向滚动轨
   ---------------------------------------------------------------------- */

.ry-rail {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	padding-bottom: 8px;
	margin: 0 -24px;
	padding-left: 24px;
	padding-right: 24px;
	scrollbar-width: thin;
}

.ry-rail__item {
	flex: 0 0 240px;
	scroll-snap-align: start;
}

.ry-rail::-webkit-scrollbar {
	height: 6px;
}

.ry-rail::-webkit-scrollbar-thumb {
	background: var(--ry-line-2);
	border-radius: var(--ry-pill);
}

/* -------------------------------------------------------------------------
   14. 服务条
   ---------------------------------------------------------------------- */

.ry-band {
	background: var(--ry-wash);
	border-top: 1px solid var(--ry-line);
	border-bottom: 1px solid var(--ry-line);
	padding: 30px 0;
}

.ry-band__inner {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.ry-band__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	color: var(--ry-indigo);
}

.ry-band__item .ry-ico {
	margin-bottom: 7px;
	opacity: 0.85;
}

.ry-band__item b {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--ry-ink);
	letter-spacing: -0.01em;
}

.ry-band__item span {
	font-size: 12.5px;
	color: var(--ry-mute);
}

/* -------------------------------------------------------------------------
   15. 品牌故事
   ---------------------------------------------------------------------- */

.ry-story {
	background: var(--ry-indigo);
	color: #fff;
	padding: 76px 0;
	margin-top: 56px;
}

.ry-story__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: 64px;
	align-items: center;
}

.ry-story__title {
	color: #fff;
	font-size: clamp(26px, 3vw, 40px);
	line-height: 1.18;
	letter-spacing: -0.032em;
	margin: 0 0 18px;
}

.ry-story__lead {
	max-width: 34em;
	font-size: 15px;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.74);
	margin: 0 0 28px;
}

.ry-story__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: rgba(255, 255, 255, 0.16);
	border-radius: var(--ry-r);
	overflow: hidden;
}

.ry-story__grid > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 22px 20px;
	background: var(--ry-indigo);
}

.ry-story__grid b {
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.035em;
	color: #fff;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.ry-story__grid span {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.62);
}

/* -------------------------------------------------------------------------
   16. 目录页（分类 / 商店）
   ---------------------------------------------------------------------- */

.ry-catalog {
	padding: 26px 0 72px;
}

.ry-catalog__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	padding: 14px 0 22px;
}

.ry-catalog__title {
	font-size: clamp(28px, 3.4vw, 42px);
	letter-spacing: -0.035em;
	margin-bottom: 10px;
}

.ry-catalog__lead {
	max-width: 46em;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.75;
	color: var(--ry-mute);
}

.ry-catalog__count {
	flex: 0 0 auto;
	margin: 0;
	font-size: 13px;
	color: var(--ry-mute);
	white-space: nowrap;
	padding-bottom: 4px;
}

.ry-catalog__count b {
	font-size: 22px;
	font-weight: 800;
	color: var(--ry-ink);
	letter-spacing: -0.03em;
	margin-right: 2px;
	font-variant-numeric: tabular-nums;
}

.ry-catalog__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0 22px;
	border-top: 1px solid var(--ry-line);
	font-size: 13px;
	color: var(--ry-mute);
}

.ry-catalog__result {
	min-width: 0;
}

.ry-catalog__order .woocommerce-ordering {
	margin: 0;
}

.ry-catalog__order select {
	padding: 8px 30px 8px 12px;
	border: 1px solid var(--ry-line-2);
	border-radius: var(--ry-pill);
	background: #fff
		url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='14' height='14' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E")
		no-repeat right 12px center;
	-webkit-appearance: none;
	appearance: none;
	font-size: 13px;
	color: var(--ry-ink-2);
	cursor: pointer;
}

.ry-catalog__order select:focus {
	outline: none;
	border-color: var(--ry-indigo-2);
	box-shadow: 0 0 0 3px rgba(44, 90, 160, 0.14);
}

/* 面包屑 */
.ry-crumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 8px;
	font-size: 12.5px;
	color: var(--ry-faint);
}

.ry-crumb a {
	color: var(--ry-mute);
	transition: color 0.14s ease;
}

.ry-crumb a:hover {
	color: var(--ry-indigo);
}

.ry-crumb__sep {
	font-style: normal;
	color: var(--ry-line-2);
}

.ry-crumb__item {
	color: var(--ry-mute);
}

/* 空状态 */
.ry-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 72px 24px;
	text-align: center;
	background: var(--ry-wash);
	border-radius: var(--ry-r-lg);
	color: var(--ry-mute);
}

.ry-empty .ry-ico {
	color: var(--ry-faint);
	margin-bottom: 6px;
}

.ry-empty h2 {
	font-size: 19px;
	margin: 0;
	color: var(--ry-ink);
}

.ry-empty p {
	margin: 0 0 12px;
	font-size: 14px;
	max-width: 30em;
}

/* -------------------------------------------------------------------------
   17. 商品详情
   ---------------------------------------------------------------------- */

.ry-product {
	padding: 22px 0 64px;
}

.ry-product .ry-crumb {
	margin-bottom: 24px;
}

/* 商品规格行（WooCommerce 核心的 .product_meta：SKU / 分类 / 品牌） */
.ry-theme.woocommerce div.product .product_meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 22px;
	margin: 16px 0 0;
	padding: 12px 0;
	border-top: 1px solid var(--ry-line);
	border-bottom: 1px solid var(--ry-line);
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--ry-mute);
}

.ry-theme.woocommerce div.product .product_meta > span {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
}

.ry-theme.woocommerce div.product .product_meta a {
	color: var(--ry-indigo);
	font-weight: 600;
	text-decoration: none;
	transition: color 0.14s ease;
}

.ry-theme.woocommerce div.product .product_meta a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ry-theme.woocommerce div.product .product_meta .sku {
	color: var(--ry-ink-2);
	font-family: var(--ry-mono);
	font-size: 11.5px;
	letter-spacing: -0.01em;
}

/* 信任条 */
.ry-trust {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin: 18px 0 0;
	padding: 14px;
	background: var(--ry-wash);
	border-radius: var(--ry-r);
}

.ry-trust__item {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
}

.ry-trust__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff;
	color: var(--ry-indigo);
}

.ry-trust__txt {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.3;
}

.ry-trust__txt b {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ry-ink);
	white-space: nowrap;
}

.ry-trust__txt span {
	font-size: 11px;
	color: var(--ry-mute);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* -------------------------------------------------------------------------
   18. 文档页（信息页）
   ---------------------------------------------------------------------- */

.ry-doc {
	padding: 26px 0 76px;
}

.ry-doc__head {
	padding: 8px 0 26px;
	border-bottom: 1px solid var(--ry-line);
	margin-bottom: 34px;
}

.ry-doc__title {
	font-size: clamp(26px, 3vw, 38px);
	letter-spacing: -0.035em;
	line-height: 1.2;
}

.ry-doc__layout {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

.ry-doc__layout--single {
	grid-template-columns: minmax(0, 1fr);
	max-width: 820px;
}

.ry-doc__aside {
	position: sticky;
	top: calc(var(--ry-head-h) + 20px);
}

.ry-doc__aside-label {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ry-faint);
}

.ry-doc__nav {
	display: flex;
	flex-direction: column;
	border-left: 2px solid var(--ry-line);
}

.ry-doc__nav a {
	display: block;
	padding: 8px 0 8px 14px;
	margin-left: -2px;
	border-left: 2px solid transparent;
	font-size: 13.5px;
	color: var(--ry-mute);
	line-height: 1.45;
	transition: color 0.14s ease, border-color 0.14s ease;
}

.ry-doc__nav a:hover {
	color: var(--ry-indigo);
}

.ry-doc__nav a.is-active {
	color: var(--ry-indigo);
	font-weight: 600;
	border-left-color: var(--ry-indigo);
}

.ry-doc__help {
	margin-top: 26px;
	padding: 16px;
	background: var(--ry-wash);
	border-radius: var(--ry-r);
	color: var(--ry-indigo);
}

.ry-doc__help p {
	margin: 8px 0 12px;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--ry-mute);
}

.ry-doc__help b {
	display: block;
	color: var(--ry-ink);
	font-size: 13px;
	margin-bottom: 2px;
}

.ry-doc__content {
	min-width: 0;
}

.ry-doc__hero {
	margin: 0 0 28px;
	border-radius: var(--ry-r);
	overflow: hidden;
}

.ry-doc__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 40px;
	padding: 22px 24px;
	background: var(--ry-indigo-3);
	border-radius: var(--ry-r);
}

.ry-doc__cta b {
	display: block;
	font-size: 15px;
	color: var(--ry-ink);
	margin-bottom: 3px;
}

.ry-doc__cta span {
	font-size: 13px;
	color: var(--ry-mute);
}

.ry-doc--wide .ry-doc__title {
	margin-bottom: 8px;
}

/* 正文排版的通用容器，具体子元素样式见 modules.css */
.ry-prose {
	font-size: 15px;
	line-height: 1.85;
	color: var(--ry-ink-2);
}

.ry-prose--wc {
	max-width: 100%;
}

/* -------------------------------------------------------------------------
   19. 搜索页与 404
   ---------------------------------------------------------------------- */

.ry-searchpage {
	padding: 26px 0 76px;
}

.ry-searchpage__head {
	padding-bottom: 26px;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--ry-line);
}

.ry-searchpage__title {
	font-size: clamp(26px, 3.2vw, 40px);
	letter-spacing: -0.035em;
	margin-bottom: 8px;
}

.ry-searchpage__count {
	margin: 0 0 20px;
	font-size: 14px;
	color: var(--ry-mute);
}

.ry-searchpage__count b {
	color: var(--ry-ink);
	font-size: 17px;
}

.ry-searchpage__form {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 560px;
	padding: 6px 6px 6px 15px;
	background: var(--ry-wash);
	border: 1px solid var(--ry-line);
	border-radius: var(--ry-pill);
	color: var(--ry-faint);
}

.ry-searchpage__form input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	font-size: 14.5px;
	padding: 7px 0;
	color: var(--ry-ink);
}

.ry-searchpage__form input[type="search"]:focus {
	outline: none;
}

.ry-404 {
	padding: 80px 0 100px;
	background: linear-gradient(180deg, var(--ry-wash) 0%, var(--ry-paper) 60%);
}

.ry-404__inner {
	max-width: 640px;
	text-align: center;
}

.ry-404__code {
	margin: 0;
	font-size: clamp(64px, 12vw, 120px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.06em;
	color: transparent;
	-webkit-text-stroke: 2px var(--ry-line-2);
}

.ry-404__title {
	font-size: clamp(24px, 3vw, 34px);
	letter-spacing: -0.03em;
	margin: 8px 0 10px;
}

.ry-404__lead {
	margin: 0 0 26px;
	color: var(--ry-mute);
	font-size: 15px;
}

.ry-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-bottom: 48px;
}

.ry-404__cats {
	padding-top: 28px;
	border-top: 1px solid var(--ry-line);
}

.ry-404__cats p {
	font-size: 13px;
	color: var(--ry-faint);
	margin-bottom: 14px;
}

.ry-404__cats .ry-chips__inner {
	justify-content: center;
	flex-wrap: wrap;
	overflow: visible;
}

/* -------------------------------------------------------------------------
   20. 文章列表
   ---------------------------------------------------------------------- */

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

.ry-post {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--ry-line);
}

.ry-post__thumb {
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: var(--ry-r);
	overflow: hidden;
	background: var(--ry-wash);
}

.ry-post__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.ry-post:hover .ry-post__thumb img {
	transform: scale(1.04);
}

.ry-post__date {
	margin: 0 0 6px;
	font-size: 12px;
	color: var(--ry-faint);
	font-variant-numeric: tabular-nums;
}

.ry-post__title {
	font-size: 19px;
	letter-spacing: -0.02em;
	margin-bottom: 8px;
}

.ry-post__title a:hover {
	color: var(--ry-indigo);
}

.ry-post__excerpt {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--ry-mute);
}

.ry-post__more {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ry-indigo);
}

/* -------------------------------------------------------------------------
   21. 页脚
   ---------------------------------------------------------------------- */

.ry-foot {
	margin-top: 24px;
	border-top: 1px solid var(--ry-line);
}

.ry-foot__cta {
	background: var(--ry-wash);
	border-bottom: 1px solid var(--ry-line);
	padding: 44px 0;
}

.ry-foot__cta-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

.ry-foot__kicker {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--ry-indigo-2);
}

.ry-foot__title {
	font-size: clamp(22px, 2.6vw, 30px);
	letter-spacing: -0.03em;
	margin-bottom: 8px;
}

.ry-foot__lead {
	margin: 0;
	font-size: 14px;
	color: var(--ry-mute);
	max-width: 42em;
}

.ry-foot__cta-actions {
	display: flex;
	gap: 10px;
	flex: 0 0 auto;
}

.ry-foot__cta-actions .ry-btn--white {
	border: 1px solid var(--ry-line-2);
}

.ry-foot__main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: 56px;
	padding-top: 52px;
	padding-bottom: 48px;
}

.ry-foot__logo {
	display: inline-block;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--ry-indigo);
	margin-bottom: 12px;
}

.ry-foot__desc {
	max-width: 26em;
	margin: 0 0 16px;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--ry-mute);
}

.ry-foot__adult {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	font-size: 11.5px;
	color: var(--ry-faint);
}

.ry-foot__adult span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 1px solid var(--ry-line-2);
	border-radius: 50%;
	font-size: 10px;
	font-weight: 700;
	color: var(--ry-ink-2);
	flex: 0 0 auto;
}

.ry-foot__cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}

.ry-foot__col h3 {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--ry-ink);
	margin-bottom: 12px;
}

.ry-foot__list {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.ry-foot__list a {
	font-size: 13.5px;
	color: var(--ry-mute);
	transition: color 0.14s ease;
}

.ry-foot__list a:hover {
	color: var(--ry-indigo);
}

.ry-foot__bar {
	border-top: 1px solid var(--ry-line);
	padding: 18px 0;
}

.ry-foot__bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-size: 12px;
	color: var(--ry-faint);
}

.ry-foot__bar p {
	margin: 0;
}

.ry-foot__pay {
	letter-spacing: 0.02em;
}

/* -------------------------------------------------------------------------
   22. 移动底部栏与浮动按钮
   ---------------------------------------------------------------------- */

.ry-tabbar {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.97);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-top: 1px solid var(--ry-line);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

.ry-tabbar__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	flex: 1 1 0;
	padding: 8px 0 7px;
	font-size: 10.5px;
	font-weight: 500;
	color: var(--ry-mute);
	transition: color 0.16s ease;
}

.ry-tabbar__item.is-active {
	color: var(--ry-indigo);
	font-weight: 600;
}

.ry-tabbar__item--search {
	color: var(--ry-ink-2);
}

.ry-tabbar__badge {
	position: absolute;
	top: 4px;
	right: 50%;
	margin-right: -22px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: var(--ry-pill);
	background: var(--ry-coral);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

.ry-tabbar__badge.is-empty {
	display: none;
}

.ry-totop {
	position: fixed;
	right: 24px;
	bottom: 28px;
	z-index: 80;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	color: var(--ry-indigo);
	border: 1px solid var(--ry-line);
	box-shadow: var(--ry-sh-sm);
	transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.ry-totop:hover {
	transform: translateY(-2px);
	box-shadow: var(--ry-sh);
}

.ry-totop[hidden] {
	display: none;
}

/* -------------------------------------------------------------------------
   23. 分页
   ---------------------------------------------------------------------- */

.ry-pager-wrap {
	margin-top: 40px;
}

.ry-pager .nav-links,
.ry-pager-wrap .nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
}

.ry-pager-wrap .page-numbers,
.ry-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--ry-line);
	border-radius: var(--ry-r-sm);
	background: #fff;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--ry-ink-2);
	font-variant-numeric: tabular-nums;
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.ry-pager-wrap .page-numbers:hover,
.ry-pager .page-numbers:hover {
	border-color: var(--ry-indigo);
	color: var(--ry-indigo);
}

.ry-pager-wrap .page-numbers.current,
.ry-pager .page-numbers.current {
	background: var(--ry-indigo);
	border-color: var(--ry-indigo);
	color: #fff;
	font-weight: 600;
}

.ry-pager-wrap .page-numbers.dots,
.ry-pager .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

.ry-pager-wrap .screen-reader-text {
	display: none;
}

/* 集合页内链与 FAQ */
.ry-coll-links,
.ry-coll-faq {
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid var(--ry-line);
}

.ry-coll-links__title,
.ry-coll-faq__title {
	font-size: 19px;
	letter-spacing: -0.02em;
	margin-bottom: 16px;
}

.ry-coll-links__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ry-coll-links__list a {
	display: inline-block;
	padding: 8px 15px;
	border: 1px solid var(--ry-line);
	border-radius: var(--ry-pill);
	background: #fff;
	font-size: 13px;
	color: var(--ry-ink-2);
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.ry-coll-links__list a:hover {
	border-color: var(--ry-indigo);
	color: var(--ry-indigo);
	background: var(--ry-indigo-3);
}

.ry-coll-faq__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 860px;
}

.ry-faq {
	border: 1px solid var(--ry-line);
	border-radius: var(--ry-r);
	background: #fff;
	overflow: hidden;
}

.ry-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 15px 18px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ry-ink);
	cursor: pointer;
	list-style: none;
	transition: background-color 0.15s ease;
}

.ry-faq summary::-webkit-details-marker {
	display: none;
}

.ry-faq summary:hover {
	background: var(--ry-wash);
}

.ry-faq summary .ry-ico {
	color: var(--ry-mute);
	transition: transform 0.22s ease;
}

.ry-faq[open] summary .ry-ico {
	transform: rotate(45deg);
	color: var(--ry-indigo);
}

.ry-faq p {
	margin: 0;
	padding: 0 18px 18px;
	font-size: 14px;
	line-height: 1.75;
	color: var(--ry-mute);
}

/* -------------------------------------------------------------------------
   24. 工具类与动效
   ---------------------------------------------------------------------- */

.ry-hide {
	display: none !important;
}

.ry-chips__inner--center {
	justify-content: center;
	flex-wrap: wrap;
	overflow: visible;
}

/* 首屏入场：不使用整块淡入（会让内容在观察器未触发时不可见） */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* -------------------------------------------------------------------------
   25. 响应式
   ---------------------------------------------------------------------- */

@media (max-width: 1180px) {
	:root {
		--ry-wrap: 1080px;
	}

	.ry-nav__link {
		padding: 9px 8px;
		font-size: 13.5px;
	}

	.ry-tool__sum {
		display: none;
	}
}

@media (max-width: 1024px) {
	:root {
		--ry-head-h: 64px;
	}

	.ry-top__notes li:nth-child(3) {
		display: none;
	}

	.ry-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
		padding-top: 44px;
		padding-bottom: 52px;
	}

	.ry-hero__art {
		max-width: 440px;
	}

	.ry-collage {
		aspect-ratio: 5 / 4;
	}

	.ry-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ry-cats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ry-doc__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.ry-doc__aside {
		position: static;
		order: 2;
		margin-top: 40px;
		padding-top: 28px;
		border-top: 1px solid var(--ry-line);
	}

	.ry-doc__aside-label {
		margin-bottom: 8px;
	}

	.ry-doc__nav {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 6px;
		border-left: 0;
	}

	.ry-doc__nav a {
		padding: 7px 13px;
		margin: 0;
		border: 1px solid var(--ry-line);
		border-radius: var(--ry-pill);
		background: #fff;
		font-size: 12.5px;
	}

	.ry-doc__nav a.is-active {
		background: var(--ry-indigo);
		border-color: var(--ry-indigo);
		color: #fff;
	}

	.ry-doc__help {
		display: none;
	}

	.ry-story__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 34px;
	}

	.ry-foot__main {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}

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

	.ry-posts {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 860px) {
	.ry-top__links {
		display: none;
	}

	.ry-top__inner {
		justify-content: center;
	}

	.ry-nav {
		display: none;
	}

	.ry-burger {
		display: inline-flex;
	}

	.ry-head__inner {
		gap: 12px;
	}

	.ry-logo {
		margin-right: auto;
	}

	.ry-tool__label {
		display: none;
	}

	.ry-tool--search {
		display: none;
	}

	.ry-tool--bag {
		padding-right: 11px;
	}

	.ry-tool {
		padding: 9px;
	}

	.ry-tabbar {
		display: flex;
	}

	.ry-main {
		padding-bottom: 62px;
	}

	/* rz-foot-tabbar-clearance
	   固定底栏在页脚之后，留白要加在页脚上，否则会压住版权行。 */
	.ry-foot {
		padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
	}

	.ry-totop {
		bottom: 78px;
		right: 16px;
	}

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

	.ry-card__body {
		padding: 11px 11px 13px;
	}

	.ry-card__name {
		font-size: 13.5px;
	}

	.ry-card__ja {
		display: none;
	}

	.ry-card__price {
		font-size: 14px;
	}

	.ry-card__peek {
		display: none;
	}

	.ry-sec {
		padding: 44px 0;
	}

	.ry-sec__head {
		margin-bottom: 20px;
	}

	.ry-hero__title {
		font-size: clamp(32px, 8vw, 44px);
	}

	.ry-stats > div {
		padding-right: 22px;
		margin-right: 22px;
	}

	.ry-stats dd {
		font-size: 22px;
	}

	.ry-catalog__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.ry-catalog__bar {
		flex-wrap: wrap;
		gap: 10px;
		padding-bottom: 18px;
	}

	.ry-story {
		padding: 52px 0;
		margin-top: 40px;
	}

	.ry-foot__cta {
		padding: 32px 0;
	}

	.ry-foot__cta-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

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

	.ry-foot__bar-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.ry-trust {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		padding: 12px 10px;
		gap: 6px;
	}

	.ry-trust__ico {
		display: none;
	}

	.ry-trust__txt b {
		font-size: 11.5px;
	}

	.ry-trust__txt span {
		font-size: 10px;
	}

	.ry-doc__cta {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}
}

@media (max-width: 560px) {
	.ry-wrap {
		padding: 0 16px;
	}

	.ry-rail {
		margin: 0 -16px;
		padding-left: 16px;
		padding-right: 16px;
	}

	.ry-rail__item {
		flex: 0 0 190px;
	}

	.ry-top__notes li:nth-child(2) {
		display: none;
	}

	.ry-cats {
		gap: 10px;
	}

	.ry-catcard__body strong {
		font-size: 15px;
	}

	.ry-catcard__body {
		left: 13px;
		right: 13px;
		bottom: 13px;
	}

	.ry-hero__actions .ry-btn {
		flex: 1 1 auto;
	}

	.ry-stats {
		gap: 0;
	}

	.ry-stats > div {
		flex: 1 1 0;
		padding-right: 12px;
		margin-right: 12px;
	}

	.ry-stats dt {
		font-size: 10.5px;
	}

	.ry-stats dd {
		font-size: 19px;
	}

	.ry-story__grid b {
		font-size: 22px;
	}

	.ry-404__actions .ry-btn {
		width: 100%;
	}
}

/* ==========================================================================
   2.11 第二层分类导航（一级分类页显示子分类，子分类页显示同级）
   ========================================================================== */
.ry-chips--sub .ry-chips__inner {
	padding: 0 0 18px;
	gap: 6px;
}

.ry-chips--sub .ry-chip {
	padding: 6px 13px;
	font-size: 13px;
}

.ry-chip__n {
	font-size: 11.5px;
	font-weight: 400;
	opacity: 0.55;
}

/* =========================================================================
 * 2.14 移动端修复（2026-10-26）
 * 依据：真机尺寸实测 320 / 360 / 375 / 414 四档 + Chrome 移动端模拟
 * 说明：商品卡片价格溢出已由 mu-plugins/186 从数据源头修掉，这里只做样式层收口
 * ========================================================================= */

@media (max-width: 860px) {
	/* ① 表单控件统一 16px
	   iOS Safari 在输入框字号低于 16px 时，一聚焦就会把整个页面放大，
	   用户点搜索后页面突然变大、还要手动缩回。16px 是触发阈值，等于 16 不放大。
	   加 !important 是因为 WooCommerce 自带的 form 样式选择器层级很高，普通覆盖压不住。 */
	input[type="text"],
	input[type="search"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="number"],
	input[type="password"],
	select,
	textarea,
	.woocommerce form .form-row input.input-text,
	.woocommerce form .form-row select,
	.woocommerce form .form-row textarea,
	.woocommerce-Input,
	#coupon_code {
		font-size: 16px !important;
	}

	/* ② 分页点击区
	   原来单个数只有 23×38，相邻数字间距不到 4px，手指一按就点到隔壁页。
	   改成弹性均分：9 个按钮平分整行宽度（320 屏约 32px，375 屏约 38px），
	   任何屏宽都保持单行，页数变多时也不会突然掉到第二行。 */
	.woocommerce-pagination ul.page-numbers {
		display: flex !important;
		flex-wrap: nowrap !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.woocommerce-pagination ul.page-numbers > li {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		display: flex !important;
	}

	.woocommerce-pagination ul.page-numbers li > a.page-numbers,
	.woocommerce-pagination ul.page-numbers li > span.page-numbers {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 100% !important;
		min-width: 28px !important;
		height: 40px !important;
		padding: 0 !important;
		font-size: 14px !important;
	}

	/* ③ 头部功能图标 38 → 42，购物袋更容易点中 */
	.ry-tool {
		padding: 11px;
	}
}