/* ============================================
   HEDA SHELVES
   CUSTOMIZED WAREHOUSE STORAGE STEEL SHELVES
   PRODUCT NO. 00273

   Complete Description HTML + CSS
   All styles scoped to .hcs-page
============================================ */

.hcs-page {
  --hcs-navy:#172f46;
  --hcs-blue:#315b7d;
  --hcs-orange:#e77832;
  --hcs-text:#33485a;
  --hcs-muted:#687b8c;
  --hcs-line:#dfe7ee;
  --hcs-light:#f5f8fa;
  --hcs-white:#ffffff;

  width:100%;
  margin:0;
  padding:0;
  background:#ffffff;
  color:var(--hcs-text);
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}

.hcs-page,
.hcs-page * {
  box-sizing:border-box;
}

.hcs-page h2,
.hcs-page h3,
.hcs-page h4,
.hcs-page p,
.hcs-page figure {
  margin:0;
  padding:0;
}

.hcs-page img {
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  border:0;
  box-shadow:none;
}

.hcs-page a {
  text-decoration:none;
}

.hcs-page .hcs-wrap {
  width:calc(100% - 44px);
  max-width:1180px;
  margin:0 auto;
}

.hcs-page .hcs-section {
  padding:85px 0;
}

.hcs-page .hcs-soft {
  background:var(--hcs-light);
}

.hcs-page .hcs-head {
  max-width:790px;
  margin-bottom:40px;
}

.hcs-page .hcs-kicker {
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:17px;
  color:var(--hcs-blue);
  font-size:11px;
  font-weight:800;
  letter-spacing:1.8px;
  line-height:1.5;
  text-transform:uppercase;
}

.hcs-page .hcs-kicker::before {
  content:"";
  display:block;
  width:25px;
  height:2px;
  background:var(--hcs-orange);
  flex-shrink:0;
}

.hcs-page .hcs-title {
  color:var(--hcs-navy);
  font-size:clamp(29px,3.1vw,40px);
  font-weight:800;
  line-height:1.24;
  letter-spacing:-.8px;
}

.hcs-page .hcs-lead {
  max-width:740px;
  margin-top:19px;
  color:var(--hcs-muted);
  font-size:15px;
  line-height:1.95;
}

.hcs-page .hcs-photo-note {
  margin-top:12px;
  color:#7e8c99;
  font-size:12px;
  line-height:1.7;
}

/* ============================================
   01 - HERO
============================================ */

.hcs-page .hcs-hero {
  display:grid;
  grid-template-columns:49% 51%;
  align-items:center;
  min-height:515px;
  overflow:hidden;
  border:1px solid var(--hcs-line);
  border-radius:10px;
  background:#f3f7fa;
}

.hcs-page .hcs-hero-copy {
  min-width:0;
  padding:53px 10px 53px 54px;
}

.hcs-page .hcs-hero h2 {
  color:var(--hcs-navy);
  font-size:clamp(34px,4vw,49px);
  font-weight:800;
  line-height:1.14;
  letter-spacing:-1.1px;
}

.hcs-page .hcs-hero h2 span {
  display:block;
  color:var(--hcs-blue);
}

.hcs-page .hcs-hero-description {
  max-width:485px;
  margin-top:24px;
  color:#5b7082;
  font-size:15px;
  line-height:1.95;
}

.hcs-page .hcs-hero-tags {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:27px;
}

.hcs-page .hcs-hero-tags span {
  display:inline-block;
  padding:8px 12px;
  border:1px solid #d6e1e9;
  border-radius:4px;
  background:#ffffff;
  color:#395a74;
  font-size:12px;
  font-weight:700;
  line-height:1.5;
}

.hcs-page .hcs-hero-photo {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:25px;
}

.hcs-page .hcs-hero-photo img {
  width:100%;
  max-width:520px;
  max-height:475px;
  object-fit:contain;
}

/* ============================================
   02 - KEY SPECIFICATION STRIP
============================================ */

