/* Generated by vitavia-instructions/tools/export_storefront.py. Do not edit. */
.vg{--green: #1d5b3a;
  --green-2: #2f7d4f;
  --green-soft: #eaf3ec;
  --amber: #a65300;
  --amber-soft: #fdf1e1;
  --ink: #18221d;
  --muted: #56655c;
  --line: #d5ded8;
  --paper: #ffffff;
  --page: #f3f5f2;
  --radius: 10px;
  --font: "Inter", "Segoe UI", system-ui, sans-serif;
  --display: "Archivo", "Inter", "Segoe UI", sans-serif;}
.vg, .vg *{box-sizing: border-box;}
.vg{-webkit-text-size-adjust: 100%;}
.vg{margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 17px/1.55 var(--font);}
.vg img{max-width: 100%; display: block;}
.vg h1, .vg h2, .vg h3{font-family: var(--display); line-height: 1.1; margin: 0;}
.vg a{color: var(--green);}
.vg .step-num.long{font-size: 34px;}
.vg .topbar{position: sticky; top: 0; z-index: 10;
  background: #fff; color: var(--ink); border-bottom: 3px solid var(--green);
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between;
  padding: 10px 16px;}
.vg .topbar .brand img{height: 26px; width: auto;}
.vg .topbar .brand-sub{font: 600 14px var(--font); color: var(--muted); margin-right: auto;}
.vg .cover-logo img{height: 34px; width: auto; margin-bottom: 18px;}
.vg .step{position: relative;}
.vg .step-logo{position: absolute; top: 52px; right: 32px; height: 16px; width: auto;}
.vg .size-picker{display: flex; gap: 6px; align-items: center; font-size: 14px;}
.vg .size-picker button{font: 600 15px var(--font); border: 2px solid var(--green); background: transparent; color: var(--green);
  border-radius: 999px; padding: 6px 14px; cursor: pointer; min-height: 40px;}
.vg .size-picker button[aria-pressed="true"]{background: var(--green); color: #fff;}
.vg .stepnav{display: flex; gap: 6px; overflow-x: auto; padding: 10px 16px; background: var(--paper);
  border-bottom: 1px solid var(--line); position: sticky; top: 60px; z-index: 9;}
.vg .stepnav a{flex: none; text-decoration: none; font: 600 14px var(--font); color: var(--green);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; white-space: nowrap;}
.vg .wrap{max-width: 920px; margin: 0 auto; padding: 0 16px 64px;}
.vg .sheet{background: var(--paper); border-radius: var(--radius); margin: 24px 0; padding: 32px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  scroll-margin-top: 120px;}
.vg .cover{text-align: left;}
.vg .cover .eyebrow{color: var(--green-2); font: 700 14px var(--font); letter-spacing: .14em; text-transform: uppercase;}
.vg .cover h1{font-size: 64px; color: var(--green); margin: 8px 0 4px;}
.vg .cover .sub{display: block; font-family: var(--display); font-size: 30px; line-height: 1.1; color: var(--ink); font-weight: 600; margin: 8px 0 0;}
.vg .cover-art{margin: 24px auto; width: 100%; max-width: 420px;}
.vg .facts{display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 12px; margin-top: 12px;}
.vg .fact{background: var(--green-soft); border-radius: var(--radius); padding: 14px 16px;}
.vg .fact b{display: block; font: 800 30px/1.1 var(--display); color: var(--green);}
.vg .fact span{font-size: 14px; color: var(--muted);}
.vg .fact b.long{font-size: 21px; white-space: nowrap;}
.vg .cover-foot{margin-top: 28px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px;}
.vg .kicker{font: 700 13px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--green-2);}
.vg .sheet > h2{font-size: 34px; color: var(--green); margin: 4px 0 18px;}
.vg h3{font-size: 20px; margin: 22px 0 10px;}
.vg .rules{list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; counter-reset: r;}
.vg .rules li{counter-increment: r; position: relative; padding: 12px 14px 12px 54px; border: 1px solid var(--line);
  border-radius: var(--radius); font-weight: 500; break-inside: avoid;}
