/**
 * Tweaks CSS - 自定义样式微调
 * 
 * 本文件包含所有自定义样式调整，使用高特异性选择器替代 !important
 * 加载顺序：最后加载，确保覆盖所有其他样式
 * 
 * 组织结构：
 * 1. 产品变体样式（购物车、Mini Cart、结账页面）
 * 2. 结账页面专有样式
 * 3. 响应式样式
 * 
 * 最佳实践：
 * - 使用合理的选择器特异性，避免 !important
 * - 按功能模块组织代码
 * - 添加清晰的注释说明
 * - 保持代码可维护性
 */

/* ========================================
   1. 产品变体样式 - 购物车页面
   ======================================== */

/**
 * 购物车主页面 - 变体布局
 * 使用 CSS Grid 实现 dt 和 dd 并排，每对强制换行
 */
.woocommerce-cart .variation,
.woocommerce-page table.shop_table .variation,
.woocommerce table.cart .variation,
.woocommerce-js td.product-name dl.variation {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 1px 5px;
    float: none;
    flex-wrap: nowrap;
}

/* 变体容器边距 */
.woocommerce td.product-name dl.variation {
    margin-top: 0;
    padding-top: 0;
}

/* 变体 dt/dd 基础样式 */
.variation dd {
    margin: 0;
    padding: 0;
    display: initial;
}

.variation dd p {
    display: inline;
    margin: 0;
    padding: 0;
    font-weight: 700;
}

/* 变体标签和值的字体样式 */
.variation dt {
    font-size: 12px;
    font-weight: 500;
    color: #999999;
}

.variation dd {
    font-size: 12px;
    font-weight: 700;
    color: #333333;
}

/* 购物车页面 - 确保变体值为粗体 */
.woocommerce-cart table.shop_table .variation dd,
.woocommerce-page table.shop_table .variation dd,
.woocommerce table.cart .variation dd {
    font-weight: 700;
}

/* 购物车页面 - 覆盖 WooCommerce 对 p 标签的 font-weight: 400 */
.woocommerce-cart table.shop_table .variation dd p,
.woocommerce-page table.shop_table .variation dd p,
.woocommerce table.cart .variation dd p,
.woocommerce-js td.product-name dl.variation dd p {
    font-weight: 700;
}

/* 购物车产品缩略图尺寸 */
.woocommerce-js table.shop_table .product-thumbnail img,
.woocommerce-page table.shop_table .product-thumbnail img {
    width: auto;
    max-width: 200px;
}

/* ========================================
   2. 产品变体样式 - Mini Cart
   ======================================== */

/**
 * Mini Cart - 变体布局
 * 使用 block 布局，避免 dt/dd 错位
 */
.woocommerce-mini-cart .variation {
    display: block;
    position: relative;
    padding-bottom: 10px;
    width: 100%;
    float: none;
    clear: both;
    overflow: visible;
}

/* Mini Cart - 图片附件容器 */
.woocommerce-mini-cart .variation > .variation-images-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding-right: 0;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
    border-top: 1px solid #f0f0f0;
    padding-top: 8px;
    position: relative;
    z-index: 1;
    clear: both;
    order: 999;
}

/* Mini Cart - dt/dd 样式重置 */
.woocommerce-mini-cart .variation dd,
.woocommerce-mini-cart .variation dt {
    display: revert;
}

.woocommerce-mini-cart .variation dd {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    min-height: 0;
    max-height: none;
    font-weight: 700;
}

/* Mini Cart - 产品名称样式 */
html body .woocommerce-mini-cart-item > a:not(.remove),
html body .widget_shopping_cart .mini_cart_item > a:not(.remove),
body .woocommerce .woocommerce-mini-cart-item > a:not(.remove) {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    display: block;
    margin-bottom: 5px;
    padding-right: 30px; /* 为remove按钮留出空间,防止重叠 */
}

/* Mini Cart - variation 容器 */
.woocommerce-mini-cart dl.variation {
    overflow: visible;
    width: 100%;
    clear: both;
    height: auto;
}

.woocommerce-mini-cart .variation > .variation-images-wrapper::after {
    content: "";
    display: table;
    clear: both;
    width: 100%;
}

