/* Steam Trap / dedicated overrides. Load after css/style.css and css/category.css. */
.steamtrap-page { --st-ink:#122a3e; --st-blue:#147ca9; --st-line:#dfe9f0; --st-soft:#f5f9fc; color:var(--st-ink); }
/* Shared category hero: match the site's 430px desktop standard. */
.steamtrap-page .ct-hero {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  min-height: 430px;
  padding: 54px 32px 48px;
  display: flex;
  align-items: center;
  background-image: linear-gradient(90deg, rgba(8,27,45,.97) 0%, rgba(8,36,56,.86) 34%, rgba(9,42,63,.32) 61%, rgba(9,42,63,.04) 100%), url('../img/keyvisual/keyvisual-steamtrap.jpg') !important;
  background-position: center, center 48%;
  background-repeat: no-repeat;
  background-size: cover;
}
.steamtrap-page .ct-hero-inner {
  width: min(1160px, 100%);
  min-height: 328px;
  margin: 0 auto;
  padding: 0;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.steamtrap-page .ct-hero h1 { color:#fff; font-size:clamp(28px,3.5vw,46px); line-height:1.25; letter-spacing:.025em; margin:12px 0; }
.steamtrap-page .ct-hero h1 .accent { color:#a7e4fb; }
.steamtrap-page .ct-hero .ct-eyebrow { color:#a6dcf2; font-size:13px; letter-spacing:.1em; }
.steamtrap-page .ct-hero-sub { color:#eef8fe; font-size:clamp(13px,1.4vw,16px); line-height:1.8; max-width:680px; }
.steamtrap-page .ct-breadcrumb,.steamtrap-page .ct-breadcrumb a,.steamtrap-page .ct-breadcrumb span { color:#e5f1f8; }
.steamtrap-page .ct-hero-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.steamtrap-page .ct-hero-tags span { background:rgba(232,247,255,.12); border:1px solid rgba(232,247,255,.35); color:#f3fbff; border-radius:100px; padding:5px 11px; font-size:11px; }
.steamtrap-page .ct-features { padding:24px 0 12px; }
.steamtrap-page .ct-features-inner,.steamtrap-page .ct-main { width:min(1160px,calc(100% - 40px)); margin-left:auto; margin-right:auto; }
.steamtrap-page .ct-features-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.steamtrap-page .ct-feature-card { min-width:0; padding:19px; border-radius:14px; background:var(--st-soft); border:1px solid var(--st-line); box-shadow:none; }
.steamtrap-page .ct-feature-icon,.steamtrap-page .ct-section-icon { display:inline-grid; place-items:center; width:35px; height:35px; border-radius:10px; background:#e5f4fa; color:#157cad; font-weight:700; font-size:12px; flex-shrink:0; }
.steamtrap-page .ct-feature-title { font-weight:700; font-size:15px; margin:10px 0 6px; }
.steamtrap-page .ct-feature-text { margin:0; font-size:13px; line-height:1.72; }
.steamtrap-page .ct-main { padding-top:0; padding-bottom:40px; }
.steamtrap-page .ct-section { margin:0; padding:31px 0; border-bottom:1px solid var(--st-line); }
.steamtrap-page .ct-section:last-child { border-bottom:0; }
.steamtrap-page .ct-section-header { display:flex; align-items:center; gap:12px; margin:0 0 19px; }
.steamtrap-page .ct-section-title-wrap { flex:1; }
.steamtrap-page .ct-section-en { font-size:12px; letter-spacing:.07em; color:var(--st-blue); }
.steamtrap-page .ct-section-title { font-size:clamp(20px,2.2vw,27px); line-height:1.35; margin:3px 0 0; color:var(--st-ink); }
.steamtrap-page .ct-section-badge { font-size:12px; background:#e9f4fa; color:#126991; border-radius:20px; padding:5px 10px; }
.steamtrap-page .st-trap-intro { font-size:15px; line-height:1.9; margin:0 0 17px; }
.steamtrap-page .st-overview-img { display:block; max-width:100%; height:auto; margin:14px auto 0; border-radius:12px; }
.steamtrap-page .st-selection { width:100%; overflow-x:auto; margin:0 0 15px; border-radius:12px; border:1px solid var(--st-line); }
.steamtrap-page .st-table { border-collapse:collapse; min-width:760px; width:100%; background:#fff; }
.steamtrap-page .st-table th,.steamtrap-page .st-table td { padding:12px 10px; border:1px solid var(--st-line); text-align:center; vertical-align:middle; font-size:13px; }
.steamtrap-page .st-table thead th { background:#eaf4fa; color:var(--st-ink); font-weight:700; }
.steamtrap-page .st-table tbody td:first-child { min-width:95px; font-weight:700; background:#f5f9fc; }
.steamtrap-page .st-table .st-note-cell { text-align:left; line-height:1.65; font-size:12px; }
.steamtrap-page .st-trap-img { width:90px; height:80px; max-width:100%; object-fit:contain; display:block; margin:0 auto 5px; }
.steamtrap-page .st-trap-code { font-weight:700; color:#176c97; }
.steamtrap-page .st-product-unit { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.13fr); gap:18px; align-items:stretch; margin:0 0 20px; }
.steamtrap-page .st-product-unit .ct-grid { display:block; margin:0 !important; }
.steamtrap-page .st-product-unit .ct-card { height:100%; border:1px solid var(--st-line); border-radius:14px; overflow:hidden; background:#fff; display:grid; grid-template-columns:minmax(145px,40%) 1fr; box-shadow:0 3px 14px rgba(18,42,62,.05); position:relative; }
.steamtrap-page .st-product-unit .ct-card-img { display:grid; place-items:center; min-height:230px; background:var(--st-soft); padding:13px; }
.steamtrap-page .st-product-unit .ct-card-img img { display:block; max-width:100%; width:100%; height:190px; object-fit:contain; }
.steamtrap-page .st-product-unit .ct-card-body { padding:20px 17px; display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.steamtrap-page .st-product-unit .ct-card-num { color:var(--st-blue); font-size:12px; }
.steamtrap-page .st-product-unit .ct-card-name { margin:0; color:var(--st-ink); font-size:17px; line-height:1.45; }
.steamtrap-page .st-product-unit .ct-card-size,.steamtrap-page .st-product-unit .ct-card-desc { font-size:12px; line-height:1.7; margin:0; }
.steamtrap-page .ct-card-new { position:absolute; top:10px; left:10px; z-index:1; }
.steamtrap-page .st-coming-soon { display:inline-block; margin-top:auto; border-radius:8px; padding:9px 14px; background:#edf2f5 !important; color:#667784 !important; font-size:12px; text-decoration:none; border:1px solid #dce6ec; cursor:default; pointer-events:none; }
.steamtrap-page .st-spec-block { min-width:0; padding:15px; margin:0; background:var(--st-soft); border:1px solid var(--st-line); border-radius:14px; overflow-x:auto; }
.steamtrap-page .st-spec-block-title { font-weight:700; font-size:15px; margin:0 0 12px; }
.steamtrap-page .st-spec-table { border-collapse:collapse; width:100%; min-width:420px; background:#fff; }
.steamtrap-page .st-spec-table th,.steamtrap-page .st-spec-table td { border:1px solid var(--st-line); padding:10px 7px; text-align:center; vertical-align:middle; font-size:12px; }
.steamtrap-page .st-spec-table th { background:#e5f1f8; white-space:nowrap; }
.steamtrap-page .st-spec-table .code { font-weight:700; color:#126f9e; }
.steamtrap-page .ct-detail-block { margin-top:18px !important; }
.steamtrap-page .ct-detail-title { font-weight:700; margin-bottom:12px; }
.steamtrap-page .ct-detail-img { max-width:100%; height:auto; border-radius:10px; }
.steamtrap-page .ct-detail-spacer { display:none; }
.steamtrap-page .st-info-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; }
.steamtrap-page .st-info-block { border:1px solid var(--st-line); border-radius:14px; overflow:hidden; background:#fff; }
.steamtrap-page .st-info-block > img { width:100%; max-height:260px; object-fit:contain; background:var(--st-soft); display:block; }
.steamtrap-page .st-info-body { padding:19px; }
.steamtrap-page .st-info-label { color:var(--st-blue); font-size:12px; }
.steamtrap-page .st-info-title { font-weight:700; font-size:18px; margin:5px 0 9px; }
.steamtrap-page .st-info-text { margin:0; font-size:14px; line-height:1.75; }
@media(max-width:1000px) { .steamtrap-page .ct-features-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .steamtrap-page .st-product-unit { grid-template-columns:1fr; gap:10px; } }
@media(max-width:640px) { .steamtrap-page .ct-hero { min-height:350px; background-position:center,right 35% center; background-image:linear-gradient(90deg,rgba(8,27,45,.94),rgba(8,27,45,.65)),var(--st-hero-image) !important; } .steamtrap-page .ct-hero-inner { width:calc(100% - 32px); padding:23px 0 28px; } .steamtrap-page .ct-hero-sub br { display:none; } .steamtrap-page .ct-hero-tags { gap:5px; } .steamtrap-page .ct-hero-tags span { font-size:10px; } .steamtrap-page .ct-main,.steamtrap-page .ct-features-inner { width:calc(100% - 28px); } .steamtrap-page .ct-features { padding-top:15px; } .steamtrap-page .ct-features-grid { gap:8px; } .steamtrap-page .ct-feature-card { padding:12px; } .steamtrap-page .ct-feature-title { font-size:13px; } .steamtrap-page .ct-feature-text { font-size:12px; } .steamtrap-page .ct-section { padding:24px 0; } .steamtrap-page .st-product-unit .ct-card { grid-template-columns:1fr; } .steamtrap-page .st-product-unit .ct-card-img { min-height:180px; } .steamtrap-page .st-product-unit .ct-card-img img { height:170px; } .steamtrap-page .st-info-grid { grid-template-columns:1fr; } .steamtrap-page .ct-section-header { gap:9px; } .steamtrap-page .ct-section-badge { white-space:nowrap; } }


/* Larger visuals for Installation & Inspection section */
.steamtrap-page #cat-service .st-info-grid { grid-template-columns:1fr; gap:22px; }
.steamtrap-page #cat-service .st-info-block { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.9fr); align-items:stretch; }
.steamtrap-page #cat-service .st-info-block > img { width:100%; min-height:320px; max-height:400px; object-fit:contain; background:var(--st-soft); padding:16px; }
.steamtrap-page #cat-service .st-info-body { padding:24px; display:flex; flex-direction:column; justify-content:center; }
.steamtrap-page #cat-service .st-info-title { font-size:20px; }
.steamtrap-page #cat-service .ct-detail-block { margin-top:28px !important; }
.steamtrap-page #cat-service .ct-detail-img { display:block; width:100%; max-width:100%; }

@media(max-width:860px) {
  .steamtrap-page #cat-service .st-info-block { grid-template-columns:1fr; }
  .steamtrap-page #cat-service .st-info-block > img { min-height:240px; max-height:none; }
}


/* Shared mobile hero sizing: content-driven height and readable text. */
@media (max-width: 768px) {
  .steamtrap-page .ct-hero {
    min-height: 0;
    padding: 36px 20px 34px;
    background-image: linear-gradient(90deg, rgba(8,27,45,.97) 0%, rgba(8,30,48,.91) 52%, rgba(8,30,48,.45) 100%), url('../img/keyvisual/keyvisual-steamtrap.jpg') !important;
    background-position: center, 68% center;
  }
  .steamtrap-page .ct-hero-inner {
    width: 100%;
    min-height: 0;
    padding: 0;
  }
}