/* ========================================
   B端设计 - WooCommerce 前端页面全局增强
   主题: my-woocommerce-theme
   设计令牌继承自 admin.css 的 --mt-* 变量
   影响: 产品归档/详情、购物车、结算、我的账户等所有 WC 前端页面
   ======================================== */

/* ========================================
   SECTION 1: 设计令牌注入
   ======================================== */

/* 确保 B端 CSS 变量可被所有 WC 页面使用 */
.woocommerce,
.woocommerce-page {
    --wc-primary: var(--mt-primary, #2563EB);
    --wc-primary-hover: var(--mt-primary-hover, #1D4ED8);
    --wc-primary-light: var(--mt-primary-light, #DBEAFE);
    --wc-success: var(--mt-success, #059669);
    --wc-success-light: var(--mt-success-light, #D1FAE5);
    --wc-warning: var(--mt-warning, #D97706);
    --wc-warning-light: var(--mt-warning-light, #FEF3C7);
    --wc-danger: var(--mt-danger, #DC2626);
    --wc-danger-light: var(--mt-danger-light, #FEE2E2);
    --wc-gray-50: var(--mt-gray-50, #F9FAFB);
    --wc-gray-100: var(--mt-gray-100, #F3F4F6);
    --wc-gray-200: var(--mt-gray-200, #E5E7EB);
    --wc-gray-300: var(--mt-gray-300, #D1D5DB);
    --wc-gray-500: var(--mt-gray-500, #6B7280);
    --wc-gray-700: var(--mt-gray-700, #374151);
    --wc-gray-800: var(--mt-gray-800, #1F2937);
    --wc-gray-900: var(--mt-gray-900, #111827);
    --wc-surface: var(--mt-surface, #FFFFFF);
    --wc-bg: var(--mt-bg, #F5F7FA);
    --wc-border: var(--mt-border, #E5E7EB);
    --wc-radius: var(--mt-radius, 6px);
    --wc-radius-md: var(--mt-radius-md, 8px);
    --wc-radius-lg: var(--mt-radius-lg, 12px);
    --wc-shadow-sm: var(--mt-shadow-sm);
    --wc-shadow: var(--mt-shadow);
    --wc-transition: var(--mt-transition);
}

/* ========================================
   SECTION 2: 产品归档/列表页
   ======================================== */

/* 2.1 排序工具栏 */
.woocommerce .woocommerce-ordering select {
    padding: 6px 12px !important;
    font-size: 13px !important;
    border: 1px solid var(--wc-gray-300) !important;
    border-radius: var(--wc-radius) !important;
    background: var(--wc-surface) !important;
    color: var(--wc-gray-700) !important;
    height: 36px !important;
    transition: var(--wc-transition) !important;
}

.woocommerce .woocommerce-ordering select:focus {
    outline: none !important;
    border-color: var(--wc-primary) !important;
    box-shadow: 0 0 0 3px var(--wc-primary-light) !important;
}

/* 2.2 结果计数 */
.woocommerce .woocommerce-result-count {
    font-size: 13px !important;
    color: var(--wc-gray-500) !important;
}

/* 2.3 产品卡片网格 */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 16px !important;
}

.woocommerce ul.products li.product {
    background: var(--wc-surface) !important;
    border: 1px solid var(--wc-border) !important;
    border-radius: var(--wc-radius-md) !important;
    box-shadow: var(--wc-shadow-sm) !important;
    overflow: hidden !important;
    transition: var(--wc-transition) !important;
    margin: 0 !important;
    width: 100% !important;
    float: none !important;
    clear: none !important;
}

.woocommerce ul.products li.product:hover {
    border-color: var(--wc-gray-300) !important;
    box-shadow: var(--wc-shadow) !important;
    transform: translateY(-2px) !important;
}

/* 2.4 产品图片 */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
    display: block !important;
}

.woocommerce ul.products li.product img {
    border-radius: var(--wc-radius-md) var(--wc-radius-md) 0 0 !important;
    margin: 0 !important;
}

/* 2.5 产品标题 */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--wc-gray-800) !important;
    padding: 12px 14px 4px 14px !important;
}

/* 2.6 产品价格 */
.woocommerce ul.products li.product .price {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--wc-danger) !important;
    padding: 0 14px 8px 14px !important;
}

.woocommerce ul.products li.product .price del {
    font-size: 12px !important;
    color: var(--wc-gray-300) !important;
    font-weight: 400 !important;
}

/* 2.7 添加到购物车按钮 */
.woocommerce ul.products li.product .button {
    display: block !important;
    margin: 0 14px 14px 14px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-align: center !important;
    border-radius: var(--wc-radius) !important;
    background: var(--wc-primary) !important;
    color: #fff !important;
    border: none !important;
    transition: var(--wc-transition) !important;
    cursor: pointer !important;
}

.woocommerce ul.products li.product .button:hover {
    background: var(--wc-primary-hover) !important;
}

/* 2.8 分页 */
.woocommerce nav.woocommerce-pagination ul {
    border: 1px solid var(--wc-border) !important;
    border-radius: var(--wc-radius) !important;
    overflow: hidden !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    padding: 6px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--wc-gray-700) !important;
    transition: var(--wc-transition) !important;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
    background: var(--wc-primary-light) !important;
    color: var(--wc-primary) !important;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--wc-primary) !important;
    color: #fff !important;
}

/* ========================================
   SECTION 3: 单品详情页
   ======================================== */

/* 3.1 面包屑 */
.woocommerce .woocommerce-breadcrumb {
    font-size: 12px !important;
    color: var(--wc-gray-500) !important;
    padding: 12px 0 !important;
}

.woocommerce .woocommerce-breadcrumb a {
    color: var(--wc-primary) !important;
    text-decoration: none !important;
    transition: var(--wc-transition) !important;
}

.woocommerce .woocommerce-breadcrumb a:hover {
    color: var(--wc-primary-hover) !important;
}

/* 3.2 产品标题 */
.woocommerce div.product .product_title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--wc-gray-900) !important;
    line-height: 1.4 !important;
}

/* 3.3 产品价格 */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--wc-danger) !important;
}

/* 3.4 简短描述 */
.woocommerce div.product .woocommerce-product-details__short-description {
    font-size: 14px !important;
    color: var(--wc-gray-700) !important;
    line-height: 1.7 !important;
}

/* 3.5 数量输入框 */
.woocommerce div.product .quantity .qty {
    padding: 8px 12px !important;
    font-size: 14px !important;
    border: 1px solid var(--wc-gray-300) !important;
    border-radius: var(--wc-radius) !important;
    width: 70px !important;
    transition: var(--wc-transition) !important;
}

.woocommerce div.product .quantity .qty:focus {
    border-color: var(--wc-primary) !important;
    box-shadow: 0 0 0 3px var(--wc-primary-light) !important;
}

/* 3.6 添加到购物车按钮 */
.woocommerce div.product .single_add_to_cart_button {
    padding: 10px 28px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: var(--wc-radius) !important;
    background: var(--wc-primary) !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    transition: var(--wc-transition) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.woocommerce div.product .single_add_to_cart_button:hover {
    background: var(--wc-primary-hover) !important;
}

/* 3.7 产品标签页 */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    padding: 0 !important;
    margin: 32px 0 0 0 !important;
    border-bottom: 2px solid var(--wc-border) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
    border-bottom: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    border: none !important;
    background: transparent !important;
    border-radius: var(--wc-radius) var(--wc-radius) 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    padding: 10px 18px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--wc-gray-500) !important;
    transition: var(--wc-transition) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--wc-primary) !important;
    border-bottom: 2px solid var(--wc-primary) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--wc-gray-700) !important;
}

.woocommerce div.product .woocommerce-tabs .panel {
    padding: 20px 0 !important;
    font-size: 14px !important;
    color: var(--wc-gray-700) !important;
    line-height: 1.7 !important;
}

/* ========================================
   SECTION 4: 购物车页面
   ======================================== */

/* 4.1 购物车表格 */
.woocommerce-cart .woocommerce-cart-form__cart-item {
    background: var(--wc-surface) !important;
}

.woocommerce table.shop_table {
    border: 1px solid var(--wc-border) !important;
    border-radius: var(--wc-radius-md) !important;
    border-collapse: separate !important;
    overflow: hidden !important;
    font-size: 13px !important;
}

.woocommerce table.shop_table th {
    background: var(--wc-gray-50) !important;
    padding: 12px 16px !important;
    font-weight: 600 !important;
    color: var(--wc-gray-700) !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    border-bottom: 2px solid var(--wc-border) !important;
}

.woocommerce table.shop_table td {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--wc-gray-100) !important;
    color: var(--wc-gray-700) !important;
}

/* 4.2 优惠券区域 */
.woocommerce .coupon .input-text {
    padding: 8px 12px !important;
    font-size: 13px !important;
    border: 1px solid var(--wc-gray-300) !important;
    border-radius: var(--wc-radius) !important;
    min-width: 140px !important;
    transition: var(--wc-transition) !important;
}

.woocommerce .coupon .input-text:focus {
    border-color: var(--wc-primary) !important;
    box-shadow: 0 0 0 3px var(--wc-primary-light) !important;
}

/* 4.3 购物车按钮 */
.woocommerce-cart .button:not(.checkout-button) {
    padding: 8px 18px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: var(--wc-radius) !important;
    background: var(--wc-surface) !important;
    color: var(--wc-gray-700) !important;
    border: 1px solid var(--wc-gray-300) !important;
    cursor: pointer !important;
    transition: var(--wc-transition) !important;
}

.woocommerce-cart .button:not(.checkout-button):hover {
    background: var(--wc-gray-50) !important;
    border-color: var(--wc-gray-400) !important;
}

/* 结算按钮 */
.woocommerce-cart .checkout-button {
    padding: 12px 28px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: var(--wc-radius) !important;
    background: var(--wc-primary) !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    transition: var(--wc-transition) !important;
    text-transform: none !important;
}

.woocommerce-cart .checkout-button:hover {
    background: var(--wc-primary-hover) !important;
}

/* 4.4 购物车总计 */
.woocommerce .cart-collaterals .cart_totals {
    background: var(--wc-gray-50) !important;
    border: 1px solid var(--wc-border) !important;
    border-radius: var(--wc-radius-md) !important;
    padding: 20px !important;
}

/* ========================================
   SECTION 5: 结算页面
   ======================================== */

/* 5.1 结算表单 */
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--wc-gray-800) !important;
    margin-bottom: 16px !important;
}

/* 5.2 输入框 */
.woocommerce-checkout .input-text {
    padding: 8px 12px !important;
    font-size: 13px !important;
    border: 1px solid var(--wc-gray-300) !important;
    border-radius: var(--wc-radius) !important;
    background: var(--wc-surface) !important;
    color: var(--wc-gray-800) !important;
    transition: var(--wc-transition) !important;
}

.woocommerce-checkout .input-text:focus {
    border-color: var(--wc-primary) !important;
    box-shadow: 0 0 0 3px var(--wc-primary-light) !important;
}

/* 5.3 订单审核表 */
.woocommerce-checkout-review-order-table {
    border: 1px solid var(--wc-border) !important;
    border-radius: var(--wc-radius-md) !important;
    overflow: hidden !important;
}

/* 5.4 下订单按钮 */
.woocommerce-checkout #place_order {
    padding: 12px 32px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: var(--wc-radius) !important;
    background: var(--wc-primary) !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    transition: var(--wc-transition) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.woocommerce-checkout #place_order:hover {
    background: var(--wc-primary-hover) !important;
}

/* ========================================
   SECTION 6: 我的账户页面
   ======================================== */

/* 6.1 导航标签 */
.woocommerce-MyAccount-navigation {
    background: var(--wc-surface) !important;
    border: 1px solid var(--wc-border) !important;
    border-radius: var(--wc-radius-md) !important;
    overflow: hidden !important;
    box-shadow: var(--wc-shadow-sm) !important;
}

.woocommerce-MyAccount-navigation ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid var(--wc-gray-100) !important;
    margin: 0 !important;
}

.woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: none !important;
}

