/* ============================================
 HEDA SHELVES
 PUSH BACK RACKING SYSTEM
 COMPLETE PRODUCT DESCRIPTION
 Product No. PBRS001
============================================ */

.hd-pbr {
  --p-navy:#142d43;
  --p-blue:#285a7e;
  --p-orange:#e77b34;
  --p-text:#34495b;
  --p-muted:#66798a;
  --p-light:#f4f7fa;
  --p-border:#e0e7ee;
  width:100%;
  margin:0 auto;
  background:#fff;
  color:var(--p-text);
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}

.hd-pbr,
.hd-pbr * {
  box-sizing:border-box;
}

.hd-pbr h2,
.hd-pbr h3,
.hd-pbr h4,
.hd-pbr p {
  margin:0;
  padding:0;
}

.hd-pbr img {
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
}

.hd-pbr button {
  font-family:inherit;
}

.hd-pbr .p-container {
  width:min(1200px,calc(100% - 48px));
  margin:0 auto;
}

.hd-pbr .p-section {
  padding:86px 0;
}

.hd-pbr .p-light {
  background:var(--p-light);
}

.hd-pbr .p-eyebrow {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
  color:var(--p-blue);
  font-size:11px;
  font-weight:800;
  letter-spacing:2px;
  line-height:1.5;
  text-transform:uppercase;
}

.hd-pbr .p-eyebrow:before {
  content:"";
  width:25px;
  height:2px;
  flex-shrink:0;
  background:var(--p-orange);
}

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

.hd-pbr .p-lead {
  max-width:750px;
  margin-top:19px;
  color:var(--p-muted);
  font-size:16px;
  line-height:1.9;
}

.hd-pbr .p-heading-group {
  max-width:790px;
  margin-bottom:40px;
}

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

.hd-pbr .p-hero {
  overflow:hidden;
  border:1px solid var(--p-border);
  border-radius:11px;
  background:#f5f8fb;
}

.hd-pbr .p-hero-grid {
  display:grid;
  grid-template-columns:49% 51%;
  align-items:center;
  min-height:520px;
}

.hd-pbr .p-hero-copy {
  padding:59px 8px 59px 54px;
}

.hd-pbr .p-hero-kicker {
  margin-bottom:22px;
  color:var(--p-blue);
  font-size:11px;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
}

.hd-pbr .p-hero h2 {
  color:var(--p-navy);
  font-size:clamp(35px,3.7vw,49px);
  font-weight:800;
  line-height:1.14;
  letter-spacing:-1.2px;
}

.hd-pbr .p-hero h2 span {
  color:var(--p-blue);
}

.hd-pbr .p-hero-desc {
  max-width:485px;
  margin-top:24px;
  color:#5d7080;
  font-size:15px;
  line-height:1.95;
}

.hd-pbr .p-hero-tags {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:29px;
}

.hd-pbr .p-hero-tags span {
  padding:8px 12px;
  border:1px solid #d9e3eb;
  border-radius:4px;
  background:#fff;
  color:#355674;
  font-size:12px;
  font-weight:700;
  line-height:1.5;
}

.hd-pbr .p-hero-visual {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:27px;
}

.hd-pbr .p-hero-visual img {
  width:100%;
  max-width:550px;
  max-height:490px;
  object-fit:contain;
}

/* ============================================
 02 - KEY BENEFITS
============================================ */

