/* ==========================================================
   HEDA SHELVES
   NO.00198 | CUSTOM RACKING & SHELVING SOLUTIONS

   Complete Product Description | HTML + CSS
   Official HEDA Photos / B2B Custom Inquiry Page
   Fully Scoped / Responsive / Native Inquiry Popup
   ========================================================== */

.hcs198{
  --c198-navy:#172d42;
  --c198-navy2:#25455d;
  --c198-blue:#315e80;
  --c198-orange:#e18b39;
  --c198-ink:#243441;
  --c198-muted:#677782;
  --c198-line:#dce4e9;
  --c198-soft:#f2f6f8;
  --c198-white:#fff;

  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  overflow:hidden;
  background:#fff;
  color:var(--c198-ink);
  font-family:Arial,Helvetica,sans-serif;
  font-size:15px;
  line-height:1.75;
  container:c198 / inline-size;
}

.hcs198,
.hcs198 *,
.hcs198 *::before,
.hcs198 *::after{
  box-sizing:border-box;
}

.hcs198 h2,
.hcs198 h3,
.hcs198 h4,
.hcs198 p,
.hcs198 figure{
  margin:0;
  padding:0;
}

.hcs198 h2,
.hcs198 h3,
.hcs198 h4{
  color:inherit;
  font-family:inherit;
  font-weight:700;
  line-height:1.18;
}

.hcs198 p{
  line-height:1.88;
}

.hcs198 img{
  display:block;
  max-width:100%;
  height:auto;
  border:0;
}

.hcs198 a{
  text-decoration:none;
}

.hcs198 .c-wrap{
  width:calc(100% - 64px);
  max-width:1160px;
  margin:0 auto;
}

.hcs198 .c-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:11px;
  color:var(--c198-blue);
  font-size:10.5px;
  font-weight:700;
  line-height:1.5;
  letter-spacing:1.25px;
  text-transform:uppercase;
}

.hcs198 .c-eyebrow::before{
  content:"";
  width:23px;
  height:2px;
  flex:0 0 23px;
  background:currentColor;
}

.hcs198 .c-heading{
  font-size:clamp(29px,3.6vw,45px);
  letter-spacing:-1.1px;
}

.hcs198 .c-copy{
  color:var(--c198-muted);
  font-size:14px;
  line-height:1.94;
}

/* ==========================================================
   NATIVE HEDA INQUIRY POPUP
   ========================================================== */

.hcs198 .c-quote.themes_box_inquiry_button_alert{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:22px;
  min-height:52px;
  width:auto!important;
  max-width:100%;
  padding:14px 25px!important;
  background:var(--c198-orange)!important;
  border:1px solid var(--c198-orange)!important;
  border-radius:2px!important;
  color:#162b3e!important;
  font-family:inherit;
  font-size:12px!important;
  font-weight:700!important;
  line-height:1.5!important;
  letter-spacing:.5px;
  text-align:center;
  text-transform:uppercase;
  text-decoration:none!important;
  box-shadow:none!important;
  cursor:pointer;
  transition:background .2s ease;
}

.hcs198 .c-quote.themes_box_inquiry_button_alert:hover{
  background:#f2a65e!important;
  border-color:#f2a65e!important;
  color:#162b3e!important;
}

.hcs198 .c-arrow{
  font-size:20px;
  font-weight:400;
  line-height:1;
}

/* ==========================================================
   01 | INDUSTRIAL INQUIRY HERO
   ========================================================== */

.hcs198 .c-hero{
  background:var(--c198-navy);
  color:#fff;
}

.hcs198 .c-hero-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  padding:19px 0;
  border-bottom:1px solid rgba(255,255,255,.2);
}

.hcs198 .c-hero-top span,
.hcs198 .c-hero-top strong{
  color:#d4e0e7;
  font-size:10px;
  font-weight:700;
  letter-spacing:1px;
}

.hcs198 .c-hero-top strong{
  color:#f0b175;
}

.hcs198 .c-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr);
  gap:32px;
  align-items:stretch;
  padding:39px 0 44px;
}

.hcs198 .c-hero-content{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding:40px 4px 40px 0;
  min-width:0;
}

.hcs198 .c-hero .c-eyebrow{
  margin-bottom:25px;
  color:#f0b67f;
}

