/* =========================================================
   HEDA SHELVES
   DOUBLE-LAYER SUPERMARKET GROCERY CART - TYPE B
   Product No.DLSGCTB01
   All styles scoped to this product Description section.
========================================================= */

#heda-db-type-b{
  --db-dark:#252d33;
  --db-graphite:#424b50;
  --db-ink:#263139;
  --db-muted:#65727b;
  --db-line:#e1e6e9;
  --db-soft:#f5f7f8;
  --db-red:#c83d36;
  --db-red-dark:#a62d29;
  --db-blue:#2d59ad;
  --db-blue-dark:#23498d;
  --db-white:#ffffff;
  width:100%;
  margin:0;
  padding:0;
  background:#fff;
  color:var(--db-ink);
  font:15px/1.75 Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
}

#heda-db-type-b,
#heda-db-type-b *{
  box-sizing:border-box;
}

#heda-db-type-b .db-wrap{
  width:calc(100% - 44px);
  max-width:1180px;
  margin:0 auto;
}

#heda-db-type-b section{
  margin:0;
}

#heda-db-type-b h2,
#heda-db-type-b h3,
#heda-db-type-b p,
#heda-db-type-b figure{
  margin:0;
  padding:0;
}

#heda-db-type-b img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
}

#heda-db-type-b h2{
  color:var(--db-ink);
  font-size:clamp(28px,3.5vw,43px);
  line-height:1.17;
  font-weight:750;
  letter-spacing:-.9px;
}

#heda-db-type-b h3{
  color:var(--db-ink);
  font-size:19px;
  line-height:1.4;
  font-weight:700;
}

#heda-db-type-b p{
  color:var(--db-muted);
  line-height:1.82;
}

#heda-db-type-b .db-eyebrow{
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:16px;
  color:var(--db-red-dark);
  font-size:11px;
  line-height:1.5;
  font-weight:800;
  letter-spacing:1.3px;
  text-transform:uppercase;
}

#heda-db-type-b .db-eyebrow:before{
  content:"";
  display:block;
  width:25px;
  height:2px;
  flex:0 0 25px;
  background:var(--db-red);
}

#heda-db-type-b .db-heading{
  max-width:790px;
  margin-bottom:32px;
}

#heda-db-type-b .db-heading>p{
  max-width:720px;
  margin-top:15px;
  font-size:14px;
}

/* =========================================================
   01. EDITORIAL HERO
========================================================= */

#heda-db-type-b .db-hero{
  padding:24px 0 0;
}

#heda-db-type-b .db-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  padding:0 0 17px;
  border-bottom:1px solid var(--db-line);
}

#heda-db-type-b .db-topline strong{
  color:var(--db-dark);
  font-size:11px;
  font-weight:800;
  letter-spacing:1px;
}

#heda-db-type-b .db-topline span{
  color:var(--db-muted);
  font-size:11px;
}

#heda-db-type-b .db-hero-intro{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:44px;
  align-items:end;
  padding:45px 0 36px;
}

#heda-db-type-b .db-hero-intro h2{
  font-size:clamp(36px,4.8vw,59px);
  line-height:1.09;
  letter-spacing:-1.6px;
}

#heda-db-type-b .db-hero-intro h2 span{
  color:var(--db-red);
}

#heda-db-type-b .db-hero-intro-copy{
  padding-left:21px;
  border-left:3px solid var(--db-red);
}

#heda-db-type-b .db-hero-intro-copy p{
  font-size:14px;
}

#heda-db-type-b .db-hero-layout{
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  gap:0;
  align-items:stretch;
  border:1px solid var(--db-line);
}

#heda-db-type-b .db-hero-figure{
  display:flex;
  flex-direction:column;
  min-width:0;
  background:#fff;
}

#heda-db-type-b .db-hero-image{
  display:flex;
  flex:1;
  justify-content:center;
  align-items:center;
  min-height:0;
  padding:19px;
}

#heda-db-type-b .db-hero-image img{
  width:100%;
  height:520px;
  object-fit:contain;
}

#heda-db-type-b .db-photo-caption{
  padding:14px 19px;
  background:#fafbfb;
  border-top:1px solid var(--db-line);
}

