/* ==========================================================
   HEDA SHELVES
   HYPERMARKET HEAVY DUTY WAREHOUSE SUPERMARKET RACK
   PRODUCT NO.00315

   COMPLETE PRODUCT DESCRIPTION - HTML + CSS
   ORIGINAL HEDA PRODUCT PHOTOGRAPHS
   RESPONSIVE / B2B RETAIL EQUIPMENT DESIGN

   INQUIRY:
   WEBSITE'S NATIVE "GET QUOTE NOW" POPUP

   ALL STYLES SCOPED TO .hhr-page
========================================================== */

.hhr-page {
  --hhr-ink:#173246;
  --hhr-dark:#102a3d;
  --hhr-text:#455b6a;
  --hhr-muted:#718492;
  --hhr-accent:#e87930;
  --hhr-border:#dce5e9;
  --hhr-soft:#f5f7f7;
  --hhr-white:#ffffff;

  width:100%;
  margin:0;
  padding:0;
  overflow:hidden;
  background:#ffffff;
  color:var(--hhr-text);

  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}

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

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

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

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

.hhr-page .hhr-container {
  width:calc(100% - 48px);
  max-width:1180px;
  margin:0 auto;
}

.hhr-page .hhr-section {
  padding:87px 0;
}

.hhr-page .hhr-section-soft {
  background:var(--hhr-soft);
}

.hhr-page .hhr-eyebrow {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:19px;

  color:#587286;
  font-size:11px;
  font-weight:800;
  line-height:1.5;
  letter-spacing:1.9px;
  text-transform:uppercase;
}

.hhr-page .hhr-eyebrow:before {
  content:"";
  display:block;
  flex:0 0 25px;
  width:25px;
  height:2px;
  background:var(--hhr-accent);
}

.hhr-page .hhr-heading {
  color:var(--hhr-ink);
  font-size:clamp(30px,3.5vw,43px);
  font-weight:800;
  line-height:1.22;
  letter-spacing:-.9px;
}

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

.hhr-page .hhr-section-heading {
  max-width:820px;
  margin-bottom:42px;
}

.hhr-page .hhr-image-caption {
  margin-top:12px;
  color:#83939e;
  font-size:12px;
  line-height:1.8;
}

/* ==========================================================
   01 - PRODUCT INTRODUCTION
   Editorial Heading + Split Visual Composition
========================================================== */

.hhr-page .hhr-hero {
  padding:38px 0 0;
}

.hhr-page .hhr-hero-header {
  display:grid;
  grid-template-columns:
    minmax(0,1.15fr)
    minmax(0,.85fr);
  gap:66px;
  align-items:end;
  padding:12px 0 40px;
}

.hhr-page .hhr-hero-title {
  min-width:0;
}

.hhr-page .hhr-hero-label {
  color:#60798a;
  font-size:11px;
  font-weight:800;
  line-height:1.6;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:22px;
}

.hhr-page .hhr-hero-title h2 {
  color:var(--hhr-ink);
  font-size:clamp(37px,4.6vw,57px);
  font-weight:800;
  line-height:1.13;
  letter-spacing:-1.5px;
}

.hhr-page .hhr-hero-title h2 span {
  color:var(--hhr-accent);
}

.hhr-page .hhr-hero-summary {
  min-width:0;
  padding-bottom:3px;
}

.hhr-page .hhr-hero-summary p {
  color:#5c7281;
  font-size:15px;
  line-height:1.95;
}

.hhr-page .hhr-hero-code {
  display:flex;
  align-items:center;
  gap:13px;
  flex-wrap:wrap;
  margin-top:23px;
}

.hhr-page .hhr-hero-code span {
  padding:8px 12px;
  border:1px solid var(--hhr-border);
  border-radius:3px;
  color:#5c7384;
  background:#f9fafb;
  font-size:11px;
  font-weight:800;
  line-height:1.5;
}

