/* 1. Slims down the vertical scroll track on Firefox */
html {
	scrollbar-width: auto;
    scrollbar-color: rgba(101, 85, 46, 0.5) rgba(174, 141, 57, 0.5);
	/*
	rgba(60, 45, 20, 0.85) rgba(0, 0, 0, 0.15)
	rgba(223, 183, 108, 0.5) rgba(0, 0, 0, 0.2);*/

	/*-webkit-mask-image: linear-gradient(to bottom, 
        rgba(0,0,0,0) 0px, 
        rgba(0,0,0,1) 40px, 
        rgba(0,0,0,1) calc(100% - 20px), 
        rgba(0,0,0,0) 100%);
        
    mask-image: linear-gradient(to bottom, 
        rgba(0,0,0,0) 0px, 
        rgba(0,0,0,1) 40px, 
        rgba(0,0,0,1) calc(100% - 20px), 
        rgba(0,0,0,0) 100%);*/
} 


/* 2. The proper way to balance the cushion on the body */
body {
	margin: 0;
	
	/* 🌟 THE COMFORT BUFFER:
       Keeps your document title starting exactly at the 40px mark, 
       where the html mask becomes 100% solid, ensuring it is perfectly sharp at launch! */
  	
	padding-top: 40px !important; 
    padding-bottom: 40px !important;   
    padding-left: 8px;
	padding-right: 8px;
	 
	width: 100%;
	box-sizing: border-box; /* Forces the browser to calculate the padding INSIDE the frame width */
	overflow-x: hidden; /* Keeps the bottom horizontal bar completely locked out */

}


/* 3. Your image stays fully fluid and matches your design rules */
img {
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: auto; 
	margin-right: auto; 
	display: block;
	width: 100%; /*Spreads out to perfectly fill the body's safe padded zone! width: calc(100% - 18px) !important;*/ 
	/*max-width: 100% !important;*/
	height: auto;


/* 🌟 STRIPPED DOWN: Erase the experimental image mask from the previous turn 
    -webkit-mask-image: none !important;
    mask-image: none !important;
}*/


/* 4. Slims down the vertical scroll track on Chrome, Safari, and Edge */
::-webkit-scrollbar {
    width: 14px; /* Slims the scrollbar down so it takes up very little room */
}

/* The Background Track Box Behind the Handle */
::-webkit-scrollbar-track {
    background: rgba(174, 141, 57, 0.5);
    border-radius: 6px;
}

/* THE MOVING HANDLE (THE THUMB) - NORMAL STATE */
::-webkit-scrollbar-thumb {
    background: rgba(101, 85, 46, 0.5); 
    border-radius: 6px;
	 border: 2px solid transparent;  /*Creates a clean edge buffer cushion */
}

/* THE MOVING HANDLE (THE THUMB) - HOVER STATE */
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.95); 
}


/* 1. Normal Parent Embedded View: Show the elegant magnifying glass 
.popup-zoom-image {
    cursor: zoom-in !important;
}*/

/* 2. Full-Screen Popup View Override: 
   When your JavaScript function copies or opens this file inside pop3, 
   the browser detects the full-screen layout environment and forces the cursor back to an arrow pointer! 
html:fullscreen .popup-zoom-image,
body:fullscreen .popup-zoom-image,
:root:not(:only-child) .popup-zoom-image {
    cursor: default !important;*/
}