/* The new site header + footer, scoped so they also work on pages that still load the
   old roofbrands.co.za stylesheet (the estimator). Same look as header/footer in style.css. */
.site-header, .site-footer{ --teal:#20555F; --off:#EDECEC; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; line-height:1.5; }
.site-header *, .site-footer *{ box-sizing:border-box; }
.site-header{ border-bottom:1px solid #e4e4e1; position:sticky; top:0; background:#fff; z-index:50; }
.site-header .sh-wrap{ max-width:1080px; margin:0 auto; padding:0 20px; display:flex; align-items:center; justify-content:space-between; height:72px; }
.site-header img{ height:38px; width:auto; display:block; }
.site-header nav{ display:flex; gap:26px; font-size:14.5px; font-weight:600; align-items:center; }
.site-header nav a{ font-size:14.5px !important; font-weight:600 !important; font-family:inherit !important; padding:6px 0; border-bottom:2px solid transparent; color:#3d4749; text-decoration:none; }
.site-header nav a:hover, .site-header nav a.active{ color:var(--teal); border-color:var(--teal); }
.site-header nav a.sh-cta{ font-size:14px !important; padding:9px 18px; margin-left:4px; border:1.5px solid var(--teal); border-radius:8px; background:var(--teal); color:var(--off); font-size:14px; }
.site-header nav a.sh-cta:hover, .site-header nav a.sh-cta.active{ color:var(--off); opacity:.9; }
.site-header .sh-menu{ display:none; background:none; border:1.5px solid var(--teal); color:var(--teal); border-radius:8px; padding:8px 12px; font:inherit; font-weight:600; cursor:pointer; }
@media (max-width:860px){
  .site-header .sh-menu{ display:block; }
  .site-header nav{ display:none; position:absolute; top:72px; left:0; right:0; background:#fff; flex-direction:column; align-items:stretch; gap:0; border-bottom:1px solid #e4e4e1; padding:8px 20px 14px; }
  .site-header nav.open{ display:flex; }
  .site-header nav a{ padding:12px 0; border-bottom:1px solid #eee; }
  .site-header nav a.sh-cta{ margin:12px 0 0; text-align:center; padding:13px 24px; }
}
.site-footer{ padding:28px 0; font-size:13.5px; color:#3d4749; border-top:1px solid #e4e4e1; }
.site-footer .sh-wrap{ max-width:1080px; margin:0 auto; padding:0 20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.site-footer a{ color:inherit; }

/* Cart link in the header (added by site.js) */
.cart-link{ display:inline-flex; align-items:center; gap:6px; }
.cart-link .cart-count{ background:#00AEEF; color:#062b33; border-radius:11px; min-width:20px; height:20px; padding:0 6px; font-size:12px; font-weight:800; display:inline-grid; place-items:center; line-height:1; }
@media (max-width:860px){ .cart-link{ display:flex; } }