:root {
    --xy-ink: #18243d;
    --xy-muted: #6d7890;
    --xy-primary: #665df0;
    --xy-blue: #59a8f8;
    --xy-mint: #63d9c1;
    --xy-red: #ed5047;
    --xy-line: rgba(91, 105, 139, .14);
    --xy-wrap: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.xy-body {
    min-height: 100vh;
    margin: 0;
    color: var(--xy-ink);
    font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
    background:
        radial-gradient(880px 520px at -5% 0%, rgba(96, 176, 255, .42), transparent 62%),
        radial-gradient(780px 520px at 105% 7%, rgba(244, 164, 224, .42), transparent 61%),
        radial-gradient(780px 460px at 48% 100%, rgba(100, 222, 202, .35), transparent 64%),
        linear-gradient(145deg, #e6efff, #f5efff 55%, #e8fbf7);
    background-attachment: fixed;
}
body.xy-body a { color: inherit; text-decoration: none; }
body.xy-body img { display: block; max-width: 100%; }
.xy-wrap { width: min(calc(100% - 32px), var(--xy-wrap)); margin-inline: auto; }
.xy-glass {
    border: 1px solid rgba(255,255,255,.76);
    background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.28));
    box-shadow: 0 22px 55px rgba(70, 78, 128, .14), inset 0 1px 0 rgba(255,255,255,.68);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}