#heda-db-type-b .db-photo-caption strong{
  display:block;
  margin-bottom:4px;
  color:var(--db-ink);
  font-size:12px;
}

#heda-db-type-b .db-photo-caption p{
  font-size:11px;
}

#heda-db-type-b .db-hero-panel{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:clamp(29px,3.9vw,48px);
  background:var(--db-dark);
}

#heda-db-type-b .db-hero-panel .db-eyebrow{
  color:#d9dfe2;
}

#heda-db-type-b .db-hero-panel .db-eyebrow:before{
  background:#d9dfe2;
}

#heda-db-type-b .db-hero-panel h3{
  color:#fff;
  font-size:clamp(24px,2.8vw,33px);
  line-height:1.2;
  margin-bottom:17px;
}

#heda-db-type-b .db-hero-panel>p{
  color:#d4dfe4;
  font-size:13px;
}

#heda-db-type-b .db-color-key{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:25px;
}

#heda-db-type-b .db-color-card{
  min-width:0;
  padding:19px 16px;
  background:#343e45;
  border:1px solid rgba(255,255,255,.14);
}

#heda-db-type-b .db-color-swatch{
  display:block;
  width:37px;
  height:8px;
  margin-bottom:13px;
}

#heda-db-type-b .db-color-card:first-child .db-color-swatch{
  background:var(--db-red);
}

#heda-db-type-b .db-color-card:last-child .db-color-swatch{
  background:var(--db-blue);
}

#heda-db-type-b .db-color-card strong{
  display:block;
  color:#fff;
  font-size:14px;
  margin-bottom:5px;
}

#heda-db-type-b .db-color-card p{
  color:#d7e1e4;
  font-size:11px;
}

#heda-db-type-b .db-hero-foot{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-bottom:1px solid var(--db-line);
}

#heda-db-type-b .db-hero-fact{
  min-width:0;
  padding:25px 22px;
  border-right:1px solid var(--db-line);
}

#heda-db-type-b .db-hero-fact:first-child{
  padding-left:0;
}

#heda-db-type-b .db-hero-fact:last-child{
  padding-right:0;
  border-right:0;
}

#heda-db-type-b .db-hero-fact small{
  display:block;
  margin-bottom:8px;
  color:var(--db-red-dark);
  font-size:10px;
  font-weight:800;
  letter-spacing:1px;
}

#heda-db-type-b .db-hero-fact strong{
  display:block;
  color:var(--db-ink);
  font-size:19px;
  line-height:1.35;
}

#heda-db-type-b .db-hero-fact p{
  margin-top:7px;
  font-size:12px;
}

/* =========================================================
   02. TWO REMOVABLE BASKET LEVELS
========================================================= */

#heda-db-type-b .db-two-levels{
  padding:81px 0;
}

#heda-db-type-b .db-level-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
  gap:19px;
}

#heda-db-type-b .db-level-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  border:1px solid var(--db-line);
  background:#fff;
}

#heda-db-type-b .db-level-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:19px 25px;
  color:#fff;
  background:var(--db-red);
}

#heda-db-type-b .db-level-card:nth-child(2) .db-level-bar{
  background:var(--db-blue);
}

#heda-db-type-b .db-level-bar small{
  color:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:1px;
}

#heda-db-type-b .db-level-bar strong{
  color:#fff;
  font-size:12px;
}

#heda-db-type-b .db-level-body{
  display:flex;
  flex:1;
  flex-direction:column;
  padding:31px 27px;
}

#heda-db-type-b .db-level-body h3{
  margin-bottom:14px;
  font-size:24px;
}

#heda-db-type-b .db-level-body>p{
  font-size:14px;
}

#heda-db-type-b .db-level-details{
  margin-top:auto;
  padding-top:25px;
}

#heda-db-type-b .db-level-detail{
  position:relative;
  padding:12px 0 12px 19px;
  border-top:1px solid var(--db-line);
  color:var(--db-muted);
  font-size:13px;
}

#heda-db-type-b .db-level-detail:before{
  content:"";
  position:absolute;
  left:0;
  top:20px;
  width:7px;
  height:7px;
  background:var(--db-red);
}

#heda-db-type-b .db-level-card:nth-child(2) .db-level-detail:before{
  background:var(--db-blue);
}