.hcs198 .c-hero h2{
  max-width:620px;
  margin-bottom:25px;
  color:#fff;
  font-size:clamp(36px,4vw,55px);
  letter-spacing:-1.6px;
  line-height:1.08;
}

.hcs198 .c-hero h2 span{
  color:#f0a75d;
}

.hcs198 .c-hero-content > p{
  max-width:540px;
  margin-bottom:29px;
  color:#c9d8e2;
  font-size:14.5px;
  line-height:1.93;
}

.hcs198 .c-hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:31px;
}

.hcs198 .c-hero-tags span{
  padding:8px 10px;
  border:1px solid #567083;
  color:#dae5eb;
  font-size:10px;
  font-weight:700;
}

.hcs198 .c-hero-photo{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:16px;
  background:#e7ecef;
}

.hcs198 .c-hero-photo figure{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1;
  min-height:0;
}

.hcs198 .c-hero-photo img{
  width:100%;
  height:auto;
  max-height:590px;
  object-fit:contain;
}

.hcs198 .c-img-caption{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid #cdd8df;
  color:#647682;
  font-size:10px;
  font-weight:700;
  line-height:1.6;
  letter-spacing:.4px;
  text-transform:uppercase;
}

/* ==========================================================
   02 | CUSTOMER INTENT STRIP
   ========================================================== */

.hcs198 .c-strip{
  background:#edf3f6;
  border-bottom:1px solid var(--c198-line);
}

.hcs198 .c-strip-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  padding:28px 0;
}

.hcs198 .c-strip-item{
  padding:9px 26px;
  border-right:1px solid #cbd9e2;
}

.hcs198 .c-strip-item:first-child{
  padding-left:0;
}

.hcs198 .c-strip-item:last-child{
  padding-right:0;
  border:0;
}

.hcs198 .c-strip-item strong{
  display:block;
  margin-bottom:6px;
  color:var(--c198-navy);
  font-size:15px;
}

.hcs198 .c-strip-item p{
  color:#647985;
  font-size:12px;
  line-height:1.8;
}

/* ==========================================================
   03 | SOLUTION CATEGORIES
   ========================================================== */

.hcs198 .c-solutions{
  padding:103px 0 110px;
  background:#fff;
}

.hcs198 .c-head-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  align-items:end;
  gap:55px;
  margin-bottom:43px;
}

.hcs198 .c-head-split .c-eyebrow{
  margin-bottom:20px;
}

.hcs198 .c-solutions-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:17px;
  align-items:stretch;
}

.hcs198 .c-solution-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:31px 30px 35px;
  background:#f3f6f8;
  border-left:3px solid var(--c198-blue);
}

.hcs198 .c-solution-card:nth-child(2){
  border-left-color:var(--c198-orange);
}

.hcs198 .c-solution-card:nth-child(3){
  border-left-color:#6c869a;
}

.hcs198 .c-solution-card:nth-child(4){
  border-left-color:#c18a60;
}

.hcs198 .c-solution-card small{
  display:block;
  margin-bottom:27px;
  color:#647c8b;
  font-size:10px;
  font-weight:700;
  letter-spacing:1px;
}

.hcs198 .c-solution-card h3{
  margin-bottom:14px;
  color:var(--c198-navy);
  font-size:21px;
}

.hcs198 .c-solution-card p{
  color:#657581;
  font-size:13px;
  line-height:1.9;
}

.hcs198 .c-solution-card .c-keywords{
  display:block;
  margin-top:auto;
  padding-top:22px;
  color:#42637c;
  font-size:11px;
  font-weight:700;
  line-height:1.9;
}

/* ==========================================================
   04 | OFFICIAL PRODUCT RANGE PHOTO
   ========================================================== */

.hcs198 .c-range{
  padding:100px 0 110px;
  background:#edf3f6;
}

.hcs198 .c-range-grid{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:40px;
  align-items:center;
}

.hcs198 .c-range-content .c-eyebrow{
  margin-bottom:20px;
}

.hcs198 .c-range-content .c-heading{
  margin-bottom:23px;
}

.hcs198 .c-range-content .c-copy{
  margin-bottom:22px;
}

.hcs198 .c-range-points{
  border-top:1px solid #c9d7e0;
}

