/* ==========================================================
   HEDA SHELVES | PRODUCT NO.00306
   TIRE STORAGE RACK WITH WHEELS

   DESIGN:
   Automotive Tire Storage & Mobile Organization

   VERIFIED ORIGINAL SKU PHOTOS:
   5dd8c9c024.jpg - Loaded three-level mobile rack
   fed1100158.jpg - Front and side configurations
   db403767f1.jpg - Long and compact rack versions
   fc3e554d9d.jpg - Tire and frame close-up
   67c266a672.jpg - Beam connection and tire
   3c9d34bf92.jpg - Tire supported between rails

   Important:
   - No invented load rating or dimensions
   - No unverified caster brake claims
   - Not presented as a pallet-load rack
   - All 6 original images used once
   - No placeholders or unrelated models
   - HEDA native inquiry popup

   CSS ROOT: .heda-tr306
========================================================== */

.heda-tr306{
  --tr-ink:#202b35;
  --tr-navy:#182b3c;
  --tr-blue:#23568c;
  --tr-orange:#e97828;
  --tr-orange-dark:#bb581a;
  --tr-text:#526573;
  --tr-muted:#7d8d98;
  --tr-line:#e0e6ea;
  --tr-light:#f4f7f9;
  --tr-warm:#faf7f2;
  width:100%;
  margin:0;
  padding:0;
  overflow:hidden;
  background:#fff;
  color:var(--tr-text);
  font:15px/1.85 Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.heda-tr306,
.heda-tr306 *{
  box-sizing:border-box;
}

.heda-tr306 h2,
.heda-tr306 h3,
.heda-tr306 h4,
.heda-tr306 p,
.heda-tr306 figure,
.heda-tr306 ul{
  margin:0;
}

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

.heda-tr306 a{
  text-decoration:none;
}

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

.heda-tr306 .tr-section{
  padding:75px 0;
}

.heda-tr306 .tr-light{
  background:var(--tr-light);
}

.heda-tr306 .tr-warm{
  background:var(--tr-warm);
}

.heda-tr306 .tr-eyebrow{
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:16px;
  color:var(--tr-blue);
  font-size:11px;
  font-weight:800;
  line-height:1.5;
  letter-spacing:1.4px;
  text-transform:uppercase;
}

.heda-tr306 .tr-eyebrow:before{
  content:"";
  width:25px;
  height:2px;
  flex:0 0 25px;
  background:var(--tr-orange);
}

.heda-tr306 .tr-title{
  color:var(--tr-ink);
  font-size:clamp(29px,3.4vw,43px);
  line-height:1.21;
  letter-spacing:-.9px;
  font-weight:800;
}

.heda-tr306 .tr-lead{
  max-width:830px;
  margin-top:18px;
  line-height:1.95;
}

.heda-tr306 .tr-heading{
  max-width:860px;
  margin-bottom:35px;
}

.heda-tr306 .tr-caption{
  margin-top:10px;
  color:var(--tr-muted);
  font-size:12px;
  line-height:1.8;
}

.heda-tr306 .tr-note{
  padding:19px 23px;
  background:#e9f0f4;
  border-left:3px solid var(--tr-orange);
  font-size:13px;
  line-height:1.95;
}

.heda-tr306 .tr-note strong{
  color:var(--tr-ink);
}

/* ==========================================================
   01 / AUTOMOTIVE PRODUCT HERO
========================================================== */

.heda-tr306 .tr-hero{
  background:#fff;
  border-top:4px solid var(--tr-orange);
}

.heda-tr306 .tr-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  padding:18px 0;
  border-bottom:1px solid var(--tr-line);
}

.heda-tr306 .tr-topline span,
.heda-tr306 .tr-topline strong{
  font-size:11px;
  font-weight:800;
  letter-spacing:1.2px;
}

.heda-tr306 .tr-topline span{
  color:var(--tr-blue);
}

.heda-tr306 .tr-topline strong{
  color:#ae5e25;
}

.heda-tr306 .tr-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:43px;
  align-items:center;
  padding:46px 0 57px;
}

.heda-tr306 .tr-hero-visual{
  min-width:0;
  padding:12px;
  border:1px solid var(--tr-line);
  background:#f7f9fb;
}