/* =========================================================
   03. ORIGINAL EMPTY FRAME PHOTO
========================================================= */

#heda-db-type-b .db-frame{
  padding:80px 0;
  background:var(--db-soft);
}

#heda-db-type-b .db-frame-grid{
  display:grid;
  grid-template-columns:minmax(0,.87fr) minmax(0,1.13fr);
  align-items:stretch;
  gap:20px;
}

#heda-db-type-b .db-frame-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:clamp(29px,3.6vw,45px);
  background:#fff;
  border:1px solid var(--db-line);
}

#heda-db-type-b .db-frame-copy h2{
  margin-bottom:18px;
}

#heda-db-type-b .db-frame-copy>p{
  font-size:14px;
}

#heda-db-type-b .db-frame-points{
  margin-top:23px;
  border-top:1px solid var(--db-line);
}

#heda-db-type-b .db-frame-point{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid var(--db-line);
}

#heda-db-type-b .db-frame-point>span{
  color:var(--db-red);
  font-size:12px;
  font-weight:800;
}

#heda-db-type-b .db-frame-point h3{
  font-size:16px;
  margin-bottom:6px;
}

#heda-db-type-b .db-frame-point p{
  font-size:12px;
}

#heda-db-type-b .db-frame-figure{
  display:flex;
  flex-direction:column;
  min-width:0;
  border:1px solid var(--db-line);
  background:#fff;
}

#heda-db-type-b .db-frame-image{
  display:flex;
  flex:1;
  justify-content:center;
  align-items:center;
  min-height:0;
  padding:19px;
}

#heda-db-type-b .db-frame-image img{
  width:100%;
  height:100%;
  max-height:615px;
  object-fit:contain;
}

/* =========================================================
   04. FRAME & MATERIAL DETAILS
========================================================= */

#heda-db-type-b .db-construction{
  padding:80px 0;
}

#heda-db-type-b .db-construction-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
  gap:15px;
}

#heda-db-type-b .db-construction-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:29px 24px;
  background:#fff;
  border:1px solid var(--db-line);
  border-top:4px solid var(--db-graphite);
}

#heda-db-type-b .db-construction-card:nth-child(2){
  border-top-color:var(--db-red);
}

#heda-db-type-b .db-construction-card:nth-child(3){
  border-top-color:var(--db-blue);
}

#heda-db-type-b .db-construction-card small{
  display:block;
  margin-bottom:18px;
  color:var(--db-muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:1px;
}

#heda-db-type-b .db-construction-card h3{
  margin-bottom:11px;
}

#heda-db-type-b .db-construction-card p{
  font-size:13px;
}

/* =========================================================
   05. PRODUCT BENEFITS
========================================================= */

#heda-db-type-b .db-benefits{
  padding:80px 0;
  background:var(--db-dark);
}

#heda-db-type-b .db-benefits .db-eyebrow{
  color:#d9e0e4;
}

#heda-db-type-b .db-benefits .db-eyebrow:before{
  background:#d9e0e4;
}

#heda-db-type-b .db-benefits h2{
  color:#fff;
}

#heda-db-type-b .db-benefits .db-heading p{
  color:#d1dfe3;
}

#heda-db-type-b .db-benefit-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:15px;
  align-items:stretch;
}

#heda-db-type-b .db-benefit{
  min-width:0;
  padding:29px 25px;
  background:#343f46;
  border:1px solid rgba(255,255,255,.15);
}

#heda-db-type-b .db-benefit small{
  display:block;
  margin-bottom:18px;
  color:#c8d6dc;
  font-size:11px;
  font-weight:800;
  letter-spacing:1px;
}

#heda-db-type-b .db-benefit h3{
  color:#fff;
  margin-bottom:11px;
}

#heda-db-type-b .db-benefit p{
  color:#d6e1e5;
  font-size:13px;
}

/* =========================================================
   06. SPECIFICATIONS
========================================================= */

#heda-db-type-b .db-specifications{
  padding:81px 0;
}

#heda-db-type-b .db-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  background:#fff;
  border:1px solid var(--db-line);
}

#heda-db-type-b .db-table th,
#heda-db-type-b .db-table td{
  padding:16px 22px;
  border-bottom:1px solid var(--db-line);
  text-align:left;
  vertical-align:top;
  font-size:13px;
  line-height:1.75;
}

