/* =========================================================
   Member UI Suite - Base Design System
   用途：全站公共变量、重置、字体、按钮、Header/Footer、响应式基础
   命名：公共布局使用 site_ / member_ 前缀；具体页面使用页面前缀
========================================================= */

:root{
    --site_color_black:#111111;
    --site_color_text:#1f1f1f;
    --site_color_muted:#77736d;
    --site_color_light:#f7f3ec;
    --site_color_soft:#fbfaf7;
    --site_color_card:#ffffff;
    --site_color_border:#e8e1d8;
    --site_color_gold:#b8945c;
    --site_color_gold_dark:#8f6e38;
    --site_color_success:#2f8f5b;
    --site_color_warning:#c98516;
    --site_color_danger:#c94b43;
    --site_color_info:#506b95;

    --site_radius_xs:0px;
    --site_radius_sm:0px;
    --site_radius_md:0px;
    --site_radius_lg:0px;
    --site_shadow_card:0 18px 50px rgba(17,17,17,.06);
    --site_shadow_hover:0 24px 60px rgba(17,17,17,.10);

    --site_container:1400px;
    --member_container:1200px;
    --site_header_height:82px;

    --site_font_family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    color:var(--site_color_text);
    font-family:var(--site_font_family);
    background:#ffffff;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

a{
    color:inherit;
    text-decoration:none;
}

button,input,select,textarea{
    font:inherit;
}

button{
    cursor:pointer;
}

img{
    max-width:100%;
    display:block;
}


/* ==========================
   site webkit scrollbar
========================== */
html::-webkit-scrollbar {
    width: 6px;
}

html::-webkit-scrollbar-track {
    background: #f8f5ef;
}

html::-webkit-scrollbar-thumb {
    background: #fafafa;
    border-radius: 20px;
}

html::-webkit-scrollbar-thumb:hover {
    background: #666666;
}

/* ==========================
   Site Header
========================== */
.site_header{
    position:sticky;
    top:0;
    z-index:50;
    height:var(--site_header_height);
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(232,225,216,.8);
}

.site_header_inner{
    width:min(var(--site_container), calc(100% - 48px));
    height:100%;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:28px;
}

.site_header_left,
.site_header_right{
    display:flex;
    align-items:center;
    gap:26px;
}

.site_header_right{
    justify-content:flex-end;
}

.site_header_logo{
    letter-spacing:.26em;
    font-size:20px;
    font-weight:700;
    color:var(--site_color_black);
    white-space:nowrap;
}

.site_header_nav_link{
    font-size:13px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#4c4945;
    transition:color .2s ease;
}

.site_header_nav_link:hover,
.site_header_nav_link_active{
    color:var(--site_color_black);
}

.site_header_icon_link{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:13px;
    color:var(--site_color_black);
}

.site_header_icon_circle{
    width:34px;
    height:34px;
    border:1px solid var(--site_color_border);
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#fff;
}

.site_header_cart_count{
    min-width:18px;
    height:18px;
    padding:0 5px;
    border-radius:999px;
    display:grid;
    place-items:center;
    background:var(--site_color_black);
    color:#fff;
    font-size:11px;
    line-height:18px;
}

.site_mobile_menu_button{
    display:none;
    width:42px;
    height:42px;
    border:1px solid var(--site_color_border);
    border-radius:999px;
    background:#fff;
    color:#111;
    align-items:center;
    justify-content:center;
}

.site_mobile_menu_button span{
    position:relative;
    width:16px;
    height:2px;
    border-radius:2px;
    background:#111;
    display:block;
}

.site_mobile_menu_button span:before,
.site_mobile_menu_button span:after{
    content:"";
    position:absolute;
    left:0;
    width:16px;
    height:2px;
    border-radius:2px;
    background:#111;
}

.site_mobile_menu_button span:before{top:-6px;}
.site_mobile_menu_button span:after{top:6px;}

body.site_mobile_open .site_mobile_menu_button span{
    background:transparent;
}
body.site_mobile_open .site_mobile_menu_button span:before{
    top:0;
    transform:rotate(45deg);
}
body.site_mobile_open .site_mobile_menu_button span:after{
    top:0;
    transform:rotate(-45deg);
}

/* ==========================
   Site Mobile Drawer
========================== */
.site_mobile_drawer{
    position:fixed;
    inset:0 0 0 auto;
    width:min(360px, 86vw);
    transform:translateX(100%);
    z-index:90;
    background:#fff;
    transition:transform .28s ease;
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:22px;
}

body.site_mobile_open .site_mobile_drawer{
    transform:translateX(0);
}

.site_mobile_drawer_top{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.site_mobile_drawer_logo{
    font-weight:700;
    letter-spacing:.22em;
}

.site_mobile_drawer_close{
    width:40px;
    height:40px;
    border:1px solid var(--site_color_border);
    background:#fff;
    border-radius:50%;
    font-size:22px;
    line-height:1;
}

.site_mobile_drawer_link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:15px 0;
    border-bottom:1px solid var(--site_color_border);
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.site_mobile_overlay{
    position:fixed;
    inset:0;
    z-index:80;
    background:rgba(17,17,17,.35);
    opacity:0;
    pointer-events:none;
    transition:opacity .28s ease;
}

body.site_mobile_open .site_mobile_overlay{
    opacity:1;
    pointer-events:auto;
}

/* ==========================
   Site Footer
========================== */
.site_footer{
    margin-top:70px;
    background:#111;
    color:#fff;
}

.site_footer_inner{
    width:min(var(--site_container), calc(100% - 48px));
    margin:0 auto;
    padding:56px 0 34px;
}

.site_footer_top{
    display:grid;
    grid-template-columns:1.2fr .8fr .8fr 1.1fr;
    gap:42px;
}

.site_footer_logo{
    font-size:22px;
    font-weight:700;
    letter-spacing:.25em;
    margin-bottom:16px;
}

.site_footer_desc{
    max-width:360px;
    color:rgba(255,255,255,.65);
    line-height:1.8;
    font-size:14px;
}

.site_footer_title{
    font-size:13px;
    letter-spacing:.12em;
    text-transform:uppercase;
    margin:0 0 18px;
    color:#fff;
}

.site_footer_link{
    display:block;
    color:rgba(255,255,255,.62);
    font-size:14px;
    margin:12px 0;
}

.site_footer_newsletter{
    display:flex;
    margin-top:14px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
    overflow:hidden;
}

.site_footer_newsletter input{
    min-width:0;
    flex:1;
    border:0;
    outline:0;
    background:transparent;
    color:#fff;
    padding:14px 18px;
}

.site_footer_newsletter button{
    border:0;
    background:#fff;
    color:#111;
    padding:0 22px;
    font-size:13px;
    font-weight:700;
}

.site_footer_bottom{
    margin-top:46px;
    padding-top:22px;
    border-top:1px solid rgba(255,255,255,.12);
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:rgba(255,255,255,.55);
    font-size:13px;
}

/* ==========================
   Common Buttons / Tags
========================== */
.site_btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:46px;
    padding:0 22px;
    border:1px solid transparent;
    transition:all .22s ease;
    font-size:13px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    white-space:nowrap;
}

.site_btn_primary{
    background:#111;
    color:#fff;
}

.site_btn_primary:hover{
    transform:translateY(-1px);
    box-shadow:0 14px 28px rgba(17,17,17,.18);
}

.site_btn_light{
    background:#fff;
    color:#111;
    border-color:var(--site_color_border);
}

.site_btn_light:hover{
    border-color:#111;
}

.site_btn_gold{
    background:var(--site_color_gold);
    color:#fff;
}

.site_status_tag{
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:26px;
    padding:0 11px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.03em;
}

.site_status_tag:before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:currentColor;
}

