/* Keep layout stable when scrollbars appear/disappear (supported in Chromium/Firefox) */
html { scrollbar-gutter: stable; }

/* JS will set this to the scrollbar width (e.g., 17px on Windows) */
:root { --rd-sbw: 0px; }

/* When modal is open, lock scroll BUT keep the same content width */
body.rdScrollLock {
  overflow: hidden !important;
  padding-right: var(--rd-sbw);
}

/* If you have any fixed full-width header/footer, it won't inherit body padding.
   Add your actual fixed bars/selectors here so THEY don't shift either. */
body.rdScrollLock .siteHeader,
body.rdScrollLock .header,
body.rdScrollLock #header,
body.rdScrollLock .bottomNav,
body.rdScrollLock .footerBar {
  padding-right: var(--rd-sbw);
}


*{
   box-sizing:border-box
}

button,input,select,textarea {
   font-family: inherit;
}

html,body {
  	height:100%;
  -webkit-tap-highlight-color: transparent;
}



body {
	margin:0;
	color:#000;
	background:#fff;
	font-weight: 400;
   font-size: 16px;
   line-height: 1.6;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
	/* NEW: sticky footer layout */
	min-height:100vh;
	display:flex;
	flex-direction:column;
}

.browse {
   background:#fff;
   padding: clamp(60px, 10vw, 66px) 0 50px;
   /* NEW: grow to fill available height */
   flex:1 0 auto;
}


a {
   text-decoration:none;
   color:inherit
}

.wrap {
   max-width:1200px;
   margin:0 auto;
   padding:0 0px
}


[hidden]{ 
   display:none !important; 
}

/* optional body no-scroll when modal open */
body.noScroll{
   overflow:hidden;
}

body.is-embed .legalHeader { display:none !important; } /* safety */
body.is-embed .browse { padding-top: 0 !important; }    /* if you padded for header */