.xy-topbar { position: sticky; z-index: 50; top: 0; padding-top: 14px; }
.xy-topbar-inner { min-height: 68px; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 24px; }
.xy-brand { min-width: 0; display: flex; align-items: center; gap: 11px; }
.xy-brand-mark { width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border-radius: 15px; color: #fff; background: linear-gradient(145deg,#7770ff,#55a5f7); box-shadow: inset 0 0 16px rgba(255,255,255,.22), 0 10px 22px rgba(87,93,205,.2); font-size: 20px; font-weight: 950; }
.xy-brand-mark.is-image { background: rgba(255,255,255,.38); }
.xy-brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.xy-brand-copy { min-width: 0; }
.xy-brand-copy strong { display: block; overflow: hidden; font-size: 17px; white-space: nowrap; text-overflow: ellipsis; }
.xy-brand-copy small { display: block; margin-top: 2px; color: var(--xy-muted); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.xy-query-link { margin-left: auto; min-width: 142px; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 18px; border-radius: 15px; color: #fff !important; background: linear-gradient(135deg,var(--xy-primary),var(--xy-blue)); box-shadow: 0 11px 25px rgba(91,88,222,.23); font-size: 15px; font-weight: 900; letter-spacing: .08em; }
.xy-back { width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.78); border-radius: 15px; color: #56627b; background: rgba(255,255,255,.43); font-size: 21px; }

/* 首页 */
.xy-home { padding: 24px 0 42px; }
.xy-section { margin-top: 20px; padding: 30px; border-radius: 32px; }
.xy-rich-notice { color: #44516a; font-size: 15px; line-height: 1.9; overflow-wrap: anywhere; }
.xy-rich-notice > :first-child { margin-top: 0; }
.xy-rich-notice > :last-child { margin-bottom: 0; }
.xy-shop-panel { padding-top: 27px; }
.xy-section-title { margin: 0 0 20px; font-size: 27px; line-height: 1.2; }
.xy-category-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.xy-category {
    min-width: 0; min-height: 126px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    padding: 13px 8px; border: 1px solid rgba(255,255,255,.65); border-radius: 23px; color: var(--xy-ink);
    background: rgba(255,255,255,.31); cursor: pointer; transition: .22s ease;
}
.xy-category:hover, .xy-category.active { transform: translateY(-3px); background: rgba(255,255,255,.58); box-shadow: 0 14px 28px rgba(73,81,132,.12); }
.xy-category-icon { width: 58px; height: 58px; display: grid; place-items: center; overflow: hidden; border-radius: 19px; color: #fff; background: linear-gradient(145deg,#91abff,#a6c7ff); font-size: 23px; font-weight: 950; }
.xy-category:nth-child(3n+2) .xy-category-icon { background: linear-gradient(145deg,#f0a9d5,#de9ae0); }
.xy-category:nth-child(3n) .xy-category-icon { background: linear-gradient(145deg,#66d7bd,#79cde7); }
.xy-category-icon img { width: 100%; height: 100%; object-fit: cover; }
.xy-category-name { max-width: 100%; overflow: hidden; font-size: 14px; font-weight: 850; white-space: nowrap; text-overflow: ellipsis; }
.xy-products { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; margin-top: 22px; padding-top: 21px; border-top: 1px solid var(--xy-line); }
.xy-shop-panel.no-categories .xy-products { margin-top:0; padding-top:0; border-top:0; }
.xy-product {
    min-height: 188px; display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 15px; padding: 13px;
    border: 1px solid rgba(255,255,255,.65); border-radius: 27px; color: inherit; background: rgba(255,255,255,.34);
    transition: transform .22s ease, background .22s ease, box-shadow .22s ease;
}
.xy-product:hover { transform: translateY(-4px); background: rgba(255,255,255,.57); box-shadow: 0 22px 40px rgba(67,79,127,.14); }
.xy-product-art { width:100%; height:auto; min-height:0; aspect-ratio:1 / 1; align-self:center; display:grid; place-items:center; overflow:hidden; border-radius:23px; background:linear-gradient(145deg,rgba(111,104,239,.22),rgba(91,171,246,.2)); }
.xy-product-art img { width: 100%; height: 100%; object-fit: cover; }
.xy-product-fallback { width: 74%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 27%; color: #fff; background: linear-gradient(145deg,#716bf0,#5eb2f5); font-size: 34px; font-weight: 950; }
.xy-product-body { min-width: 0; display: flex; flex-direction: column; padding: 8px 2px 3px; }
.xy-product-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.xy-product-title { min-width: 0; margin: 8px 0 0; overflow-wrap: anywhere; font-size: 20px; line-height: 1.35; }
.xy-auto { flex: 0 0 auto; min-height: 29px; display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid rgba(94,167,255,.3); border-radius: 999px; color: #4f78dd; background: rgba(237,245,255,.68); font-size: 11px; font-weight: 850; white-space: nowrap; }
.xy-price-row { margin-top: auto; padding-top: 13px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; border-top: 1px solid var(--xy-line); }
.xy-price small { display: block; color: #7b8598; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.xy-price strong { display: block; margin-top: 4px; font-size: 24px; }
.xy-price em { font-size: 17px; font-style: normal; font-weight: 900; }
.xy-buy-arrow { position: relative; width: 43px; height: 43px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 15px; color: #fff; background: linear-gradient(145deg,#7068ed,#579cf4); box-shadow: 0 11px 22px rgba(88,89,204,.2); }
.xy-buy-arrow i { display: none; }
.xy-buy-arrow::before { content: ""; width: 17px; height: 14px; display: block; background: currentColor; -webkit-clip-path: polygon(0 42%,56% 42%,56% 7%,100% 50%,56% 93%,56% 58%,0 58%); clip-path: polygon(0 42%,56% 42%,56% 7%,100% 50%,56% 93%,56% 58%,0 58%); }
.xy-buy-arrow::after { content: none; }
.xy-empty { grid-column: 1/-1; padding: 50px 20px; border: 1px dashed rgba(103,116,146,.25); border-radius: 22px; color: var(--xy-muted); text-align: center; }
.xy-loading { opacity: .55; pointer-events: none; }

/* 商品下单页 */
.xy-checkout { padding: 24px 0 48px; }
.xy-checkout-grid { display: grid; grid-template-columns: minmax(320px,.78fr) minmax(450px,1.22fr); gap: 20px; align-items: start; }
.xy-summary, .xy-order-form, .xy-detail-content { border-radius: 30px; }
.xy-summary { position: sticky; top: 98px; padding: 18px; overflow: hidden; }
.xy-summary-art { position: relative; height: 276px; display: grid; place-items: center; overflow: hidden; border-radius: 23px; background: linear-gradient(145deg,rgba(111,104,239,.24),rgba(91,171,246,.22)); }
.xy-summary-art::before { content:""; position:absolute; width:220px; height:220px; right:-70px; top:-90px; border-radius:50%; background:rgba(255,255,255,.28); }
.xy-summary-cover { position: relative; z-index: 1; width: 132px; height: 132px; object-fit: cover; border-radius: 34px; box-shadow: 0 20px 35px rgba(67,75,157,.22); }
.xy-summary-copy { padding: 19px 8px 7px; text-align: center; }
.xy-summary-copy h1 { margin: 0; font-size: 25px; line-height: 1.35; }
.xy-summary-copy .des { margin: 8px 0 0; color: var(--xy-muted); font-size: 12px; line-height: 1.6; }
.xy-sales-count { margin:8px 0 0; color:#77829a; font-size:11px; font-weight:750; }
.xy-summary-price { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.xy-summary-price .currency, .xy-summary-price .price { color: var(--xy-red); font-size: 35px; font-weight: 900; }
.xy-summary-price .currency { font-size: 23px; }
.xy-delivery { min-height: 29px; display:inline-flex; align-items:center; padding:0 10px; border:1px solid rgba(94,167,255,.3); border-radius:999px; color:#4f78dd; background:rgba(237,245,255,.72); font-size:11px; font-weight:850; }
.xy-order-stack { display: grid; gap: 16px; }
.xy-order-form { padding: 25px; }
.xy-form-heading { margin: 0 0 5px; font-size: 23px; }
.xy-form-hint { margin: 0 0 18px; color: var(--xy-muted); font-size: 12px; }
.xy-order-form .form-group { margin: 0 0 18px; }
.xy-order-form .form-title { margin: 0 0 9px; color: var(--xy-ink); font-size: 14px; font-weight: 850; }
.xy-order-form .form-title i { margin-right: 7px; color: var(--xy-primary); }
.xy-form-title-line { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.xy-form-title-line .form-title { margin-bottom:9px; }
.xy-stock-status { margin-bottom:9px; color:#5f6d86; font-size:11px; font-weight:800; white-space:nowrap; }
.xy-stock-status.empty { color:#d54843; }
.xy-stock-status.low { color:#d98317; }
.xy-stock-status.normal { color:#6574c8; }
.xy-stock-status.enough { color:#4d7b70; }
.xy-order-form .layui-form-item, .xy-order-form .layui-input-block { margin: 0; }
.xy-order-form .layui-input { height: 52px; padding: 0 15px; border: 1px solid rgba(112,128,162,.2); border-radius: 16px; background: rgba(255,255,255,.48); font-size: 14px; }
.xy-order-form .layui-input:focus { border-color: #7972ed !important; box-shadow: 0 0 0 4px rgba(105,97,239,.1); }
.xy-order-form .spec-options { display: flex; flex-wrap: wrap; gap: 10px; }
.xy-order-form .spec-option { min-height: 44px; display:inline-flex; align-items:center; justify-content:center; padding:0 16px; border:1px solid rgba(112,128,162,.2); border-radius:14px; background:rgba(255,255,255,.45); cursor:pointer; }
.xy-order-form .spec-option.active { color:#fff; border-color:transparent; background:linear-gradient(135deg,var(--xy-primary),var(--xy-blue)); }
.xy-order-form .quantity-selector { width: 160px; height: 48px; display:grid; grid-template-columns:1fr 1fr 1fr; overflow:hidden; border:1px solid rgba(112,128,162,.2); border-radius:15px; background:rgba(255,255,255,.47); }
.xy-order-form .quantity-btn { display:grid; place-items:center; color:#57637c; cursor:pointer; }
.xy-order-form .quantity-input { min-width:0; width:100%; border:0; border-left:1px solid var(--xy-line); border-right:1px solid var(--xy-line); outline:0; background:transparent; text-align:center; font-size:16px; font-weight:900; -moz-appearance:textfield; }
.xy-order-form .quantity-input::-webkit-inner-spin-button { display:none; }
.xy-order-form .payment-methods { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.xy-order-form .payment-item { position:relative; min-height:76px; display:flex; align-items:center; gap:12px; padding:11px 13px; border:1px solid rgba(112,128,162,.2); border-radius:18px; background:rgba(255,255,255,.4); cursor:pointer; }
.xy-order-form .payment-item.active { border-color:#7770ff; background:rgba(228,239,255,.7); box-shadow:0 0 0 3px rgba(105,97,239,.09); }
.xy-order-form .payment-icon { width:46px; height:46px; flex:0 0 auto; overflow:hidden; border-radius:14px; }
.xy-order-form .payment-icon img { width:100%; height:100%; object-fit:cover; }
.xy-order-form .payment-name { position:relative; top:-4px; font-size:16px; font-weight:850; }
.xy-order-form .payment-checked { position:absolute; top:8px; right:8px; color:var(--xy-primary); opacity:0; }
.xy-order-form .payment-item.active .payment-checked { opacity:1; }
.xy-order-form .coupon-input-wrap { display:flex; gap:8px; }
.xy-order-form .coupon-input { flex:1; }
.xy-order-form .coupon-apply-btn { height:52px; border-radius:14px; }
.xy-order-form .coupon-tip { margin-top:7px; color:var(--xy-muted); font-size:12px; }
.xy-order-form .drawer-footer { margin-top: 8px; }
.xy-order-form .buy-btn-g { width:100%; height:56px; display:flex; align-items:center; justify-content:center; gap:12px; border:0; border-radius:17px; color:#fff; background:linear-gradient(135deg,var(--xy-primary),var(--xy-blue)); box-shadow:0 14px 28px rgba(91,88,222,.23); font-size:16px; font-weight:900; }
.xy-detail-content { padding:24px; color:#364157; background:rgba(255,255,255,.52); font-size:15px; line-height:1.85; overflow-wrap:anywhere; }
.xy-detail-content > :first-child { margin-top:0; }
.xy-detail-content > :last-child { margin-bottom:0; }
.xy-footer { padding: 22px 0 36px; display:flex; justify-content:center; gap:12px; color:var(--xy-muted); font-size:12px; }
.xy-mobile-nav { display:none; }

@media (max-width: 1000px) {
    .xy-category-strip { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .xy-products { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .xy-checkout-grid { grid-template-columns: 1fr; }
    .xy-summary { position: static; }
}

@media (max-width: 640px) {
    .xy-wrap { width: min(calc(100% - 20px), var(--xy-wrap)); }
    .xy-topbar { padding-top: 8px; }
    .xy-topbar-inner { min-height:58px; padding:6px 7px; border-radius:20px; }
    .xy-brand-mark { width:42px; height:42px; border-radius:13px; }
    .xy-brand-copy strong { font-size:14px; }
    .xy-brand-copy small { display:none; }
    .xy-query-link { min-width:132px; min-height:40px; gap:8px; padding:0 14px; border-radius:13px; font-size:14px; letter-spacing:.1em; }
    .xy-back { width:42px; height:42px; border-radius:13px; }
    .xy-inner-page .xy-brand-mark { display:none; }
    .xy-inner-page .xy-brand { display:none; }
    .xy-home, .xy-checkout { padding: 6px 0 105px; }
    .xy-section { margin-top:14px; padding:20px 14px; border-radius:27px; }
    .xy-rich-notice { padding:20px 18px; font-size:13px; }
    .xy-section-title { margin-bottom:14px; font-size:23px; }
    .xy-category-strip { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
    .xy-category { min-height:92px; padding:8px 4px; gap:7px; border-radius:18px; }
    .xy-category-icon { width:43px; height:43px; border-radius:14px; font-size:18px; }
    .xy-category-name { font-size:11px; }
    .xy-products { grid-template-columns:1fr; gap:12px; margin-top:14px; padding-top:14px; }
    .xy-product { min-height:120px; grid-template-columns:104px minmax(0,1fr); gap:0; padding:8px 10px; border-radius:22px; }
    .xy-product-art { width:104px; height:auto; min-height:0; aspect-ratio:1 / 1; align-self:center; border-radius:26px; }
    .xy-product-body { padding:0 0 0 12px; }
    .xy-product-title-row { align-items:center; }
    .xy-product-title { position:relative; top:8px; margin:0; font-size:19px; }
    .xy-auto { min-height:28px; padding:0 9px; font-size:10px; }
    .xy-price-row { padding-top:5px; }
    .xy-price small { font-size:11px; }
    .xy-price strong { font-size:22px; }
    .xy-price em { font-size:18px; }
    .xy-buy-arrow { width:38px; height:38px; border-radius:13px; }
    .xy-checkout-grid { gap:12px; }
    .xy-summary, .xy-order-form, .xy-detail-content { border-radius:25px; }
    .xy-summary { padding:13px; }
    .xy-summary-art { height:198px; border-radius:20px; }
    .xy-summary-cover { width:104px; height:104px; border-radius:28px; }
    .xy-summary-copy { padding:15px 6px 5px; }
    .xy-summary-copy h1 { font-size:24px; }
    .xy-summary-price { margin-top:8px; }
    .xy-summary-price .price { font-size:37px; }
    .xy-summary-price .currency { font-size:25px; }
    .xy-order-form { padding:19px 14px; }
    .xy-form-heading { font-size:21px; }
    .xy-order-form .form-group { margin-bottom:16px; }
    .xy-order-form .payment-methods { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    .xy-order-form .payment-item { min-height:68px; gap:8px; padding:9px 8px; border-radius:16px; }
    .xy-order-form .payment-icon { width:42px; height:42px; }
    .xy-order-form .payment-name { font-size:14px; }
    .xy-detail-content { padding:18px 16px; font-size:14px; }
    .xy-footer { display:none; }
    .xy-mobile-nav { position:fixed; z-index:60; left:50%; bottom:max(9px,env(safe-area-inset-bottom)); width:calc(100% - 20px); display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:7px; border-radius:22px; transform:translateX(-50%); }
    .xy-mobile-nav a { min-height:48px; display:flex; align-items:center; justify-content:center; gap:8px; border-radius:16px; color:#5d6981; font-size:12px; font-weight:850; }
    .xy-mobile-nav a.active { color:#fff; background:linear-gradient(135deg,var(--xy-primary),var(--xy-blue)); box-shadow:0 9px 22px rgba(91,88,222,.22); }
}

@media (max-width: 370px) {
    .xy-query-link { min-width:118px; padding:0 10px; font-size:13px; }
    .xy-category-strip { gap:6px; }
    .xy-category-icon { width:39px; height:39px; }
    .xy-product { grid-template-columns:96px minmax(0,1fr); }
    .xy-product-art { width:96px; }
    .xy-product-title { font-size:16px; }
    .xy-auto { display:none; }
}