.hcs-page .hcs-spec-strip {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:19px;
  overflow:hidden;
  border:1px solid var(--hcs-line);
  border-radius:8px;
  background:#ffffff;
}

.hcs-page .hcs-spec-item {
  min-width:0;
  padding:25px 24px;
}

.hcs-page .hcs-spec-item+.hcs-spec-item {
  border-left:1px solid var(--hcs-line);
}

.hcs-page .hcs-spec-item strong {
  display:block;
  color:var(--hcs-navy);
  font-size:19px;
  line-height:1.4;
  font-weight:800;
}

.hcs-page .hcs-spec-item span {
  display:block;
  margin-top:6px;
  color:var(--hcs-muted);
  font-size:12px;
  line-height:1.7;
}

/* ============================================
   03 - CORE BENEFITS
============================================ */

.hcs-page .hcs-benefits {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}

.hcs-page .hcs-benefit {
  min-width:0;
  padding:31px 32px;
  border:1px solid var(--hcs-line);
  border-radius:8px;
  background:#ffffff;
}

.hcs-page .hcs-benefit-index {
  display:block;
  margin-bottom:24px;
  color:var(--hcs-orange);
  font-size:12px;
  font-weight:800;
  letter-spacing:1px;
}

.hcs-page .hcs-benefit h3 {
  margin-bottom:11px;
  color:var(--hcs-navy);
  font-size:20px;
  line-height:1.4;
}

.hcs-page .hcs-benefit p {
  color:var(--hcs-muted);
  font-size:14px;
  line-height:1.9;
}

/* ============================================
   04 - REAL STEEL STRUCTURE
============================================ */

.hcs-page .hcs-structure {
  display:grid;
  grid-template-columns:51% 1fr;
  gap:60px;
  align-items:center;
}

.hcs-page .hcs-structure-visual {
  min-width:0;
}

.hcs-page .hcs-structure-photo {
  padding:14px;
  overflow:hidden;
  border:1px solid var(--hcs-line);
  border-radius:9px;
  background:#ffffff;
}

.hcs-page .hcs-structure-photo img {
  width:100%;
  height:auto;
  object-fit:contain;
}

.hcs-page .hcs-structure-list {
  margin-top:27px;
}

.hcs-page .hcs-structure-item {
  padding:16px 0;
  border-bottom:1px solid #dce5ed;
}

.hcs-page .hcs-structure-item:last-child {
  border-bottom:0;
}

.hcs-page .hcs-structure-item h3 {
  position:relative;
  padding-left:20px;
  margin-bottom:7px;
  color:var(--hcs-navy);
  font-size:16px;
  line-height:1.5;
}

.hcs-page .hcs-structure-item h3::before {
  content:"";
  position:absolute;
  top:9px;
  left:1px;
  width:7px;
  height:7px;
  border-radius:2px;
  background:var(--hcs-orange);
}

.hcs-page .hcs-structure-item p {
  padding-left:20px;
  color:var(--hcs-muted);
  font-size:14px;
  line-height:1.85;
}

.hcs-page .hcs-structure-note {
  margin-top:22px;
  padding:17px 20px;
  border-left:3px solid var(--hcs-orange);
  background:#e7eef5;
  color:#526b7d;
  font-size:13px;
  line-height:1.85;
}

/* ============================================
   05 - REAL PRODUCT PHOTOGRAPH
============================================ */

.hcs-page .hcs-real-card {
  display:grid;
  grid-template-columns:39% 61%;
  overflow:hidden;
  border:0;
  border-radius:9px;
  background:#ffffff;
  box-shadow:none;
}

.hcs-page .hcs-real-copy {
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:43px 39px;
  background:var(--hcs-navy);
}

.hcs-page .hcs-real-copy .hcs-kicker {
  color:#b7d0e3;
}

.hcs-page .hcs-real-copy h2 {
  color:#ffffff;
  font-size:clamp(26px,2.8vw,34px);
  font-weight:800;
  line-height:1.3;
}