.vg .rules li::before{content: counter(r); position: absolute; left: 12px; top: 10px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--green); color: #fff; font: 800 16px/30px var(--display); text-align: center;}
.vg .checklist{list-style: none; padding: 0; margin: 0;}
.vg .checklist li{position: relative; padding: 6px 0 6px 30px; border-bottom: 1px solid var(--line);}
.vg .checklist li::before{content: ""; position: absolute; left: 2px; top: 11px; width: 14px; height: 14px; border: 2px solid var(--green); border-radius: 3px;}
.vg .frames{display: flex; gap: 18px; margin-top: 12px; flex-wrap: wrap;}
.vg .frames div{display: flex; align-items: center; gap: 10px; font-size: 15px;}
.vg .frames i{width: 38px; height: 28px; border: 2px solid var(--ink); display: inline-block;}
.vg .frames i.double{outline: 2px solid var(--ink); outline-offset: 2px;}
.vg .route{display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 8px;}
.vg .route a, .vg .route div.r{text-decoration: none; color: inherit; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; break-inside: avoid;}
.vg .route img{height: 86px; width: 100%; object-fit: contain; margin-bottom: 6px;}
.vg .route b{color: var(--green); font-family: var(--display);}
.vg .route span{display: block; font-size: 13px; line-height: 1.3;}
.vg .parts-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;}
.vg .part-card{border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px 8px; position: relative; break-inside: avoid;}
.vg .part-card img{height: 62px; width: 100%; object-fit: contain;}
.vg .part-card .no{font: 800 18px var(--display);}
.vg .part-card .nm{font-size: 12.5px; line-height: 1.25; color: var(--muted); min-height: 2.5em;}
.vg .part-card .meta{display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; margin-top: 2px;}
.vg .part-card .qty{font: 800 18px var(--display); color: var(--green);}
.vg .part-card .tick{position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border: 2px solid var(--green); border-radius: 4px;}
.vg .parts-note{font-size: 14px; color: var(--muted); margin: 0 0 12px;}
.vg .step-head{display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; margin-bottom: 16px;}
.vg .step-num{width: 76px; height: 76px; border-radius: 18px; background: var(--green); color: #fff;
  font: 800 46px/76px var(--display); text-align: center;}
