@charset "UTF-8";
/* ============================================================================
   Kyoto (京都) — 目录层：首页横幅 / 分类侧栏 / 目录工具条 / 商品卡片 / 信任区
   ----------------------------------------------------------------------------
   依赖：Kyoto.css 的设计令牌（--k-*）。本文件不再声明任何颜色字面量，
   一律引用令牌，保证亮/暗色随 <html data-k-mode> 自动切换。

   ⚠ 卡片 DOM 契约（由 Assets/Catalog.js 生成，与程序内置主题保持一致的类名）：
       .item-list > a.item-card-cell[data-id] > .acg-card(.soldout)
           > .acg-thumb                      主图（背景图承载）
           > .acg-body
               > .tags > .acg-tag.acg-tag--{color} + .badge-soft*
               > .goods-title               商品名
               > .stat-row  > .price > .unit + 数字
               > .stat-bottom > span ×2     库存 / 已售
           > .soldout-ribbon                 售罄角标
     沿用这套名字的原因：程序与插件生态对 .acg-card 有既有样式/脚本挂载点，
     换名字等于自断兼容；本主题只重写「外观」而不重写「结构」。
   ========================================================================== */

/* ==========================================================================
   1. 首页横幅
   ========================================================================== */
.k-hero {
    position: relative;
    padding: var(--k-s9) 0 var(--k-s8);
    overflow: hidden;
    background:
        radial-gradient(120% 140% at 88% -10%, color-mix(in srgb, var(--k-jade) 12%, transparent) 0%, transparent 58%),
        radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--k-gold) 9%, transparent) 0%, transparent 52%),
        var(--k-paper-2);
    border-bottom: 1px solid var(--k-line);
}
/* 极细网格：日式「和纸 + 罫线」的秩序感，纯 CSS 无图片 */
.k-hero::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, color-mix(in srgb, var(--k-line) 62%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--k-line) 62%, transparent) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 10%, transparent 72%);
    mask-image: radial-gradient(120% 90% at 50% 0%, #000 10%, transparent 72%);
    pointer-events: none;
}
.k-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: center;
    gap: var(--k-s9);
}
.k-hero__copy { min-width: 0; }
.k-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 13px 5px 11px;
    border-radius: var(--k-r-pill);
    background: var(--k-surface);
    border: 1px solid var(--k-line);
    box-shadow: var(--k-sh-1);
    font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
    color: var(--k-jade-hi);
}
.k-hero__eyebrow i { color: var(--k-jade); }
.k-hero__title {
    margin: var(--k-s4) 0 0;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--k-ink);
    text-wrap: balance;
}
.k-hero__sub {
    margin: var(--k-s3) 0 0;
    max-width: 46ch;
    font-size: 15px; line-height: 1.75;
    color: var(--k-ink-3);
}
.k-hero__cta { display: flex; flex-wrap: wrap; gap: var(--k-s3); margin-top: var(--k-s6); }

.k-hero__facts {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: var(--k-s3);
}
.k-hero__facts li {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--k-s3);
    align-items: center;
    padding: var(--k-s3) var(--k-s4);
    background: color-mix(in srgb, var(--k-surface) 88%, transparent);
    border: 1px solid var(--k-line);
    border-radius: var(--k-r-md);
    box-shadow: var(--k-sh-1);
    transition: transform var(--k-d2) var(--k-ease), box-shadow var(--k-d2) var(--k-ease), border-color var(--k-d2) var(--k-ease);
}
.k-hero__facts li:hover {
    transform: translateY(-2px);
    border-color: var(--k-jade-line);
    box-shadow: var(--k-sh-2);
}
.k-hero__fact-ico {
    grid-row: 1 / span 2;
    width: 42px; height: 42px; display: grid; place-items: center;
    border-radius: var(--k-r-sm);
    background: var(--k-jade-soft); color: var(--k-jade-hi);
    font-size: 17px;
}
html[data-k-mode="dark"] .k-hero__fact-ico { background: color-mix(in srgb, var(--k-jade) 20%, transparent); color: var(--k-jade-lo); }
.k-hero__facts b { font-size: 14.5px; font-weight: 700; color: var(--k-ink); }
.k-hero__facts i { font-size: 12.5px; font-style: normal; color: var(--k-ink-4); }

