/* 清养方案（2026-09-26）：四款公司确认茶饮的展示模块与详情页。
   复用 care-ui.css 的暖茶纸底与 care-* 变量，不改共享壳。
   视觉：暖茶浅绿卡面 + 1px 中等描边 + 简洁紧凑卡片；无光泽堆叠、无横向溢出。

   作用域：shelf / grid / card / art / note / more 这些“展示模块”样式同时用于
   ① 清养方案页（body.care-qingyang-page）与 ② 首页“今日养护灵感”嵌入的 qingyang-shelf
   （body.care-index-page），故统一写成 body:is(.care-qingyang-page,.care-index-page)。
   所有类名均带 qingyang 前缀，不会影响其他模块。详情专有规则仍只作用于清养方案页。 */
html[data-care-ui="active"] body.care-qingyang-page .qingyang-page {
 margin: var(--care-gap) 0 0;
 min-width: 0;
 /* 滚动到底时留出底部空间，商城状态提示不被底栏遮住 */
 padding-bottom: var(--care-gap);
}
html[data-care-ui="active"] body.care-qingyang-page .qingyang-intro {
 margin: 0 0 var(--care-gap);
 font-size: var(--care-fs-body);
 line-height: var(--care-lh-body);
 color: var(--care-muted);
 overflow-wrap: anywhere;
}

/* —— 共享展示模块（清养页 + 首页嵌入）—— */
html[data-care-ui="active"] body:is(.care-qingyang-page,.care-index-page) .qingyang-shelf-note {
 margin: calc(8px * var(--care-spacing-scale, .5)) 0 var(--care-gap);
 font-size: var(--care-fs-body-2);
 line-height: var(--care-lh-body-2);
 color: var(--care-muted);
 overflow-wrap: anywhere;
}
html[data-care-ui="active"] body:is(.care-qingyang-page,.care-index-page) .qingyang-shelf-more {
 font-size: var(--care-fs-sm);
 color: var(--care-muted);
 text-decoration: none;
 white-space: nowrap;
}

/* 4 卡网格：窄屏 2 列，宽屏 ≥900px 4 列；大字档单列，避免名称挤压。 */
html[data-care-ui="active"] body:is(.care-qingyang-page,.care-index-page) .qingyang-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: calc(10px * var(--care-spacing-scale, .5));
 align-items: stretch;
}
@media (min-width: 900px) {
 html[data-care-ui="active"] body:is(.care-qingyang-page,.care-index-page) .qingyang-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--care-gap);
 }
}
html[data-care-ui="active"][data-care-reading="large"] body:is(.care-qingyang-page,.care-index-page) .qingyang-grid {
 grid-template-columns: minmax(0, 1fr);
}