.vg .step-head h2{font-size: 34px; color: var(--green);}
.vg .step-head p{margin: 6px 0 0; font-size: 18px;}
.vg .progress{display: flex; gap: 5px; margin-bottom: 14px;}
.vg .progress span{flex: 1; height: 6px; border-radius: 3px; background: var(--line);}
.vg .progress span.done{background: var(--green-2);}
.vg .progress span.now{background: var(--green);}
.vg .need{background: var(--green-soft); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 18px; break-inside: avoid;}
.vg .need h3{margin: 0 0 8px; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--green);}
.vg .need-list{display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px;}
.vg .need-chip{background: #fff; border-radius: 8px; padding: 4px 6px; display: grid; grid-template-columns: 46px 1fr; gap: 6px; align-items: center;}
.vg .need-chip img{height: 34px; width: 46px; object-fit: contain;}
.vg .need-chip b{font: 800 15px var(--display); display: block;}
.vg .need-chip span{font-size: 13px; color: var(--muted);}
.vg figure{margin: 0;}
.vg .lead{display: grid; grid-template-columns: 280px 1fr; gap: 16px; align-items: start; margin-bottom: 16px;}
.vg .lead > :only-child{grid-column: 1 / -1;}
.vg .lead .need, .vg .lead .overview, .vg .lead .base-dims{margin-bottom: 0;}
.vg .lead .need-list{grid-template-columns: 1fr 1fr;}
.vg .lead .base-dims{grid-template-columns: 1fr;}
.vg .after{display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin: 0 0 16px; align-items: start; break-inside: avoid;}
.vg .after > :only-child{grid-column: 1 / -1;}
.vg .after .callouts, .vg .after .videos{margin-top: 0;}
.vg .after .videos{flex-direction: column;}
.vg .overview{border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; margin-bottom: 18px; break-inside: avoid;}
.vg .overview img{max-height: 520px; margin: 0 auto; width: auto;}
.vg .overview figcaption{font-size: 13px; color: var(--muted); text-align: center; margin-top: 6px;}
.vg .items{display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;}
.vg .item{display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; break-inside: avoid;}
.vg .item .pic img{width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 6px;}
.vg .item .tag{display: inline-block; font: 800 22px var(--display); color: var(--green); margin-right: 8px;}
.vg .item .outside{display: inline-block; font: 700 11px var(--font); letter-spacing: .06em; text-transform: uppercase;
  background: var(--ink); color: #fff; border-radius: 4px; padding: 2px 7px; vertical-align: 4px;}
.vg .item p{margin: 4px 0 0; font-size: 16px; line-height: 1.45;}
.vg .item.text-only{grid-column: 1 / -1; flex-direction: row; gap: 14px; align-items: baseline;}
.vg .item.text-only p{margin: 0;}
.vg .item.key{grid-column: 1 / -1; background: var(--green); color: #fff; border-color: var(--green); padding: 14px 18px;}
.vg .item.key .tag{color: #fff; font-size: 15px; letter-spacing: .08em; text-transform: uppercase;}
.vg .item.key p{font-size: 18px; font-weight: 500;}
.vg .callouts{display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; break-inside: avoid;}
.vg .callout{border-radius: var(--radius); padding: 12px 14px; border-left: 6px solid;}
.vg .callout h4{margin: 0 0 4px; font: 700 13px var(--font); letter-spacing: .1em; text-transform: uppercase;}
.vg .callout p{margin: 0; font-size: 16px;}
.vg .callout.tip{background: var(--green-soft); border-color: var(--green-2);}
.vg .callout.tip h4{color: var(--green);}
.vg .callout.watch{background: var(--amber-soft); border-color: var(--amber);}
.vg .callout.watch h4{color: var(--amber);}
.vg .videos{display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; break-inside: avoid;}
.vg .video{display: flex; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; text-decoration: none; color: inherit;}
.vg .video .qr svg{width: 74px; height: 74px; display: block;}
.vg .video b{display: block; font-size: 15px;}
.vg .video span{font-size: 13px; color: var(--muted);}
.vg .video .play{width: 40px; height: 40px; border-radius: 50%; background: var(--green); flex: none; position: relative;}
.vg .video .play::after{content: ""; position: absolute; left: 15px; top: 12px; border-style: solid; border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #fff;}
.vg table.data{border-collapse: collapse; width: 100%; font-size: 15px; margin-top: 8px; break-inside: avoid;}
.vg table.data th, .vg table.data td{border-bottom: 1px solid var(--line); padding: 7px 8px; text-align: left;}
.vg table.data th{font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);}
.vg table.data td.n{font-weight: 700; color: var(--green);}
.vg .base-dims{display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; align-items: center;}
.vg .base-dims svg{width: 100%; height: auto;}
.vg .related{font-size: 15px; margin: 12px 0 0;}
.vg .related-box{border: 1px dashed var(--green-2); border-radius: var(--radius); padding: 10px 14px; margin: 0 0 16px; break-inside: avoid;}
.vg .related-box h4{margin: 0 0 4px; font: 700 13px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--green);}
.vg .related-box ul{margin: 0; padding-left: 18px; font-size: 15px;}
.vg .glass-block{break-inside: avoid;}
.vg .glazing-note{display: none; margin-top: 16px; border-radius: var(--radius); padding: 12px 14px; border-left: 6px solid var(--amber); background: var(--amber-soft);}
.vg .glazing-note h4{margin: 0 0 4px; font: 700 13px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--amber);}
.vg .glazing-note p{margin: 0; font-size: 16px;}
.vg[data-glazing="toughened"] .glazing-note--toughened, .vg[data-glazing="polycarbonate"] .glazing-note--polycarbonate{display: block;}
.vg .toughened-glazing{display: none; margin-top: 16px; border: 2px solid var(--green); border-radius: var(--radius); padding: 14px 16px; background: #fff;}
.vg .toughened-glazing h3{color: var(--green); margin: 0 0 6px;}
.vg .toughened-glazing > p{margin: 0 0 12px; font-size: 16px;}
.vg .toughened-plan{margin: 14px 0 0;}
.vg .toughened-plan img{display: block; width: 100%; max-width: 720px; height: auto; margin: 0 auto; border: 1px solid var(--line); border-radius: 8px;}
.vg .toughened-plan figcaption{font-size: 14px; color: var(--muted); margin-top: 6px; text-align: center;}
.vg[data-glazing="toughened"] .toughened-glazing{display: block;}
.vg[data-glazing="toughened"] .hort-only{display: none !important;}
.vg .finish-cols{display: grid; grid-template-columns: 1fr 1fr; gap: 24px;}
.vg .small{font-size: 13px; color: var(--muted);}
.vg .print-only{display: none;}
@media (max-width: 860px){.vg .items{grid-template-columns: 1fr 1fr;}}
@media (max-width: 680px){.vg{font-size: 16px;}
.vg .sheet{padding: 20px 16px; margin: 16px 0;}
.vg .cover h1{font-size: 44px;}
.vg .cover .sub{font-size: 22px;}
.vg .facts, .vg .rules, .vg .callouts, .vg .finish-cols, .vg .base-dims, .vg .lead, .vg .after{grid-template-columns: 1fr;}
.vg .route, .vg .parts-grid{grid-template-columns: repeat(2, 1fr);}
.vg .items{grid-template-columns: 1fr;}
.vg .item .pic img{max-width: 340px; margin: 0 auto;}
.vg .step-num{width: 58px; height: 58px; font-size: 34px; line-height: 58px; border-radius: 14px;}
.vg .step-head h2{font-size: 26px;}
.vg .stepnav{top: 98px;}
.vg .step-logo{display: none;}}
@media print{.vg{background: #fff; font-size: 11pt;}
.vg .web-only{display: none !important;}
.vg .print-only{display: block;}
.vg .wrap{max-width: none; padding: 0;}
.vg .sheet{box-shadow: none; border-radius: 0; margin: 0; padding: 0; break-before: page;}
.vg .sheet:first-child{break-before: auto;}
.vg .cover h1{font-size: 46pt;}
.vg .cover .sub{font-size: 20pt;}
.vg .sheet > h2, .vg .step-head h2{font-size: 24pt;}
.vg .step-num{width: 20mm; height: 20mm; font-size: 30pt; line-height: 20mm; border-radius: 5mm;}
.vg .step-head p{font-size: 12.5pt;}
.vg .items{grid-template-columns: repeat(3, 1fr); gap: 3mm;}
.vg .item{padding: 2.5mm; gap: 1.5mm;}
.vg .item .tag{font-size: 15pt;}
.vg .item p{font-size: 11pt;}
.vg .item.key p{font-size: 12pt;}
.vg .item.text-only{padding: 2mm 3mm;}
.vg .item.text-only .tag{font-size: 12pt;}
.vg .item.text-only p{font-size: 10.5pt;}
.vg .first-step .lead .overview img{max-height: 62mm;}
.vg .after{grid-template-columns: 1fr;}
.vg .after .callouts{grid-template-columns: 1fr 1fr;}
.vg .after .videos{flex-direction: row; flex-wrap: wrap; gap: 2mm;}
.vg .video{flex: 1 1 42mm; padding: 1.5mm 2.5mm; gap: 2.5mm;}
.vg .video .qr svg{width: 15mm; height: 15mm;}
.vg .video b{font-size: 9pt;}
.vg .video span{font-size: 8pt;}
.vg .related-box{display: none;}
.vg .base-dims svg{max-height: 38mm;}
.vg .overview img{max-height: 105mm;}
.vg .cover-art{max-width: 40%; margin: 4mm auto;}
.vg .cover-logo img{height: 11mm; margin-bottom: 5mm;}
.vg .step-logo{top: 5mm; right: 0; height: 5mm;}
.vg .lead{grid-template-columns: 62mm 1fr; gap: 4mm; margin-bottom: 4mm;}
.vg .lead .need-list{grid-template-columns: 1fr 1fr;}
.vg .lead .overview img{max-height: 92mm;}
.vg .after{gap: 3mm; margin: 0 0 4mm;}
.vg .after .callouts{grid-template-columns: 1fr; gap: 2mm;}
.vg .video .qr svg{width: 20mm; height: 20mm;}
.vg .step-head{margin-bottom: 3mm;}
.vg .need{padding: 2.5mm 3mm;}
.vg .need-chip img{height: 8mm; width: 11mm;}
.vg .need-chip{grid-template-columns: 11mm 1fr; padding: 1mm 1.5mm;}
.vg .route{margin-top: 3mm;}
.vg .callout p{font-size: 11pt;}
.vg .route{grid-template-columns: repeat(5, 1fr); gap: 2mm;}
.vg .route a{padding: 1.5mm;}
.vg .route img{height: 15mm;}
.vg .route span{font-size: 8.5pt;}
.vg .parts-grid{grid-template-columns: repeat(6, 1fr); gap: 1.5mm;}
.vg .part-card{padding: 1mm 1.5mm 1.5mm;}
.vg .part-card img{height: 11mm;}
.vg .part-card .nm{min-height: 0; font-size: 8pt;}
.vg .part-card .no, .vg .part-card .qty{font-size: 12pt;}
.vg .fact b.long{font-size: 14pt;}
.vg a{color: inherit; text-decoration: none;}
.vg, .vg *{-webkit-print-color-adjust: exact; print-color-adjust: exact;}}