/* ==========================================================================
   2. 店铺主体：侧栏 + 目录
   ========================================================================== */
.k-shop {
    display: grid;
    grid-template-columns: 258px minmax(0, 1fr);
    gap: var(--k-s7);
    align-items: start;
}

/* ---------- 2.1 分类侧栏 ---------- */
.k-side {
    position: sticky;
    top: calc(var(--k-top-h) + var(--k-s4));
    display: flex; flex-direction: column;
    max-height: calc(100vh - var(--k-top-h) - var(--k-s8));
    background: var(--k-surface);
    border: 1px solid var(--k-line);
    border-radius: var(--k-r-lg);
    box-shadow: var(--k-sh-1);
    overflow: hidden;
}
.k-side__head {
    flex: none;
    display: flex; align-items: center; justify-content: space-between; gap: var(--k-s2);
    padding: var(--k-s4) var(--k-s4) var(--k-s3);
    border-bottom: 1px solid var(--k-line);
}
.k-side__title {
    margin: 0; display: flex; align-items: center; gap: var(--k-s2);
    font-size: 14.5px; font-weight: 700; letter-spacing: .01em; color: var(--k-ink);
}
.k-side__title i { color: var(--k-jade); font-size: 14px; }
.k-side__close { display: none; }

.k-side__body {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--k-s2) var(--k-s2) var(--k-s3);
}

/* 分类树 */
.k-tree { display: flex; flex-direction: column; gap: 2px; }
.k-node { min-width: 0; }
.k-node__row { display: flex; align-items: center; gap: 2px; }
.k-node__children { display: flex; flex-direction: column; gap: 2px; }
.k-node__children[hidden] { display: none; }
/* 层级缩进：二级 +14px，三级再 +14px */
.k-node__children { margin-left: 14px; padding-left: 8px; border-left: 1px dashed var(--k-line-2); }

