:root{
    --bg:#ffffff;
    --text:#111111;
    --muted:#6b7280;
    --line:#ececec;
    --card:#ffffff;
    --soft:#f5f5f5;
    --soft-2:#f1f1f1;
    --tile:#f1f1f1;
    --tile-2:#ececec;
    --shadow-sm:0 4px 12px rgba(17,24,39,.04);
    --shadow-md:0 10px 24px rgba(17,24,39,.08);
    --radius:18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    background:var(--bg);
    color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}
a,a:hover,a:focus{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}

.container{
    width:min(1480px, calc(100% - 32px));
    margin:0 auto;
}

.site-main{
    min-height:60vh;
}

.page-block{
    padding:28px 0;
}

/* header */
.site-topbar{
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(255,255,255,.94);
    backdrop-filter:saturate(180%) blur(12px);
    border-bottom:1px solid var(--line);
}
.site-topbar-inner{
    display:flex;
    align-items:center;
    gap:16px;
    min-height:76px;
}
.site-brand{
    font-size:28px;
    line-height:1;
    font-weight:900;
    letter-spacing:.08em;
    flex:0 0 auto;
}
.site-search-wrap{
    flex:1 1 auto;
    max-width:720px;
}
.site-search{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    border:1px solid var(--line);
    border-radius:999px;
    background:#fafafa;
}
.site-search input{
    flex:1 1 auto;
    min-width:0;
    border:0;
    outline:0;
    background:transparent;
    font-size:15px;
}
.site-search button{
    border:0;
    border-radius:999px;
    height:38px;
    padding:0 16px;
    background:#111;
    color:#fff;
    font-size:14px;
    font-weight:700;
}
.site-nav{
    display:flex;
    align-items:center;
    gap:10px;
    margin-left:auto;
}
.site-nav a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:0 14px;
    border-radius:999px;
    background:#f5f5f5;
    color:#111;
    font-size:14px;
    font-weight:700;
    transition:background .18s ease,color .18s ease,transform .18s ease;
}
.site-nav a:hover{
    background:#111;
    color:#fff;
    transform:translateY(-1px);
}

/* hero / section */
.search-style-hero{
    padding:18px 0 8px;
}
.hero-copy h1{
    margin:0 0 10px;
    font-size:42px;
    line-height:1.05;
    font-weight:900;
    letter-spacing:-.02em;
}
.hero-copy p{
    margin:0;
    max-width:760px;
    color:var(--muted);
    font-size:16px;
    line-height:1.75;
}
.section-line{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
}
.section-line h2{
    margin:0;
    font-size:24px;
    line-height:1.15;
    font-weight:900;
}

/* refine */
.home-refine,
.refine-row{
    display:flex;
    align-items:center;
    gap:14px;
    margin:18px 0 22px;
}
.refine-title{
    flex:0 0 auto;
    color:#7a7a7a;
    font-size:12px;
    font-weight:900;
    letter-spacing:.12em;
}
.refine-scroll{
    display:flex;
    gap:10px;
    overflow:auto;
    scrollbar-width:none;
}
.refine-scroll::-webkit-scrollbar{display:none}
.refine-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:0 14px;
    border-radius:999px;
    background:#f4f4f4;
    border:1px solid #ededed;
    color:#111;
    font-size:14px;
    font-weight:700;
    white-space:nowrap;
    transition:all .18s ease;
}
.refine-tag:hover,
.refine-tag.active{
    background:#111;
    border-color:#111;
    color:#fff;
}

/* result top */
.search-result-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px;
}
.result-title-wrap h1{
    margin:0 0 8px;
    font-size:34px;
    line-height:1.08;
    font-weight:900;
}
.page-desc{
    margin:0;
    color:var(--muted);
    font-size:15px;
    line-height:1.8;
    max-width:860px;
}
.result-tools{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}
.tool-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:0 14px;
    border-radius:999px;
    background:#f5f5f5;
    border:1px solid #ececec;
    color:#111;
    font-size:13px;
    font-weight:800;
}

/* 正确方向：正常宫格，不是瀑布流 */
.product-grid,
.search-grid,
.gem-grid{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:18px;
    align-items:start;
}

/* 商品卡 */
.product-card{
    display:block;
    color:#111;
}

/* 关键：整块浅灰底容器 */
.product-card-media{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    height:255px;
    padding:18px;
    border-radius:18px;
    overflow:hidden;
    background:
            radial-gradient(circle at center, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 52%),
            linear-gradient(180deg, var(--tile) 0%, var(--tile-2) 100%);
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

/* 轻微柔边，不要太重 */
.product-card-media::after{
    content:"";
    position:absolute;
    inset:0;
    background:
            radial-gradient(circle at center,
            rgba(0,0,0,0) 58%,
            rgba(0,0,0,.02) 78%,
            rgba(0,0,0,.05) 100%);
    pointer-events:none;
}

/* hover 很轻，别像传统电商卡片 */
.product-card:hover .product-card-media{
    transform:translateY(-2px);
    box-shadow:0 12px 24px rgba(17,24,39,.08);
    background:
            radial-gradient(circle at center, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 52%),
            linear-gradient(180deg, #f0f0f0 0%, #e9e9e9 100%);
}

.product-card-image{
    position:relative;
    z-index:1;
    width:100%;
    height:100%;
    object-fit:contain;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.06));
}