/* Mini Cart - dd 元素高度 */
body .woocommerce-mini-cart dl.variation dd {
    height: auto;
    display: block;
}

/* Mini Cart - 产品主图样式 */
#astra-mobile-cart-drawer .woocommerce-mini-cart-item > a > img.attachment-woocommerce_thumbnail,
.widget_shopping_cart .woocommerce-mini-cart-item > a > img.attachment-woocommerce_thumbnail {
    border: 1px solid #ddd;
    border-radius: 10px;
}

/* ========================================
   3. 图片变体卡片样式 - 通用
   ======================================== */

/**
 * 图片变体容器
 * 使用 Flexbox 实现响应式布局
 */
.variation-images-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 15px;
    grid-column: 1 / -1;
    padding-right: 15px;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
}

/* 图片卡片基础样式 */
.variation-image-card {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 8px 5px;
    display: flex;
    flex-direction: column;
    width: 90px;
    box-sizing: border-box;
    margin: 0 10px 10px 0;
    align-items: center;
    justify-content: flex-start;
    min-height: 140px;
}

/* 卡片内的标题 */
.variation-image-card dt {
    font-size: 11px;
    font-weight: 500;
    color: #666;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    text-align: center;
    width: 100%;
}

/* 卡片内的值容器 */
.variation-image-card dd {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    font-weight: 700;
}

/* 第一个 dd (Name 值) */
.variation-image-card dd:first-of-type {
    margin-bottom: 6px;
    font-weight: 700;
    color: #222222;
    text-align: center;
    width: 100%;
    font-size: 14px;
    line-height: 1.3;
    padding: 0;
}

/* 卡片内的图片 */
.variation-image-card img.wcpa_img {
    width: auto;
    max-width: 75px;
    height: auto;
    max-height: 75px;
    display: block;
    border-radius: 4px;
    margin: 0 auto;
    object-fit: contain;
}

/* 
 * 购物车页面 - 覆盖 Astra 主题的图片尺寸限制
 * Astra 主题有一条规则强制设置 table.cart img { width: 32px }
 * 需要使用更高特异性的选择器来覆盖
 */
.woocommerce-cart table.cart .variation-image-card img.wcpa_img,
.woocommerce table.cart .variation-image-card img.wcpa_img {
    width: auto;
    max-width: 75px;
    height: auto;
    max-height: 75px;
}

/* 卡片内的文件名 */
.variation-image-card dd p,
.variation-image-card dd span {
    font-size: 11px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 4px 0 0 0;
    padding: 0;
    color: #333333;
    text-align: center;
    box-sizing: border-box;
}

/* 卡片内的链接 */
.variation-image-card dd a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    width: 100%;
}

/* 确保图片变体占据整个宽度 */
.variation dt:has(+ .variation-images-wrapper),
.variation-images-wrapper {
    grid-column: 1 / -1;
}

/* 图片项目 */
.variation-images-wrapper .variation-image-item {
    flex-shrink: 0;
}

.variation-image-item p {
    margin: 0;
    padding: 0;
}

.variation-image-item .wcpa_img {
    max-width: 75px;
    display: block;
}

/* 隐藏占位符 dd */
.variation dd.image-dd-placeholder {
    display: none;
}

/* ========================================
   4. 图片变体卡片样式 - Mini Cart 专用
   ======================================== */

.woocommerce-mini-cart .variation-image-card {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    width: 90px;
    min-width: 90px;
    max-width: 120px;
    margin: 0;
    margin-bottom: 8px;
    box-sizing: border-box;
    background: #fff;
    align-items: center;
    flex: 0 0 auto;
    float: none;
    overflow: hidden;
    height: 140px;
    min-height: 140px;
    position: relative;
}

.woocommerce-mini-cart .variation-image-card dt {
    font-size: 12px;
    font-weight: 500;
    color: #999999;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    text-align: center;
}

.woocommerce-mini-cart .variation-image-card dd {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    min-height: 0;
    max-height: none;
    font-weight: 700;
}

/* Mini Cart - 图片样式 */
.woocommerce-mini-cart .variation-image-card img.wcpa_img,
.woocommerce-mini-cart dd img.wcpa_img {
    width: auto;
    max-width: 70px;
    height: auto;
    max-height: 70px;
    display: block;
    border-radius: 4px;
    object-fit: contain;
    margin: 0 auto 6px auto;
}