.hcs-page .hcs-real-copy p {
  margin-top:18px;
  color:#c8d5e0;
  font-size:14px;
  line-height:1.9;
}

.hcs-page .hcs-real-points {
  margin-top:25px;
}

.hcs-page .hcs-real-points div {
  padding:12px 0;
  border-top:1px solid rgba(255,255,255,.17);
  color:#e0e9f0;
  font-size:13px;
  line-height:1.7;
}

.hcs-page .hcs-real-photo {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:20px;
  border:0;
  background:#ffffff;
  box-shadow:none;
}

.hcs-page .hcs-real-photo img {
  width:100%;
  height:auto;
  object-fit:contain;
  border:0;
  box-shadow:none;
}

/* ============================================
   06 - APPLICATIONS
============================================ */

.hcs-page .hcs-app-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}

.hcs-page .hcs-app-card {
  min-width:0;
  padding:29px 27px;
  border-top:2px solid #d7e2eb;
  background:#ffffff;
}

.hcs-page .hcs-app-index {
  display:block;
  margin-bottom:22px;
  color:var(--hcs-orange);
  font-size:12px;
  font-weight:800;
  letter-spacing:1px;
}

.hcs-page .hcs-app-card h3 {
  margin-bottom:11px;
  color:var(--hcs-navy);
  font-size:20px;
  line-height:1.4;
}

.hcs-page .hcs-app-card p {
  color:var(--hcs-muted);
  font-size:14px;
  line-height:1.85;
}

/* ============================================
   07 - TECHNICAL CONFIGURATION
============================================ */

.hcs-page .hcs-config-grid {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:65px;
  align-items:start;
}

.hcs-page .hcs-config-panel {
  padding:33px 36px;
  border:1px solid var(--hcs-line);
  border-radius:9px;
  background:#ffffff;
}

.hcs-page .hcs-config-panel h3 {
  margin-bottom:23px;
  color:var(--hcs-navy);
  font-size:20px;
  line-height:1.4;
}

.hcs-page .hcs-config-row {
  display:grid;
  grid-template-columns:35% 65%;
  gap:12px;
  padding:13px 0;
  border-bottom:1px solid var(--hcs-line);
}

.hcs-page .hcs-config-row:last-child {
  border-bottom:0;
}

.hcs-page .hcs-config-label {
  color:#516579;
  font-size:13px;
  font-weight:700;
  line-height:1.75;
}

.hcs-page .hcs-config-value {
  color:var(--hcs-navy);
  font-size:13px;
  line-height:1.75;
}

.hcs-page .hcs-config-note {
  margin-top:23px;
  padding:17px 20px;
  border-left:3px solid var(--hcs-orange);
  background:#e6eef5;
  color:#50687d;
  font-size:13px;
  line-height:1.85;
}

/* ============================================
   08 - PROJECT PLANNING
============================================ */

.hcs-page .hcs-planning {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:65px;
  align-items:start;
}

.hcs-page .hcs-planning-panel {
  padding:31px 35px;
  border:1px solid var(--hcs-line);
  border-radius:8px;
  background:#f8fafc;
}

.hcs-page .hcs-planning-panel h3 {
  margin-bottom:18px;
  color:var(--hcs-navy);
  font-size:20px;
  line-height:1.4;
}

.hcs-page .hcs-planning-panel ul {
  list-style:none;
  margin:0;
  padding:0;
}

.hcs-page .hcs-planning-panel li {
  position:relative;
  padding:12px 0 12px 26px;
  border-bottom:1px solid var(--hcs-line);
  color:#506579;
  font-size:14px;
  line-height:1.75;
}

.hcs-page .hcs-planning-panel li:last-child {
  border-bottom:0;
}

.hcs-page .hcs-planning-panel li::before {
  content:"";
  position:absolute;
  left:1px;
  top:21px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--hcs-orange);
}