.heda-tr306 .tr-hero-visual img{
  max-height:625px;
  margin:0 auto;
  object-fit:contain;
}

.heda-tr306 .tr-hero-copy{
  min-width:0;
}

.heda-tr306 .tr-hero-label{
  display:block;
  margin-bottom:18px;
  color:#b76930;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.4px;
  text-transform:uppercase;
}

.heda-tr306 .tr-hero h2{
  color:var(--tr-ink);
  font-size:clamp(37px,4.3vw,54px);
  font-weight:800;
  line-height:1.13;
  letter-spacing:-1.3px;
}

.heda-tr306 .tr-hero h2 span{
  display:block;
  color:var(--tr-blue);
}

.heda-tr306 .tr-hero-copy p{
  margin-top:23px;
  line-height:1.95;
}

.heda-tr306 .tr-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:24px;
}

.heda-tr306 .tr-tags span{
  padding:8px 11px;
  border:1px solid var(--tr-line);
  background:#f6f8fa;
  color:#546e80;
  font-size:11px;
  font-weight:700;
}

/* ==========================================================
   02 / FEATURE STRIP
========================================================== */

.heda-tr306 .tr-facts{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--tr-line);
  border-bottom:1px solid var(--tr-line);
}

.heda-tr306 .tr-fact{
  min-width:0;
  padding:25px 21px;
}

.heda-tr306 .tr-fact+.tr-fact{
  border-left:1px solid var(--tr-line);
}

.heda-tr306 .tr-fact strong{
  display:block;
  color:var(--tr-ink);
  font-size:18px;
  line-height:1.45;
  font-weight:800;
}

.heda-tr306 .tr-fact span{
  display:block;
  margin-top:8px;
  color:var(--tr-muted);
  font-size:12px;
  line-height:1.8;
}

/* ==========================================================
   03 / TIRE STORAGE BENEFITS
========================================================== */

.heda-tr306 .tr-value{
  display:grid;
  grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
  gap:49px;
  align-items:start;
}

.heda-tr306 .tr-value-intro{
  min-width:0;
}

.heda-tr306 .tr-value-list{
  border-top:1px solid var(--tr-line);
}

.heda-tr306 .tr-value-row{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:15px;
  padding:19px 0;
  border-bottom:1px solid var(--tr-line);
}

.heda-tr306 .tr-value-row>span{
  color:var(--tr-orange);
  font-size:13px;
  font-weight:800;
}

.heda-tr306 .tr-value-row h3{
  color:var(--tr-ink);
  font-size:18px;
  line-height:1.45;
  font-weight:800;
}

.heda-tr306 .tr-value-row p{
  margin-top:8px;
  font-size:14px;
  line-height:1.9;
}

/* ==========================================================
   04 / CONFIGURATION GALLERY
========================================================== */

.heda-tr306 .tr-configs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  align-items:stretch;
}

.heda-tr306 .tr-config{
  display:flex;
  flex-direction:column;
  height:100%;
  min-width:0;
  overflow:hidden;
  border:1px solid var(--tr-line);
  background:#fff;
}

.heda-tr306 .tr-config-media{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  aspect-ratio:1/1;
  padding:12px;
  background:#f8fafb;
}

.heda-tr306 .tr-config-media img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.heda-tr306 .tr-config-body{
  display:flex;
  flex:1;
  flex-direction:column;
  min-width:0;
  padding:28px;
  border-top:1px solid var(--tr-line);
}

.heda-tr306 .tr-config-label{
  display:block;
  margin-bottom:14px;
  color:#bb6b31;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.2px;
}

.heda-tr306 .tr-config h3{
  color:var(--tr-ink);
  font-size:22px;
  font-weight:800;
  line-height:1.4;
}

.heda-tr306 .tr-config-body p{
  margin-top:13px;
  font-size:14px;
  line-height:1.95;
}

.heda-tr306 .tr-config-foot{
  margin-top:auto;
  padding-top:17px;
  color:var(--tr-muted);
  font-size:12px;
  line-height:1.85;
}

/* ==========================================================
   05 / STRUCTURAL PHOTO DETAILS
========================================================== */