.hd-pbr .p-benefits {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.hd-pbr .p-benefit {
  min-width:0;
  padding:34px 30px 38px;
  border:1px solid var(--p-border);
  border-radius:9px;
  background:#fff;
}

.hd-pbr .p-benefit-index {
  display:block;
  margin-bottom:32px;
  color:var(--p-orange);
  font-size:12px;
  font-weight:800;
  letter-spacing:1px;
}

.hd-pbr .p-benefit h3 {
  margin-bottom:13px;
  color:var(--p-navy);
  font-size:20px;
  line-height:1.4;
}

.hd-pbr .p-benefit p {
  color:var(--p-muted);
  font-size:14px;
  line-height:1.85;
}

/* ============================================
 03 - HOW PUSH BACK RACKING WORKS
============================================ */

.hd-pbr .p-operation {
  background:var(--p-light);
}

.hd-pbr .p-operation-grid {
  display:grid;
  grid-template-columns:51% 49%;
  align-items:center;
  gap:0;
}

.hd-pbr .p-operation-visual {
  overflow:hidden;
  min-width:0;
  border:1px solid var(--p-border);
  border-radius:9px;
  background:#fff;
}

.hd-pbr .p-operation-visual img {
  width:100%;
  height:auto;
  object-fit:contain;
}

.hd-pbr .p-image-caption {
  padding:14px 20px;
  border-top:1px solid var(--p-border);
  color:#7b8b98;
  font-size:12px;
  line-height:1.7;
}

.hd-pbr .p-operation-copy {
  padding:10px 0 10px 62px;
}

.hd-pbr .p-operation-copy .p-lead {
  font-size:15px;
}

.hd-pbr .p-steps {
  margin-top:27px;
}

.hd-pbr .p-step {
  display:grid;
  grid-template-columns:37px 1fr;
  gap:15px;
  padding:17px 0;
  border-bottom:1px solid #dae4ed;
}

.hd-pbr .p-step:last-child {
  border-bottom:0;
}

.hd-pbr .p-step-num {
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border:1px solid #b8cada;
  border-radius:50%;
  color:var(--p-blue);
  font-size:12px;
  font-weight:800;
}

.hd-pbr .p-step h3 {
  margin-bottom:6px;
  color:var(--p-navy);
  font-size:16px;
  line-height:1.4;
}

.hd-pbr .p-step p {
  color:var(--p-muted);
  font-size:14px;
  line-height:1.85;
}

.hd-pbr .p-operation-note {
  margin-top:23px;
  padding:17px 20px;
  border-left:3px solid var(--p-orange);
  background:#e8eff5;
  color:#506779;
  font-size:13px;
  line-height:1.85;
}

/* ============================================
 04 - PRODUCT STRUCTURE
============================================ */

.hd-pbr .p-detail-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:23px;
}

.hd-pbr .p-detail {
  min-width:0;
  overflow:hidden;
  border:1px solid var(--p-border);
  border-radius:9px;
  background:#fff;
}

.hd-pbr .p-detail-image {
  display:flex;
  align-items:center;
  justify-content:center;
  height:350px;
  padding:16px;
  background:#f6f8fa;
}

.hd-pbr .p-detail-image img {
  width:100%;
  height:100%;
  object-fit:contain;
}

.hd-pbr .p-detail-copy {
  padding:28px 30px 33px;
}

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

.hd-pbr .p-detail h3 {
  margin-bottom:11px;
  color:var(--p-navy);
  font-size:20px;
  line-height:1.4;
}

.hd-pbr .p-detail p {
  color:var(--p-muted);
  font-size:14px;
  line-height:1.85;
}

.hd-pbr .p-component-strip {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:15px;
  margin-top:22px;
}

.hd-pbr .p-component {
  padding:22px 23px;
  border-radius:6px;
  background:var(--p-light);
}

.hd-pbr .p-component strong {
  display:block;
  margin-bottom:7px;
  color:var(--p-navy);
  font-size:14px;
  line-height:1.5;
}

.hd-pbr .p-component p {
  color:var(--p-muted);
  font-size:13px;
  line-height:1.75;
}

/* ============================================
 05 - ACTUAL WAREHOUSE INSTALLATION
============================================ */

.hd-pbr .p-real {
  background:var(--p-light);
}

.hd-pbr .p-project {
  overflow:hidden;
  border:1px solid var(--p-border);
  border-radius:10px;
  background:#fff;
}

.hd-pbr .p-project-image {
  padding:13px;
  background:#f5f7f9;
}