.hcs-page .hcs-planning-foot {
  margin-top:18px;
  color:#7e8d9a;
  font-size:12px;
  line-height:1.8;
}

/* ============================================
   09 - QUOTE CTA
============================================ */

.hcs-page .hcs-cta-section {
  padding:35px 0 55px;
}

.hcs-page .hcs-cta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:40px;
  position:relative;
  overflow:hidden;
  padding:51px 55px;
  border-radius:9px;
  background:var(--hcs-navy);
}

.hcs-page .hcs-cta::after {
  content:"";
  position:absolute;
  top:-110px;
  right:-85px;
  width:340px;
  height:340px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  pointer-events:none;
}

.hcs-page .hcs-cta-copy {
  position:relative;
  z-index:1;
  max-width:650px;
}

.hcs-page .hcs-cta-label {
  margin-bottom:13px;
  color:#b2cee0;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.7px;
  text-transform:uppercase;
}

.hcs-page .hcs-cta h2 {
  color:#ffffff;
  font-size:clamp(26px,2.8vw,35px);
  line-height:1.3;
  font-weight:800;
}

.hcs-page .hcs-cta p {
  margin-top:14px;
  color:#c8d6e0;
  font-size:14px;
  line-height:1.9;
}

.hcs-page .hcs-quote {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:1;
  flex:0 0 auto;
  min-height:52px;
  padding:15px 27px;
  border:0;
  border-radius:4px;
  background:var(--hcs-orange);
  color:#ffffff;
  font-family:inherit;
  font-size:13px;
  font-weight:800;
  line-height:1.5;
  text-align:center;
  white-space:nowrap;
  cursor:pointer;
  transition:background .2s ease;
}

.hcs-page .hcs-quote:hover {
  background:#c86424;
}

.hcs-page .hcs-quote:focus-visible {
  outline:3px solid #ffffff;
  outline-offset:3px;
}

/* ============================================
   RESPONSIVE TABLET
============================================ */

@media(max-width:1050px) {

  .hcs-page .hcs-hero-copy {
    padding:42px 8px 42px 35px;
  }

  .hcs-page .hcs-hero-photo {
    padding:15px;
  }

  .hcs-page .hcs-structure {
    gap:36px;
  }

  .hcs-page .hcs-config-grid {
    gap:35px;
  }

  .hcs-page .hcs-planning {
    gap:35px;
  }

  .hcs-page .hcs-cta {
    padding:44px 39px;
  }
}

/* ============================================
   RESPONSIVE MOBILE
============================================ */