/* 价格贴右上角 */
.product-card-price{
    position:absolute;
    top:10px;
    right:10px;
    z-index:2;
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:0 10px;
    border-radius:10px;
    background:rgba(255,255,255,.96);
    color:#111;
    font-size:12px;
    font-weight:900;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
}

/* 文案区 */
.product-card-body{
    padding:12px 4px 0;
}

.product-card-title{
    font-size:14px;
    line-height:1.45;
    font-weight:700;
    color:#111;
    margin:0 0 6px;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.product-card-meta{
    font-size:12px;
    line-height:1.4;
    color:#707070;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* pager */
.pager-box{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:24px;
    flex-wrap:wrap;
}
.pager-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:96px;
    height:40px;
    padding:0 16px;
    border-radius:999px;
    background:#111;
    color:#fff;
    font-size:14px;
    font-weight:800;
}
.pager-btn.disabled{
    background:#ddd;
    color:#888;
    pointer-events:none;
}
.pager-current{
    font-size:13px;
    color:#666;
    font-weight:800;
}

/* product detail */
.card-box{
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
}
.product-page h1,
.cart-page h1,
.checkout-page h1,
.static-page h1{
    margin:0 0 18px;
    font-size:34px;
    line-height:1.12;
    font-weight:900;
}
.detail-grid{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
    gap:24px;
}
.detail-gallery,
.detail-summary{
    padding:18px;
}
.main-image{
    position:relative;
    width:100%;
    aspect-ratio:1 / 1;
    border-radius:18px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:14px;
    background:#f2f2f2;
}
.main-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:24px;
}
.thumb-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:10px;
}
.thumb-grid a{
    display:block;
    aspect-ratio:1 / 1;
    border-radius:14px;
    overflow:hidden;
    background:#f2f2f2;
    border:1px solid #ececec;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.thumb-grid a:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    border-color:#e4e4e4;
}
.thumb-grid img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:10px;
}

.product-price{
    font-size:34px;
    line-height:1;
    font-weight:900;
    color:#111;
    margin-bottom:18px;
}
.meta-line{
    font-size:14px;
    line-height:1.8;
    color:#444;
    margin-bottom:6px;
}
.top-gap{margin-top:16px}
.btn-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 18px;
    border-radius:999px;
    font-weight:800;
}
.btn-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 14px;
    color:#111;
    font-weight:800;
}
.desc-box,
.spec-box,
.page-card,
.checkout-box-lg{
    margin-top:20px;
    padding:20px;
}
.desc-box h2,
.spec-box h2{
    margin:0 0 14px;
    font-size:22px;
    font-weight:900;
}
.desc-text{
    color:#444;
    font-size:15px;
    line-height:1.9;
}
.spec-table{
    width:100%;
    border-collapse:collapse;
}
.spec-table th,
.spec-table td{
    padding:12px 10px;
    border-top:1px solid #f0f0f0;
    text-align:left;
    vertical-align:top;
    font-size:14px;
}
.spec-table th{
    width:220px;
    color:#666;
    font-weight:800;
}

/* cart / checkout / page */
.cart-list{
    display:flex;
    flex-direction:column;
    gap:14px;
}
.cart-row{
    display:grid;
    grid-template-columns:96px 1fr auto auto;
    gap:14px;
    align-items:center;
    padding:14px;
}
.cart-row img{
    width:96px;
    height:96px;
    object-fit:contain;
    border-radius:14px;
    background:#f5f5f5;
    padding:8px;
}
.cart-info{min-width:0}
.cart-title{
    font-weight:800;
    margin-bottom:8px;
}
.checkout-box{
    margin-top:18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
}
.static-page .page-content{
    color:#444;
    font-size:15px;
    line-height:1.9;
}

/* common */
.error-box{
    background:#fff5f5;
    border:1px solid #ffd2d2;
    color:#b10000;
    padding:14px 16px;
    border-radius:12px;
    margin:16px 0;
}
.empty-box{
    padding:60px 20px;
    text-align:center;
    border:1px dashed #ddd;
    border-radius:16px;
    color:#777;
    background:#fafafa;
}
.site-footer{
    margin-top:40px;
    padding:24px 0 36px;
    border-top:1px solid var(--line);
}
.footer-links{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    justify-content:center;
}
.footer-links a{
    color:#374151;
    font-size:14px;
    font-weight:700;
}
.footer-copy{
    margin-top:14px;
    text-align:center;
    color:#777;
    font-size:13px;
}

/* responsive */
@media (max-width:1500px){
    .product-grid,.search-grid,.gem-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1200px){
    .product-grid,.search-grid,.gem-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .detail-grid{grid-template-columns:1fr}
}
@media (max-width:860px){
    .site-topbar-inner{
        min-height:auto;
        padding:16px 0;
        flex-wrap:wrap;
    }
    .site-search-wrap{
        order:3;
        max-width:none;
        width:100%;
    }
    .site-nav{
        margin-left:0;
    }
    .product-grid,.search-grid,.gem-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .search-result-top{flex-direction:column;align-items:flex-start}
    .cart-row{grid-template-columns:76px 1fr}
    .thumb-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
    .hero-copy h1{font-size:34px}
}
@media (max-width:560px){
    .container{width:min(100% - 20px, 1480px)}
    .page-block{padding:20px 0}
    .product-grid,.search-grid,.gem-grid{gap:12px}
    .product-card-media{height:210px;padding:14px}
    .product-page h1,
    .cart-page h1,
    .checkout-page h1,
    .static-page h1,
    .result-title-wrap h1{font-size:28px}
    .thumb-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}