/* Qingniao redesign: Swiss editorial storefront + operations console. */
:root {
  --ink: #111214;
  --ink-soft: #37383d;
  --muted: #70727a;
  --muted-soft: #a2a4ab;
  --line: #e6e6e3;
  --line-soft: #f0f0ed;
  --bg: #f7f7f4;
  --paper: #ffffff;
  --blue: #1e56e8;
  --blue-hover: #1746c3;
  --blue-wash: #eef3ff;
  --blue-line: #c9d6ff;
  --green: #15754f;
  --green-wash: #edf8f2;
  --amber: #9b5a08;
  --amber-wash: #fff6e7;
  --red: #b42318;
  --red-wash: #fff0ef;
  --violet: #7249c6;
  --font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
  --r-sm: 5px;
  --r: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --shadow-sm: 0 1px 2px rgba(17, 18, 20, .04);
  --shadow: 0 8px 24px rgba(17, 18, 20, .06);
  --shadow-lg: 0 20px 52px rgba(17, 18, 20, .14);
  --sidebar-w: 248px;
  --header-h: 68px;
  --max-w: 1360px;
}

:root,
html,
body {
  color-scheme: only light;
}

html { scroll-behavior: auto; }
body { background: var(--bg); color: var(--ink); font-family: var(--font); }
h1, h2, h3, h4 { letter-spacing: 0; color: var(--ink); }
button, a, .pay-option, .mode-choice, .shop-nav-link, .product-buy-button, .dark-button, .outline-button, .round-button, .cart-button, .login-link {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button { cursor: pointer; }
:focus-visible { outline: 3px solid rgba(30, 86, 232, .35); outline-offset: 2px; }

/* The storefront stays usable while API data is loading. */
.storefront-loading { overflow: auto; }
.storefront-loading > .shop-header,
.storefront-loading > main,
.storefront-loading > .shop-footer,
.storefront-loading > .modal-layer,
.storefront-loading > .toast { visibility: visible; }
.storefront-loader { position: fixed; z-index: 130; inset: var(--header-h) 0 auto; height: 3px; display: block; overflow: hidden; background: transparent; pointer-events: none; }
.storefront-loader > span { display: block; width: 32%; height: 100%; margin: 0; border: 0; border-radius: 0 4px 4px 0; background: var(--blue); animation: loading-slide 1.15s ease-in-out infinite; }
@keyframes loading-slide { 0% { transform: translateX(-110%); } 55% { transform: translateX(190%); } 100% { transform: translateX(340%); } }

/* Storefront */
.shop-body { padding-top: var(--header-h); background: var(--bg); }
.shop-header { height: var(--header-h); padding: 0 clamp(18px, 4vw, 56px); gap: 30px; background: #f7f7f4; border-bottom: 1px solid var(--line); box-shadow: none; }
.shop-logo { gap: 10px; color: var(--ink); font-weight: 800; letter-spacing: -.02em; }
.shop-logo small { display: block; margin-top: -1px; color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: .03em; }
.logo-glyph { width: 34px; height: 34px; border-radius: 9px; background: var(--ink); }
.logo-glyph img { width: 22px; height: 22px; object-fit: contain; filter: grayscale(1) brightness(0) invert(1); }
.shop-nav { gap: 4px; }
.shop-nav-link { min-height: 40px; padding: 0 13px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 650; }
.shop-nav-link:hover { background: #ecece8; color: var(--ink); }
.shop-nav-link.active { background: var(--ink); color: #fff; box-shadow: none; }
.header-tools { gap: 8px; }
.round-button, .cart-button { width: 38px; height: 38px; border-color: var(--line); border-radius: 7px; background: var(--paper); color: var(--ink-soft); }
.round-button:hover, .cart-button:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.cart-button > span { border-color: var(--bg); background: var(--blue); }
.login-link { min-height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); color: var(--ink-soft); font-size: 12px; font-weight: 650; }
.login-link:hover { border-color: var(--ink); color: var(--ink); }

@media (min-width: 901px) {
  .shop-body .shop-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 24px;
  }
  .shop-body .shop-logo { justify-self: start; }
  .shop-body .shop-nav { justify-self: center; margin: 0; }
  .shop-body .header-tools { justify-self: end; }
}

.shop-body main { max-width: var(--max-w); margin: 0 auto; padding: 34px clamp(18px, 4vw, 56px) 70px; }
.shop-page.active { animation: none; }
.kicker { color: var(--muted); letter-spacing: .12em; font-size: 10px; }
.section-title, .catalog-head, .subpage-head { margin-bottom: 24px; }
.section-title h1, .section-title h2, .subpage-head h1, .catalog-head h1 { color: var(--ink); letter-spacing: -.025em; }
.section-title h1, .subpage-head h1, .catalog-head h1 { font-size: clamp(28px, 3vw, 42px); line-height: 1.15; }
.section-title p:not(.kicker), .subpage-head p:not(.kicker), .catalog-head p:not(.kicker) { max-width: 620px; margin-top: 9px; color: var(--muted); font-size: 14px; }
.text-button { min-height: 38px; padding: 0 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); color: var(--ink); font-size: 12px; }
.text-button:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

.store-notice { margin-bottom: 48px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-sm); }
.notice-unified { padding: 26px 28px 24px; }
.notice-unified-head { gap: 13px; }
.notice-unified-icon { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; background: var(--ink); color: #fff; }
.notice-unified-head h2 { font-size: 19px; }
.notice-unified-head > div > p:last-child { color: var(--muted); }
.notice-contact-actions { margin-top: 24px; }
.notice-contact-actions .contact-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.telegram-button, .qq-button { min-height: 62px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px; background: #fbfbf9; }
.telegram-button:hover, .qq-button:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.telegram-button small, .qq-button small { color: var(--muted); }
.telegram-button:hover small, .qq-button:hover small { color: #c8c8c5; }
.announcement-highlight, .announcement-note { border-radius: 8px; }
.announcement-highlight { margin-top: 18px; padding: 14px 16px; background: #f4f4f1; border: 1px solid var(--line); }
.announcement-note { margin-top: 8px; padding: 12px 16px; color: var(--muted); font-size: 12px; }

.home-section { margin-top: 50px; }
.category-grid, .store-product-grid, .hot-products { gap: 14px; }
.category-directory-card { min-height: 82px; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); box-shadow: none; }
.category-directory-card:hover { border-color: var(--ink); background: #fcfcfa; box-shadow: var(--shadow); }
.category-directory-card > img, .category-grid.large .category-directory-card > img { width: 42px; height: 42px; border-radius: 8px; }
.category-directory-copy { padding: 0; gap: 1px; }
.category-directory-copy b { color: var(--ink); font-size: 14px; }
.category-directory-copy small { display: block; max-width: 240px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.category-directory-copy em { margin-top: 2px; color: var(--blue); font-size: 10px; }
.category-enter { color: var(--muted-soft); }
.category-directory-card:hover .category-enter { color: var(--ink); }
.store-product-card { border: 1px solid var(--line); border-radius: 10px; background: var(--paper); box-shadow: none; overflow: hidden; }
.store-product-card:hover { border-color: var(--ink); box-shadow: var(--shadow); }
.product-visual { background: #ecece8; }
.product-visual img { mix-blend-mode: multiply; }
.delivery-badge { top: 10px; left: 10px; border-radius: 5px; background: var(--ink); color: #fff; font-size: 10px; }
.store-product-info { gap: 8px; padding: 15px 16px 16px; }
.store-product-category { color: var(--muted); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.store-product-name { min-height: 43px; color: var(--ink); font-size: 15px; line-height: 1.4; }
.store-product-name:hover { color: var(--blue); }
.store-product-description, .store-product-info > p { color: var(--muted); font-size: 12px; line-height: 1.55; }
.store-product-stats { gap: 12px; padding: 10px 0; border-top-color: var(--line-soft); }
.store-product-stats > span { padding: 0; border: 0; background: transparent; }
.store-product-stats small { color: var(--muted-soft); }
.store-product-stats b { color: var(--ink-soft); font-family: var(--mono); font-size: 12px; }
.store-product-footer { padding-top: 12px; border-top: 1px solid var(--line-soft); }
.store-product-footer small { color: var(--muted); }
.store-product-footer strong { color: var(--ink); font-family: var(--mono); font-size: 18px; }
.product-buy-button { min-height: 34px; padding: 0 10px; border: 1px solid var(--ink); border-radius: 6px; background: var(--ink); color: #fff; font-size: 11px; }
.product-buy-button:hover { border-color: var(--blue); background: var(--blue); }

.dark-button, .admin-primary { border-color: var(--ink); border-radius: 7px; background: var(--ink); box-shadow: none; }
.dark-button:hover:not(:disabled), .admin-primary:hover:not(:disabled) { border-color: var(--blue); background: var(--blue); }
.outline-button, .admin-outline { border-color: var(--line); border-radius: 7px; }
.outline-button:hover:not(:disabled), .admin-outline:hover:not(:disabled) { border-color: var(--ink); background: var(--ink); color: #fff; }
input, select, textarea { border-color: var(--line); border-radius: 7px; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash); }
.modal-layer { background: rgba(17,18,20,.42); backdrop-filter: none; }
.modal-card { border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); }
.toast { border-radius: 8px; background: var(--ink); }

/* Admin console */
.admin-body { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); background: var(--bg); }
.admin-sidebar { padding: 22px 14px 16px; background: var(--paper); border-right: 1px solid var(--line); }
.admin-sidebar > p { margin: 26px 10px 8px; color: var(--muted-soft); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.admin-nav { min-height: 42px; margin: 2px 0; padding: 0 11px; border-radius: 7px; color: var(--muted); font-size: 13px; }
.admin-nav:hover { background: #f0f0ed; color: var(--ink); }
.admin-nav.active { background: var(--ink); color: #fff; box-shadow: none; }
.admin-nav.active span { background: rgba(255,255,255,.16); color: #fff; }
.admin-side-bottom { border-top-color: var(--line); }
.admin-side-bottom a, .admin-side-bottom button { color: var(--muted); }
.admin-main { min-width: 0; background: var(--bg); }
.admin-top { height: var(--header-h); padding: 0 clamp(18px, 3vw, 42px); background: rgba(247,247,244,.94); border-bottom: 1px solid var(--line); }
.admin-top > div:first-of-type { color: var(--muted); font-size: 12px; }
.admin-top > div:first-of-type b { color: var(--ink); }
.admin-top > div:last-child a { color: var(--muted); font-size: 12px; }
.admin-page { max-width: 1500px; padding: 34px clamp(20px, 3vw, 46px) 70px; }
.admin-heading { margin-bottom: 28px; }
.admin-heading h1 { font-size: clamp(28px, 3vw, 38px); letter-spacing: -.02em; }
.admin-heading p:not(.kicker) { margin-top: 8px; color: var(--muted); }
.admin-metrics { gap: 12px; margin-bottom: 18px; }
.admin-metrics > article { padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); box-shadow: none; }
.admin-metrics > article::before { display: none; }
.admin-metrics > article span { color: var(--muted); font-size: 11px; }
.admin-metrics > article b { margin-top: 8px; color: var(--ink); font-family: var(--mono); font-size: 24px; }
.admin-metrics > article small { margin-top: 6px; color: var(--muted-soft); }
.admin-grid { gap: 16px; }
.admin-card, .table-card, .settings-card, .quick-actions-card, .stock-alert-card { border-color: var(--line); border-radius: 10px; box-shadow: none; }
.admin-card { padding: 20px; }
.admin-card-head { margin-bottom: 18px; }
.admin-card-head h2 { color: var(--ink); font-size: 16px; }
.admin-card-head p { color: var(--muted); }
.quick-actions button { border-color: var(--line); border-radius: 8px; background: #fbfbf9; }
.quick-actions button:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.admin-table-wrap { border-radius: 8px; }
thead th { background: #f1f1ee; color: var(--muted); }
tbody td { border-bottom-color: var(--line-soft); }
tbody tr:hover { background: #fbfbf9; }
.admin-tabs { border-bottom-color: var(--line); }
.admin-tabs button.active { border-bottom-color: var(--ink); color: var(--ink); }
.admin-info-band { border-color: var(--line); border-radius: 9px; background: #f1f1ee; }
.announcement-editor-form, .editor-panel, .inventory-import-card { border-radius: 10px; }
.admin-body .badge.ok { background: var(--green-wash); color: var(--green); }
.admin-body .badge.wait { background: var(--amber-wash); color: var(--amber); }

/* Auth pages */
.auth-body { background: var(--bg); }
.auth-shell { border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.auth-aside, .user-auth-aside { background: var(--ink); }
.auth-panel, .auth-form-wrap { background: var(--paper); }
.auth-tabs { background: #f1f1ee; }
.auth-tab.active { color: var(--ink); }

@media (max-width: 900px) {
  .shop-header { gap: 12px; }
  .shop-nav { margin-left: auto; }
  .shop-nav-link { padding: 0 9px; }
  .login-link { width: 38px; padding: 0; justify-content: center; font-size: 0; }
  .login-link svg { width: 17px; height: 17px; }
  .admin-body { grid-template-columns: 1fr; }
  .admin-sidebar { position: fixed; z-index: 80; width: min(286px, 86vw); transform: translateX(-100%); transition: transform .2s ease; }
  .admin-sidebar.open { transform: translateX(0); }
}
@media (max-width: 720px) {
  .shop-body main { padding: 24px 14px 50px; }
  .shop-header { padding: 0 14px; }
  .shop-logo > span:last-child { font-size: 13px; }
  .shop-nav-link { font-size: 12px; }
  .notice-unified { padding: 20px 16px; }
  .notice-contact-actions .contact-list { grid-template-columns: 1fr; }
  .section-title h1, .section-title h2, .subpage-head h1, .catalog-head h1 { font-size: 28px; }
  .category-grid, .category-grid.large, .store-product-grid, .hot-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .category-directory-card { grid-template-columns: 32px minmax(0, 1fr); min-height: 66px; padding: 9px; gap: 8px; }
  .category-directory-card > img, .category-grid.large .category-directory-card > img { width: 32px; height: 32px; }
  .category-directory-copy small, .category-enter { display: none; }
  .category-directory-copy b { font-size: 12px; }
  .store-product-info { padding: 10px; gap: 6px; }
  .store-product-name { min-height: 42px; font-size: 13px; }
  .store-product-description, .store-product-info > p { display: none; }
  .store-product-footer strong { font-size: 15px; }
  .product-buy-button { padding: 0 7px; font-size: 10px; }
  .admin-page { padding: 22px 14px 52px; }
  .admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Override the legacy dark storefront block, which uses body-scoped selectors. */
.shop-body {
  --ink: #111214;
  --ink-soft: #37383d;
  --muted: #70727a;
  --muted-soft: #a2a4ab;
  --line: #e6e6e3;
  --line-soft: #f0f0ed;
  --bg: #f7f7f4;
  --bg-sunken: #f1f1ee;
  --paper: #ffffff;
  --blue: #1e56e8;
  --blue-hover: #1746c3;
  --blue-wash: #eef3ff;
  --blue-line: #c9d6ff;
  --green: #15754f;
  --green-wash: #edf8f2;
  --amber: #9b5a08;
  --amber-wash: #fff6e7;
  --red: #b42318;
  --red-wash: #fff0ef;
  --violet: #7249c6;
  --r-sm: 5px;
  --r: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  color-scheme: only light;
  background: var(--bg);
  background-image: none;
  font-size: 14px;
}
.shop-body .storefront-loader { inset: var(--header-h) 0 auto; height: 3px; background: transparent; }
.shop-body .storefront-loader > span { width: 32%; height: 3px; border: 0; border-radius: 0 4px 4px 0; background: var(--blue); }
.shop-body .shop-header { background: rgba(247,247,244,.94); border-bottom-color: var(--line); box-shadow: none; }
.shop-body .logo-glyph { border-radius: 9px; background: var(--ink); box-shadow: none; }
.shop-body .logo-glyph img { filter: grayscale(1) brightness(0) invert(1); }
.shop-body .shop-logo > span:last-child { color: var(--ink); font-size: 15px; }
.shop-body .shop-logo small { color: var(--muted); }
.shop-body .shop-nav-link { color: var(--muted); border-radius: 6px; font-size: 13px; }
.shop-body .shop-nav-link:hover { color: var(--ink); background: #ecece8; }
.shop-body .shop-nav-link.active { color: #fff; background: var(--ink); box-shadow: none; }
.shop-body .round-button,
.shop-body .cart-button,
.shop-body .login-link { color: var(--ink-soft); background: var(--paper); border-color: var(--line); }
.shop-body .round-button:hover,
.shop-body .cart-button:hover { color: #fff; background: var(--ink); border-color: var(--ink); }
.shop-body .login-link:hover { color: var(--ink); background: var(--paper); border-color: var(--ink); }
.shop-body .cart-button > span { border-color: var(--bg); background: var(--blue); }
.shop-body main { padding-top: 34px; }
.shop-body .kicker { color: var(--muted); font-weight: 650; }
.shop-body .section-title h1,
.shop-body .section-title h2,
.shop-body .subpage-head h1,
.shop-body .catalog-head h1 { color: var(--ink); }
.shop-body .section-title h1,
.shop-body .section-title h2 { font-size: clamp(28px, 3vw, 40px); }
.shop-body .section-title p,
.shop-body .catalog-head p,
.shop-body .subpage-head p { color: var(--muted); font-size: 14px; }
.shop-body .text-button { min-height: 38px; color: var(--ink); }
.shop-body .text-button:hover { color: #fff; }

.shop-body .store-notice { margin-bottom: 48px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: var(--shadow-sm); }
.shop-body .store-notice::before { height: 0; background: none; }
.shop-body .notice-unified { padding: 26px 28px 24px; }
.shop-body .notice-unified-icon { width: 38px; height: 38px; border: 0; border-radius: 8px; background: var(--ink); color: #fff; box-shadow: none; }
.shop-body .notice-unified-head h2 { color: var(--ink); font-size: 19px; }
.shop-body .notice-unified-head > div > p:last-child { color: var(--muted); }
.shop-body .notice-contact-actions .contact-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 24px 0 18px; padding: 0; }
.shop-body .notice-contact-actions .telegram-button,
.shop-body .notice-contact-actions .qq-button { min-height: 62px; justify-content: flex-start; padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px; background: #fbfbf9; }
.shop-body .notice-contact-actions .contact-list > * + * { border-left: 1px solid var(--line); }
.shop-body .notice-contact-actions .telegram-button:hover,
.shop-body .notice-contact-actions .qq-button[href]:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.shop-body .notice-contact-actions b { color: var(--ink); font-size: 13px; }
.shop-body .notice-contact-actions small { color: var(--muted); }
.shop-body .notice-contact-actions .telegram-button:hover b,
.shop-body .notice-contact-actions .qq-button:hover b { color: #fff; }
.shop-body .notice-contact-actions .telegram-button:hover small,
.shop-body .notice-contact-actions .qq-button:hover small { color: #c8c8c5; }
.shop-body .notice-unified .announcement-highlight { margin: 0; padding: 15px 16px; border: 1px solid var(--line); border-radius: 8px; background: #f4f4f1; color: var(--ink-soft); }
.shop-body .notice-unified .announcement-note { margin-top: 8px; padding: 12px 16px; border: 0; border-radius: 8px; background: #fbfbf9; color: var(--muted); }

.shop-body .category-grid,
.shop-body .category-grid.large { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.shop-body .category-directory-card { grid-template-columns: 42px minmax(0, 1fr) auto; min-height: 82px; padding: 12px; border-color: var(--line); border-radius: 9px; background: var(--paper); box-shadow: none; }
.shop-body .category-directory-card:nth-child(3n + 2),
.shop-body .category-directory-card:nth-child(3n) { border-color: var(--line); }
.shop-body .category-directory-card:hover { border-color: var(--ink); background: #fcfcfa; box-shadow: var(--shadow); }
.shop-body .category-directory-card > img,
.shop-body .category-grid.large .category-directory-card > img { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 8px; background: #f1f1ee; }
.shop-body .category-directory-copy,
.shop-body .category-grid.large .category-directory-copy { gap: 1px; padding: 0; }
.shop-body .category-directory-copy b,
.shop-body .category-grid.large .category-directory-copy b { color: var(--ink); font-size: 14px; }
.shop-body .category-directory-copy em { color: var(--blue); }
.shop-body .store-product-grid,
.shop-body .hot-products { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.shop-body .store-product-card,
.shop-body .store-product-card:nth-child(3n + 2),
.shop-body .store-product-card:nth-child(3n) { border-color: var(--line); border-radius: 10px; background: var(--paper); box-shadow: none; }
.shop-body .store-product-card:hover { border-color: var(--ink); box-shadow: var(--shadow); }
.shop-body .product-visual { border-bottom-color: var(--line); background: #ecece8; }
.shop-body .product-visual::after { display: none; }
.shop-body .product-visual img { mix-blend-mode: multiply; }
.shop-body .store-product-info { gap: 8px; padding: 15px 16px 16px; }
.shop-body .store-product-category { color: var(--muted); font-size: 10px; letter-spacing: .06em; }
.shop-body .store-product-name { min-height: 43px; color: var(--ink); font-size: 15px; font-weight: 650; line-height: 1.4; }
.shop-body .store-product-stats { gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.shop-body .store-product-stats > span,
.shop-body .store-product-stats > span:first-child { padding: 0; border: 0; border-radius: 0; background: transparent; }
.shop-body .store-product-stats small,
.shop-body .store-product-stats > span:nth-child(2) small { color: var(--muted-soft); }
.shop-body .store-product-stats b { color: var(--ink-soft); font: 600 12px/1.3 var(--mono); }
.shop-body .store-product-description,
.shop-body .store-product-info > p { min-height: 57px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.shop-body .store-product-footer { padding-top: 12px; border-top: 1px solid var(--line-soft); }
.shop-body .store-product-footer small { color: var(--muted); }
.shop-body .store-product-footer strong { color: var(--ink); font-size: 18px; }
.shop-body .delivery-badge,
.shop-body .delivery-badge.code,
.shop-body .delivery-badge.review,
.shop-body .delivery-badge.online { padding: 4px 8px; border: 0; border-radius: 5px; background: var(--ink); color: #fff; box-shadow: none; }
.shop-body .product-buy-button { width: 36px; height: 36px; border: 1px solid var(--ink); border-radius: 6px; background: var(--ink); color: #fff; box-shadow: none; }
.shop-body .product-buy-button:hover { border-color: var(--blue); background: var(--blue); }

.shop-body .catalog-filter,
.shop-body .detail-main,
.shop-body .purchase-panel,
.shop-body .checkout-block,
.shop-body .checkout-summary,
.shop-body .account-orders,
.shop-body .order-query,
.shop-body .sms-config,
.shop-body .sms-session { border-color: var(--line); border-radius: 10px; background: var(--paper); box-shadow: none; }
.shop-body .detail-info article,
.shop-body .filter-note,
.shop-body .query-result,
.shop-body .multi-order-line,
.shop-body .sms-cost { border-color: var(--line); background: #f7f7f4; }
.shop-body .mode-choice,
.shop-body .pay-option,
.shop-body .search-results button { border-color: var(--line); border-radius: 8px; background: var(--paper); }
.shop-body .mode-choice:hover,
.shop-body .pay-option:hover,
.shop-body .search-results button:hover { border-color: var(--ink); background: #f7f7f4; }
.shop-body .mode-choice.active,
.shop-body .pay-option.active { border-color: var(--blue); background: var(--blue-wash); }
.shop-body input,
.shop-body select,
.shop-body textarea { border-color: var(--line); background-color: var(--paper); color: var(--ink); }
.shop-body input:hover,
.shop-body select:hover,
.shop-body textarea:hover { border-color: var(--muted-soft); }
.shop-body input:focus,
.shop-body select:focus,
.shop-body textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash); }
.shop-body .dark-button { border-color: var(--ink); border-radius: 7px; background: var(--ink); box-shadow: none; }
.shop-body .dark-button:hover:not(:disabled) { border-color: var(--blue); background: var(--blue); }
.shop-body .outline-button { border-color: var(--line); border-radius: 7px; background: var(--paper); color: var(--ink); }
.shop-body .outline-button:hover:not(:disabled) { border-color: var(--ink); background: var(--ink); color: #fff; }
.shop-body .trust-row article { border-color: var(--line); border-radius: 9px; background: var(--paper); }
.shop-body .shop-footer { border-top-color: var(--line); background: var(--paper); }
.shop-body .shop-footer a { color: var(--blue); }
.shop-body .modal-layer { background: rgba(17,18,20,.42); backdrop-filter: none; }
.shop-body .modal-card { border-color: var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); }
.shop-body .modal-x { color: var(--muted); }
.shop-body .modal-x:hover { background: #f1f1ee; color: var(--ink); }
.shop-body .toast { background: var(--ink); color: #fff; }

/* Homepage entry notice: match store-notice paper cards, not leftover navy modal. */
.shop-body .modal-layer.entry-notice-open { background: rgba(17, 18, 20, .44); backdrop-filter: none; }
.shop-body .entry-notice-open .modal-card {
  width: min(440px, 100%);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.shop-body .entry-notice-open .modal-card::before {
  content: "";
  display: block;
  height: 3px;
  background: var(--ink);
}
.shop-body .entry-notice-open .modal-x {
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  color: var(--muted);
}
.shop-body .entry-notice-open .modal-x:hover { background: #f1f1ee; color: var(--ink); }
.shop-body .entry-notification-modal { display: grid; gap: 0; }
.shop-body .entry-notification-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 22px 48px 16px 22px;
  border-bottom: 1px solid var(--line);
}
.shop-body .entry-notification-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  box-shadow: none;
}
.shop-body .entry-notification-icon svg { width: 18px; height: 18px; }
.shop-body .entry-notification-head .kicker { margin: 0 0 3px; color: var(--muted); letter-spacing: .12em; font-size: 10px; font-weight: 650; }
.shop-body .entry-notification-head h2 { margin: 0; color: var(--ink); font-size: 18px; letter-spacing: -.02em; }
.shop-body .entry-notification-copy {
  margin: 16px 22px 0;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f4f4f1;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.75;
}
.shop-body .entry-notification-copy p { margin: 0; }
.shop-body .entry-notification-copy p + p { margin-top: 8px; }
.shop-body .entry-notification-copy ul,
.shop-body .entry-notification-copy ol { margin: 8px 0 0; padding-left: 18px; }
.shop-body .entry-notification-copy li { margin: 4px 0; }
.shop-body .entry-notification-copy a { color: var(--blue); }
.shop-body .entry-notification-copy strong { color: var(--ink); font-weight: 700; }
.shop-body .entry-notification-actions {
  margin: 0;
  padding: 16px 22px 20px;
}
.shop-body .entry-notification-actions .dark-button {
  min-height: 42px;
  border-radius: 7px;
  border-color: var(--ink);
  background: var(--ink);
  box-shadow: none;
}
.shop-body .entry-notification-actions .dark-button:hover:not(:disabled) {
  border-color: var(--blue);
  background: var(--blue);
}

@media (max-width: 720px) {
  .shop-body .shop-nav { border-top-color: var(--line); background: rgba(247,247,244,.97); backdrop-filter: none; }
  .shop-body .store-notice { border-radius: 10px; }
  .shop-body .notice-contact-actions .contact-list { grid-template-columns: 1fr; gap: 8px; }
  .shop-body .notice-contact-actions .contact-list > * + * { border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
  .shop-body .section-title h1,
  .shop-body .section-title h2 { font-size: 28px; }
  .shop-body .category-grid,
  .shop-body .category-grid.large { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .shop-body .category-directory-card { grid-template-columns: 32px minmax(0, 1fr); min-height: 66px; padding: 9px; }
  .shop-body .category-directory-card > img,
  .shop-body .category-grid.large .category-directory-card > img { width: 32px; height: 32px; }
  .shop-body .store-product-grid,
  .shop-body .hot-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .shop-body .store-product-card { border-radius: 9px; }
  .shop-body .store-product-info { padding: 10px; }
  .shop-body .store-product-name { font-size: 13px; }
  .shop-body .store-product-description,
  .shop-body .store-product-info > p { display: none; }
  .shop-body .entry-notice-open .modal-card { border-radius: 10px; }
  .shop-body .entry-notification-head { padding: 18px 42px 14px 16px; }
  .shop-body .entry-notification-copy { margin: 14px 16px 0; }
  .shop-body .entry-notification-actions { padding: 14px 16px 16px; }
}

/* Product directory: shared category rail for home, directory and catalog. */
.shop-body .marketplace-section { margin-top: 50px; }
.shop-body .marketplace-layout,
.shop-body .directory-layout {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.shop-body .marketplace-products,
.shop-body .directory-products { min-width: 0; }
.shop-body .category-sidebar {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  overflow: hidden;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.shop-body .category-sidebar-head,
.shop-body .catalog-filter-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.shop-body .category-sidebar-head { margin-bottom: 12px; padding: 2px 2px 12px; border-bottom: 1px solid var(--line-soft); }
.shop-body .category-sidebar-head .kicker { margin-bottom: 2px; }
.shop-body .category-sidebar-head h2 { font-size: 16px; }
.shop-body .category-sidebar-actions { display: flex; gap: 6px; }
.shop-body .category-sidebar-link,
.shop-body .category-mobile-toggle {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--muted);
}
.shop-body .category-sidebar-link:hover,
.shop-body .category-mobile-toggle:hover { border-color: var(--ink); color: var(--ink); }
.shop-body .category-mobile-toggle { display: none; }
.shop-body .category-side-list { display: grid; gap: 4px; }
.shop-body .category-side-item {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.shop-body .category-side-item:hover { border-color: var(--line); background: #f4f4f1; }
.shop-body .category-side-item.active { border-color: var(--ink); background: var(--ink); color: #fff; }
.shop-body .category-side-item img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}
.shop-body .category-side-item > span { min-width: 0; }
.shop-body .category-side-item b {
  display: block;
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shop-body .category-side-item small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; line-height: 1.3; }
.shop-body .category-side-item.active small { color: #bfc1c7; }
.shop-body .category-side-item > svg { width: 14px; height: 14px; color: var(--muted-soft); }
.shop-body .category-side-item.active > svg { color: #fff; }
.shop-body .marketplace-products .section-title,
.shop-body .directory-products .subpage-head { position: relative; }
.shop-body .product-total {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.shop-body .product-total b { color: var(--ink); font: 700 16px/1 var(--mono); }
.shop-body .directory-products .subpage-head { margin-bottom: 24px; }
.shop-body .directory-products .subpage-head .product-total { margin-top: 16px; }
.shop-body #hot-products,
.shop-body #category-page-products { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.shop-body #hot-products .store-product-card,
.shop-body #category-page-products .store-product-card { content-visibility: auto; contain-intrinsic-size: auto 430px; }

.shop-body .catalog-filter {
  top: calc(var(--header-h) + 20px);
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.shop-body .catalog-categories-block,
.shop-body .catalog-filter-block { display: grid; gap: 12px; padding: 15px; }
.shop-body .catalog-categories-block { border-bottom: 1px solid var(--line); }
.shop-body .catalog-filter > .catalog-categories-block { display: grid; }
.shop-body .catalog-filter-title h3 { font-size: 14px; }
.shop-body .catalog-filter-title #reset-filter { min-height: 32px; }
.shop-body .catalog-filter .category-side-item { min-height: 50px; grid-template-columns: 30px minmax(0, 1fr) 14px; padding: 6px; }
.shop-body .catalog-filter .category-side-item img { width: 30px; height: 30px; }
.shop-body .catalog-filter-block > label { margin-top: 2px; }

@media (max-width: 1040px) {
  .shop-body .marketplace-layout,
  .shop-body .directory-layout { grid-template-columns: 196px minmax(0, 1fr); gap: 16px; }
  .shop-body #hot-products,
  .shop-body #category-page-products { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

@media (max-width: 720px) {
  .shop-body .marketplace-section { margin-top: 34px; }
  .shop-body .marketplace-layout,
  .shop-body .directory-layout { grid-template-columns: 1fr; gap: 20px; }
  .shop-body .category-sidebar { position: static; padding: 12px; }
  .shop-body .category-sidebar-head { margin-bottom: 0; padding-bottom: 2px; border-bottom: 0; }
  .shop-body .category-sidebar-link { display: none; }
  .shop-body .category-mobile-toggle { width: 44px; height: 44px; display: grid; }
  .shop-body .category-mobile-toggle svg { transition: transform .18s ease; }
  .shop-body .category-sidebar.mobile-open .category-mobile-toggle svg { transform: rotate(180deg); }
  .shop-body .category-sidebar > .category-side-list { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
  .shop-body .category-sidebar.mobile-open > .category-side-list { display: grid; }
  .shop-body .marketplace-products .section-title { align-items: flex-end; }
  .shop-body #hot-products,
  .shop-body #category-page-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .shop-body .catalog-filter.mobile-open { display: grid; }
  .shop-body .catalog-filter .category-side-list { display: grid; }
}

/* Keep transparent mobile surfaces from being darkened by force-dark browsers. */
@media (max-width: 720px) {
  html,
  body,
  body.shop-body,
  .shop-body main,
  .shop-body .shop-page,
  .shop-body .home-section,
  .shop-body .marketplace-section,
  .shop-body .marketplace-layout,
  .shop-body .marketplace-products,
  .shop-body .directory-layout,
  .shop-body .directory-products {
    background-color: #fff !important;
    background-image: none !important;
  }

  body.shop-body {
    --bg: #fff;
  }
}

.subcategory-tabs { margin-bottom: 4px; }
.subcategory-tab {
  border-radius: 999px;
  background: #fff;
  border-color: rgba(28, 25, 23, .12);
}
.subcategory-tab.active {
  background: #1c1917;
  border-color: #1c1917;
}