/* 强制 Mini Cart 中的图片居中 */
body .woocommerce-mini-cart .variation-image-card img.wcpa_img,
body .woocommerce-mini-cart dd img.wcpa_img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    float: none;
    position: static;
    transform: none;
}

/* Mini Cart - DD 容器文本居中 */
body .woocommerce-mini-cart .variation-image-card dd {
    text-align: center;
    width: 100%;
    display: block;
}

.woocommerce-mini-cart .variation-image-card dd p,
.woocommerce-mini-cart .variation-image-card dd span {
    font-size: 11px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 4px 0 0 0;
    padding: 0;
    color: #333333;
    text-align: center;
    box-sizing: border-box;
}

/* Mini Cart - 特别处理卡片内部的 dt/dd 结构 */
.woocommerce-mini-cart .variation-image-card dt {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0;
    margin-bottom: 6px;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    color: #999999;
}

.woocommerce-mini-cart .variation-image-card dd {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}

.woocommerce-mini-cart .variation-image-card dd p {
    display: block;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 100%;
    position: relative;
    height: auto;
}

.woocommerce-mini-cart .variation-image-card dd a {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    width: 100%;
    position: relative;
    align-items: center;
    height: auto;
}

/* Mini Cart - 特殊处理链接内的图片 */
.woocommerce-mini-cart .variation-image-card dd a img,
.woocommerce-mini-cart dd a img.wcpa_img {
    position: relative;
    margin: 0 auto;
    display: block;
    width: auto;
    height: auto;
    max-width: 70px;
    max-height: none;
}

.woocommerce-mini-cart .variation-image-card dd a span {
    margin-top: 4px;
    display: block;
    width: 100%;
}

/* Mini Cart - 图片样式（超高优先级） */
html body .woocommerce-mini-cart img.wcpa_img,
html body .woocommerce-mini-cart .variation dd img.wcpa_img,
html body .woocommerce-mini-cart .variation dd a img.wcpa_img,
html body .woocommerce-mini-cart img.wcpa_img[style*="max-width"],
html body .woocommerce-mini-cart img.wcpa_img[style*="max-width:75px"],
html body .widget_shopping_cart img.wcpa_img,
html body .widget_shopping_cart .variation dd img.wcpa_img,
html body .widget_shopping_cart .variation dd a img.wcpa_img,
html body div.woocommerce-mini-cart img.wcpa_img,
html body div.widget_shopping_cart img.wcpa_img,
html body .woocommerce .woocommerce-mini-cart img.wcpa_img,
html body .woocommerce .widget_shopping_cart img.wcpa_img {
    height: auto;
    max-height: 70px;
    width: auto;
    max-width: 70px;
    object-fit: contain;
    transform: none;
    top: 0;
    position: static;
}

/* Mini Cart - 修复 dt 和图片之间的重叠问题 */
html body .woocommerce-mini-cart .variation dt[class*="variation-Image"],
html body .widget_shopping_cart .variation dt[class*="variation-Image"],
html body div.woocommerce-mini-cart .variation dt[class*="variation-Image"],
html body div.widget_shopping_cart .variation dt[class*="variation-Image"],
html body .woocommerce .woocommerce-mini-cart .variation dt[class*="variation-Image"],
html body .woocommerce .widget_shopping_cart .variation dt[class*="variation-Image"],
body .woocommerce-mini-cart .variation dt[class*="variation-Image"],
body .widget_shopping_cart .variation dt[class*="variation-Image"],
.woocommerce-mini-cart .variation dt[class*="variation-Image"],
.widget_shopping_cart .variation dt[class*="variation-Image"] {
    margin-top: auto;
    position: relative;
    z-index: 10;
    clear: both;
}

/* ========================================
   5. 结账页面 - Review Order 区域专用样式
   ======================================== */

/**
 * 结账页面 - 产品名称列布局
 * 使用 Flexbox 确保正确的宽度分配
 */
body.woocommerce-checkout #ast-order-review-content table.woocommerce-checkout-review-order-table tbody tr td.product-name,
body.woocommerce-checkout form.checkout #order_review table.woocommerce-checkout-review-order-table tbody tr td.product-name {
    display: flex;
    width: 120%;
    align-items: center;
    padding-right: 0;
}

