/* ==========================================================
   HEDA SHELVES | PRODUCT DETAIL PAGE
   CUSTOMIZED WHITE COMMERCIAL STORAGE RACKS
   PRODUCT NO. 00270

   Layout: White / Silver / Graphite
   Original HEDA product photographs
   Scoped CSS: .hcs270
   Native GET QUOTE NOW popup
   No related product cards
========================================================== */

.hcs270 {
  --c270-ink:#202e38;
  --c270-dark:#293e4c;
  --c270-mid:#526674;
  --c270-muted:#71828d;
  --c270-rule:#dce3e7;
  --c270-soft:#f4f6f7;
  --c270-paper:#ffffff;
  --c270-orange:#e57a32;

  width:100%;
  margin:0;
  padding:0;
  color:var(--c270-ink);
  background:var(--c270-paper);
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

.hcs270,
.hcs270 * {
  box-sizing:border-box;
}

.hcs270 h2,
.hcs270 h3,
.hcs270 h4,
.hcs270 p,
.hcs270 figure,
.hcs270 ul {
  margin:0;
}

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

.hcs270 a {
  text-decoration:none;
}

.hcs270 .c270-wrap {
  width:calc(100% - 48px);
  max-width:1180px;
  margin:0 auto;
}

.hcs270 .c270-section {
  padding:85px 0;
}

.hcs270 .c270-soft {
  background:var(--c270-soft);
}

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

.hcs270 .c270-kicker:before {
  content:"";
  display:block;
  flex:none;
  width:27px;
  height:2px;
  background:var(--c270-orange);
}

.hcs270 .c270-title {
  color:var(--c270-ink);
  font-size:clamp(29px,3.4vw,42px);
  font-weight:800;
  line-height:1.22;
  letter-spacing:-.9px;
}

.hcs270 .c270-desc {
  max-width:760px;
  margin-top:18px;
  color:var(--c270-muted);
  font-size:15px;
  line-height:1.95;
}

.hcs270 .c270-section-head {
  max-width:815px;
  margin-bottom:39px;
}

.hcs270 .c270-caption {
  margin-top:12px;
  color:#7f909b;
  font-size:12px;
  line-height:1.75;
}

/* ==========================================================
   01 | EDITORIAL HERO
========================================================== */

.hcs270 .c270-hero {
  display:grid;
  grid-template-columns:minmax(0,.87fr) minmax(0,1.13fr);
  min-height:535px;
  overflow:hidden;
  border:1px solid var(--c270-rule);
  background:#f6f8f9;
}

.hcs270 .c270-hero-copy {
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:47px 44px 49px 49px;
}

.hcs270 .c270-hero-code {
  display:inline-block;
  align-self:flex-start;
  margin-bottom:28px;
  padding:7px 12px;
  border:1px solid #cbd5db;
  color:#647783;
  background:#ffffff;
  font-size:11px;
  font-weight:800;
  letter-spacing:1px;
  line-height:1.5;
}

.hcs270 .c270-hero h2 {
  color:var(--c270-ink);
  font-size:clamp(36px,4vw,52px);
  font-weight:800;
  line-height:1.14;
  letter-spacing:-1.3px;
}

.hcs270 .c270-hero h2 span {
  display:block;
  color:#7b8c96;
}

.hcs270 .c270-hero-description {
  max-width:470px;
  margin-top:24px;
  color:#5e717d;
  font-size:15px;
  line-height:1.95;
}

.hcs270 .c270-hero-points {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:29px;
}

.hcs270 .c270-hero-points span {
  padding:8px 11px;
  border:1px solid #d5dfe5;
  background:#ffffff;
  color:#4e6575;
  font-size:11px;
  font-weight:700;
  line-height:1.6;
}

.hcs270 .c270-hero-image {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:20px;
  background:#ffffff;
  border-left:1px solid var(--c270-rule);
}

.hcs270 .c270-hero-image img {
  max-width:565px;
  max-height:525px;
  object-fit:contain;
}

/* ==========================================================
   02 | PRODUCT FUNCTION STRIP
========================================================== */

.hcs270 .c270-summary {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:17px;
  overflow:hidden;
  border:1px solid var(--c270-rule);
}

.hcs270 .c270-summary-item {
  min-width:0;
  padding:25px 29px;
}

.hcs270 .c270-summary-item+
.c270-summary-item {
  border-left:1px solid var(--c270-rule);
}

.hcs270 .c270-summary-no {
  display:block;
  margin-bottom:14px;
  color:var(--c270-orange);
  font-size:11px;
  font-weight:800;
  letter-spacing:1px;
}

.hcs270 .c270-summary-item h3 {
  margin-bottom:8px;
  color:var(--c270-ink);
  font-size:18px;
  font-weight:800;
  line-height:1.4;
}

.hcs270 .c270-summary-item p {
  color:var(--c270-muted);
  font-size:13px;
  line-height:1.85;
}

/* ==========================================================
   03 | REAL STRUCTURE PHOTO JOURNAL
========================================================== */

.hcs270 .c270-view-grid {
  display:grid;
  grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);
  gap:25px;
  align-items:start;
}