.site_status_success{
    color:var(--site_color_success);
    background:rgba(47,143,91,.10);
}

.site_status_warning{
    color:var(--site_color_warning);
    background:rgba(201,133,22,.12);
}

.site_status_info{
    color:var(--site_color_info);
    background:rgba(80,107,149,.12);
}

.site_status_danger{
    color:var(--site_color_danger);
    background:rgba(201,75,67,.12);
}

/* ==========================
   Product Placeholder Art
========================== */
.site_product_art{
    position:relative;
    overflow:hidden;
}


/* =========================================================
   Pagination 分页样式
   适用于 ThinkPHP 默认分页结构：
   <ul class="pagination">...</ul>
========================================================= */

.pagination {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination li {
    display: inline-flex;
}

.pagination li a,
.pagination li span {
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #e8e1d8;
    background: #ffffff;
    color: #222222;

    font-size: 14px;
    font-weight: 600;
    line-height: 1;

    text-decoration: none;
    transition: all 0.2s ease;
}

/* 鼠标经过 */
.pagination li a:hover {
    border-color: #111111;
    background: #111111;
    color: #ffffff;
}

/* 当前页 */
.pagination li.active span {
    border-color: #111111;
    background: #111111;
    color: #ffffff;
}

/* 禁用状态 */
.pagination li.disabled span {
    color: #b8b0a6;
    background: #f7f3ec;
    border-color: #e8e1d8;
    cursor: not-allowed;
}

/* 外层居中容器，如果你不想写 inline style，可以用这个 */
.member_pagination_wrap {
    padding: 28px 0;
    text-align: center;
}

/* 移动端 */
@media (max-width: 640px) {
    .pagination {
        gap: 6px;
    }

    .pagination li a,
    .pagination li span {
        min-width: 34px;
        height: 34px;
        padding: 0 10px;
        font-size: 13px;
    }
}
/* ==========================
   Responsive Base
========================== */
@media (max-width: 980px){
    .site_header_inner{
        width:min(100% - 32px, var(--site_container));
        grid-template-columns:auto 1fr auto;
    }

    .site_header_left,
    .site_header_nav_link,
    .site_header_icon_link.site_header_hide_mobile{
        display:none;
    }

    .site_mobile_menu_button{
        display:inline-flex;
    }

    .site_header_logo{
        justify-self:center;
        font-size:17px;
    }

    .site_footer_top{
        grid-template-columns:1fr 1fr;
    }
}

@media (max-width: 640px){
    :root{
        --site_header_height:72px;
    }

    .site_header_inner,
    .site_footer_inner{
        width:calc(100% - 28px);
    }

    .site_footer_top{
        grid-template-columns:1fr;
        gap:28px;
    }

    .site_footer_bottom{
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
    }

    .site_btn{
        width:100%;
    }
}