.hcs198 .c-range-point{
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  gap:12px;
  padding:15px 0;
  border-bottom:1px solid #c9d7e0;
}

.hcs198 .c-range-point > span{
  color:var(--c198-orange);
  font-size:13px;
  font-weight:700;
}

.hcs198 .c-range-point p{
  color:#526a7a;
  font-size:12.5px;
  line-height:1.85;
}

.hcs198 .c-range-photo{
  min-width:0;
  padding:18px;
  background:#fff;
}

.hcs198 .c-range-photo img{
  width:100%;
  height:auto;
  object-fit:contain;
}

.hcs198 .c-range-photo figcaption{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid #dce4e9;
  color:#677d88;
  font-size:11px;
  line-height:1.85;
}

/* ==========================================================
   05 | PROJECT REQUIREMENTS & CUSTOM DESIGN
   ========================================================== */

.hcs198 .c-planning{
  padding:104px 0 112px;
  background:#fff;
}

.hcs198 .c-planning-head{
  max-width:830px;
  margin-bottom:43px;
}

.hcs198 .c-planning-head .c-eyebrow{
  margin-bottom:20px;
}

.hcs198 .c-planning-head .c-heading{
  margin-bottom:22px;
}

.hcs198 .c-planning-list{
  border-top:2px solid var(--c198-navy);
}

.hcs198 .c-planning-row{
  display:grid;
  grid-template-columns:54px minmax(0,.89fr) minmax(0,1.11fr);
  align-items:start;
  gap:26px;
  padding:27px 0;
  border-bottom:1px solid var(--c198-line);
}

.hcs198 .c-planning-row > span{
  color:#cc7930;
  font-size:13px;
  font-weight:700;
}

.hcs198 .c-planning-row h3{
  font-size:19px;
}

.hcs198 .c-planning-row p{
  color:#657580;
  font-size:13px;
  line-height:1.91;
}

/* ==========================================================
   06 | PROJECT REFERENCE PHOTOGRAPHY
   ========================================================== */

.hcs198 .c-projects{
  padding:102px 0 112px;
  background:#f1f5f7;
}

.hcs198 .c-projects-head{
  max-width:840px;
  margin-bottom:43px;
}

.hcs198 .c-projects-head .c-eyebrow{
  margin-bottom:20px;
}

.hcs198 .c-projects-head .c-heading{
  margin-bottom:22px;
}

.hcs198 .c-projects-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:21px;
  align-items:stretch;
}

.hcs198 .c-project-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  background:#fff;
}

.hcs198 .c-project-card figure{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  padding:16px;
  background:#e6edf1;
}

.hcs198 .c-project-card img{
  width:100%;
  height:auto;
  aspect-ratio:1.7/1;
  object-fit:contain;
}

.hcs198 .c-project-body{
  flex:1;
  padding:26px 27px 30px;
}

.hcs198 .c-project-body small{
  display:block;
  margin-bottom:11px;
  color:#a46b3f;
  font-size:10px;
  font-weight:700;
  letter-spacing:.9px;
}

.hcs198 .c-project-body h3{
  margin-bottom:13px;
  font-size:20px;
}

.hcs198 .c-project-body p{
  color:#697986;
  font-size:13px;
  line-height:1.91;
}

/* ==========================================================
   07 | FROM REQUIREMENT TO SOLUTION
   ========================================================== */

.hcs198 .c-process{
  padding:104px 0 113px;
  background:var(--c198-navy);
  color:#fff;
}

.hcs198 .c-process-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.83fr);
  gap:55px;
  align-items:end;
  margin-bottom:44px;
}

.hcs198 .c-process .c-eyebrow{
  margin-bottom:20px;
  color:#f2b67d;
}

.hcs198 .c-process .c-heading{
  color:#fff;
}

.hcs198 .c-process-intro{
  color:#c6d8e1;
  font-size:14px;
  line-height:1.91;
}

.hcs198 .c-process-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:#547085;
}

.hcs198 .c-process-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:31px 25px 34px;
  background:#25445d;
}

.hcs198 .c-process-card > span{
  display:block;
  margin-bottom:42px;
  color:#f2b67d;
  font-size:24px;
  font-weight:700;
  line-height:1;
}

.hcs198 .c-process-card h3{
  margin-bottom:13px;
  color:#fff;
  font-size:17px;
}