.heda-tr306 .tr-details{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:19px;
  align-items:stretch;
}

.heda-tr306 .tr-detail{
  display:flex;
  flex-direction:column;
  height:100%;
  min-width:0;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--tr-line);
}

.heda-tr306 .tr-detail-photo{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  aspect-ratio:1/1;
  padding:10px;
  background:#f8fafb;
}

.heda-tr306 .tr-detail-photo img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.heda-tr306 .tr-detail-body{
  flex:1;
  padding:25px 23px;
  border-top:1px solid var(--tr-line);
}

.heda-tr306 .tr-detail-index{
  display:block;
  margin-bottom:13px;
  color:#ba6830;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.2px;
}

.heda-tr306 .tr-detail h3{
  color:var(--tr-ink);
  font-size:19px;
  font-weight:800;
  line-height:1.4;
}

.heda-tr306 .tr-detail p{
  margin-top:12px;
  font-size:13px;
  line-height:1.95;
}

/* ==========================================================
   06 / MOBILE OPERATION & SAFETY
========================================================== */

.heda-tr306 .tr-mobility{
  padding:76px 0;
  background:var(--tr-navy);
}

.heda-tr306 .tr-mobility .tr-title{
  color:#fff;
}

.heda-tr306 .tr-mobility .tr-eyebrow{
  color:#c9dfed;
}

.heda-tr306 .tr-mobility .tr-lead{
  color:#cfdee8;
}

.heda-tr306 .tr-mobility-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.18);
}

.heda-tr306 .tr-mobility-card{
  min-width:0;
  padding:31px 26px;
  background:#2a455b;
}

.heda-tr306 .tr-mobility-card span{
  display:block;
  margin-bottom:18px;
  color:#f4b17d;
  font-size:28px;
  font-weight:800;
  line-height:1;
}

.heda-tr306 .tr-mobility-card h3{
  color:#fff;
  font-size:20px;
  font-weight:800;
  line-height:1.4;
}

.heda-tr306 .tr-mobility-card p{
  margin-top:13px;
  color:#d4e1e9;
  font-size:13px;
  line-height:1.95;
}

.heda-tr306 .tr-mobility-note{
  margin-top:22px;
  padding:20px 24px;
  border-left:3px solid var(--tr-orange);
  background:rgba(255,255,255,.08);
  color:#dbe7ed;
  font-size:13px;
  line-height:1.95;
}

/* ==========================================================
   07 / TIRE FITTING CONSIDERATIONS
========================================================== */

.heda-tr306 .tr-sizing{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

.heda-tr306 .tr-size-card{
  min-width:0;
  padding:29px 27px;
  border-top:3px solid var(--tr-blue);
  background:#fff;
}

.heda-tr306 .tr-size-card:nth-child(2){
  border-top-color:var(--tr-orange);
}

.heda-tr306 .tr-size-card span{
  display:block;
  margin-bottom:15px;
  color:#b26935;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.2px;
}

.heda-tr306 .tr-size-card h3{
  color:var(--tr-ink);
  font-size:20px;
  font-weight:800;
  line-height:1.45;
}

.heda-tr306 .tr-size-card p{
  margin-top:12px;
  font-size:14px;
  line-height:1.95;
}

/* ==========================================================
   08 / TIRE STORAGE WORKFLOW
========================================================== */

.heda-tr306 .tr-workflow{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}

.heda-tr306 .tr-work{
  min-width:0;
  padding:28px 24px;
  border:1px solid var(--tr-line);
  background:#fff;
}

.heda-tr306 .tr-work>span{
  display:block;
  margin-bottom:17px;
  color:var(--tr-orange);
  font-size:27px;
  font-weight:800;
  line-height:1;
}

.heda-tr306 .tr-work h3{
  color:var(--tr-ink);
  font-size:18px;
  font-weight:800;
  line-height:1.4;
}

.heda-tr306 .tr-work p{
  margin-top:12px;
  font-size:13px;
  line-height:1.95;
}

/* ==========================================================
   09 / TECHNICAL DATA
========================================================== */

.heda-tr306 .tr-spec{
  display:grid;
  grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);
  gap:43px;
  align-items:start;
}