.hcs270 .c270-view-card {
  min-width:0;
  overflow:hidden;
  border:1px solid var(--c270-rule);
  background:#ffffff;
}

.hcs270 .c270-view-image {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:15px;
  background:#ffffff;
}

.hcs270 .c270-view-image img {
  max-height:490px;
  object-fit:contain;
}

.hcs270 .c270-view-copy {
  padding:26px 29px 30px;
  border-top:1px solid var(--c270-rule);
}

.hcs270 .c270-view-index {
  display:block;
  margin-bottom:12px;
  color:var(--c270-orange);
  font-size:11px;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
}

.hcs270 .c270-view-copy h3 {
  margin-bottom:11px;
  color:var(--c270-ink);
  font-size:21px;
  font-weight:800;
  line-height:1.4;
}

.hcs270 .c270-view-copy p {
  color:var(--c270-muted);
  font-size:14px;
  line-height:1.9;
}

/* ==========================================================
   04 | TECHNICAL COMPONENT FEATURES
========================================================== */

.hcs270 .c270-detail {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0;
  overflow:hidden;
  border:1px solid var(--c270-rule);
  background:#ffffff;
}

.hcs270 .c270-detail+.c270-detail {
  margin-top:24px;
}

.hcs270 .c270-detail-image {
  display:flex;
  justify-content:center;
  align-items:center;
  min-width:0;
  padding:19px;
  background:#ffffff;
}

.hcs270 .c270-detail-image img {
  max-height:475px;
  object-fit:contain;
}

.hcs270 .c270-detail-copy {
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:40px 44px;
  border-left:1px solid var(--c270-rule);
  background:#f8fafb;
}