.woocommerce-MyAccount-navigation ul li a {
    display: block !important;
    padding: 12px 18px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--wc-gray-700) !important;
    text-decoration: none !important;
    transition: var(--wc-transition) !important;
    border-left: 3px solid transparent !important;
}

.woocommerce-MyAccount-navigation ul li a:hover {
    background: var(--wc-gray-50) !important;
    color: var(--wc-gray-800) !important;
}

.woocommerce-MyAccount-navigation ul li.is-active a {
    background: var(--wc-primary-light) !important;
    color: var(--wc-primary) !important;
    border-left-color: var(--wc-primary) !important;
}

/* 6.2 内容区 */
.woocommerce-MyAccount-content {
    font-size: 14px !important;
    color: var(--wc-gray-700) !important;
}

.woocommerce-MyAccount-content p {
    line-height: 1.7 !important;
}

/* 6.3 订单列表表格 */
.woocommerce-MyAccount-content .woocommerce-orders-table {
    border: 1px solid var(--wc-border) !important;
    border-radius: var(--wc-radius-md) !important;
    overflow: hidden !important;
}

.woocommerce-MyAccount-content .woocommerce-orders-table th {
    background: var(--wc-gray-50) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    color: var(--wc-gray-700) !important;
}

/* 6.4 查看订单按钮 */
.woocommerce-MyAccount-content .woocommerce-button {
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border-radius: var(--wc-radius) !important;
    background: var(--wc-surface) !important;
    color: var(--wc-gray-700) !important;
    border: 1px solid var(--wc-gray-300) !important;
    cursor: pointer !important;
    transition: var(--wc-transition) !important;
}