#heda-db-type-b .db-table th{
  width:35%;
  color:var(--db-ink);
  font-weight:800;
  background:var(--db-soft);
  border-right:1px solid var(--db-line);
}

#heda-db-type-b .db-table td{
  color:var(--db-muted);
}

#heda-db-type-b .db-table tr:last-child th,
#heda-db-type-b .db-table tr:last-child td{
  border-bottom:0;
}

/* =========================================================
   07. PROCUREMENT AND CONFIGURATION
========================================================= */

#heda-db-type-b .db-procurement{
  padding:79px 0;
  background:var(--db-soft);
}

#heda-db-type-b .db-proc-grid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:stretch;
  gap:19px;
}

#heda-db-type-b .db-proc-intro{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:clamp(29px,3.7vw,45px);
  background:#fff;
  border:1px solid var(--db-line);
}

#heda-db-type-b .db-proc-intro h2{
  margin-bottom:17px;
}

#heda-db-type-b .db-proc-intro p{
  font-size:14px;
}

#heda-db-type-b .db-proc-notice{
  margin-top:23px;
  padding:19px 20px;
  background:#f9f2f1;
  border-left:3px solid var(--db-red);
}

#heda-db-type-b .db-proc-notice strong{
  display:block;
  margin-bottom:7px;
  color:var(--db-ink);
  font-size:13px;
}

#heda-db-type-b .db-proc-notice p{
  font-size:12px;
}

#heda-db-type-b .db-proc-list{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:31px 29px;
  background:#fff;
  border:1px solid var(--db-line);
}

#heda-db-type-b .db-proc-list h3{
  margin-bottom:12px;
  font-size:23px;
}

#heda-db-type-b .db-proc-list>p{
  font-size:13px;
}

#heda-db-type-b .db-check-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 20px;
  margin-top:18px;
}

#heda-db-type-b .db-check{
  position:relative;
  padding:12px 0 12px 20px;
  border-top:1px solid var(--db-line);
  color:var(--db-muted);
  font-size:13px;
  line-height:1.65;
}

#heda-db-type-b .db-check:before{
  content:"";
  position:absolute;
  left:0;
  top:19px;
  width:8px;
  height:8px;
  background:var(--db-red);
}

#heda-db-type-b .db-check:nth-child(even):before{
  background:var(--db-blue);
}

/* =========================================================
   08. NATIVE INQUIRY CTA
========================================================= */

#heda-db-type-b .db-cta{
  padding:72px 0;
  background:var(--db-dark);
  border-top:5px solid var(--db-red);
}

#heda-db-type-b .db-cta-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:43px;
}

#heda-db-type-b .db-cta .db-eyebrow{
  color:#d7e1e6;
}

#heda-db-type-b .db-cta .db-eyebrow:before{
  background:#d7e1e6;
}

#heda-db-type-b .db-cta h2{
  color:#fff;
  margin-bottom:17px;
}

#heda-db-type-b .db-cta p{
  max-width:735px;
  color:#d4e0e5;
  font-size:14px;
}

#heda-db-type-b a.db-inquiry{
  display:inline-flex !important;
  position:relative;
  align-items:center;
  justify-content:center;
  min-width:218px;
  min-height:56px;
  width:auto !important;
  padding:15px 30px !important;
  margin:0 !important;
  color:#fff !important;
  background:var(--db-red) !important;
  border:1px solid var(--db-red) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  font:800 12px/1.5 Arial,Helvetica,sans-serif !important;
  text-align:center;
  text-decoration:none !important;
  text-transform:uppercase;
  letter-spacing:1px;
  cursor:pointer;
}

#heda-db-type-b a.db-inquiry:hover{
  background:var(--db-red-dark) !important;
  border-color:var(--db-red-dark) !important;
  color:#fff !important;
}

#heda-db-type-b a.db-inquiry:focus-visible{
  outline:3px solid #fff;
  outline-offset:3px;
}

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