/* 结账页面 - 表格布局 */
body.woocommerce-checkout #ast-order-review-content table.woocommerce-checkout-review-order-table,
body.woocommerce-checkout form.checkout #order_review table.woocommerce-checkout-review-order-table {
    table-layout: auto;
}

/* 结账页面 - 列宽度 */
body.woocommerce-checkout #ast-order-review-content table.woocommerce-checkout-review-order-table .product-name,
body.woocommerce-checkout form.checkout #order_review table.woocommerce-checkout-review-order-table .product-name {
    width: 70%;
}

body.woocommerce-checkout #ast-order-review-content table.woocommerce-checkout-review-order-table .product-total,
body.woocommerce-checkout form.checkout #order_review table.woocommerce-checkout-review-order-table .product-total {
    width: 30%;
}

/* 结账页面 - 产品名称样式 */
body.woocommerce-checkout #ast-order-review-content table.woocommerce-checkout-review-order-table .ast-product-name,
body.woocommerce-checkout form.checkout #order_review table.woocommerce-checkout-review-order-table .ast-product-name,
body.woocommerce-checkout #ast-order-review-content table.woocommerce-checkout-review-order-table .product-name > a,
body.woocommerce-checkout form.checkout #order_review table.woocommerce-checkout-review-order-table .product-name > a {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 3px;
}

/* ========================================
   6. 结账页面 - 变体样式
   ======================================== */

/**
 * 结账页面 - 变体布局
 * 与购物车页面保持一致的 Grid 布局
 */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .variation,
body.woocommerce-checkout #ast-order-review-content table.woocommerce-checkout-review-order-table .variation,
body.woocommerce-checkout form.checkout #order_review table.woocommerce-checkout-review-order-table .variation,
body.woocommerce-checkout .wcf-cartflows-review-order-wrapper table.woocommerce-checkout-review-order-table .variation {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 1px 5px;
    margin-top: 8px;
}

/* 结账页面 - dt 样式 */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .variation dt {
    font-size: 12px;
    font-weight: 500;
    color: #999999;
    padding-top: 0;
    padding-bottom: 0;
}

/* 结账页面 - dd 样式 */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .variation dd {
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-weight: 700;
    color: #333333;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table .variation dd p {
    display: inline;
    margin: 0;
    padding: 0;
    font-weight: 700;
}

/* 结账页面 - 图片变体容器 */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .variation-images-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 15px;
    grid-column: 1 / -1;
    padding-right: 15px;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
}

