/* GENERATED by build-mu-plugin.ps1 from the @chrome spans of mockup\site.css.
   Do not edit -- edit site.css between its @chrome-start/@chrome-end markers.
   5 spans, built 2026-09-30 08:01. */

/* rttheme19's own banner and footer, out of the way. Hidden rather than
   unhooked: the theme builds them in a template part, and a display:none is
   one line to take back out if any of this has to be reversed in a hurry. */
body.woocommerce-page header.top-header,
body.woocommerce-page #footer,
body.woocommerce-page .footer_info_bar{display:none!important}

/* Ours is printed at wp_body_open, so it is the first thing in the body. */
body.woocommerce-page{background:var(--paper)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}

/* ---------- header ---------- */
/* No backdrop-filter. Safari needs -webkit- for it, AND backdrop-filter on a
   position:sticky element is a long-standing Safari bug that can render the
   element blank or drop it entirely. The background was already 94% opaque so
   the blur bought nothing. -webkit-sticky first for older iPadOS. */
header{position:-webkit-sticky;position:sticky;top:0;z-index:50;background:var(--ink);
  border-bottom:1px solid var(--line-d)}
.bar{display:flex;align-items:center;gap:34px;height:74px}
.logo img{height:34px;width:auto}
nav{display:flex;gap:22px;margin-left:auto;align-items:center}
/* nowrap matters: "Open System" and "Cart (0)" were the only two-word items, so they were the
   only ones that could wrap. Wrapped, they rendered double height against 35px neighbours and
   sat out of line. Measured: with nothing wrapping the full nav needed 1149px, which is why the
   collapse below runs at 1150 and not at the 980 the rest of the layout uses.
   2026-09-29, two label changes since: the cart link says "Cart" now -- nav.js adds the number
   only when there is one -- which is 26px narrower (67px to 40px); and "Support" became
   "Manuals", to match the page's own title, which puts 4px back. Measured after both: the nav
   is 928px and the header needs 1127px. The collapse is left at 1150 on purpose: it works, and
   the slack costs nothing. */
nav a{white-space:nowrap;color:rgba(255,255,255,.82);text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:6px 0;border-bottom:2px solid transparent;transition:.15s}
/* Collapsed-nav controls. Inert above 980 - see the media query below. */
.nav-toggle{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.burger{display:none}
nav a:hover{color:#fff;border-bottom-color:var(--red)}
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:3px;font-weight:700;font-size:13px;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;border:2px solid transparent;transition:.16s;cursor:pointer;white-space:nowrap}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-dk)}
.btn-ghost{border-color:rgba(255,255,255,.3);color:#fff}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.07)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink3)}
.btn-line{border-color:var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}
.cart{color:#fff;text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;opacity:.82}
.cart:hover{opacity:1}

footer{background:var(--ink);color:rgba(255,255,255,.6);padding:72px 0 34px;font-size:14px}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid var(--line-d)}
footer h4{font-family:var(--disp);font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin:0 0 16px;font-weight:700}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
footer a{color:rgba(255,255,255,.6);text-decoration:none}
footer a:hover{color:#fff}
.f-bot{padding-top:26px;display:flex;justify-content:space-between;gap:20px;font-size:13px;flex-wrap:wrap}
.f-logo{height:32px;margin-bottom:18px}

/* The footer's own collapse. It used to live in the general 980 block, which the mu-plugin
   cannot take -- that block also repaints sections and card grids, and the WooCommerce page
   between our header and our footer belongs to somebody else's theme. On its own here, both
   the static site and the shop get it. Without it the shop footer stayed four columns on a
   phone and pushed the page 154px sideways. */
@media(max-width:980px){ .f-grid{grid-template-columns:1fr 1fr} }

@media(max-width:1150px){
  .burger{display:flex;margin-left:auto;width:46px;height:46px;cursor:pointer;
    flex-direction:column;align-items:center;justify-content:center;gap:5px;border-radius:4px}
  .burger span{display:block;width:23px;height:2px;background:#fff;transition:.2s}
  .nav-toggle:focus-visible+.burger{outline:2px solid var(--red);outline-offset:3px}
  .nav-toggle:checked+.burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle:checked+.burger span:nth-child(2){opacity:0}
  .nav-toggle:checked+.burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  nav{display:none;position:absolute;left:0;right:0;top:74px;flex-direction:column;
    align-items:stretch;gap:0;margin:0;padding:10px 0 16px;background:var(--ink);
    border-top:1px solid var(--line-d);box-shadow:0 26px 50px rgba(0,0,0,.45)}
  .nav-toggle:checked~nav{display:flex}
  nav a{padding:14px 26px;border-bottom:0;font-size:14.5px}
  nav a:hover{color:#fff;background:rgba(255,255,255,.07);border-bottom-color:transparent}
  nav .cart{border-top:1px solid var(--line-d);margin-top:8px;padding-top:18px}
  nav .btn{margin:12px 26px 0;justify-content:center}
}