/* mobile.css (2.2.8) — mobile / tablet fixes from the 2.2.7 mobile QA.
   Loaded LAST (after responsive.css) on every front-end page. Every rule sits inside a
   max-width media query (plus one min-width rule that hides the new menu close button),
   so desktop (>= 1025px) is unchanged. */

/* ---------- G1: floating contact bar -> fixed bottom action bar on phones & tablets ----------
   The round icons on the right covered text, buttons and table headers on every template. */
@media screen and (max-width:1024px){
  body{padding-bottom:calc(52px + env(safe-area-inset-bottom,0px))}
  .float_fixed{left:0;right:0;bottom:0;width:auto;z-index:5;background:#fff;box-shadow:0 -2px 10px rgba(0,0,0,.12);padding-bottom:env(safe-area-inset-bottom,0px)}
  .float_fixed_list{display:flex}
  .float_fixed_list .item{flex:1 1 0;width:auto;height:52px;margin:0;border-left:1px solid #E6ECF5}
  .float_fixed_list .item:first-child{border-left:0}
  .float_fixed_list .item .con,
  .float_fixed_list .item:hover .con{position:static;display:block;width:100%;height:100%;transform:none;-webkit-transform:none;box-shadow:none;background:none;border-radius:0}
  .float_fixed_list .item .item_icon,
  .float_fixed_list .item:hover .item_icon,
  .float_fixed_list .item.back_top_btn:hover .item_icon{width:100%;height:52px;padding:0;background:none;box-shadow:none;border-radius:0}
  .float_fixed_list .item .item_icon .iconfont{font-size:24px}
  .float_fixed_list .item .item_icon .ycx_wa_icon{width:24px;height:24px}
  .float_fixed_list .item .item_con{display:none}
  .float_fixed_list .item:active{background:#E6ECF5}
}

/* ---------- G2: mobile menu panel: solid background, close button, scroll lock ---------- */
@media screen and (max-width:1024px){
  .mobile_menu_box{background:#fff;max-width:420px;padding-top:8px;box-shadow:-6px 0 24px rgba(0,0,0,.18)}
  .mobile_menu_mask{background:rgba(6,29,66,.45)}
  .mobile_menu_close{display:block;position:relative;width:44px;height:44px;margin:0 -8px 4px auto;padding:0;border:0;background:none;cursor:pointer;color:var(--hue)}
  .mobile_menu_close span,.mobile_menu_close::before,.mobile_menu_close::after{content:"";position:absolute;left:11px;top:21px;width:22px;height:2px;border-radius:2px;background:currentColor}
  .mobile_menu_close span{display:none}
  .mobile_menu_close::before{transform:rotate(45deg)}
  .mobile_menu_close::after{transform:rotate(-45deg)}
  .mobile_menu_close:focus-visible{outline:2px solid var(--hue-2);outline-offset:-2px}
  html.ycx-menu-open,html.ycx-menu-open body{overflow:hidden}
}
@media screen and (min-width:1025px){
  .mobile_menu_close{display:none}
}

/* ---------- front page hero: slider arrows moved to the bottom-right corner (they sat on the text) ---------- */
@media screen and (max-width:1024px){
  .index_b_prev,.index_b_next{top:auto;bottom:10px;transform:none;-webkit-transform:none}
  .index_b_prev{left:auto;right:56px}
  .index_b_next{right:14px}
}
@media screen and (max-width:767px){
  .index_b_prev,.index_b_next{bottom:8px}
  .index_b_prev{right:50px}
  .index_b_next{right:10px}
  .ycx_hero_inner{padding:0 6vw 0 5vw}
}

/* ---------- G3: inner-page banner: stronger navy overlay so the white subtitle stays readable ---------- */
@media screen and (max-width:1024px){
  .ycx_sub_banner::before{background:linear-gradient(90deg,rgba(6,29,66,.88) 0%,rgba(11,47,102,.74) 55%,rgba(11,47,102,.58) 100%)}
  .ycx_sub_banner .subPage_banner1{text-shadow:0 1px 3px rgba(0,0,0,.35)}
}
@media screen and (max-width:767px){
  .subPage_banner1 .text{font-size:14px;line-height:1.5}
}

/* ---------- forms: one column on narrow phones; 16px inputs (no iOS zoom on focus) ---------- */
@media screen and (max-width:767px){
  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]),
  textarea,select{font-size:16px}
}
@media screen and (max-width:480px){
  .conOne1_r_form .item,
  .pro_deTwo1_r_form .item{width:100%}
}

/* ---------- product page: 2-column spec tables reflow instead of scrolling with a cut-off value column ---------- */
@media screen and (max-width:767px){
  .pro_det_r_text table,.ycx_entry table{min-width:0}
  .pro_det_r_text table:has(tr > :nth-child(3)),.ycx_entry table:has(tr > :nth-child(3)){min-width:480px}
  .pro_det_r_text table:not(:has(tr > :nth-child(3))) td{overflow-wrap:anywhere}
  .pro_det_r_text table:not(:has(tr > :nth-child(3))) th{overflow-wrap:normal;word-break:normal;hyphens:manual}
}

/* ---------- category hub: comparison table ---------- */
/* tablet: fit the 5 columns into the content width instead of a 760px table that is cut off */
@media screen and (min-width:768px) and (max-width:1024px){
  .ycx_compare_table{min-width:0;font-size:14px}
  .ycx_compare_table th,.ycx_compare_table td{padding:12px}
  .ycx_compare_table tbody th{white-space:normal;width:20%}
}
/* phones: every product becomes a card with labelled rows */
@media screen and (max-width:767px){
  .ycx_hub_compare .ycx_table_scroll{overflow:visible;box-shadow:none;border-radius:0}
  .ycx_compare_table{display:block;min-width:0;background:none;font-size:15px}
  .ycx_compare_table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ycx_compare_table tbody,.ycx_compare_table tr{display:block}
  .ycx_compare_table tr{background:#fff;border-radius:10px;box-shadow:0 3px 14px rgba(0,0,0,.07);padding:4px 16px 8px;margin-bottom:14px}
  .ycx_compare_table tbody tr:last-child{margin-bottom:0}
  .ycx_compare_table tbody th{display:block;white-space:normal;font-size:17px;padding:12px 0 10px;border-bottom:1px solid #e5e9f0}
  .ycx_compare_table td{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:12px;padding:9px 0;white-space:normal}
  .ycx_compare_table td:nth-child(2){white-space:normal}
  .ycx_compare_table td::before{content:attr(data-label);color:#5b6b82;font-size:13px;font-weight:600;line-height:1.55}
  .ycx_compare_table tbody tr th,.ycx_compare_table tbody tr:last-child th{border-bottom:1px solid #e5e9f0}
  .ycx_compare_table tbody tr td,.ycx_compare_table tbody tr:last-child td{border-bottom:1px solid #f0f3f7}
  .ycx_compare_table tbody tr td:last-child{border-bottom:0}
  /* "Need a COA…" box: keep the side gutter like the other sections */
  .ycx_hub_cta .wrap{padding-left:15px;padding-right:15px}
}

/* ---------- Downloads: CAS numbers never break mid-number (column before the row-header product name) ---------- */
@media screen and (max-width:1024px){
  .ycx_info .wp-block-table table:not(.ycx_cas_table) tbody tr:has(> th:nth-child(2)) > td:first-child{white-space:nowrap}
}