.hd-pbr .p-project-image img {
  width:100%;
  height:auto;
  object-fit:contain;
  border-radius:5px;
}

.hd-pbr .p-project-bottom {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  padding:32px 35px 35px;
  border-top:1px solid var(--p-border);
}

.hd-pbr .p-project-bottom h3 {
  color:var(--p-navy);
  font-size:21px;
  line-height:1.4;
}

.hd-pbr .p-project-bottom p {
  color:var(--p-muted);
  font-size:14px;
  line-height:1.9;
}

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

.hd-pbr .p-applications {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}

.hd-pbr .p-application {
  min-width:0;
  padding:0 8px 0 0;
  border-top:2px solid #d8e2eb;
}

.hd-pbr .p-application-num {
  display:block;
  margin:25px 0 18px;
  color:var(--p-orange);
  font-size:12px;
  font-weight:800;
  letter-spacing:1px;
}

.hd-pbr .p-application h3 {
  margin-bottom:12px;
  color:var(--p-navy);
  font-size:20px;
  line-height:1.4;
}

.hd-pbr .p-application p {
  color:var(--p-muted);
  font-size:14px;
  line-height:1.9;
}

/* ============================================
 07 - RIGHT STORAGE SYSTEM
============================================ */

.hd-pbr .p-selection {
  background:var(--p-light);
}

.hd-pbr .p-selection-layout {
  display:grid;
  grid-template-columns:0.86fr 1.14fr;
  gap:63px;
  align-items:start;
}

.hd-pbr .p-selection-copy .p-lead {
  font-size:15px;
}

.hd-pbr .p-selection-highlight {
  margin-top:27px;
  padding:19px 22px;
  border-left:3px solid var(--p-orange);
  background:#e8eff5;
  color:#536a7e;
  font-size:13px;
  line-height:1.85;
}

.hd-pbr .p-fit-panel {
  overflow:hidden;
  border:1px solid var(--p-border);
  border-radius:9px;
  background:#fff;
}

.hd-pbr .p-fit-header {
  padding:23px 29px;
  background:var(--p-navy);
}

.hd-pbr .p-fit-header h3 {
  color:#fff;
  font-size:19px;
  line-height:1.4;
}

.hd-pbr .p-fit-item {
  display:grid;
  grid-template-columns:32px 1fr;
  gap:14px;
  padding:21px 29px;
  border-bottom:1px solid var(--p-border);
}

.hd-pbr .p-fit-item:last-child {
  border-bottom:0;
}

.hd-pbr .p-fit-number {
  color:var(--p-orange);
  font-size:12px;
  font-weight:800;
}

.hd-pbr .p-fit-item h4 {
  margin-bottom:5px;
  color:var(--p-navy);
  font-size:15px;
  line-height:1.4;
}

.hd-pbr .p-fit-item p {
  color:var(--p-muted);
  font-size:13px;
  line-height:1.8;
}

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

.hd-pbr .p-planning-grid {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
  align-items:start;
}

.hd-pbr .p-planning-copy .p-lead {
  font-size:15px;
}

.hd-pbr .p-planning-note {
  margin-top:29px;
  padding:20px 23px;
  border-left:3px solid var(--p-orange);
  background:#edf3f8;
}

.hd-pbr .p-planning-note strong {
  display:block;
  margin-bottom:8px;
  color:var(--p-navy);
  font-size:14px;
}

.hd-pbr .p-planning-note p {
  color:#52697c;
  font-size:13px;
  line-height:1.85;
}

.hd-pbr .p-check-panel {
  overflow:hidden;
  border:1px solid var(--p-border);
  border-radius:9px;
  background:#fff;
}

.hd-pbr .p-check-header {
  padding:23px 30px;
  background:var(--p-navy);
}

.hd-pbr .p-check-header h3 {
  color:#fff;
  font-size:18px;
  line-height:1.5;
}

