/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* =======================================================
   通用修复：仅针对移动端/窄屏 (<= 768px)
   彻底解决加购组件在移动端的幽灵空白和变形
   ======================================================= */
@media (max-width: 768px) {
    /* 1. 精准定位所有的加购组件，切断纵向拉伸，强制宽度 100% */
    div[data-widget_type="wd_single_product_add_to_cart.default"],
    div[data-widget_type="wd_single_product_add_to_cart.default"] > .elementor-widget-container,
    form.cart .single_variation_wrap,
    .rev-campaign-viewport {
        flex: 0 0 auto !important;  /* 禁止高度被拉伸 */
        height: auto !important;    /* 高度只由内容决定 */
        width: 100% !important;     /* 强制 100% 宽度，防止卡片被挤压 */
        max-width: 100% !important;
        min-height: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* 2. 防止在移动端窄容器下，优惠徽章和标签被挤变形 */
    .rev-price-discount, 
    .rev-badge-container {
        white-space: nowrap !important;  /* 强制文字不换行 */
        flex-shrink: 0 !important;       /* 拒绝被父级挤压 */
        min-width: max-content !important; 
    }

	/* 修复移动端 MOST POPULAR 标签被截断的问题 */
	.rev-card-ribbon {
		inset-inline: auto !important;       /* 解除插件原生的左右 8px 限制 */
		padding: 0 !important;               /* 清空导致截断的 padding-inline-start */
		overflow: visible !important;        /* 解除隐藏，防止文字被切 */
		left: 50% !important;                /* 保持水平居中 */
		transform: translateX(-50%) !important;
		white-space: nowrap !important;      /* 强制不换行 */
		display: flex !important;
		justify-content: center !important;
		width: max-content !important;       /* 宽度随文字自适应 */
	}

	/* 防止插件原生限制标签内部文字的宽度 */
	.rev-card-ribbon-content {
		max-width: none !important;          /* 解除插件原生的 95% 宽度限制 */
		white-space: nowrap !important;
	}
}

/* 强制插件卡片容器宽度 100%，与加购按钮对齐 */
.rev-campaign-container{
	--campaign-width-base:100% !important;
}

.wcps-loop-title {
/*    font-family: 'Your-Custom-Font', sans-serif; */
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #333333 !important;
    letter-spacing: 1px;
/*    text-transform: uppercase; */
}

.wcps-loop-subtitle-text, 
.wcps-subtitle-text {
	font-size: 13px;
   color: #777777;
	text-transform: none !important;
   font-weight: 300; /* 更细的字体 */
   letter-spacing: 1px;
}

.wcps-cart-subtitle {
    font-size: 11px;
    color: #999999;
}

/* TAB表格修复 */
/* 1. 锁死外层滚动：Woodmart 的 .wd-scroll 容器 */
#tab-wd_custom_tab.wd-scroll,
#tab-wd_custom_tab .wd-scroll-content {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* 2. 只让表格自己横向滚动 */
#tab-wd_custom_tab .wd-scroll-content table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    scrollbar-width: thin !important;
    scrollbar-color: #d1d1d1 #f5f5f5 !important;
}

/* 3. 单元格 */
#tab-wd_custom_tab .wd-scroll-content table th,
#tab-wd_custom_tab .wd-scroll-content table td {
    padding: 12px 15px !important;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #eee !important;
    white-space: nowrap !important;
    min-width: 80px !important;
}

/* 4. 表头 */
#tab-wd_custom_tab .wd-scroll-content table th {
    font-weight: 600 !important;
    color: #333 !important;
    border-bottom: 2px solid #ddd !important;
    background-color: #f9f9f9 !important;
}

/* 5. 第一列固定 */
#tab-wd_custom_tab .wd-scroll-content table th:first-child,
#tab-wd_custom_tab .wd-scroll-content table td:first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 2 !important;
    font-weight: bold !important;
    border-right: 1px solid #eee !important;
    background-color: #fff !important;
}
#tab-wd_custom_tab .wd-scroll-content table th:first-child {
    background-color: #f9f9f9 !important;
    z-index: 3 !important;
}

/* 6. 斑马线 */
#tab-wd_custom_tab .wd-scroll-content table tbody tr:nth-child(even) td {
    background-color: #fafafa !important;
}

/* 7. 滚动条美化 */
#tab-wd_custom_tab .wd-scroll-content table::-webkit-scrollbar { height: 5px !important; }
#tab-wd_custom_tab .wd-scroll-content table::-webkit-scrollbar-track {
    background: #f5f5f5 !important; border-radius: 10px !important;
}
#tab-wd_custom_tab .wd-scroll-content table::-webkit-scrollbar-thumb {
    background: #d1d1d1 !important; border-radius: 10px !important;
}


/* =======================================================
   原生/插件通用：数量框与加购按钮强制换行，统一上间距
   ======================================================= */

/* 1. 父级容器：允许换行 */
form.cart .woocommerce-variation-add-to-cart {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
}

/* 2. 原生的数量选择框：独占一行，并彻底清空它自带的底部间距 */
form.cart .woocommerce-variation-add-to-cart .quantity,
form.cart .woocommerce-variation-add-to-cart div.quantity {
    flex: 1 1 100% !important; 
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
}

/* 3. 加购按钮：独占一行，100% 宽度，并统一增加顶部间距 */
form.cart .single_add_to_cart_button {
    flex: 1 1 100% !important; 
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin: 15px 0 0 0 !important;
}

/* 4. 顺手清理插件外层自带的边距，防止它在移动端捣乱 */
form.cart .rev-campaign-viewport {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}