.hcs270 .c270-detail-index {
  display:block;
  margin-bottom:17px;
  color:var(--c270-orange);
  font-size:11px;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.hcs270 .c270-detail-copy h3 {
  color:var(--c270-ink);
  font-size:clamp(24px,2.5vw,31px);
  font-weight:800;
  line-height:1.32;
  letter-spacing:-.5px;
}

.hcs270 .c270-detail-copy>p {
  margin-top:17px;
  color:var(--c270-muted);
  font-size:14px;
  line-height:1.95;
}

.hcs270 .c270-detail-points {
  margin-top:24px;
  padding:0;
  list-style:none;
  border-top:1px solid var(--c270-rule);
}

.hcs270 .c270-detail-points li {
  position:relative;
  padding:12px 0 12px 20px;
  border-bottom:1px solid var(--c270-rule);
  color:#566c7b;
  font-size:13px;
  line-height:1.8;
}

.hcs270 .c270-detail-points li:before {
  content:"";
  position:absolute;
  top:20px;
  left:0;
  width:7px;
  height:7px;
  background:var(--c270-orange);
}

.hcs270 .c270-detail-reverse .c270-detail-image {
  order:2;
}

.hcs270 .c270-detail-reverse .c270-detail-copy {
  order:1;
  border-left:0;
  border-right:1px solid var(--c270-rule);
}

.hcs270 .c270-accuracy {
  margin-top:24px;
  padding:19px 23px;
  border-left:3px solid var(--c270-orange);
  background:#e8eef2;
  color:#546b7c;
  font-size:13px;
  line-height:1.9;
}

/* ==========================================================
   05 | APPLICATIONS
========================================================== */

.hcs270 .c270-app-list {
  border-top:1px solid var(--c270-rule);
}

.hcs270 .c270-app {
  display:grid;
  grid-template-columns:70px minmax(0,.65fr) minmax(0,1fr);
  gap:22px;
  align-items:start;
  padding:28px 6px;
  border-bottom:1px solid var(--c270-rule);
}

.hcs270 .c270-app-no {
  color:var(--c270-orange);
  font-size:12px;
  font-weight:800;
  letter-spacing:1px;
}

.hcs270 .c270-app h3 {
  color:var(--c270-ink);
  font-size:20px;
  font-weight:800;
  line-height:1.45;
}

.hcs270 .c270-app p {
  color:var(--c270-muted);
  font-size:14px;
  line-height:1.9;
}

/* ==========================================================
   06 | TECHNICAL SPECIFICATIONS
========================================================== */

.hcs270 .c270-spec-section {
  padding:84px 0;
  background:var(--c270-dark);
}

.hcs270 .c270-spec-layout {
  display:grid;
  grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);
  gap:53px;
  align-items:start;
}

.hcs270 .c270-spec-intro .c270-kicker {
  color:#c0d1da;
}

.hcs270 .c270-spec-intro .c270-title {
  color:#ffffff;
}

.hcs270 .c270-spec-intro .c270-desc {
  color:#cfdae2;
}

.hcs270 .c270-spec-notice {
  margin-top:28px;
  padding:20px 22px;
  border-left:3px solid var(--c270-orange);
  background:rgba(255,255,255,.08);
  color:#d9e2e9;
  font-size:13px;
  line-height:1.95;
}

.hcs270 .c270-spec-table {
  min-width:0;
  padding:28px 32px;
  background:#ffffff;
}

.hcs270 .c270-spec-table h3 {
  margin-bottom:19px;
  color:var(--c270-ink);
  font-size:21px;
  font-weight:800;
  line-height:1.45;
}

.hcs270 .c270-spec-row {
  display:grid;
  grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);
  gap:17px;
  padding:12px 0;
  border-bottom:1px solid var(--c270-rule);
}

.hcs270 .c270-spec-row:last-child {
  border-bottom:0;
}

.hcs270 .c270-spec-name {
  color:#667985;
  font-size:13px;
  font-weight:700;
  line-height:1.8;
}

.hcs270 .c270-spec-value {
  min-width:0;
  color:var(--c270-ink);
  font-size:13px;
  line-height:1.8;
}

/* ==========================================================
   07 | PROCUREMENT CHECKLIST
========================================================== */

.hcs270 .c270-plan {
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:58px;
  align-items:start;
}

.hcs270 .c270-plan-info {
  min-width:0;
}

.hcs270 .c270-plan-note {
  margin-top:25px;
  padding:18px 21px;
  border-left:3px solid var(--c270-orange);
  background:#e7edf1;
  color:#566c7b;
  font-size:13px;
  line-height:1.9;
}

.hcs270 .c270-plan-panel {
  min-width:0;
  padding:31px 33px;
  border:1px solid var(--c270-rule);
  background:#ffffff;
}

.hcs270 .c270-plan-panel h3 {
  margin-bottom:21px;
  color:var(--c270-ink);
  font-size:21px;
  font-weight:800;
  line-height:1.4;
}

.hcs270 .c270-check-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:25px;
}