.hd-pbr .p-check-panel ul {
  list-style:none;
  margin:0;
  padding:16px 30px;
}

.hd-pbr .p-check-panel li {
  display:grid;
  grid-template-columns:20px 1fr;
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid var(--p-border);
  color:#506476;
  font-size:14px;
  line-height:1.75;
}

.hd-pbr .p-check-panel li:last-child {
  border-bottom:0;
}

.hd-pbr .p-check {
  color:var(--p-orange);
  font-size:17px;
  font-weight:800;
}

.hd-pbr .p-check-foot {
  padding:8px 30px 26px;
  color:#7b8b98;
  font-size:12px;
  line-height:1.85;
}

/* ============================================
 09 - INQUIRY CTA
============================================ */

.hd-pbr .p-cta-area {
  padding:16px 0 72px;
}

.hd-pbr .p-cta {
  position:relative;
  overflow:hidden;
  padding:59px 62px;
  border-radius:10px;
  background:var(--p-navy);
}

.hd-pbr .p-cta:after {
  content:"";
  position:absolute;
  right:-80px;
  top:-125px;
  width:370px;
  height:370px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:50%;
  pointer-events:none;
}

.hd-pbr .p-cta-grid {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}

.hd-pbr .p-cta-copy {
  max-width:665px;
}

.hd-pbr .p-cta-kicker {
  margin-bottom:15px;
  color:#aecadb;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.8px;
  text-transform:uppercase;
}

.hd-pbr .p-cta h2 {
  color:#fff;
  font-size:clamp(26px,2.9vw,35px);
  line-height:1.3;
}

.hd-pbr .p-cta p {
  margin-top:15px;
  color:#cad6e1;
  font-size:14px;
  line-height:1.9;
}

.hd-pbr .p-quote-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-height:54px;
  padding:14px 28px;
  border:0;
  border-radius:4px;
  background:var(--p-orange);
  color:#fff;
  font-size:13px;
  font-weight:800;
  line-height:1.5;
  cursor:pointer;
  transition:background .2s ease;
}

.hd-pbr .p-quote-btn:hover {
  background:#c96326;
}

.hd-pbr .p-quote-btn:focus-visible {
  outline:3px solid #fff;
  outline-offset:3px;
}

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

@media(max-width:1050px) {
  .hd-pbr .p-hero-copy {
    padding:43px 8px 43px 36px;
  }

  .hd-pbr .p-operation-copy {
    padding-left:35px;
  }

  .hd-pbr .p-selection-layout,
  .hd-pbr .p-planning-grid {
    gap:35px;
  }

  .hd-pbr .p-cta {
    padding:48px 40px;
  }
}

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

@media(max-width:768px) {
  .hd-pbr .p-container {
    width:calc(100% - 32px);
  }

  .hd-pbr .p-section {
    padding:58px 0;
  }

  .hd-pbr .p-title {
    font-size:30px;
  }

  .hd-pbr .p-lead {
    font-size:15px;
  }

  .hd-pbr .p-heading-group {
    margin-bottom:30px;
  }

  .hd-pbr .p-hero-grid,
  .hd-pbr .p-operation-grid,
  .hd-pbr .p-selection-layout,
  .hd-pbr .p-planning-grid {
    grid-template-columns:1fr;
  }

  .hd-pbr .p-hero-copy {
    padding:37px 29px 13px;
  }

  .hd-pbr .p-hero h2 {
    font-size:37px;
  }

  .hd-pbr .p-hero-visual {
    padding:15px 22px 28px;
  }

  .hd-pbr .p-benefits,
  .hd-pbr .p-detail-grid,
  .hd-pbr .p-component-strip,
  .hd-pbr .p-applications,
  .hd-pbr .p-project-bottom {
    grid-template-columns:1fr;
  }

  .hd-pbr .p-benefits {
    gap:13px;
  }

  .hd-pbr .p-benefit {
    padding:27px;
  }

  .hd-pbr .p-benefit-index {
    margin-bottom:15px;
  }

  .hd-pbr .p-operation-copy {
    padding:32px 0 0;
  }

  .hd-pbr .p-detail-image {
    height:320px;
  }

  .hd-pbr .p-detail-grid {
    gap:17px;
  }

  .hd-pbr .p-component-strip {
    gap:10px;
  }

  .hd-pbr .p-project-bottom {
    gap:12px;
    padding:27px;
  }

  .hd-pbr .p-applications {
    gap:29px;
  }

  .hd-pbr .p-application-num {
    margin:20px 0 12px;
  }

  .hd-pbr .p-selection-layout,
  .hd-pbr .p-planning-grid {
    gap:30px;
  }

  .hd-pbr .p-cta-area {
    padding-bottom:36px;
  }

  .hd-pbr .p-cta {
    padding:38px 29px;
  }

  .hd-pbr .p-cta-grid {
    flex-direction:column;
    align-items:flex-start;
    gap:27px;
  }
}

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

