:root{
  --bko-green:#34473c;
  --bko-sage:#7d8978;
  --bko-muted:#73776f;
  --bko-soft:#fafaf7;
}

.doors-page-hero{
  max-width:900px;
  margin:0 auto;
  padding:72px 24px 56px;
  text-align:center;
}

.doors-page-hero .eyebrow,
.doors-page-heading .eyebrow{
  color:var(--bko-sage);
  font-size:11px;
  letter-spacing:.18em;
}

.doors-page-hero h1{
  margin:12px 0 15px;
  color:var(--bko-green);
  font-size:52px;
  line-height:1.05;
  font-weight:300;
}

.doors-page-hero p{
  margin:0;
  color:var(--bko-muted);
  font-size:15px;
}

.doors-page-grid-wrap{
  width:min(1320px,calc(100% - 64px));
  margin:0 auto 100px;
}

.doors-page-heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:24px;
  margin-bottom:28px;
}

.doors-page-heading h2{
  margin:7px 0 0;
  color:var(--bko-green);
  font-size:34px;
  font-weight:300;
}

.doors-page-heading > p{
  margin:0 0 5px;
  color:var(--bko-muted);
  font-size:13px;
}

.doors-page-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:38px 24px;
}

.doors-range-card{
  color:inherit;
  text-decoration:none;
  display:block;
  border-radius:8px;
  transition:transform .2s ease, box-shadow .2s ease;
}

.doors-range-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 32px rgba(32,42,37,.1);
}

.doors-range-image{
  height:320px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bko-soft);
  border-radius:8px;
}

.doors-range-image img{
  display:block;
  max-width:72%;
  max-height:260px;
  object-fit:contain;
}

.doors-range-copy{
  padding-top:14px;
}

.doors-range-kicker{
  color:var(--bko-sage);
  font-size:9px;
  letter-spacing:.16em;
}

.doors-range-copy h2{
  margin:6px 0 7px;
  color:var(--bko-green);
  font-size:25px;
  font-weight:300;
}

.doors-range-copy p{
  margin:0 0 8px;
  color:var(--bko-muted);
  font-size:12px;
}

.doors-range-link{
  color:#565b56;
  font-size:12px;
}

@media(max-width:1050px){
  .doors-page-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:800px){
  .doors-page-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .doors-page-grid-wrap{width:calc(100% - 32px)}
  .doors-page-grid{grid-template-columns:1fr}
}








/* v158 — Door popup deliberately uses the exact existing cabinet-modal design */
#doorModal .cabinet-modal-image img{
  width:auto;
  height:auto;
  max-width:72%;
  max-height:82%;
  object-fit:contain;
}
#doorModal .cabinet-modal-total strong{
  max-width:310px;
  text-align:right;
}


/* v159 — cleaner, consistent door cards */
.doors-page-grid{
  align-items:start;
}

.doors-range-card{
  display:block;
}

.doors-range-image{
  height:340px !important;
  padding:0 !important;
  background:#fff !important;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.doors-range-image img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center !important;
  display:block;
  transform:none !important;
  background:#fff;
}

.doors-range-card:hover .doors-range-image img{
  transform:none !important;
}

.doors-range-copy{
  padding-top:17px !important;
}

.doors-range-copy h2{
  margin-top:6px !important;
}

/* Keep the card rows visually even */
@media(min-width:801px){
  .doors-range-copy{
    min-height:118px;
  }
}

.door-placeholder-price-note-v171{
  margin:8px 0 0;
  color:#85857f;
  font-size:10px;
  line-height:1.45;
}