/* ============================================================
   fix-mobile.css 閳?缁夎濮╃粩顖涘笓閻楀牅鎱ㄦ径宥呯湴
   2026-09-14
   娣囶喖顦查懠鍐ㄦ纯閿?   1) .shelf-table 閹靛婧€缁旑垱鎷洪悥鍡楃潌楠炴洩绱檓in-width:720px 鐎佃壈鍤уΟ顏勬倻濠с垹鍤敍?      閳?閹靛婧€缁旑垵娴嗘稉鍝勭垻閸欑姴宕遍悧鍥х鐏炩偓
   2) .ev-hero-media 閸忋劌鏄傜€垫瓕绉洪悾?1~29px 閳?閻栬泛顔愰崳?overflow 鐟佷礁澹€
   3) .shelf-note 瀹革箑褰搁悾娆戞娑撳秴顕粔甯礄瀹革缚鏅剁拹纾嬬珶閿涘鍟?缂佺喍绔撮崘鍛扮珶鐠?   ============================================================ */

/* ---------- 1) 妫ｆ牕鐫嗘刊鎺嶇秼閸ф绉洪悾灞兼叏婢跺稄绱欓崗銊ユ槀鐎甸潻绱?---------- */
.ev-hero { overflow: hidden; }
.ev-hero-media { max-width: 100%; }

/* ---------- 2) shelf-note 閻ｆ瑧娅х€靛湱袨 ---------- */
.ev-shelf { padding-left: 0; padding-right: 0; }
.shelf-note {
  padding-left: 4px;
  padding-right: 4px;
  max-width: 100%;
}

