/* The legacy site rendered in browser QUIRKS mode (no doctype), where percentage heights resolve against auto-height
   ancestors. Next.js always emits a doctype, so the few places that relied on the quirk are restored explicitly here. */
#header .row,
#header .row > div { height: 100%; }
html, body { height: auto; }

/* Card preview on the order form: in standards mode the overflow:hidden side box was squeezed to 0 width by earlier floats. */
.card-item { display: flow-root; }

/* Captcha inside the legacy login box: the box CSS makes every input/button 100% wide & floated, so lay it out explicitly. */
#lgboxcontent .captcha-box { display: block !important; width: 100% !important; float: none !important; clear: both; margin: 10px 0 !important; text-align: center; }
#lgboxcontent .captcha-box img { display: inline-block !important; width: 150px !important; height: 50px !important; float: none !important; margin: 0 4px 8px !important; vertical-align: middle; }
#lgboxcontent .captcha-box button { display: inline-block !important; width: 44px !important; height: 44px !important; min-width: 0 !important; padding: 0 !important; float: none !important; margin: 0 4px 8px !important; vertical-align: middle; background: #f0f0f0 !important; color: #333 !important; border: 1px solid #ccc !important; border-radius: 8px !important; font-size: 20px; }
#lgboxcontent .captcha-box input { display: block !important; width: 100% !important; height: 52px !important; float: none !important; margin: 0 !important; text-align: center; letter-spacing: 4px; text-transform: uppercase; }

/* login box must be able to grow (captcha + two fields) */
div#loginbox-container { height: 660px !important; }
div#myloginbox { max-height: none !important; }
#lgboxcontent .captcha-box input { max-width: 100% !important; }

/* Phones: the legacy stylesheet points the hero at /upload/gallery/…header-background2-min.jpg, a file that does not exist in the backup (404 → big white block),
   and its "height:570px !important" also hit inner pages whose header is meant to be a 100px bar. Use the existing hero image, and keep inner headers slim. */
@media screen and (max-width: 970px) {
  div#header { background: url(/images/IMG_6439_DNcompressed.jpeg) no-repeat center center / cover !important; }
  #header.headerin { height: 100px !important; }
}