@media(max-width:480px) {
  .hd-pbr .p-container {
    width:calc(100% - 26px);
  }

  .hd-pbr .p-hero-copy {
    padding:32px 24px 12px;
  }

  .hd-pbr .p-hero h2 {
    font-size:33px;
  }

  .hd-pbr .p-hero-desc {
    font-size:14px;
  }

  .hd-pbr .p-hero-tags span {
    font-size:11px;
  }

  .hd-pbr .p-detail-image {
    height:285px;
  }

  .hd-pbr .p-detail-copy {
    padding:24px;
  }

  .hd-pbr .p-project-bottom {
    padding:23px;
  }

  .hd-pbr .p-fit-item {
    padding:19px 22px;
  }

  .hd-pbr .p-fit-header,
  .hd-pbr .p-check-header {
    padding:21px 23px;
  }

  .hd-pbr .p-check-panel ul {
    padding:12px 23px;
  }

  .hd-pbr .p-check-foot {
    padding:8px 23px 24px;
  }

  .hd-pbr .p-cta {
    padding:35px 24px;
  }

  .hd-pbr .p-quote-btn {
    width:100%;
    text-align:center;
  }
}

/* Keep the original Push Back CTA appearance while using the native HEDA inquiry popup. */
.hd-pbr .p-cta a.p-quote-btn.themes_box_inquiry_button_alert.themes_box_button.trans3 {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  min-height:54px !important;
  padding:14px 28px !important;
  margin:0 !important;
  border:0 !important;
  border-radius:4px !important;
  background:var(--p-orange) !important;
  background-image:none !important;
  color:#fff !important;
  font-family:inherit !important;
  font-size:13px !important;
  font-weight:800 !important;
  letter-spacing:normal !important;
  line-height:1.5 !important;
  text-align:center !important;
  text-transform:none !important;
  text-decoration:none !important;
  box-shadow:none !important;
  white-space:normal !important;
  cursor:pointer !important;
  transition:background .2s ease !important;
}
.hd-pbr .p-cta a.p-quote-btn.themes_box_inquiry_button_alert.themes_box_button.trans3:hover {
  background:#c96326 !important;
  background-image:none !important;
  color:#fff !important;
}
.hd-pbr .p-cta a.p-quote-btn.themes_box_inquiry_button_alert.themes_box_button.trans3:focus-visible {
  outline:3px solid #fff !important;
  outline-offset:3px !important;
}
.hd-pbr .p-cta a.p-quote-btn.themes_box_inquiry_button_alert.themes_box_button.trans3::before,
.hd-pbr .p-cta a.p-quote-btn.themes_box_inquiry_button_alert.themes_box_button.trans3::after {
  content:none !important;
  display:none !important;
}
@media(max-width:480px) {
  .hd-pbr .p-cta a.p-quote-btn.themes_box_inquiry_button_alert.themes_box_button.trans3 {
    width:100% !important;
  }
}