/* ============================================
   SHARED ACROSS EVERY CATALOGUE PAGE
   Nav bar, slide-out drawer, responsive rules, print rules.
   ============================================ */

:root {
  --navy: #1c3a52;
  --navy-light: #2f6fa0;
  --navy-extra-light: #86b7db;
  --orange: #e8622c;
  --paper: #ffffff;
  --ink: #2b2f38;
  --border: #dde2e6;
}

* { box-sizing: border-box; }
body {
  font-family: Arial, sans-serif; /* owner's choice 2026-10-26 - was 'Helvetica Neue' first, which only some devices/browsers have */
  color: var(--ink);
  background: #fff;
  margin: 0;
}

/* ---- Top bar (visible on screen, hidden in print) ---- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--navy);
  color: #fff;
  padding: 14px 20px;
}
.topbar .brand {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.4px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar .print-btn,nav .print-btn {
  background: var(--orange)!important;
  color: #fff!important;
  border: none!important;
  font-size: 12px!important;
  font-weight: 700!important;
  padding: 8px 14px!important;
  border-radius: 4px!important;
  cursor: pointer!important;
  letter-spacing: 0.3px!important;
  width:160px!important;
  text-align:center!important;
  margin:20px 20px 12px 20px!important;
  text-decoration: none!important;
}
.hamburger {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  margin: 0 10px 0 -4px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0;
}
.hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background: #fff;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.topbar-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

@media screen and (max-width: 520px) {
  /* At narrow widths the topbar's own "Print this page" button (not the
     roomier drawer link sharing this class) needs to shrink to its content
     instead of keeping its desktop-sized fixed width + margins — otherwise
     it and the brand title crowd out the hamburger, which is the only way
     back to the nav on a page with no other way to reach the drawer. */
  .topbar .print-btn {
    width: auto !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    font-size: 11px !important;
  }
  .topbar .brand { font-size: 13px; }
}

/* ---- Slide-out drawer ---- */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 28, 38, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 199;
}
.drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.drawer {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 320px;
  max-width: 82vw;
  background: #fff;
  box-shadow: 2px 0 18px rgba(0,0,0,0.18);
  transform: translateX(-100%);
  transition: transform 0.28s ease;
  z-index: 200;
  overflow-y: auto;
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  background: var(--navy);
  color: #fff;
  padding: 18px 20px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.drawer-head .drawer-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
}
.drawer nav {
  padding: 10px 0 120px 0;
}
.drawer .section-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #97a0a8;
  padding: 14px 20px 6px 20px;
}
.drawer a {
  display: block;
  padding: 10px 20px;
  font-size: 13.5px;
  color: var(--ink);
  text-decoration: none;
  border-left: 3px solid transparent;
}
.drawer a:hover {
  background: #f4f6f7;
  border-left-color: var(--orange);
  color: var(--navy);
}
.drawer a.current {
  border-left-color: var(--orange);
  background: #f4f6f7;
  font-weight: 700;
  color: var(--navy);
}

.drawer .section-items a {
  padding-left: 30px;
  font-size: 13px;
  color: #4a5158;
}
.drawer .section-items a:hover,
.drawer .section-items a.current {
  color: var(--navy);
}

