/* macOS-inspired storefront. All rules stay inside the local homepage plugin. */
body.sh-home.sh-macos {
    --sh-ink: #1d1d1f;
    --sh-secondary: #6e6e73;
    --sh-line: rgba(60, 67, 85, .1);
    --sh-blue: #0071e3;
    --sh-silver: #f5f5f7;
    --sh-window: rgba(255, 255, 255, .9);
    background: radial-gradient(ellipse at 4% 8%, #dce6f680, transparent 48%),
        radial-gradient(ellipse at 97% 80%, #e7dff580, transparent 48%),
        #edf0f5 !important;
    color: var(--sh-ink);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
}

.sh-home.sh-macos .uc-topbar { padding: 24px 24px 0; }
.sh-home.sh-macos .uc-topbar__inner { max-width: 1280px; }
.sh-home.sh-macos .shop-nav {
    min-height: 64px;
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, .85);
    background: rgba(255, 255, 255, .58);
    backdrop-filter: blur(28px) saturate(140%);
    -webkit-backdrop-filter: blur(28px) saturate(140%);
    box-shadow: 0 2px 4px #29344705, 0 8px 30px #29344708, inset 0 1px 0 #fff;
}
.sh-home.sh-macos .shop-brand img { width: 36px; height: 36px; }
.sh-home.sh-macos .shop-brand__name { font-size: 14px; letter-spacing: -.35px; }
.sh-home.sh-macos .shop-nav__list { gap: 3px; }
.sh-home.sh-macos .shop-nav__item { font-size: 12px; font-weight: 500; color: #666a74; padding: 9px 14px; }
.sh-home.sh-macos .shop-nav__item.active {
    background: #ffffffdb;
    color: #252932;
    box-shadow: 0 1px 3px #1d24321a, 0 0 0 1px #e0e3e63d;
}
.sh-home.sh-macos .shop-auth .shop-btn--primary { background: #1d1d1f; }
.sh-home.sh-macos .shop-auth .shop-btn--ghost { background: transparent; border-color: #d3d7df; }

.sh-home.sh-macos main.container {
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 0;
    max-width: 1280px;
    width: calc(100% - 48px);
    margin: 30px auto 70px;
    padding: 0 !important; /* Override the original Bootstrap py-4 utility on main. */
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 20px;
    background: var(--sh-window);
    box-shadow: 0 0 0 1px #58637b0b, 0 4px 8px #27395206,
        0 24px 60px -20px #35466638, 0 50px 100px -60px #34435e38;
    isolation: isolate;
}
.sh-home.sh-macos .sh-window-toolbar {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) 110px;
    align-items: center;
    min-height: 48px;
    padding: 0 22px;
    border-bottom: 1px solid var(--sh-line);
    border-radius: 20px 20px 0 0;
    background: linear-gradient(#fcfcfdd9, #f1f3f6d9);
    box-shadow: inset 0 1px 0 #fff;
}
.sh-home.sh-macos main.container { grid-template-rows: 48px minmax(0, 1fr); overflow-anchor: none; }
.sh-home.sh-macos main.container.sh-resizing { overflow: hidden; }
.sh-home.sh-macos .sh-window-lights { display: flex; align-items: center; gap: 8px; }
.sh-home.sh-macos .sh-window-lights i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid #0000000d; }
.sh-home.sh-macos .sh-window-lights i:nth-child(1) { background: #ff6258; }
.sh-home.sh-macos .sh-window-lights i:nth-child(2) { background: #ffbf2f; }
.sh-home.sh-macos .sh-window-lights i:nth-child(3) { background: #2acb42; }
.sh-home.sh-macos .sh-window-title { text-align: center; font-size: 11px; font-weight: 600; color: #6b7180; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sh-home.sh-macos .sh-window-count { text-align: right; font-size: 10px; color: #8b909b; font-variant-numeric: tabular-nums; }
.sh-home.sh-macos .sh-sidebar {
    position: static;
    align-self: stretch;
    border: 0;
    border-right: 1px solid var(--sh-line);
    border-radius: 0 0 0 20px;
    background: linear-gradient(145deg, #f3f5f9eb, #eef0f6c7);
    box-shadow: inset 1px 0 0 #fff;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}
.sh-home.sh-macos .sh-section-header { min-height: 0; padding: 28px 24px 14px; border: 0; }
.sh-home.sh-macos .sh-section-header .sh-eyebrow { display: none; }
.sh-home.sh-macos .sh-section-header h2 { color: #9095a1; font-size: 11px; font-weight: 650; letter-spacing: .6px; }
.sh-home.sh-macos .sh-category-body { padding: 0 12px 26px; }
.sh-home.sh-macos .chip-list { gap: 4px; }
.sh-home.sh-macos .switch-category.chip {
    gap: 10px;
    padding: 9px 12px;
    min-height: 43px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #565d6b;
    font-size: 12px;
    transition: background .16s, box-shadow .16s;
}
.sh-home.sh-macos .switch-category.chip:hover { background: #ffffff80; }
.sh-home.sh-macos .switch-category.chip.is-primary {
    color: #fff;
    background: linear-gradient(180deg, #2088f3, #0876e6);
    border-color: #0873df;
    box-shadow: 0 2px 5px #0071e31f, inset 0 1px 0 #ffffff26;
}
.sh-home.sh-macos .chip-icon { width: 23px; height: 23px; flex-basis: 23px; border: 0; background-color: #fff; box-shadow: 0 1px 3px #2c364316; }
.sh-home.sh-macos .sh-category-symbol { font-size: 13px; }
.sh-home.sh-macos .sh-category-count { min-width: 22px; height: 22px; font-size: 10px; background: #dce0e85c; color: #737c8c; }
.sh-home.sh-macos .is-primary .sh-category-count { background: #ffffff2e; color: #fff; }
.sh-home.sh-macos .sh-catalog {
    min-width: 0;
    border: 0;
    border-radius: 0 0 20px 0;
    background: #ffffffed;
    box-shadow: none;
}
.sh-home.sh-macos .sh-catalog > .panel-header { min-height: 120px; padding: 29px 30px 25px; border: 0; }
.sh-home.sh-macos .sh-catalog .sh-eyebrow { display: none; }
.sh-home.sh-macos .sh-catalog-title { font-size: 26px; line-height: 1.25; letter-spacing: -.8px; font-weight: 650; }
.sh-home.sh-macos .sh-catalog-meta { margin: 7px 0 0; color: #747b88; font-size: 11px; line-height: 1.4; }
.sh-home.sh-macos .shop-search { width: 282px; }
.sh-home.sh-macos .shop-search__box { min-height: 38px; padding: 4px 4px 4px 12px; border-radius: 11px; border-color: #e4e7ed; background: #f6f7fa; gap: 8px; }
.sh-home.sh-macos .shop-search__box > i { color: #8c929f; font-size: 12px; }
.sh-home.sh-macos .shop-search input { font-size: 11px; }
.sh-home.sh-macos .sh-search-button { border-radius: 7px; padding: 6px 12px; font-size: 11px; background: #fff; color: #596272; box-shadow: 0 1px 3px #27394e1a, 0 0 0 1px #27394e08; }
.sh-home.sh-macos .sh-catalog > .panel-body { padding: 0 24px 24px; }
.sh-home.sh-macos .sh-table-head { min-height: 36px; background: #f6f7fa; border: 0; border-radius: 8px; color: #8f95a1; font-size: 10px; padding: 0 14px; }
.sh-home.sh-macos .item-list { border: 0; border-radius: 0 0 12px 12px; background: transparent; }
.sh-home.sh-macos .item-card-cell + .item-card-cell { border-color: #eef0f4; }
.sh-home.sh-macos .acg-card { min-height: 94px; padding: 18px 14px; border-radius: 10px; transition: background .16s; }
.sh-home.sh-macos .item-card-cell:hover .acg-card { background: #f6f8fc; }
.sh-home.sh-macos .acg-thumb { border-radius: 11px; box-shadow: 0 0 0 1px #22222206, 0 2px 5px #2732480b; }
.sh-home.sh-macos .goods-title { font-weight: 550; font-size: 13px; line-height: 1.55; color: #333944; letter-spacing: -.1px; }
.sh-home.sh-macos .tags { gap: 5px; margin-top: 1px; }
.sh-home.sh-macos .badge-soft, .sh-home.sh-macos .acg-tag { font-size: 10px; padding: 1px 6px; font-weight: 500; border: 0; }
.sh-home.sh-macos .badge-soft-success { background: #eaf4ed; color: #438965; }
.sh-home.sh-macos .badge-soft-primary { background: #eef3fc; color: #5688bd; }
.sh-home.sh-macos .price { font-size: 14px; font-weight: 600; color: #272d37; font-variant-numeric: tabular-nums; letter-spacing: -.2px; }
.sh-home.sh-macos .price .unit { color: #69707e; font-size: 11px; font-weight: 400; }
.sh-home.sh-macos .stat-bottom { font-size: 11px; color: #747b88; font-variant-numeric: tabular-nums; }
.sh-home.sh-macos .sh-buy { padding: 7px 14px; border-radius: 20px; background: var(--sh-blue); color: #fff; font-size: 11px; font-weight: 500; box-shadow: 0 1px 2px #0071e31a; }
.sh-home.sh-macos .sh-buy i { font-size: 10px; }
.sh-home.sh-macos .soldout .sh-buy { background: #f0f1f5; color: #969cab; box-shadow: none; }
.sh-home.sh-macos #read-notice-reopen { background: #ffffffb3; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-color: #fff; box-shadow: 0 3px 14px #2838500d; font-size: 12px; color: #6d7584; }
.sh-home.sh-macos :is(a,button,input):focus-visible { outline-color: #007aff80; outline-width: 3px; }

/* Immediate press feedback, without waiting for navigation or a request. */
.sh-home.sh-macos .switch-category.chip,
.sh-home.sh-macos .sh-search-button,
.sh-home.sh-macos .sh-buy {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background .16s, box-shadow .16s, transform .1s ease-out;
}
.sh-home.sh-macos .switch-category.chip:active,
.sh-home.sh-macos .sh-search-button:active { transform: scale(.98); }
.sh-home.sh-macos .item-card-cell:not(:has(.soldout)):active .sh-buy { transform: scale(.96); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sh-home.sh-macos .shop-nav,
    .sh-home.sh-macos #read-notice-reopen { background: #fff; }
}
@media (prefers-reduced-transparency: reduce) {
    .sh-home.sh-macos .shop-nav,
    .sh-home.sh-macos main.container,
    .sh-home.sh-macos .sh-catalog,
    .sh-home.sh-macos #read-notice-reopen { background: #fff; }
    .sh-home.sh-macos .sh-sidebar { background: #f0f2f6; }
    .sh-home.sh-macos .sh-window-toolbar { background: #f5f6f8; }
    .sh-home.sh-macos .shop-nav,
    .sh-home.sh-macos .sh-sidebar,
    .sh-home.sh-macos #read-notice-reopen { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
    .sh-home.sh-macos { --sh-line: #9198a4; }
    .sh-home.sh-macos .shop-nav,
    .sh-home.sh-macos main.container { background: #fff; border-color: #9198a4; }
    .sh-home.sh-macos .shop-nav__item,
    .sh-home.sh-macos .sh-section-header h2,
    .sh-home.sh-macos .sh-window-title,
    .sh-home.sh-macos .sh-window-count,
    .sh-home.sh-macos .sh-catalog-meta,
    .sh-home.sh-macos .sh-table-head,
    .sh-home.sh-macos .stat-bottom { color: #424b5b; }
    .sh-home.sh-macos .sh-category-count { color: #424b5b; }
    .sh-home.sh-macos .is-primary .sh-category-count { color: #fff; }
    .sh-home.sh-macos .soldout .sh-buy { color: #525c6d; }
    .sh-home.sh-macos :is(a,button,input):focus-visible { outline-color: #005bb5; }
}

@media (max-width: 1100px) {
    .sh-home.sh-macos main.container { grid-template-columns: 218px minmax(0, 1fr); }
    .sh-home.sh-macos .sh-catalog > .panel-header { padding: 24px; }
    .sh-home.sh-macos .shop-search { width: 245px; }
}
@media (max-width: 1000px) {
    .sh-home.sh-macos .sh-catalog > .panel-header { flex-direction: row; align-items: center; }
    .sh-home.sh-macos .sh-catalog > .panel-body { padding: 0 14px 18px; }
    .sh-home.sh-macos .acg-card { padding: 16px 12px; }
    .sh-home.sh-macos .shop-search { width: 210px; }
}
@media (max-width: 800px) {
    .sh-home.sh-macos main.container { grid-template-columns: 190px minmax(0, 1fr); }
    .sh-home.sh-macos .sh-category-body { padding-left: 8px; padding-right: 8px; }
    .sh-home.sh-macos .sh-catalog > .panel-header { flex-direction: column; align-items: stretch; gap: 18px; }
    .sh-home.sh-macos .shop-search { width: 100%; }
}
@media (max-width: 700px) {
    .sh-home.sh-macos .uc-topbar { padding: 12px 12px 0; }
    .sh-home.sh-macos .shop-nav { padding: 8px 12px; min-height: 57px; }
    .sh-home.sh-macos .shop-icon-btn,
    .sh-home.sh-macos .shop-burger { min-width: 44px; min-height: 44px; }
    .sh-home.sh-macos .shop-brand img { width: 30px; height: 30px; }
    .sh-home.sh-macos .shop-brand__name { font-size: 12px; }
    .sh-home.sh-macos main.container { display: flex; width: calc(100% - 24px); gap: 0; margin: 20px 12px 70px; border-radius: 17px; }
    .sh-home.sh-macos main.container > * { flex-shrink: 0; }
    .sh-home.sh-macos .sh-window-toolbar { width: 100%; min-height: 42px; padding: 0 15px; grid-template-columns: 55px minmax(0,1fr) 55px; border-radius: 17px 17px 0 0; }
    .sh-home.sh-macos .sh-window-lights { gap: 5px; }
    .sh-home.sh-macos .sh-window-lights i { width: 8px; height: 8px; }
    .sh-home.sh-macos .sh-window-title { font-size: 10px; }
    .sh-home.sh-macos .sh-window-count { font-size: 9px; }
    .sh-home.sh-macos .sh-sidebar { border: 0; border-bottom: 1px solid var(--sh-line); border-radius: 0; box-shadow: none; }
    .sh-home.sh-macos .sh-section-header { display: none; }
    .sh-home.sh-macos .sh-category-body { padding: 12px 10px; }
    .sh-home.sh-macos .chip-list { gap: 7px; }
    .sh-home.sh-macos .switch-category.chip { min-width: 115px; min-height: 44px; border-radius: 8px; font-size: 11px; padding: 6px 9px; gap: 7px; }
    .sh-home.sh-macos .chip-icon { width: 21px; height: 21px; flex-basis: 21px; }
    .sh-home.sh-macos .sh-category-count { min-width: 20px; height: 20px; font-size: 9px; }
    .sh-home.sh-macos .sh-catalog { border-radius: 0 0 17px 17px; }
    .sh-home.sh-macos .sh-catalog > .panel-header { padding: 22px 18px 19px; gap: 17px; }
    .sh-home.sh-macos .shop-search__box { min-height: 52px; }
    .sh-home.sh-macos .sh-search-button { min-width: 56px; min-height: 44px; }
    .sh-home.sh-macos #read-notice-reopen { min-height: 44px; min-width: 88px; }
    .sh-home.sh-macos .sh-catalog-title { font-size: 24px; }
    .sh-home.sh-macos .sh-catalog > .panel-body { padding: 0 10px 12px; }
    .sh-home.sh-macos .sh-table-head { min-height: 33px; }
    .sh-home.sh-macos .acg-card { min-height: 108px; padding: 14px 9px; }
    .sh-home.sh-macos .goods-title { font-size: 12px; }
    .sh-home.sh-macos .sh-buy { padding: 7px 12px; font-size: 10px; }
    .sh-home.sh-macos .sh-catalog-meta { font-size: 10px; margin-top: 5px; }
}
@media (prefers-reduced-motion: reduce) {
    .sh-home.sh-macos * { transition: none !important; }
    .sh-home.sh-macos .switch-category.chip:active,
    .sh-home.sh-macos .sh-search-button:active,
    .sh-home.sh-macos .item-card-cell:not(:has(.soldout)):active .sh-buy { transform: none; }
}