.hhr-page .hhr-hero-body {
  display:grid;
  grid-template-columns:
    minmax(0,1.38fr)
    minmax(0,.62fr);
  gap:0;
  overflow:hidden;
  border:1px solid var(--hhr-border);
  border-radius:8px;
}

.hhr-page .hhr-hero-image {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:23px;
  background:#f6f8f8;
}

.hhr-page .hhr-hero-image img {
  width:100%;
  max-height:590px;
  object-fit:contain;
}

.hhr-page .hhr-hero-insight {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:0;
  padding:38px 37px;
  background:var(--hhr-dark);
}

.hhr-page .hhr-insight-label {
  margin-bottom:18px;
  color:#b8cfdb;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.8px;
  line-height:1.5;
  text-transform:uppercase;
}

.hhr-page .hhr-insight-item {
  padding:23px 0;
  border-top:1px solid rgba(255,255,255,.2);
}

.hhr-page .hhr-insight-item strong {
  display:block;
  margin-bottom:8px;
  color:#ffffff;
  font-size:20px;
  font-weight:800;
  line-height:1.4;
}

.hhr-page .hhr-insight-item p {
  color:#c4d4dd;
  font-size:13px;
  line-height:1.9;
}

/* ==========================================================
   02 - TWO WORKING ZONES
========================================================== */

.hhr-page .hhr-dual-intro {
  display:grid;
  grid-template-columns:
    minmax(0,.8fr)
    minmax(0,1.2fr);
  gap:55px;
  align-items:start;
  margin-bottom:37px;
}

.hhr-page .hhr-dual-intro .hhr-lead {
  margin-top:0;
}

.hhr-page .hhr-dual-layout {
  display:grid;
  grid-template-columns:
    minmax(0,.95fr)
    minmax(0,1.05fr);
  align-items:stretch;
  overflow:hidden;
  border:1px solid var(--hhr-border);
  border-radius:8px;
  background:#ffffff;
}

.hhr-page .hhr-dual-photo {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:18px;
  background:#ffffff;
}

.hhr-page .hhr-dual-photo img {
  max-height:550px;
  object-fit:contain;
}

.hhr-page .hhr-zone-list {
  display:flex;
  flex-direction:column;
  min-width:0;
  border-left:1px solid var(--hhr-border);
}

.hhr-page .hhr-zone {
  display:grid;
  grid-template-columns:62px minmax(0,1fr);
  gap:16px;
  align-items:start;
  flex:1;
  padding:35px 31px;
}

.hhr-page .hhr-zone+.hhr-zone {
  border-top:1px solid var(--hhr-border);
  background:#f8fafb;
}

.hhr-page .hhr-zone-index {
  color:var(--hhr-accent);
  font-size:12px;
  font-weight:800;
  letter-spacing:1px;
  line-height:1.7;
}

.hhr-page .hhr-zone h3 {
  margin-bottom:10px;
  color:var(--hhr-ink);
  font-size:23px;
  font-weight:800;
  line-height:1.35;
}

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

.hhr-page .hhr-zone-note {
  margin-top:18px;
  padding:13px 16px;
  border-left:3px solid var(--hhr-accent);
  background:#e8eef1;
  color:#536a7b;
  font-size:12px;
  line-height:1.8;
}

/* ==========================================================
   03 - REAL PRODUCT STRUCTURE
========================================================== */

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

.hhr-page .hhr-detail {
  min-width:0;
  overflow:hidden;
  border:1px solid var(--hhr-border);
  border-radius:7px;
  background:#ffffff;
}

.hhr-page .hhr-detail-media {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:13px;
  background:#ffffff;
  min-height:250px;
}

.hhr-page .hhr-detail-media img {
  max-height:340px;
  object-fit:contain;
}

.hhr-page .hhr-detail-content {
  padding:25px 25px 29px;
  border-top:1px solid var(--hhr-border);
}

.hhr-page .hhr-detail-number {
  display:block;
  margin-bottom:11px;
  color:var(--hhr-accent);
  font-size:11px;
  font-weight:800;
  letter-spacing:1.3px;
}