.drawer .nav-section { }
.drawer .section-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  cursor: pointer;
  padding: 14px 20px 6px 20px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #97a0a8;
}
.drawer .section-toggle:hover { color: var(--navy); }
.drawer .section-toggle .chev {
  font-size: 10px;
  color: #b7bec5;
  transition: transform 0.2s ease;
}
.drawer .section-toggle[aria-expanded="true"] .chev { transform: rotate(90deg); }
.drawer .section-items {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.drawer .section-items.open { max-height: 6000px; }

.drawer-search {
  padding: 10px 20px 6px 20px;
}
.drawer-search input {
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #f4f6f7;
  color: var(--ink);
}
.drawer-search input:focus {
  outline: none;
  border-color: var(--navy-light);
  background: #fff;
}
.drawer-search-empty {
  font-size: 12px;
  color: #8a9099;
  padding: 10px 4px 0 4px;
}
.drawer a.nav-hidden,
.drawer .nav-section.nav-hidden {
  display: none !important;
}

/* ---- Page shell (shared content wrapper for product-style pages) ---- */
.page-shell {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 44px 40px 44px;
}

.page-nav {
  position: sticky;
  bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: 900px;        /* matches .page-shell so it stops growing on wide screens */
  margin: 0 auto;
  padding: 14px 44px;
}
.page-nav-btn {
  flex: 0 0 auto;
  max-width: 42%;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 13.5px;
  padding: 12px 18px;
  border: none;
  border-radius: 6px;
  background: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s ease;
}
.page-nav-btn:hover { background: var(--navy-light); }
.page-nav-count { font-size: 11px; font-weight: 700; letter-spacing: 0.3px; color: #8a9099; flex: 1; text-align: center; }
.page-nav-spacer { flex: 0 0 auto; width: 1px; }
@media (max-width: 460px) { .page-nav-btn { max-width: 34%; font-size: 12px; padding: 10px 12px; } }

.breadcrumb {
  font-size: 11.5px;
  color: #8a9099;
  margin: 0 0 14px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.breadcrumb a { color: #8a9099; text-decoration: none; }
.breadcrumb a:hover { color: var(--navy-light); text-decoration: underline; }
.breadcrumb .sep { color: #c7ccd1; }
.breadcrumb .current { color: var(--navy); font-weight: 700; }

/* Page-level search box, right-aligned on the breadcrumb row. .breadcrumb
   is already flex, so pushing this one child to the far right with
   margin-left:auto does the job — no floats needed, and it naturally
   wraps under the breadcrumb on narrow screens along with everything
   else in the row. */
.breadcrumb .page-search { margin-left: auto; position: relative; }
.breadcrumb .page-search input {
  height: 35px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--navy);
  border: 1px solid #94a09c;
  border-radius: 5px;
  padding: 0 34px 0 12px;
  width: 280px;
  box-sizing: border-box;
  /* magnifier icon on the right */
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a9099' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cline x1='15.5' y1='15.5' x2='21' y2='21'/%3E%3C/svg%3E") no-repeat right 11px center;
}
.breadcrumb .page-search input:focus {
  outline: none;
  border-color: var(--navy-light);
}
.page-search-results {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  width: 340px;
  max-height: 400px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #d7dedb;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(20, 30, 40, 0.14);
  z-index: 95;
  text-align: left;
}
.page-search-results a {
  display: block;
  padding: 8px 12px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid #f0f2f3;
}
.page-search-results a:last-child { border-bottom: none; }
.page-search-results a:hover,
.page-search-results a.active { background: #f5f7f8; }
.page-search-results .psr-model {
  display: block;
  font-size: 10.5px;
  color: #8a9099;
  margin-top: 1px;
}
.page-search-results .page-search-empty {
  padding: 10px 12px;
  font-size: 12px;
  color: #8a9099;
}
@media screen and (max-width: 720px) {
  .breadcrumb .page-search { width: 100%; margin-left: 0; margin-top: 6px; }
  .breadcrumb .page-search input { width: 100%; height: 36px; font-size: 15px; }
  .page-search-results { width: 100%; }
}

/* ---- Responsive: page content ---- */
@media screen and (max-width: 720px) {
  .content-row { flex-direction: column !important; }
  .photo-col { width: 100% !important; }
  .spec-cards { flex-direction: column !important; }
  .gallery { flex-wrap: wrap !important; }
  .gallery .g-item { flex: 1 1 45% !important; }
  .feat-grid { grid-template-columns: 1fr !important; }
  .page-shell { padding: 24px 18px !important; }
  .header .title, .header-row .title, .header .cat { font-size: 22px !important; }
}
@media screen and (max-width: 460px) {
  .gallery .g-item { flex: 1 1 100% !important; }
  .header-row { flex-direction: column; align-items: flex-start !important; gap: 8px; }
}

/* ---- Print ----
   The design is authored at 900px screen width, which does not map
   1:1 onto a physical A4 page. Rather than relying on the browser's
   own "shrink to fit" (inconsistent across browsers/printers and the
   original cause of pages 2-4 being mostly blank), we size the page
   shell in physical mm that exactly match the @page content area, and
   remove the screen-only padding so nothing is double-counted. Font
   sizes and spacing get a small print-only trim as extra headroom. */
@media print {
  .topbar, .drawer, .drawer-backdrop, .no-print { display: none !important; }

  @page { size: A4; margin: 10mm; }

  html, body { margin: 0 !important; padding: 0 !important; }

  .page-shell {
    max-width: none !important;
    width: 190mm !important;   /* 210mm A4 width minus 10mm margins each side */
    margin: 0 auto !important;
    padding: 0 !important;
  }

  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .spec-card, .content-row, .gallery, .spec-table, .photo-col { break-inside: avoid; }
  h1, h2, h3, .header { break-after: avoid; }
  a { color: inherit; text-decoration: none; }

  .page-shell { height:1022px;position:relative;overflow:hidden; }

  /* Force every page-shell onto its own physical sheet. Without this, a
     compiled multi-product document (print-all.php) relies purely on each
     shell being *exactly* 1022px to land on one A4 page — any tiny height
     drift lets a shell straddle a page break, and Chromium's print engine
     then renders any position:absolute descendant inside it (e.g.
     .photo-caption) stretched to fill the split fragment. Forcing the break
     here removes that dependency entirely; harmless on a single-shell page. */
  .page-shell { break-after: page; page-break-after: always; }

  /* Multi-table pages (drop-in/dropin8 templates) hold a variable number of
     spec tables per product — from 2 (Island models) to 16 (Gantries) — so
     forcing the single-page-tuned 1022px height above either clips content
     or misplaces the .pagenum footer mid-page. These flow across as many
     physical printed pages as their content needs instead; break-inside:
     avoid (above) keeps individual tables from splitting across that break. */
  .page-shell.page-shell--flow { height: auto; overflow: visible; }
}