.hcs198 .c-process-card p{
  color:#c7d7df;
  font-size:12px;
  line-height:1.92;
}

/* ==========================================================
   08 | REFERENCE DATA TABLE
   ========================================================== */

.hcs198 .c-spec{
  padding:106px 0 114px;
  background:#fff;
}

.hcs198 .c-spec-grid{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(42px,7vw,88px);
  align-items:start;
}

.hcs198 .c-spec-intro .c-eyebrow{
  margin-bottom:20px;
}

.hcs198 .c-spec-intro .c-heading{
  margin-bottom:24px;
}

.hcs198 .c-spec-note{
  margin-top:28px;
  padding:20px 21px;
  border-left:3px solid var(--c198-orange);
  background:#eef3f6;
}

.hcs198 .c-spec-note strong{
  display:block;
  margin-bottom:9px;
  font-size:13px;
}

.hcs198 .c-spec-note p{
  color:#647682;
  font-size:12px;
  line-height:1.9;
}

.hcs198 .c-table{
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
  border-spacing:0;
  text-align:left;
}

.hcs198 .c-table th,
.hcs198 .c-table td{
  padding:17px 14px;
  border:0;
  border-bottom:1px solid var(--c198-line);
  text-align:left;
  vertical-align:top;
  line-height:1.85;
}

.hcs198 .c-table tr:first-child th,
.hcs198 .c-table tr:first-child td{
  border-top:3px solid var(--c198-navy);
}

.hcs198 .c-table th{
  width:40%;
  color:#2a3f50;
  font-size:13px;
  font-weight:700;
}

.hcs198 .c-table td{
  color:#637582;
  font-size:13px;
  overflow-wrap:anywhere;
}

/* ==========================================================
   09 | SEND YOUR REQUIREMENTS
   ========================================================== */

.hcs198 .c-rfq{
  padding:103px 0 112px;
  background:#eef4f7;
}

.hcs198 .c-rfq-head{
  max-width:820px;
  margin-bottom:42px;
}

.hcs198 .c-rfq-head .c-eyebrow{
  margin-bottom:20px;
}

.hcs198 .c-rfq-head .c-heading{
  margin-bottom:23px;
}

.hcs198 .c-rfq-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:17px;
}

.hcs198 .c-rfq-card{
  display:grid;
  grid-template-columns:37px minmax(0,1fr);
  align-items:start;
  gap:16px;
  min-width:0;
  padding:29px 27px 32px;
  background:#fff;
}

.hcs198 .c-rfq-card > span{
  color:#c47a38;
  font-size:12px;
  font-weight:700;
}

.hcs198 .c-rfq-card h3{
  margin-bottom:10px;
  font-size:18px;
}

.hcs198 .c-rfq-card p{
  color:#647580;
  font-size:13px;
  line-height:1.9;
}

/* ==========================================================
   10 | FINAL CTA
   ========================================================== */

.hcs198 .c-final{
  padding:91px 0 98px;
  border-top:5px solid var(--c198-orange);
  background:#142a3d;
  color:#fff;
}

.hcs198 .c-final-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:55px;
  align-items:center;
}

.hcs198 .c-final .c-eyebrow{
  margin-bottom:21px;
  color:#f2b981;
}

.hcs198 .c-final h2{
  max-width:750px;
  margin-bottom:23px;
  color:#fff;
  font-size:clamp(29px,3.5vw,45px);
  letter-spacing:-1px;
}

.hcs198 .c-final p{
  max-width:715px;
  color:#c6d7e1;
  font-size:14px;
  line-height:1.94;
}