@media(max-width:768px) {

  .hcs-page .hcs-wrap {
    width:calc(100% - 32px);
  }

  .hcs-page .hcs-section {
    padding:58px 0;
  }

  .hcs-page .hcs-title {
    font-size:30px;
  }

  .hcs-page .hcs-head {
    margin-bottom:29px;
  }

  .hcs-page .hcs-hero,
  .hcs-page .hcs-structure,
  .hcs-page .hcs-real-card,
  .hcs-page .hcs-config-grid,
  .hcs-page .hcs-planning {
    grid-template-columns:1fr;
  }

  .hcs-page .hcs-hero-copy {
    padding:36px 28px 10px;
  }

  .hcs-page .hcs-hero h2 {
    font-size:36px;
  }

  .hcs-page .hcs-hero-photo {
    padding:12px 24px 26px;
  }

  .hcs-page .hcs-spec-strip {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .hcs-page .hcs-spec-item {
    padding:20px;
  }

  .hcs-page .hcs-spec-item:nth-child(3) {
    border-left:0;
  }

  .hcs-page .hcs-spec-item:nth-child(n+3) {
    border-top:1px solid var(--hcs-line);
  }

  .hcs-page .hcs-benefits {
    grid-template-columns:1fr;
    gap:13px;
  }

  .hcs-page .hcs-benefit {
    padding:27px;
  }

  .hcs-page .hcs-benefit-index {
    margin-bottom:14px;
  }

  .hcs-page .hcs-structure {
    gap:28px;
  }

  .hcs-page .hcs-structure-visual {
    order:2;
  }

  .hcs-page .hcs-structure-content {
    order:1;
  }

  .hcs-page .hcs-real-copy {
    padding:36px 29px;
  }

  .hcs-page .hcs-real-photo {
    padding:15px;
  }

  .hcs-page .hcs-app-grid {
    grid-template-columns:1fr;
    gap:15px;
  }

  .hcs-page .hcs-app-card {
    padding:24px 10px;
  }

  .hcs-page .hcs-app-index {
    margin-bottom:13px;
  }

  .hcs-page .hcs-config-grid {
    gap:26px;
  }

  .hcs-page .hcs-config-panel {
    padding:25px;
  }

  .hcs-page .hcs-planning {
    gap:27px;
  }

  .hcs-page .hcs-planning-panel {
    padding:26px;
  }

  .hcs-page .hcs-cta-section {
    padding:28px 0 40px;
  }

  .hcs-page .hcs-cta {
    flex-direction:column;
    align-items:flex-start;
    padding:37px 29px;
    gap:26px;
  }
}

/* ============================================
   SMALL MOBILE
============================================ */

@media(max-width:480px) {

  .hcs-page .hcs-wrap {
    width:calc(100% - 26px);
  }

  .hcs-page .hcs-hero-copy {
    padding:30px 23px 8px;
  }

  .hcs-page .hcs-hero h2 {
    font-size:32px;
  }

  .hcs-page .hcs-hero-description {
    font-size:14px;
  }

  .hcs-page .hcs-hero-tags span {
    font-size:11px;
  }

  .hcs-page .hcs-spec-item strong {
    font-size:16px;
  }

  .hcs-page .hcs-spec-item span {
    font-size:11px;
  }

  .hcs-page .hcs-benefit {
    padding:24px;
  }

  .hcs-page .hcs-config-row {
    grid-template-columns:1fr;
    gap:3px;
  }

  .hcs-page .hcs-cta {
    padding:34px 24px;
  }

  .hcs-page .hcs-quote {
    width:100%;
    white-space:normal;
  }
}

/* Keep the existing custom shelving quotation button's appearance with the native popup. */
.hcs-page .hcs-cta a.hcs-quote.themes_box_inquiry_button_alert.themes_box_button.trans3 {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative !important;
  z-index:1 !important;
  flex:0 0 auto !important;
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  min-height:52px !important;
  margin:0 !important;
  padding:15px 27px !important;
  border:0 !important;
  border-radius:4px !important;
  background:var(--hcs-orange) !important;
  background-image:none !important;
  color:#ffffff !important;
  font-family:inherit !important;
  font-size:13px !important;
  font-weight:800 !important;
  line-height:1.5 !important;
  letter-spacing:normal !important;
  text-align:center !important;
  text-transform:none !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  box-shadow:none !important;
  cursor:pointer !important;
  transition:background .2s ease !important;
}
.hcs-page .hcs-cta a.hcs-quote.themes_box_inquiry_button_alert.themes_box_button.trans3:hover {
  background:#c86424 !important;
  background-image:none !important;
  color:#ffffff !important;
}
.hcs-page .hcs-cta a.hcs-quote.themes_box_inquiry_button_alert.themes_box_button.trans3:focus-visible {
  outline:3px solid #ffffff !important;
  outline-offset:3px !important;
}
.hcs-page .hcs-cta a.hcs-quote.themes_box_inquiry_button_alert.themes_box_button.trans3::before,
.hcs-page .hcs-cta a.hcs-quote.themes_box_inquiry_button_alert.themes_box_button.trans3::after {
  content:none !important;
  display:none !important;
}
@media(max-width:480px) {
  .hcs-page .hcs-cta a.hcs-quote.themes_box_inquiry_button_alert.themes_box_button.trans3 {
    width:100% !important;
    white-space:normal !important;
  }
}