.heda-tr306 .tr-spec-box{
  min-width:0;
  padding:29px 31px;
  background:#fff;
  border:1px solid var(--tr-line);
}

.heda-tr306 .tr-spec-box h3{
  margin-bottom:17px;
  color:var(--tr-ink);
  font-size:21px;
  font-weight:800;
}

.heda-tr306 .tr-spec-row{
  display:grid;
  grid-template-columns:minmax(0,.39fr) minmax(0,.61fr);
  gap:14px;
  padding:12px 0;
  border-bottom:1px solid var(--tr-line);
}

.heda-tr306 .tr-spec-row:last-child{
  border-bottom:0;
}

.heda-tr306 .tr-spec-row strong{
  color:#71838f;
  font-size:13px;
  line-height:1.85;
}

.heda-tr306 .tr-spec-row span{
  color:var(--tr-ink);
  font-size:13px;
  line-height:1.85;
  min-width:0;
}

/* ==========================================================
   10 / APPLICATIONS
========================================================== */

.heda-tr306 .tr-apps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

.heda-tr306 .tr-app{
  min-width:0;
  padding:26px 2px 12px;
  border-top:3px solid #bdcfdc;
}

.heda-tr306 .tr-app:nth-child(2){
  border-top-color:var(--tr-orange);
}

.heda-tr306 .tr-app>span{
  display:block;
  margin-bottom:13px;
  color:#b86934;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.2px;
}

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

.heda-tr306 .tr-app p{
  margin-top:12px;
  font-size:14px;
  line-height:1.95;
}

/* ==========================================================
   11 / RFQ
========================================================== */

.heda-tr306 .tr-rfq{
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:42px;
  align-items:start;
}

.heda-tr306 .tr-rfq-box{
  min-width:0;
  padding:29px 30px;
  background:#fff;
  border:1px solid var(--tr-line);
}

.heda-tr306 .tr-rfq-box h3{
  margin-bottom:18px;
  color:var(--tr-ink);
  font-size:21px;
  font-weight:800;
}

.heda-tr306 .tr-rfq-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 17px;
}

.heda-tr306 .tr-rfq-item{
  position:relative;
  padding:12px 0 12px 21px;
  border-bottom:1px solid var(--tr-line);
  font-size:13px;
  line-height:1.85;
}

.heda-tr306 .tr-rfq-item:before{
  content:"";
  position:absolute;
  left:2px;
  top:21px;
  width:8px;
  height:8px;
  background:var(--tr-orange);
}

/* ==========================================================
   12 / FAQ
========================================================== */

.heda-tr306 .tr-faq{
  border-top:1px solid var(--tr-line);
}

.heda-tr306 .tr-faq-row{
  display:grid;
  grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);
  gap:33px;
  padding:24px 0;
  border-bottom:1px solid var(--tr-line);
}

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

.heda-tr306 .tr-faq-row p{
  font-size:14px;
  line-height:1.95;
}

/* ==========================================================
   13 / NATIVE INQUIRY CTA
========================================================== */

.heda-tr306 .tr-cta-section{
  padding:41px 0 73px;
}

.heda-tr306 .tr-cta{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:35px;
  padding:45px;
  background:var(--tr-navy);
  border-left:5px solid var(--tr-orange);
}

.heda-tr306 .tr-cta-label{
  display:block;
  margin-bottom:13px;
  color:#c4d9e6;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.25px;
  text-transform:uppercase;
}

.heda-tr306 .tr-cta h2{
  color:#fff;
  font-size:clamp(26px,3vw,36px);
  font-weight:800;
  line-height:1.3;
}

.heda-tr306 .tr-cta p{
  margin-top:14px;
  color:#d2e0e9;
  font-size:14px;
  line-height:1.95;
}

.heda-tr306 a.tr306-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:195px;
  min-height:54px;
  margin:0 !important;
  padding:16px 27px !important;
  border:0 !important;
  border-radius:3px !important;
  background:#e97828 !important;
  background-image:none !important;
  color:#fff !important;
  font:800 13px/1.5 Arial,Helvetica,sans-serif !important;
  text-decoration:none !important;
  text-align:center !important;
  white-space:nowrap;
  opacity:1 !important;
  visibility:visible !important;
  box-shadow:none !important;
  cursor:pointer;
  transition:background-color .2s ease;
}