.hcs270 .c270-check {
  position:relative;
  padding:13px 0 13px 21px;
  border-bottom:1px solid var(--c270-rule);
  color:#526879;
  font-size:13px;
  line-height:1.85;
}

.hcs270 .c270-check:before {
  content:"";
  position:absolute;
  top:22px;
  left:1px;
  width:8px;
  height:8px;
  background:var(--c270-orange);
}

.hcs270 .c270-plan-foot {
  margin-top:20px;
  color:#81919c;
  font-size:12px;
  line-height:1.85;
}

/* ==========================================================
   08 | FAQ
========================================================== */

.hcs270 .c270-faq {
  border-top:1px solid var(--c270-rule);
}

.hcs270 .c270-faq-row {
  display:grid;
  grid-template-columns:minmax(0,.43fr) minmax(0,.57fr);
  gap:35px;
  align-items:start;
  padding:24px 0;
  border-bottom:1px solid var(--c270-rule);
}

.hcs270 .c270-faq-row h3 {
  color:var(--c270-ink);
  font-size:16px;
  font-weight:800;
  line-height:1.6;
}

.hcs270 .c270-faq-row p {
  color:var(--c270-muted);
  font-size:14px;
  line-height:1.95;
}

/* ==========================================================
   09 | NATIVE GET QUOTE NOW POPUP
========================================================== */

.hcs270 .c270-cta-section {
  padding:40px 0 65px;
}

.hcs270 .c270-cta {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:40px;
  align-items:center;
  padding:49px 53px;
  border-top:4px solid var(--c270-orange);
  background:var(--c270-soft);
}

.hcs270 .c270-cta-copy {
  max-width:690px;
  min-width:0;
}

.hcs270 .c270-cta-label {
  display:block;
  margin-bottom:13px;
  color:#667b8a;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.7px;
  text-transform:uppercase;
}

.hcs270 .c270-cta h2 {
  color:var(--c270-ink);
  font-size:clamp(27px,3vw,37px);
  font-weight:800;
  line-height:1.3;
}

.hcs270 .c270-cta p {
  margin-top:14px;
  color:#637885;
  font-size:14px;
  line-height:1.9;
}

/* Official GET QUOTE NOW popup classes and
   attributes must remain on the <a> element.

   c270-quote controls appearance only. */

.hcs270 a.c270-quote {
  position:relative;
  z-index:2;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  flex:0 0 auto;
  width:auto !important;
  height:auto !important;
  min-width:197px;
  min-height:54px;

  margin:0 !important;
  padding:16px 28px !important;

  border:0 !important;
  border-radius:3px !important;

  background:var(--c270-orange) !important;
  background-image:none !important;
  color:#ffffff !important;

  font-family:Arial,Helvetica,sans-serif !important;
  font-size:13px !important;
  font-weight:800 !important;
  line-height:1.5 !important;

  text-align:center !important;
  text-decoration:none !important;
  white-space:nowrap;

  cursor:pointer;
  opacity:1 !important;
  visibility:visible !important;
  box-shadow:none !important;

  transition:background-color .2s ease;
}

.hcs270 a.c270-quote:hover {
  background:#c6601f !important;
  color:#ffffff !important;
  text-decoration:none !important;
}

.hcs270 a.c270-quote:visited {
  color:#ffffff !important;
}

.hcs270 a.c270-quote:focus-visible {
  outline:3px solid var(--c270-dark);
  outline-offset:3px;
}

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

@media(max-width:1020px) {

  .hcs270 .c270-hero-copy {
    padding:36px 30px;
  }

  .hcs270 .c270-hero h2 {
    font-size:41px;
  }

  .hcs270 .c270-detail-copy {
    padding:30px;
  }

  .hcs270 .c270-spec-layout,
  .hcs270 .c270-plan {
    gap:33px;
  }

  .hcs270 .c270-cta {
    padding:41px 36px;
  }
}

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