.hcs198 .c-final-action{
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

/* ==========================================================
   RESPONSIVE — CONTENT CONTAINER
   ========================================================== */

@container c198 (max-width:940px){
  .hcs198 .c-hero-grid{
    grid-template-columns:minmax(0,1fr);
    gap:20px;
  }

  .hcs198 .c-hero-content{
    padding:38px 0 16px;
  }

  .hcs198 .c-hero h2{
    max-width:760px;
    font-size:clamp(36px,5.5cqw,54px);
  }

  .hcs198 .c-hero-content > p{
    max-width:740px;
  }

  .hcs198 .c-hero-photo img{
    max-height:530px;
  }
}

@container c198 (max-width:820px){
  .hcs198 .c-head-split,
  .hcs198 .c-range-grid,
  .hcs198 .c-process-head,
  .hcs198 .c-spec-grid{
    grid-template-columns:minmax(0,1fr);
    gap:29px;
  }

  .hcs198 .c-planning-row{
    grid-template-columns:38px minmax(0,1fr);
    gap:13px;
  }

  .hcs198 .c-planning-row p{
    grid-column:2;
  }

  .hcs198 .c-process-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .hcs198 .c-process-card > span{
    margin-bottom:25px;
  }

  .hcs198 .c-final-grid{
    grid-template-columns:minmax(0,1fr);
    gap:28px;
  }

  .hcs198 .c-final-action{
    justify-content:flex-start;
  }
}

@container c198 (max-width:660px){
  .hcs198 .c-wrap{
    width:calc(100% - 40px);
  }

  .hcs198 .c-strip-grid{
    grid-template-columns:minmax(0,1fr);
    padding:13px 0;
  }

  .hcs198 .c-strip-item,
  .hcs198 .c-strip-item:first-child,
  .hcs198 .c-strip-item:last-child{
    padding:17px 0;
    border-right:0;
    border-bottom:1px solid #cbd9e2;
  }

  .hcs198 .c-strip-item:last-child{
    border-bottom:0;
  }

  .hcs198 .c-solutions-grid,
  .hcs198 .c-projects-grid,
  .hcs198 .c-rfq-grid{
    grid-template-columns:minmax(0,1fr);
    gap:14px;
  }

  .hcs198 .c-process-grid{
    grid-template-columns:minmax(0,1fr);
  }
}

@container c198 (max-width:480px){
  .hcs198 .c-wrap{
    width:calc(100% - 34px);
  }

  .hcs198 .c-heading{
    font-size:29px;
    letter-spacing:-.7px;
  }

  .hcs198 .c-copy{
    font-size:13.5px;
  }

  .hcs198 .c-hero-grid{
    padding:19px 0 26px;
  }

  .hcs198 .c-hero-content{
    padding:31px 0 12px;
  }

  .hcs198 .c-hero h2{
    font-size:clamp(32px,8.5cqw,43px);
    letter-spacing:-1px;
  }

  .hcs198 .c-hero-content > p{
    font-size:14px;
  }

  .hcs198 .c-hero-photo{
    padding:12px;
  }

  .hcs198 .c-solutions,
  .hcs198 .c-range,
  .hcs198 .c-planning,
  .hcs198 .c-projects,
  .hcs198 .c-process,
  .hcs198 .c-spec,
  .hcs198 .c-rfq{
    padding-top:68px;
    padding-bottom:74px;
  }

  .hcs198 .c-solution-card{
    padding:26px 22px;
  }

  .hcs198 .c-solution-card h3{
    font-size:19px;
  }

  .hcs198 .c-range-photo{
    padding:10px;
  }

  .hcs198 .c-planning-row{
    padding:22px 0;
  }

  .hcs198 .c-planning-row h3{
    font-size:17px;
  }

  .hcs198 .c-project-card figure{
    padding:10px;
  }

  .hcs198 .c-project-body{
    padding:24px 21px;
  }

  .hcs198 .c-project-body h3{
    font-size:18px;
  }

  .hcs198 .c-process-card{
    padding:27px 23px;
  }

  .hcs198 .c-table th,
  .hcs198 .c-table td{
    padding:14px 9px;
    font-size:12px;
  }

  .hcs198 .c-rfq-card{
    padding:24px 21px;
  }

  .hcs198 .c-final{
    padding:67px 0;
  }

  .hcs198 .c-final h2{
    font-size:29px;
  }

  .hcs198 .c-quote.themes_box_inquiry_button_alert{
    width:100%!important;
  }
}

/* Viewport fallback */

@media(max-width:700px){
  .hcs198 .c-wrap{
    width:calc(100% - 34px);
  }

  .hcs198 .c-hero-grid,
  .hcs198 .c-head-split,
  .hcs198 .c-range-grid,
  .hcs198 .c-process-head,
  .hcs198 .c-spec-grid,
  .hcs198 .c-final-grid{
    grid-template-columns:minmax(0,1fr);
  }

  .hcs198 .c-final-action{
    justify-content:flex-start;
  }
}