.hhr-page .hhr-detail h3 {
  margin-bottom:12px;
  color:var(--hhr-ink);
  font-size:19px;
  font-weight:800;
  line-height:1.4;
}

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

.hhr-page .hhr-structure-caution {
  margin-top:25px;
  padding:21px 25px;
  border-left:3px solid var(--hhr-accent);
  background:#e8eef1;
  color:#526878;
  font-size:13px;
  line-height:1.95;
}

/* ==========================================================
   04 - RETAIL REPLENISHMENT WORKFLOW
========================================================== */

.hhr-page .hhr-workflow-layout {
  display:grid;
  grid-template-columns:
    minmax(0,.7fr)
    minmax(0,1.3fr);
  gap:67px;
  align-items:start;
}

.hhr-page .hhr-workflow-heading {
  min-width:0;
}

.hhr-page .hhr-workflow {
  min-width:0;
  border-top:1px solid var(--hhr-border);
}

.hhr-page .hhr-workflow-step {
  display:grid;
  grid-template-columns:65px minmax(0,1fr);
  gap:20px;
  padding:24px 0;
  border-bottom:1px solid var(--hhr-border);
}

.hhr-page .hhr-workflow-no {
  color:var(--hhr-accent);
  font-size:20px;
  font-weight:800;
  line-height:1.4;
}

.hhr-page .hhr-workflow-step h3 {
  color:var(--hhr-ink);
  font-size:18px;
  font-weight:800;
  line-height:1.4;
  margin-bottom:8px;
}

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

/* ==========================================================
   05 - CONFIGURATION & PROCUREMENT
========================================================== */

.hhr-page .hhr-config-section {
  padding:83px 0;
  background:var(--hhr-dark);
}

.hhr-page .hhr-config-head {
  display:grid;
  grid-template-columns:
    minmax(0,.92fr)
    minmax(0,1.08fr);
  gap:65px;
  align-items:end;
  margin-bottom:38px;
}

.hhr-page .hhr-config-head .hhr-eyebrow {
  color:#bbd0dd;
}

.hhr-page .hhr-config-head .hhr-heading {
  color:#ffffff;
}

.hhr-page .hhr-config-intro {
  color:#c9d7df;
  font-size:15px;
  line-height:1.95;
}

.hhr-page .hhr-config-layout {
  display:grid;
  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr);
  gap:21px;
  align-items:stretch;
}

.hhr-page .hhr-config-card {
  min-width:0;
  padding:30px 32px;
  border-radius:7px;
  background:#ffffff;
}

.hhr-page .hhr-config-card h3 {
  color:var(--hhr-ink);
  font-size:21px;
  font-weight:800;
  line-height:1.4;
  margin-bottom:22px;
}

.hhr-page .hhr-config-row {
  display:grid;
  grid-template-columns:38% minmax(0,1fr);
  gap:15px;
  padding:14px 0;
  border-bottom:1px solid var(--hhr-border);
}

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

.hhr-page .hhr-config-name {
  color:#657a87;
  font-size:13px;
  font-weight:700;
  line-height:1.85;
}

.hhr-page .hhr-config-value {
  color:var(--hhr-ink);
  font-size:13px;
  line-height:1.85;
  min-width:0;
}

.hhr-page .hhr-check-list {
  margin:0;
  padding:0;
  list-style:none;
}

.hhr-page .hhr-check-list li {
  position:relative;
  padding:13px 0 13px 25px;
  border-bottom:1px solid var(--hhr-border);
  color:#526a79;
  font-size:14px;
  line-height:1.85;
}

.hhr-page .hhr-check-list li:last-child {
  border-bottom:0;
}

.hhr-page .hhr-check-list li:before {
  content:"";
  position:absolute;
  left:2px;
  top:22px;
  width:8px;
  height:8px;
  border-radius:2px;
  background:var(--hhr-accent);
}