.k-tree__item {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: center; gap: var(--k-s2);
    padding: 9px 10px;
    border: 0; background: none; cursor: pointer;
    border-radius: var(--k-r-xs);
    font-size: 14px; font-weight: 500; color: var(--k-ink-2);
    text-align: left;
    transition: background var(--k-d1) var(--k-ease), color var(--k-d1) var(--k-ease);
}
.k-tree__item:hover { background: var(--k-surface-3); color: var(--k-ink); }
.k-tree__item.is-active {
    background: var(--k-jade-soft);
    color: var(--k-jade-hi);
    font-weight: 700;
}
html[data-k-mode="dark"] .k-tree__item.is-active { background: color-mix(in srgb, var(--k-jade) 22%, transparent); color: var(--k-jade-lo); }
.k-tree__dot {
    flex: none; width: 5px; height: 5px; border-radius: 50%;
    background: var(--k-line-3);
    transition: background var(--k-d1) var(--k-ease), transform var(--k-d1) var(--k-ease);
}
.k-tree__item:hover .k-tree__dot { background: var(--k-ink-4); }
.k-tree__item.is-active .k-tree__dot { background: var(--k-jade); transform: scale(1.5); }
.k-tree__name {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.k-node__toggle {
    flex: none; width: 26px; height: 26px;
    display: grid; place-items: center;
    border: 0; background: none; cursor: pointer;
    border-radius: var(--k-r-xs);
    color: var(--k-ink-4); font-size: 11px;
    transition: background var(--k-d1) var(--k-ease), color var(--k-d1) var(--k-ease), transform var(--k-d2) var(--k-ease);
}
.k-node__toggle:hover { background: var(--k-surface-3); color: var(--k-ink); }
.k-node__toggle[aria-expanded="true"] { transform: rotate(90deg); color: var(--k-jade); }

/* ---------- 2.2 目录区 ---------- */
.k-catalog { min-width: 0; }

.k-catalog__bar {
    position: sticky;
    top: var(--k-top-h);
    z-index: calc(var(--k-z-top) - 1);
    display: flex; align-items: center; justify-content: space-between; gap: var(--k-s4);
    flex-wrap: wrap;
    margin: 0 0 var(--k-s4);
    padding: var(--k-s3) 0;
    background: color-mix(in srgb, var(--k-paper) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.5) blur(12px);
    backdrop-filter: saturate(1.5) blur(12px);
    border-bottom: 1px solid var(--k-line);
}
.k-catalog__heading { display: flex; align-items: center; gap: var(--k-s3); min-width: 0; }
.k-catalog__captions { min-width: 0; }
.k-catalog__title {
    margin: 0;
    font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--k-ink);
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.k-catalog__note {
    margin: 2px 0 0;
    font-size: 12.5px; color: var(--k-ink-4);
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.k-catalog__tools { display: flex; align-items: center; gap: var(--k-s2); flex-wrap: wrap; }
.k-side-open { display: none; } /* 仅移动端出现，见 Responsive.css */

/* 搜索框 */
.k-search {
    position: relative;
    display: flex; align-items: center;
    width: 246px; max-width: 100%;
    height: 38px;
    background: var(--k-surface);
    border: 1px solid var(--k-line-2);
    border-radius: var(--k-r-pill);
    transition: border-color var(--k-d2) var(--k-ease), box-shadow var(--k-d2) var(--k-ease), background var(--k-d2) var(--k-ease);
}
.k-search:focus-within { border-color: var(--k-jade); box-shadow: var(--k-ring); background: var(--k-surface); }
.k-search__ico {
    position: absolute; left: 13px;
    font-size: 13px; color: var(--k-ink-4); pointer-events: none;
}
.k-search:focus-within .k-search__ico { color: var(--k-jade); }
.k-search__input {
    flex: 1 1 auto; min-width: 0;
    height: 100%; padding: 0 40px 0 34px;
    border: 0; background: none; outline: none;
    font: inherit; font-size: 13.5px; color: var(--k-ink);
}
.k-search__input::placeholder { color: var(--k-ink-4); }
.k-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.k-search__btn {
    position: absolute; right: 4px;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border: 0; border-radius: 50%; cursor: pointer;
    background: var(--k-ink); color: var(--k-surface);
    font-size: 12px;
    transition: background var(--k-d2) var(--k-ease), transform var(--k-d1) var(--k-ease);
}
.k-search__btn:hover { background: var(--k-jade); }
.k-search__btn:active { transform: scale(.94); }

/* 列表 / 网格切换 */
.k-viewtoggle {
    display: inline-flex; align-items: center;
    padding: 3px;
    background: var(--k-surface-3);
    border: 1px solid var(--k-line);
    border-radius: var(--k-r-sm);
}
.k-viewtoggle__btn {
    width: 30px; height: 28px;
    display: grid; place-items: center;
    border: 0; background: none; cursor: pointer;
    border-radius: var(--k-r-xs);
    color: var(--k-ink-4); font-size: 13px;
    transition: background var(--k-d1) var(--k-ease), color var(--k-d1) var(--k-ease), box-shadow var(--k-d1) var(--k-ease);
}
.k-viewtoggle__btn:hover { color: var(--k-ink); }
.k-viewtoggle__btn.is-active {
    background: var(--k-surface); color: var(--k-ink);
    box-shadow: var(--k-sh-1);
}
.k-sort__caret { font-size: 10px; opacity: .6; transition: transform var(--k-d2) var(--k-ease); }
.k-pop.is-open .k-sort__caret { transform: rotate(180deg); }

/* ==========================================================================
   3. 商品卡片（列表 / 网格 同一份 DOM，两种排布）
   ========================================================================== */
.k-items { min-height: 120px; }

.item-list[data-view="list"] {
    display: flex; flex-direction: column; gap: var(--k-s3);
}
.item-list[data-view="grid"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
    gap: var(--k-s4);
}

.item-card-cell { display: block; color: inherit; text-decoration: none; min-width: 0; }
.item-card-cell:hover, .item-card-cell:focus-visible { color: inherit; text-decoration: none; }
.item-card-cell:focus-visible { outline: none; }
.item-card-cell:focus-visible .acg-card { box-shadow: var(--k-ring), var(--k-sh-2); }

.acg-card {
    position: relative;
    background: var(--k-surface);
    border: 1px solid var(--k-line);
    border-radius: var(--k-r-md);
    overflow: hidden;
    transition: transform var(--k-d2) var(--k-ease), box-shadow var(--k-d2) var(--k-ease), border-color var(--k-d2) var(--k-ease);
}
.item-card-cell:hover .acg-card {
    transform: translateY(-2px);
    border-color: var(--k-line-2);
    box-shadow: var(--k-sh-3);
}
.acg-card.soldout { opacity: .72; }
.acg-card.soldout:hover { transform: none; box-shadow: var(--k-sh-1); }

.acg-thumb {
    background-color: var(--k-surface-3);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.acg-body { min-width: 0; }

.tags {
    display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
    min-width: 0;
}
.goods-title {
    margin: 0;
    font-size: 14.5px; font-weight: 600; line-height: 1.5;
    color: var(--k-ink);
    overflow-wrap: anywhere;
}
/* 价格与「登录后价」竖排：价格永远在最上，补充说明在下，便于两种视图共用一份 DOM */
.stat-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.acg-body .price {
    display: inline-flex; align-items: baseline; gap: 1px;
    font-family: var(--k-mono);
    font-size: 20px; font-weight: 700; line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--k-verm);
    font-variant-numeric: tabular-nums;
}
.acg-body .price .unit { font-size: 12.5px; font-weight: 600; margin-right: 1px; }
.stat-bottom {
    display: flex; align-items: center; gap: var(--k-s3);
    font-size: 12px; color: var(--k-ink-4);
    font-variant-numeric: tabular-nums;
}
.stat-bottom span { white-space: nowrap; }

.soldout-ribbon {
    position: absolute; top: 10px; right: 10px;
    padding: 3px 9px;
    border-radius: var(--k-r-pill);
    background: color-mix(in srgb, var(--k-ink) 88%, transparent);
    color: var(--k-surface);
    font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}

/* 彩色标签（后台自定义标签的 8 种色，见 App\Model\Commodity::TAG_COLORS） */
.acg-tag {
    display: inline-flex; align-items: center;
    padding: 1.5px 7px;
    border-radius: var(--k-r-xs);
    font-size: 11.5px; font-weight: 600; line-height: 1.6;
    white-space: nowrap;
    border: 1px solid transparent;
}
.acg-tag--red    { color: var(--k-danger); background: var(--k-danger-soft); border-color: color-mix(in srgb, var(--k-danger) 22%, transparent); }
.acg-tag--orange { color: var(--k-warn);   background: var(--k-warn-soft);   border-color: color-mix(in srgb, var(--k-warn) 22%, transparent); }
.acg-tag--green  { color: var(--k-jade-hi); background: var(--k-jade-soft); border-color: var(--k-jade-line); }
.acg-tag--cyan   { color: var(--k-cyan);   background: var(--k-cyan-soft);   border-color: color-mix(in srgb, var(--k-cyan) 22%, transparent); }
.acg-tag--blue   { color: var(--k-info);   background: var(--k-info-soft);   border-color: color-mix(in srgb, var(--k-info) 22%, transparent); }
.acg-tag--purple { color: #6d4aa8;         background: #efeaf9;             border-color: rgba(109, 74, 168, .22); }
.acg-tag--pink   { color: #b03b73;         background: #fbeaf2;             border-color: rgba(176, 59, 115, .22); }
.acg-tag--gray   { color: var(--k-ink-3);  background: var(--k-muted-soft); border-color: var(--k-line-2); }
html[data-k-mode="dark"] .acg-tag--red    { background: color-mix(in srgb, var(--k-danger) 20%, transparent); }
html[data-k-mode="dark"] .acg-tag--orange { background: color-mix(in srgb, var(--k-warn) 20%, transparent); }
html[data-k-mode="dark"] .acg-tag--green  { background: color-mix(in srgb, var(--k-jade) 20%, transparent); color: var(--k-jade-lo); }
html[data-k-mode="dark"] .acg-tag--cyan,
html[data-k-mode="dark"] .acg-tag--blue   { background: color-mix(in srgb, var(--k-cyan) 22%, transparent); }
html[data-k-mode="dark"] .acg-tag--purple { color: #bda4e8; background: color-mix(in srgb, #8a63c9 22%, transparent); }
html[data-k-mode="dark"] .acg-tag--pink   { color: #e58ab4; background: color-mix(in srgb, #c25288 22%, transparent); }
html[data-k-mode="dark"] .acg-tag--gray   { background: var(--k-surface-3); border-color: var(--k-line); }

/* ---------- 3.1 列表视图：缩略图 + 名称 + 右侧价格 ---------- */
.item-list[data-view="list"] .acg-card {
    display: flex; align-items: center; gap: var(--k-s4);
    padding: var(--k-s3);
}
.item-list[data-view="list"] .acg-thumb {
    flex: none;
    width: 92px; height: 92px;
    border-radius: var(--k-r-sm);
    border: 1px solid var(--k-line);
}
.item-list[data-view="list"] .acg-body {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "tags   price"
        "title  price"
        "bottom price";
    align-items: center;
    column-gap: var(--k-s4);
    row-gap: 5px;
}
.item-list[data-view="list"] .tags         { grid-area: tags; }
.item-list[data-view="list"] .goods-title  { grid-area: title; font-size: 15px; }
.item-list[data-view="list"] .stat-row     { grid-area: price; justify-self: end; align-items: flex-end; align-self: center; }
.item-list[data-view="list"] .stat-bottom  { grid-area: bottom; }
.item-list[data-view="list"] .acg-body .price { font-size: 21px; }

/* ---------- 3.2 网格视图：上图下文 ---------- */
.item-list[data-view="grid"] .acg-card { display: flex; flex-direction: column; }
.item-list[data-view="grid"] .acg-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-bottom: 1px solid var(--k-line);
}
.item-list[data-view="grid"] .acg-body {
    display: flex; flex-direction: column; gap: var(--k-s2);
    padding: var(--k-s3) var(--k-s3) var(--k-s4);
}
.item-list[data-view="grid"] .goods-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}
.item-list[data-view="grid"] .stat-row { margin-top: 2px; }
.item-list[data-view="grid"] .stat-bottom {
    padding-top: var(--k-s2);
    border-top: 1px dashed var(--k-line);
    justify-content: space-between;
}
/* 网格下把「登录后价」这类补充说明压成小字，避免撑高卡片 */
.item-list[data-view="grid"] .price-note {
    display: block;
    font-size: 11.5px; font-weight: 600; color: var(--k-jade-hi);
}
.item-list[data-view="list"] .price-note {
    display: block; margin-top: 2px;
    font-size: 11.5px; font-weight: 600; color: var(--k-jade-hi);
    text-align: right;
}

/* ==========================================================================
   4. 空态 / 错误态 / 加载更多
   ========================================================================== */
.k-error {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--k-s2);
    padding: var(--k-s9) var(--k-s5);
    text-align: center;
}
.k-error__title { margin: var(--k-s2) 0 0; font-size: 16px; font-weight: 700; color: var(--k-ink); }
.k-error__text  { margin: 0 0 var(--k-s3); font-size: 13.5px; color: var(--k-ink-4); }

.k-more {
    display: flex; flex-direction: column; align-items: center; gap: var(--k-s2);
    padding: var(--k-s6) 0 0;
}
.k-more__end { font-size: 13px; color: var(--k-ink-4); }
.k-more__end::before, .k-more__end::after {
    content: ""; display: inline-block; vertical-align: middle;
    width: 34px; height: 1px; margin: 0 10px;
    background: var(--k-line-2);
}

/* ==========================================================================
   5. 服务保障区
   ========================================================================== */
.k-trust {
    margin-top: var(--k-s9);
    padding: var(--k-s7) 0;
    background: var(--k-surface);
    border-top: 1px solid var(--k-line);
}
.k-trust__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--k-s5);
}
.k-trust__item {
    display: flex; align-items: center; gap: var(--k-s3);
    min-width: 0;
}
.k-trust__item > i {
    flex: none;
    width: 40px; height: 40px; display: grid; place-items: center;
    border-radius: var(--k-r-sm);
    background: var(--k-surface-3);
    color: var(--k-jade-hi);
    font-size: 16px;
}
.k-trust__item div { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.k-trust__item b { font-size: 14px; font-weight: 700; color: var(--k-ink); }
.k-trust__item span { font-size: 12.5px; color: var(--k-ink-4); }