/* 卡片：整卡为链接，浅绿暖茶卡面 + 中等描边，紧凑内边距。 */
html[data-care-ui="active"] body:is(.care-qingyang-page,.care-index-page) .qingyang-card {
 display: flex;
 flex-direction: column;
 min-width: 0;
 padding: calc(7px * var(--care-spacing-scale, .5));
 text-decoration: none;
 color: var(--care-ink);
 background: linear-gradient(160deg, #FBF7EC, #EFF3E3);
 border: 1px solid rgba(103, 133, 88, .30);
 border-radius: 16px;
 overflow: hidden;
}
html[data-care-ui="active"] body:is(.care-qingyang-page,.care-index-page) .qingyang-card:active {
 filter: brightness(.985);
}
html[data-care-ui="active"] body:is(.care-qingyang-page,.care-index-page) .qingyang-art {
 position: relative;
 display: block;
 min-width: 0;
 aspect-ratio: 4 / 3;
 border-radius: 11px;
 overflow: hidden;
 background: radial-gradient(ellipse, #F9F4EA, #EDF1E0);
}
html[data-care-ui="active"] body:is(.care-qingyang-page,.care-index-page) .qingyang-art-img {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: contain;
}
html[data-care-ui="active"] body:is(.care-qingyang-page,.care-index-page) .qingyang-art-fallback {
 position: absolute;
 inset: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: calc(8px * var(--care-spacing-scale, .5));
 text-align: center;
 font-size: var(--care-fs-xs);
 line-height: var(--care-lh-small);
 color: #5c6b4c;
 overflow-wrap: anywhere;
}
html[data-care-ui="active"] body:is(.care-qingyang-page,.care-index-page) .qingyang-art-tag {
 position: absolute;
 left: 6px;
 bottom: 6px;
 padding: calc(2px * var(--care-spacing-scale, .5)) calc(8px * var(--care-spacing-scale, .5));
 border-radius: 999px;
 background: rgba(251, 247, 236, .9);
 border: 1px solid rgba(103, 133, 88, .28);
 color: #4d6b45;
 font-size: var(--care-fs-xs);
 line-height: var(--care-lh-small);
 white-space: nowrap;
}
html[data-care-ui="active"] body:is(.care-qingyang-page,.care-index-page) .qingyang-card-body {
 min-width: 0;
 padding: calc(8px * var(--care-spacing-scale, .5)) calc(3px * var(--care-spacing-scale, .5)) calc(4px * var(--care-spacing-scale, .5));
}
html[data-care-ui="active"] body:is(.care-qingyang-page,.care-index-page) .qingyang-card-name {
 margin: 0 0 calc(5px * var(--care-spacing-scale, .5)) !important;
 font-size: var(--care-fs-h3);
 line-height: var(--care-lh-title);
 color: var(--care-ink);
 overflow-wrap: anywhere;
}
html[data-care-ui="active"] body:is(.care-qingyang-page,.care-index-page) .qingyang-card-copy {
 margin: 0;
 font-size: var(--care-fs-body-3);
 line-height: var(--care-lh-body-3);
 color: var(--care-muted);
 overflow-wrap: anywhere;
}

/* 详情页：仅清养方案页（首页不嵌入详情） */
html[data-care-ui="active"] body.care-qingyang-page .qingyang-back {
 display: inline-block;
 margin: 0 0 calc(10px * var(--care-spacing-scale, .5));
 font-size: var(--care-fs-sm);
 color: var(--care-muted);
 text-decoration: none;
}
html[data-care-ui="active"] body.care-qingyang-page .qingyang-detail {
 display: grid;
 grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
 gap: var(--care-gap);
 align-items: start;
 padding: calc(12px * var(--care-spacing-scale, .5));
 background: linear-gradient(160deg, #FBF7EC, #EFF3E3);
 border: 1px solid rgba(103, 133, 88, .30);
 border-radius: var(--care-radius);
}
@media (max-width: 650px) {
 html[data-care-ui="active"] body.care-qingyang-page .qingyang-detail {
  grid-template-columns: minmax(0, 1fr);
 }
}
html[data-care-ui="active"] body.care-qingyang-page .qingyang-detail-body {
 min-width: 0;
}
html[data-care-ui="active"] body.care-qingyang-page .qingyang-detail-name {
 margin: 0 0 calc(8px * var(--care-spacing-scale, .5)) !important;
 font-size: var(--care-fs-h2);
 line-height: var(--care-lh-title);
 overflow-wrap: anywhere;
}
html[data-care-ui="active"] body.care-qingyang-page .qingyang-detail-copy {
 margin: 0 0 var(--care-gap);
 font-size: var(--care-fs-body);
 line-height: var(--care-lh-body);
 color: var(--care-muted);
 overflow-wrap: anywhere;
}
html[data-care-ui="active"] body.care-qingyang-page .qingyang-chat {
 align-self: flex-start;
}
/* 商城二级入口（占位） */
html[data-care-ui="active"] body.care-qingyang-page .qingyang-commerce {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: calc(6px * var(--care-spacing-scale, .5));
 margin-top: calc(10px * var(--care-spacing-scale, .5));
}
html[data-care-ui="active"] body.care-qingyang-page .qingyang-commerce-btn {
 align-self: flex-start;
 /* 点击后把按钮及其下方状态文案一并滚入可视区，避免提示被底栏贴边裁切 */
 scroll-margin-bottom: 64px;
}
html[data-care-ui="active"] body.care-qingyang-page .qingyang-commerce-status {
 margin: 0;
 font-size: var(--care-fs-body-3);
 line-height: var(--care-lh-body-3);
 color: var(--care-muted);
 overflow-wrap: anywhere;
}
html[data-care-ui="active"] body.care-qingyang-page .qingyang-disclosure {
 margin: var(--care-gap) 0 0;
 font-size: var(--care-fs-body-3);
 line-height: var(--care-lh-body-3);
 color: var(--care-muted);
 overflow-wrap: anywhere;
}
html[data-care-ui="active"] body.care-qingyang-page .qingyang-missing h2 {
 margin-top: 0;
}
html[data-care-ui="active"] body.care-qingyang-page .qingyang-missing-copy {
 margin: 0 0 var(--care-gap);
 font-size: var(--care-fs-body);
 line-height: var(--care-lh-body);
 color: var(--care-muted);
 overflow-wrap: anywhere;
}