/* 结账页面 - 图片卡片 */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .variation-image-card {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 8px 5px;
    display: flex;
    flex-direction: column;
    width: 90px;
    box-sizing: border-box;
    margin: 0 10px 10px 0;
    align-items: center;
    justify-content: flex-start;
    min-height: 140px;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table .variation-image-card dt {
    font-size: 11px;
    font-weight: 500;
    color: #666;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    text-align: center;
    width: 100%;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table .variation-image-card dd {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    font-weight: 700;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table .variation-image-card dd:first-of-type {
    margin-bottom: 6px;
    font-weight: 700;
    color: #222222;
    text-align: center;
    width: 100%;
    font-size: 14px;
    line-height: 1.3;
    padding: 0;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table .variation-image-card img.wcpa_img {
    width: auto;
    max-width: 75px;
    height: auto;
    max-height: 75px;
    display: block;
    border-radius: 4px;
    margin: 0 auto;
    object-fit: contain;
}

/* 
 * 结账页面 - 覆盖 WooCommerce 和 Astra 主题的默认图片样式
 * 确保变体图片显示为 75px 而不是 32px
 */
.woocommerce-checkout table.cart .variation-image-card img.wcpa_img {
    width: auto;
    max-width: 75px;
    height: auto;
    max-height: 75px;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table .variation-image-card dd p,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .variation-image-card dd span {
    font-size: 11px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 4px 0 0 0;
    padding: 0;
    color: #333333;
    text-align: center;
    box-sizing: border-box;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table .variation-image-card dd a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    width: 100%;
}

/* ========================================
   7. 响应式样式 - 移动端优化
   ======================================== */

/**
 * 桌面端 - CartFlows 结账页面 Logo 样式
 * 让 Logo 更大，并与表单左对齐
 * 使用 cartflows-instant-checkout 确保只影响 CartFlows 结账页面
 */
body.woocommerce-checkout.cartflows-instant-checkout header,
body.woocommerce-checkout.cartflows-instant-checkout .main-header--wrapper {
    justify-content: flex-start;
    padding-left: 0;
    padding-right: 0;
}

body.woocommerce-checkout.cartflows-instant-checkout .main-header--site-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-left: 62.5px; /* 与表单输入框左对齐 */
}

body.woocommerce-checkout.cartflows-instant-checkout .custom-logo-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-left: 0; /* 不累加margin */
}

/* Logo 图片 - 桌面端放大 */
/* 使用更高特异性覆盖 CartFlows 的 45% 限制 */
body.woocommerce-checkout.cartflows-instant-checkout .main-header--site-logo img.custom-logo,
body.woocommerce-checkout.cartflows-instant-checkout .custom-logo {
    max-width: 180px;
    width: auto;
    height: auto;
    max-height: 60px;
}

/**
 * 移动端 (最大宽度 768px)
 */
@media (max-width: 768px) {
    /* CartFlows 结账页面 Header */
    body.woocommerce-checkout.cartflows-instant-checkout .main-header--wrapper {
        padding: 15px 20px;
        min-height: 70px;
    }
    
    /* Logo 容器 */
    body.woocommerce-checkout.cartflows-instant-checkout .main-header--site-logo,
    body.woocommerce-checkout.cartflows-instant-checkout .custom-logo-link {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    
    /* Logo 图片 */
    body.woocommerce-checkout.cartflows-instant-checkout .custom-logo {
        max-width: 140px;
        width: auto;
        height: auto;
        max-height: 45px;
    }
}

/**
 * 小屏手机 (最大宽度 480px)
 */
@media (max-width: 480px) {
    body.woocommerce-checkout.cartflows-instant-checkout .main-header--wrapper {
        padding: 12px 15px;
        min-height: 60px;
    }
    
    body.woocommerce-checkout.cartflows-instant-checkout .custom-logo {
        max-width: 120px;
        max-height: 40px;
    }
}

/**
 * 超小屏 (最大宽度 375px) - iPhone SE 等
 */
@media (max-width: 375px) {
    body.woocommerce-checkout.cartflows-instant-checkout .custom-logo {
        max-width: 110px;
        max-height: 35px;
    }
}

/* ========================================
   8. 购物车页面 Coupon 优化 - 手机端
   ======================================== */

/**
 * 购物车 Coupon 表单优化
 * 解决手机端按钮换行问题,确保输入框和按钮等高
 */
.woocommerce-cart .coupon {
    display: flex;
    gap: 8px;
    align-items: stretch; /* 让子元素等高 */
}

/* Coupon 输入框 - 占据更多空间 */
.woocommerce-cart .coupon input[name="coupon_code"] {
    flex: 1 1 auto;
    min-width: 0; /* 允许输入框缩小 */
    height: auto; /* 自动高度 */
    box-sizing: border-box; /* 包含padding和border */
}

/* Coupon 按钮优化 - 与输入框等高 */
body.woocommerce-cart .coupon button[name="apply_coupon"],
body.woocommerce-cart .coupon .button,
.woocommerce-cart .coupon button[name="apply_coupon"],
.woocommerce-cart .coupon .button {
    flex: 0 0 auto;
    white-space: nowrap; /* 防止文字换行 */
    padding: 0 12px; /* 只设置左右padding,上下由高度自动计算 */
    height: auto; /* 自动高度,与输入框对齐 */
    min-height: 35px; /* 最小高度与输入框一致 */
    box-sizing: border-box; /* 包含padding和border */
    display: flex !important; /* 强制使用flex布局 */
    align-items: center; /* 文字垂直居中 */
    justify-content: center; /* 文字水平居中 */
    line-height: 1; /* 重置行高 */
}

/**
 * 手机端 (最大宽度 480px) - 进一步优化
 */
@media (max-width: 480px) {
    .woocommerce-cart .coupon {
        gap: 6px;
    }
    
    /* 缩小按钮字体和padding */
    .woocommerce-cart .coupon button[name="apply_coupon"],
    .woocommerce-cart .coupon .button {
        font-size: 13px;
        padding: 8px 10px;
        min-width: auto;
    }
}

/**
 * 超小屏 (最大宽度 390px) - iPhone 12/13 Mini 等
 */
@media (max-width: 390px) {
    .woocommerce-cart .coupon button[name="apply_coupon"],
    .woocommerce-cart .coupon .button {
        font-size: 12px;
        padding: 8px 8px;
    }
}

/* ========================================
   7. Thank You 页面 - Order Review 样式
   ======================================== */

/**
 * Thank You 页面 - 变体信息样式
 * 使用与结账页面一致的样式，确保视觉统一
 * 
 * 页面特征：
 * - body.woocommerce-order-received
 * - 使用 .wcf-ic-cart-order-item 作为产品项容器
 * - 使用 .wcf-product-image 包含产品图片和名称
 * - 使用 .wcf-ic-cart-order-item__info-varient 包含变体信息
 * - 变体使用 ul.wc-item-meta 而不是 dl.variation
 */

/* Thank You 页面 - 修复 .wcf-product-image 容器布局，使内容垂直排列 */
body.woocommerce-order-received .wcf-product-image {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 0 !important;
}

/* Thank You 页面 - 确保产品名称和变体信息全宽显示 */
body.woocommerce-order-received .wcf-product-image .wcf-ic-cart-order-item__info-name,
body.woocommerce-order-received .wcf-product-image .wcf-ic-cart-order-item__info-varient {
    width: 100%;
}

/* Thank You 页面 - 变体容器布局 */
body.woocommerce-order-received .wcf-ic-cart-order-item__info-varient {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Thank You 页面 - wc-item-meta 列表样式 */
body.woocommerce-order-received .wcf-ic-cart-order-item__info-varient .wc-item-meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

/* Thank You 页面 - 单个变体项样式 */
body.woocommerce-order-received .wcf-ic-cart-order-item__info-varient .wc-item-meta li {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px;
    align-items: start;
    margin: 0;
    padding: 0;
}

/* Thank You 页面 - 变体标签（label）样式 */
body.woocommerce-order-received .wcf-ic-cart-order-item__info-varient .wc-item-meta-label {
    font-size: 13px;
    font-weight: 500;
    color: #666;
    margin: 0;
    white-space: nowrap;
}

/* Thank You 页面 - 变体值样式 */
body.woocommerce-order-received .wcf-ic-cart-order-item__info-varient .wc-item-meta p {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    margin: 0;
    line-height: 1.5;
}

/* Thank You 页面 - 变体值中的链接样式 */
body.woocommerce-order-received .wcf-ic-cart-order-item__info-varient .wc-item-meta p a {
    color: #0073aa;
    text-decoration: none;
    word-break: break-word;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

body.woocommerce-order-received .wcf-ic-cart-order-item__info-varient .wc-item-meta p a:hover {
    text-decoration: underline;
}

/* Thank You 页面 - 上传的图片样式 */
body.woocommerce-order-received .wcf-ic-cart-order-item__info-varient .wc-item-meta img.wcpa_img {
    max-width: 60px !important;
    height: auto;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: block;
    margin-bottom: 4px;
}

/* Thank You 页面 - 文件名显示 */
body.woocommerce-order-received .wcf-ic-cart-order-item__info-varient .wc-item-meta p a span {
    font-size: 12px;
    color: #666;
}

/* Thank You 页面 - 图片项特殊处理 */
body.woocommerce-order-received .wcf-ic-cart-order-item__info-varient .wc-item-meta li:has(img.wcpa_img) {
    grid-template-columns: max-content 1fr;
    align-items: center;
}

/* Thank You 页面 - 图片变体包装器样式（与结账页面一致）*/
body.woocommerce-order-received .wcf-ic-cart-order-item__info-varient .variation-images-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 8px;
    width: 100%;
    justify-content: flex-start;
}

/* Thank You 页面 - 图片卡片样式（与结账页面一致）*/
body.woocommerce-order-received .wcf-ic-cart-order-item__info-varient .variation-image-card {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 8px 5px;
    display: flex;
    flex-direction: column;
    width: 90px;
    box-sizing: border-box;
    margin: 0 10px 10px 0;
    align-items: center;
    justify-content: flex-start;
    min-height: 140px;
}

/* Thank You 页面 - 卡片内的 dt 样式 */
body.woocommerce-order-received .wcf-ic-cart-order-item__info-varient .variation-image-card dt {
    font-size: 11px;
    font-weight: 500;
    color: #666;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    text-align: center;
    width: 100%;
    margin: 0;
}

/* Thank You 页面 - 卡片内的 dd 样式 */
body.woocommerce-order-received .wcf-ic-cart-order-item__info-varient .variation-image-card dd {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    font-weight: 700;
}

/* Thank You 页面 - 第一个 dd (Name 值) */
body.woocommerce-order-received .wcf-ic-cart-order-item__info-varient .variation-image-card dd:first-of-type {
    margin-bottom: 6px;
    font-weight: 700;
    color: #222222;
    text-align: center;
    width: 100%;
    font-size: 14px;
    line-height: 1.3;
    padding: 0;
}

body.woocommerce-order-received .wcf-ic-cart-order-item__info-varient .variation-image-card dd p {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    text-align: center;
    margin: 0;
}

/* Thank You 页面 - 卡片内的图片样式 */
body.woocommerce-order-received .wcf-ic-cart-order-item__info-varient .variation-image-card img.wcpa_img {
    width: auto !important;
    max-width: 75px !important;
    height: auto !important;
    max-height: 75px !important;
    display: block;
    border-radius: 4px;
    margin: 0 auto;
    object-fit: contain;
    border: none;
}

/**
 * Thank You 页面 - 响应式样式
 */

/* 平板端 (最大宽度 768px) */
@media (max-width: 768px) {
    body.woocommerce-order-received .wcf-ic-cart-order-item__info-varient {
        margin-top: 10px;
        padding-top: 6px;
    }
    
    body.woocommerce-order-received .wcf-ic-cart-order-item__info-varient .wc-item-meta {
        gap: 6px;
    }
    
    body.woocommerce-order-received .wcf-ic-cart-order-item__info-varient .wc-item-meta-label,
    body.woocommerce-order-received .wcf-ic-cart-order-item__info-varient .wc-item-meta p {
        font-size: 12px;
    }
    
    body.woocommerce-order-received .wcf-ic-cart-order-item__info-varient .wc-item-meta img.wcpa_img {
        max-width: 50px !important;
    }
}

/* 手机端 (最大宽度 480px) */
@media (max-width: 480px) {
    body.woocommerce-order-received .wcf-ic-cart-order-item__info-varient {
        margin-top: 8px;
        padding-top: 5px;
    }
    
    body.woocommerce-order-received .wcf-ic-cart-order-item__info-varient .wc-item-meta {
        gap: 5px;
    }
    
    /* 在小屏幕上，标签和值可能需要换行显示 */
    body.woocommerce-order-received .wcf-ic-cart-order-item__info-varient .wc-item-meta li {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    
    body.woocommerce-order-received .wcf-ic-cart-order-item__info-varient .wc-item-meta-label {
        white-space: normal;
    }
}

/* ========================================
   11. Thank You 页面 - Order Summary 手机端修复
   ======================================== */

/**
 * 修复手机端 Order Summary 展开后覆盖底部内容的问题
 * 
 * 问题：插件默认使用 position: sticky，在手机端展开 Order Summary 时
 * 由于内容高度超过屏幕高度，sticky 定位导致它一直粘在顶部，覆盖了下面的内容
 * 
 * 解决方案：在手机端移除 sticky 定位，改为 static，让页面自然撑开
 * 提升特异性：使用 body 类 + 多级选择器覆盖插件样式
 */

/* 手机端和平板端 (最大宽度 768px) */
@media (max-width: 768px) {
    /* 移除 sticky 定位，让 Order Summary 自然撑开页面 */
    body.woocommerce-order-received .wcf-instant-thankyou .wcf-collapsed-order-review-section.top.wcf-show {
        position: static;
    }
    
    /* 可选：如果需要限制最大高度并允许内部滚动，可以使用以下样式代替上面的规则 */
    /*
    body.woocommerce-order-received .wcf-instant-thankyou .wcf-collapsed-order-review-section.top.wcf-show {
        position: static;
        max-height: calc(100vh - 200px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    */
}