.woocommerce-MyAccount-content .woocommerce-button:hover {
    background: var(--wc-gray-50) !important;
    border-color: var(--wc-gray-400) !important;
}

/* 6.5 编辑地址 */
.woocommerce-address-fields .input-text {
    padding: 8px 12px !important;
    border: 1px solid var(--wc-gray-300) !important;
    border-radius: var(--wc-radius) !important;
    transition: var(--wc-transition) !important;
}

.woocommerce-address-fields .input-text:focus {
    border-color: var(--wc-primary) !important;
    box-shadow: 0 0 0 3px var(--wc-primary-light) !important;
}

/* ========================================
   SECTION 7: WooCommerce 通知消息
   ======================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    padding: 12px 16px !important;
    border-radius: var(--wc-radius) !important;
    margin-bottom: 16px !important;
    font-size: 13px !important;
    border-left: 3px solid !important;
    box-shadow: var(--wc-shadow-sm) !important;
}

.woocommerce-message {
    background: var(--wc-success-light) !important;
    border-left-color: var(--wc-success) !important;
    color: #065F46 !important;
}

.woocommerce-info {
    background: var(--wc-primary-light) !important;
    border-left-color: var(--wc-primary) !important;
    color: #1E40AF !important;
}

.woocommerce-error {
    background: var(--wc-danger-light) !important;
    border-left-color: var(--wc-danger) !important;
    color: #991B1B !important;
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
    float: right !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border-radius: var(--wc-radius) !important;
    cursor: pointer !important;
}

/* ========================================
   SECTION 8: 评级星星
   ======================================== */

.woocommerce .star-rating span {
    color: var(--mt-warning, #D97706) !important;
}

/* ========================================
   SECTION 9: 全局链接色
   ======================================== */

.woocommerce a {
    color: var(--wc-primary) !important;
    transition: var(--wc-transition) !important;
}

.woocommerce a:hover {
    color: var(--wc-primary-hover) !important;
}

/* ========================================
   SECTION 10: 相关产品
   ======================================== */

.woocommerce .related.products > h2 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--wc-gray-800) !important;
    margin: 32px 0 16px 0 !important;
}

/* ========================================
   SECTION 11: 响应式
   ======================================== */

@media (max-width: 768px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .woocommerce div.product .product_title {
        font-size: 18px !important;
    }

    .woocommerce div.product p.price {
        font-size: 18px !important;
    }

    .woocommerce-MyAccount-navigation ul li a {
        padding: 10px 14px !important;
    }
}

@media (max-width: 480px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
    }
}