:root {
--wd-text-font: "Inter", Arial, Helvetica, sans-serif;
--wd-text-font-weight: 400;
--wd-text-color: #767676;
--wd-text-font-size: 15px;
--wd-title-font: "League Spartan", Arial, Helvetica, sans-serif;
--wd-title-font-weight: 600;
--wd-title-color: #242424;
--wd-entities-title-font: "League Spartan", Arial, Helvetica, sans-serif;
--wd-entities-title-font-weight: 600;
--wd-entities-title-color: #333333;
--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
--wd-alternative-font: var(--wd-text-font);
--wd-widget-title-font: "League Spartan", Arial, Helvetica, sans-serif;
--wd-widget-title-font-weight: 600;
--wd-widget-title-transform: uppercase;
--wd-widget-title-color: #333;
--wd-widget-title-font-size: 14px;
--wd-header-el-font: "Inter", Arial, Helvetica, sans-serif;
--wd-header-el-font-weight: 500;
--wd-header-el-transform: uppercase;
--wd-header-el-font-size: 13px;
--wd-otl-style: dotted;
--wd-otl-width: 2px;
--wd-primary-color: rgb(17,70,57);
--wd-alternative-color: #fbbc34;
--btn-default-bgcolor: #f7f7f7;
--btn-default-bgcolor-hover: #efefef;
--btn-accented-bgcolor: rgb(17,70,57);
--btn-accented-bgcolor-hover: rgb(15,64,52);
--wd-form-brd-width: 2px;
--notices-success-bg: #459647;
--notices-success-color: #fff;
--notices-warning-bg: #E0B252;
--notices-warning-color: #fff;
--wd-link-color: #333333;
--wd-link-color-hover: #242424;
}
.wd-age-verify-wrap {
--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
background-color: #111111;
background-image: url();
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.wd-promo-popup-wrap {
--wd-popup-width: 800px;
--wd-popup-padding: 15px;
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
max-height: 223px;
}
.wd-page-title .wd-page-title-bg img {
object-fit: cover;
object-position: center center;
}
.wd-footer {
background-color: rgb(17,17,17);
background-image: none;
}
:is(.page, .search-no-results, .error404) :is(.wd-page-content, .whb-header) {
background-color: rgb(255,255,255);
background-image: none;
}
.mfp-wrap.wd-popup-quick-view-wrap {
--wd-popup-width: 920px;
}
:root{
--wd-container-w: 1222px;
--wd-form-brd-radius: 0px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 0px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-default-box-shadow-active: none;
--btn-default-bottom: 0px;
--btn-accented-bottom-active: -1px;
--btn-accented-brd-radius: 0px;
--btn-accented-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
--btn-accented-box-shadow-hover: inset 0 -2px 0 rgba(0, 0, 0, .15);
--wd-brd-radius: 0px;
}
@media (min-width: 1222px) {
section.elementor-section.wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}
.wd-page-title {
background-color: rgb(27,67,50);
}
.woocommerce-tabs {
--zg-primary: #2D8A4E;
--zg-accent: #C8A45C;
--zg-gray-200: #E9ECEF;
--zg-gray-300: #DEE2E6;
--zg-gray-500: #6C757D;
--zg-gray-600: #495057;
--zg-gray-800: #212529;
--zg-font-heading: 'Noto Serif SC', Georgia, 'Times New Roman', serif;
--zg-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* --------------------------------------------------------------------------
1. 桌面端标签栏（> 1024px）
--------------------------------------------------------------------------
Woodmart 默认：整条居中、League Spartan 16px 大写、上下 30/10px 内边距，
选中态是 .wd-tabs-title::after 一条 3px 深绿线贴在标签「顶部」。
zg 的样子：左对齐、14px、不大写、选中态 2px 绿线贴「底部」，
整条标签栏下面压一条 1px 浅灰通栏线（.zg-tab-headers）。
→ 所以要重画 .wd-nav-link，同时把主题那条顶部线关掉。
-------------------------------------------------------------------------- */
@media (min-width: 1025px) {
.woocommerce-tabs .wd-nav-tabs-wrapper {
margin: 0 0 24px !important;
padding: 8px 0 0 !important;
text-align: left !important;
border-bottom: 1px solid var(--zg-gray-200);
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none; /* 放不下时横向滚，但不显示滚动条把底线顶开 */
}
.woocommerce-tabs .wd-nav-tabs-wrapper::-webkit-scrollbar {
display: none;
}
.woocommerce-tabs .wd-nav-tabs {
display: flex !important;
flex-wrap: nowrap !important;
justify-content: flex-start !important;
align-items: stretch !important;
gap: 0 !important;
width: auto !important;
}
.woocommerce-tabs .wd-nav-tabs > li {
flex: 0 0 auto;
margin: 0 !important;
padding: 0 !important;
}
.woocommerce-tabs .wd-nav-tabs .wd-nav-link {
position: relative;
display: block !important;
padding: 14px 24px !important;
font-family: var(--zg-font-body) !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--zg-gray-500) !important;
background: none !important;
border: 0 !important;
transition: color .2s ease;
}
.woocommerce-tabs .wd-nav-tabs .wd-nav-link:hover,
.woocommerce-tabs .wd-nav-tabs .wd-nav-link[aria-selected="true"] {
color: var(--zg-primary) !important;
}
/* 关掉主题那条 3px 顶部线 */
.woocommerce-tabs .wd-nav-tabs .wd-tabs-title::after {
content: none !important;
display: none !important;
}
/* zg 的 2px 底部线：从文字左边 24px 画到右边 24px */
.woocommerce-tabs .wd-nav-tabs .wd-nav-link::after {
content: "";
position: absolute;
left: 24px;
right: 24px;
bottom: 0;
height: 2px;
background: var(--zg-primary);
border-radius: 1px 1px 0 0;
opacity: 0;
transition: opacity .2s ease;
}
.woocommerce-tabs .wd-nav-tabs .wd-nav-link[aria-selected="true"]::after {
opacity: 1;
}
}
/* --------------------------------------------------------------------------
2. 内容卡片（.zg-content-section）
--------------------------------------------------------------------------
白底 + 1px #E9ECEF 边 + 24px 圆角 + 32px 内边距。
zhigule 商品页本来就是白底，卡片靠这圈浅边和圆角立起来。
-------------------------------------------------------------------------- */
.woocommerce-tabs .wc-tab-inner,
.woocommerce-tabs .woocommerce-Tabs-panel {
padding-left: 0 !important;
padding-right: 0 !important;
}
.woocommerce-tabs .zg-content-section {
padding: 32px;
margin: 0 0 24px;
background: #fff;
border: 1px solid var(--zg-gray-200);
border-radius: 24px;
scroll-margin-top: 80px;
font-family: var(--zg-font-body);
font-size: 16px;
font-weight: 300;
line-height: 1.6;
letter-spacing: -0.1px;
color: var(--zg-gray-800);
}
/* 卡片标题：衬线体 + 2px 浅灰下划线 */
.woocommerce-tabs .zg-content-heading {
font-family: var(--zg-font-heading) !important;
font-size: 24px !important;
font-weight: 800 !important;
line-height: 1.2 !important;
letter-spacing: -0.1px;
text-transform: none !important;
color: var(--zg-gray-800) !important;
margin: 0 0 20px !important;
padding: 0 0 12px !important;
border: 0 !important;
border-bottom: 2px solid var(--zg-gray-200) !important;
}
.woocommerce-tabs .zg-product-description {
font-family: var(--zg-font-body);
font-size: 15px !important;
font-weight: 300;
line-height: 1.8 !important;
color: var(--zg-gray-600) !important;
}
.woocommerce-tabs .zg-product-description p:last-child {
margin-bottom: 0;
}
.woocommerce-tabs .zg-product-description h3 {
font-family: var(--zg-font-heading) !important;
font-size: 17px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
color: var(--zg-gray-800) !important;
margin: 24px 0 8px !important;
}
/* --------------------------------------------------------------------------
3. 参数表（.zg-content-table）
--------------------------------------------------------------------------
这一段必须带 !important：zhigule 现有的 | / | 上写了行内 style
（padding / background / border-bottom），行内样式优先级最高，只有
!important 压得住。原站 app.css 也是这么处理的。
-------------------------------------------------------------------------- */
.woocommerce-tabs .zg-content-table {
width: 100% !important;
border-collapse: collapse !important;
font-family: var(--zg-font-body);
font-size: 14px;
line-height: 1.6;
border: 2px solid #999 !important;
}
.woocommerce-tabs .zg-content-table thead {
background: var(--zg-accent) !important;
}
.woocommerce-tabs .zg-content-table th {
padding: 12px 14px !important;
text-align: left !important;
font-weight: 700 !important;
color: #000;
font-size: 13px;
text-transform: uppercase;
letter-spacing: .04em;
border-bottom: 2px solid #999 !important;
}
.woocommerce-tabs .zg-content-table td {
padding: 12px 14px !important;
border: 1px solid #ddd !important;
color: #333 !important;
}
.woocommerce-tabs .zg-content-table tbody tr:nth-child(even) td {
background: #FAFAFA !important;
}
.woocommerce-tabs .zg-content-table tbody tr:last-child td {
border-bottom: 1px solid #ddd !important;
}
/* 规格表：左列标签灰底 30%，右列白底
⚠ 行分隔线必须用 #ddd，不能用原站的 #eee。
左列的底色是 #F0F0F0（240），#eee（238）的线压在 240 的灰底上只差 2 个色阶，
渲染出来完全看不见 —— 整列会糊成一整块灰砖，跟右边有线的白列对不上。
换成和 td 外框同一个 #ddd（221），线就浮出来了，而且左右两列是同一条线。 */
.woocommerce-tabs .zg-content-table--specs th {
width: 30%;
padding: 12px 14px !important;
text-align: left !important;
font-weight: 700 !important;
font-size: 13px !important;
color: #000 !important;
background: #F0F0F0 !important;
border-bottom: 1px solid #ddd !important;
vertical-align: top;
text-transform: none !important;
letter-spacing: 0 !important;
}
.woocommerce-tabs .zg-content-table--specs td {
padding: 12px 14px !important;
background: #fff !important;
border-bottom: 1px solid #ddd !important;
color: #000 !important;
}
.woocommerce-tabs .zg-content-table--specs tbody tr:nth-child(even) td {
background: #FAFAFA !important;
}
.woocommerce-tabs .zg-content-table--specs tbody tr:last-child th,
.woocommerce-tabs .zg-content-table--specs tbody tr:last-child td {
border-bottom: none !important;
}
/* --------------------------------------------------------------------------
4. 配料清单 / 功效清单
--------------------------------------------------------------------------
配料用金色圆点，功效用绿色对勾，行与行之间一条 1px 浅灰线。
-------------------------------------------------------------------------- */
.woocommerce-tabs .zg-ingredient-list,
.woocommerce-tabs .zg-benefit-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
font-family: var(--zg-font-body);
font-size: 15px !important;
font-weight: 300;
line-height: 1.8 !important;
color: #000 !important;
}
.woocommerce-tabs .zg-ingredient-list li,
.woocommerce-tabs .zg-benefit-list li {
padding: 6px 0 !important;
margin: 0 !important;
border-bottom: 1px solid #f0f0f0 !important;
}
.woocommerce-tabs .zg-ingredient-list li:last-child,
.woocommerce-tabs .zg-benefit-list li:last-child {
border-bottom: none !important;
}
.woocommerce-tabs .zg-ingredient-list li::before {
content: "\2022";
color: var(--zg-accent);
font-weight: 700;
display: inline-block;
width: 20px;
}
.woocommerce-tabs .zg-benefit-list li::before {
content: "\2713";
color: var(--zg-primary);
font-weight: 700;
display: inline-block;
width: 20px;
}
/* --------------------------------------------------------------------------
5. 常见问题（details / summary 手风琴）
--------------------------------------------------------------------------
金色左边框 + 右上角 "+"，展开时转 45° 变成 "×"。
-------------------------------------------------------------------------- */
.woocommerce-tabs .zg-faq-list {
display: flex !important;
flex-direction: column;
gap: 12px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.woocommerce-tabs .zg-faq-item {
border: 1px solid var(--zg-gray-300) !important;
border-radius: 10px;
overflow: hidden;
background: #fff;
transition: box-shadow .2s ease, border-color .2s ease;
}
.woocommerce-tabs .zg-faq-item:hover {
border-color: var(--zg-accent) !important;
}
.woocommerce-tabs .zg-faq-item[open] {
box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
border-color: var(--zg-accent) !important;
}
.woocommerce-tabs .zg-faq-question {
padding: 16px 20px !important;
margin: 0 !important;
font-family: var(--zg-font-body);
font-weight: 600 !important;
font-size: 15px !important;
line-height: 1.5 !important;
color: #1a1a2e !important;
cursor: pointer;
display: flex !important;
justify-content: space-between;
align-items: center;
background: #fff;
border-left: 4px solid var(--zg-accent);
list-style: none;
transition: background .2s ease;
}
.woocommerce-tabs .zg-faq-question:hover {
background: #FFF9F0;
}
.woocommerce-tabs .zg-faq-question::-webkit-details-marker {
display: none;
}
.woocommerce-tabs .zg-faq-question::after {
content: "+";
font-size: 20px;
line-height: 1;
color: var(--zg-accent);
font-weight: 700;
transition: transform .2s;
}
.woocommerce-tabs .zg-faq-item[open] .zg-faq-question::after {
transform: rotate(45deg);
}
.woocommerce-tabs .zg-faq-answer {
padding: 14px 18px !important;
margin: 0 !important;
font-family: var(--zg-font-body);
font-size: 15px !important;
font-weight: 300;
line-height: 1.7 !important;
color: var(--zg-gray-500) !important;
border-top: 1px solid var(--zg-gray-200);
}
/* --------------------------------------------------------------------------
6. 手风琴模式（≤ 1024px）
--------------------------------------------------------------------------
Woodmart 在这个宽度把标签页换成手风琴：上面那排 .wd-nav-tabs 是
display:none，标题变成 .wd-accordion-title。所以标签栏的规则全部放在
min-width:1025px 里（第 1 段），这里只处理手风琴标题本身。
-------------------------------------------------------------------------- */
@media (max-width: 1024px) {
.woocommerce-tabs .wd-accordion-title {
padding: 14px 20px !important;
margin-bottom: 8px;
font-family: var(--zg-font-body) !important;
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--zg-gray-800) !important;
background: #fff;
border: 1px solid var(--zg-gray-200);
border-radius: 12px;
}
.woocommerce-tabs .wd-accordion-title.wd-active {
color: var(--zg-primary) !important;
border-color: var(--zg-primary);
}
.woocommerce-tabs .woocommerce-Tabs-panel {
padding: 0 0 16px !important;
}
}
/* --------------------------------------------------------------------------
7. 修 WordPress emoji 图片被撑成巨幅（全站生效，不限商品页）
--------------------------------------------------------------------------
症状：内容里写一个 ⚠️，前台会变成一张铺满整行的巨大图片。
原因不在这一套样式里，是站点缺了 WordPress 自己的一段 CSS：
· WP 把 emoji 换成  ；
· 那个 SVG 文件里**只有 viewBox="0 0 36 36"，没有 width/height**；
· 点了尺寸的替换元素在 width:auto 时的算法是"宽度取满容器、高度按比例"，
不是取 0 —— 实测在 804px 宽的内容区里，它被算成 804 × 804。
· 正常情况下 WordPress 会在 输出一段
img.emoji { width: 1em; height: 1em; ... } 把它按住；
这个站的 里没有那段（多半是优化插件把 wp-emoji-styles 一起删了），
于是 SVG 就按原尺寸铺开了。
修复：把 WP 原生那段补回来。用 1em 而不是固定像素，emoji 会跟着所在文字的
字号走 —— 正文 15px 就是 15px，标题里 24px 就是 24px。
-------------------------------------------------------------------------- */
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
width: 1em !important;
height: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
/* 窄屏跟随原站的移动端断点（767px），内容尺寸在这一档才收 */
@media (max-width: 767px) {
.woocommerce-tabs .zg-content-section {
padding: 20px;
}
.woocommerce-tabs .zg-content-heading {
font-size: 20px !important;
}
.woocommerce-tabs .zg-content-table td,
.woocommerce-tabs .zg-content-table--specs th,
.woocommerce-tabs .zg-content-table--specs td {
padding: 8px 10px !important;
font-size: 13px !important;
}
.woocommerce-tabs .zg-content-table--specs th {
width: 35%;
}
}
@media (min-width: 1025px) {
/* --------------------------------------------------------------------------
1. 颜色：面板深绿底，文字浅色，悬停金色
-------------------------------------------------------------------------- */
.wd-header-nav .menu-item-31153 > .wd-dropdown-menu {
background-color: #1E3A2A !important;
border: 0 !important;
box-shadow: 0 12px 32px rgba(0, 0, 0, .22) !important;
}
/* 内层 .container 是主题放栅格用的壳，别让它自己再铺一层白 */
.wd-header-nav .menu-item-31153 > .wd-dropdown-menu .container,
.wd-header-nav .menu-item-31153 > .wd-dropdown-menu .wd-sub-menu,
.wd-header-nav .menu-item-31153 > .wd-dropdown-menu .wd-sub-menu > li {
background-color: transparent !important;
}
.wd-header-nav .menu-item-31153 > .wd-dropdown-menu .wd-sub-menu > li > a,
.wd-header-nav .menu-item-31153 > .wd-dropdown-menu .wd-sub-menu > li > a .nav-link-text {
color: rgba(255, 255, 255, .86) !important;
}
/* 悬停 / 键盘聚焦 → 金色；同时压掉主题的浅灰悬停底色 */
.wd-header-nav .menu-item-31153 > .wd-dropdown-menu .wd-sub-menu > li > a:hover,
.wd-header-nav .menu-item-31153 > .wd-dropdown-menu .wd-sub-menu > li > a:focus-visible,
.wd-header-nav .menu-item-31153 > .wd-dropdown-menu .wd-sub-menu > li:hover > a,
.wd-header-nav .menu-item-31153 > .wd-dropdown-menu .wd-sub-menu > li.current-menu-item > a {
color: #E4C729 !important;
background-color: transparent !important;
}
/* 子项之间的细线：主题用的是深色线，压在深绿底上会变成黑缝 */
.wd-header-nav .menu-item-31153 > .wd-dropdown-menu .wd-sub-menu > li {
border-color: rgba(255, 255, 255, .10) !important;
}
/* --------------------------------------------------------------------------
2. 水平居中：面板中心 = Shop 文字中心
-------------------------------------------------------------------------- */
@media (min-width: 1025px) {
.wd-header-nav .menu-item-31153 > .wd-dropdown-menu {
left: 50% !important;
right: auto !important;
width: 220px !important;
margin: 15px 0 0 -110px !important;
}
}
}
@media (max-width: 576px) {
/* =========================================================================
ZeaGrove（zhigule.com）移动端优化 v2
粘贴位置：Woodmart 主题设置 → 自定义 CSS（放在原有自定义 CSS 的最后）
生效范围：全部写在 @media (max-width: 1024px) / (max-width: 768px) 里，
1280px 桌面端不受任何影响。
========================================================================= */
/* =========================================================================
1. 页头：深绿底上图标是黑的，等于看不见
=========================================================================
页头底色 rgb(30,58,42)，汉堡菜单 / 购物车图标 fill 却是 rgb(0,0,0)，
文字色 rgb(51,51,51)。黑图标压在深绿底上，手机上基本看不清。
另外汉堡和购物车的可点区域只有 20x20，手指点不准。
========================================================================= */
@media (max-width: 1024px) {
.whb-general-header .wd-tools-icon,
.whb-general-header .wd-tools-icon svg,
.whb-general-header .wd-tools-icon svg path,
.whb-general-header .wd-nav-opener,
.whb-general-header .wd-nav-opener svg,
.whb-general-header .wd-logo svg,
.whb-general-header .wd-logo svg * {
fill: #fff !important;
color: #fff !important;
}
.whb-general-header .wd-logo img {
filter: brightness(0) invert(1) !important;
}
.whb-general-header .wd-header-cart,
.whb-general-header .wd-header-cart a {
color: #fff !important;
}
.whb-general-header .wd-cart-number {
background-color: #7ED957 !important;
color: #1E3A2A !important;
font-weight: 700 !important;
}
.whb-general-header .wd-tools-icon {
width: 24px !important;
height: 24px !important;
}
.whb-general-header .wd-tools-element > a,
.whb-general-header .wd-header-cart > a,
.whb-general-header .wd-nav-opener {
min-width: 44px !important;
min-height: 44px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.whb-general-header .wd-logo.wd-main-logo {
min-height: 44px;
display: flex;
align-items: center;
}
}
/* =========================================================================
2. 语言切换器压在 Logo 上
=========================================================================
TranslatePress 的「浮动语言切换器」是 position:fixed、z-index:99999 的
浮层，钉在视口右上角，手机上正好盖住 Logo 右半边。
========================================================================= */
@media (max-width: 1024px) {
.trp-language-switcher.trp-floating-switcher {
top: auto !important;
bottom: 100px !important;
right: 12px !important;
background: rgba(255, 255, 255, .95) !important;
border-radius: 8px !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, .18) !important;
}
}
/* =========================================================================
3. 首屏：大标题不缩放 + 整块高过一屏
========================================================================= */
@media (max-width: 1024px) {
.elementor-element-b0caef5 .title,
.elementor-element-b0caef5 h1 {
font-size: 34px !important;
line-height: 1.3 !important;
}
.elementor-element-3787144 {
--min-height: auto !important;
min-height: 0 !important;
}
}
@media (max-width: 480px) {
.elementor-element-b0caef5 .title,
.elementor-element-b0caef5 h1 {
font-size: 30px !important;
}
}
/* =========================================================================
4. 【认证卡片】d179cc7 — 8 张卡片不要每张独占一行
=========================================================================
桌面端是 repeat(4, 1fr)，Elementor 在 ≤768px 直接切成 repeat(1, 1fr)，
于是 8 张认证卡每张占满一整行、上下还留着 50px 的大空档，
整块被拉到 1523px 高。改成主流手机端的「两列卡片」。
========================================================================= */
@media (max-width: 768px) {
.elementor-element-d179cc7 {
--e-con-grid-template-columns: repeat(2, 1fr) !important;
--grid-auto-flow: row !important;
--row-gap: 12px !important;
--column-gap: 12px !important;
--gap: 12px 12px !important;
/* 卡片原来贴着屏幕边，补回页面左右留白 */
padding-left: 15px !important;
padding-right: 15px !important;
}
/* 卡片本体：白底 + 圆角 + 阴影，去掉夸张的 0.5 黑影 */
.elementor-element-d179cc7 > .elementor-element {
--padding-top: 16px !important;
--padding-bottom: 16px !important;
--padding-left: 10px !important;
--padding-right: 10px !important;
--border-radius: 14px 14px 14px 14px !important;
box-shadow: 0 1px 6px rgba(0, 0, 0, .08) !important;
}
/* 图标和标题按窄卡片重新配比 */
.elementor-element-d179cc7 .elementor-icon-box-icon .elementor-icon {
font-size: 26px !important;
}
.elementor-element-d179cc7 .elementor-icon-box-icon svg {
height: 26px !important;
width: 26px !important;
}
.elementor-element-d179cc7 .elementor-icon-box-title {
font-size: 13px !important;
line-height: 1.4 !important;
}
}
/* =========================================================================
5. 【理念图片】8884f9b — 三张图缩成一行
=========================================================================
图片带 --wd-aspect-ratio: 9/16（0.5625），桌面是 repeat(3,1fr) 三列，
但 Elementor 在 ≤768px 把它切成 repeat(1,1fr)，于是三张图各占一整行、
每张在 390px 屏上被拉到 400x711，一张就吃掉一屏的 84%。
另外每张的 .elementor-widget-container 还带着 -25px / +25px / -10px 的
错位边距（桌面的拼贴效果），手机上只会让图片右侧多出 10px、彼此错开。
→ 手机上保持一行三张的缩略图条：每张约 115px 宽、4/5 比例，去掉错位。
========================================================================= */
@media (max-width: 768px) {
/* 补掉 Elementor 断点之间的 1px 缝隙：
栅格的移动端规则写在 max-width:768px，但 --flex-wrap-mobile 只在
max-width:767px 生效。于是在"正好 768px 宽"时，cf95304 还是
flex 行且不换行，图片网格和它右边的文字块被压成一人一半
（382px + 366px），三张图只剩 112px 宽。强制换行即可。 */
.elementor-element-cf95304 > .e-con-inner {
flex-wrap: wrap !important;
}
.elementor-element-8884f9b {
--e-con-grid-template-columns: repeat(3, 1fr) !important;
--grid-auto-flow: row !important;
--row-gap: 8px !important;
--column-gap: 8px !important;
--gap: 8px 8px !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
/* 桌面拼贴用的负边距，手机上必须整条清掉 */
.elementor-element-df1703b > .elementor-widget-container,
.elementor-element-4471c2a > .elementor-widget-container,
.elementor-element-7060df9 > .elementor-widget-container {
margin: 0 !important;
}
.elementor-element-8884f9b img {
--wd-aspect-ratio: 4 / 5 !important;
aspect-ratio: 4 / 5 !important;
width: 100% !important;
height: auto !important;
object-fit: cover !important;
border-radius: 10px !important;
}
/* 兜底：入场动画在窄屏有可能一直不触发，图片停在 opacity:0 */
.elementor-element-df1703b,
.elementor-element-4471c2a,
.elementor-element-7060df9 {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
}
/* =========================================================================
6. 【分割线组】507e5f3 — 分割线换行、整体太大
=========================================================================
结构是「右对齐横线 + 图标 + 左对齐横线」。两条横线各占 60%（=216px），
216 + 75 + 216 = 507px > 360px，容器又是 flex-wrap，于是三者被拆成
三行竖着堆。改成不换行、横线自适应剩余宽度，并整体缩小一档。
========================================================================= */
@media (max-width: 768px) {
.elementor-element-507e5f3 {
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
/* 整组收窄居中：横线不再横跨整个屏幕 */
max-width: 260px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Elementor 给容器子元素的 width:100% 会让它们各自占满一行 */
.elementor-element-507e5f3 > .elementor-element {
width: auto !important;
max-width: none !important;
}
/* 两条横线：均分剩余空间 */
.elementor-element-f253fad,
.elementor-element-5c0d8ff {
flex: 1 1 0 !important;
min-width: 0 !important;
margin: 0 !important;
}
.elementor-element-f253fad .elementor-divider,
.elementor-element-5c0d8ff .elementor-divider {
padding-block: 0 !important;
}
.elementor-element-f253fad .elementor-divider-separator,
.elementor-element-5c0d8ff .elementor-divider-separator {
width: 100% !important;
margin: 0 !important;
}
/* 中间的小图标：75px → 40px */
.elementor-element-e604bff {
flex: 0 0 auto !important;
}
.elementor-element-e604bff img {
width: 40px !important;
height: 40px !important;
}
}
/* =========================================================================
7. 【图标 + 标题】f72b5cf 这一组 — 图标独占一整行
=========================================================================
四个特性块结构一样：一个图标 widget + 一个标题 widget。
图标块被设成 --flex-grow: 1，在 flex 行里会吃掉整行剩余宽度，
标题块又带 wd-width-100，两者于是各占一行，图标还居中飘在文字上方。
→ 图标缩成左侧小方章，标题跟在右边，整组左对齐。
（f72b5cf 之外的三组 b33e07e / 85b5d81 / 267114d 结构完全相同，一并处理）
========================================================================= */
@media (max-width: 768px) {
/* 这一整节原来左右都没有内边距，标题、图标、正文全部贴着屏幕边，
收窄成 350px 后必须补回页面留白，否则图标会直接顶到屏幕左侧 */
.elementor-element-650fa0d {
padding-left: 20px !important;
padding-right: 20px !important;
}
.elementor-element-ab424a7,
.elementor-element-5012403,
.elementor-element-6039888,
.elementor-element-7ff6653 {
flex-wrap: nowrap !important;
/* 图标对着标题第一行，不是对着整段文字垂直居中 */
align-items: flex-start !important;
gap: 12px !important;
}
.elementor-element-ab424a7 > .elementor-element,
.elementor-element-5012403 > .elementor-element,
.elementor-element-6039888 > .elementor-element,
.elementor-element-7ff6653 > .elementor-element {
width: auto !important;
max-width: none !important;
}
/* 图标块的 --flex-grow:1 是"占满一整行"的元凶 */
.elementor-element-f72b5cf,
.elementor-element-b33e07e,
.elementor-element-85b5d81,
.elementor-element-267114d {
--flex-grow: 0 !important;
--flex-shrink: 0 !important;
--align-self: flex-start !important;
flex: 0 0 auto !important;
padding: 8px !important;
border-radius: 12px !important;
/* 图标方块 40px，标题首行约 33px，往下压 3px 让两者视觉居中 */
margin-top: 3px !important;
}
.elementor-element-f72b5cf .elementor-icon-wrapper,
.elementor-element-b33e07e .elementor-icon-wrapper,
.elementor-element-85b5d81 .elementor-icon-wrapper,
.elementor-element-267114d .elementor-icon-wrapper {
text-align: center !important;
}
.elementor-element-f72b5cf .elementor-icon,
.elementor-element-b33e07e .elementor-icon,
.elementor-element-85b5d81 .elementor-icon,
.elementor-element-267114d .elementor-icon {
font-size: 24px !important;
}
.elementor-element-f72b5cf .elementor-icon svg,
.elementor-element-b33e07e .elementor-icon svg,
.elementor-element-85b5d81 .elementor-icon svg,
.elementor-element-267114d .elementor-icon svg {
height: 24px !important;
width: 24px !important;
}
/* 标题块：占掉图标右边的剩余宽度 */
.elementor-element-97d1535,
.elementor-element-7e1f5a8,
.elementor-element-e178fd7,
.elementor-element-c2b0a8f {
flex: 1 1 0 !important;
min-width: 0 !important;
width: auto !important;
}
}
/* =========================================================================
8. 【About ZeaGrove】3bb5f52 — 文字贴到屏幕边
=========================================================================
这一块的祖先链一路都没有左右内边距（.e-con-inner 是 padding: 0 0 80px），
所以标题、正文、计数器、按钮全部从 x=0 起，紧贴屏幕边缘。
========================================================================= */
@media (max-width: 768px) {
.elementor-element-3bb5f52 {
padding-left: 20px !important;
padding-right: 20px !important;
}
/* 计数器卡片自带 margin-left: 20px，叠上页面留白后会偏右 */
.elementor-element-bb35b27 > .elementor-element {
margin-left: 0 !important;
margin-right: 0 !important;
}
.elementor-element-bb35b27 .elementor-widget-container {
margin-left: 0 !important;
}
}
/* =========================================================================
9. 【页脚前的 CTA】eaa7e80 — 文字和按钮偏下
=========================================================================
两个原因叠在一起：
① .e-con-inner 是 column-reverse，内容按默认 justify-content 被压到底部；
② 标题 widget 的 .elementor-widget-container 带 margin-top: 70px。
合计把文字和按钮推到整块的下半部分。
→ 内容垂直居中，去掉 70px 上边距，按钮组也居中。
========================================================================= */
@media (max-width: 768px) {
.elementor-element-eaa7e80 .e-con-inner {
justify-content: center !important;
padding: 32px 20px !important;
}
.elementor-element-3de9e46 .elementor-widget-container {
margin-top: 0 !important;
}
.elementor-element-8cb97c7 {
justify-content: center !important;
gap: 12px !important;
}
}
/* =========================================================================
10. 【页脚】只保留品牌栏 1e3125e，隐藏其余三栏
=========================================================================
断点用 768px 而不是 1024px：Elementor 到 768px 才把这一栏的栅格
从 repeat(4,1fr) 切成 repeat(1,1fr)。如果在 1024px 就隐藏，
平板尺寸下会剩下一个 4 列栅格只填 1 列，右边空一大块。
⚠️ 这段只作用在 ≤768px。如果桌面端也要一并隐藏，
把下面这三行的 @media 外壳去掉、直接平铺即可。
========================================================================= */
@media (max-width: 768px) {
.elementor-element-e8af00e,
.elementor-element-3ae5b88,
.elementor-element-00342a8 {
display: none !important;
}
/* 只剩一栏了，去掉 450px 的最小高度和 70px 的顶部大留白 */
.elementor-element-9167f8a {
--min-height: auto !important;
min-height: 0 !important;
}
.elementor-element-1e3125e {
--padding-top: 48px !important;
--padding-bottom: 32px !important;
}
}
/* =========================================================================
11. 正文小字与触控目标
========================================================================= */
@media (max-width: 1024px) {
.elementor-widget-wd_text_block p,
.wd-text-block p {
font-size: 15px !important;
line-height: 1.65 !important;
}
.wd-btn-arrow {
min-width: 44px !important;
min-height: 44px !important;
}
.scrollToTop {
right: 12px !important;
bottom: 24px !important;
}
}
/* =========================================================================
12. 区块大标题在手机上的字号
=========================================================================
这两处标题在 Elementor 里写死了桌面字号且没有移动端断点：
· About ZeaGrove 区块标题 b02d933 .title → font-size: 50px / line-height: 70px
390px 屏上排到 420px 高（首屏的一半），"Manufacturing" 一个单词就有
380px 宽，加完左右留白后直接被屏幕切掉。
· 自热碗区块标题 321e552 .elementor-heading-title → font-size: 45px
排 4 行共 180px。
手机端区块标题的主流区间是 26~32px，统一收到 30px。
⚠️ 如果你希望保留原来的大字，把这一整段删掉即可，不影响上面 1~11 条。
========================================================================= */
@media (max-width: 768px) {
.elementor-element-b02d933 .title {
font-size: 30px !important;
line-height: 1.25 !important;
letter-spacing: 0 !important;
}
.elementor-element-321e552 .elementor-heading-title {
font-size: 30px !important;
line-height: 1.25 !important;
}
/* 另外两个区块标题（Woodmart 的 wd_title 组件，45px/行高 63px）
"Globally Certified Manufacturing" 的 Manufacturing 一个词就有 344px 宽，
装在 246px 的标题框里，直接溢出屏幕右侧；
"FEATURED PRODUCTS" 同理，会偏到框外。一并收到 30px。 */
.elementor-element-c091643 .title,
.elementor-element-772ce7f .title {
font-size: 30px !important;
line-height: 1.25 !important;
letter-spacing: 0 !important;
}
}
/* =========================================================================
13. 【首屏】内容整体上移 + 四组数据排成一行
=========================================================================
13.1 内容上移
首屏内容包在 54be2e3 里，它带着 margin-top: 200px（桌面端用来给页头
让位的距离）。手机上这段距离加上本来就透明的页头，第一行小标签被推到
视口 165px 处，照片顶部空出一条很宽的带子。
→ 收到 140px，内容整体上移 60px。
13.2 四组数据排成一行
7c28c54 是 flex 行 + flex-wrap，四个 counter 都是"内容宽度"
（199 / 178 / 171 / 198px），360px 宽装不下，于是折成 1+2+1 三行，
整块 311px 高，最后一行「8+ YEARS OF EXCELLENCE」直接被挤出首屏。
→ 改成四等分栅格，数字和标签各缩一档，四组并排一行。
========================================================================= */
@media (max-width: 768px) {
/* ---- 13.1 内容上移 ---- */
.elementor-element-54be2e3 {
--margin-top: 140px !important;
--margin-block-start: 140px !important;
margin-top: 140px !important;
}
/* ---- 13.2 四组数据一行 ---- */
.elementor-element-7c28c54 {
--display: grid !important;
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
align-items: start !important;
justify-items: stretch !important;
gap: 0 !important;
}
/* 四个 counter 平分一行：去掉 Elementor 的"内容宽度"和 20px 内边距 */
.elementor-element-7c28c54 > .elementor-element {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
flex: none !important;
padding: 0 !important;
margin: 0 !important;
}
.elementor-element-7c28c54 .elementor-widget-container,
.elementor-element-7c28c54 .elementor-counter {
width: 100% !important;
max-width: 100% !important;
}
/* 数字：33.75px → 22px，"5,000" 和 "+" 必须贴在一起居中 */
.elementor-element-7c28c54 .elementor-counter-number-wrapper {
display: flex !important;
justify-content: center !important;
align-items: baseline !important;
white-space: nowrap !important;
}
.elementor-element-7c28c54 .elementor-counter-number-prefix,
.elementor-element-7c28c54 .elementor-counter-number-suffix {
flex: 0 0 auto !important;
}
.elementor-element-7c28c54 .elementor-counter-number-wrapper,
.elementor-element-7c28c54 .elementor-counter-number-prefix,
.elementor-element-7c28c54 .elementor-counter-number,
.elementor-element-7c28c54 .elementor-counter-number-suffix {
font-size: 22px !important;
line-height: 1.1 !important;
}
/* 标签：12px/行高 30px → 10px/行高 1.3，允许折两行 */
.elementor-element-7c28c54 .elementor-counter-title {
display: block !important;
font-size: 10px !important;
line-height: 1.3 !important;
letter-spacing: 0 !important;
margin: 5px 0 0 !important;
padding: 0 2px !important;
}
}
}
|