.heda-tr306 a.tr306-quote:hover{
  background:#bb581a !important;
  color:#fff !important;
}

.heda-tr306 a.tr306-quote:visited{
  color:#fff !important;
}

.heda-tr306 a.tr306-quote:focus-visible{
  outline:3px solid #fff;
  outline-offset:3px;
}

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

@media(max-width:1024px){

  .heda-tr306 .tr-hero-grid,
  .heda-tr306 .tr-spec,
  .heda-tr306 .tr-rfq{
    gap:28px;
  }

  .heda-tr306 .tr-hero h2{
    font-size:43px;
  }

  .heda-tr306 .tr-value{
    gap:30px;
  }

  .heda-tr306 .tr-mobility-card{
    padding:25px 20px;
  }

  .heda-tr306 .tr-cta{
    padding:36px 31px;
  }
}

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

@media(max-width:768px){

  .heda-tr306 .tr-wrap{
    width:calc(100% - 32px);
  }

  .heda-tr306 .tr-section{
    padding:57px 0;
  }

  .heda-tr306 .tr-title{
    font-size:31px;
  }

  .heda-tr306 .tr-heading{
    margin-bottom:27px;
  }

  .heda-tr306 .tr-hero-grid,
  .heda-tr306 .tr-value,
  .heda-tr306 .tr-spec,
  .heda-tr306 .tr-rfq{
    grid-template-columns:1fr;
  }

  .heda-tr306 .tr-hero-grid{
    padding:35px 0 45px;
    gap:27px;
  }

  .heda-tr306 .tr-hero h2{
    font-size:39px;
  }

  .heda-tr306 .tr-facts{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .heda-tr306 .tr-fact:nth-child(3){
    border-left:0;
  }

  .heda-tr306 .tr-fact:nth-child(n+3){
    border-top:1px solid var(--tr-line);
  }

  .heda-tr306 .tr-value{
    gap:26px;
  }

  .heda-tr306 .tr-configs{
    grid-template-columns:1fr;
    gap:18px;
  }

  .heda-tr306 .tr-details{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .heda-tr306 .tr-mobility{
    padding:57px 0;
  }

  .heda-tr306 .tr-mobility-grid{
    grid-template-columns:1fr;
  }

  .heda-tr306 .tr-sizing,
  .heda-tr306 .tr-apps{
    grid-template-columns:1fr;
    gap:17px;
  }

  .heda-tr306 .tr-workflow{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .heda-tr306 .tr-faq-row{
    grid-template-columns:1fr;
    gap:8px;
  }

  .heda-tr306 .tr-cta{
    grid-template-columns:1fr;
    gap:25px;
    padding:34px 28px;
  }

  .heda-tr306 a.tr306-quote{
    justify-self:start;
  }
}

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

@media(max-width:480px){

  .heda-tr306 .tr-wrap{
    width:calc(100% - 26px);
  }

  .heda-tr306 .tr-hero h2{
    font-size:34px;
  }

  .heda-tr306 .tr-hero-visual{
    padding:8px;
  }

  .heda-tr306 .tr-fact{
    padding:19px 12px;
  }

  .heda-tr306 .tr-fact strong{
    font-size:16px;
  }

  .heda-tr306 .tr-config-body{
    padding:23px;
  }

  .heda-tr306 .tr-details{
    grid-template-columns:1fr;
  }

  .heda-tr306 .tr-detail-body,
  .heda-tr306 .tr-mobility-card,
  .heda-tr306 .tr-size-card,
  .heda-tr306 .tr-work{
    padding:23px;
  }

  .heda-tr306 .tr-workflow{
    grid-template-columns:1fr;
  }

  .heda-tr306 .tr-spec-box,
  .heda-tr306 .tr-rfq-box{
    padding:21px;
  }

  .heda-tr306 .tr-spec-row,
  .heda-tr306 .tr-rfq-list{
    grid-template-columns:1fr;
  }

  .heda-tr306 .tr-cta{
    padding:29px 22px;
  }

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