/* ===============================
   Home Value 模块 - 图标居中处理
   作用范围：.home-value
   =============================== */

/*
  1. 选中 value 区块中「包含 SVG 的 HTML 块」
  Gutenberg 的 HTML 块会被包在 .wp-block-html 中
*/
.home-value .wp-block-html {
    display: flex;                 /* 使用 Flex 布局 */
    justify-content: center;       /* 水平居中 SVG */
    align-items: center;           /* 垂直居中（为未来留余地） */
}

/*
  2. 防止 SVG 因为 inline 特性产生偏移
*/
.home-value .wp-block-html svg {
    display: block;                /* 消除 inline SVG 底部空隙 */
}

/*
  3.（可选但强烈建议）
     确保整个 value 单元内容都是居中逻辑一致的
*/
.home-value .wp-block-column {
    text-align: center;
}

/* ------------------ Top Categories 响应式布局 & 间距优化 ------------------ */

/* 桌面端 4列，默认 Gutenberg 设置即可，不需要修改 */

/* 平板端 (<=1024px) */
@media (max-width: 1024px) {
    .home-top-categories .wp-block-columns {
        flex-direction: row !important; /* 强制两列布局 */
        flex-wrap: wrap !important;
        margin-left: -10px;  /* 调整间距 */
        margin-right: -10px;
    }
    .home-top-categories .wp-block-column {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 20px; /* 行间距 */
    }
    .home-top-categories img {
        width: 100%;
        height: auto; /* 保持比例 */
        display: block;
    }
}

/* 手机端 (<=768px) */
@media (max-width: 768px) {
    .home-top-categories .wp-block-column {
        flex: 0 0 50% !important; /* 保持两列 */
        max-width: 50% !important;
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 20px;
    }
    .home-top-categories img {
        width: 100%;
        height: auto;
        display: block;
    }
}

/* ------------------ Top Categories 桌面端间距优化 ------------------ */
@media (min-width: 1025px) {
    .home-top-categories .wp-block-columns {
        display: flex;
        flex-wrap: nowrap;          /* 桌面端保持一行 4 列 */
        gap: 24px;                  /* 列间距（推荐 20–32px） */
    }

    .home-top-categories .wp-block-column {
        margin-bottom: 0;           /* 桌面端不需要行距 */
    }
}

@media (max-width: 1024px) {
    .home-top-categories > h2.wp-block-heading {
        font-size: 30px !important;   /* 主标题 */
		   margin-bottom: 30px;   /* 下外边距 */
    }

    .home-top-categories .wp-block-column h2,
    .home-top-categories .wp-block-column h5 {
        font-size: 16px !important;   /* 分类标题 */
    }
}

@media (max-width: 768px) {
    .home-top-categories > h2.wp-block-heading {
        font-size: 22px !important;   /* 主标题：不压迫 */
        margin-bottom: 30px;   /* 下外边距 */
    }

    .home-top-categories .wp-block-column h2,
    .home-top-categories .wp-block-column h5 {
        font-size: 15px !important;   /* 分类标题更紧凑 */
    }
}


/* Featured Products 文本自适应字体（强制生效版） */
.home .featured-products-text {
    font-size: clamp(22px, 4vw, 30px) !important;
    line-height: 1.2;
    font-weight: 500;
	  margin-top: 50px;   /* 上外边距 */
	  margin-bottom: 0px;   /* 下外边距 */
}


/* 订阅表单核心样式 - 统一设置所有通用属性，避免重复 */
.subscribe-form-wrapper {
  display: flex;
  justify-content: center;
  padding: 10px 0 20px 0; /* 统一顶部/底部padding，所有设备通用 */
  margin-top: 15px; /* 统一与上方段落的间距，所有设备通用 */
  width: 100%;
  box-sizing: border-box;
}

.subscribe-form {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 600px; /* 桌面端最大宽度，响应式仅微调此值 */
  padding: 0 15px; /* 统一左右内边距，避免重复设置 */
}

/* 输入框通用样式 - 所有设备统一配置 */
.subscribe-form input[type="email"] {
  flex: 1;
  height: 36px !important; /* 全设备统一高度 */
  padding: 0 3px; /* 统一内边距 */
  margin-right: 4px; /* 全设备统一空隙，无需分设备调整 */
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px; /* 全设备统一字体大小 */
  color: #333;
  background-color: #fff;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
  min-width: 0; /* 防止小屏幕溢出，仅设一次 */
}

.subscribe-form input[type="email"]::placeholder {
  color: #999;
  font-size: 14px; /* 全设备统一占位符字体 */
  opacity: 1;
}

.subscribe-form input[type="email"]:focus {
  outline: none;
  border-color: #ff0000;
}

/* 按钮通用样式 - 所有设备统一配置 */
.subscribe-form button[type="submit"] {
  height: 36px /* 全设备统一高度 */
  padding: 0 12px; /* 统一内边距，适配Contact Us文本 */
  border: none;
  border-radius: 6px;
  font-size: 14px; /* 全设备统一字体大小 */
  font-weight: 500; /* 全设备统一字重 */
  color: #fff;
  background-color: #ff0000;
  cursor: pointer;
  transition: background-color 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
  width: auto; /* 适配文本宽度，仅设一次 */
}

.subscribe-form button[type="submit"]:hover {
  background-color: #cc0000;
}

/* 响应式仅保留差异化配置，无重复通用样式 */
/* 平板端：仅调整最大宽度，其余继承通用样式 */
@media (max-width: 991px) {
  .subscribe-form {
    max-width: 500px;
  }
}

/* 手机端：仅调整最大宽度、间距微调，无重复样式 */
@media (max-width: 767px) {
  .subscribe-form {
    max-width: 100%;
  }
  .subscribe-form-wrapper {
    margin-top: 10px; /* 仅微调与上方段落的间距，其余padding继承通用值 */
  }
}