.dimension-drawing {
  --drawing-paper:#f1f1f1;
  --drawing-door:#fff;
  --drawing-edge:#e3e3e3;
  --drawing-line:#626262;
  --drawing-ink:#282828;
  --drawing-metal:#e3e3e3;
  --drawing-hardware:#282828;
  aspect-ratio:4/3;
  background:var(--drawing-paper);
  border-radius:4px;
  overflow:hidden;
}
.dimension-drawing .door-plane{fill:var(--drawing-door);stroke:var(--drawing-line);stroke-width:1.5}
.dimension-drawing .frame-plane,.dimension-drawing .hardware-base{fill:var(--drawing-metal);stroke:var(--drawing-line);stroke-width:1.5}
.dimension-drawing .hardware{fill:var(--drawing-hardware);stroke:var(--drawing-line);stroke-width:1.5}
.dimension-drawing .edge-plate{fill:var(--drawing-line)}
.dimension-drawing .door-detail{fill:none;stroke:var(--drawing-line);stroke-width:1;opacity:.5}
.dimension-drawing .hardware-ring,.dimension-drawing .frame-detail,.dimension-drawing .leader-line{fill:none;stroke:var(--drawing-line)}
.dimension-drawing .centre-line{stroke:var(--drawing-line);opacity:.6}
.dimension-drawing .surface-line{stroke:var(--drawing-ink)}
.dimension-drawing .dimension-line{stroke:var(--drawing-ink);stroke-width:2}
.dimension-drawing .dimension-tip{fill:var(--drawing-ink)}
.dimension-drawing .dimension-extension{stroke:var(--drawing-line);stroke-width:1}
.dimension-drawing .dimension-value{fill:var(--drawing-ink);font:500 22px Inter,sans-serif;letter-spacing:0}
.dimension-drawing .drawing-label{fill:var(--drawing-ink);font:400 19px Inter,sans-serif;letter-spacing:0}
.dimension-drawing .screw{fill:var(--drawing-line)}
.dimension-drawing .handle-line{stroke:var(--drawing-hardware)}
.dimension-drawing .photo-focus{fill:none;stroke:#ffc846;stroke-width:4}
.dimension-drawing .grip-line{stroke:#ffc846;stroke-width:5;fill:none}
.dimension-grid{gap:40px 32px}
.dimension-grid .dimension-figure{display:grid;grid-template-rows:auto auto auto 1fr;align-content:start}
.dimension-heading{align-items:flex-start}
.dimension-heading>span{background:transparent;color:#626262;justify-content:start;width:28px;flex-basis:28px}
.dimension-heading h3{font-size:22px!important;line-height:1.3!important}
.dimension-view{margin:8px 0 16px!important}
.dimension-figure figcaption{max-width:none;font-size:16px}
.dimension-figure figcaption strong{font-size:18px}
.photo-view-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.photo-view-grid .dimension-figure{border:0;padding-top:0}
.photo-view-grid svg{margin-top:16px}
.dimension-shapes{gap:32px}
.dimension-shapes .dimension-drawing{max-width:100%;height:210px}
.measurement-photo{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;border-radius:4px}
.guide-photo-panel{position:relative;aspect-ratio:1;overflow:hidden;margin-top:16px;border-radius:4px}
.guide-photo-panel img{position:absolute;top:0;left:0;width:300%;max-width:none;height:100%;object-fit:fill}
.guide-photo-panel.panel-1 img{left:-100%}
.guide-photo-panel.panel-2 img{left:-200%}
.guide-photo-panel.guide-single-photo img{position:static;width:100%;height:100%;object-fit:cover}
.guide-photo-drawing{display:block;width:100%;aspect-ratio:24/25;background:#f1f1f1;border-radius:4px;overflow:hidden}
.guide-photo-drawing .extension{stroke:#626262;stroke-width:1;stroke-dasharray:2 4;stroke-linecap:round;fill:none;vector-effect:non-scaling-stroke}
.guide-photo-drawing .arrow,.guide-photo-drawing .ticks{stroke:#282828;stroke-width:1.1;fill:none;vector-effect:non-scaling-stroke}
.guide-photo-drawing .photo-dimension text{fill:#282828;font:400 30px Inter,sans-serif;letter-spacing:0;paint-order:stroke;stroke:#f1f1f1;stroke-width:2;stroke-linejoin:round}
.dimension-grid .dimension-figure{grid-template-rows:auto auto auto 1fr;gap:0}
.dimension-grid{max-width:1040px;margin-inline:auto}
.guide-grip-note{margin-top:28px}
#replacement .hg-split{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:36px;align-items:center}
#replacement .guide-photo-drawing{aspect-ratio:3/2}
#replacement .hg-showcase-copy{margin-top:0}
@media(max-width:800px){#replacement .hg-split{grid-template-columns:1fr;gap:24px}}
.guide-image-note{display:block;font-size:13px!important;line-height:1.5;margin-top:14px;color:#626262}
.guide-installed-photo{aspect-ratio:4/3;overflow:hidden;position:relative}
.guide-installed-photo img{height:auto;width:190%;max-width:none;position:absolute;left:-45%;top:50%;transform:translateY(-50%);clip-path:inset(0 33.333%)}
#replacement .measurement-photo{aspect-ratio:3/2;max-height:740px;object-fit:contain}
#replacement .hg-showcase-copy{max-width:800px}
.guide-real-measurements{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:16px}
.guide-real-measurements img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:contain;border-radius:4px}
.guide-real-measurements p{font-size:14px;line-height:1.5;margin:12px 0 0}
@media(max-width:600px){.guide-real-measurements{grid-template-columns:1fr;gap:24px}}
html[data-theme="dark"] .dimension-drawing{
  --drawing-paper:#282828;--drawing-door:#282828;--drawing-edge:#626262;
  --drawing-line:#e3e3e3;--drawing-ink:#fff;--drawing-metal:#626262;--drawing-hardware:#000;
}
html[data-theme="dark"] body.calm-site main .dimension-drawing{background:#282828!important}
html[data-theme="dark"] body.calm-site main .dimension-heading>span{background:transparent!important;color:#ffc846!important}
html[data-theme="dark"] .dimension-drawing .dimension-line{stroke:#ffc846}
html[data-theme="dark"] .dimension-drawing .dimension-tip{fill:#ffc846}
html[data-theme="dark"] .dimension-figure,html[data-theme="dark"] .dimension-shapes{border-color:#626262}
.installation-planning-note{margin-top:24px;padding:20px 0;border-top:1px solid #e3e3e3}
@media(max-width:720px){
  .photo-view-grid{grid-template-columns:1fr;gap:28px}
  .photo-view-grid .dimension-drawing{max-height:270px}
  .dimension-heading h3{font-size:21px!important}
  .dimension-grid{gap:32px}
}
@media print{
  html[data-theme] body.calm-site,html[data-theme] body.calm-site main{background:#fff!important;color:#000!important}
  .site-header,.site-footer,.market-bar,.product-navigation,.hg-actions{display:none!important}
  html[data-theme] body.calm-site main *{color:#000!important;box-shadow:none!important}
  html[data-theme] body.calm-site main section{background:#fff!important}
  .hg-shell{width:100%!important;max-width:none!important}
  .hg-section{padding:22px 0!important}
  .hg-compare-wrap{overflow:visible!important}
  .hg-compare-table{min-width:0!important;table-layout:fixed;font-size:10px}
  html[data-theme] body.calm-site main .hg-compare-table th{background:#e3e3e3!important;color:#000!important}
  .hg-compare-table td,.hg-compare-table th{padding:8px!important}
  .dimension-figure,.hg-card,tr{break-inside:avoid}
  .dimension-drawing{--drawing-door:#fff;--drawing-line:#626262;--drawing-ink:#282828;--drawing-metal:#e3e3e3;--drawing-hardware:#282828}
  html[data-theme] body.calm-site main .dimension-drawing{background:#fff!important}
}