@charset "UTF-8";
/* ============================================================================
   Kyoto (京都) — 响应式层：全断点 + 触摸/动效可达性 + 打印
   ----------------------------------------------------------------------------
   断点策略（移动优先的反向做法：桌面为基线，逐级降级）
     1280px  宽桌面收窄
     1200px  窄桌面：横幅转单列
     1080px  平板：分类侧栏转抽屉、商品详情转单列、出现吸底购买栏
     1024px  顶部导航转抽屉（汉堡）
      900px  订单结果与信任区降级
      720px  手机：间距与字号整体下调，--k-top-h 变矮
      560px  小屏手机
      400px  极窄
   所有断点只做「重排 + 尺寸」，不改变任何 DOM 契约。
   ========================================================================== */

/* ==========================================================================
   ≥ 宽桌面微调
   ========================================================================== */
@media (max-width: 1360px) {
    :root { --k-wrap: 1200px; }
}

/* ==========================================================================
   ≤1200px：窄桌面
   ========================================================================== */
@media (max-width: 1200px) {
    .k-hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--k-s7); }
    .k-hero { padding: var(--k-s8) 0 var(--k-s7); }
    .k-hero__sub { max-width: 60ch; }
    .k-hero__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .k-hero__facts li { grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--k-s2); padding: var(--k-s3); }
    .k-hero__fact-ico { width: 36px; height: 36px; font-size: 15px; }

    .k-shop { grid-template-columns: 232px minmax(0, 1fr); gap: var(--k-s5); }
    .k-search { width: 208px; }
    .k-quicksearch__box { width: 176px; }
    .k-quicksearch__box:focus-within { width: 212px; }

    .k-item { gap: var(--k-s5); }
}

/* ==========================================================================
   ≤1080px：平板 —— 侧栏抽屉化 + 详情单列 + 吸底购买栏
   ========================================================================== */