@media(max-width:768px) {

  .hcs270 .c270-wrap {
    width:calc(100% - 32px);
  }

  .hcs270 .c270-section {
    padding:59px 0;
  }

  .hcs270 .c270-title {
    font-size:31px;
  }

  .hcs270 .c270-section-head {
    margin-bottom:28px;
  }

  .hcs270 .c270-hero,
  .hcs270 .c270-view-grid,
  .hcs270 .c270-detail,
  .hcs270 .c270-spec-layout,
  .hcs270 .c270-plan {
    grid-template-columns:1fr;
  }

  .hcs270 .c270-hero-copy {
    padding:32px 27px 24px;
  }

  .hcs270 .c270-hero h2 {
    font-size:37px;
  }

  .hcs270 .c270-hero-image {
    border-left:0;
    border-top:1px solid var(--c270-rule);
    padding:13px;
  }

  .hcs270 .c270-summary {
    grid-template-columns:1fr;
  }

  .hcs270 .c270-summary-item {
    padding:22px 25px;
  }

  .hcs270 .c270-summary-item+
  .c270-summary-item {
    border-left:0;
    border-top:1px solid var(--c270-rule);
  }

  .hcs270 .c270-summary-no {
    margin-bottom:9px;
  }

  .hcs270 .c270-view-grid {
    gap:18px;
  }

  .hcs270 .c270-view-copy {
    padding:24px;
  }

  .hcs270 .c270-detail {
    gap:0;
  }

  .hcs270 .c270-detail-image,
  .hcs270 .c270-detail-reverse .c270-detail-image {
    order:1;
    padding:12px;
  }

  .hcs270 .c270-detail-copy,
  .hcs270 .c270-detail-reverse .c270-detail-copy {
    order:2;
    padding:27px;
    border-left:0;
    border-right:0;
    border-top:1px solid var(--c270-rule);
  }

  .hcs270 .c270-app {
    grid-template-columns:47px minmax(0,1fr);
    gap:9px 15px;
  }

  .hcs270 .c270-app p {
    grid-column:2;
  }

  .hcs270 .c270-spec-section {
    padding:59px 0;
  }

  .hcs270 .c270-spec-layout,
  .hcs270 .c270-plan {
    gap:28px;
  }

  .hcs270 .c270-spec-table,
  .hcs270 .c270-plan-panel {
    padding:25px;
  }

  .hcs270 .c270-faq-row {
    grid-template-columns:1fr;
    gap:8px;
  }

  .hcs270 .c270-cta {
    grid-template-columns:1fr;
    gap:25px;
    padding:36px 28px;
  }

  .hcs270 a.c270-quote {
    justify-self:start;
  }
}

/* ==========================================================
   RESPONSIVE - SMALL MOBILE
========================================================== */

@media(max-width:480px) {

  .hcs270 .c270-wrap {
    width:calc(100% - 26px);
  }

  .hcs270 .c270-hero-copy {
    padding:27px 22px 22px;
  }

  .hcs270 .c270-hero h2 {
    font-size:32px;
  }

  .hcs270 .c270-hero-description {
    font-size:14px;
  }

  .hcs270 .c270-detail-copy,
  .hcs270 .c270-detail-reverse .c270-detail-copy {
    padding:23px;
  }

  .hcs270 .c270-detail-copy h3 {
    font-size:25px;
  }

  .hcs270 .c270-view-copy {
    padding:22px;
  }

  .hcs270 .c270-spec-row {
    grid-template-columns:1fr;
    gap:4px;
  }

  .hcs270 .c270-spec-table,
  .hcs270 .c270-plan-panel {
    padding:22px;
  }

  .hcs270 .c270-check-grid {
    grid-template-columns:1fr;
  }

  .hcs270 .c270-app h3 {
    font-size:18px;
  }

  .hcs270 .c270-cta {
    padding:31px 22px;
  }

  .hcs270 a.c270-quote {
    width:100% !important;
    min-width:0;
    white-space:normal;
  }
}