/* flyout.css (2026-11-13): "Our Products" + "Shopping Cart" flyouts, desktop only.
   roll-out animation, extremely dark red background at 24% transparency, 1px website-red border, 1px yellow border on the light product cards,
   product graphics are videos that play on hover (flyout.js). Loaded last in <head> on every page that has the menu. */
@media (min-width:960px){
 html body .nav .flyout{
  background:rgba(20,2,2,.76)!important;               /* extremely dark red, 24% transparent */
  border:1px solid #680000!important;                    /* website red */
  box-shadow:0 28px 64px rgba(0,0,0,.5)!important;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#fff;
  opacity:0;transform:translateY(-10px);clip-path:inset(0 0 100% 0);
  transition:clip-path .65s cubic-bezier(.22,.9,.28,1),opacity .35s ease,transform .65s cubic-bezier(.22,.9,.28,1)!important;
 }
 html body .nav .flyout.is-visible{opacity:1;transform:none;clip-path:inset(-18px -18px -18px -18px)}
 /* cards drop in one after another while the panel rolls out */
 html body .nav .flyout .fly-card{opacity:0;transform:translateY(-14px);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.9,.3,1)}
 html body .nav .flyout.is-visible .fly-card{opacity:1;transform:none}
 html body .nav .flyout.is-visible .fly-card:nth-child(1){transition-delay:.14s}html body .nav .flyout.is-visible .fly-card:nth-child(2){transition-delay:.19s}
 html body .nav .flyout.is-visible .fly-card:nth-child(3){transition-delay:.24s}html body .nav .flyout.is-visible .fly-card:nth-child(4){transition-delay:.29s}
 html body .nav .flyout.is-visible .fly-card:nth-child(5){transition-delay:.34s}html body .nav .flyout.is-visible .fly-card:nth-child(6){transition-delay:.39s}
 html body .nav .flyout.is-visible .fly-card:nth-child(7){transition-delay:.44s}html body .nav .flyout.is-visible .fly-card:nth-child(8){transition-delay:.49s}
 html body .nav .flyout.is-visible .fly-card:nth-child(n+9){transition-delay:.54s}
 /* the light product backgrounds get a 1px website-yellow border */
 html body .nav .flyout .fly-card{border:1px solid #F5B800}
 /* text that sits directly on the dark background */
 html body .nav .flyout .fly-more{border-top-color:rgba(255,255,255,.18)}
 html body .nav .flyout .fly-more a{color:#FFD54A}
 /* product videos use the same box as the old pictures */
 html body .nav .flyout .fly-item video{width:180px;height:101px;max-height:none;border-radius:10px;object-fit:cover;display:block;background:#0B1F3A;cursor:pointer}
}
@media (prefers-reduced-motion:reduce){
 html body .nav .flyout{transition:none!important;clip-path:none!important;transform:none!important}
 html body .nav .flyout .fly-card{transition:none;opacity:1;transform:none}
}