@media(max-width:1024px){

  #heda-db-type-b .db-hero-intro{
    gap:27px;
  }

  #heda-db-type-b .db-hero-intro h2{
    font-size:clamp(34px,4.2vw,49px);
  }

  #heda-db-type-b .db-hero-image img{
    height:445px;
  }

  #heda-db-type-b .db-hero-panel{
    padding:29px 25px;
  }

  #heda-db-type-b .db-hero-fact{
    padding:22px 15px;
  }

  #heda-db-type-b .db-level-body{
    padding:27px 23px;
  }

  #heda-db-type-b .db-frame-grid{
    gap:14px;
  }

  #heda-db-type-b .db-frame-copy{
    padding:27px 23px;
  }

  #heda-db-type-b .db-construction-grid,
  #heda-db-type-b .db-benefit-grid{
    gap:12px;
  }

  #heda-db-type-b .db-construction-card,
  #heda-db-type-b .db-benefit{
    padding:25px 19px;
  }

}

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

@media(max-width:767px){

  #heda-db-type-b{
    font-size:14px;
  }

  #heda-db-type-b .db-wrap{
    width:calc(100% - 32px);
  }

  #heda-db-type-b h2{
    font-size:28px;
  }

  #heda-db-type-b .db-heading{
    margin-bottom:25px;
  }

  #heda-db-type-b .db-hero{
    padding-top:12px;
  }

  #heda-db-type-b .db-hero-intro{
    grid-template-columns:1fr;
    gap:20px;
    padding:31px 0 28px;
  }

  #heda-db-type-b .db-hero-intro h2{
    font-size:35px;
  }

  #heda-db-type-b .db-hero-intro-copy{
    padding-left:17px;
  }

  #heda-db-type-b .db-hero-layout{
    grid-template-columns:1fr;
  }

  #heda-db-type-b .db-hero-image{
    padding:13px;
  }

  #heda-db-type-b .db-hero-image img{
    height:auto;
    max-height:490px;
  }

  #heda-db-type-b .db-hero-panel{
    padding:30px 24px;
  }

  #heda-db-type-b .db-hero-foot{
    grid-template-columns:1fr;
  }

  #heda-db-type-b .db-hero-fact,
  #heda-db-type-b .db-hero-fact:first-child,
  #heda-db-type-b .db-hero-fact:last-child{
    padding:18px 0;
    border-right:0;
    border-bottom:1px solid var(--db-line);
  }

  #heda-db-type-b .db-two-levels,
  #heda-db-type-b .db-frame,
  #heda-db-type-b .db-construction,
  #heda-db-type-b .db-benefits,
  #heda-db-type-b .db-specifications,
  #heda-db-type-b .db-procurement{
    padding:49px 0;
  }

  #heda-db-type-b .db-level-grid,
  #heda-db-type-b .db-frame-grid,
  #heda-db-type-b .db-proc-grid{
    grid-template-columns:1fr;
    gap:15px;
  }

  #heda-db-type-b .db-level-body{
    padding:26px 23px;
  }

  #heda-db-type-b .db-frame-copy{
    padding:28px 23px;
  }

  #heda-db-type-b .db-frame-image img{
    height:auto;
    max-height:500px;
  }

  #heda-db-type-b .db-construction-grid,
  #heda-db-type-b .db-benefit-grid{
    grid-template-columns:1fr;
    gap:13px;
  }

  #heda-db-type-b .db-construction-card,
  #heda-db-type-b .db-benefit{
    padding:25px 22px;
  }

  #heda-db-type-b .db-table th,
  #heda-db-type-b .db-table td{
    padding:14px 12px;
    font-size:12px;
    overflow-wrap:anywhere;
  }

  #heda-db-type-b .db-table th{
    width:40%;
  }

  #heda-db-type-b .db-proc-intro,
  #heda-db-type-b .db-proc-list{
    padding:28px 23px;
  }

  #heda-db-type-b .db-cta{
    padding:49px 0;
  }

  #heda-db-type-b .db-cta-grid{
    grid-template-columns:1fr;
    gap:27px;
  }

  #heda-db-type-b a.db-inquiry{
    width:100% !important;
  }

}

@media(max-width:420px){

  #heda-db-type-b .db-hero-intro h2{
    font-size:31px;
  }

  #heda-db-type-b .db-color-key,
  #heda-db-type-b .db-check-grid{
    grid-template-columns:1fr;
  }

}