@media (max-width: 1080px) {
    /* 分类侧栏 → 左侧抽屉 */
    .k-shop { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .k-side {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        z-index: var(--k-z-drawer);
        width: 84%; max-width: 320px;
        max-height: none;
        border: 0; border-right: 1px solid var(--k-line);
        border-radius: 0;
        box-shadow: var(--k-sh-4);
        transform: translateX(-104%);
        transition: transform var(--k-d3) var(--k-ease-out);
        will-change: transform;
    }
    .k-side.is-open { transform: translateX(0); }
    .k-side__close { display: inline-grid; }
    .k-side__body { padding: var(--k-s3) var(--k-s3) var(--k-s8); }
    .k-side-open { display: inline-flex; }

    body.k-drawer-open { overflow: hidden; }

    /* 商品详情 → 单列 */
    .k-item { grid-template-columns: minmax(0, 1fr); }
    .k-item__media { max-width: 640px; margin: 0 auto; width: 100%; }

    /* 吸底购买栏 */
    .k-buybar:not([hidden]) {
        display: flex; align-items: center; gap: var(--k-s4);
        position: fixed; left: 0; right: 0; bottom: 0;
        z-index: calc(var(--k-z-top) + 3);
        padding: 10px var(--k-s4) calc(10px + env(safe-area-inset-bottom, 0px));
        background: color-mix(in srgb, var(--k-surface) 92%, transparent);
        -webkit-backdrop-filter: saturate(1.6) blur(16px);
        backdrop-filter: saturate(1.6) blur(16px);
        border-top: 1px solid var(--k-line);
        box-shadow: 0 -6px 24px rgba(19, 21, 26, .08);
        animation: k-buybar-in var(--k-d3) var(--k-ease-out);
    }
    .k-buybar__price { flex: none; }
    .k-buybar .k-btn--block { flex: 1 1 auto; width: auto; }
    @keyframes k-buybar-in { from { transform: translateY(102%); } to { transform: translateY(0); } }

    /* 有吸底栏时给页面留出空间，避免遮住页脚 */
    .k-main--item { padding-bottom: 92px; }
    .k-svc { display: none; } /* 详情页移动端已有吸底栏，避免两个悬浮层打架 */
}

/* ==========================================================================
   ≤1024px：顶部导航抽屉化
   ========================================================================== */
@media (max-width: 1024px) {
    .k-burger { display: inline-flex; }

    .k-nav {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        z-index: var(--k-z-drawer);
        width: 84%; max-width: 336px;
        display: flex; flex-direction: column;
        align-items: stretch;
        padding: var(--k-s4) var(--k-s4) var(--k-s8);
        background: var(--k-surface);
        border-right: 1px solid var(--k-line);
        box-shadow: var(--k-sh-4);
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(-104%);
        transition: transform var(--k-d3) var(--k-ease-out);
        will-change: transform;
    }
    .k-nav.is-open { transform: translateX(0); }

    .k-nav__head {
        display: flex; align-items: center; justify-content: space-between;
        padding-bottom: var(--k-s3); margin-bottom: var(--k-s3);
        border-bottom: 1px solid var(--k-line);
    }
    .k-nav__head-title {
        font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
        color: var(--k-ink-4); font-family: var(--k-mono);
    }
    .k-nav__close {
        width: 34px; height: 34px; display: grid; place-items: center;
        border: 1px solid var(--k-line); background: none; cursor: pointer;
        border-radius: var(--k-r-sm); color: var(--k-ink-3); font-size: 14px;
    }
    .k-nav__close:hover { background: var(--k-surface-3); color: var(--k-ink); }

    .k-nav__list { flex-direction: column; align-items: stretch; gap: 3px; }
    .k-nav__link { padding: 12px var(--k-s3); font-size: 15px; }
    .k-nav__ico { font-size: 16px; }

    /* 抽屉里不需要宽搜索框（页内已有目录搜索） */
    .k-quicksearch { display: none; }
    .k-top__inner { gap: var(--k-s3); }
}

/* ==========================================================================
   ≤900px：订单结果 / 信任区 / 横排信息降级
   ========================================================================== */
@media (max-width: 900px) {
    .k-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .order-header { flex-direction: column; align-items: stretch; gap: var(--k-s3); }
    .order-right { justify-content: flex-start; }
    .order-amount { align-items: flex-start; }

    .k-results__head { flex-direction: column; align-items: flex-start; gap: 2px; }

    .k-hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .k-hero__facts li:last-child { grid-column: 1 / -1; }
}

/* ==========================================================================
   ≤720px：手机
   ========================================================================== */
@media (max-width: 720px) {
    :root { --k-top-h: 60px; --k-wrap: 100%; }

    .k-wrap { padding: 0 var(--k-s4); }
    .k-main { padding: var(--k-s6) 0 var(--k-s8); }
    .k-main--item { padding-top: var(--k-s5); }
    .k-hero { padding: var(--k-s7) 0 var(--k-s6); }
    .k-hero::before { background-size: 32px 32px; }
    .k-hero__title { font-size: clamp(24px, 7vw, 30px); }
    .k-hero__facts { grid-template-columns: minmax(0, 1fr); gap: var(--k-s2); }
    .k-hero__facts li:last-child { grid-column: auto; }
    .k-hero__cta { width: 100%; }
    .k-hero__cta .k-btn { flex: 1 1 auto; }

    .k-catalog__bar { padding: var(--k-s2) 0; gap: var(--k-s3); }
    .k-catalog__title { font-size: 16px; }
    .k-catalog__tools { width: 100%; justify-content: space-between; }
    .k-search { flex: 1 1 auto; width: auto; min-width: 0; }

    /* 列表卡片在手机上改用「单列信息流」，避免价格列被挤没 */
    .item-list[data-view="list"] .acg-card { padding: var(--k-s2); gap: var(--k-s3); }
    .item-list[data-view="list"] .acg-thumb { width: 80px; height: 80px; }
    .item-list[data-view="list"] .acg-body {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 3px;
    }
    .item-list[data-view="list"] .goods-title { font-size: 14px; }
    .item-list[data-view="list"] .acg-body .price { font-size: 18px; }
    .item-list[data-view="list"] .stat-bottom { font-size: 11.5px; }

    .item-list[data-view="grid"] { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: var(--k-s3); }
    .item-list[data-view="grid"] .acg-body { padding: var(--k-s2) var(--k-s2) var(--k-s3); gap: 5px; }
    .item-list[data-view="grid"] .goods-title { font-size: 13.5px; }
    .item-list[data-view="grid"] .acg-body .price { font-size: 17px; }

    /* 详情页 */
    .k-gallery { border-radius: var(--k-r-md); }
    .k-gallery__hint { display: none; }
    .k-item__title { font-size: 19px; }
    .k-price { padding: var(--k-s3) var(--k-s4); }
    .k-desc .k-panel__body { padding: var(--k-s4); }
    .k-prose { font-size: 14px; }
    .k-prose .feature-list > li, .k-prose .info-list > li { padding: var(--k-s3) var(--k-s3) var(--k-s3) 36px; }
    .pay-list { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
    .k-loginneed { flex-direction: column; align-items: stretch; }
    .k-loginneed .k-btn { width: 100%; }

    /* 查询页 */
    .k-query .k-panel__body { padding: var(--k-s4); }
    .k-query__combo { flex-direction: column; align-items: stretch; }
    .k-query__ico { top: 24px; }
    .k-query__input { padding-left: 42px; }
    .k-query__combo .btn-search-query { width: 100%; }

    .goods-section { flex-direction: column; align-items: flex-start; }
    .card-header, .card-password-section, .card-content-no-password, .card-content { padding-left: var(--k-s4); padding-right: var(--k-s4); }

    .k-foot__inner { grid-template-columns: minmax(0, 1fr); gap: var(--k-s6); }
    .k-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .k-lightbox img { max-height: 74vh; border-radius: var(--k-r-sm); }

    /* 触屏下取消 hover 位移，避免「点完还在飘」 */
    .item-card-cell:hover .acg-card,
    .k-hero__facts li:hover,
    .sticker-btn:hover,
    .pay-list .pay:hover { transform: none; }
}

/* ==========================================================================
   ≤560px：小屏手机
   ========================================================================== */
@media (max-width: 560px) {
    .k-brand__mark { width: 34px; height: 34px; }
    .k-brand__name { font-size: 15.5px; max-width: 128px; }
    .k-brand__tag { display: none; }
    .k-top__inner { gap: var(--k-s2); }
    .k-top__tools { gap: 6px; }
    .k-iconbtn { width: 36px; height: 36px; font-size: 14px; }
    .k-burger { width: 38px; height: 38px; }

    .k-authbtns .k-btn { padding: 0 12px; }
    .k-authbtns .k-btn--ghost { display: none; } /* 手机上只留主 CTA，登录走抽屉 */

    .k-trust__grid { grid-template-columns: minmax(0, 1fr); gap: var(--k-s4); }
    .k-trust { margin-top: var(--k-s7); padding: var(--k-s6) 0; }

    .k-item__badges .badge-soft { font-size: 11.5px; }
    .sku-list .sku { padding: 8px 12px; font-size: 13px; }
    .qty-group { width: 100%; }
    .qty-group .form-control { flex: 1 1 auto; width: auto; }

    .wholesale-table { font-size: 12px; }
    .wholesale-table > thead > tr > th,
    .wholesale-table > tbody > tr > td { padding: 7px 10px; }

    .k-captcha .captcha-img { width: 104px; }

    .password-form .input-group { flex-direction: column; }
    .password-form .view-card-btn { width: 100%; justify-content: center; }

    .k-foot__cols { grid-template-columns: minmax(0, 1fr); gap: var(--k-s5); }
    .k-totop { right: var(--k-s4); bottom: var(--k-s4); }
    .k-svc { right: var(--k-s4); }
    .k-toast { left: var(--k-s4); right: var(--k-s4); transform: translateY(20px); max-width: none; }
    .k-toast.is-on { transform: translateY(0); }

    .k-notice-modal { padding: var(--k-s3); }
    .k-notice-modal__head, .k-notice-modal__body, .k-notice-modal__foot { padding-left: var(--k-s4); padding-right: var(--k-s4); }
    .k-notice-modal__foot .k-btn { flex: 1 1 auto; }
}

/* ==========================================================================
   ≤400px：极窄
   ========================================================================== */
@media (max-width: 400px) {
    .k-wrap { padding: 0 var(--k-s3); }
    .item-list[data-view="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .k-price { flex-wrap: wrap; }
    .k-price .price, .k-price.abacus .price { font-size: 24px; }
    .k-buybar__value { font-size: 18px; }
    .k-catalog__heading { flex-wrap: wrap; }
}

/* ==========================================================================
   横屏矮视口：抽屉与侧栏的最大高度保护
   ========================================================================== */
@media (max-height: 520px) and (orientation: landscape) {
    .k-side { max-height: none; }
    .k-nav, .k-side { padding-bottom: var(--k-s5); }
}

/* ==========================================================================
   触摸设备：去掉悬停位移 / 扩大点按热区
   ========================================================================== */
@media (hover: none), (pointer: coarse) {
    .item-card-cell:hover .acg-card,
    .k-hero__facts li:hover,
    .sticker-btn:hover,
    .pay-list .pay:hover,
    .k-trust__item:hover { transform: none; }
    .k-gallery:hover .k-gallery__hint { opacity: 0; }
    .k-tree__item, .k-node__toggle { min-height: 40px; }
    .k-pop__item { min-height: 42px; }
    .k-viewtoggle__btn { width: 34px; height: 32px; }
}

/* ==========================================================================
   动效可达性
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .k-reveal { opacity: 1 !important; transform: none !important; }
    .k-gallery__zoom:hover img { transform: none; }
    .k-buybar:not([hidden]) { animation: none; }
}

/* ==========================================================================
   高对比模式（Windows 强制色）
   ========================================================================== */
@media (forced-colors: active) {
    .acg-card, .k-panel, .k-side, .k-nav, .order-item { border: 1px solid CanvasText; }
    .k-skel { display: none; }
    .k-tree__item.is-active, .sku-list .sku.is-primary { outline: 2px solid Highlight; }
}

/* ==========================================================================
   打印（详情页/订单结果可打印留存）
   ========================================================================== */
@media print {
    .k-side, .k-search, .k-viewtoggle, .k-sort, .k-catalog__bar,
    .k-gallery__hint, .k-buybar, .k-trust, .k-hero__cta, .cash-pay { display: none !important; }
    .k-item { grid-template-columns: 1fr; }
    .k-item__media { max-width: 320px; }
    .k-price { background: none; border: 0; padding: 0; }
    .item-card-cell:hover .acg-card { transform: none; box-shadow: none; }
    .order-item { break-inside: avoid; box-shadow: none; }
    .card-display { max-height: none; overflow: visible; }
    a[href]::after { content: ""; }
}
