/* Copier Rental: the machine room (approved preview). Navy #151554 is the family colour shared with Printer Rental.
   The memorable thing is the technical drawing in the hero (leader lines to what every listing tells you) and the
   rating plate on every card. Signal yellow only marks a point or the main action, never fills an area.
   Loaded after theme.css; :root:root outranks the theme.json presets printed in the head. */
:root:root {
  --cr-navy: #151554; --cr-steel: #E8EBF1; --cr-ink: #15162E; --cr-signal: #F2A900;
  --wp--preset--color--blue: var(--cr-navy); --wp--preset--color--blue-dark: #0E0E3D; --wp--preset--color--blue-50: var(--cr-steel);
  --wp--preset--color--navy: var(--cr-navy); --wp--preset--color--deep: var(--cr-navy); --wp--preset--color--ink: var(--cr-ink);
  --wp--preset--color--muted: #535A6E; --wp--preset--color--line: #D3D8E2; --wp--preset--color--soft: var(--cr-steel);
  --wp--preset--font-family--heading: "Schibsted Grotesk", system-ui, sans-serif; --wp--preset--font-family--body: "Schibsted Grotesk", system-ui, sans-serif;
  --blue: var(--cr-navy); --blue-d: #0E0E3D; --blue-50: var(--cr-steel); --blue-100: #DCE0EA;
  --navy: var(--cr-navy); --deep: var(--cr-navy); --ink: var(--cr-ink); --muted: #535A6E; --line: #D3D8E2; --soft: var(--cr-steel);
  --font-h: "Schibsted Grotesk", system-ui, sans-serif; --cr-num: "Barlow Condensed", "Schibsted Grotesk", system-ui, sans-serif;
  --r: 6px; --r-lg: 10px;
}
.cr-site-copierrental :where(a, button, input, select):focus-visible { outline: 3px solid var(--cr-signal); outline-offset: 2px; }
.cr-site-copierrental .cr-topbar { background: var(--cr-navy); color: #D9DCF0; }
.cr-site-copierrental .cr-wordmark { color: var(--cr-navy); }
.cr-site-copierrental .cr-wordmark--foot { color: #fff; }
.cr-site-copierrental .cr-wordmark--foot .cr-za { color: #C9CCE6; }
.cr-site-copierrental h1, .cr-site-copierrental h2 { font-weight: 800; letter-spacing: -.02em; }
.cr-site-copierrental .wc-block-mini-cart__badge { background: var(--cr-signal) !important; color: var(--cr-ink) !important; }

/* hero: navy, copy left, the drawing right */
.cr-cr-hero { background: var(--cr-navy); color: #fff; overflow: hidden; }
.cr-cr-hero__in { display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; align-items: center; max-width: 1180px; margin: 0 auto; padding: 52px var(--gutter); }
.cr-cr-hero h1 { color: #fff; font-size: clamp(36px, 5vw, 56px); line-height: 1.03; max-width: 12ch; margin: 0; }
.cr-cr-hero__copy > p { font-size: 18px; color: #C9CCE6; max-width: 46ch; margin: 18px 0 26px; }
.cr-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.cr-cr-hero .wp-element-button { background: var(--cr-signal); color: var(--cr-ink); padding: 14px 22px; }
.cr-cr-hero .wp-element-button:hover { background: #FFC233; text-decoration: none; }
.cr-cr-hero .cr-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px currentColor; }
.cr-cr-hero .cr-ghost:hover { background: rgba(255, 255, 255, .08); }

/* the drawing: a machine on a blueprint grid with leader lines to labelled points */
.cr-drawing { position: relative; margin: 0; aspect-ratio: 1.15 / 1; border-radius: 10px; color: var(--cr-navy);
  background-color: #EEF0F6; background-image: linear-gradient(#1515541a 1px, transparent 1px), linear-gradient(90deg, #1515541a 1px, transparent 1px); background-size: 24px 24px; }
.cr-drawing img { position: absolute; left: 30%; top: 10%; width: 40%; height: 70%; object-fit: contain; mix-blend-mode: multiply; }
.cr-callouts { list-style: none; margin: 0; padding: 0; }
.cr-callouts li { position: absolute; font-size: 13px; font-weight: 700; line-height: 1.3; width: 24%; color: var(--cr-navy); }
.cr-callouts li::before { content: ""; position: absolute; height: 1.5px; background: var(--cr-navy); top: .65em; }
.cr-callouts li::after { content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--cr-signal); border: 2px solid var(--cr-navy); top: calc(.65em - 4px); }
.cr-c1 { top: 12%; left: 3%; } .cr-c1::before { left: 100%; width: 14%; } .cr-c1::after { left: calc(100% + 14%); }
.cr-c2 { top: 44%; left: 3%; } .cr-c2::before { left: 100%; width: 18%; } .cr-c2::after { left: calc(100% + 18%); }
.cr-c3 { top: 62%; right: 3%; text-align: right; } .cr-c3::before { right: 100%; width: 16%; } .cr-c3::after { right: calc(100% + 16%); }
.cr-c4 { top: 20%; right: 3%; text-align: right; } .cr-c4::before { right: 100%; width: 12%; } .cr-c4::after { right: calc(100% + 12%); }
.cr-drawing figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 16px; font-size: 14px; color: var(--muted); border-top: 1.5px solid var(--cr-navy); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cr-drawing figcaption b { color: var(--cr-navy); font-family: var(--cr-num); font-size: 22px; }

/* cards: the machine on steel, the rating plate in navy */
.cr-site-copierrental .cr-pgrid { gap: 22px !important; }
.cr-site-copierrental .cr-pgrid > li { border-radius: 10px; padding: 16px 18px 18px; }
.cr-site-copierrental .cr-pgrid > li:hover { border-color: var(--cr-navy); box-shadow: none; }
.cr-site-copierrental .cr-pcard__img { background: var(--cr-steel); border-radius: 6px; padding: 12px; }
.cr-site-copierrental .cr-pcard__img img { height: 170px !important; mix-blend-mode: multiply; }
.cr-site-copierrental .cr-pcard__name { font-size: 16px !important; font-weight: 700 !important; }
.cr-site-copierrental .cr-plate { color: var(--cr-navy); }
.cr-site-copierrental .cr-plate b { font-family: var(--cr-num); font-size: 18px; color: var(--cr-navy); }
.cr-site-copierrental .cr-cond { background: transparent; padding: 0; color: var(--muted); font-weight: 600; }
.cr-site-copierrental .cr-cond--rent { color: var(--cr-navy); font-weight: 700; }

/* the four brands we rent, above the cards */
.cr-brands { grid-template-columns: repeat(4, 1fr); margin: 0 0 34px; }
.cr-brands a { border-color: var(--line); border-left: 4px solid var(--cr-navy); }
.cr-brands a:hover { border-color: var(--cr-navy); }
.cr-brands b { font-size: 18px; color: var(--cr-navy); }
.cr-site-copierrental .cr-pcard__price { font-family: var(--cr-num); font-size: 26px !important; color: var(--cr-navy); margin-top: auto !important; }

/* "which speed" table */
.cr-steel { background: var(--cr-steel); padding: 48px var(--gutter); margin-top: 30px; }
.cr-choose { max-width: 948px; margin: 0 auto; }
.cr-choose h2 { font-size: 28px; margin: 0 0 18px; }
.cr-choose table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; }
.cr-choose th, .cr-choose td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--line); font-size: 15px; }
.cr-choose th { background: var(--cr-navy); color: #fff; font-weight: 600; }
.cr-choose p { color: var(--muted); margin: 16px 0 0; }

.cr-site-copierrental .cr-footer { background: var(--cr-navy); color: #D9DCF0; }
.cr-site-copierrental .cr-footer a { color: #D9DCF0; }

@media (max-width: 781px) {
  .cr-cr-hero__in { grid-template-columns: 1fr; padding-top: 30px; padding-bottom: 30px; gap: 28px; }
  .cr-callouts li { font-size: 10.5px; width: 27%; }
  .cr-drawing img { left: 31%; width: 38%; }
  .cr-site-copierrental .cr-pcard__img img { height: 120px !important; }
  .cr-choose th, .cr-choose td { padding: 10px 12px; font-size: 14px; }
  .cr-brands { grid-template-columns: repeat(2, 1fr); }
}