.hhr-page .hhr-config-footnote {
  margin-top:24px;
  padding:20px 23px;
  border-left:3px solid var(--hhr-accent);
  background:rgba(255,255,255,.08);
  color:#d5e1e7;
  font-size:13px;
  line-height:1.9;
}

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

.hhr-page .hhr-applications {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:25px;
}

.hhr-page .hhr-application {
  min-width:0;
  border-top:2px solid #cbd7dd;
  padding:30px 6px 14px;
}

.hhr-page .hhr-app-label {
  display:block;
  margin-bottom:22px;
  color:var(--hhr-accent);
  font-size:11px;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.hhr-page .hhr-application h3 {
  color:var(--hhr-ink);
  font-size:23px;
  font-weight:800;
  line-height:1.4;
  margin-bottom:14px;
}

.hhr-page .hhr-application p {
  max-width:495px;
  color:var(--hhr-muted);
  font-size:14px;
  line-height:1.95;
}

/* ==========================================================
   07 - FAQ
========================================================== */

.hhr-page .hhr-faq {
  border-top:1px solid var(--hhr-border);
}

.hhr-page .hhr-faq-item {
  display:grid;
  grid-template-columns:
    minmax(0,.43fr)
    minmax(0,.57fr);
  gap:45px;
  align-items:start;
  padding:26px 2px;
  border-bottom:1px solid var(--hhr-border);
}

.hhr-page .hhr-faq-item h3 {
  color:var(--hhr-ink);
  font-size:17px;
  font-weight:800;
  line-height:1.6;
}

.hhr-page .hhr-faq-item p {
  color:var(--hhr-muted);
  font-size:14px;
  line-height:1.95;
}

/* ==========================================================
   08 - NATIVE GET QUOTE NOW CTA

   Preserve actual website trigger:
   data-fields="1"
   class="themes_box_inquiry_button_alert
          themes_box_button trans3"
   href="javascript:;"
   data-id="2"
   title="GET QUOTE NOW"

   No custom JS
   No simulated clicks
   No Contact Us redirection
========================================================== */

.hhr-page .hhr-cta-section {
  padding:38px 0 65px;
}

.hhr-page .hhr-cta {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:45px;
  padding:51px 53px;
  overflow:hidden;
  border-radius:8px;
  border:1px solid var(--hhr-border);
  border-top:4px solid var(--hhr-accent);
  background:#f6f8f8;
}

.hhr-page .hhr-cta-copy {
  min-width:0;
  max-width:680px;
}

.hhr-page .hhr-cta-label {
  display:block;
  margin-bottom:14px;
  color:#657e8b;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.7px;
  text-transform:uppercase;
}

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

.hhr-page .hhr-cta p {
  margin-top:15px;
  color:#617784;
  font-size:14px;
  line-height:1.95;
}

/* Native trigger classes stay on the button.
   .hhr-quote only controls this page's appearance. */

.hhr-page a.hhr-quote {
  position:relative;
  z-index:2;

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

  flex:0 0 auto;

  min-width:200px;
  min-height:54px;

  width:auto !important;
  height:auto !important;

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

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

  background:#e87930 !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;

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

  transition:background-color .2s ease;
}

.hhr-page a.hhr-quote:hover {
  background:#c9621d !important;
  color:#ffffff !important;
  text-decoration:none !important;
}

.hhr-page a.hhr-quote:visited {
  color:#ffffff !important;
}

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

.hhr-page a.hhr-quote:before,
.hhr-page a.hhr-quote:after {
  pointer-events:none;
}

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

@media(max-width:1050px) {

  .hhr-page .hhr-hero-header {
    gap:37px;
  }

  .hhr-page .hhr-hero-title h2 {
    font-size:44px;
  }

  .hhr-page .hhr-hero-insight {
    padding:29px 26px;
  }

  .hhr-page .hhr-dual-intro,
  .hhr-page .hhr-workflow-layout,
  .hhr-page .hhr-config-head {
    gap:36px;
  }

  .hhr-page .hhr-zone {
    grid-template-columns:48px minmax(0,1fr);
    gap:12px;
    padding:25px 21px;
  }

  .hhr-page .hhr-detail-content {
    padding:23px 19px 27px;
  }

  .hhr-page .hhr-cta {
    padding:42px 37px;
  }
}

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

@media(max-width:768px) {

  .hhr-page .hhr-container {
    width:calc(100% - 32px);
  }

  .hhr-page .hhr-section {
    padding:59px 0;
  }

  .hhr-page .hhr-heading {
    font-size:31px;
  }

  .hhr-page .hhr-section-heading {
    margin-bottom:29px;
  }

  .hhr-page .hhr-hero {
    padding-top:23px;
  }

  .hhr-page .hhr-hero-header {
    grid-template-columns:1fr;
    gap:20px;
    padding:12px 0 29px;
  }

  .hhr-page .hhr-hero-title h2 {
    font-size:39px;
  }

  .hhr-page .hhr-hero-body,
  .hhr-page .hhr-dual-intro,
  .hhr-page .hhr-dual-layout,
  .hhr-page .hhr-workflow-layout,
  .hhr-page .hhr-config-head,
  .hhr-page .hhr-config-layout {
    grid-template-columns:1fr;
  }

  .hhr-page .hhr-hero-image {
    padding:14px;
  }

  .hhr-page .hhr-hero-insight {
    padding:29px;
  }

  .hhr-page .hhr-insight-item {
    padding:17px 0;
  }

  .hhr-page .hhr-dual-intro {
    gap:16px;
    margin-bottom:25px;
  }

  .hhr-page .hhr-dual-photo {
    padding:12px;
  }

  .hhr-page .hhr-zone-list {
    border-left:0;
    border-top:1px solid var(--hhr-border);
  }

  .hhr-page .hhr-zone {
    padding:25px;
  }

  .hhr-page .hhr-details {
    grid-template-columns:1fr;
    gap:18px;
  }

  .hhr-page .hhr-detail-media {
    min-height:0;
  }

  .hhr-page .hhr-detail-content {
    padding:24px 26px 28px;
  }

  .hhr-page .hhr-workflow-layout {
    gap:27px;
  }

  .hhr-page .hhr-config-section {
    padding:59px 0;
  }

  .hhr-page .hhr-config-head {
    gap:20px;
  }

  .hhr-page .hhr-config-card {
    padding:26px;
  }

  .hhr-page .hhr-applications {
    grid-template-columns:1fr;
    gap:13px;
  }

  .hhr-page .hhr-application {
    padding:25px 4px;
  }

  .hhr-page .hhr-faq-item {
    grid-template-columns:1fr;
    gap:9px;
    padding:24px 0;
  }

  .hhr-page .hhr-cta {
    grid-template-columns:1fr;
    gap:25px;
    padding:36px 29px;
  }

  .hhr-page a.hhr-quote {
    justify-self:start;
  }
}

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

@media(max-width:480px) {

  .hhr-page .hhr-container {
    width:calc(100% - 26px);
  }

  .hhr-page .hhr-hero-title h2 {
    font-size:33px;
  }

  .hhr-page .hhr-hero-summary p {
    font-size:14px;
  }

  .hhr-page .hhr-hero-image {
    padding:9px;
  }

  .hhr-page .hhr-hero-insight {
    padding:25px 23px;
  }

  .hhr-page .hhr-zone {
    grid-template-columns:1fr;
    gap:10px;
    padding:23px;
  }

  .hhr-page .hhr-zone h3 {
    font-size:21px;
  }

  .hhr-page .hhr-detail-content {
    padding:22px;
  }

  .hhr-page .hhr-workflow-step {
    grid-template-columns:40px minmax(0,1fr);
    gap:11px;
  }

  .hhr-page .hhr-workflow-no {
    font-size:17px;
  }

  .hhr-page .hhr-config-card {
    padding:23px;
  }

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

  .hhr-page .hhr-application h3 {
    font-size:20px;
  }

  .hhr-page .hhr-cta {
    padding:32px 23px;
  }

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