/* ---------- 3) 闁氨鏁ら敍姘崲娴ｆ洝銆冮弽鐓庮啇閸ｃ劑鍏樻稉宥呭帒鐠佸憡鎷洪惍鎾€夐棃?---------- */
.shelf-wrap,
.ev-shelf .shelf-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- 4) 閹靛婧€缁旑垽绱扮拹褎鐏︾悰銊︾壐 閳?閸棗褰旈崡锛勫 ---------- */
@media (max-width: 760px) {

  .shelf-wrap {
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
  }

  /* 閸欐牗绉峰鍝勫煑閺堚偓鐏忓繐顔旀惔锔肩礉閺€閫涜礋閼奉亪鈧倸绨?*/
  .shelf-table {
    min-width: 0 !important;
    width: 100%;
    display: block;
    font-size: 14px;
    border-collapse: separate;
  }

  /* 闂呮劘妫岀悰銊ャ仈閿涘牊鏁兼稉鐑樼槨鐞涘苯鍞撮弰鍓с仛閸掓鎮曢敍?*/
  .shelf-table thead { display: none; }

  .shelf-table tbody { display: block; }

  /* 濮ｅ繗顢戦崣妯诲灇娑撯偓瀵姴宕遍悧鍥风礄濞ｈ精澹婃稉濠氼暯閿涙碍绻佹惔?+ 濞村懎鐡ч敍灞肩瑢缁旀瑧鍋ｆ稉鈧懛杈剧礆 */
  .shelf-table tbody tr {
    display: block;
    background: rgba(26, 35, 51, 0.72);
    border: 1px solid var(--stroke, rgba(125,184,238,.18));
    border-radius: 12px;
    padding: 14px 16px 12px;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
  }
  .shelf-table tbody tr:last-child { border-bottom: 1px solid var(--stroke, rgba(125,184,238,.18)); margin-bottom: 0; }
  .shelf-table tbody tr:hover { background: rgba(34, 211, 238, 0.05); }

  /* 濞ｈ精澹婇崡锛勫閸愬懏鏋冪€涙绮烘稉鈧稉鐑樼ガ閼硅绱欑捄鐔虹彲閻愰€涘瘜妫版ü绔撮懛杈剧礆 */
  .shelf-table tbody tr,
  .shelf-table tbody td {
    color: var(--tx-1, #f0f6fc) !important;
  }
  .shelf-table td.shelf-cat,
  .shelf-table td.shelf-pack .pack-trial,
  .shelf-table td.shelf-pack span {
    color: #9fb3c8 !important;
  }
  .shelf-table td.shelf-code a,
  .shelf-table td.shelf-code a:visited {
    color: var(--neon, #67e8f9) !important;
  }
  .shelf-table td.shelf-purity b {
    color: var(--tx-1, #f0f6fc) !important;
  }
  .shelf-table td::before {
    color: #8ba3ba !important;
  }
  /* 濞ｈ精澹婇崡锛勫閸愬懏瀵滈柦?闁剧偓甯?*/
  .shelf-table tbody .shelf-link,
  .shelf-table tbody .shelf-act a,
  .shelf-table tbody a {
    color: var(--neon, #67e8f9) !important;
    background: rgba(103, 232, 249, 0.08) !important;
    border-color: rgba(103, 232, 249, 0.3) !important;
  }
  .shelf-table tbody .shelf-quote {
    background: rgba(34, 211, 238, 0.16) !important;
    color: var(--neon, #67e8f9) !important;
  }

  /* 濮ｅ繋閲滈崡鏇炲帗閺嶇厧褰夐幋鎰鐞涘矉绱板锕€鍨崥?+ 閸欏啿鍞寸€?*/
  .shelf-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 0 !important;
    border: 0 !important;
    width: auto !important;
    text-align: right;
  }

  /* 閻?data-label 閺勫墽銇氶崚妤€鎮?*/
  .shelf-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #7c8da3;
    text-align: left;
    white-space: nowrap;
  }

  /* 缁楊兛绔撮弽纭风礄娴溠冩惂閸氬稄绱氭担婊€璐熼崡锛勫閺嶅洭顣?*/
  .shelf-table td.shelf-code {
    display: block;
    padding: 0 0 10px !important;
    margin-bottom: 4px;
    border-bottom: 1px dashed var(--ev-line, #e3eaf3) !important;
    text-align: left;
    font-size: 16px;
  }
  .shelf-table td.shelf-code::before { display: none; }
  .shelf-table td.shelf-code a { font-size: 15.5px; font-weight: 700; }

  /* 缁绢垰瀹抽崚妤嬬窗鏉╂稑瀹抽弶鈥冲讲娴犮儴顫﹂崢瀣級 */
  .shelf-table td.shelf-purity { white-space: normal; }
  .shelf-table td.shelf-purity .purity-bar { width: 64px; }

  /* 閹垮秳缍旈崚妤嬬窗閹稿鎸抽獮鑸靛笓闂堢姴褰?*/
  .shelf-table td.shelf-act {
    padding-top: 11px !important;
    margin-top: 5px;
    border-top: 1px dashed var(--ev-line, #e3eaf3) !important;
    justify-content: flex-end;
    gap: 10px;
  }
  .shelf-table td.shelf-act::before { display: none; }

  /* 閸栧懓顥婇崚妤冩畱娑撱倖顔岄弬鍥х摟閸︺劍澧滈張杞扮瑐缁旀牗甯撻弴鏉戙偨鐠?*/
  .shelf-table td.shelf-pack { flex-wrap: wrap; }
  .shelf-table td.shelf-pack span { display: inline-block; }
  .pack-bulk { font-weight: 600; }
  .pack-trial { color: #7c8da3; font-size: 12.5px; }

  /* shelf-note 閹靛婧€娑撳﹦鏆€閻х晫绮烘稉鈧?*/
  .shelf-note { padding-left: 0; padding-right: 0; }
}

/* ---------- 4b) 閹靛婧€缁旑垽绱扮€佃鐦悰?閳?閸棗褰旈崡锛勫 ---------- */
@media (max-width: 760px) {

  .compare-wrap {
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
  }

  .compare-table {
    min-width: 0 !important;
    width: 100%;
    display: block;
    font-size: 14px;
    border-collapse: separate;
  }
  .compare-table thead { display: none; }
  .compare-table tbody { display: block; }

  .compare-table tbody tr {
    display: block;
    background: rgba(26, 35, 51, 0.72);
    border: 1px solid var(--stroke, rgba(125,184,238,.18));
    border-radius: 12px;
    padding: 14px 16px 12px;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
  }
  .compare-table tbody tr:last-child { margin-bottom: 0; }
  .compare-table tbody tr:hover { background: rgba(34, 211, 238, 0.05); }

  /* 濞ｈ精澹婇崡锛勫閸愬懏鏋冪€涙绮烘稉鈧稉鐑樼ガ閼?*/
  .compare-table tbody tr,
  .compare-table tbody td,
  .compare-table tbody th {
    color: var(--tx-1, #f0f6fc) !important;
  }
  .compare-table td::before {
    color: #8ba3ba !important;
  }
  .compare-table .compare-yes,
  .compare-table .yes { color: var(--neon, #67e8f9) !important; }
  .compare-table .compare-no,
  .compare-table .no { color: #ff8a8a !important; }
  /* 鐞涘本鐖ｆ０姗堢礄閸栨牕鎮庨悧鈺佹倳閿涘缍旀稉鍝勫幢閻楀洦鐖ｆ０?*/
  .compare-table tbody th {
    display: block;
    width: auto !important;
    padding: 0 0 10px !important;
    margin-bottom: 4px;
    border-bottom: 1px dashed var(--line, #e3eaf3) !important;
    text-align: left;
    font-size: 16px;
    white-space: normal;
  }

  .compare-table td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 0 !important;
    border: 0 !important;
    width: auto !important;
    text-align: right;
  }
  .compare-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #7c8da3;
    text-align: left;
    white-space: nowrap;
    padding-top: 2px;
  }

  /* SKU 闂€鎸庢瀮閺堫剙鍘戠拋鍛婂床鐞?*/
  .compare-table .c-sku { max-width: none; white-space: normal; word-break: break-word; }
  .compare-table .c-size, .compare-table .c-pack { white-space: normal; }

  /* 閹躲儰鐜幐澶愭尦閻欘剙宕版稉鈧悰?*/
  .compare-table td.c-cta {
    margin-top: 6px;
    padding-top: 11px !important;
    border-top: 1px dashed var(--line, #e3eaf3) !important;
    justify-content: flex-end;
  }
  .compare-table td.c-cta::before { display: none; }

  /* 缁涙盯鈧娼幍瀣簚娑撳﹤鍘戠拋鍛婂床鐞?*/
  .compare-filter {
    flex-wrap: wrap;
    gap: 8px;
  }
  .compare-filter a { white-space: nowrap; }
}

/* ---------- 4c) 妫ｆ牕鐫嗙€圭懓娅掗敍姘閺堣桨绗傞崗銊ヮ啍 + 閸楁洘鐖?---------- */

/* 閺嶇懓娲滈敍?ev-hero 閺?flex row閿涘苯顕遍懛?.ev-hero-inner 娑?.ev-paths 鐞氼偄鑻熼幒鎺撳皨閸樺鈧?   楠炶櫕婢橀崣濠佷簰娑撳绔村瀣暭閸ョ偛娼＄痪褎绁﹀蹇撶鐏炩偓閵?*/
@media (max-width: 980px) {
  .ev-hero { display: block; min-height: auto; }
  .ev-hero-inner {
    display: block;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding-left: 22px;
    padding-right: 22px;
    box-sizing: border-box;
  }
  .ev-paths {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }
}

/* 閹靛婧€缁旑垽绱伴崗銊ヮ啍閸楁洘鐖敍宀€鏆€閻ц棄顕粔?*/
@media (max-width: 760px) {
  .ev-hero-inner {
    padding: 56px 18px 48px;
  }
  .ev-paths {
    gap: 13px;
    margin-top: 30px;
  }
  .ev-path {
    padding: 20px;
    box-sizing: border-box;
    min-width: 0;
  }
  .ev-path strong, .ev-path .ev-path-desc { overflow-wrap: anywhere; }
  .ev-hero-media { transform: none; }
}

/* ---------- 4d) 閸掑棛琚崡锛勫閿涙碍澧滈張杞扮瑐閺€閫涜礋娑撳﹣绗呴崼鍡楀綌 ---------- */
@media (max-width: 760px) {
  .category-card a {
    display: block;
    grid-template-columns: none;
    min-height: 0;
  }
  .category-card img {
    width: 100%;
    height: 170px;
    object-fit: cover;
  }
  .category-card div {
    padding: 16px 18px 20px;
    overflow-wrap: anywhere;
  }
  .category-card a > * { min-width: 0; }
}

/* ---------- 4e) 鐎佃壈鍩呯悰宀嬬窗鐏忓繐鐫嗛梼鍙夊閸?---------- */
@media (max-width: 900px) {
  .nav-row-main {
    box-sizing: border-box;
    max-width: 100%;
    /* 娑撳秷鍏?overflow:hidden閿涘苯鎯侀崚娆庣窗閹跺﹦绮风€电懓鐣炬担宥囨畱鐏炴洖绱戦懣婊冨礋鐟佷焦甯€閿涘矁銆冮悳鏉挎皑閺勵垬鈧enu 閻愰€涚瑝閸斻劊鈧?*/
  }
  .nav-toggle {
    flex: 0 0 auto !important;
    box-sizing: border-box;
    margin-left: auto;
  }
  .nav-row-main > * { min-width: 0; }

  /* 閸忔娊鏁敍姘舵閸?logo 鐎硅棄瀹抽敍宀€绮板Ч澶婄墡閹稿鎸抽懙鎯у毉缁屾椽妫?*/
  .nav-row-main .brand {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 86px);
  }
  .nav-row-main .brand img {
    max-width: 100%;
    width: auto;
    max-height: 32px;
    object-fit: contain;
    object-position: left center;
  }
}
@media (max-width: 480px) {
  .nav-row-main { padding-left: 12px !important; padding-right: 12px !important; }
  .nav-row-main .brand { max-width: calc(100% - 78px); }
  .nav-toggle { padding: 0 12px !important; font-size: 12.5px !important; min-height: 34px !important; white-space: nowrap; }
}
@media (max-width: 380px) {
  .nav-row-main .brand { max-width: calc(100% - 70px); }
  .nav-row-main .brand img { max-height: 28px; }
  .nav-toggle { padding: 0 10px !important; min-height: 32px !important; }
}

/* ---------- 6b) 娑擃厾鐡戠€硅棄鐫嗙€佃壈鍩呴敍姘舵Щ濠с垹鍤?---------- */
@media (max-width: 1500px) and (min-width: 901px) {
  /* 鐎佃壈鍩呯悰灞藉帒鐠佺鑴婇幀褎鏁圭紓鈺嬬礉闂冨弶顒涘┃銏犲毉 */
  .nav-row-main {
    box-sizing: border-box;
    max-width: 100%;
    flex-wrap: nowrap;
    gap: 0;
  }
  .nav-row-main .brand {
    flex: 0 1 auto;
    min-width: 0;
  }
  .nav-row-main .brand img { max-width: 100%; width: auto; max-height: 34px; object-fit: contain; object-position: left center; }
  .main-menu {
    flex: 1 1 auto;
    min-width: 0;
  }
  .nav-tools { flex: 0 0 auto; gap: 8px !important; }
  .quote-link { white-space: nowrap; }
}
@media (max-width: 1240px) and (min-width: 901px) {
  /* 閺囧鐛庨弮璺哄晙閺€鏈电濮濄儻绱伴梾鎰鐠愵厾澧挎潪锕€娴橀弽?*/
  .nav-tools .cart-link { display: none !important; }
  .main-menu { gap: 0 !important; }
  .main-menu a { padding-left: 9px !important; padding-right: 9px !important; font-size: 14px !important; }
}

/* ---------- 7) 濡楀矂娼?楠炶櫕婢橀敍姝╡ro 閸欏本鐖€靛綊缍?+ 婵帊缍嬮崸妤勭Ш閻?---------- */

/* 婵帊缍嬮崸?scale(1.02) 鐎佃壈鍤у锕€褰搁崥鍕Т閸戣櫣瀹?1%閿涘瞼鍩楃痪褍鍑￠崷?fix 瀵偓婢剁顔?overflow:hidden */
.ev-hero { overflow: hidden !important; }
/* 閻╁瓨甯撮崣鏍ㄧХ缂傗晜鏂侀敍灞戒氦鎼存洘绉烽梽銈堢Ш閻ｅ矉绱欓崥灞炬娣囨繄鏆€ bleed 閺佸牊鐏夐敍?*/
.ev-hero-media { transform: none !important; }

@media (min-width: 981px) {
  /* 濡楀矂娼扮粩顖ょ窗hero-inner 娑?ev-paths 閺嬪嫭鍨氶惇鐔割劀閻ㄥ嫪琚遍弽蹇ョ礉閸ㄥ倻娲跨仦鍛厬鐎靛綊缍?*/
  .ev-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 780px) minmax(0, 790px);
    justify-content: center;
    align-items: center;
    column-gap: 56px;
    padding: 0 32px;
    box-sizing: border-box;
  }
  .ev-hero-media {
    position: absolute;
    inset: 0;
  }
  .ev-hero-inner {
    width: auto !important;
    max-width: 780px !important;
    margin: 0 !important;
    justify-self: end;
  }
  .ev-paths {
    width: auto;
    max-width: 790px;
    margin: 0 !important;
    justify-self: start;
    align-self: center;
  }
}

/* ---------- 5) 鐡掑懎鐨仦蹇撳晙閺€鍓佹彛 ---------- */
@media (max-width: 420px) {
  .compare-table tbody tr { padding: 12px 13px 10px; }
  .compare-table td { font-size: 13.5px; }
  .compare-table td::before { font-size: 10px; letter-spacing: .08em; }
  .shelf-table tbody tr { padding: 12px 13px 10px; }
  .shelf-table td { font-size: 13.5px; }
  .shelf-table td::before { font-size: 10px; letter-spacing: .08em; }
  .shelf-table td.shelf-act { gap: 8px; }
}

/* ============================================================
   8) 婢堆冪潌 / 2K / 4K 閼奉亪鈧倸绨?
   缁旀瑧鍋ｆ妯款吇鐎圭懓娅掓稉濠囨 1560px閿涘苯婀?2K/4K 鐏炲繐绠锋稉濠傚涧閸?40% 瀹革箑褰搁敍?   娑撱倛绔熺粚铏规瀹搞劌銇?閳?閻鎹ｉ弶銉ｂ偓灞界发鐏忓繈鈧秲鈧倽绻栭柌灞惧瘻鐏炲繐顔旈崚鍡樸€傞弨鎯ь啍娑撳﹪妾洪獮?   缁涘鐦弨鎯с亣閹烘帞澧楅懞鍌氼殧閵?   ============================================================ */

/* 2K 鐏炲骏绱?921 缁狙嶇礆閿涙艾顔愰崳銊ョ暰閸?1800px + 鐏炲懍鑵戦敍娑樼摍閸фぞ绡冪仦鍛厬 */
@media (min-width: 1921px) {
  .nav-row-main,
  .section > *,
  .detail-layout,
  .wrap,
  .container {
    max-width: 1800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* bento tail 娑撱倕鍨崘鍛啇閸氬嫯鍤滅仦鍛厬閿涘矂浼╅崗宥呯摍閸ф鍒涢崷銊ュ灙瀹革缚鏅?*/
  .bn-tail-col {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* FAQ / 鐎佃鐦悰銊х搼閸愬懎顔愰崸妤€鐪虫稉?*/
  .faq-list,
  .faq-block,
  .compare-wrap,
  .shelf-wrap {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* 婢堆冪潌閿?560 缁狙嶇礆閿涙艾顔愰崳銊ョ暰閸?2100px + 鐏炲懍鑵?*/
@media (min-width: 2561px) {
  .nav-row-main,
  .section > *,
  .detail-layout,
  .wrap,
  .container {
    max-width: 2100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  html { font-size: 17px; }
  .section { padding-left: clamp(24px, 3vw, 72px) !important; padding-right: clamp(24px, 3vw, 72px) !important; }
}

/* 4K 濠娐ゎ攨閿?400+閿涘绱扮€圭懓娅掔€规艾鈧?2400px + 鐏炲懍鑵戦敍鍫滅瑝鐠虹喕顫嬮崣锝嗘￥闂勬劙鎽靛鈧敍?*/
@media (min-width: 3400px) {
  .nav-row-main,
  .section > *,
  .detail-layout,
  .wrap,
  .container {
    max-width: 2400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  html { font-size: 18px; }

  /* 4K hero: 全屏背景 + 内部两栅格对齐，边距与其它区块统一 3000px */
  .ev-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 72px !important;
    padding-left: max(60px, calc((100vw - 3000px) / 2)) !important;
    padding-right: max(60px, calc((100vw - 3000px) / 2)) !important;
  }
  .ev-hero-inner { width: 100% !important; max-width: none !important; justify-self: stretch !important; }
  .ev-paths { width: 100% !important; max-width: none !important; justify-self: stretch !important; }
}

/* 2K hero: 同样全屏背景，内部对齐 */
@media (min-width: 1921px) and (max-width: 3399px) {
  .ev-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 64px !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: max(60px, calc((100vw - 2400px) / 2)) !important;
    padding-right: max(60px, calc((100vw - 2400px) / 2)) !important;
  }
  .ev-hero-inner { width: 100% !important; max-width: none !important; justify-self: stretch !important; }
  .ev-paths { width: 100% !important; max-width: none !important; justify-self: stretch !important; }
}








/* ============================================================
   10) 澶у睆缁熶竴灞呬腑鏀跺熬灞傦紙鏀炬渶鍚庯紝鏈€楂樹紭鍏堢骇锛?
   ============================================================ */
@media (min-width: 1921px) {
  .nav-row-main,
  .section > *,
  .detail-layout,
  .wrap,
  .container {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* grid 鍒楀唴鐨勫瓙鍧楋細鐢?justify-self 璁╁叾鍦ㄦ湰鍒楀唴灞呬腑 */
  .bn-tail > *,
  .bn-tail-col,
  .bn-duo > *,
  .bn-about > * {
    justify-self: center !important;
  }
  /* 鏍忓唴鍐呭鍧楀眳涓?*/
  .bn-tail-col > *,
  .faq-list,
  .faq-block,
  .blog-grid,
  .info-columns {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* 鍘绘帀澶у睆涓?section 鐨勯澶栧乏鍙冲唴杈硅窛锛岄伩鍏嶅唴瀹硅鎺ㄥ亸 */
  .bn-tail-col > .section,
  .bn-tail-col > section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .section-head {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* bn-tail 澶у睆闄愬灞呬腑锛堝畠涓嶅湪 .section > * 瑙勫垯瑕嗙洊鑼冨洿鍐咃級 */
@media (min-width: 1921px) {
  .bn-tail,
  .bn-about,
  .bn-duo,
  .bn-shelf-section,
  .bn-featured,
  .bn-cats,
  .bn-cert,
  .bn-reports {
    max-width: 2400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ============================================================
   11) 缁熶竴澶у睆鍐呭闄愬 + 灞呬腑锛堟渶缁堝眰锛屾斁鏈€鍚?= 鏈€楂樹紭鍏堢骇锛?
   ------------------------------------------------------------
   鏍瑰洜锛歱remium.css 鍙湁 `.section > *` 闄愬 1560px锛岃鐩栦笉鍒?
         銆岃嚜宸卞氨鏄?section/瀹瑰櫒銆嶇殑鍧楋紝瀵艰嚧鍚屼竴椤甸噷
         涓€鎵瑰潡灞呬腑銆佸彟涓€鎵瑰潡鍏ㄥ睆璐磋竟 鈫?瑙嗚涓娿€屼竴鍧楀線宸︿竴鍧楀線鍙炽€嶃€?

   绛栫暐锛氫互 1560px 涓哄熀鍑嗗鍣ㄥ搴︼紝鎸夎鍙ｅ垎妗ｇ瓑姣旀斁瀹斤紱
         鎵€鏈夊凡鐭ラ《灞傚唴瀹瑰鍣ㄤ竴寰嬮檺瀹?+ 宸﹀彸 auto 灞呬腑銆?
   ============================================================ */

/* 1561px+ 璧凤細鎶婃紡缃戦《灞傚鍣ㄧ撼鍏?1560px 鍩哄噯灞呬腑 */
@media (min-width: 1561px) {
  .quote-section,
  .track-layout,
  .account-page,
  .cart-page,
  .wishlist-page,
  .coa-page,
  .products-page,
  .faq-page,
  .blog-page,
  .filter-bar,
  .account-help,
  .bn-report-grid,
  .ev-paths,
  .ev-hero-inner,
  .faq-list,
  .faq-block,
  .details,
  .info-columns,
  .compare-wrap,
  .shelf-wrap,
  .product-grid,
  .blog-grid {
    max-width: 1560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* bento 涓荤綉鏍硷細鏁村潡闄愬灞呬腑锛屽唴閮ㄥ垪鑷劧璺熼殢 */
@media (min-width: 1561px) {
  .bn-wrap > .bn,
  .bn-hero,
  .bn-grid,
  .bn-main {
    max-width: 1560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ---- 2K锛?921-2560锛夛細瀹瑰櫒鏀惧鍒?1800px ---- */
@media (min-width: 1921px) {
  .quote-section,
  .track-layout,
  .account-page,
  .cart-page,
  .wishlist-page,
  .coa-page,
  .products-page,
  .faq-page,
  .blog-page,
  .filter-bar,
  .account-help,
  .bn-report-grid,
  .ev-paths,
  .ev-hero-inner,
  .faq-list,
  .faq-block,
  .details,
  .info-columns,
  .compare-wrap,
  .shelf-wrap,
  .product-grid,
  .blog-grid,
  .bn-wrap > .bn,
  .bn-hero,
  .bn-grid,
  .bn-main {
    max-width: 1800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ---- 2.5K锛?561-3399锛夛細2100px ---- */
@media (min-width: 2561px) {
  .quote-section,
  .track-layout,
  .account-page,
  .cart-page,
  .wishlist-page,
  .coa-page,
  .products-page,
  .faq-page,
  .blog-page,
  .filter-bar,
  .account-help,
  .bn-report-grid,
  .ev-paths,
  .ev-hero-inner,
  .faq-list,
  .faq-block,
  .details,
  .info-columns,
  .compare-wrap,
  .shelf-wrap,
  .product-grid,
  .blog-grid,
  .bn-wrap > .bn,
  .bn-hero,
  .bn-grid,
  .bn-main {
    max-width: 2100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ---- 4K锛?400+锛夛細2400px ---- */
@media (min-width: 3400px) {
  .quote-section,
  .track-layout,
  .account-page,
  .cart-page,
  .wishlist-page,
  .coa-page,
  .products-page,
  .faq-page,
  .blog-page,
  .filter-bar,
  .account-help,
  .bn-report-grid,
  .ev-paths,
  .ev-hero-inner,
  .faq-list,
  .faq-block,
  .details,
  .info-columns,
  .compare-wrap,
  .shelf-wrap,
  .product-grid,
  .blog-grid,
  .bn-wrap > .bn,
  .bn-hero,
  .bn-grid,
  .bn-main {
    max-width: 2400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* contact 椤典袱鏍忥細grid 瀛愰」鍏佽鏀剁缉锛岄伩鍏嶈鍐呰竟璺濇尋鍑?*/
@media (min-width: 1561px) {
  .quote-section {
    padding-left: clamp(24px, 4vw, 90px) !important;
    padding-right: clamp(24px, 4vw, 90px) !important;
  }
  .quote-section > div,
  .quote-section > form {
    min-width: 0 !important;
  }
}

/* ============================================================
   鎵嬫満绔?2 鍒楀崱鐗囨枃瀛椾慨澶?(2026-09-14)
   闂锛氣墹420px 涓嬩骇鍝?鍒嗙被鍗′负 2 鍒楋紙姣忓垪 167px锛夛紝浣?padding
        涓変唬鍙犲姞锛坅:22px + innerDiv:18px + pill margin:10px = 50px/杈癸級
        鎶婂唴瀹瑰尯鍘嬪埌鍙墿 66px 瀹?鈫?
        路 鍒嗙被鍚嶈鍘嬫垚绔栨帓銆佽繕琚?border-radius:999px 鐨勮兌鍥婅鎺変袱杈?
        路 鎻忚堪鏂囧瓧琚尋鎴愬緢澶氱煭琛?
   鍋氭硶锛氭敹绱?padding銆佽兌鍥婃敼灏忓渾瑙掋€佸垎绫诲悕闄愬埗 2 琛屻€佹弿杩伴檺鍒?2 琛屻€?
        浠呭奖鍝?鈮?20px锛屾闈笌骞虫澘涓嶅彈褰卞搷銆?
   ============================================================ */
@media (max-width: 420px) {
  /* 1) 鏀剁揣鍗＄墖鍐呰竟璺濓紝鎶婄渷涓嬬殑瀹藉害杩樼粰鏂囧瓧 */
  .category-grid .category-card > a { padding: 12px 10px 14px !important; }
  .category-grid .category-card > a > div { padding: 8px 4px 8px !important; }

  /* 2) 鍒嗙被鏍囩鑳跺泭锛氱獎鍗￠噷 999px 鍦嗚浼氳瀛?鈫?鏀瑰皬鍦嗚骞跺厑璁告崲琛?*/
  .category-grid .category-card .pill {
    border-radius: 6px !important;
    margin: 8px 0 5px !important;
    padding: 3px 7px !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.25 !important;
    font-size: 9.5px !important;
    letter-spacing: .04em !important;
    text-align: center !important;
  }

  /* 3) 鍒嗙被鏍囬锛氱粺涓€ 2 琛岄珮锛屼笉鎾戠牬鍗＄墖 */
  .category-grid .category-card h3 {
    font-size: 13px !important;
    line-height: 1.25 !important;
    margin: 6px 0 5px !important;
  }

  /* 4) 鎻忚堪锛氬畬鏁存樉绀猴紝涓嶆埅鏂紙宸插湪涓嬫柟缁熶竴瑕嗙洊 line-clamp锛?*/
  .category-grid .category-card > a > div > p:not(.pill) {
    font-size: 11px !important;
    line-height: 1.35 !important;
    margin: 0 0 8px !important;
  }

  /* 5) 浜у搧鍗★細鍚屾牱鐨勬敹绱э紙浜у搧鍗℃病鏈?.pill 涔嬪鐨勫灞?padding锛?*/
  .product-grid .product-card .card-body { padding: 0 8px 12px !important; }
  .product-grid .product-card h3 {
    font-size: 13.5px !important;
    margin: 8px 4px 5px !important;
  }
  /* 鎻忚堪锛氬畬鏁存樉绀猴紝涓嶆埅鏂紙瑕嗙洊 premium.css @760 鐨?line-clamp:2锛?*/
  .product-grid .product-card p:not(.pill),
  .product-grid .product-card .card-body > p,
  .category-grid .category-card > a > div > p:not(.pill) {
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: initial !important;
    overflow: visible !important;
  }
  .product-grid .product-card p:not(.pill) {
    font-size: 11px !important;
    line-height: 1.4 !important;
    margin: 0 4px 10px !important;
  }
  .product-grid .product-card .pill {
    border-radius: 6px !important;
    font-size: 9.5px !important;
    padding: 3px 7px !important;
    margin: 8px 0 4px !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }
}

/* ============================================================
   浜у搧鍗＄瓑楂樺榻?(2026-09-14)
   闂锛氬悓涓€琛屼骇鍝佸崱鎻忚堪瀛楁暟涓嶅悓 鈫?鍗＄墖楂樺害涓嶄竴 鈫?搴曢儴鎸夐挳涓嶉綈銆?
   鍋氭硶锛氬崱鐗囧唴閮ㄧ旱鍚?flex锛沜ard-body 鎾戞弧鍓╀綑楂樺害锛涙妸鎸夐挳缁勬帹鍒板簳閮ㄣ€?
        妗岄潰涓庢墜鏈虹鍚屾椂鐢熸晥锛堜笉褰卞搷鍐呭锛屽彧鏀瑰榻愶級銆?
   ============================================================ */
.product-grid { align-items: stretch; }
.product-grid .product-card { height: 100%; }
.product-grid .product-card .card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
/* 鎻忚堪涔嬪悗鐨勬寜閽粍娌夊埌鍗＄墖搴曢儴 */
.product-grid .product-card .card-body > a,
.product-grid .product-card .card-body > button.mini-action {
  margin-top: auto !important;
}
/* 鑻ュ瓨鍦ㄤ袱涓寜閽紙View More / Save锛夛紝淇濈暀瀹冧滑涔嬮棿鐨勯棿璺?*/
.product-grid .product-card .card-body > p:not(.pill) { flex: 0 0 auto; }

/* ==========================================================================
   2026-09-14 鎵嬫満绔慨澶嶅潡 P2/P3
   ========================================================================== */

/* P2-2: 鎵嬫満绔叕鍛婃潯淇濈暀鏄剧ず锛堢敤鎴疯姹傦級锛屼慨姝ｆ帓鐗堬細鍗曡涓嶆崲琛?+ 楂樺害鑷€傚簲 */
@media (max-width: 780px) {
  .notice-bar {
    display: flex !important;
    height: auto !important;
    min-height: 32px;
    padding: 7px 12px !important;
    overflow: hidden;
  }
  .notice-track { height: auto !important; min-height: 18px; }
  .notice-track span {
    position: static !important;
    inset: auto !important;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11.5px !important;
    line-height: 1.35;
  }
  /* 鎵嬫満涓婂彧鏄剧ず绗竴鏉★紙杞挱椤圭粷瀵瑰畾浣嶄細閲嶅彔锛屾敼涓洪潤鎬佹帓鍒楀彧鐣欑涓€鏉★級*/
  .notice-track span:nth-child(n+2) { display: none !important; }
  .notice-track span:nth-child(1) {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
}

/* P3-3: 棣栭〉 hero 杈撳叆妗?placeholder 鎴柇 -> 缂╁皬瀛楀彿 */
@media (max-width: 560px) {
  .ev-hero input, .ev-hero .hero-input, #hero-code, input[data-hero-input] { font-size: 13px !important; }
}

/* P3-2: 鍒嗙被鍗℃爣绛剧姝㈡崲琛岋紝淇濊瘉鍚岀被鍗＄墖绛夐珮 */
@media (max-width: 780px) {
  .product-grid .product-card .pill,
  .bn-featured .product-card .pill,
  .bn-cats .bn-tag,
  .category-card .pill { white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
}

/* P3-1: 鎵嬫満绔父璐骇鍝?2 鍒楀お绐?-> 鎻忚堪瀛楀彿鐣ラ檷 + 琛岄珮绱у噾锛屾彁鍗囧彲璇绘€?*/
@media (max-width: 560px) {
  .product-grid .product-card .card-body > p:not(.pill) { font-size: 12.5px !important; line-height: 1.5 !important; }
}

/* ==========================================================================
   2026-09-14 妗岄潰绔?INDEX 鍒嗙被鍗″榻愪慨澶?
   闂锛? 鍒楀崱鐗囨爣绛鹃暱搴︿笉鍚?-> 鏍囩鎹㈣銆佹爣棰樿鏁颁笉鍚?-> 鍗″唴鍏冪礌鍙傚樊涓嶉綈
   ========================================================================== */
@media (min-width: 821px) {
  /* 鏍囩寮哄埗鍗曡锛岃秴楂樻埅鏂?*/
  .category-grid .category-card .pill {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    min-height: 16px;
  }
  /* 鏍囬鍥哄畾涓よ楂樺害锛屼繚璇佸悇鍗℃爣棰樺尯绛夐珮 */
  .category-grid .category-card h3 {
    min-height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* 鎻忚堪鍥哄畾涓よ */
  .category-grid .category-card p {
    min-height: 2.9em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* 浜у搧鏁板浐瀹氬湪鍗＄墖搴曢儴 */
  .category-grid .category-card { display: flex; flex-direction: column; }
  .category-grid .category-card > a,
  .category-grid .category-card > span,
  .category-grid .category-card > div > span { margin-top: auto; }
}

/* 璇勪环鍗＄瓑楂橈紙妗岄潰 2 鍒楁椂宸﹀彸鍗￠珮搴﹀榻愶級 */
@media (min-width: 821px) {
  .testimonials .testimonial-grid,
  .testimonials > div,
  .testimonial-grid { align-items: stretch !important; }
  .testimonial-card, .testimonials article { height: 100%; display: flex; flex-direction: column; }
}

/* ==========================================================================
   2026-09-14 瓒呭灞忥紙2K/4K锛変慨澶?
   闂锛歝ategory-grid 鏈檺瀹?-> 4K 涓?auto-fit 鎵╂垚 7 鍒楋紱瀹瑰櫒杩囩獎 -> 鍐呭缂╀腑闂?
   ========================================================================== */

/* 鍒嗙被缃戞牸锛氬缁堟渶澶?4 鍒楋紝閬垮厤瓒呭灞忔墿鍒?*/
@media (min-width: 981px) {
  .category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* 2K锛氬鍣ㄦ斁瀹?*/
@media (min-width: 1921px) {
  .category-grid { max-width: 1800px !important; margin-left: auto !important; margin-right: auto !important; }
}
/* 2.5K */
@media (min-width: 2561px) {
  .category-grid { max-width: 2200px !important; margin-left: auto !important; margin-right: auto !important; }
}
/* 4K锛氬鍣ㄦ樉钁楁斁瀹?+ 瀛楀彿閫傚害鏀惧ぇ锛岄伩鍏嶁€滅缉鍦ㄤ腑闂粹€?*/
@media (min-width: 3400px) {
  .category-grid { max-width: 3200px !important; margin-left: auto !important; margin-right: auto !important; }

  /* 鏀惧鎵€鏈変富瑕佸唴瀹瑰鍣?*/
  .section > *,
  /* bento 瀛?section 鍗曠嫭闄愬锛堣涓嬶級 */
  .quote-section,
  .track-layout,
  .account-page,
  .cart-page,
  .wishlist-page,
  .coa-page,
  .products-page,
  .faq-page,
  .blog-page,
  .filter-bar,
  .account-help,
  .bn-report-grid,
  .ev-paths,
  .ev-hero-inner,
  .faq-list,
  .faq-block,
  .details,
  .info-columns,
  .compare-wrap,
  .shelf-wrap,
  .product-grid,
  .category-grid,
  .blog-grid {
    max-width: 3000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* bento 单列满宽：子卡片不再各自限宽（统一由 .bento 容器 3000px 控制）
     2026-09-14 修正：原来这里给 .bn-* 限宽 2600px，与 4.2 的 max-width:none 打架，
     且 2600 < 3000 会让卡片比容器窄 → 左右不齐。全部放开。 */
  .bn-wrap > .bn,
  .bn-hero,
  .bn-grid,
  .bn-main,
  .bn-tail,
  .bn-about,
  .bn-duo,
  .bn-shelf-section,
  .bn-featured,
  .bn-cats,
  .bn-cert,
  .bn-reports {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 瀛楀彿鏀惧ぇ涓€妗ｏ紝閰嶅悎瓒呭鐢诲竷 */
  html { font-size: 20px; }

  /* 瓒呭灞忎笅 px 灏忓瓧鍚屾鏀惧ぇ锛坧x 涓嶅彈 html font-size 褰卞搷锛?*/
  .section-head > p,
  .bn-tag,
  .eyebrow,
  .bn-method-step p,
  .bn-report span,
  .product-card .card-body > p:not(.pill),
  .category-card p,
  .blog-grid article p,
  .info-columns p,
  .faq-list p,
  .testimonial-card p { font-size: 15px !important; line-height: 1.6 !important; }
  .section-head > p { max-width: 900px !important; }
  .eyebrow, .bn-tag { font-size: 13px !important; }
  .product-card h3, .category-card h3 { font-size: 20px !important; }
  .product-card .pill, .category-card .pill { font-size: 13px !important; }

  /* 鍗氬鍗″湪瓒呭灞忔敼涓?3 鍒楋紙鍘熸潵鏄?1 鍒?813px锛?*/
  .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

  /* 浜у搧鍗★細鍥哄畾 4 鍒楋紙浜у搧鏁板浐瀹?4 涓紝閬垮厤绌烘牸瀛愶級 */
  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .bn-report-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}


/* ==========================================================================
   超宽屏（2400px+）BENTO 统一规则 —— 单一来源，禁止再叠加补丁
   2026-09-14 重写：此前 6 个媒体查询互相打架，导致 .bn-reports 宽度被压到 990px
   --------------------------------------------------------------------------
   设计原则：
   1) 超宽屏下 bento 放弃 12 列精细网格，改用「自动流 + 固定列数」的稳健布局
   2) 每个板块自己限宽居中，互不干扰
   3) 只保留 3 档：≥2400（2K/2.5K）、≥3400（4K）
   4) 2026-09-14 关键教训：grid item 默认 stretch 才会填满列；
      一旦被设 justify-self:center/start，flex 卡片会收缩到内容宽（实测 982px/1655px）。
      所有超宽屏规则必须显式写 justify-self:stretch + width:100%。
   ========================================================================== */

/* ---------- 1) WhatsApp 悬浮按钮（保留原有分级放大） ---------- */
@media (min-width: 781px) {
  .floating-contacts { right: 28px !important; bottom: 32px !important; }
  .floating-contact-item {
    width: auto !important;
    min-width: 0 !important;
    height: 72px !important;
    grid-template-columns: 72px auto !important;
    padding-right: 24px !important;
    box-shadow: 0 12px 32px rgba(0,0,0,.35) !important;
  }
  .floating-contact-item .floating-label { display: block !important; padding-right: 0 !important; font-size: 16px !important; }
  .floating-icon { width: 72px !important; height: 72px !important; margin: 0 !important; }
  .floating-whatsapp .floating-icon::before { width: 44px !important; height: 44px !important; }
  .floating-whatsapp .floating-icon::after { width: 22px !important; height: 22px !important; border-width: 4px !important; }
  .floating-email .floating-icon::before { width: 40px !important; height: 26px !important; border-width: 4px !important; }
  .floating-email .floating-icon::after { width: 28px !important; height: 28px !important; border-left-width: 5px !important; border-bottom-width: 5px !important; }
}
@media (min-width: 1921px) {
  .floating-contacts { right: 40px !important; bottom: 48px !important; }
  .floating-contact-item { height: 80px !important; grid-template-columns: 80px auto !important; padding-right: 28px !important; }
  .floating-contact-item .floating-label { font-size: 19px !important; }
  .floating-icon { width: 80px !important; height: 80px !important; }
}
@media (min-width: 3400px) {
  .floating-contacts { right: 64px !important; bottom: 72px !important; }
  .floating-contact-item { height: 108px !important; grid-template-columns: 108px auto !important; padding-right: 40px !important; border-radius: 999px !important; }
  .floating-contact-item .floating-label { font-size: 26px !important; }
  .floating-icon { width: 108px !important; height: 108px !important; }
}

/* ---------- 2) ON FILE 卡片显示数量（全局基准，不再分档乱改列数） ---------- */
/* 默认：只显示前 3 张 */
.bn-report-grid .bn-report:nth-child(n+4) { display: none; }

/* ≥1600px 显示 4 张；.bn-reports 横跨整行，卡片才够宽（否则仅 135px） */
@media (min-width: 1600px) {
  .bn-report-grid .bn-report:nth-child(4) { display: flex; }
  .bento > .bn-reports,
  .bento .bn-reports,
  article.bn.bn-reports {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
  .bn-report-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px !important; }
  .bn-report img { height: 220px !important; }
}
/* ≥2400px 显示 5 张 */
@media (min-width: 2400px) {
  .bn-report-grid .bn-report:nth-child(5) { display: flex; }
}
/* ≥3400px（4K）显示全部 6 张 */
@media (min-width: 3400px) {
  .bn-report-grid .bn-report:nth-child(6) { display: flex; }
}
/* 手机端只显示前 3 张 */
@media (max-width: 780px) {
  .bn-report-grid .bn-report:nth-child(n+4) { display: none !important; }
}

/* ---------- 3) ON FILE 卡片区不限宽（否则内部 grid 只撑到 805px） ---------- */
.bn-report-grid {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

/* ==========================================================================
   4) ≥2400px（2K / 2.5K）：bento 改用自动流布局，彻底摆脱 12 列行号冲突
   ========================================================================== */
@media (min-width: 2400px) and (max-width: 3399px) {
  /* 3.1 容器：12 列改为 2 列自动流，显式行号全部失效 → 不再挤压 */
  .bento {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 20px !important;
    max-width: 2400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* 3.2 所有卡片：清掉显式行列 + 强制拉伸填满列（否则 flex 容器宽度收缩到内容宽） */
  .bento > .bn {
    grid-column: auto !important;
    grid-row: auto !important;
    max-width: none !important;
    justify-self: stretch !important;
    width: 100% !important;
  }
  /* 3.3 查询卡 + ON FILE + method 必须整行（放最后 + 高特异性，压过 3.2） */
  .bento > article.bn.bn-query,
  .bento > article.bn.bn-reports,
  .bento > article.bn.bn-method,
  .bento > .bn-query,
  .bento > .bn-reports,
  .bento > .bn-method {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    justify-self: stretch !important;
    width: 100% !important;
  }
  /* 3.4 ON FILE 卡片区：5 列 */
  .bn-report-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 16px !important; }
  .bn-report img { height: 200px !important; }
  .bn-report span { font-size: 14px !important; }
  /* 3.5 stats / paths 内部保持双列 */
  .bn-stats { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* ==========================================================================
   4) ≥3400px（4K）：bento 单列满宽（用户 2026-09-14 拍板）
   --------------------------------------------------------------------------
   上一版用 2 列自动流，但 .bn-featured/.bn-cats/.bn-about/.bn-tail 没写
   grid-column:1/-1，各自只占半列，再被内部 max-width:2600px 一挤，
   就出现 L315/L483/L615/L1088/L1655 五种左边距 → 视觉上「排版混乱」。
   本版改为：一行一块，全部 1/-1 满宽，宽度统一 = 容器宽。
   ========================================================================== */
@media (min-width: 3400px) {
  /* 4.1 容器：单列 */
  .bento {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: 24px !important;
    max-width: 3000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 4.2 所有 bento 卡片：一律整行满宽，清掉旧的行号/列号/限宽 */
  .bento > .bn,
  .bento > article.bn,
  .bento > article.bn.bn-query,
  .bento > article.bn.bn-reports,
  .bento > article.bn.bn-method,
  .bento > .bn-query,
  .bento > .bn-reports,
  .bento > .bn-method,
  .bento > .bn-hero,
  .bento > .bn-stats,
  .bento > .bn-paths,
  .bento > .bn-cert,
  .bento > .bn-featured,
  .bento > .bn-cats,
  .bento > .bn-about,
  .bento > .bn-tail,
  .bento > .bn-shelf-section {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 4.3 卡片内部子网格：撑满父容器，不再自带限宽 */
  .bento .bn-report-grid,
  .bento .bn-featured-grid,
  .bento .bn-cats > *,
  .bento .bn-about > *,
  .bento .bn-tail-col,
  .bento .bn-stats,
  .bento .bn-paths {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 4.4 ON FILE 6 列 */
  .bn-report-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 20px !important; }
  .bn-report img { height: 300px !important; }
  .bn-report span { font-size: 17px !important; }
  .bn-stats { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

  /* 4.5 外层 section：内部容器统一 3000px，与 .bento 对齐（否则 3200 vs 3000 左右不齐）
     —— 这些 section 是 MAIN 的直接子级，内部才有自己的容器 */
  .bn-featured > .section-head,
  .bn-featured > .product-grid,
  .bn-cats > .section-head,
  .bn-cats > .category-grid,
  .bn-shelf-section > .section-head,
  .bn-shelf-section > .shelf-note,
  .bn-about > .about-copy,
  .bn-wrap-head,
  .testimonials > .section-head,
  .testimonials > .fb-grid,
  .trust-strip > *,
  .footer-inner,
  .footer-grid {
    max-width: 3000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }

  /* 4.6 bn-about：保持「文左 + 图右」两栏，容器 3000px 居中
     —— 上一版手滑写成 display:block，导致图文变上下堆叠、图只占一半宽右侧空 1157px */
  .bn-about {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) !important;
    column-gap: 72px !important;
    align-items: center !important;
    max-width: 3000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .bn-about > .about-copy {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
    justify-self: stretch !important;
  }
  .bn-about > .about-image {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    justify-self: stretch !important;
  }
  .bn-about > .about-image > img {
    width: 100% !important;
    height: 100% !important;
    max-height: 720px !important;
    object-fit: cover !important;
    border-radius: 18px !important;
  }

  /* 4.7 bn-tail：faq + blog 两栏等宽对齐（原来 1143 vs 1702 且位置乱飞） */
  .bn-tail {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 48px !important;
    align-items: start !important;
    max-width: 3000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .bn-tail > .bn-tail-col {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-self: stretch !important;
  }
}

/* ==========================================================================
   5) HERO 背景图：超宽屏下向右渐隐，消除硬切边（用户选方案 A）
   --------------------------------------------------------------------------
   根因：hero 图仅 1536x864，在 2K/4K 容器(2400~3830px)下 cover 放大后
        ::after 的 100deg 斜角渐变覆盖不均，右侧露出背景色，形成硬切。
   修法：给 .ev-hero-media 加 mask 向右淡出 + 强化 ::after 右侧过渡。
   ========================================================================== */
@media (min-width: 1921px) {
  .ev-hero-media {
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 45%, rgba(0,0,0,.6) 68%, transparent 96%);
            mask-image: linear-gradient(90deg, #000 0%, #000 45%, rgba(0,0,0,.6) 68%, transparent 96%);
    background-position: left center !important;
  }
  /* 右侧叠加色：与页面深色底一致，确保完全融入 */
  .ev-hero::after {
    background:
      linear-gradient(100deg, rgba(5,8,15,.97) 0%, rgba(5,8,15,.90) 40%, rgba(5,8,15,.72) 100%) !important;
  }
}
@media (min-width: 3400px) {
  .ev-hero-media {
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 38%, rgba(0,0,0,.55) 62%, transparent 92%);
            mask-image: linear-gradient(90deg, #000 0%, #000 38%, rgba(0,0,0,.55) 62%, transparent 92%);
  }
}